No matches.
component
How the connecting line is drawn. `none` keeps the marker column but draws no connector.
Rail metrics: marker box, dot, line width, spacing and text size. `sm` suits dense activity logs, `md` general use, `lg` roomy step trackers. A timeline nested in an item's body (a reply thread) defaults one size down to `sm`.
Astro / vanilla: serialize the props into `data-timeline-config` so the client runtime hydrates this instance and `getPindoba(el, "timeline")` can `update()` it. Frameworks with their own reactivity don't need it.
Plus all standard <div> HTML attributes.
When the event happened — a single date, or a `[start, end]` range, shown in the meta line. A range ending today renders as "… - now". Each date renders as a `<time datetime>`.
How dates are written. `"relative"` reads "3 days ago" (the absolute date goes in the `<time>`'s `title`); an `Intl.DateTimeFormat` options object formats an absolute date. Invalid option combinations fall back to the default.
A short kicker above the heading — a time, an id, a category. Rendered as the design-system eyebrow (small uppercase mono).
Custom formatter `(date, locale) => string` for each date (each end of a range). Takes precedence over `dateFormat`.
The instant relative dates are measured from, and that decides whether a range ends "now". Pin it for deterministic server rendering; relative text does not update on its own — re-render to refresh it.
Heading text. For a rich heading (an actor, an action, a link), use the heading slot instead.
Where this step sits in a progress sequence. With no custom marker, `done` renders a filled stamp with a check, `current` a filled stamp with a ring (and `aria-current="step"`), `upcoming` a hollow muted stamp with muted text. A `done` step's line takes its palette, unless it leads into an `upcoming` step.
Semantic palette for the marker (and, on a `done` step, its line). Defaults to `neutral`, or `primary` when `state` is set.
Let the item's content span the rail too — a full-width card that interrupts the line.
Draw no marker and let the line run straight through — for continuation rows. Otherwise the marker shows the marker slot's content, the state stamp when `state` is set, or a plain dot.
Where the meta (the date, or the meta slot) sits: its own muted line under the heading (`below`), the kicker above it (`above`, after the `eyebrow` when there is one), or after it on the heading line (`inline`, for dense logs).
{ done: "Completed", current: "Current step", upcoming: "Not started" }The visually hidden state word announced after the heading when `state` is set. Pass an object to localize (omitted keys keep the default, `""` drops one state's word), or `false` to render none.
Per-slot style and HTML-attribute overrides.
Astro / vanilla: serialize the props into `data-timeline-item-config` so the client runtime hydrates this instance and `getPindoba(el, "timeline-item")` can `update()` it. Frameworks with their own reactivity don't need it.
`start` sets the label at the row's start edge; `center` centres it across the row between two rules.
TimelineSeparatorPassThrough<RootElementAttributes> Per-slot style and HTML-attribute overrides.
Astro / vanilla: serialize the props into `data-timeline-separator-config` so the client runtime hydrates this instance and `getPindoba(el, "timeline-separator")` can `update()` it. Frameworks with their own reactivity don't need it.
TimelineCollapsePassThrough<RootElementAttributes> Per-slot style and HTML-attribute overrides.
Astro / vanilla: serialize the props into `data-timeline-collapse-config` so the client runtime hydrates this instance and `getPindoba(el, "timeline-collapse")` can `update()` it. Frameworks with their own reactivity don't need it.