Timeline

Demo & usage

More examples

<sv-timeline [items]="events" displayMode="feed" [groupByDate]="true" />

<sv-timeline [items]="steps" layout="horizontal" [activeIndex]="2" />

<sv-timeline
  [items]="releases"
  displayMode="rich"
  (actionClick)="openRelease($event)" />

<sv-timeline
  [items]="events"
  displayMode="interactive"
  [(selectedId)]="selectedId"
  (itemClick)="open($event)" />

<sv-timeline
  [items]="steps"
  displayMode="status"
  [activeIndex]="2" />

<!-- A process, drawn with plain dots, that still announces as one. -->
<sv-timeline [items]="steps" intent="process" [activeIndex]="2" />

<!-- A log. Nothing in it is "current". -->
<sv-timeline [items]="events" intent="feed" />

<sv-timeline
  [items]="auditLog"
  [collapseAfter]="5"
  [(expanded)]="auditExpanded"
  [groupByDate]="true" />

When to use

• Showing a sequence of events over time: history, activity, status changes.
• You want per-item icons/colors and optional date grouping.
• For an interactive multi-step process, use the Stepper.

Async states

• loading
• empty
• error
• retry

Outputs

<sv-timeline-pro>

Also in this family — SvTimelineProComponent from @styloviz-pro/timeline.

Inputs

Outputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

<sv-timeline
  [items]="data.items()"
  [loading]="data.loading()"
  [error]="data.error()"
  (retry)="data.reload()"
/>

// This component reports its state but does not emit a query, so drive
// it from your own fetch and bind the three async inputs.
readonly items = signal<Row[]>([]);
readonly loading = signal(false);
readonly error = signal<SvDataError | null>(null);

async load(): Promise<void> {
  this.loading.set(true);
  this.error.set(null);
  try {
    this.items.set(await this.api.fetchRows());
  } catch (e) {
    this.error.set(toSvDataError(e));
  } finally {
    this.loading.set(false);
  }
}

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `items`, `loading` and `error`.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• Vertical, horizontal or alternating layouts.
• Per-item icon, color and rich content.
• Group by date for activity feeds.
• `displayMode="status"` renders a Status / Progress Tracker — drive it with `activeIndex` (items before → complete, at → active, after → pending) or per-item `itemStatus`.
• Rich-card CTAs emit `actionClick` (rendered as a link when `actionUrl` is set, otherwise a button).
• `displayMode="interactive"` makes whole rows clickable — emits `itemClick` and highlights `selectedId` (two-way bindable).
• `intent` (`chronology` / `process` / `feed`, default `auto`) is what the list MEANS, separate from what it looks like. It sets the list's accessible name ("Timeline" / "Progress tracker" / "Activity feed") and what `aria-current` says. `auto` keeps the old inference from `displayMode` and `dotStyle`, but an inferred chronology with an active item now says `aria-current="true"` and each list takes its intent's name — set `intent` to pin it.
• `collapseAfter` (default `0`, off) shows the first N items and a count-naming "Show N more entries" control; `expanded` is two-way. Works in every layout, including `groupByDate`.
• `showVariantIcon` (default `false`) draws a tick / cross / triangle / "i" inside `success` / `error` / `warning` / `info` dots that have no `icon` of their own, so the state is a shape as well as a hue.
• Time-zone policy: `groupDate` is a label, never parsed. Consecutive items sharing it are grouped; resolve the day in the zone you want displayed before passing it.

Best practices

• Do: Order items chronologically and keep each entry to a scannable line or two.
• Do: Group long histories by date (`groupByDate`) for feed-style views.
• Do: Resolve `groupDate` in the zone you want displayed and pass the finished label (`'Tue 14 May'`, `'Yesterday'`). The component never derives a day from `timestamp` — 23:30 in Berlin is Wednesday in Auckland — so the zone is the host's decision, which is the only place it can be made correctly.
• Do: Set `collapseAfter` on a history that can grow without bound, and bind `[(expanded)]` if the reader should come back to it expanded.
• Tip: Use color/icon to encode event type consistently.
• Do: Set `intent` when the list is a process or a feed. It decides what a screen reader is told — `aria-current="step"`, `aria-current="true"` or nothing — and it is the one thing `displayMode` should never have been deciding.
• Don't: Don't reach for a numbered or ticked `dotStyle` to make something announce as a process. It used to work, by accident, and that accident is the defect: the dot is a picture and `intent` is the claim.

Accessibility

• Ordered list semantics preserve sequence — an `<ol>` of `<li>`s, so the sequence is the DOM order and needs no off-screen table alongside it.
• The dot has a text equivalent. `variant` reached the page as a hue alone, which meant a failed deploy and a successful one read identically (WCAG 1.4.1); a coloured dot is now `role="img"` named "Error", "Success" and so on, and the variants that carry no meaning stay silent.
• Name the list with `ariaLabel` when a page has more than one. Every list used to be a hardcoded "Timeline", so a release feed and an audit log were indistinguishable in a landmark list. In the date-grouped layout each group's list is that name plus its date ("Deploy log, Today").
• Icons are decorative; text carries the meaning.
• Stepper modes expose each step's state (Completed / Current / Pending) to screen readers and mark the active step with `aria-current="step"`.
• The pulsing ring on an active step stops under `prefers-reduced-motion` (`motion-reduce:animate-none`); the dot itself stays, because it is the state.
• `intent` decides what the current item is announced as, and it used to be decided by the shape of the dot: `aria-current` was gated on a ticked or numbered `dotStyle`, so a genuine process drawn with plain dots announced **nothing**, and a plain chronology could be made to claim a step by changing a picture. A `process` says `step`, a `chronology` says `true`, and a `feed` says nothing at all — a log of events is not somewhere you are partway through.
• CTA controls carry a descriptive label combining the action and the item title.
• Interactive rows (`displayMode="interactive"`) are keyboard-focusable `role="button"` controls inside the list items — Enter/Space activate, and the selected row is marked `aria-pressed` — so the list keeps its semantics while every row is operable without a mouse.