@classic-homes/theme-svelte 1.22.1 → 1.22.3

package/dist/lib/components/Combobox.svelte

@@ -186,7 +186,7 @@
           collisionPadding={8}
           avoidCollisions={true}
         >
-          <div class="p-1 max-h-[300px] overflow-y-auto">
+          <div class="p-1 max-h-72 overflow-y-auto">
             {#if loading}
               <div class="flex items-center justify-center py-6">
                 <Spinner size="sm" />
@@ -282,7 +282,7 @@
         collisionPadding={8}
         avoidCollisions={true}
       >
-        <div class="p-1 max-h-[300px] overflow-y-auto">
+        <div class="p-1 max-h-72 overflow-y-auto">
           {#if loading}
             <div class="flex items-center justify-center py-6">
               <Spinner size="sm" />

package/dist/lib/components/DataTable.svelte

@@ -85,7 +85,7 @@
     rowSelection?: Set<string>;
     /** Callback when selection changes */
     onRowSelectionChange?: (selection: Set<string>) => void;
-    /** Function to get unique row ID (defaults to index) */
+    /** Function to get unique row ID (defaults to the row's index in `data`) */
     getRowId?: (row: T, index: number) => string;
 
     // === Visibility Props ===
@@ -239,7 +239,7 @@
   const table = createDataTable<T>(() => ({
     data,
     columns,
-    getRowId: getRowId ?? ((row, index) => String(index)),
+    getRowId,
     initialSortColumn: sortColumn,
     initialSortDirection: sortDirection,
     initialPageSize: pageSize,
@@ -248,6 +248,8 @@
     manualSorting: !!onSort,
     manualFiltering,
     manualPagination,
+    // Without the pager every row must render, not just the first page.
+    enablePagination,
     pageCount,
     onSortChange: (col, dir) => {
       sortColumn = col ?? undefined;
@@ -324,9 +326,14 @@
     table.toggleAllRows();
   }
 
-  function handleSelectRow(rowId: string, e: MouseEvent) {
-    e.stopPropagation();
-    table.toggleRowSelection(rowId);
+  // Keyboard activation for clickable rows; ignore keys aimed at the
+  // row's own controls (the selection checkbox handles its own Space).
+  function handleRowKeydown(e: KeyboardEvent, row: T) {
+    if (e.target !== e.currentTarget) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleRowClick(row);
+    }
   }
 
   // Literal class strings so Tailwind's content scan generates them.
@@ -442,7 +449,9 @@
                 onRowClick && 'cursor-pointer hover:bg-muted-hover',
                 row.isSelected && 'bg-primary/5'
               )}
+              tabindex={onRowClick ? 0 : undefined}
               onclick={() => handleRowClick(row.original)}
+              onkeydown={onRowClick ? (e) => handleRowKeydown(e, row.original) : undefined}
             >
               {#if enableRowSelection}
                 <td class="px-4 py-3">
@@ -451,7 +460,7 @@
                       checked={row.isSelected}
                       onCheckedChange={() => table.toggleRowSelection(row.id)}
                       aria-label={`Select row ${index + 1}`}
-                      onclick={(e: MouseEvent) => handleSelectRow(row.id, e)}
+                      onclick={(e: MouseEvent) => e.stopPropagation()}
                     />
                   {/if}
                 </td>

package/dist/lib/components/DataTable.svelte.d.ts

@@ -66,7 +66,7 @@ declare function $$render<T extends object>(): {
         rowSelection?: Set<string>;
         /** Callback when selection changes */
         onRowSelectionChange?: (selection: Set<string>) => void;
-        /** Function to get unique row ID (defaults to index) */
+        /** Function to get unique row ID (defaults to the row's index in `data`) */
         getRowId?: (row: T, index: number) => string;
         /** Enable column visibility toggling */
         enableColumnVisibility?: boolean;

package/dist/lib/components/DateTimePicker.svelte

@@ -75,8 +75,9 @@
   const hintId = $derived(`${componentId}-hint`);
   const errorId = $derived(`${componentId}-error`);
 
-  // Sync stringValue -> value when stringValue changes externally
-  let lastStringValue = $state<string | null>(stringValue);
+  // Sync stringValue -> value when stringValue changes externally. Starts at
+  // null so an initial stringValue is adopted before value -> stringValue runs.
+  let lastStringValue = $state<string | null>(null);
   $effect(() => {
     if (stringValue !== lastStringValue) {
       lastStringValue = stringValue;
@@ -117,7 +118,8 @@
   // Compute aria-describedby based on hint and error
   const describedBy = $derived.by(() => {
     const ids: string[] = [];
-    if (hint) ids.push(hintId);
+    // The hint is not rendered while an error shows
+    if (hint && !displayError) ids.push(hintId);
     if (displayError) ids.push(errorId);
     return ids.length > 0 ? ids.join(' ') : undefined;
   });
@@ -412,9 +414,6 @@
   ];
 
   const dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-
-  // Determine if we need a container wrapper
-  const hasWrapper = $derived(!!label || !!hint || !!error || !!parseError);
 </script>
 
 {#snippet pickerContent()}
@@ -633,32 +632,30 @@
   {/if}
 {/snippet}
 
-{#if hasWrapper}
-  <div class="space-y-2">
-    {#if label}
-      <Label for={componentId} {disabled}>
-        {label}
-        {#if required}
-          <span class="text-destructive ml-0.5" aria-hidden="true">*</span>
-          <span class="sr-only">(required)</span>
-        {/if}
-      </Label>
-    {/if}
-
-    {@render pickerContent()}
-
-    {#if hint && !displayError}
-      <p id={hintId} class="text-sm text-muted-foreground">
-        {hint}
-      </p>
-    {/if}
-
-    {#if displayError}
-      <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
-        {displayError}
-      </p>
-    {/if}
-  </div>
-{:else}
+<!-- Always wrapped: toggling the wrapper on a parse error would re-mount the
+     input and drop focus. -->
+<div class="space-y-2">
+  {#if label}
+    <Label for={componentId} {disabled}>
+      {label}
+      {#if required}
+        <span class="text-destructive ml-0.5" aria-hidden="true">*</span>
+        <span class="sr-only">(required)</span>
+      {/if}
+    </Label>
+  {/if}
+
   {@render pickerContent()}
-{/if}
+
+  {#if hint && !displayError}
+    <p id={hintId} class="text-sm text-muted-foreground">
+      {hint}
+    </p>
+  {/if}
+
+  {#if displayError}
+    <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
+      {displayError}
+    </p>
+  {/if}
+</div>

package/dist/lib/components/DropdownMenu.svelte

@@ -17,6 +17,11 @@
     icon?: IconName;
     /** Render the item as a link to this URL (selection still fires `onSelect`) */
     href?: string;
+    /**
+     * Make this a checkbox item (`menuitemcheckbox`) showing this state.
+     * Selecting it fires `onSelect` and keeps the menu open.
+     */
+    checked?: boolean;
   }
 
   export interface DropdownMenuGroup {
@@ -102,6 +107,19 @@
     <div role="presentation" class="px-2 py-1.5 text-sm font-semibold">
       {item.label}
     </div>
+  {:else if item.checked !== undefined}
+    <DropdownMenuPrimitive.CheckboxItem
+      checked={item.checked}
+      disabled={item.disabled}
+      closeOnSelect={false}
+      onSelect={() => item.onSelect?.()}
+      class="relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none bg-popover data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
+    >
+      {#if item.checked}
+        <Icon name="check" size={16} class="absolute left-2 shrink-0" aria-hidden="true" />
+      {/if}
+      {@render itemContent(item)}
+    </DropdownMenuPrimitive.CheckboxItem>
   {:else}
     {@const itemClass = cn(
       'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none bg-popover data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default',
@@ -151,34 +169,38 @@
     {/snippet}
   </DropdownMenuPrimitive.Trigger>
 
-  <DropdownMenuPrimitive.Content
-    {side}
-    {align}
-    sideOffset={4}
-    collisionPadding={8}
-    avoidCollisions={true}
-    class={cn(
-      'isolate z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      className
-    )}
-  >
-    <div class="max-h-[300px] overflow-y-auto overflow-x-hidden">
-      {#each items as item}
-        {#if isGroup(item)}
-          <DropdownMenuPrimitive.Group>
-            {#if item.label}
-              <DropdownMenuPrimitive.GroupHeading class="px-2 py-1.5 text-sm font-semibold">
-                {item.label}
-              </DropdownMenuPrimitive.GroupHeading>
-            {/if}
-            {#each item.items as subItem}
-              {@render entry(subItem)}
-            {/each}
-          </DropdownMenuPrimitive.Group>
-        {:else}
-          {@render entry(item)}
-        {/if}
-      {/each}
-    </div>
-  </DropdownMenuPrimitive.Content>
+  <!-- Portal so the menu is not clipped by an overflow/transformed ancestor
+       (a Dialog, or the DataTable's scroll wrapper). -->
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      {side}
+      {align}
+      sideOffset={4}
+      collisionPadding={8}
+      avoidCollisions={true}
+      class={cn(
+        'isolate z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+    >
+      <div class="max-h-72 overflow-y-auto overflow-x-hidden">
+        {#each items as item}
+          {#if isGroup(item)}
+            <DropdownMenuPrimitive.Group>
+              {#if item.label}
+                <DropdownMenuPrimitive.GroupHeading class="px-2 py-1.5 text-sm font-semibold">
+                  {item.label}
+                </DropdownMenuPrimitive.GroupHeading>
+              {/if}
+              {#each item.items as subItem}
+                {@render entry(subItem)}
+              {/each}
+            </DropdownMenuPrimitive.Group>
+          {:else}
+            {@render entry(item)}
+          {/if}
+        {/each}
+      </div>
+    </DropdownMenuPrimitive.Content>
+  </DropdownMenuPrimitive.Portal>
 </DropdownMenuPrimitive.Root>

package/dist/lib/components/DropdownMenu.svelte.d.ts

@@ -13,6 +13,11 @@ export interface DropdownMenuItem {
     icon?: IconName;
     /** Render the item as a link to this URL (selection still fires `onSelect`) */
     href?: string;
+    /**
+     * Make this a checkbox item (`menuitemcheckbox`) showing this state.
+     * Selecting it fires `onSelect` and keeps the menu open.
+     */
+    checked?: boolean;
 }
 export interface DropdownMenuGroup {
     label?: string;

package/dist/lib/components/FileUpload.svelte

@@ -86,7 +86,6 @@
 
   let isDragging = $state(false);
   let internalError = $state<string | undefined>(undefined);
-  let fileInput: HTMLInputElement;
   let lightboxOpen = $state(false);
   let lightboxIndex = $state(0);
 
@@ -420,13 +419,6 @@
     }
   }
 
-  // Handle click to browse
-  function handleClick() {
-    if (!disabled) {
-      fileInput?.click();
-    }
-  }
-
   // Handle file input change
   function handleInputChange(e: Event) {
     const input = e.target as HTMLInputElement;
@@ -492,20 +484,15 @@
 
   const usePreviewGrid = $derived(previewLayout === 'grid' && previewItems.length > 0);
 
+  // The focusable file input carries the description, not the drop-zone label
+  const describedBy = $derived(displayError ? `${id}-error` : hint ? `${id}-hint` : undefined);
+
   function openPreview(fileId: string) {
     const previewIndex = previewItems.findIndex((item) => item.id === fileId);
     if (previewIndex === -1) return;
     lightboxIndex = previewIndex;
     lightboxOpen = true;
   }
-
-  // Handle keyboard activation
-  function handleKeyDown(e: KeyboardEvent) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleClick();
-    }
-  }
 </script>
 
 <div class={cn('space-y-2', className)}>
@@ -518,7 +505,6 @@
   <!-- Drop Zone - using label to wrap the hidden input for better accessibility -->
   <label
     for={id}
-    aria-describedby={displayError ? `${id}-error` : undefined}
     class={cn(
       'relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-6',
       'cursor-pointer focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
@@ -560,12 +546,12 @@
 
     <!-- Hidden file input -->
     <input
-      bind:this={fileInput}
       type="file"
       {id}
       multiple={maxFiles > 1}
       accept={acceptedTypes.join(',')}
       {disabled}
+      aria-describedby={describedBy}
       class="sr-only"
       onchange={handleInputChange}
     />
@@ -573,7 +559,7 @@
 
   <!-- Hint text -->
   {#if hint && !displayError}
-    <p class="text-sm text-muted-foreground">{hint}</p>
+    <p id={`${id}-hint`} class="text-sm text-muted-foreground">{hint}</p>
   {/if}
 
   <!-- Error message -->

package/dist/lib/components/MultiSelect.svelte

@@ -244,7 +244,7 @@
             collisionPadding={8}
             avoidCollisions={true}
           >
-            <div class="p-1 max-h-[300px] overflow-y-auto">
+            <div class="p-1 max-h-72 overflow-y-auto">
               {#if loading}
                 <div class="flex items-center justify-center py-6">
                   <Spinner size="sm" />
@@ -381,7 +381,7 @@
           collisionPadding={8}
           avoidCollisions={true}
         >
-          <div class="p-1 max-h-[300px] overflow-y-auto">
+          <div class="p-1 max-h-72 overflow-y-auto">
             {#if loading}
               <div class="flex items-center justify-center py-6">
                 <Spinner size="sm" />

package/dist/lib/components/NumberInput.svelte

@@ -101,10 +101,23 @@
     }
   }
 
+  // Decimal places of a number, e.g. 0.25 -> 2, 1e-7 -> 7
+  function decimalPlaces(n: number): number {
+    const [mantissa, exponent] = String(n).split('e');
+    const fraction = mantissa.split('.')[1]?.length ?? 0;
+    return Math.max(0, fraction - (exponent ? parseInt(exponent) : 0));
+  }
+
+  // Add in floating point, then round away artifacts (0.2 + 0.1 -> 0.3)
+  function addStep(current: number, delta: number): number {
+    const places = Math.min(20, Math.max(decimalPlaces(current), decimalPlaces(delta)));
+    return Number((current + delta).toFixed(places));
+  }
+
   function increment() {
     if (disabled || readonly) return;
     const currentValue = value ?? min ?? 0;
-    const newValue = clampValue(currentValue + step);
+    const newValue = clampValue(addStep(currentValue, step));
     value = newValue;
     onValueChange?.(newValue);
   }
@@ -112,7 +125,7 @@
   function decrement() {
     if (disabled || readonly) return;
     const currentValue = value ?? max ?? 0;
-    const newValue = clampValue(currentValue - step);
+    const newValue = clampValue(addStep(currentValue, -step));
     value = newValue;
     onValueChange?.(newValue);
   }

package/dist/lib/components/Select.svelte

@@ -41,6 +41,10 @@
     error?: string;
     /** Hint text displayed below the select */
     hint?: string;
+    /** Accessible name for the trigger, when there is no visible label */
+    'aria-label'?: string;
+    /** ID of an element that labels the trigger */
+    'aria-labelledby'?: string;
   }
 
   let {
@@ -56,6 +60,8 @@
     id,
     error,
     hint,
+    'aria-label': ariaLabelProp,
+    'aria-labelledby': ariaLabelledby,
   }: Props = $props();
 
   // Generate unique IDs for accessibility using sequential counter
@@ -68,11 +74,16 @@
   // Compute aria-describedby based on hint and error
   const describedBy = $derived.by(() => {
     const ids: string[] = [];
-    if (hint) ids.push(hintId);
+    // The hint is not rendered while an error shows
+    if (hint && !error) ids.push(hintId);
     if (error) ids.push(errorId);
     return ids.length > 0 ? ids.join(' ') : undefined;
   });
 
+  const fallbackAriaLabel = $derived(
+    ariaLabelProp ?? (!label && !id && !ariaLabelledby ? placeholder : undefined)
+  );
+
   // Validate props in development
   $effect(() => {
     validateNonEmptyArray(options, 'options', 'Select');
@@ -81,7 +92,7 @@
   // Accessibility: warn if no label is associated in dev mode
   if (DEV) {
     $effect(() => {
-      if (!label && !id) {
+      if (!label && !id && !ariaLabelProp && !ariaLabelledby) {
         console.warn(
           '[Select] Missing accessible label. Provide a label prop or an id with a matching <label for="...">.'
         );
@@ -209,7 +220,7 @@
       collisionPadding={8}
       avoidCollisions={true}
     >
-      <div class="p-1 max-h-[300px] overflow-y-auto">
+      <div class="p-1 max-h-72 overflow-y-auto">
         {#each options as item}
           {#if isGroup(item)}
             <SelectPrimitive.Group>
@@ -229,6 +240,8 @@
   </SelectPrimitive.Portal>
 {/snippet}
 
+<!-- The placeholder is only a last-resort name: an aria-label would override
+     an external <label for={id}> or aria-labelledby. -->
 {#snippet selectRoot(ariaLabel: string | undefined)}
   <SelectPrimitive.Root
     type="single"
@@ -243,6 +256,7 @@
       id={componentId}
       class={triggerClasses}
       aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
       aria-invalid={error ? 'true' : undefined}
       aria-describedby={describedBy}
     >
@@ -268,7 +282,7 @@
       </Label>
     {/if}
 
-    {@render selectRoot(!label ? placeholder : undefined)}
+    {@render selectRoot(fallbackAriaLabel)}
 
     {#if hint && !error}
       <p id={hintId} class="text-sm text-muted-foreground">
@@ -283,5 +297,5 @@
     {/if}
   </div>
 {:else}
-  {@render selectRoot(placeholder)}
+  {@render selectRoot(fallbackAriaLabel)}
 {/if}

package/dist/lib/components/Select.svelte.d.ts

@@ -32,6 +32,10 @@ interface Props {
     error?: string;
     /** Hint text displayed below the select */
     hint?: string;
+    /** Accessible name for the trigger, when there is no visible label */
+    'aria-label'?: string;
+    /** ID of an element that labels the trigger */
+    'aria-labelledby'?: string;
 }
 declare const Select: import("svelte").Component<Props, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/lib/components/Signature.svelte

@@ -31,7 +31,9 @@
         'inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium',
       modeButtonActive: 'bg-background text-foreground shadow-sm',
       modeButtonInactive: 'text-muted-foreground hover:text-foreground',
-      canvasContainer: 'relative w-full overflow-hidden rounded-lg border bg-background',
+      // A white pad, like the exported image, so the default black ink stays
+      // visible in dark mode.
+      canvasContainer: 'relative w-full overflow-hidden rounded-lg border bg-white',
       canvas: 'block w-full cursor-crosshair touch-none',
       toolbar: 'flex flex-wrap items-center gap-2',
       toolButton:
@@ -88,7 +90,7 @@
     /** Default typed name for type mode */
     typedName?: string;
 
-    /** Stroke color (default: currentColor) */
+    /** Stroke color (default: #000000, drawn on a white pad to match the export) */
     strokeColor?: string;
     /** Stroke width in pixels */
     strokeWidth?: number;
@@ -222,8 +224,11 @@
   );
   let fontsLoaded = $state<Set<string>>(new Set());
 
-  // Consent state (untrack to intentionally capture initial value only)
+  // Consent state, kept in step with the bindable prop both ways
   let consented = $state(untrack(() => initialConsented));
+  $effect(() => {
+    consented = initialConsented;
+  });
 
   // Validation state
   let validationResult = $state<SignatureValidationResult>({ valid: false });
@@ -661,7 +666,10 @@
   function handlePointerUp(e: PointerEvent): void {
     if (!isDrawing || !currentStroke || disabled) return;
 
-    canvas.releasePointerCapture(e.pointerId);
+    // After pointercancel the capture is already gone and release would throw
+    if (canvas.hasPointerCapture?.(e.pointerId)) {
+      canvas.releasePointerCapture(e.pointerId);
+    }
     isDrawing = false;
     currentStroke.endTime = Date.now();
 
@@ -732,6 +740,8 @@
   function handleConsentChange(e: Event): void {
     const target = e.target as HTMLInputElement;
     consented = target.checked;
+    // Write back so bind:consented reflects the checkbox
+    initialConsented = consented;
     onConsentChange?.(consented);
     updateValue();
   }
@@ -915,6 +925,7 @@
       onpointerdown={handlePointerDown}
       onpointermove={handlePointerMove}
       onpointerup={handlePointerUp}
+      onpointercancel={handlePointerUp}
       onpointerleave={handlePointerLeave}
       onkeydown={handleKeyDown}
     ></canvas>

package/dist/lib/components/Signature.svelte.d.ts

@@ -14,7 +14,7 @@ interface Props {
     showModeToggle?: boolean;
     /** Default typed name for type mode */
     typedName?: string;
-    /** Stroke color (default: currentColor) */
+    /** Stroke color (default: #000000, drawn on a white pad to match the export) */
     strokeColor?: string;
     /** Stroke width in pixels */
     strokeWidth?: number;

package/dist/lib/components/Slider.svelte

@@ -7,23 +7,25 @@
 
   const sliderVariants = tv({
     slots: {
-      root: 'relative flex w-full touch-none select-none items-center',
-      range: 'absolute h-full bg-primary rounded-full',
+      root: 'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:flex-col',
+      // Vertical: bits-ui positions the range by top/bottom, so drop h-full
+      range:
+        'absolute h-full bg-primary rounded-full data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-full',
       thumb:
         "block rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 relative after:absolute after:left-1/2 after:top-1/2 after:h-11 after:w-11 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:content-['']",
     },
     variants: {
       size: {
         sm: {
-          root: 'h-1.5',
+          root: 'h-1.5 data-[orientation=vertical]:w-1.5',
           thumb: 'h-4 w-4',
         },
         md: {
-          root: 'h-2',
+          root: 'h-2 data-[orientation=vertical]:w-2',
           thumb: 'h-5 w-5',
         },
         lg: {
-          root: 'h-3',
+          root: 'h-3 data-[orientation=vertical]:w-3',
           thumb: 'h-6 w-6',
         },
       },
@@ -140,7 +142,6 @@
     onValueChange={handleValueChange}
     onValueCommit={handleValueCommit}
     class={cn(styles.root(), 'rounded-full bg-muted')}
-    aria-describedby={describedBy}
   >
     <SliderPrimitive.Range class={styles.range()} />
     {#each value as thumbValue, i}
@@ -152,6 +153,7 @@
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuetext={formatValue(thumbValue)}
+        aria-describedby={describedBy}
       />
     {/each}
   </SliderPrimitive.Root>