@heymantle/litho 0.0.15 → 0.0.16

package/dist/esm/components/Spinner.js

@@ -1,6 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-var styles = 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 = tv({
     base: "Litho-Spinner",
     variants: {
         size: {
@@ -19,17 +41,7 @@ var svgStyles = 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/esm/components/Stack.js

@@ -1,4 +1,3 @@
-"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -80,7 +79,62 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-var styles = 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 = tv({
     base: "Litho-Stack flex",
     variants: {
         direction: {
@@ -99,6 +153,7 @@ var styles = 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",
@@ -107,75 +162,66 @@ var styles = 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",
@@ -183,29 +229,43 @@ var styles = 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__*/ _jsx(Element, _object_spread_props(_object_spread({
         id: id,
-        className: "".concat(classes).concat(className ? " ".concat(className) : "")
+        className: allClasses
     }, restProps), {
         children: children
     }));

package/dist/esm/components/TabNavigation.js

@@ -53,7 +53,33 @@ import Button from "./Button.js";
 import Text from "./Text.js";
 import Spinner from "./Spinner.js";
 import Tooltip from "./Tooltip.js";
-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 = 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/esm/components/Table.js

@@ -163,19 +163,21 @@ import { SelectionType } from "../utilities/useIndexResourceState.js";
 import { useMobile } from "../utilities/useMobile.js";
 import { useMounted } from "../utilities/useMounted.js";
 import useTableScrollState from "../utilities/useTableScrollState.js";
-var TableContext = /*#__PURE__*/ createContext({});
-var TableWrapperContext = /*#__PURE__*/ 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.
@@ -202,6 +204,17 @@ var TableWrapperContext = /*#__PURE__*/ 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__*/ createContext({});
+var TableWrapperContext = /*#__PURE__*/ 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 ? {
@@ -462,13 +475,23 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                         if (isSortable) handleSort(sortIndex);
                         else if (heading.onAction) heading.onAction();
                     };
-                    var labelContent = /*#__PURE__*/ _jsxs("div", {
+                    var labelContent = /*#__PURE__*/ _jsxs("div", _object_spread_props(_object_spread({
                         className: 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",
@@ -483,7 +506,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                                 "center"
                             ].includes(alignment) && sortContent
                         ]
-                    });
+                    }));
                     var hasTooltip = (heading.tooltip || heading.tooltipContent) && !isCovered;
                     return /*#__PURE__*/ _jsx(HeadingCell, {
                         className: styles.headingStyles({
@@ -678,6 +701,14 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                             return handleSelectionChange(isAllSelected ? SelectionType.Page : 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 ? SelectionType.Page : SelectionType.All, true);
+                            }
+                        },
                         children: isAllSelected ? "Undo" : paginatedSelectAllActionText || "Select all"
                     })
                 ]
@@ -966,7 +997,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.
@@ -1024,8 +1062,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.

package/dist/esm/components/Tabs.js

@@ -107,30 +107,27 @@ import Popover from "./Popover.js";
 import { CaretDownMinor, CaretUpMinor } from "@shopify/polaris-icons";
 import * as PolarisIcons from "@shopify/polaris-icons";
 import Badge from "./Badge.js";
-var styles = tv({
-    base: "Litho-Tabs flex overflow-x-hidden whitespace-nowrap",
-    variants: {
-        borderBottom: {
-            true: "border-b",
-            false: ""
-        },
-        padded: {
-            true: "p-2",
-            false: ""
-        }
-    }
-});
-var containerStyles = tv({
-    base: "Litho-Tabs__TabContainer flex flex-1 overflow-x-hidden whitespace-nowrap space-x-1"
-});
 /**
- * Tabs component that displays a set of tab items with selectable states.
+ * @component Tabs
+ *
+ * @description An in-page tab switcher that renders a horizontal tab bar for toggling between content panels without URL changes.
+ *
+ * @usage
+ * - DO: Switch between related content views within the same page.
+ * - DON'T: Use for URL-based routing (use TabNavigation).
+ *
+ * @accessibility
+ * - Implements tablist/tab/tabpanel ARIA roles; supports keyboard arrow navigation between tabs.
+ *
+ * @alternative
+ * - If you need URL-based tab navigation, use `TabNavigation`. If you need collapsible sections, use `Collapsible`.
  *
  * @param {Object} props - Component props.
  * @param {Object[]} props.tabs - List of tabs to display.
  * @param {string} props.tabs[].id - Unique identifier for the tab.
  * @param {string} props.tabs[].content - Content or label to display for the tab.
  * @param {string} [props.tabs[].icon] - Optional icon to display for the tab.
+ * @param {boolean} [props.tabs[].showIconOnMobile=true] - When false, the tab icon is hidden on mobile and only shown at md (≥800px) breakpoint.
  * @param {boolean} [props.tabs[].disclosure=false] - Whether the tab is part of a "More" disclosure group.
  * @param {number} props.selected - Index of the currently selected tab.
  * @param {Function} props.onSelect - Callback fired when a tab is selected, receives the tab's index.
@@ -144,7 +141,23 @@ var containerStyles = tv({
  * @param {number} [props.badgeCount] - The number of badges to display for the tab.
  * @param {string} [props.badgeStatus="default"] - The status of the badge.
  * @returns {JSX.Element} The Tabs component.
- */ function Tabs() {
+ */ var styles = tv({
+    base: "Litho-Tabs flex overflow-x-hidden whitespace-nowrap",
+    variants: {
+        borderBottom: {
+            true: "border-b",
+            false: ""
+        },
+        padded: {
+            true: "p-2",
+            false: ""
+        }
+    }
+});
+var containerStyles = tv({
+    base: "Litho-Tabs__TabContainer flex flex-1 overflow-x-hidden whitespace-nowrap space-x-1"
+});
+function Tabs() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var tmp = props.tabs, _tabs = tmp === void 0 ? [] : tmp, _selectedIndex = props.selected, onSelect = props.onSelect, fullWidth = props.fullWidth, _props_disclosureText = props.disclosureText, disclosureText = _props_disclosureText === void 0 ? "More" : _props_disclosureText, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_activeDisclosure = props.activeDisclosure, activeDisclosure = _props_activeDisclosure === void 0 ? false : _props_activeDisclosure, _props_padded = props.padded, padded = _props_padded === void 0 ? true : _props_padded, _props_borderBottom = props.borderBottom, borderBottom = _props_borderBottom === void 0 ? true : _props_borderBottom, _props_simpleTabs = props.simpleTabs, simpleTabs = _props_simpleTabs === void 0 ? false : _props_simpleTabs;
     var selectedIndex = parseInt(_selectedIndex);
@@ -253,6 +266,7 @@ var containerStyles = tv({
                         },
                         disclosure: disclosure && tab.disclosure,
                         icon: tab.icon,
+                        showIconOnMobile: tab.showIconOnMobile,
                         fullWidth: fullWidth,
                         hidden: tab.hidden,
                         simple: simpleTabs,
@@ -359,6 +373,7 @@ var tabStyles = tv({
  * @param {boolean} [props.selected] - Whether this tab is currently selected.
  * @param {number} [props.index] - The index position of this tab in the tabs array.
  * @param {string|React.ReactNode} [props.icon] - Icon to display. Can be a Polaris icon name string or a custom React node.
+ * @param {boolean} [props.showIconOnMobile=true] - When false, the tab icon is hidden on mobile and only shown at md (≥800px) breakpoint.
  * @param {Function} [props.onSelect] - Callback fired when the tab is selected, receives the tab's index.
  * @param {Function} [props.onClick] - Custom click handler that overrides the default onSelect behavior.
  * @param {React.ReactNode} [props.children] - The content/label to display inside the tab.
@@ -373,7 +388,7 @@ var tabStyles = tv({
  * @returns {JSX.Element} The Tab component.
  */ function Tab() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var id = props.id, active = props.active, selected = props.selected, index = props.index, icon = props.icon, onSelect = props.onSelect, onClick = props.onClick, children = props.children, fullWidth = props.fullWidth, hidden = props.hidden, simple = props.simple, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_alwaysShowDisclosureIcon = props.alwaysShowDisclosureIcon, alwaysShowDisclosureIcon = _props_alwaysShowDisclosureIcon === void 0 ? false : _props_alwaysShowDisclosureIcon, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_badgeStatus = props.badgeStatus, badgeStatus = _props_badgeStatus === void 0 ? "default" : _props_badgeStatus, badgeCount = props.badgeCount;
+    var id = props.id, active = props.active, selected = props.selected, index = props.index, icon = props.icon, _props_showIconOnMobile = props.showIconOnMobile, showIconOnMobile = _props_showIconOnMobile === void 0 ? true : _props_showIconOnMobile, onSelect = props.onSelect, onClick = props.onClick, children = props.children, fullWidth = props.fullWidth, hidden = props.hidden, simple = props.simple, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_alwaysShowDisclosureIcon = props.alwaysShowDisclosureIcon, alwaysShowDisclosureIcon = _props_alwaysShowDisclosureIcon === void 0 ? false : _props_alwaysShowDisclosureIcon, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_badgeStatus = props.badgeStatus, badgeStatus = _props_badgeStatus === void 0 ? "default" : _props_badgeStatus, badgeCount = props.badgeCount;
     var polarisIcon = typeof icon === "string" ? PolarisIcons[icon] : PolarisIcons[icon === null || icon === void 0 ? void 0 : icon.displayName];
     var showDisclosure = disclosure && (selected || alwaysShowDisclosureIcon);
     var tabClasses = tabStyles({
@@ -390,18 +405,32 @@ var tabStyles = tv({
         onClick: onClick ? onClick : onSelect ? function() {
             return onSelect(index);
         } : undefined,
+        role: "tab",
+        tabIndex: disabled ? -1 : 0,
+        "aria-selected": selected,
+        onKeyDown: function(e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                if (onClick) onClick();
+                else if (onSelect) onSelect(index);
+            }
+        },
         children: [
             icon && !!polarisIcon && /*#__PURE__*/ _jsx("span", {
-                className: "Litho-Tabs__Tab-Icon mr-1",
+                className: "Litho-Tabs__Tab-Icon mr-1 ".concat(showIconOnMobile ? "" : "hidden @md:inline-flex"),
                 children: /*#__PURE__*/ _jsx(Icon, {
                     source: polarisIcon,
                     color: selected && simple ? "default" : selected ? "primary" : "subdued",
                     size: simple ? "lg" : undefined
                 })
             }),
-            icon && !!polarisIcon === false && /*#__PURE__*/ _jsx("span", {
-                className: "Litho-Tabs__Tab-Icon ".concat(simple ? "mr-0" : "mr-1"),
-                children: icon
+            icon && !polarisIcon && /*#__PURE__*/ _jsx("span", {
+                className: "Litho-Tabs__Tab-Icon ".concat(simple ? "mr-0" : "mr-1", " ").concat(showIconOnMobile ? "" : "hidden @md:inline-flex"),
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    source: icon,
+                    color: selected && simple ? "default" : selected ? "primary" : "subdued",
+                    size: simple ? "lg" : undefined
+                })
             }),
             /*#__PURE__*/ _jsx("span", {
                 className: "Litho-Tabs__Tab-Content block min-h-5 leading-5",