@classic-homes/theme-svelte 1.25.1 → 1.27.1

package/dist/lib/components/SkipLink.svelte

@@ -18,15 +18,20 @@
      * Content of the skip link. Defaults to "Skip to main content".
      */
     children?: Snippet;
+    /** Runs before the skip; `preventDefault()` cancels the focus move */
+    onclick?: (e: MouseEvent) => void;
     /**
      * Additional attributes
      */
     [key: string]: unknown;
   }
 
-  let { targetId, class: className, children, ...restProps }: Props = $props();
+  let { targetId, class: className, children, onclick, ...restProps }: Props = $props();
 
   function handleClick(e: MouseEvent) {
+    // A consumer onclick is chained, not spread over this handler
+    onclick?.(e);
+    if (e.defaultPrevented) return;
     e.preventDefault();
     const target = document.getElementById(targetId);
     if (target) {
@@ -58,7 +63,7 @@
     ...
   </main>
 -->
-<a href={`#${targetId}`} class={cn('skip-link', className)} onclick={handleClick} {...restProps}>
+<a href={`#${targetId}`} class={cn('skip-link', className)} {...restProps} onclick={handleClick}>
   {#if children}
     {@render children()}
   {:else}

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

@@ -15,6 +15,8 @@ interface Props {
      * Content of the skip link. Defaults to "Skip to main content".
      */
     children?: Snippet;
+    /** Runs before the skip; `preventDefault()` cancels the focus move */
+    onclick?: (e: MouseEvent) => void;
     /**
      * Additional attributes
      */

package/dist/lib/components/Slider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Slider as SliderPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
-  import { generateId, computeDescribedBy } from '../utils/form.js';
+  import { computeDescribedBy } from '../utils/form.js';
   import { tv, type VariantProps } from 'tailwind-variants';
   import Label from './Label.svelte';
 
@@ -88,9 +88,9 @@
     class: className,
   }: Props = $props();
 
-  // Generate unique IDs for accessibility
-  const randomSuffix = generateId('slider').split('-').pop();
-  const componentId = $derived(`slider-${randomSuffix}`);
+  // Generate unique IDs for accessibility ($props.id() is SSR-stable)
+  const uid = $props.id();
+  const componentId = $derived(`slider-${uid}`);
   const hintId = $derived(`${componentId}-hint`);
   const errorId = $derived(`${componentId}-error`);
 

package/dist/lib/components/Toast.svelte

@@ -2,6 +2,7 @@
   import type { Snippet } from 'svelte';
   import { fly } from 'svelte/transition';
   import { cn } from '../utils.js';
+  import { useReducedMotion } from '../composables/useReducedMotion.svelte.js';
   import { tv, type VariantProps } from 'tailwind-variants';
 
   type ToastType = 'success' | 'error' | 'warning' | 'info';
@@ -63,10 +64,19 @@
   }: Props = $props();
 
   const classes = $derived(cn(toastVariants({ type }), className));
+
+  // Svelte transitions run as Web Animations, which the CSS reduced-motion
+  // override does not reach, so gate the fly here
+  const reducedMotion = useReducedMotion();
   const toastType = $derived(type as ToastType);
 </script>
 
-<div class={classes} role="alert" transition:fly={{ y: 50, duration: 300 }} {...restProps}>
+<div
+  class={classes}
+  role="alert"
+  transition:fly={{ y: reducedMotion.value ? 0 : 50, duration: reducedMotion.value ? 0 : 300 }}
+  {...restProps}
+>
   <svg
     class="h-5 w-5 flex-shrink-0 {iconColors[toastType]}"
     fill="none"

package/dist/lib/components/ToastContainer.svelte

@@ -30,27 +30,41 @@
   const stackOrder = $derived(position.startsWith('bottom') ? 'flex-col' : 'flex-col-reverse');
 </script>
 
-{#if toastStore.toasts.length > 0}
-  <div
-    class={cn(
-      'fixed z-50 flex w-full max-w-sm gap-2 pointer-events-none',
-      stackOrder,
-      positionClasses[position],
-      className
-    )}
-    aria-live="polite"
-    aria-atomic="true"
-    {...restProps}
-  >
-    {#each toastStore.toasts as toast (toast.id)}
-      <div class="pointer-events-auto">
-        <Toast
-          type={toast.type}
-          title={toast.title}
-          message={toast.message}
-          onclose={() => toastStore.remove(toast.id)}
-        />
-      </div>
-    {/each}
-  </div>
-{/if}
+<!-- The live region is always mounted: one that appears together with its
+     first toast is not announced. Only additions are read, not the whole stack
+     again. Errors are role="alert" (assertive); the rest are read politely. -->
+<div
+  class={cn(
+    'fixed z-50 flex w-full max-w-sm gap-2 pointer-events-none',
+    stackOrder,
+    positionClasses[position],
+    className
+  )}
+  role="region"
+  aria-live="polite"
+  aria-relevant="additions text"
+  aria-label="Notifications"
+  {...restProps}
+>
+  {#each toastStore.toasts as toast (toast.id)}
+    <!-- Hover or focus holds the auto-dismiss timer (WCAG 2.2.1) -->
+    <div
+      class="pointer-events-auto"
+      role="presentation"
+      onmouseenter={() => toastStore.pause(toast.id)}
+      onmouseleave={() => toastStore.resume(toast.id)}
+      onfocusin={() => toastStore.pause(toast.id)}
+      onfocusout={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) toastStore.resume(toast.id);
+      }}
+    >
+      <Toast
+        type={toast.type}
+        title={toast.title}
+        message={toast.message}
+        role={toast.type === 'error' ? 'alert' : undefined}
+        onclose={() => toastStore.remove(toast.id)}
+      />
+    </div>
+  {/each}
+</div>

package/dist/lib/components/Tooltip.svelte

@@ -2,6 +2,7 @@
   import { Tooltip as TooltipPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
   import type { Snippet } from 'svelte';
+  import TriggerChild, { type TriggerSnippetProps } from './internal/TriggerChild.svelte';
 
   interface Props {
     /** Content to display in the tooltip */
@@ -14,8 +15,13 @@
     delayDuration?: number;
     /** Additional class for tooltip content */
     class?: string;
-    /** Trigger element */
-    children: Snippet;
+    /**
+     * Trigger element. It receives `{ props }`: spread them on your own
+     * focusable element (`<Button {...props}>`) so it is the one that opens
+     * and is described by the tooltip. A snippet that ignores them still
+     * works, wrapped in a focusable span as before.
+     */
+    children: Snippet<[TriggerSnippetProps]>;
   }
 
   let {
@@ -26,15 +32,22 @@
     class: className,
     children,
   }: Props = $props();
+
+  const uid = $props.id();
+  // Changes once if the trigger snippet ignores its props (see TriggerChild)
+  let triggerId = $state(`${uid}-trigger`);
 </script>
 
 <TooltipPrimitive.Provider>
   <TooltipPrimitive.Root {delayDuration}>
-    <TooltipPrimitive.Trigger>
+    <TooltipPrimitive.Trigger id={triggerId}>
       {#snippet child({ props })}
-        <span {...props} class="inline-flex">
-          {@render children()}
-        </span>
+        <TriggerChild
+          {props}
+          trigger={children}
+          fallbackClass="inline-flex"
+          onfallback={() => (triggerId = `${uid}-trigger-wrap`)}
+        />
       {/snippet}
     </TooltipPrimitive.Trigger>
     <TooltipPrimitive.Portal>

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { type TriggerSnippetProps } from './internal/TriggerChild.svelte';
 interface Props {
     /** Content to display in the tooltip */
     content: string;
@@ -10,8 +11,13 @@ interface Props {
     delayDuration?: number;
     /** Additional class for tooltip content */
     class?: string;
-    /** Trigger element */
-    children: Snippet;
+    /**
+     * Trigger element. It receives `{ props }`: spread them on your own
+     * focusable element (`<Button {...props}>`) so it is the one that opens
+     * and is described by the tooltip. A snippet that ignores them still
+     * works, wrapped in a focusable span as before.
+     */
+    children: Snippet<[TriggerSnippetProps]>;
 }
 declare const Tooltip: import("svelte").Component<Props, {}, "">;
 type Tooltip = ReturnType<typeof Tooltip>;

package/dist/lib/components/data-table/DataTableColumnFilter.svelte

@@ -45,7 +45,9 @@
   // Sync with external filter changes (controlled mode)
   // This also handles initial value synchronization
   $effect(() => {
-    const externalFilter = table.columnFilters.get(columnId) ?? '';
+    const raw = table.columnFilters.get(columnId);
+    // A faceted (array) filter has no text form; leave the input empty
+    const externalFilter = typeof raw === 'string' ? raw : '';
     // Only sync if not currently typing (debounce timer not active)
     // Always sync on first run to get initial value
     if (!isInitialized || (!debounceTimer && externalFilter !== inputValue)) {

package/dist/lib/components/data-table/DataTableEditableCell.svelte

@@ -3,7 +3,9 @@
    * DataTableEditableCell - Inline editable cell component
    *
    * Allows users to edit cell values in place.
-   * Supports text, number, and select inputs.
+   * Numeric cells (a number value, or `meta.editType: 'number'`) get a number
+   * input and save a number (or null when emptied); other cells save a string.
+   * `onSave` only fires when the value actually changed.
    * Works with the native Svelte 5 DataTable implementation.
    */
   import { tick } from 'svelte';
@@ -28,6 +30,10 @@
   const meta = $derived(column.meta as Record<string, unknown> | undefined);
   const isEditable = $derived(column.enableEditing === true || meta?.enableEditing === true);
 
+  const isNumeric = $derived(
+    meta?.editType === 'number' || typeof getColumnValue(row.original, column) === 'number'
+  );
+
   let isEditing = $state(false);
   let editValue = $state<string>('');
   let buttonEl = $state<HTMLButtonElement | null>(null);
@@ -61,10 +67,26 @@
     isEditing = true;
   }
 
+  /** The edited text as the column's type; undefined when it is not valid. */
+  function parseEditValue(): unknown {
+    if (!isNumeric) return editValue;
+    if (!editValue.trim()) return null;
+    const n = Number(editValue);
+    return Number.isFinite(n) ? n : undefined;
+  }
+
   function saveEdit() {
     if (!isEditing) return;
-    onSave(row.id, column.id, editValue, row.original);
     isEditing = false;
+    const original = getColumnValue(row.original, column);
+    const next = parseEditValue();
+    // Invalid input keeps the old value; an unchanged one is not a save
+    if (next === undefined) return;
+    const unchanged = isNumeric
+      ? Object.is(next, original ?? null)
+      : next === String(original ?? '');
+    if (unchanged) return;
+    onSave(row.id, column.id, next, row.original);
   }
 
   function cancelEdit() {
@@ -107,7 +129,7 @@
   <div class={cn('relative w-full', className)}>
     <input
       use:autofocus
-      type="text"
+      type={isNumeric ? 'number' : 'text'}
       value={editValue}
       oninput={(e: Event) => (editValue = (e.target as HTMLInputElement).value)}
       onkeydown={handleKeydown}

package/dist/lib/components/data-table/DataTableFacetedFilter.svelte

@@ -2,17 +2,18 @@
   /**
    * DataTableFacetedFilter - Multi-select filter for categorical columns
    *
-   * Allows filtering by selecting multiple values from a list.
-   * Works with the native Svelte 5 DataTable implementation.
+   * Allows filtering by selecting multiple values from a list. The column
+   * filter is stored as a string[] and matched exactly, so "active" never
+   * matches "inactive". A legacy comma-separated string is still read.
    *
-   * Note: This component manages its own filter state independently,
-   * suitable for use cases where you want faceted filtering separate
-   * from the main table's column filter state.
+   * The options open in a Bits UI popover; each option is a single
+   * `role="checkbox"` button (no nested controls).
    */
+  import { Popover } from 'bits-ui';
   import type { DataTableInstance } from './createDataTable.svelte.js';
   import Button from '../Button.svelte';
   import Badge from '../Badge.svelte';
-  import Checkbox from '../Checkbox.svelte';
+  import { buttonVariants } from '../button-variants.js';
   import { cn } from '../../utils.js';
 
   interface FilterOption {
@@ -36,11 +37,12 @@
 
   let { table, columnId, title, options, class: className }: Props = $props();
 
-  // Get current selected values from column filter
+  // Current selected values from the column filter
   const selectedValues = $derived.by(() => {
     const filterValue = table.columnFilters.get(columnId);
     if (!filterValue) return new Set<string>();
-    // Parse comma-separated values if that's how we store them
+    if (Array.isArray(filterValue)) return new Set(filterValue);
+    // Legacy: comma-separated string
     return new Set(filterValue.split(',').filter(Boolean));
   });
 
@@ -53,34 +55,19 @@
     } else {
       newValues.add(value);
     }
-    // Store as comma-separated string
-    table.setColumnFilter(columnId, Array.from(newValues).join(','));
+    table.setColumnFilter(columnId, Array.from(newValues));
   }
 
   function clearAll() {
-    table.setColumnFilter(columnId, '');
-  }
-
-  function handleClickOutside(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-    if (!target.closest('.faceted-filter-container')) {
-      isOpen = false;
-    }
+    table.setColumnFilter(columnId, []);
   }
 
   const selectedCount = $derived(selectedValues.size);
 </script>
 
-<svelte:window onclick={isOpen ? handleClickOutside : undefined} />
-
-<div class={cn('faceted-filter-container relative', className)}>
-  <Button
-    variant="outline"
-    size="sm"
-    class="border-dashed"
-    onclick={() => (isOpen = !isOpen)}
-    aria-expanded={isOpen}
-    aria-haspopup="listbox"
+<Popover.Root bind:open={isOpen}>
+  <Popover.Trigger
+    class={cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'border-dashed', className)}
     aria-label={`Filter by ${title}`}
   >
     <svg
@@ -103,23 +90,46 @@
         {selectedCount}
       </Badge>
     {/if}
-  </Button>
-
-  {#if isOpen}
-    <div
-      class="absolute left-0 top-full z-50 mt-2 min-w-[200px] rounded-md border border-black bg-popover p-2 shadow-md"
+  </Popover.Trigger>
+  <Popover.Portal>
+    <Popover.Content
+      align="start"
+      sideOffset={8}
+      collisionPadding={8}
+      class="z-50 min-w-[200px] rounded-md border bg-popover p-2 text-popover-foreground shadow-md"
     >
-      <div class="space-y-1">
+      <div class="space-y-1" role="group" aria-label={title}>
         {#each options as option (option.value)}
+          {@const checked = selectedValues.has(option.value)}
           <button
             type="button"
+            role="checkbox"
+            aria-checked={checked}
             class={cn(
-              'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent',
-              selectedValues.has(option.value) && 'bg-accent'
+              'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              checked && 'bg-accent'
             )}
             onclick={() => toggleOption(option.value)}
           >
-            <Checkbox checked={selectedValues.has(option.value)} />
+            <span
+              class={cn(
+                'flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-primary',
+                checked && 'bg-primary text-primary-foreground'
+              )}
+              aria-hidden="true"
+            >
+              {#if checked}
+                <svg
+                  class="h-3 w-3"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="3"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                </svg>
+              {/if}
+            </span>
             <span class="flex-1 text-left">{option.label}</span>
             {#if option.count !== undefined}
               <span class="text-muted-foreground">{option.count}</span>
@@ -133,6 +143,6 @@
           <Button variant="ghost" size="sm" class="w-full" onclick={clearAll}>Clear filters</Button>
         </div>
       {/if}
-    </div>
-  {/if}
-</div>
+    </Popover.Content>
+  </Popover.Portal>
+</Popover.Root>

package/dist/lib/components/data-table/DataTableFacetedFilter.svelte.d.ts

@@ -1,13 +1,3 @@
-/**
-   * DataTableFacetedFilter - Multi-select filter for categorical columns
-   *
-   * Allows filtering by selecting multiple values from a list.
-   * Works with the native Svelte 5 DataTable implementation.
-   *
-   * Note: This component manages its own filter state independently,
-   * suitable for use cases where you want faceted filtering separate
-   * from the main table's column filter state.
-   */
 import type { DataTableInstance } from './createDataTable.svelte.js';
 declare function $$render<TData extends object>(): {
     props: {