@urbicon-ui/blocks 6.8.0 → 6.9.0

package/dist/i18n/index.d.ts

@@ -131,6 +131,16 @@ declare const blocksTranslations: {
             readonly filterPlaceholder: "Filter topics…";
             readonly noResults: "No matching topics";
         };
+        readonly journeyTimeline: {
+            readonly label: "Journey";
+            readonly status: {
+                readonly complete: "Completed";
+                readonly active: "In progress";
+                readonly pending: "Pending";
+                readonly blocked: "Blocked";
+                readonly skipped: "Skipped";
+            };
+        };
         readonly datepicker: {
             readonly placeholder: "Select a date...";
             readonly rangePlaceholder: "Select a date range...";
@@ -302,6 +312,16 @@ declare const blocksTranslations: {
             readonly filterPlaceholder: "Themen filtern…";
             readonly noResults: "Keine passenden Themen";
         };
+        readonly journeyTimeline: {
+            readonly label: "Verlauf";
+            readonly status: {
+                readonly complete: "Abgeschlossen";
+                readonly active: "In Bearbeitung";
+                readonly pending: "Ausstehend";
+                readonly blocked: "Blockiert";
+                readonly skipped: "Übersprungen";
+            };
+        };
         readonly datepicker: {
             readonly placeholder: "Datum wählen...";
             readonly rangePlaceholder: "Zeitraum wählen...";

package/dist/primitives/JourneyTimeline/JourneyTimeline.svelte

@@ -0,0 +1,372 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { resolveIcon } from '../../icons';
+  import CheckIconDefault from '../../icons/CheckIcon.svelte';
+  import CircleDotIconDefault from '../../icons/CircleDotIcon.svelte';
+  import BanIconDefault from '../../icons/BanIcon.svelte';
+  import MinusIconDefault from '../../icons/MinusIcon.svelte';
+  import {
+    journeyTimelineVariants,
+    type JourneyTimelineSlots,
+    type JourneyTimelineVariants
+  } from './journey-timeline.variants';
+  import type { JourneyNode, JourneyStatus, JourneyTimelineProps } from './index';
+
+  const bt = useBlocksI18n();
+
+  const CheckIcon = resolveIcon('check', CheckIconDefault);
+  const CircleDotIcon = resolveIcon('circleDot', CircleDotIconDefault);
+  const BanIcon = resolveIcon('ban', BanIconDefault);
+  const MinusIcon = resolveIcon('minus', MinusIconDefault);
+
+  let {
+    items,
+    orientation = 'vertical',
+    size = 'md',
+    focusId = $bindable(),
+    defaultFocusId,
+    scrollSpy = false,
+    onFocusChange,
+    node,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: JourneyTimelineProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  // --- focus state (controlled via bind:focusId, else internal) -------------
+  const focusableItems = $derived(items.filter((it) => it.focusable !== false));
+  const isFocusable = (id: string | undefined) =>
+    id !== undefined && focusableItems.some((it) => it.id === id);
+
+  // Default focus: explicit → first `active` node → first focusable node.
+  const defaultFocus = $derived(
+    (isFocusable(defaultFocusId) ? defaultFocusId : undefined) ??
+      items.find((it) => it.status === 'active' && it.focusable !== false)?.id ??
+      focusableItems[0]?.id
+  );
+
+  let internalFocusId = $state<string | undefined>(undefined);
+  // A stale internal focus (the expanded node was removed) falls back to the
+  // default so a node is always open. A controlled `focusId` is honoured as-is
+  // (write-strict) and only surfaced via the dev warning below.
+  const activeFocusId = $derived(
+    focusId !== undefined ? focusId : isFocusable(internalFocusId) ? internalFocusId : defaultFocus
+  );
+
+  // The roving-tabindex target: the last keyboard/click-touched node, else the
+  // expanded node. Kept distinct from `activeFocusId` so arrow keys can move DOM
+  // focus without expanding (expansion happens on Enter/Space/click). Guarded
+  // against a removed node so the tab stop never lands on nothing.
+  let rovingId = $state<string | undefined>(undefined);
+  // Every candidate is validated against the live focusable set (not just the
+  // first non-undefined one), so a stale roving/active id — or a bad controlled
+  // focusId — can never leave every button with tabindex=-1.
+  const tabbableId = $derived(
+    [rovingId, activeFocusId, focusableItems[0]?.id].find((id) => isFocusable(id))
+  );
+
+  // Dev-only signals for caller mistakes that otherwise fail silently. Mirrors
+  // the `Select`/`Guide` precedent (`import.meta.env?.DEV && console.warn`).
+  $effect(() => {
+    if (!import.meta.env?.DEV || items.length === 0) return;
+    if (focusId !== undefined && !isFocusable(focusId)) {
+      console.warn(
+        `[JourneyTimeline] focusId "${focusId}" matches no focusable node — every node stays collapsed.`
+      );
+    }
+    if (focusId === undefined && defaultFocusId !== undefined && !isFocusable(defaultFocusId)) {
+      console.warn(
+        `[JourneyTimeline] defaultFocusId "${defaultFocusId}" matches no focusable node — falling back to the first active/focusable node.`
+      );
+    }
+    if (!node && focusableItems.length > 0) {
+      console.warn(
+        '[JourneyTimeline] focusable nodes render as expandable buttons but no `node` snippet was provided. Pass a `node` snippet or set focusable:false on nodes that carry no detail.'
+      );
+    }
+  });
+
+  function setFocus(id: string) {
+    const target = items.find((it) => it.id === id);
+    if (!target || target.focusable === false || id === activeFocusId) return;
+    if (focusId !== undefined) focusId = id;
+    else internalFocusId = id;
+    onFocusChange?.(id);
+  }
+
+  function activate(item: JourneyNode) {
+    rovingId = item.id;
+    setFocus(item.id);
+  }
+
+  // --- keyboard roving navigation -------------------------------------------
+  let rootRef = $state<HTMLDivElement>();
+
+  function triggerEls(): HTMLElement[] {
+    return rootRef
+      ? Array.from(rootRef.querySelectorAll<HTMLElement>('[data-journey-trigger]'))
+      : [];
+  }
+
+  function moveFocus(delta: number) {
+    const els = triggerEls();
+    if (els.length === 0) return;
+    const currentId = rovingId ?? activeFocusId;
+    const currentIdx = els.findIndex((el) => el.dataset.nodeId === currentId);
+    const startIdx = currentIdx === -1 ? (delta > 0 ? -1 : 0) : currentIdx;
+    const next = els[(startIdx + delta + els.length) % els.length];
+    if (!next) return;
+    rovingId = next.dataset.nodeId;
+    next.focus();
+  }
+
+  function focusEdge(edge: 'first' | 'last') {
+    const els = triggerEls();
+    const el = edge === 'first' ? els[0] : els[els.length - 1];
+    if (!el) return;
+    rovingId = el.dataset.nodeId;
+    el.focus();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    // Only navigate when a node header is focused — never hijack arrow keys
+    // typed inside an expanded node's detail content.
+    if (!(e.target as HTMLElement)?.hasAttribute?.('data-journey-trigger')) return;
+    const forward = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+    const backward = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+    switch (e.key) {
+      case forward:
+        e.preventDefault();
+        moveFocus(1);
+        break;
+      case backward:
+        e.preventDefault();
+        moveFocus(-1);
+        break;
+      case 'Home':
+        e.preventDefault();
+        focusEdge('first');
+        break;
+      case 'End':
+        e.preventDefault();
+        focusEdge('last');
+        break;
+      // Enter / Space activate via the native <button> click → activate().
+    }
+  }
+
+  // --- scroll-spy (optional) -------------------------------------------------
+  $effect(() => {
+    if (!scrollSpy || !rootRef) return;
+    // Re-subscribe when the node set changes (reading `items` makes it a dep).
+    const currentItems = items;
+    const nodeEls = Array.from(rootRef.querySelectorAll<HTMLElement>('[data-journey-node]'));
+    if (nodeEls.length === 0) return;
+
+    const visible = new Set<string>();
+    // `observe()` delivers a synthetic initial callback for every target before
+    // any scrolling. Seed `visible` from it but do NOT act — otherwise mounting
+    // would clobber the resolved default focus (or a controlled focusId) and fire
+    // a spurious onFocusChange. Scroll-spy only *follows* real scrolling.
+    let seeded = false;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const id = (entry.target as HTMLElement).dataset.nodeId;
+          if (!id) continue;
+          if (entry.isIntersecting) visible.add(id);
+          else visible.delete(id);
+        }
+        if (!seeded) {
+          seeded = true;
+          return;
+        }
+        const topmost = currentItems.find((it) => it.focusable !== false && visible.has(it.id));
+        if (topmost) setFocus(topmost.id);
+      },
+      // A node counts as "current" while it sits in the top 40% of the viewport.
+      { rootMargin: '0px 0px -60% 0px', threshold: 0 }
+    );
+    for (const el of nodeEls) observer.observe(el);
+    return () => observer.disconnect();
+  });
+
+  // --- styling ---------------------------------------------------------------
+  type Styles = ReturnType<typeof journeyTimelineVariants>;
+
+  const containerStyles = $derived(
+    unstyled ? null : journeyTimelineVariants({ orientation, size })
+  );
+
+  function nodeStyles(item: JourneyNode, focused: boolean): Styles | null {
+    return unstyled
+      ? null
+      : journeyTimelineVariants({
+          orientation,
+          size,
+          status: item.status,
+          focused,
+          interactive: item.focusable !== false,
+          // The connector leaving a completed node reads as "travelled".
+          connectorComplete: item.status === 'complete'
+        });
+  }
+
+  const slotClasses = $derived(
+    resolveSlotClasses(
+      blocksConfig,
+      'JourneyTimeline',
+      preset,
+      { orientation, size } satisfies JourneyTimelineVariants,
+      slotClassesProp
+    )
+  );
+
+  function sc(styles: Styles | null, key: JourneyTimelineSlots, extra?: string | false) {
+    const override = [slotClasses?.[key], extra].filter(Boolean).join(' ') || undefined;
+    if (unstyled || !styles) return override;
+    return styles[key]({ class: override });
+  }
+
+  // --- misc derived ----------------------------------------------------------
+  const iconSize = $derived(size === 'sm' ? 14 : size === 'lg' ? 20 : 16);
+  const focusedItem = $derived(
+    items.find((it) => it.focusable !== false && it.id === activeFocusId)
+  );
+
+  const propsId = $props.id();
+  const uid = `journey-${propsId}`;
+  const detailDomId = (index: number) => `${uid}-detail-${index}`;
+  const panelId = `${uid}-panel`;
+
+  function statusLabel(status: JourneyStatus) {
+    return bt(`journeyTimeline.status.${status}`);
+  }
+</script>
+
+<!-- Marker glyph — decorative; the status is conveyed by the sr-only label. -->
+{#snippet markerGlyph(item: JourneyNode)}
+  {#if item.status === 'complete'}
+    <CheckIcon size={iconSize} />
+  {:else if item.status === 'active'}
+    <CircleDotIcon size={iconSize} />
+  {:else if item.status === 'blocked'}
+    <BanIcon size={iconSize} />
+  {:else if item.status === 'skipped'}
+    <MinusIcon size={iconSize} />
+  {/if}
+{/snippet}
+
+{#snippet header(item: JourneyNode, styles: Styles | null)}
+  <span class={sc(styles, 'marker')}>{@render markerGlyph(item)}</span>
+  <span class={sc(styles, 'labelGroup')}>
+    <span class={sc(styles, 'title')}>{item.title}</span>
+    {#if item.subtitle}
+      <span class={sc(styles, 'subtitle')}>{item.subtitle}</span>
+    {/if}
+  </span>
+  <span class="sr-only">{statusLabel(item.status)}</span>
+{/snippet}
+
+{#snippet trigger(item: JourneyNode, index: number, focused: boolean, styles: Styles | null)}
+  {@const interactive = item.focusable !== false}
+  {#if interactive}
+    <button
+      type="button"
+      class={sc(styles, 'trigger')}
+      data-journey-trigger=""
+      data-node-id={item.id}
+      tabindex={item.id === tabbableId ? 0 : -1}
+      aria-expanded={node ? focused : undefined}
+      aria-controls={node
+        ? orientation === 'horizontal'
+          ? panelId
+          : detailDomId(index)
+        : undefined}
+      onclick={() => activate(item)}
+    >
+      {@render header(item, styles)}
+    </button>
+  {:else}
+    <div class={sc(styles, 'trigger')} data-node-id={item.id}>
+      {@render header(item, styles)}
+    </div>
+  {/if}
+{/snippet}
+
+<div
+  bind:this={rootRef}
+  class={sc(containerStyles, 'base', className)}
+  data-orientation={orientation}
+  {...restProps}
+>
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <ol
+    class={sc(containerStyles, 'rail')}
+    aria-label={bt('journeyTimeline.label')}
+    onkeydown={handleKeydown}
+  >
+    {#each items as item, index (item.id)}
+      {@const focused = item.focusable !== false && item.id === activeFocusId}
+      {@const styles = nodeStyles(item, focused)}
+      {#if orientation === 'horizontal'}
+        <li
+          class={sc(styles, 'node')}
+          data-journey-node=""
+          data-node-id={item.id}
+          aria-current={item.status === 'active' ? 'step' : undefined}
+        >
+          {@render trigger(item, index, focused, styles)}
+          <span data-journey-connector class={sc(styles, 'connector')} aria-hidden="true"></span>
+        </li>
+      {:else}
+        <li
+          class={sc(styles, 'node')}
+          data-journey-node=""
+          data-node-id={item.id}
+          aria-current={item.status === 'active' ? 'step' : undefined}
+        >
+          {@render trigger(item, index, focused, styles)}
+          <div class={sc(styles, 'body')}>
+            <div class={sc(styles, 'connectorColumn')}>
+              <span data-journey-connector class={sc(styles, 'connector')} aria-hidden="true"
+              ></span>
+            </div>
+            {#if node && item.focusable !== false}
+              <div
+                id={detailDomId(index)}
+                role="region"
+                aria-label={item.title}
+                class={sc(styles, 'detail')}
+                style="grid-template-rows: {focused ? '1fr' : '0fr'}"
+              >
+                <div class={sc(styles, 'detailInner')}>
+                  <div class={sc(styles, 'detailContent')}>
+                    {#if focused}{@render node(item)}{/if}
+                  </div>
+                </div>
+              </div>
+            {/if}
+          </div>
+        </li>
+      {/if}
+    {/each}
+  </ol>
+
+  {#if orientation === 'horizontal' && node && focusedItem}
+    <div
+      id={panelId}
+      role="region"
+      aria-label={focusedItem.title}
+      class={sc(containerStyles, 'panel')}
+    >
+      {@render node(focusedItem)}
+    </div>
+  {/if}
+</div>

package/dist/primitives/JourneyTimeline/JourneyTimeline.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { JourneyTimelineProps } from './index.js';
+declare const JourneyTimeline: import("svelte").Component<JourneyTimelineProps, {}, "focusId">;
+type JourneyTimeline = ReturnType<typeof JourneyTimeline>;
+export default JourneyTimeline;

package/dist/primitives/JourneyTimeline/index.d.ts

@@ -0,0 +1,114 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { JourneyTimelineSlots, JourneyTimelineVariants } from './journey-timeline.variants.js';
+/** Lifecycle status of a journey node — drives marker colour and glyph. */
+export type JourneyStatus = 'complete' | 'active' | 'pending' | 'blocked' | 'skipped';
+/** A single node (waypoint) on a {@link JourneyTimelineProps | JourneyTimeline}. */
+export interface JourneyNode {
+    /** Stable unique identifier — used as the focus key and for `{#each}` keying. */
+    id: string;
+    /** Node title, always visible next to the marker. */
+    title: string;
+    /**
+     * Lifecycle status. Maps to a semantic marker colour + glyph:
+     * `complete` (success ✓), `active` (primary ◉), `pending` (empty circle),
+     * `blocked` (danger ⊘), `skipped` (muted −).
+     */
+    status: JourneyStatus;
+    /** Short status line shown below the title while collapsed. */
+    subtitle?: string;
+    /**
+     * When `false`, the node is a pure waypoint: it renders a marker + labels but
+     * cannot receive focus, does not expand, and is skipped by keyboard navigation.
+     * @default true
+     */
+    focusable?: boolean;
+}
+/**
+ * @description Connected timeline whose markers *are* the progress indicator and
+ * where exactly one focusable node expands to reveal rich per-step detail (the
+ * "journey" / travel-log pattern). Data-driven via `items`; the focused node's
+ * body is rendered through the `node` snippet. For a compact progress indicator
+ * without a detail container use `Stepper`; for peer views without sequence use
+ * `Tab`.
+ *
+ * @tag navigation
+ * @tag display
+ * @related Stepper
+ * @related Tab
+ * @related Accordion
+ * @stability beta
+ *
+ * @example Vertical journey with inline detail
+ * ```svelte
+ * <script lang="ts">
+ *   import { JourneyTimeline, type JourneyNode } from '@urbicon-ui/blocks';
+ *   const stages: JourneyNode[] = [
+ *     { id: 'draft', title: 'Draft', status: 'complete', subtitle: 'Sent 3 Jun' },
+ *     { id: 'review', title: 'Review', status: 'active', subtitle: 'In progress' },
+ *     { id: 'approve', title: 'Approval', status: 'pending' }
+ *   ];
+ *   let focusId = $state('review');
+ * </script>
+ *
+ * <JourneyTimeline items={stages} bind:focusId>
+ *   {#snippet node(item)}
+ *     <p>Details for {item.title}…</p>
+ *   {/snippet}
+ * </JourneyTimeline>
+ * ```
+ *
+ * @example Horizontal lifecycle with a shared detail panel + scroll-spy off
+ * ```svelte
+ * <JourneyTimeline items={phases} orientation="horizontal" onFocusChange={(id) => track(id)}>
+ *   {#snippet node(item)}
+ *     <PhaseSummary phase={item.id} />
+ *   {/snippet}
+ * </JourneyTimeline>
+ * ```
+ */
+export interface JourneyTimelineProps extends Pick<JourneyTimelineVariants, 'orientation' | 'size'>, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The ordered journey nodes. */
+    items: JourneyNode[];
+    /** Layout direction. Vertical expands detail inline; horizontal into a panel below the rail. @default 'vertical' */
+    orientation?: 'vertical' | 'horizontal';
+    /** Marker + label scale. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * The expanded (focused) node id. Supports `bind:focusId`. When omitted the
+     * component is uncontrolled and falls back to `defaultFocusId`, then the first
+     * `active` node, then the first focusable node.
+     */
+    focusId?: string;
+    /** Initial focused node id in uncontrolled mode. Ignored once `focusId` is bound. */
+    defaultFocusId?: string;
+    /**
+     * When `true`, the focus follows the node scrolled to the top of the viewport
+     * (the travel-log feel), driven by an IntersectionObserver. Reduced-motion safe.
+     * @default false
+     */
+    scrollSpy?: boolean;
+    /** Fires when the focused node changes (click, keyboard, or scroll-spy). */
+    onFocusChange?: (id: string) => void;
+    /** Renders the body of the focused node. Receives the focused `JourneyNode`. */
+    node?: Snippet<[JourneyNode]>;
+    /** Extra classes merged onto the root element. */
+    class?: string;
+    /** Remove all default tv() classes. */
+    unstyled?: boolean;
+    /**
+     * Per-slot class overrides. Slots: base | rail | node | trigger | marker |
+     * connectorColumn | connector | labelGroup | title | subtitle | body | detail |
+     * detailInner | detailContent | panel
+     */
+    slotClasses?: Partial<Record<JourneyTimelineSlots, string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ JourneyTimeline: {...} }}>`.
+     * Prefer this over `class` overrides when the requested look falls outside the
+     * semantic intent palette — presets keep hover/active/dark-mode logic coherent
+     * and make the custom look reusable across the project.
+     */
+    preset?: string;
+}
+export { default as JourneyTimeline } from './JourneyTimeline.svelte';
+export { type JourneyTimelineVariants, journeyTimelineVariants } from './journey-timeline.variants.js';

package/dist/primitives/JourneyTimeline/index.js

@@ -0,0 +1,2 @@
+export { default as JourneyTimeline } from './JourneyTimeline.svelte';
+export { journeyTimelineVariants } from './journey-timeline.variants.js';

package/dist/primitives/JourneyTimeline/journey-timeline.variants.d.ts

@@ -0,0 +1,250 @@
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const journeyTimelineVariants: (props?: import("../../utils/variants.js").TVProps<{
+    orientation: {
+        vertical: {
+            rail: string;
+        };
+        horizontal: {
+            base: string;
+            rail: string;
+            node: string;
+            trigger: string;
+        };
+    };
+    size: {
+        sm: {
+            marker: string;
+            connectorColumn: string;
+            trigger: string;
+            title: string;
+            subtitle: string;
+            detailContent: string;
+        };
+        md: {
+            marker: string;
+            connectorColumn: string;
+            trigger: string;
+            title: string;
+            subtitle: string;
+            detailContent: string;
+        };
+        lg: {
+            marker: string;
+            connectorColumn: string;
+            trigger: string;
+            title: string;
+            subtitle: string;
+            detailContent: string;
+        };
+    };
+    status: {
+        complete: {
+            marker: string;
+        };
+        active: {
+            marker: string;
+            title: string;
+        };
+        pending: {
+            marker: string;
+        };
+        blocked: {
+            marker: string;
+            title: string;
+        };
+        skipped: {
+            marker: string;
+            title: string;
+        };
+    };
+    focused: {
+        true: {
+            trigger: string;
+            title: string;
+        };
+        false: {};
+    };
+    interactive: {
+        true: {
+            trigger: string;
+        };
+        false: {
+            trigger: string;
+        };
+    };
+    connectorComplete: {
+        true: {
+            connector: string;
+        };
+        false: {};
+    };
+}> | undefined) => {
+    base: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    rail: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    node: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    trigger: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    marker: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    connectorColumn: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    connector: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    labelGroup: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    title: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    subtitle: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    body: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    detail: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    detailInner: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    detailContent: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    panel: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        connectorComplete?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+};
+export type JourneyTimelineVariants = VariantProps<typeof journeyTimelineVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type JourneyTimelineSlots = SlotNames<typeof journeyTimelineVariants>;

package/dist/primitives/JourneyTimeline/journey-timeline.variants.js

@@ -0,0 +1,175 @@
+import { tv } from '../../utils/variants.js';
+export const journeyTimelineVariants = tv({
+    slots: {
+        // Root wrapper. Always a <div> so the same element hosts the marker rail
+        // AND (horizontal only) the shared detail panel beneath it. The last node's
+        // connector is hidden in both orientations — nothing to connect onward to.
+        base: 'w-full [&_[data-journey-node]:last-child_[data-journey-connector]]:hidden',
+        // The ordered list of nodes. `flex-col` vertical, `flex-row` horizontal.
+        rail: 'flex list-none m-0 p-0',
+        // A single node <li>.
+        node: 'group/node',
+        // The interactive header — marker + title/subtitle. A <button> for focusable
+        // nodes, a plain <div> for pure waypoints (focusable === false).
+        trigger: [
+            'flex items-center text-left w-full bg-transparent border-0 appearance-none p-1 -m-1',
+            'rounded-contain',
+            'transition-[color,background-color] duration-[var(--blocks-duration-fast)]',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base'
+        ],
+        // The status-coloured circle.
+        marker: [
+            'flex items-center justify-center shrink-0 font-semibold rounded-commit border-2 box-border',
+            'transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)]'
+        ],
+        // Column (marker width) that carries the vertical connector below a marker.
+        // `flex-col` is essential: it makes the connector's `flex-1` grow *down* the
+        // column (a thin vertical line) instead of *across* it (a fat block).
+        connectorColumn: 'flex flex-col shrink-0 items-center',
+        // The connecting line between markers.
+        connector: [
+            'bg-border-subtle',
+            'transition-[background-color] duration-[var(--blocks-duration-normal)]'
+        ],
+        // Title + subtitle wrapper.
+        labelGroup: 'flex flex-col min-w-0',
+        title: [
+            'font-medium leading-tight truncate',
+            'transition-colors duration-[var(--blocks-duration-fast)]'
+        ],
+        subtitle: 'text-text-tertiary leading-tight mt-0.5 truncate',
+        // Lower row (vertical only): connector column + inline detail region.
+        body: 'flex',
+        // Grid-rows collapse wrapper (0fr → 1fr). Reduced-motion safe: the duration
+        // token collapses to 1ms under prefers-reduced-motion (interaction.css).
+        detail: [
+            'grid',
+            'transition-[grid-template-rows] duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-smooth)]'
+        ],
+        detailInner: 'overflow-hidden min-h-0',
+        detailContent: 'text-text-secondary',
+        // Shared detail panel (horizontal only) rendered beneath the rail.
+        panel: 'text-text-secondary border border-border-subtle rounded-contain bg-surface-quiet'
+    },
+    variants: {
+        orientation: {
+            vertical: {
+                rail: 'flex-col'
+            },
+            horizontal: {
+                // Column layout so the shared detail panel sits below the rail.
+                base: 'flex flex-col',
+                rail: 'flex-row items-start',
+                // Each node grows to spread markers evenly; the last one hugs its content.
+                node: 'flex items-center [&:not(:last-child)]:flex-1',
+                // Compact header (marker + label side by side) so the connector can grow.
+                trigger: 'w-auto shrink-0'
+            }
+        },
+        size: {
+            sm: {
+                marker: 'size-7 text-xs',
+                connectorColumn: 'w-7',
+                trigger: 'gap-2',
+                title: 'text-xs',
+                subtitle: 'text-[11px]',
+                detailContent: 'text-sm pl-2'
+            },
+            md: {
+                marker: 'size-9 text-sm',
+                connectorColumn: 'w-9',
+                trigger: 'gap-2.5',
+                title: 'text-sm',
+                subtitle: 'text-xs',
+                detailContent: 'text-sm pl-2.5'
+            },
+            lg: {
+                marker: 'size-11 text-base',
+                connectorColumn: 'w-11',
+                trigger: 'gap-3',
+                title: 'text-base',
+                subtitle: 'text-sm',
+                detailContent: 'text-base pl-3'
+            }
+        },
+        // Marker colour + title tone per journey status. Mirrors the semantic intent
+        // palette (success / primary / danger / neutral) used across Badge, Alert,
+        // Progress and Stepper.
+        status: {
+            complete: {
+                marker: 'border-success bg-success text-text-on-primary'
+            },
+            active: {
+                marker: 'border-primary bg-primary text-text-on-primary shadow-[var(--blocks-shadow-sm)]',
+                title: 'text-text-primary'
+            },
+            pending: {
+                marker: 'border-border-default bg-surface-base text-text-tertiary'
+            },
+            blocked: {
+                marker: 'border-danger bg-danger text-text-on-primary',
+                title: 'text-danger'
+            },
+            skipped: {
+                marker: 'border-border-subtle bg-surface-subtle text-text-tertiary opacity-70',
+                title: 'text-text-tertiary'
+            }
+        },
+        // The currently expanded node. Distinct from DOM focus (focus-visible ring).
+        focused: {
+            true: {
+                trigger: 'bg-surface-subtle',
+                title: 'text-text-primary font-semibold'
+            },
+            false: {}
+        },
+        // Focusable nodes react to hover + show a pointer; pure waypoints do not.
+        interactive: {
+            true: {
+                trigger: 'cursor-pointer hover:bg-surface-hover'
+            },
+            false: {
+                trigger: 'cursor-default'
+            }
+        },
+        // The connector segment leading out of a completed node reads as "travelled".
+        connectorComplete: {
+            true: {
+                connector: 'bg-success'
+            },
+            false: {}
+        }
+    },
+    compoundVariants: [
+        // Vertical connector geometry: a thin line that grows down the marker column.
+        {
+            orientation: 'vertical',
+            class: {
+                connector: 'w-0.5 flex-1 my-1 min-h-4 rounded-commit'
+            }
+        },
+        // Horizontal connector geometry: a thin line filling the gap to the next marker.
+        {
+            orientation: 'horizontal',
+            class: {
+                connector: 'h-0.5 flex-1 mx-2 self-center rounded-commit'
+            }
+        },
+        // A focused pure waypoint keeps a bold title but gains no hover surface.
+        {
+            interactive: false,
+            focused: true,
+            class: {
+                trigger: 'bg-transparent'
+            }
+        }
+    ],
+    defaultVariants: {
+        orientation: 'vertical',
+        size: 'md',
+        status: 'pending',
+        focused: false,
+        interactive: true,
+        connectorComplete: false
+    }
+});

package/dist/primitives/Stepper/index.d.ts

@@ -21,6 +21,7 @@ export interface StepperContext {
  *
  * @tag navigation
  * @related Tab
+ * @related JourneyTimeline
  *
  * @example
  * ```svelte

package/dist/primitives/index.d.ts

@@ -30,6 +30,8 @@ export type { FormFieldProps, FormFieldSlotContext } from './FormField/index.js'
 export * from './FormField/index.js';
 export type { InputProps } from './Input/index.js';
 export * from './Input/index.js';
+export type { JourneyNode, JourneyStatus, JourneyTimelineProps } from './JourneyTimeline/index.js';
+export * from './JourneyTimeline/index.js';
 export type { MenuContext, MenuCustomSlots, MenuItemType, MenuObjectOption, MenuOption, MenuProps, MenuSectionHeader } from './Menu/index.js';
 export * from './Menu/index.js';
 export type { PaginationItemProps, PaginationProps } from './Pagination/index.js';

package/dist/primitives/index.js

@@ -16,6 +16,7 @@ export * from './Dialog/index.js';
 export * from './Drawer/index.js';
 export * from './FormField/index.js';
 export * from './Input/index.js';
+export * from './JourneyTimeline/index.js';
 export * from './Menu/index.js';
 export * from './Pagination/index.js';
 export * from './Popover/index.js';

package/dist/translations/de.d.ts

@@ -129,6 +129,16 @@ declare const _default: {
         readonly filterPlaceholder: "Themen filtern…";
         readonly noResults: "Keine passenden Themen";
     };
+    readonly journeyTimeline: {
+        readonly label: "Verlauf";
+        readonly status: {
+            readonly complete: "Abgeschlossen";
+            readonly active: "In Bearbeitung";
+            readonly pending: "Ausstehend";
+            readonly blocked: "Blockiert";
+            readonly skipped: "Übersprungen";
+        };
+    };
     readonly datepicker: {
         readonly placeholder: "Datum wählen...";
         readonly rangePlaceholder: "Zeitraum wählen...";

package/dist/translations/de.js

@@ -129,6 +129,16 @@ export default {
         filterPlaceholder: 'Themen filtern…',
         noResults: 'Keine passenden Themen'
     },
+    journeyTimeline: {
+        label: 'Verlauf',
+        status: {
+            complete: 'Abgeschlossen',
+            active: 'In Bearbeitung',
+            pending: 'Ausstehend',
+            blocked: 'Blockiert',
+            skipped: 'Übersprungen'
+        }
+    },
     datepicker: {
         placeholder: 'Datum wählen...',
         rangePlaceholder: 'Zeitraum wählen...',

package/dist/translations/en.d.ts

@@ -129,6 +129,16 @@ declare const _default: {
         readonly filterPlaceholder: "Filter topics…";
         readonly noResults: "No matching topics";
     };
+    readonly journeyTimeline: {
+        readonly label: "Journey";
+        readonly status: {
+            readonly complete: "Completed";
+            readonly active: "In progress";
+            readonly pending: "Pending";
+            readonly blocked: "Blocked";
+            readonly skipped: "Skipped";
+        };
+    };
     readonly datepicker: {
         readonly placeholder: "Select a date...";
         readonly rangePlaceholder: "Select a date range...";

package/dist/translations/en.js

@@ -129,6 +129,16 @@ export default {
         filterPlaceholder: 'Filter topics…',
         noResults: 'No matching topics'
     },
+    journeyTimeline: {
+        label: 'Journey',
+        status: {
+            complete: 'Completed',
+            active: 'In progress',
+            pending: 'Pending',
+            blocked: 'Blocked',
+            skipped: 'Skipped'
+        }
+    },
     datepicker: {
         placeholder: 'Select a date...',
         rangePlaceholder: 'Select a date range...',

package/dist/utils/guide.svelte.d.ts

@@ -127,6 +127,9 @@ export interface GuideNavigationSource {
      * Subscribe to navigations; `onNavigate` receives the new path. Returns an unsubscribe. The
      * controller subscribes only while a tour with at least one `route` step is active, so a tour
      * that never declares a route observes no navigation (preserving the manual-`goto` recipe).
+     * `onNavigate` may be invoked **synchronously, re-entrant** during the controller's own `navigate`
+     * hook (a SvelteKit `afterNavigate` source fires inside `goto`); the controller recognizes that as
+     * the tour's own navigation and keeps it running, so the source needs no `queueMicrotask` deferral.
      */
     subscribe(onNavigate: (path: string) => void): () => void;
 }

package/dist/utils/guide.svelte.js

@@ -93,6 +93,20 @@ export function createBrowserNavigationSource() {
 }
 /** DEV-only: grace period for a navigated-to `route` step's target before warning it never showed. */
 const ROUTE_TARGET_TIMEOUT_MS = 4000;
+/**
+ * Heuristic: does `landed` look like a router-normalized form of `route` — a trailing slash
+ * (`/expenses/`) or a base/locale prefix (`/de/expenses`) — rather than an unrelated redirect target
+ * (`/login`)? Used ONLY to decide whether a *synchronous* own-navigation landing on a non-exact path
+ * deserves a DEV diagnostic, never to change tour behavior, so a wrong guess merely over- or
+ * under-warns in DEV. `route` is a normalized pathname (leading `/`), so the suffix test lands on a
+ * real segment boundary — `/myexpenses` does not end with `/expenses`.
+ */
+function looksLikeNormalizedRoute(landed, route) {
+    const stripSlash = (s) => (s.length > 1 && s.endsWith('/') ? s.slice(0, -1) : s);
+    const l = stripSlash(landed);
+    const r = stripSlash(route);
+    return l === r || l.endsWith(r);
+}
 let tourIdCounter = 0;
 /** Opaque id for overlay-stack registration. Never SSR-rendered, so no hydration risk. */
 function nextOverlayId() {
@@ -157,6 +171,21 @@ export class GuideController {
     #navSource;
     /** The path a tour-internal navigation is heading to; distinguishes our own nav from a foreign one. */
     #expectedRoute = null;
+    /**
+     * `true` only while our own injected `#navigate()` call is on the stack. A `navigationSource` that
+     * reports its location change **synchronously, re-entrant** during that call (SvelteKit's
+     * `afterNavigate` fires inside `goto`) IS that very navigation — never a foreign one. This is the
+     * exact signal; the `path === #expectedRoute` check in `#onLocationChange` is only an async-source
+     * proxy for the same thing and breaks the moment the router reports a normalized path
+     * (trailing slash, base/locale prefix) that doesn't equal the raw `step.route`.
+     *
+     * A boolean (not a depth counter) is enough: the sole re-entrant callee of a sync source is
+     * `#onLocationChange`, which never calls `#maybeNavigate`. A `navigate` hook that *synchronously*
+     * re-enters `next`/`prev`/`startTour` is out of contract — its inner `#maybeNavigate` `finally`
+     * would clear this early; that only ever fails *closed* (a later own report read as foreign → stop),
+     * never open, so it can't keep a genuinely foreign navigation alive.
+     */
+    #selfNavigating = false;
     /** Last path the tour is known to be on — set at start, updated on each handled navigation. */
     #knownPath = '';
     /** Unsubscribe from the navigation source; non-null only while a route-using tour runs. */
@@ -406,6 +435,12 @@ export class GuideController {
         }
         this.#expectedRoute = route;
         this.#scheduleRouteTargetWarning();
+        // Mark the window during which a synchronous (re-entrant) location report from the
+        // navigationSource is unambiguously our own navigation. Reset in `finally` the instant the
+        // (sync part of the) hook returns — an *async* report (the default Navigation-API source, or a
+        // microtask-deferred one) then falls through to the normal `#expectedRoute` matching, so the
+        // async path is unchanged.
+        this.#selfNavigating = true;
         try {
             const result = this.#navigate(route);
             if (result && typeof result.then === 'function') {
@@ -421,6 +456,9 @@ export class GuideController {
                 console.warn('[Guide] navigate hook threw:', err);
             this.#abortPendingNavigation(route);
         }
+        finally {
+            this.#selfNavigating = false;
+        }
     }
     /**
      * Roll back the bookkeeping for a navigation that failed (hook threw/rejected) — but only if it
@@ -435,9 +473,10 @@ export class GuideController {
         this.#clearRouteTargetWarning();
     }
     /**
-     * React to a navigation observed while a route-using tour runs. A navigation matching the pending
-     * `expectedRoute` is the tour's own → clear the flag and keep running (the ring lands via the
-     * surface's `reapplyStepHighlight`). Any other navigation is foreign — the user left, or a
+     * React to a navigation observed while a route-using tour runs. A navigation that is the tour's own
+     * — reported synchronously during our `#navigate()` call (`#selfNavigating`), or matching the
+     * pending `#expectedRoute` — keeps it running (the ring lands via the surface's
+     * `reapplyStepHighlight`). Any other navigation is foreign — the user left, or a
      * youngest-gesture-wins race — and tears the tour down, analytics-silent (`stopTour`).
      */
     #onLocationChange(path) {
@@ -446,15 +485,36 @@ export class GuideController {
         if (path === this.#knownPath)
             return; // no pathname change (e.g. a hash/query update) — ignore
         this.#knownPath = path;
-        if (this.#expectedRoute !== null && path === this.#expectedRoute) {
-            // The tour's own navigation landed — keep running. For a *targeted* step, keep `#expectedRoute`
-            // set until the target settles (`#applyStepHighlight`) so a redirecting / multi-hop source (the
-            // Navigation API emitting one event per hop) firing a *second* event for the redirect target is
-            // still recognized as a mismatch (and DEV-warned) instead of silently stopping. A *targetless*
-            // route step has no target to wait for — it is settled on landing, so clear now; otherwise a
-            // later foreign navigation would misfire the "navigated toward …" warning. (`#maybeNavigate`
-            // also resets it on the next step. Clearing here can't move into `#applyStepHighlight`, which
-            // runs synchronously in `#activateStep` before the nav lands — it would mis-read our own nav.)
+        const matchesExpected = this.#expectedRoute !== null && path === this.#expectedRoute;
+        // A location report is the tour's OWN navigation in two cases: it matches the pending
+        // `#expectedRoute` (the async-source proxy, for a report landing a tick after the hook returns),
+        // or it arrives synchronously, re-entrant, during our injected `#navigate()` call
+        // (`#selfNavigating`). The latter is a *causal* signal — our navigate produced this report,
+        // whatever path it carries — so it covers a router-normalized landing (trailing slash,
+        // base/locale prefix) that an exact match would miss. Either keeps the tour running.
+        if (this.#selfNavigating || matchesExpected) {
+            // A *synchronous* report on a path that isn't the expected route is still causally ours, but it
+            // landed somewhere unexpected: a normalized variant of `step.route` (fine — the target anchors
+            // once it mounts) or a genuine redirect off the route (an auth guard → `/login`). We keep
+            // running either way — stopping would re-break the normalized case this fix exists for — but a
+            // landing that doesn't even look like a normalized variant is most likely a redirect, so
+            // surface it in DEV. (A targetless step has no "target never appeared" timer, so an off-route
+            // bubble is otherwise invisible in both DEV and PROD.)
+            if (this.#dev &&
+                this.#selfNavigating &&
+                this.#expectedRoute !== null &&
+                !matchesExpected &&
+                !looksLikeNormalizedRoute(path, this.#expectedRoute)) {
+                console.warn(`[Guide] tour "${this.#activeTour?.id}" navigated toward "${this.#expectedRoute}" but synchronously landed on "${path}" — keeping the tour running as its own navigation. If this was a redirect off the step's route (not a normalized form of it), stop the tour explicitly from your router guard.`);
+            }
+            // For a *targeted* step, keep `#expectedRoute` set until the target settles
+            // (`#applyStepHighlight`) so a redirecting / multi-hop source (the Navigation API emitting one
+            // event per hop) firing a *second* event for the redirect target is still recognized as a
+            // mismatch (and DEV-warned) instead of silently stopping. A *targetless* route step has no
+            // target to wait for — it is settled on landing, so clear now; otherwise a later foreign
+            // navigation would misfire the "navigated toward …" warning. (`#maybeNavigate` also resets it
+            // on the next step. Clearing here can't move into `#applyStepHighlight`, which runs
+            // synchronously in `#activateStep` before the nav lands — it would mis-read our own nav.)
             if (this.currentStep?.target == null)
                 this.#expectedRoute = null;
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.8.0",
+  "version": "6.9.0",
   "description": "Svelte 5 UI component library with Tailwind CSS 4, OKLCH design tokens and zero runtime dependencies",
   "license": "MIT",
   "repository": {
@@ -91,8 +91,8 @@
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.3.1",
-    "@urbicon-ui/i18n": "6.8.0",
-    "@urbicon-ui/shared-types": "6.8.0",
+    "@urbicon-ui/i18n": "6.9.0",
+    "@urbicon-ui/shared-types": "6.9.0",
     "prettier": "^3.8.4",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",