@urbicon-ui/blocks 6.10.1 → 6.12.0

package/dist/i18n/index.d.ts

@@ -137,6 +137,7 @@ declare const blocksTranslations: {
                 readonly complete: "Completed";
                 readonly active: "In progress";
                 readonly pending: "Pending";
+                readonly attention: "Needs attention";
                 readonly blocked: "Blocked";
                 readonly skipped: "Skipped";
             };
@@ -318,6 +319,7 @@ declare const blocksTranslations: {
                 readonly complete: "Abgeschlossen";
                 readonly active: "In Bearbeitung";
                 readonly pending: "Ausstehend";
+                readonly attention: "Aufmerksamkeit erforderlich";
                 readonly blocked: "Blockiert";
                 readonly skipped: "Übersprungen";
             };

package/dist/primitives/JourneyTimeline/JourneyTimeline.svelte

@@ -20,6 +20,8 @@
     onFocusChange,
     node,
     meta,
+    marker,
+    trailing,
     class: className = '',
     unstyled: unstyledProp = false,
     slotClasses: slotClassesProp = {},
@@ -310,6 +312,25 @@
   <span class="sr-only">{statusLabel(item.status)}</span>
 {/snippet}
 
+{#snippet markerDot(item: JourneyNode, styles: Styles | null)}
+  <!-- Decorative either way: the status is announced via the sr-only label,
+       so custom glyph content never needs to be readable. -->
+  <span class={sc(styles, 'marker')} data-journey-marker="" aria-hidden="true">
+    {#if marker}{@render marker(item)}{/if}
+  </span>
+{/snippet}
+
+{#snippet headerRow(item: JourneyNode, index: number, focused: boolean, styles: Styles | null)}
+  <div class={sc(styles, 'header')}>
+    {@render trigger(item, index, focused, styles)}
+    {#if trailing}
+      <div class={sc(styles, 'trailing')} data-journey-trailing="">
+        {@render trailing(item)}
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
 {#snippet trigger(item: JourneyNode, index: number, focused: boolean, styles: Styles | null)}
   {@const interactive = item.focusable !== false}
   {#if interactive}
@@ -373,11 +394,11 @@
               {/if}
             </div>
           {/if}
-          <!-- DOM order trigger → spine (visual order flipped via order-*):
+          <!-- DOM order header → spine (visual order flipped via order-*):
                a segment label is announced after the node it departs from. -->
-          {@render trigger(item, index, focused, styles)}
+          {@render headerRow(item, index, focused, styles)}
           <div class={sc(styles, 'markerColumn')}>
-            <span class={sc(styles, 'marker')} data-journey-marker="" aria-hidden="true"></span>
+            {@render markerDot(item, styles)}
             {#if !last}
               <span data-journey-connector="" class={sc(styles, 'connector')} aria-hidden="true"
               ></span>
@@ -404,7 +425,7 @@
             </div>
           {/if}
           <div class={sc(styles, 'markerColumn')}>
-            <span class={sc(styles, 'marker')} data-journey-marker="" aria-hidden="true"></span>
+            {@render markerDot(item, styles)}
             {#if !last}
               <span data-journey-connector="" class={sc(styles, 'connector')} aria-hidden="true"
               ></span>
@@ -412,7 +433,7 @@
           </div>
           <div class={sc(styles, 'content', last && 'pb-0')}>
             <div class={sc(styles, 'card')}>
-              {@render trigger(item, index, focused, styles)}
+              {@render headerRow(item, index, focused, styles)}
               {#if detailMode === 'inline' && node && item.focusable !== false}
                 <div
                   id={detailDomId(index)}

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

@@ -2,7 +2,7 @@ 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 title tone. */
-export type JourneyStatus = 'complete' | 'active' | 'pending' | 'blocked' | 'skipped';
+export type JourneyStatus = 'complete' | 'active' | 'pending' | 'attention' | '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. */
@@ -12,8 +12,9 @@ export interface JourneyNode {
     /**
      * Lifecycle status. Maps to a semantic dot marker + title tone:
      * `complete` (success), `active` (primary, ringed), `pending` (hollow),
-     * `blocked` (danger), `skipped` (muted). The status is also announced through
-     * a visually-hidden label.
+     * `attention` (warning — worth a look, does not block), `blocked` (danger),
+     * `skipped` (muted). The status is also announced through a visually-hidden
+     * label.
      */
     status: JourneyStatus;
     /** Short context line shown below the title. */
@@ -51,13 +52,17 @@ export interface JourneyNode {
  * shows rich detail (`node` snippet); the rest stay quiet, compact context
  * rows. The chronicle axis is first-class: per-node `meta` (time/date/actor)
  * renders on a meta rail, connectors carry meaning (`solid | dashed | dotted`)
- * and `segmentLabel` annotates the stretch between nodes. Detail placement is
- * configurable: `detail="inline"` expands in place (vertical default);
- * `detail="panel"` renders a stable readout beside (wide) or docked below
- * (narrow) the rail — horizontal always uses the panel. Use `Stepper` for a
- * prospective wizard/progress indicator and `Tab` for switching between peer
- * views; JourneyTimeline is read-only observation of a sequence, not process
- * control or navigation.
+ * and `segmentLabel` annotates the stretch between nodes. Rows extend without
+ * forking the layout: a `marker` snippet puts glyphs inside the status dots, a
+ * `trailing` snippet adds badges/help/actions beside each header (outside the
+ * button — safe for interactive elements), and the `attention` status flags
+ * optional-but-noteworthy rows. Detail placement is configurable:
+ * `detail="inline"` expands in place (vertical default); `detail="panel"`
+ * renders a stable readout beside (wide) or docked below (narrow) the rail —
+ * horizontal always uses the panel. Use `Stepper` for a prospective
+ * wizard/progress indicator and `Tab` for switching between peer views;
+ * JourneyTimeline is read-only observation of a sequence, not process control
+ * or navigation.
  *
  * @tag navigation
  * @tag display
@@ -127,14 +132,30 @@ export interface JourneyTimelineProps extends Pick<JourneyTimelineVariants, 'ori
      * the plain `item.meta` text (e.g. planned + actual time with a Badge).
      */
     meta?: Snippet<[JourneyNode]>;
+    /**
+     * Custom content *inside* each status dot — a glyph, count or icon. The dot
+     * keeps its status colour, shape and size contract (scale it via
+     * `slotClasses.marker`, e.g. `size-5`). Markers stay decorative
+     * (`aria-hidden`); the status is still announced through the hidden label.
+     */
+    marker?: Snippet<[JourneyNode]>;
+    /**
+     * End-of-row content beside each node's header — status badges, a help
+     * affordance, quick actions. Renders *outside* the trigger button (a sibling
+     * in the header row), so interactive elements are valid HTML and activating
+     * them never moves the focused node. Right-aligned in vertical orientation,
+     * appended to the label pill in horizontal.
+     */
+    trailing?: 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 | metaColumn | meta |
-     * markerColumn | marker | connector | content | card | trigger | labelGroup |
-     * title | subtitle | segment | detail | detailInner | detailContent | panel
+     * markerColumn | marker | connector | content | card | header | trigger |
+     * trailing | labelGroup | title | subtitle | segment | detail | detailInner |
+     * detailContent | panel
      */
     slotClasses?: Partial<Record<JourneyTimelineSlots, string>>;
     /**

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

@@ -6,6 +6,9 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
             node: string;
             markerColumn: string;
             connector: string;
+            header: string;
+            trigger: string;
+            trailing: string;
             segment: string;
         };
         horizontal: {
@@ -14,6 +17,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
             node: string;
             metaColumn: string;
             markerColumn: string;
+            header: string;
             trigger: string;
             connector: string;
             segment: string;
@@ -71,6 +75,10 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
             marker: string;
             title: string;
         };
+        attention: {
+            marker: string;
+            title: string;
+        };
         blocked: {
             marker: string;
             title: string;
@@ -128,7 +136,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     base: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -142,7 +150,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     rail: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -156,7 +164,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     node: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -170,7 +178,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     metaColumn: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -184,7 +192,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     meta: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -198,7 +206,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     markerColumn: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -212,7 +220,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     marker: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -226,7 +234,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     connector: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -240,7 +248,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     content: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -254,7 +262,21 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     card: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        travelled?: boolean | undefined;
+        connectorStyle?: "solid" | "dashed" | "dotted" | undefined;
+        detail?: "inline" | "panel" | undefined;
+        withMeta?: 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;
+    header: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -268,7 +290,21 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     trigger: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        focused?: boolean | undefined;
+        interactive?: boolean | undefined;
+        travelled?: boolean | undefined;
+        connectorStyle?: "solid" | "dashed" | "dotted" | undefined;
+        detail?: "inline" | "panel" | undefined;
+        withMeta?: 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;
+    trailing: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -282,7 +318,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     labelGroup: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -296,7 +332,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     title: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -310,7 +346,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     subtitle: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -324,7 +360,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     segment: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -338,7 +374,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     detail: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -352,7 +388,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     detailInner: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -366,7 +402,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     detailContent: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -380,7 +416,7 @@ export declare const journeyTimelineVariants: (props?: import("../../utils/varia
     panel: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "complete" | "pending" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;

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

@@ -19,9 +19,10 @@ export const journeyTimelineVariants = tv({
         // grows down inside; horizontal: a full-width row the line grows right in.
         markerColumn: 'flex items-center',
         // The status dot. Deliberately small — the line is the protagonist, the
-        // dots are punctuation (contrast: Stepper's large glyph discs).
+        // dots are punctuation (contrast: Stepper's large glyph discs). The grid
+        // centring only matters when a `marker` snippet puts a glyph inside.
         marker: [
-            'box-border shrink-0 rounded-commit border-2',
+            'box-border grid shrink-0 place-items-center rounded-commit border-2',
             'transition-[background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)]'
         ],
         // The connecting line. Drawn with borders so `connectorStyle` can switch
@@ -39,13 +40,19 @@ export const journeyTimelineVariants = tv({
             'rounded-contain border border-transparent',
             'transition-[background-color,border-color,box-shadow] duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-gentle)]'
         ],
+        // Header row: the trigger plus the optional trailing area. Keeping
+        // `trailing` a *sibling* of the button (never a child) keeps interactive
+        // trailing content valid HTML and off the activation target.
+        header: 'flex',
         // The interactive header — title + subtitle. A <button> for focusable
         // nodes, a plain <div> for pure waypoints (focusable === false).
         trigger: [
-            'flex w-full appearance-none flex-col items-start gap-0.5 border-0 bg-transparent p-0 text-left',
+            'flex appearance-none flex-col items-start gap-0.5 border-0 bg-transparent p-0 text-left',
             'rounded-contain',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base'
         ],
+        // End-of-row content (badges, help, quick actions) beside the trigger.
+        trailing: 'flex shrink-0 items-center gap-1',
         labelGroup: 'flex min-w-0 flex-col',
         title: [
             'font-medium leading-tight',
@@ -75,6 +82,9 @@ export const journeyTimelineVariants = tv({
                 node: 'grid',
                 markerColumn: 'flex-col',
                 connector: 'my-1 w-0 min-h-3 flex-1 border-l-2',
+                header: 'items-start gap-x-3',
+                trigger: 'min-w-0 flex-1',
+                trailing: 'ml-auto',
                 segment: 'flex items-center'
             },
             horizontal: {
@@ -84,13 +94,14 @@ export const journeyTimelineVariants = tv({
                 // Stacked station: meta row above the spine, label pill below. Every
                 // node but the last stretches so the spine distributes the stations.
                 node: 'flex flex-col [&:not(:last-child)]:flex-1',
-                // Visual order is meta → spine → labels, but the DOM keeps the trigger
+                // Visual order is meta → spine → header, but the DOM keeps the header
                 // before the spine so a segment label is read *after* its node.
                 metaColumn: 'order-1 text-left',
                 markerColumn: 'order-2 w-full flex-row',
+                header: 'order-3 items-center gap-x-1.5 self-start',
                 // Shrink-to-fit pill around the labels only — the marker sits on the
                 // spine above, so the whole rail reads as stations on one line.
-                trigger: 'order-3 w-auto self-start',
+                trigger: 'w-auto',
                 connector: 'h-0 min-w-3 flex-1 border-t-2',
                 // Segment labels sit *in* the line (line — label — line); they widen
                 // the gap instead of overlapping the next station's marker.
@@ -152,6 +163,12 @@ export const journeyTimelineVariants = tv({
                 marker: 'bg-surface-base border-border-strong',
                 title: 'text-text-secondary'
             },
+            // Worth a look, does not block — hollow like pending but on the warning
+            // token, mirroring Stepper's per-step warning state.
+            attention: {
+                marker: 'bg-surface-base border-warning',
+                title: 'text-warning-emphasis'
+            },
             blocked: {
                 marker: 'bg-danger border-danger',
                 title: 'text-danger'
@@ -248,7 +265,7 @@ export const journeyTimelineVariants = tv({
                 node: 'gap-y-0.5',
                 metaColumn: 'min-h-3.5',
                 markerColumn: 'h-4 gap-1 pr-1',
-                trigger: '-mx-1.5 px-1.5 py-1'
+                trigger: '-ml-1.5 px-1.5 py-1'
             }
         },
         {
@@ -258,7 +275,7 @@ export const journeyTimelineVariants = tv({
                 node: 'gap-y-1',
                 metaColumn: 'min-h-4',
                 markerColumn: 'h-4 gap-1.5 pr-1.5',
-                trigger: '-mx-2 px-2 py-1.5'
+                trigger: '-ml-2 px-2 py-1.5'
             }
         },
         {
@@ -268,7 +285,7 @@ export const journeyTimelineVariants = tv({
                 node: 'gap-y-1',
                 metaColumn: 'min-h-4.5',
                 markerColumn: 'h-5 gap-2 pr-2',
-                trigger: '-mx-2.5 px-2.5 py-2'
+                trigger: '-ml-2.5 px-2.5 py-2'
             }
         },
         // Vertical + panel: two-column layout on wide viewports; on narrow ones the

package/dist/translations/de.d.ts

@@ -135,6 +135,7 @@ declare const _default: {
             readonly complete: "Abgeschlossen";
             readonly active: "In Bearbeitung";
             readonly pending: "Ausstehend";
+            readonly attention: "Aufmerksamkeit erforderlich";
             readonly blocked: "Blockiert";
             readonly skipped: "Übersprungen";
         };

package/dist/translations/de.js

@@ -135,6 +135,7 @@ export default {
             complete: 'Abgeschlossen',
             active: 'In Bearbeitung',
             pending: 'Ausstehend',
+            attention: 'Aufmerksamkeit erforderlich',
             blocked: 'Blockiert',
             skipped: 'Übersprungen'
         }

package/dist/translations/en.d.ts

@@ -135,6 +135,7 @@ declare const _default: {
             readonly complete: "Completed";
             readonly active: "In progress";
             readonly pending: "Pending";
+            readonly attention: "Needs attention";
             readonly blocked: "Blocked";
             readonly skipped: "Skipped";
         };

package/dist/translations/en.js

@@ -135,6 +135,7 @@ export default {
             complete: 'Completed',
             active: 'In progress',
             pending: 'Pending',
+            attention: 'Needs attention',
             blocked: 'Blocked',
             skipped: 'Skipped'
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.10.1",
+  "version": "6.12.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.10.1",
-    "@urbicon-ui/shared-types": "6.10.1",
+    "@urbicon-ui/i18n": "6.12.0",
+    "@urbicon-ui/shared-types": "6.12.0",
     "prettier": "^3.8.4",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",