pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.40

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

@@ -4,6 +4,7 @@ import { Box, Input, Button, Menu, MenuButton, MenuList, MenuItem, useOutsideCli
 import { ChevronDown } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+/** Inline editable cell driven entirely by parent-owned row state — no internal draft state of its own. */
 export const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChange, }) => {
     const { colors } = useCustomTheme();
     const cellRef = useRef(null);
@@ -20,7 +21,7 @@ export const EditableCell = ({ row, column, isEditable, handleCellClick, handleC
             return (_jsx(Box, { width: "50%", ref: cellRef, children: _jsx(Input, { type: "date", value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
         }
         else if (column.label === "priority") {
-            return (_jsx(Box, { width: "100%", ref: cellRef, children: _jsxs(Menu, { isOpen: true, children: [_jsx(MenuButton, { as: Button, rightIcon: _jsx(ChevronDown, {}), bg: colors.teal[50], color: accentTextOnCanvas(colors.teal, colors.teal[50]), _hover: { bg: colors.teal[100] }, _active: { bg: colors.teal[200] }, children: value }), _jsxs(MenuList, { children: [_jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), _hover: { bg: colors.teal[100] }, children: "Low" }), _jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), _hover: { bg: colors.teal[100] }, children: "Medium" }), _jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), _hover: { bg: colors.teal[100] }, children: "High" })] })] }) }));
+            return (_jsx(Box, { width: "100%", ref: cellRef, children: _jsxs(Menu, { isOpen: true, children: [_jsx(MenuButton, { as: Button, rightIcon: _jsx(ChevronDown, {}), bg: colors.teal[50], color: accentTextOnCanvas(colors.teal, colors.teal[50]), _hover: { bg: colors.teal[100] }, _active: { bg: colors.teal[200] }, children: value }), _jsxs(MenuList, { children: [_jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), children: "Low" }), _jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), children: "Medium" }), _jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), children: "High" })] })] }) }));
         }
         else {
             return (_jsx(Box, { width: "100%", ref: cellRef, children: _jsx(Input, { value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox } from "@chakra-ui/react";
+/** Purely presentational — isAllSelected/isIndeterminate must be computed and owned entirely by the parent. */
 export const SelectAllCheckbox = ({ isAllSelected, isIndeterminate, handleSelectAll, }) => {
     return (_jsx(Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: handleSelectAll }));
 };

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Thead, Table, Tr, Th, Tbody, Td, Checkbox, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Hardcoded 2-row demo table with no props at all — not a reusable grid; use Table for a real editable/selectable list. */
 const TrailWorks = () => {
     const { colors } = useCustomTheme();
-    const cellBorder = colors.border[500];
+    const cellBorder = colors.boxborder[200];
     const data = [
         {
             contact: "John Doe",

package/dist/esm/Components/UserDetails/DeactivateConfirmModal.js

@@ -9,6 +9,6 @@ const DeactivateConfirmModal = ({ isOpen, onClose, userName, isLoading, onConfir
     const { colors } = useCustomTheme();
     const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
     const errorTone = resolveStatusTone(colors.semantic.error, mode);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), _jsx(Box, { bg: colors.gray[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: _jsxs(Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), _jsx(Button, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 16 }) })] })] }) })] })] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), _jsx(Box, { bg: colors.background[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: _jsxs(Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), _jsx(Button, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 16 }) })] })] }) })] })] }));
 };
 export default DeactivateConfirmModal;

package/dist/esm/Components/UserDetails/UserDetails.js

@@ -5,6 +5,7 @@ import { ChevronLeft, RefreshCw, Send, Shield, Trash2, UserPlus, Users, UserRoun
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import EmptyState from "../EmptyState/EmptyState.js";
 import AddUserModal from "./AddUserModal.js";
 import ChangeRoleModal from "./ChangeRoleModal.js";
@@ -46,6 +47,7 @@ const DEFAULT_LABELS = {
     deactivateConfirmQuestion: "Are you sure you want to deactivate this user?",
     deactivateConfirmDescription: "will no longer have access to the organization. You can reactivate them later if needed.",
 };
+/** Two-pane user directory + detail panel with bundled Add/Change-Role/Deactivate modals. */
 const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], canManageUsers = false, isUsersLoading = false, isInviteLoading = false, isDeactivateLoading = false, isAddUserLoading = false, isChangeRoleLoading = false, onSelectUser, onRefresh, onBack, onAddUserSubmit, onChangeRoleSubmit, onReinvite, onDeactivate, onAddRoleClick, addUserUpgradeNotice, labels: labelOverrides, minHeight = "90vh", }) => {
     const { colors } = useCustomTheme();
     const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
@@ -55,6 +57,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     const [actionUserId, setActionUserId] = useState(null);
     const border = colors.boxborder[200];
     const surface = colors.background[50];
+    const rowBackgrounds = useMemo(() => listRowBackgrounds(colors), [colors]);
     const muted = colors.textMuted;
     const heading = colors.text[900];
     const avatarBg = colors.primary[100];
@@ -71,10 +74,10 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     const renderStatusBadge = (isActive) => (_jsx(Badge, { variant: "subtle", colorScheme: isActive ? successScheme : dangerScheme, borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, textTransform: "none", children: isActive ? labels.active : labels.inactive }));
     return (_jsxs(Flex, { backgroundColor: colors.backgroundColor.main, minHeight: minHeight, p: { base: 3, md: 4 }, gap: 3, flexDirection: { base: "column", lg: "row" }, children: [_jsxs(Box, { width: { base: "100%", lg: "300px" }, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, position: "relative", order: { base: 2, lg: 1 }, overflow: "hidden", display: "flex", flexDirection: "column", children: [_jsxs(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", justifyContent: "space-between", children: [_jsxs(HStack, { spacing: 2, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ChevronLeft, { size: 18 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.teamMembers }), _jsx(Badge, { colorScheme: "gray", borderRadius: "full", fontSize: "0.65rem", px: 2, children: users.length })] }), onRefresh && (_jsx(IconButton, { "aria-label": labels.refreshList, icon: _jsx(RefreshCw, { size: 15 }), variant: "ghost", size: "xs", color: muted, onClick: onRefresh, isLoading: isUsersLoading }))] }), _jsx(Box, { flex: 1, overflowY: "auto", maxHeight: { base: "380px", lg: `calc(${minHeight} - 80px)` }, children: isUsersLoading ? (_jsx(VStack, { spacing: 2, p: 3, children: Array.from({ length: 6 }).map((_, idx) => (_jsxs(Flex, { alignItems: "center", gap: 3, p: 2, w: "100%", children: [_jsx(SkeletonCircle, { size: "9" }), _jsxs(Box, { flex: 1, children: [_jsx(Skeleton, { height: "12px", mb: 2, width: "80%" }), _jsx(Skeleton, { height: "9px", width: "60%" })] })] }, idx))) })) : users.length === 0 ? (_jsx(EmptyState, { icon: Users, title: labels.noUsers, size: "sm", minH: "220px" })) : (_jsx(VStack, { spacing: 1, p: 2, align: "stretch", children: users.map((user) => {
                                 const isSelected = selectedUserId != null && selectedUserId === user.id;
-                                return (_jsxs(Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? colors.primary[50] : "transparent", _hover: {
+                                return (_jsxs(Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? rowBackgrounds.selected : "transparent", _hover: {
                                         background: isSelected
-                                            ? colors.primary[50]
-                                            : resolveHoverTint(colors.gray[50], surface),
+                                            ? rowBackgrounds.selectedActive
+                                            : rowBackgrounds.active,
                                     }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), children: [isSelected && (_jsx(Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), _jsx(Avatar, { size: "sm", name: `${user.firstName} ${user.lastName}`, src: user.profile, bg: avatarBg, color: avatarColor }), _jsxs(Box, { flex: 1, overflow: "hidden", children: [_jsxs(Text, { fontSize: "sm", fontWeight: 600, noOfLines: 1, color: heading, children: [user.firstName, " ", user.lastName] }), _jsx(Text, { fontSize: "xs", color: muted, noOfLines: 1, children: user.email })] }), renderStatusBadge(user.isActive)] }, user.id));
                             }) })) })] }), _jsxs(Box, { flex: 1, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, display: "flex", flexDirection: "column", order: { base: 1, lg: 2 }, overflow: "hidden", children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border, children: [_jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: selectedUser ? labels.userDetails : labels.selectTeamMember }), canManageUsers && (_jsx(Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: _jsx(UserPlus, { size: 15 }), onClick: onAddUserOpen, children: labels.addUser }))] }), _jsx(Box, { flex: 1, overflowY: "auto", children: isUsersLoading ? (_jsxs(VStack, { spacing: 4, p: 4, align: "stretch", children: [_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(SkeletonCircle, { size: "16" }), _jsxs(Box, { flex: 1, children: [_jsx(Skeleton, { height: "18px", width: "50%", mb: 2 }), _jsx(Skeleton, { height: "12px", width: "35%" })] })] }), Array.from({ length: 4 }).map((_, idx) => (_jsxs(Box, { w: "100%", children: [_jsx(Skeleton, { height: "12px", width: "30%", mb: 2 }), _jsx(Skeleton, { height: "10px", width: "80%" })] }, idx)))] })) : selectedUser ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { direction: { base: "column", md: "row" }, alignItems: { base: "flex-start", md: "center" }, justifyContent: "space-between", gap: 4, p: 4, borderBottom: "1px solid", borderColor: border, children: [_jsxs(Flex, { alignItems: "center", gap: 4, children: [_jsxs(Box, { position: "relative", children: [_jsx(Avatar, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto, bg: avatarBg, color: avatarColor }), selectedUser.isCurrent && (_jsx(Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "0.6rem", borderRadius: "full", px: 2, py: 0.5, boxShadow: "sm", textTransform: "none", children: labels.you }))] }), _jsxs(Box, { children: [_jsx(Heading, { size: "md", mb: 1, color: heading, children: selectedUser.name }), _jsx(Text, { fontSize: "sm", color: muted, mb: 2, children: selectedUser.role }), _jsxs(HStack, { spacing: 2, children: [renderStatusBadge(selectedUser.isActive), selectedUser.isPending && (_jsx(Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, colorScheme: "orange", textTransform: "none", children: labels.pendingInvitation }))] })] })] }), canManageUsers &&
                                             !selectedUser.isSuperAdmin && (_jsxs(HStack, { spacing: 2, flexWrap: "wrap", children: [!selectedUser.isCurrent && !selectedUser.isActive && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "blue", fontSize: "xs", leftIcon: _jsx(Send, { size: 13 }), isLoading: isInviteLoading, onClick: () => selectedUser.userId != null &&

package/dist/esm/Hooks/exclusiveOverlay.js

@@ -0,0 +1,16 @@
+let active = null;
+export const exclusiveOpen = (id, close) => {
+    if (active && active.id !== id) {
+        active.close();
+    }
+    active = { id, close };
+};
+export const exclusiveClose = (id) => {
+    if ((active === null || active === void 0 ? void 0 : active.id) === id) {
+        active = null;
+    }
+};
+/** Test-only reset — not exported from the package root. */
+export const resetExclusiveOverlay = () => {
+    active = null;
+};

package/dist/esm/Hooks/useExclusiveOverlay.js

@@ -0,0 +1,20 @@
+import { useCallback, useEffect, useId, useRef } from "react";
+import { exclusiveClose, exclusiveOpen } from "./exclusiveOverlay.js";
+/**
+ * Register this overlay with the global dismiss coordinator. Call `requestOpen()`
+ * immediately before opening; `onClose` is invoked when another overlay opens.
+ */
+export const useExclusiveOverlay = (isOpen, onClose) => {
+    const id = useId();
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    const requestOpen = useCallback(() => {
+        exclusiveOpen(id, () => onCloseRef.current());
+    }, [id]);
+    useEffect(() => {
+        if (!isOpen) {
+            exclusiveClose(id);
+        }
+    }, [isOpen, id]);
+    return requestOpen;
+};

package/dist/esm/Theme/assertPalette.js

@@ -2,8 +2,8 @@ const REQUIRED_GROUPS = [
     "gradient", "primary", "secondary", "tertiary", "transparent", "black", "white",
     "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan",
     "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder",
-    "boxShadow", "sidebar", "boxborder", "border", "table", "disabled", "accentText",
-    "textMuted", "semanticText", "onPrimary", "onSemantic",
+    "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled",
+    "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic",
 ];
 export const allPaletteTokensListed = true;
 const NESTED = [
@@ -14,6 +14,7 @@ const NESTED = [
         ]],
     ["semanticText", ["success", "error", "warning", "info"]],
     ["onSemantic", ["success", "error", "warning", "info"]],
+    ["focusRing", ["ring", "halo"]],
     ["backgroundColor", ["main", "base"]],
     ["boxShadow", ["primary", "default"]],
 ];

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

@@ -1,5 +1,6 @@
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { menuAnatomy } from "@chakra-ui/anatomy";
+import { listRowBackgrounds } from "../tokens/builders/rowStates.js";
 import { paletteOf } from "./paletteFromTheme.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(menuAnatomy.keys);
 const $bg = cssVar("menu-bg");
@@ -21,16 +22,19 @@ const $bg = cssVar("menu-bg");
 const $itemBg = cssVar("menu-item-bg");
 const baseStyle = definePartsStyle(({ theme }) => {
     const colors = paletteOf(theme);
-    const hoverBg = colors.primary.opacity[8];
-    const activeBg = colors.primary.opacity[16];
+    const rowBgs = listRowBackgrounds(colors);
+    const hoverBg = rowBgs.active;
+    const activeBg = rowBgs.selectedActive;
     return {
         list: {
             [$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/chakra/componentStyles.js

@@ -9,6 +9,7 @@ import { Tag } from "../../Components/Tag/Tag.styles.js";
 import { Textarea } from "../../Components/InputTextArea/InputTextArea.style.js";
 import { NumberInput } from "../../Components/NumberInput/NumberInput.styles.js";
 import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../tokens/builders/accentText.js";
+import { labelOnFill, solidFillRung } from "../tokens/builders/filledSurface.js";
 import { contrastRatio } from "../tokens/builders/color.js";
 import { resolveHoverTint } from "../tokens/builders/outlineRung.js";
 import { Drawer } from "./Drawer.styles.js";
@@ -24,6 +25,14 @@ import { Avatar } from "./Avatar.styles.js";
 // math (hexToRgb) throws on those on purpose (see color.ts). Guard so those scales fall back to
 // Chakra's own original fixed rung instead of computing contrast on a color it can't parse.
 const isHexColor = (color) => typeof color === "string" && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(color);
+const solidFillStyle = (palette, swatch) => {
+    const rung = solidFillRung(swatch, palette.white);
+    const bg = swatch[rung];
+    return {
+        bg,
+        color: isHexColor(bg) ? labelOnFill(bg, palette.white, palette.black) : swatch[800],
+    };
+};
 // Badge isn't its own component family (no Components/Badge/), so its style config lives here —
 // Chakra's stock `solid` variant hardcodes a white label on a variable fill, same AA gap Tag had.
 const Badge = {
@@ -31,11 +40,7 @@ const Badge = {
         solid: ({ theme, colorScheme = "gray" }) => {
             const palette = paletteOf(theme);
             const swatch = scaleFor(palette, colorScheme);
-            const bg = swatch[500];
-            return {
-                bg,
-                color: isHexColor(bg) ? onFilled(bg, palette.white, palette.black) : swatch[800],
-            };
+            return solidFillStyle(palette, swatch);
         },
         // Chakra's stock `subtle` picks its bg/color pair via `mode()`, keyed to Chakra's own
         // colorMode — which this app never toggles (dark mode swaps the palette object instead), so
@@ -87,13 +92,14 @@ const Alert = defineAlertStyles({
     variants: {
         solid: defineAlertParts(({ theme, colorScheme = "gray" }) => {
             const palette = paletteOf(theme);
-            const bg = scaleFor(palette, colorScheme)[500];
+            const swatch = scaleFor(palette, colorScheme);
+            const { bg, color } = solidFillStyle(palette, swatch);
             if (!isHexColor(bg))
                 return { container: {} };
             return {
                 container: {
                     [$alertBg.variable]: bg,
-                    [$alertFg.variable]: onFilled(bg, palette.white, palette.black),
+                    [$alertFg.variable]: color,
                 },
             };
         }),
@@ -151,8 +157,9 @@ const Skeleton = {
 const Radio = {
     baseStyle: ({ theme, colorScheme }) => {
         const palette = paletteOf(theme);
-        const fill = scaleFor(palette, colorScheme)[500];
-        const dot = onFilled(fill, palette.white, palette.black);
+        const swatch = scaleFor(palette, colorScheme);
+        const fill = swatch[solidFillRung(swatch, palette.white)];
+        const dot = labelOnFill(fill, palette.white, palette.black);
         // A browser probe found the checked radio's hover repeating its own resting `fill` —
         // Chakra's stock checked._hover (inherited from checkbox) lands on the SAME `bg`/`borderColor`
         // keys we do, so extendTheme's merge is a scalar overwrite here, not a coexisting selector;

package/dist/esm/Theme/chakra/createBrandTheme.js

@@ -2,8 +2,9 @@ import { extendTheme } from "@chakra-ui/react";
 import common from "./common.web.js";
 import fonts from "./fonts.web.js";
 import { componentStyles } from "./componentStyles.js";
-import { onFilled } from "../tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../tokens/builders/filledSurface.js";
 import { globalScrollbarStyles } from "../tokens/builders/scrollbar.js";
+import { focusRingShadow } from "./focusRing.styles.js";
 /**
  * Builds a Chakra theme from a pure brand palette.
  *
@@ -21,6 +22,12 @@ export const createBrandTheme = (palette, options = {}) => {
         colors: palette,
         ...fonts,
         ...common,
+        // `shadows.outline` is what Chakra's stock `_focusVisible` reaches for on EVERY component it
+        // themes. The primitive ships one hardcoded blue (`rgba(66,153,225,.6)`), which measured
+        // 1.83:1 on the lavender canvas and 1.38:1 on a primary button — below 1.4.11's 3:1 on all
+        // nine brands, in both modes. A primitive cannot know the palette; this is the first place
+        // that does, so the palette-derived ring is bound here and every stock focus state inherits it.
+        shadows: { ...common.shadows, outline: focusRingShadow(palette) },
     };
     return extendTheme({
         ...brand,
@@ -75,14 +82,20 @@ export const createBrandTheme = (palette, options = {}) => {
                         // selecting text anywhere (e.g. a table cell) shows a stray white/lavender patch on
                         // the dark canvas. Brand it instead, with WCAG-safe ink via the same `onFilled` math
                         // used for buttons/badges.
-                        "::selection": {
-                            background: palette.primary[500],
-                            color: onFilled(palette.primary[500], palette.white, palette.black),
-                        },
-                        "::-moz-selection": {
-                            background: palette.primary[500],
-                            color: onFilled(palette.primary[500], palette.white, palette.black),
-                        },
+                        "::selection": (() => {
+                            const solid = resolveFilledSurface(palette.primary, palette);
+                            return {
+                                background: solid.fill,
+                                color: solid.color,
+                            };
+                        })(),
+                        "::-moz-selection": (() => {
+                            const solid = resolveFilledSurface(palette.primary, palette);
+                            return {
+                                background: solid.fill,
+                                color: solid.color,
+                            };
+                        })(),
                         // `color-scheme: dark` gives WebKit/Blink a dark scrollbar by default, but it's the
                         // OS's generic dark gray, not brand-aware.
                         ...globalScrollbarStyles(palette),

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

@@ -0,0 +1,40 @@
+/**
+ * WEB binding for the `focusRing` token pair. The colours are derived in
+ * `tokens/builders/focusRing.ts` (pure, shared with the mobile library); the CSS shape —
+ * box-shadow bands, the forced-colors outline — is web-only and lives here.
+ */
+/** Inner band, in the surface tone: separates the ring from the control's own fill. */
+export const FOCUS_HALO_WIDTH = 2;
+/** Outer edge of the brand band. The band itself is the 2px between halo and ring. */
+export const FOCUS_RING_WIDTH = 4;
+/**
+ * The two-tone ring as a single `box-shadow`. Drawn OUTSIDE the border box, so it costs no
+ * layout and never resizes the control — the reason this is a shadow and not an outline.
+ */
+export const focusRingShadow = (colors) => `0 0 0 ${FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
+    `0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
+/**
+ * `:hover`, `:active` and `:focus-visible` all score the same specificity, so which one paints
+ * comes down to source order — and in the merged style object Chakra's own Button baseStyle
+ * registers `_focusVisible` BEFORE `_hover`. A focused button that is also hovered would then
+ * drop the ring for `_hover`'s `boxShadow: "sm"`. Stacking the pseudo-classes raises the
+ * specificity above both, so the ring survives whatever else the state repaints.
+ */
+export const FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";
+/**
+ * `:focus-visible`, never `:focus` — a mouse click must not draw a ring.
+ *
+ * The transparent outline is not decoration: in Windows High Contrast / `forced-colors` mode
+ * box-shadows are dropped entirely, and a transparent outline is the one thing the OS repaints
+ * in its own focus colour. Without it, forced-colors users get no indicator at all.
+ */
+export const focusVisibleRing = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: focusRingShadow(colors),
+});
+/** Both selectors a control needs to keep the ring on top of its own hover/active styling. */
+export const focusVisibleStyles = (colors) => {
+    const ring = focusVisibleRing(colors);
+    return { _focusVisible: ring, [FOCUS_VISIBLE_OVER_STATE]: ring };
+};

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/brands/index.js

@@ -22,6 +22,7 @@ import { withSidebarTokens } from "../builders/sidebarAccent.js";
 import { buildMutedText } from "../builders/mutedText.js";
 import { buildSemanticText, buildOnSemantic } from "../builders/semanticText.js";
 import { withPlaceholderRung, withTableHoverRung } from "../builders/resolvedRungs.js";
+import { buildFocusRing, withFocusRing } from "../builders/focusRing.js";
 import { withSurfaceRungs } from "../builders/surfaceRungs.js";
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 export const finalizeLightPalette = (source) => ({
@@ -32,10 +33,14 @@ export const finalizeLightPalette = (source) => ({
     semanticText: buildSemanticText(source.semantic, source.backgroundColor.main),
     onPrimary: onFilled(source.primary[500], source.white, source.black),
     onSemantic: buildOnSemantic(source.semantic, source.white, source.black),
+    focusRing: buildFocusRing(source),
 });
 export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefront, zinc };
 export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldDark, rosewoodDark, storefrontDark, zincDark, };
-const resolveRungs = (palette) => withSurfaceRungs(withTableHoverRung(withPlaceholderRung(withOutlineRung(palette))));
+// `withFocusRing` is outermost: it is the only step that reads `primary` and the surfaces
+// TOGETHER, so it must see both after every earlier step — and after a brand file's own
+// post-derivation overrides (zinc dark replaces `primary` and `background` wholesale).
+const resolveRungs = (palette) => withFocusRing(withSurfaceRungs(withTableHoverRung(withPlaceholderRung(withOutlineRung(palette)))));
 const lightBrand = (source) => resolveRungs(finalizeLightPalette(source));
 /** Light palette per brand. `lavender` is the base the other six extend. */
 export const lightPalettes = {

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

@@ -4,6 +4,7 @@ import { pickAccentText, onFilled } from "./accentText.js";
 import { withSidebarTokens } from "./sidebarAccent.js";
 import { buildMutedText } from "./mutedText.js";
 import { buildSemanticText, buildOnSemantic } from "./semanticText.js";
+import { buildFocusRing } from "./focusRing.js";
 /**
  * Derives a brand's dark palette from its light palette.
  *
@@ -238,6 +239,7 @@ export function buildDarkPalette(light) {
     ]));
     const white = light.white;
     const primary = liftBrand(light.primary, white);
+    const background = fromTargets(hueSource, SURFACE_TARGETS, SURFACE_SAT);
     const semantic = {
         success: liftAccent(light.semantic.success, white),
         error: liftAccent(light.semantic.error, white),
@@ -268,7 +270,7 @@ export function buildDarkPalette(light) {
         purple: reverseScale(light.purple),
         pink: reverseScale(light.pink),
         backgroundColor: namedSurfaces,
-        background: fromTargets(hueSource, SURFACE_TARGETS, SURFACE_SAT),
+        background,
         text: fromTargets(hueSource, TEXT_TARGETS, TEXT_SAT),
         header: fromTargets(hueSource, TEXT_TARGETS, TEXT_SAT + 2),
         placeholder: fromTargets(hueSource, PLACEHOLDER_TARGETS, PLACEHOLDER_SAT),
@@ -285,6 +287,9 @@ export function buildDarkPalette(light) {
         semanticText: buildSemanticText(semantic, namedSurfaces.main),
         onPrimary: onFilled(primary[500], light.white, light.black),
         onSemantic: buildOnSemantic(semantic, light.white, light.black),
+        // The dark ring is derived from the LIFTED accent against the dark canvas, not copied from
+        // light: the two modes squeeze it from opposite sides, so a shared value fails one of them.
+        focusRing: buildFocusRing({ primary, background, backgroundColor: namedSurfaces }),
         // Sidebar is already near-black in light mode, so it needs no inversion.
         sidebar: withSidebarTokens(light),
         boxShadow: {

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

@@ -0,0 +1,67 @@
+import { contrastRatio } from "./color.js";
+import { AA_NORMAL_TEXT, isDarkCanvas, onFilled } from "./accentText.js";
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+/**
+ * The rung one/two steps DARKER than the accent — what a filled button's hover/active needs so its
+ * white label stays legible.
+ *
+ * Every dark scale runs dark -> light across 50 -> 900 (brand scales are rebuilt that way, utility
+ * hues are reversed), the mirror of light mode. So "darker than [500]" is [600]/[700] in light but
+ * [400]/[300] in dark.
+ */
+const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+/**
+ * Lightest rung on `scale` that still carries `white` at WCAG AA. Prefers [500] when it already
+ * passes; otherwise walks toward darker rungs. Used for solid fills on buttons, tags, badges and
+ * table status pills so consumers never get black ink on a saturated fill when white is achievable.
+ */
+export const solidFillRung = (scale, white) => {
+    if (contrastRatio(scale[500], white) >= AA_NORMAL_TEXT)
+        return 500;
+    const passing = RUNGS.filter((r) => scale[r] && contrastRatio(scale[r], white) >= AA_NORMAL_TEXT);
+    if (!passing.length)
+        return 500;
+    return passing.reduce((a, b) => contrastRatio(scale[a], white) <= contrastRatio(scale[b], white) ? a : b);
+};
+const steppedRung = (base, canvas, step) => {
+    const dir = isDarkCanvas(canvas) ? -100 : 100;
+    return Math.min(900, Math.max(50, base + dir * step));
+};
+/** Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. */
+export const darkerFillRung = (scale, canvas, white, step) => {
+    const base = solidFillRung(scale, white);
+    if (base === 500) {
+        const mode = isDarkCanvas(canvas) ? "dark" : "light";
+        return FILL_STEP_RUNGS[mode][step];
+    }
+    const stepped = steppedRung(base, canvas, step === 0 ? 1 : 2);
+    return stepped;
+};
+/** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
+export const labelOnFill = (fill, white, black) => onFilled(fill, white, black);
+/**
+ * Consumer-facing helper: given any `ColorScale` (primary, red, semantic.error, …), return the
+ * fill rung and matching ink for solid / hover / active states. Use this whenever you paint a
+ * `bg` from a scale — never pair `scale[500]` with `onFilled` or `colors.white` by hand.
+ */
+export const resolveFilledSurface = (scale, colors) => {
+    const { white, black, backgroundColor } = colors;
+    const canvas = backgroundColor.main;
+    const rung = solidFillRung(scale, white);
+    const fill = scale[rung];
+    const hoverRung = darkerFillRung(scale, canvas, white, 0);
+    const hoverFill = scale[hoverRung];
+    const activeRung = darkerFillRung(scale, canvas, white, 1);
+    const activeFill = scale[activeRung];
+    return {
+        rung,
+        fill,
+        color: labelOnFill(fill, white, black),
+        hoverRung,
+        hoverFill,
+        hoverColor: labelOnFill(hoverFill, white, black),
+        activeRung,
+        activeFill,
+        activeColor: labelOnFill(activeFill, white, black),
+    };
+};

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

@@ -0,0 +1,85 @@
+import { contrastRatio, hexToHsl, withLightness } from "./color.js";
+import { AA_NON_TEXT } from "./outlineRung.js";
+/** Same lightness granularity `buildDarkPalette` walks its accents at. */
+const LIGHTNESS_STEP = 0.5;
+/**
+ * The nearest re-lighting of `hex` that clears `target` against EVERY backdrop at once.
+ *
+ * Not `settleAcross`: that folds one `liftToContrast` per surface, and each lift walks AWAY from
+ * the surface it was handed. That is correct when every backdrop sits on the same side of the ink
+ * (its case — a set of light surfaces, or a set of dark ones), and wrong here, where a focus ring
+ * is squeezed BETWEEN a near-white canvas and a mid-dark button fill: the lift against the fill
+ * walks straight back across the canvas it had just cleared. Seeding `settleAcross` with
+ * `primary[500]` measured 1.08-1.99 on the light canvas for every brand for exactly that reason.
+ *
+ * Walking outward from the seed and testing every backdrop at each step keeps the result the
+ * CLOSEST passing colour to the brand accent, so the ring still reads as brand chrome. Contrast is
+ * a function of relative luminance alone, and lightness sweeps luminance monotonically from 0 to 1,
+ * so if any colour on this hue clears the set, this finds it.
+ */
+export function settleBetween(hex, backdrops, target = AA_NON_TEXT) {
+    const clears = (candidate) => backdrops.every((backdrop) => contrastRatio(candidate, backdrop) >= target);
+    if (clears(hex))
+        return hex;
+    const { l } = hexToHsl(hex);
+    for (let step = LIGHTNESS_STEP; step <= 100; step += LIGHTNESS_STEP) {
+        const darker = withLightness(hex, l - step);
+        if (clears(darker))
+            return darker;
+        const lighter = withLightness(hex, l + step);
+        if (clears(lighter))
+            return lighter;
+    }
+    // Unreachable for every shipped brand (the gate proves it) — a brand whose fill and canvas are
+    // close enough to leave no gap would land here. Take the end that is least bad rather than throw
+    // at import time, and let `focusRing.test.ts` be what reports it.
+    const ends = [withLightness(hex, 0), withLightness(hex, 100)];
+    const worst = (candidate) => Math.min(...backdrops.map((backdrop) => contrastRatio(candidate, backdrop)));
+    return worst(ends[0]) >= worst(ends[1]) ? ends[0] : ends[1];
+}
+/**
+ * The three backdrops a focused button's ring is actually drawn against: the page canvas, a card
+ * surface, and — because a solid button's ring sits directly against its own fill — `primary[500]`.
+ *
+ * Deliberately NOT every named surface. `muted`/`accent`/`quaternary` are mid-tone, and a single
+ * band asked to clear those AND a dark brand fill has no solution at any hue — contrast is
+ * luminance alone, and `skyline`/`storefront` come out with an empty band. That is what the second
+ * tone is for: `halo` owns the fill-side adjacency instead.
+ */
+export const focusRingBackdrops = (source) => [
+    source.backgroundColor.main,
+    source.background[50],
+    source.primary[500],
+];
+/**
+ * The two-tone `:focus-visible` indicator.
+ *
+ * Chakra's stock ring (`shadows.outline`, a fixed `rgba(66,153,225,.6)`) measured 1.83:1 on the
+ * lavender canvas and 1.38:1 on a primary button — a focus indicator you cannot see, on all nine
+ * brands. It is one hardcoded blue, so no palette could have saved it.
+ *
+ * `halo` is the surface tone, drawn as the inner band so the indicator separates from a filled
+ * control whatever `colorScheme` painted it. `ring` is the brand accent, walked to the nearest
+ * lightness that clears 3:1 on all three backdrops at once — including the halo, so the two tones
+ * are always told apart.
+ */
+export const buildFocusRing = (source) => {
+    const halo = settleBetween(source.background[50], [source.primary[500]]);
+    return {
+        halo,
+        ring: settleBetween(source.primary[500], [...focusRingBackdrops(source), halo]),
+    };
+};
+/**
+ * Re-derives the ring from the FINISHED palette, as the last step of the rung chain.
+ *
+ * `finalizeLightPalette` and `buildDarkPalette` seed it, but neither is the final word: a brand
+ * file may replace `primary` or `background` after the generic derivation runs — `zinc`'s dark
+ * palette replaces both, inverting the filled button to near-white — and a ring resolved against
+ * the pre-override values is then silently wrong. Same reason `withSurfaceRungs` re-lifts inks the
+ * finalizers already derived. `focusRing.test.ts` asserts this is a fixed point.
+ */
+export const withFocusRing = (palette) => ({
+    ...palette,
+    focusRing: buildFocusRing(palette),
+});

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

@@ -3,5 +3,7 @@ export * from "./buildBrandTokens.js";
 export * from "./buildDarkPalette.js";
 export * from "./chartColorsFromTheme.js";
 export * from "./color.js";
+export * from "./focusRing.js";
 export * from "./scrollbar.js";
 export * from "./gradientInk.js";
+export * from "./placeholderInk.js";