@astryxdesign/core 0.1.1 → 0.1.2-canary.04e71b2

package/dist/TabList/TabList.js

@@ -4,9 +4,11 @@
 
 /**
  * @file TabList.tsx
- * @input Uses React, StyleX, TabListContext
+ * @input Uses React, StyleX, TabListContext, useListFocus, useKeyboardHint
  * @output Exports TabList component and TabListProps type
- * @position Nav wrapper; provides TabListContext to Tab and TabMenu children
+ * @position Nav wrapper; provides TabListContext to Tab and TabMenu children.
+ *   Owns roving-tabindex keyboard navigation (Arrow/Home/End) across the tab
+ *   strip via the shared useListFocus hook so it is a single Tab stop.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/TabList/TabList.doc.mjs
@@ -14,16 +16,25 @@
  * - /packages/core/src/TabList/TabList.test.tsx
  * - /packages/cli/templates/blocks/components/TabList/ (showcase blocks)
  */
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { borderVars, colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { TabListContext } from "./TabListContext.js";
 import { useSize } from "../SizeContext/SizeContext.js";
-import { mergeProps } from "../utils/index.js";
+import { mergeProps, mergeRefs } from "../utils/index.js";
+import { useListFocus } from "../hooks/useListFocus.js";
+import { useKeyboardHint } from "../hooks/useKeyboardHint.js";
 import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+
+/**
+ * Selector matching the focusable stops in the tab strip: every Tab
+ * (`[data-tab-value]`) and every TabMenu trigger (`[data-tab-menu]`),
+ * in DOM order. Disabled stops are filtered out by the handler.
+ */
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const TAB_STOP_SELECTOR = '[data-tab-value],[data-tab-menu]';
 const styles = {
   nav: {
     k1xSpc: "x78zum5",
@@ -68,30 +79,95 @@ export function TabList({
   size: sizeProp,
   layout = 'hug',
   hasDivider = false,
+  orientation = 'horizontal',
   xstyle,
   className,
   style,
   children,
+  onKeyDown: onKeyDownProp,
+  onFocus: onFocusProp,
+  onBlur: onBlurProp,
+  'aria-label': ariaLabel = 'Tabs',
+  'aria-orientation': _ariaOrientation,
+  [EDGE_COMP_ATTR]: _edgeCompAttr,
   ...restProps
 }) {
   const size = useSize(sizeProp, 'md');
+
+  // Roving-tabindex keyboard navigation across the tab strip via the shared
+  // hook. `orientation: 'both'` accepts both arrow axes per the WAI-ARIA APG
+  // allowance for tab strips (ArrowRight/ArrowDown advance, ArrowLeft/ArrowUp
+  // retreat) regardless of the component's `orientation` prop, which only
+  // drives the reported `aria-orientation`.
+  //
+  // `hasRovingTabIndex` makes the hook own the single tab stop: it stamps
+  // tabindex 0/-1, repairs the stop on mount and as stops mount/unmount or
+  // toggle disabled, and — via `handleFocus` on the nav — keeps the stop in
+  // sync after clicks or programmatic focus. Individual Tabs still render
+  // `tabIndex={isSelected ? 0 : -1}` (see Tab.tsx) as the initial source of
+  // truth; the hook's repair preserves an existing tab stop and only promotes
+  // the first enabled stop when none is tabbable.
+  const {
+    listRef,
+    handleKeyDown,
+    handleFocus
+  } = useListFocus({
+    itemSelector: TAB_STOP_SELECTOR,
+    orientation: 'both',
+    hasRovingTabIndex: true
+  });
+  const {
+    hintElement,
+    onKeyDown: onHintKeyDown,
+    onFocus: onHintFocus,
+    onBlur: onHintBlur
+  } = useKeyboardHint({
+    orientation
+  });
   const contextValue = useMemo(() => ({
     value,
     onChange,
     size,
     layout
   }), [value, onChange, size, layout]);
+  const handleRootKeyDown = useCallback(e => {
+    onKeyDownProp?.(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    onHintKeyDown(e);
+    handleKeyDown(e);
+  }, [onKeyDownProp, onHintKeyDown, handleKeyDown]);
+  const handleRootFocus = useCallback(e => {
+    onFocusProp?.(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    onHintFocus(e);
+    handleFocus(e);
+  }, [onFocusProp, onHintFocus, handleFocus]);
+  const handleRootBlur = useCallback(e => {
+    onBlurProp?.(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    onHintBlur(e);
+  }, [onBlurProp, onHintBlur]);
   return /*#__PURE__*/_jsx(TabListContext, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx("nav", {
-      ref: ref,
-      "aria-label": "Tabs",
-      [EDGE_COMP_ATTR]: '',
+    children: /*#__PURE__*/_jsxs("nav", {
+      ref: mergeRefs(ref, listRef),
       ...restProps,
+      "aria-label": ariaLabel,
+      "aria-orientation": orientation,
+      onKeyDown: handleRootKeyDown,
+      onFocus: handleRootFocus,
+      onBlur: handleRootBlur,
+      [EDGE_COMP_ATTR]: '',
       ...mergeProps(themeProps('tab-list', {
         size
       }), stylex.props(styles.nav, layout === 'fill' && styles.fill, hasDivider && styles.divider, xstyle), className, style),
-      children: children
+      children: [children, hintElement]
     })
   });
 }

package/dist/TabList/TabListContext.d.ts

@@ -9,6 +9,11 @@ export type TabListSize = 'sm' | 'md' | 'lg';
  * - `'fill'`: tabs stretch equally to fill the container width.
  */
 export type TabListLayout = 'hug' | 'fill';
+/**
+ * Orientation of the tab strip. Controls which arrow keys move focus
+ * between tabs and the reported `aria-orientation`.
+ */
+export type TabListOrientation = 'horizontal' | 'vertical';
 /**
  * Context for communicating value/onChange/size/layout from TabList to children.
  */

package/dist/TabList/TabListContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabListContext.d.ts","sourceRoot":"","sources":["../../src/TabList/TabListContext.ts"],"names":[],"mappings":"AAeA;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,qDAE1B,CAAC;AAGF;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,mBAAmB,CASvD"}
+{"version":3,"file":"TabListContext.d.ts","sourceRoot":"","sources":["../../src/TabList/TabListContext.ts"],"names":[],"mappings":"AAeA;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3C;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,qDAAkD,CAAC;AAG9E;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,mBAAmB,CASvD"}

package/dist/TabList/TabListContext.js

@@ -23,6 +23,11 @@ import { createContext, use } from 'react';
  * - `'fill'`: tabs stretch equally to fill the container width.
  */
 
+/**
+ * Orientation of the tab strip. Controls which arrow keys move focus
+ * between tabs and the reported `aria-orientation`.
+ */
+
 /**
  * Context for communicating value/onChange/size/layout from TabList to children.
  */

package/dist/TabList/TabMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabMenu.d.ts","sourceRoot":"","sources":["../../src/TabList/TabMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAiBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,iBAAiB,CAAC,EAC5B,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AA8KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,qBA8Id;yBArJe,OAAO"}
+{"version":3,"file":"TabMenu.d.ts","sourceRoot":"","sources":["../../src/TabList/TabMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAiBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,iBAAiB,CAAC,EAC5B,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AA8KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,qBAiJd;yBAxJe,OAAO"}

package/dist/TabList/TabMenu.js

@@ -138,7 +138,10 @@ export function TabMenu({
   const popover = usePopover({
     hasLightDismiss: true,
     hasCloseButton: false,
-    hasAutoFocus: false
+    hasAutoFocus: false,
+    // The popup's own role="menu" is the exposed semantics; a modal dialog
+    // wrapper would announce an unnamed dialog around the menu.
+    role: 'none'
   });
   const {
     listRef,
@@ -169,6 +172,8 @@ export function TabMenu({
       "aria-haspopup": "menu",
       "aria-expanded": popover.isOpen,
       "aria-controls": menuId,
+      "data-tab-menu": "",
+      tabIndex: hasSelectedOption ? 0 : -1,
       onClick: handleToggle,
       ...mergeProps(themeProps('tab-menu'), stylex.props(styles.trigger, sizeStyles[size], hasSelectedOption && styles.triggerSelected, tabScope, xstyle), className, style),
       children: [/*#__PURE__*/_jsx("span", {

package/dist/Table/BaseTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAWf,MAAM,SAAS,CAAC;AA6fjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CACzC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAEjC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
+{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AA6hBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}

package/dist/Table/BaseTable.js

@@ -105,7 +105,7 @@ function TableRowInner({
   CellComponent
 }) {
   // Build cells first
-  const cells = columns.map(col => {
+  const cells = columns.map((col, columnIndex) => {
     // Apply column alignment to body cells
     const initialCellHtmlProps = {};
     if (col.align) {
@@ -113,10 +113,13 @@ function TableRowInner({
         textAlign: col.align
       };
     }
-    const cellRenderProps = applyPlugins(plugins, p => p.transformBodyCell, {
+    const initialBodyCellRenderProps = {
       htmlProps: initialCellHtmlProps,
-      styles: []
-    }, col, item);
+      styles: [],
+      columnIndex,
+      columns: columns
+    };
+    const cellRenderProps = applyPlugins(plugins, p => p.transformBodyCell, initialBodyCellRenderProps, col, item, columnIndex, columns);
     const isDefaultRenderer = !col.renderCell;
     const rawContent = isDefaultRenderer ? defaultCellRenderer(item, col.key) : col.renderCell?.(item) ?? null;
 
@@ -136,6 +139,7 @@ function TableRowInner({
     }
     return /*#__PURE__*/_jsx(CellComponent, {
       ...cellRenderProps.htmlProps,
+      contextMenuActions: cellRenderProps.contextMenuActions,
       xstyle: cellRenderProps.styles,
       children: content
     }, col.key);
@@ -265,7 +269,7 @@ function BaseTableInner({
   });
 
   // --- Plugin pipeline: header cells ---
-  const headerCells = resolvedColumns.map(col => {
+  const headerCells = resolvedColumns.map((col, columnIndex) => {
     const headerContent = col.header ?? col.key;
 
     // Build initial htmlProps with column alignment if specified
@@ -277,11 +281,14 @@ function BaseTableInner({
         textAlign: col.align
       };
     }
-    const cellRenderProps = applyPlugins(plugins, p => p.transformHeaderCell, {
+    const initialHeaderRenderProps = {
       htmlProps: initialHeaderHtmlProps,
       styles: [],
-      content: headerContent
-    }, col);
+      content: headerContent,
+      columnIndex,
+      columns: resolvedColumns
+    };
+    const cellRenderProps = applyPlugins(plugins, p => p.transformHeaderCell, initialHeaderRenderProps, col, columnIndex, resolvedColumns);
 
     // Apply pre-computed column width styles on the <th>.
     // With table-layout: fixed, header cell sizing controls column widths.
@@ -308,18 +315,20 @@ function BaseTableInner({
       below
     } = cellRenderProps;
     const hasSlots = before != null || after != null || overlay != null || below != null;
+    const headerInner = hasSlots ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [before, after != null ? /*#__PURE__*/_jsxs("div", {
+        ...{
+          className: "x3nfvp2 x6s0dn4 xzye2dw xeuugli"
+        },
+        children: [resolvedContent, after]
+      }) : resolvedContent, overlay, below]
+    }) : resolvedContent;
     return /*#__PURE__*/_jsx(HeaderCellComponent, {
       ...mergedHtmlProps,
       ...headerTitleProp,
+      contextMenuActions: cellRenderProps.contextMenuActions,
       xstyle: cellRenderProps.styles,
-      children: hasSlots ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [before, after != null ? /*#__PURE__*/_jsxs("div", {
-          ...{
-            className: "x3nfvp2 x6s0dn4 xzye2dw xeuugli"
-          },
-          children: [resolvedContent, after]
-        }) : resolvedContent, overlay, below]
-      }) : resolvedContent
+      children: headerInner
     }, col.key);
   });
 
@@ -348,6 +357,7 @@ function BaseTableInner({
       children: [hasColumns && /*#__PURE__*/_jsx(TableHeader, {
         children: /*#__PURE__*/_jsx(RowComponent, {
           ...headerRowRenderProps.htmlProps,
+          isHeaderRow: true,
           xstyle: headerRowRenderProps.styles,
           children: headerRowRenderProps.children
         })
@@ -381,8 +391,20 @@ function BaseTableInner({
   // when columns exceed the container width. This wrapper sits between
   // the <table> and transformTableContext, so plugin chrome (pagination,
   // toolbars) renders outside the scroll area.
+  //
+  // Before rendering the wrapper, run the plugin `transformScrollWrapper`
+  // pipeline so plugins can attach a ref to the scroll container (scroll-aware
+  // sticky shadows, virtualization) and inject before/after chrome.
   if (ScrollWrapper) {
+    const scrollWrapperRenderProps = applyPlugins(plugins, p => p.transformScrollWrapper, {
+      htmlProps: {},
+      styles: []
+    });
     tableElement = /*#__PURE__*/_jsx(ScrollWrapper, {
+      htmlProps: scrollWrapperRenderProps.htmlProps,
+      styles: scrollWrapperRenderProps.styles,
+      beforeTable: scrollWrapperRenderProps.beforeTable,
+      afterTable: scrollWrapperRenderProps.afterTable,
       children: tableElement
     });
   }

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAU,KAAK,YAAY,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,WAAW,EAEZ,MAAM,SAAS,CAAC;AAMjB,oDAAoD;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE/D,kCAAkC;AAElC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,8DAA8D;AAE9D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpD;;;;;GAKG;AAEH,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAE,SAAQ,IAAI,CACzE,cAAc,CAAC,CAAC,CAAC,EACjB,SAAS,GAAG,YAAY,CACzB;IACC,uCAAuC;IACvC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACnC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC1C;AA6HD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,KAAK,EAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACjD,YAAY,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAU,KAAK,YAAY,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,WAAW,EAEZ,MAAM,SAAS,CAAC;AAOjB,oDAAoD;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE/D,kCAAkC;AAElC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,8DAA8D;AAE9D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpD;;;;;GAKG;AAEH,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAE,SAAQ,IAAI,CACzE,cAAc,CAAC,CAAC,CAAC,EACjB,SAAS,GAAG,YAAY,CACzB;IACC,uCAAuC;IACvC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACnC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC1C;AAsJD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,KAAK,EAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACjD,YAAY,CAAC"}

package/dist/Table/Table.js

@@ -41,7 +41,7 @@ import { themeProps } from "../utils/themeProps.js";
  *
  * @template T - The row data type
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // =============================================================================
 // StyleX Styles (table-level only; cell/row/header styles owned by components)
 // =============================================================================
@@ -53,14 +53,43 @@ const tableStyles = {
     $$css: true
   }
 };
+const scrollWrapperStyles = {
+  base: {
+    kXHlph: "xw2csxc",
+    kuHK5b: "x5lxg6s",
+    $$css: true
+  },
+  containerBleed: {
+    keTefX: "xojxgvx",
+    k71WvV: "x1fcf3bl",
+    kzqmXN: "xx6qvi6",
+    keoZOQ: "xkibk3",
+    k1K539: "xlayyun",
+    $$css: true
+  }
+};
 function TableScrollWrapper({
-  children
+  children,
+  htmlProps,
+  styles: pluginStyles,
+  beforeTable,
+  afterTable
 }) {
-  return /*#__PURE__*/_jsx("div", {
-    ...mergeProps(themeProps('table-scroll-wrapper'), {
-      className: "xw2csxc x5lxg6s xojxgvx x1fcf3bl xx6qvi6 xkibk3 xlayyun"
-    }),
-    children: children
+  const {
+    ref,
+    ...restHtmlProps
+  } = htmlProps ?? {};
+  return /*#__PURE__*/_jsxs("div", {
+    ref: ref
+    // Keyboard-focusable so keyboard users can scroll a horizontally
+    // overflowing table. Callers may override role/aria-label via htmlProps.
+    ,
+    tabIndex: 0,
+    role: "region",
+    "aria-label": "Table",
+    ...restHtmlProps,
+    ...mergeProps(themeProps('table-scroll-wrapper'), stylex.props(scrollWrapperStyles.base, scrollWrapperStyles.containerBleed, ...(pluginStyles ?? []))),
+    children: [beforeTable, children, afterTable]
   });
 }
 

package/dist/Table/TableCell.d.ts

@@ -12,6 +12,7 @@
 import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 import type { StyleXStyles } from '../theme/types';
+import type { TableContextActions } from './types';
 /** Props for TableCell — thin `<td>` wrapper */
 export interface TableCellProps extends BaseProps<HTMLTableCellElement> {
     /** Ref forwarded to the root element */
@@ -30,6 +31,12 @@ export interface TableCellProps extends BaseProps<HTMLTableCellElement> {
      * Must be a `stylex.create()` value — not an inline style object.
      */
     xstyle?: StyleXStyles | StyleXStyles[];
+    /**
+     * Right-click actions rendered as a context menu around the cell content.
+     * The cell owns the wrapper so it controls how the menu interacts with its
+     * padding / content. Empty or undefined renders no menu.
+     */
+    contextMenuActions?: TableContextActions;
 }
 /**
  * TableCell — a `<td>` wrapper for children/streaming mode.
@@ -45,7 +52,7 @@ export interface TableCellProps extends BaseProps<HTMLTableCellElement> {
  * </TableRow>
  * ```
  */
-export declare function TableCell({ children, xstyle, ref, className: incomingClassName, style: incomingStyle, ...props }: TableCellProps): import("react").JSX.Element;
+export declare function TableCell({ children, xstyle, ref, className: incomingClassName, style: incomingStyle, contextMenuActions, ...props }: TableCellProps): import("react").JSX.Element;
 export declare namespace TableCell {
     var displayName: string;
 }

package/dist/Table/TableCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAejD,gDAAgD;AAChD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IACrE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IACtC,0FAA0F;IAC1F,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;CACxC;AA8DD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,aAAa,EACpB,GAAG,KAAK,EACT,EAAE,cAAc,+BAwChB;yBA/Ce,SAAS"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAgBjD,gDAAgD;AAChD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IACrE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IACtC,0FAA0F;IAC1F,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACvC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC;CAC1C;AA8DD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,aAAa,EACpB,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,cAAc,+BAiChB;yBAzCe,SAAS"}

package/dist/Table/TableCell.js

@@ -16,6 +16,7 @@
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { borderVars, colorVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { wrapInTableContextMenu } from "./tableContextMenu.js";
 import "./table.stylex.js";
 import { overflowStyles, wrapStyles, containerEdgeStyles, tableRowMarker } from "./table.stylex.js";
 import { useTableContext, buildDividerStyles, mergeXStyle } from "./useTableCellStyles.js";
@@ -98,23 +99,22 @@ export function TableCell({
   ref,
   className: incomingClassName,
   style: incomingStyle,
+  contextMenuActions,
   ...props
 }) {
   const ctx = useTableContext();
-  if (!ctx) {
-    return /*#__PURE__*/_jsx("td", {
-      ref: ref,
-      ...props,
-      ...mergeProps(themeProps('table-cell'), stylex.props(xstyle), incomingClassName, incomingStyle),
-      children: children
-    });
-  }
-  const cellStyles = [densityStyles[ctx.density], ctx.textOverflow === 'truncate' ? overflowStyles.cell : wrapStyles.cell, containerEdgeStyles[ctx.density], verticalAlignStyles[ctx.verticalAlign], ...buildDividerStyles(ctx, dividerRowStyles.cell, dividerColumnStyles.cell)];
+
+  // Standalone (no table context) renders plain, with no density/divider styles.
+  const cellStyles = ctx ? [densityStyles[ctx.density], ctx.textOverflow === 'truncate' ? overflowStyles.cell : wrapStyles.cell, containerEdgeStyles[ctx.density], verticalAlignStyles[ctx.verticalAlign], ...buildDividerStyles(ctx, dividerRowStyles.cell, dividerColumnStyles.cell)] : [];
+
+  // The cell owns the context-menu wrapper so it controls how the menu
+  // interacts with its padding / content. No-op when no actions.
+  const content = wrapInTableContextMenu(children, contextMenuActions);
   return /*#__PURE__*/_jsx("td", {
     ref: ref,
     ...props,
     ...mergeProps(themeProps('table-cell'), stylex.props(...mergeXStyle(cellStyles, xstyle)), incomingClassName, incomingStyle),
-    children: children
+    children: content
   });
 }
 TableCell.displayName = 'TableCell';

package/dist/Table/TableHeaderCell.d.ts

@@ -12,6 +12,7 @@
 import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 import type { StyleXStyles } from '../theme/types';
+import type { TableContextActions } from './types';
 /** Props for TableHeaderCell — `<th>` wrapper with context-aware styling */
 export interface TableHeaderCellProps extends BaseProps<HTMLTableCellElement> {
     /** Ref forwarded to the root element */
@@ -24,6 +25,12 @@ export interface TableHeaderCellProps extends BaseProps<HTMLTableCellElement> {
      * Must be a `stylex.create()` value — not an inline style object.
      */
     xstyle?: StyleXStyles | StyleXStyles[];
+    /**
+     * Right-click actions rendered as a context menu around the cell content.
+     * The cell owns the wrapper so it controls how the menu interacts with its
+     * padding / content. Empty or undefined renders no menu.
+     */
+    contextMenuActions?: TableContextActions;
 }
 /**
  * TableHeaderCell — a `<th>` wrapper for header cells.
@@ -44,7 +51,7 @@ export interface TableHeaderCellProps extends BaseProps<HTMLTableCellElement> {
  * </thead>
  * ```
  */
-export declare function TableHeaderCell({ children, xstyle, ref, className: incomingClassName, style: incomingStyle, ...props }: TableHeaderCellProps): import("react").JSX.Element;
+export declare function TableHeaderCell({ children, xstyle, ref, className: incomingClassName, style: incomingStyle, contextMenuActions, ...props }: TableHeaderCellProps): import("react").JSX.Element;
 export declare namespace TableHeaderCell {
     var displayName: string;
 }

package/dist/Table/TableHeaderCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableHeaderCell.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAMjD,4EAA4E;AAC5E,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IAC3E,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IACtC,oDAAoD;IACpD,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;CACxC;AAkDD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,aAAa,EACpB,GAAG,KAAK,EACT,EAAE,oBAAoB,+BAgDtB;yBAvDe,eAAe"}
+{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableHeaderCell.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAOjD,4EAA4E;AAC5E,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IAC3E,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IACtC,oDAAoD;IACpD,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACvC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC;CAC1C;AAkDD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,aAAa,EACpB,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,oBAAoB,+BAsCtB;yBA9Ce,eAAe"}

package/dist/Table/TableHeaderCell.js

@@ -18,6 +18,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, fontWeightVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
 import { overflowStyles, containerEdgeStyles } from "./table.stylex.js";
 import { useTableContext, mergeXStyle } from "./useTableCellStyles.js";
+import { wrapInTableContextMenu } from "./tableContextMenu.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 
@@ -96,32 +97,31 @@ export function TableHeaderCell({
   ref,
   className: incomingClassName,
   style: incomingStyle,
+  contextMenuActions,
   ...props
 }) {
   const ctx = useTableContext();
-  if (!ctx) {
-    return /*#__PURE__*/_jsx("th", {
-      ref: ref,
-      ...props,
-      ...mergeProps(themeProps('table-header-cell'), stylex.props(xstyle), incomingClassName, incomingStyle),
-      children: children
-    });
-  }
 
   // Header cells always get the bottom divider (separates header from body).
-  // Column dividers use the shared buildDividerStyles — but only for
-  // the column axis, since the row divider is the headerDividerStyles.
-  const cellStyles = [headerStyles.cell, densityStyles[ctx.density], headerDividerStyles.cell, overflowStyles.cell, containerEdgeStyles[ctx.density]];
-
-  // Only add column dividers from the shared builder
-  if (ctx.dividers === 'columns' || ctx.dividers === 'grid') {
-    cellStyles.push(dividerColumnStyles.cell);
+  // When used standalone (no table context) the cell renders plain, with no
+  // density/divider styles.
+  const cellStyles = [];
+  if (ctx) {
+    cellStyles.push(headerStyles.cell, densityStyles[ctx.density], headerDividerStyles.cell, overflowStyles.cell, containerEdgeStyles[ctx.density]);
+    // Column dividers come from the shared builder (column axis only).
+    if (ctx.dividers === 'columns' || ctx.dividers === 'grid') {
+      cellStyles.push(dividerColumnStyles.cell);
+    }
   }
+
+  // The cell owns the context-menu wrapper so it controls how the menu
+  // interacts with its padding / content. No-op when no actions.
+  const content = wrapInTableContextMenu(children, contextMenuActions);
   return /*#__PURE__*/_jsx("th", {
     ref: ref,
     ...props,
     ...mergeProps(themeProps('table-header-cell'), stylex.props(...mergeXStyle(cellStyles, xstyle)), incomingClassName, incomingStyle),
-    children: children
+    children: content
   });
 }
 TableHeaderCell.displayName = 'TableHeaderCell';

package/dist/Table/TableRow.d.ts

@@ -22,6 +22,11 @@ export interface TableRowProps extends BaseProps<HTMLTableRowElement> {
      * Must be a `stylex.create()` value — not an inline style object.
      */
     xstyle?: StyleXStyles[];
+    /**
+     * Whether this row is the header row. Header rows skip the striped/hover
+     * row styling (which is only meant for body rows).
+     */
+    isHeaderRow?: boolean;
 }
 /**
  * TableRow — a `<tr>` wrapper for children/streaming mode.
@@ -39,7 +44,7 @@ export interface TableRowProps extends BaseProps<HTMLTableRowElement> {
  * </Table>
  * ```
  */
-export declare function TableRow({ children, xstyle, ref, ...props }: TableRowProps): import("react").JSX.Element;
+export declare function TableRow({ children, xstyle, ref, isHeaderRow, ...props }: TableRowProps): import("react").JSX.Element;
 export declare namespace TableRow {
     var displayName: string;
 }

package/dist/Table/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAMjD,+CAA+C;AAC/C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,mBAAmB,CAAC;IACnE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;CACzB;AAwCD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,+BAgDf;yBArDe,QAAQ"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAMjD,+CAA+C;AAC/C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,mBAAmB,CAAC;IACnE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA4DD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,aAAa,+BAoDf;yBA1De,QAAQ"}

package/dist/Table/TableRow.js

@@ -27,12 +27,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const stripedRowStyles = {
   row: {
     kWkggS: "x1dnou9g",
+    "--table-row-overlay": "x1rht92",
     $$css: true
   }
 };
 const hoverRowStyles = {
   row: {
     kWkggS: "xe9uy6x",
+    "--table-row-overlay": "x1pkcbo2",
     k1ekBW: "x15406qy",
     kIyJzY: "xuedmi6",
     kAMwcw: "xlr8y92",
@@ -42,6 +44,7 @@ const hoverRowStyles = {
 const stripedHoverRowStyles = {
   row: {
     kWkggS: "x1dnou9g xe9uy6x",
+    "--table-row-overlay": "x1rht92 x1pkcbo2",
     k1ekBW: "x15406qy",
     kIyJzY: "xuedmi6",
     kAMwcw: "xlr8y92",
@@ -69,6 +72,7 @@ export function TableRow({
   children,
   xstyle,
   ref,
+  isHeaderRow = false,
   ...props
 }) {
   const ctx = use(TableContext);
@@ -82,13 +86,17 @@ export function TableRow({
   }
   const rowStyles = [];
 
-  // Handle striped + hover combination to avoid backgroundColor conflicts
-  if (ctx.isStriped && ctx.hasHover) {
-    rowStyles.push(stripedHoverRowStyles.row);
-  } else if (ctx.isStriped) {
-    rowStyles.push(stripedRowStyles.row);
-  } else if (ctx.hasHover) {
-    rowStyles.push(hoverRowStyles.row);
+  // Striped + hover styling is for body rows only — the header row must not
+  // pick up the hover highlight (or striping) even when hasHover/isStriped.
+  if (!isHeaderRow) {
+    // Handle striped + hover combination to avoid backgroundColor conflicts
+    if (ctx.isStriped && ctx.hasHover) {
+      rowStyles.push(stripedHoverRowStyles.row);
+    } else if (ctx.isStriped) {
+      rowStyles.push(stripedRowStyles.row);
+    } else if (ctx.hasHover) {
+      rowStyles.push(hoverRowStyles.row);
+    }
   }
   if (ctx.dividers === 'rows' || ctx.dividers === 'grid') {
     // Note: last-body-row border removal is handled by TableCell