Steps

A 28px filled disc in surface-inverse — the same fill as the primary button, which is what ties the two together in the draft.

1. 1
   Organisers publish the event

   One link, shared wherever athletes already are.

2. 2
   Athletes rate seven categories

   Ninety seconds, on a phone, on 4G, after a race.

3. 3
   The debrief goes out the same week

   current — focus ring on the marker, aria-current="step".

4. ✓
   Done step

   Marker goes success, title drops to secondary.

markerStyle="outline" for checklists. orientation="horizontal" spreads to three columns from md. The <ol> semantics belong to the caller — Steps does not decide whether your list is ordered.

Progress states

Product surfaces use markerStyle="outline" and size="sm" and mark progress with state: done, current, upcoming and locked.

1. Done:
   Create your company
2. 2, current step
   Add your first event
   ≈ 3 min
3. 3
   Open the collection
4. Send invites

   Unlocks on race day, 14 Nov 2026.
5. Read your results

   Unlocks when the first reviews arrive.

Locked

A locked step cannot be started yet. It keeps its place in the list, so the reader sees the whole path, and it says why it is not available.

• The reason is written. A lock icon alone is a mystery; “Unlocks on race day” is information. The words come from the app, in its language.
• Not a link, not a button. Nothing to focus or press, so it needs no aria-disabled. A screen reader reads the title and then the reason, which is the whole message.
• Done and current are spoken too. The current step carries aria-current="step" and a visually hidden “current step”; a done step carries a visually hidden “Done” beside its check. A ring and a check are not information for someone who cannot see them.
• Dashed, muted and iconed, three cues. The dashed marker, the muted title and the lock all say “not yet”, so none of them depends on colour alone.
• The estimate is optional. time aligns a figure such as ≈ 3 min to the right; leave it out and the row is unchanged.