@urbicon-ui/blocks 6.22.0 → 6.24.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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
+  import { untrack } from 'svelte';
   import { fly } from 'svelte/transition';
   import { getOverlayMotion } from '../../utils';
   import { toastVariants, type ToastVariants } from './toast.variants';
@@ -56,8 +57,74 @@
     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));
 
+  // Stranded-pause guard. A toast removed from under the cursor (e.g. its own
+  // close button) does not reliably fire `pointerout`, so `pointerInside` can
+  // stay stuck `true` and freeze every remaining timer — worst case a fresh
+  // toast is then born paused and never counts down. Rather than trust the flag,
+  // when the rendered stack SHRINKS we re-derive containment from the real cursor
+  // position. The cursor is tracked from the region's own bubbling pointer events
+  // (the container is `pointer-events-none`, so these fire only over a toast
+  // child, which is exactly when the coords matter).
+  let containerEl: HTMLElement | undefined;
+  let pointerX = 0;
+  let pointerY = 0;
+  let prevVisibleCount = 0;
+
+  function reconcilePointerInside() {
+    // Only a stranded `true` needs rescuing; SSR-safe — effects/handlers never
+    // run on the server, and `document` is guarded regardless.
+    if (typeof document === 'undefined' || !pointerInside || !containerEl) return;
+    const hit = document.elementFromPoint(pointerX, pointerY);
+    const toastEl = (hit?.closest('[data-toast-id]') ?? null) as HTMLElement | null;
+    // Inside only if the cursor sits over a toast that is (a) in THIS region and
+    // (b) still live — not the just-removed one, whose node lingers through its
+    // fly-out outro.
+    pointerInside =
+      !!toastEl &&
+      containerEl.contains(toastEl) &&
+      visibleToasts.some((t) => t.id === toastEl.dataset.toastId);
+  }
+
+  $effect(() => {
+    const count = visibleToasts.length;
+    untrack(() => {
+      if (count < prevVisibleCount) reconcilePointerInside();
+      prevVisibleCount = count;
+    });
+  });
+
   const styles = $derived(
     unstyled
       ? {
@@ -121,14 +188,37 @@
 </script>
 
 <div
+  bind:this={containerEl}
   class={[slot('container'), className].filter(Boolean).join(' ')}
   aria-live="polite"
   aria-relevant="additions removals"
+  onpointerover={(e) => {
+    pointerX = e.clientX;
+    pointerY = e.clientY;
+    pointerInside = true;
+  }}
+  onpointermove={(e) => {
+    pointerX = e.clientX;
+    pointerY = e.clientY;
+  }}
+  onpointerout={(e) => {
+    if (leftRegion(e)) pointerInside = false;
+  }}
+  onfocusin={() => (focusInside = true)}
+  onfocusout={(e) => {
+    if (leftRegion(e)) focusInside = false;
+  }}
   {...restProps}
 >
   {#each visibleToasts as toast (toast.id)}
     {@const IntentIcon = INTENT_ICON_MAP[toast.intent] ?? INTENT_ICON_MAP.neutral}
-    <div class={slot('toast', toast.intent)} role="alert" transition:fly={flyParams()}>
+    <div
+      class={slot('toast', toast.intent)}
+      role="alert"
+      aria-atomic="true"
+      data-toast-id={toast.id}
+      transition:fly={flyParams()}
+    >
       {#if toast.loading}
         <span class={slot('icon', toast.intent)}><Spinner size="sm" /></span>
       {:else}
@@ -177,10 +267,20 @@
         </button>
       {/if}
 
-      {#if toast.showProgress && toast.duration > 0}
+      {#if toast.showProgress && Number.isFinite(toast.duration) && toast.duration > 0}
+        <!-- The countdown animation lives in the `<style>` rule below (not inline)
+             so `@media (prefers-reduced-motion: reduce)` can reach it — an inline
+             `animation` shorthand is invisible to media queries. Only the real
+             per-toast duration is passed inline, as a custom property.
+             `animation-play-state` (also inline, bound to the store's paused flag)
+             freezes the bar with the timer on hover/focus and resumes it in place;
+             inline wins over the rule's implicit `running`, and toggling only the
+             play-state never restarts the animation. -->
         <div
-          class={slot('progress', toast.intent)}
-          style="animation: blocks-toast-progress {toast.duration}ms linear forwards;"
+          class={[slot('progress', toast.intent), 'blocks-toast-progress-bar']}
+          style="--toast-progress-duration: {toast.duration}ms; animation-play-state: {toaster.paused
+            ? 'paused'
+            : 'running'};"
         ></div>
       {/if}
     </div>
@@ -196,4 +296,22 @@
       width: 0%;
     }
   }
+
+  /* The countdown bar animates via this class (not an inline `animation`) so the
+     reduced-motion query below can reach it; the per-toast duration arrives as
+     the `--toast-progress-duration` custom property. `:global` keeps it off
+     Svelte's scoping, consistent with the global keyframe above. */
+  :global(.blocks-toast-progress-bar) {
+    animation: blocks-toast-progress var(--toast-progress-duration) linear forwards;
+  }
+
+  /* A countdown bar carries no information once it can't animate, so under
+     reduced motion we hide it outright rather than leave it frozen. This mirrors
+     interaction.css collapsing the motion tokens; the auto-dismiss timing itself
+     is unaffected. */
+  @media (prefers-reduced-motion: reduce) {
+    :global(.blocks-toast-progress-bar) {
+      display: none;
+    }
+  }
 </style>

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,8 @@
     slotClasses: slotClassesProp = {},
     preset,
     withBorder = false,
+    'aria-describedby': ariaDescribedby,
+    'aria-label': ariaLabel,
     ...restProps
   }: ToggleProps = $props();
 
@@ -42,6 +44,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);
 
@@ -101,7 +111,11 @@
       : styles.control({ class: slotClasses?.control })}
     for={ff.fieldId}
   >
+    <!-- aria-label: a visible `label` wins (stays undefined); with no label a
+         consumer-supplied aria-label is preferred over the generic i18n fallback
+         so external labelling survives the restProps-first spread. -->
     <input
+      {...restProps}
       id={ff.fieldId}
       type="checkbox"
       role="switch"
@@ -112,11 +126,10 @@
       {required}
       class="peer sr-only"
       aria-checked={checked}
-      aria-label={label ? undefined : bt('accessibility.toggle') || 'Toggle'}
-      aria-describedby={ff.describedBy}
+      aria-label={label ? undefined : (ariaLabel ?? (bt('accessibility.toggle') || 'Toggle'))}
+      aria-describedby={describedBy}
       aria-invalid={ff.invalid ? 'true' : undefined}
       onchange={handleChange}
-      {...restProps}
     />
 
     <span