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

package/CHANGELOG.md

@@ -139,6 +139,7 @@ next major.
 - **`ChoiceCard` / `ChoiceCardGroup`**: radio cards for picking one of a few options that each need a line of
   explanation. Group: `value` / `defaultValue` / `onValueChange`; card: `label`, `description`, `icon`,
   `disabled`. One tab stop; arrows, Home and End move focus and selection. Same look as `PaymentOption`.
+  `Pagination` and `ChoiceCard`: reviewed on screen by the owner 2026-10-15, take as-is.
 - **Plain HTML attributes on the page primitives**: `PageHeader`, `StatCard`, `SaveBar`, `EmptyState`,
   `DescriptionList`, `FilterBar` and `Skeletons` pass `id`, `className`, `style`, `data-*`, `aria-*` and
   event handlers to their root element; the component's own props still win and Chakra style props are
@@ -430,6 +431,11 @@ next major.
 
 ### Changed
 
+- **`Table` rows are keyboard-reachable when `onRowClick` is set.** Each row becomes a tab stop (`tabIndex` 0) and Enter or Space
+  on the focused row fires `onRowClick` with the first visible column that has no `node`, the same call a click on that cell makes.
+  Rows of a table without `onRowClick`, with every column on `node`, or while `isLoading` are unchanged. **Consumers that pass
+  `onRowClick` gain one Tab stop per row**: update tab-order tests and expect long tables to need more Tab presses to cross.
+
 - **`ProfileCard` shares the dropped-slot dev warning with `Modal` and `Drawer`.** The helper takes any owner name and
   warns once per owner and type (previously one set across owners); `ProfileCard` keeps its own message text.
 - **`MediaViewer` image pan no longer re-renders the viewer on every pointer move.** The pan offset is held in a ref and
@@ -556,6 +562,10 @@ next major.
 
 ### Changed (visual)
 
+- **`Table` rows with `onRowClick` show a keyboard focus ring.** A focused row draws the library's two-tone ring inset around its
+  cells (sticky cells included), on `:focus-visible` only, so a mouse click draws nothing. It clears 3:1 on every row plane in light and dark.
+
+- **`NavLauncher` slides in with the library's 200 ms enter tween instead of Chakra's drawer spring.** The spring took about 570 ms to come to rest on a full-height panel; the tween (`motionTransition("enter", "out")`, instant under `prefers-reduced-motion`) lands in 200 ms. Measured at 4x CPU throttle, 1280x800, 12 runs against an unchanged build: click to panel at rest and search field focused, median 765 to 413 ms (spotlight, -46%), 819 to 481 ms (classic, -41%), 787 to 460 ms (dark spotlight, -42%). The resting layout and the exit are unchanged.
 - **`NavLauncher` text snaps to the type scale.** The trigger, panel and spotlight (`NavLauncher`, `launcherParts`, `spotlightParts`) read
   `xs-plus` (13px) where they drew `12.5px` and `xs-minus` (11px) where they drew `11.5px`; the `13.5px` sizes stay. Each size moves by 0.5px.
 - **Disabled `Button` dims to the shared 0.5.** The base style drew `opacity: 0.6` while every other disabled control reads

package/COMPONENT-GOTCHAS.md

@@ -708,14 +708,14 @@ accepted, typed, never called.
 **Apply:** leave at least one column without a `node`, or put an explicit control inside a `node`
 renderer instead of relying on row click.
 
-Row click is also mouse-only: a `Table` row has no `tabIndex`, `role` or key handler, so a keyboard
-user can never activate `onRowClick`. The column resize handle is a bare `div` with a
-`mousedown` handler and is likewise unreachable by keyboard. Neither is a bug to work around inside
-the `Table`; making every row a tab stop would add a focus ring to every consumer.
-
-**Apply:** whatever `onRowClick` does must also be reachable through a real control, such as a
-`Button` or link in a `node` column (the name or an actions cell), so keyboard and
-screen-reader users have the same path.
+Setting `onRowClick` makes every row a tab stop: Enter or Space on the focused row (not on a checkbox,
+button or link inside it) fires `onRowClick` with the first visible column that has no `node`. A table
+without `onRowClick`, one whose every column has a `node`, and a table that is `isLoading` get no tab
+stop. The column resize handle is a bare `div` with a `mousedown` handler and is unreachable by keyboard.
+
+**Apply:** expect one extra Tab stop per row once you pass `onRowClick`, and update any tab-order test.
+Controls inside a row keep their own keys; give a `node` column a real `Button` or link for the actions
+that must not depend on the row.
 
 ### `Table.renderRowDetail` runs for every row on every render, and `expandedRows` ids match strictly
 

package/dist/Components/NavLauncher/NavLauncher.js

@@ -63,6 +63,7 @@ const LauncherTabs_1 = require("./LauncherTabs");
 const match_1 = require("./match");
 const NewTabLink_1 = __importDefault(require("./NewTabLink"));
 const PinToggle_1 = __importDefault(require("./PinToggle"));
+const launcherMotion_1 = require("./launcherMotion");
 const resultNavigation_1 = require("./resultNavigation");
 const ScopeBar_1 = require("./ScopeBar");
 const searchLayout_1 = require("./searchLayout");
@@ -243,6 +244,7 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
     const isDesktop = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
     const isLg = (0, useMatchMedia_1.useMatchMedia)(LG_QUERY, true);
     const isWide = (0, useMatchMedia_1.useMatchMedia)(XL_QUERY, false);
+    const isReducedMotion = (0, motion_1.usePrefersReducedMotion)();
     const columns = isWide ? 3 : isDesktop ? 2 : 1;
     const [innerQuery, setInnerQuery] = (0, react_2.useState)("");
     const [activeIndex, setActiveIndex] = (0, react_2.useState)(0);
@@ -828,6 +830,7 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
                 borderBottomRightRadius: { base: 0, lg: "16px" },
                 boxShadow: colors.boxShadow.default,
                 overflow: "hidden",
+                motionProps: (0, launcherMotion_1.launcherSlide)(isReducedMotion),
                 onKeyDown: onContentKeyDown,
                 ...{ "data-testid": testId },
             }, children: [(0, jsx_runtime_1.jsxs)(Drawer_1.DrawerHeader, { p: 0, flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-testid": "launcher-header-row", align: "center", gap: { base: "8px", md: "12px" }, minH: { base: "60px", md: "68px" }, pl: { base: "12px", md: "18px" }, pr: { base: "8px", md: "12px" }, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { as: "h2", id: titleId, children: labels.title }), (0, jsx_runtime_1.jsx)(SearchField, { inputRef: inputRef, value: query, onChange: setQuery, onKeyDown: onInputKeyDown, labels: labels, placeholder: (_c = currentScope === null || currentScope === void 0 ? void 0 : currentScope.placeholder) !== null && _c !== void 0 ? _c : labels.searchPlaceholder, hint: searchHint, listboxId: listboxId, activeId: isListView && hasResults ? optionId(active) : undefined, isExpanded: isListView, hasResults: hasResults, minW: inlineScopes ? FIELD_MIN_WIDTH : 0 }), inlineScopes, (0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, "data-testid": "launcher-count", display: { base: "none", sm: "block" }, flexShrink: 0, overflow: "hidden", w: countText ? "88px" : "0", opacity: countText ? 1 : 0, textAlign: "right", fontSize: "13px", whiteSpace: "nowrap", color: colors.textMuted, transition: (0, motion_2.transitionFor)(["width", "opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...(0, motion_1.reducedMotionSx)() }, children: countText }), headerActions ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", gap: "4px", flexShrink: 0, children: headerActions })) : null, (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": labels.close, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18, "aria-hidden": true }), variant: "ghost", boxSize: { base: "40px", md: "44px" }, minW: { base: "40px", md: "44px" }, borderRadius: "10px", flexShrink: 0, color: colors.textMuted, onClick: onClose })] }), scopeRow ? ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-testid": "launcher-scope-row", pl: "7px", pr: "3px", mt: "-6px", pb: "4px", children: scopeRow })) : null] }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { p: 0, display: "flex", flexDirection: "column", overflowY: "hidden", minH: 0, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { ref: bodyRef, direction: "column", flex: 1, minH: 0, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { "data-testid": "launcher-live", "aria-live": "polite", "aria-atomic": "true", children: countText }), (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { "data-testid": "launcher-announce", "aria-live": "polite", "aria-atomic": "true", children: (0, jsx_runtime_1.jsx)("span", { children: announcement.text }, announcement.n) }), isTabbed ? ((0, jsx_runtime_1.jsx)(LauncherTabs_1.LauncherTabs, { tabs: tabs, selected: activeTab, onSelect: setTab, idBase: baseId, label: labels.tabsLabel, onLeaveUp: () => focusField(), onLeaveDown: () => moveFocus("first") })) : null, isLg ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "row", flex: 1, minH: 0, minW: 0, children: body })) : (compactBody), dock] }) }), (0, jsx_runtime_1.jsxs)(Drawer_1.DrawerFooter, { p: 0, minH: "32px", flexShrink: 0, px: "18px", py: "6px", gap: "6px 14px", flexWrap: "wrap", bg: colors.backgroundColor.subtle, fontSize: "xs-minus", color: colors.textMuted, whiteSpace: "nowrap", justifyContent: "flex-start", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { display: { base: "none", md: "flex" }, gap: "6px 14px", align: "center", wrap: "wrap", "aria-hidden": true, sx: { "@media (hover: none)": { display: "none" } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", gap: "2px", children: ARROW_KEYS.map((arrow) => ((0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: arrow }, arrow))) }), labels.hintMove] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }), (0, jsx_runtime_1.jsx)(launcherParts_1.HintLabel, { text: enterLabel, reserve: enterReserve })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", opacity: canOpenInTab ? 1 : 0.45, transition: (0, motion_2.transitionFor)(["opacity"]), sx: (0, motion_1.reducedMotionSx)(), children: [modKeyLabel ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", gap: "4px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: modKeyLabel }), (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: ENTER_KEY })] })) : ((0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "mod+enter", size: "xs" })), labels.hintNewTab] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", display: { base: "none", lg: "flex" }, children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: modKeyLabel !== null && modKeyLabel !== void 0 ? modKeyLabel : MOD_KEY }), labels.hintClickNewTab] }), onTogglePin ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: "P" }), labels.hintPin] })) : null, (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "esc", size: "xs" }), labels.hintClose] })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", ml: "auto", children: labels.footerNote })] })] }) }));

package/dist/Components/NavLauncher/launcherMotion.d.ts

@@ -0,0 +1,19 @@
+export declare const launcherSlide: (isReducedMotion: boolean) => {
+    variants: {
+        enter: {
+            x: number;
+            y: number;
+            transition: {
+                duration: number;
+            };
+        };
+        exit: {
+            x: string;
+            y: number;
+            transition: {
+                duration: number;
+                ease: (0 | 1 | 0.2 | 0.4)[];
+            };
+        };
+    };
+};

package/dist/Components/NavLauncher/launcherMotion.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.launcherSlide = void 0;
+const react_1 = require("@chakra-ui/react");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const ENTER = (0, motion_1.motionTransition)("enter", "out");
+const INSTANT = { duration: 0 };
+const EXIT = { duration: 0.15, ease: [...react_1.EASINGS.easeInOut] };
+const launcherSlide = (isReducedMotion) => ({
+    variants: {
+        enter: { x: 0, y: 0, transition: isReducedMotion ? INSTANT : ENTER },
+        exit: { x: "-100%", y: 0, transition: EXIT },
+    },
+});
+exports.launcherSlide = launcherSlide;

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

@@ -68,7 +68,7 @@ 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;

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/esm/Components/NavLauncher/NavLauncher.js

@@ -4,7 +4,7 @@ import { Search as SearchIcon, X } from "lucide-react";
 import { memo, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
 import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
-import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
 import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
@@ -24,6 +24,7 @@ import { LauncherTabs, panelId, tabId, } from "./LauncherTabs.js";
 import { filterItems, searchLauncherSections, } from "./match.js";
 import NewTabLink from "./NewTabLink.js";
 import PinToggle from "./PinToggle.js";
+import { launcherSlide } from "./launcherMotion.js";
 import { moveResult } from "./resultNavigation.js";
 import { ScopeBar } from "./ScopeBar.js";
 import { copiesOnEnter, countByScope, inScope, layoutSearch, scopeGroups, takeTopHit, } from "./searchLayout.js";
@@ -204,6 +205,7 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
     const isDesktop = useMatchMedia(MD_QUERY, true);
     const isLg = useMatchMedia(LG_QUERY, true);
     const isWide = useMatchMedia(XL_QUERY, false);
+    const isReducedMotion = usePrefersReducedMotion();
     const columns = isWide ? 3 : isDesktop ? 2 : 1;
     const [innerQuery, setInnerQuery] = useState("");
     const [activeIndex, setActiveIndex] = useState(0);
@@ -789,6 +791,7 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
                 borderBottomRightRadius: { base: 0, lg: "16px" },
                 boxShadow: colors.boxShadow.default,
                 overflow: "hidden",
+                motionProps: launcherSlide(isReducedMotion),
                 onKeyDown: onContentKeyDown,
                 ...{ "data-testid": testId },
             }, children: [_jsxs(DrawerHeader, { p: 0, flexShrink: 0, children: [_jsxs(Flex, { "data-testid": "launcher-header-row", align: "center", gap: { base: "8px", md: "12px" }, minH: { base: "60px", md: "68px" }, pl: { base: "12px", md: "18px" }, pr: { base: "8px", md: "12px" }, children: [_jsx(VisuallyHidden, { as: "h2", id: titleId, children: labels.title }), _jsx(SearchField, { inputRef: inputRef, value: query, onChange: setQuery, onKeyDown: onInputKeyDown, labels: labels, placeholder: (_c = currentScope === null || currentScope === void 0 ? void 0 : currentScope.placeholder) !== null && _c !== void 0 ? _c : labels.searchPlaceholder, hint: searchHint, listboxId: listboxId, activeId: isListView && hasResults ? optionId(active) : undefined, isExpanded: isListView, hasResults: hasResults, minW: inlineScopes ? FIELD_MIN_WIDTH : 0 }), inlineScopes, _jsx(Box, { "aria-hidden": true, "data-testid": "launcher-count", display: { base: "none", sm: "block" }, flexShrink: 0, overflow: "hidden", w: countText ? "88px" : "0", opacity: countText ? 1 : 0, textAlign: "right", fontSize: "13px", whiteSpace: "nowrap", color: colors.textMuted, transition: transitionFor(["width", "opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...reducedMotionSx() }, children: countText }), headerActions ? (_jsx(Flex, { align: "center", gap: "4px", flexShrink: 0, children: headerActions })) : null, _jsx(IconButton, { "aria-label": labels.close, icon: _jsx(X, { size: 18, "aria-hidden": true }), variant: "ghost", boxSize: { base: "40px", md: "44px" }, minW: { base: "40px", md: "44px" }, borderRadius: "10px", flexShrink: 0, color: colors.textMuted, onClick: onClose })] }), scopeRow ? (_jsx(Box, { "data-testid": "launcher-scope-row", pl: "7px", pr: "3px", mt: "-6px", pb: "4px", children: scopeRow })) : null] }), _jsx(DrawerBody, { p: 0, display: "flex", flexDirection: "column", overflowY: "hidden", minH: 0, children: _jsxs(Flex, { ref: bodyRef, direction: "column", flex: 1, minH: 0, minW: 0, children: [_jsx(VisuallyHidden, { "data-testid": "launcher-live", "aria-live": "polite", "aria-atomic": "true", children: countText }), _jsx(VisuallyHidden, { "data-testid": "launcher-announce", "aria-live": "polite", "aria-atomic": "true", children: _jsx("span", { children: announcement.text }, announcement.n) }), isTabbed ? (_jsx(LauncherTabs, { tabs: tabs, selected: activeTab, onSelect: setTab, idBase: baseId, label: labels.tabsLabel, onLeaveUp: () => focusField(), onLeaveDown: () => moveFocus("first") })) : null, isLg ? (_jsx(Flex, { direction: "row", flex: 1, minH: 0, minW: 0, children: body })) : (compactBody), dock] }) }), _jsxs(DrawerFooter, { p: 0, minH: "32px", flexShrink: 0, px: "18px", py: "6px", gap: "6px 14px", flexWrap: "wrap", bg: colors.backgroundColor.subtle, fontSize: "xs-minus", color: colors.textMuted, whiteSpace: "nowrap", justifyContent: "flex-start", children: [_jsxs(Flex, { display: { base: "none", md: "flex" }, gap: "6px 14px", align: "center", wrap: "wrap", "aria-hidden": true, sx: { "@media (hover: none)": { display: "none" } }, children: [_jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(Flex, { as: "span", gap: "2px", children: ARROW_KEYS.map((arrow) => (_jsx(Kbd, { size: "xs", children: arrow }, arrow))) }), labels.hintMove] }), _jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(KbdShortcut, { shortcut: "enter", size: "xs" }), _jsx(HintLabel, { text: enterLabel, reserve: enterReserve })] }), _jsxs(Flex, { as: "span", align: "center", gap: "5px", opacity: canOpenInTab ? 1 : 0.45, transition: transitionFor(["opacity"]), sx: reducedMotionSx(), children: [modKeyLabel ? (_jsxs(Flex, { as: "span", gap: "4px", children: [_jsx(Kbd, { size: "xs", children: modKeyLabel }), _jsx(Kbd, { size: "xs", children: ENTER_KEY })] })) : (_jsx(KbdShortcut, { shortcut: "mod+enter", size: "xs" })), labels.hintNewTab] }), _jsxs(Flex, { as: "span", align: "center", gap: "5px", display: { base: "none", lg: "flex" }, children: [_jsx(Kbd, { size: "xs", children: modKeyLabel !== null && modKeyLabel !== void 0 ? modKeyLabel : MOD_KEY }), labels.hintClickNewTab] }), onTogglePin ? (_jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(Kbd, { size: "xs", children: "P" }), labels.hintPin] })) : null, _jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(KbdShortcut, { shortcut: "esc", size: "xs" }), labels.hintClose] })] }), _jsx(Text, { as: "span", ml: "auto", children: labels.footerNote })] })] }) }));

package/dist/esm/Components/NavLauncher/launcherMotion.js

@@ -0,0 +1,11 @@
+import { EASINGS } from "@chakra-ui/react";
+import { motionTransition } from "../../Theme/tokens/primitives/motion.js";
+const ENTER = motionTransition("enter", "out");
+const INSTANT = { duration: 0 };
+const EXIT = { duration: 0.15, ease: [...EASINGS.easeInOut] };
+export const launcherSlide = (isReducedMotion) => ({
+    variants: {
+        enter: { x: 0, y: 0, transition: isReducedMotion ? INSTANT : ENTER },
+        exit: { x: "-100%", y: 0, transition: EXIT },
+    },
+});

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

@@ -19,6 +19,8 @@ import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
 import { DETAIL_SLOT_PX, RowDetailRow, RowDetailToggle, detailDomIds } from "./rowDetail.js";
 import { useRowMeasurer } from "./rowMeasurer.js";
 import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+import { onActivationKey } from "../../Common/activationKey.js";
+import { rowFocusRingSx } from "./rowFocusRing.js";
 const getRowId = (row) => row.id;
 const getRowContent = (row) => typeof row.content === "function"
     ? row.content
@@ -77,6 +79,12 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
             });
         }
     }, [row, onRowClick]);
+    const keyboardHeader = onRowClick && !isLoading ? columns.find((c) => !c.isHidden && !c.node) : undefined;
+    const handleRowKeyDown = useCallback((event) => {
+        if (event.target !== event.currentTarget || event.repeat || !keyboardHeader)
+            return;
+        onActivationKey(() => handleCellClick(keyboardHeader))(event);
+    }, [keyboardHeader, handleCellClick]);
     const variant = useTableVariant();
     const firstDataColIndex = columns.findIndex((c) => !c.isHidden);
     const accentSx = accentColor ? `inset 3px 0 0 ${accentColor}` : undefined;
@@ -87,6 +95,7 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
         : accentSx;
     const restsOnIndex = variant.slot.rest === "index";
     const rowSx = {
+        ...(keyboardHeader ? rowFocusRingSx(theme.colors) : {}),
         ...(variant.row.hoverScope === "row"
             ? { "&:hover > td[data-hoverable='true']": { backgroundColor: variant.row.hoverBg } }
             : {}),
@@ -113,7 +122,7 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
     const chromeHoverable = rowStyle ? "false" : "true";
     const rowContent = getRowContent(row);
     const restBg = isStriped ? variant.row.stripeBg : theme.colors.background[50];
-    return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: transitionFor(["opacity"], "base"), sx: { ...rowSx, ...reducedMotionSx() }, children: [isContent && (_jsx(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 && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? (_jsx(ChevronDown, {})) : (_jsx(ChevronRight, {})), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && (_jsx(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: _jsxs(Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && (_jsx(Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: transitionFor(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...reducedMotionSx() }, children: rowIndex + 1 })), _jsx(Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: transitionFor(["opacity"]), sx: reducedMotionSx(), children: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), rowDetail && detailIds && (_jsx(Td, { w: `${DETAIL_SLOT_PX}px`, minW: `${DETAIL_SLOT_PX}px`, maxW: `${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 && (_jsx(RowDetailToggle, { isOpen: detailOpen, detailId: detailIds.detailId, color: theme.colors.textMuted, theme: theme, onToggle: () => rowDetail.toggle(getRowId(row)) })) })), columns.map((header, headerIndex) => {
+    return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, tabIndex: keyboardHeader ? 0 : undefined, onKeyDown: keyboardHeader ? handleRowKeyDown : undefined, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: transitionFor(["opacity"], "base"), sx: { ...rowSx, ...reducedMotionSx() }, children: [isContent && (_jsx(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 && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? (_jsx(ChevronDown, {})) : (_jsx(ChevronRight, {})), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && (_jsx(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: _jsxs(Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && (_jsx(Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: transitionFor(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...reducedMotionSx() }, children: rowIndex + 1 })), _jsx(Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: transitionFor(["opacity"]), sx: reducedMotionSx(), children: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), rowDetail && detailIds && (_jsx(Td, { w: `${DETAIL_SLOT_PX}px`, minW: `${DETAIL_SLOT_PX}px`, maxW: `${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 && (_jsx(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/esm/Components/Table/components/rowFocusRing.js

@@ -0,0 +1,16 @@
+import { FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH } from "../../../Theme/chakra/focusRing.styles.js";
+const TOP = [0, 1];
+const BOTTOM = [0, -1];
+const LEFT = [1, 0];
+const RIGHT = [-1, 0];
+const RING_BAND = FOCUS_RING_WIDTH - 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, FOCUS_RING_WIDTH, halo))].join(", ");
+// NOTE: each cell draws its slice, so sticky cells keep the ring above scrolled content.
+export 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) },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.66",
+  "version": "2.4.2-beta.67",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",