Timeline

Ordered steps with state markers, vertical or horizontal.

Read access to finance.payments for the quarterly reconciliation.

<mm-timeline label="Access request for finance.payments">
  <mm-timeline-item state="done" state-label="Requested" heading="Access requested" time="2026-10-19T08:14:03Z" actor="Jane Doe">
    Read access to finance.payments for the quarterly reconciliation.
  </mm-timeline-item>
  <mm-timeline-item state="pending" heading="Access expires" time="2026-11-02T10:02:44Z"></mm-timeline-item>
</mm-timeline>

<mm-timeline orientation="horizontal" label="Run 8121 phases">
  <mm-timeline-item state="done" heading="Queued" time="2026-10-27T04:12:00Z"></mm-timeline-item>
  <mm-timeline-item state="done" heading="Started" time="2026-10-27T04:12:02.3Z"></mm-timeline-item>
</mm-timeline>

Guidance

A timeline lists what happened to one thing, in order: the steps of an access approval, the runs of a pipeline, the phases of a single run. A 1px mm-rule spine joins small node markers whose shape encodes the state, so colour is never the only signal: a filled circle is done, a ring is pending, a ring with a centre dot is in progress and a cross is failed, and each step also carries its state as a word.

orientation="horizontal" is the compact form for a run's phases (Queued, Started, Extracting, Writing, Finished): one straight line through the markers, each step's name and time under its marker, and the time between steps as a quiet caption on the line between them. The line is darker up to the last finished step.

It is a list, not a widget: there is no keyboard model beyond any links or buttons inside steps. In a narrow container the horizontal form wraps onto further rows rather than scrolling.

Properties

Property	Attribute	Type	Default	Description
orientation	orientation	'vertical' | 'horizontal'	'vertical'	vertical (default) for approvals and run history, horizontal for a run's phases.
label	label	string	''	Names the list, for example "Run 8121 phases".

Methods

Method	Description
refresh()	Recomputes durations and the last step. Items call this when their time or title changes.

Slots

Slot	Description
Default	mm-timeline-item elements, oldest first.

Examples

Every state of mm-timeline in Storybook, with keyboard and screen reader tests.