Stepper

[pghqdev]

What to build

A multi-step flow indicator — <ol data-stepper> with numbered step items. Each step is an <li> with a label (and optional <button> for navigation). Steps carry three states: completed (check mark), active (accent ring), and pending (muted).

Uses existing button and accent tokens. No JS — state is driven by aria-current="step" on the active <li> and aria-checked="true" on completed ones.

Acceptance criteria

• <ol data-stepper> renders numbered step items in a horizontal layout (vertical on narrow viewports)
• Active step marked with aria-current="step" — accent ring or fill
• Completed step marked with aria-checked="true" — check mark
• Pending steps — muted, with a connecting line between steps
• Responsive: horizontal on wide, vertical on narrow
• All styles in @layer hikari
• Kitchen-sink demo shows completed/active/pending states
• rules/hikari-rules.md updated with markup example

Blocked by

None — can start immediately.