HyStepper

An ordered, accessible progress stepper. Orchestrates a slotted set of hy-step children: it renders the step rail (indicators, labels, connectors), owns keyboard navigation and the active-step state machine, gates which steps can be reached (linear vs. non-linear), and emits a cancelable before-change plus a change event.

Accessibility model

The rail is an ordered navigation list — <nav aria-label> → <ol> → <li> per step — NOT a tablist. The current step carries aria-current="step"; completed / upcoming status is conveyed by a visually-hidden text label per step. This is the convergent accessible-stepper pattern (USWDS, Carbon, PatternFly, WAI-ARIA aria-current guidance), not the tab pattern.

Controlled

active-step is controlled, like hy-tab-group's active-panel. The stepper emits intent (before-change, cancelable) and the resulting change; the consumer owns which step is active. The stepper self-manages each child's derived status (completed / active / upcoming), preserving a non-current step that the consumer flagged status="error".

Keyboard

• Arrow Right/Left (horizontal) or Down/Up (vertical): move focus between navigable steps (roving tabindex).
• Home / End: first / last navigable step.
• Enter / Space / Click: activate the focused step (subject to gating and the before-change veto).

Examples

Linear wizard

<hy-stepper active-step="0" label="Checkout">
  <hy-step label="Cart"><p>…</p></hy-step>
  <hy-step label="Shipping"><p>…</p></hy-step>
  <hy-step label="Payment"><p>…</p></hy-step>
</hy-stepper>

Events

• change - Fired when the active step changes (user or programmatic). Detail: { activeStep: number, previousStep: number }
• before-change - Cancelable. Fired on a user-initiated step change before change. Call event.preventDefault() to veto (e.g. block advancing until the current step validates). Not fired for programmatic active-step updates. Detail: { activeStep: number, previousStep: number }

Slots

• default - The hy-step children.

Methods

next()

Advance to the next step. Returns true if it moved.

previous()

Go back one step. Returns true if it moved.

goTo()

Jump to a specific step (subject to gating + before-change). Returns true if it moved.

reset()

Reset to the first step and clear any error statuses. Always succeeds; emits change.