Stepper

Stepper is an ordered list that reports where a protocol or a multi-step task stands. Each step is complete, current, upcoming, or a question that still needs confirming. It takes no input: it shows what the caller tells it. Callers pass the steps as data, and the component owns the layout. The states come from current, from each step's own state, or both. With current="details", the steps before it are complete, it is current, and the rest are upcoming. A state set on a step wins, so a question can sit anywhere and a step can stay complete after the current one has moved on. With neither, a step is upcoming. The stepper has no uncontrolled mode: whoever knows how far the work has got passes it. stateLabels is required and has one entry for every state. Each row starts with that text, hidden, so a screen reader hears "Completed, Confirm nature of event". The marks are decorative. The list needs a name: aria-label, or aria-labelledby pointing at a visible heading such as the panel header. Pass announcement to have a change read aloud. It receives the step and the state it moved to, and returns the sentence ("Now: Medical history"). The stepper never speaks on the first render, never for a step that is new to the list, and speaks at most once per update. A step that became current wins over one that became complete, so moving from one step to the next reads once. The stepper adds no copy of its own. Labels wrap inside the row and the mark stays level with the first line. A long list does not scroll itself: put it in a bounded Scrollable, as the panel below does. The "Live Guidance Protocol" panel is a composition in the stories, not a component: a Collapsible whose header is the title, a Scrollable that stops at about 221px of panel, and a Stepper inside. It is laid over the bottom of a transcript, above the composer. It becomes a block once the chat components have landed; see CONTRACT.md. Horizontal orientation, navigable steps, error and skipped states, step descriptions, a connecting rail.