Stepper

Stepper shows progress through a task with a fixed number of steps. It is a named ordered list with CSS-numbered markers, check marks, connectors, and no JavaScript.

Public web API

One root hook on a named <ol>. Mark done steps with data-bitsy-state="complete" and the current one with aria-current="step".

Completed: Cart
Shipping
Payment

<ol data-bitsy-stepper aria-label="Checkout progress">
  <li data-bitsy-stepper-step data-bitsy-state="complete">
    <a data-bitsy-stepper-label href="/checkout/cart"><span class="u-visually-hidden">Completed: </span>Cart</a>
  </li>
  <li data-bitsy-stepper-step aria-current="step">
    <span data-bitsy-stepper-label>Shipping</span>
  </li>
  <li data-bitsy-stepper-step>
    <span data-bitsy-stepper-label>Payment</span>
  </li>
</ol>

Never type step numbers. A CSS counter draws them.
Keep the hidden "Completed: " text so done steps are not shown by color alone.
Only completed steps may be links. Upcoming steps stay plain text.

States and sizes

Five steps, then a larger marker through a hook.

Completed: Account
Completed: Profile
Team
Billing
Launch

Completed: Details
Review
Submit

Vertical

data-bitsy-orientation="vertical" with a description under each step.

Completed: Your profile Name and photo.
Invite your team Add teammates by email.
Connect billing Choose a plan.

Foundation versus Bit

The foundation styles ordered lists, but not numbered markers, check marks, connectors, or step states. data-bitsy-stepper adds those, ships no JavaScript, and defines only --bitsy-stepper-* hooks.