@classic-homes/theme-svelte 1.25.0 → 1.26.0

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

@@ -18,8 +18,7 @@
    * Create the table with `enablePagination: false` so `table.rows` holds every
    * row rather than one page.
    */
-  import type { DataTableInstance, DataTableRow } from './createDataTable.svelte.js';
-  import type { DataTableColumn } from './types.js';
+  import type { DataTableInstance } from './createDataTable.svelte.js';
   import Checkbox from '../Checkbox.svelte';
   import { cn } from '../../utils.js';
   import { getAlignClass, getColumnValue, getColumnWidthStyle, getAriaSortValue } from './utils.js';
@@ -37,6 +36,8 @@
     onRowClick?: (row: T) => void;
     /** Whether row selection is enabled */
     enableRowSelection?: boolean;
+    /** Show the select-all checkbox in the header (default: true) */
+    enableSelectAll?: boolean;
     /** Additional CSS classes */
     class?: string;
   }
@@ -48,16 +49,32 @@
     height = '500px',
     onRowClick,
     enableRowSelection = false,
+    enableSelectAll = true,
     class: className,
   }: Props = $props();
 
   let containerRef: HTMLDivElement | null = $state(null);
   let scrollTop = $state(0);
+  let measuredHeight = $state(0);
+
+  // The rendered height of the scroll body. `height` can be any CSS length
+  // (80vh, 30rem, calc(...)), so measure it rather than parse it; the parse
+  // is only a fallback before layout (or where there is none, e.g. SSR).
+  $effect(() => {
+    const node = containerRef;
+    if (!node) return;
+    measuredHeight = node.clientHeight;
+    if (typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => {
+      measuredHeight = node.clientHeight;
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  });
 
-  // Parse container height to number for calculations
   const containerHeightPx = $derived.by(() => {
-    if (!height) return 500;
-    const num = parseInt(height, 10);
+    if (measuredHeight > 0) return measuredHeight;
+    const num = parseInt(height ?? '', 10);
     return isNaN(num) ? 500 : num;
   });
 
@@ -104,63 +121,96 @@
     if (!sortable) return;
     table.toggleSort(columnId);
   }
+
+  function handleHeaderKeydown(e: KeyboardEvent, columnId: string, sortable: boolean | undefined) {
+    if (!sortable || (e.key !== 'Enter' && e.key !== ' ')) return;
+    // Space would otherwise scroll the page
+    e.preventDefault();
+    handleHeaderClick(columnId, sortable);
+  }
+
+  // Ignore keys aimed at the row's own controls (the checkbox handles its
+  // own Enter/Space).
+  function handleRowKeydown(e: KeyboardEvent, row: T) {
+    if (e.target !== e.currentTarget) return;
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    handleRowClick(row);
+  }
 </script>
 
-<div class={cn('rounded-md border', className)}>
+<!-- Only a window of rows is in the DOM, so aria-rowcount/aria-rowindex
+     give assistive tech the real size and position (header is row 1). -->
+<div
+  class={cn('rounded-md border', className)}
+  role="table"
+  aria-rowcount={allRows.length + 1}
+  aria-colcount={table.columns.length + (enableRowSelection ? 1 : 0)}
+>
   <!-- Sticky Header -->
-  <div class="flex items-center border-b bg-muted/50" style:height="{rowHeight}px" role="row">
-    {#if enableRowSelection}
-      <div class="flex-shrink-0 px-4" style="width: 48px">
-        <Checkbox
-          checked={table.isAllSelected}
-          indeterminate={table.isSomeSelected}
-          onCheckedChange={() => table.toggleAllRows()}
-          aria-label="Select all rows"
-        />
-      </div>
-    {/if}
-    {#each table.columns as column (column.id)}
-      {@const isSorted = table.sortColumn === column.id}
-      <div
-        class={cn(
-          'flex-shrink-0 px-4 font-medium text-muted-foreground',
-          getAlignClass(column.align),
-          column.sortable && 'cursor-pointer select-none hover:text-foreground'
-        )}
-        style={column.width ? `width: ${column.width}` : 'flex: 1'}
-        onclick={() => handleHeaderClick(column.id, column.sortable)}
-        onkeydown={(e) =>
-          (e.key === 'Enter' || e.key === ' ') && handleHeaderClick(column.id, column.sortable)}
-        role="columnheader"
-        tabindex={column.sortable ? 0 : -1}
-        aria-sort={getAriaSortValue(isSorted, table.sortDirection)}
-      >
-        <span class="flex items-center gap-1">
-          {column.header}
-          {#if isSorted}
-            <svg
-              class={cn('h-4 w-4', table.sortDirection === 'desc' && 'rotate-180')}
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 15l7-7 7 7"
-              />
-            </svg>
+  <div role="rowgroup">
+    <div
+      class="flex items-center border-b bg-muted/50"
+      style:height="{rowHeight}px"
+      role="row"
+      aria-rowindex={1}
+    >
+      {#if enableRowSelection}
+        <div class="flex-shrink-0 px-4" style="width: 48px" role="columnheader">
+          {#if enableSelectAll}
+            <Checkbox
+              checked={table.isAllSelected}
+              indeterminate={table.isSomeSelected}
+              onCheckedChange={() => table.toggleAllRows()}
+              aria-label="Select all rows"
+            />
+          {:else}
+            <span class="sr-only">Select</span>
           {/if}
-        </span>
-      </div>
-    {/each}
+        </div>
+      {/if}
+      {#each table.columns as column (column.id)}
+        {@const isSorted = table.sortColumn === column.id}
+        <div
+          class={cn(
+            'flex-shrink-0 px-4 font-medium text-muted-foreground',
+            getAlignClass(column.align),
+            column.sortable && 'cursor-pointer select-none hover:text-foreground'
+          )}
+          style={column.width ? `width: ${column.width}` : 'flex: 1'}
+          onclick={() => handleHeaderClick(column.id, column.sortable)}
+          onkeydown={(e) => handleHeaderKeydown(e, column.id, column.sortable)}
+          role="columnheader"
+          tabindex={column.sortable ? 0 : undefined}
+          aria-sort={getAriaSortValue(isSorted, table.sortDirection)}
+        >
+          <span class="flex items-center gap-1">
+            {column.header}
+            {#if isSorted}
+              <svg
+                class={cn('h-4 w-4', table.sortDirection === 'desc' && 'rotate-180')}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M5 15l7-7 7 7"
+                />
+              </svg>
+            {/if}
+          </span>
+        </div>
+      {/each}
+    </div>
   </div>
 
   <!-- Virtualized Body -->
   <div bind:this={containerRef} class="overflow-auto" style:height onscroll={handleScroll}>
-    <div style:height="{totalHeight}px" style:position="relative">
+    <div style:height="{totalHeight}px" style:position="relative" role="rowgroup">
       {#each visibleRows as { row, index, offset } (row.id)}
         <div
           class={cn(
@@ -171,12 +221,14 @@
           style:height="{rowHeight}px"
           style:transform="translateY({offset}px)"
           onclick={() => handleRowClick(row.original)}
-          onkeydown={(e) => e.key === 'Enter' && handleRowClick(row.original)}
+          onkeydown={onRowClick ? (e) => handleRowKeydown(e, row.original) : undefined}
           role="row"
-          tabindex={onRowClick ? 0 : -1}
+          aria-rowindex={index + 2}
+          aria-selected={enableRowSelection ? row.isSelected : undefined}
+          tabindex={onRowClick ? 0 : undefined}
         >
           {#if enableRowSelection}
-            <div class="flex-shrink-0 px-4" style="width: 48px">
+            <div class="flex-shrink-0 px-4" style="width: 48px" role="cell">
               <Checkbox
                 checked={row.isSelected}
                 onCheckedChange={() => table.toggleRowSelection(row.id)}

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

@@ -32,6 +32,8 @@ declare function $$render<T extends object>(): {
         onRowClick?: (row: T) => void;
         /** Whether row selection is enabled */
         enableRowSelection?: boolean;
+        /** Show the select-all checkbox in the header (default: true) */
+        enableSelectAll?: boolean;
         /** Additional CSS classes */
         class?: string;
     };

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

@@ -23,7 +23,7 @@
  * - Standard Svelte patterns for debugging
  * - Excellent performance characteristics
  */
-import type { DataTableColumn } from './types.js';
+import type { ColumnFilterValue, ColumnFiltersState, DataTableColumn } from './types.js';
 /**
  * Options for creating a native data table instance.
  */
@@ -48,6 +48,13 @@ export interface DataTableOptions<T> {
     initialHiddenColumns?: string[];
     /** Initially selected rows (by row ID) */
     initialSelectedRows?: string[];
+    /** Initial column filters */
+    initialColumnFilters?: ColumnFiltersState;
+    /**
+     * Allow more than one selected row (default true). When false, selecting a
+     * row replaces the previous selection.
+     */
+    enableMultiRowSelection?: boolean;
     /** Use server-side sorting (skip client-side sort) */
     manualSorting?: boolean;
     /** Use server-side filtering (skip client-side filter) */
@@ -66,7 +73,7 @@ export interface DataTableOptions<T> {
     /** Callback when global filter changes */
     onGlobalFilterChange?: (filter: string) => void;
     /** Callback when column filters change */
-    onColumnFiltersChange?: (filters: Map<string, string>) => void;
+    onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
     /** Callback when pagination changes */
     onPaginationChange?: (state: {
         pageIndex: number;
@@ -77,6 +84,20 @@ export interface DataTableOptions<T> {
     /** Callback when column visibility changes */
     onColumnVisibilityChange?: (hiddenColumns: Set<string>) => void;
 }
+/**
+ * State that {@link DataTableInstance.syncState} can set directly, e.g. to
+ * mirror a parent's controlled props.
+ */
+export interface DataTableSyncState {
+    sortColumn?: string | null;
+    sortDirection?: 'asc' | 'desc';
+    globalFilter?: string;
+    columnFilters?: ColumnFiltersState;
+    pageIndex?: number;
+    pageSize?: number;
+    selectedRows?: Set<string>;
+    hiddenColumns?: Set<string>;
+}
 /**
  * Row object with computed properties.
  */
@@ -127,10 +148,11 @@ export declare function createDataTable<T extends object>(optionsFn: () => DataT
     setSortColumn: (columnId: string | null) => void;
     setSortDirection: (direction: "asc" | "desc") => void;
     readonly globalFilter: string;
-    readonly columnFilters: Map<string, string>;
+    readonly columnFilters: ColumnFiltersState;
     setGlobalFilter: (value: string) => void;
-    setColumnFilter: (columnId: string, value: string) => void;
+    setColumnFilter: (columnId: string, value: ColumnFilterValue) => void;
     clearColumnFilters: () => void;
+    syncState: (state: DataTableSyncState) => void;
     readonly pageIndex: number;
     readonly pageSize: number;
     readonly totalRows: number;

package/dist/lib/components/data-table/createDataTable.svelte.js

@@ -82,6 +82,8 @@ export function createDataTable(optionsFn) {
                 hiddenColumns = new Set(options.initialHiddenColumns);
             if (options.initialSelectedRows)
                 selectedRows = new Set(options.initialSelectedRows);
+            if (options.initialColumnFilters)
+                columnFilters = new Map(options.initialColumnFilters);
             initialized = true;
         }
     });
@@ -93,30 +95,27 @@ export function createDataTable(optionsFn) {
         if (options.manualFiltering)
             return data;
         let result = data;
-        // Global filter
-        if (globalFilter.trim()) {
-            const search = globalFilter.toLowerCase();
-            result = result.filter((row) => visibleColumns.some((col) => {
-                const value = getColumnValue(row, col);
-                return String(value ?? '')
-                    .toLowerCase()
-                    .includes(search);
-            }));
+        // Global filter: matches what the cell shows as well as its raw value
+        const globalSearch = globalFilter.trim().toLowerCase();
+        if (globalSearch) {
+            result = result.filter((row) => visibleColumns.some((col) => cellMatchesText(row, col, globalSearch)));
         }
         // Column filters
         for (const [columnId, filterValue] of columnFilters) {
-            if (!filterValue.trim())
+            if (isEmptyFilter(filterValue))
                 continue;
             const column = columns.find((c) => c.id === columnId);
             if (!column)
                 continue;
-            const search = filterValue.toLowerCase();
-            result = result.filter((row) => {
-                const value = getColumnValue(row, column);
-                return String(value ?? '')
-                    .toLowerCase()
-                    .includes(search);
-            });
+            if (Array.isArray(filterValue)) {
+                // Faceted filter: exact membership, so 'active' never matches 'inactive'
+                const accepted = new Set(filterValue);
+                result = result.filter((row) => accepted.has(String(getColumnValue(row, column) ?? '')));
+            }
+            else {
+                const search = filterValue.trim().toLowerCase();
+                result = result.filter((row) => cellMatchesText(row, column, search));
+            }
         }
         return result;
     });
@@ -149,7 +148,8 @@ export function createDataTable(optionsFn) {
                 cmp = aVal.getTime() - bVal.getTime();
             }
             else {
-                cmp = String(aVal).localeCompare(String(bVal));
+                // numeric: "9" sorts before "10", not after "100"
+                cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true });
             }
             return sortDirection === 'asc' ? cmp : -cmp;
         });
@@ -191,6 +191,38 @@ export function createDataTable(optionsFn) {
     const isAllSelected = $derived(rows.length > 0 && rows.every((row) => selectedRows.has(row.id)));
     const isSomeSelected = $derived(rows.some((row) => selectedRows.has(row.id)) && !isAllSelected);
     // === ACTIONS ===
+    /**
+     * Set state directly without firing any `on*Change` callback. Used to
+     * mirror controlled props into the table; user-driven changes should use
+     * the setters below.
+     */
+    function syncState(state) {
+        if (state.sortColumn !== undefined)
+            sortColumn = state.sortColumn;
+        if (state.sortDirection !== undefined)
+            sortDirection = state.sortDirection;
+        if (state.globalFilter !== undefined)
+            globalFilter = state.globalFilter;
+        if (state.columnFilters !== undefined)
+            columnFilters = new Map(state.columnFilters);
+        if (state.pageIndex !== undefined)
+            pageIndex = state.pageIndex;
+        if (state.pageSize !== undefined)
+            pageSize = state.pageSize;
+        if (state.selectedRows !== undefined)
+            selectedRows = new Set(state.selectedRows);
+        if (state.hiddenColumns !== undefined)
+            hiddenColumns = new Set(state.hiddenColumns);
+    }
+    /** Filtering moves back to the first page; tell a controlled pager so. */
+    function resetPageForFilter() {
+        if (options.manualPagination)
+            return;
+        const moved = pageIndex !== 0;
+        pageIndex = 0;
+        if (moved)
+            options.onPaginationChange?.({ pageIndex: 0, pageSize });
+    }
     function setSort(columnId) {
         if (columnId === sortColumn) {
             // Toggle direction or clear
@@ -224,23 +256,23 @@ export function createDataTable(optionsFn) {
     }
     function setGlobalFilter(value) {
         globalFilter = value;
-        if (!options.manualPagination) {
-            pageIndex = 0; // Reset to first page
-        }
+        resetPageForFilter();
         options.onGlobalFilterChange?.(value);
     }
+    /**
+     * Set one column's filter. A string is a text filter; an array is a set of
+     * accepted values. An empty string or array clears the filter.
+     */
     function setColumnFilter(columnId, value) {
         const newFilters = new Map(columnFilters);
-        if (value.trim()) {
-            newFilters.set(columnId, value);
+        if (isEmptyFilter(value)) {
+            newFilters.delete(columnId);
         }
         else {
-            newFilters.delete(columnId);
+            newFilters.set(columnId, Array.isArray(value) ? [...value] : value);
         }
         columnFilters = newFilters;
-        if (!options.manualPagination) {
-            pageIndex = 0;
-        }
+        resetPageForFilter();
         options.onColumnFiltersChange?.(columnFilters);
     }
     function clearColumnFilters() {
@@ -279,9 +311,10 @@ export function createDataTable(optionsFn) {
         pageIndex = Math.max(0, totalPages - 1);
         options.onPaginationChange?.({ pageIndex: Math.max(0, totalPages - 1), pageSize });
     }
+    const multiSelect = $derived(options.enableMultiRowSelection !== false);
     function toggleRowSelection(rowId) {
-        const newSelection = new Set(selectedRows);
-        if (newSelection.has(rowId)) {
+        const newSelection = multiSelect ? new Set(selectedRows) : new Set();
+        if (selectedRows.has(rowId)) {
             newSelection.delete(rowId);
         }
         else {
@@ -291,7 +324,7 @@ export function createDataTable(optionsFn) {
         options.onRowSelectionChange?.(selectedRows);
     }
     function setRowSelection(rowId, selected) {
-        const newSelection = new Set(selectedRows);
+        const newSelection = selected && !multiSelect ? new Set() : new Set(selectedRows);
         if (selected) {
             newSelection.add(rowId);
         }
@@ -302,6 +335,9 @@ export function createDataTable(optionsFn) {
         options.onRowSelectionChange?.(selectedRows);
     }
     function toggleAllRows() {
+        // Selecting every row makes no sense when only one may be selected
+        if (!multiSelect && !isAllSelected)
+            return;
         if (isAllSelected) {
             // Deselect all visible rows
             const newSelection = new Set(selectedRows);
@@ -317,6 +353,8 @@ export function createDataTable(optionsFn) {
         options.onRowSelectionChange?.(selectedRows);
     }
     function selectAllRows() {
+        if (!multiSelect)
+            return;
         const newSelection = new Set(selectedRows);
         rows.forEach((row) => newSelection.add(row.id));
         selectedRows = newSelection;
@@ -357,16 +395,7 @@ export function createDataTable(optionsFn) {
         return getColumnValue(row, column);
     }
     function getFormattedCellValue(row, column) {
-        const value = getColumnValue(row, column);
-        if (column.format) {
-            try {
-                return column.format(value, row);
-            }
-            catch {
-                return String(value ?? '');
-            }
-        }
-        return String(value ?? '');
+        return formatValue(row, column);
     }
     // === RETURN API ===
     return {
@@ -404,6 +433,8 @@ export function createDataTable(optionsFn) {
         setGlobalFilter,
         setColumnFilter,
         clearColumnFilters,
+        // Controlled-state mirroring
+        syncState,
         // Pagination
         get pageIndex() {
             return clampedPageIndex;
@@ -470,3 +501,29 @@ function getColumnValue(row, column) {
     }
     return row[column.accessor];
 }
+function formatValue(row, column) {
+    const value = getColumnValue(row, column);
+    if (column.format) {
+        try {
+            return column.format(value, row);
+        }
+        catch {
+            return String(value ?? '');
+        }
+    }
+    return String(value ?? '');
+}
+/** Case-insensitive substring match against the raw and the formatted value. */
+function cellMatchesText(row, column, search) {
+    if (String(getColumnValue(row, column) ?? '')
+        .toLowerCase()
+        .includes(search)) {
+        return true;
+    }
+    return !!column.format && formatValue(row, column).toLowerCase().includes(search);
+}
+function isEmptyFilter(value) {
+    if (value === undefined)
+        return true;
+    return Array.isArray(value) ? value.length === 0 : !value.trim();
+}

package/dist/lib/components/data-table/index.d.ts

@@ -14,7 +14,7 @@
  * - `utils`: Shared utilities for formatting, alignment, etc.
  */
 export { createDataTable, type DataTableOptions, type DataTableRow, type DataTableInstance, } from './createDataTable.svelte.js';
-export { type DataTableColumn, type DataTableFilterFn, type DataTableFilterOption, type ColumnMeta, type BaseColumnMeta, type DataColumnMeta, type FilterableColumnMeta, type SelectionColumnMeta, type RowSelectionState, type ColumnVisibilityState, type ColumnFiltersState, type PaginationState, type LegacyRowSelectionState, type LegacyVisibilityState, type LegacyColumnFiltersState, legacyToSetSelection, setToLegacySelection, legacyToSetVisibility, setToLegacyVisibility, legacyToMapFilters, mapToLegacyFilters, type DataTableProps, type DataTableCoreProps, type DataTableSortingProps, type DataTableSelectionProps, type DataTableVisibilityProps, type DataTableFilteringProps, type DataTablePaginationProps, type DataTableVirtualizationProps, type DataTableEditingProps, type DataTableInteractionProps, type InferRowType, type FormatResult, } from './types.js';
+export { type DataTableColumn, type DataTableFilterFn, type DataTableFilterOption, type ColumnMeta, type BaseColumnMeta, type DataColumnMeta, type FilterableColumnMeta, type SelectionColumnMeta, type RowSelectionState, type ColumnVisibilityState, type ColumnFiltersState, type ColumnFilterValue, type PaginationState, type LegacyRowSelectionState, type LegacyVisibilityState, type LegacyColumnFiltersState, legacyToSetSelection, setToLegacySelection, legacyToSetVisibility, setToLegacyVisibility, legacyToMapFilters, mapToLegacyFilters, type DataTableProps, type DataTableCoreProps, type DataTableSortingProps, type DataTableSelectionProps, type DataTableVisibilityProps, type DataTableFilteringProps, type DataTablePaginationProps, type DataTableVirtualizationProps, type DataTableEditingProps, type DataTableInteractionProps, type InferRowType, type FormatResult, } from './types.js';
 export { getAlignClass, getColumnAlign, formatCellValue, formatCellValueSafe, getColumnValue, getColumnWidthStyle, getAriaSortValue, defaultGetRowId, debounce, } from './utils.js';
 export { default as DataTableToolbar } from './DataTableToolbar.svelte';
 export { default as DataTableSearch } from './DataTableSearch.svelte';

package/dist/lib/components/data-table/types.d.ts

@@ -93,10 +93,19 @@ export declare function legacyToSetVisibility(legacy: LegacyVisibilityState, all
  * Convert Set-based visibility state to legacy format.
  */
 export declare function setToLegacyVisibility(hiddenSet: ColumnVisibilityState, allColumnIds: string[]): LegacyVisibilityState;
+/**
+ * A single column filter value.
+ *
+ * - `string`: a text filter, matched as a case-insensitive substring of the
+ *   cell's raw or formatted value.
+ * - `string[]`: a set of accepted values (faceted filter), matched exactly
+ *   against the cell's raw value. An empty array filters nothing.
+ */
+export type ColumnFilterValue = string | string[];
 /**
  * Column filters state is a Map from column ID to filter value.
  */
-export type ColumnFiltersState = Map<string, string>;
+export type ColumnFiltersState = Map<string, ColumnFilterValue>;
 /**
  * Legacy column filter format (array of {id, value} objects).
  */
@@ -152,8 +161,9 @@ export interface DataTableSortingProps {
     /**
      * Callback when sort changes.
      * When provided, enables server-side sorting (manual mode).
+     * Called with `column: null` when the sort is cleared.
      */
-    onSort?: (column: string, direction: 'asc' | 'desc') => void;
+    onSort?: (column: string | null, direction: 'asc' | 'desc') => void;
 }
 /**
  * Props for row selection functionality.
@@ -236,9 +246,9 @@ export interface DataTableFilteringProps {
     /** Callback when global filter changes */
     onGlobalFilterChange?: (filter: string) => void;
     /** Controlled column filters */
-    columnFilters?: Map<string, string>;
+    columnFilters?: ColumnFiltersState;
     /** Callback when column filters change */
-    onColumnFiltersChange?: (filters: Map<string, string>) => void;
+    onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
     /**
      * Use server-side filtering (manual mode).
      *

package/dist/lib/components/data-table/types.js

@@ -51,7 +51,11 @@ export function setToLegacyVisibility(hiddenSet, allColumnIds) {
 export function legacyToMapFilters(legacy) {
     const map = new Map();
     for (const { id, value } of legacy) {
-        if (value !== undefined && value !== null && value !== '') {
+        if (Array.isArray(value)) {
+            if (value.length > 0)
+                map.set(id, value.map(String));
+        }
+        else if (value !== undefined && value !== null && value !== '') {
             map.set(id, String(value));
         }
     }

package/dist/lib/components/internal/TriggerChild.svelte

@@ -0,0 +1,60 @@
+<!--
+  @component
+  Renders a consumer's trigger snippet inside a bits-ui `child` snippet.
+
+  The snippet receives the trigger props (`{ props }`) and should spread them
+  on its own focusable element (`<Button {...props}>`), so that element is the
+  real trigger: it carries aria-expanded/aria-describedby and gets focus back
+  when a dialog closes.
+
+  Snippets written before the props were passed ignore them. Those are
+  detected after mount (no element inside carries the trigger id) and the
+  props move to a wrapping span, the old behaviour. `onfallback` tells the
+  parent so it can change the trigger id, which makes bits-ui look the
+  trigger node up again.
+-->
+<script lang="ts" module>
+  /** What a trigger snippet receives: spread `props` on the focusable element */
+  export type TriggerSnippetProps = { props: Record<string, unknown> };
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    /** The props bits-ui hands to its `child` snippet */
+    props: Record<string, unknown>;
+    /** The consumer's trigger snippet */
+    trigger: Snippet<[TriggerSnippetProps]>;
+    /** Class for the fallback wrapper span */
+    fallbackClass?: string;
+    /** Called once when the snippet ignored the props */
+    onfallback?: () => void;
+  }
+
+  let { props, trigger, fallbackClass, onfallback }: Props = $props();
+
+  let fallback = $state(false);
+  let probe = $state<HTMLElement | null>(null);
+
+  $effect(() => {
+    if (fallback || !probe) return;
+    const id = props.id;
+    const spread = [...probe.querySelectorAll('[id]')].some((el) => el.id === id);
+    if (!spread) {
+      fallback = true;
+      onfallback?.();
+    }
+  });
+</script>
+
+{#if fallback}
+  <span {...props} class={cn(fallbackClass, props.class as string | undefined)}>
+    {@render trigger({ props: {} })}
+  </span>
+{:else}
+  <span bind:this={probe} class="contents">
+    {@render trigger({ props })}
+  </span>
+{/if}