@papernote/ui 1.10.17 → 1.10.19

package/dist/index.esm.js

@@ -6073,6 +6073,68 @@ function HelpTooltip({ content, icon = 'help', size = 'md', position = 'top', cl
     return (jsx(Tooltip, { content: content, position: position, children: jsx("span", { className: `inline-flex items-center justify-center text-ink-400 hover:text-ink-600 cursor-help transition-colors ${className}`, role: "button", "aria-label": "Help", tabIndex: 0, children: jsx(IconComponent, { className: sizeClasses$7[size] }) }) }));
 }
 
+/**
+ * SkipLink - Accessibility skip link for keyboard navigation
+ *
+ * A skip link allows keyboard users to bypass repetitive navigation
+ * and jump directly to the main content. The link is visually hidden
+ * until focused, making it invisible to mouse users while remaining
+ * accessible to keyboard and screen reader users.
+ *
+ * Place this component at the very beginning of your page layout,
+ * before any navigation elements.
+ *
+ * @example Basic usage
+ * ```tsx
+ * // In your layout component:
+ * <SkipLink targetId="main-content" />
+ * <Navigation />
+ * <main id="main-content">
+ *   {children}
+ * </main>
+ * ```
+ *
+ * @example Custom text
+ * ```tsx
+ * <SkipLink targetId="content">Skip navigation</SkipLink>
+ * ```
+ *
+ * @example Multiple skip links
+ * ```tsx
+ * <div>
+ *   <SkipLink targetId="main-content">Skip to main content</SkipLink>
+ *   <SkipLink targetId="search">Skip to search</SkipLink>
+ * </div>
+ * ```
+ */
+function SkipLink({ targetId, children = 'Skip to main content', className = '', }) {
+    const handleClick = (e) => {
+        e.preventDefault();
+        const target = document.getElementById(targetId);
+        if (target) {
+            // Set tabindex to make the element focusable if it isn't already
+            if (!target.hasAttribute('tabindex')) {
+                target.setAttribute('tabindex', '-1');
+            }
+            target.focus();
+            // Scroll the element into view
+            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+    };
+    return (jsx("a", { href: `#${targetId}`, onClick: handleClick, className: `
+        sr-only focus:not-sr-only
+        focus:absolute focus:z-50
+        focus:top-4 focus:left-4
+        focus:px-4 focus:py-2
+        focus:bg-accent-600 focus:text-white
+        focus:rounded-lg focus:shadow-lg
+        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400
+        font-medium text-sm
+        transition-none
+        ${className}
+      `, children: children }));
+}
+
 function Popover({ trigger: triggerElement, children, placement = 'bottom', triggerMode = 'click', showArrow = true, offset = 8, open: controlledOpen, onOpenChange, closeOnClickOutside = true, closeOnEscape = true, showDelay = 0, hideDelay = 0, className = '', disabled = false, }) {
     const [internalOpen, setInternalOpen] = useState(false);
     const [position, setPosition] = useState({ top: 0, left: 0 });
@@ -8363,7 +8425,7 @@ function Menu({ items, className = '', onClose, position, anchor = 'bottom-left'
       `, style: positionStyle, role: "menu", "aria-orientation": "vertical", children: items.map((item, index) => {
             // Handle divider
             if (item.divider) {
-                return (jsx("div", { className: "h-px bg-ink-200 my-1", role: "separator" }, `divider-${index}`));
+                return (jsx("div", { className: "h-px bg-ink-200 my-1", role: "separator", "data-testid": item.dataAttributes?.['data-testid'] || `menu-divider-${index}`, ...item.dataAttributes }, `divider-${index}`));
             }
             const currentNavIndex = navIndex;
             navIndex++;
@@ -8378,7 +8440,7 @@ function Menu({ items, className = '', onClose, position, anchor = 'bottom-left'
                                 ? 'text-error-600 hover:bg-error-50'
                                 : 'text-ink-900 hover:bg-accent-100'}
                 ${focusedIndex === currentNavIndex ? 'bg-accent-100' : ''}
-              `, role: "menuitem", "aria-haspopup": hasSubmenu, "aria-expanded": hasSubmenu && isSubmenuOpen, children: [jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [item.icon && (jsx("span", { className: "flex-shrink-0 w-4 h-4 flex items-center justify-center", children: item.icon })), jsx("span", { className: "truncate", children: item.label })] }), hasSubmenu && (jsx(ChevronRight, { className: "h-4 w-4 flex-shrink-0 text-ink-400" }))] }), hasSubmenu && isSubmenuOpen && (jsx("div", { className: "absolute left-full top-0 ml-1 z-10", children: jsx(Menu, { items: item.submenu, onClose: onClose, anchor: "top-left" }) }))] }, item.id));
+              `, role: "menuitem", "aria-haspopup": hasSubmenu, "aria-expanded": hasSubmenu && isSubmenuOpen, "data-testid": item.dataAttributes?.['data-testid'] || `menu-item-${item.id}`, ...item.dataAttributes, children: [jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [item.icon && (jsx("span", { className: "flex-shrink-0 w-4 h-4 flex items-center justify-center", children: item.icon })), jsx("span", { className: "truncate", children: item.label })] }), hasSubmenu && (jsx(ChevronRight, { className: "h-4 w-4 flex-shrink-0 text-ink-400" }))] }), hasSubmenu && isSubmenuOpen && (jsx("div", { className: "absolute left-full top-0 ml-1 z-10", children: jsx(Menu, { items: item.submenu, onClose: onClose, anchor: "top-left" }) }))] }, item.id));
         }) }));
 }
 // Convenience component for MenuDivider
@@ -11421,7 +11483,7 @@ function TabsList({ children, className = '' }) {
 /**
  * TabsTrigger - Individual tab button
  */
-function TabsTrigger({ children, value, disabled = false, icon, badge, badgeVariant = 'info', className = '', }) {
+function TabsTrigger({ children, value, disabled = false, icon, badge, badgeVariant = 'info', className = '', dataAttributes, }) {
     const { activeTab, setActiveTab, variant, orientation, size, registerTab, unregisterTab } = useTabsContext();
     const isActive = activeTab === value;
     // Register this tab on mount
@@ -11451,7 +11513,7 @@ function TabsTrigger({ children, value, disabled = false, icon, badge, badgeVari
         ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
         focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-1
         ${className}
-      `, children: [icon && jsx("span", { className: `flex-shrink-0 ${sizeClasses[size].icon}`, children: icon }), jsx("span", { children: children }), badge !== undefined && (jsx(Badge, { variant: badgeVariant, size: sizeClasses[size].badgeSize, children: badge }))] }));
+      `, "data-testid": dataAttributes?.['data-testid'] || `tab-${value}`, ...dataAttributes, children: [icon && jsx("span", { className: `flex-shrink-0 ${sizeClasses[size].icon}`, children: icon }), jsx("span", { children: children }), badge !== undefined && (jsx(Badge, { variant: badgeVariant, size: sizeClasses[size].badgeSize, children: badge }))] }));
 }
 /**
  * TabsContent - Content panel for a tab
@@ -11680,7 +11742,7 @@ function Tabs({ tabs, activeTab: controlledActiveTab, defaultTab, variant = 'und
                 ${tab.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
                 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-1
                 group
-              `, children: [tab.icon && jsx("span", { className: `flex-shrink-0 ${sizeClasses[size].icon}`, children: tab.icon }), jsx("span", { className: isTabCloseable ? 'mr-1' : '', children: tab.label }), tab.badge !== undefined && (jsx(Badge, { variant: tab.badgeVariant || 'info', size: sizeClasses[size].badgeSize, children: tab.badge })), isTabCloseable && onClose && (jsx("span", { role: "button", "aria-label": `Close ${tab.label}`, onClick: (e) => handleClose(e, tab.id), className: `
+              `, "data-testid": tab.dataAttributes?.['data-testid'] || `tab-${tab.id}`, ...tab.dataAttributes, children: [tab.icon && jsx("span", { className: `flex-shrink-0 ${sizeClasses[size].icon}`, children: tab.icon }), jsx("span", { className: isTabCloseable ? 'mr-1' : '', children: tab.label }), tab.badge !== undefined && (jsx(Badge, { variant: tab.badgeVariant || 'info', size: sizeClasses[size].badgeSize, children: tab.badge })), isTabCloseable && onClose && (jsx("span", { role: "button", "aria-label": `Close ${tab.label}`, onClick: (e) => handleClose(e, tab.id), className: `
                     flex-shrink-0 p-0.5 rounded
                     text-ink-400 hover:text-ink-700 hover:bg-paper-200
                     opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100
@@ -12369,7 +12431,7 @@ function SidebarNavItem({ item, onNavigate, level = 0, currentPath }) {
                             ? 'text-ink-600 hover:text-ink-900 hover:bg-paper-50 rounded-lg transition-colors'
                             : 'text-ink-600 hover:text-ink-900 hover:bg-paper-100 rounded-lg transition-colors'}
           ${paddingLeft} pr-3
-        `, children: [jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [item.icon && (jsx("span", { className: "flex-shrink-0 w-5 h-5 flex items-center justify-center text-ink-500", children: item.icon })), jsx("span", { className: "truncate", children: item.label }), item.badge && (jsx("span", { className: "ml-auto flex-shrink-0 px-2 py-0.5 text-xs font-medium bg-accent-100 text-accent-700 rounded-full", children: item.badge }))] }), hasChildren && (jsx("span", { className: "flex-shrink-0 ml-2", children: isExpanded ? (jsx(ChevronDown, { className: "h-4 w-4 text-ink-400" })) : (jsx(ChevronRight, { className: "h-4 w-4 text-ink-400" })) }))] }), hasChildren && isExpanded && (jsx("div", { className: "mt-1 space-y-1", children: item.children?.map((child) => (jsx(SidebarNavItem, { item: child, onNavigate: onNavigate, level: level + 1, currentPath: currentPath }, child.id))) }))] }));
+        `, "data-testid": item.dataAttributes?.['data-testid'] || `sidebar-item-${item.id}`, ...item.dataAttributes, children: [jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [item.icon && (jsx("span", { className: "flex-shrink-0 w-5 h-5 flex items-center justify-center text-ink-500", children: item.icon })), jsx("span", { className: "truncate", children: item.label }), item.badge && (jsx("span", { className: "ml-auto flex-shrink-0 px-2 py-0.5 text-xs font-medium bg-accent-100 text-accent-700 rounded-full", children: item.badge }))] }), hasChildren && (jsx("span", { className: "flex-shrink-0 ml-2", children: isExpanded ? (jsx(ChevronDown, { className: "h-4 w-4 text-ink-400" })) : (jsx(ChevronRight, { className: "h-4 w-4 text-ink-400" })) }))] }), hasChildren && isExpanded && (jsx("div", { className: "mt-1 space-y-1", children: item.children?.map((child) => (jsx(SidebarNavItem, { item: child, onNavigate: onNavigate, level: level + 1, currentPath: currentPath }, child.id))) }))] }));
 }
 function SidebarGroup({ title, items, onNavigate, defaultExpanded = true, currentPath }) {
     const [isExpanded, setIsExpanded] = useState(defaultExpanded);
@@ -12471,7 +12533,7 @@ function Sidebar({ items, onNavigate, className = '', header, footer, currentPat
     const sidebarContent = (jsxs("div", { ref: sidebarRef, className: `flex flex-col h-full bg-white border-r border-paper-300 notebook-binding ${width} ${className}`, children: [mobileOpen !== undefined && (jsxs("div", { className: "flex items-center justify-between px-4 pt-4 md:hidden", children: [jsx("div", { className: "flex-1", children: header }), jsx("button", { onClick: onMobileClose, className: "\n              flex items-center justify-center\n              w-10 h-10 -mr-2\n              text-ink-500 hover:text-ink-700\n              hover:bg-paper-100 rounded-full\n              transition-colors\n            ", "aria-label": "Close sidebar", children: jsx(X, { className: "w-5 h-5" }) })] })), header && mobileOpen === undefined && (jsx("div", { className: "px-6 pt-6 pb-4", children: header })), header && mobileOpen !== undefined && (jsx("div", { className: "px-6 pt-2 pb-4 hidden md:block", children: header })), jsx("nav", { className: "flex-1 px-3 py-2 space-y-1 overflow-y-auto", children: items.map((item) => {
                     // Render separator
                     if (item.separator) {
-                        return jsx("div", { className: "my-4 border-t border-paper-300" }, item.id);
+                        return (jsx("div", { className: "my-4 border-t border-paper-300", "data-testid": item.dataAttributes?.['data-testid'] || `sidebar-separator-${item.id}`, ...item.dataAttributes }, item.id));
                     }
                     // Render nav item
                     return (jsx(SidebarNavItem, { item: item, onNavigate: handleNavigate, currentPath: currentPath }, item.id));
@@ -12563,7 +12625,7 @@ function BottomNavigation({ items, activeId, onNavigate, showLabels = true, clas
                 ${isActive
                         ? 'text-accent-600'
                         : 'text-ink-500 hover:text-ink-700'}
-              `, "aria-current": isActive ? 'page' : undefined, "aria-label": item.label, children: [jsxs("div", { className: "relative", children: [jsx("div", { className: `
+              `, "aria-current": isActive ? 'page' : undefined, "aria-label": item.label, "data-testid": item.dataAttributes?.['data-testid'] || `bottom-nav-${item.id}`, ...item.dataAttributes, children: [jsxs("div", { className: "relative", children: [jsx("div", { className: `
                     w-6 h-6 flex items-center justify-center
                     transition-transform duration-200
                     ${isActive ? 'scale-110' : 'scale-100'}
@@ -14074,6 +14136,10 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     const tableContainerRef = useRef(null);
     // Row hover state (for coordinating primary + secondary row highlighting)
     const [hoveredRowKey, setHoveredRowKey] = useState(null);
+    // Keyboard navigation state
+    const [focusedCell, setFocusedCell] = useState(null);
+    const [announcement, setAnnouncement] = useState('');
+    const tableBodyRef = useRef(null);
     // Temporary row highlight state (for flash animation)
     const [flashingRows, setFlashingRows] = useState(new Set());
     const flashTimeoutRef = useRef(null);
@@ -14139,6 +14205,11 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     const currentDensity = densityClasses[density];
     // Key extractor function - defined early for use in other functions
     const getRowKey = keyExtractor || ((row) => String(row.id));
+    // Calculate if there are any actions (for keyboard navigation column calculation)
+    // This is computed early so it can be used in keyboard handlers
+    const hasAnyActions = !!(onEdit || onDelete || actions.length > 0 ||
+        expandedRowConfig?.edit || expandedRowConfig?.details ||
+        expandedRowConfig?.addRelated?.length || expandedRowConfig?.manageRelated?.length);
     // Get row background class based on striping and highlighting
     const getRowBackgroundClass = (item, index) => {
         const classes = [];
@@ -14440,6 +14511,192 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     const handleCollapseExpansion = () => {
         setExpansionState(null);
     };
+    // Keyboard navigation handler
+    const handleKeyboardNavigation = useCallback((e) => {
+        if (!data.length)
+            return;
+        const totalRows = data.length;
+        const totalCols = visibleColumns.length;
+        // If no cell is focused, focus first data cell on first arrow key
+        if (!focusedCell) {
+            if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+                e.preventDefault();
+                setFocusedCell({ row: 0, col: 0 });
+                const colHeader = visibleColumns[0]?.header || 'first column';
+                setAnnouncement(`Row 1, ${colHeader}`);
+                return;
+            }
+            return;
+        }
+        const { row, col } = focusedCell;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (row < totalRows - 1) {
+                    const newRow = row + 1;
+                    setFocusedCell({ row: newRow, col });
+                    const rowItem = data[newRow];
+                    const colHeader = visibleColumns[col]?.header || '';
+                    const cellValue = rowItem[visibleColumns[col]?.key];
+                    setAnnouncement(`Row ${newRow + 1}, ${colHeader}: ${cellValue || 'empty'}`);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (row > 0) {
+                    const newRow = row - 1;
+                    setFocusedCell({ row: newRow, col });
+                    const rowItem = data[newRow];
+                    const colHeader = visibleColumns[col]?.header || '';
+                    const cellValue = rowItem[visibleColumns[col]?.key];
+                    setAnnouncement(`Row ${newRow + 1}, ${colHeader}: ${cellValue || 'empty'}`);
+                }
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                if (col < totalCols - 1) {
+                    const newCol = col + 1;
+                    setFocusedCell({ row, col: newCol });
+                    const rowItem = data[row];
+                    const colHeader = visibleColumns[newCol]?.header || '';
+                    const cellValue = rowItem[visibleColumns[newCol]?.key];
+                    setAnnouncement(`${colHeader}: ${cellValue || 'empty'}`);
+                }
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                if (col > 0) {
+                    const newCol = col - 1;
+                    setFocusedCell({ row, col: newCol });
+                    const rowItem = data[row];
+                    const colHeader = visibleColumns[newCol]?.header || '';
+                    const cellValue = rowItem[visibleColumns[newCol]?.key];
+                    setAnnouncement(`${colHeader}: ${cellValue || 'empty'}`);
+                }
+                break;
+            case 'Home':
+                e.preventDefault();
+                if (e.ctrlKey) {
+                    // Ctrl+Home: Go to first cell
+                    setFocusedCell({ row: 0, col: 0 });
+                    setAnnouncement(`First cell, Row 1, ${visibleColumns[0]?.header || ''}`);
+                }
+                else {
+                    // Home: Go to first cell in current row
+                    setFocusedCell({ row, col: 0 });
+                    const rowItem = data[row];
+                    const cellValue = rowItem[visibleColumns[0]?.key];
+                    setAnnouncement(`${visibleColumns[0]?.header || ''}: ${cellValue || 'empty'}`);
+                }
+                break;
+            case 'End':
+                e.preventDefault();
+                if (e.ctrlKey) {
+                    // Ctrl+End: Go to last cell
+                    const lastRow = totalRows - 1;
+                    const lastCol = totalCols - 1;
+                    setFocusedCell({ row: lastRow, col: lastCol });
+                    setAnnouncement(`Last cell, Row ${lastRow + 1}, ${visibleColumns[lastCol]?.header || ''}`);
+                }
+                else {
+                    // End: Go to last cell in current row
+                    const lastCol = totalCols - 1;
+                    setFocusedCell({ row, col: lastCol });
+                    const rowItem = data[row];
+                    const cellValue = rowItem[visibleColumns[lastCol]?.key];
+                    setAnnouncement(`${visibleColumns[lastCol]?.header || ''}: ${cellValue || 'empty'}`);
+                }
+                break;
+            case 'Enter':
+                e.preventDefault();
+                {
+                    const rowItem = data[row];
+                    const rowKey = getRowKey(rowItem);
+                    // Priority: Edit mode > Details mode > Row double-click handler
+                    if (onEdit) {
+                        onEdit(rowItem);
+                        setAnnouncement('Opening edit mode');
+                    }
+                    else if (expandedRowConfig?.edit) {
+                        handleExpansionWithMode(rowKey, 'edit');
+                        setAnnouncement('Opening inline edit');
+                    }
+                    else if (expandedRowConfig?.details) {
+                        handleExpansionWithMode(rowKey, 'details');
+                        setAnnouncement('Opening details view');
+                    }
+                    else if (onRowDoubleClick) {
+                        onRowDoubleClick(rowItem);
+                        setAnnouncement('Activating row');
+                    }
+                    else if (onRowClick) {
+                        onRowClick(rowItem);
+                        setAnnouncement('Row selected');
+                    }
+                }
+                break;
+            case ' ':
+                // Space: Toggle selection if selectable
+                if (selectable) {
+                    e.preventDefault();
+                    const rowItem = data[row];
+                    const rowKey = getRowKey(rowItem);
+                    handleRowSelect(rowKey);
+                    const isNowSelected = !selectedRowsSet.has(rowKey);
+                    setAnnouncement(isNowSelected ? 'Row selected' : 'Row deselected');
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                setFocusedCell(null);
+                setAnnouncement('Table navigation exited');
+                // Return focus to table container
+                tableBodyRef.current?.closest('table')?.focus();
+                break;
+            case 'PageDown':
+                e.preventDefault();
+                {
+                    const jumpSize = 10;
+                    const newRow = Math.min(row + jumpSize, totalRows - 1);
+                    setFocusedCell({ row: newRow, col });
+                    const colHeader = visibleColumns[col]?.header || '';
+                    setAnnouncement(`Row ${newRow + 1} of ${totalRows}, ${colHeader}`);
+                }
+                break;
+            case 'PageUp':
+                e.preventDefault();
+                {
+                    const jumpSize = 10;
+                    const newRow = Math.max(row - jumpSize, 0);
+                    setFocusedCell({ row: newRow, col });
+                    const colHeader = visibleColumns[col]?.header || '';
+                    setAnnouncement(`Row ${newRow + 1} of ${totalRows}, ${colHeader}`);
+                }
+                break;
+        }
+    }, [data, visibleColumns, focusedCell, selectable, expandedRowConfig, onEdit, onRowDoubleClick, onRowClick, getRowKey, handleExpansionWithMode, handleRowSelect, selectedRowsSet]);
+    // Focus the appropriate cell when focusedCell changes
+    useEffect(() => {
+        if (focusedCell && tableBodyRef.current) {
+            const { row, col } = focusedCell;
+            const rows = tableBodyRef.current.querySelectorAll('tr[data-row-index]');
+            const targetRow = rows[row];
+            if (targetRow) {
+                // Calculate actual column index including extra columns
+                const hasSelectionCol = selectable;
+                const hasExpandCol = (expandable || expandedRowConfig) && showExpandChevron;
+                const hasActionsCol = hasAnyActions;
+                const extraColsBefore = (hasSelectionCol ? 1 : 0) + (hasExpandCol ? 1 : 0) + (hasActionsCol ? 1 : 0);
+                const cells = targetRow.querySelectorAll('td');
+                const targetCell = cells[col + extraColsBefore];
+                if (targetCell) {
+                    targetCell.focus();
+                    // Scroll into view if needed
+                    targetCell.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                }
+            }
+        }
+    }, [focusedCell, selectable, expandable, expandedRowConfig, showExpandChevron, hasAnyActions]);
     // Handle column header click for sorting
     const handleSort = (column) => {
         if (!column.sortable || !onSortChange)
@@ -14524,7 +14781,9 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
             // Hover state for row pair (primary + secondary)
             const isHovered = hoveredRowKey === rowKey;
             const hoverClass = disableHover ? '' : (isHovered ? 'bg-paper-100' : '');
-            return (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: `table-row-stable ${onRowDoubleClick || onRowClick || onEdit || expandedRowConfig?.edit || expandedRowConfig?.details || expandedRowConfig?.addRelated?.length || expandedRowConfig?.manageRelated?.length ? 'cursor-pointer' : ''} ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : hoverClass || rowBgClass} ${borderClass}`, onMouseEnter: () => !disableHover && setHoveredRowKey(rowKey), onMouseLeave: () => !disableHover && setHoveredRowKey(null), onClick: () => onRowClick?.(item), onContextMenu: (e) => {
+            // Check if this row is keyboard-focused
+            const isKeyboardFocused = focusedCell?.row === index;
+            return (jsxs(React__default.Fragment, { children: [jsxs("tr", { "data-row-index": index, className: `table-row-stable ${onRowDoubleClick || onRowClick || onEdit || expandedRowConfig?.edit || expandedRowConfig?.details || expandedRowConfig?.addRelated?.length || expandedRowConfig?.manageRelated?.length ? 'cursor-pointer' : ''} ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : hoverClass || rowBgClass} ${borderClass} ${isKeyboardFocused ? 'ring-2 ring-inset ring-accent-400' : ''}`, onMouseEnter: () => !disableHover && setHoveredRowKey(rowKey), onMouseLeave: () => !disableHover && setHoveredRowKey(null), onClick: () => onRowClick?.(item), onContextMenu: (e) => {
                             if (enableContextMenu && allActions.length > 0) {
                                 e.preventDefault();
                                 e.stopPropagation();
@@ -14602,7 +14861,9 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                                 // Reduce left padding on first column when there are action buttons
                                 const isFirstColumn = colIdx === 0;
                                 const paddingClass = isFirstColumn && allActions.length > 0 ? 'pl-3' : '';
-                                return (jsx("td", { className: `${currentDensity.cell} ${paddingClass} ${column.className || ''} ${bordered ? `border ${borderColor}` : ''}`, style: getColumnStyle(column, dynamicWidth), children: jsx("div", { className: `${currentDensity.text} leading-tight`, children: primaryContent }) }, `${item.id}-${columnKey}`));
+                                // Check if this cell is keyboard-focused
+                                const isCellFocused = focusedCell?.row === index && focusedCell?.col === colIdx;
+                                return (jsx("td", { className: `${currentDensity.cell} ${paddingClass} ${column.className || ''} ${bordered ? `border ${borderColor}` : ''} ${isCellFocused ? 'outline outline-2 outline-accent-500 outline-offset-[-2px]' : ''}`, style: getColumnStyle(column, dynamicWidth), tabIndex: isCellFocused ? 0 : -1, role: "gridcell", "aria-colindex": colIdx + 1, children: jsx("div", { className: `${currentDensity.text} leading-tight`, children: primaryContent }) }, `${item.id}-${columnKey}`));
                             })] }), hasSecondaryRow && (jsx("tr", { className: `secondary-row ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : hoverClass || rowBgClass} border-b ${borderColor}`, onMouseEnter: () => !disableHover && setHoveredRowKey(rowKey), onMouseLeave: () => !disableHover && setHoveredRowKey(null), children: visibleColumns.map((column, colIdx) => {
                             const columnKey = String(column.key);
                             const dynamicWidth = columnWidths[columnKey];
@@ -14671,7 +14932,7 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                     })()] }, rowKey));
         });
     };
-    const tableContent = (jsxs("div", { className: `bg-white rounded-lg shadow border-2 ${borderColor} ${virtualized ? 'overflow-hidden' : 'overflow-x-auto overflow-y-visible'} ${className}`, style: { position: 'relative' }, children: [loading && data.length > 0 && (jsx("div", { className: "absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-20", style: { backdropFilter: 'blur(2px)' }, children: jsxs("div", { className: "flex flex-col items-center gap-3", children: [jsx("div", { className: "loading-spinner", style: { width: '32px', height: '32px', borderWidth: '3px' } }), jsx("span", { className: "text-sm font-medium text-ink-600", children: "Loading..." })] }) })), jsxs("table", { className: `table-stable w-full ${bordered ? 'border-collapse' : ''}`, children: [jsxs("colgroup", { children: [selectable && jsx("col", { className: "w-12" }), ((expandable || expandedRowConfig) && showExpandChevron) && jsx("col", { className: "w-10" }), allActions.length > 0 && jsx("col", { style: { width: '28px' } }), visibleColumns.map((column, index) => {
+    const tableContent = (jsxs("div", { className: `bg-white rounded-lg shadow border-2 ${borderColor} ${virtualized ? 'overflow-hidden' : 'overflow-x-auto overflow-y-visible'} ${className}`, style: { position: 'relative' }, children: [loading && data.length > 0 && (jsx("div", { className: "absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-20", style: { backdropFilter: 'blur(2px)' }, children: jsxs("div", { className: "flex flex-col items-center gap-3", children: [jsx("div", { className: "loading-spinner", style: { width: '32px', height: '32px', borderWidth: '3px' } }), jsx("span", { className: "text-sm font-medium text-ink-600", children: "Loading..." })] }) })), jsxs("table", { className: `table-stable w-full ${bordered ? 'border-collapse' : ''}`, role: "grid", "aria-label": "Data table", "aria-rowcount": data.length, "aria-colcount": visibleColumns.length, children: [jsxs("colgroup", { children: [selectable && jsx("col", { className: "w-12" }), ((expandable || expandedRowConfig) && showExpandChevron) && jsx("col", { className: "w-10" }), allActions.length > 0 && jsx("col", { style: { width: '28px' } }), visibleColumns.map((column, index) => {
                                 const columnKey = String(column.key);
                                 const dynamicWidth = columnWidths[columnKey];
                                 return (jsx("col", { style: getColumnStyle(column, dynamicWidth) }, index));
@@ -14693,7 +14954,7 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                                                     const currentWidth = thRef.current?.offsetWidth || 100;
                                                     handleResizeStart(e, columnKey, currentWidth);
                                                 }, children: jsx("div", { className: "absolute right-0 top-0 bottom-0 w-1 bg-paper-300 group-hover:bg-accent-400 transition-colors" }) }))] }, columnKey));
-                                })] }) }), jsx("tbody", { className: "bg-white table-loading transition-opacity duration-200", children: loading && data.length === 0 ? (renderLoadingSkeleton()) : data.length === 0 ? (renderEmptyStateContent()) : (renderDataRows()) })] })] }));
+                                })] }) }), jsx("tbody", { ref: tableBodyRef, className: "bg-white table-loading transition-opacity duration-200", onKeyDown: handleKeyboardNavigation, tabIndex: 0, role: "rowgroup", "aria-label": "Table data", children: loading && data.length === 0 ? (renderLoadingSkeleton()) : data.length === 0 ? (renderEmptyStateContent()) : (renderDataRows()) })] })] }));
     // Wrap in scrollable container if virtualized
     const finalContent = virtualized ? (jsx("div", { ref: tableContainerRef, onScroll: handleScroll, style: { height: virtualHeight, overflow: 'auto' }, className: "rounded-lg", children: tableContent })) : tableContent;
     // Calculate pagination values
@@ -14727,7 +14988,7 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
             }
         }, selectable: selectable, selectedRows: selectedRowsSet, onSelectionChange: onRowSelect ? (rows) => onRowSelect(rows) : undefined, keyExtractor: getRowKey, actions: allActions, onEdit: onEdit, onDelete: onDelete, className: className, cardClassName: cardClassName, gap: cardGap })) : null;
     // Render with context menu
-    return (jsxs(Fragment, { children: [renderPaginationControls(), shouldShowCardView ? cardViewContent : finalContent, contextMenuState.isOpen && contextMenuState.item && (jsx(Menu, { items: convertActionsToMenuItems(contextMenuState.item), position: contextMenuState.position, onClose: () => setContextMenuState({ isOpen: false, position: { x: 0, y: 0 }, item: null }) }))] }));
+    return (jsxs(Fragment, { children: [jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: announcement }), renderPaginationControls(), shouldShowCardView ? cardViewContent : finalContent, contextMenuState.isOpen && contextMenuState.item && (jsx(Menu, { items: convertActionsToMenuItems(contextMenuState.item), position: contextMenuState.position, onClose: () => setContextMenuState({ isOpen: false, position: { x: 0, y: 0 }, item: null }) }))] }));
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -61361,5 +61622,5 @@ function Responsive({ mobile, tablet, desktop, }) {
     return jsx(Fragment, { children: mobile || tablet || desktop });
 }
 
-export { Accordion, AchievementBadge, AchievementUnlock, ActionBar, ActionBarCenter, ActionBarLeft, ActionBarRight, ActionButton, ActivityFeed, AdminModal, Alert, AlertDialog, AppLayout, Autocomplete, Avatar, BREAKPOINTS, Badge, BottomNavigation, BottomNavigationSpacer, BottomSheet, BottomSheetActions, BottomSheetContent, BottomSheetHeader, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, Celebration, Checkbox, CheckboxList, Chip, ChipGroup, CollaboratorAvatars, Collapsible, CollapsibleSection, ColorPicker, Combobox, ComingSoon, CommandPalette, CompactStat, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, CurrencyInput, Dashboard, DashboardContent, DashboardHeader, DataGrid, DataTable, DataTableCardView, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, DesktopOnly, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, ErrorBoundary, ExpandablePanel, ExpandablePanelContainer, ExpandablePanelSpacer, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FORMULA_CATEGORIES, FORMULA_DEFINITIONS, FORMULA_NAMES, FieldArray, FileUpload, FilterBar, FilterControls, FilterStatusBanner, FloatingActionButton, Form, FormContext, FormControl, FormWizard, Grid, GridItem, HelpTooltip, Hide, HorizontalScroll, HoverCard, InfiniteScroll, Input, InviteCard, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, Menu, MenuDivider, MobileHeader, MobileHeaderSpacer, MobileLayout, MobileOnly, MobileProvider, Modal, ModalFooter, MotivationalMessage, MultiSelect, NotificationBanner, NotificationBar, NotificationBell, NotificationIndicator, NumberInput, Page, PageHeader, PageLayout, PageNavigation, Pagination, PasswordInput, PermissionBadge, Popover, PriorityAlertBanner, Progress, ProgressCelebration, PullToRefresh, QueryTransparency, RadioGroup, Rating, Responsive, RichTextEditor, SearchBar, SearchableList, Select, Separator, SharedBadge, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard$1 as SkeletonCard, SkeletonTable, Slider, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, StreakBadge, SuccessCheck, SummaryCard, SwipeActions, SwipeableCard, SwipeableListItem, Switch, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, Text, Textarea, ThemeToggle, TimePicker, Timeline, TimezoneSelector, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, getFormula, getFormulasByCategory, getLocalTimezone, isValidTimezone, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, searchFormulas, statusManager, useBreadcrumbReset, useBreakpoint, useBreakpointValue, useCelebration, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useDelighters, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
+export { Accordion, AchievementBadge, AchievementUnlock, ActionBar, ActionBarCenter, ActionBarLeft, ActionBarRight, ActionButton, ActivityFeed, AdminModal, Alert, AlertDialog, AppLayout, Autocomplete, Avatar, BREAKPOINTS, Badge, BottomNavigation, BottomNavigationSpacer, BottomSheet, BottomSheetActions, BottomSheetContent, BottomSheetHeader, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, Celebration, Checkbox, CheckboxList, Chip, ChipGroup, CollaboratorAvatars, Collapsible, CollapsibleSection, ColorPicker, Combobox, ComingSoon, CommandPalette, CompactStat, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, CurrencyInput, Dashboard, DashboardContent, DashboardHeader, DataGrid, DataTable, DataTableCardView, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, DesktopOnly, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, ErrorBoundary, ExpandablePanel, ExpandablePanelContainer, ExpandablePanelSpacer, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FORMULA_CATEGORIES, FORMULA_DEFINITIONS, FORMULA_NAMES, FieldArray, FileUpload, FilterBar, FilterControls, FilterStatusBanner, FloatingActionButton, Form, FormContext, FormControl, FormWizard, Grid, GridItem, HelpTooltip, Hide, HorizontalScroll, HoverCard, InfiniteScroll, Input, InviteCard, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, Menu, MenuDivider, MobileHeader, MobileHeaderSpacer, MobileLayout, MobileOnly, MobileProvider, Modal, ModalFooter, MotivationalMessage, MultiSelect, NotificationBanner, NotificationBar, NotificationBell, NotificationIndicator, NumberInput, Page, PageHeader, PageLayout, PageNavigation, Pagination, PasswordInput, PermissionBadge, Popover, PriorityAlertBanner, Progress, ProgressCelebration, PullToRefresh, QueryTransparency, RadioGroup, Rating, Responsive, RichTextEditor, SearchBar, SearchableList, Select, Separator, SharedBadge, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard$1 as SkeletonCard, SkeletonTable, SkipLink, Slider, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, StreakBadge, SuccessCheck, SummaryCard, SwipeActions, SwipeableCard, SwipeableListItem, Switch, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, Text, Textarea, ThemeToggle, TimePicker, Timeline, TimezoneSelector, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, getFormula, getFormulasByCategory, getLocalTimezone, isValidTimezone, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, searchFormulas, statusManager, useBreadcrumbReset, useBreakpoint, useBreakpointValue, useCelebration, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useDelighters, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
 //# sourceMappingURL=index.esm.js.map