@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/data-grid/data-grid.css

@@ -9,6 +9,7 @@
     inline-size: 100%;
     max-inline-size: 100%;
     overflow: auto;
+    scrollbar-gutter: stable;
     border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-md);
     background: var(--cinder-surface);
@@ -18,11 +19,25 @@
     -webkit-overflow-scrolling: touch;
   }
 
+  .cinder-data-grid[data-cinder-virtualized-columns='true'] {
+    --_cinder-data-grid-overflow-shadow:
+      inset 1rem 0 1rem -1rem color-mix(in srgb, var(--cinder-text) 28%, transparent),
+      inset -1rem 0 1rem -1rem color-mix(in srgb, var(--cinder-text) 28%, transparent);
+  }
+
   .cinder-data-grid:focus-visible {
     outline: var(--cinder-ring-width) solid transparent;
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-data-grid:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: calc(-1 * var(--cinder-ring-width));
+      box-shadow: none;
+    }
+  }
+
   .cinder-data-grid__header-row,
   .cinder-data-grid__row {
     display: grid;
@@ -33,6 +48,7 @@
 
   .cinder-data-grid__header-row {
     background: var(--cinder-surface-inset);
+    box-shadow: var(--_cinder-data-grid-overflow-shadow, none);
   }
 
   .cinder-data-grid[data-cinder-sticky-header] .cinder-data-grid__header-row {
@@ -43,6 +59,7 @@
 
   .cinder-data-grid__row {
     background: var(--cinder-surface);
+    box-shadow: var(--_cinder-data-grid-overflow-shadow, none);
     transition: background var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 
@@ -117,6 +134,14 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-data-grid__sort-button:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-data-grid__header-content {
     min-inline-size: 0;
     overflow: hidden;

package/dist/components/data-grid/data-grid.schema.js

@@ -101,12 +101,12 @@ var schema = {
         description: "Stable row identity used for ARIA ids and row-scoped state."
       },
       {
-        name: "onSelectionModelChange",
+        name: "onselectionmodelchange",
         reason: "function-or-snippet",
         description: "Called when row selection changes through cell interaction."
       },
       {
-        name: "onSortModelChange",
+        name: "onsortmodelchange",
         reason: "function-or-snippet",
         description: "Called after the user changes sort order and DataGrid updates `sortModel`."
       },
@@ -133,4 +133,4 @@ export {
   data_grid_schema_default as default
 };
 
-//# debugId=2F0CEFF3C2E8A8FD64756E2164756E21
+//# debugId=2E7B3B8C6622FC2C64756E2164756E21

package/dist/components/data-grid/data-grid.types.d.ts

@@ -37,6 +37,12 @@ type DataGridBaseColumnDef<TRow> = {
     maxWidth?: number;
     /** Pin this column to the left or right edge of the horizontal scroller. */
     pin?: DataGridColumnPin;
+    /**
+     * Render body cells in this column as row headers (`role="rowheader"`).
+     * Use this for the column that uniquely identifies each row, such as the
+     * value returned by `getRowId`.
+     */
+    rowHeader?: boolean;
     /** Enables header-click sorting for this column. */
     sortable?: boolean;
 };
@@ -87,11 +93,11 @@ export type DataGridProps<TRow = Record<string, unknown>> = Omit<HTMLAttributes<
     /** Controlled row-selection ids, keyed by `getRowId`. */
     selectionModel?: DataGridSelectionModel | undefined;
     /** Called when row selection changes through cell interaction. */
-    onSelectionModelChange?: (selectionModel: DataGridSelectionModel) => void;
+    onselectionmodelchange?: (selectionModel: DataGridSelectionModel) => void;
     /** Controls the row sort order used to render rows. */
     sortModel?: DataGridSortModel;
     /** Called after the user changes sort order and DataGrid updates `sortModel`. */
-    onSortModelChange?: (sortModel: DataGridSortModel) => void;
+    onsortmodelchange?: (sortModel: DataGridSortModel) => void;
     /** Additional class names merged onto the root grid. */
     class?: string;
     /** Additional class names for body rows. */

package/dist/components/data-grid/index.js

@@ -188,6 +188,8 @@ function resolveColumn(column, index, columnSizing, columnPinning) {
     resolvedColumn.cell = column.cell;
   if (column.maxWidth !== undefined)
     resolvedColumn.maxWidth = column.maxWidth;
+  if (column.rowHeader !== undefined)
+    resolvedColumn.rowHeader = column.rowHeader;
   if (column.sortable !== undefined)
     resolvedColumn.sortable = column.sortable;
   if (column.sortComparator !== undefined)
@@ -2183,7 +2185,7 @@ function toDataGridVirtualItem(item) {
 var root_7 = $4.from_html(`<span class="cinder-data-grid__sort-priority" aria-hidden="true"> </span>`);
 var root_2 = $4.from_html(`<button class="cinder-data-grid__sort-button" type="button"><span class="cinder-data-grid__header-content"><!></span> <span class="cinder-data-grid__sort-indicator" aria-hidden="true"><!></span> <!> <span class="cinder-sr-only"> </span></button>`);
 var root_1 = $4.from_html(`<div class="cinder-data-grid__header-cell" role="columnheader"><!></div>`);
-var root_11 = $4.from_html(`<div class="cinder-data-grid__cell" role="gridcell" tabindex="-1"><!></div>`);
+var root_11 = $4.from_html(`<div class="cinder-data-grid__cell" tabindex="-1"><!></div>`);
 var root_10 = $4.from_html(`<div role="row"></div>`);
 var root = $4.from_html(`<div><div class="cinder-data-grid__header-row" role="row" aria-rowindex="1"></div> <div class="cinder-data-grid__body" role="rowgroup"></div></div> <div class="cinder-sr-only cinder-data-grid__live-region" role="status" aria-live="polite" aria-atomic="true"> </div>`, 1);
 function Data_grid($$anchor, $$props) {
@@ -2217,9 +2219,9 @@ function Data_grid($$anchor, $$props) {
     "columnPinning",
     "selectionMode",
     "selectionModel",
-    "onSelectionModelChange",
+    "onselectionmodelchange",
     "sortModel",
-    "onSortModelChange",
+    "onsortmodelchange",
     "rowClass",
     "getRowAriaLabel",
     "class",
@@ -2605,7 +2607,7 @@ function Data_grid($$anchor, $$props) {
       return;
     const nextSortModel = getNextDataGridSortModel($4.get(activeSortModel), column.key, event.shiftKey);
     sortModel(nextSortModel);
-    $$props.onSortModelChange?.(nextSortModel);
+    $$props.onsortmodelchange?.(nextSortModel);
   }
   function getCellCoordinate(rowIndex, columnIndex) {
     const rowId = $4.get(rowDomIds)[Math.min(Math.max(rowIndex, 0), $4.get(rowDomIds).length - 1)];
@@ -2649,7 +2651,7 @@ function Data_grid($$anchor, $$props) {
   }
   function setSelectionModel(nextSelectionModel) {
     selectionModel(nextSelectionModel);
-    $$props.onSelectionModelChange?.(nextSelectionModel);
+    $$props.onselectionmodelchange?.(nextSelectionModel);
   }
   function updateRowSelection(rowId, event) {
     if (selectionMode() === "none")
@@ -3027,11 +3029,12 @@ function Data_grid($$anchor, $$props) {
       $4.reset(div_5);
       $4.template_effect(($0) => {
         $4.set_attribute(div_5, "id", $4.get(cellId));
+        $4.set_attribute(div_5, "role", $4.get(column).rowHeader ? "rowheader" : "gridcell");
         $4.set_attribute(div_5, "aria-colindex", $4.get(column).colIndex);
         $4.set_attribute(div_5, "aria-selected", $4.get(isSelectedCell) ? "true" : undefined);
         $4.set_attribute(div_5, "data-cinder-pin", $4.get(column).pin);
         $4.set_attribute(div_5, "data-cinder-active", $4.get(activeCellId) === $4.get(cellId) ? "true" : undefined);
-        $4.set_attribute(div_5, "data-cinder-selected", $4.get(isSelectedCell) ? "true" : undefined);
+        $4.set_attribute(div_5, "data-cinder-selected", $4.get(isSelectedCell) ? "" : undefined);
         $4.set_attribute(div_5, "data-cinder-anchor", $4.get(isAnchorCell) ? "true" : undefined);
         $4.set_attribute(div_5, "data-cinder-row-id", $4.get(rowId));
         $4.set_attribute(div_5, "data-cinder-row-dom-id", $4.get(rowDomId));
@@ -3054,7 +3057,7 @@ function Data_grid($$anchor, $$props) {
       () => $4.clsx(classNames("cinder-data-grid__row", getRowClass($4.get(row), $4.get(rowIndex)))),
       () => getResolvedRowAriaLabel($4.get(row), $4.get(rowIndex)),
       () => $4.get(selectedRowIds).has($4.get(rowId)) ? "true" : undefined,
-      () => $4.get(selectedRowIds).has($4.get(rowId)) ? "true" : undefined,
+      () => $4.get(selectedRowIds).has($4.get(rowId)) ? "" : undefined,
       () => getRowStyle($4.get(renderedRow))
     ]);
     $4.append($$anchor2, div_4);
@@ -3085,4 +3088,4 @@ export {
   Data_grid as DataGrid
 };
 
-//# debugId=DBADF5D5E9737F4864756E2164756E21
+//# debugId=872974D01270F22564756E2164756E21

package/dist/components/data-list/data-list.schema.js

@@ -58,18 +58,15 @@ var schema = {
       {
         name: "key",
         reason: "function-or-snippet",
-        description: `Key extractor for efficient DOM updates. Svelte uses this to identify each
-row when the list is reordered, filtered, or updated — without it, rows are
-matched by index and the wrong row instances may receive updated props.
-
-Strongly recommended for any list that can change after initial render:
+        required: true,
+        description: `Key extractor for stable DOM reconciliation. Svelte uses this to identify
+each row when the list is reordered, filtered, or updated. Without a key,
+rows are matched by index and the wrong row instances may receive updated
+props, causing O(n) churn and incorrect rendering.
 
 \`\`\`svelte
 <DataList {items} key={(m) => m.id}>
-\`\`\`
-
-Omit only for truly static, never-reordered lists (e.g. a fixed reference
-list). When omitted, Svelte falls back to index-based reconciliation.`
+\`\`\``
       }
     ]
   }
@@ -79,4 +76,4 @@ export {
   data_list_schema_default as default
 };
 
-//# debugId=D784068EE14CCCA064756E2164756E21
+//# debugId=08CD68DD4BB630DC64756E2164756E21

package/dist/components/data-list/data-list.types.d.ts

@@ -5,20 +5,16 @@ export type DataListProps<T> = Omit<HTMLAttributes<HTMLUListElement>, 'role' | '
     /** The records to render. Each is passed to `children`. */
     items: T[];
     /**
-     * Key extractor for efficient DOM updates. Svelte uses this to identify each
-     * row when the list is reordered, filtered, or updated — without it, rows are
-     * matched by index and the wrong row instances may receive updated props.
-     *
-     * Strongly recommended for any list that can change after initial render:
+     * Key extractor for stable DOM reconciliation. Svelte uses this to identify
+     * each row when the list is reordered, filtered, or updated. Without a key,
+     * rows are matched by index and the wrong row instances may receive updated
+     * props, causing O(n) churn and incorrect rendering.
      *
      * ```svelte
      * <DataList {items} key={(m) => m.id}>
      * ```
-     *
-     * Omit only for truly static, never-reordered lists (e.g. a fixed reference
-     * list). When omitted, Svelte falls back to index-based reconciliation.
      */
-    key?: (item: T) => string | number;
+    key: (item: T) => string | number;
     /**
      * List-level density inherited by StackedListItem rows that do not set their
      * own `density` prop. Omit to let each row use its own default. A per-row

package/dist/components/data-list/index.js

@@ -55,7 +55,7 @@ function classNames(...parts) {
 }
 
 // src/components/data-list/data-list.svelte
-var root_6 = $.from_html(`<li class="cinder-data-list-empty"><!></li>`);
+var root_3 = $.from_html(`<li class="cinder-data-list-empty"><!></li>`);
 var root = $.from_html(`<ul><!></ul>`);
 function Data_list($$anchor, $$props) {
   $.push($$props, true);
@@ -79,53 +79,29 @@ function Data_list($$anchor, $$props) {
   $.attribute_effect(ul, ($0) => ({ ...rest, class: $0, role: "list" }), [() => classNames("cinder-data-list", $$props.class)]);
   var node = $.child(ul);
   {
-    var consequent_1 = ($$anchor2) => {
+    var consequent = ($$anchor2) => {
       var fragment = $.comment();
       var node_1 = $.first_child(fragment);
-      {
-        var consequent = ($$anchor3) => {
-          var fragment_1 = $.comment();
-          var node_2 = $.first_child(fragment_1);
-          $.each(node_2, 17, () => $$props.items, (entry) => $$props.key(entry), ($$anchor4, entry) => {
-            var fragment_2 = $.comment();
-            var node_3 = $.first_child(fragment_2);
-            $.snippet(node_3, () => $$props.children, () => $.get(entry));
-            $.append($$anchor4, fragment_2);
-          });
-          $.append($$anchor3, fragment_1);
-        };
-        var alternate = ($$anchor3) => {
-          var fragment_3 = $.comment();
-          var node_4 = $.first_child(fragment_3);
-          $.each(node_4, 17, () => $$props.items, $.index, ($$anchor4, entry) => {
-            var fragment_4 = $.comment();
-            var node_5 = $.first_child(fragment_4);
-            $.snippet(node_5, () => $$props.children, () => $.get(entry));
-            $.append($$anchor4, fragment_4);
-          });
-          $.append($$anchor3, fragment_3);
-        };
-        $.if(node_1, ($$render) => {
-          if ($$props.key)
-            $$render(consequent);
-          else
-            $$render(alternate, -1);
-        });
-      }
+      $.each(node_1, 17, () => $$props.items, (entry) => $$props.key(entry), ($$anchor3, entry) => {
+        var fragment_1 = $.comment();
+        var node_2 = $.first_child(fragment_1);
+        $.snippet(node_2, () => $$props.children, () => $.get(entry));
+        $.append($$anchor3, fragment_1);
+      });
       $.append($$anchor2, fragment);
     };
-    var consequent_2 = ($$anchor2) => {
-      var li = root_6();
-      var node_6 = $.child(li);
-      $.snippet(node_6, () => $$props.empty);
+    var consequent_1 = ($$anchor2) => {
+      var li = root_3();
+      var node_3 = $.child(li);
+      $.snippet(node_3, () => $$props.empty);
       $.reset(li);
       $.append($$anchor2, li);
     };
     $.if(node, ($$render) => {
       if ($$props.items.length > 0)
-        $$render(consequent_1);
+        $$render(consequent);
       else if ($$props.empty)
-        $$render(consequent_2, 1);
+        $$render(consequent_1, 1);
     });
   }
   $.reset(ul);
@@ -140,4 +116,4 @@ export {
   Data_list as DataList
 };
 
-//# debugId=61DA7C1C7691BA5764756E2164756E21
+//# debugId=938C3284DC52D23C64756E2164756E21

package/dist/components/data-table/data-table.css

@@ -42,12 +42,25 @@
     block-size: var(--_cinder-data-table-row-height, 44px);
   }
 
+  .cinder-data-table tbody .cinder-table__row:focus-within {
+    background: var(--cinder-surface-hover);
+  }
+
   .cinder-data-table[data-cinder-virtualized]
     .cinder-table__row[data-cinder-virtual-row]:focus-visible {
     outline: var(--cinder-ring-width) solid transparent;
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-data-table[data-cinder-virtualized]
+      .cinder-table__row[data-cinder-virtual-row]:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: calc(-1 * var(--cinder-ring-width));
+      box-shadow: none;
+    }
+  }
+
   .cinder-data-table__virtual-spacer-cell {
     padding: 0;
     border: 0;

package/dist/components/data-table/index.js

@@ -112,7 +112,7 @@ function Table_cell($$anchor, $$props) {
 // src/components/table-header-cell/table-header-cell.svelte
 import"svelte/internal/disclose-version";
 import * as $3 from "svelte/internal/client";
-var root_1 = $3.from_html(`<button type="button" class="cinder-table__sort-button"><!> <span class="cinder-table__sort-indicator" aria-hidden="true"><svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline class="cinder-table__sort-chevron-up" points="4 7 8 4 12 7"></polyline><polyline class="cinder-table__sort-chevron-down" points="4 9 8 12 12 9"></polyline></svg></span></button>`);
+var root_1 = $3.from_html(`<button><!> <span class="cinder-table__sort-indicator" aria-hidden="true"><svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline class="cinder-table__sort-chevron-up" points="4 7 8 4 12 7"></polyline><polyline class="cinder-table__sort-chevron-down" points="4 9 8 12 12 9"></polyline></svg></span></button>`);
 var root2 = $3.from_html(`<th><!></th>`);
 function Table_header_cell($$anchor, $$props) {
   $3.push($$props, true);
@@ -130,10 +130,12 @@ function Table_header_cell($$anchor, $$props) {
   const table = getTableContext();
   const isSortable = $3.derived(() => sortable() && !!$$props.column);
   const ariaSort = $3.derived(() => $3.get(isSortable) && table.sort?.column === $$props.column ? table.sort?.direction : $3.get(isSortable) ? "none" : undefined);
+  const nextSortDescription = $3.derived(() => $3.get(ariaSort) === "ascending" ? "Activate to sort descending" : "Activate to sort ascending");
+  const sortButtonDescriptionAttributes = $3.derived(() => ({ "aria-description": $3.get(nextSortDescription) }));
   function handleClick() {
     if (!sortable() || !$$props.column)
       return;
-    table.onSortChange($$props.column);
+    table.onsortchange($$props.column);
   }
   var th = root2();
   $3.attribute_effect(th, ($0) => ({
@@ -148,12 +150,17 @@ function Table_header_cell($$anchor, $$props) {
   {
     var consequent = ($$anchor2) => {
       var button = root_1();
+      $3.attribute_effect(button, () => ({
+        ...$3.get(sortButtonDescriptionAttributes),
+        type: "button",
+        class: "cinder-table__sort-button",
+        onclick: handleClick
+      }));
       var node_1 = $3.child(button);
       $3.snippet(node_1, () => $$props.children);
       var span = $3.sibling(node_1, 2);
       $3.reset(button);
       $3.template_effect(() => $3.set_attribute(span, "data-cinder-direction", $3.get(ariaSort)));
-      $3.delegated("click", button, handleClick);
       $3.append($$anchor2, button);
     };
     var alternate = ($$anchor2) => {
@@ -173,7 +180,6 @@ function Table_header_cell($$anchor, $$props) {
   $3.append($$anchor, th);
   $3.pop();
 }
-$3.delegate(["click"]);
 
 // src/components/table-header/table-header.svelte
 import"svelte/internal/disclose-version";
@@ -185,8 +191,8 @@ function Table_header($$anchor, $$props) {
   let selectAllLabel = $4.prop($$props, "selectAllLabel", 3, "Select all rows");
   const table = tryGetTableContext();
   const selectionEnabled = table?.selectionEnabled ?? false;
-  if (selectionEnabled && untrack(() => $$props.allSelected === undefined || $$props.someSelected === undefined || !$$props.onSelectAll)) {
-    throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onSelectAll` are required when Table.selectable is true.");
+  if (selectionEnabled && untrack(() => $$props.allSelected === undefined || $$props.someSelected === undefined || !$$props.onselectall)) {
+    throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onselectall` are required when Table.selectable is true.");
   }
   let hasSelectionHeaderCell = false;
   function claimSelectionHeaderCell() {
@@ -203,8 +209,8 @@ function Table_header($$anchor, $$props) {
     get someSelected() {
       return $$props.someSelected ?? false;
     },
-    get onSelectAll() {
-      return $$props.onSelectAll ?? (() => {});
+    get onselectall() {
+      return $$props.onselectall ?? (() => {});
     },
     get selectAllLabel() {
       return selectAllLabel();
@@ -250,7 +256,7 @@ function Table_row($$anchor, $$props) {
     "class",
     "children",
     "selected",
-    "onSelectedChange",
+    "onselectedchange",
     "selectionLabel",
     "selectionDisabled"
   ]);
@@ -263,12 +269,12 @@ function Table_row($$anchor, $$props) {
       const hasDisabled = $$props.selectionDisabled === true;
       if (!hasDisabled) {
         const hasSelected = $$props.selected !== undefined;
-        const hasOnChange = $$props.onSelectedChange !== undefined;
+        const hasOnChange = $$props.onselectedchange !== undefined;
         const hasLabel = $$props.selectionLabel !== undefined;
         if (!hasSelected || !hasOnChange || !hasLabel) {
-          throw new Error("[Cinder] TableRow: when Table.selectable is true, each body row must supply " + "selected + onSelectedChange + selectionLabel together, or set selectionDisabled={true}. " + `Missing: ${[
+          throw new Error("[Cinder] TableRow: when Table.selectable is true, each body row must supply " + "selected + onselectedchange + selectionLabel together, or set selectionDisabled={true}. " + `Missing: ${[
             !hasSelected && "selected",
-            !hasOnChange && "onSelectedChange",
+            !hasOnChange && "onselectedchange",
             !hasLabel && "selectionLabel"
           ].filter(Boolean).join(", ")}.`);
         }
@@ -280,11 +286,11 @@ function Table_row($$anchor, $$props) {
   }
   function handleSelectAllChange(event) {
     const input = event.currentTarget;
-    headerSelection?.onSelectAll(input.checked);
+    headerSelection?.onselectall(input.checked);
   }
   function handleRowChange(event) {
     const input = event.currentTarget;
-    $$props.onSelectedChange?.(input.checked);
+    $$props.onselectedchange?.(input.checked);
   }
   const shouldRenderHeaderSelectionCell = selectionEnabled && section === "header" && headerSelection !== undefined;
   if (shouldRenderHeaderSelectionCell) {
@@ -426,7 +432,7 @@ function Table($$anchor, $$props) {
       return;
     $7.set(captionHeight, entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height, true);
   }, { box: "border-box", enabled: () => stickyHeader() });
-  function onSortChange(column) {
+  function onsortchange(column) {
     if (!sort() || sort().column !== column) {
       sort({ column, direction: "ascending" });
       return;
@@ -443,7 +449,7 @@ function Table($$anchor, $$props) {
     get selectionEnabled() {
       return selectable();
     },
-    onSortChange
+    onsortchange
   });
   var table = root5();
   $7.attribute_effect(table, ($0) => ({
@@ -761,10 +767,16 @@ function Data_table($$anchor, $$props) {
     if (!element2 || !$8.get(shouldVirtualizeRows))
       return;
     syncScrollMetrics(element2);
-    if (typeof ResizeObserver === "undefined")
+  });
+  const observeWrapperResize = useResizeObserver(() => {
+    if ($8.get(wrapperElement) && $8.get(shouldVirtualizeRows))
+      syncScrollMetrics($8.get(wrapperElement));
+  });
+  $8.user_effect(() => {
+    const element2 = $8.get(wrapperElement);
+    if (!element2 || !$8.get(shouldVirtualizeRows) || typeof ResizeObserver === "undefined")
       return;
     const observer = new ResizeObserver(() => syncScrollMetrics(element2));
-    observer.observe(element2);
     const caption = element2.querySelector("caption");
     if (caption)
       observer.observe(caption);
@@ -912,6 +924,7 @@ function Data_table($$anchor, $$props) {
   table(node_7);
   $8.reset(div);
   $8.bind_this(div, ($$value) => $8.set(wrapperElement, $$value), () => $8.get(wrapperElement));
+  $8.attach(div, () => observeWrapperResize);
   $8.append($$anchor, div);
   $8.pop();
 }
@@ -923,4 +936,4 @@ export {
   Data_table as DataTable
 };
 
-//# debugId=581D6FFDE2A96C2A64756E2164756E21
+//# debugId=AFF40B5CB5829CF164756E2164756E21

package/dist/components/date-range-field/date-range-field.schema.js

@@ -36,11 +36,15 @@ var schema = {
     },
     startLabel: {
       type: "string",
-      description: 'Accessible label for the start date input. Defaults to "Start date".'
+      description: 'Accessible label for the start input. Defaults to "Start date" for day granularity and "Start date and time" for datetime granularities.'
     },
     endLabel: {
       type: "string",
-      description: 'Accessible label for the end date input. Defaults to "End date".'
+      description: 'Accessible label for the end input. Defaults to "End date" for day granularity and "End date and time" for datetime granularities.'
+    },
+    granularity: {
+      enum: ["day", "hour", "minute", "second"],
+      description: "Date-time precision. Defaults to day precision."
     },
     hidePresets: {
       type: "boolean",
@@ -92,4 +96,4 @@ export {
   date_range_field_schema_default as default
 };
 
-//# debugId=E5CA4D2E9E6FE5E564756E2164756E21
+//# debugId=2E31FFC53CC43B1064756E2164756E21

package/dist/components/date-range-field/date-range-field.svelte.d.ts

@@ -9,10 +9,10 @@
  * @useWhen Filtering a list or dashboard by a start and end date (e.g. created between, updated between).
  * @useWhen Offering common presets (last 7 days, last 24 hours) alongside a manual date range.
  * @avoidWhen A single date is sufficient — use a plain date input instead.
- * @avoidWhen Date-time precision (hours/minutes/timezone) is required — this v1 is date-only.
+ * @avoidWhen Timezone conversion or a standalone time-of-day value is required — use time-field for the latter.
  * @related input, form-field, chip, segmented-control
  */
-export type { DateRangeDatePreset, DateRangeFieldProps, DateRangeValue, } from './date-range-field.types.ts';
+export type { DateRangeDatePreset, DateRangeFieldProps, DateRangeGranularity, DateRangeValue, } from './date-range-field.types.ts';
 import type { DateRangeFieldProps } from './date-range-field.types.ts';
 declare const DateRangeField: import("svelte").Component<DateRangeFieldProps, {}, "value">;
 type DateRangeField = ReturnType<typeof DateRangeField>;

package/dist/components/date-range-field/date-range-field.types.d.ts

@@ -1,14 +1,15 @@
 import type { HTMLAttributes } from 'svelte/elements';
 /**
- * A date-only range value expressed as ISO-8601 date strings (YYYY-MM-DD).
+ * A date or date-time range value expressed as ISO-8601 local strings.
  * Both `start` and `end` are optional so the consumer can represent partial input.
  */
 export type DateRangeValue = {
-    /** Start of the range as an ISO-8601 date string (YYYY-MM-DD), or undefined when not set. */
+    /** Start of the range as an ISO-8601 local string, or undefined when not set. */
     start: string | undefined;
-    /** End of the range as an ISO-8601 date string (YYYY-MM-DD), or undefined when not set. */
+    /** End of the range as an ISO-8601 local string, or undefined when not set. */
     end: string | undefined;
 };
+export type DateRangeGranularity = 'day' | 'hour' | 'minute' | 'second';
 /**
  * A preset time-window option that the consumer can offer to the user.
  */
@@ -23,11 +24,13 @@ export type DateRangeDatePreset = {
 /**
  * Props for the DateRangeField component.
  *
- * v1 scope (date-only):
- * - Accepts and emits ISO-8601 date strings (YYYY-MM-DD) for start and end.
- * - Does not support date-time (hours/minutes/seconds/timezone). That adds
- *   timezone + time-picker complexity that doubles the surface area; it is
- *   tracked as a follow-up.
+ * Scope:
+ * - Accepts and emits ISO-8601 local strings for start and end.
+ * - `granularity="day"` uses native date inputs and emits `YYYY-MM-DD`.
+ * - `granularity="hour" | "minute" | "second"` uses native datetime-local
+ *   inputs and emits `YYYY-MM-DDTHH:mm` or `YYYY-MM-DDTHH:mm:ss`.
+ * - Timezone conversion is caller-owned; browser `datetime-local` values are
+ *   local wall-clock values by design.
  * - Sets the native inputs' min/max so the browser picker hints valid bounds
  *   (end's min = start, start's max = end), but does NOT block out-of-order
  *   entry. Validation feedback is the consumer's responsibility via `error`.
@@ -44,10 +47,12 @@ export type DateRangeFieldProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' |
     value?: DateRangeValue;
     /** Visible legend rendered above the start/end inputs. */
     label?: string;
-    /** Accessible label for the start date input. Defaults to "Start date". */
+    /** Accessible label for the start input. Defaults to "Start date" for day granularity and "Start date and time" for datetime granularities. */
     startLabel?: string;
-    /** Accessible label for the end date input. Defaults to "End date". */
+    /** Accessible label for the end input. Defaults to "End date" for day granularity and "End date and time" for datetime granularities. */
     endLabel?: string;
+    /** Date-time precision. Defaults to day precision. */
+    granularity?: DateRangeGranularity;
     /**
      * Consumer-defined preset options shown above the date inputs.
      * Each preset has a label and a resolve() function that returns a DateRangeValue.

package/dist/components/date-range-field/index.d.ts

@@ -1,5 +1,5 @@
 import './date-range-field.css';
 import DateRangeField from './date-range-field.svelte';
 export default DateRangeField;
-export type { DateRangeDatePreset, DateRangeFieldProps, DateRangeValue, } from './date-range-field.types.ts';
+export type { DateRangeDatePreset, DateRangeFieldProps, DateRangeGranularity, DateRangeValue, } from './date-range-field.types.ts';
 export { DateRangeField };