@urbicon-ui/blocks 6.21.3 → 6.23.0

package/dist/components/Calendar/Calendar.svelte

@@ -441,6 +441,14 @@
     onMonthChange?.(clamped.month, clamped.year);
   }
 
+  // Jump the reference date to a concrete day (mini-calendar drill-down into
+  // week/day view). Delegates to the controller, which clamps to
+  // [minDate, maxDate] and reports back through handleNavigate like every
+  // other controller-driven navigation path.
+  function goToDate(date: Date) {
+    controller.goTo(date);
+  }
+
   function setView(v: CalendarViewMode) {
     view = v;
     onViewChange?.(v);
@@ -572,6 +580,7 @@
     navigateYear,
     goToToday,
     goToMonth,
+    goToDate,
     selectDate,
     setFocusedDate,
     moveFocus,

package/dist/components/Calendar/CalendarMiniMonth.svelte

@@ -52,13 +52,14 @@
   function handleDayClick(date: Date) {
     // Navigate main calendar to this date and select it
     ctx.selectDate(date);
-    // Also sync view to the clicked day's month
-    if (date.getMonth() !== ctx.displayedMonth || date.getFullYear() !== ctx.displayedYear) {
-      ctx.goToMonth(date.getMonth(), date.getFullYear());
-    }
-    // If in week or day view, update displayed date
     if (ctx.view === 'week' || ctx.view === 'day') {
-      ctx.navigateDay(0); // triggers a re-render with the newly selected date
+      // selectDate only updates the selection — it never moves the reference
+      // date, so jump the week/day grid to the clicked day explicitly.
+      ctx.goToDate(date);
+    } else if (date.getMonth() !== ctx.displayedMonth || date.getFullYear() !== ctx.displayedYear) {
+      // Month-based views (month handled its own spill-jump in selectDate;
+      // agenda lands here) only need to sync to the clicked day's month.
+      ctx.goToMonth(date.getMonth(), date.getFullYear());
     }
   }
 
@@ -140,9 +141,10 @@
     </Button>
   </div>
 
-  <!-- Weekday headers -->
+  <!-- Weekday headers — narrow names duplicate in many locales (de-DE: M, D,
+       M, D, F, S, S), so the key needs the column position to stay unique. -->
   <div class="grid grid-cols-7">
-    {#each weekdayNames as name (name)}
+    {#each weekdayNames as name, i (`${i}-${name}`)}
       <span class={slot('miniCalendarWeekday')}>{name}</span>
     {/each}
   </div>

package/dist/components/Calendar/CalendarWeekdayHeader.svelte

@@ -17,7 +17,10 @@
     <span class={slot('weekNumber')} role="columnheader" aria-label={bt('calendar.weekNumber')}
     ></span>
   {/if}
-  {#each ctx.weekdays as day (day)}
+  <!-- Short/narrow weekday names duplicate in many locales (de-DE narrow:
+       M, D, M, D, F, S, S), so the key needs the column position to stay
+       unique — a bare name key crashes dev-mode client renders. -->
+  {#each ctx.weekdays as day, i (`${i}-${day}`)}
     <span class={slot('weekday')} role="columnheader" aria-label={day}>
       {day}
     </span>

package/dist/components/Calendar/calendar.context.d.ts

@@ -51,6 +51,9 @@ export interface CalendarContext {
     setView: (view: CalendarViewMode) => void;
     /** Navigate to a specific month (used by year grid drill-down). */
     goToMonth: (month: number, year: number) => void;
+    /** Jump the reference date to a specific day, clamped to [minDate, maxDate]
+     * (mini-calendar drill-down into week/day view). */
+    goToDate: (date: Date) => void;
     isDateDisabled: (date: Date) => boolean;
     isDateSelected: (date: Date) => boolean;
     isDateToday: (date: Date) => boolean;

package/dist/components/Calendar/calendar.drag.js

@@ -194,11 +194,8 @@ export function resizableEvent(opts) {
                 return;
             isResizing = false;
             handle.releasePointerCapture(e.pointerId);
-            handle.removeEventListener('pointermove', handlePointerMove);
-            handle.removeEventListener('pointerup', handlePointerUp);
-            handle.removeEventListener('pointercancel', handlePointerUp);
-            document.body.style.cursor = '';
-            // Calculate new end time based on final position
+            // Calculate new end time based on final position — measured BEFORE
+            // cleanup(), which resets the inline height the calculation reads.
             const gridRect = opts.gridEl.getBoundingClientRect();
             const eventRect = opts.eventEl.getBoundingClientRect();
             const gridTotalMinutes = (opts.endHour - opts.startHour) * 60;
@@ -219,14 +216,29 @@ export function resizableEvent(opts) {
             // Compute new end date
             const newEnd = new Date(opts.event.start);
             newEnd.setHours(Math.floor(clampedMinutes / 60), clampedMinutes % 60, 0, 0);
-            // Reset inline height — the parent will re-render with new props
-            opts.eventEl.style.height = '';
+            cleanup();
             opts.onResizeEnd?.(opts.event, newEnd);
         }
+        // Teardown of everything a live resize holds: document-level cursor, the
+        // move/up/cancel listeners, and the event block's inline height (the parent
+        // re-renders the committed height from props).
+        function cleanup() {
+            handle.removeEventListener('pointermove', handlePointerMove);
+            handle.removeEventListener('pointerup', handlePointerUp);
+            handle.removeEventListener('pointercancel', handlePointerUp);
+            document.body.style.cursor = '';
+            opts.eventEl.style.height = '';
+        }
         handle.addEventListener('pointerdown', handlePointerDown);
         handle.style.touchAction = 'none';
         return () => {
             handle.removeEventListener('pointerdown', handlePointerDown);
+            // Clean up any in-progress resize on unmount (mirrors draggableEvent) —
+            // otherwise the row-resize cursor and inline height would leak.
+            if (isResizing) {
+                cleanup();
+                isResizing = false;
+            }
         };
     };
 }

package/dist/components/CompositionBar/CompositionBar.svelte

@@ -263,10 +263,14 @@
       </div>
     {/if}
 
-    <!-- Bar -->
+    <!-- Bar — role="group", not "img": img flattens the subtree in the
+         accessibility tree, which would hide the interactive segment <button>s
+         inside. Convention: interactive charts (Sankey, CompositionBar) are a
+         named group; purely static charts (ChartFrame, DonutChart) keep
+         role="img" — atomic is only correct without interactive descendants. -->
     <div
       bind:this={barRef}
-      role="img"
+      role="group"
       aria-label={ariaSummary}
       class={unstyled ? (slotClasses?.bar ?? '') : styles.bar({ class: slotClasses?.bar })}
     >

package/dist/components/Sankey/Sankey.svelte

@@ -45,6 +45,7 @@
     nodeContent: nodeContentSnippet,
     linkContent: linkContentSnippet,
     tooltip: tooltipSnippet,
+    onmousemove: userOnMouseMove,
     ...restProps
   }: SankeyProps = $props();
 
@@ -191,6 +192,16 @@
       visible: true
     };
   }
+  // The wrapper hardcodes onmousemove for tooltip tracking, so a consumer's
+  // onmousemove would otherwise silently replace it via the restProps spread.
+  // Run the internal handler first, then forward to the consumer (same pattern
+  // as Input's onkeydown / Textarea's oninput merge).
+  function handleWrapperMouseMove(
+    event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }
+  ) {
+    moveTooltip(event);
+    userOnMouseMove?.(event);
+  }
   function hideTooltip() {
     hovered = null;
     tooltipPos = { ...tooltipPos, visible: false };
@@ -264,11 +275,16 @@
     ? [slotClasses?.wrapper, className].filter(Boolean).join(' ')
     : styles.wrapper({ class: [slotClasses?.wrapper, className] })}
   style="height: {effectiveHeight}px"
-  onmousemove={moveTooltip}
+  onmousemove={handleWrapperMouseMove}
   {...restProps}
 >
+  <!-- role="group", not "img": img flattens the subtree in the accessibility
+       tree, which would hide the interactive role="button" nodes/paths inside.
+       Convention: interactive charts (Sankey, CompositionBar) are a named
+       group; purely static charts (ChartFrame, DonutChart) keep role="img" —
+       atomic is only correct without interactive descendants. -->
   <svg
-    role="img"
+    role="group"
     aria-label={ariaSummary}
     class={unstyled ? (slotClasses?.svg ?? '') : styles.svg({ class: slotClasses?.svg })}
     viewBox="0 0 {effectiveWidth} {effectiveHeight}"

package/dist/primitives/ButtonGroup/ButtonGroup.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { buttonGroupVariants, type ButtonGroupVariants } from '..';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { edgeEnabledIndex, nextEnabledIndex } from '../../utils';
   import { getTierContext, setTierContext } from '../../utils/tier-context';
   import type { ButtonGroupContext, ButtonGroupProps } from './index';
   import { setButtonGroupContext } from './buttonGroup.context';
@@ -65,7 +66,15 @@
     }
   });
 
+  // Child Button values in registration (= document) order. Buttons register
+  // during their render pass (before any effect runs), so this is fully
+  // populated in DOM order by the time roving reads it — it lets the radiogroup
+  // map the reactive selection back to a radio's position without the shared
+  // <Button> exposing its value in the DOM.
+  const buttonOrder: string[] = [];
+
   function registerButton(buttonValue: string | undefined) {
+    if (buttonValue && !buttonOrder.includes(buttonValue)) buttonOrder.push(buttonValue);
     return {
       get isSelected() {
         return buttonValue ? selectedValues.has(buttonValue) : false;
@@ -91,8 +100,14 @@
         onSelectionChange?.(value, Array.from(selectedValues));
       },
       getButtonProps() {
-        if (selection === 'none') return {};
-        const checked = buttonValue ? selectedValues.has(buttonValue) : false;
+        // A value-less Button is an action button, not a selection option, so it
+        // gets no radio/checkbox role. This also keeps `rovingRadios()` (which
+        // collects `[role="radio"]`) index-aligned with `buttonOrder` (gated on
+        // `buttonValue`): a value-less radio would otherwise sit in the roving
+        // array but not the order registry, drifting the two index spaces and
+        // misplacing the tab stop / arrow-nav origin.
+        if (selection === 'none' || !buttonValue) return {};
+        const checked = selectedValues.has(buttonValue);
         return {
           role: selection === 'single' ? ('radio' as const) : ('checkbox' as const),
           'aria-checked': checked
@@ -132,17 +147,119 @@
     registerButton
   });
 
+  let containerElement = $state<HTMLDivElement>();
+
+  // Single-select is a WAI-ARIA radiogroup: ONE tab stop, arrow keys move the
+  // selection (roving tabindex). Tab/SegmentGroup drive this from a value→element
+  // registry their own item components populate; ButtonGroup's items are shared
+  // <Button>s (outside this component), so the radiogroup owns the roving from
+  // the container instead — it queries the radio *elements* from the DOM (for
+  // focus + disabled state), reads the *selected* one from reactive state (see
+  // selectedRadioIndex), reuses the shared index math (utils/roving), skips
+  // disabled radios, and drives selection by clicking the target radio (Button's
+  // own click handler does the rest). `multiple`/`none` keep every button
+  // natively tabbable (checkbox-group / plain toolbar convention — not roved).
+  function rovingRadios(): HTMLButtonElement[] {
+    return containerElement
+      ? Array.from(containerElement.querySelectorAll<HTMLButtonElement>('[role="radio"]'))
+      : [];
+  }
+
+  // Position of the selected radio, read from the reactive selection (not the
+  // DOM's aria-checked) so it is correct even on the first paint — a parent
+  // effect can run before the child <Button>s commit their aria, so the DOM
+  // isn't a reliable source there. `buttonOrder` is in document order, matching
+  // the radios queried above.
+  function selectedRadioIndex(): number {
+    for (let i = 0; i < buttonOrder.length; i++) {
+      if (selectedValues.has(buttonOrder[i])) return i;
+    }
+    return -1;
+  }
+
+  $effect(() => {
+    if (selection !== 'single' || !containerElement) return;
+    const radios = rovingRadios();
+    if (radios.length === 0) return;
+
+    const checkedIndex = selectedRadioIndex();
+    // Nothing selected yet → the first enabled radio holds the tab stop, so the
+    // group stays reachable with Tab (standard radiogroup entry behaviour).
+    const activeIndex =
+      checkedIndex >= 0
+        ? checkedIndex
+        : edgeEnabledIndex(radios.length, 1, (i) => radios[i].disabled);
+
+    radios.forEach((radio, i) => {
+      radio.tabIndex = i === activeIndex ? 0 : -1;
+    });
+
+    // Restore native tabbability when the group stops roving (selection flips away
+    // from single, or it unmounts) — otherwise the imposed -1 would strand the
+    // buttons out of the tab order.
+    return () => {
+      for (const radio of radios) radio.removeAttribute('tabindex');
+    };
+  });
+
+  // A disabled radio renders a `<button disabled>`, which can't hold focus, so
+  // arrow navigation must step over it — otherwise selection strands on an
+  // unfocusable radio (aria-checked set, focus stuck on the previous one). The
+  // index math lives in the shared roving helpers (utils/roving).
+  function handleKeyDown(event: KeyboardEvent) {
+    if (disabled || selection !== 'single') return;
+
+    const radios = rovingRadios();
+    if (radios.length === 0) return;
+
+    const currentIndex = selectedRadioIndex();
+    const isDisabled = (i: number) => radios[i].disabled;
+    let newIndex: number;
+
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        event.preventDefault();
+        newIndex = nextEnabledIndex(radios.length, currentIndex, 1, isDisabled);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        event.preventDefault();
+        newIndex = nextEnabledIndex(radios.length, currentIndex, -1, isDisabled);
+        break;
+      case 'Home':
+        event.preventDefault();
+        newIndex = edgeEnabledIndex(radios.length, 1, isDisabled);
+        break;
+      case 'End':
+        event.preventDefault();
+        newIndex = edgeEnabledIndex(radios.length, -1, isDisabled);
+        break;
+      default:
+        return;
+    }
+
+    if (newIndex !== currentIndex && newIndex >= 0) {
+      const target = radios[newIndex];
+      target.click(); // Button's own click handler performs the selection
+      target.focus();
+    }
+  }
+
   const ariaRole = $derived(selection === 'single' ? 'radiogroup' : 'group');
 </script>
 
 <div
+  bind:this={containerElement}
   role={ariaRole}
   class={unstyled
     ? [slotClasses?.base, className].filter(Boolean).join(' ')
     : styles.base({ class: [slotClasses?.base, className] })}
   aria-label={ariaLabel}
   aria-labelledby={ariaLabelledBy}
-  aria-disabled={disabled}
+  aria-orientation={orientation}
+  aria-disabled={disabled || undefined}
+  onkeydown={handleKeyDown}
   {...restProps}
 >
   {@render children?.()}

package/dist/primitives/Card/card.variants.js

@@ -66,10 +66,10 @@ export const cardVariants = tv({
                 footer: 'pt-5'
             }
         },
-        // Opt-in slot separators. Default `false` (Lighter): header/footer
+        // Opt-in slot separators. Default `false`: header/footer
         // sit flush against the body, the slots are separated by spacing
         // only. Set `dividers={true}` for traditional card-with-header look.
-        // Uses `border-hairline` (Lighter token) — leiser als border-subtle.
+        // Uses `border-hairline` — leiser als border-subtle.
         dividers: {
             true: {
                 header: 'border-b border-border-hairline',

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -32,6 +32,7 @@
     unstyled: unstyledProp = false,
     slotClasses: slotClassesProp = {},
     preset,
+    'aria-describedby': ariaDescribedby,
     ...restProps
   }: CheckboxProps = $props();
 
@@ -51,6 +52,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);
 
@@ -128,7 +137,7 @@
       class="peer sr-only"
       aria-checked={indeterminate ? 'mixed' : undefined}
       aria-invalid={ff.invalid ? 'true' : undefined}
-      aria-describedby={ff.describedBy}
+      aria-describedby={describedBy}
       onchange={handleChange}
       {...restProps}
     />
@@ -139,15 +148,24 @@
       aria-hidden="true"
       data-state={dataState}
     >
-      {#if indeterminate}
-        <IndeterminateIcon
-          class={unstyled ? (slotClasses?.icon ?? '') : styles.icon({ class: slotClasses?.icon })}
-        />
-      {:else if checked}
-        <CheckMarkIcon
-          class={unstyled ? (slotClasses?.icon ?? '') : styles.icon({ class: slotClasses?.icon })}
-          strokeWidth={3}
-        />
+      {#if unstyled}
+        <!-- Unstyled keeps the mount-on-state contract: consumers style via
+             `data-state` on the box and rely on the icon only existing while
+             checked/indeterminate. -->
+        {#if indeterminate}
+          <IndeterminateIcon class={slotClasses?.icon ?? ''} />
+        {:else if checked}
+          <CheckMarkIcon class={slotClasses?.icon ?? ''} strokeWidth={3} />
+        {/if}
+      {:else if indeterminate}
+        <IndeterminateIcon class={styles.icon({ class: slotClasses?.icon })} strokeWidth={3} />
+      {:else}
+        <!-- Styled mode keeps the icon mounted even while unchecked (hidden by
+             `opacity-0` + full stroke-dash offset) — a conditional mount would
+             insert the element already at its resolved classes and the draw-in
+             transition could never run. strokeWidth 3 matches the check and
+             the minus so both states carry the same stroke weight. -->
+        <CheckMarkIcon class={styles.icon({ class: slotClasses?.icon })} strokeWidth={3} />
       {/if}
     </span>
 

package/dist/primitives/Checkbox/checkbox.variants.js

@@ -7,12 +7,27 @@ export const checkboxVariants = tv({
         // the checkbox box is an input-tap surface.
         box: [
             'relative flex items-center justify-center shrink-0 border',
-            'transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out',
+            'transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--blocks-duration-fast)] ease-out',
+            // Press feedback on the control surface — same small-element press cue
+            // as Badge/Avatar (`scale-95`); `group-active` so pressing the label
+            // squeezes the box too. `scale` is in the transition list above, and
+            // reduced motion collapses `--blocks-duration-fast` to 1ms.
+            'group-active:scale-95',
             'peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50',
             'peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-base'
         ],
         icon: [
-            'opacity-0 scale-75 transition-[opacity,transform] duration-[var(--blocks-duration-fast)] ease-out'
+            // Check/minus draw in along their stroke: the paths hide behind a full
+            // dash offset and the checked/indeterminate variants pull it to 0.
+            // 22px covers both geometries (check ≈ 20.2, minus = 14 user units);
+            // the offset sits 1px past the dash edge so no round-cap dot can bleed
+            // at the path start. A fast opacity fade rides along so the un-draw on
+            // uncheck can't flash in the inherited text colour once the box's
+            // intent fill (and its `text-on-*`) has left. Both durations are
+            // tokens, so `prefers-reduced-motion` collapses the whole draw to 1ms.
+            'opacity-0 transition-opacity duration-[var(--blocks-duration-fast)] ease-out',
+            '[&_path]:[stroke-dasharray:22px] [&_path]:[stroke-dashoffset:23px]',
+            '[&_path]:transition-[stroke-dashoffset] [&_path]:duration-[var(--blocks-duration-normal)] [&_path]:ease-out'
         ],
         label: ['text-text-primary select-none'],
         message: ['text-xs text-text-tertiary']
@@ -63,12 +78,12 @@ export const checkboxVariants = tv({
         },
         checked: {
             true: {
-                icon: 'opacity-100 scale-100'
+                icon: 'opacity-100 [&_path]:[stroke-dashoffset:0]'
             }
         },
         indeterminate: {
             true: {
-                icon: 'opacity-100 scale-100'
+                icon: 'opacity-100 [&_path]:[stroke-dashoffset:0]'
             }
         },
         disabled: {
@@ -103,66 +118,93 @@ export const checkboxVariants = tv({
             class: { box: 'bg-transparent border-transparent group-hover:bg-surface-subtle' }
         },
         // ── Checked intent colors (identical across all variants) ──
+        // Hover/active darken through the intent interaction-layer tokens —
+        // the same `bg-<intent>-hover` / `bg-<intent>-active` ladder Button
+        // uses — via `group-*` so hovering/pressing the label counts too.
         {
             checked: true,
             intent: 'primary',
-            class: { box: 'bg-primary border-primary text-text-on-primary' }
+            class: {
+                box: 'bg-primary border-primary text-text-on-primary group-hover:bg-primary-hover group-active:bg-primary-active'
+            }
         },
         {
             checked: true,
             intent: 'secondary',
-            class: { box: 'bg-secondary border-secondary text-text-on-primary' }
+            class: {
+                box: 'bg-secondary border-secondary text-text-on-primary group-hover:bg-secondary-hover group-active:bg-secondary-active'
+            }
         },
         {
             checked: true,
             intent: 'success',
-            class: { box: 'bg-success border-success text-text-on-primary' }
+            class: {
+                box: 'bg-success border-success text-text-on-primary group-hover:bg-success-hover group-active:bg-success-active'
+            }
         },
         {
             checked: true,
             intent: 'warning',
-            class: { box: 'bg-warning border-warning text-text-on-surface' }
+            class: {
+                box: 'bg-warning border-warning text-text-on-surface group-hover:bg-warning-hover group-active:bg-warning-active'
+            }
         },
         {
             checked: true,
             intent: 'danger',
-            class: { box: 'bg-danger border-danger text-text-on-primary' }
+            class: {
+                box: 'bg-danger border-danger text-text-on-primary group-hover:bg-danger-hover group-active:bg-danger-active'
+            }
         },
         {
             checked: true,
             intent: 'neutral',
-            class: { box: 'bg-neutral border-neutral text-text-on-primary' }
+            class: {
+                box: 'bg-neutral border-neutral text-text-on-primary group-hover:bg-neutral-hover group-active:bg-neutral-active'
+            }
         },
         // ── Indeterminate mirrors checked ──
         {
             indeterminate: true,
             intent: 'primary',
-            class: { box: 'bg-primary border-primary text-text-on-primary' }
+            class: {
+                box: 'bg-primary border-primary text-text-on-primary group-hover:bg-primary-hover group-active:bg-primary-active'
+            }
         },
         {
             indeterminate: true,
             intent: 'secondary',
-            class: { box: 'bg-secondary border-secondary text-text-on-primary' }
+            class: {
+                box: 'bg-secondary border-secondary text-text-on-primary group-hover:bg-secondary-hover group-active:bg-secondary-active'
+            }
         },
         {
             indeterminate: true,
             intent: 'success',
-            class: { box: 'bg-success border-success text-text-on-primary' }
+            class: {
+                box: 'bg-success border-success text-text-on-primary group-hover:bg-success-hover group-active:bg-success-active'
+            }
         },
         {
             indeterminate: true,
             intent: 'warning',
-            class: { box: 'bg-warning border-warning text-text-on-surface' }
+            class: {
+                box: 'bg-warning border-warning text-text-on-surface group-hover:bg-warning-hover group-active:bg-warning-active'
+            }
         },
         {
             indeterminate: true,
             intent: 'danger',
-            class: { box: 'bg-danger border-danger text-text-on-primary' }
+            class: {
+                box: 'bg-danger border-danger text-text-on-primary group-hover:bg-danger-hover group-active:bg-danger-active'
+            }
         },
         {
             indeterminate: true,
             intent: 'neutral',
-            class: { box: 'bg-neutral border-neutral text-text-on-primary' }
+            class: {
+                box: 'bg-neutral border-neutral text-text-on-primary group-hover:bg-neutral-hover group-active:bg-neutral-active'
+            }
         },
         // ── Error overrides unchecked border ──
         {

package/dist/primitives/Combobox/Combobox.svelte

@@ -56,6 +56,8 @@
     slotClasses: slotClassesProp = {},
     preset,
     id: idProp,
+    'aria-describedby': ariaDescribedby,
+    'aria-label': ariaLabel,
     ...restProps
   }: ComboboxProps<T> = $props();
 
@@ -80,6 +82,15 @@
     disabled
   }));
 
+  // Consumer-supplied `aria-describedby` (e.g. an external hint) merges with the
+  // internal error/helper chain instead of being dropped — restProps land on the
+  // wrapper div, so without this the description would never reach the focusable
+  // input. Internal descriptions first, the consumer's supplemental one last
+  // (mirrors Select + Input).
+  const describedBy = $derived(
+    [ff.describedBy, ariaDescribedby].filter(Boolean).join(' ') || undefined
+  );
+
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
@@ -207,6 +218,18 @@
     filteredGroups ? filteredGroups.flatMap((g) => g.options) : allOptions.filter(matchesQuery)
   );
 
+  // Flat index of each option within `filtered`, precomputed so the grouped
+  // render path reads an option's keyboard-cursor index in O(1) instead of
+  // `filtered.indexOf(opt)` per option (O(n²) per keystroke on a large grouped
+  // list). Same first-occurrence semantics as `indexOf`.
+  const filteredIndexByOption = $derived.by(() => {
+    const map = new Map<ComboboxOption<T>, number>();
+    filtered.forEach((opt, i) => {
+      if (!map.has(opt)) map.set(opt, i);
+    });
+    return map;
+  });
+
   // Debounced query runner. The effect tracks `query` (+ debounceMs); each change
   // resets the timer, and the fetch runs a tick later so bursty typing collapses
   // into one request. A per-run AbortController lets a newer query cancel an
@@ -750,7 +773,7 @@
             {noResultsText}
           </div>
         {:else if filteredGroups}
-          {#each filteredGroups as group (group.label)}
+          {#each filteredGroups as group, i (`${group.label}-${i}`)}
             <div
               class={unstyled
                 ? (slotClasses?.group ?? '')
@@ -766,7 +789,7 @@
                 {group.label}
               </div>
               {#each group.options as opt (opt.value)}
-                {@render optionButton(opt, filtered.indexOf(opt))}
+                {@render optionButton(opt, filteredIndexByOption.get(opt) ?? -1)}
               {/each}
             </div>
           {/each}
@@ -855,6 +878,14 @@
   wiring lives in one place. `required` is single-mode only — in multi the input
   is transient search text (cleared after each pick), so a native `required` on
   it would wrongly block submit even with tags selected.
+
+  A consumer `aria-label` is forwarded onto the input (destructured out of
+  restProps so it never lands on the role-less wrapper `<div>` — axe
+  aria-prohibited-attr), but ONLY when no visible `label` renders. Unlike Select —
+  which names its trigger via `aria-labelledby` (HIGHER ARIA precedence than
+  aria-label) — Combobox names the input via a native `<label for>` (LOWER
+  precedence than aria-label), so an unconditional aria-label would override a
+  visible label. Gating on `label` keeps the visible label authoritative.
 -->
 {#snippet searchField(cls: string)}
   <input
@@ -867,7 +898,8 @@
     aria-activedescendant={activeDescendant}
     aria-autocomplete="list"
     aria-invalid={ff.invalid ? 'true' : undefined}
-    aria-describedby={ff.describedBy}
+    aria-describedby={describedBy}
+    aria-label={label ? undefined : ariaLabel}
     autocomplete="off"
     class={cls}
     placeholder={effectivePlaceholder}

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

@@ -41,10 +41,10 @@ export interface DialogProps extends Omit<HTMLDialogAttributes, 'children' | 'op
     /** Vertical placement within the viewport. Use 'top' for command-palette style positioning. @default 'center' */
     placement?: DialogVariants['placement'];
     /**
-     * Semantic purpose marker (e.g. `danger` for destructive actions). After the
-     * Lighter-Refactor, the Dialog itself no longer paints an accent bar — the
-     * value is exposed on the panel as `data-intent="…"` so consumers can hook
-     * presets, CSS overrides, or icon/title color via their own snippets.
+     * Semantic purpose marker (e.g. `danger` for destructive actions). The
+     * Dialog itself no longer paints an accent bar — the value is exposed on
+     * the panel as `data-intent="…"` so consumers can hook presets, CSS
+     * overrides, or icon/title color via their own snippets.
      * @default 'neutral'
      */
     intent?: DialogVariants['intent'];

package/dist/primitives/Input/Input.svelte

@@ -43,6 +43,7 @@
     persistVersion = 1,
     persistNamespace,
     onkeydown: userOnKeydown,
+    'aria-describedby': ariaDescribedby,
     ...restProps
   }: InputProps = $props();
 
@@ -126,6 +127,14 @@
     disabled
   }));
 
+  // Consumer-supplied `aria-describedby` (e.g. an external hint rendered
+  // outside the component) merges with the internal error/helper chain
+  // instead of being clobbered by it — internal descriptions first, the
+  // consumer's supplemental one last.
+  const describedBy = $derived(
+    [ff.describedBy, ariaDescribedby].filter(Boolean).join(' ') || undefined
+  );
+
   $effect(() => {
     if (inputRef && mint && mint !== 'none' && !disabled) {
       return mintRegistry.apply(inputRef, mint);
@@ -222,7 +231,7 @@
       {readonly}
       {required}
       aria-invalid={ff.invalid ? 'true' : undefined}
-      aria-describedby={ff.describedBy}
+      aria-describedby={describedBy}
       onkeydown={handleKeydown}
     />
 

package/dist/primitives/RadioGroup/RadioGroup.svelte

@@ -26,6 +26,7 @@
     slotClasses: slotClassesProp = {},
     preset,
     id,
+    'aria-describedby': ariaDescribedby,
     ...restProps
   }: RadioGroupProps = $props();
 
@@ -52,6 +53,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). Applied to the group element.
+  const describedBy = $derived(
+    [ff.describedBy, ariaDescribedby].filter(Boolean).join(' ') || undefined
+  );
+
   // Variant props feed both the tv() style computation and the slot-class
   // cascade — extracted into one derived so `resolveSlotClasses` can match
   // conditional `overrides` against the group's active variants.
@@ -155,7 +164,7 @@
     id={groupId}
     class={unstyled ? (slotClasses?.group ?? '') : styles.group({ class: slotClasses?.group })}
     aria-labelledby={labelId}
-    aria-describedby={ff.describedBy}
+    aria-describedby={describedBy}
     aria-required={required || undefined}
     aria-invalid={ff.invalid ? 'true' : undefined}
     onkeydown={handleKeydown}

package/dist/primitives/Select/Select.svelte

@@ -53,6 +53,8 @@
     slotClasses: slotClassesProp = {},
     preset,
     id: idProp,
+    'aria-describedby': ariaDescribedby,
+    'aria-label': ariaLabel,
     ...restProps
   }: SelectProps<T> = $props();
 
@@ -108,6 +110,14 @@
     disabled
   }));
 
+  // Consumer-supplied `aria-describedby` (e.g. an external hint rendered
+  // outside the component) merges with the internal error/helper chain —
+  // restProps land on the wrapper div, so without this the description
+  // would never reach the focusable trigger.
+  const describedBy = $derived(
+    [ff.describedBy, ariaDescribedby].filter(Boolean).join(' ') || undefined
+  );
+
   let activeIndex = $state(-1);
   // Tracks whether the most recent open was keyboard-driven, so the initial
   // active-option highlight only defaults to the first row for keyboard users.
@@ -145,6 +155,19 @@
 
   const enabledOptions = $derived(allOptions.filter((o) => !o.disabled));
 
+  // Flat index of each enabled option, precomputed so a grouped or flat option
+  // reads its keyboard-cursor index in O(1) rather than an O(n) `indexOf` per
+  // render — which made a large grouped listbox O(n²) per keystroke. Disabled
+  // options are absent from `enabledOptions`, so they resolve to -1 here, exactly
+  // as the previous `enabledOptions.indexOf(option)` did.
+  const enabledIndexByOption = $derived.by(() => {
+    const map = new Map<SelectOption<T>, number>();
+    enabledOptions.forEach((o, i) => {
+      if (!map.has(o)) map.set(o, i);
+    });
+    return map;
+  });
+
   /**
    * Currently selected option(s), normalized to an array regardless of mode.
    *
@@ -456,7 +479,8 @@
         aria-haspopup="listbox"
         aria-controls={listboxId}
         aria-labelledby={labelId}
-        aria-describedby={ff.describedBy}
+        aria-label={labelId ? undefined : ariaLabel}
+        aria-describedby={describedBy}
         aria-invalid={ff.invalid ? 'true' : undefined}
         aria-activedescendant={activeIndex >= 0 ? getOptionId(activeIndex) : undefined}
         onclick={toggle}
@@ -551,7 +575,7 @@
     >
       {#if open}
         {#if groups}
-          {#each groups as group (group.label)}
+          {#each groups as group, i (`${group.label}-${i}`)}
             <div
               class={unstyled
                 ? (slotClasses?.group ?? '')
@@ -567,8 +591,8 @@
                 {group.label}
               </div>
               {#each group.options as option (option.value)}
-                {@const optIdx = enabledOptions.indexOf(option)}
-                {@const isActive = optIdx === activeIndex}
+                {@const optIdx = enabledIndexByOption.get(option) ?? -1}
+                {@const isActive = optIdx >= 0 && optIdx === activeIndex}
                 {@const isSel = isOptionSelected(option)}
                 <!--
                   ARIA Listbox pattern: options are explicitly NOT in the
@@ -638,8 +662,8 @@
           {/each}
         {:else}
           {#each allOptions as option (option.value)}
-            {@const optIdx = enabledOptions.indexOf(option)}
-            {@const isActive = optIdx === activeIndex}
+            {@const optIdx = enabledIndexByOption.get(option) ?? -1}
+            {@const isActive = optIdx >= 0 && optIdx === activeIndex}
             {@const isSel = isOptionSelected(option)}
             <!-- Options stay out of the tab order — see ARIA Listbox note above. -->
             <!-- svelte-ignore a11y_interactive_supports_focus -->

package/dist/primitives/Slider/Slider.svelte

@@ -34,6 +34,7 @@
     unstyled: unstyledProp = false,
     slotClasses: slotClassesProp = {},
     preset,
+    'aria-describedby': ariaDescribedby,
     ...restProps
   }: SliderProps = $props();
 
@@ -240,12 +241,14 @@
     resolveSlotClasses(blocksConfig, 'Slider', preset, variantProps, slotClassesProp)
   );
 
-  // aria-describedby chain: error > helper, plus rangeStatus when active.
-  // `ff.describedBy` already handles error/hint in the canonical order;
-  // we append the optional statusId.
+  // aria-describedby chain: error > helper, plus rangeStatus when active,
+  // plus a consumer-supplied `aria-describedby` (e.g. an external hint) —
+  // restProps land on the wrapper div, so without the merge the consumer's
+  // description would never reach the focusable thumbs.
   const describedBy = $derived(
-    [ff.describedBy, hasRangeConstraints ? statusId : undefined].filter(Boolean).join(' ') ||
-      undefined
+    [ff.describedBy, hasRangeConstraints ? statusId : undefined, ariaDescribedby]
+      .filter(Boolean)
+      .join(' ') || undefined
   );
 
   $effect(() => {

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/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/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.21.3",
+  "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.21.3",
-    "@urbicon-ui/shared-types": "6.21.3",
+    "@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",