@dashforge/tw 0.8.1-beta → 0.9.1-beta

package/dist/index.esm.js

@@ -11,10 +11,11 @@ import { useDashFieldMeta } from '@dashforge/forms';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as RadixSwitch from '@radix-ui/react-switch';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+import { useCalendar, resolveCalendarKey, formatLongDate, parseISODate } from '@dashforge/calendar-core';
+import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadixAccordion from '@radix-ui/react-accordion';
 
 function _extends() {
@@ -3754,6 +3755,632 @@ const defaultGetOptionDisabled = (option)=>Boolean(option.disabled);
     });
 }
 
+/**
+ * Structural slots for `<Calendar>`.
+ *
+ * Theme identity: every class is a bare neutral / brand token-backed
+ * Tailwind class. The `dashforgePreset()` CSS-variable swap auto-inverts
+ * the neutral palette, so there are NO `dark:` variants here (a `dark:` on
+ * a neutral class would double-invert — see `_shared/themeIdentity.test.ts`).
+ */ const calendarVariants = tv({
+    slots: {
+        root: 'inline-flex w-fit flex-col gap-2 rounded-lg border border-neutral-200 bg-neutral-50 p-3 select-none',
+        header: 'flex items-center justify-between gap-1',
+        navButton: 'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-[1rem] text-neutral-600 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:pointer-events-none disabled:opacity-40',
+        monthLabel: 'flex-1 text-center text-sm font-semibold text-neutral-900',
+        grid: 'flex flex-col gap-1 focus:outline-none',
+        weekdayRow: 'grid grid-cols-7 gap-1',
+        weekday: 'flex h-8 items-center justify-center text-xs font-semibold text-neutral-500',
+        weekRow: 'grid grid-cols-7 gap-1'
+    },
+    variants: {
+        disabled: {
+            true: {
+                root: 'opacity-60'
+            }
+        }
+    },
+    defaultVariants: {
+        disabled: false
+    }
+});
+/**
+ * Per-day-cell recipe. Each of the 42 grid cells is rendered with its own
+ * state (`siblingMonth` / `today` / `selected` / `disabled`).
+ */ const calendarDayVariants = tv({
+    base: 'flex h-9 w-9 items-center justify-center rounded-md text-sm text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500',
+    variants: {
+        siblingMonth: {
+            true: 'text-neutral-400'
+        },
+        today: {
+            true: 'font-bold ring-1 ring-inset ring-primary-400'
+        },
+        selected: {
+            true: 'bg-primary-600 text-white hover:bg-primary-600'
+        },
+        disabled: {
+            true: 'cursor-default text-neutral-300 opacity-60 hover:bg-transparent'
+        }
+    },
+    compoundVariants: [
+        // A selected cell drops the "today" ring — the solid fill is enough.
+        {
+            selected: true,
+            today: true,
+            class: 'ring-0'
+        }
+    ],
+    defaultVariants: {
+        siblingMonth: false,
+        today: false,
+        selected: false,
+        disabled: false
+    }
+});
+
+// Inline 16×16 stroke chevrons — no icon dependency (tw convention).
+function ChevronLeftIcon() {
+    return jsx("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true",
+        children: jsx("path", {
+            d: "M10 4 6 8l4 4",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+}
+function ChevronRightIcon$1() {
+    return jsx("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true",
+        children: jsx("path", {
+            d: "m6 4 4 4-4 4",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+}
+/**
+ * `<Calendar>` — a standalone, inline month-grid date picker.
+ *
+ * The Tailwind presentation layer over the headless `useCalendar` engine
+ * from `@dashforge/calendar-core` (the same engine the MUI `@dashforge/ui`
+ * calendar consumes — only the skin differs). Implements the WCAG grid
+ * pattern with roving tab-index focus.
+ *
+ * It is a primitive: no form-bridge / RBAC integration — use `<DatePicker>`
+ * for a form-bound date field.
+ */ function Calendar(props) {
+    var _slotProps_root, _slotProps_header, _slotProps_grid;
+    const { value, defaultValue, onChange, month, year, defaultMonth, defaultYear, onMonthChange, minDate, maxDate, disabledDates, isDateDisabled, weekStartDay, locale, today, disabled = false, autoFocus = false, sx, slotProps, testId, 'aria-label': ariaLabel = 'Calendar' } = props;
+    const isValueControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue != null ? defaultValue : null);
+    const selectedValue = isValueControlled ? value : internalValue;
+    const handleSelect = useCallback((iso)=>{
+        if (!isValueControlled) {
+            setInternalValue(iso);
+        }
+        onChange == null ? void 0 : onChange(iso);
+    }, [
+        isValueControlled,
+        onChange
+    ]);
+    const calendar = useCalendar({
+        selected: selectedValue,
+        month,
+        year,
+        defaultMonth,
+        defaultYear,
+        onMonthChange,
+        minDate,
+        maxDate,
+        disabledDates,
+        isDateDisabled,
+        weekStartDay,
+        locale,
+        today,
+        onSelect: handleSelect
+    });
+    // Roving focus: the active day cell holds DOM focus; it is moved only
+    // after a keyboard interaction (or on mount when `autoFocus`). `focus`
+    // uses `preventScroll` so opening the calendar inside a popup never
+    // scroll-jumps the page before the popup is positioned.
+    const focusedCellRef = useRef(null);
+    const shouldFocusRef = useRef(autoFocus);
+    useEffect(()=>{
+        if (shouldFocusRef.current && focusedCellRef.current) {
+            focusedCellRef.current.focus({
+                preventScroll: true
+            });
+            shouldFocusRef.current = false;
+        }
+    }, [
+        calendar.focusedDate
+    ]);
+    const handleKeyDown = useCallback((event)=>{
+        if (disabled) {
+            return;
+        }
+        const action = resolveCalendarKey(event.key);
+        if (action === null) {
+            return;
+        }
+        event.preventDefault();
+        shouldFocusRef.current = true;
+        switch(action){
+            case 'select':
+                calendar.selectDate(calendar.focusedDate);
+                break;
+            case 'monthForward':
+                calendar.goToNextMonth();
+                break;
+            case 'monthBackward':
+                calendar.goToPreviousMonth();
+                break;
+            default:
+                calendar.navigate(action);
+        }
+    }, [
+        disabled,
+        calendar
+    ]);
+    const resolvedLocale = locale != null ? locale : 'en-US';
+    const v = calendarVariants({
+        disabled
+    });
+    return jsxs("div", {
+        "data-testid": testId,
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        children: [
+            jsxs("div", {
+                className: cn(v.header(), slotProps == null ? void 0 : (_slotProps_header = slotProps.header) == null ? void 0 : _slotProps_header.className),
+                children: [
+                    jsx("button", {
+                        type: "button",
+                        className: v.navButton(),
+                        disabled: disabled,
+                        "aria-label": "Previous month",
+                        onClick: ()=>{
+                            calendar.goToPreviousMonth();
+                        },
+                        children: jsx(ChevronLeftIcon, {})
+                    }),
+                    jsx("span", {
+                        "aria-live": "polite",
+                        className: v.monthLabel(),
+                        children: calendar.monthLabel
+                    }),
+                    jsx("button", {
+                        type: "button",
+                        className: v.navButton(),
+                        disabled: disabled,
+                        "aria-label": "Next month",
+                        onClick: ()=>{
+                            calendar.goToNextMonth();
+                        },
+                        children: jsx(ChevronRightIcon$1, {})
+                    })
+                ]
+            }),
+            jsxs("div", {
+                role: "grid",
+                "aria-label": ariaLabel,
+                onKeyDown: handleKeyDown,
+                className: cn(v.grid(), slotProps == null ? void 0 : (_slotProps_grid = slotProps.grid) == null ? void 0 : _slotProps_grid.className),
+                children: [
+                    jsx("div", {
+                        role: "row",
+                        className: v.weekdayRow(),
+                        children: calendar.weekdayNames.map((dayName, index)=>jsx("span", {
+                                role: "columnheader",
+                                className: v.weekday(),
+                                children: dayName
+                            }, `weekday-${String(index)}`))
+                    }),
+                    calendar.weeks.map((week)=>jsx("div", {
+                            role: "row",
+                            className: v.weekRow(),
+                            children: week.days.map((day)=>{
+                                var _slotProps_day;
+                                const isActiveCell = day.iso === calendar.focusedDate;
+                                return jsx("span", {
+                                    role: "gridcell",
+                                    className: "flex",
+                                    children: jsx("button", {
+                                        type: "button",
+                                        ref: isActiveCell ? focusedCellRef : null,
+                                        tabIndex: isActiveCell ? 0 : -1,
+                                        disabled: disabled,
+                                        "aria-label": formatLongDate({
+                                            year: day.year,
+                                            month: day.month,
+                                            day: day.day
+                                        }, resolvedLocale),
+                                        "aria-current": day.isToday ? 'date' : undefined,
+                                        "aria-pressed": day.isSelected,
+                                        "aria-disabled": day.isDisabled,
+                                        onClick: ()=>{
+                                            calendar.selectDate(day.iso);
+                                        },
+                                        className: cn(calendarDayVariants({
+                                            siblingMonth: day.isSiblingMonth,
+                                            today: day.isToday,
+                                            selected: day.isSelected,
+                                            disabled: day.isDisabled
+                                        }), slotProps == null ? void 0 : (_slotProps_day = slotProps.day) == null ? void 0 : _slotProps_day.className),
+                                        children: day.day
+                                    })
+                                }, day.iso);
+                            })
+                        }, week.key))
+                ]
+            })
+        ]
+    });
+}
+
+const popoverVariants = tv({
+    slots: {
+        content: [
+            // Neutral border auto-inverts via CSS-var swap.
+            'z-50 rounded-md border border-neutral-200',
+            // bg-white hardcoded (no auto-invert) so `dark:` is required.
+            // Target `dark:bg-neutral-100` resolves to #171717 in dark mode
+            // (one elevation tier above the page surface).
+            'bg-white dark:bg-neutral-100 p-4 shadow-lg',
+            // Text auto-inverts.
+            'text-sm text-neutral-900',
+            'focus:outline-none',
+            'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+            'motion-reduce:transition-none motion-reduce:duration-0'
+        ],
+        // Arrow follows content bg: `fill-white` in light + matching dark target.
+        arrow: 'fill-white dark:fill-neutral-100'
+    }
+});
+
+/**
+ * Dashforge TW `<Popover>` — clickable floating content panel.
+ *
+ * Built on `@radix-ui/react-popover`:
+ *  - Focus trap inside the popover (Tab cycles within).
+ *  - Outside-click + Escape dismiss.
+ *  - APG dialog-like semantics (`role="dialog"` on content).
+ *  - Portal-rendered.
+ *
+ * Use `<Popover>` for menus / pickers / settings panels with
+ * interactive children. Use `<Tooltip>` for read-only hints.
+ */ function Popover(props) {
+    var _slotProps_content, _slotProps_arrow;
+    const { children, content, side = 'bottom', align = 'center', showArrow = false, open, onOpenChange, sideOffset = 8, width, slotProps } = props;
+    const v = popoverVariants();
+    return jsxs(RadixPopover.Root, {
+        open: open,
+        onOpenChange: onOpenChange,
+        children: [
+            jsx(RadixPopover.Trigger, {
+                asChild: true,
+                children: children
+            }),
+            jsx(RadixPopover.Portal, {
+                children: jsxs(RadixPopover.Content, {
+                    side: side,
+                    align: align,
+                    sideOffset: sideOffset,
+                    style: width != null ? {
+                        width
+                    } : undefined,
+                    className: cn(v.content(), slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className),
+                    children: [
+                        content,
+                        showArrow && jsx(RadixPopover.Arrow, {
+                            className: cn(v.arrow(), slotProps == null ? void 0 : (_slotProps_arrow = slotProps.arrow) == null ? void 0 : _slotProps_arrow.className)
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+/**
+ * Slots for `<DatePicker>` — a bridge-integrated date field whose trigger
+ * is a `<button>` styled as an input, opening a `<Calendar>` popover.
+ *
+ * Theme identity: bare neutral / brand token-backed classes only — no
+ * `dark:` variants on the neutral palette (the preset CSS-var swap
+ * auto-inverts). See `_shared/themeIdentity.test.ts`.
+ */ const datePickerVariants = tv({
+    slots: {
+        root: 'flex flex-col',
+        label: 'block text-sm font-medium text-neutral-900 mb-1',
+        requiredMark: 'text-danger-500 ml-0.5',
+        trigger: 'flex items-center gap-2 h-10 min-w-[12rem] rounded-md border border-neutral-300 bg-neutral-50 px-3 text-base text-neutral-900 cursor-pointer transition-colors hover:border-neutral-400 focus-visible:outline-none focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/30 disabled:cursor-not-allowed disabled:opacity-60 disabled:bg-neutral-200',
+        value: 'flex-1 truncate text-left',
+        placeholder: 'flex-1 truncate text-left text-neutral-400',
+        icon: 'shrink-0 text-[1rem] text-neutral-500',
+        helperText: 'mt-1 text-sm text-neutral-600',
+        errorText: 'mt-1 text-sm text-danger-600'
+    },
+    variants: {
+        layout: {
+            stacked: {},
+            inline: {
+                root: 'flex-row items-start gap-3',
+                label: 'mb-0 pt-2.5 whitespace-nowrap shrink-0'
+            }
+        },
+        error: {
+            true: {
+                trigger: 'border-danger-500 hover:border-danger-500 focus-visible:border-danger-500 focus-visible:ring-danger-500/30'
+            }
+        },
+        fullWidth: {
+            true: {
+                root: 'w-full',
+                trigger: 'w-full min-w-0'
+            }
+        }
+    },
+    defaultVariants: {
+        layout: 'stacked',
+        error: false,
+        fullWidth: false
+    }
+});
+
+// Inline 16×16 stroke calendar glyph — no icon dependency (tw convention).
+function CalendarIcon() {
+    return jsxs("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true",
+        children: [
+            jsx("rect", {
+                x: "2.5",
+                y: "3.5",
+                width: "11",
+                height: "10",
+                rx: "1.5",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+            }),
+            jsx("path", {
+                d: "M2.5 6.5h11M5.5 2v3M10.5 2v3",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+            })
+        ]
+    });
+}
+/**
+ * Formats a stored ISO date for the trigger display, localized to a medium
+ * date style (e.g. `"May 20, 2026"`). Formatting is done in UTC so the
+ * displayed day always matches the stored `YYYY-MM-DD`.
+ */ function formatDisplayDate(iso, locale) {
+    if (iso == null || iso === '') {
+        return '';
+    }
+    const parts = parseISODate(iso);
+    if (parts === null) {
+        return iso;
+    }
+    return new Intl.DateTimeFormat(locale, {
+        dateStyle: 'medium',
+        timeZone: 'UTC'
+    }).format(Date.UTC(parts.year, parts.month - 1, parts.day));
+}
+/**
+ * Dashforge TW `<DatePicker>` — a form-bound single-date field.
+ *
+ * A read-only trigger button paired with a `<Calendar>` popover (Radix
+ * Popover — toggle / Escape / outside-click / focus-trap are Radix-managed).
+ * Integrates with the Dashforge form bridge + RBAC, mirroring the other
+ * `@dashforge/tw` form fields.
+ *
+ * Storage contract: an ISO `YYYY-MM-DD` string, or `null` — shared with the
+ * MUI `@dashforge/ui` `DatePicker`.
+ */ function DatePicker(props) {
+    var _slotProps_root, _slotProps_label, _slotProps_requiredMark, _slotProps_trigger, _slotProps_errorText, _slotProps_helperText;
+    const { name, rules, label, helperText, error, required, disabled, placeholder, layout = 'stacked', visibleWhen, access, value: explicitValue, defaultValue, onChange, minDate, maxDate, disabledDates, isDateDisabled, weekStartDay, locale, fullWidth, sx, slotProps, testId } = props;
+    // ───── Hooks (unconditional, before any early return) ─────
+    const bridge = useContext(DashFormContext);
+    const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    const fieldMeta = useDashFieldMeta(name);
+    const accessState = useAccessState(access);
+    const fieldId = useId();
+    const helperId = `${fieldId}-help`;
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue != null ? defaultValue : null);
+    // StrictMode-safe unregister-on-unmount.
+    const unregisterRef = useRef({
+        bridge,
+        name
+    });
+    unregisterRef.current = {
+        bridge,
+        name
+    };
+    const isMountedRef = useRef(false);
+    useEffect(()=>{
+        isMountedRef.current = true;
+        return ()=>{
+            isMountedRef.current = false;
+            const { bridge: cap, name: capName } = unregisterRef.current;
+            queueMicrotask(()=>{
+                var _cap_unregister;
+                if (!isMountedRef.current) cap == null ? void 0 : (_cap_unregister = cap.unregister) == null ? void 0 : _cap_unregister.call(cap, capName);
+            });
+        };
+    }, []);
+    // ───── Derived ─────
+    const effectiveDisabled = Boolean(disabled) || accessState.disabled;
+    const effectiveReadOnly = accessState.readonly;
+    const isInteractive = !effectiveDisabled && !effectiveReadOnly;
+    const isFormMode = Boolean(bridge == null ? void 0 : bridge.register);
+    let resolvedError = error;
+    let resolvedHelperText = helperText;
+    let registration = null;
+    let resolvedValue;
+    if (isFormMode && bridge) {
+        registration = bridge.register(name, rules);
+        const validation = resolveValidationState(name, bridge, error, helperText);
+        resolvedError = validation.error;
+        resolvedHelperText = validation.helperText;
+        if (explicitValue !== undefined) {
+            resolvedValue = explicitValue;
+        } else {
+            const bv = fieldMeta.value;
+            resolvedValue = bv == null ? null : String(bv);
+        }
+    } else if (explicitValue !== undefined) {
+        resolvedValue = explicitValue;
+    } else {
+        resolvedValue = internalValue;
+    }
+    // RHF threads its own callback ref through here in form mode.
+    const registrationRefFn = registration == null ? void 0 : registration.ref;
+    const triggerRef = useCallback((instance)=>{
+        if (typeof registrationRefFn === 'function') {
+            registrationRefFn(instance);
+        }
+    }, [
+        registrationRefFn
+    ]);
+    // ───── Render-time guards (after all hooks) ─────
+    if (!isVisible) return null;
+    if (!accessState.visible) return null;
+    const v = datePickerVariants({
+        layout,
+        error: resolvedError,
+        fullWidth
+    });
+    const resolvedLocale = locale != null ? locale : 'en-US';
+    const displayValue = formatDisplayDate(resolvedValue, resolvedLocale);
+    const commitValue = (next)=>{
+        if (isFormMode && bridge) {
+            var _registration_onChange;
+            bridge.setValue == null ? void 0 : bridge.setValue.call(bridge, name, next);
+            void (registration == null ? void 0 : (_registration_onChange = registration.onChange) == null ? void 0 : _registration_onChange.call(registration, {
+                target: {
+                    name,
+                    value: next != null ? next : ''
+                },
+                type: 'change'
+            }));
+        } else if (explicitValue === undefined) {
+            setInternalValue(next);
+        }
+        onChange == null ? void 0 : onChange(next);
+    };
+    // Mark the field touched on popover close. Reads the freshest committed
+    // value straight from the bridge so the touched-blur never reverts a
+    // value just chosen in the calendar.
+    const markTouched = ()=>{
+        if (isFormMode && bridge) {
+            var _registration_onBlur;
+            const committed = bridge.getValue(name);
+            void (registration == null ? void 0 : (_registration_onBlur = registration.onBlur) == null ? void 0 : _registration_onBlur.call(registration, {
+                target: {
+                    name,
+                    value: committed == null ? '' : String(committed)
+                },
+                type: 'blur'
+            }));
+        }
+    };
+    const handleOpenChange = (next)=>{
+        if (next && !isInteractive) {
+            return;
+        }
+        setIsOpen(next);
+        if (!next) {
+            markTouched();
+        }
+    };
+    const handleCalendarChange = (next)=>{
+        commitValue(next);
+        setIsOpen(false);
+        markTouched();
+    };
+    return jsxs("div", {
+        "data-testid": testId,
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        children: [
+            label && jsxs("label", {
+                htmlFor: fieldId,
+                className: cn(v.label(), slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
+                children: [
+                    label,
+                    required && jsx("span", {
+                        "aria-hidden": "true",
+                        className: cn(v.requiredMark(), slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                        children: "*"
+                    })
+                ]
+            }),
+            jsx(Popover, {
+                open: isOpen,
+                onOpenChange: handleOpenChange,
+                side: "bottom",
+                align: "start",
+                content: jsx(Calendar, {
+                    value: resolvedValue,
+                    onChange: handleCalendarChange,
+                    minDate: minDate,
+                    maxDate: maxDate,
+                    disabledDates: disabledDates,
+                    isDateDisabled: isDateDisabled,
+                    weekStartDay: weekStartDay,
+                    locale: locale,
+                    "aria-label": "Choose date",
+                    sx: "border-0 bg-transparent p-0"
+                }),
+                children: jsxs("button", {
+                    type: "button",
+                    id: fieldId,
+                    ref: triggerRef,
+                    disabled: effectiveDisabled,
+                    "aria-invalid": resolvedError ? true : undefined,
+                    "aria-describedby": resolvedHelperText ? helperId : undefined,
+                    className: cn(v.trigger(), slotProps == null ? void 0 : (_slotProps_trigger = slotProps.trigger) == null ? void 0 : _slotProps_trigger.className),
+                    children: [
+                        jsx("span", {
+                            className: displayValue ? v.value() : v.placeholder(),
+                            children: displayValue || placeholder || 'Select a date'
+                        }),
+                        jsx("span", {
+                            className: v.icon(),
+                            children: jsx(CalendarIcon, {})
+                        })
+                    ]
+                })
+            }),
+            resolvedHelperText && jsx("p", {
+                id: helperId,
+                className: cn(resolvedError ? v.errorText() : v.helperText(), resolvedError ? slotProps == null ? void 0 : (_slotProps_errorText = slotProps.errorText) == null ? void 0 : _slotProps_errorText.className : slotProps == null ? void 0 : (_slotProps_helperText = slotProps.helperText) == null ? void 0 : _slotProps_helperText.className),
+                children: resolvedHelperText
+            })
+        ]
+    });
+}
+
 /**
  * Tailwind-variants recipe for `<Breadcrumbs>`.
  *
@@ -5285,6 +5912,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 +5973,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 +7555,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 +7598,7 @@ VisuallyHidden.displayName = 'VisuallyHidden';
                             })
                         })
                     ]
-                })
+                }))
             ]
         })
     });
@@ -7160,71 +7803,6 @@ const tooltipVariants = tv({
     });
 }
 
-const popoverVariants = tv({
-    slots: {
-        content: [
-            // Neutral border auto-inverts via CSS-var swap.
-            'z-50 rounded-md border border-neutral-200',
-            // bg-white hardcoded (no auto-invert) so `dark:` is required.
-            // Target `dark:bg-neutral-100` resolves to #171717 in dark mode
-            // (one elevation tier above the page surface).
-            'bg-white dark:bg-neutral-100 p-4 shadow-lg',
-            // Text auto-inverts.
-            'text-sm text-neutral-900',
-            'focus:outline-none',
-            'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-            'motion-reduce:transition-none motion-reduce:duration-0'
-        ],
-        // Arrow follows content bg: `fill-white` in light + matching dark target.
-        arrow: 'fill-white dark:fill-neutral-100'
-    }
-});
-
-/**
- * Dashforge TW `<Popover>` — clickable floating content panel.
- *
- * Built on `@radix-ui/react-popover`:
- *  - Focus trap inside the popover (Tab cycles within).
- *  - Outside-click + Escape dismiss.
- *  - APG dialog-like semantics (`role="dialog"` on content).
- *  - Portal-rendered.
- *
- * Use `<Popover>` for menus / pickers / settings panels with
- * interactive children. Use `<Tooltip>` for read-only hints.
- */ function Popover(props) {
-    var _slotProps_content, _slotProps_arrow;
-    const { children, content, side = 'bottom', align = 'center', showArrow = false, open, onOpenChange, sideOffset = 8, width, slotProps } = props;
-    const v = popoverVariants();
-    return jsxs(RadixPopover.Root, {
-        open: open,
-        onOpenChange: onOpenChange,
-        children: [
-            jsx(RadixPopover.Trigger, {
-                asChild: true,
-                children: children
-            }),
-            jsx(RadixPopover.Portal, {
-                children: jsxs(RadixPopover.Content, {
-                    side: side,
-                    align: align,
-                    sideOffset: sideOffset,
-                    style: width != null ? {
-                        width
-                    } : undefined,
-                    className: cn(v.content(), slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className),
-                    children: [
-                        content,
-                        showArrow && jsx(RadixPopover.Arrow, {
-                            className: cn(v.arrow(), slotProps == null ? void 0 : (_slotProps_arrow = slotProps.arrow) == null ? void 0 : _slotProps_arrow.className)
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-}
-
 const accordionVariants = tv({
     slots: {
         root: 'w-full',
@@ -8650,6 +9228,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 +9255,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 +9284,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 +9459,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 +9683,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 +9928,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 +10464,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 +10560,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 +10572,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 +10632,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 +10648,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 +10757,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 +10773,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 +10833,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 +10849,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 +11011,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 +11120,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 +11147,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 +11235,7 @@ const DEFAULT_LABELS = {
         defaultValue: defaultColumnWidths,
         onChange: onColumnWidthsChange
     });
-    const { startResize } = useColumnResize({
+    const { startResize, nudge: nudgeColumnWidth } = useColumnResize({
         widths: columnWidths,
         onChange: setColumnWidths
     });
@@ -10626,6 +11252,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 +11422,7 @@ const DEFAULT_LABELS = {
                         labels: {
                             columnsButton: labels.columnsButton,
                             columnsTitle: labels.columnsTitle,
-                            columnsShowAll: labels.columnsShowAll,
-                            columnsHideAll: labels.columnsHideAll
+                            columnsToggleAll: labels.columnsToggleAll
                         }
                     })
                 ]
@@ -10795,6 +11436,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 +11445,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 +11475,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 +11505,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 +11577,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 +11605,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 +11767,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,
@@ -11309,4 +11981,4 @@ function SearchIcon(props) {
  * Package version (synced with `package.json` at publish time).
  */ const VERSION = '0.7.0-beta';
 
-export { Accordion, AppShell, AspectRatio, Autocomplete, Box, Breadcrumbs, Button, Checkbox, ConfirmDialogProvider, Container, DataGrid, DateTimePicker, Dialog, Divider, Grid, LeftNav, NumberField, OTPField, Pagination, Popover, RadioGroup, RenderButton, RenderChip, RenderText, RenderTwoLine, RowActionsMenu, Skeleton, SnackbarProvider, Stack, Switch, Table, Tabs, TextField, Textarea, Tooltip, TopBar, Typography, VERSION, VisuallyHidden, accordionVariants, appShellVariants, autocompleteVariants, boxVariants, breadcrumbsVariants, buttonVariants, checkboxVariants, cn, confirmDialogVariants, containerVariants, dataGridVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, getNestedValue, gridVariants, isoToInputValue, leftNavVariants, numberFieldVariants, otpFieldVariants, paginationVariants, popoverVariants, radioGroupVariants, skeletonVariants, snackbarVariants, stackVariants, switchVariants, tableVariants, tabsVariants, textFieldVariants, textareaVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar };
+export { Accordion, AppShell, AspectRatio, Autocomplete, Box, Breadcrumbs, Button, Calendar, Checkbox, ConfirmDialogProvider, Container, DataGrid, DatePicker, DateTimePicker, Dialog, Divider, Grid, LeftNav, NumberField, OTPField, Pagination, Popover, RadioGroup, RenderButton, RenderChip, RenderText, RenderTwoLine, RowActionsMenu, Skeleton, SnackbarProvider, Stack, Switch, Table, Tabs, TextField, Textarea, Tooltip, TopBar, Typography, VERSION, VisuallyHidden, accordionVariants, appShellVariants, autocompleteVariants, boxVariants, breadcrumbsVariants, buttonVariants, calendarDayVariants, calendarVariants, checkboxVariants, cn, confirmDialogVariants, containerVariants, dataGridVariants, datePickerVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, getNestedValue, gridVariants, isoToInputValue, leftNavVariants, numberFieldVariants, otpFieldVariants, paginationVariants, popoverVariants, radioGroupVariants, skeletonVariants, snackbarVariants, stackVariants, switchVariants, tableVariants, tabsVariants, textFieldVariants, textareaVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar };