HyTimeline

A vertical timeline rail — an ordered history feed of hy-timeline-item entries. Presentational: ordered-list semantics only, no events, no imperative API.

Key Features

• <ol> / <li> list semantics for accessibility
• mode: one-side (default) or alternate (zig-zag), vertical-only
• size: small | medium | large (standard Harmony size axis) — scales the marker, rail gaps, and connector via inherited CSS custom properties
• line: solid (default) / dashed connector style
• Connector stops cleanly at the last item (the parent marks it [last])

Accessibility

• role="list" declared explicitly so the list semantics survive the shadow boundary (axe cannot see slotted role="listitem" items otherwise)
• Markers and connector lines are decorative; the accessible content is each item's slotted body

Examples

Version history (one-side)

<hy-timeline size="small">
  <hy-timeline-item variant="success">
    <hy-relative-time slot="opposite" date="2026-06-01"></hy-relative-time>
    Published v3
  </hy-timeline-item>
  <hy-timeline-item pending>
    <span slot="opposite">Ongoing changes</span>
    Draft
  </hy-timeline-item>
</hy-timeline>

Alternate, dashed

<hy-timeline mode="alternate" line="dashed">
  <hy-timeline-item>Step one</hy-timeline-item>
  <hy-timeline-item>Step two</hy-timeline-item>
</hy-timeline>

Slots

• default - hy-timeline-item elements