@heymantle/litho 0.0.14 → 0.0.16

package/dist/esm/components/Table.js

@@ -160,21 +160,24 @@ import Text from "./Text.js";
 import Tooltip from "./Tooltip.js";
 import { styles } from "../styles/Table.js";
 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.
@@ -201,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 ? {
@@ -447,6 +461,8 @@ var TableWrapperContext = /*#__PURE__*/ 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__*/ _jsx("div", {
                         className: "min-h-5 ".concat(sort.index === sortIndex ? "opacity-100" : "opacity-0 group-hover:opacity-100"),
                         children: /*#__PURE__*/ _jsx(Icon, {
@@ -459,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",
@@ -480,7 +506,8 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                                 "center"
                             ].includes(alignment) && sortContent
                         ]
-                    });
+                    }));
+                    var hasTooltip = (heading.tooltip || heading.tooltipContent) && !isCovered;
                     return /*#__PURE__*/ _jsx(HeadingCell, {
                         className: styles.headingStyles({
                             hidden: hideCell,
@@ -498,7 +525,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                             className: styles.headingLabelContainerStyles({
                                 alignment: alignment
                             }),
-                            children: heading.hidden ? null : heading.tooltip || heading.tooltipContent ? /*#__PURE__*/ _jsx(Tooltip, {
+                            children: heading.hidden ? null : hasTooltip ? /*#__PURE__*/ _jsx(Tooltip, {
                                 content: heading.tooltip || heading.tooltipContent,
                                 preferredPosition: "above",
                                 children: labelContent
@@ -614,12 +641,16 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                     value: {
                         columnsToRender: columnsToRender,
                         reverseColumns: reverseColumns,
-                        hideCellsOnMobile: hideCellsOnMobile
+                        hideCellsOnMobile: hideCellsOnMobile,
+                        isFixedOverlay: fixed,
+                        fixedFirstColumns: fixedFirstColumns,
+                        fixedLastColumns: fixedLastColumns
                     },
                     children: /*#__PURE__*/ _jsxs("table", {
                         className: styles.tableStyles(),
                         children: [
                             hasHeadings && renderHeadings({
+                                fixed: fixed,
                                 hidden: true,
                                 columnsToRender: columnsToRender,
                                 reverseColumns: reverseColumns,
@@ -670,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"
                     })
                 ]
@@ -752,7 +791,8 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
             increasedTableDensity: increasedTableDensity,
             tableContainerRef: tableContainerRef,
             cellAlignment: cellAlignment,
-            noBodyCellPadding: noBodyCellPadding
+            noBodyCellPadding: noBodyCellPadding,
+            columnWidths: columnWidths
         },
         children: /*#__PURE__*/ _jsxs("div", {
             "data-id": idRef.current,
@@ -803,8 +843,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                             children: renderTable({
                                 classes: "relative overflow-hidden",
                                 fixed: true,
-                                columnsToRender: fixedFirstColumns,
-                                hideCellsOnMobile: true
+                                columnsToRender: fixedFirstColumns
                             })
                         }) : /*#__PURE__*/ _jsx("div", {
                             className: styles.overflowShadowStyles({
@@ -822,8 +861,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                                 classes: "relative overflow-hidden",
                                 fixed: true,
                                 columnsToRender: fixedLastColumns,
-                                reverseColumns: true,
-                                hideCellsOnMobile: true
+                                reverseColumns: true
                             })
                         }) : /*#__PURE__*/ _jsx("div", {
                             className: styles.overflowShadowStyles({
@@ -959,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.
@@ -968,8 +1013,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 = useContext(TableContext), cellAlignment = _useContext.cellAlignment, increasedTableDensity = _useContext.increasedTableDensity, selectable = _useContext.selectable, noBodyCellPadding = _useContext.noBodyCellPadding;
-    var _useContext1 = useContext(TableWrapperContext), hideCellsOnMobile = _useContext1.hideCellsOnMobile, reverseColumns = _useContext1.reverseColumns, columnsToRender = _useContext1.columnsToRender;
+    var _useContext1 = useContext(TableWrapperContext), hideCellsOnMobile = _useContext1.hideCellsOnMobile, reverseColumns = _useContext1.reverseColumns, columnsToRender = _useContext1.columnsToRender, isFixedOverlay = _useContext1.isFixedOverlay, fixedFirstColumns = _useContext1.fixedFirstColumns, fixedLastColumns = _useContext1.fixedLastColumns;
+    var isMobile = 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(useState(-1), 2), cellIndex = _useState[0], setCellIndex = _useState[1];
     var cellIndexRef = useRef(null);
     var setCellRef = useCallback(function(node) {
         if (!node || cellIndexRef.current !== null) return;
@@ -977,16 +1025,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__*/ _jsx("td", {
         ref: setCellRef,
         className: styles.cellStyles({
@@ -997,6 +1050,7 @@ Table.Row.displayName = "Table.Row";
             tableIsSelectable: selectable,
             noBodyCellPadding: noBodyCellPadding
         }),
+        inert: !isMobile && isCoveredByFixedOverlay || undefined,
         children: /*#__PURE__*/ _jsx("div", {
             className: styles.cellContentStyles({
                 alignment: alignment
@@ -1008,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

@@ -106,30 +106,28 @@ import Icon from "./Icon.js";
 import Popover from "./Popover.js";
 import { CaretDownMinor, CaretUpMinor } from "@shopify/polaris-icons";
 import * as PolarisIcons from "@shopify/polaris-icons";
-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"
-});
+import Badge from "./Badge.js";
 /**
- * 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.
@@ -140,8 +138,26 @@ var containerStyles = tv({
  * @param {boolean} [props.padded=true] - If true, applies padding to the Tabs container.
  * @param {boolean} [props.borderBottom=true] - If true, applies a bottom border to the Tabs container.
  * @param {boolean} [props.simpleTabs=false] - If true, simplifies the styling for the selected tab.
+ * @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);
@@ -250,9 +266,12 @@ var containerStyles = tv({
                         },
                         disclosure: disclosure && tab.disclosure,
                         icon: tab.icon,
+                        showIconOnMobile: tab.showIconOnMobile,
                         fullWidth: fullWidth,
                         hidden: tab.hidden,
                         simple: simpleTabs,
+                        badgeCount: tab.badgeCount,
+                        badgeStatus: tab.badgeStatus,
                         children: tab.content
                     }, "tab-".concat(tab.originalIndex));
                 })
@@ -345,9 +364,31 @@ var tabStyles = tv({
         }
     ]
 });
-function Tab() {
+/**
+ * Individual tab item component used within the Tabs component.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} [props.id] - Unique identifier for the tab, used to generate the DOM element ID.
+ * @param {boolean} [props.active] - Whether the tab's disclosure popover is currently active/open.
+ * @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.
+ * @param {boolean} [props.fullWidth] - Whether the tab should expand to fill available space.
+ * @param {boolean} [props.hidden] - Whether the tab should be visually hidden (used for overflow handling).
+ * @param {boolean} [props.simple] - Whether to use simplified styling (no background, column layout).
+ * @param {boolean} [props.disclosure=false] - Whether to show a disclosure caret icon when selected.
+ * @param {boolean} [props.alwaysShowDisclosureIcon=false] - Whether to always show the disclosure icon regardless of selection state.
+ * @param {boolean} [props.disabled=false] - Whether the tab is disabled.
+ * @param {string} [props.badgeStatus="default"] - The status variant of the badge (e.g., "default", "success", "warning").
+ * @param {number} [props.badgeCount] - If provided (>= 0), displays a badge with this count.
+ * @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;
+    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({
@@ -364,18 +405,32 @@ function Tab() {
         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",
@@ -388,6 +443,11 @@ function Tab() {
                     color: selected && simple ? "default" : selected ? "active" : "subdued",
                     size: simple ? "lg" : undefined
                 })
+            }),
+            badgeCount >= 0 && /*#__PURE__*/ _jsx(Badge, {
+                status: badgeStatus,
+                className: "ml-1",
+                children: badgeCount
             })
         ]
     });

package/dist/esm/components/Tag.js

@@ -2,7 +2,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
 import Icon from "./Icon.js";
 import { CancelSmallMinor, TickSmallMinor } from "@shopify/polaris-icons";
-var styles = tv({
+/**
+ * @component Tag
+ *
+ * @description A removable label component used to display active filters, selected categories, or user-applied tags.
+ *
+ * @usage
+ * - DO: Display removable filters, categories, or labels.
+ * - DON'T: Use for non-removable status indicators (use Badge).
+ *
+ * @accessibility
+ * - Tag renders a button for removal; ensure the remove action is accessible via keyboard.
+ *
+ * @alternative
+ * - If you need a non-interactive status label, use `Badge`.
+ * - If you need a selectable option, use `ChoiceList`.
+ *
+ * @param {Object} props - The properties for the Tag component.
+ * @param {React.ReactNode} props.children - The content to be displayed inside the Tag.
+ * @param {boolean} [props.disabled=false] - Whether the tag is disabled.
+ * @param {Function} [props.onClick] - The callback function to execute on tag click.
+ * @param {Function} [props.onRemove] - The callback function to execute when the remove icon is clicked.
+ * @param {string} [props.accessibilityLabel] - The accessibility label for the tag.
+ * @param {string} [props.url] - The URL to open when the tag is clicked.
+ * @param {string} [props.target="_self"] - Specifies where to open the URL.
+ *
+ * @returns {JSX.Element} The rendered Tag component.
+ */ var styles = tv({
     base: "Litho-Tag text-xs rounded-md inline-grid pl-1 whitespace-nowrap",
     variants: {
         disabled: {
@@ -75,21 +101,7 @@ var actionStyles = tv({
         }
     }
 });
-/**
- * Renders a Tag component with optional interactive and removable features.
- *
- * @function Tag
- * @param {Object} props - The properties for the Tag component.
- * @param {React.ReactNode} props.children - The content to be displayed inside the Tag.
- * @param {boolean} [props.disabled=false] - Whether the tag is disabled.
- * @param {Function} [props.onClick] - The callback function to execute on tag click.
- * @param {Function} [props.onRemove] - The callback function to execute when the remove icon is clicked.
- * @param {string} [props.accessibilityLabel] - The accessibility label for the tag.
- * @param {string} [props.url] - The URL to open when the tag is clicked.
- * @param {string} [props.target="_self"] - Specifies where to open the URL.
- *
- * @returns {JSX.Element} The rendered Tag component.
- */ function Tag() {
+function Tag() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var children = props.children, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, icon = props.icon, onClick = props.onClick, onRemove = props.onRemove, accessibilityLabel = props.accessibilityLabel, url = props.url, _props_target = props.target, target = _props_target === void 0 ? "_self" : _props_target, className = props.className, _props_selected = props.selected, selected = _props_selected === void 0 ? false : _props_selected;
     var interactive = !!url || !!onClick;
@@ -136,6 +148,15 @@ var actionStyles = tv({
                 hasRemoveAction && /*#__PURE__*/ _jsx("div", {
                     className: actionClasses,
                     onClick: onRemove,
+                    role: "button",
+                    tabIndex: disabled ? -1 : 0,
+                    "aria-label": "Remove",
+                    onKeyDown: function(e) {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+                        }
+                    },
                     children: /*#__PURE__*/ _jsx(Icon, {
                         source: CancelSmallMinor,
                         color: disabled ? "disabled" : "default",

package/dist/esm/components/Text.js

@@ -79,7 +79,37 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-var styles = tv({
+/**
+ * @component Text
+ *
+ * @description A typography component that renders text content with consistent heading and body variants, alignment, weight, and color options.
+ *
+ * @usage
+ * - DO: Use for all text content with consistent typography variants (headings, body, captions).
+ * - DON'T: Use raw HTML heading or paragraph tags; always use Text with the appropriate `variant` prop.
+ *
+ * @accessibility
+ * - Use the `as` prop to render semantically correct heading levels (h1-h6) matching the visual hierarchy.
+ * - Use `visuallyHidden` to provide screen-reader-only text without hiding content from assistive tech.
+ *
+ * @alternative
+ * - If you need a code block, use `Code` instead.
+ * - If you need a clickable text element, use `Link` or `Button` with `link` variant instead.
+ *
+ * @param {Object} props - Properties to customize the text component.
+ * @param {'left' | 'center' | 'right' | 'end' | 'start'} [props.alignment] - Text alignment.
+ * @param {'normal' | 'regular' | 'medium' | 'semibold' | 'bold'} [props.fontWeight] - Font weight.
+ * @param {'default' | 'subdued' | 'critical' | 'success' | 'warning' | 'alternate' | 'link' | 'disabled'} [props.color] - Text color variant.
+ * @param {boolean} [props.truncate] - Whether to truncate text with ellipsis.
+ * @param {'headingXl' | 'headingLg' | 'headingMd' | 'headingSm' | 'headingXs' | 'bodyXl' | 'bodyLg' | 'bodyMd' | 'bodySm' | 'bodyXs'} [props.variant] - Text size and style variant.
+ * @param {boolean} [props.visuallyHidden] - Visually hides text for accessibility.
+ * @param {string} [props.className] - Additional CSS class names.
+ * @param {string} [props.as] - Element type (e.g., 'p' or 'span').
+ * @param {number} [props.clampLines] - Number of lines to clamp.
+ * @param {boolean} [props.strike] - Whether to strike through the text.
+ * @param {React.ReactNode} [props.children] - The content to be displayed within the text component. Defaults to an empty string.
+ * @returns {JSX.Element} Rendered text component with applied styles.
+ */ var styles = tv({
     base: "Litho-Text block",
     variants: {
         alignment: {
@@ -218,23 +248,7 @@ var styles = tv({
         }
     ]
 });
-/**
- * A text component that renders styled text based on provided props.
- *
- * @param {Object} props - Properties to customize the text component.
- * @param {'left' | 'center' | 'right' | 'end' | 'start'} [props.alignment] - Text alignment.
- * @param {'normal' | 'regular' | 'medium' | 'semibold' | 'bold'} [props.fontWeight] - Font weight.
- * @param {'default' | 'subdued' | 'critical' | 'success' | 'warning' | 'alternate' | 'link' | 'disabled'} [props.color] - Text color variant.
- * @param {boolean} [props.truncate] - Whether to truncate text with ellipsis.
- * @param {'headingXl' | 'headingLg' | 'headingMd' | 'headingSm' | 'headingXs' | 'bodyXl' | 'bodyLg' | 'bodyMd' | 'bodySm' | 'bodyXs'} [props.variant] - Text size and style variant.
- * @param {boolean} [props.visuallyHidden] - Visually hides text for accessibility.
- * @param {string} [props.className] - Additional CSS class names.
- * @param {string} [props.as] - Element type (e.g., 'p' or 'span').
- * @param {number} [props.clampLines] - Number of lines to clamp.
- * @param {boolean} [props.strike] - Whether to strike through the text.
- * @param {React.ReactNode} [props.children] - The content to be displayed within the text component. Defaults to an empty string.
- * @returns {JSX.Element} Rendered text component with applied styles.
- */ function Text() {
+function Text() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var alignment = props.alignment, as = props.as, className = props.className, color = props.color, fontWeight = props.fontWeight, truncate = props.truncate, variant = props.variant, visuallyHidden = props.visuallyHidden, clampLines = props.clampLines, strike = props.strike, children = props.children, rest = _object_without_properties(props, [
         "alignment",