Steps

c2-steps

A list of steps: the trace of a task as it runs, or a wizard's progress — vertical by default, or across the top of a view with orientation="horizontal". Each row is a marker, a label, an optional dimmed detail beside it and trailing text at the end — a duration, a count, a timestamp.

A step with sub-steps is a group, and a group is a disclosure: its own row is the summary and its sub-steps are the detail. Every step is a row, and every row is visible — a group starts expanded and nothing ever folds one away on its own. The chevron is there for the reader, collapsed in the markup starts a stage folded, and the run only ever brings a folded stage back into view when it starts running or something in it fails.

Author it either way, and mix them freely:

• Declarative — slot c2-step children and nest them for sub-steps.
• Data-driven — hand it a steps array of { id, label, detail, trailing, status, children } and it renders the tree itself. The array wins when both are present. During a run, updateStep(id, patch) changes one step without rebuilding the array.

Everything the markup fills with a slot, the data-driven mode fills with a renderer: renderMarker for the marker slot, renderToggle for toggle, renderLabel / renderDetail / renderTrailing for the text, and renderItem for that text all at once. Each is handed the node, its depth, its position, its dotted path and the status actually in effect.

A parent step that does not author a status takes one from its children: the most urgent thing inside wins, so a stage reports that it is running, or that something under it failed, without you setting it.

current is the shortcut a wizard wants: set it to the index of the active step and every top-level step that has neither an explicit status nor sub-steps becomes success before it, current at it and pending after.

A step that arrives while the list is already on screen grows into place rather than appearing, and a marker gives one beat as its status settles — which is what a trace being written in front of you should look like. --c2-step--enter-duration: 0s turns the first off, and prefers-reduced-motion turns both off.

The connector rail between markers is drawn by CSS and off by default, because a trace does not want one — give --c2-step__rail--width a width and a stepper gets its rail.

Numbering follows the tree: marker="number" draws a dotted path, so the first child of the third step reads 3.1 rather than a second 1.

Horizontal. orientation="horizontal" lays the top-level steps out side by side, each a column with its marker on a connector rail and its text underneath. Sub-steps are not drawn there — a group still rolls their status up, so a stage reads as running or failed — and the list scrolls sideways rather than squeezing a step below --c2-step__row__horizontal--min-width.

Interactive. interactive turns every row that is not a disclosure into a button, and the list keeps one selected step: selected names it by its value (a data node's id), or by its dotted path when it has none. Pressing a step selects it and fires selection-change; a disabled step cannot be selected. That is how a view follows a task — select the step that is running to show its log, select the result when it finishes, and the reader can still press the first step to go back to the log. Selection is independent of status: the list never moves it on its own.

c2-step

One row of a Steps list: a marker, a label with optional dimmed detail, and trailing text at the end of the row — a duration, a count, a timestamp.

A step with sub-steps is a group. Nest c2-step children and the row becomes the summary of a disclosure and the children its detail, so a long run collapses to the shape of the task rather than to a wall of lines. There is no second element to learn: the same tag is a leaf or a group depending on what is inside it.

Every step is a row, and every row is visible. A group starts expanded and nothing ever folds one away on its own: the chevron is there for the reader, and collapsed in the markup starts a stage folded. The run only ever brings a stage back into view — a folded one reopens when it starts running (running, current) or when something in it goes wrong (error, warning).

A step is one row. Label, detail and trailing text sit on a single line and truncate with an ellipsis rather than wrapping, so a hundred-step trace stays scannable, and a sub-step is indented far enough that its marker lands under its parent's label. --c2-step__text--flex-direction: column still stacks the detail under the label, which a wizard's descriptions want — that is two lines on purpose, and each of them is still one line.

In an interactive list a row is a button. Pressing it selects the step — the list keeps one selected step and says so with selection-change — so a view can show what belongs to it: the log of the step that ran, the result of the step that produced one. A group's row stays its disclosure; disabled keeps a step from being selected.

The step never sets its own depth, position, marker mode, orientation or selection: the parent c2-steps writes them on every pass, so a step used on its own renders as a single root-level row.

States. The step never writes an attribute on its own host — not even the status the list rolls up or the collapsed a reader toggles, neither of which reflects — so server-rendered markup matches the hydrated element. Page CSS reads the step through custom states instead: its status (c2-step:state(running), :state(success), :state(error), :state(warning), :state(current), :state(skipped), :state(pending)), :state(collapsed), :state(has-children) for a group, :state(last) for the last step of its group, :state(grouped) when the list holds any group, the marker mode as :state(marker-icon), :state(marker-number) or :state(marker-none), and the two animations: :state(entering) while a step that arrived in a running trace grows into place, and :state(settling) while its marker gives the beat of a changed status.