Studio
Studio/Kits
New kit
Canonical inventory
Data display · core

Timeline

data.timeline

Timeline: A structured display for reading, comparing, or inspecting information.

timelinethe structured information blockthe data display
States4
Touch targetDisplay
Evidence4
Introduced by4 kits
Visual specimen

Same contract. Every kit voice.

  1. FoundationRecorded with provenance
  2. ComponentsRecorded with provenance
  3. EvidenceRecorded with provenance
MAVAN renderingdefault
Translation table

What code calls it.

Web<ol>The closest native or standardized web primitive.direct
ARIAtable, list, or groupNo single ARIA role represents the complete component.pattern
SwiftUIcustom LayoutThe nearest named SwiftUI API.direct
AppKitCustom NSView compositionAppKit has no single direct equivalent; use a custom view or controller composition.approximation
Anatomy

Every part, named.

  1. 1Data container
  2. 2Primary values
  3. 3Labels or headers
  4. 4Grouping or separators
  5. 5Empty and error treatment
Often confused with

Similar shape. Different contract.

Cardsurface.card

Shares a visual family, but has a different role, state model, or interaction contract.

Feature cardsurface.feature-card

Shares a visual family, but has a different role, state model, or interaction contract.

Glass cardsurface.glass-card

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Timeline component (data.timeline). Timeline: A structured display for reading, comparing, or inspecting information. Support these states: default, loading, empty, error. Use semantic design tokens rather than raw visual values. Preserve a minimum appropriatepx touch target where interactive. Provide and verify: implementation, state-matrix, responsive, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.
Studio contract

What must be proven.

Required states

default · loading · empty · error

Required evidence

implementation · state-matrix · responsive · reduced-motion

Source union

jade · aurora · cabana · purple-rain