pixelize-design-library 2.4.2-beta.42 → 2.4.2-beta.44

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

@@ -1,20 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Input, InputGroup, Spinner, Text, IconButton, useOutsideClick, Portal, } from "@chakra-ui/react";
 import { Check, ChevronDown, ChevronUp, CircleX, Plus, X } from "lucide-react";
 import { TextLabel } from "../Common/FormLabel.js";
 import Tag from "../Tag/Tag.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
-import HelperText from "../Common/HelperText.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { fieldHoverBorder, getFieldStateStyles } from "../Common/fieldStyles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import SelectTruncatedLabel from "./SelectTruncatedLabel.js";
 import { getSearchSelectSizeStyles } from "./searchSelectSize.js";
 import Checkbox from "../Checkbox/Checkbox.js";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
+const SEGMENT_TRANSITION = transitionFor(["background-color", "box-shadow"]);
+const CHEVRON_TRANSITION = transitionFor(["transform", "color"], "base");
 const normalizeSingleValue = (val) => {
     if (typeof val === "object" && val !== null && "id" in val && "label" in val) {
         return val;
@@ -28,9 +33,11 @@ const normalizeMultiValue = (val) => {
     return [];
 };
 /** Full-featured combobox: search, chips, select-all, paginated infinite scroll — not DOM-virtualized despite the `virtualization` prop. */
-const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading = false, isLoading = false, loadingText = "Loading...", placeholder = "Select", value, searchQuery = "", isMultiple = false, isRequired = false, error = false, errorMessage, helperText, width = "100%", height, size = "md", chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll = false, pagination, insideSelect, isRemoveAllIcon, }) => {
-    var _a, _b;
-    const s = getSearchSelectSizeStyles((size || "md"));
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
+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 emitChange = onChange !== null && onChange !== void 0 ? onChange : onSelect;
     const insideSelectBoxHeight = height !== null && height !== void 0 ? height : s.insideSelectDefaultHeight;
     const [inputValue, setInputValue] = useState(searchQuery);
     const [isOpen, setIsOpen] = useState(false);
@@ -54,18 +61,14 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
     });
     const theme = useCustomTheme();
     const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
-    const generatedId = useId();
-    const baseId = id || generatedId;
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const baseId = ids.inputId;
     const listboxId = `${baseId}-listbox`;
     const insideSelectPortalId = `${baseId}-inside-select`;
     const getOptionId = (index) => `${baseId}-option-${index}`;
     const [activeIndex, setActiveIndex] = useState(-1);
     const pendingFocusRestoreRef = useRef(false);
-    // Which trigger element actually has DOM focus right now, if any. Opening the menu from the
-    // toggle button (or the closed single-value button) doesn't move focus into Input — it stays
-    // wherever it was — so which element is the combobox's ARIA host must follow real focus, not
-    // just "Input is mounted now": falling back to render-condition guessing there would put
-    // aria-activedescendant on an unfocused Input while the still-focused toggle button gets none.
+    // NOTE: the ARIA host follows real focus; opening from a button doesn't move it.
     const [focusedTrigger, setFocusedTrigger] = useState(null);
     const closeMenus = useCallback(() => {
         setIsOpen(false);
@@ -109,55 +112,45 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
             const updated = exists
                 ? selectedValues.filter((v) => v.id !== option.id)
                 : [...selectedValues, { ...option, insideSelectId }]; // add only for new
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
         }
         else if (isMultiple) {
             const exists = selectedValues.find((v) => v.id === option.id);
             const updated = exists
                 ? selectedValues.filter((v) => v.id !== option.id)
                 : [...selectedValues, option];
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
         }
         else {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange(option);
             setIsOpen(false);
             setInputValue("");
         }
     };
     const handleRemove = (id) => {
         const updated = selectedValues.filter((v) => v.id !== id);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+        emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
     };
     const handleClearAll = () => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(isMultiple ? [] : undefined);
+        emitChange === null || emitChange === void 0 ? void 0 : emitChange(isMultiple ? [] : undefined);
         setInputValue("");
     };
     const handleSelectAll = () => {
         const allSelected = filteredOptions.every((opt) => selectedValues.some((sel) => sel.id === opt.id));
         if (allSelected) {
             const updated = selectedValues.filter((sel) => !filteredOptions.some((opt) => opt.id === sel.id));
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
         }
         else {
             const filteredNotSelected = filteredOptions.filter((opt) => !selectedValues.some((sel) => sel.id === opt.id));
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selectedValues, ...filteredNotSelected]);
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange([...selectedValues, ...filteredNotSelected]);
         }
         setInputValue("");
     };
     const activeOptionId = isOpen && activeIndex >= 0 && filteredOptions[activeIndex]
         ? getOptionId(activeIndex)
         : undefined;
-    // Exactly one of {Input, the closed single-select trigger button, the toggle-dropdown
-    // button} is the field's authoritative combobox host at any moment — mirrors the render
-    // conditions below (Input when it's mounted, else the closed single-select trigger button,
-    // else the toggle-dropdown button, which is present in every other state bar `isLoading`/a
-    // custom `rightIcon` override — both flagged as residual gaps, not fixed here). Only that
-    // one element gets `role="combobox"` + `aria-activedescendant`: axe's `aria-allowed-attr`
-    // correctly rejects `aria-activedescendant` on a plain (button-role) element, so the other,
-    // non-primary trigger(s) that happen to render alongside it (e.g. the toggle button next to
-    // the closed single-value button) only get the plain disclosure attributes below.
-    // Real focus wins when we have it; otherwise fall back to guessing from render state (nothing
-    // has been focused yet, e.g. on first render).
+    // One element hosts the field's ARIA at a time: real focus wins, else render state.
     const primaryTarget = focusedTrigger !== null && focusedTrigger !== void 0 ? focusedTrigger : (isOpen || inputValue || !selectedValues.length
         ? "input"
         : !isMultiple && selectedValues.length === 1
@@ -168,20 +161,32 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         "aria-expanded": isOpen,
         "aria-controls": isOpen ? listboxId : undefined,
     };
+    const validityA11yProps = {
+        "aria-invalid": ids.controlProps["aria-invalid"],
+        "aria-describedby": ids.describedBy,
+        "aria-required": isRequired || undefined,
+    };
+    // role="combobox" is invalid on a native <button>, so only Input carries it.
     const comboboxA11yProps = (target) => {
         const isPrimary = primaryTarget === target;
-        if (isPrimary) {
-            return { role: "combobox", ...disclosureA11yProps, "aria-activedescendant": activeOptionId };
+        if (target === "input") {
+            if (!isPrimary)
+                return {};
+            return {
+                role: "combobox",
+                ...disclosureA11yProps,
+                "aria-owns": listboxId,
+                "aria-activedescendant": activeOptionId,
+                ...validityA11yProps,
+            };
         }
-        // Native <input>'s implicit role is "textbox", which — unlike "button" — doesn't validly
-        // support aria-expanded/haspopup/controls at all (axe's aria-allowed-attr correctly rejects
-        // it): only expose disclosure state on Input once it's actually the focused combobox host.
-        // The trigger/toggle buttons keep native role="button" either way, which does support them.
-        return target === "input" ? {} : disclosureA11yProps;
+        return { ...disclosureA11yProps, ...(isPrimary ? validityA11yProps : {}) };
     };
     // Opens only — matches SelectV2's convention of a first ArrowDown/Enter/Space that opens with
     // nothing highlighted yet, and a second keypress that moves onto the first/last option.
     const openMenu = () => {
+        if (isDisabled)
+            return;
         requestExclusiveOpen();
         setCustomSelectOpen(false);
         setIsOpen(true);
@@ -198,20 +203,13 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
     const restoreFocus = () => {
         pendingFocusRestoreRef.current = true;
     };
-    // ArrowDown/Up open the closed control and then move the aria-activedescendant highlight
-    // (wrapping at both ends, matching SelectV2's convention). Home/End are skipped while the
-    // event target is the text input so they still move the text cursor, not the highlight.
-    //
-    // Only reacts when the key originated on one of the three combobox trigger elements, not
-    // merely bubbled up to this Box from some other focusable descendant — a Tag's own "Remove"
-    // button lives inside this same Box, and without this guard its Enter/Space presses were
-    // being intercepted here (e.g. re-opening the menu) instead of reaching Tag's click handler.
+    // NOTE: only reacts to keys from the combobox triggers — without this guard, Tag's own "Remove" button lost its clicks.
     const handleControlKeyDown = (e) => {
         const target = e.target;
         const isKnownTrigger = target === inputRef.current ||
             target === triggerButtonRef.current ||
             target === toggleButtonRef.current;
-        if (!isKnownTrigger)
+        if (!isKnownTrigger || isDisabled)
             return;
         const isTextInputTarget = target.tagName === "INPUT";
         switch (e.key) {
@@ -285,11 +283,7 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         }
         setActiveIndex((prev) => (prev >= 0 && prev < filteredOptions.length ? prev : -1));
     }, [isOpen, filteredOptions.length]);
-    // A keyboard-driven close (Escape, or Enter selecting in single-select) can unmount the
-    // focused Input as the control collapses to the trigger button, which silently drops focus to
-    // <body>. Only step in when that actually happened — focus staying right where it was (e.g.
-    // Escape pressed on the toggle button, which never unmounts) must be left alone: forcing focus
-    // onto Input here would fire its own onFocus handler and reopen the menu right after closing it.
+    // NOTE: only restores focus when a keyboard close actually unmounted Input and dropped focus to body.
     useEffect(() => {
         var _a, _b, _c, _d;
         if (!pendingFocusRestoreRef.current)
@@ -439,26 +433,18 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
             window.removeEventListener("resize", onReposition);
         };
     }, [isOpen, updateDropdownPos]);
-    return (_jsxs(Box, { ref: containerRef, width: width, position: "relative", children: [label && (_jsx(TextLabel, { label: label, id: baseId, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? informationMessage : information === null || information === void 0 ? void 0 : information.informationMessage })), _jsx(InputGroup, { size: size, children: _jsxs(Box, { as: "div", ref: controlRef, w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
-                        ? theme.colors.semanticText.error
-                        : focused
-                            ? theme.colors.primary[500]
-                            : theme.colors.boxborder[500], borderRadius: "lg", bg: theme.colors.background[50], boxShadow: focused
-                        ? error
-                            ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`
-                            : `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`
-                        : error
-                            ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`
-                            : "none", transition: "box-shadow 0.2s, border-color 0.2s", onKeyDown: handleControlKeyDown, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onClick: () => openMenu(), children: [insideSelect && (() => {
-                            var _a, _b, _c, _d, _e;
+    return (_jsxs(Box, { ref: containerRef, width: width, position: "relative", children: [label && (_jsx(TextLabel, { label: label, id: baseId, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? informationMessage : information === null || information === void 0 ? void 0 : information.informationMessage })), _jsx(InputGroup, { size: size, children: _jsxs(Box, { as: "div", ref: controlRef, w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, ...getFieldStateStyles(theme, { error, focused, disabled: isDisabled }), _hover: focused || error || isDisabled ? undefined : { borderColor: fieldHoverBorder(theme.colors) }, sx: reducedMotionSx(), "aria-disabled": isDisabled || undefined, onKeyDown: handleControlKeyDown, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onClick: () => openMenu(), children: [insideSelect && (() => {
+                            var _a, _b, _c;
                             const insideLabel = (_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.label;
                             const insidePlaceholder = (_b = insideSelect.placeholder) !== null && _b !== void 0 ? _b : "Select";
                             return (_jsxs(Box, { position: "relative", ref: customSelectRef, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: "0.063rem solid", borderColor: theme.colors.boxborder[200], bg: customSelectOpen
                                     ? rowBackgrounds.active
-                                    : theme.colors.background[400], borderLeftRadius: "md", borderRightRadius: 0, transition: "background 0.15s ease, box-shadow 0.15s ease", boxShadow: customSelectOpen
+                                    : theme.colors.background[400], borderLeftRadius: "md", borderRightRadius: 0, transition: SEGMENT_TRANSITION, boxShadow: customSelectOpen
                                     ? `inset 0 0 0 0.063rem ${theme.colors.primary[500]}`
                                     : "none", onClick: (e) => {
                                     e.stopPropagation();
+                                    if (isDisabled)
+                                        return;
                                     setIsOpen(false);
                                     if (customSelectOpen) {
                                         setCustomSelectOpen(false);
@@ -467,7 +453,7 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                                         requestExclusiveOpen();
                                         setCustomSelectOpen(true);
                                     }
-                                }, 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: placeholderInk(theme.colors), 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: "transform 0.2s ease, color 0.15s ease", 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.background[50], border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "lg", boxShadow: (_d = (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.md) !== null && _d !== void 0 ? _d : "md", minW: `${customSelectPos.width}px`, maxW: "20rem", py: 1, overflow: "hidden", children: (_e = insideSelect.option) === null || _e === void 0 ? void 0 : _e.map((item) => {
+                                }, 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
@@ -483,26 +469,26 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                                             }) }) }))] }));
                         })(), isMultiple
                             ? selectedValues
-                                .slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length)
+                                .slice(0, (_a = chip === null || chip === void 0 ? void 0 : chip.maxChips) !== null && _a !== void 0 ? _a : selectedValues.length)
                                 .map((item) => (_jsx(Tag, { label: (chip === null || chip === void 0 ? void 0 : chip.maxText) && item.label.length > chip.maxText
                                     ? item.label.slice(0, chip.maxText) + "…"
-                                    : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? () => handleRemove(item === null || item === void 0 ? void 0 : item.id) : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? CircleX : undefined, colorScheme: "gray", size: s.tagSize }, item.id)))
+                                    : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) && !isDisabled ? () => handleRemove(item.id) : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) && !isDisabled ? CircleX : undefined, colorScheme: "gray", size: s.tagSize }, item.id)))
                             : selectedValues.length === 1 &&
-                                !isOpen && (_jsx(Box, { as: "button", type: "button", ref: triggerButtonRef, id: primaryTarget === "button" ? baseId : undefined, ...comboboxA11yProps("button"), "aria-label": !label ? String((_b = (_a = selectedValues[0]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "") : undefined, onFocus: () => setFocusedTrigger("button"), onBlur: () => setFocusedTrigger((prev) => (prev === "button" ? null : prev)), onClick: () => openMenu(), fontSize: s.fieldFontSize, color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0, display: "flex", alignItems: "center", flex: "1", minW: 0, children: _jsx(SelectTruncatedLabel, { label: String(selectedValues[0].label), maxWidth: "calc(100% - 2rem)", fontSize: s.fieldFontSize }) })), (chip === null || chip === void 0 ? void 0 : chip.maxChips) && isMultiple && selectedValues.length > chip.maxChips && (_jsx(Tag, { label: `+ ${selectedValues.length - chip.maxChips}`, colorScheme: "gray", size: s.tagSize }, "extra-count")), (isOpen || inputValue || !selectedValues.length) && (_jsx(Input, { ref: inputRef, id: primaryTarget === "input" ? baseId : undefined, "aria-autocomplete": "list", ...comboboxA11yProps("input"), variant: "unstyled", size: size, h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, flex: "1", 
+                                !isOpen && (_jsx(Box, { as: "button", type: "button", ref: triggerButtonRef, disabled: isDisabled, id: primaryTarget === "button" ? baseId : undefined, ...comboboxA11yProps("button"), "aria-label": label ? `${label}: ${String((_c = (_b = selectedValues[0]) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : "")}` : String((_e = (_d = selectedValues[0]) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : ""), onFocus: () => setFocusedTrigger("button"), onBlur: () => setFocusedTrigger((prev) => (prev === "button" ? null : prev)), onClick: () => openMenu(), fontSize: s.fieldFontSize, color: theme.colors.text[900], background: "transparent", border: "none", cursor: "pointer", p: 0, display: "flex", alignItems: "center", flex: "1", minW: 0, children: _jsx(SelectTruncatedLabel, { label: String(selectedValues[0].label), maxWidth: "calc(100% - 2rem)", fontSize: s.fieldFontSize }) })), (chip === null || chip === void 0 ? void 0 : chip.maxChips) !== undefined && isMultiple && selectedValues.length > chip.maxChips && (_jsx(Tag, { label: `+ ${selectedValues.length - chip.maxChips}`, colorScheme: "gray", size: s.tagSize }, "extra-count")), (isOpen || inputValue || !selectedValues.length) && (_jsx(Input, { ref: inputRef, id: primaryTarget === "input" ? baseId : undefined, "aria-autocomplete": "list", "aria-label": label ? undefined : ariaLabel, ...comboboxA11yProps("input"), variant: "unstyled", size: size, h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, flex: "1", 
                             // minW="5rem"
-                            minW: "0", value: inputValue, onChange: (e) => setInputValue(e.target.value), onFocus: () => {
+                            minW: "0", value: inputValue, isInvalid: error && primaryTarget === "input", isDisabled: isDisabled, _disabled: { cursor: "not-allowed" }, onChange: (e) => setInputValue(e.target.value), onFocus: () => {
                                 setFocused(true);
                                 setFocusedTrigger("input");
                                 openMenu();
                             }, onBlur: () => {
                                 setFocused(false);
                                 setFocusedTrigger((prev) => (prev === "input" ? null : prev));
-                            }, placeholder: selectedValues.length && !isOpen ? "" : placeholder })), _jsxs(Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && (_jsx(ToolTip, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: _jsx(IconButton, { icon: _jsx(X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
+                            }, placeholder: selectedValues.length && !isOpen ? "" : placeholder })), _jsxs(Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && !isDisabled && (_jsx(ToolTip, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: _jsx(IconButton, { icon: _jsx(X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
                                             bg: "transparent",
                                             _hover: { bg: "transparent" },
                                             _active: { bg: "transparent" },
-                                            _focus: { boxShadow: "none", bg: "transparent" },
-                                        } }) })), isLoading ? (_jsx(Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? (_jsx(IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: s.iconButtonSize, onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : (_jsx(Box, { as: "button", type: "button", ref: toggleButtonRef, id: primaryTarget === "toggle" ? baseId : undefined, ...comboboxA11yProps("toggle"), onFocus: () => setFocusedTrigger("toggle"), onBlur: () => setFocusedTrigger((prev) => (prev === "toggle" ? null : prev)), onClick: (e) => {
+                                            ...focusVisibleStyles(theme.colors),
+                                        } }) })), isLoading ? (_jsx(Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? (_jsx(IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: s.iconButtonSize, onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : (_jsx(Box, { as: "button", type: "button", ref: toggleButtonRef, disabled: isDisabled, id: primaryTarget === "toggle" ? baseId : undefined, ...comboboxA11yProps("toggle"), onFocus: () => setFocusedTrigger("toggle"), onBlur: () => setFocusedTrigger((prev) => (prev === "toggle" ? null : prev)), onClick: (e) => {
                                         e.preventDefault();
                                         e.stopPropagation();
                                         if (isOpen) {
@@ -511,7 +497,7 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                                         else {
                                             openMenu();
                                         }
-                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", 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: "sm", bg: theme.colors.background[50], boxShadow: "md", display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && (_jsxs(Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, 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, 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)
+                                    }, "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
@@ -521,6 +507,6 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                                             bg: isSelected(option.id)
                                                 ? rowBackgrounds.selectedActive
                                                 : rowBackgrounds.active,
-                                        }, onClick: () => handleSelect(option), onMouseEnter: () => setActiveIndex(index), display: "flex", alignItems: "center", gap: 2, 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, 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.background[50], display: "flex", alignItems: "center", gap: 2, 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" })] }))] }) })), helperText && !error && _jsx(HelperText, { helperText: helperText }), error && _jsx(ErrorMessage, { errorMessage: errorMessage })] }));
+                                        }, 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 })] }));
 };
 export default SearchSelect;

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

@@ -1,16 +1,19 @@
+// Layout tokens for SearchSelect so `size` matches Chakra input density (xs-lg).
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+const innerHeight = (size) => `calc(${CONTROL_SIZES[size].height} - 2px)`;
 const SIZE_STYLES = {
     xs: {
-        minH: "1.5rem",
+        minH: CONTROL_SIZES.xs.height,
         px: 2,
         pr: "1.75rem",
         gap: "0.25rem",
         fieldFontSize: "xs",
-        fieldHeight: "1.5rem",
+        fieldHeight: innerHeight("xs"),
         chevronSize: 14,
         iconButtonSize: "xs",
         tagSize: "sm",
         spinnerSize: "sm",
-        insideSelectDefaultHeight: "1.5rem",
+        insideSelectDefaultHeight: innerHeight("xs"),
         rightOffset: "0.5rem",
         clearIconSize: 10,
         addNewIconSize: 14,
@@ -21,17 +24,17 @@ const SIZE_STYLES = {
         checkboxSize: "sm",
     },
     sm: {
-        minH: "2rem",
+        minH: CONTROL_SIZES.sm.height,
         px: 2.5,
         pr: "1.85rem",
         gap: "0.3rem",
         fieldFontSize: "sm",
-        fieldHeight: "2rem",
+        fieldHeight: innerHeight("sm"),
         chevronSize: 16,
         iconButtonSize: "sm",
         tagSize: "sm",
         spinnerSize: "sm",
-        insideSelectDefaultHeight: "2rem",
+        insideSelectDefaultHeight: innerHeight("sm"),
         rightOffset: "0.5rem",
         clearIconSize: 12,
         addNewIconSize: 16,
@@ -42,17 +45,17 @@ const SIZE_STYLES = {
         checkboxSize: "sm",
     },
     md: {
-        minH: "2.5rem",
+        minH: CONTROL_SIZES.md.height,
         px: 3,
         pr: "2rem",
         gap: "0.375rem",
         fieldFontSize: "sm",
-        fieldHeight: "2.5rem",
+        fieldHeight: innerHeight("md"),
         chevronSize: 16,
         iconButtonSize: "sm",
         tagSize: "sm",
         spinnerSize: "sm",
-        insideSelectDefaultHeight: "2.5rem",
+        insideSelectDefaultHeight: innerHeight("md"),
         rightOffset: "0.75rem",
         clearIconSize: 12,
         addNewIconSize: 16,
@@ -63,17 +66,17 @@ const SIZE_STYLES = {
         checkboxSize: "md",
     },
     lg: {
-        minH: "3rem",
+        minH: CONTROL_SIZES.lg.height,
         px: 4,
         pr: "2.25rem",
         gap: "0.5rem",
         fieldFontSize: "sm",
-        fieldHeight: "3rem",
+        fieldHeight: innerHeight("lg"),
         chevronSize: 18,
         iconButtonSize: "md",
         tagSize: "md",
         spinnerSize: "md",
-        insideSelectDefaultHeight: "3rem",
+        insideSelectDefaultHeight: innerHeight("lg"),
         rightOffset: "0.75rem",
         clearIconSize: 14,
         addNewIconSize: 18,
@@ -84,9 +87,6 @@ const SIZE_STYLES = {
         checkboxSize: "lg",
     },
 };
-/**
- * Returns layout and child control tokens for a SearchSelect `size`.
- */
 export function getSearchSelectSizeStyles(size) {
     var _a;
     return (_a = SIZE_STYLES[size]) !== null && _a !== void 0 ? _a : SIZE_STYLES.md;

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

@@ -1,40 +1,47 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
 import { Box, Flex } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
-const SIZES = {
-    sm: { h: "1.625rem", px: "0.625rem", fontSize: "0.75rem" },
-    md: { h: "2rem", px: "0.875rem", fontSize: "0.8125rem" },
-};
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { compositeOver } from "../../Theme/tokens/builders/color.js";
+import Tag from "../Tag/Tag.js";
+import { useSlidingPill } from "./useSlidingPill.js";
+const TRACK_PADDING = "0.125rem";
+const UNDERLINE_WIDTH = "0.0625rem";
+const SLIDE = transitionFor(["transform", "width"], "base");
+const MAX_COUNT = 99;
+const COUNT_TAG_SIZE = { sm: "xs", md: "sm", lg: "md" };
+const formatCount = (count) => (count > MAX_COUNT ? `${MAX_COUNT}+` : `${count}`);
 /** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
-export default function SegmentedControl({ options, value, onChange, size = "md", isFullWidth = false, variant = "default", "aria-label": ariaLabel, }) {
+export default function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth = false, variant = "default", "aria-label": ariaLabel, }) {
     const { colors } = useCustomTheme();
-    const dims = SIZES[size];
-    const refs = useRef([]);
-    const trackRef = useRef(null);
+    const control = CONTROL_SIZES[size];
     const isBrandSlide = variant === "brandSlide";
     const isUnderlineSlide = variant === "underlineSlide";
     const hasIndicator = isBrandSlide || isUnderlineSlide;
     const brandFill = resolveFilledSurface(colors.primary, colors);
-    const [pill, setPill] = useState(null);
+    // brandSlide's track is a translucent tint — composite it before measuring contrast.
+    const trackSurface = isUnderlineSlide
+        ? colors.backgroundColor.main
+        : isBrandSlide
+            ? compositeOver(colors.primary.opacity[8], colors.backgroundColor.main)
+            : colors.background[600];
+    const restInk = liftToContrast(colors.text[600], trackSurface, AA_NORMAL_TEXT);
+    const segmentH = `calc(${control.height} - ${isUnderlineSlide ? UNDERLINE_WIDTH : `2 * ${TRACK_PADDING}`})`;
     const selectedIndex = options.findIndex((o) => o.value === value);
     const enabled = options.reduce((acc, o, i) => (o.isDisabled ? acc : [...acc, i]), []);
     // WAI-APG: with nothing selected, the first enabled segment owns the tab stop.
     const tabIndex = selectedIndex >= 0 ? selectedIndex : enabled[0];
-    useLayoutEffect(() => {
-        if (!hasIndicator)
-            return;
-        const track = trackRef.current;
-        const node = refs.current[selectedIndex];
-        if (!track || !node) {
-            setPill(null);
-            return;
-        }
-        const trackRect = track.getBoundingClientRect();
-        const nodeRect = node.getBoundingClientRect();
-        setPill({ left: nodeRect.left - trackRect.left, width: nodeRect.width });
-    }, [hasIndicator, selectedIndex, options, isFullWidth, size]);
+    const { trackRef, itemRefs: refs, pill } = useSlidingPill(hasIndicator, selectedIndex, [
+        options,
+        isFullWidth,
+        size,
+    ]);
     const selectAt = (index) => {
         var _a;
         (_a = refs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -64,23 +71,20 @@ export default function SegmentedControl({ options, value, onChange, size = "md"
             selectAt(enabled[enabled.length - 1]);
         }
     };
-    return (_jsxs(Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, position: "relative", display: "inline-flex", align: "center", gap: isUnderlineSlide ? "0" : "0.125rem", p: isUnderlineSlide ? "0" : "0.125rem", borderRadius: isUnderlineSlide ? "none" : "md", borderBottom: isUnderlineSlide ? `0.0625rem solid ${colors.boxborder[200]}` : undefined, bg: isBrandSlide ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : colors.background[600], w: isFullWidth ? "100%" : "fit-content", children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: dims.h, w: `${pill.width}px`, borderRadius: "base", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), 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: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), options.map((option, index) => {
+    return (_jsxs(Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, 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 ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : colors.background[600], w: isFullWidth ? "100%" : "fit-content", children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: TRACK_PADDING, left: 0, h: segmentH, w: `${pill.width}px`, borderRadius: "lg", 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;
-                    }, role: "radio", "aria-checked": isSelected, disabled: option.isDisabled, tabIndex: index === tabIndex ? 0 : -1, onClick: () => onChange(option.value), position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flex: isFullWidth ? "1" : undefined, h: dims.h, px: dims.px, borderRadius: isUnderlineSlide ? "none" : "base", borderWidth: "1px", borderStyle: "solid", borderColor: hasIndicator
+                    }, role: "radio", "aria-checked": isSelected, disabled: option.isDisabled, tabIndex: index === tabIndex ? 0 : -1, onClick: () => onChange(option.value), position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flex: isFullWidth ? "1" : undefined, h: segmentH, px: control.paddingX, borderRadius: isUnderlineSlide ? "none" : "lg", borderWidth: "1px", borderStyle: "solid", borderColor: hasIndicator
                         ? "transparent"
                         : isSelected
                             ? colors.primary.opacity[32]
                             : "transparent", bg: hasIndicator ? "transparent" : isSelected ? colors.backgroundColor.light : "transparent", boxShadow: hasIndicator ? "none" : isSelected ? "sm" : "none", color: isBrandSlide
                         ? isSelected
                             ? brandFill.color
-                            : colors.text[600]
+                            : restInk
                         : isSelected
                             ? colors.accentText
-                            : colors.text[600], fontSize: dims.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: "color 0.2s ease", _hover: option.isDisabled || isSelected ? undefined : { color: colors.text[900] }, _focusVisible: {
-                        outline: "none",
-                        boxShadow: `0 0 0 2px ${colors.primary[300]}`,
-                    }, children: [option.icon, option.label] }, option.value));
+                            : restInk, fontSize: control.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: transitionFor(["color"]), _hover: option.isDisabled || isSelected ? undefined : { color: colors.text[900] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [option.icon, option.label, option.count != null && (_jsx(Tag, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
             })] }));
 }

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

@@ -0,0 +1,22 @@
+import { useLayoutEffect, useRef, useState } from "react";
+/** Measures the selected item's DOM rect for a sliding pill/underline; shared by SegmentedControl and TableToggle. */
+export function useSlidingPill(enabled, selectedIndex, extraDeps) {
+    const trackRef = useRef(null);
+    const itemRefs = useRef([]);
+    const [pill, setPill] = useState(null);
+    useLayoutEffect(() => {
+        if (!enabled)
+            return;
+        const track = trackRef.current;
+        const node = itemRefs.current[selectedIndex];
+        if (!track || !node) {
+            setPill(null);
+            return;
+        }
+        const trackRect = track.getBoundingClientRect();
+        const nodeRect = node.getBoundingClientRect();
+        setPill({ left: nodeRect.left - trackRect.left, width: nodeRect.width });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled, selectedIndex, ...extraDeps]);
+    return { trackRef, itemRefs, pill };
+}