pixelize-design-library 2.4.2-beta.63 → 2.4.2-beta.64

package/dist/Components/Select/optionRowInk.d.ts

@@ -1,7 +1,19 @@
+import { type RowStateBackgrounds } from "../../Theme/tokens/builders/rowStates";
 import type { PaletteProps } from "../../Theme/tokens/types";
 /** Selection is carried by weight and a trailing brand check, so the label itself stays neutral. */
 export declare const optionRowInk: (colors: PaletteProps, isSingleSelected: boolean) => string;
 export declare const optionRowDescriptionInk: (colors: PaletteProps) => string;
+/** The one fill an option row paints: the cursor's (hover or keyboard). Selection never fills a row. */
+export declare const optionRowFill: (rows: RowStateBackgrounds, isActive: boolean) => string;
+/** Fill for rows that take real DOM focus (roving tabindex) — `:hover` and `:focus` are the cursor. */
+export declare const optionRowCursorSx: (rows: RowStateBackgrounds) => {
+    _hover: {
+        bg: string;
+    };
+    _focus: {
+        bg: string;
+    };
+};
 export declare const OPTION_ROW_REST_WEIGHT = 400;
 export declare const OPTION_ROW_SELECTED_WEIGHT = 500;
 export declare const optionRowWeight: (isSingleSelected: boolean) => number;

package/dist/Components/Select/optionRowInk.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.optionRowWeight = exports.OPTION_ROW_SELECTED_WEIGHT = exports.OPTION_ROW_REST_WEIGHT = exports.optionRowDescriptionInk = exports.optionRowInk = void 0;
+exports.optionRowWeight = exports.OPTION_ROW_SELECTED_WEIGHT = exports.OPTION_ROW_REST_WEIGHT = exports.optionRowCursorSx = exports.optionRowFill = exports.optionRowDescriptionInk = exports.optionRowInk = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
@@ -10,6 +10,15 @@ exports.optionRowInk = optionRowInk;
 // A 12px sub-line reached only 4.00:1 on the hovered selected row in dark.
 const optionRowDescriptionInk = (colors) => (0, outlineRung_1.liftToContrast)(colors.textMuted, (0, rowStates_1.listRowBackgrounds)(colors).selectedActive, accentText_1.AA_NORMAL_TEXT);
 exports.optionRowDescriptionInk = optionRowDescriptionInk;
+/** The one fill an option row paints: the cursor's (hover or keyboard). Selection never fills a row. */
+const optionRowFill = (rows, isActive) => isActive ? rows.active : "transparent";
+exports.optionRowFill = optionRowFill;
+/** Fill for rows that take real DOM focus (roving tabindex) — `:hover` and `:focus` are the cursor. */
+const optionRowCursorSx = (rows) => ({
+    _hover: { bg: rows.active },
+    _focus: { bg: rows.active },
+});
+exports.optionRowCursorSx = optionRowCursorSx;
 exports.OPTION_ROW_REST_WEIGHT = 400;
 // NOTE: 600 beside a tinted fill and a check read as three signals for one state.
 exports.OPTION_ROW_SELECTED_WEIGHT = 500;

package/dist/Components/SelectSearch/SelectSearch.js

@@ -36,18 +36,9 @@ const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOp
                 const selected = isOptionSelected(option);
                 const isSingleSelected = selected && !isMultipleSelect;
                 const isActive = index === activeIndex;
-                const rowBg = selected
-                    ? isActive
-                        ? rowBackgrounds.selectedActive
-                        : rowBackgrounds.selected
-                    : isActive
-                        ? rowBackgrounds.active
-                        : "transparent";
                 return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (el) => {
                         optionRefs.current[index] = el;
-                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", bg: rowBg, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, isSingleSelected), fontWeight: (0, optionRowInk_1.optionRowWeight)(isSingleSelected), transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), _hover: {
-                        bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
-                    }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
+                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", bg: "transparent", mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, isSingleSelected), fontWeight: (0, optionRowInk_1.optionRowWeight)(isSingleSelected), transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), ...(0, optionRowInk_1.optionRowCursorSx)(rowBackgrounds), onClick: () => handleOptionClick(option), onKeyDown: (e) => {
                         if (e.key === "Enter" || e.key === " ") {
                             e.preventDefault();
                             handleOptionClick(option);

package/dist/Components/Table/Table.js

@@ -49,11 +49,12 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
     name: "",
     page: "",
     orgId: "",
-}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "classic", stripe = false, renderRowDetail, expandedRows, onExpandedRowsChange, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
+}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "studio", stripe = false, renderRowDetail, expandedRows, onExpandedRowsChange, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
     var _a, _b, _c, _d, _e;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const prefersReducedMotion = (0, motion_2.usePrefersReducedMotion)();
     const clearFiltersTone = (0, react_1.useMemo)(() => (0, filledSurface_1.resolveFilledSurface)(theme.colors.semantic.error, theme.colors), [theme.colors]);
+    const clearBadge = (0, react_1.useMemo)(() => (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors), [theme.colors]);
     const variantTokens = (0, react_1.useMemo)(() => variants_1.TABLE_VARIANTS[variant](theme.colors, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main)), [variant, theme.colors]);
     const [columnsSearch, setColumnsSearch] = (0, react_1.useState)({});
     const detailIdPrefix = (0, react_1.useId)();
@@ -397,7 +398,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
                                                                     ? isFilterModalOpen
                                                                     : !!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 0, bg: "transparent", border: "none", borderRadius: "md", cursor: "pointer", onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
                                                                     color: theme.colors.accentText,
-                                                                }, sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: (0, jsx_runtime_1.jsx)(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500] }) }), sidebarActiveCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": "Clear filters", position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], color: (0, filledSurface_1.labelOnFill)(theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), border: "none", borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
+                                                                }, sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: (0, jsx_runtime_1.jsx)(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500] }) }), sidebarActiveCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": "Clear filters", position: "absolute", top: "-6px", right: "-10px", bg: clearBadge.fill, color: clearBadge.color, border: "none", borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
                                                                     var _a;
                                                                     e.stopPropagation();
                                                                     if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {

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

@@ -26,7 +26,7 @@ export type TableProps = {
     onAddItem?: (groupValue: string | number) => void;
     /** Seeds the initial row height only — Table Settings > Density (or saved preferences.density) takes over after the first change. */
     density?: TableDensity;
-    /** Visual preset. Defaults to `classic` — the table exactly as it shipped. */
+    /** Visual preset. Defaults to `studio`; pass `"classic"` for the banded header and per-column rules. */
     variant?: TableVariant;
     /** Content shown under a row when expanded; return null for rows with no detail and they get no chevron. Memoize it: an inline function re-renders every row. */
     renderRowDetail?: (row: DataObject) => ReactNode | null;

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

@@ -424,7 +424,15 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
         });
     }, [data]);
     if (isLoading && data.length === 0) {
-        return ((0, jsx_runtime_1.jsx)(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.boxborder[200], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4, rowHeight: rowHeight }));
+        const dataColumns = columns.filter((o) => !o.isHidden).length;
+        const cells = [
+            ...(isContent ? ["blank"] : []),
+            ...(isCheckbox ? ["checkbox"] : []),
+            ...(rowDetail ? ["blank"] : []),
+            ...Array.from({ length: dataColumns || TableLoading_1.LOADING_PLACEHOLDER_COLUMNS }, () => "bar"),
+            ...(isLink ? ["blank"] : []),
+        ];
+        return ((0, jsx_runtime_1.jsx)(TableLoading_1.TableBodyLoading, { noOfColumns: cells.length, cells: cells, borderColor: variant.row.ruleColor, rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4, rowHeight: rowHeight }));
     }
     if (!isLoading && data.length === 0) {
         return ((0, jsx_runtime_1.jsx)(react_1.Tr, { backgroundColor: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: totalVisibleColumns, p: 0, border: "none", children: (0, jsx_runtime_1.jsx)(TableEmpty, { emptyState: emptyState }) }) }));

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

@@ -18,11 +18,12 @@ const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
 const rowDetail_1 = require("./rowDetail");
+const TableLoading_1 = require("./TableLoading");
 const LABEL_JUSTIFY = { start: "space-between", center: "center", end: "flex-start" };
 const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, hasDetail = false, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
     const [openFilterId, setOpenFilterId] = (0, react_2.useState)(null);
     const variant = (0, TableVariantContext_1.useTableVariant)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && (0, jsx_runtime_1.jsx)(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && ((0, jsx_runtime_1.jsx)(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), hasDetail && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailHeaderCell, { left: isCheckbox ? slotWidth : 0, bg: variant.header.bg, ruleColor: variant.header.ruleColor, noBorders: noBorders })), columns.map((header, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && (0, jsx_runtime_1.jsx)(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && ((0, jsx_runtime_1.jsx)(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), hasDetail && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailHeaderCell, { left: isCheckbox ? slotWidth : 0, bg: variant.header.bg, ruleColor: variant.header.ruleColor, noBorders: noBorders })), isLoading && !columns.some((header) => !(header === null || header === void 0 ? void 0 : header.isHidden)) && ((0, jsx_runtime_1.jsx)(LoadingHeaderCells, { noBorders: noBorders })), columns.map((header, index) => {
                 if (header === null || header === void 0 ? void 0 : header.isHidden)
                     return null;
                 return ((0, jsx_runtime_1.jsx)(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, detailWidth: hasDetail ? rowDetail_1.DETAIL_SLOT_PX : 0, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, (0, columnLabel_1.columnLabelText)(header)));
@@ -32,8 +33,12 @@ exports.default = (0, react_2.memo)(TableHeader);
 const SelectAllCell = (0, react_2.memo)(({ slotRef, freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const variant = (0, TableVariantContext_1.useTableVariant)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Th, { ref: slotRef, scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: theme.colors.accentText })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { ref: slotRef, scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: theme.colors.accentText })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isDisabled: isLoading, isIndeterminate: checked === "indeterminate" })) }) }));
 });
+const LoadingHeaderCells = ({ noBorders }) => {
+    const variant = (0, TableVariantContext_1.useTableVariant)();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: TableLoading_1.LOADING_PLACEHOLDER_COLUMNS }, (_, i) => ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", "aria-hidden": "true", px: 3, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "0.75rem", width: i % 2 ? "50%" : "70%", borderRadius: "full", variant: "shine" }) }, i))) }));
+};
 const ContentSpacerCell = (0, react_2.memo)(({ noBorders }) => {
     const variant = (0, TableVariantContext_1.useTableVariant)();
     return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));

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

@@ -1,7 +1,10 @@
 declare const TableLoading: () => import("react/jsx-runtime").JSX.Element;
 export default TableLoading;
-export declare const TableBodyLoading: ({ noOfColumns, borderColor, rowsCount, rowHeight, }: {
+export declare const LOADING_PLACEHOLDER_COLUMNS = 4;
+export type LoadingCell = "bar" | "checkbox" | "blank";
+export declare const TableBodyLoading: ({ noOfColumns, cells, borderColor, rowsCount, rowHeight, }: {
     noOfColumns: number;
+    cells?: LoadingCell[];
     borderColor: string;
     rowsCount?: number;
     rowHeight?: number;

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

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableBodyLoading = void 0;
+exports.TableBodyLoading = exports.LOADING_PLACEHOLDER_COLUMNS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const TableLoading = () => {
     return ((0, jsx_runtime_1.jsx)(react_1.Box, { overflowX: "auto", p: 4, children: (0, jsx_runtime_1.jsxs)(react_1.Table, { variant: "simple", width: "full", children: [(0, jsx_runtime_1.jsx)(react_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_1.Tr, { children: [(0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.Tbody, { children: Array.from({ length: 5 }).map((_, rowIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Tr, { children: [(0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) })] }, rowIndex))) })] }) }));
 };
 exports.default = TableLoading;
-const TableBodyLoading = ({ noOfColumns, borderColor, rowsCount = 4, rowHeight = 45, }) => {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowsCount }).map((_, index) => {
-            return ((0, jsx_runtime_1.jsx)(react_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: noOfColumns, textAlign: "center", border: `1px solid ${borderColor}`, px: 2, pt: 2, pb: 0, height: `${rowHeight}px`, boxSizing: "border-box", children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "15px", variant: "shine" }) }) }, index));
-        }) }));
+exports.LOADING_PLACEHOLDER_COLUMNS = 4;
+const BAR_WIDTHS = ["72%", "58%", "84%", "46%", "66%", "78%"];
+const TableBodyLoading = ({ noOfColumns, cells, borderColor, rowsCount = 4, rowHeight = 45, }) => {
+    const layout = cells !== null && cells !== void 0 ? cells : Array.from({ length: noOfColumns }, () => "bar");
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowsCount }).map((_, row) => ((0, jsx_runtime_1.jsx)(react_1.Tr, { "aria-hidden": "true", children: layout.map((kind, col) => ((0, jsx_runtime_1.jsxs)(react_1.Td, { px: kind === "checkbox" ? 0 : 3, py: 0, height: `${rowHeight}px`, boxSizing: "border-box", border: "none", borderBottom: `0.0625rem solid ${borderColor}`, textAlign: kind === "checkbox" ? "center" : undefined, children: [kind === "checkbox" && ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { boxSize: "1rem", borderRadius: "sm", variant: "shine", display: "inline-block", verticalAlign: "middle" })), kind === "bar" && ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "0.75rem", width: BAR_WIDTHS[(row * 3 + col) % BAR_WIDTHS.length], borderRadius: "full", variant: "shine" }))] }, col))) }, row))) }));
 };
 exports.TableBodyLoading = TableBodyLoading;

package/dist/Components/Table/filters/CompactSelect.js

@@ -60,18 +60,9 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
                                     }, sx: { fontSize: "0.75rem", height: "22px" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
                                             const selected = (value === null || value === void 0 ? void 0 : value.id) === opt.id;
                                             const isActive = i === activeIndex;
-                                            const rowBg = selected
-                                                ? isActive
-                                                    ? rowBackgrounds.selectedActive
-                                                    : rowBackgrounds.selected
-                                                : isActive
-                                                    ? rowBackgrounds.active
-                                                    : theme.colors.transparent;
                                             return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, ref: (el) => {
                                                     optionRefs.current[i] = el;
-                                                }, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", display: "flex", alignItems: "center", gap: spec.gap, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, selected), fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(selected), _hover: {
-                                                    bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
-                                                }, bg: rowBg, onClick: () => {
+                                                }, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", display: "flex", alignItems: "center", gap: spec.gap, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, selected), fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(selected), bg: "transparent", ...(0, optionRowInk_1.optionRowCursorSx)(rowBackgrounds), onClick: () => {
                                                     onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
                                                     setIsOpen(false);
                                                     setQuery("");

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

@@ -1,4 +1,4 @@
 import type { TableVariantTokens } from "./tokens";
 export declare const TableVariantProvider: import("react").Provider<TableVariantTokens | null>;
-/** No provider means the table as it always was — the default is a variant, not a gap. */
+/** No provider means the default variant — studio, the same preset `Table` falls back to. */
 export declare function useTableVariant(): TableVariantTokens;

package/dist/Components/Table/variants/TableVariantContext.js

@@ -5,13 +5,13 @@ exports.useTableVariant = useTableVariant;
 const react_1 = require("react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
-const classic_1 = require("./classic");
+const studio_1 = require("./studio");
 const TableVariantContext = (0, react_1.createContext)(null);
 exports.TableVariantProvider = TableVariantContext.Provider;
-/** No provider means the table as it always was — the default is a variant, not a gap. */
+/** No provider means the default variant — studio, the same preset `Table` falls back to. */
 function useTableVariant() {
     const provided = (0, react_1.useContext)(TableVariantContext);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const isDark = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main);
-    return (0, react_1.useMemo)(() => provided !== null && provided !== void 0 ? provided : (0, classic_1.classicPreset)(theme.colors, isDark), [provided, theme.colors, isDark]);
+    return (0, react_1.useMemo)(() => provided !== null && provided !== void 0 ? provided : (0, studio_1.studioPreset)(theme.colors, isDark), [provided, theme.colors, isDark]);
 }

package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -21,7 +21,11 @@ function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs =
     const [open, setOpen] = (0, react_1.useState)(false);
     const openTimer = (0, react_1.useRef)(null);
     const closeTimer = (0, react_1.useRef)(null);
+    const openRef = (0, react_1.useRef)(false);
     const setOpenState = (0, react_1.useCallback)((next) => {
+        if (openRef.current === next)
+            return;
+        openRef.current = next;
         setOpen(next);
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
     }, [onOpenChange]);

package/dist/Components/WorkspaceWindow/WorkspaceWindow.d.ts

@@ -1,3 +1,3 @@
 import type { WorkspaceTrayProps, WorkspaceWindowProps } from "./WorkspaceWindowProps";
-export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId, }: WorkspaceWindowProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function WorkspaceTray({ items, onRestore, onClose, testId, renderItem, }: WorkspaceTrayProps): import("react/jsx-runtime").JSX.Element | null;
+export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, labels, finalFocusRef, testId, }: WorkspaceWindowProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function WorkspaceTray({ items, onRestore, onClose, testId, placement, offset, closeLabel, dirtyLabel, label, renderItem, }: WorkspaceTrayProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -12,7 +12,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-// NOTE: no maximize/restore toggle (removed by product decision) — onMedium/onMaximize kept optional for back-compat.
+// NOTE: no maximize/restore toggle (removed by product decision); onMedium/onMaximize stay as deprecated no-ops.
 const WINDOW_SIZE = { maxW: "88rem", h: "92vh" };
 const WindowTitle = ({ testId, color, children }) => {
     const { headerId, setHeaderMounted } = (0, react_1.useModalContext)();
@@ -23,7 +23,8 @@ const WindowTitle = ({ testId, color, children }) => {
     return ((0, jsx_runtime_1.jsx)(react_1.Text, { id: headerId, fontSize: "sm", fontWeight: 600, color: color, noOfLines: 1, "data-testid": `${testId}-title`, children: children }));
 };
 // Presentational floating "workspace window" (Jira-style dialog), headless — the parent owns window state.
-function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId = "workspace-window", }) {
+function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, labels, finalFocusRef, testId = "workspace-window", }) {
+    var _a, _b, _c;
     // Must run before the early return: a minimized render would otherwise skip the hook
     // and change hook order when the window reopens.
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -33,28 +34,34 @@ function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFu
     return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: true, onClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), size: "full", isCentered: true, scrollBehavior: "inside", 
         // Don't discard unsaved work on an accidental overlay click / Esc — the
         // parent decides via the explicit Close control.
-        closeOnOverlayClick: false, closeOnEsc: false, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(3px)" }), (0, jsx_runtime_1.jsx)(react_1.ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", 
+        closeOnOverlayClick: false, closeOnEsc: false, finalFocusRef: finalFocusRef, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(3px)" }), (0, jsx_runtime_1.jsx)(react_1.ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", 
                 // NOTE: size="full" blocks Chakra's own closeOnOverlayClick — detect the outside click ourselves instead.
                 onMouseDown: (e) => {
                     if (e.target === e.currentTarget)
                         onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick();
-                }, "data-testid": `${testId}-backdrop`, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { bg: theme.colors.surfaceRaised, borderRadius: "xl", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: theme.colors.boxborder[200], bg: theme.colors.background[100], flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
+                }, "data-testid": `${testId}-backdrop`, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { bg: theme.colors.surfaceRaised, borderRadius: "xl", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: theme.colors.boxborder[200], bg: theme.colors.background[100], flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": (_a = labels === null || labels === void 0 ? void 0 : labels.openFullPage) !== null && _a !== void 0 ? _a : "Open full page", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": (_b = labels === null || labels === void 0 ? void 0 : labels.minimize) !== null && _b !== void 0 ? _b : "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": (_c = labels === null || labels === void 0 ? void 0 : labels.close) !== null && _c !== void 0 ? _c : "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
 }
-// Bottom tray of restore pills for minimized WorkspaceWindows — presentational, parent supplies handlers.
-function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", renderItem, }) {
+const cssLength = (value) => (typeof value === "number" ? `${value}px` : value);
+// Portalled above modal overlays; aria-live keeps Chakra's modal aria-hidden off it, data-no-focus-lock keeps the focus trap off it.
+function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", placement = "bottom-end", offset, closeLabel, dirtyLabel = "Unsaved changes", label = "Minimized windows", renderItem, }) {
+    var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (!items.length)
         return null;
-    return (
-    // NOTE: floating bottom-right cluster (Gmail/Jira pattern), not a docked bar — needs no reserved page gutter.
-    (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "fixed", bottom: 4, right: 4, zIndex: zIndices_1.default.modal, direction: "row-reverse", wrap: "wrap-reverse", justify: "flex-start", gap: 2, maxW: { base: "calc(100vw - 2rem)", md: "36rem" }, "data-testid": testId, children: items.map((item) => {
-            const api = {
-                restore: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id),
-                close: () => onClose === null || onClose === void 0 ? void 0 : onClose(item.id),
-            };
-            if (renderItem) {
-                return (0, jsx_runtime_1.jsx)(react_1.Box, { children: renderItem(item, api) }, item.id);
-            }
-            return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: theme.colors.primary[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.primary[100]), boxShadow: "md", borderWidth: "1px", borderColor: theme.colors.primary[200], "data-testid": `${testId}-pill`, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", fontSize: "sm", onClick: api.restore, "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.title }), onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }, item.id));
-        }) }));
+    const atEnd = placement === "bottom-end";
+    const inset = {
+        bottom: cssLength((_a = offset === null || offset === void 0 ? void 0 : offset.y) !== null && _a !== void 0 ? _a : "1rem"),
+        [atEnd ? "right" : "left"]: cssLength((_b = offset === null || offset === void 0 ? void 0 : offset.x) !== null && _b !== void 0 ? _b : "1rem"),
+    };
+    const ink = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.primary[100]);
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.Flex, { role: "region", "aria-label": label, "aria-live": "polite", "data-no-focus-lock": "true", position: "fixed", ...inset, zIndex: zIndices_1.default.modal + 1, direction: atEnd ? "row-reverse" : "row", wrap: "wrap-reverse", justify: "flex-start", gap: 2, maxW: { base: "calc(100vw - 2rem)", md: "36rem" }, "data-testid": testId, children: items.map((item) => {
+                const api = {
+                    restore: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id),
+                    close: () => onClose === null || onClose === void 0 ? void 0 : onClose(item.id),
+                };
+                if (renderItem) {
+                    return (0, jsx_runtime_1.jsx)(react_1.Box, { children: renderItem(item, api) }, item.id);
+                }
+                return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: theme.colors.primary[100], color: ink, boxShadow: "md", borderWidth: "1px", borderColor: theme.colors.primary[200], "data-testid": `${testId}-pill`, children: [item.isDirty ? ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "img", "aria-label": dirtyLabel, boxSize: "0.5rem", borderRadius: "full", bg: "currentColor", flexShrink: 0, "data-testid": `${testId}-dirty` })) : null, (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", fontSize: "sm", onClick: api.restore, "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [item.title, item.subtitle ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontWeight: 400, ml: 1.5, children: item.subtitle })) : null] }), onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": closeLabel ? closeLabel(item) : "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }, item.id));
+            }) }) }));
 }

package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, RefObject } from "react";
 /**
  * Window state for a WorkspaceWindow.
  * - "medium": default centered dialog (Jira-style)
@@ -6,6 +6,15 @@ import type { ReactNode } from "react";
  * - "minimized": collapsed to a tray pill (rendered by WorkspaceTray, not the window)
  */
 export type WorkspaceWindowState = "medium" | "maximized" | "minimized";
+/** Accessible names of the window's icon controls; omitted keys keep the English default. */
+export interface WorkspaceWindowLabels {
+    /** Default "Minimize". */
+    minimize?: string;
+    /** Default "Close". */
+    close?: string;
+    /** Default "Open full page". */
+    openFullPage?: string;
+}
 /** Props for one WorkspaceWindow instance; minimized windows render separately via WorkspaceTrayProps below. */
 export interface WorkspaceWindowProps {
     /** Title shown in the window's control bar. */
@@ -29,6 +38,13 @@ export interface WorkspaceWindowProps {
      * itself (e.g. minimize-on-backdrop-click) via this callback.
      */
     onOverlayClick?: () => void;
+    /** Translated names for the Minimize, Close and Open full page buttons. */
+    labels?: WorkspaceWindowLabels;
+    /**
+     * Where focus lands when the window closes or minimizes. Without it focus returns to whatever opened the
+     * window, which is gone once it was restored from the tray; point it at a stable element (e.g. the page's main region).
+     */
+    finalFocusRef?: RefObject<HTMLElement>;
     /** Extra controls rendered in the control bar, left of the window buttons. */
     headerActions?: ReactNode;
     /** data-testid for the window container. */
@@ -38,14 +54,34 @@ export interface WorkspaceWindowProps {
 export interface WorkspaceTrayItem {
     id: string;
     title: ReactNode;
+    /** Shows an unsaved-changes dot on the built-in pill; named for screen readers by the tray's `dirtyLabel`. */
+    isDirty?: boolean;
+    /** Secondary text after the title on the built-in pill, e.g. a record type or id. */
+    subtitle?: ReactNode;
 }
-/** Props for the bottom-right cluster of minimized-window pills; renders nothing when items is empty. */
+/** Props for the cluster of minimized-window pills; renders nothing when items is empty. */
 export interface WorkspaceTrayProps {
     /** Minimized items rendered as restore pills along the bottom. */
     items: WorkspaceTrayItem[];
     onRestore?: (id: string) => void;
     onClose?: (id: string) => void;
     testId?: string;
+    /**
+     * Which bottom corner the tray sits in. Default "bottom-end". The tray is portalled above modals and stays
+     * reachable while a modal is open.
+     */
+    placement?: "bottom-end" | "bottom-start";
+    /** Distance from the viewport edges, to clear a sticky bar. Numbers are px, strings any CSS length. Default 1rem each. */
+    offset?: {
+        x?: number | string;
+        y?: number | string;
+    };
+    /** Accessible name for each pill's close button. Default "Close"; pass one that names the item for non-English or per-window labels. */
+    closeLabel?: (item: WorkspaceTrayItem) => string;
+    /** Accessible name of the unsaved dot on a pill with `isDirty`. Default "Unsaved changes". */
+    dirtyLabel?: string;
+    /** Accessible name of the tray region. Default "Minimized windows". */
+    label?: string;
     /**
      * Full override for a single item's pill markup — e.g. to wrap it in an
      * app-specific hover preview, or to show extra state (a dirty dot) the

package/dist/Theme/chakra/Menu.styles.d.ts

@@ -15,6 +15,7 @@ export declare const Menu: {
             borderColor: string;
         };
         item: {
+            color: string;
             minH: string;
             px: string;
             py: string;
@@ -39,6 +40,13 @@ export declare const Menu: {
                 [$itemBg.variable]: string;
                 bg: string;
             };
+            "&[aria-checked=true]": {
+                color: string;
+                fontWeight: number;
+                "& .chakra-menu__icon-wrapper": {
+                    color: string;
+                };
+            };
         };
     }) | undefined;
     sizes?: {

package/dist/Theme/chakra/Menu.styles.js

@@ -4,6 +4,7 @@ exports.Menu = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
 const rowStates_1 = require("../tokens/builders/rowStates");
+const optionRowInk_1 = require("../../Components/Select/optionRowInk");
 const optionRowSizes_1 = require("../tokens/primitives/optionRowSizes");
 const paletteFromTheme_1 = require("./paletteFromTheme");
 const overlay_styles_1 = require("./overlay.styles");
@@ -28,6 +29,7 @@ const baseStyle = definePartsStyle(({ theme }) => {
             ...overlay_styles_1.POPUP_SURFACE,
         },
         item: {
+            color: (0, optionRowInk_1.optionRowInk)(colors, false),
             minH: itemRowSpec.minH,
             px: itemRowSpec.px,
             py: itemRowSpec.py,
@@ -40,6 +42,11 @@ const baseStyle = definePartsStyle(({ theme }) => {
             _hover: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
             _active: { [$itemBg.variable]: activeBg, bg: $itemBg.reference },
             _expanded: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+            "&[aria-checked=true]": {
+                color: (0, optionRowInk_1.optionRowInk)(colors, true),
+                fontWeight: (0, optionRowInk_1.optionRowWeight)(true),
+                "& .chakra-menu__icon-wrapper": { color: colors.accentText },
+            },
         },
     };
 });

package/dist/Theme/chakra/componentStyles.d.ts

@@ -182,6 +182,7 @@ export declare const componentStyles: {
                 borderColor: string;
             };
             item: {
+                color: string;
                 minH: string;
                 px: string;
                 py: string;
@@ -206,6 +207,13 @@ export declare const componentStyles: {
                     [x: string]: string;
                     bg: string;
                 };
+                "&[aria-checked=true]": {
+                    color: string;
+                    fontWeight: number;
+                    "& .chakra-menu__icon-wrapper": {
+                        color: string;
+                    };
+                };
             };
         }) | undefined;
         sizes?: {

package/dist/Theme/chakra/componentStyles.js

@@ -26,7 +26,7 @@ const Card_styles_1 = require("./Card.styles");
 // NOTE: guards untethemed scales (blackAlpha/whiteAlpha) whose rgba() rungs would throw in hexToRgb.
 const isHexColor = (color) => typeof color === "string" && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(color);
 const solidFillStyle = (palette, swatch) => {
-    const rung = (0, filledSurface_1.solidFillRung)(swatch, palette.white);
+    const rung = (0, filledSurface_1.solidFillRung)(swatch, palette.white, palette.backgroundColor.main);
     const bg = swatch[rung];
     return {
         bg,
@@ -161,7 +161,7 @@ const Radio = {
     baseStyle: ({ theme, colorScheme }) => {
         const palette = (0, paletteFromTheme_1.paletteOf)(theme);
         const swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
-        const fill = swatch[(0, filledSurface_1.solidFillRung)(swatch, palette.white)];
+        const fill = swatch[(0, filledSurface_1.solidFillRung)(swatch, palette.white, palette.backgroundColor.main)];
         const dot = (0, filledSurface_1.labelOnFill)(fill, palette.white, palette.black);
         const hoverFill = (0, outlineRung_1.resolveHoverTint)(fill, fill);
         return {

package/dist/Theme/tokens/builders/accentText.d.ts

@@ -12,6 +12,8 @@ declare const DARK_CANVAS_LUMINANCE = 0.2;
 /** True when `canvas` is a dark surface. Lets style configs branch without threading color mode. */
 export declare const isDarkCanvas: (canvas: string) => boolean;
 export declare const accentTextOnCanvas: (scale: ColorScale, canvas: string) => string;
+/** Accent ink for chrome that can land on any plane (canvas, card, overlay): the first rung clearing AA on all. */
+export declare const accentTextOnPlanes: (scale: ColorScale, planes: readonly string[]) => string;
 export declare const onFilled: (fill: string, white: string, black: string) => string;
 export declare const onGradient: (from: string, to: string, white: string, black: string) => string;
 export { AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE };

package/dist/Theme/tokens/builders/accentText.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.onGradient = exports.onFilled = exports.accentTextOnCanvas = exports.isDarkCanvas = exports.DEFAULT_BLACK = exports.DEFAULT_WHITE = exports.DEFAULT_CANVAS = exports.pickAccentText = void 0;
+exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.onGradient = exports.onFilled = exports.accentTextOnPlanes = exports.accentTextOnCanvas = exports.isDarkCanvas = exports.DEFAULT_BLACK = exports.DEFAULT_WHITE = exports.DEFAULT_CANVAS = exports.pickAccentText = void 0;
 const color_1 = require("./color");
 /** WCAG AA for normal-size text. Accent-as-text must clear this against the canvas. */
 const AA_NORMAL_TEXT = 4.5;
@@ -27,6 +27,12 @@ exports.isDarkCanvas = isDarkCanvas;
 // NOTE: held to AA in both modes now — some brands' light [500] no longer passes through untouched.
 const accentTextOnCanvas = (scale, canvas) => (0, exports.pickAccentText)(scale, canvas);
 exports.accentTextOnCanvas = accentTextOnCanvas;
+/** Accent ink for chrome that can land on any plane (canvas, card, overlay): the first rung clearing AA on all. */
+const accentTextOnPlanes = (scale, planes) => {
+    const found = SEARCH_ORDER.find((rung) => planes.every((plane) => (0, color_1.contrastRatio)(scale[rung], plane) >= AA_NORMAL_TEXT));
+    return scale[found !== null && found !== void 0 ? found : SEARCH_ORDER[SEARCH_ORDER.length - 1]];
+};
+exports.accentTextOnPlanes = accentTextOnPlanes;
 // NOTE: white/black must be the mode-stable absolutes, not an adaptive token — always clears AA.
 const onFilled = (fill, white, black) => (0, color_1.contrastRatio)(white, fill) >= AA_NORMAL_TEXT ? white : black;
 exports.onFilled = onFilled;

package/dist/Theme/tokens/builders/filledSurface.d.ts

@@ -12,7 +12,11 @@ export type FilledSurface = {
     activeColor: string;
 };
 export declare const solidFillRung: (scale: ColorScale, white: string, canvas?: string) => keyof ColorScale;
-/** Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. */
+/**
+ * Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. A step may not
+ * flip the label's side of AA (zinc dark: near-white fill, black ink) or fall below `CHROME_BORDER`
+ * against the canvas (a pressed warning solid used to reach 1.00:1 on the card).
+ */
 export declare const darkerFillRung: (scale: ColorScale, canvas: string, white: string, step: 0 | 1) => keyof ColorScale;
 /** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
 export declare const labelOnFill: (fill: string, white: string, black: string) => string;