@classic-homes/theme-svelte 0.1.54 → 0.1.56

package/dist/__tests__/FileUpload.test.js

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import FileUpload from '../lib/components/FileUpload.svelte';
+describe('FileUpload accepted-types label', () => {
+    it('derives a friendly label from MIME types instead of showing raw values', () => {
+        render(FileUpload, {
+            props: {
+                label: 'Upload files',
+                acceptedTypes: [
+                    'image/jpeg',
+                    'image/png',
+                    'application/pdf',
+                    'video/mp4',
+                    'video/quicktime',
+                ],
+            },
+        });
+        expect(screen.getByText(/Images, PDF, Videos \(max/)).toBeInTheDocument();
+        // Raw MIME types should not be shown
+        expect(screen.queryByText(/image\/jpeg/)).not.toBeInTheDocument();
+    });
+    it('uses the default accepted types (Images, PDF) when none are provided', () => {
+        render(FileUpload, { props: { label: 'Upload files' } });
+        expect(screen.getByText(/^Images, PDF \(max/)).toBeInTheDocument();
+    });
+    it('respects an explicit typesLabel override', () => {
+        render(FileUpload, {
+            props: {
+                label: 'Upload files',
+                acceptedTypes: ['image/png', 'video/mp4'],
+                typesLabel: 'Photos and clips',
+            },
+        });
+        expect(screen.getByText(/^Photos and clips \(max/)).toBeInTheDocument();
+    });
+    it('falls back to the uppercased subtype for unmapped types', () => {
+        render(FileUpload, {
+            props: {
+                label: 'Upload files',
+                acceptedTypes: ['application/zip'],
+            },
+        });
+        expect(screen.getByText(/^ZIP \(max/)).toBeInTheDocument();
+    });
+});

package/dist/lib/components/Button.svelte

@@ -110,7 +110,23 @@
 {/snippet}
 
 {#if href}
-  <a {href} class={classes} {...restProps}>
+  <!-- Anchors can't be natively disabled: remove from tab order, expose
+       aria-disabled, drop the href, and block clicks when disabled/loading -->
+  <a
+    href={disabled || loading ? undefined : href}
+    class={classes}
+    aria-disabled={disabled || loading || undefined}
+    aria-busy={loading || undefined}
+    tabindex={disabled || loading ? -1 : undefined}
+    onclick={(e) => {
+      if (disabled || loading) {
+        e.preventDefault();
+        return;
+      }
+      onclick?.(e);
+    }}
+    {...restProps}
+  >
     {@render buttonContent()}
   </a>
 {:else}

package/dist/lib/components/Checkbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { Checkbox as CheckboxPrimitive } from 'bits-ui';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
 
   interface Props {
     checked?: boolean;
@@ -32,7 +32,8 @@
   }: Props = $props();
 
   // Generate a stable unique ID if none provided (for accessibility)
-  const generatedId = useId('checkbox');
+  const uid = $props.id();
+  const generatedId = `checkbox-${uid}`;
   const effectiveId = $derived(id ?? generatedId);
 
   function handleCheckedChange(newChecked: boolean | 'indeterminate') {

package/dist/lib/components/Combobox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Combobox as ComboboxPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
-  import { generateId, computeDescribedBy } from '../utils/form.js';
+  import { computeDescribedBy } from '../utils/form.js';
   import Spinner from './Spinner.svelte';
   import Label from './Label.svelte';
   import LiveRegion from './LiveRegion.svelte';
@@ -66,9 +66,9 @@
     class: className,
   }: Props = $props();
 
-  // Generate unique IDs for accessibility
-  const randomSuffix = generateId('combobox').split('-').pop();
-  const componentId = $derived(id || `combobox-${randomSuffix}`);
+  // Generate unique IDs for accessibility ($props.id() is SSR-stable)
+  const uid = $props.id();
+  const componentId = $derived(id || `combobox-${uid}`);
   const hintId = $derived(`${componentId}-hint`);
   const errorId = $derived(`${componentId}-error`);
 

package/dist/lib/components/DataPanel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { cn } from '../utils.js';
-  import { onMount } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import type { Snippet } from 'svelte';
   import type {
     PanelEdge,
@@ -222,11 +222,13 @@
     }
 
     saveTimeout = setTimeout(() => {
+      // Persist the resolved values so controlled mode saves what's shown,
+      // not the untouched internal defaults
       savePanelState(persistKey, {
-        mode: internalMode,
-        variant: internalVariant,
-        edge: internalEdge,
-        isExpanded: internalExpanded,
+        mode,
+        variant,
+        edge,
+        isExpanded,
         detachedPosition,
         detachedSize,
         pinnedSize,
@@ -236,6 +238,10 @@
     }, 300);
   }
 
+  onDestroy(() => {
+    if (saveTimeout) clearTimeout(saveTimeout);
+  });
+
   // Initialize from persistence on mount
   onMount(() => {
     // Update viewport dimensions

package/dist/lib/components/DateTimePicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Popover, Calendar } from 'bits-ui';
   import { tick } from 'svelte';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
   import { parseDate, toISOString, parseDateInput } from '../utils/date.js';
   import Label from './Label.svelte';
 
@@ -69,7 +69,8 @@
   }: Props = $props();
 
   // Generate unique IDs for accessibility using sequential counter
-  const generatedId = useId('datetimepicker');
+  const uid = $props.id();
+  const generatedId = `datetimepicker-${uid}`;
   const componentId = $derived(id || generatedId);
   const hintId = $derived(`${componentId}-hint`);
   const errorId = $derived(`${componentId}-error`);

package/dist/lib/components/FileUpload.svelte

@@ -12,7 +12,7 @@
    * - Accessible with keyboard navigation
    */
   import type { FileMetadata } from '../types/components.js';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
   import Button from './Button.svelte';
 
   interface Props {
@@ -38,11 +38,18 @@
     label?: string;
     /** Hint text shown below the drop zone */
     hint?: string;
+    /**
+     * Human-friendly label for the accepted file types shown in the drop zone.
+     * When omitted, a readable label is derived from `acceptedTypes`
+     * (e.g. "Images, PDF, Videos") instead of showing raw MIME types.
+     */
+    typesLabel?: string;
     /** Additional classes */
     class?: string;
   }
 
-  const generatedId = useId('file-upload');
+  const uid = $props.id();
+  const generatedId = `file-upload-${uid}`;
 
   let {
     id = generatedId,
@@ -56,6 +63,7 @@
     onUpload,
     label,
     hint,
+    typesLabel,
     class: className,
   }: Props = $props();
 
@@ -68,6 +76,33 @@
 
   const displayError = $derived(externalError || internalError);
 
+  /**
+   * Readable label for the accepted types shown in the drop zone.
+   * Uses the explicit `typesLabel` when provided, otherwise groups the
+   * accepted MIME types into friendly names (Images, PDF, Videos, ...).
+   */
+  const acceptedTypesLabel = $derived.by(() => {
+    if (typesLabel) return typesLabel;
+
+    const groups: string[] = [];
+    const add = (name: string) => {
+      if (!groups.includes(name)) groups.push(name);
+    };
+
+    for (const type of acceptedTypes) {
+      if (type.startsWith('image/')) add('Images');
+      else if (type === 'application/pdf') add('PDF');
+      else if (type.startsWith('video/')) add('Videos');
+      else if (type.startsWith('audio/')) add('Audio');
+      else {
+        const subtype = type.split('/')[1];
+        add(subtype ? subtype.toUpperCase() : type);
+      }
+    }
+
+    return groups.join(', ');
+  });
+
   // Helper to generate unique ID
   function generateId(): string {
     return `file-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
@@ -302,7 +337,7 @@
     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 transition-colors',
+      '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',
       isDragging && !disabled && 'border-primary bg-primary/5',
       disabled && 'cursor-not-allowed opacity-50',
@@ -337,7 +372,7 @@
       <span class="font-medium text-foreground">Click to upload</span> or drag and drop
     </p>
     <p class="mt-1 text-xs text-muted-foreground">
-      {acceptedTypes.join(', ')} (max {formatSize(maxSizeBytes)})
+      {acceptedTypesLabel} (max {formatSize(maxSizeBytes)})
     </p>
 
     <!-- Hidden file input -->

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

@@ -34,6 +34,12 @@ interface Props {
     label?: string;
     /** Hint text shown below the drop zone */
     hint?: string;
+    /**
+     * Human-friendly label for the accepted file types shown in the drop zone.
+     * When omitted, a readable label is derived from `acceptedTypes`
+     * (e.g. "Images, PDF, Videos") instead of showing raw MIME types.
+     */
+    typesLabel?: string;
     /** Additional classes */
     class?: string;
 }

package/dist/lib/components/HeaderSearch.svelte

@@ -25,6 +25,7 @@
    * ```
    */
   import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { onDestroy } from 'svelte';
   import { cn } from '../utils.js';
   import type { Snippet } from 'svelte';
   import type { SearchResultItem, SearchResultGroup } from '../types/layout.js';
@@ -131,6 +132,10 @@
     }, 200);
   }
 
+  onDestroy(() => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+  });
+
   // Keyboard navigation within results
   function handleKeydown(e: KeyboardEvent) {
     switch (e.key) {

package/dist/lib/components/RadioGroup.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
   import { computeDescribedBy } from '../utils/form.js';
   import { validateNonEmptyArray } from '../validation.js';
   import Label from './Label.svelte';
@@ -52,7 +52,8 @@
   }: Props = $props();
 
   // Generate unique IDs for accessibility (sequential counter, SSR-safe)
-  const generatedId = useId('radio-group');
+  const uid = $props.id();
+  const generatedId = `radio-group-${uid}`;
   const componentName = $derived(name || generatedId);
   const labelId = $derived(`${componentName}-label`);
   const hintId = $derived(`${componentName}-hint`);

package/dist/lib/components/Select.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Select as SelectPrimitive } from 'bits-ui';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
   import { validateNonEmptyArray } from '../validation.js';
   import { DEV } from 'esm-env';
   import Label from './Label.svelte';
@@ -59,7 +59,8 @@
   }: Props = $props();
 
   // Generate unique IDs for accessibility using sequential counter
-  const generatedId = useId('select');
+  const uid = $props.id();
+  const generatedId = `select-${uid}`;
   const componentId = $derived(id || generatedId);
   const hintId = $derived(`${componentId}-hint`);
   const errorId = $derived(`${componentId}-error`);

package/dist/lib/components/Signature.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { untrack } from 'svelte';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
   import { tv, type VariantProps } from 'tailwind-variants';
   import type {
     SignatureData,
@@ -842,7 +842,8 @@
   });
 
   // Computed IDs (using stable sequential ID generation)
-  const generatedInputId = useId('signature');
+  const uid = $props.id();
+  const generatedInputId = `signature-${uid}`;
   const inputId = $derived(id || generatedInputId);
   const errorId = $derived(`${inputId}-error`);
   const hintId = $derived(`${inputId}-hint`);

package/dist/lib/components/Tabs.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { setContext } from 'svelte';
-  import { cn, useId } from '../utils.js';
+  import { cn } from '../utils.js';
   import type { Tab } from '../types/components.js';
 
   interface Props {
@@ -25,7 +25,8 @@
     onValueChange?: (value: string) => void;
   }
 
-  const generatedId = useId('tabs');
+  const uid = $props.id();
+  const generatedId = `tabs-${uid}`;
 
   let {
     tabs,

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TData extends object">
   /**
    * DataTableColumnFilter - Per-column text filter input
    *
@@ -12,7 +12,7 @@
 
   interface Props {
     /** The native DataTable instance */
-    table: DataTableInstance<any>;
+    table: DataTableInstance<TData>;
     /** Column ID to filter */
     columnId: string;
     /** Placeholder text */

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

@@ -5,18 +5,38 @@
    * Works with the native Svelte 5 DataTable implementation.
    */
 import type { DataTableInstance } from './createDataTable.svelte.js';
-interface Props {
-    /** The native DataTable instance */
-    table: DataTableInstance<any>;
-    /** Column ID to filter */
-    columnId: string;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Debounce delay in ms */
-    debounceMs?: number;
-    /** Additional classes */
-    class?: string;
+declare function $$render<TData extends object>(): {
+    props: {
+        /** The native DataTable instance */
+        table: DataTableInstance<TData>;
+        /** Column ID to filter */
+        columnId: string;
+        /** Placeholder text */
+        placeholder?: string;
+        /** Debounce delay in ms */
+        debounceMs?: number;
+        /** Additional classes */
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends object> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-declare const DataTableColumnFilter: import("svelte").Component<Props, {}, "">;
-type DataTableColumnFilter = ReturnType<typeof DataTableColumnFilter>;
+interface $$IsomorphicComponent {
+    new <TData extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends object>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableColumnFilter: $$IsomorphicComponent;
+type DataTableColumnFilter<TData extends object> = InstanceType<typeof DataTableColumnFilter<TData>>;
 export default DataTableColumnFilter;

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TData extends object">
   /**
    * DataTableColumnVisibility - Column visibility toggle dropdown
    *
@@ -12,7 +12,7 @@
 
   interface Props {
     /** The native DataTable instance */
-    table: DataTableInstance<any>;
+    table: DataTableInstance<TData>;
     /** Additional classes */
     class?: string;
   }

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

@@ -5,12 +5,32 @@
    * Works with the native Svelte 5 DataTable implementation.
    */
 import type { DataTableInstance } from './createDataTable.svelte.js';
-interface Props {
-    /** The native DataTable instance */
-    table: DataTableInstance<any>;
-    /** Additional classes */
-    class?: string;
+declare function $$render<TData extends object>(): {
+    props: {
+        /** The native DataTable instance */
+        table: DataTableInstance<TData>;
+        /** Additional classes */
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends object> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-declare const DataTableColumnVisibility: import("svelte").Component<Props, {}, "">;
-type DataTableColumnVisibility = ReturnType<typeof DataTableColumnVisibility>;
+interface $$IsomorphicComponent {
+    new <TData extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends object>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableColumnVisibility: $$IsomorphicComponent;
+type DataTableColumnVisibility<TData extends object> = InstanceType<typeof DataTableColumnVisibility<TData>>;
 export default DataTableColumnVisibility;

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TData extends object">
   /**
    * DataTableFacetedFilter - Multi-select filter for categorical columns
    *
@@ -23,7 +23,7 @@
 
   interface Props {
     /** The native DataTable instance */
-    table: DataTableInstance<any>;
+    table: DataTableInstance<TData>;
     /** Column ID to filter */
     columnId: string;
     /** Title for the filter */

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

@@ -9,23 +9,42 @@
    * from the main table's column filter state.
    */
 import type { DataTableInstance } from './createDataTable.svelte.js';
-interface FilterOption {
-    value: string;
-    label: string;
-    count?: number;
+declare function $$render<TData extends object>(): {
+    props: {
+        /** The native DataTable instance */
+        table: DataTableInstance<TData>;
+        /** Column ID to filter */
+        columnId: string;
+        /** Title for the filter */
+        title: string;
+        /** Available filter options */
+        options: {
+            value: string;
+            label: string;
+            count?: number;
+        }[];
+        /** Additional classes */
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends object> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-interface Props {
-    /** The native DataTable instance */
-    table: DataTableInstance<any>;
-    /** Column ID to filter */
-    columnId: string;
-    /** Title for the filter */
-    title: string;
-    /** Available filter options */
-    options: FilterOption[];
-    /** Additional classes */
-    class?: string;
+interface $$IsomorphicComponent {
+    new <TData extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends object>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const DataTableFacetedFilter: import("svelte").Component<Props, {}, "">;
-type DataTableFacetedFilter = ReturnType<typeof DataTableFacetedFilter>;
+declare const DataTableFacetedFilter: $$IsomorphicComponent;
+type DataTableFacetedFilter<TData extends object> = InstanceType<typeof DataTableFacetedFilter<TData>>;
 export default DataTableFacetedFilter;

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TData extends object">
   /**
    * DataTablePagination - Pagination controls for DataTable
    *
@@ -12,7 +12,7 @@
 
   interface Props {
     /** The native DataTable instance */
-    table: DataTableInstance<any>;
+    table: DataTableInstance<TData>;
     /** Available page sizes */
     pageSizeOptions?: number[];
     /** Show selected row count */

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

@@ -5,16 +5,36 @@
    * Works with the native Svelte 5 DataTable implementation.
    */
 import type { DataTableInstance } from './createDataTable.svelte.js';
-interface Props {
-    /** The native DataTable instance */
-    table: DataTableInstance<any>;
-    /** Available page sizes */
-    pageSizeOptions?: number[];
-    /** Show selected row count */
-    showSelectedCount?: boolean;
-    /** Additional classes */
-    class?: string;
+declare function $$render<TData extends object>(): {
+    props: {
+        /** The native DataTable instance */
+        table: DataTableInstance<TData>;
+        /** Available page sizes */
+        pageSizeOptions?: number[];
+        /** Show selected row count */
+        showSelectedCount?: boolean;
+        /** Additional classes */
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends object> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-declare const DataTablePagination: import("svelte").Component<Props, {}, "">;
-type DataTablePagination = ReturnType<typeof DataTablePagination>;
+interface $$IsomorphicComponent {
+    new <TData extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends object>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTablePagination: $$IsomorphicComponent;
+type DataTablePagination<TData extends object> = InstanceType<typeof DataTablePagination<TData>>;
 export default DataTablePagination;

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TData extends object">
   /**
    * DataTableSearch - Global search input for DataTable
    *
@@ -11,7 +11,7 @@
 
   interface Props {
     /** The native DataTable instance */
-    table: DataTableInstance<any>;
+    table: DataTableInstance<TData>;
     /** Placeholder text */
     placeholder?: string;
     /** Debounce delay in ms */

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

@@ -5,16 +5,36 @@
    * Works with the native Svelte 5 DataTable implementation.
    */
 import type { DataTableInstance } from './createDataTable.svelte.js';
-interface Props {
-    /** The native DataTable instance */
-    table: DataTableInstance<any>;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Debounce delay in ms */
-    debounceMs?: number;
-    /** Additional classes */
-    class?: string;
+declare function $$render<TData extends object>(): {
+    props: {
+        /** The native DataTable instance */
+        table: DataTableInstance<TData>;
+        /** Placeholder text */
+        placeholder?: string;
+        /** Debounce delay in ms */
+        debounceMs?: number;
+        /** Additional classes */
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends object> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-declare const DataTableSearch: import("svelte").Component<Props, {}, "">;
-type DataTableSearch = ReturnType<typeof DataTableSearch>;
+interface $$IsomorphicComponent {
+    new <TData extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends object>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableSearch: $$IsomorphicComponent;
+type DataTableSearch<TData extends object> = InstanceType<typeof DataTableSearch<TData>>;
 export default DataTableSearch;

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TData extends object">
   /**
    * DataTableToolbar - Combined toolbar with search and controls
    *
@@ -14,7 +14,7 @@
 
   interface Props {
     /** The native DataTable instance */
-    table: DataTableInstance<any>;
+    table: DataTableInstance<TData>;
     /** Show global search */
     showSearch?: boolean;
     /** Show column visibility toggle */

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

@@ -6,22 +6,42 @@
    */
 import type { Snippet } from 'svelte';
 import type { DataTableInstance } from './createDataTable.svelte.js';
-interface Props {
-    /** The native DataTable instance */
-    table: DataTableInstance<any>;
-    /** Show global search */
-    showSearch?: boolean;
-    /** Show column visibility toggle */
-    showColumnVisibility?: boolean;
-    /** Search placeholder */
-    searchPlaceholder?: string;
-    /** Custom filters slot */
-    filters?: Snippet;
-    /** Custom actions slot */
-    actions?: Snippet;
-    /** Additional classes */
-    class?: string;
+declare function $$render<TData extends object>(): {
+    props: {
+        /** The native DataTable instance */
+        table: DataTableInstance<TData>;
+        /** Show global search */
+        showSearch?: boolean;
+        /** Show column visibility toggle */
+        showColumnVisibility?: boolean;
+        /** Search placeholder */
+        searchPlaceholder?: string;
+        /** Custom filters slot */
+        filters?: Snippet;
+        /** Custom actions slot */
+        actions?: Snippet;
+        /** Additional classes */
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends object> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-declare const DataTableToolbar: import("svelte").Component<Props, {}, "">;
-type DataTableToolbar = ReturnType<typeof DataTableToolbar>;
+interface $$IsomorphicComponent {
+    new <TData extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends object>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableToolbar: $$IsomorphicComponent;
+type DataTableToolbar<TData extends object> = InstanceType<typeof DataTableToolbar<TData>>;
 export default DataTableToolbar;

package/dist/lib/composables/useAnnounce.svelte.js

@@ -28,18 +28,18 @@
 export function useAnnounce(defaultOptions) {
     let message = $state('');
     let politeness = $state(defaultOptions?.politeness ?? 'polite');
-    let clearTimeout = null;
+    let clearTimer = null;
     function clear() {
         message = '';
-        if (clearTimeout) {
-            globalThis.clearTimeout(clearTimeout);
-            clearTimeout = null;
+        if (clearTimer) {
+            clearTimeout(clearTimer);
+            clearTimer = null;
         }
     }
     function announce(newMessage, options) {
         // Clear any pending timeout
-        if (clearTimeout) {
-            globalThis.clearTimeout(clearTimeout);
+        if (clearTimer) {
+            clearTimeout(clearTimer);
         }
         // Update politeness if provided
         if (options?.politeness) {
@@ -50,7 +50,7 @@ export function useAnnounce(defaultOptions) {
         // Set up auto-clear if delay > 0
         const delay = options?.clearDelay ?? defaultOptions?.clearDelay ?? 1000;
         if (delay > 0) {
-            clearTimeout = globalThis.setTimeout(() => {
+            clearTimer = setTimeout(() => {
                 message = '';
             }, delay);
         }
@@ -58,8 +58,8 @@ export function useAnnounce(defaultOptions) {
     // Cleanup on destroy
     $effect(() => {
         return () => {
-            if (clearTimeout) {
-                globalThis.clearTimeout(clearTimeout);
+            if (clearTimer) {
+                clearTimeout(clearTimer);
             }
         };
     });

package/dist/lib/composables/useArrowNavigation.svelte.js

@@ -23,10 +23,11 @@ const DEFAULT_SELECTOR = '[role="menuitem"], [role="option"], [role="tab"], butt
  * ```
  */
 export function useArrowNavigation(options = {}) {
-    let orientation = $state(options.orientation ?? 'vertical');
-    let loop = $state(options.loop ?? true);
-    let itemSelector = $state(options.itemSelector ?? DEFAULT_SELECTOR);
-    let onFocusChange = $state(options.onFocusChange);
+    // Plain locals: only read imperatively (handlers/action update), never tracked
+    let orientation = options.orientation ?? 'vertical';
+    let loop = options.loop ?? true;
+    let itemSelector = options.itemSelector ?? DEFAULT_SELECTOR;
+    let onFocusChange = options.onFocusChange;
     let container = null;
     let focusedIndex = $state(-1);
     function getFocusableItems() {

package/dist/lib/composables/useEscapeKey.svelte.d.ts

@@ -5,9 +5,11 @@ export interface UseEscapeKeyOptions {
     /**
      * Whether the escape key handler is enabled.
      * Useful for conditionally enabling based on component state (e.g., dialog open).
+     * Pass a getter (`() => isOpen`) for a value that should stay reactive —
+     * a plain boolean is captured once when the composable is called.
      * Default: true
      */
-    enabled?: boolean;
+    enabled?: boolean | (() => boolean);
     /**
      * Whether to prevent default behavior when Escape is pressed.
      * Default: true
@@ -37,7 +39,7 @@ export interface UseEscapeKeyOptions {
  *   useEscapeKey(() => {
  *     isOpen = false;
  *     onClose?.();
- *   }, { enabled: isOpen });
+ *   }, { enabled: () => isOpen });
  * </script>
  *
  * {#if isOpen}

package/dist/lib/composables/useEscapeKey.svelte.js

@@ -16,7 +16,7 @@
  *   useEscapeKey(() => {
  *     isOpen = false;
  *     onClose?.();
- *   }, { enabled: isOpen });
+ *   }, { enabled: () => isOpen });
  * </script>
  *
  * {#if isOpen}
@@ -25,10 +25,11 @@
  * ```
  */
 export function useEscapeKey(callback, options) {
-    const enabled = $derived(options?.enabled ?? true);
     const preventDefault = options?.preventDefault ?? true;
     const stopPropagation = options?.stopPropagation ?? false;
     $effect(() => {
+        // Resolve inside the effect so a getter's reactive reads are tracked
+        const enabled = typeof options?.enabled === 'function' ? options.enabled() : (options?.enabled ?? true);
         if (!enabled)
             return;
         function handleKeyDown(event) {

package/dist/lib/composables/useFocusRef.svelte.js

@@ -27,9 +27,10 @@
  * ```
  */
 export function useFocusRef(options = {}) {
-    let focusOnMount = $state(options.focusOnMount ?? false);
-    let preventScroll = $state(options.preventScroll ?? false);
-    let delay = $state(options.delay ?? 0);
+    // Plain locals: only read imperatively (action lifecycle), never tracked
+    let focusOnMount = options.focusOnMount ?? false;
+    let preventScroll = options.preventScroll ?? false;
+    let delay = options.delay ?? 0;
     let element = null;
     let timeoutId = null;
     let frameId = null;

package/dist/lib/composables/useFocusTrap.svelte.d.ts

@@ -1,6 +1,10 @@
 export interface UseFocusTrapOptions {
-    /** Whether the focus trap is active */
-    active?: boolean;
+    /**
+     * Whether the focus trap is active.
+     * Pass a getter (`() => isOpen`) for a value that should stay reactive —
+     * a plain boolean is captured once when the composable is called.
+     */
+    active?: boolean | (() => boolean);
     /** Element to return focus to when trap is deactivated */
     returnFocusTo?: HTMLElement | null;
     /** Selector for the element to focus initially (defaults to first focusable) */
@@ -15,12 +19,14 @@ export interface UseFocusTrapOptions {
  * focusable elements without escaping. Useful for modals, dialogs,
  * and dropdown menus.
  *
+ * Must be called during component initialization (it registers a `$effect`).
+ *
  * @example
  * ```svelte
  * <script>
  *   import { useFocusTrap } from '@classic-homes/theme-svelte';
  *
- *   const { action } = useFocusTrap({ active: isOpen });
+ *   const { action } = useFocusTrap({ active: () => isOpen });
  * </script>
  *
  * {#if isOpen}

package/dist/lib/composables/useFocusTrap.svelte.js

@@ -22,12 +22,14 @@ function getFocusableElements(container) {
  * focusable elements without escaping. Useful for modals, dialogs,
  * and dropdown menus.
  *
+ * Must be called during component initialization (it registers a `$effect`).
+ *
  * @example
  * ```svelte
  * <script>
  *   import { useFocusTrap } from '@classic-homes/theme-svelte';
  *
- *   const { action } = useFocusTrap({ active: isOpen });
+ *   const { action } = useFocusTrap({ active: () => isOpen });
  * </script>
  *
  * {#if isOpen}
@@ -40,15 +42,18 @@ function getFocusableElements(container) {
  * ```
  */
 export function useFocusTrap(options = {}) {
-    let active = $state(options.active ?? true);
-    let returnFocusTo = $state(options.returnFocusTo ?? null);
-    let initialFocus = $state(options.initialFocus);
-    let preventScroll = $state(options.preventScroll ?? false);
-    let container = null;
+    let currentOptions = $state(options);
+    let container = $state(null);
     let previousActiveElement = null;
+    let trapped = false;
+    function isActive() {
+        const active = currentOptions.active;
+        return typeof active === 'function' ? active() : (active ?? true);
+    }
     function handleKeyDown(event) {
-        if (!active || event.key !== 'Tab' || !container)
+        if (!trapped || event.key !== 'Tab' || !container)
             return;
+        const preventScroll = currentOptions.preventScroll ?? false;
         const focusableElements = getFocusableElements(container);
         if (focusableElements.length === 0)
             return;
@@ -70,16 +75,18 @@ export function useFocusTrap(options = {}) {
         }
     }
     function activate() {
-        if (!container)
+        if (!container || trapped)
             return;
+        trapped = true;
         // Save current active element to return focus later
         previousActiveElement = document.activeElement;
         // Focus initial element
+        const preventScroll = currentOptions.preventScroll ?? false;
         const focusableElements = getFocusableElements(container);
         if (focusableElements.length > 0) {
             let elementToFocus = null;
-            if (initialFocus) {
-                elementToFocus = container.querySelector(initialFocus);
+            if (currentOptions.initialFocus) {
+                elementToFocus = container.querySelector(currentOptions.initialFocus);
             }
             if (!elementToFocus) {
                 elementToFocus = focusableElements[0];
@@ -91,39 +98,38 @@ export function useFocusTrap(options = {}) {
         document.addEventListener('keydown', handleKeyDown);
     }
     function deactivate() {
+        if (!trapped)
+            return;
+        trapped = false;
         document.removeEventListener('keydown', handleKeyDown);
         // Return focus when trap is deactivated
-        const elementToReturn = returnFocusTo ?? previousActiveElement;
+        const preventScroll = currentOptions.preventScroll ?? false;
+        const elementToReturn = currentOptions.returnFocusTo ?? previousActiveElement;
         if (elementToReturn && typeof elementToReturn.focus === 'function') {
             elementToReturn.focus({ preventScroll });
         }
     }
+    // Activate/deactivate as the container attaches/detaches, `active` changes
+    // (via getter or action update), or the component is destroyed.
+    $effect(() => {
+        if (container !== null && isActive()) {
+            activate();
+        }
+        else {
+            deactivate();
+        }
+    });
     /**
      * Svelte action to apply focus trap to an element
      */
     function action(node) {
         container = node;
-        if (active) {
-            activate();
-        }
         return {
             update(newOptions) {
-                const wasActive = active;
-                active = newOptions.active ?? true;
-                returnFocusTo = newOptions.returnFocusTo ?? null;
-                initialFocus = newOptions.initialFocus;
-                preventScroll = newOptions.preventScroll ?? false;
-                if (!wasActive && active) {
-                    activate();
-                }
-                else if (wasActive && !active) {
-                    deactivate();
-                }
+                currentOptions = newOptions;
             },
             destroy() {
-                if (active) {
-                    deactivate();
-                }
+                deactivate();
                 container = null;
             },
         };

package/dist/lib/composables/useRovingTabindex.svelte.js

@@ -32,10 +32,11 @@ const DEFAULT_SELECTOR = '[data-roving-tabindex-item]';
  * ```
  */
 export function useRovingTabindex(options = {}) {
-    let loop = $state(options.loop ?? true);
-    let itemSelector = $state(options.itemSelector ?? DEFAULT_SELECTOR);
+    // Plain locals: only read imperatively (handlers/action update), never tracked
+    let loop = options.loop ?? true;
+    let itemSelector = options.itemSelector ?? DEFAULT_SELECTOR;
     let activeIndex = $state(options.initialIndex ?? 0);
-    let onIndexChange = $state(options.onIndexChange);
+    let onIndexChange = options.onIndexChange;
     let container = null;
     function getItems() {
         if (!container)

package/dist/lib/utils.d.ts

@@ -4,13 +4,3 @@ import { type ClassValue } from 'clsx';
  * Uses clsx for conditional classes and tailwind-merge to handle conflicts
  */
 export declare function cn(...inputs: ClassValue[]): string;
-/**
- * Generate a unique ID with an optional prefix.
- * Uses crypto.randomUUID() to avoid SSR hydration mismatches caused by
- * sequential counters (where server and client counts can diverge).
- * The short suffix is derived from the UUID for compact, readable IDs.
- *
- * @param prefix - Optional prefix for the ID (e.g., 'checkbox', 'tabs')
- * @returns A unique ID string like 'checkbox-a1b2c3d4' or 'ct-a1b2c3d4'
- */
-export declare function useId(prefix?: string): string;

package/dist/lib/utils.js

@@ -7,16 +7,3 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
-/**
- * Generate a unique ID with an optional prefix.
- * Uses crypto.randomUUID() to avoid SSR hydration mismatches caused by
- * sequential counters (where server and client counts can diverge).
- * The short suffix is derived from the UUID for compact, readable IDs.
- *
- * @param prefix - Optional prefix for the ID (e.g., 'checkbox', 'tabs')
- * @returns A unique ID string like 'checkbox-a1b2c3d4' or 'ct-a1b2c3d4'
- */
-export function useId(prefix) {
-    const id = crypto.randomUUID().slice(0, 8);
-    return prefix ? `${prefix}-${id}` : `ct-${id}`;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "0.1.54",
+  "version": "0.1.56",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",