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

package/dist/esm/Components/SideBar/SecondaryBar.js

@@ -31,7 +31,7 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
                         e.preventDefault();
                         if (!item.disabled)
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white", border: 'none', children: _jsx(PopoverBody, { p: "0.75rem", children: _jsxs(Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && (_jsx(Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: _jsx(PopoverBody, { p: "0.75rem", children: _jsxs(Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && (_jsx(Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;

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

@@ -356,7 +356,9 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
-      ` }), _jsxs(Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.border[500]}`, borderRadius: "base", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.background[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { theme: theme, sections: (_c = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _c !== void 0 ? _c : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_jsx(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: theme.colors.border[500], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: controlsHeight + tableMaxH, theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.border[500]}`, children: [filterSidebar && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Filter", placement: "top", children: _jsxs(Box, { position: "relative", display: "inline-block", children: [_jsx(Icon, { as: Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
+      ` }), _jsxs(Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "base", 
+                // Square children poked past the rounded border, leaving a gap at each corner.
+                overflow: "hidden", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.background[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { theme: theme, sections: (_c = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _c !== void 0 ? _c : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_jsx(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: theme.colors.boxborder[200], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: controlsHeight + tableMaxH, theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [filterSidebar && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Filter", placement: "top", children: _jsxs(Box, { position: "relative", display: "inline-block", children: [_jsx(Icon, { as: Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
                                                                         color: theme.colors.accentText,
                                                                     } }), sidebarActiveCount > 0 && (_jsx(Box, { position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[500], color: theme.colors.onPrimary, borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
                                                                         var _a;
@@ -413,5 +415,5 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: theme.colors.table.hover[200], children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.border[500]}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: theme.colors.table.hover[200], children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

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

@@ -37,11 +37,11 @@ const TableActions = React.memo(({ row }) => {
     // ✅ if row itself is missing, render nothing
     if (!row)
         return null;
-    return (_jsx(Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: _jsxs("div", { ref: ref, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.border[500]}`, borderRadius: 0, gap: 2, onClick: () => {
+    return (_jsx(Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: _jsxs("div", { ref: ref, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, gap: 2, onClick: () => {
                                             var _a;
                                             (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
                                             handleClose();
-                                        }, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.border[500]}`, borderRadius: 0, onClick: () => {
+                                        }, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, onClick: () => {
                                             var _a;
                                             (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
                                             handleClose();

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

@@ -246,7 +246,7 @@ 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 ${theme.colors.boxborder[200]}`, [noBorders, theme.colors.border]);
     // 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];

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

@@ -18,15 +18,15 @@ 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" })) }));
+    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.boxborder[200]}`, 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 }));
+    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.boxborder[200]}`, 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 }));
+    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.boxborder[200]}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
 });
 const SortingIcon = memo(({ label, sortState, isVisible, handleSortClick, }) => {
     const theme = useCustomTheme();
@@ -77,7 +77,7 @@ 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: () => {
+    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.boxborder[200]}`, 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: () => {
                                 let direction = "asc";
                                 if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
                                     direction = "desc";

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/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,9 @@ 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],
+            // An elevated surface is separated by its shadow, not a rule. Chakra's default
+            // gray.200 border read as a hard edge against our surfaces.
+            borderWidth: 0,
         },
         // 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,10 @@ 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],
+            // Elevated surfaces are separated by their shadow, not a rule.
+            borderWidth: 0,
         },
     };
 });

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/placeholderInk.js

@@ -0,0 +1,27 @@
+import { contrastRatio } from "./color.js";
+import { liftToContrast } from "./outlineRung.js";
+import { PLACEHOLDER_TEXT } from "./surfaceRungs.js";
+/**
+ * The hint ink for a field: the rung the brand authored, guaranteed to clear `PLACEHOLDER_TEXT`
+ * on every surface a field can land on.
+ *
+ * It does not walk the rung toward AA in either direction. Lifting it to 4.5 made an empty field
+ * read as one already typed into; softening it back down again undershot on the next surface.
+ * The published library ships this rung untouched and that is the look being matched.
+ */
+export const placeholderInkOn = (palette, surfaces) => {
+    const rung = palette.placeholder[500];
+    const hardest = surfaces.reduce((worst, s) => contrastRatio(rung, s) < contrastRatio(rung, worst) ? s : worst);
+    return liftToContrast(rung, hardest, PLACEHOLDER_TEXT);
+};
+/**
+ * Every surface an ENABLED field renders on. Disabled fields are deliberately absent — 1.4.3
+ * exempts them, and folding their dimmer fill in here would darken the hint on every other field.
+ */
+export const fieldSurfaces = (palette) => [
+    palette.gray[50],
+    palette.background[50],
+    palette.backgroundColor.main,
+];
+/** The hint ink every field in this library reads. Takes no backdrop: see `fieldSurfaces`. */
+export const placeholderInk = (palette) => placeholderInkOn(palette, fieldSurfaces(palette));

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

@@ -1,8 +1,13 @@
 import { liftToContrast, AA_NON_TEXT } from "./outlineRung.js";
 import { AA_NORMAL_TEXT } from "./accentText.js";
-/** Placeholder text measured 4.32:1 on a card for 8 of 9 brands — text, so held to 4.5:1. */
+import { PLACEHOLDER_TEXT } from "./surfaceRungs.js";
+/**
+ * A hint is floored at 3:1, not 4.5:1. Held to body-text contrast it stopped reading as a hint —
+ * an empty field looked like one already typed into — and the published library ships this rung
+ * as the brand authored it. See CHROME-CONSISTENCY.md.
+ */
 export function withPlaceholderRung(palette) {
-    const resolved = liftToContrast(palette.placeholder[500], palette.background[50], AA_NORMAL_TEXT);
+    const resolved = liftToContrast(palette.placeholder[500], palette.background[50], PLACEHOLDER_TEXT);
     if (resolved === palette.placeholder[500])
         return palette;
     return { ...palette, placeholder: { ...palette.placeholder, 500: resolved } };

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

@@ -1,9 +1,12 @@
 import { contrastRatio } from "./color.js";
-import { liftToContrast, softenToContrast, AA_NON_TEXT } from "./outlineRung.js";
+import { liftToContrast, AA_NON_TEXT } from "./outlineRung.js";
 import { AA_NORMAL_TEXT, pickAccentText } from "./accentText.js";
 import { SEMANTIC_TONES } from "./semanticText.js";
-/** Clear of the 4.5 gate, but well under body text so a hint never reads as a value. */
-export const PLACEHOLDER_TEXT = 5;
+/**
+ * A hint is held to the non-text floor, not the body-text one. Deliberate: at 4.5 an empty field
+ * reads as one already typed into. See CHROME-CONSISTENCY.md.
+ */
+export const PLACEHOLDER_TEXT = AA_NON_TEXT;
 export const namedSurfaces = (palette) => [
     ...Object.values(palette.backgroundColor),
     palette.background[50],
@@ -15,7 +18,6 @@ export const hardestSurface = (ink, surfaces) => surfaces.reduce((worst, s) => c
 export function withSurfaceRungs(palette) {
     const surfaces = namedSurfaces(palette);
     const lift = (ink, target) => liftToContrast(ink, hardestSurface(ink, surfaces), target);
-    const soften = (ink, target) => softenToContrast(ink, hardestSurface(ink, surfaces), target);
     const semanticText = SEMANTIC_TONES.reduce((acc, tone) => {
         acc[tone] = lift(palette.semanticText[tone], AA_NORMAL_TEXT);
         return acc;
@@ -27,12 +29,9 @@ export function withSurfaceRungs(palette) {
         semanticText,
         text: { ...palette.text, 500: lift(palette.text[500], AA_NORMAL_TEXT) },
         header: { ...palette.header, 500: lift(palette.header[500], AA_NORMAL_TEXT) },
-        // Placeholder must stay legible without reading as a filled value: the ramp delivered
-        // 6.85:1, level with `textMuted`, so it is settled back down to just clear of AA.
-        placeholder: {
-            ...palette.placeholder,
-            500: soften(lift(palette.placeholder[500], AA_NORMAL_TEXT), PLACEHOLDER_TEXT),
-        },
+        // `placeholder` is deliberately absent: the brand authors that rung and the published
+        // library ships it untouched. Its floor is enforced in `placeholderInk`, against the
+        // surfaces a FIELD renders on — not `table.hover`, which no field sits on.
         boxborder: { ...palette.boxborder, 500: lift(palette.boxborder[500], AA_NON_TEXT) },
     };
 }

package/dist/esm/index.js

@@ -137,4 +137,5 @@ export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText,
 // color has no defined luminance on its own, so measure the composited result, not the tint).
 export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexToHsl, hslToHex, withLightness, mix, relativeLuminance, contrastRatio, } from "./Theme/tokens/builders/color.js";
 export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Theme/tokens/builders/scrollbar.js";
+export { placeholderInk, placeholderInkOn, fieldSurfaces } from "./Theme/tokens/builders/placeholderInk.js";
 export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken, } from "./Theme/tokens/builders/gradientInk.js";

package/dist/index.d.ts

@@ -160,5 +160,7 @@ export type { HeaderProps } from "./Components/Header/HeaderProps";
 export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Theme/tokens/builders/scrollbar";
 export type { ScrollbarVariant, ScrollbarStyle, } from "./Theme/tokens/builders/scrollbar";
 export type { ScrollbarBoxProps } from "./Components/ScrollbarBox/ScrollbarBox";
+export { placeholderInk, placeholderInkOn, fieldSurfaces } from "./Theme/tokens/builders/placeholderInk";
+export type { FieldSurfaces } from "./Theme/tokens/builders/placeholderInk";
 export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken, } from "./Theme/tokens/builders/gradientInk";
 export type { Gradient, ResolvedGradient, } from "./Theme/tokens/builders/gradientInk";

package/dist/index.js

@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserDetails = exports.splitMonthsAndDays = exports.resolvePlanBadge = exports.formatPlanRemaining = exports.formatPlanExpiry = exports.formatPlanElapsed = exports.PlanBadge = exports.PlanPill = exports.UpgradeButton = exports.LimitReachedModal = exports.OrgSwitcher = exports.StageItem = exports.StageProgress = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.WorkspaceTrayPreview = exports.WorkspaceTray = exports.WorkspaceWindow = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexRadialChart = exports.ApexAreaChart = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
 exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.ScrollbarBox = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.SelectV2 = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = void 0;
 exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.withOutlineRung = exports.liftToContrast = exports.AA_NON_TEXT = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.brandThemes = exports.AppearanceSettings = exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.createAccountHandoff = exports.resolveReturnUrl = exports.isAllowedReturnUrl = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = exports.VerifyEmailOtp = exports.useToaster = exports.OverflowToolTip = void 0;
-exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = void 0;
+exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -330,6 +330,10 @@ var scrollbar_1 = require("./Theme/tokens/builders/scrollbar");
 Object.defineProperty(exports, "scrollbarStyles", { enumerable: true, get: function () { return scrollbar_1.scrollbarStyles; } });
 Object.defineProperty(exports, "globalScrollbarStyles", { enumerable: true, get: function () { return scrollbar_1.globalScrollbarStyles; } });
 Object.defineProperty(exports, "SCROLLBAR_WIDTH", { enumerable: true, get: function () { return scrollbar_1.SCROLLBAR_WIDTH; } });
+var placeholderInk_1 = require("./Theme/tokens/builders/placeholderInk");
+Object.defineProperty(exports, "placeholderInk", { enumerable: true, get: function () { return placeholderInk_1.placeholderInk; } });
+Object.defineProperty(exports, "placeholderInkOn", { enumerable: true, get: function () { return placeholderInk_1.placeholderInkOn; } });
+Object.defineProperty(exports, "fieldSurfaces", { enumerable: true, get: function () { return placeholderInk_1.fieldSurfaces; } });
 var gradientInk_1 = require("./Theme/tokens/builders/gradientInk");
 Object.defineProperty(exports, "resolveGradient", { enumerable: true, get: function () { return gradientInk_1.resolveGradient; } });
 Object.defineProperty(exports, "gradientCss", { enumerable: true, get: function () { return gradientInk_1.gradientCss; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.5",
+  "version": "2.4.2-beta.9",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",
@@ -91,7 +91,9 @@
       "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
     },
     "testPathIgnorePatterns": [
-      "<rootDir>/dist/"
+      "/node_modules/",
+      "<rootDir>/dist/",
+      "<rootDir>/.claude/"
     ],
     "testMatch": [
       "**/__tests__/**/*.[jt]s?(x)",