pixelize-design-library 2.4.2-beta.45 → 2.4.2-beta.47

package/dist/Components/Select/optionRowInk.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optionRowWeight = exports.OPTION_ROW_SELECTED_WEIGHT = exports.OPTION_ROW_REST_WEIGHT = exports.optionRowDescriptionInk = exports.optionRowInk = void 0;
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+/** Selection is carried by weight and a trailing brand check, so the label itself stays neutral. */
+const optionRowInk = (colors, isSingleSelected) => isSingleSelected ? colors.text[900] : colors.text[700];
+exports.optionRowInk = optionRowInk;
+// A 12px sub-line reached only 4.00:1 on the hovered selected row in dark.
+const optionRowDescriptionInk = (colors) => (0, outlineRung_1.liftToContrast)(colors.textMuted, (0, rowStates_1.listRowBackgrounds)(colors).selectedActive, accentText_1.AA_NORMAL_TEXT);
+exports.optionRowDescriptionInk = optionRowDescriptionInk;
+exports.OPTION_ROW_REST_WEIGHT = 400;
+// NOTE: 600 beside a tinted fill and a check read as three signals for one state.
+exports.OPTION_ROW_SELECTED_WEIGHT = 500;
+const optionRowWeight = (isSingleSelected) => isSingleSelected ? exports.OPTION_ROW_SELECTED_WEIGHT : exports.OPTION_ROW_REST_WEIGHT;
+exports.optionRowWeight = optionRowWeight;

package/dist/Components/SelectSearch/SelectSearch.js

@@ -14,21 +14,25 @@ const useFieldIds_1 = require("../Common/useFieldIds");
 const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const optionRowSizes_1 = require("../../Theme/tokens/primitives/optionRowSizes");
 const motion_2 = require("../../Theme/chakra/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const optionRowInk_1 = require("../Select/optionRowInk");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const lucide_react_1 = require("lucide-react");
 const ROW_TRANSITION = (0, motion_1.transitionFor)(["background-color"]);
-const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, }) => {
+const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, size, isMultipleSelect, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
+    const spec = (0, optionRowSizes_1.optionRowSpec)(size);
     if (isOptionLoading) {
         return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { py: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.accentText, children: loadingText })] }));
     }
     if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredOptions.map((option, index) => {
                 const selected = isOptionSelected(option);
+                const isSingleSelected = selected && !isMultipleSelect;
                 const isActive = index === activeIndex;
                 const rowBg = selected
                     ? isActive
@@ -39,14 +43,14 @@ const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOp
                         : "transparent";
                 return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (el) => {
                         optionRefs.current[index] = el;
-                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", bg: rowBg, px: 4, py: 1.5, fontSize: "0.8125rem", cursor: "pointer", color: theme.colors.text[700], fontWeight: selected ? 600 : 400, transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), _hover: {
+                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", bg: rowBg, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, isSingleSelected), fontWeight: (0, optionRowInk_1.optionRowWeight)(isSingleSelected), transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), _hover: {
                         bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
                     }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
                         if (e.key === "Enter" || e.key === " ") {
                             e.preventDefault();
                             handleOptionClick(option);
                         }
-                    }, display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.textMuted, children: option.email }))] })] }, option.id));
+                    }, display: "flex", alignItems: "center", gap: spec.gap, children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: spec.avatarSize, name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: spec.descriptionFontSize, color: (0, optionRowInk_1.optionRowDescriptionInk)(theme.colors), children: option.email }))] }), isSingleSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, option.id));
             }) }));
     }
     return ((0, jsx_runtime_1.jsx)(react_2.Text, { px: 4, py: 2, color: theme.colors.textMuted, children: "No options found" }));
@@ -230,7 +234,7 @@ function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnc
                                         return;
                                     }
                                     openDropdown();
-                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...(0, fieldStyles_1.fieldControlStyles)(theme.colors), ...(0, fieldStyles_1.controlSizeStyles)(size), ...(0, motion_2.reducedMotionSx)() }, style: inputStyle }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
+                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...(0, fieldStyles_1.fieldControlStyles)(theme.colors), ...(0, fieldStyles_1.controlSizeStyles)(size), ...(0, motion_2.reducedMotionSx)() }, style: inputStyle }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
                                             ? BottomTextColor
                                             : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }) }) }));
 }

package/dist/Components/Switch/Switch.d.ts

@@ -1,3 +1,3 @@
 import { SwitchProps } from "./SwitchProps";
-/** @deprecated Use `SegmentedControl` — Switch renders it at 12.5rem, growing when the labels need it. */
+/** @deprecated Two labelled choices; for a single on/off field use `ToggleSwitch`. Renders `SegmentedControl` at 12.5rem when labelled. */
 export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, surface, "aria-label": ariaLabel, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Switch/Switch.js

@@ -7,11 +7,13 @@ exports.default = Switch;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const SegmentedControl_1 = __importDefault(require("../SegmentedControl/SegmentedControl"));
-/** @deprecated Use `SegmentedControl` — Switch renders it at 12.5rem, growing when the labels need it. */
+/** @deprecated Two labelled choices; for a single on/off field use `ToggleSwitch`. Renders `SegmentedControl` at 12.5rem when labelled. */
 function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, surface, "aria-label": ariaLabel, }) {
     const options = [
         { value: "left", label: leftText, icon: leftIcon },
         { value: "right", label: rightText, icon: rightIcon },
     ];
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "fit-content", minW: "12.5rem", children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.default, { options: options, value: switchActive, onChange: onSwitchToggle, variant: "brandSlide", surface: surface, isFullWidth: true, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${leftText} or ${rightText}` }) }));
+    // Unlabelled segments have nothing to size to, so the 12.5rem floor only overflowed its cell.
+    const hasLabels = Boolean(leftText || rightText);
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "fit-content", maxW: "100%", minW: hasLabels ? "12.5rem" : undefined, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.default, { options: options, value: switchActive, onChange: onSwitchToggle, variant: "brandSlide", surface: surface, isFullWidth: true, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${leftText} or ${rightText}` }) }));
 }

package/dist/Components/Switch/SwitchProps.d.ts

@@ -8,7 +8,7 @@ export type SwitchProps = {
     onSwitchToggle: (value: "left" | "right") => void;
     /** Controlled selected side; the pill only moves when this changes. */
     switchActive: "left" | "right";
-    /** Background this sits on. Pass it off the page canvas — on a brand-filled bar the track sinks into the bar and the inactive label is unreadable without it. */
+    /** Background this sits on. Optional: the track is opaque on any backdrop; pass it only to aim the plate's hairline edge at the real backdrop. */
     surface?: string;
     /** Names the radiogroup; pass it, as there is no visible group label. */
     "aria-label"?: string;

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

@@ -6,10 +6,13 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
+const optionRowSizes_1 = require("../../../Theme/tokens/primitives/optionRowSizes");
+const optionRowInk_1 = require("../../Select/optionRowInk");
 const useExclusiveOverlay_1 = require("../../../Hooks/useExclusiveOverlay");
 const CompactSelect = ({ options, value, placeholder = "Select", height = "22px", onSelect, size = "xs" }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
+    const spec = (0, optionRowSizes_1.optionRowSpec)("xs");
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, () => setIsOpen(false));
     const openDropdown = () => {
@@ -63,15 +66,15 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
                                                 : isActive
                                                     ? rowBackgrounds.active
                                                     : theme.colors.transparent;
-                                            return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, ref: (el) => {
+                                            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, ref: (el) => {
                                                     optionRefs.current[i] = el;
-                                                }, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 2, py: 1, cursor: "pointer", color: theme.colors.text[700], _hover: {
+                                                }, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", display: "flex", alignItems: "center", gap: spec.gap, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, selected), fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(selected), _hover: {
                                                     bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
                                                 }, bg: rowBg, onClick: () => {
                                                     onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
                                                     setIsOpen(false);
                                                     setQuery("");
-                                                }, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.75rem", children: opt.label }) }, opt.id));
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { flex: 1, minW: 0, isTruncated: true, children: opt.label }), selected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, opt.id));
                                         }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 2, py: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.75rem", color: theme.colors.textMuted, children: "No results" }) }))] })] }) }) }) })] }));
 };
 exports.default = CompactSelect;

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

@@ -18,6 +18,12 @@ export declare const Menu: {
             borderColor: string;
         };
         item: {
+            minH: string;
+            px: string;
+            py: string;
+            mx: string;
+            fontSize: string;
+            borderRadius: string;
             bg: string;
             _focus: {
                 [$itemBg.variable]: string;

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

@@ -4,7 +4,9 @@ exports.Menu = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
 const rowStates_1 = require("../tokens/builders/rowStates");
+const optionRowSizes_1 = require("../tokens/primitives/optionRowSizes");
 const paletteFromTheme_1 = require("./paletteFromTheme");
+const itemRowSpec = optionRowSizes_1.OPTION_ROW_SIZES.sm;
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
 const $bg = (0, react_1.cssVar)("menu-bg");
 // NOTE: fixes Chakra's MenuList/MenuItem both hardcoding --menu-bg to white via dead _dark — item needs its own var too, or hover snaps back to white.
@@ -24,6 +26,12 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderColor: colors.boxborder[200],
         },
         item: {
+            minH: itemRowSpec.minH,
+            px: itemRowSpec.px,
+            py: itemRowSpec.py,
+            mx: itemRowSpec.mx,
+            fontSize: itemRowSpec.fontSize,
+            borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS,
             bg: "transparent",
             _focus: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
             _hover: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },

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

@@ -176,6 +176,12 @@ export declare const componentStyles: {
                 borderColor: string;
             };
             item: {
+                minH: string;
+                px: string;
+                py: string;
+                mx: string;
+                fontSize: string;
+                borderRadius: string;
                 bg: string;
                 _focus: {
                     [x: string]: string;

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

@@ -4,6 +4,8 @@ export declare const AA_NON_TEXT = 3;
 export declare const CHROME_BORDER = 1.5;
 export declare const CHROME_RULE = 1.31;
 export declare function ruleInk(hex: string, surfaces: readonly string[], target: number): string;
+export declare const STACKED_STATE_STEP = 1.08;
+export declare function tintStep(seed: string, backdrop: string, target: number): string;
 export declare function liftToContrast(hex: string, backdrop: string, target?: number): string;
 export declare function softenToContrast(hex: string, backdrop: string, target: number): string;
 export declare function withOutlineRung(palette: PaletteProps): PaletteProps;

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CHROME_RULE = exports.CHROME_BORDER = exports.AA_NON_TEXT = exports.MIN_PERCEPTIBLE_STEP = void 0;
+exports.STACKED_STATE_STEP = exports.CHROME_RULE = exports.CHROME_BORDER = exports.AA_NON_TEXT = exports.MIN_PERCEPTIBLE_STEP = void 0;
 exports.ruleInk = ruleInk;
+exports.tintStep = tintStep;
 exports.liftToContrast = liftToContrast;
 exports.softenToContrast = softenToContrast;
 exports.withOutlineRung = withOutlineRung;
@@ -20,6 +21,18 @@ function ruleInk(hex, surfaces, target) {
         ? softenToContrast(hex, loudest, target)
         : hex;
 }
+exports.STACKED_STATE_STEP = 1.08;
+// NOTE: walks out from the backdrop, so it settles a too-loud seed down as readily as it lifts a faint one.
+function tintStep(seed, backdrop, target) {
+    const { s } = (0, color_1.hexToHsl)(seed);
+    const away = (0, color_1.relativeLuminance)(backdrop) < 0.5 ? 1 : -1;
+    for (let l = (0, color_1.hexToHsl)(backdrop).l; l >= 0 && l <= 100; l += away) {
+        const next = (0, color_1.withLightness)(seed, l, s);
+        if ((0, color_1.contrastRatio)(next, backdrop) >= target)
+            return next;
+    }
+    return (0, color_1.withLightness)(seed, away > 0 ? 100 : 0, s);
+}
 function liftToContrast(hex, backdrop, target = exports.AA_NON_TEXT) {
     if ((0, color_1.contrastRatio)(hex, backdrop) >= target)
         return hex;

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

@@ -2,14 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.listRowBackgrounds = void 0;
 const outlineRung_1 = require("./outlineRung");
-// NOTE: rungs stay neutral/pale — seeding from primary[500] instead once painted SelectV2's hover solid brand fill.
 const listRowBackgrounds = (colors) => {
-    // Dark aliases backgroundColor.tertiary to the panel, leaving the selected row at 1.025:1.
-    const selected = (0, outlineRung_1.liftToContrast)(colors.backgroundColor.tertiary, colors.surfaceRaised, outlineRung_1.MIN_PERCEPTIBLE_STEP);
+    // Raw tertiary reaches 1.29:1 and reads as pressed; dark aliases it to the panel at 1.025:1.
+    const selected = (0, outlineRung_1.tintStep)(colors.backgroundColor.tertiary, colors.surfaceRaised, outlineRung_1.MIN_PERCEPTIBLE_STEP);
     return {
         active: (0, outlineRung_1.resolveHoverTint)(colors.gray[50], colors.surfaceRaised),
         selected,
-        selectedActive: (0, outlineRung_1.resolveHoverTint)(selected, selected),
+        selectedActive: (0, outlineRung_1.tintStep)(selected, selected, outlineRung_1.STACKED_STATE_STEP),
     };
 };
 exports.listRowBackgrounds = listRowBackgrounds;

package/dist/Theme/tokens/primitives/optionRowSizes.d.ts

@@ -0,0 +1,20 @@
+import type { ControlSize } from "./controlSizes";
+export type OptionRowSpec = {
+    minH: string;
+    px: string;
+    py: string;
+    gap: string;
+    /** Inset so the row's rounded fill stops short of the popup edge. */
+    mx: string;
+    fontSize: string;
+    descriptionFontSize: string;
+    iconSize: number;
+    /** Avatar token for rows that lead with one — an `sm` avatar alone outgrows an `sm` row. */
+    avatarSize: "2xs" | "xs" | "sm";
+    /** Fixed row height the virtualiser scrolls by; must match a single-line row. */
+    virtualRowHeightPx: number;
+};
+/** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
+export declare const OPTION_ROW_SIZES: Readonly<Record<ControlSize, OptionRowSpec>>;
+export declare const OPTION_ROW_RADIUS = "md";
+export declare const optionRowSpec: (size: ControlSize) => OptionRowSpec;

package/dist/Theme/tokens/primitives/optionRowSizes.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optionRowSpec = exports.OPTION_ROW_RADIUS = exports.OPTION_ROW_SIZES = void 0;
+/** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
+exports.OPTION_ROW_SIZES = {
+    xs: {
+        minH: "1.5rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
+        fontSize: "0.75rem", descriptionFontSize: "0.6875rem", iconSize: 12,
+        avatarSize: "2xs", virtualRowHeightPx: 24,
+    },
+    sm: {
+        minH: "1.875rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
+        fontSize: "0.8125rem", descriptionFontSize: "0.75rem", iconSize: 14,
+        avatarSize: "xs", virtualRowHeightPx: 30,
+    },
+    md: {
+        minH: "2.125rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
+        fontSize: "0.875rem", descriptionFontSize: "0.75rem", iconSize: 16,
+        avatarSize: "xs", virtualRowHeightPx: 34,
+    },
+    lg: {
+        minH: "2.5rem", px: "0.875rem", py: "0.375rem", gap: "0.625rem", mx: "0.5rem",
+        fontSize: "1rem", descriptionFontSize: "0.8125rem", iconSize: 18,
+        avatarSize: "sm", virtualRowHeightPx: 40,
+    },
+};
+exports.OPTION_ROW_RADIUS = "md";
+const optionRowSpec = (size) => exports.OPTION_ROW_SIZES[size];
+exports.optionRowSpec = optionRowSpec;

package/dist/esm/Components/Dropdown/DropDown.js

@@ -9,16 +9,17 @@ import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { ChevronDown } from "lucide-react";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
 import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { optionRowSpec, OPTION_ROW_RADIUS } from "../../Theme/tokens/primitives/optionRowSizes.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 const MotionBox = motion(forwardRef((props, ref) => (_jsx(Box, { ref: ref, ...props }))));
 const SIZE_MAP = {
-    xs: { btn: "xs", fontSize: CONTROL_SIZES.xs.fontSize, py: 1, px: 2.5, img: "1rem", chevron: CONTROL_SIZES.xs.iconSize, minW: "8rem", gap: 1.5 },
-    sm: { btn: "sm", fontSize: CONTROL_SIZES.sm.fontSize, py: 1.5, px: 3, img: "1rem", chevron: CONTROL_SIZES.sm.iconSize, minW: "9rem", gap: 2 },
-    md: { btn: "md", fontSize: CONTROL_SIZES.md.fontSize, py: 2, px: 3, img: "1.125rem", chevron: CONTROL_SIZES.md.iconSize, minW: "11rem", gap: 2 },
-    lg: { btn: "lg", fontSize: CONTROL_SIZES.lg.fontSize, py: 2.5, px: 3.5, img: "1.25rem", chevron: CONTROL_SIZES.lg.iconSize, minW: "12rem", gap: 2.5 },
-    xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
+    xs: { btn: "xs", img: "1rem", chevron: CONTROL_SIZES.xs.iconSize, minW: "8rem", gap: 1.5, rowSize: "xs" },
+    sm: { btn: "sm", img: "1rem", chevron: CONTROL_SIZES.sm.iconSize, minW: "9rem", gap: 2, rowSize: "sm" },
+    md: { btn: "md", img: "1.125rem", chevron: CONTROL_SIZES.md.iconSize, minW: "11rem", gap: 2, rowSize: "md" },
+    lg: { btn: "lg", img: "1.25rem", chevron: CONTROL_SIZES.lg.iconSize, minW: "12rem", gap: 2.5, rowSize: "lg" },
+    xl: { btn: "lg", img: "1.4rem", chevron: 20, minW: "13rem", gap: 3, rowSize: "lg" },
 };
 const TRIGGER_TRANSITION = transitionFor(["background-color", "border-color", "color", "box-shadow"]);
 const ROW_TRANSITION = transitionFor(["background-color", "color"]);
@@ -35,6 +36,7 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
     const menuRef = useRef(null);
     const [menuPos, setMenuPos] = useState({ top: 0, left: 0, width: 0 });
     const s = SIZE_MAP[(_a = size !== null && size !== void 0 ? size : optionsSize) !== null && _a !== void 0 ? _a : "sm"];
+    const rowSpec = optionRowSpec(s.rowSize);
     const prefersReducedMotion = useReducedMotion();
     const menuId = useId();
     // Roving-tabindex keyboard nav for the menu (ARIA APG menu-button pattern):
@@ -230,7 +232,7 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
     const Chevron = isVisibleIconShow ? (_jsx(Box, { as: "span", display: "inline-flex", transition: CHEVRON_TRANSITION, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: s.chevron }) })) : undefined;
     const dropDownToggleOption = () => {
         const ButtonToggle = (_jsx(Button, { ref: buttonTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "lg", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: TRIGGER_TRANSITION, ...reducedMotionSx(), ...dropDownButtonStyle }, ...buttonProps, children: _jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
-        const TextToggle = (_jsxs(Flex, { ref: textTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: theme.colors.text[700], borderRadius: "md", transition: ROW_TRANSITION, _hover: { color: theme.colors.accentText }, sx: { ...focusVisibleStyles(theme.colors), ...reducedMotionSx() }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
+        const TextToggle = (_jsxs(Flex, { ref: textTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: rowSpec.fontSize, fontWeight: 500, color: theme.colors.text[700], borderRadius: "md", transition: ROW_TRANSITION, _hover: { color: theme.colors.accentText }, sx: { ...focusVisibleStyles(theme.colors), ...reducedMotionSx() }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     const DropdownContentRender = () => {
@@ -240,7 +242,7 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
                 }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
                     handleListItemClick(option.id, option.label);
                     focusTrigger();
-                }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "md", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: theme.colors.text[700], transition: ROW_TRANSITION, _hover: {
+                }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: rowSpec.mx, px: rowSpec.px, py: rowSpec.py, minH: rowSpec.minH, borderRadius: OPTION_ROW_RADIUS, display: "flex", alignItems: "center", gap: rowSpec.gap, fontSize: rowSpec.fontSize, cursor: "pointer", color: theme.colors.text[700], transition: ROW_TRANSITION, _hover: {
                     bg: hoverTint,
                     color: theme.colors.accentText,
                 }, _focus: {
@@ -253,7 +255,7 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
                     boxShadow: `inset 0 0 0 2px ${theme.colors.focusRing.ring}`,
                 }, borderBottom: divider
                     ? `0.063rem solid ${theme.colors.boxborder[200]}`
-                    : undefined, sx: { "&:last-child": { borderBottom: "none" }, ...reducedMotionSx() }, style: ItemStyle, fontWeight: 500, children: [option.image && (_jsx(Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), _jsx(Box, { as: "span", fontSize: s.fontSize, isTruncated: true, style: LabelStyle, children: option.label })] }, option.id))) }));
+                    : undefined, sx: { "&:last-child": { borderBottom: "none" }, ...reducedMotionSx() }, style: ItemStyle, fontWeight: 500, children: [option.image && (_jsx(Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), _jsx(Box, { as: "span", fontSize: rowSpec.fontSize, isTruncated: true, style: LabelStyle, children: option.label })] }, option.id))) }));
     };
     return (_jsxs(Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && (_jsx(Portal, { children: _jsx(MotionBox, { ref: setMenuRef, position: "fixed", top: `${menuPos.top}px`, left: `${menuPos.left}px`, minW: `${menuPos.width}px`, zIndex: 1500, initial: prefersReducedMotion ? false : { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle, children: DropdownContentRender() }) }))] }));
 });

package/dist/esm/Components/SearchSelect/SearchSelect.js

@@ -6,6 +6,8 @@ import { TextLabel } from "../Common/FormLabel.js";
 import Tag from "../Tag/Tag.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { optionRowSpec } from "../../Theme/tokens/primitives/optionRowSizes.js";
+import { optionRowInk, optionRowWeight } from "../Select/optionRowInk.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import FieldMessage from "../Common/FieldMessage.js";
 import { useFieldIds } from "../Common/useFieldIds.js";
@@ -37,6 +39,7 @@ const normalizeMultiValue = (val) => {
 const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOptionLoading = false, isLoading = false, loadingText = "Loading...", placeholder = "Select", value, searchQuery = "", isMultiple = false, isRequired = false, error = false, errorMessage, helperText, width = "100%", height, size = "sm", isDisabled = false, chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll = false, pagination, insideSelect, isRemoveAllIcon, "aria-label": ariaLabel, }) => {
     var _a, _b, _c, _d, _e;
     const s = getSearchSelectSizeStyles(size);
+    const spec = optionRowSpec(size);
     const emitChange = onChange !== null && onChange !== void 0 ? onChange : onSelect;
     const insideSelectBoxHeight = height !== null && height !== void 0 ? height : s.insideSelectDefaultHeight;
     const [inputValue, setInputValue] = useState(searchQuery);
@@ -456,16 +459,14 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                                 }, children: [_jsxs(Box, { minW: "4.5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, width: insideSelect.width, height: insideSelectBoxHeight, pl: "0.5rem", pr: "0.375rem", children: [insideLabel ? (_jsx(SelectTruncatedLabel, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : (_jsx(Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: theme.colors.textMuted, isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, color: customSelectOpen ? theme.colors.accentText : theme.colors.textMuted, transition: CHEVRON_TRANSITION, transform: customSelectOpen ? "rotate(180deg)" : "rotate(0deg)", children: _jsx(ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && (_jsx(Portal, { children: _jsx(Box, { ref: setInsideSelectMenuRef, id: insideSelectPortalId, position: "fixed", top: `${customSelectPos.top}px`, left: `${customSelectPos.left}px`, zIndex: 1510, bg: theme.colors.surfaceRaised, border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, minW: `${customSelectPos.width}px`, maxW: "20rem", py: 1, overflow: "hidden", children: (_c = insideSelect.option) === null || _c === void 0 ? void 0 : _c.map((item) => {
                                                 var _a;
                                                 const selected = ((_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.id) === item.id;
-                                                return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, minH: s.optionRowMinH, py: s.optionRowPy, px: "0.75rem", fontSize: s.dropdownTextFontSize, fontWeight: selected ? 600 : 500, color: selected
-                                                        ? theme.colors.accentText
-                                                        : theme.colors.text[700], bg: selected ? rowBackgrounds.selected : "transparent", _hover: {
+                                                return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spec.gap, minH: spec.minH, py: spec.py, px: spec.px, fontSize: spec.fontSize, fontWeight: optionRowWeight(selected), color: optionRowInk(theme.colors, selected), bg: selected ? rowBackgrounds.selected : "transparent", _hover: {
                                                         bg: selected
                                                             ? rowBackgrounds.selectedActive
                                                             : rowBackgrounds.active,
                                                     }, cursor: "pointer", onClick: (e) => {
                                                         e.stopPropagation();
                                                         handleCustomSelect(item);
-                                                    }, children: [_jsx(Text, { isTruncated: true, children: item.label }), selected && (_jsx(Check, { size: s.chevronSize - 2, color: theme.colors.accentText }))] }, item.id));
+                                                    }, children: [_jsx(Text, { isTruncated: true, children: item.label }), selected && (_jsx(Check, { size: spec.iconSize, color: theme.colors.accentText }))] }, item.id));
                                             }) }) }))] }));
                         })(), isMultiple
                             ? selectedValues
@@ -497,16 +498,20 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                                         else {
                                             openMenu();
                                         }
-                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", borderRadius: "sm", color: theme.colors.textMuted, cursor: isDisabled ? "not-allowed" : "pointer", sx: focusVisibleStyles(theme.colors), children: isOpen ? (_jsx(ChevronUp, { size: s.chevronSize })) : (_jsx(ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && (_jsx(Portal, { children: _jsxs(Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "xl", overflow: "hidden", bg: theme.colors.surfaceRaised, boxShadow: theme.shadows.lg, display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && (_jsxs(Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, color: theme.colors.text[700], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), _jsx(Text, { fontSize: s.dropdownTextFontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), _jsx(Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.boxborder[200], children: isOptionLoading && filteredOptions.length === 0 ? (_jsxs(Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? (_jsx(Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.textMuted, children: "No results found" })) : (_jsxs(_Fragment, { children: [filteredOptions.map((option, index) => (_jsxs(Box, { id: getOptionId(index), role: "option", "aria-selected": isSelected(option.id), py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: isSelected(option.id)
-                                            ? index === activeIndex
-                                                ? rowBackgrounds.selectedActive
-                                                : rowBackgrounds.selected
-                                            : index === activeIndex
-                                                ? rowBackgrounds.active
-                                                : "transparent", _hover: {
-                                            bg: isSelected(option.id)
-                                                ? rowBackgrounds.selectedActive
-                                                : rowBackgrounds.active,
-                                        }, onClick: () => handleSelect(option), onMouseEnter: () => setActiveIndex(index), display: "flex", alignItems: "center", gap: 2, color: isSelected(option.id) ? theme.colors.accentText : theme.colors.text[700], fontWeight: isSelected(option.id) ? 600 : 400, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [isMultiple && (_jsx(Checkbox, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? (_jsx(_Fragment, { children: option.view })) : (_jsx(Text, { fontSize: s.dropdownTextFontSize, children: option.label }))] }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (_jsxs(Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (_jsxs(Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.boxborder[200], bg: theme.colors.surfaceRaised, display: "flex", alignItems: "center", gap: 2, color: theme.colors.accentText, fontWeight: 500, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: rowBackgrounds.active }, children: [addNew.icon || _jsx(Plus, { size: s.addNewIconSize }), _jsx(Text, { fontSize: s.dropdownTextFontSize, children: addNew.text || "Add New" })] }))] }) })), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", borderRadius: "sm", color: theme.colors.textMuted, cursor: isDisabled ? "not-allowed" : "pointer", sx: focusVisibleStyles(theme.colors), children: isOpen ? (_jsx(ChevronUp, { size: s.chevronSize })) : (_jsx(ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && (_jsx(Portal, { children: _jsxs(Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "xl", overflow: "hidden", bg: theme.colors.surfaceRaised, boxShadow: theme.shadows.lg, display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && (_jsxs(Box, { py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.text[700], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), _jsx(Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), _jsx(Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.boxborder[200], children: isOptionLoading && filteredOptions.length === 0 ? (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? (_jsx(Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : (_jsxs(_Fragment, { children: [filteredOptions.map((option, index) => {
+                                        const selected = isSelected(option.id);
+                                        const singleSelected = selected && !isMultiple;
+                                        return (_jsxs(Box, { id: getOptionId(index), role: "option", "aria-selected": selected, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", bg: selected
+                                                ? index === activeIndex
+                                                    ? rowBackgrounds.selectedActive
+                                                    : rowBackgrounds.selected
+                                                : index === activeIndex
+                                                    ? rowBackgrounds.active
+                                                    : "transparent", _hover: {
+                                                bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
+                                            }, onClick: () => handleSelect(option), onMouseEnter: () => setActiveIndex(index), display: "flex", alignItems: "center", gap: spec.gap, color: optionRowInk(theme.colors, singleSelected), 
+                                            // `view` is consumer JSX with no size of its own; it inherited the 16px body font.
+                                            fontSize: spec.fontSize, fontWeight: optionRowWeight(singleSelected), borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [isMultiple && (_jsx(Checkbox, { isChecked: selected, sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? (_jsx(_Fragment, { children: option.view })) : (_jsx(Text, { isTruncated: true, children: option.label })), singleSelected && (_jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, option.id));
+                                    }), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", justifyContent: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (_jsxs(Box, { py: spec.py, px: spec.px, borderTop: "0.063rem solid", borderColor: theme.colors.boxborder[200], bg: theme.colors.surfaceRaised, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.accentText, fontWeight: 500, minH: spec.minH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: rowBackgrounds.active }, children: [addNew.icon || _jsx(Plus, { size: s.addNewIconSize }), _jsx(Text, { fontSize: spec.fontSize, children: addNew.text || "Add New" })] }))] }) })), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 export default SearchSelect;

package/dist/esm/Components/SearchSelect/searchSelectSize.js

@@ -18,9 +18,6 @@ const SIZE_STYLES = {
         clearIconSize: 10,
         addNewIconSize: 14,
         insideSelectMarginLeft: "-0.5rem",
-        dropdownTextFontSize: "xs",
-        optionRowMinH: "1.5rem",
-        optionRowPy: 1.5,
         checkboxSize: "sm",
     },
     sm: {
@@ -39,9 +36,6 @@ const SIZE_STYLES = {
         clearIconSize: 12,
         addNewIconSize: 16,
         insideSelectMarginLeft: "-0.625rem",
-        dropdownTextFontSize: "sm",
-        optionRowMinH: "2rem",
-        optionRowPy: 2,
         checkboxSize: "sm",
     },
     md: {
@@ -60,9 +54,6 @@ const SIZE_STYLES = {
         clearIconSize: 12,
         addNewIconSize: 16,
         insideSelectMarginLeft: "-0.75rem",
-        dropdownTextFontSize: "sm",
-        optionRowMinH: "2.5rem",
-        optionRowPy: 2,
         checkboxSize: "md",
     },
     lg: {
@@ -81,9 +72,6 @@ const SIZE_STYLES = {
         clearIconSize: 14,
         addNewIconSize: 18,
         insideSelectMarginLeft: "-0.875rem",
-        dropdownTextFontSize: "md",
-        optionRowMinH: "2.75rem",
-        optionRowPy: 2.5,
         checkboxSize: "lg",
     },
 };

package/dist/esm/Components/SegmentedControl/SegmentedControl.js

@@ -35,7 +35,9 @@ export default function SegmentedControl({ options, value, onChange, size = "sm"
     const innerRadius = isUnderlineSlide ? "none" : `calc(${radii.lg} - ${TRACK_PADDING})`;
     const focusShadow = segmentedFocusShadow(colors, trackSurface);
     // Inset, never a border: a border consumes the content box and the absolute pill stops centring.
-    const plateEdge = isBrandSlide && surface ? `inset 0 0 0 1px ${segmentedPlateEdge(colors, surface)}` : undefined;
+    const plateEdge = isBrandSlide
+        ? `inset 0 0 0 1px ${segmentedPlateEdge(colors, surface)}`
+        : undefined;
     // The transparent outline replaces the UA ring and is what Windows high-contrast repaints.
     const segmentFocus = {
         outline: "2px solid transparent",
@@ -82,7 +84,7 @@ export default function SegmentedControl({ options, value, onChange, size = "sm"
             selectAt(enabled[enabled.length - 1]);
         }
     };
-    return (_jsxs(Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? focusShadow : plateEdge, position: "relative", display: "inline-flex", align: "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isBrandSlide ? (surface ? trackSurface : colors.primary.opacity[8]) : isUnderlineSlide ? "transparent" : colors.background[600], w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: TRACK_PADDING, left: 0, h: segmentH, w: `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), options.map((option, index) => {
+    return (_jsxs(Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? focusShadow : plateEdge, position: "relative", display: "inline-flex", align: "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: TRACK_PADDING, left: 0, h: segmentH, w: `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), options.map((option, index) => {
                 const isSelected = option.value === value;
                 return (_jsxs(Box, { as: "button", type: "button", ref: (node) => {
                         refs.current[index] = node;

package/dist/esm/Components/SegmentedControl/segmentedInk.js

@@ -1,23 +1,20 @@
 import { focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
-import { compositeOver } from "../../Theme/tokens/builders/color.js";
 import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
-/** The surface a segment's label really sits on; brandSlide's track is a translucent tint, so composite it. */
+/** The surface a segment's label really sits on. */
 export const segmentedTrackSurface = (variant, colors, surface) => {
-    const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
     if (variant === "underlineSlide")
-        return canvas;
-    // An 8% tint reads on the page canvas; on a coloured bar it composites into the bar and the
-    // control stops looking like a control, so there the track becomes an opaque plate.
-    if (variant === "brandSlide") {
-        return surface ? colors.surfaceRaised : compositeOver(colors.primary.opacity[8], canvas);
-    }
+        return surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
+    // brandSlide paints an opaque plate on every backdrop: a tint composites into an unknown
+    // parent, so its ink was derived from a canvas the control was not actually on.
+    if (variant === "brandSlide")
+        return colors.surfaceRaised;
     return colors.background[600];
 };
 /** Unselected label ink, lifted to AA against the track it is drawn on. */
 export const segmentedRestInk = (colors, trackSurface) => liftToContrast(colors.text[600], trackSurface, AA_NORMAL_TEXT);
 /** A radiogroup is one tab stop, so the group wears the ring: a brand hairline plus the field bloom. */
 export const segmentedFocusShadow = (colors, trackSurface) => `inset 0 0 0 1px ${liftToContrast(colors.primary[500], trackSurface, AA_NON_TEXT)}, ${focusGlowShadow(colors)}`;
-/** On a coloured bar the plate can match the bar's lightness, so its edge carries the boundary.
+/** The plate can match its backdrop's lightness, so its edge carries the boundary.
  * Drawn inset by the caller: a real border consumes the content box and decentres the sliding pill. */
-export const segmentedPlateEdge = (colors, surface) => liftToContrast(colors.boxborder[500], surface, AA_NON_TEXT);
+export const segmentedPlateEdge = (colors, surface) => liftToContrast(colors.boxborder[500], surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main, AA_NON_TEXT);