# Stepper

> Multi-step process indicator.

- **Level**: molecule · **Status**: stable · **Role**: navigation
- **Import**: `import { Stepper } from "@rrios-forge/ui/molecules/stepper";`
- **Source**: `packages/ui/src/molecules/stepper`

<ol role="list"> with per-step status (complete | current | upcoming | error). Status carries on glyph + index, never on colour alone (R14). Current step also carries aria-current=step.

## Use it for

- Filters / pagination / stepper → `FilterBar` / `Pagination` / `Stepper`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `orientation` | — | `horizontal` `vertical` | `horizontal` | The direction the parts run: a row (horizontal) or a column (vertical); responsive stacks on phones and runs in a row from sm. |
| `status` | — | `complete` `current` `upcoming` `error` | `upcoming` | Progress state of a step. |

## Stories

- [Playground](/?path=/story/components-molecules-stepper--playground) · frame: `/iframe.html?id=components-molecules-stepper--playground&viewMode=story`
- [Horizontal](/?path=/story/components-molecules-stepper--horizontal) · frame: `/iframe.html?id=components-molecules-stepper--horizontal&viewMode=story`
- [Vertical](/?path=/story/components-molecules-stepper--vertical) · frame: `/iframe.html?id=components-molecules-stepper--vertical&viewMode=story`
- [With error](/?path=/story/components-molecules-stepper--with-error) · frame: `/iframe.html?id=components-molecules-stepper--with-error&viewMode=story`
- [Completed](/?path=/story/components-molecules-stepper--completed) · frame: `/iframe.html?id=components-molecules-stepper--completed&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).