# Progress

A native `<progress>` element styled as a slim bar. Sizes scale the height, variants switch between bordered surface and soft fills. Omit `value` to show the UA-native indeterminate animation.



## Install

```ts
import "elements-kit/ui/styles.css";

import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";
import "elements-kit/ui/styles/palette/black-alpha.css";
import "elements-kit/ui/styles/palette/mint.css";
import "elements-kit/ui/styles/accent/mint.css";

import "elements-kit/ui/progress/progress.css";
```

## API

```html
<progress
  class="x-progress"
  data-size="2"
  data-variant="surface"
  value="40"
  max="100"
/>
```

| Attribute                                    | Values                                                       |
| -------------------------------------------- | ------------------------------------------------------------ |
| `data-variant`                               | `surface` (default), `soft`                                  |
| `data-size`                                  | `1`, `2` (default), `3`                                      |
| `data-accent` *(on a parent or the element)* | any imported color scale                                     |
| `value`                                      | number in `[0, max]` — omit for indeterminate                |
| `max`                                        | number, defaults to `1` per HTML spec; commonly set to `100` |

## Sizing

| `data-size`     | height                     |
| --------------- | -------------------------- |
| `1`             | `--space-1` (\~4px)        |
| `2` *(default)* | `--space-2 × 0.75` (\~6px) |
| `3`             | `--space-2` (\~8px)        |

Width fills the parent (`width: 100%`).

## Variants

* **`surface`** *(default)* — bordered track (`--neutral-a3` + 1px `--neutral-a5` inset), solid `--accent-9` fill.
* **`soft`** — flat `--neutral-a4` track, desaturated `--accent-a8` fill. Less visual weight.

## States

* **Determinate** — set `value` and `max`. The fill animates between values (120ms).
* **Indeterminate** — omit `value`. The UA paints its native animation (a moving stripe in Chromium, a sliding bar in Firefox). Engines differ visually; for fully consistent indeterminate styling, override with custom keyframes.

## Accessibility

`<progress>` is announced as "progress bar" with current value and max. No extra ARIA needed for the simple case. For indeterminate progress that's running a long operation, add an `aria-label` describing what's happening:

```html
<progress class="x-progress" aria-label="Loading projects" />
```

> **Don't**
>
> Use a progress bar to indicate a state with discrete steps. For multi-step flows use a stepper / breadcrumb pattern instead.