@urbicon-ui/blocks 6.23.0 → 6.25.0

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/Popover/Popover.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
-  import { useFloatingPanel, floatingPanelHidden } from '../../utils';
+  import { useFloatingPanel, floatingPanelHidden, maxTransitionDurationMs } from '../../utils';
   import { popoverVariants } from './popover.variants';
   import type { PopoverProps } from './index';
 
@@ -21,6 +21,9 @@
     autoTrigger = true,
     size = 'md',
 
+    transitionDuration,
+    transitionEasing,
+
     onOpenChange,
     onClickOutside: onClickOutsideProp,
     onEscape: onEscapeProp,
@@ -47,11 +50,64 @@
     resolveSlotClasses(blocksConfig, 'Popover', preset, { size }, slotClassesProp)
   );
 
+  // Per-instance motion overrides. Set the shared popover CSS variables inline
+  // only when a prop is provided, so the unset default keeps inheriting the
+  // reduced-motion-aware token (mirrors Tooltip's transitionDuration path).
+  const popoverDurationInline = $derived(
+    transitionDuration != null ? `${transitionDuration}ms` : undefined
+  );
+
   let internalTriggerElement = $state<HTMLElement | null>(null);
   let popoverElement = $state<HTMLElement | null>(null);
 
   const effectiveTriggerElement = $derived(triggerElement || internalTriggerElement);
 
+  // ── Exit-motion lag (ACC-3 rest) ───────────────────────────
+  //
+  // Closing used to tear three things down in one flush: `open` flips, the
+  // children block unmounts, and `useFloatingPanel` hides the panel. The CSS
+  // exit transition (see `popoverMotion` in popover.variants.ts) keeps the
+  // *panel element* painted via `allow-discrete`, but the children must
+  // outlive `open` or the panel fades out empty. `exiting` lags the teardown
+  // by the panel's actual computed transition duration — read from the live
+  // style so per-instance props, theme token overrides, and reduced motion all
+  // shorten it automatically. A zero duration (jsdom/node tests, browsers
+  // without the CSS, `unstyled` without rebuilt motion) tears down
+  // synchronously: exactly the pre-motion behaviour.
+  //
+  // `$effect.pre` matters: the flag must be `true` in the SAME flush that
+  // renders `open === false`, otherwise the children unmount one frame before
+  // the lag starts. The `prevOpenForExit` tracker (non-reactive, seeded via
+  // `untrack` like `prevPopoverMode` below) keeps the effect keyed on real
+  // transitions — without it, the `bind:this` assignment would re-run the
+  // effect on mount and flash a closed-by-default popover open for one lag.
+  const EXIT_MOTION_BUFFER_MS = 50;
+  let exiting = $state(false);
+  let exitTimer: ReturnType<typeof setTimeout> | undefined;
+  let prevOpenForExit = untrack(() => open);
+  $effect.pre(() => {
+    if (open === prevOpenForExit) return;
+    prevOpenForExit = open;
+    if (open) {
+      clearTimeout(exitTimer);
+      exiting = false;
+      return;
+    }
+    const ms = maxTransitionDurationMs(untrack(() => popoverElement));
+    if (ms <= 0) return;
+    exiting = true;
+    exitTimer = setTimeout(() => {
+      exiting = false;
+    }, ms + EXIT_MOTION_BUFFER_MS);
+  });
+
+  // While `exiting`, the panel is still fading: keep children mounted and (in
+  // the in-place modes) keep `display` un-hidden. `useFloatingPanel` stays on
+  // the raw `open` on purpose — `hidePopover()` fires immediately and the
+  // discrete transition carries the visual exit, so a re-open during the fade
+  // reverses smoothly instead of waiting out the lag.
+  const panelVisible = $derived(open || exiting);
+
   // ── Floating UI positioning + native show/hide ─────────────
   //
   // Delegated to the shared `useFloatingPanel` helper — the same positioning
@@ -291,6 +347,27 @@
     target?.focus();
   }
 
+  // Un-arm `dismissedByTrigger` at the start of the NEXT pointer gesture,
+  // wherever it lands. Registered as a one-shot capture listener when the
+  // guard arms: capture order (document before trigger) guarantees a stale
+  // flag is cleared before any new arm, and `once` keeps at most one listener
+  // pending. This closes the aborted-click hole (pointerdown on the trigger,
+  // pointer released elsewhere → no click ever consumed the flag → the next
+  // trigger click was swallowed once).
+  function disarmDismissedByTrigger() {
+    dismissedByTrigger = false;
+  }
+
+  // Unmount cleanup for the imperative leftovers: a pending exit-lag timer
+  // and a still-armed disarm listener. Dependency-free → runs once,
+  // teardown on destroy.
+  $effect(() => {
+    return () => {
+      clearTimeout(exitTimer);
+      document.removeEventListener('pointerdown', disarmDismissedByTrigger, true);
+    };
+  });
+
   function handleTriggerPointerDown() {
     // Arm the "this pointerdown already dismissed it" guard only in auto
     // mode, where the browser's light dismiss really closes the popover
@@ -298,7 +375,15 @@
     // re-opening it). In manual mode nothing light-dismisses — the click
     // itself must toggle-close, so arming the guard there left the trigger
     // unable to close its own popover.
-    if (open && popoverMode === 'auto') dismissedByTrigger = true;
+    if (open && popoverMode === 'auto') {
+      dismissedByTrigger = true;
+      // This event has already passed the document's capture phase, so the
+      // listener can only fire on a LATER pointerdown.
+      document.addEventListener('pointerdown', disarmDismissedByTrigger, {
+        capture: true,
+        once: true
+      });
+    }
   }
 
   function handleTriggerClick(event: MouseEvent) {
@@ -361,6 +446,20 @@
       drops over a modal dialog (Codeberg #23).
 -->
 
+<!--
+  `data-state` sits after `{...restProps}` like the other load-bearing
+  attributes: it drives the enter/exit motion CSS (popoverMotion) and is the
+  documented styling hook for consumers rebuilding motion under `unstyled`.
+  `{#if panelVisible}` (not `open`) keeps the children mounted while the exit
+  transition plays; `style:display` follows the same lagged flag so the
+  in-place modes can fade out before they hide.
+
+  `inert` while closed (GuidePanel's pattern): the exit-fading children are
+  still mounted and displayed, so without it a Tab right after dismiss would
+  focus into the visually dismissed panel and Enter could re-fire a consumer
+  action; pointer-events-none (popoverMotion) only covers mouse/touch. Also
+  drops the fading subtree from the a11y tree immediately.
+-->
 <div
   bind:this={popoverElement}
   class={popoverClasses}
@@ -370,12 +469,16 @@
   style:position={panel.strategy}
   style:inset="auto"
   style:margin="0"
-  style:display={floatingPanelHidden(panel, open) ? 'none' : null}
+  style:display={floatingPanelHidden(panel, panelVisible) ? 'none' : null}
+  style:--blocks-popover-duration={popoverDurationInline}
+  style:--blocks-popover-easing={transitionEasing}
+  data-state={open ? 'open' : 'closed'}
+  inert={!open || undefined}
   {role}
   aria-modal={ariaModal || undefined}
   {id}
 >
-  {#if open}
+  {#if panelVisible}
     {@render children()}
   {/if}
 </div>

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

@@ -70,6 +70,19 @@ export interface PopoverProps extends PopoverVariants, Omit<HTMLAttributes<HTMLD
     open?: boolean;
     /** When true (default), the trigger wrapper handles click and keyboard to toggle the popover. Set to `false` to manage `open` yourself. */
     autoTrigger?: boolean;
+    /**
+     * Override the enter/exit fade duration in ms. Defaults to the shared token
+     * `--blocks-popover-duration` (150ms; collapses to 1ms under
+     * `prefers-reduced-motion`).
+     */
+    transitionDuration?: number;
+    /**
+     * Override the enter/exit easing as a CSS `<easing-function>` (e.g.
+     * `'linear'`, `'ease-out'`, `'cubic-bezier(0.4,0,0.2,1)'`). Defaults to the
+     * token `--blocks-popover-easing`. A CSS string, not a JS easing fn, because
+     * the popover motion is a pure CSS transition.
+     */
+    transitionEasing?: string;
     /**
      * Whether the popover closes on Escape key. Default `true`.
      * Set to `false` for cases where Escape should be intercepted by an
@@ -98,7 +111,7 @@ export interface PopoverProps extends PopoverVariants, Omit<HTMLAttributes<HTMLD
     onEscape?: () => void;
     /** Extra classes merged onto the floating panel element. */
     class?: string;
-    /** Strip all default tv() classes. Combine with `class` or `slotClasses` for full custom styling. */
+    /** Strip all default tv() classes (including the enter/exit motion). Combine with `class` or `slotClasses` for full custom styling; the panel always carries `data-state="open" | "closed"`, so custom motion can rebuild on that hook (see `popoverMotion` in popover.variants.ts for the reference implementation). */
     unstyled?: boolean;
     /** Per-slot class overrides. Available slots: `base` (the floating panel). */
     slotClasses?: Partial<Record<'base', string>>;
@@ -111,4 +124,4 @@ export interface PopoverProps extends PopoverVariants, Omit<HTMLAttributes<HTMLD
     preset?: string;
 }
 export { default as Popover } from './Popover.svelte';
-export { type PopoverVariants, popoverVariants } from './popover.variants.js';
+export { type PopoverVariants, popoverMotion, popoverVariants } from './popover.variants.js';

package/dist/primitives/Popover/index.js

@@ -1,2 +1,2 @@
 export { default as Popover } from './Popover.svelte';
-export { popoverVariants } from './popover.variants.js';
+export { popoverMotion, popoverVariants } from './popover.variants.js';

package/dist/primitives/Popover/popover.variants.d.ts

@@ -1,4 +1,29 @@
 import { type VariantProps } from '../../utils/variants.js';
+/**
+ * CSS-native enter/exit motion for the floating panel (ACC-3 rest), keyed on
+ * the `data-state` attribute Popover always stamps. Kept as its own fragment
+ * because two call sites need exactly these classes: `popoverVariants.base`
+ * below, and Menu — which renders its inner Popover `unstyled` (to avoid a
+ * double surface) and re-applies the fragment via Popover's `class` prop.
+ *
+ * How the two halves work:
+ * - **Enter** — the panel un-hides via `showPopover()` (top layer) or a
+ *   `display` flip (in-place mode), so a plain transition has no before-state;
+ *   `starting:` (`@starting-style`) supplies it.
+ * - **Exit** — `hidePopover()` / a native light dismiss yank the panel to
+ *   `display: none` in the same style recalc that flips `data-state`;
+ *   `transition-discrete` (`transition-behavior: allow-discrete`) on
+ *   `display`/`overlay` keeps it painted (and in the top layer) until the
+ *   fade lands. Popover lags the children-teardown to match — see the
+ *   exit-motion block in Popover.svelte.
+ *
+ * Browsers without `@starting-style`/`allow-discrete` simply skip the motion
+ * and keep today's instant toggle. Duration/easing resolve through the
+ * `--blocks-popover-*` tokens (interaction.css), which reduced motion
+ * collapses to 1ms; `motion-reduce:duration-[1ms]` guards the inline
+ * per-instance override path, which can't see the media query.
+ */
+export declare const popoverMotion: string;
 export declare const popoverVariants: ((props?: import("../../utils/variants.js").TVProps<{
     size: {
         sm: string;

package/dist/primitives/Popover/popover.variants.js

@@ -1,9 +1,44 @@
 import { tv } from '../../utils/variants.js';
+/**
+ * CSS-native enter/exit motion for the floating panel (ACC-3 rest), keyed on
+ * the `data-state` attribute Popover always stamps. Kept as its own fragment
+ * because two call sites need exactly these classes: `popoverVariants.base`
+ * below, and Menu — which renders its inner Popover `unstyled` (to avoid a
+ * double surface) and re-applies the fragment via Popover's `class` prop.
+ *
+ * How the two halves work:
+ * - **Enter** — the panel un-hides via `showPopover()` (top layer) or a
+ *   `display` flip (in-place mode), so a plain transition has no before-state;
+ *   `starting:` (`@starting-style`) supplies it.
+ * - **Exit** — `hidePopover()` / a native light dismiss yank the panel to
+ *   `display: none` in the same style recalc that flips `data-state`;
+ *   `transition-discrete` (`transition-behavior: allow-discrete`) on
+ *   `display`/`overlay` keeps it painted (and in the top layer) until the
+ *   fade lands. Popover lags the children-teardown to match — see the
+ *   exit-motion block in Popover.svelte.
+ *
+ * Browsers without `@starting-style`/`allow-discrete` simply skip the motion
+ * and keep today's instant toggle. Duration/easing resolve through the
+ * `--blocks-popover-*` tokens (interaction.css), which reduced motion
+ * collapses to 1ms; `motion-reduce:duration-[1ms]` guards the inline
+ * per-instance override path, which can't see the media query.
+ */
+export const popoverMotion = [
+    'transition-[opacity,scale,display,overlay] transition-discrete',
+    'duration-[var(--blocks-popover-duration)] ease-[var(--blocks-popover-easing)]',
+    'motion-reduce:duration-[1ms]',
+    // pointer-events-none while closed: during the exit fade the children are
+    // still mounted and painted — without this, a quick click on the fading
+    // panel would fire consumer handlers from a visually dismissed surface.
+    'data-[state=closed]:opacity-0 data-[state=closed]:scale-[0.98] data-[state=closed]:pointer-events-none',
+    'starting:data-[state=open]:opacity-0 starting:data-[state=open]:scale-[0.98]'
+].join(' ');
 export const popoverVariants = tv({
     // tier: contain — floating panel surface.
     base: [
         'bg-surface-elevated border border-border-hairline rounded-contain',
         'shadow-[var(--blocks-shadow-md)] backdrop-blur-sm',
+        popoverMotion,
         // `calc(100dvh-4rem)` is the static design cap; Floating UI's `size`
         // middleware (via useFloatingPanel) narrows it to the room actually left
         // between the anchor and the visual viewport edge through

package/dist/primitives/Progress/progress.variants.js

@@ -35,7 +35,7 @@ export const progressVariants = tv({
             xs: {
                 track: 'h-1',
                 fill: 'h-1',
-                circularLabel: 'text-[10px]'
+                circularLabel: 'text-3xs'
             },
             sm: {
                 track: 'h-1.5',

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/RadioGroup/radioGroup.variants.js

@@ -66,7 +66,7 @@ export const radioItemVariants = tv({
                 indicator: 'w-3.5 h-3.5 mt-px',
                 dot: 'w-1.5 h-1.5',
                 label: 'text-xs',
-                description: 'text-[10px]'
+                description: 'text-3xs'
             },
             sm: {
                 item: 'gap-2',

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

@@ -256,7 +256,14 @@ interface SelectBaseProps<T extends SelectValue = string> extends Omit<SelectVar
      * and make the custom look reusable across the project.
      */
     preset?: string;
-    /** Explicit `id` for the component. Auto-generated if omitted. */
+    /**
+     * Explicit `id` for the component. Auto-generated if omitted.
+     *
+     * The id lands on the component's wrapper, which is not a labelable element.
+     * The focusable trigger is derived from it as `` `${id}-trigger` `` — that is
+     * the id an external `<label for>` has to address, since a `for` pointing at
+     * the wrapper focuses nothing.
+     */
     id?: string;
 }
 /**

package/dist/primitives/Slider/Slider.svelte

@@ -35,6 +35,7 @@
     slotClasses: slotClassesProp = {},
     preset,
     'aria-describedby': ariaDescribedby,
+    'aria-labelledby': ariaLabelledby,
     ...restProps
   }: SliderProps = $props();
 
@@ -53,6 +54,8 @@
     disabled
   }));
   const statusId = `${uid}-status`;
+  const minLabelId = `${uid}-min-label`;
+  const maxLabelId = `${uid}-max-label`;
 
   let trackRef = $state<HTMLDivElement>();
   let dragging = $state<'single' | 'start' | 'end' | null>(null);
@@ -251,6 +254,17 @@
       .join(' ') || undefined
   );
 
+  // `aria-labelledby` has the same reach problem as `aria-describedby` above:
+  // restProps land on the roleless wrapper div, so an external visible label
+  // would never name the focusable thumbs. On the range arm one external label
+  // would name both thumbs identically ("Padding" / "Padding"), so it is
+  // composed with a visually-hidden minimum/maximum qualifier —
+  // aria-labelledby concatenates its references in order, yielding
+  // "Padding Minimum" / "Padding Maximum" and preserving the distinction the
+  // `label`-prop arm gets for free.
+  const startLabelledBy = $derived(ariaLabelledby ? `${ariaLabelledby} ${minLabelId}` : undefined);
+  const endLabelledBy = $derived(ariaLabelledby ? `${ariaLabelledby} ${maxLabelId}` : undefined);
+
   $effect(() => {
     if (trackRef && mint && mint !== 'none' && !disabled) {
       return mintRegistry.apply(trackRef, mint);
@@ -429,13 +443,22 @@
     {/if}
 
     {#if range}
+      {#if ariaLabelledby}
+        <span id={minLabelId} class="sr-only">{bt('accessibility.minimum') || 'Minimum'}</span>
+        <span id={maxLabelId} class="sr-only">{bt('accessibility.maximum') || 'Maximum'}</span>
+      {/if}
       <div
         role="slider"
         tabindex={disabled ? -1 : 0}
         aria-valuemin={min}
         aria-valuemax={rangeValue[1]}
         aria-valuenow={rangeValue[0]}
-        aria-label={label ? `${label} minimum` : bt('accessibility.minimum') || 'Minimum'}
+        aria-labelledby={startLabelledBy}
+        aria-label={startLabelledBy
+          ? undefined
+          : label
+            ? `${label} minimum`
+            : bt('accessibility.minimum') || 'Minimum'}
         aria-describedby={describedBy}
         aria-disabled={disabled || undefined}
         class={unstyled ? (slotClasses?.thumb ?? '') : styles.thumb({ class: slotClasses?.thumb })}
@@ -449,7 +472,12 @@
         aria-valuemin={rangeValue[0]}
         aria-valuemax={max}
         aria-valuenow={rangeValue[1]}
-        aria-label={label ? `${label} maximum` : bt('accessibility.maximum') || 'Maximum'}
+        aria-labelledby={endLabelledBy}
+        aria-label={endLabelledBy
+          ? undefined
+          : label
+            ? `${label} maximum`
+            : bt('accessibility.maximum') || 'Maximum'}
         aria-describedby={describedBy}
         aria-disabled={disabled || undefined}
         class={unstyled ? (slotClasses?.thumb ?? '') : styles.thumb({ class: slotClasses?.thumb })}
@@ -464,7 +492,8 @@
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={singleValue}
-        aria-label={label || bt('accessibility.slider') || 'Slider'}
+        aria-labelledby={ariaLabelledby}
+        aria-label={ariaLabelledby ? undefined : label || bt('accessibility.slider') || 'Slider'}
         aria-describedby={describedBy}
         aria-disabled={disabled || undefined}
         class={unstyled ? (slotClasses?.thumb ?? '') : styles.thumb({ class: slotClasses?.thumb })}

package/dist/primitives/Stepper/stepper.variants.js

@@ -68,7 +68,7 @@ export const stepperVariants = tv({
                 indicator: 'size-7 text-xs',
                 step: 'gap-2',
                 label: 'text-xs',
-                description: 'text-[11px]',
+                description: 'text-2xs',
                 content: 'text-sm',
                 indicatorColumn: 'w-7'
             },

package/dist/primitives/Textarea/Textarea.svelte

@@ -29,6 +29,7 @@
     slotClasses: slotClassesProp = {},
     preset,
     oninput: userOnInput,
+    id: idProp,
     'aria-describedby': ariaDescribedby,
     ...restProps
   }: TextareaProps = $props();
@@ -42,9 +43,12 @@
   let textareaRef = $state<HTMLTextAreaElement>();
 
   // ARIA wiring is shared with every form primitive — see XC-2.
+  // A consumer-supplied `id` wins over the generated one, so an external
+  // `<label for>` can address the `<textarea>` (mirrors the Input role model).
   const propsId = $props.id();
+  const fieldId = $derived(idProp ?? `textarea-${propsId}`);
   const ff = useFormField(() => ({
-    fieldId: `textarea-${propsId}`,
+    fieldId,
     helper,
     error,
     required,