@urbicon-ui/blocks 6.23.0 → 6.24.0

package/dist/components/Sparkline/Sparkline.svelte

@@ -7,6 +7,7 @@
     data,
     width = 96,
     height = 24,
+    fluid = false,
     area = false,
     showEndPoint = false,
     color = 'var(--color-chart-1)',
@@ -40,15 +41,19 @@
 
 <span
   {...rest}
-  class={[!unstyled && 'inline-block align-middle', slot('root'), className]}
+  class={[
+    !unstyled && (fluid ? 'block w-full' : 'inline-block align-middle'),
+    slot('root'),
+    className
+  ]}
   role={ariaLabel ? 'img' : undefined}
   aria-label={ariaLabel}
   aria-hidden={ariaLabel ? undefined : 'true'}
 >
   <svg
-    class={slot('svg')}
-    {width}
-    {height}
+    class={[fluid && 'w-full h-auto', slot('svg')]}
+    width={fluid ? undefined : width}
+    height={fluid ? undefined : height}
     viewBox="0 0 {width} {height}"
     preserveAspectRatio="none"
   >
@@ -70,6 +75,7 @@
         stroke-width={strokeWidth}
         stroke-linejoin="round"
         stroke-linecap="round"
+        vector-effect={fluid ? 'non-scaling-stroke' : undefined}
       />
     {/if}
     {#if showEndPoint && geometry.last}

package/dist/components/Sparkline/index.d.ts

@@ -4,7 +4,8 @@ export type SparklineSlotClasses = Partial<Record<'root' | 'svg' | 'line' | 'are
 /**
  * @description Tiny inline trend line — no axes, no labels — sized to flow in
  * table cells, cards, or running text. Zero-dependency SVG, optional area fill
- * and end-point dot. Aria-hidden by default with an optional `ariaLabel`.
+ * and end-point dot. Fixed `width`/`height` by default, or set `fluid` to fill
+ * the container width. Aria-hidden by default with an optional `ariaLabel`.
  *
  * @tag display
  * @tag data
@@ -23,6 +24,13 @@ export interface SparklineProps extends Omit<HTMLAttributes<HTMLElement>, 'child
     width?: number;
     /** Height in px. @default 24 */
     height?: number;
+    /**
+     * Fill the container width instead of a fixed pixel size. Drops the svg's
+     * `width`/`height` attributes (they still set the `viewBox` aspect ratio) so
+     * it scales to its container; strokes stay crisp via
+     * `vector-effect="non-scaling-stroke"`. @default false
+     */
+    fluid?: boolean;
     /** Fill the area under the line. @default false */
     area?: boolean;
     /** Mark the last point with a dot. @default false */

package/dist/primitives/Badge/Badge.svelte

@@ -34,7 +34,7 @@
     onRemove,
     onclick,
     onHover,
-    role = 'status',
+    role,
     ...restProps
   }: BadgeProps = $props();
 
@@ -56,6 +56,12 @@
   const isInteractive = $derived(purpose === 'chip' || interactive || !!onclick);
   const isRemovable = $derived(removable && !isDot);
 
+  // An interactive badge (clickable chip / onclick) carries button semantics:
+  // it is focusable and Enter/Space-activatable, so screen readers must hear a
+  // button, not a `status` region. An explicit `role` always wins; a disabled
+  // badge is inert (pointer-events-none, guarded handlers) so it stays `status`.
+  const effRole = $derived(role ?? (isInteractive && !disabled ? 'button' : 'status'));
+
   const variantProps: BadgeVariants = $derived({
     tier: effectiveTier,
     intent,
@@ -124,7 +130,7 @@
       ? [slotClasses?.base, className].filter(Boolean).join(' ')
       : styles.base({ class: [slotClasses?.base, className] })
   ]}
-  {role}
+  role={effRole}
   data-purpose={purpose}
   tabindex={isInteractive && !disabled ? 0 : undefined}
   onmouseenter={handleMouseEnter}

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

@@ -3,24 +3,13 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { MintProp } from '../../mint/index.js';
 import type { BadgePlacement, BadgeSlots, BadgeVariants } from './badge.variants.js';
 /**
- * Shared fields that apply to every Badge variant — `dot` and the
- * label-style variants both accept these.
+ * Shared fields that apply to every Badge arm. `variant`, `purpose`, and the
+ * label-only props (`children` / `counter` / `removable` / `interactive` /
+ * `onRemove`) are declared per-arm instead — that split is what lets *both*
+ * dot spellings (`variant="dot"` and the canonical `purpose="dot"`) forbid the
+ * label-only props at the type level.
  */
-interface BadgeBaseProps extends Omit<BadgeVariants, 'variant' | 'counter'>, Omit<HTMLAttributes<HTMLElement>, 'children'> {
-    /**
-     * The badge's semantic purpose — the canonical axis that resolves what the
-     * badge *is*, since a bare Badge served five overlapping roles. Orchestrates
-     * the low-level visual props so you rarely set them directly:
-     * - `status` — a state marker (Active, Failed); pairs with `intent`.
-     * - `tag` — a neutral inline label (category, version).
-     * - `counter` — a compact numeric pill (replaces the `counter` boolean).
-     * - `dot` — a pure indicator, content hidden (replaces `variant="dot"`).
-     * - `chip` — a removable, interactive filter chip; pair with `removable`.
-     *
-     * Leave unset to drive the badge purely by the low-level props (back-compat).
-     * When set, `purpose` wins over `variant="dot"` / the `counter` boolean.
-     */
-    purpose?: 'status' | 'tag' | 'counter' | 'dot' | 'chip';
+interface BadgeBaseProps extends Omit<BadgeVariants, 'variant' | 'counter' | 'removable' | 'interactive'>, Omit<HTMLAttributes<HTMLElement>, 'children'> {
     /** Add a pulsing animation to draw attention (e.g. for live indicators). */
     pulse?: boolean;
     /** Visually disable the badge (reduced opacity, no pointer events). */
@@ -29,7 +18,7 @@ interface BadgeBaseProps extends Omit<BadgeVariants, 'variant' | 'counter'>, Omi
     border?: boolean;
     /** Anchor the badge absolutely within a `position: relative` parent. */
     placement?: BadgePlacement;
-    /** Click handler. Automatically enables interactive styles. */
+    /** Click handler. Automatically enables interactive styles (and `role="button"`). */
     onclick?: (event: MouseEvent) => void;
     /** Called when the hover state changes. */
     onHover?: (hovered: boolean) => void;
@@ -46,30 +35,73 @@ interface BadgeBaseProps extends Omit<BadgeVariants, 'variant' | 'counter'>, Omi
      * and make the custom look reusable across the project.
      */
     preset?: string;
-    /** ARIA role. Defaults to `"status"`. Use `"alert"` for time-sensitive notifications. */
-    role?: 'status' | 'alert' | 'badge';
+    /**
+     * ARIA role. A static badge is announced as `"status"`; an interactive badge
+     * (`onclick` or `purpose="chip"`, when not `disabled`) defaults to `"button"`
+     * so assistive tech announces its activation semantics. Set explicitly to
+     * override — e.g. `"alert"` for time-sensitive notifications. An explicit
+     * value always wins over the derived default.
+     */
+    role?: 'status' | 'alert' | 'badge' | 'button';
     /** Micro-interaction preset. Only applies when the badge is interactive. */
     mint?: MintProp;
 }
 /**
- * Dot-style badge — a pure indicator. Content is `sr-only` (visually
- * hidden), so `children` / `counter` / `removable` / `interactive` /
- * `onRemove` are excluded by the type: an invisible remove-button or
- * hover-scale on a 2.5 × 2.5 px dot is never the intended UI.
+ * The label-only props a pure-indicator dot forbids. An invisible remove
+ * button, counter shape, or hover-scale on a 2.5 × 2.5 px dot is never the
+ * intended UI, so every dot arm excludes them at the type level.
  */
-interface BadgeDotProps extends BadgeBaseProps {
-    /** Visual variant. `dot` renders a pure indicator (content hidden); the label variants accept the full surface. */
-    variant: 'dot';
+interface BadgeDotForbiddenProps {
     children?: never;
     counter?: never;
     removable?: never;
     interactive?: never;
     onRemove?: never;
 }
+/**
+ * Dot badge selected by the canonical `purpose="dot"` — a pure indicator whose
+ * content is hidden. `variant` is inert here (the dot look always wins), and
+ * the label-only props are excluded by {@link BadgeDotForbiddenProps}.
+ */
+interface BadgeDotByPurposeProps extends BadgeBaseProps, BadgeDotForbiddenProps {
+    /**
+     * The canonical dot spelling — forces the pure-indicator look regardless of
+     * `variant`. For the label roles use `status` / `tag` / `counter` / `chip`
+     * (their own arm).
+     */
+    purpose: 'dot';
+    /** Inert under `purpose="dot"`; accepted only so a leftover `variant` compiles. */
+    variant?: 'filled' | 'outlined' | 'soft' | 'dot';
+}
+/**
+ * Dot badge selected by the deprecated `variant="dot"`. Prefer `purpose="dot"`.
+ * Same exclusions as {@link BadgeDotByPurposeProps}.
+ */
+interface BadgeDotProps extends BadgeBaseProps, BadgeDotForbiddenProps {
+    /** Visual variant. `dot` renders a pure indicator (content hidden); the label variants accept the full surface. */
+    variant: 'dot';
+    /** Only the dot purpose is non-contradictory with `variant="dot"`. */
+    purpose?: 'dot';
+}
 /**
  * Label-style badge — accepts content, counter shape, remove button, etc.
  */
 interface BadgeStandardProps extends BadgeBaseProps {
+    /**
+     * The badge's semantic purpose — the canonical axis that resolves what the
+     * badge *is*, since a bare Badge served overlapping roles. Orchestrates the
+     * low-level visual props so you rarely set them directly:
+     * - `status` — a state marker (Active, Failed); pairs with `intent`.
+     * - `tag` — a neutral inline label (category, version).
+     * - `counter` — a compact numeric pill (replaces the `counter` boolean).
+     * - `chip` — a removable, interactive filter chip; pair with `removable`.
+     *
+     * For a pure indicator use `purpose="dot"` (its own arm — it forbids
+     * content / counter / remove). Leave unset to drive the badge purely by the
+     * low-level props (back-compat); when set, `purpose` wins over the `counter`
+     * boolean.
+     */
+    purpose?: 'status' | 'tag' | 'counter' | 'chip';
     /** Visual variant. `dot` renders a pure indicator (content hidden); the label variants accept the full surface. @default 'filled' */
     variant?: 'filled' | 'outlined' | 'soft';
     /** Badge content (text, icons, numbers). */
@@ -93,10 +125,13 @@ interface BadgeStandardProps extends BadgeBaseProps {
  * @related Alert
  * @related Toast
  *
- * Badge props are a discriminated union on `variant`: `variant="dot"`
- * forbids `children` / `counter` / `removable` / `interactive` /
- * `onRemove` at the type level, while `filled` / `outlined` / `soft`
- * accept the full surface.
+ * Badge props are a discriminated union. The pure-indicator dot — spelled
+ * canonically as `purpose="dot"` or via the deprecated `variant="dot"` —
+ * forbids `children` / `counter` / `removable` / `interactive` / `onRemove`
+ * at the type level, while the label arms (`filled` / `outlined` / `soft`;
+ * `purpose` `status` / `tag` / `counter` / `chip`) accept the full surface.
+ * An interactive badge (`onclick` or `purpose="chip"`) is announced as a
+ * `button`, a static one as `status` (override via `role`).
  *
  * @example Purpose-driven (canonical) — the intent reads from `purpose`
  * ```svelte
@@ -114,6 +149,6 @@ interface BadgeStandardProps extends BadgeBaseProps {
  * </div>
  * ```
  */
-export type BadgeProps = BadgeDotProps | BadgeStandardProps;
+export type BadgeProps = BadgeDotByPurposeProps | BadgeDotProps | BadgeStandardProps;
 export { default as Badge } from './Badge.svelte';
 export { type BadgePlacement, type BadgeVariants, badgeVariants, PLACEMENT_VALUES } from './badge.variants.js';

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -126,6 +126,7 @@
     for={id}
   >
     <input
+      {...restProps}
       bind:this={inputRef}
       {id}
       type="checkbox"
@@ -139,7 +140,6 @@
       aria-invalid={ff.invalid ? 'true' : undefined}
       aria-describedby={describedBy}
       onchange={handleChange}
-      {...restProps}
     />
 
     <span

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
 import type { DialogIntent } from '../Dialog/index.js';
 import type { DialogSlots } from '../Dialog/dialog.variants.js';
 /**
@@ -36,7 +37,7 @@ export type ConfirmIntent = Exclude<DialogIntent, 'neutral'>;
  * />
  * ```
  */
-export interface ConfirmDialogProps {
+export interface ConfirmDialogProps extends Omit<HTMLDialogAttributes, 'children' | 'open' | 'title' | 'draggable'> {
     /** Controls visibility. Supports bind:open. */
     open?: boolean;
     /** Heading shown in the dialog header. */

package/dist/primitives/Pagination/Pagination.svelte

@@ -139,9 +139,10 @@
     return () => handlePageChange(page);
   }
 
-  // Computed state helpers
-  const isFirstPage = $derived(currentPage === 1);
-  const isLastPage = $derived(currentPage === totalPages);
+  // Computed state helpers. Edge policy across all layouts is disabled-but-visible:
+  // Previous/Next stay mounted and go `disabled` at page 1 / N (never unmounted),
+  // so the arrow can't vanish from under the pointer (no layout shift, no focus
+  // loss). First/Last are a separate, redundancy-driven concern — see the markup.
   const hasPreviousPage = $derived(currentPage > 1);
   const hasNextPage = $derived(currentPage < totalPages);
 
@@ -220,19 +221,25 @@
       {/if}
     </div>
   {:else if layout === 'navigation'}
-    <!-- Navigation Layout: Only Previous/Next -->
+    <!-- Navigation Layout: Only Previous/Next. Unified edge policy (matches the
+         table layout): both arrows stay mounted and go `disabled` at the boundary
+         (page 1 / N) rather than unmounting. This row is laid out `justify-between`,
+         so unmounting one arm would teleport the survivor across the whole bar
+         (start ↔ end) and drop focus — disabled-but-visible pins Previous left and
+         Next right. Prev/Next-only pagers therefore grey out the dead end here;
+         they do not disappear it. -->
     <div
       class={unstyled
         ? (slotClasses?.controls ?? '')
         : styles.controls({ class: slotClasses?.controls })}
     >
-      {#if showPreviousNext && hasPreviousPage}
+      {#if showPreviousNext}
         <PaginationItem
           {size}
           {variant}
           {intent}
           {tier}
-          disabled={disabled || loading}
+          disabled={disabled || loading || !hasPreviousPage}
           onPageClick={goToPrevious}
           {mint}
         >
@@ -242,15 +249,13 @@
             {previousLabel}
           {/if}
         </PaginationItem>
-      {/if}
 
-      {#if showPreviousNext && hasNextPage}
         <PaginationItem
           {size}
           {variant}
           {intent}
           {tier}
-          disabled={disabled || loading}
+          disabled={disabled || loading || !hasNextPage}
           onPageClick={goToNext}
           {mint}
         >
@@ -276,7 +281,14 @@
         ? (slotClasses?.controls ?? '')
         : styles.controls({ class: slotClasses?.controls })}
     >
-      {#if showFirstLast && !isFirstPage && showStartEllipsis}
+      <!-- First / Last are gated by the ellipsis — by REDUNDANCY, not by the page
+           edge. `showStartEllipsis` is true only when page 1 sits OUTSIDE the visible
+           window; the moment it re-enters, page 1 is a directly-clickable number and
+           a "First" jump button would merely duplicate it. That predicate already
+           implies currentPage > 1, so (unlike Previous/Next) First/Last are never a
+           dead-end control needing disabled-but-visible: hiding one drops a duplicate,
+           not an edge stepper — no layout-shift/focus trap. -->
+      {#if showFirstLast && showStartEllipsis}
         <PaginationItem
           {size}
           {variant}
@@ -294,13 +306,13 @@
         </PaginationItem>
       {/if}
 
-      {#if showPreviousNext && hasPreviousPage}
+      {#if showPreviousNext}
         <PaginationItem
           {size}
           {variant}
           {intent}
           {tier}
-          disabled={disabled || loading}
+          disabled={disabled || loading || !hasPreviousPage}
           onPageClick={goToPrevious}
           {mint}
         >
@@ -364,13 +376,13 @@
         </div>
       {/if}
 
-      {#if showPreviousNext && hasNextPage}
+      {#if showPreviousNext}
         <PaginationItem
           {size}
           {variant}
           {intent}
           {tier}
-          disabled={disabled || loading}
+          disabled={disabled || loading || !hasNextPage}
           onPageClick={goToNext}
           {mint}
         >
@@ -382,7 +394,8 @@
         </PaginationItem>
       {/if}
 
-      {#if showFirstLast && !isLastPage && showEndEllipsis}
+      <!-- See the First-button note above: ellipsis-gated (redundancy), not edge-gated. -->
+      {#if showFirstLast && showEndEllipsis}
         <PaginationItem
           {size}
           {variant}

package/dist/primitives/RadioGroup/RadioGroup.svelte

@@ -27,6 +27,7 @@
     preset,
     id,
     'aria-describedby': ariaDescribedby,
+    'aria-labelledby': ariaLabelledby,
     ...restProps
   }: RadioGroupProps = $props();
 
@@ -43,6 +44,9 @@
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
   const groupId = $derived(id || `radiogroup-${propsId}`);
+  // When a `label` is rendered it owns the group's `aria-labelledby`; otherwise a
+  // consumer-supplied `aria-labelledby` (an external heading) is used as the
+  // fallback so external labelling survives (see the group element below).
   const labelId = $derived(label ? `${groupId}-label` : undefined);
   // ARIA wiring is shared with every form primitive — see XC-2.
   const ff = useFormField(() => ({
@@ -159,16 +163,16 @@
   {/if}
 
   <div
+    {...restProps}
     bind:this={groupElement}
     role="radiogroup"
     id={groupId}
     class={unstyled ? (slotClasses?.group ?? '') : styles.group({ class: slotClasses?.group })}
-    aria-labelledby={labelId}
+    aria-labelledby={labelId ?? ariaLabelledby}
     aria-describedby={describedBy}
     aria-required={required || undefined}
     aria-invalid={ff.invalid ? 'true' : undefined}
     onkeydown={handleKeydown}
-    {...restProps}
   >
     {@render children()}
   </div>

package/dist/primitives/RadioGroup/RadioItem.svelte

@@ -71,6 +71,7 @@
   for={id}
 >
   <input
+    {...restProps}
     {id}
     type="radio"
     name={ctx.name}
@@ -80,7 +81,6 @@
     class="peer sr-only"
     tabindex={isChecked || (!ctx.value && !isDisabled) ? 0 : -1}
     onchange={handleChange}
-    {...restProps}
   />
 
   <span

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';
@@ -88,6 +89,42 @@
 
   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
       ? {
@@ -151,10 +188,19 @@
 </script>
 
 <div
+  bind:this={containerEl}
   class={[slot('container'), className].filter(Boolean).join(' ')}
   aria-live="polite"
   aria-relevant="additions removals"
-  onpointerover={() => (pointerInside = true)}
+  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;
   }}
@@ -166,7 +212,13 @@
 >
   {#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}
@@ -216,13 +268,17 @@
       {/if}
 
       {#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
+        <!-- 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; animation-play-state: {toaster.paused
+          class={[slot('progress', toast.intent), 'blocks-toast-progress-bar']}
+          style="--toast-progress-duration: {toast.duration}ms; animation-play-state: {toaster.paused
             ? 'paused'
             : 'running'};"
         ></div>
@@ -240,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/Toggle/Toggle.svelte

@@ -29,6 +29,7 @@
     preset,
     withBorder = false,
     'aria-describedby': ariaDescribedby,
+    'aria-label': ariaLabel,
     ...restProps
   }: ToggleProps = $props();
 
@@ -110,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"
@@ -121,11 +126,10 @@
       {required}
       class="peer sr-only"
       aria-checked={checked}
-      aria-label={label ? undefined : bt('accessibility.toggle') || 'Toggle'}
+      aria-label={label ? undefined : (ariaLabel ?? (bt('accessibility.toggle') || 'Toggle'))}
       aria-describedby={describedBy}
       aria-invalid={ff.invalid ? 'true' : undefined}
       onchange={handleChange}
-      {...restProps}
     />
 
     <span

package/package.json

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