#Stepper

Stepper presents a bounded sequence of stages for setup, convergence, release, or another process with a known order. Use Timeline instead when timestamps and event history are the primary information.

npm install @a3s-lab/ui@0.3.0

<ol class="stepper" aria-label="Release progress" tabindex="0">
  <li data-state="success">
    <span data-step-marker aria-hidden="true">1</span>
    <section>
      <h3>Build</h3>
      <p>Complete</p>
    </section>
  </li>
  <li data-state="active" aria-current="step">
    <span data-step-marker aria-hidden="true">2</span>
    <section>
      <h3>Publish</h3>
      <p>In progress</p>
    </section>
  </li>
</ol>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

Use a native ordered list and keep every stage label textual.

<ol class="stepper" aria-label="Release progress" tabindex="0">
  <li data-state="success">
    <span data-step-marker aria-hidden="true">1</span>
    <section>
      <h3>Build</h3>
      <p>Complete</p>
    </section>
  </li>
  <li data-state="active" aria-current="step">
    <span data-step-marker aria-hidden="true">2</span>
    <section>
      <h3>Publish</h3>
      <p>In progress</p>
    </section>
  </li>
</ol>

#Parameters

#States and variants

The default horizontal layout remains scrollable when the sequence is wider than its container. Use data-orientation="vertical" in narrow panes or when stage descriptions need more room. Omit data-state for pending neutral stages; reserve warning and danger for real process conditions.

#Accessibility

Name the ordered list and keep every stage name and state in text. Apply aria-current="step" to exactly one current stage. When the horizontal sequence can overflow, add tabindex="0" so keyboard users can scroll it; the A3S recipe supplies a visible focus ring. Decorative numeric or icon markers may be hidden from assistive technology because the list already communicates order. Do not rely on connector or marker color alone.