Components · Workflow

Stepper

The process-progression marker for a rescue case moving through its lifecycle — Intake → Vet check → Foster match → Home visit → Adopted. Each step is done (accent fill + check), current (accent + aria-current ring halo), or upcoming (muted surface-3); the connector after a step turns accent only once that step completes, so the accent run tracks progress. Read-only here — it reflects state, it doesn't collect it.

horizontal run · case lifecycle · done / current / upcoming
  1. Intake
    Jun 22
  2. Vet check
    Jun 26
  4. Home visit
    —
  5. Adopted
    —

Biscuit · beagle mix · #RC-2291. Steps 1–2 completed (check + accent connector); step 3 is aria-current="step" — the ring halo is the visible echo, and it's the one focusable marker (Tab to it). Steps 4–5 pending on surface-3. The connector after the current step stays a hairline until the step is done.

orientation="vertical" · timeline with owner + timestamp
  1. Intake loggedDone

    Surrendered by owner, transport #14 from Athens County. Weight 11.2 kg, microchip scanned.

    Marisol VegaJun 22 · 9:04 AM
  2. Vet check clearedDone

    Spayed, DHPP + rabies up to date, dental grade 1. Cleared for foster placement.

    Dr. PatelJun 26 · 2:40 PM
  3. Foster matchIn progress

    Two foster homes shortlisted with fenced yards; awaiting reference callback before the home visit is booked.

    Jordan TranAssigned Jun 30
  4. Home visit

    Coordinator confirms the space, fencing and other pets before the foster is finalised.

  5. Adopted

    Adoption contract signed and the case closes.

Same status model, stacked: the accent rail joins completed steps, each row carries the owner (initials avatar) and a timestamp, and the current step swaps its check for a pulsing In progress chip. Upcoming steps drop the metadata and dim their titles.

marker states · compact inline mini-stepper
marker states — done / current / upcoming
Done
Current
Upcoming

Done + current share the accent fill (completed shows a check, current shows its number); the ring halo marks aria-current. Upcoming is a muted surface-3 circle.

mini-stepper — inside a roster row
Willow 3 / 5 · Foster match
Odie 5 / 5 · Adopted

The same status set collapsed to dots for a data-table cell: done fills accent, current adds the ring halo, upcoming stays hollow — with a role="img" "Step n of m" label carrying the meaning.

steps / status
Step[] — each { label, status, meta? } where status is done | current | upcoming. Done + current fill accent (check vs number); upcoming is a muted surface-3 circle.
orientation
horizontal lays circles + connectors in a row with labels beneath; vertical stacks them with a title, description, owner and timestamp beside each marker.
connector semantics
The connector after a step turns accent only when that step is done, so the accent run visually stops at the current step.
a11y
An <ol> with aria-current="step" on the active marker (the ring is its visible echo); check glyphs + connectors are aria-hidden. The mini variant carries a role="img" "Step n of m" label — no color-only meaning.
read-only
Presentational — it renders case state, it doesn't advance it. The current-step marker can be a focusable target (deep-link into that stage); everything else is inert text.

Source · workflow family (src/components/ds/workflow) — the process marker that pairs with TitleBar's status slot; composes the Surface primitive + globals.css tokens. Distinct from the wizard's ProgressSteps (that one navigates a form; this one reports a case lifecycle).