Timeline

Overview

Timeline renders an <ol> (items are <li>) and cascades Orientation (Vertical/Horizontal) and Align (Left/Right/Alternate) to its parts via a TimelineContext; alternate-side selection is pure CSS (odd/even), so no per-item index bookkeeping is needed. It composes no Navius primitive, holds no interactive state, and wires no keyboard behavior.

Install

navius add timeline --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsTimeline>
    <ZitsTimelineItem Status="complete">
        <ZitsTimelineSeparator>
            <ZitsTimelineDot />
            <ZitsTimelineConnector />
        </ZitsTimelineSeparator>
        <ZitsTimelineContent>
            <ZitsTimelineTime>Jan 4</ZitsTimelineTime>
            <ZitsTimelineTitle>Order placed</ZitsTimelineTitle>
            <ZitsTimelineDescription>We received your order.</ZitsTimelineDescription>
        </ZitsTimelineContent>
    </ZitsTimelineItem>
</ZitsTimeline>

Parts and props

ZitsTimeline (root)

Prop	Type	Default	Description
Orientation	string	"Vertical"	Vertical or Horizontal. Cascaded to items/separators/connectors.
Align	string	"Left"	Left, Right, or Alternate. Cascaded to items.

ZitsTimelineItem

Prop	Type	Default	Description
Status	string	"pending"	complete, current, or pending. Exposed as data-status for color states.

ZitsTimelineDot

Prop	Type	Default	Description
Variant	string	"default"	default, outline, secondary, destructive, muted. Selects the dot’s ink.

ZitsTimelineSeparator, ZitsTimelineConnector, ZitsTimelineContent, ZitsTimelineTitle, ZitsTimelineDescription, and ZitsTimelineTime take only ChildContent/Attributes; they lay out along the cascaded axis/side.

Styling surface

Every part accepts class via Attributes, merged with its own base class through Cn.Merge.

Parameter	Values
ZitsTimeline.Orientation	Vertical · Horizontal
ZitsTimeline.Align	Left · Right · Alternate
ZitsTimelineItem.Status	complete · current · pending
ZitsTimelineDot.Variant	default · outline · secondary · destructive · muted

Data attribute hooks

Part	Attribute	Description
Root	data-navius-timeline, data-orientation, data-align	Structural markers plus the active Orientation/Align.
Item	data-navius-timeline-item, data-status	Structural marker plus the active Status, drives the color state.
Dot	data-navius-timeline-dot, data-variant	Structural marker plus the active Variant.
Connector, Content, Title, Description, Time, Separator	data-navius-timeline-*	Structural markers only, no state.

Timeline implements no ARIA mechanism of its own beyond the semantic <ol>/<li> structure: the connector is aria-hidden (decorative), and everything else’s accessibility comes from the text content the caller places inside each part.