# Source: `components/velin-stepper.js` ## Minimal working example Copy-paste starter (load CSS + `velinstyle-components` / `bootFromDOM` as needed): ```html ``` _Example derived from human component docs (`exampleSource: human-doc`; fail-closed extract — not a second SoT)._ ## Accessibility WCAG contract status: **pass** (framework target: AAA). - **Roles:** `list` - **Keyboard:** N/A (display); pair with buttons calling next()/prev() - **Notes:** aria-label per step (completed/current/upcoming); sr-only Completed text; aria-current on active step. ## Attributes | Attribute | Notes | | --- | --- | | `active` | Observed — triggers `attributeChangedCallback` when changed | | `aria-label` | Observed — triggers `attributeChangedCallback` when changed | | `labels` | Observed — triggers `attributeChangedCallback` when changed | ## Events - `velin-step-change` (bubbles) ## CSS parts - `panels` - `steps` ## Slots - `(default)` ## Public API | Kind | Name | | --- | --- | | Method | `goTo()` | | Method | `next()` | | Method | `prev()` | ## Related resources - Generated API docs (canonical): [`velin-stepper.md`](./velin-stepper.md) - Generated index: [README.md](./README.md) - CLI API: `npx velinstyle wc api velin-stepper` - Human docs EN (tutorial): `docs/components/stepper.html` - Human docs DE (tutorial, lang-map): `docs/components/schrittanzeige.html` - Atelier showcase (DIRECT CE match, `25-onboarding-wizard`): `atelier/library/showcases/25-onboarding-wizard/index.html` - Atelier library (showcases — **not** a 1:1 Component map): `atelier/library/index.html`