@urbicon-ui/blocks 6.22.0 → 6.23.0

package/dist/primitives/Stepper/stepper.variants.d.ts

@@ -4,7 +4,7 @@ export declare const stepperVariants: ((props?: {
     orientation?: "horizontal" | "vertical" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     variant?: "default" | "outlined" | "minimal" | undefined;
-    stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+    stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
     clickable?: boolean | undefined;
     stepDisabled?: boolean | undefined;
     separatorComplete?: boolean | undefined;
@@ -14,7 +14,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -26,7 +26,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -38,7 +38,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -50,7 +50,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -62,7 +62,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -74,7 +74,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -86,7 +86,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -98,7 +98,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -110,7 +110,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;
@@ -122,7 +122,7 @@ export declare const stepperVariants: ((props?: {
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         variant?: "default" | "outlined" | "minimal" | undefined;
-        stepState?: "complete" | "active" | "error" | "warning" | "inactive" | undefined;
+        stepState?: "error" | "warning" | "active" | "inactive" | "complete" | undefined;
         clickable?: boolean | undefined;
         stepDisabled?: boolean | undefined;
         separatorComplete?: boolean | undefined;

package/dist/primitives/Textarea/Textarea.svelte

@@ -29,6 +29,7 @@
     slotClasses: slotClassesProp = {},
     preset,
     oninput: userOnInput,
+    'aria-describedby': ariaDescribedby,
     ...restProps
   }: TextareaProps = $props();
 
@@ -50,6 +51,14 @@
     disabled
   }));
 
+  // Consumer-supplied `aria-describedby` (e.g. an external hint rendered
+  // outside the component) merges with the internal error/helper chain instead
+  // of replacing it — internal descriptions first, the consumer's supplemental
+  // one last (mirrors the Input role model, XC-2).
+  const describedBy = $derived(
+    [ff.describedBy, ariaDescribedby].filter(Boolean).join(' ') || undefined
+  );
+
   const charCount = $derived(typeof value === 'string' ? value.length : 0);
   const counterState = $derived.by(() => {
     if (!maxlength) return 'normal' as const;
@@ -145,7 +154,7 @@
     {readonly}
     {required}
     aria-invalid={ff.invalid ? 'true' : undefined}
-    aria-describedby={ff.describedBy}
+    aria-describedby={describedBy}
     oninput={handleInput}></textarea>
 
   {#if showFooter}

package/dist/primitives/Toast/Toaster.svelte

@@ -56,6 +56,36 @@
     return toaster.registerSubscriber();
   });
 
+  // Sonner-style hover-to-pause. The pointer or keyboard focus being anywhere in
+  // the toaster region freezes the whole visible stack (all auto-dismiss timers
+  // + the progress bars) and leaving resumes each from its remaining time.
+  //
+  // These are bubbling over/out + focusin/focusout, NOT pointerenter/leave: the
+  // container is `pointer-events-none` (so clicks fall through the gaps between
+  // toasts to the page), which means it never becomes a pointer target itself —
+  // only its `pointer-events-auto` toast children do. enter/leave don't bubble
+  // and so would never fire here; over/out bubble up from the toasts. The
+  // `relatedTarget` containment check collapses the noisy per-descendant out/blur
+  // events into a single "the pointer/focus actually left the region" signal.
+  let pointerInside = $state(false);
+  let focusInside = $state(false);
+
+  $effect(() => {
+    if (pointerInside || focusInside) toaster.pause();
+    else toaster.resume();
+  });
+
+  // Safety net: if the Toaster unmounts while the stack is frozen (pointer/focus
+  // was still inside), un-freeze the singleton store so its timers aren't stranded.
+  $effect(() => {
+    return () => toaster.resume();
+  });
+
+  function leftRegion(event: PointerEvent | FocusEvent) {
+    const next = event.relatedTarget as Node | null;
+    return !(event.currentTarget as HTMLElement).contains(next);
+  }
+
   const visibleToasts = $derived(toaster.toasts.slice(-max));
 
   const styles = $derived(
@@ -124,6 +154,14 @@
   class={[slot('container'), className].filter(Boolean).join(' ')}
   aria-live="polite"
   aria-relevant="additions removals"
+  onpointerover={() => (pointerInside = true)}
+  onpointerout={(e) => {
+    if (leftRegion(e)) pointerInside = false;
+  }}
+  onfocusin={() => (focusInside = true)}
+  onfocusout={(e) => {
+    if (leftRegion(e)) focusInside = false;
+  }}
   {...restProps}
 >
   {#each visibleToasts as toast (toast.id)}
@@ -177,10 +215,16 @@
         </button>
       {/if}
 
-      {#if toast.showProgress && toast.duration > 0}
+      {#if toast.showProgress && Number.isFinite(toast.duration) && toast.duration > 0}
+        <!-- Duration comes from the toast itself (the real countdown), not a token.
+             `animation-play-state` tracks the store's paused flag so the bar freezes
+             with the timer on hover/focus and resumes in place — changing only the
+             play-state never restarts the animation. -->
         <div
           class={slot('progress', toast.intent)}
-          style="animation: blocks-toast-progress {toast.duration}ms linear forwards;"
+          style="animation: blocks-toast-progress {toast.duration}ms linear forwards; animation-play-state: {toaster.paused
+            ? 'paused'
+            : 'running'};"
         ></div>
       {/if}
     </div>

package/dist/primitives/Toast/toast.store.svelte.d.ts

@@ -14,6 +14,13 @@ import type { ToastPlacement } from './toast.variants.js';
 declare class ToastStore {
     toasts: ToastData[];
     placement: ToastPlacement;
+    /**
+     * Whether the whole visible stack is currently frozen because the pointer or
+     * keyboard focus is inside the toaster region. Drives each progress bar's
+     * `animation-play-state`; the auto-dismiss timers freeze together with it. Set
+     * by `<Toaster>` via {@link pause} / {@link resume}.
+     */
+    paused: boolean;
     private timers;
     private subscriberCount;
     private hasWarnedNoSubscriber;
@@ -22,6 +29,15 @@ declare class ToastStore {
      * the store knows whether a renderer is present. Returns an unsubscribe fn.
      */
     registerSubscriber(): () => void;
+    /**
+     * Arm the auto-dismiss timer for `id` — or, if the stack is currently paused,
+     * pre-register it frozen so it starts counting when the stack resumes.
+     * Persistent toasts (`duration <= 0` or non-finite, e.g. `Infinity`, and the
+     * loading leg of a promise toast) get no timer at all.
+     */
+    private armTimer;
+    /** Cancel and forget the timer for `id` (if any). */
+    private clearTimer;
     /** Create a toast with full control over all options. Returns the toast ID for programmatic dismissal. */
     add(input: ToastInput): string;
     /**
@@ -50,8 +66,23 @@ declare class ToastStore {
     promise<T>(promise: Promise<T>, opts: ToastPromiseOptions<T>): string;
     /** Remove a single toast by ID. Clears its auto-dismiss timer. */
     dismiss(id: string): void;
-    /** Remove all toasts and cancel their timers. */
+    /** Remove all toasts, cancel their timers, and un-freeze the stack. */
     clear(): void;
+    /**
+     * Freeze the whole visible stack (Sonner-style hover-to-pause): cancel every
+     * running auto-dismiss timer, banking the time each has left, and flag
+     * {@link paused} so the progress bars stop. Idempotent — `<Toaster>` calls it
+     * on pointer-enter / focus-in of the region. Persistent toasts and a promise's
+     * loading leg have no timer and are untouched; the banked remainders are
+     * restarted by {@link resume}.
+     */
+    pause(): void;
+    /**
+     * Resume the stack: restart every frozen timer from its banked remaining time
+     * (not from the full duration) and clear {@link paused} so the progress bars
+     * run again. Idempotent — called on pointer-leave / focus-out of the region.
+     */
+    resume(): void;
     /** Shorthand for `add()` with `intent: 'info'`. Shows an info icon. */
     info(title: string, opts?: ToastShorthandOpts): string;
     /** Shorthand for `add()` with `intent: 'success'`. Shows a check icon. */

package/dist/primitives/Toast/toast.store.svelte.js

@@ -16,6 +16,13 @@ function uid() {
 class ToastStore {
     toasts = $state([]);
     placement = $state('bottom-right');
+    /**
+     * Whether the whole visible stack is currently frozen because the pointer or
+     * keyboard focus is inside the toaster region. Drives each progress bar's
+     * `animation-play-state`; the auto-dismiss timers freeze together with it. Set
+     * by `<Toaster>` via {@link pause} / {@link resume}.
+     */
+    paused = $state(false);
     timers = new Map();
     subscriberCount = 0;
     hasWarnedNoSubscriber = false;
@@ -31,6 +38,34 @@ class ToastStore {
             this.subscriberCount = Math.max(0, this.subscriberCount - 1);
         };
     }
+    /**
+     * Arm the auto-dismiss timer for `id` — or, if the stack is currently paused,
+     * pre-register it frozen so it starts counting when the stack resumes.
+     * Persistent toasts (`duration <= 0` or non-finite, e.g. `Infinity`, and the
+     * loading leg of a promise toast) get no timer at all.
+     */
+    armTimer(id, duration) {
+        if (!Number.isFinite(duration) || duration <= 0)
+            return;
+        if (this.paused) {
+            // A toast that arrives while the user is hovering the stack starts frozen;
+            // resume() lights its timer once the pointer/focus leaves.
+            this.timers.set(id, { handle: undefined, remaining: duration, startedAt: 0 });
+            return;
+        }
+        this.timers.set(id, {
+            handle: setTimeout(() => this.dismiss(id), duration),
+            remaining: duration,
+            startedAt: Date.now()
+        });
+    }
+    /** Cancel and forget the timer for `id` (if any). */
+    clearTimer(id) {
+        const entry = this.timers.get(id);
+        if (entry?.handle !== undefined)
+            clearTimeout(entry.handle);
+        this.timers.delete(id);
+    }
     /** Create a toast with full control over all options. Returns the toast ID for programmatic dismissal. */
     add(input) {
         if (this.subscriberCount === 0 &&
@@ -56,9 +91,7 @@ class ToastStore {
             loading: input.loading ?? false
         };
         this.toasts = [...this.toasts, toast];
-        if (toast.duration > 0) {
-            this.timers.set(id, setTimeout(() => this.dismiss(id), toast.duration));
-        }
+        this.armTimer(id, toast.duration);
         return id;
     }
     /**
@@ -73,14 +106,9 @@ class ToastStore {
             return;
         const next = { ...this.toasts[idx], ...input };
         this.toasts = [...this.toasts.slice(0, idx), next, ...this.toasts.slice(idx + 1)];
-        const timer = this.timers.get(id);
-        if (timer) {
-            clearTimeout(timer);
-            this.timers.delete(id);
-        }
-        if (next.duration > 0) {
-            this.timers.set(id, setTimeout(() => this.dismiss(id), next.duration));
-        }
+        // Reset the auto-dismiss clock to the new duration (respecting a current pause).
+        this.clearTimer(id);
+        this.armTimer(id, next.duration);
     }
     /**
      * Drive a toast through a promise's lifecycle (Sonner-style). Shows a
@@ -150,19 +178,56 @@ class ToastStore {
     }
     /** Remove a single toast by ID. Clears its auto-dismiss timer. */
     dismiss(id) {
-        const timer = this.timers.get(id);
-        if (timer) {
-            clearTimeout(timer);
-            this.timers.delete(id);
-        }
+        this.clearTimer(id);
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
-    /** Remove all toasts and cancel their timers. */
+    /** Remove all toasts, cancel their timers, and un-freeze the stack. */
     clear() {
-        for (const timer of this.timers.values())
-            clearTimeout(timer);
+        for (const entry of this.timers.values()) {
+            if (entry.handle !== undefined)
+                clearTimeout(entry.handle);
+        }
         this.timers.clear();
         this.toasts = [];
+        this.paused = false;
+    }
+    /**
+     * Freeze the whole visible stack (Sonner-style hover-to-pause): cancel every
+     * running auto-dismiss timer, banking the time each has left, and flag
+     * {@link paused} so the progress bars stop. Idempotent — `<Toaster>` calls it
+     * on pointer-enter / focus-in of the region. Persistent toasts and a promise's
+     * loading leg have no timer and are untouched; the banked remainders are
+     * restarted by {@link resume}.
+     */
+    pause() {
+        if (this.paused)
+            return;
+        this.paused = true;
+        const now = Date.now();
+        for (const entry of this.timers.values()) {
+            if (entry.handle === undefined)
+                continue;
+            clearTimeout(entry.handle);
+            entry.remaining = Math.max(0, entry.remaining - (now - entry.startedAt));
+            entry.handle = undefined;
+        }
+    }
+    /**
+     * Resume the stack: restart every frozen timer from its banked remaining time
+     * (not from the full duration) and clear {@link paused} so the progress bars
+     * run again. Idempotent — called on pointer-leave / focus-out of the region.
+     */
+    resume() {
+        if (!this.paused)
+            return;
+        this.paused = false;
+        const now = Date.now();
+        for (const [id, entry] of this.timers) {
+            if (entry.handle !== undefined)
+                continue;
+            entry.startedAt = now;
+            entry.handle = setTimeout(() => this.dismiss(id), entry.remaining);
+        }
     }
     /** Shorthand for `add()` with `intent: 'info'`. Shows an info icon. */
     info(title, opts) {

package/dist/primitives/Toast/toast.variants.d.ts

@@ -1,70 +1,70 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const toastVariants: ((props?: {
-    intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
     placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
 } | undefined) => {
     container: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     toast: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     icon: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     content: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     title: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     description: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     actions: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     actionButton: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     cancelButton: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     dismissButton: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     progress: (props?: ({
-        intent?: "info" | "primary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;

package/dist/primitives/Toggle/Toggle.svelte

@@ -28,6 +28,7 @@
     slotClasses: slotClassesProp = {},
     preset,
     withBorder = false,
+    'aria-describedby': ariaDescribedby,
     ...restProps
   }: ToggleProps = $props();
 
@@ -42,6 +43,14 @@
     disabled
   }));
 
+  // Consumer-supplied `aria-describedby` (e.g. an external hint rendered
+  // outside the component) merges with the internal error/helper chain instead
+  // of replacing it — internal descriptions first, the consumer's supplemental
+  // one last (mirrors the Input role model, XC-2).
+  const describedBy = $derived(
+    [ff.describedBy, ariaDescribedby].filter(Boolean).join(' ') || undefined
+  );
+
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
@@ -113,7 +122,7 @@
       class="peer sr-only"
       aria-checked={checked}
       aria-label={label ? undefined : bt('accessibility.toggle') || 'Toggle'}
-      aria-describedby={ff.describedBy}
+      aria-describedby={describedBy}
       aria-invalid={ff.invalid ? 'true' : undefined}
       onchange={handleChange}
       {...restProps}

package/dist/primitives/Tooltip/tooltip.variants.d.ts

@@ -1,19 +1,19 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const tooltipVariants: ((props?: {
     open?: boolean | undefined;
-    intent?: "info" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    intent?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
 } | undefined) => {
     base: (props?: ({
         open?: boolean | undefined;
-        intent?: "info" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     arrow: (props?: ({
         open?: boolean | undefined;
-        intent?: "info" | "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        intent?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;

package/dist/style/semantic.css

@@ -153,7 +153,7 @@
   --color-chart-6: light-dark(var(--color-danger-500), var(--color-danger-400));
 
   /* === BORDERS ===
-     border-hairline (Lighter-Refactor) is the quietest tier — structural
+     border-hairline is the quietest tier — structural
      trennlinien (row dividers, Card header/footer separators, inline
      section dividers). Sits below border-subtle, which is now reserved
      for quiet container outlines (e. g. Popover). */

package/package.json

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