@classic-homes/theme-svelte 1.22.0 → 1.22.2

package/dist/lib/components/Alert.svelte

@@ -7,17 +7,15 @@
     base: 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
     variants: {
       variant: {
-        default:
-          'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100',
+        // Status tokens follow the theme into dark mode. Text stays foreground:
+        // the status hues are tuned for fills and icons, not body-text contrast.
+        default: 'bg-muted/50 border-border text-foreground',
         destructive:
-          'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 [&>svg]:text-red-700 dark:[&>svg]:text-red-400',
-        error:
-          'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 [&>svg]:text-red-700 dark:[&>svg]:text-red-400',
-        success:
-          'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 [&>svg]:text-green-700 dark:[&>svg]:text-green-400',
-        warning:
-          'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-700 dark:text-yellow-400 [&>svg]:text-yellow-700 dark:[&>svg]:text-yellow-400',
-        info: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-400 [&>svg]:text-blue-700 dark:[&>svg]:text-blue-400',
+          'bg-destructive/10 border-destructive/40 text-foreground [&>svg]:text-destructive',
+        error: 'bg-destructive/10 border-destructive/40 text-foreground [&>svg]:text-destructive',
+        success: 'bg-success/10 border-success/40 text-foreground [&>svg]:text-success',
+        warning: 'bg-warning/10 border-warning/40 text-foreground [&>svg]:text-warning',
+        info: 'bg-info/10 border-info/40 text-foreground [&>svg]:text-info',
       },
     },
     defaultVariants: {

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

@@ -169,6 +169,10 @@
     class: className,
   }: Props = $props();
 
+  // Unique per instance: two panels on a page must not share a title id.
+  const uid = $props.id();
+  const titleId = `data-panel-${uid}-title`;
+
   // Resolve constraints and card config (use $derived to react to prop changes)
   const resolvedConstraints = $derived({ ...DEFAULT_CONSTRAINTS, ...constraints });
   const resolvedCardConfig = $derived({ ...DEFAULT_CARD_CONFIG, ...cardConfig });
@@ -440,6 +444,15 @@
     handleExpandedChange(!isExpanded);
   }
 
+  // Keyboard activation for the card's role="button" header areas. Space must
+  // not also scroll the page, and a held key must not toggle repeatedly.
+  function handleCardToggleKeyDown(e: KeyboardEvent) {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    if (e.repeat) return;
+    handleToggleExpand();
+  }
+
   // Header collapse button. A detached full panel collapses by re-pinning to its
   // last edge (edge always holds the previous pin, or the default) and showing the
   // collapsed tab. Pinned/card just toggle expanded.
@@ -1357,7 +1370,8 @@
         .join(';')}
       role={mode === 'detached' || variant === 'card' ? 'dialog' : 'complementary'}
       aria-modal={isDialog ? 'true' : undefined}
-      aria-labelledby={title ? 'data-panel-title' : undefined}
+      aria-labelledby={title && !header ? titleId : undefined}
+      aria-label={title && header ? title : undefined}
       aria-expanded={variant === 'card' ? isExpanded : undefined}
       tabindex="-1"
       onpointerdown={variant === 'full' &&
@@ -1388,7 +1402,7 @@
         {#if variant === 'card' && resolvedCardConfig.showDragHandle}
           <div
             class="absolute top-1.5 left-1/2 -translate-x-1/2 w-10 h-1.5 rounded-full bg-muted-foreground/30 cursor-pointer touch-none"
-            onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && handleToggleExpand()}
+            onkeydown={handleCardToggleKeyDown}
             onpointerdown={handleCardHeaderPointerDown}
             role="button"
             tabindex="0"
@@ -1399,7 +1413,7 @@
         {#if variant === 'card'}
           <div
             class="flex-1 min-w-0"
-            onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && handleToggleExpand()}
+            onkeydown={handleCardToggleKeyDown}
             role="button"
             tabindex="0"
           >
@@ -1410,7 +1424,7 @@
                 <p class="text-sm text-muted-foreground truncate">{subtitle}</p>
               {/if}
               {#if title}
-                <h3 id="data-panel-title" class="text-lg font-semibold truncate">{title}</h3>
+                <h3 id={titleId} class="text-lg font-semibold truncate">{title}</h3>
               {/if}
             {/if}
           </div>
@@ -1423,7 +1437,7 @@
                 <p class="text-sm text-muted-foreground truncate">{subtitle}</p>
               {/if}
               {#if title}
-                <h3 id="data-panel-title" class="text-lg font-semibold truncate">{title}</h3>
+                <h3 id={titleId} class="text-lg font-semibold truncate">{title}</h3>
               {/if}
             {/if}
           </div>

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

@@ -134,14 +134,15 @@
     document.getElementById(optionId(selectedIndex))?.scrollIntoView?.({ block: 'nearest' });
   });
 
-  // Keyboard shortcut handler
+  // Keyboard shortcut handler. Not registered while disabled, so the browser's
+  // own Ctrl+K stays usable and no hidden open is queued for later.
   $effect(() => {
-    if (!enableShortcut || typeof window === 'undefined') return;
+    if (!enabled || !enableShortcut || typeof window === 'undefined') return;
 
     const handleKeydown = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcutKey) {
         e.preventDefault();
-        open = true;
+        setOpen(true);
       }
     };
 
@@ -193,17 +194,24 @@
 
   function handleSelect(item: SearchResultItem) {
     onSelect?.(item);
-    open = false;
-    query = '';
+    setOpen(false);
   }
 
-  function handleOpenChange(isOpen: boolean) {
+  /**
+   * Every open/close goes through here. bits-ui only reports its own
+   * (Escape, outside click) changes, so the triggers, shortcut and selection
+   * must notify `onOpenChange` themselves.
+   */
+  function setOpen(isOpen: boolean) {
+    if (open === isOpen) return;
     open = isOpen;
-    onOpenChange?.(isOpen);
     if (!isOpen) {
       query = '';
       selectedIndex = 0;
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = null;
     }
+    onOpenChange?.(isOpen);
   }
 </script>
 
@@ -213,7 +221,7 @@
     <!-- Icon-only variant -->
     <button
       type="button"
-      onclick={() => (open = true)}
+      onclick={() => setOpen(true)}
       class={cn(
         'inline-flex items-center justify-center rounded-md border border-input bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
         size === 'sm' ? 'h-8 w-8' : 'h-9 w-9',
@@ -235,7 +243,7 @@
     <!-- Default full search box variant -->
     <button
       type="button"
-      onclick={() => (open = true)}
+      onclick={() => setOpen(true)}
       class={cn(
         'flex items-center gap-2 rounded-md border border-input bg-background px-3 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
         size === 'sm' ? 'h-8' : 'h-9',
@@ -263,7 +271,7 @@
   {/if}
 
   <!-- Search Dialog -->
-  <DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
+  <DialogPrimitive.Root {open} onOpenChange={setOpen}>
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
         class="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"

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);
   }