Steps

c2-steps

A vertical list of steps: the trace of a task as it runs, or a wizard's progress. 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.

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.

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