@heymantle/litho 0.0.14 → 0.0.16

package/dist/cjs/components/Spinner.js

@@ -10,7 +10,29 @@ Object.defineProperty(exports, "default", {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _tailwindvariants = require("tailwind-variants");
-var styles = (0, _tailwindvariants.tv)({
+/**
+ * @component Spinner
+ *
+ * @description An animated loading indicator for inline use within buttons, cards, or sections during asynchronous operations.
+ *
+ * @usage
+ * - DO: Use inline within buttons, cards, or sections to indicate localized loading.
+ * - DON'T: Use as a full-page loading indicator; use `Loading` for page-level progress bars.
+ *
+ * @accessibility
+ * - Renders with `role="status"` and an `aria-label`; always provide a descriptive `accessibilityLabel`.
+ * - Avoid relying on the animation alone; the `role="status"` ensures screen readers announce loading state.
+ *
+ * @alternative
+ * - If you need a page-level progress bar, use `Loading` instead.
+ * - If you need placeholder content while data loads, use `SkeletonText` instead.
+ *
+ * @param {Object} props - The props object.
+ * @param {('small'|'large')} [props.size='large'] - The size of the spinner, either "small" or "large".
+ * @param {('default'|'subdued')} [props.color='default'] - The color variant of the spinner.
+ * @param {string} [props.accessibilityLabel='Loading...'] - The accessible label for screen readers, describing the spinner's purpose.
+ * @returns {JSX.Element} The rendered Spinner component.
+ */ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-Spinner",
     variants: {
         size: {
@@ -29,17 +51,7 @@ var svgStyles = (0, _tailwindvariants.tv)({
         }
     }
 });
-/**
- * Spinner Component
- *
- * This component renders a loading spinner with customizable size, color, and accessibility label.
- *
- * @param {Object} props - The props object.
- * @param {('small'|'large')} [props.size='large'] - The size of the spinner, either "small" or "large".
- * @param {('default'|'subdued')} [props.color='default'] - The color variant of the spinner.
- * @param {string} [props.accessibilityLabel='Loading...'] - The accessible label for screen readers, describing the spinner's purpose.
- * @returns {JSX.Element} The rendered Spinner component.
- */ function Spinner() {
+function Spinner() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _props_size = props.size, size = _props_size === void 0 ? "large" : _props_size, _props_color = props.color, color = _props_color === void 0 ? "default" : _props_color, _props_accessibilityLabel = props.accessibilityLabel, accessibilityLabel = _props_accessibilityLabel === void 0 ? "Loading..." : _props_accessibilityLabel;
     var classes = styles({

package/dist/cjs/components/Stack.js

@@ -1,4 +1,3 @@
-"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -90,7 +89,62 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-var styles = (0, _tailwindvariants.tv)({
+/**
+ * @component Stack
+ *
+ * @description A flex layout component that arranges children in a row or column with configurable gap, alignment, and wrapping.
+ *
+ * @usage
+ * - DO: Arrange child elements with consistent spacing using the `gap` prop.
+ * - DON'T: Use for grid-based layouts (use `Grid` instead).
+ *
+ * @accessibility
+ * - Stack is a layout utility; ensure child content maintains logical reading order.
+ *
+ * @alternative
+ * - If you need explicit horizontal layout, use `Stack` with `horizontal` prop.
+ * - If you need responsive layout that switches from vertical to horizontal at a breakpoint, use `Stack` with `horizontal="md"` (or `"sm"`, `"lg"`, etc.).
+ * - If you need 2D grid layout, use `Grid`.
+ *
+ * @param {Object} [props={}] - Component props.
+ * @param {string} [props.as='div'] - The HTML element to render. Defaults to `div`.
+ * @param {React.ReactNode} [props.children] - Child elements to render inside the stack.
+ * @param {boolean|'xs'|'sm'|'md'|'lg'|'xl'} [props.horizontal=false] - Direction control. When `true`, always horizontal (flex-row). When a breakpoint string is passed (e.g. `"md"`), the stack is vertical below that breakpoint and horizontal at/above it. Defaults to `false` (vertical).
+ * @param {('none'|'xs'|'sm'|'md'|'lg'|'0'|'px'|'0.5'|'1'|'1.5'|'2'|'3'|'4'|'5'|'6'|'8'|'10')} [props.gap='md'] - Spacing between children. Semantic options: 'none' (0), 'xs' (1), 'sm' (2), 'md' (4), 'lg' (8). Numeric options: '0', 'px', '0.5', '1', '2', '3', '4', '5', '6', '8', '10'. Defaults to 'md'.
+ * @param {string} [props.id] - Optional ID for the component.
+ * @param {string} [props.className] - Additional custom class names to apply to the component.
+ * @param {('start'|'center'|'end'|'stretch'|'baseline')} [props.align='stretch'] - Cross-axis alignment (maps to CSS `align-items`). Controls vertical alignment for horizontal stacks and horizontal alignment for vertical stacks.
+ * @param {boolean} [props.wrap=false] - Whether children should wrap to the next line if necessary. Defaults to false.
+ * @param {('start'|'center'|'end'|'between'|'evenly'|'around')} [props.justify='start'] - Main axis justification. Controls horizontal justification for horizontal stacks and vertical justification for vertical stacks.
+ * @param {boolean} [props.fill=false] - When true and horizontal is active, direct children fill equal space (flex: 1 1 0%). Set to false to let children size naturally. Defaults to false.
+ * @param {('1'|'2'|'3'|'4'|'5'|'6'|null)} [props.flex=null] - Flex grow value. Sets `flex-1` through `flex-6` on the stack. Defaults to null (no flex).
+ * @param {boolean} [props.fullWidth=false] - When true, applies width: 100% (w-full). Defaults to false.
+ * @param {Object} [restProps] - Additional props passed to the root element.
+ *
+ * @returns {JSX.Element} The rendered Stack component.
+ *
+ * @example
+ * // Vertical stack (default)
+ * <Stack gap="sm" align="center">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Stack>
+ *
+ * @example
+ * // Horizontal stack
+ * <Stack horizontal>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Stack>
+ *
+ * @example
+ * // Responsive: vertical on mobile, horizontal at md breakpoint
+ * <Stack horizontal="md">
+ *   <div>Column 1</div>
+ *   <div>Column 2</div>
+ *   <div>Column 3</div>
+ * </Stack>
+ */ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-Stack flex",
     variants: {
         direction: {
@@ -109,6 +163,7 @@ var styles = (0, _tailwindvariants.tv)({
             "px": "gap-px",
             "0.5": "gap-0.5",
             "1": "gap-1",
+            "1.5": "gap-1.5",
             "2": "gap-2",
             "3": "gap-3",
             "4": "gap-4",
@@ -117,75 +172,66 @@ var styles = (0, _tailwindvariants.tv)({
             "8": "gap-8",
             "10": "gap-10"
         },
-        align: {
-            start: "justify-start",
-            center: "justify-center",
-            end: "justify-end",
-            "space-between": "justify-between",
-            "space-evenly": "justify-evenly",
-            "space-around": "justify-around",
-            spaceBetween: "justify-between"
+        flex: {
+            "1": "flex-1",
+            "2": "flex-2",
+            "3": "flex-3",
+            "4": "flex-4",
+            "5": "flex-5",
+            "6": "flex-6"
         },
-        blockAlign: {
+        align: {
             start: "items-start",
             center: "items-center",
             end: "items-end",
-            stretch: "items-stretch"
+            stretch: "items-stretch",
+            baseline: "items-baseline"
         },
-        inlineAlign: {
-            start: "items-start",
-            center: "items-center",
-            end: "items-end",
-            stretch: "items-stretch"
+        justify: {
+            start: "justify-start",
+            center: "justify-center",
+            end: "justify-end",
+            between: "justify-between",
+            evenly: "justify-evenly",
+            stretch: "justify-stretch",
+            around: "justify-around"
         },
         wrap: {
             true: "flex-wrap",
             false: "flex-nowrap"
+        },
+        fullWidth: {
+            true: "w-full",
+            false: ""
         }
     },
     defaultVariants: {
         direction: "vertical",
         gap: "md",
-        align: "start"
+        align: "stretch",
+        justify: "start",
+        fullWidth: false
     }
 });
-/**
- * Stack Component
- *
- * A flexible stack component for creating vertical or horizontal layouts with customizable spacing and alignment.
- * By default, creates a vertical stack with medium gap spacing.
- *
- * @param {Object} [props={}] - Component props.
- * @param {string} [props.as='div'] - The HTML element to render. Defaults to `div`.
- * @param {React.ReactNode} [props.children] - Child elements to render inside the stack.
- * @param {boolean} [props.horizontal=false] - If true, renders a horizontal stack (flex-row). Defaults to vertical (flex-col).
- * @param {('none'|'xs'|'sm'|'md'|'lg'|'0'|'px'|'0.5'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10')} [props.gap='md'] - Spacing between children. Semantic options: 'none' (0), 'xs' (1), 'sm' (2), 'md' (4), 'lg' (8). Numeric options: '0', 'px', '0.5', '1', '2', '3', '4', '5', '6', '8', '10'. Defaults to 'md'.
- * @param {string} [props.id] - Optional ID for the component.
- * @param {string} [props.className] - Additional custom class names to apply to the component.
- * @param {('start'|'center'|'end'|'space-between'|'space-evenly'|'space-around'|'spaceBetween')} [props.align='start'] - Main axis alignment. Controls horizontal alignment for horizontal stacks and vertical alignment for vertical stacks.
- * @param {('start'|'center'|'end'|'stretch')} [props.blockAlign] - Cross-axis alignment for horizontal stacks (vertical alignment). Only applicable when horizontal=true.
- * @param {('start'|'center'|'end'|'stretch')} [props.inlineAlign] - Cross-axis alignment for vertical stacks (horizontal alignment). Only applicable when horizontal=false.
- * @param {boolean} [props.wrap=false] - Whether children should wrap to the next line if necessary. Defaults to false.
- * @param {Object} [restProps] - Additional props passed to the root element.
- *
- * @returns {JSX.Element} The rendered Stack component.
- *
- * @example
- * // Vertical stack (default)
- * <Stack gap="sm" inlineAlign="center">
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- * </Stack>
- *
- * @example
- * // Horizontal stack
- * <Stack horizontal gap="md" blockAlign="center" wrap={true}>
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- * </Stack>
- */ function Stack() {
+// Static maps for Tailwind JIT scanability — do not construct dynamically
+var responsiveDirectionClasses = {
+    xs: "flex-col xs:flex-row",
+    sm: "flex-col sm:flex-row",
+    md: "flex-col md:flex-row",
+    lg: "flex-col lg:flex-row",
+    xl: "flex-col xl:flex-row"
+};
+var fillModifierClasses = {
+    true: "Litho-Stack--fill",
+    xs: "Litho-Stack--fill-xs",
+    sm: "Litho-Stack--fill-sm",
+    md: "Litho-Stack--fill-md",
+    lg: "Litho-Stack--fill-lg",
+    xl: "Litho-Stack--fill-xl"
+};
+function Stack() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var _props_as = props.as, as = _props_as === void 0 ? "div" : _props_as, children = props.children, _props_horizontal = props.horizontal, horizontal = _props_horizontal === void 0 ? false : _props_horizontal, _props_gap = props.gap, gap = _props_gap === void 0 ? "md" : _props_gap, id = props.id, className = props.className, align = props.align, blockAlign = props.blockAlign, inlineAlign = props.inlineAlign, _props_wrap = props.wrap, wrap = _props_wrap === void 0 ? false : _props_wrap, restProps = _object_without_properties(props, [
+    var _props_as = props.as, as = _props_as === void 0 ? "div" : _props_as, children = props.children, _props_horizontal = props.horizontal, horizontal = _props_horizontal === void 0 ? false : _props_horizontal, _props_gap = props.gap, gap = _props_gap === void 0 ? "md" : _props_gap, id = props.id, className = props.className, align = props.align, justify = props.justify, _props_wrap = props.wrap, wrap = _props_wrap === void 0 ? false : _props_wrap, _props_flex = props.flex, flex = _props_flex === void 0 ? null : _props_flex, _props_fill = props.fill, fill = _props_fill === void 0 ? false : _props_fill, _props_fullWidth = props.fullWidth, fullWidth = _props_fullWidth === void 0 ? false : _props_fullWidth, restProps = _object_without_properties(props, [
         "as",
         "children",
         "horizontal",
@@ -193,29 +239,43 @@ var styles = (0, _tailwindvariants.tv)({
         "id",
         "className",
         "align",
-        "blockAlign",
-        "inlineAlign",
-        "wrap"
+        "justify",
+        "wrap",
+        "flex",
+        "fill",
+        "fullWidth"
     ]);
-    var direction = horizontal ? "horizontal" : "vertical";
-    // For horizontal stacks, use blockAlign for cross-axis
-    // For vertical stacks, use inlineAlign for cross-axis
-    var crossAxisAlign = horizontal ? blockAlign : inlineAlign;
-    var classes = styles(_object_spread_props(_object_spread({
+    var isResponsive = typeof horizontal === "string";
+    var isHorizontal = horizontal === true;
+    var effectivelyHorizontal = isHorizontal || isResponsive;
+    // For boolean horizontal, use tv direction variant
+    // For responsive, tv gets "vertical" (flex-col) and responsive classes override at breakpoint
+    var direction = isHorizontal ? "horizontal" : "vertical";
+    // Horizontal stacks default to center (items-center), vertical to stretch (items-stretch)
+    var effectiveAlign = align !== undefined ? align : effectivelyHorizontal ? "center" : "stretch";
+    var classes = styles({
         direction: direction,
         gap: gap,
-        align: align
-    }, horizontal && blockAlign ? {
-        blockAlign: blockAlign
-    } : {}, !horizontal && inlineAlign ? {
-        inlineAlign: inlineAlign
-    } : {}), {
-        wrap: wrap
-    }));
+        align: effectiveAlign,
+        justify: justify,
+        wrap: wrap,
+        flex: flex,
+        fullWidth: fullWidth
+    });
+    // Responsive direction classes (e.g. "flex-col md:flex-row")
+    var responsiveClasses = isResponsive ? responsiveDirectionClasses[horizontal] : "";
+    // Fill modifier class for CSS child targeting
+    var fillClass = fill && effectivelyHorizontal ? fillModifierClasses[horizontal] || fillModifierClasses["true"] : "";
     var Element = as;
+    var allClasses = [
+        classes,
+        responsiveClasses,
+        fillClass,
+        className
+    ].filter(Boolean).join(" ");
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, _object_spread_props(_object_spread({
         id: id,
-        className: "".concat(classes).concat(className ? " ".concat(className) : "")
+        className: allClasses
     }, restProps), {
         children: children
     }));

package/dist/cjs/components/TabNavigation.js

@@ -68,7 +68,33 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-var AVG_CHAR_WIDTH = 5.5;
+/**
+ * @component TabNavigation
+ *
+ * @description A URL-based tab navigation component that renders tabs as links, supporting closeable tabs and route-driven active states.
+ *
+ * @usage
+ * - DO: Use for navigation tabs that change the URL/route.
+ * - DON'T: Use for in-page content switching without URL changes (use Tabs).
+ *
+ * @accessibility
+ * - Renders as navigation links; ensure each tab link has descriptive text.
+ *
+ * @alternative
+ * - If you need in-page content tabs without URL routing, use `Tabs`. If you need a sidebar nav, use `Navigation`.
+ *
+ * @param {Object} props - Component properties.
+ * @param {Array<Object>} [props.tabs=[]] - Array of tab objects to display.
+ * @param {string} props.tabs[].id - Unique identifier for the tab.
+ * @param {string} props.tabs[].title - Display title for the tab.
+ * @param {boolean} [props.tabs[].loading] - Whether the tab is in a loading state.
+ * @param {Object} [props.tabs[].readStatus] - Read status indicator for the tab.
+ * @param {string} [props.activeTabId] - The ID of the currently active tab.
+ * @param {Function} [props.onTabClick] - Callback fired when a tab is clicked, receives the tab ID.
+ * @param {Function} [props.onTabClose] - Callback fired when a tab's close button is clicked, receives the tab ID.
+ * @param {string} [props.className=""] - Additional CSS class names for the container.
+ * @returns {JSX.Element} The rendered TabNavigation component.
+ */ var AVG_CHAR_WIDTH = 5.5;
 var tabStyles = (0, _tailwindvariants.tv)({
     base: "relative group cursor-pointer rounded-t-sm items-center px-2 pt-2 gap-0.5 overflow-hidden min-w-[60px] max-w-[160px] pointer-coarse:pb-1 pointer-coarse:pt-3 transition-colors",
     variants: {

package/dist/cjs/components/Table.js

@@ -28,6 +28,7 @@ var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
 var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
 var _Table = require("../styles/Table");
 var _useIndexResourceState = require("../utilities/useIndexResourceState");
+var _useMobile = require("../utilities/useMobile");
 var _useMounted = require("../utilities/useMounted");
 var _useTableScrollState = /*#__PURE__*/ _interop_require_default(require("../utilities/useTableScrollState"));
 function _array_like_to_array(arr, len) {
@@ -217,19 +218,21 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-var TableContext = /*#__PURE__*/ (0, _react.createContext)({});
-var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
 /**
- * @typedef {Object} TableHeading
- * @property {string|React.ReactNode} title - The title content of the heading.
- * @property {boolean} [sortable=false] - Whether the column is sortable.
- * @property {"start" | "end" | "left" | "right" | "center"} [alignment="start"] - Alignment of the heading content.
- * @property {boolean} [hidden=false] - Whether the heading is hidden.
- * @property {string|React.ReactNode} [tooltip] - Tooltip content for the heading.
- * @property {string|React.ReactNode} [tooltipContent] - Alternative tooltip content for the heading.
- * @property {Function} [onAction] - Callback function when the heading is clicked.
- */ /**
- * Table component for displaying data in a customizable, sortable, and scrollable format.
+ * @component Table
+ *
+ * @description A data table component with sortable columns, selectable rows, sticky headers, and pagination support.
+ *
+ * @usage
+ * - DO: Display structured tabular data with columns, sorting, and optional row selection.
+ * - DON'T: Use for layout purposes (use Grid).
+ *
+ * @accessibility
+ * - Renders a semantic `<table>` with proper `<thead>` and `<tbody>`; ensure column headers describe data clearly.
+ *
+ * @alternative
+ * - If you need a simple list without columns, use `ResourceList`.
+ * - If you need a layout grid, use `Grid`.
  *
  * @param {Object} props - Component props.
  * @param {Array<TableHeading|string|React.ReactNode>} [props.headings=[]] - Column headings. Can be strings, React nodes, or configuration objects.
@@ -256,6 +259,17 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
  * @param {Function} [props.onSelectionChange] - Callback for handling selection changes.
  * @param {boolean} [props.loading=false] - Whether the table is loading.
  * @returns {React.ReactElement} The rendered Table component.
+ */ var TableContext = /*#__PURE__*/ (0, _react.createContext)({});
+var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
+/**
+ * @typedef {Object} TableHeading
+ * @property {string|React.ReactNode} title - The title content of the heading.
+ * @property {boolean} [sortable=false] - Whether the column is sortable.
+ * @property {"start" | "end" | "left" | "right" | "center"} [alignment="start"] - Alignment of the heading content.
+ * @property {boolean} [hidden=false] - Whether the heading is hidden.
+ * @property {string|React.ReactNode} [tooltip] - Tooltip content for the heading.
+ * @property {string|React.ReactNode} [tooltipContent] - Alternative tooltip content for the heading.
+ * @property {Function} [onAction] - Callback function when the heading is clicked.
  */ function Table() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var tmp = props.headings, _headings = tmp === void 0 ? [] : tmp, _props_headingStyle = props.headingStyle, headingStyle = _props_headingStyle === void 0 ? "default" : _props_headingStyle, _props_stickyHeader = props.stickyHeader, stickyHeader = _props_stickyHeader === void 0 ? true : _props_stickyHeader, _props_rows = props.rows, rows = _props_rows === void 0 ? [] : _props_rows, tmp1 = props.footers, _footers = tmp1 === void 0 ? [] : tmp1, _props_verticalAlign = props.verticalAlign, verticalAlign = _props_verticalAlign === void 0 ? "middle" : _props_verticalAlign, tmp2 = props.fixedFirstColumns, _fixedFirstColumns = tmp2 === void 0 ? 0 : tmp2, _props_fixedLastColumns = props.fixedLastColumns, fixedLastColumns = _props_fixedLastColumns === void 0 ? 0 : _props_fixedLastColumns, initialSortColumnIndex = props.initialSortColumnIndex, _props_defaultSortDirection = props.defaultSortDirection, defaultSortDirection = _props_defaultSortDirection === void 0 ? "ascending" : _props_defaultSortDirection, onSort = props.onSort, _props_increasedTableDensity = props.increasedTableDensity, increasedTableDensity = _props_increasedTableDensity === void 0 ? false : _props_increasedTableDensity, firstColumnMinWidth = props.firstColumnMinWidth, _props_bordered = props.bordered, bordered = _props_bordered === void 0 ? false : _props_bordered, _props_topBorder = props.topBorder, topBorder = _props_topBorder === void 0 ? true : _props_topBorder, _props_bulkActions = props.bulkActions, bulkActions = _props_bulkActions === void 0 ? [] : _props_bulkActions, _props_promotedBulkActions = props.promotedBulkActions, promotedBulkActions = _props_promotedBulkActions === void 0 ? [] : _props_promotedBulkActions, emptyState = props.emptyState, _children = props.children, paginatedSelectAllActionText = props.paginatedSelectAllActionText, _props_resourceName = props.resourceName, resourceName = _props_resourceName === void 0 ? {
@@ -502,6 +516,8 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                     var alignment = cellAlignment[indexAdjusted];
                     var isSortable = sortable && sortable.length > 0 && sortable[indexAdjusted];
                     var sortIndex = selectable ? indexAdjusted - 1 : indexAdjusted;
+                    // Check if this cell is covered by a fixed overlay
+                    var isCovered = !fixed && !reverseColumns && (fixedFirstColumns > 0 && indexAdjusted < fixedFirstColumns || fixedLastColumns > 0 && indexAdjusted >= headings.length - fixedLastColumns);
                     var sortContent = isSortable ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                         className: "min-h-5 ".concat(sort.index === sortIndex ? "opacity-100" : "opacity-0 group-hover:opacity-100"),
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -514,13 +530,23 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                         if (isSortable) handleSort(sortIndex);
                         else if (heading.onAction) heading.onAction();
                     };
-                    var labelContent = /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    var labelContent = /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
                         className: _Table.styles.headingLabelStyles({
                             alignment: alignment,
                             sortable: !!isSortable,
                             interactive: !!isInteractive
                         }),
-                        onClick: isInteractive ? handleClick : undefined,
+                        onClick: isInteractive ? handleClick : undefined
+                    }, isInteractive ? {
+                        role: "button",
+                        tabIndex: 0,
+                        onKeyDown: function(e) {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                handleClick();
+                            }
+                        }
+                    } : {}), {
                         children: [
                             [
                                 "right",
@@ -535,7 +561,8 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                                 "center"
                             ].includes(alignment) && sortContent
                         ]
-                    });
+                    }));
+                    var hasTooltip = (heading.tooltip || heading.tooltipContent) && !isCovered;
                     return /*#__PURE__*/ (0, _jsxruntime.jsx)(HeadingCell, {
                         className: _Table.styles.headingStyles({
                             hidden: hideCell,
@@ -553,7 +580,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                             className: _Table.styles.headingLabelContainerStyles({
                                 alignment: alignment
                             }),
-                            children: heading.hidden ? null : heading.tooltip || heading.tooltipContent ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+                            children: heading.hidden ? null : hasTooltip ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
                                 content: heading.tooltip || heading.tooltipContent,
                                 preferredPosition: "above",
                                 children: labelContent
@@ -669,12 +696,16 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                     value: {
                         columnsToRender: columnsToRender,
                         reverseColumns: reverseColumns,
-                        hideCellsOnMobile: hideCellsOnMobile
+                        hideCellsOnMobile: hideCellsOnMobile,
+                        isFixedOverlay: fixed,
+                        fixedFirstColumns: fixedFirstColumns,
+                        fixedLastColumns: fixedLastColumns
                     },
                     children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("table", {
                         className: _Table.styles.tableStyles(),
                         children: [
                             hasHeadings && renderHeadings({
+                                fixed: fixed,
                                 hidden: true,
                                 columnsToRender: columnsToRender,
                                 reverseColumns: reverseColumns,
@@ -725,6 +756,14 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                             return handleSelectionChange(isAllSelected ? _useIndexResourceState.SelectionType.Page : _useIndexResourceState.SelectionType.All, true);
                         },
                         className: "rounded-md block text-sm font-medium cursor-pointer px-2 py-1 hover",
+                        role: "button",
+                        tabIndex: 0,
+                        onKeyDown: function(e) {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                handleSelectionChange(isAllSelected ? _useIndexResourceState.SelectionType.Page : _useIndexResourceState.SelectionType.All, true);
+                            }
+                        },
                         children: isAllSelected ? "Undo" : paginatedSelectAllActionText || "Select all"
                     })
                 ]
@@ -807,7 +846,8 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
             increasedTableDensity: increasedTableDensity,
             tableContainerRef: tableContainerRef,
             cellAlignment: cellAlignment,
-            noBodyCellPadding: noBodyCellPadding
+            noBodyCellPadding: noBodyCellPadding,
+            columnWidths: columnWidths
         },
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
             "data-id": idRef.current,
@@ -858,8 +898,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                             children: renderTable({
                                 classes: "relative overflow-hidden",
                                 fixed: true,
-                                columnsToRender: fixedFirstColumns,
-                                hideCellsOnMobile: true
+                                columnsToRender: fixedFirstColumns
                             })
                         }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                             className: _Table.styles.overflowShadowStyles({
@@ -877,8 +916,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                                 classes: "relative overflow-hidden",
                                 fixed: true,
                                 columnsToRender: fixedLastColumns,
-                                reverseColumns: true,
-                                hideCellsOnMobile: true
+                                reverseColumns: true
                             })
                         }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                             className: _Table.styles.overflowShadowStyles({
@@ -1014,7 +1052,14 @@ Table.displayName = "Table";
 Table.Row = Row;
 Table.Row.displayName = "Table.Row";
 /**
- * Represents a cell within a table row.
+ * @component Table.Cell
+ *
+ * @usage
+ * - DO: Use for custom cell content within table rows.
+ *
+ * @accessibility
+ * - Renders as `<td>`.
+ *
  * @param {Object} props - Cell properties.
  * @param {string} [props.alignment="start"] - Text alignment.
  * @param {boolean} [props.selectionCell=false] - Whether this is a selection cell.
@@ -1023,8 +1068,11 @@ Table.Row.displayName = "Table.Row";
  */ function Cell(param) {
     var tmp = param.alignment, _alignment = tmp === void 0 ? "start" : tmp, children = param.children, _param_selectionCell = param.selectionCell, selectionCell = _param_selectionCell === void 0 ? false : _param_selectionCell;
     var _useContext = (0, _react.useContext)(TableContext), cellAlignment = _useContext.cellAlignment, increasedTableDensity = _useContext.increasedTableDensity, selectable = _useContext.selectable, noBodyCellPadding = _useContext.noBodyCellPadding;
-    var _useContext1 = (0, _react.useContext)(TableWrapperContext), hideCellsOnMobile = _useContext1.hideCellsOnMobile, reverseColumns = _useContext1.reverseColumns, columnsToRender = _useContext1.columnsToRender;
+    var _useContext1 = (0, _react.useContext)(TableWrapperContext), hideCellsOnMobile = _useContext1.hideCellsOnMobile, reverseColumns = _useContext1.reverseColumns, columnsToRender = _useContext1.columnsToRender, isFixedOverlay = _useContext1.isFixedOverlay, fixedFirstColumns = _useContext1.fixedFirstColumns, fixedLastColumns = _useContext1.fixedLastColumns;
+    var isMobile = (0, _useMobile.useMobile)();
     var columnCount = (cellAlignment === null || cellAlignment === void 0 ? void 0 : cellAlignment.length) || 0;
+    // Use state instead of ref so changes trigger re-render
+    var _useState = _sliced_to_array((0, _react.useState)(-1), 2), cellIndex = _useState[0], setCellIndex = _useState[1];
     var cellIndexRef = (0, _react.useRef)(null);
     var setCellRef = (0, _react.useCallback)(function(node) {
         if (!node || cellIndexRef.current !== null) return;
@@ -1032,16 +1080,21 @@ Table.Row.displayName = "Table.Row";
         if ((parentRow === null || parentRow === void 0 ? void 0 : parentRow.tagName) === "TR") {
             var totalCells = parentRow.children.length;
             var index = node.cellIndex;
-            cellIndexRef.current = reverseColumns ? totalCells - columnsToRender + index - (totalCells - columnCount) : index;
+            var calculatedIndex = reverseColumns ? totalCells - columnsToRender + index - (totalCells - columnCount) : index;
+            cellIndexRef.current = calculatedIndex;
+            setCellIndex(calculatedIndex);
         }
     }, [
         reverseColumns,
         columnsToRender,
         columnCount
     ]);
-    var _cellIndexRef_current;
-    var cellIndex = (_cellIndexRef_current = cellIndexRef.current) !== null && _cellIndexRef_current !== void 0 ? _cellIndexRef_current : -1;
     var alignment = (cellAlignment === null || cellAlignment === void 0 ? void 0 : cellAlignment[cellIndex]) || _alignment;
+    // Check if this cell is covered by a fixed overlay
+    // When cellIndex is unknown (-1), conservatively assume the cell might be covered
+    // if there are any fixed columns. This prevents duplicate popovers during the
+    // brief window between initial render and when cellIndex is calculated.
+    var isCoveredByFixedOverlay = !isFixedOverlay && !reverseColumns && (cellIndex === -1 ? fixedFirstColumns > 0 || fixedLastColumns > 0 : fixedFirstColumns > 0 && cellIndex < fixedFirstColumns || fixedLastColumns > 0 && cellIndex >= columnCount - fixedLastColumns);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
         ref: setCellRef,
         className: _Table.styles.cellStyles({
@@ -1052,6 +1105,7 @@ Table.Row.displayName = "Table.Row";
             tableIsSelectable: selectable,
             noBodyCellPadding: noBodyCellPadding
         }),
+        inert: !isMobile && isCoveredByFixedOverlay || undefined,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
             className: _Table.styles.cellContentStyles({
                 alignment: alignment
@@ -1063,8 +1117,10 @@ Table.Row.displayName = "Table.Row";
 Table.Cell = Cell;
 Table.Cell.displayName = "Table.Cell";
 /**
- * Footer component for the Table.
- * Displays pagination controls and optionally the total result count.
+ * @component Table.Footer
+ *
+ * @usage
+ * - DO: Use for summary or pagination content below the table.
  *
  * @param {Object} props - The component props.
  * @param {boolean} props.hasNextPage - Whether there is a next page.