@urbicon-ui/blocks 6.9.0 → 6.11.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

@@ -1,11 +1,6 @@
 <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,
@@ -15,20 +10,18 @@
 
   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',
+    detail: detailProp,
     focusId = $bindable(),
     defaultFocusId,
-    scrollSpy = false,
     onFocusChange,
     node,
+    meta,
+    marker,
+    trailing,
     class: className = '',
     unstyled: unstyledProp = false,
     slotClasses: slotClassesProp = {},
@@ -39,6 +32,14 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
+  // Horizontal always renders the shared panel — inline expansion inside a
+  // horizontal rail has no sane geometry. `detail` only chooses for vertical.
+  const detailMode = $derived(orientation === 'horizontal' ? 'panel' : (detailProp ?? 'inline'));
+
+  // The chronicle axis renders as soon as any node carries `meta` (or a rich
+  // `meta` snippet is provided).
+  const hasMetaRail = $derived(!!meta || items.some((it) => it.meta !== undefined));
+
   // --- focus state (controlled via bind:focusId, else internal) -------------
   const focusableItems = $derived(items.filter((it) => it.focusable !== false));
   const isFocusable = (id: string | undefined) =>
@@ -52,17 +53,17 @@
   );
 
   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.
+  // A stale internal focus (the focused node was removed) falls back to the
+  // default so a node is always in focus. 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.
+  // focused node. Kept distinct from `activeFocusId` so arrow keys can move DOM
+  // focus without changing the focused node (that happens on Enter/Space/click).
+  // Guarded against removed nodes 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
@@ -77,7 +78,7 @@
     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.`
+        `[JourneyTimeline] focusId "${focusId}" matches no focusable node — no node shows its detail.`
       );
     }
     if (focusId === undefined && defaultFocusId !== undefined && !isFocusable(defaultFocusId)) {
@@ -87,22 +88,97 @@
     }
     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.'
+        '[JourneyTimeline] focusable nodes render as buttons but no `node` snippet was provided. Pass a `node` snippet or set focusable:false on nodes that carry no detail.'
+      );
+    }
+    if (orientation === 'horizontal' && detailProp === 'inline') {
+      console.warn(
+        '[JourneyTimeline] detail="inline" is ignored for orientation="horizontal" — the horizontal rail always renders the shared panel.'
       );
     }
   });
 
-  function setFocus(id: string) {
+  function setFocus(id: string): boolean {
     const target = items.find((it) => it.id === id);
-    if (!target || target.focusable === false || id === activeFocusId) return;
+    if (!target || target.focusable === false || id === activeFocusId) return false;
     if (focusId !== undefined) focusId = id;
     else internalFocusId = id;
     onFocusChange?.(id);
+    return true;
   }
 
   function activate(item: JourneyNode) {
     rovingId = item.id;
-    setFocus(item.id);
+    if (setFocus(item.id)) pinFocusAnchor(item.id);
+  }
+
+  // --- focus anchor pinning --------------------------------------------------
+  // When activating a node below the currently open card, that card's collapse
+  // would yank the freshly activated header up the page. While the height
+  // transition runs, counter-scroll each frame so the activated header stays
+  // visually stationary — the context moves, the focus point doesn't. Real user
+  // scroll input cancels the pin immediately. Inline vertical detail only; the
+  // panel modes never change geometry.
+  // Only one pin may drive the scroll at a time: activating another node while
+  // a pin is in flight cancels it first (two loops anchored to different
+  // headers would fight over the scroll position frame by frame).
+  let cancelActivePin: (() => void) | undefined;
+  function pinFocusAnchor(id: string) {
+    if (orientation !== 'vertical' || detailMode !== 'inline' || !node || !rootRef) return;
+    cancelActivePin?.();
+    const anchor = rootRef.querySelector<HTMLElement>(
+      `[data-journey-trigger][data-node-id="${id}"]`
+    );
+    if (!anchor) return;
+
+    // Nearest scrollable ancestor, else the window.
+    let scroller: HTMLElement | null = rootRef.parentElement;
+    while (scroller) {
+      const style = getComputedStyle(scroller);
+      if (/(auto|scroll)/.test(style.overflowY) && scroller.scrollHeight > scroller.clientHeight)
+        break;
+      scroller = scroller.parentElement;
+    }
+
+    // Pin for as long as the grid-rows transition runs (motion tokens collapse
+    // to 1ms under prefers-reduced-motion, so the pin is a single correction).
+    const detailEl = rootRef.querySelector<HTMLElement>('[data-journey-detail]');
+    const raw = detailEl ? getComputedStyle(detailEl).transitionDuration.split(',')[0].trim() : '';
+    const parsed = raw.endsWith('ms')
+      ? Number.parseFloat(raw)
+      : raw.endsWith('s')
+        ? Number.parseFloat(raw) * 1000
+        : Number.NaN;
+    const duration = Math.min(Number.isFinite(parsed) ? parsed + 80 : 380, 600);
+
+    const startTop = anchor.getBoundingClientRect().top;
+    const start = performance.now();
+    let cancelled = false;
+    const cancel = () => {
+      cancelled = true;
+    };
+    cancelActivePin = cancel;
+    window.addEventListener('wheel', cancel, { passive: true, capture: true });
+    window.addEventListener('touchmove', cancel, { passive: true, capture: true });
+    const cleanup = () => {
+      window.removeEventListener('wheel', cancel, { capture: true });
+      window.removeEventListener('touchmove', cancel, { capture: true });
+      if (cancelActivePin === cancel) cancelActivePin = undefined;
+    };
+    const step = () => {
+      if (cancelled || !anchor.isConnected) {
+        cleanup();
+        return;
+      }
+      const drift = anchor.getBoundingClientRect().top - startTop;
+      if (drift !== 0) {
+        if (scroller) scroller.scrollTop += drift;
+        else window.scrollBy(0, drift);
+      }
+      if (performance.now() - start < duration) requestAnimationFrame(step);
+      else cleanup();
+    };
+    requestAnimationFrame(step);
   }
 
   // --- keyboard roving navigation -------------------------------------------
@@ -161,47 +237,13 @@
     }
   }
 
-  // --- 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 })
+    unstyled
+      ? null
+      : journeyTimelineVariants({ orientation, size, detail: detailMode, withMeta: hasMetaRail })
   );
 
   function nodeStyles(item: JourneyNode, focused: boolean): Styles | null {
@@ -210,11 +252,14 @@
       : journeyTimelineVariants({
           orientation,
           size,
+          detail: detailMode,
+          withMeta: hasMetaRail,
           status: item.status,
           focused,
           interactive: item.focusable !== false,
           // The connector leaving a completed node reads as "travelled".
-          connectorComplete: item.status === 'complete'
+          travelled: item.status === 'complete',
+          connectorStyle: item.connector ?? 'solid'
         });
   }
 
@@ -235,7 +280,6 @@
   }
 
   // --- misc derived ----------------------------------------------------------
-  const iconSize = $derived(size === 'sm' ? 14 : size === 'lg' ? 20 : 16);
   const focusedItem = $derived(
     items.find((it) => it.focusable !== false && it.id === activeFocusId)
   );
@@ -250,21 +294,15 @@
   }
 </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} />
+{#snippet metaCell(item: JourneyNode, styles: Styles | null)}
+  {#if meta}
+    {@render meta(item)}
+  {:else if item.meta !== undefined}
+    <span class={sc(styles, 'meta')}>{item.meta}</span>
   {/if}
 {/snippet}
 
-{#snippet header(item: JourneyNode, styles: Styles | null)}
-  <span class={sc(styles, 'marker')}>{@render markerGlyph(item)}</span>
+{#snippet labels(item: JourneyNode, styles: Styles | null)}
   <span class={sc(styles, 'labelGroup')}>
     <span class={sc(styles, 'title')}>{item.title}</span>
     {#if item.subtitle}
@@ -274,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}
@@ -285,17 +342,19 @@
       tabindex={item.id === tabbableId ? 0 : -1}
       aria-expanded={node ? focused : undefined}
       aria-controls={node
-        ? orientation === 'horizontal'
-          ? panelId
+        ? detailMode === 'panel'
+          ? // Reference the shared readout only while it actually renders — a
+            // bad controlled focusId leaves no panel to point at.
+            focusedItem && panelId
           : detailDomId(index)
         : undefined}
       onclick={() => activate(item)}
     >
-      {@render header(item, styles)}
+      {@render labels(item, styles)}
     </button>
   {:else}
     <div class={sc(styles, 'trigger')} data-node-id={item.id}>
-      {@render header(item, styles)}
+      {@render labels(item, styles)}
     </div>
   {/if}
 {/snippet}
@@ -304,6 +363,7 @@
   bind:this={rootRef}
   class={sc(containerStyles, 'base', className)}
   data-orientation={orientation}
+  data-detail={detailMode}
   {...restProps}
 >
   <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
@@ -314,6 +374,7 @@
   >
     {#each items as item, index (item.id)}
       {@const focused = item.focusable !== false && item.id === activeFocusId}
+      {@const last = index === items.length - 1}
       {@const styles = nodeStyles(item, focused)}
       {#if orientation === 'horizontal'}
         <li
@@ -322,8 +383,34 @@
           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>
+          {#if hasMetaRail}
+            <div class={sc(styles, 'metaColumn')}>
+              {#if meta || item.meta !== undefined}
+                {@render metaCell(item, styles)}
+              {:else}
+                <!-- Empty placeholder keeps every station's meta row the same
+                     height, so markers and titles stay on one baseline. -->
+                <span class={sc(styles, 'meta')} aria-hidden="true">&nbsp;</span>
+              {/if}
+            </div>
+          {/if}
+          <!-- DOM order header → spine (visual order flipped via order-*):
+               a segment label is announced after the node it departs from. -->
+          {@render headerRow(item, index, focused, styles)}
+          <div class={sc(styles, 'markerColumn')}>
+            {@render markerDot(item, styles)}
+            {#if !last}
+              <span data-journey-connector="" class={sc(styles, 'connector')} aria-hidden="true"
+              ></span>
+              {#if item.segmentLabel}
+                <span class={sc(styles, 'segment')} data-journey-segment="">
+                  {item.segmentLabel}
+                </span>
+                <span data-journey-connector="" class={sc(styles, 'connector')} aria-hidden="true"
+                ></span>
+              {/if}
+            {/if}
+          </div>
         </li>
       {:else}
         <li
@@ -332,25 +419,41 @@
           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>
+          {#if hasMetaRail}
+            <div class={sc(styles, 'metaColumn')}>
+              {@render metaCell(item, styles)}
             </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}
+          {/if}
+          <div class={sc(styles, 'markerColumn')}>
+            {@render markerDot(item, styles)}
+            {#if !last}
+              <span data-journey-connector="" class={sc(styles, 'connector')} aria-hidden="true"
+              ></span>
+            {/if}
+          </div>
+          <div class={sc(styles, 'content', last && 'pb-0')}>
+            <div class={sc(styles, 'card')}>
+              {@render headerRow(item, index, focused, styles)}
+              {#if detailMode === 'inline' && node && item.focusable !== false}
+                <div
+                  id={detailDomId(index)}
+                  role="region"
+                  aria-label={item.title}
+                  data-journey-detail=""
+                  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>
+            {#if item.segmentLabel && !last}
+              <div class={sc(styles, 'segment')} data-journey-segment="">
+                {item.segmentLabel}
               </div>
             {/if}
           </div>
@@ -359,11 +462,12 @@
     {/each}
   </ol>
 
-  {#if orientation === 'horizontal' && node && focusedItem}
+  {#if detailMode === 'panel' && node && focusedItem}
     <div
       id={panelId}
       role="region"
       aria-label={focusedItem.title}
+      data-journey-panel=""
       class={sc(containerStyles, 'panel')}
     >
       {@render node(focusedItem)}