docs

Styling

Headless stepper mirrors root, item, trigger, connector, and panel state through stable data attributes. You own spacing, icons, connector lines, panels, and all visual density.

Slot and state hooks

Selector	Who owns it	Typical use
`[data-slot="stepper"]`	Library	Root spacing, orientation, linear mode, and wrapper-level layout.
`[data-slot="stepper-item"]`	Library	Step row visuals keyed by `data-state`, `data-optional`, and index.
`[data-slot="stepper-trigger"]`	Library	Focusable trigger styling, focus rings, disabled affordances, and current emphasis.
`[data-slot="stepper-connector"]`	Library	Connector lines or progress rails between steps.
`[data-state]`	Library	`current`, `completed`, `upcoming`, `disabled`, or `error`.

CSS starter

[data-slot="stepper"] {
  display: grid;
  gap: 0.75rem;
}

[data-slot="stepper-item"] {
  border: 1px solid var(--tng-semantic-border-subtle);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

[data-slot="stepper-trigger"] {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  display: inline-flex;
  gap: 0.5rem;
}

[data-slot="stepper-trigger"]:focus-visible {
  outline: 2px solid var(--tng-semantic-accent-brand);
  outline-offset: 3px;
}

[data-slot="stepper-item"][data-state="current"] {
  border-color: var(--tng-semantic-accent-brand);
}

[data-slot="stepper-item"][data-state="completed"] {
  border-color: var(--tng-semantic-accent-success);
}

[data-slot="stepper-item"][data-state="error"] {
  border-color: var(--tng-semantic-accent-danger);
}

Practical guidance

Prefer data-state for styling and aria-current="step" for semantic checks.
Use data-step-index only for generated counters or connector math.
Style aria-disabled="true" triggers as blocked without removing readable labels.
Keep panel animations tied to [data-slot="stepper-panel"][data-state].