@dashforge/tw 0.8.0-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.',
@@ -8675,11 +8692,8 @@ const DEFAULT_LABELS$1 = {
     densityComfortable: 'Comfortable',
     densitySpacious: 'Spacious',
     columnsButton: 'Columns',
-    columnsTitle: 'Manage columns',
-    columnsDescription: 'Show or hide columns. Required columns cannot be toggled.',
-    columnsShowAll: 'Show all',
-    columnsHideAll: 'Hide all',
-    columnsDone: 'Done'
+    columnsTitle: 'Toggle columns',
+    columnsToggleAll: 'Toggle all columns'
 };
 const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
 /**
@@ -8708,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,
@@ -8863,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;
@@ -9085,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", {
@@ -9326,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',
@@ -9865,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',
@@ -9950,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: [
@@ -9957,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);
@@ -10020,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"
                             })
@@ -10035,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"
                             })
                         ]
@@ -10143,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"
                             })
@@ -10158,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"
                             })
                         ]
@@ -10216,11 +10270,8 @@ function FilterIcon() {
 
 const DEFAULT_VISIBILITY_LABELS = {
     columnsButton: 'Columns',
-    columnsTitle: 'Manage columns',
-    columnsDescription: 'Show or hide columns. Required columns cannot be toggled.',
-    columnsShowAll: 'Show all',
-    columnsHideAll: 'Hide all',
-    columnsDone: 'Done'
+    columnsTitle: 'Toggle columns',
+    columnsToggleAll: 'Toggle all columns'
 };
 function ColumnVisibilityTrigger(props) {
     const { cols, hiddenColumns, onChange, disabled, labels: labelsProp } = props;
@@ -10230,118 +10281,87 @@ function ColumnVisibilityTrigger(props) {
     // defaults to `true` — a column is hideable unless explicitly opted
     // out with `hideable: false` (structurally required column).
     const hideableCols = cols.filter((c)=>c.hideable !== false);
-    return jsxs(Fragment$1, {
-        children: [
-            jsxs("button", {
-                type: "button",
-                onClick: ()=>setOpen(true),
-                disabled: disabled,
-                className: cn('inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md', 'text-sm text-neutral-700 hover:text-neutral-900', 'border border-neutral-300 bg-neutral-50 hover:bg-neutral-100', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', 'transition-colors motion-reduce:transition-none', 'disabled:opacity-50 disabled:cursor-not-allowed'),
-                children: [
-                    jsx(ColumnsIcon, {}),
-                    jsx("span", {
-                        children: labels.columnsButton
-                    })
-                ]
-            }),
-            jsx(Dialog, {
-                open: open,
-                onOpenChange: setOpen,
-                title: labels.columnsTitle,
-                description: labels.columnsDescription,
-                size: "sm",
-                children: jsx(ColumnVisibilityBody, {
-                    cols: hideableCols,
-                    hiddenColumns: hiddenColumns,
-                    onChange: onChange,
-                    onDone: ()=>setOpen(false),
-                    labels: labels
-                })
-            })
-        ]
-    });
-}
-// ───── Dialog body ─────
-function ColumnVisibilityBody(props) {
-    const { cols, hiddenColumns, onChange, onDone, labels } = props;
-    // Local draft so the user can stage changes; commit on Done.
-    const [draft, setDraft] = useState(hiddenColumns);
-    // Re-sync when the dialog re-opens with a different external state.
-    useEffect(()=>{
-        setDraft(hiddenColumns);
-    }, [
-        hiddenColumns
-    ]);
     const toggle = (field)=>{
-        setDraft((prev)=>prev.includes(field) ? prev.filter((f)=>f !== field) : [
-                ...prev,
-                field
-            ]);
+        onChange(hiddenColumns.includes(field) ? hiddenColumns.filter((f)=>f !== field) : [
+            ...hiddenColumns,
+            field
+        ]);
     };
-    const showAll = ()=>setDraft([]);
-    const hideAll = ()=>setDraft(cols.map((c)=>c.field));
-    return jsxs("div", {
-        className: "flex flex-col gap-3",
-        children: [
-            jsxs("div", {
-                className: "flex items-center gap-2 pb-2 border-b border-neutral-200",
-                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",
-                        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
-                    })
-                ]
-            }),
-            jsx("ul", {
-                className: "flex flex-col gap-1.5 max-h-72 overflow-auto",
-                children: cols.map((col)=>{
-                    const field = col.field;
-                    const hidden = draft.includes(field);
-                    const header = typeof col.header === 'function' ? col.header() : col.header;
-                    return jsx("li", {
-                        children: jsxs("label", {
-                            className: "flex items-center gap-2 cursor-pointer py-1 px-1 rounded hover:bg-neutral-100",
-                            children: [
-                                jsx("input", {
-                                    type: "checkbox",
-                                    checked: !hidden,
-                                    onChange: ()=>toggle(field),
-                                    className: "cursor-pointer"
-                                }),
-                                jsx("span", {
-                                    className: "text-sm text-neutral-900",
-                                    children: header
-                                })
-                            ]
+    // 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-1 min-w-[220px]",
+            children: [
+                jsxs("div", {
+                    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
                         })
-                    }, field);
+                    ]
+                }),
+                jsx("ul", {
+                    className: "flex flex-col gap-0.5 max-h-72 overflow-auto",
+                    children: hideableCols.map((col)=>{
+                        const field = col.field;
+                        const hidden = hiddenColumns.includes(field);
+                        const header = typeof col.header === 'function' ? col.header() : col.header;
+                        return jsx("li", {
+                            children: jsxs("label", {
+                                className: "flex items-center gap-2 cursor-pointer py-1 px-1 rounded hover:bg-neutral-100",
+                                children: [
+                                    jsx("input", {
+                                        type: "checkbox",
+                                        checked: !hidden,
+                                        onChange: ()=>toggle(field),
+                                        className: "cursor-pointer"
+                                    }),
+                                    jsx("span", {
+                                        className: "text-sm text-neutral-900",
+                                        children: header
+                                    })
+                                ]
+                            })
+                        }, field);
+                    })
                 })
-            }),
-            jsx("div", {
-                className: "flex justify-end gap-2 pt-2 border-t border-neutral-200",
-                children: jsx("button", {
-                    type: "button",
-                    onClick: ()=>{
-                        onChange(draft);
-                        onDone();
-                    },
-                    className: "text-sm bg-primary-500 text-white rounded-md hover:bg-primary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 px-3 py-1.5",
-                    children: labels.columnsDone
+            ]
+        }),
+        children: jsxs("button", {
+            type: "button",
+            disabled: disabled,
+            className: cn('inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md', 'text-sm text-neutral-700 hover:text-neutral-900', 'border border-neutral-300 bg-neutral-50 hover:bg-neutral-100', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', 'transition-colors motion-reduce:transition-none', 'disabled:opacity-50 disabled:cursor-not-allowed'),
+            children: [
+                jsx(ColumnsIcon, {}),
+                jsx("span", {
+                    children: labels.columnsButton
                 })
-            })
-        ]
+            ]
+        })
     });
 }
 // ───── Icon ─────
@@ -10429,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) {
@@ -10525,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.',
@@ -10550,11 +10584,8 @@ const DEFAULT_LABELS = {
     densityComfortable: 'Comfortable',
     densitySpacious: 'Spacious',
     columnsButton: 'Columns',
-    columnsTitle: 'Manage columns',
-    columnsDescription: 'Show or hide columns. Required columns cannot be toggled.',
-    columnsShowAll: 'Show all',
-    columnsHideAll: 'Hide all',
-    columnsDone: 'Done'
+    columnsTitle: 'Toggle columns',
+    columnsToggleAll: 'Toggle all columns'
 };
 /**
  * Dashforge TW `<DataGrid>` — virtualized data table.
@@ -10642,7 +10673,7 @@ const DEFAULT_LABELS = {
         defaultValue: defaultColumnWidths,
         onChange: onColumnWidthsChange
     });
-    const { startResize } = useColumnResize({
+    const { startResize, nudge: nudgeColumnWidth } = useColumnResize({
         widths: columnWidths,
         onChange: setColumnWidths
     });
@@ -10659,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`.
@@ -10805,7 +10852,7 @@ const DEFAULT_LABELS = {
                         ]
                     }),
                     enableColumnVisibility && jsx(ColumnVisibilityTrigger, {
-                        cols: cols.filter((c)=>// RBAC-hidden columns are never offered in the dialog.
+                        cols: cols.filter((c)=>// RBAC-hidden columns are never offered in the menu.
                             !c.access || c.access.onUnauthorized !== 'hide'),
                         hiddenColumns: hiddenColumns,
                         onChange: setHiddenColumns,
@@ -10813,10 +10860,7 @@ const DEFAULT_LABELS = {
                         labels: {
                             columnsButton: labels.columnsButton,
                             columnsTitle: labels.columnsTitle,
-                            columnsDescription: labels.columnsDescription,
-                            columnsShowAll: labels.columnsShowAll,
-                            columnsHideAll: labels.columnsHideAll,
-                            columnsDone: labels.columnsDone
+                            columnsToggleAll: labels.columnsToggleAll
                         }
                     })
                 ]
@@ -10830,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'),
@@ -10838,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", {
@@ -10867,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),
@@ -10896,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,
@@ -10964,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);
@@ -10991,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, {
@@ -11131,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;AA6CzD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,kDAohBjE"}
+{"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"}