Progress
- Layer: Component
- Base:
@ark-ui/solid/progress+ custom styling
Determinate
Section titled “Determinate”0–100%
| Visual element | Token / value |
|---|---|
| Track | 4px tall, --colors-bg-muted, radius-pill. |
| Range | --colors-accent-default fill + 0 0 8px var(--colors-accent-glow) halo. |
| Label | Mono · 10px · letter-spacing: 0.04em · --colors-text-muted. |
Indeterminate
Section titled “Indeterminate”Idle / unknown ETA
Pass indeterminate (or omit value) to render a sweeping range animation. The track stays bounded — the animation does not pulse opacity.
Plane 1 Constraints
Section titled “Plane 1 Constraints”The 8px accent-glow halo on the range fill is the one allowed glow in this primitive — it sits below the focus-ring threshold and signals progress, not elevation. No drop shadow is applied to the track.
Accessibility
Section titled “Accessibility”Wraps @ark-ui/solid/progress, which manages role="progressbar", aria-valuemin, aria-valuemax, aria-valuenow, and the indeterminate state via the absence of value. The DS adds the visual layer only.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current value, 0–max (default max 100). |
max | number | 100 | Upper bound. |
indeterminate | boolean | false | Render the indeterminate sweep. |
label | string | — | Mono caption rendered below the track. |
aria-label | string | — | Required when no visible label is provided. |