pixelize-design-library 2.4.2-beta.66 → 2.4.2-beta.68

package/dist/Components/SideBar/SideBarProps.d.ts

@@ -1,32 +1,46 @@
 import type { ElementType } from "react";
 /** Footer identity block (UserFooter); avatar falls back to initials derived from name when absent. */
 export type SidebarUser = {
+    /** Display name; initials derive from it when `initials` is absent. */
     name: string;
+    /** Muted line under the name. */
     role?: string;
+    /** Avatar image; initials are shown when absent. */
     avatarUrl?: string;
+    /** Overrides the initials derived from `name` when there is no avatar image. */
     initials?: string;
+    /** Called when the footer identity block is pressed. */
     onClick?: () => void;
 };
 /** Docked/collapsible left rail with its own responsive overlay — not NavigationBar (top bar) or WorkspaceWindow (floating panel). */
 export type SidebarProps = {
+    /** Rows in display order; items with a `group` get section labels and must be pre-sorted by it. */
     menus: MenuProps[];
     /** Matched against each menu's `title` first, then `id` — a title that collides with another menu's `id` wins silently. */
     activeMenu: string | number;
+    /** Called with the menu when a row is chosen; in the overlay a leaf row also closes it. */
     handleMenuClick?: (menu: MenuProps) => void;
+    /** Called with the item chosen in the SecondaryBar flyout. */
     handleSecondaryNavClick?: (menu: MenuProps) => void;
+    /** True collapses the inline rail to icons; false shows it fully expanded. */
     toggle: boolean;
+    /** Called to flip `toggle`: by the header and footer collapse controls, and automatically when `autoCollapse` is on. */
     changeToggle: () => void;
     /** Falls back to a rendered brand mark (DefaultLogo) tinted by primary color when omitted. */
     logo?: string;
+    /** Name shown beside the logo; hidden while the rail is collapsed. */
     companyName: string;
+    /** Muted line under `companyName`. */
     companySubtitle?: string;
     /** Footer identity block is omitted entirely (not just simplified) when this is not provided. */
     user?: SidebarUser;
     /** true hides the Add New row completely, rather than disabling it. */
     isDisableAddNew?: boolean;
+    /** Called when the Add New row is pressed. */
     onAddNewClick?: () => void;
     /** @deprecated Dead — threaded down to MenuItemBox but never read there; no known consumer usage. */
     selectedSubMenu?: string | null;
+    /** Id or title of the highlighted item in the SecondaryBar flyout. */
     selectedSecondaryItem?: string | number | null;
     /** Shows skeleton rows instead of MenuItems; header and footer render normally. */
     isLoading?: boolean;
@@ -46,6 +60,7 @@ export type SidebarProps = {
     onToggleMobileNav?: () => void;
     /** Shows the sidebar without pinning — closes on pointer-leave. Wire to NavigationBar's `onSideBarPeek`. */
     peekOpen?: boolean;
+    /** Called when the pointer leaves a peeked overlay, so the host can clear `peekOpen`. */
     onPeekEnd?: () => void;
     /** Rendered above `menus` under a `pinnedLabel` heading; the whole block is omitted when empty. */
     pinnedItems?: SidebarPinnedItem[];
@@ -77,13 +92,18 @@ export type SidebarPinnedLabels = {
 };
 /** `"none"` is instant; otherwise `speed` picks 150/200/260ms and `animateShadow` (default true) toggles the panel shadow. */
 export type SidebarCollapseTransition = "none" | {
+    /** Duration of the inline collapse: "fast" 150ms, "base" 200ms, "slow" 260ms. */
     speed?: "fast" | "base" | "slow";
+    /** Animates the panel shadow along with the width; defaults to true. */
     animateShadow?: boolean;
 };
 /** One nav item; `subMenu` renders inline (expand/collapse), `secondaryItems` opens a separate SecondaryBar instead. */
 export type MenuProps = {
+    /** Unique key; `SidebarProps.activeMenu` matches it after `title`. */
     id: string | number;
+    /** Row text, truncated with a tooltip when too long; `SidebarProps.activeMenu` matches it first. */
     title: string;
+    /** Icon component (not an element) drawn at the start of the row. */
     icon?: ElementType;
     /** Ignored when subMenu is non-empty — the row becomes a toggle button instead of a link. */
     url: string;
@@ -106,6 +126,7 @@ export type MenuProps = {
         /** Chakra Badge variant; defaults to "subtle". */
         variant?: string;
     };
+    /** Nested rows shown inline when this row is expanded; non-empty turns the row into a toggle. */
     subMenu?: MenuProps[];
     /** Non-empty on the active menu auto-collapses the main rail and renders a SecondaryBar, regardless of the `toggle` prop. */
     secondaryItems?: MenuProps[];
@@ -114,11 +135,17 @@ export type MenuProps = {
 };
 /** Props for the internal MenuItems renderer — a narrowed slice of SidebarProps. */
 export type RenderMenuType = {
+    /** Rows to render, in order. */
     menus: MenuProps[];
+    /** Matched against each menu's `title`, then `id`, to mark the active row. */
     activeMenu: string | number;
+    /** Called with the menu when a row is chosen. */
     handleMenuClick: (menu: MenuProps) => void;
+    /** True renders the collapsed icon rail. */
     toggle: boolean;
+    /** Carried over from the unused `SidebarProps.selectedSubMenu`; not read. */
     selectedSubMenu?: string | null;
+    /** Id or title of the highlighted SecondaryBar item. */
     selectedSecondaryItem?: string | number | null;
     /** Touch (overlay) presentation — grows row height to a 48px touch target. */
     overlay?: boolean;
@@ -127,6 +154,7 @@ export type RenderMenuType = {
 };
 /** Secondary flyout panel props; `defaultCollapsed` only seeds initial state, then the panel self-manages it. */
 export type SecondaryBarProps = {
+    /** Flyout entries in order. */
     items?: MenuProps[];
     /** Defaults to true (collapsed) when omitted. */
     defaultCollapsed?: boolean;
@@ -140,6 +168,7 @@ export type SecondaryBarProps = {
     itemFontSize?: string;
     /** Matched by string equality against either the item's id or title, whichever matches. */
     selected?: string | number | null;
+    /** Called with the item chosen; skipped for locked or disabled items. */
     onItemClick?: (item: MenuProps) => void;
     /** Also used as the collapsed-state tooltip label. */
     title?: string;
@@ -148,7 +177,9 @@ export type SecondaryBarProps = {
 };
 /** "Switch app" footer grid; becomes hover popovers when the sidebar is collapsed. */
 export type OtherAppsProps = {
+    /** True when the sidebar is collapsed; apps then show as hover popovers. */
     toggle: boolean;
+    /** Apps to list; renders nothing when empty. */
     otherApps: {
         /** Used as the React list key — must be unique among otherApps entries. */
         name: string;
@@ -156,6 +187,7 @@ export type OtherAppsProps = {
         color: string;
         /** Shown only in the collapsed-state hover flyout, never in the expanded grid cell. */
         description?: string;
+        /** Called when the app is pressed. */
         onClick: () => void;
         /** A pre-rendered ReactNode, unlike MenuProps.icon (a component reference). */
         icon?: React.ReactNode;

package/dist/Components/SideBar/sidebarAccentColors.d.ts

@@ -1,6 +1,8 @@
 import type { PaletteProps } from "../../Theme/tokens/types";
 export type SidebarActiveAccent = {
+    /** Colour of the active row's icon. */
     icon: string;
+    /** Colour of the active row's label. */
     label: string;
 };
 /** Resolved per brand at palette-build time, so the rail needs no mode or brand lookup. */

package/dist/Components/SignInActivityTable/SignInActivityTable.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { SignInActivityTableProps } from "./SignInActivityTableProps";
+/** Card listing recent sign-in devices (browser, device, activity) with loading and empty states. */
 declare const SignInActivityTable: React.FC<SignInActivityTableProps>;
 export default SignInActivityTable;

package/dist/Components/SignInActivityTable/SignInActivityTable.js

@@ -21,6 +21,7 @@ const DEFAULT_LABELS = {
     recentActivity: "Recent Activity",
     noActivity: "No recent sign-in activity",
 };
+/** Card listing recent sign-in devices (browser, device, activity) with loading and empty states. */
 const SignInActivityTable = ({ devices, isLoading = false, labels: labelOverrides, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const titleId = (0, react_1.useId)();

package/dist/Components/SignInActivityTable/SignInActivityTableProps.d.ts

@@ -14,7 +14,9 @@ export type SignInDevice = {
 export type SignInActivityLabels = {
     /** Card heading, also the accessible name of the scroll area while it overflows; defaults to "Recent Sign-in Devices". */
     title?: string;
+    /** First column header; defaults to "Browser". */
     browser?: string;
+    /** Second column header; defaults to "Device". */
     device?: string;
     /** Third column header; defaults to "Recent Activity". */
     recentActivity?: string;

package/dist/Components/SpecTable/SpecTableProps.d.ts

@@ -1,15 +1,20 @@
 /** One label/value row. */
 export interface SpecItem {
+    /** Term text; also part of the row key, so keep labels distinct. */
     label: string;
+    /** Plain-text definition shown beside the label. */
     value: string;
 }
 /** Every string the table renders; override all of them for another language. */
 export interface SpecTableLabels {
+    /** Text of the toggle that expands the folded rows. */
     showAll: string;
+    /** Text of the toggle that folds back to `collapsedCount` rows. */
     showLess: string;
 }
 /** Definition list of specifications on striped tonal rows, with an optional "Show all" fold. */
 export interface SpecTableProps {
+    /** Rows in display order; an empty array renders nothing at all. */
     items: SpecItem[];
     /** 2 sits label and value side by side per row on wide screens and falls back to 1 on narrow ones. */
     columns?: 1 | 2;
@@ -17,9 +22,13 @@ export interface SpecTableProps {
     collapsedCount?: number;
     /** Controlled expanded state; pair with `onExpandedChange`. */
     expanded?: boolean;
+    /** Initial expanded state when uncontrolled; defaults to false. Ignored once `expanded` is set. */
     defaultExpanded?: boolean;
+    /** Fires with the next expanded state when the toggle is clicked, in both controlled and uncontrolled modes. */
     onExpandedChange?: (expanded: boolean) => void;
+    /** Per-key overrides of the toggle text; defaults to "Show all" / "Show less". */
     labels?: Partial<SpecTableLabels>;
+    /** Accessible name applied to the definition list. */
     "aria-label"?: string;
     "data-testid"?: string;
 }

package/dist/Components/StageProgress/StageProgressProps.d.ts

@@ -57,6 +57,7 @@ export interface StageItemProps {
     index: number;
     /** Stage count; with index, drives first/last chevron-point and bar-corner rounding. */
     total: number;
+    /** Drives fill and weight: completed is filled, active is emphasised and `aria-current="step"`, upcoming is muted. */
     state: StageState;
     /** "chevron" | "bar" | "pills" (stepper has its own renderer). */
     variant?: Exclude<StageVariant, "stepper">;
@@ -87,6 +88,7 @@ export interface StepperStageProps {
     label: string;
     /** 1-based step number shown inside the circle. */
     number: number;
+    /** Drives circle and connector styling: completed is filled, active is emphasised, upcoming is muted. */
     state: StageState;
     /** Default "md"; keys this node's own circle/font/minWidth lookup table. */
     size?: StageSize;

package/dist/Components/StageProgress/StepperStage.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { StepperStageProps } from "./StageProgressProps";
+/** Renders one numbered circle with connector lines and a wrapped label for variant="stepper". */
 declare const StepperStage: React.FC<StepperStageProps>;
 export default StepperStage;

package/dist/Components/StageProgress/StepperStage.js

@@ -15,6 +15,7 @@ const sizeMap = {
     md: { circle: "30px", font: "0.8rem", label: "0.8rem", icon: 14, minW: "104px" },
     lg: { circle: "38px", font: "0.95rem", label: "0.9rem", icon: 16, minW: "124px" },
 };
+/** Renders one numbered circle with connector lines and a wrapped label for variant="stepper". */
 const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, asListItem = false, }) => {
     const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
     const theme = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/StatCard/StatCardProps.d.ts

@@ -3,6 +3,7 @@ import type { Tone } from "../../Theme/tokens/builders/tone";
 type StatTrend = "up" | "down";
 /** KPI tile; delta is green when `trend` matches `goodDirection`; other HTML attributes land on the root. */
 export interface StatCardProps extends Omit<HTMLAttributes<HTMLElement>, "color" | "children" | "dangerouslySetInnerHTML" | "onClick" | "aria-label"> {
+    /** Metric name in the card header, beside the optional icon chip. */
     label: ReactNode;
     /** Large tabular-number figure; pre-format it (currency, units) yourself. */
     value: ReactNode;

package/dist/Components/StatusTag/StatusTagProps.d.ts

@@ -2,7 +2,9 @@ import type { Tone } from "../../Theme/tokens/builders/tone";
 import type { TagDisplay, TagVariant } from "../Tag/TagProps";
 /** How one status looks: a tone, plus the chip variant (ignored in dot display). */
 export type StatusAppearance = {
+    /** Status tone of the tag, same tones as Tag. */
     tone: Tone;
+    /** Chip variant; ignored in dot display. */
     variant?: TagVariant;
 };
 /** Props for StatusTag; `S` is the app's status union so `map` must cover every status. */
@@ -15,6 +17,8 @@ export interface StatusTagProps<S extends string = string> {
     map: Record<S, StatusAppearance>;
     /** "dot" gives a quiet dot plus label; default "chip". */
     display?: TagDisplay;
+    /** Tag size; defaults to "sm". */
     size?: "sm" | "md";
+    /** Test id on the tag. */
     "data-testid"?: string;
 }

package/dist/Components/StickyBuyBar/StickyBuyBar.d.ts

@@ -1,3 +1,4 @@
 import type { StickyBuyBarProps } from "./StickyBuyBarProps";
+/** Bottom bar with price and one primary action whose mode, slide-in visibility and quantity stepper are all controlled. */
 declare const StickyBuyBar: ({ price, mrp, mode, visible, position, isLoading, quantity, onQuantityChange, maxQuantity, onAddToBag, onSelectOption, onNotify, onGoToBag, onBuyNow, itemLabel, currency, locale, labels, "data-testid": testId, }: StickyBuyBarProps) => import("react/jsx-runtime").JSX.Element;
 export default StickyBuyBar;

package/dist/Components/StickyBuyBar/StickyBuyBar.js

@@ -34,6 +34,7 @@ const NO_BLUR_SUPPORT = "@supports not ((backdrop-filter: blur(1px)) or (-webkit
 const SAFE_BOTTOM = "calc(0.75rem + env(safe-area-inset-bottom, 0px))";
 const pop = (0, react_2.keyframes) `0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); }`;
 const STACK_ORDER = ["add", "select-option", "notify", "added", "go-to-bag"];
+/** Bottom bar with price and one primary action whose mode, slide-in visibility and quantity stepper are all controlled. */
 const StickyBuyBar = ({ price, mrp, mode = "add", visible = true, position = "sticky", isLoading = false, quantity, onQuantityChange, maxQuantity, onAddToBag, onSelectOption, onNotify, onGoToBag, onBuyNow, itemLabel, currency, locale, labels, "data-testid": testId, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const reduced = (0, motion_2.usePrefersReducedMotion)();

package/dist/Components/StickyBuyBar/StickyBuyBarProps.d.ts

@@ -7,13 +7,17 @@ export type StickyBuyBarPosition = "sticky" | "static";
 export interface StickyBuyBarLabels {
     /** Accessible name of the landmark region. */
     region: string;
+    /** Primary button text in `add` mode; defaults to "Add to bag". */
     add: string;
     /** Prompt shown when an option is still unpicked, e.g. "Select a size". */
     selectOption: string;
+    /** Primary button text in `notify` mode; defaults to "Notify me". */
     notify: string;
     /** Short confirmation in the button while mode is `added`. */
     added: string;
+    /** Primary button text in `go-to-bag` mode; defaults to "Go to bag". */
     goToBag: string;
+    /** Secondary button text shown beside the primary when `onBuyNow` is set; defaults to "Buy now". */
     buyNow: string;
     /** Screen-reader name of the busy button while `isLoading`. */
     adding: string;
@@ -28,6 +32,7 @@ export interface StickyBuyBarProps extends PriceFormat {
     mode?: StickyBuyBarMode;
     /** Controlled: slides in when true and out when false, and is removed from the tab order while out. Typically driven by an IntersectionObserver on the inline CTA. */
     visible?: boolean;
+    /** Defaults to "sticky". */
     position?: StickyBuyBarPosition;
     /** Marks the primary as busy (aria-busy) and ignores further taps. */
     isLoading?: boolean;
@@ -49,6 +54,7 @@ export interface StickyBuyBarProps extends PriceFormat {
     onBuyNow?: () => void;
     /** Product name, so the stepper reads "Quantity of Slim-Fit Denim Jacket". */
     itemLabel?: string;
+    /** Per-key overrides merged over the English defaults. */
     labels?: Partial<StickyBuyBarLabels>;
     "data-testid"?: string;
 }

package/dist/Components/StockStatus/StockStatusProps.d.ts

@@ -9,6 +9,8 @@ export interface StockStatusProps {
     count?: number;
     /** Replaces the default words, e.g. "In stock · ships within 24 hours". */
     message?: string;
+    /** Text size; defaults to "md". */
     size?: StockStatusSize;
+    /** Test id on the root element. */
     "data-testid"?: string;
 }

package/dist/Components/Switch/SwitchProps.d.ts

@@ -1,8 +1,12 @@
 /** @deprecated Use `SegmentedControl` — this two-option pill is kept only for existing call sites. */
 export type SwitchProps = {
+    /** Label of the left segment; when both labels are empty the control drops its 12.5rem minimum width. */
     leftText: string;
+    /** Label of the right segment. */
     rightText: string;
+    /** Rendered before the left label. */
     leftIcon?: JSX.Element;
+    /** Rendered before the right label. */
     rightIcon?: JSX.Element;
     /** Fires on click and on arrow/Home/End keys with the newly selected side. */
     onSwitchToggle: (value: "left" | "right") => void;

package/dist/Components/Table/TableProps.d.ts

@@ -10,8 +10,11 @@ export type DataObject = Record<string, unknown>;
 export type TableDensity = "compact" | "normal" | "comfortable";
 /** Empty-state content shown when there are no rows; alternative to a raw ReactNode. */
 export type TableEmptyState = {
+    /** Rendered as the illustration above the title; omit for the default empty-state icon. */
     icon?: ReactNode;
+    /** Headline of the empty state. */
     title?: string;
+    /** Supporting line under the title. */
     description?: string;
 };
 /** Props for the main Table component: data, columns, pagination, selection, filters, and more. */
@@ -68,17 +71,19 @@ export type TableProps = {
     isPagination?: boolean;
     /** Controlled selected row ids; a new array replaces the internal selection. */
     selections?: (string | number)[];
-    /** Fires per cell, gated on the column: a column with `node` swallows its clicks. A node `label` arrives as its plain text. */
+    /** Fires per cell, gated on the column: a column with `node` swallows its clicks. Also makes rows tab stops; Enter or Space fires it for the first column without `node`. A node `label` arrives as its plain text. */
     onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
     /** Sticky-positions the trailing action/link column during horizontal scroll. Defaults true. */
     isActionFreeze?: boolean;
     /** "server" skips client-side slicing entirely — the parent must supply totalRecords and drive paging via onPagination. */
     paginationMode?: "client" | "server";
+    /** Replaces the pager with scroll-to-load: calls `onPagination(..., "next")` within 160px of the bottom; ignored while grouped. */
     infiniteScroll?: boolean;
     /** Gates further loads; when omitted, derived from data.length < totalRecords. */
     hasMore?: boolean;
     /** Parent-owned: set true while the next page is fetching — blocks repeat loads and shows the spinner. */
     isLoadingMore?: boolean;
+    /** Shows a Load more button over grouped rows instead of a pager; no effect unless the user has grouped the table. */
     groupLoadMore?: boolean;
     /** Label and loading text of the grouped Load more button. Defaults "Load more". */
     loadMoreText?: string;
@@ -179,6 +184,7 @@ export type TableHeaderProps = {
     label: string | number | ReactNode;
     /** Plain-text name for a node `label` — used by the sort/filter button names, Manage Columns, Group, filter chips and saved preferences. Ignored for a string/number label. Omitted: the node's text children, else `id`. */
     labelText?: string;
+    /** Row field this column reads (`row[id]`) and its identity in sort, filter, freeze and saved preferences. */
     id: string | number;
     /** Enables the multi-column sort control; sorts client-side only — server mode never reorders rows. */
     isSort?: boolean;
@@ -188,11 +194,13 @@ export type TableHeaderProps = {
     isFreeze?: boolean;
     /** Initial visibility only; defaultVisibleColumns and saved preferences override it. */
     isHidden?: boolean;
+    /** "status" renders the cell value as a coloured pill unless the column has a `node` renderer. */
     type?: "status";
     /** Pre-resolved tone per value — preferred over `statusColors` hex overrides. */
     statusPalette?: Record<string, import("../../Utils/table").TablePaletteColor>;
     /** Legacy hex fill seed per value; used only when `statusPalette` lacks that value. */
     statusColors?: Record<string, string>;
+    /** Field data-type; only columns that declare one appear in the Group-by picker. */
     columnType?: TableColumnType;
     /** Horizontal alignment for both the header label and the body cells. Defaults "start", except a full-bleed status cell, which centres until this is set. */
     align?: TableColumnAlign;
@@ -205,18 +213,25 @@ export type TableColumnAlign = "start" | "center" | "end";
 export type TableColumnType = "text" | "singleline" | "multiLine" | "description" | "email" | "phone" | "website" | "number" | "integer" | "decimal" | "dropdown" | "multiSelectDropdown" | "user" | "date" | "date_time" | "time" | "not_assigned" | (string & {});
 /** One entry in the export-format dropdown, paired with `handleExportChange`. */
 export type ExportOption = {
+    /** Text shown for the format in the dropdown. */
     label: string;
+    /** Format value passed to `handleExportChange`. */
     id: string;
 };
 /** Current sort direction applied to one column. */
 export type ColumnSortingProps = {
+    /** `id` of the sorted column. */
     column: string | number;
+    /** "none" means the column is not sorted. */
     direction: "asc" | "desc" | "none";
 };
 /** Internal wiring for the row-detail expander, built once by `Table`. */
 export type TableRowDetail = {
+    /** The `renderRowDetail` callback; a null result renders no detail content. */
     render: (row: DataObject) => ReactNode | null;
+    /** Expands or collapses the detail of the row with this `id`. */
     toggle: (id: string | number) => void;
+    /** Unique prefix for the DOM ids that link each toggle to its detail row. */
     idPrefix: string;
 };
 /** Props for the TableHeader row subcomponent: all columns, sorting, search, freeze, selection. */
@@ -268,14 +283,18 @@ export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "da
 };
 /** One resolved group of rows with its label/accent colors, for grouped board rendering. */
 export type TableRenderGroup = {
+    /** Group key; compared with each row's value in the group column. */
     value: string | number;
+    /** Group header text. */
     label: string;
+    /** `solid` is the left accent stripe on the header and its rows, `soft` the header fill, `text` the header ink; `onSolid` is unused. */
     color: {
         solid: string;
         soft: string;
         text: string;
         onSolid?: string;
     };
+    /** Rows belonging to this group, in display order. */
     rows: DataObject[];
 };
 /** Props for one column's search/filter popover. */

package/dist/Components/Table/components/TableBody.js

@@ -58,6 +58,8 @@ const motion_2 = require("../../../Theme/chakra/motion");
 const rowDetail_1 = require("./rowDetail");
 const rowMeasurer_1 = require("./rowMeasurer");
 const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const activationKey_1 = require("../../Common/activationKey");
+const rowFocusRing_1 = require("./rowFocusRing");
 const getRowId = (row) => row.id;
 const getRowContent = (row) => typeof row.content === "function"
     ? row.content
@@ -117,6 +119,12 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
             });
         }
     }, [row, onRowClick]);
+    const keyboardHeader = onRowClick && !isLoading ? columns.find((c) => !c.isHidden && !c.node) : undefined;
+    const handleRowKeyDown = (0, react_2.useCallback)((event) => {
+        if (event.target !== event.currentTarget || event.repeat || !keyboardHeader)
+            return;
+        (0, activationKey_1.onActivationKey)(() => handleCellClick(keyboardHeader))(event);
+    }, [keyboardHeader, handleCellClick]);
     const variant = (0, TableVariantContext_1.useTableVariant)();
     const firstDataColIndex = columns.findIndex((c) => !c.isHidden);
     const accentSx = accentColor ? `inset 3px 0 0 ${accentColor}` : undefined;
@@ -127,6 +135,7 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
         : accentSx;
     const restsOnIndex = variant.slot.rest === "index";
     const rowSx = {
+        ...(keyboardHeader ? (0, rowFocusRing_1.rowFocusRingSx)(theme.colors) : {}),
         ...(variant.row.hoverScope === "row"
             ? { "&:hover > td[data-hoverable='true']": { backgroundColor: variant.row.hoverBg } }
             : {}),
@@ -153,7 +162,7 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
     const chromeHoverable = rowStyle ? "false" : "true";
     const rowContent = getRowContent(row);
     const restBg = isStriped ? variant.row.stripeBg : theme.colors.background[50];
-    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: { ...rowSx, ...(0, motion_2.reducedMotionSx)() }, children: [isContent && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", p: 0, fontSize: "sm", background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: leadSx, boxSizing: "border-box", "data-hoverable": chromeHoverable, left: "0px", zIndex: 1, className: "columns sticky-columns", children: hasContent && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {})) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {})), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: "sm", fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: (0, motion_1.transitionFor)(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...(0, motion_2.reducedMotionSx)() }, children: rowIndex + 1 })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), rowDetail && detailIds && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: `${rowDetail_1.DETAIL_SLOT_PX}px`, minW: `${rowDetail_1.DETAIL_SLOT_PX}px`, maxW: `${rowDetail_1.DETAIL_SLOT_PX}px`, p: 0, textAlign: "center", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent && !isCheckbox ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: `${detailLeft}px`, zIndex: 1, className: "columns sticky-columns", children: hasDetail && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailToggle, { isOpen: detailOpen, detailId: detailIds.detailId, color: theme.colors.textMuted, theme: theme, onToggle: () => rowDetail.toggle(getRowId(row)) })) })), columns.map((header, headerIndex) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, tabIndex: keyboardHeader ? 0 : undefined, onKeyDown: keyboardHeader ? handleRowKeyDown : undefined, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: { ...rowSx, ...(0, motion_2.reducedMotionSx)() }, children: [isContent && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", p: 0, fontSize: "sm", background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: leadSx, boxSizing: "border-box", "data-hoverable": chromeHoverable, left: "0px", zIndex: 1, className: "columns sticky-columns", children: hasContent && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {})) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {})), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: "sm", fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: (0, motion_1.transitionFor)(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...(0, motion_2.reducedMotionSx)() }, children: rowIndex + 1 })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), rowDetail && detailIds && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: `${rowDetail_1.DETAIL_SLOT_PX}px`, minW: `${rowDetail_1.DETAIL_SLOT_PX}px`, maxW: `${rowDetail_1.DETAIL_SLOT_PX}px`, p: 0, textAlign: "center", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent && !isCheckbox ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: `${detailLeft}px`, zIndex: 1, className: "columns sticky-columns", children: hasDetail && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailToggle, { isOpen: detailOpen, detailId: detailIds.detailId, color: theme.colors.textMuted, theme: theme, onToggle: () => rowDetail.toggle(getRowId(row)) })) })), columns.map((header, headerIndex) => {
                         var _a, _b, _c, _d;
                         if (header.isHidden)
                             return null;

package/dist/Components/Table/components/rowFocusRing.d.ts

@@ -0,0 +1,21 @@
+import type { FocusRingTokens } from "../../../Theme/tokens/types";
+export declare const rowFocusRingSx: (colors: {
+    focusRing: FocusRingTokens;
+}) => {
+    "&:focus-visible": {
+        outline: string;
+        outlineOffset: string;
+    };
+    "&:focus-visible > td": {
+        boxShadow: string;
+    };
+    "&:focus-visible > td:first-of-type": {
+        boxShadow: string;
+    };
+    "&:focus-visible > td:last-of-type": {
+        boxShadow: string;
+    };
+    "&:focus-visible > td:only-of-type": {
+        boxShadow: string;
+    };
+};

package/dist/Components/Table/components/rowFocusRing.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rowFocusRingSx = void 0;
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const TOP = [0, 1];
+const BOTTOM = [0, -1];
+const LEFT = [1, 0];
+const RIGHT = [-1, 0];
+const RING_BAND = focusRing_styles_1.FOCUS_RING_WIDTH - focusRing_styles_1.FOCUS_HALO_WIDTH;
+const band = ([x, y], width, color) => `inset ${x * width}px ${y * width}px 0 0 ${color}`;
+const edgeShadow = (edges, { ring, halo }) => [...edges.map((edge) => band(edge, RING_BAND, ring)), ...edges.map((edge) => band(edge, focusRing_styles_1.FOCUS_RING_WIDTH, halo))].join(", ");
+// NOTE: each cell draws its slice, so sticky cells keep the ring above scrolled content.
+const rowFocusRingSx = (colors) => ({
+    "&:focus-visible": { outline: "2px solid transparent", outlineOffset: "-2px" },
+    "&:focus-visible > td": { boxShadow: edgeShadow([TOP, BOTTOM], colors.focusRing) },
+    "&:focus-visible > td:first-of-type": { boxShadow: edgeShadow([TOP, BOTTOM, LEFT], colors.focusRing) },
+    "&:focus-visible > td:last-of-type": { boxShadow: edgeShadow([TOP, BOTTOM, RIGHT], colors.focusRing) },
+    "&:focus-visible > td:only-of-type": { boxShadow: edgeShadow([TOP, BOTTOM, LEFT, RIGHT], colors.focusRing) },
+});
+exports.rowFocusRingSx = rowFocusRingSx;

package/dist/Components/Table/variants/tokens.d.ts

@@ -12,6 +12,7 @@ export type TableHoverScope = "cell" | "row";
 export type TableChromeReveal = "always" | "hover";
 /** Every field required: a preset that forgets one is a compile error, not a runtime gap. */
 export type TableVariantTokens = {
+    /** Header row look: fill, ink, type scale, height, column rules and when the filter kebab shows. */
     header: {
         bg: string;
         ink: string;
@@ -25,6 +26,7 @@ export type TableVariantTokens = {
         /** When the per-column filter kebab appears. Active columns always show it. */
         actions: TableChromeReveal;
     };
+    /** Body row look: hover and selected fills, rules and the zebra stripe fill. */
     row: {
         hoverBg: string;
         hoverScope: TableHoverScope;
@@ -36,12 +38,14 @@ export type TableVariantTokens = {
         /** Zebra fill for odd rows when `stripe` is on; a quiet step below `hoverBg`. */
         stripeBg: string;
     };
+    /** Leading checkbox/index column: width, what rests in it and its ink. */
     slot: {
         width: string;
         rest: TableSlotRest;
         indexInk: string;
         centered: boolean;
     };
+    /** Body cell ink and how status values render (bleed fill or pill). */
     cells: {
         ink: string;
         statusFill: TableStatusFill;

package/dist/Components/Tabs/TabsContext.d.ts

@@ -1,19 +1,33 @@
 import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
 import type { TabActivationMode, TabsColorScheme, TabsOrientation, TabsVariant } from "./TabsProps";
 export interface TabsContextValue {
+    /** Id prefix from which tab and panel ids are derived. */
     baseId: string;
+    /** Selected tab value; undefined when none is selected, e.g. in link mode. */
     selectedId: string | undefined;
+    /** Tab that holds the roving tab stop. */
     focusedId: string | undefined;
+    /** Selects a tab by value; updates internal state only when uncontrolled. */
     select: (value: string) => void;
+    /** Moves the roving focus to a tab without selecting it. */
     focusTab: (value: string) => void;
+    /** True once a panel container exists; tabs then point `aria-controls` at their panel. */
     hasPanels: boolean;
+    /** Called by TabPanels to mark that this Tabs instance has panels. */
     registerPanels: () => void;
+    /** Layout axis and arrow-key direction. */
     orientation: TabsOrientation;
+    /** Whether focus alone selects a tab. */
     activationMode: TabActivationMode;
+    /** Visual treatment shared by every tab. */
     variant: TabsVariant;
+    /** Control size shared by every tab. */
     size: ControlSize;
+    /** Colour of the selected tab and its count badge. */
     colorScheme: TabsColorScheme;
+    /** Keeps unselected panels unmounted until first selected. */
     isLazy: boolean;
+    /** Tabs share the tablist's width equally. */
     isFitted: boolean;
 }
 export declare const TabsContext: import("react").Context<TabsContextValue | undefined>;