HyTimelineItem

A single entry within an hy-timeline. Presentational by design — it renders a marker on the rail, optional other-rail content, and the entry body. It is NOT a selection model: there are no events, no roving tabindex, no keyboard navigation. For a per-item action, slot an hy-button/link into the default slot.

Key Features

• <li> list semantics (the parent hy-timeline is the <ol>)
• variant-colored marker dot, token-constrained (no arbitrary color)
• filled solid dot vs hollow ring
• pending "ongoing" state — an hy-spinner replaces the dot
• marker-align centers the dot on the body's first line (default) or the whole content row (center, for button/badge control rows)
• marker slot for a custom dot (icon / avatar / number)
• opposite slot for other-rail content (timestamp / label)

Accessibility

• role="listitem" on the host (reflected for SSR)
• The marker dot, pending spinner, and connector line are decorative (aria-hidden); the accessible content is the slotted body. A custom marker slot keeps its own semantics.

Sizing / line / layout

• size, line, and mode are owned by the parent hy-timeline and reach the item via inherited CSS custom properties (--timeline-*). The item has no size prop of its own.

Examples

Within a timeline

<hy-timeline>
  <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>

Custom marker

<hy-timeline-item>
  <hy-icon slot="marker" name="check"></hy-icon>
  Reviewed
</hy-timeline-item>

Slots

• default - The entry body (text / markup; slot a button/link for an action)
• marker - Custom marker dot (icon, avatar, number). Overrides the default variant dot.
• opposite - Other-rail content (timestamp via hy-relative-time, label)