# Step rail and section progress

The vertical rail beside a guided editor (sections with marks and summaries) and the segmented progress meter (navy done, ring current, red error, border to do).

- **Group:** Wizard and stepper · **family:** `wizard-stepper` · **shadcn:** Progress
- **Build:** Rail = nav list; meter = segmented `Progress`.
- **In apps/admin today:** Progress exists.
- **Client component:** no. 

## Content rules

- Summaries are the chosen values ("VBC Perennial · 3 cloths").

## Do

- Keep the rail sticky.

## Don't

- Use percentages.

## Accessibility

- **Keyboard:** Items are links to sections.
- **ARIA:** Meter: `role="progressbar"` with `aria-valuetext="3 of 6 sections complete"`.
- **Focus:** Ring.

## Tokens

`--font-voice` `--font-stretch-title` `--primary` `--primary-foreground` `--accent` `--destructive` `--muted` `--border` `--muted-foreground` `--s-2` `--s-4` `--text-card` `--w-semibold` `--text-small` `--r-chip` `--motion-sheet-in` `--ring` `--r-control` `--foreground` `--motion-hover` `--text-11` `--w-medium` `--text-micro` `--r-card` `--s-3` `--card` `--control-h-m` `--motion-pop-in`

## Files

`step-rail.html` live specimen · `step-rail.css` kit rules · `step-rail.d.ts` props · full page: `docs/components/step-rail/` (phone: `m/`).