Steps

Progress tracker for multi-step flows. Uses a semantic <ol> — step numbers come from a CSS counter, and connectors are drawn between items (no extra markup).

Markup

1. Account
2. Details
3. Payment
4. Confirm

<ol class="af-steps">
  <li class="af-step af-is-complete">
    <span class="af-step-number" aria-hidden="true"></span>
    <span class="af-step-label">Account</span>
  </li>
  <li class="af-step af-is-complete">
    <span class="af-step-number" aria-hidden="true"></span>
    <span class="af-step-label">Details</span>
  </li>
  <li class="af-step af-is-active" aria-current="step">
    <span class="af-step-number" aria-hidden="true"></span>
    <span class="af-step-label">Payment</span>
  </li>
  <li class="af-step">
    <span class="af-step-number" aria-hidden="true"></span>
    <span class="af-step-label">Confirm</span>
  </li>
</ol>

States

• af-is-complete — finished step (success badge + connector)
• af-is-active — current step (aria-current="step")
• (no modifier) — upcoming step

Parts

Class	Purpose
af-steps	The <ol> container
af-step	Each <li> step
af-step-number	Badge; number from CSS counter
af-step-label	Step title

Leave af-step-number empty — the counter fills it. Mark it aria-hidden="true" so screen readers rely on the list semantics + label.