Styling contract
Style against explicit data hooks from the collapsible host and each step item. Keep state tokens centralized so current/completed/error remain visually consistent across flows.
State hooks
| Hook | Where | Use |
|---|---|---|
data-slot="collapsible" | Root | Container spacing, orientation layouts, connector styling. |
data-state="current" | Owner-authored child item | Active step emphasis and readable focus baseline. |
data-state="completed" | Owner-authored child item | Past-step confirmation colors and icon treatment. |
data-state="upcoming" | Owner-authored child item | Muted future-step presentation. |
data-state="error" | Owner-authored child item | Validation/processing failure styling. |
CSS starter
Collapsible state contract
css
[data-slot="collapsible"] {
display: grid;
gap: 0.65rem;
}
[data-slot="collapsible"] [data-state="current"] {
border-color: var(--tng-semantic-accent-brand);
background: color-mix(in srgb, var(--tng-semantic-accent-brand) 12%, transparent);
}
[data-slot="collapsible"] [data-state="completed"] {
border-color: var(--tng-semantic-accent-success);
}
[data-slot="collapsible"] [data-state="error"] {
border-color: var(--tng-semantic-accent-danger);
}