pixelize-design-library 2.4.2-beta.5 → 2.4.2

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

@@ -3,13 +3,14 @@ import { Box, IconButton, Spinner, Td, Tr } from "@chakra-ui/react";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { normalizeTableCellValue, buildTablePalette, pickTableColor } from "../../../Utils/table.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-import { onFilled, isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { onFilled } from "../../../Theme/tokens/builders/accentText.js";
 import { TableBodyLoading } from "./TableLoading.js";
 import TableActions from "./TableActions.js";
-import { getTableRowHoverStyle } from "./tableRowHoverStyle.js";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import CheckBox from "../../Checkbox/Checkbox.js";
 import TableGroupRow from "./TableGroupRow.js";
+import { useTableVariant } from "../variants/TableVariantContext.js";
+import { resolvePillInk } from "../variants/pillInk.js";
 // Density → row height (px) + cell vertical padding. The padding (not just the
 // min-height) is what drives perceived row size, so compact tightens both.
 const DENSITY_CONFIG = {
@@ -25,6 +26,9 @@ const getRowContent = (row) => typeof row.content === "function"
 // the label is centered in whichever of white/black clears AA against that fill —
 // the fill can be a consumer hex we can't know in advance is light or dark.
 const StatusCell = ({ value, onSolid }) => (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: onSolid, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
+// Studio's status cell: a contained chip on the tone's soft rung. Same tone pair
+// the group header already uses, so an override hex behaves identically in both.
+const StatusPill = ({ value, soft, ink, radius, }) => (_jsx(Box, { display: "inline-flex", alignItems: "center", maxW: "100%", px: "0.5rem", py: "0.125rem", borderRadius: radius, bg: soft, color: ink, fontSize: "0.75rem", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
 const EMPTY_HOVER = {};
 const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
     // Measured-height virtualization: report this row's real height (main + any
@@ -63,15 +67,38 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
             onRowClick(row, { label: header.label, id: header.id });
         }
     }, [row, onRowClick]);
+    const variant = useTableVariant();
     const firstDataColIndex = columns.findIndex((c) => !c.isHidden);
     const accentSx = accentColor ? `inset 3px 0 0 ${accentColor}` : undefined;
+    // A selected row earns the leading bar only where a group accent isn't already
+    // claiming that edge — the group's identity is the scarcer signal.
+    const leadSx = variant.row.showSelectedBar && isChecked && !accentColor
+        ? `inset 3px 0 0 ${variant.row.selectedBarColor}`
+        : accentSx;
+    const restsOnIndex = variant.slot.rest === "index";
+    const rowSx = {
+        ...(variant.row.hoverScope === "row"
+            ? { "&:hover > td[data-hoverable='true']": { backgroundColor: variant.row.hoverBg } }
+            : {}),
+        // opacity, not display: a hidden-by-display checkbox leaves the a11y tree and
+        // cannot be tabbed to, so `:focus-within` would never fire to bring it back.
+        ...(restsOnIndex
+            ? {
+                "& .table-slot-box": { opacity: isChecked ? 1 : 0 },
+                "& .table-slot-index": { opacity: isChecked ? 0 : 1 },
+                "&:hover .table-slot-box, &:focus-within .table-slot-box": { opacity: 1 },
+                "&:hover .table-slot-index, &:focus-within .table-slot-index": { opacity: 0 },
+            }
+            : {}),
+    };
     // Pinned/frozen columns get a tinted, opaque background so the frozen pane reads
     // as one piece with its header (and so sticky cells cover scrolling content).
     const frozenCellBg = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.table.hover[100];
     const cellStyles = row.cellStyle;
     const rowStyle = row.rowStyle;
+    const chromeHoverable = rowStyle ? "false" : "true";
     const rowContent = getRowContent(row);
-    return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", children: [isContent && (_jsx(Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: !!(row === null || row === void 0 ? void 0 : row.content) && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? (_jsx(ChevronDown, { fontSize: 16 })) : (_jsx(ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && (_jsx(Td, { w: "6", fontSize: 14, fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })), columns.map((header, headerIndex) => {
+    return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: rowSx, children: [isContent && (_jsx(Td, { w: "6", p: 0, fontSize: 14, 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: !!(row === null || row === void 0 ? void 0 : row.content) && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? (_jsx(ChevronDown, { fontSize: 16 })) : (_jsx(ChevronRight, { fontSize: 16 })), _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: 14, 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: "opacity 0.15s ease-in-out", sx: { fontVariantNumeric: "tabular-nums" }, 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: "opacity 0.15s ease-in-out", children: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), columns.map((header, headerIndex) => {
                         var _a, _b, _c;
                         if (header.isHidden)
                             return null;
@@ -86,13 +113,15 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
                         const statusOnSolid = statusColor
                             ? (_c = statusColor.onSolid) !== null && _c !== void 0 ? _c : onFilled(statusColor.solid, theme.colors.white, theme.colors.black)
                             : undefined;
-                        return (_jsx(Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isStatus && statusColor ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : theme.colors.background[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
+                        const isBleed = variant.cells.statusFill === "bleed" && !!statusColor;
+                        const canHover = !isBleed && !((cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle);
+                        return (_jsx(Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : theme.colors.background[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
                                 ? "none"
-                                : `0.063rem solid ${theme.colors.boxborder[isFrozen || isChecked ? 300 : 200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isStatus && statusColor ? statusOnSolid : theme.colors.text[500], _hover: isStatus && statusColor
+                                : `0.063rem solid ${isFrozen || isChecked
+                                    ? variant.row.frozenRuleColor
+                                    : variant.row.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isBleed ? statusOnSolid : variant.cells.ink, "data-hoverable": canHover ? "true" : "false", _hover: variant.row.hoverScope === "row" || !canHover
                                 ? EMPTY_HOVER
-                                : (cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle
-                                    ? EMPTY_HOVER
-                                    : hoverStyle, children: isStatus && statusColor ? (_jsx(StatusCell, { value: normalizeTableCellValue(row[header.id]), onSolid: statusOnSolid })) : (_jsx(Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: normalizeTableCellValue(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
+                                : hoverStyle, children: isBleed ? (_jsx(StatusCell, { value: normalizeTableCellValue(row[header.id]), onSolid: statusOnSolid })) : isStatus && statusColor ? (_jsx(StatusPill, { value: normalizeTableCellValue(row[header.id]), soft: statusColor.soft, ink: resolvePillInk(statusColor.text, statusColor.soft, theme.colors.background[50]), radius: variant.cells.pillRadius })) : (_jsx(Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: normalizeTableCellValue(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
                     }), isLink && (_jsx(Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : theme.colors.background[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? (_jsx(TableActions, { row: row })) : null }))] }), rowContent && isExpanded && (_jsx(Tr, { ref: expandedRowRef, children: _jsx(Td, { colSpan: columns.length +
                         (isCheckbox ? 1 : 0) +
                         (isContent ? 1 : 0) +
@@ -101,6 +130,7 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
 const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, accentColors, groups, onAddItem, emptyState, }) => {
     var _a, _b, _c;
     const theme = useCustomTheme();
+    const variant = useTableVariant();
     const [expandedRows, setExpandedRows] = useState(new Set());
     const [collapsedGroups, setCollapsedGroups] = useState(new Set());
     const toggleGroup = useCallback((value) => {
@@ -246,17 +276,16 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         const checkboxOffset = isCheckbox ? 50 : 0;
         return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
     }, [columnWidths, isCheckbox]);
-    const borderStyle = useMemo(() => noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, [noBorders, theme.colors.border]);
+    const borderStyle = useMemo(() => noBorders ? "none" : `0.063rem solid ${variant.row.ruleColor}`, [noBorders, variant.row.ruleColor]);
     // Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
     // cells keep their solid color + white text instead of white-on-tint.
-    const selectedBg = theme.colors.primary.opacity[16];
+    const selectedBg = variant.row.selectedBg;
     // Sticky/frozen cells overlay scrolling content, so their selected background
     // must be OPAQUE — paint the (translucent) tint over an opaque base.
     const selectedFrozenBg = `linear-gradient(0deg, ${selectedBg}, ${selectedBg}), ${theme.colors.background[50]}`;
     // Dark mode lifts the hover fill to `table.hover[500]`; `[300]` sits ~1.2:1 from the canvas.
     // No ink flip needed — see `tableRowHoverStyle.ts`.
-    const isDark = isDarkCanvas(theme.colors.backgroundColor.main);
-    const hoverStyle = useMemo(() => getTableRowHoverStyle(theme.colors, isDark), [theme.colors, isDark]);
+    const hoverStyle = useMemo(() => ({ backgroundColor: variant.row.hoverBg }), [variant.row.hoverBg]);
     // Flatten groups → one sequence of header/row items so it can be windowed.
     // Independent of scrollTop, so scrolling reuses it instead of re-flattening.
     const groupItems = useMemo(() => {

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

@@ -5,6 +5,6 @@ import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 /** Monday-style colored, collapsible group header row. */
 export const TableGroupRow = ({ label, value, count, color, collapsed, colSpan, ariaRowIndex, onToggle, onAddItem, }) => {
     const theme = useCustomTheme();
-    return (_jsx(Tr, { "aria-rowindex": ariaRowIndex, children: _jsx(Td, { colSpan: colSpan, p: 0, border: "none", children: _jsxs(Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${theme.colors.border[500]}`, children: [_jsx(IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? _jsx(ChevronRight, { size: 16 }) : _jsx(ChevronDown, { size: 16 }) }), _jsx(Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem", children: label }), _jsx(Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: theme.colors.background[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem", children: count }), onAddItem && (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 500, color: theme.colors.text[500], _hover: { bg: theme.colors.background[50], color: color.text }, onClick: () => onAddItem(value), children: [_jsx(Plus, { size: 14 }), " Add item"] }))] }) }) }));
+    return (_jsx(Tr, { "aria-rowindex": ariaRowIndex, children: _jsx(Td, { colSpan: colSpan, p: 0, border: "none", children: _jsxs(Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [_jsx(IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? _jsx(ChevronRight, { size: 16 }) : _jsx(ChevronDown, { size: 16 }) }), _jsx(Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem", children: label }), _jsx(Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: theme.colors.background[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem", children: count }), onAddItem && (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 500, color: theme.colors.text[500], _hover: { bg: theme.colors.background[50], color: color.text }, onClick: () => onAddItem(value), children: [_jsx(Plus, { size: 14 }), " Add item"] }))] }) }) }));
 };
 export default TableGroupRow;

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

@@ -7,6 +7,7 @@ import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js
 import TableFilters from "../filters/TableFilters.js";
 import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
 import CheckBox from "../../Checkbox/Checkbox.js";
+import { useTableVariant } from "../variants/TableVariantContext.js";
 const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
     const [openFilterId, setOpenFilterId] = useState(null);
     return (_jsxs(Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && _jsx(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && (_jsx(SelectAllCell, { freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), columns.map((header, index) => {
@@ -18,30 +19,33 @@ const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths
 export default memo(TableHeader);
 const SelectAllCell = memo(({ freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
     const theme = useCustomTheme();
-    return (_jsx(Th, { scope: "col", w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: theme.colors.table.hover[200], position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, children: isSelecting ? (_jsx(Spinner, { size: "sm", color: theme.colors.accentText })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }));
+    const variant = useTableVariant();
+    return (_jsx(Th, { 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: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: variant.slot.centered ? "center" : "flex-start", children: isSelecting ? (_jsx(Spinner, { size: "sm", color: theme.colors.accentText })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }) }));
 });
 const ContentSpacerCell = memo(({ noBorders }) => {
-    const theme = useCustomTheme();
-    return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
+    const variant = useTableVariant();
+    return (_jsx(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 }));
 });
 const ViewSpacerCell = memo(({ noBorders, isActionFreeze, }) => {
-    const theme = useCustomTheme();
-    return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
+    const variant = useTableVariant();
+    return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
 });
 const SortingIcon = memo(({ label, sortState, isVisible, handleSortClick, }) => {
     const theme = useCustomTheme();
+    const variant = useTableVariant();
     return (_jsxs(Box, { as: "button", type: "button", "aria-label": `Sort by ${label}`, display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, p: 0, border: "none", bg: "transparent", lineHeight: "1", onClick: handleSortClick, transition: "color 0.2s ease-in-out, opacity 0.2s ease-in-out", 
         // Kept out of view until hover/focus so the header looks exactly as it did,
         // while staying in the DOM and reachable by Tab.
         opacity: isVisible ? 1 : 0, _focus: { opacity: 1 }, _focusVisible: { opacity: 1 }, color: theme.colors.textMuted, _hover: {
             opacity: 1,
-            color: accentTextOnCanvas(theme.colors.secondary, theme.colors.table.hover[200]),
+            color: accentTextOnCanvas(theme.colors.secondary, variant.header.bg),
         }, children: [sortState === "none" && _jsx(ChevronsUpDown, { size: 14 }), sortState === "asc" && _jsx(ChevronUp, { size: 14 }), sortState === "desc" && _jsx(ChevronDown, { size: 14 })] }));
 });
 const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
     var _a;
     const [isHovered, setIsHovered] = useState(false);
     const theme = useCustomTheme();
+    const variant = useTableVariant();
     const isFrozen = header.isFreeze;
     const leftOffset = isFrozen
         ? calculateLeftOffset(columnWidths, index) + (isCheckbox ? 50 : 0)
@@ -77,7 +81,16 @@ const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders,
         document.addEventListener("mouseup", onMouseUp);
     };
     const isSortActive = !!(isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none";
-    return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: theme.colors.table.hover[200], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, borderRight: noBorders ? "none" : `0.063rem solid ${theme.colors.boxborder[200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: 45, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(Box, { display: "flex", color: accentTextOnCanvas(theme.colors.secondary, theme.colors.table.hover[200]), lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [_jsx(Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", children: [header.isSort && (_jsx(SortingIcon, { label: String(header.label), sortState: (_a = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _a !== void 0 ? _a : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
+    // Studio keeps the kebab out of the resting header — nine of them read louder than
+    // the labels. A column that is filtering or sorting keeps its control on show.
+    const showActions = variant.header.actions === "always" ||
+        isHovered ||
+        isSortActive ||
+        openFilterId === header.id ||
+        !!columnsSearch[header.id];
+    return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: variant.header.textTransform, fontSize: variant.header.fontSize, fontWeight: variant.header.fontWeight, letterSpacing: variant.header.letterSpacing, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: variant.header.bg, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, borderRight: noBorders || !variant.header.showColumnRule
+            ? "none"
+            : `0.063rem solid ${variant.header.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: variant.header.height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(Box, { display: "flex", color: variant.header.ink, lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [_jsx(Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", opacity: showActions ? 1 : 0, transition: "opacity 0.2s ease-in-out", _focusWithin: { opacity: 1 }, children: [header.isSort && (_jsx(SortingIcon, { label: String(header.label), sortState: (_a = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _a !== void 0 ? _a : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
                                 let direction = "asc";
                                 if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
                                     direction = "desc";
@@ -86,7 +99,7 @@ const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders,
                                     direction = "none";
                                 }
                                 handleSort(header.id, direction);
-                            } })), sortPriority > 0 && (_jsx(Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: theme.colors.primary.opacity[16], color: accentTextOnCanvas(theme.colors.primary, theme.colors.table.hover[200]), children: sortPriority })), _jsx(TableFilters, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
+                            } })), sortPriority > 0 && (_jsx(Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: theme.colors.primary.opacity[16], color: accentTextOnCanvas(theme.colors.primary, variant.header.bg), children: sortPriority })), _jsx(TableFilters, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
                                 ...prev,
                                 [header.id]: searchVal,
                             })), columnsSearch: columnsSearch[header.id] || "", onClose: () => {

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

@@ -25,6 +25,6 @@ const TableSearch = ({ onSearch }) => {
         setQuery(value);
         handleDebounce(value);
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: colors.border[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: colors.boxborder[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
 };
 export default TableSearch;

package/dist/esm/Components/Table/settings/ManageColumns.js

@@ -82,7 +82,7 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                             ? theme.colors.primary[400]
                             : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
                             bg: theme.colors.gray[50],
-                            borderColor: theme.colors.border[200],
+                            borderColor: theme.colors.boxborder[200],
                         }, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.gray[500] }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
                                     color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
                                 } }), _jsx(Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${item.label} up`, icon: _jsx(ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), _jsx(IconButton, { "aria-label": `Move ${item.label} down`, icon: _jsx(ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));

package/dist/esm/Components/Table/settings/TableSettings.js

@@ -48,7 +48,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
     return (_jsxs(Box, { children: [_jsx(ToolTip, { label: "Table Settings", placement: "top", children: _jsx(IconButton, { "aria-label": "Table settings", icon: _jsx(Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
                         transform: "scale(1.1)",
                         color: theme.colors.accentText
-                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.background[50], overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.border[200], children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
+                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.background[50], overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
                                                             const selected = density === opt.value;
                                                             return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
                                                         }) }) }), _jsx(TabPanel, { px: 0, py: 0, children: _jsx(Box, { sx: {
@@ -69,6 +69,6 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 var _a;
                                                                 const selected = selectedGroup === opt.id;
                                                                 return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
-                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.border[200], pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
+                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
 };
 export default TableSettings;

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

@@ -0,0 +1,13 @@
+import { createContext, useContext, useMemo } from "react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { classicPreset } from "./classic.js";
+const TableVariantContext = createContext(null);
+export const TableVariantProvider = TableVariantContext.Provider;
+/** No provider means the table as it always was — the default is a variant, not a gap. */
+export function useTableVariant() {
+    const provided = useContext(TableVariantContext);
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas(theme.colors.backgroundColor.main);
+    return useMemo(() => provided !== null && provided !== void 0 ? provided : classicPreset(theme.colors, isDark), [provided, theme.colors, isDark]);
+}

package/dist/esm/Components/Table/variants/classic.js

@@ -0,0 +1,43 @@
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { getTableRowHoverStyle } from "../components/tableRowHoverStyle.js";
+/**
+ * The table as it shipped. Pinned by snapshot: every value here is read off the
+ * live component, so adding a variant cannot move it.
+ */
+export const classicPreset = (colors, isDark) => {
+    const headerBg = colors.table.hover[200];
+    return {
+        header: {
+            bg: headerBg,
+            ink: accentTextOnCanvas(colors.secondary, headerBg),
+            fontSize: 13,
+            fontWeight: 600,
+            textTransform: "capitalize",
+            letterSpacing: "normal",
+            height: "45px",
+            ruleColor: colors.boxborder[200],
+            showColumnRule: true,
+            actions: "always",
+        },
+        row: {
+            hoverBg: getTableRowHoverStyle(colors, isDark).backgroundColor,
+            hoverScope: "cell",
+            ruleColor: colors.boxborder[200],
+            frozenRuleColor: colors.boxborder[300],
+            selectedBg: colors.primary.opacity[16],
+            selectedBarColor: colors.primary[500],
+            showSelectedBar: false,
+        },
+        slot: {
+            width: "6",
+            rest: "checkbox",
+            indexInk: colors.textMuted,
+            centered: false,
+        },
+        cells: {
+            ink: colors.text[500],
+            statusFill: "bleed",
+            pillRadius: "0",
+        },
+    };
+};

package/dist/esm/Components/Table/variants/index.js

@@ -0,0 +1,9 @@
+import { classicPreset } from "./classic.js";
+import { studioPreset } from "./studio.js";
+/** Adding a variant is one file and one union member — no component changes. */
+export const TABLE_VARIANTS = {
+    classic: classicPreset,
+    studio: studioPreset,
+};
+export * from "./tokens.js";
+export { classicPreset, studioPreset };

package/dist/esm/Components/Table/variants/pillInk.js

@@ -0,0 +1,18 @@
+import { AA_NORMAL_TEXT } from "../../../Theme/tokens/builders/accentText.js";
+import { compositeOver } from "../../../Theme/tokens/builders/color.js";
+import { liftToContrast } from "../../../Theme/tokens/builders/outlineRung.js";
+const cache = new Map();
+/**
+ * A consumer `statusColors` hex is a FILL, and `pickTableColor` hands it straight back as ink
+ * over a 13%-alpha tint of itself — legible reversed out of a solid cell, ~1.9:1 on a pill.
+ * The palette path is already resolved by `resolveStatusTone`; this rescues the override path.
+ */
+export function resolvePillInk(ink, soft, surface) {
+    const key = `${ink}|${soft}|${surface}`;
+    const hit = cache.get(key);
+    if (hit !== undefined)
+        return hit;
+    const resolved = liftToContrast(ink, compositeOver(soft, surface), AA_NORMAL_TEXT);
+    cache.set(key, resolved);
+    return resolved;
+}

package/dist/esm/Components/Table/variants/studio.js

@@ -0,0 +1,46 @@
+import { CHROME_RULE, MIN_PERCEPTIBLE_STEP, liftToContrast, } from "../../../Theme/tokens/builders/outlineRung.js";
+import { getTableRowHoverStyle } from "../components/tableRowHoverStyle.js";
+/**
+ * Quieter chrome, one rule instead of a grid, and a slot that rests on the row
+ * number. Every colour is lifted against the surface it actually sits on.
+ */
+export const studioPreset = (colors, isDark) => {
+    const surface = colors.background[50];
+    // Studio drops the per-column rule, so the one line left has to be visible on
+    // every brand — `boxborder[200]` measures as low as 1.09:1 on some of them.
+    const rule = liftToContrast(colors.boxborder[200], surface, CHROME_RULE);
+    return {
+        header: {
+            bg: surface,
+            ink: colors.text[500],
+            fontSize: 11,
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: "0.06em",
+            height: "40px",
+            ruleColor: rule,
+            showColumnRule: false,
+            actions: "hover",
+        },
+        row: {
+            hoverBg: getTableRowHoverStyle(colors, isDark).backgroundColor,
+            hoverScope: "row",
+            ruleColor: rule,
+            frozenRuleColor: rule,
+            selectedBg: liftToContrast(colors.primary[50], surface, MIN_PERCEPTIBLE_STEP),
+            selectedBarColor: colors.primary[500],
+            showSelectedBar: true,
+        },
+        slot: {
+            width: "3.5rem",
+            rest: "index",
+            indexInk: colors.textMuted,
+            centered: true,
+        },
+        cells: {
+            ink: colors.text[500],
+            statusFill: "pill",
+            pillRadius: "0.375rem",
+        },
+    };
+};

package/dist/esm/Components/Table/variants/tokens.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Trail/TrailWorks.js

@@ -3,7 +3,7 @@ import { Box, Thead, Table, Tr, Th, Tbody, Td, Checkbox, } from "@chakra-ui/reac
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const TrailWorks = () => {
     const { colors } = useCustomTheme();
-    const cellBorder = colors.border[500];
+    const cellBorder = colors.boxborder[200];
     const data = [
         {
             contact: "John Doe",

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

@@ -28,9 +28,11 @@ const baseStyle = definePartsStyle(({ theme }) => {
             [$bg.variable]: colors.backgroundColor.light,
             bg: $bg.reference,
             color: colors.text[900],
-            // Chakra's default is its own gray.200, which reads as a hard rule against our
-            // surfaces. The menu is already separated by its shadow.
-            borderColor: colors.border[200],
+            // A rule at CHROME_RULE weight, not Chakra's gray.200: that default read as a hard edge,
+            // which is why this shipped borderless. At 1.31:1 the edge defines the surface instead.
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderColor: colors.boxborder[200],
         },
         // Own CSS var (`--menu-item-bg`), NOT the list's `--menu-bg` — Chakra's stock item
         // baseStyle rewrites `--menu-bg` itself on hover/focus, so reusing that same var name

package/dist/esm/Theme/chakra/Popover.styles.js

@@ -18,8 +18,12 @@ const baseStyle = definePartsStyle(({ theme }) => {
         content: {
             [$popperBg.variable]: colors.backgroundColor.light,
             bg: $popperBg.reference,
-            [$arrowShadowColor.variable]: colors.border[200],
+            [$arrowShadowColor.variable]: colors.boxborder[200],
             color: colors.text[900],
+            // Matches Menu: a CHROME_RULE-weight edge, not Chakra's gray.200 hard edge.
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderColor: colors.boxborder[200],
         },
     };
 });

package/dist/esm/Theme/provider/ThemeSwitcher.js

@@ -23,7 +23,10 @@ const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
  * regardless of which brand/mode is currently active.
  */
 const brandSwatchColor = (brand) => brandThemes[brand].light.colors.primary[500];
-const BrandSwatch = ({ brand }) => (_jsx(Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: "whiteAlpha.300", flexShrink: 0 }));
+const BrandSwatch = ({ brand }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0 }));
+};
 /**
  * Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
  * are read straight from the active theme — no `useColorModeValue` pairing needed here.
@@ -36,7 +39,7 @@ const useSwitcherColors = () => {
         activeColor: colors.primary[500],
         mutedColor: colors.text[600],
         hoverBg: colors.gray[100],
-        borderColor: colors.border[200],
+        borderColor: colors.boxborder[200],
         // NOTE: menuBg lives in Menu.styles.ts — re-pushing it via `sx` flickers on every render.
         menuColor: colors.text[900],
     };

package/dist/esm/Theme/tokens/builders/chartColorsFromTheme.js

@@ -25,7 +25,7 @@ export function chartInk(colors) {
         surface,
         text: colors.text[900],
         muted: colors.text[500],
-        grid: colors.border[500],
+        grid: colors.boxborder[200],
         axis: colors.text[500],
         tooltipBg: colors.backgroundColor.secondary,
     };

package/dist/esm/Theme/tokens/builders/index.js

@@ -5,3 +5,4 @@ export * from "./chartColorsFromTheme.js";
 export * from "./color.js";
 export * from "./scrollbar.js";
 export * from "./gradientInk.js";
+export * from "./placeholderInk.js";

package/dist/esm/Theme/tokens/builders/outlineRung.js

@@ -7,6 +7,29 @@ import { contrastRatio, hexToHsl, relativeLuminance, withLightness } from "./col
 export const MIN_PERCEPTIBLE_STEP = 1.15;
 /** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
 export const AA_NON_TEXT = 3;
+/**
+ * Resting chrome — card, popover and field outlines — settles here, not at `AA_NON_TEXT`.
+ * At 3:1 a container border is text-weight and the UI reads as a wireframe; every mainstream
+ * system draws this line far lighter (Tailwind gray-200 1.24, Chakra gray.200 1.30, Material
+ * outline-variant 1.61). 1.4.11 asks that a control be identifiable, not that its resting
+ * border carry the whole job: the fill, the label and the focus ring do that, and the focus
+ * ring is still held to `AA_NON_TEXT`.
+ */
+export const CHROME_BORDER = 1.5;
+// The resting rule between two surfaces — a card edge, a divider, a menu outline. Lighter than
+// CHROME_BORDER, which outlines a control the user acts on.
+export const CHROME_RULE = 1.31;
+/**
+ * A rule is decorative, so it has a ceiling and no floor: soften it until the surface it reads
+ * hardest against sits at `target`, and leave a already-fainter rung alone. Never `settleAcross`
+ * here — that clears a floor on EVERY surface, so one tinted surface drags the rule darker.
+ */
+export function ruleInk(hex, surfaces, target) {
+    const loudest = surfaces.reduce((worst, s) => contrastRatio(hex, s) > contrastRatio(hex, worst) ? s : worst);
+    return contrastRatio(hex, loudest) > target
+        ? softenToContrast(hex, loudest, target)
+        : hex;
+}
 /**
  * Walks a hex toward `target` contrast against `backdrop`, keeping hue and saturation.
  * Direction is DERIVED from the backdrop, never passed: a mode argument here was redundant
@@ -50,9 +73,10 @@ export function softenToContrast(hex, backdrop, target) {
 }
 /**
  * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
- * pickers, the editor's inputs). It was authored as a decorative value — measured 1.30-2.56:1
- * across brands, so those controls rendered effectively borderless in BOTH modes. Resolved here
- * rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
+ * pickers, the editor's inputs). Settled onto `CHROME_BORDER` — lifted when a brand authored it
+ * invisibly pale, softened when it overshoots. It was previously lifted to `AA_NON_TEXT`, which
+ * shipped 3.85-4.95:1 outlines: a text-weight box around every card and popover.
+ * Resolved here rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
  *
  * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
  * and outside 1.4.11.
@@ -65,7 +89,9 @@ export function withOutlineRung(palette) {
         contrastRatio(current, palette.background[50])
         ? palette.backgroundColor.main
         : palette.background[50];
-    const resolved = liftToContrast(current, backdrop);
+    const resolved = contrastRatio(current, backdrop) > CHROME_BORDER
+        ? softenToContrast(current, backdrop, CHROME_BORDER)
+        : liftToContrast(current, backdrop, CHROME_BORDER);
     if (resolved === current)
         return palette;
     return { ...palette, boxborder: { ...palette.boxborder, 500: resolved } };
@@ -81,3 +107,25 @@ export function withOutlineRung(palette) {
 export function resolveHoverTint(seed, restSurface) {
     return liftToContrast(seed, restSurface, MIN_PERCEPTIBLE_STEP);
 }
+/**
+ * Settles ink into `target` against EVERY surface at once. Softening one step can change which
+ * surface is hardest, so resolving against a single pre-computed "hardest" one lands under the
+ * floor on another — that is how radiant and rosewood ended up with an invisible outline on
+ * their muted surface.
+ */
+export function settleAcross(hex, surfaces, target) {
+    const clearsAll = (c) => surfaces.every((s) => contrastRatio(c, s) >= target);
+    if (!clearsAll(hex)) {
+        return surfaces.reduce((ink, s) => liftToContrast(ink, s, target), hex);
+    }
+    const { s: sat, l: start } = hexToHsl(hex);
+    const toward = relativeLuminance(surfaces[0]) < 0.5 ? -1 : 1;
+    let settled = hex;
+    for (let l = start; l > 0 && l < 100; l += toward) {
+        const next = withLightness(hex, l, sat);
+        if (!clearsAll(next))
+            break;
+        settled = next;
+    }
+    return settled;
+}