@dashforge/tw 0.8.1-beta → 0.9.0-beta

package/dist/index.esm.js

@@ -5285,6 +5285,15 @@ const SnackbarContext = /*#__PURE__*/ createContext(null);
          * has set its own color (e.g. `<Box variant="solid" color="primary">`
          * paints white text).
          */ color: {
+            // `inherit` is the explicit escape hatch — use it on a
+            // `<Typography>` inside a coloured surface (e.g.
+            // `<Box variant="solid" color="primary">` paints white text)
+            // so the text picks up the surface colour. It is NO LONGER the
+            // default: a bare `<Typography>` would otherwise inherit the
+            // consuming app's arbitrary root colour (often OS-`prefers-
+            // color-scheme` driven), which diverges from the Dashforge
+            // `data-dash-tw-theme` mode and breaks colour consistency in
+            // dark mode. The default is now `neutral` — see `defaultVariants`.
             inherit: 'text-inherit',
             primary: 'text-primary-700 dark:text-primary-400',
             secondary: 'text-secondary-700 dark:text-secondary-400',
@@ -5337,7 +5346,11 @@ const SnackbarContext = /*#__PURE__*/ createContext(null);
     },
     defaultVariants: {
         variant: 'body1',
-        color: 'inherit',
+        // `neutral` (not `inherit`): a bare `<Typography>` emits
+        // `text-neutral-900`, which auto-inverts via the dashforgePreset()
+        // CSS-var swap and follows the Dashforge mode. Pass
+        // `color="inherit"` explicitly inside a coloured surface.
+        color: 'neutral',
         align: 'left'
     }
 });
@@ -6915,8 +6928,11 @@ VisuallyHidden.displayName = 'VisuallyHidden';
                 jsx(RadixDialog.Overlay, {
                     className: cn(v.overlay(), slotProps == null ? void 0 : (_slotProps_overlay = slotProps.overlay) == null ? void 0 : _slotProps_overlay.className)
                 }),
-                jsxs(RadixDialog.Content, {
-                    className: cn(v.content(), sx, slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className),
+                jsxs(RadixDialog.Content, _extends({
+                    className: cn(v.content(), sx, slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className)
+                }, description == null ? {
+                    'aria-describedby': undefined
+                } : {}, {
                     onPointerDownOutside: (event)=>{
                         if (disableBackdropClose) event.preventDefault();
                     },
@@ -6955,7 +6971,7 @@ VisuallyHidden.displayName = 'VisuallyHidden';
                             })
                         })
                     ]
-                })
+                }))
             ]
         })
     });
@@ -8650,6 +8666,7 @@ function inferType(value) {
 const DEFAULT_LABELS$1 = {
     searchPlaceholder: 'Search...',
     noData: 'No data',
+    noResults: 'No matching results',
     loading: 'Loading…',
     ariaSortNone: 'Not sorted. Click to sort ascending.',
     ariaSortAscending: 'Sorted ascending. Click to sort descending.',
@@ -8676,8 +8693,7 @@ const DEFAULT_LABELS$1 = {
     densitySpacious: 'Spacious',
     columnsButton: 'Columns',
     columnsTitle: 'Toggle columns',
-    columnsShowAll: 'Show all',
-    columnsHideAll: 'Hide all'
+    columnsToggleAll: 'Toggle all columns'
 };
 const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
 /**
@@ -8706,6 +8722,26 @@ const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
     sortModel: sortModelProp, onSortChange, defaultSortModel, enableSearch = false, searchQuery: searchQueryProp, onSearchQueryChange, searchPlaceholder, searchDebounceMs = 200, filterModel: filterModelProp, onFilterChange, rowSelection = 'none', selectedRowIds: selectedRowIdsProp, onSelectionChange, bulkActions, expandable, rowActions, loading = false, loadingRowCount = 5, emptyState, stickyHeader = true, caption, showCaption = false, access: tableAccess, labels: labelsProp, variant, size, density, sx, slotProps } = props;
     const labels = _extends({}, DEFAULT_LABELS$1, labelsProp);
     const tableAccessState = useAccessState(tableAccess);
+    // Dev-only guard: `getRowId` is optional (positional-index fallback)
+    // but that fallback breaks row identity once rows reorder (sort) or
+    // change presence (search / filter) — selection + expansion state
+    // then jump to the wrong rows. Warn when it's omitted AND a feature
+    // that relies on stable identity is active. Stripped in production.
+    const getRowIdProvided = props.getRowId !== undefined;
+    useEffect(()=>{
+        if (process.env.NODE_ENV === 'production') return;
+        if (getRowIdProvided) return;
+        const identityMatters = rowSelection !== 'none' || expandable != null || enableSearch || cols.some((c)=>Boolean(c.sortable));
+        if (identityMatters) {
+            console.warn('[Dashforge Table] `getRowId` is not set — falling back to the ' + 'positional row index. With sort / search / selection / ' + 'expandable rows active, the index-based key breaks row ' + 'identity when rows reorder. Pass a stable resolver, e.g. ' + '`getRowId={(row) => row.id}`.');
+        }
+    }, [
+        getRowIdProvided,
+        rowSelection,
+        expandable,
+        enableSearch,
+        cols
+    ]);
     // ───── Controllable state machinery ─────
     const [sortModel, setSortModel] = useControllableState({
         controlledValue: sortModelProp,
@@ -8861,7 +8897,9 @@ const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
                             }) : sortedRows.length === 0 ? renderEmptyState$1({
                                 totalColumnCount,
                                 emptyState,
-                                fallback: labels.noData,
+                                // Distinguish a genuinely empty dataset from one
+                                // emptied by an active search / filter.
+                                fallback: rows.length > 0 && (debouncedSearchQuery.trim().length > 0 || filterModel.length > 0) ? labels.noResults : labels.noData,
                                 cellClass: cn(v.cell(), v.emptyState(), slotProps == null ? void 0 : (_slotProps_emptyState = slotProps.emptyState) == null ? void 0 : _slotProps_emptyState.className)
                             }) : sortedRows.map((row, idx)=>{
                                 var _slotProps_row, _slotProps_cell, _slotProps_cell1, _slotProps_selectionCell, _slotProps_cell2, _slotProps_expandToggleCell, _slotProps_cell3, _slotProps_rowActionsCell, _slotProps_expandedRow;
@@ -9083,6 +9121,10 @@ function handleSortClick$1(col, event, current, setSortModel) {
 }
 function renderLoadingRows$1(args) {
     const { count, visibleCols, showSelectionColumn, showExpandColumn, showRowActionsColumn, rowClass, cellClass } = args;
+    // No explicit row height here (unlike DataGrid's loading rows, which
+    // pin `rowHeight` for the virtualization math): Table is auto-height
+    // by design. Skeleton rows inherit the same density padding via
+    // `cellClass`, so they line up with real rows without a fixed height.
     return Array.from({
         length: count
     }).map((_, i)=>jsxs("tr", {
@@ -9324,15 +9366,12 @@ function SearchIcon$1(props) {
             color: 'secondary',
             class: 'bg-secondary-100 dark:bg-secondary-950 text-secondary-700 dark:text-secondary-300'
         },
-        // solid = full bg + light text
-        // solid neutral: bg + text both anchored to neutral palette
-        // (auto-inverts). `text-white` would not invert and would break
-        // contrast in light mode against a `bg-neutral-700` dark bg, so
-        // we stick to `text-neutral-50` (light text in light mode, dark
-        // in dark — wait, that's wrong too). Actually `text-neutral-50`
-        // auto-inverts: light text in light mode (against dark bg) is
-        // what we want; in dark mode `bg-neutral-700` becomes light AND
-        // `text-neutral-50` becomes dark — contrast preserved.
+        // solid = full bg + contrasting text.
+        // solid neutral: both `bg-neutral-700` and `text-neutral-50` sit
+        // on the neutral palette, so they auto-invert together via the
+        // CSS-var swap — bg/text contrast is preserved in BOTH modes.
+        // (`text-white` is deliberately NOT used here: white does not
+        // auto-invert, which would flip the contrast in dark mode.)
         {
             variant: 'solid',
             color: 'neutral',
@@ -9863,6 +9902,17 @@ function setFilter(model, field, next) {
         next
     ];
 }
+/**
+ * Shared `onKeyDown` for filter inputs — pressing Enter commits the
+ * filter (equivalent to clicking Apply). Without this the user has to
+ * leave the keyboard and click the button, which reads as broken for
+ * a single-field text filter.
+ */ function onEnterApply(e, apply) {
+    if (e.key === 'Enter') {
+        e.preventDefault();
+        apply();
+    }
+}
 const DEFAULT_FILTER_LABELS = {
     filterColumn: 'Filter',
     filterApply: 'Apply',
@@ -9948,6 +9998,11 @@ function FilterPanel(props) {
 function TextFilter(props) {
     const { field, current, onCommit, labels } = props;
     const [value, setValue] = useState(typeof (current == null ? void 0 : current.value) === 'string' ? current.value : '');
+    const apply = ()=>onCommit(value.trim() ? {
+            field,
+            op: 'contains',
+            value
+        } : null);
     return jsxs("div", {
         className: "flex flex-col gap-2 min-w-[200px]",
         children: [
@@ -9955,16 +10010,13 @@ function TextFilter(props) {
                 type: "text",
                 value: value,
                 onChange: (e)=>setValue(e.target.value),
+                onKeyDown: (e)=>onEnterApply(e, apply),
                 placeholder: "\u2026",
                 autoFocus: true,
                 className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
             }),
             jsx(FilterActions, {
-                onApply: ()=>onCommit(value.trim() ? {
-                        field,
-                        op: 'contains',
-                        value
-                    } : null),
+                onApply: apply,
                 onClear: ()=>{
                     setValue('');
                     onCommit(null);
@@ -10018,6 +10070,7 @@ function NumberRangeFilter(props) {
                                 type: "number",
                                 value: min,
                                 onChange: (e)=>setMin(e.target.value),
+                                onKeyDown: (e)=>onEnterApply(e, apply),
                                 autoFocus: true,
                                 className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
                             })
@@ -10033,6 +10086,7 @@ function NumberRangeFilter(props) {
                                 type: "number",
                                 value: max,
                                 onChange: (e)=>setMax(e.target.value),
+                                onKeyDown: (e)=>onEnterApply(e, apply),
                                 className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
                             })
                         ]
@@ -10141,6 +10195,7 @@ function DateRangeFilter(props) {
                                 type: "date",
                                 value: from,
                                 onChange: (e)=>setFrom(e.target.value),
+                                onKeyDown: (e)=>onEnterApply(e, apply),
                                 autoFocus: true,
                                 className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
                             })
@@ -10156,6 +10211,7 @@ function DateRangeFilter(props) {
                                 type: "date",
                                 value: to,
                                 onChange: (e)=>setTo(e.target.value),
+                                onKeyDown: (e)=>onEnterApply(e, apply),
                                 className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
                             })
                         ]
@@ -10215,8 +10271,7 @@ function FilterIcon() {
 const DEFAULT_VISIBILITY_LABELS = {
     columnsButton: 'Columns',
     columnsTitle: 'Toggle columns',
-    columnsShowAll: 'Show all',
-    columnsHideAll: 'Hide all'
+    columnsToggleAll: 'Toggle all columns'
 };
 function ColumnVisibilityTrigger(props) {
     const { cols, hiddenColumns, onChange, disabled, labels: labelsProp } = props;
@@ -10232,44 +10287,40 @@ function ColumnVisibilityTrigger(props) {
             field
         ]);
     };
-    const showAll = ()=>onChange([]);
-    const hideAll = ()=>onChange(hideableCols.map((c)=>c.field));
+    // Tri-state master: checked = every hideable column visible,
+    // unchecked = every one hidden, indeterminate = mixed.
+    const allVisible = hideableCols.every((c)=>!hiddenColumns.includes(c.field));
+    const allHidden = hideableCols.length > 0 && hideableCols.every((c)=>hiddenColumns.includes(c.field));
+    const someHidden = !allVisible && !allHidden;
+    // Standard select-all semantics: when everything is visible the
+    // master hides all; otherwise it shows all.
+    const toggleAll = ()=>{
+        onChange(allVisible ? hideableCols.map((c)=>c.field) : []);
+    };
     return jsx(Popover, {
         open: open,
         onOpenChange: setOpen,
         side: "bottom",
         align: "end",
         content: jsxs("div", {
-            className: "flex flex-col gap-2 min-w-[220px]",
+            className: "flex flex-col gap-1 min-w-[220px]",
             children: [
                 jsxs("div", {
-                    className: "flex items-center justify-between pb-2 border-b border-neutral-200",
+                    className: "flex items-center gap-2 px-1 pb-2 mb-1 border-b border-neutral-200",
                     children: [
+                        jsx("input", {
+                            type: "checkbox",
+                            "aria-label": labels.columnsToggleAll,
+                            checked: allVisible,
+                            ref: (el)=>{
+                                if (el) el.indeterminate = someHidden;
+                            },
+                            onChange: toggleAll,
+                            className: "cursor-pointer"
+                        }),
                         jsx("span", {
                             className: "text-xs font-semibold text-neutral-700 uppercase tracking-wide",
                             children: labels.columnsTitle
-                        }),
-                        jsxs("div", {
-                            className: "flex items-center gap-2",
-                            children: [
-                                jsx("button", {
-                                    type: "button",
-                                    onClick: showAll,
-                                    className: "text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline",
-                                    children: labels.columnsShowAll
-                                }),
-                                jsx("span", {
-                                    className: "text-neutral-300",
-                                    "aria-hidden": "true",
-                                    children: "\u00B7"
-                                }),
-                                jsx("button", {
-                                    type: "button",
-                                    onClick: hideAll,
-                                    className: "text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline",
-                                    children: labels.columnsHideAll
-                                })
-                            ]
                         })
                     ]
                 }),
@@ -10398,8 +10449,21 @@ function useColumnResize(args) {
         minWidth,
         maxWidth
     ]);
+    const nudge = useCallback((field, currentWidth, delta, clampMin, clampMax)=>{
+        const effectiveMin = Math.max(minWidth, clampMin);
+        const effectiveMax = Math.min(maxWidth, clampMax);
+        const next = clamp(currentWidth + delta, effectiveMin, effectiveMax);
+        onChange(_extends({}, widthsRef.current, {
+            [field]: next
+        }));
+    }, [
+        onChange,
+        minWidth,
+        maxWidth
+    ]);
     return {
-        startResize
+        startResize,
+        nudge
     };
 }
 function clamp(n, min, max) {
@@ -10494,6 +10558,7 @@ function arraysEqual(a, b) {
 const DEFAULT_LABELS = {
     searchPlaceholder: 'Search...',
     noData: 'No data',
+    noResults: 'No matching results',
     loading: 'Loading…',
     ariaSortNone: 'Not sorted. Click to sort ascending.',
     ariaSortAscending: 'Sorted ascending. Click to sort descending.',
@@ -10520,8 +10585,7 @@ const DEFAULT_LABELS = {
     densitySpacious: 'Spacious',
     columnsButton: 'Columns',
     columnsTitle: 'Toggle columns',
-    columnsShowAll: 'Show all',
-    columnsHideAll: 'Hide all'
+    columnsToggleAll: 'Toggle all columns'
 };
 /**
  * Dashforge TW `<DataGrid>` — virtualized data table.
@@ -10609,7 +10673,7 @@ const DEFAULT_LABELS = {
         defaultValue: defaultColumnWidths,
         onChange: onColumnWidthsChange
     });
-    const { startResize } = useColumnResize({
+    const { startResize, nudge: nudgeColumnWidth } = useColumnResize({
         widths: columnWidths,
         onChange: setColumnWidths
     });
@@ -10626,6 +10690,22 @@ const DEFAULT_LABELS = {
         order: columnOrder,
         onChange: setColumnOrder
     });
+    // Column reorder rides on native HTML5 drag-and-drop, whose
+    // `dragstart` / `drop` events DO NOT fire for touch input. On a
+    // coarse-pointer device the drag would be a dead affordance — so
+    // we detect the primary pointer and gate reorder off there. Mouse
+    // / trackpad / pen (fine pointer) keep the feature. A pointer-event
+    // based reorder that also covers touch is tracked as a follow-up
+    // in REFINEMENT-NOTES.md.
+    const [coarsePointer, setCoarsePointer] = useState(false);
+    useEffect(()=>{
+        if (typeof window === 'undefined' || !window.matchMedia) return;
+        const mq = window.matchMedia('(pointer: coarse)');
+        setCoarsePointer(mq.matches);
+        const onChange = (e)=>setCoarsePointer(e.matches);
+        mq.addEventListener('change', onChange);
+        return ()=>mq.removeEventListener('change', onChange);
+    }, []);
     // Apply the active order to the columns list. Cols not in the
     // order array (e.g. newly-added columns at runtime) are appended
     // in their original position from `cols`.
@@ -10780,8 +10860,7 @@ const DEFAULT_LABELS = {
                         labels: {
                             columnsButton: labels.columnsButton,
                             columnsTitle: labels.columnsTitle,
-                            columnsShowAll: labels.columnsShowAll,
-                            columnsHideAll: labels.columnsHideAll
+                            columnsToggleAll: labels.columnsToggleAll
                         }
                     })
                 ]
@@ -10795,6 +10874,7 @@ const DEFAULT_LABELS = {
                 } : undefined,
                 children: jsxs("table", {
                     className: cn(v.table(), slotProps == null ? void 0 : (_slotProps_table = slotProps.table) == null ? void 0 : _slotProps_table.className),
+                    "aria-rowcount": effectiveTotalCount > 0 ? effectiveTotalCount + 1 : -1,
                     children: [
                         caption != null && jsx("caption", {
                             className: cn(!showCaption && 'sr-only', 'py-2 text-sm text-neutral-500'),
@@ -10803,6 +10883,7 @@ const DEFAULT_LABELS = {
                         jsx("thead", {
                             className: cn(stickyHeader ? v.thead() : 'bg-neutral-50', slotProps == null ? void 0 : (_slotProps_thead = slotProps.thead) == null ? void 0 : _slotProps_thead.className),
                             children: jsxs("tr", {
+                                "aria-rowindex": 1,
                                 className: cn(v.headerRow(), slotProps == null ? void 0 : (_slotProps_headerRow = slotProps.headerRow) == null ? void 0 : _slotProps_headerRow.className),
                                 children: [
                                     showSelectionColumn && jsx("th", {
@@ -10832,7 +10913,8 @@ const DEFAULT_LABELS = {
                                             effectiveWidth: resolveColumnWidth(col, columnWidths),
                                             resizable: enableColumnResize && col.resizable !== false,
                                             startResize: startResize,
-                                            reorderable: enableColumnReorder && col.reorderable !== false,
+                                            nudgeColumnWidth: nudgeColumnWidth,
+                                            reorderable: enableColumnReorder && col.reorderable !== false && !coarsePointer,
                                             reorderHandlers: reorderHandlers,
                                             labels: labels,
                                             className: cn(v.headerCell(), col.sticky === 'left' && v.stickyLeftHeaderCell(), col.sticky === 'right' && v.stickyRightHeaderCell(), slotProps == null ? void 0 : (_slotProps_headerCell = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell.className),
@@ -10861,7 +10943,11 @@ const DEFAULT_LABELS = {
                             }) : sortedRows.length === 0 ? renderEmptyState({
                                 totalColumnCount,
                                 emptyState,
-                                fallback: labels.noData,
+                                // Distinguish a genuinely empty dataset from one
+                                // emptied by an active search / filter (works for
+                                // server-side mode too — a query that returns 0
+                                // rows still reads as "no matching results").
+                                fallback: rows.length > 0 && (debouncedSearchQuery.trim().length > 0 || filterModel.length > 0) ? labels.noResults : labels.noData,
                                 cellClass: cn(v.cell(), v.emptyState(), slotProps == null ? void 0 : (_slotProps_emptyState = slotProps.emptyState) == null ? void 0 : _slotProps_emptyState.className)
                             }) : renderVirtualizedBody({
                                 vWindow,
@@ -10929,7 +11015,8 @@ const DEFAULT_LABELS = {
 }
 // ───── Header cell ─────
 function HeaderCell(props) {
-    const { col, sortModel, onSortClick, inferredType, filterModel, onFilterChange, effectiveWidth, resizable, startResize, reorderable, reorderHandlers, labels, className, buttonClassName, disabled } = props;
+    var _col_minWidth, _col_maxWidth;
+    const { col, sortModel, onSortClick, inferredType, filterModel, onFilterChange, effectiveWidth, resizable, startResize, nudgeColumnWidth, reorderable, reorderHandlers, labels, className, buttonClassName, disabled } = props;
     const align = resolveAlign(col, inferredType);
     const alignClass = align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
     const sortEntry = sortModel.find((s)=>s.field === col.field);
@@ -10956,20 +11043,42 @@ function HeaderCell(props) {
         onDrop: reorderHandlers.drop(col.field),
         onDragEnd: reorderHandlers.dragEnd
     } : {};
+    // Resize bounds — shared by the pointer-drag and keyboard paths.
+    const resizeMin = (_col_minWidth = col.minWidth) != null ? _col_minWidth : 40;
+    const resizeMax = (_col_maxWidth = col.maxWidth) != null ? _col_maxWidth : 1200;
+    // Keyboard nudge step: 16px, or 64px with Shift held (coarse).
+    const measureWidth = (handle)=>{
+        var _ref;
+        var _handle_parentElement;
+        return (_ref = effectiveWidth != null ? effectiveWidth : (_handle_parentElement = handle.parentElement) == null ? void 0 : _handle_parentElement.getBoundingClientRect().width) != null ? _ref : 120;
+    };
     const resizeHandle = resizable ? jsx("span", {
         role: "separator",
         "aria-orientation": "vertical",
         "aria-label": `Resize ${typeof col.header === 'string' ? col.header : col.field}`,
+        "aria-valuemin": resizeMin,
+        "aria-valuemax": resizeMax,
+        "aria-valuenow": effectiveWidth != null ? effectiveWidth : undefined,
+        // Keyboard-operable: focusable + ArrowLeft/Right resize. WCAG 2.1
+        // keyboard operability — the drag is no longer the only path.
+        tabIndex: disabled ? -1 : 0,
+        // D6 guard: the parent `<th>` is `draggable` when reorderable;
+        // marking the handle non-draggable means grabbing the handle
+        // starts a RESIZE, never a column-reorder drag.
+        draggable: false,
         onPointerDown: (e)=>{
-            var _ref, _col_minWidth, _col_maxWidth;
-            const handle = e.currentTarget;
-            const th = handle.parentElement;
-            const startWidth = (_ref = effectiveWidth != null ? effectiveWidth : th == null ? void 0 : th.getBoundingClientRect().width) != null ? _ref : 120;
-            const min = (_col_minWidth = col.minWidth) != null ? _col_minWidth : 40;
-            const max = (_col_maxWidth = col.maxWidth) != null ? _col_maxWidth : 1200;
-            startResize(col.field, startWidth, min, max)(e);
-        },
-        className: cn('absolute top-0 bottom-0 right-0 w-1.5', 'cursor-col-resize select-none touch-none', 'hover:bg-primary-300 active:bg-primary-400', 'transition-colors motion-reduce:transition-none')
+            const startWidth = measureWidth(e.currentTarget);
+            startResize(col.field, startWidth, resizeMin, resizeMax)(e);
+        },
+        onKeyDown: (e)=>{
+            if (disabled) return;
+            if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+            e.preventDefault();
+            const step = (e.shiftKey ? 64 : 16) * (e.key === 'ArrowLeft' ? -1 : 1);
+            const current = measureWidth(e.currentTarget);
+            nudgeColumnWidth(col.field, current, step, resizeMin, resizeMax);
+        },
+        className: cn('absolute top-0 bottom-0 right-0 w-1.5', 'cursor-col-resize select-none touch-none', 'hover:bg-primary-300 active:bg-primary-400', 'focus:outline-none focus-visible:bg-primary-400', 'transition-colors motion-reduce:transition-none')
     }) : null;
     const filterType = col.filterable ? resolveFilterType(col, inferredType) : null;
     const filterTrigger = col.filterable && filterType ? jsx(ColumnFilterTrigger, {
@@ -11096,6 +11205,7 @@ function renderVirtualizedBody(args) {
                 const rowId = getRowId(row, absoluteIdx);
                 const isSelected = selection.isSelected(rowId);
                 return jsxs("tr", {
+                    "aria-rowindex": absoluteIdx + 2,
                     "data-selected": isSelected ? 'true' : 'false',
                     "aria-selected": rowSelection !== 'none' ? isSelected : undefined,
                     className: classes.row,

package/dist/src/components/DataGrid/DataGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AA0CzD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,kDAkhBjE"}
+{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AA0CzD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,kDA6jBjE"}

package/dist/src/components/DataGrid/filters/ColumnFilters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnFilters.d.ts","sourceRoot":"","sources":["../../../../../src/components/DataGrid/filters/ColumnFilters.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,gBAAgB,EAChB,eAAe,EAChB,MAAM,4BAA4B,CAAC;AAqCpC,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAiBD,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,cAAc,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAkDlE"}
+{"version":3,"file":"ColumnFilters.d.ts","sourceRoot":"","sources":["../../../../../src/components/DataGrid/filters/ColumnFilters.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,gBAAgB,EAChB,eAAe,EAChB,MAAM,4BAA4B,CAAC;AAqDpC,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAiBD,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,cAAc,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAkDlE"}

package/dist/src/components/DataGrid/resize/useColumnResize.d.ts

@@ -27,6 +27,13 @@ export interface UseColumnResizeArgs {
 }
 export interface ColumnResizeHandlers {
     startResize: (field: string, startWidth: number, clampMin: number, clampMax: number) => (e: RPointerEvent<HTMLElement>) => void;
+    /**
+     * Commit a single clamped width delta — the keyboard-resize path.
+     * Wired to ArrowLeft/ArrowRight on the focused resize handle so the
+     * feature is reachable without a pointer (WCAG 2.1 — keyboard
+     * operability). Same clamping as the drag path.
+     */
+    nudge: (field: string, currentWidth: number, delta: number, clampMin: number, clampMax: number) => void;
 }
 export declare function useColumnResize(args: UseColumnResizeArgs): ColumnResizeHandlers;
 //# sourceMappingURL=useColumnResize.d.ts.map

package/dist/src/components/DataGrid/resize/useColumnResize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useColumnResize.d.ts","sourceRoot":"","sources":["../../../../../src/components/DataGrid/resize/useColumnResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,YAAY,IAAI,aAAa,EAAE,MAAM,OAAO,CAAC;AAEhF;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,WAAW,mBAAmB;IAClC,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,8BAA8B;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACjD,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,CACX,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,KACb,CAAC,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,mBAAmB,GAAG,oBAAoB,CA4D/E"}
+{"version":3,"file":"useColumnResize.d.ts","sourceRoot":"","sources":["../../../../../src/components/DataGrid/resize/useColumnResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,YAAY,IAAI,aAAa,EAAE,MAAM,OAAO,CAAC;AAEhF;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,WAAW,mBAAmB;IAClC,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,8BAA8B;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACjD,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,CACX,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,KACb,CAAC,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7C;;;;;OAKG;IACH,KAAK,EAAE,CACL,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;CACX;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,mBAAmB,GAAG,oBAAoB,CA4E/E"}

package/dist/src/components/DataGrid/visibility/ColumnVisibilityMenu.d.ts

@@ -26,8 +26,12 @@ import type { TableColumn } from '../../Table/table.types.js';
 export interface ColumnVisibilityLabels {
     columnsButton?: string;
     columnsTitle?: string;
-    columnsShowAll?: string;
-    columnsHideAll?: string;
+    /**
+     * Accessible label for the tri-state master checkbox that
+     * shows/hides every hideable column at once. Not shown as visible
+     * text — surfaced to assistive tech via `aria-label`.
+     */
+    columnsToggleAll?: string;
 }
 export interface ColumnVisibilityTriggerProps<T extends object> {
     cols: TableColumn<T>[];

package/dist/src/components/DataGrid/visibility/ColumnVisibilityMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnVisibilityMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/DataGrid/visibility/ColumnVisibilityMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,MAAM,WAAW,sBAAsB;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AASD,MAAM,WAAW,4BAA4B,CAAC,CAAC,SAAS,MAAM;IAC5D,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,sBAAsB,CAAC;CACjC;AAED,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,MAAM,EACtD,KAAK,EAAE,4BAA4B,CAAC,CAAC,CAAC,2CA6FvC"}
+{"version":3,"file":"ColumnVisibilityMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/DataGrid/visibility/ColumnVisibilityMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,MAAM,WAAW,sBAAsB;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAQD,MAAM,WAAW,4BAA4B,CAAC,CAAC,SAAS,MAAM;IAC5D,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,sBAAsB,CAAC;CACjC;AAED,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,MAAM,EACtD,KAAK,EAAE,4BAA4B,CAAC,CAAC,CAAC,2CA2GvC"}

package/dist/src/components/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CAyExC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CAkFxC"}

package/dist/src/components/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACV,UAAU,EAKX,MAAM,kBAAkB,CAAC;AAqC1B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,kDAgW3D"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACV,UAAU,EAKX,MAAM,kBAAkB,CAAC;AAqC1B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,kDAgY3D"}

package/dist/src/components/Table/cells/RenderChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/cells/RenderChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAsEhB,CAAC;AAEH,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAOhD"}
+{"version":3,"file":"RenderChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/cells/RenderChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAmEhB,CAAC;AAEH,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAOhD"}

package/dist/src/components/Table/table.types.d.ts

@@ -215,7 +215,14 @@ export type TableRowSelectionMode = 'none' | 'single' | 'multiple';
  */
 export interface TableLabels {
     searchPlaceholder?: string;
+    /** Shown when the dataset itself is empty (0 input rows). */
     noData?: string;
+    /**
+     * Shown when the dataset has rows but an active search / filter
+     * excluded them all. Distinct from `noData` so the user can tell
+     * "nothing here" from "nothing matches your query".
+     */
+    noResults?: string;
     loading?: string;
     ariaSortNone?: string;
     ariaSortAscending?: string;
@@ -248,8 +255,8 @@ export interface TableLabels {
     /** Column visibility menu (Popover-based, auto-commit). */
     columnsButton?: string;
     columnsTitle?: string;
-    columnsShowAll?: string;
-    columnsHideAll?: string;
+    /** Aria-label for the tri-state show/hide-all master checkbox. */
+    columnsToggleAll?: string;
 }
 export interface TableSlotProps {
     root?: {
@@ -335,7 +342,25 @@ export interface TableExpandableConfig<T> {
 export interface TableProps<T extends object> extends Pick<TableVariants, 'variant' | 'size' | 'density'> {
     rows: T[];
     cols: TableColumn<T>[];
-    /** Stable row id resolver. Default: positional index. */
+    /**
+     * Stable row-id resolver — the React key + the identity used by
+     * selection and row-expansion state.
+     *
+     * **Strongly recommended whenever sort / search / selection /
+     * expandable rows are used.** The default falls back to the
+     * positional index (`String(index)`); once rows reorder (sort) or
+     * change presence (search / filter), index `2` points at a
+     * *different* row, so selection and expansion state silently jump
+     * to the wrong rows. Pass a value derived from the data itself:
+     *
+     * ```tsx
+     * <Table getRowId={(row) => row.id} … />
+     * ```
+     *
+     * Dashforge emits a `console.warn` in development when `getRowId`
+     * is omitted and one of those features is active. (`<DataGrid>`
+     * makes this prop required for the same reason.)
+     */
     getRowId?: (row: T, index: number) => string;
     sortModel?: TableSortModel;
     onSortChange?: (model: TableSortModel) => void;