Contents Purpose Anatomy Variants States Tokens Used Accessibility Behavior Platform Notes Component: timeline Purpose Display a vertical sequence of events with icon nodes and a connecting line. Anatomy timeline — relative container timeline-line — absolute vertical connector line timeline-entry — flex row for each event timeline-icon — circular node with icon timeline-content — text content area Variants Class Visual Usage timeline Base — vertical event list with connecting line Standard event sequence Single variant. Icon colors are set by the consumer per entry. States None. Display-only (layout component like empty-state). Tokens Used --space-3, --space-5, --space-10 --color-surface-primary --color-border-default --icon-md --z-sticky Accessibility Use <ol> or <ul> for the list of entries — conveys sequence to screen readers Icons are decorative — use aria-hidden="true" on SVGs The timeline-line is decorative — no ARIA role needed Content within timeline-content carries the semantic meaning Behavior Container: position: relative to anchor the vertical line Line: position: absolute, 2px wide, border-default color, runs full height at left: var(--space-5) (centered within 40px icon column) Entry: display: flex, gap: var(--space-3) Icon: 40px (--space-10) square, flex centered, z-index: var(--z-sticky) (above line), border: 1px solid var(--color-border-default), background-color: var(--color-surface-primary), border-radius: 50% (sanctioned exception) Icon SVG: --icon-md sizing Content: flex: 1, min-width: 0, padding-bottom: var(--space-3) Consumer sets icon background color for status (e.g. success-subtle, info-subtle) Platform Notes Web: CSS in @layer components. One file: timeline.css. Pure CSS layout — no JS needed. macOS: Map to a vertical List or custom NSStackView with line decoration.