pixelize-design-library 2.4.1-beta.2 → 2.4.1-beta.3

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

@@ -2,25 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTableRowHoverStyle = void 0;
 /**
- * Per-cell hover fill for a table row. `table.hover[300]` (the token built for this) still works
- * in light mode — a pale tint against a white canvas — but in dark mode that rung sits within
- * ~10 lightness points of the near-black canvas (both compressed near L7-15), so it computes to
- * ~1.2:1 contrast: invisible, which is exactly what QA reported. `background[900]` is this
- * palette's dark-mode "bright highlight" rung (~9.7-10.7:1 against the canvas, verified
- * numerically across brands) — but the row's resting ink (`text[500]`) is tuned for a near-black
- * backdrop and goes illegible against a bright one, so hover must also flip `color`, mirroring how
- * Jodit's own dark-mode hover rule flips text to its canvas color alongside the brighter fill.
+ * Per-cell hover fill for a table row. `table.hover[300]` works in light mode — a pale tint on a
+ * white canvas — but in dark mode that rung sits within ~10 lightness points of the near-black
+ * canvas, computing to ~1.2:1: invisible, as QA reported.
+ *
+ * The first fix for that overshot to `background[900]`, the palette's BRIGHTEST rung (~10:1), and
+ * had to invert the row's ink to keep it readable — a near-white slab in a dark table. Dark-mode
+ * hover is a *lifted surface*, not an inversion: `table.hover[500]` is a visible step up from the
+ * canvas while staying dark enough that the row's resting `text[500]` ink is still legible, so no
+ * `color` flip is needed. Pinned by tableRowHoverStyle.test.ts.
  */
 const getTableRowHoverStyle = (colors, isDark) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     if (isDark) {
         return {
-            backgroundColor: (_b = (_a = colors.background) === null || _a === void 0 ? void 0 : _a[900]) !== null && _b !== void 0 ? _b : (_d = (_c = colors.table) === null || _c === void 0 ? void 0 : _c.hover) === null || _d === void 0 ? void 0 : _d[300],
-            color: (_e = colors.backgroundColor) === null || _e === void 0 ? void 0 : _e.main,
+            backgroundColor: (_c = (_b = (_a = colors.table) === null || _a === void 0 ? void 0 : _a.hover) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : (_d = colors.background) === null || _d === void 0 ? void 0 : _d[400],
         };
     }
     return {
-        backgroundColor: (_h = (_g = (_f = colors.table) === null || _f === void 0 ? void 0 : _f.hover) === null || _g === void 0 ? void 0 : _g[300]) !== null && _h !== void 0 ? _h : (_k = (_j = colors.secondary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[4],
+        backgroundColor: (_g = (_f = (_e = colors.table) === null || _e === void 0 ? void 0 : _e.hover) === null || _f === void 0 ? void 0 : _f[300]) !== null && _g !== void 0 ? _g : (_j = (_h = colors.secondary) === null || _h === void 0 ? void 0 : _h.opacity) === null || _j === void 0 ? void 0 : _j[4],
     };
 };
 exports.getTableRowHoverStyle = getTableRowHoverStyle;

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

@@ -95,7 +95,7 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                                 // color={theme.colors.gray[300]}
                                 _hover: { color: theme.colors.gray[500], bg: "transparent" } }), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { 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],
-                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: theme.colors.gray[400], ml: 'auto', children: index + 1 })] }, item.id));
-                })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { color: "gray.400", textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.gray[400], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
+                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 })] }, item.id));
+                })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { color: "gray.500", textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.gray[500], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };
 exports.default = ManageColumns;

package/dist/Components/UpgradeButton/UpgradeButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UpgradeButton.d.ts","sourceRoot":"","sources":["../../../src/Components/UpgradeButton/UpgradeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EACL,kBAAkB,EAGnB,MAAM,sBAAsB,CAAC;AAW9B,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2J/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"UpgradeButton.d.ts","sourceRoot":"","sources":["../../../src/Components/UpgradeButton/UpgradeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EACL,kBAAkB,EAGnB,MAAM,sBAAsB,CAAC;AAgB9B,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyK/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -5,21 +5,33 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const color_1 = require("../../Theme/tokens/builders/color");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+/** The brand's gold sparkle accent, kept only where it clears 3:1 on the button's own fill. */
+const ACCENT_GOLD = "#FFD66B";
 const sizeMap = {
-    sm: { px: "12px", py: "4px", font: "12px", sub: "8px", icon: 11, radius: "40px" },
+    // Compact, not tiny: an 8px subtitle was unreadable, so `sm` sits deliberately
+    // close to `md` — it's the dense variant of the same badge, not a smaller one.
+    sm: { px: "14px", py: "4px", font: "13px", sub: "9px", icon: 12, radius: "44px" },
     md: { px: "20px", py: "5px", font: "14px", sub: "10px", icon: 13, radius: "50px" },
     lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "60px" },
 };
-const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Sparkles, iconColor = "#FFD66B", variant = "brand", gradient, size = "md", shimmer = true, isLoading = false, isDisabled = false, maxLabelWidth = "160px", ariaLabel, onClick, }) => {
+const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Sparkles, iconColor, variant = "brand", gradient, size = "md", shimmer = true, isLoading = false, isDisabled = false, maxLabelWidth = "160px", ariaLabel, onClick, }) => {
     var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;
     // Only reachable if a consumer hand-builds a palette without `gradient`; every shipped brand sets it.
     const themeGradient = (_a = c.gradient) !== null && _a !== void 0 ? _a : { from: c.primary[500], to: c.primary[700] };
+    // `primary`/`secondary` at [500]->[700] / [400]->[600] sit in the mid-luminance band where
+    // neither white nor black ink clears AA at both ends at once (measured worst-case as low as
+    // 2.72:1 across brands — no ink choice fixes a gradient with no readable ink at all). One rung
+    // darker moves both stops onto the same side of that divide; verified universally >=4.5 at
+    // both ends across all 9 brands x both modes. `success`/`warning`/`danger`/`info` already sit
+    // there at [400]->[600] and don't need the shift.
     const variantGradient = {
         brand: themeGradient,
-        primary: { from: c.primary[500], to: c.primary[700] },
-        secondary: { from: c.secondary[400], to: c.secondary[600] },
+        primary: { from: c.primary[600], to: c.primary[800] },
+        secondary: { from: c.secondary[600], to: c.secondary[800] },
         success: { from: c.semantic.success[400], to: c.semantic.success[600] },
         warning: { from: c.semantic.warning[400], to: c.semantic.warning[600] },
         danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
@@ -27,9 +39,15 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
     };
     const resolved = (_b = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant]) !== null && _b !== void 0 ? _b : themeGradient;
     // `iconColor`'s gold default fails AA as body text against this gradient (measured ~1.4-3.3
-    // across brands) — the label/subtitle share this computed ink instead. The icon/spinner keep
-    // `iconColor` since non-text UI only needs WCAG 1.4.11's 3:1, which the gold clears.
+    // across brands) — the label/subtitle share this computed ink instead.
     const ink = (0, accentText_1.onGradient)(resolved.from, resolved.to, c.white, c.black);
+    // The gold only clears 1.4.11's 3:1 on a DARK gradient. zinc dark inverts `primary` to a
+    // near-white fill, where gold-on-near-white measures ~1.3:1 and the icon vanishes, so fall
+    // back to the label's ink whenever the gold misses either stop.
+    const resolvedIconColor = iconColor !== null && iconColor !== void 0 ? iconColor : ((0, color_1.contrastRatio)(ACCENT_GOLD, resolved.from) >= outlineRung_1.AA_NON_TEXT &&
+        (0, color_1.contrastRatio)(ACCENT_GOLD, resolved.to) >= outlineRung_1.AA_NON_TEXT
+        ? ACCENT_GOLD
+        : ink);
     const s = sizeMap[size];
     const Icon = icon;
     const blocked = isLoading || isDisabled;
@@ -58,6 +76,6 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
                     pointerEvents: "none",
                 },
             }
-            : undefined, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", thickness: "1.5px", color: iconColor })) : (Icon && (0, jsx_runtime_1.jsx)(Icon, { size: s.icon, color: iconColor, style: { flexShrink: 0 } }))] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
+            : undefined, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && (0, jsx_runtime_1.jsx)(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
 };
 exports.default = UpgradeButton;

package/dist/Components/UserDetails/UserDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserDetails.d.ts","sourceRoot":"","sources":["../../../src/Components/UserDetails/UserDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAkCjD,OAAO,EAEL,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAyC5B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmhB3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UserDetails.d.ts","sourceRoot":"","sources":["../../../src/Components/UserDetails/UserDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAmCjD,OAAO,EAEL,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAyC5B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwhB3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/UserDetails/UserDetails.js

@@ -41,6 +41,7 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const AddUserModal_1 = __importDefault(require("./AddUserModal"));
@@ -130,9 +131,11 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
                                                             onConfirmOpen();
                                                         }
                                                     }, children: labels.deactivateUser }))] }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: muted, mb: 3, children: labels.personalInformation }), (0, jsx_runtime_1.jsx)(react_2.Box, { border: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: selectedUser.details.map((detail, index) => {
-                                                var _a, _b, _c, _d, _e, _f, _g;
+                                                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                                                 const Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : lucide_react_1.UserRound;
-                                                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 3, px: 3, py: 2.5, _hover: { bg: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#F8FAFC" }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#EEF2FF", borderRadius: "lg", color: (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : "#4F46E5", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
+                                                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 3, px: 3, py: 2.5, _hover: {
+                                                                bg: (0, outlineRung_1.resolveHoverTint)((_c = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#F8FAFC", (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#ffffff"),
+                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : "#EEF2FF", borderRadius: "lg", color: (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : "#4F46E5", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
                                             }) })] })] })) : ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })) })] }), (0, jsx_runtime_1.jsx)(AddUserModal_1.default, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: async (values) => {
                     await (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values));
                     onAddUserClose();

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

@@ -1,6 +1,7 @@
 import { ComponentStyleConfig, StyleFunctionProps } from "@chakra-ui/react";
 export declare const componentStyles: {
     Checkbox: ComponentStyleConfig;
+    Radio: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Input: ComponentStyleConfig;
     Button: ComponentStyleConfig;
     Select: ComponentStyleConfig;
@@ -236,5 +237,6 @@ export declare const componentStyles: {
     };
     Skeleton: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Tooltip: import("@chakra-ui/react").ComponentSingleStyleConfig;
+    CloseButton: import("@chakra-ui/react").ComponentSingleStyleConfig;
 };
 //# sourceMappingURL=componentStyles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"componentStyles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/componentStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAU,MAAM,kBAAkB,CAAC;AA4HpF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoB3B,CAAC"}
+{"version":3,"file":"componentStyles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/componentStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAU,MAAM,kBAAkB,CAAC;AAqMpF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsB3B,CAAC"}

package/dist/Theme/chakra/componentStyles.js

@@ -11,6 +11,7 @@ const InputTextArea_style_1 = require("../../Components/InputTextArea/InputTextA
 const NumberInput_styles_1 = require("../../Components/NumberInput/NumberInput.styles");
 const accentText_1 = require("../tokens/builders/accentText");
 const color_1 = require("../tokens/builders/color");
+const outlineRung_1 = require("../tokens/builders/outlineRung");
 const Drawer_styles_1 = require("./Drawer.styles");
 const Menu_styles_1 = require("./Menu.styles");
 const Modal_styles_1 = require("./Modal.styles");
@@ -127,8 +128,80 @@ const Skeleton = {
         });
     },
 };
+// Chakra's `extendTheme` does not REPLACE a component's stock baseStyle when ours is also a
+// function — it calls BOTH and deep-merges the two returned plain objects, key by key. Chakra's
+// own stock Radio (@chakra-ui/theme radio.mjs) writes its checked dot with the shorthand style
+// props `bg`/`w`/`h`/`pos`; an earlier version of this override used the full CSS property names
+// (`background`/`width`/`height`/`position`). A deep merge treats those as DIFFERENT keys, so
+// both survived into the final style object instead of one cleanly overwriting the other — and
+// in practice Chakra's own `bg: "currentColor"` rung won, leaving a hardcoded-black dot. Using
+// the exact same keys Chakra's stock style uses makes every one of ours a scalar overwrite, and
+// `!important` on the two colour-bearing declarations removes any remaining doubt about which
+// value survives serialization — verified against the actual rendered cascade, not just this
+// function's return value (see componentStyles.radioDotMerge.test.ts, which asserts the merge
+// behavior directly rather than only the function output).
+const Radio = {
+    baseStyle: ({ theme, colorScheme }) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const swatch = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme];
+        const fill = (_b = swatch === null || swatch === void 0 ? void 0 : swatch[500]) !== null && _b !== void 0 ? _b : (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500];
+        const white = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.white) !== null && _f !== void 0 ? _f : "#ffffff";
+        const black = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.black) !== null && _h !== void 0 ? _h : "#000000";
+        const dot = (0, accentText_1.onFilled)(fill, white, 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;
+        // ours must supply a value that actually differs from resting, same fix shape as
+        // NavigationBar/OrgSwitcher's "hand a fill its own resting bg as the backdrop" pattern.
+        const hoverFill = (0, outlineRung_1.resolveHoverTint)(fill, fill);
+        return {
+            control: {
+                borderColor: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.boxborder) === null || _k === void 0 ? void 0 : _k[500],
+                _checked: {
+                    bg: `${fill} !important`,
+                    borderColor: `${fill} !important`,
+                    color: `${dot} !important`,
+                    _before: {
+                        content: `""`,
+                        display: "inline-block",
+                        pos: "relative",
+                        w: "50%",
+                        h: "50%",
+                        borderRadius: "50%",
+                        bg: `${dot} !important`,
+                    },
+                    _hover: { bg: `${hoverFill} !important`, borderColor: `${hoverFill} !important` },
+                },
+            },
+        };
+    },
+    defaultProps: { colorScheme: "primary" },
+};
+const $closeButtonBg = (0, react_1.cssVar)("close-button-bg");
+/**
+ * Chakra's stock CloseButton hover/active wash (`blackAlpha.100`/`.200`) only swaps to
+ * `whiteAlpha.100`/`.200` under `_dark` — dead in this app (see createBrandTheme's colorMode
+ * comment) — so a CloseButton on a dark canvas keeps the light-mode blackAlpha wash, which reads
+ * as almost no affordance against a dark surface. The light-mode values themselves also measure
+ * borderline against `background[50]` (1.14/1.19, under `MIN_PERCEPTIBLE_STEP`). Branch on the
+ * palette's own actual canvas (`isDarkCanvas`), not Chakra's dead colorMode, and step one rung up
+ * each scale (`.200`/`.300`) — verified >=1.19 across all 9 brands x both modes
+ * (closeButtonHover.test.ts).
+ */
+const CloseButton = {
+    baseStyle: ({ theme }) => {
+        var _a, _b, _c, _d, _e;
+        const dark = (0, accentText_1.isDarkCanvas)((_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : "#ffffff");
+        const alpha = dark ? (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.whiteAlpha : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.blackAlpha;
+        return {
+            _hover: { [$closeButtonBg.variable]: alpha === null || alpha === void 0 ? void 0 : alpha[200] },
+            _active: { [$closeButtonBg.variable]: alpha === null || alpha === void 0 ? void 0 : alpha[300] },
+        };
+    },
+};
 exports.componentStyles = {
     Checkbox: Checkbox_styles_1.Checkbox,
+    Radio,
     Input: TextInput_styles_1.Input,
     Button: Button_styles_1.Button,
     Select: Select_styles_1.Select,
@@ -147,4 +220,5 @@ exports.componentStyles = {
     Avatar: Avatar_styles_1.Avatar,
     Skeleton,
     Tooltip,
+    CloseButton,
 };

package/dist/Theme/chakra/createBrandTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createBrandTheme.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/createBrandTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAMvE,MAAM,WAAW,uBAAuB;IACtC,gEAAgE;IAChE,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,YAAY,EACrB,UAAS,uBAA4B,wBAwDtC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"createBrandTheme.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/createBrandTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOvE,MAAM,WAAW,uBAAuB;IACtC,gEAAgE;IAChE,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,YAAY,EACrB,UAAS,uBAA4B,wBAuGtC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/Theme/chakra/createBrandTheme.js

@@ -8,6 +8,7 @@ const react_1 = require("@chakra-ui/react");
 const common_web_1 = __importDefault(require("./common.web"));
 const fonts_web_1 = __importDefault(require("./fonts.web"));
 const componentStyles_1 = require("./componentStyles");
+const accentText_1 = require("../tokens/builders/accentText");
 /**
  * Builds a Chakra theme from a pure brand palette.
  *
@@ -63,10 +64,56 @@ const createBrandTheme = (palette, options = {}) => {
             ? {
                 styles: {
                     global: {
+                        // Native widgets the page cannot style — the `<select>` dropdown list and the
+                        // time/date picker popups — are painted by the browser, which defaults to light
+                        // and produced white popups on the dark canvas. `color-scheme` is the only way to
+                        // tell it otherwise.
+                        html: {
+                            colorScheme: "dark",
+                        },
                         body: {
                             bg: palette.backgroundColor.main,
                             color: palette.text[900],
                         },
+                        // Text selection is another browser-painted surface `color-scheme` doesn't cover —
+                        // the UA default `::selection` stays a light highlight regardless of theme, so
+                        // 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: (0, accentText_1.onFilled)(palette.primary[500], palette.white, palette.black),
+                        },
+                        "::-moz-selection": {
+                            background: palette.primary[500],
+                            color: (0, accentText_1.onFilled)(palette.primary[500], palette.white, palette.black),
+                        },
+                        // `color-scheme: dark` gives WebKit/Blink a dark scrollbar by default, but it's the
+                        // OS's generic dark gray, not brand-aware — style it explicitly so it matches the
+                        // canvas instead of floating as a mismatched gray bar.
+                        "::-webkit-scrollbar": {
+                            width: "10px",
+                            height: "10px",
+                        },
+                        "::-webkit-scrollbar-track": {
+                            background: palette.backgroundColor.main,
+                        },
+                        "::-webkit-scrollbar-thumb": {
+                            background: palette.gray[600],
+                            borderRadius: "6px",
+                        },
+                        "::-webkit-scrollbar-thumb:hover": {
+                            background: palette.gray[500],
+                        },
+                        // Chrome/Edge autofill paints its own opaque yellow/white fill behind the input
+                        // text via `-webkit-box-shadow` (not `background`), so a plain `bg` override never
+                        // reaches it — a bright light box survives on every dark autofilled field unless
+                        // overridden with the same trick.
+                        "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus": {
+                            WebkitBoxShadow: `0 0 0px 1000px ${palette.backgroundColor.secondary} inset`,
+                            WebkitTextFillColor: palette.text[900],
+                            caretColor: palette.text[900],
+                        },
                     },
                 },
             }

package/dist/Theme/tokens/brands/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/brands/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAC1C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAExC,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAC/C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAe3E,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AAC1F,OAAO,EACL,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,GACT,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUzD,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUxD,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAU/E,CAAC;AAEF,eAAO,MAAM,UAAU,EAAiC,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/brands/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAC1C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAExC,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAC/C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAgB3E,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AAC1F,OAAO,EACL,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,GACT,CAAC;AAKF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUzD,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUxD,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAU/E,CAAC;AAEF,eAAO,MAAM,UAAU,EAAiC,SAAS,EAAE,CAAC"}

package/dist/Theme/tokens/brands/index.js

@@ -41,6 +41,7 @@ exports.storefrontDark = palette_dark_8.default;
 const palette_dark_9 = __importDefault(require("./zinc/palette.dark"));
 exports.zincDark = palette_dark_9.default;
 const accentText_1 = require("../builders/accentText");
+const outlineRung_1 = require("../builders/outlineRung");
 /**
  * Derived here rather than hand-written into each brand's literal: it must track that brand's
  * own primary scale and canvas, and a stale hand-copied hex would silently fail AA.
@@ -53,29 +54,30 @@ const withAccentText = (palette) => {
         accentText: (_a = palette.accentText) !== null && _a !== void 0 ? _a : (0, accentText_1.pickAccentText)(palette.primary, palette.backgroundColor.main, "light"),
     });
 };
+const lightBrand = (palette) => (0, outlineRung_1.withOutlineRung)(withAccentText(palette), "light");
 /** Light palette per brand. `lavender` is the base the other six extend. */
 exports.lightPalettes = {
-    lavender: withAccentText(palette_light_1.default),
-    meadow: withAccentText(palette_light_2.default),
-    radiant: withAccentText(palette_light_3.default),
-    skyline: withAccentText(palette_light_4.default),
-    slate: withAccentText(palette_light_5.default),
-    emerald: withAccentText(palette_light_6.default),
-    rosewood: withAccentText(palette_light_7.default),
-    storefront: withAccentText(palette_light_8.default),
-    zinc: withAccentText(palette_light_9.default),
+    lavender: lightBrand(palette_light_1.default),
+    meadow: lightBrand(palette_light_2.default),
+    radiant: lightBrand(palette_light_3.default),
+    skyline: lightBrand(palette_light_4.default),
+    slate: lightBrand(palette_light_5.default),
+    emerald: lightBrand(palette_light_6.default),
+    rosewood: lightBrand(palette_light_7.default),
+    storefront: lightBrand(palette_light_8.default),
+    zinc: lightBrand(palette_light_9.default),
 };
 /** Dark palette per brand, derived from the matching light palette. */
 exports.darkPalettes = {
-    lavender: palette_dark_1.default,
-    meadow: palette_dark_2.default,
-    radiant: palette_dark_3.default,
-    skyline: palette_dark_4.default,
-    slate: palette_dark_5.default,
-    emerald: palette_dark_6.default,
-    rosewood: palette_dark_7.default,
-    storefront: palette_dark_8.default,
-    zinc: palette_dark_9.default,
+    lavender: (0, outlineRung_1.withOutlineRung)(palette_dark_1.default, "dark"),
+    meadow: (0, outlineRung_1.withOutlineRung)(palette_dark_2.default, "dark"),
+    radiant: (0, outlineRung_1.withOutlineRung)(palette_dark_3.default, "dark"),
+    skyline: (0, outlineRung_1.withOutlineRung)(palette_dark_4.default, "dark"),
+    slate: (0, outlineRung_1.withOutlineRung)(palette_dark_5.default, "dark"),
+    emerald: (0, outlineRung_1.withOutlineRung)(palette_dark_6.default, "dark"),
+    rosewood: (0, outlineRung_1.withOutlineRung)(palette_dark_7.default, "dark"),
+    storefront: (0, outlineRung_1.withOutlineRung)(palette_dark_8.default, "dark"),
+    zinc: (0, outlineRung_1.withOutlineRung)(palette_dark_9.default, "dark"),
 };
 // Built from lightPalettes/darkPalettes (not the raw literals) so accentText can never be
 // present on one map and missing on the other.

package/dist/Theme/tokens/brands/zinc/palette.dark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.dark.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/zinc/palette.dark.ts"],"names":[],"mappings":"AAqLA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"palette.dark.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/zinc/palette.dark.ts"],"names":[],"mappings":"AAuLA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/Theme/tokens/brands/zinc/palette.dark.js

@@ -93,13 +93,15 @@ const header = {
     900: "#ffffff",
 };
 // muted-foreground = gray[500] = #a1a1aa (5.81:1 on the #27272a muted surface); it also serves
-// as the focus ring on the #09090b canvas (7.76:1). gray[400] = the #6b6b75 interactive border.
+// as the focus ring on the #09090b canvas (7.76:1). gray[400] = the interactive border/icon rung:
+// #6b6b75 (matching border[500]) measured 2.95:1 on the LIGHTEST named surface, just under the 3:1
+// non-text bar it is used at, so it is one step lighter than border[500] here.
 const gray = {
     50: "#18181b",
     100: "#27272a",
     200: "#3f3f46",
     300: "#52525b",
-    400: "#6b6b75",
+    400: "#71717a",
     500: "#a1a1aa",
     600: "#b4b4bb",
     700: "#d4d4d8",

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

@@ -0,0 +1,35 @@
+import type { PaletteProps, ResolvedColorMode } from "../types";
+/**
+ * The floor a hover/active state's step off its own resting surface must clear to be seen at
+ * all — same value the SideBar ladder, Accordion, and NavigationBar hover states are held to.
+ * A "hover" a user cannot perceive is not a hover.
+ */
+export declare const MIN_PERCEPTIBLE_STEP = 1.15;
+/** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
+export declare const AA_NON_TEXT = 3;
+/**
+ * Walks a hex toward `target` contrast against `backdrop`, keeping its hue and saturation so the
+ * result still reads as the same colour. Darkens when `mode` is light, lightens when dark, and
+ * stops at the FIRST passing step so nothing overshoots to black or white.
+ */
+export declare function liftToContrast(hex: string, backdrop: string, mode: ResolvedColorMode, target?: number): string;
+/**
+ * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
+ * pickers, the editor's inputs). It was authored as a decorative value — measured 1.30-2.56:1
+ * across brands, so those controls rendered effectively borderless in BOTH modes. Resolved here
+ * rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
+ *
+ * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
+ * and outside 1.4.11.
+ */
+export declare function withOutlineRung(palette: PaletteProps, mode: ResolvedColorMode): PaletteProps;
+/**
+ * A hover/active tint resolved against the surface it actually sits on, guaranteed to clear
+ * `MIN_PERCEPTIBLE_STEP`. Written for the recurring shape found across NavigationBar, UserDetails
+ * and Accordion: a pale `primary[50]`/`gray[50]` tint that measures near-1.0 on a near-white
+ * surface — invisible — with no dark-mode branch, so the same call site is wrong in both modes at
+ * once. `restSurface` is required rather than assumed white/black: a menu item's hover sits on
+ * its OWN list background, not necessarily the page canvas.
+ */
+export declare function resolveHoverTint(seed: string, restSurface: string): string;
+//# sourceMappingURL=outlineRung.d.ts.map

package/dist/Theme/tokens/builders/outlineRung.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlineRung.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/outlineRung.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEhE;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,+EAA+E;AAC/E,eAAO,MAAM,WAAW,IAAI,CAAC;AAE7B;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,iBAAiB,EACvB,MAAM,GAAE,MAAoB,GAC3B,MAAM,CAaR;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,iBAAiB,GAAG,YAAY,CAc5F;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAG1E"}

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AA_NON_TEXT = exports.MIN_PERCEPTIBLE_STEP = void 0;
+exports.liftToContrast = liftToContrast;
+exports.withOutlineRung = withOutlineRung;
+exports.resolveHoverTint = resolveHoverTint;
+const color_1 = require("./color");
+const accentText_1 = require("./accentText");
+/**
+ * The floor a hover/active state's step off its own resting surface must clear to be seen at
+ * all — same value the SideBar ladder, Accordion, and NavigationBar hover states are held to.
+ * A "hover" a user cannot perceive is not a hover.
+ */
+exports.MIN_PERCEPTIBLE_STEP = 1.15;
+/** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
+exports.AA_NON_TEXT = 3;
+/**
+ * Walks a hex toward `target` contrast against `backdrop`, keeping its hue and saturation so the
+ * result still reads as the same colour. Darkens when `mode` is light, lightens when dark, and
+ * stops at the FIRST passing step so nothing overshoots to black or white.
+ */
+function liftToContrast(hex, backdrop, mode, target = exports.AA_NON_TEXT) {
+    if ((0, color_1.contrastRatio)(hex, backdrop) >= target)
+        return hex;
+    const { s } = (0, color_1.hexToHsl)(hex);
+    const step = mode === "dark" ? 1 : -1;
+    let { l } = (0, color_1.hexToHsl)(hex);
+    while (l > 0 && l < 100) {
+        l += step;
+        const next = (0, color_1.withLightness)(hex, l, s);
+        if ((0, color_1.contrastRatio)(next, backdrop) >= target)
+            return next;
+    }
+    return (0, color_1.withLightness)(hex, mode === "dark" ? 100 : 0, s);
+}
+/**
+ * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
+ * pickers, the editor's inputs). It was authored as a decorative value — measured 1.30-2.56:1
+ * across brands, so those controls rendered effectively borderless in BOTH modes. Resolved here
+ * rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
+ *
+ * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
+ * and outside 1.4.11.
+ */
+function withOutlineRung(palette, mode) {
+    const current = palette.boxborder[500];
+    // The border sits between the control's fill and the surface behind it; hold it to the
+    // harder of the two.
+    const backdrop = (0, color_1.contrastRatio)(current, palette.backgroundColor.main) <=
+        (0, color_1.contrastRatio)(current, palette.background[50])
+        ? palette.backgroundColor.main
+        : palette.background[50];
+    const resolved = liftToContrast(current, backdrop, mode);
+    if (resolved === current)
+        return palette;
+    return { ...palette, boxborder: { ...palette.boxborder, 500: resolved } };
+}
+/**
+ * A hover/active tint resolved against the surface it actually sits on, guaranteed to clear
+ * `MIN_PERCEPTIBLE_STEP`. Written for the recurring shape found across NavigationBar, UserDetails
+ * and Accordion: a pale `primary[50]`/`gray[50]` tint that measures near-1.0 on a near-white
+ * surface — invisible — with no dark-mode branch, so the same call site is wrong in both modes at
+ * once. `restSurface` is required rather than assumed white/black: a menu item's hover sits on
+ * its OWN list background, not necessarily the page canvas.
+ */
+function resolveHoverTint(seed, restSurface) {
+    const mode = (0, accentText_1.isDarkCanvas)(restSurface) ? "dark" : "light";
+    return liftToContrast(seed, restSurface, mode, exports.MIN_PERCEPTIBLE_STEP);
+}

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

@@ -0,0 +1,35 @@
+import type { ColorScale, ResolvedColorMode } from "../types";
+export type StatusTone = {
+    /** Chip fill. */
+    bg: string;
+    /** Label ink, guaranteed >= 4.5:1 on `bg`. */
+    fg: string;
+    /** Chip outline, guaranteed >= 3:1 on `bg`. */
+    border: string;
+};
+/**
+ * Status chips (open / in-progress / resolved …) were authored as `X.500` text on an `X.100`
+ * tint, which measures 3.3-4.4:1 — under the 4.5:1 body-text bar in BOTH modes. The ink is
+ * resolved from the scale's own hue instead of pinned, so every brand and both modes land on the
+ * lightest ink that still passes rather than a hand-copied hex that goes stale.
+ *
+ * `reverseScale` flips the utility ramps in dark, so `X.100` is already a dark tint there and the
+ * ink walks lighter instead of darker — hence the mode argument.
+ */
+export declare function resolveStatusTone(scale: ColorScale, mode: ResolvedColorMode): StatusTone;
+/**
+ * Avatar initials are drawn white on a generated fill. The seed hues in use measured 1.92:1
+ * (`#eab308`), 2.54:1 (`#10b981`) and 3.76:1 (`#ef4444`) — failing in light mode too, not just
+ * dark. Darkening the fill keeps the intended hue and the white-initials look while clearing AA.
+ */
+export declare function resolveAvatarFill(hex: string, target?: number): string;
+/**
+ * Hue set for generated avatars. Values are seeds, not final fills — always pass them through
+ * `resolveAvatarFill` so the white initials stay legible.
+ */
+export declare const AVATAR_SEEDS: readonly ["#ef4444", "#f97316", "#eab308", "#22c55e", "#10b981", "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899"];
+/** Stable per-name avatar fill: same name always yields the same accessible colour. */
+export declare function avatarFillFor(seedText: string): string;
+/** True when `fg` clears the body-text bar on `bg` — exported for consumer assertions. */
+export declare const meetsBodyText: (fg: string, bg: string) => boolean;
+//# sourceMappingURL=statusTone.d.ts.map

package/dist/Theme/tokens/builders/statusTone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusTone.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/statusTone.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG;IACvB,iBAAiB;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,+CAA+C;IAC/C,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,iBAAiB,GAAG,UAAU,CAUxF;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,GAAE,MAAuB,GAAG,MAAM,CAGtF;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,8GAUf,CAAC;AAEX,uFAAuF;AACvF,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAMtD;AAED,0FAA0F;AAC1F,eAAO,MAAM,aAAa,GAAI,IAAI,MAAM,EAAE,IAAI,MAAM,KAAG,OACd,CAAC"}