Skip to main content
Urbicon UI
source

JourneyTimelinebeta

A retrospective chronicle (focus + context): an ordered record of what happened and where things stand — shipment tracking, audit trails, billing runs, travel logs. One node is in focus and shows rich detail inline or in a stable readout panel; the rest stay quiet context rows along a first-class time axis. Reach for Stepper for prospective wizards and Tab for peer views.

  1. 3 Jun
    2 days · validation
  2. 5 Jun
    manual review
  3. 6 Jun

    Full record for “Statements” renders here while the node is in focus.

Loading syntax highlighting...

02 Examples

Vertical chronicle with inline detail

The default. Per-node meta renders on the chronicle rail (here through the meta snippet: planned date + confirmed Badge), connectors carry meaning (dashed = manual hop), segment labels annotate the stretch between nodes. The focused node becomes an elevated card in place.
Focused node: statements
  1. 3 Jun 3 Jun
    2 days · validation
  2. 5 Jun 6 Jun
    manual review
  3. 6 Jun

    Full record for Statements — assignments, anomalies and the audit trail live here.

    dispatch queue
Loading syntax highlighting...

Stable readout with detail="panel"

The rail stays rigid — rows never change height. The focused node's detail renders in a panel beside the rail on wide viewports and docks to the viewport bottom on narrow ones. Pick this for long chronicles or when the detail is tall.
  1. Mon
  2. Tue
  3. Wed
    customs clearance

In transit

Scans, carrier and location history for this stage.

customs clearance
Loading syntax highlighting...

Horizontal lifecycle

Horizontal always renders the shared panel below the rail — the same rail + readout model, rotated. Meta renders as a kicker line above each title.
  1. 1 Mar
  2. 5 Mar
  3. 19 Mar

Invoice events during “Open” — issued, reminders, payments.

Loading syntax highlighting...

Cockpit rows: glyph markers, attention + trailing

The rich-row recipe: the marker snippet puts glyphs inside the status dots (scaled up via slotClasses.marker), status attention flags the optional-but-noteworthy row, and the trailing snippet adds badges and a help action per row. Trailing renders outside the trigger button — pressing “?” never moves the focus.

No help requested yet.

  2. must · blocks close
  3. Consumption Waits for heating Pending

  4. Why “Expenses & distribution” matters, its consequences and the next action live here.

  5. optional
Loading syntax highlighting...

03 Statuses

Each node's status maps to a semantic dot: complete (success, filled), active (primary, ringed), pending (hollow), attention (hollow on the warning token — worth a look, does not block), blocked (danger — the title turns danger too, so colour is never the only cue) and skipped (muted). The connector leaving a completed node reads as “travelled”. Set focusable: false for pure waypoints — they render a marker and label but never take focus and are skipped by keyboard navigation.

All statuses

A node per status, including a non-focusable automatic step.

  2. This node is active — its detail renders only while focused.

  3. Automatic hold System step Pending
Loading syntax highlighting...

04 JourneyTimeline vs. Stepper vs. Tab

Three components, three different jobs — the overlap is smaller than it looks:

JourneyTimeline

Retrospective observation. An ordered record of what happened / where things stand: shipment tracking, audit trails, billing runs, travel logs. Time (meta) is the first axis; connectors and segment labels describe the stretches between events. Focus reveals detail — it never advances a process.

Stepper

Prospective process. A wizard the user walks through: checkout, onboarding, multi-step forms. Steps are tasks to complete (often with embedded inputs), progress moves forward, and the component may gate navigation. No time axis — the user is the timeline.

Tab

Peer views. Unordered, equivalent surfaces of one thing — Account / Billing / Team. No sequence, no status, no chronology. If reordering the items would change their meaning, they are not tabs.

Rule of thumb: does each item carry a status and does their order tell a story? JourneyTimeline. Does the user complete the items one by one? Stepper. Are the items just alternative views? Tab.

05 Customization

Every family member supports unstyled, slotClasses and preset. Slots: base, rail, node, metaColumn, meta, markerColumn, marker, connector, content, card, header, trigger, trailing, labelGroup, title, subtitle, segment, detail, detailInner, detailContent and panel.

Restyle markers and the docked panel

Loading syntax highlighting...

06 Accessibility

The rail is an ordered list. Each node carries aria-current="step" while its status is active; the focusable trigger exposes aria-expanded and aria-controls for its detail region (a per-node inline region, or the shared panel in panel/horizontal mode). The status is announced through a visually-hidden label, so the dot markers stay decorative — including any glyphs rendered through the marker snippet.

trailing content renders outside the trigger button, as a sibling in the header row: buttons and links inside it are valid HTML, become regular tab stops after the header, and activating them never changes the focused node. Arrow-key roving stays on the node headers only.

Keyboard

  • ↑ / ↓ (vertical) or ← / → (horizontal) move the roving focus between node headers without changing the focused node.
  • Home / End jump to the first / last focusable node.
  • Enter / Space put the header's node in focus.

Motion: expand/collapse runs on the motion-duration tokens, which collapse to 1 ms under prefers-reduced-motion: reduce. When activating a node makes another card collapse above it, the component counter-scrolls so the activated header stays visually stationary — real user scrolling cancels this immediately.

07 API Reference

23 props
23 props 1 required

No matching properties

No matching properties

08 Installation

Import

Loading syntax highlighting...
llm.txt