Components Stepper chain

Stepper chain

A vertical milestone timeline — a connected column of stage cards showing where a transaction has got to. Completed stages collapse behind a “N stages complete” summary node; the current and upcoming stages each render as a card with a timeline node, an optional status badge, a plain-English description and any dated events. The detail-page counterpart to koala-stepper-dots.

<koala-stepper-chain>

Canonical

2 stages complete

Completed

5 days

Quote accepted

2 days

Client onboarded

3 days

Order searches

In progress

Ordering the local, water, drainage and environmental searches on the property.

1 week

Searches ordered12 Jun

Raising enquiries

Raising and resolving enquiries on the contract, searches and replies.

Exchange

Contracts are exchanged and the completion date becomes legally binding.

@{
    var stages = new[]
    {
        new StepperChainStage("Quote accepted", StepperChainState.Completed, Duration: "2 days"),
        new StepperChainStage("Client onboarded", StepperChainState.Completed, Duration: "3 days"),
        new StepperChainStage("Order searches", StepperChainState.Current,
            Description: "Ordering the local, water, drainage and environmental searches on the property.",
            Badge: "In progress", Duration: "1 week",
            Events: new[] { new StepperChainEvent("Searches ordered", "12 Jun", Done: true) }),
        new StepperChainStage("Raising enquiries", StepperChainState.Upcoming,
            Description: "Raising and resolving enquiries on the contract, searches and replies."),
        new StepperChainStage("Exchange", StepperChainState.Upcoming,
            Description: "Contracts are exchanged and the completion date becomes legally binding."),
    };
}
<koala-stepper-chain stages="stages" total-duration="5 days" />

The two completed stages collapse behind the “2 stages complete” summary node (click View completed stages to reveal them on the same vertical line). The current stage is framed in primary with a pulsing node, a status badge, a description, a dated event and its time-in-stage in the bottom-right. total-duration is conveyancer-only — leave it null for partner/client.

States

4 states

Completed stage

Done

A finished stage — plum tick node, sits on the container surface.

4 days

Current stage

In progress

The live stage — framed in primary with a pulsing ring node.

Blocked stage

Blocked

Something needs attention — danger-framed card and node.

Upcoming stage

Not started yet — a dashed-outline ghost card with a hollow node.

Each StepperChainState renders distinct chrome: Completed (plum tick), Current (primary frame + pulsing ring), Blocked (danger frame), Upcoming (dashed ghost). The status badge colour is derived from the state — you only supply the label.

Completed collapse

collapse-completed

collapse-completed = true (default)

2 stages complete

Completed

5 days

Quote accepted

2 days

Client onboarded

3 days

Order searches

In progress

collapse-completed = false

Quote accepted

2 days

Client onboarded

3 days

Order searches

In progress

By default the completed stages fold into one summary node, keeping the eye on what's live and next. Set collapse-completed="false" to render every completed stage as its own (muted) card — useful on a short set or an audit-style view.

Props

3 attributes

Attribute	Values	Notes
stages	IReadOnlyList<StepperChainStage>	Required. The ordered stage set — completed, current, blocked and upcoming. Nothing renders when empty.
collapse-completed	true, false	Defaults to `true` — completed stages fold behind a “N stages complete” summary node. When false, each renders as its own card.
total-duration	string	Total time across completed stages, shown top-right of the summary node. Conveyancer-only; null hides it.

Each StepperChainStage is a primitive record so the shared helper never references a portal milestone model:

Attribute	Notes
Name	Stage title (required).
State	Completed / Current / Upcoming / Blocked — drives node, frame and badge colour.
Description	Plain-English explanation shown under the title.
Badge	Status pill label; colour follows the state.
Duration	Time in this stage, bottom-right. Conveyancer-only.
Events	List of `StepperChainEvent(Name, Meta, Done)` — dated events inside the card.
DomId	Optional id on the item wrapper, e.g. for deep-linking.

Do & don't

2 stages complete

Completed

5 days

Quote accepted

2 days

Client onboarded

3 days

Order searches

In progress

Do Use the chain on the detail page itself, where each stage earns its name, description and events. Let completed stages collapse so the live stage leads.

2 stages complete

Completed

5 days

Quote accepted

2 days

Client onboarded

3 days

Order searches

In progress

Don't Don't drop the full chain into a list row or a tight sidebar — it overwhelms. Use koala-stepper-dots there instead.