pixelize-design-library 2.4.2-beta.66 → 2.4.2-beta.68

package/dist/esm/Components/NavLauncher/NavLauncher.js

@@ -4,7 +4,7 @@ import { Search as SearchIcon, X } from "lucide-react";
 import { memo, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
 import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
-import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
 import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
@@ -24,6 +24,7 @@ import { LauncherTabs, panelId, tabId, } from "./LauncherTabs.js";
 import { filterItems, searchLauncherSections, } from "./match.js";
 import NewTabLink from "./NewTabLink.js";
 import PinToggle from "./PinToggle.js";
+import { launcherSlide } from "./launcherMotion.js";
 import { moveResult } from "./resultNavigation.js";
 import { ScopeBar } from "./ScopeBar.js";
 import { copiesOnEnter, countByScope, inScope, layoutSearch, scopeGroups, takeTopHit, } from "./searchLayout.js";
@@ -204,6 +205,7 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
     const isDesktop = useMatchMedia(MD_QUERY, true);
     const isLg = useMatchMedia(LG_QUERY, true);
     const isWide = useMatchMedia(XL_QUERY, false);
+    const isReducedMotion = usePrefersReducedMotion();
     const columns = isWide ? 3 : isDesktop ? 2 : 1;
     const [innerQuery, setInnerQuery] = useState("");
     const [activeIndex, setActiveIndex] = useState(0);
@@ -789,6 +791,7 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
                 borderBottomRightRadius: { base: 0, lg: "16px" },
                 boxShadow: colors.boxShadow.default,
                 overflow: "hidden",
+                motionProps: launcherSlide(isReducedMotion),
                 onKeyDown: onContentKeyDown,
                 ...{ "data-testid": testId },
             }, children: [_jsxs(DrawerHeader, { p: 0, flexShrink: 0, children: [_jsxs(Flex, { "data-testid": "launcher-header-row", align: "center", gap: { base: "8px", md: "12px" }, minH: { base: "60px", md: "68px" }, pl: { base: "12px", md: "18px" }, pr: { base: "8px", md: "12px" }, children: [_jsx(VisuallyHidden, { as: "h2", id: titleId, children: labels.title }), _jsx(SearchField, { inputRef: inputRef, value: query, onChange: setQuery, onKeyDown: onInputKeyDown, labels: labels, placeholder: (_c = currentScope === null || currentScope === void 0 ? void 0 : currentScope.placeholder) !== null && _c !== void 0 ? _c : labels.searchPlaceholder, hint: searchHint, listboxId: listboxId, activeId: isListView && hasResults ? optionId(active) : undefined, isExpanded: isListView, hasResults: hasResults, minW: inlineScopes ? FIELD_MIN_WIDTH : 0 }), inlineScopes, _jsx(Box, { "aria-hidden": true, "data-testid": "launcher-count", display: { base: "none", sm: "block" }, flexShrink: 0, overflow: "hidden", w: countText ? "88px" : "0", opacity: countText ? 1 : 0, textAlign: "right", fontSize: "13px", whiteSpace: "nowrap", color: colors.textMuted, transition: transitionFor(["width", "opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...reducedMotionSx() }, children: countText }), headerActions ? (_jsx(Flex, { align: "center", gap: "4px", flexShrink: 0, children: headerActions })) : null, _jsx(IconButton, { "aria-label": labels.close, icon: _jsx(X, { size: 18, "aria-hidden": true }), variant: "ghost", boxSize: { base: "40px", md: "44px" }, minW: { base: "40px", md: "44px" }, borderRadius: "10px", flexShrink: 0, color: colors.textMuted, onClick: onClose })] }), scopeRow ? (_jsx(Box, { "data-testid": "launcher-scope-row", pl: "7px", pr: "3px", mt: "-6px", pb: "4px", children: scopeRow })) : null] }), _jsx(DrawerBody, { p: 0, display: "flex", flexDirection: "column", overflowY: "hidden", minH: 0, children: _jsxs(Flex, { ref: bodyRef, direction: "column", flex: 1, minH: 0, minW: 0, children: [_jsx(VisuallyHidden, { "data-testid": "launcher-live", "aria-live": "polite", "aria-atomic": "true", children: countText }), _jsx(VisuallyHidden, { "data-testid": "launcher-announce", "aria-live": "polite", "aria-atomic": "true", children: _jsx("span", { children: announcement.text }, announcement.n) }), isTabbed ? (_jsx(LauncherTabs, { tabs: tabs, selected: activeTab, onSelect: setTab, idBase: baseId, label: labels.tabsLabel, onLeaveUp: () => focusField(), onLeaveDown: () => moveFocus("first") })) : null, isLg ? (_jsx(Flex, { direction: "row", flex: 1, minH: 0, minW: 0, children: body })) : (compactBody), dock] }) }), _jsxs(DrawerFooter, { p: 0, minH: "32px", flexShrink: 0, px: "18px", py: "6px", gap: "6px 14px", flexWrap: "wrap", bg: colors.backgroundColor.subtle, fontSize: "xs-minus", color: colors.textMuted, whiteSpace: "nowrap", justifyContent: "flex-start", children: [_jsxs(Flex, { display: { base: "none", md: "flex" }, gap: "6px 14px", align: "center", wrap: "wrap", "aria-hidden": true, sx: { "@media (hover: none)": { display: "none" } }, children: [_jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(Flex, { as: "span", gap: "2px", children: ARROW_KEYS.map((arrow) => (_jsx(Kbd, { size: "xs", children: arrow }, arrow))) }), labels.hintMove] }), _jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(KbdShortcut, { shortcut: "enter", size: "xs" }), _jsx(HintLabel, { text: enterLabel, reserve: enterReserve })] }), _jsxs(Flex, { as: "span", align: "center", gap: "5px", opacity: canOpenInTab ? 1 : 0.45, transition: transitionFor(["opacity"]), sx: reducedMotionSx(), children: [modKeyLabel ? (_jsxs(Flex, { as: "span", gap: "4px", children: [_jsx(Kbd, { size: "xs", children: modKeyLabel }), _jsx(Kbd, { size: "xs", children: ENTER_KEY })] })) : (_jsx(KbdShortcut, { shortcut: "mod+enter", size: "xs" })), labels.hintNewTab] }), _jsxs(Flex, { as: "span", align: "center", gap: "5px", display: { base: "none", lg: "flex" }, children: [_jsx(Kbd, { size: "xs", children: modKeyLabel !== null && modKeyLabel !== void 0 ? modKeyLabel : MOD_KEY }), labels.hintClickNewTab] }), onTogglePin ? (_jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(Kbd, { size: "xs", children: "P" }), labels.hintPin] })) : null, _jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(KbdShortcut, { shortcut: "esc", size: "xs" }), labels.hintClose] })] }), _jsx(Text, { as: "span", ml: "auto", children: labels.footerNote })] })] }) }));

package/dist/esm/Components/NavLauncher/launcherMotion.js

@@ -0,0 +1,11 @@
+import { EASINGS } from "@chakra-ui/react";
+import { motionTransition } from "../../Theme/tokens/primitives/motion.js";
+const ENTER = motionTransition("enter", "out");
+const INSTANT = { duration: 0 };
+const EXIT = { duration: 0.15, ease: [...EASINGS.easeInOut] };
+export const launcherSlide = (isReducedMotion) => ({
+    variants: {
+        enter: { x: 0, y: 0, transition: isReducedMotion ? INSTANT : ENTER },
+        exit: { x: "-100%", y: 0, transition: EXIT },
+    },
+});

package/dist/esm/Components/NavigationBar/NavigationBar.js

@@ -14,6 +14,7 @@ import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 const BACKGROUND_TRANSITION = transitionFor(["background"]);
 // Roomy enough to hover without aiming: the glyph is only 1.25rem.
 const SIDEBAR_TOGGLE_HIT = "2.5rem";
+/** Top bar with sidebar toggle, optional back button and title, a right-hand slot, and an avatar menu of navigation entries plus logout. */
 export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, onSideBarPeek, leading, }) {
     const theme = useCustomTheme();
     const rowBackgrounds = listRowBackgrounds(theme.colors);

package/dist/esm/Components/OrgSwitcher/OrgSwitcher.js

@@ -7,13 +7,16 @@ import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/b
 import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
-import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
-import { optionRowCursorSx } from "../Select/optionRowInk.js";
+import { selectRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { optionRowWeight } from "../Select/optionRowInk.js";
+import { keyboardRingShadow } from "../Select/selectKeyboardRing.js";
+import { selectRowDescriptionInk, selectRowInk } from "../Select/selectRowInk.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { avatarColor, orgInitial, } from "./OrgSwitcherProps.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { OPTION_ROW_RADIUS } from "../../Theme/tokens/primitives/optionRowSizes.js";
 const BACKGROUND_TRANSITION = transitionFor(["background"]);
 const sizeMap = {
     sm: { h: "32px", avatarH: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
@@ -29,12 +32,17 @@ const Avatar = ({ org, boxSize, fontSize, }) => {
     const fill = avatarColor(org.name, chartMode(colors));
     return (_jsx(Flex, { "aria-hidden": "true", "data-initials": orgInitial(org.name), _before: { content: "attr(data-initials)" }, align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: onFilled(fill, colors.white, colors.black), fontSize: fontSize, fontWeight: 700 }));
 };
+/** Session-scoped organization switcher: a trigger plus searchable popover that reports the chosen org via `onChange`. */
 const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, display = "full", }) => {
     var _a, _b, _c;
     const theme = useCustomTheme();
     const isMd = useMatchMedia(MD_QUERY, true);
     const avatarOnly = display === "avatar" || (display === "auto" && !isMd);
-    const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
+    const rowBackgrounds = useMemo(() => selectRowBackgrounds(theme.colors), [theme.colors]);
+    const keyboardRing = {
+        outline: "2px solid transparent",
+        boxShadow: keyboardRingShadow(rowBackgrounds.keyboardRing),
+    };
     const s = sizeMap[size];
     const { isOpen, onOpen, onClose } = useDisclosure();
     const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
@@ -105,7 +113,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     return (_jsxs(Popover, { isOpen: isOpen, onOpen: handlePopoverOpen, onClose: () => {
             onClose();
             setQuery("");
-        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [avatarOnly ? (_jsx(ToolTip, { label: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder, placement: "bottom", isDisabled: isOpen, children: _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: _jsx(PopoverTrigger, { children: trigger }) }) })) : (_jsx(PopoverTrigger, { children: trigger })), _jsx(PopoverContent, { minW: menuMinWidth, maxW: "calc(100vw - 32px)", w: "auto", 
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [avatarOnly ? (_jsx(ToolTip, { label: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder, placement: "bottom", isDisabled: isOpen, children: _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: _jsx(PopoverTrigger, { children: trigger }) }) })) : (_jsx(PopoverTrigger, { children: trigger })), _jsx(PopoverContent, { "aria-label": ariaLabel, minW: menuMinWidth, maxW: "calc(100vw - 32px)", w: "auto", 
                 // NOTE: Chakra's --popper-bg is hardcoded white via dead _dark — without an explicit bg the panel stayed white.
                 bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: "float", _focus: { outline: "none", boxShadow: "float" }, children: _jsxs(PopoverBody, { p: 0, children: [showSearch && (_jsx(Box, { p: 2, borderBottom: "1px solid", borderColor: searchRule, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && filtered.length > 0) {
@@ -118,7 +126,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
                                             optionRefs.current[idx] = el;
                                             if (idx === 0)
                                                 firstOptionRef.current = el;
-                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: "transparent", transition: BACKGROUND_TRANSITION, ...optionRowCursorSx(rowBackgrounds), onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
+                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "calc(100% - 0.5rem)", mx: 1, textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, borderRadius: OPTION_ROW_RADIUS, cursor: "pointer", bg: isActive ? rowBackgrounds.selected : "transparent", transition: BACKGROUND_TRANSITION, _hover: { bg: isActive ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focus: { bg: isActive ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focusVisible: keyboardRing, onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: optionRowWeight(isActive), color: selectRowInk(theme.colors, isActive), overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: selectRowDescriptionInk(theme.colors), overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
                                 }), filtered.length === 0 && (_jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 export default OrgSwitcher;

package/dist/esm/Components/PlanPill/PlanPill.js

@@ -13,6 +13,7 @@ const TONE_ICON = {
     warning: Clock,
     danger: AlertCircle,
 };
+/** Gradient pill button with plan label, optional time-left chip and a tone-based icon; always renders a `<button>`. */
 const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient, maxLabelWidth = "150px", ariaLabel, onClick, }) => {
     const theme = useCustomTheme();
     const c = theme.colors;

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

@@ -7,9 +7,11 @@ import Tag from "../Tag/Tag.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { ruleOn } from "../../Theme/tokens/builders/planeStep.js";
-import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { listRowBackgrounds, selectRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { OPTION_ROW_RADIUS, optionRowSpec } from "../../Theme/tokens/primitives/optionRowSizes.js";
-import { optionRowCursorSx, optionRowFill, optionRowInk, optionRowWeight } from "../Select/optionRowInk.js";
+import { optionRowCursorSx, optionRowInk, optionRowWeight } from "../Select/optionRowInk.js";
+import { keyboardRingShadow } from "../Select/selectKeyboardRing.js";
+import { selectRowFill, selectRowInk } from "../Select/selectRowInk.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import FieldMessage from "../Common/FieldMessage.js";
 import { useFieldIds } from "../Common/useFieldIds.js";
@@ -41,9 +43,9 @@ const normalizeMultiValue = (val) => {
     return [];
 };
 const DECORATIVE_CHECKBOX_SX = { pointerEvents: "none", "& input": { visibility: "hidden" } };
-const OptionRow = React.memo(function OptionRow({ option, index, optionId, isSelected, isActive, isMultiple, spec, colors, rowBackgrounds, checkboxSize, onSelect, onActivate, }) {
+const OptionRow = React.memo(function OptionRow({ option, index, optionId, isSelected, isActive, showRing, isMultiple, spec, colors, rowBackgrounds, checkboxSize, onSelect, onActivate, }) {
     const singleSelected = isSelected && !isMultiple;
-    return (_jsxs(Box, { id: optionId, "data-index": index, role: "option", "aria-selected": isSelected, mx: spec.mx, py: spec.py, px: spec.px, minH: spec.minH, borderRadius: OPTION_ROW_RADIUS, cursor: "pointer", bg: optionRowFill(rowBackgrounds, isActive), onClick: () => onSelect(option), onMouseEnter: () => onActivate(index), display: "flex", alignItems: "center", gap: spec.gap, color: optionRowInk(colors, singleSelected), 
+    return (_jsxs(Box, { id: optionId, "data-index": index, role: "option", "aria-selected": isSelected, mx: spec.mx, py: spec.py, px: spec.px, minH: spec.minH, borderRadius: OPTION_ROW_RADIUS, cursor: "pointer", bg: selectRowFill(rowBackgrounds, { isSelected, isActive }), boxShadow: showRing ? keyboardRingShadow(rowBackgrounds.keyboardRing) : undefined, onClick: () => onSelect(option), onMouseEnter: () => onActivate(index), display: "flex", alignItems: "center", gap: spec.gap, color: selectRowInk(colors, singleSelected), 
         // `view` is consumer JSX with no size of its own; it inherited the 16px body font.
         fontSize: spec.fontSize, fontWeight: optionRowWeight(singleSelected), children: [isMultiple && (_jsx(Checkbox, { isChecked: isSelected, sx: DECORATIVE_CHECKBOX_SX, size: checkboxSize })), option.view ? (_jsx(_Fragment, { children: option.view })) : (_jsx(Text, { flex: 1, minW: 0, isTruncated: true, children: option.label })), singleSelected && (_jsx(Box, { as: Check, size: spec.iconSize, color: colors.accentText, flexShrink: 0 }))] }));
 });
@@ -79,7 +81,8 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         width: 0,
     });
     const theme = useCustomTheme();
-    const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
+    const rowBackgrounds = useMemo(() => selectRowBackgrounds(theme.colors), [theme.colors]);
+    const insideRowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
     // NOTE: inset — the trigger sits flush in the field and the menu clips overflow.
     const insideFocusRing = {
         outline: "2px solid transparent",
@@ -93,6 +96,7 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
     const selectAllId = `${baseId}-select-all`;
     const addNewId = `${baseId}-add-new`;
     const [activeIndex, setActiveIndex] = useState(NO_ROW);
+    const [isKeyboardNav, setIsKeyboardNav] = useState(false);
     const pendingFocusRestoreRef = useRef(false);
     // NOTE: the ARIA host follows real focus; opening from a button doesn't move it.
     const [focusedTrigger, setFocusedTrigger] = useState(null);
@@ -246,7 +250,12 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         setCustomSelectOpen(false);
         setIsOpen(true);
     };
+    const handlePointerActivate = useCallback((index) => {
+        setIsKeyboardNav(false);
+        setActiveIndex(index);
+    }, []);
     const moveActive = (delta) => {
+        setIsKeyboardNav(true);
         setActiveIndex((prev) => stepRow(rowLayout, prev, delta));
     };
     const restoreFocus = () => {
@@ -284,12 +293,14 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
             case "Home":
                 if (isOpen && firstRow(rowLayout) !== NO_ROW && !isTextInputTarget) {
                     e.preventDefault();
+                    setIsKeyboardNav(true);
                     setActiveIndex(firstRow(rowLayout));
                 }
                 break;
             case "End":
                 if (isOpen && lastRow(rowLayout) !== NO_ROW && !isTextInputTarget) {
                     e.preventDefault();
+                    setIsKeyboardNav(true);
                     setActiveIndex(lastRow(rowLayout));
                 }
                 break;
@@ -337,6 +348,7 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
     useEffect(() => {
         if (!isOpen) {
             setActiveIndex(NO_ROW);
+            setIsKeyboardNav(false);
             return;
         }
         const layout = { optionCount: filteredOptions.length, hasSelectAll: hasSelectAllRow, hasAddNew: hasAddNewRow };
@@ -613,7 +625,7 @@ 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, role: "listbox", "aria-label": insidePlaceholder, onKeyDown: handleInsideMenuKeyDown, onFocus: stopFocusBubbling, onBlur: stopFocusBubbling, position: "fixed", style: { top: `${customSelectPos.top}px`, left: `${customSelectPos.left}px` }, zIndex: zIndices.popoverNested, bg: theme.colors.surfaceRaised, border: `${BORDER_WIDTHS.hairline} 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: spec.gap, minH: spec.minH, py: spec.py, px: spec.px, fontSize: spec.fontSize, fontWeight: optionRowWeight(selected), color: optionRowInk(theme.colors, selected), bg: "transparent", ...optionRowCursorSx(rowBackgrounds), cursor: "pointer", role: "option", "aria-selected": selected, tabIndex: -1, _focusVisible: insideFocusRing, onClick: (e) => {
+                                                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: "transparent", ...optionRowCursorSx(insideRowBackgrounds), cursor: "pointer", role: "option", "aria-selected": selected, tabIndex: -1, _focusVisible: insideFocusRing, onClick: (e) => {
                                                         e.stopPropagation();
                                                         handleCustomSelect(item);
                                                     }, children: [_jsx(Text, { isTruncated: true, children: item.label }), selected && (_jsx(Check, { size: spec.iconSize, color: theme.colors.accentText }))] }, item.id));
@@ -652,6 +664,6 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                         top: `${dropdownPos.top}px`,
                         left: `${dropdownPos.left}px`,
                         width: `${dropdownPos.width}px`,
-                    }, zIndex: zIndices.popover, 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: [hasSelectAllRow && (_jsxs(Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, bg: activeIndex === SELECT_ALL_ROW ? rowBackgrounds.active : undefined, 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: `${BORDER_WIDTHS.hairline} solid ${raisedRule(theme.colors)}`, children: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: DECORATIVE_CHECKBOX_SX, size: s.checkboxSize }), _jsx(Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), _jsx(Box, { ref: optionsListRef, flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", py: 1, borderBottom: `${BORDER_WIDTHS.hairline} solid`, borderColor: raisedRule(theme.colors), 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) => (_jsx(OptionRow, { option: option, index: index, optionId: getOptionId(index), isSelected: isSelected(option.id), isActive: index === activeIndex, isMultiple: isMultiple, spec: spec, colors: theme.colors, rowBackgrounds: rowBackgrounds, checkboxSize: s.checkboxSize, onSelect: selectOption, onActivate: setActiveIndex }, 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, { id: addNewId, role: "option", "aria-selected": false, py: spec.py, px: spec.px, borderTop: `${BORDER_WIDTHS.hairline} solid`, borderColor: raisedRule(theme.colors), bg: activeIndex === ADD_NEW_ROW ? rowBackgrounds.active : 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 })] }));
+                    }, zIndex: zIndices.popover, 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: [hasSelectAllRow && (_jsxs(Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, bg: selectRowFill(rowBackgrounds, { isSelected: false, isActive: activeIndex === SELECT_ALL_ROW }), boxShadow: isKeyboardNav && activeIndex === SELECT_ALL_ROW ? keyboardRingShadow(rowBackgrounds.keyboardRing) : undefined, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", onClick: handleSelectAll, onMouseEnter: () => handlePointerActivate(SELECT_ALL_ROW), display: "flex", alignItems: "center", gap: spec.gap, color: selectRowInk(theme.colors, false), borderBottom: `${BORDER_WIDTHS.hairline} solid ${raisedRule(theme.colors)}`, children: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: DECORATIVE_CHECKBOX_SX, size: s.checkboxSize }), _jsx(Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), _jsx(Box, { ref: optionsListRef, flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", py: 1, borderBottom: `${BORDER_WIDTHS.hairline} solid`, borderColor: raisedRule(theme.colors), 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) => (_jsx(OptionRow, { option: option, index: index, optionId: getOptionId(index), isSelected: isSelected(option.id), isActive: index === activeIndex, showRing: isKeyboardNav && index === activeIndex, isMultiple: isMultiple, spec: spec, colors: theme.colors, rowBackgrounds: rowBackgrounds, checkboxSize: s.checkboxSize, onSelect: selectOption, onActivate: handlePointerActivate }, 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, { id: addNewId, role: "option", "aria-selected": false, py: spec.py, px: spec.px, borderTop: `${BORDER_WIDTHS.hairline} solid`, borderColor: raisedRule(theme.colors), bg: activeIndex === ADD_NEW_ROW ? rowBackgrounds.active : theme.colors.surfaceRaised, boxShadow: isKeyboardNav && activeIndex === ADD_NEW_ROW ? keyboardRingShadow(rowBackgrounds.keyboardRing) : undefined, 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/SectionRail/SectionRail.js

@@ -24,6 +24,7 @@ const useMinWidth = (minWidth) => {
     }, [query]);
     return matches;
 };
+/** Section navigation for a long screen: a vertical rail from `collapseBelow` up, a Select below it; dirty sections are flagged. */
 const SectionRail = ({ sections, activeId, onSelect, "aria-label": ariaLabel, dirtyHint, collapseBelow = "md", }) => {
     var _a;
     const { colors } = useCustomTheme();

package/dist/esm/Components/Select/Select.styles.js

@@ -1,6 +1,7 @@
 import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
 import { CONTROL_SIZE_NAMES } from "../../Theme/tokens/primitives/controlSizes.js";
-import { controlSizeStyles, fieldControlStyles } from "../Common/fieldStyles.js";
+import { fieldFocusVisible, focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { FIELD_RADIUS, controlSizeStyles, fieldControlStyles, fieldHoverBorder } from "../Common/fieldStyles.js";
 const sizeField = (size) => {
     const { h, minH, fontSize, px } = controlSizeStyles(size);
     return { field: { h, minH, fontSize, ps: px, pe: "2rem", py: 0 } };
@@ -28,6 +29,30 @@ export const Select = {
     sizes: Object.fromEntries(CONTROL_SIZE_NAMES.map((size) => [size, sizeField(size)])),
     variants: {
         outline: ({ theme }) => ({ field: fieldControlStyles(theme.colors) }),
+        filled: ({ theme }) => ({
+            field: {
+                borderRadius: FIELD_RADIUS,
+                _focusVisible: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) },
+            },
+        }),
+        flushed: ({ theme }) => {
+            const { colors } = theme;
+            return {
+                field: {
+                    borderColor: colors.boxborder[500],
+                    _hover: { borderColor: fieldHoverBorder(colors) },
+                    _focusVisible: {
+                        borderColor: colors.primary[500],
+                        borderBottomWidth: "2px",
+                        ...fieldFocusVisible(colors),
+                    },
+                    _invalid: { borderColor: colors.semanticText.error, borderBottomWidth: "2px", boxShadow: "none" },
+                },
+            };
+        },
+        unstyled: ({ theme }) => ({
+            field: { borderRadius: FIELD_RADIUS, _focusVisible: focusVisibleRing(theme.colors) },
+        }),
     },
     defaultProps: {
         variant: "outline",

package/dist/esm/Components/Select/SelectNative.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback } from "react";
+import { forwardRef, useCallback, useRef, useState } from "react";
 import { Select as ChakraSelect, FormControl } from "@chakra-ui/react";
 import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { TextLabel } from "../Common/FormLabel.js";
@@ -19,8 +19,13 @@ const optionGroups = (options) => {
     return segments;
 };
 /** Native `<select>` renderer — today's `Select`, unchanged, plus optgroup/disabled from `option.group`/`isDisabled`. */
-const SelectNative = forwardRef(function SelectNative({ placeholder = "Select Option", size = DEFAULT_CONTROL_SIZE, variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value = "", colorScheme, label, id, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, error = false, errorMessage, helperText, options = [], width, height, formControlStyle, isInformation = false, informationMessage, selectStyle, noOptionsMessage, }, ref) {
+const SelectNative = forwardRef(function SelectNative({ placeholder = "Select Option", size = DEFAULT_CONTROL_SIZE, variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value, defaultValue, colorScheme, label, id, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, error = false, errorMessage, helperText, options = [], width, height, formControlStyle, isInformation = false, informationMessage, selectStyle, noOptionsMessage, }, ref) {
     const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
+    const wasControlledRef = useRef(false);
+    if (value !== undefined)
+        wasControlledRef.current = true;
+    const shownValue = value !== null && value !== void 0 ? value : (wasControlledRef.current ? "" : internalValue);
     const getOptionsList = useCallback(() => {
         if (!options.length) {
             return _jsx("option", { value: "", children: String(noOptionsMessage !== null && noOptionsMessage !== void 0 ? noOptionsMessage : "No Options") });
@@ -36,9 +41,11 @@ const SelectNative = forwardRef(function SelectNative({ placeholder = "Select Op
         if (isReadOnly)
             return;
         const selectedOption = options.find((option) => option.id.toString() === event.target.value.toString());
-        if (selectedOption)
-            onChange(selectedOption);
+        if (!selectedOption)
+            return;
+        setInternalValue(selectedOption.id);
+        onChange(selectedOption);
     };
-    return (_jsxs(FormControl, { isInvalid: error, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(ChakraSelect, { ref: ref, ...ids.controlProps, name: name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${CONTROL_SIZES[size].iconSize}px`, isInvalid: error, isRequired: isRequired, value: value, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, ...(height != null && height !== "" ? { minH: height, h: height } : {}), children: getOptionsList() }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+    return (_jsxs(FormControl, { isInvalid: error, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(ChakraSelect, { ref: ref, ...ids.controlProps, name: name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${CONTROL_SIZES[size].iconSize}px`, isInvalid: error, isRequired: isRequired, value: shownValue, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, ...(height != null && height !== "" ? { minH: height, h: height } : {}), children: getOptionsList() }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 export default SelectNative;

package/dist/esm/Components/Select/SelectPopup.js

@@ -5,10 +5,13 @@ import { Check, ChevronDown, Plus, X } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
-import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
-import { optionRowDescriptionInk, optionRowFill, optionRowInk, optionRowWeight } from "./optionRowInk.js";
+import { selectRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { optionRowWeight } from "./optionRowInk.js";
+import { SELECT_ROW_DISABLED_CONTENT_OPACITY, selectFilterPlaceholderInk, selectRowDescriptionInk, selectRowDisabledInk, selectRowFill, selectRowInk, } from "./selectRowInk.js";
+import { keyboardRingShadow, NAVIGATION_KEYS } from "./selectKeyboardRing.js";
 import { optionRowSpec } from "../../Theme/tokens/primitives/optionRowSizes.js";
 import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
+import { scrollShadowStylesVertical } from "../../Theme/tokens/builders/scrollShadow.js";
 import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
@@ -29,11 +32,13 @@ const DEFAULT_MAX_VISIBLE_CHIPS = 6;
 const VIRTUAL_OVERSCAN = 4;
 const DECORATIVE_CHECKBOX_SX = { "& input": { visibility: "hidden" } };
 const GROUP_HEADER_ESTIMATE_PX = 29;
-const LIST_PADDING_PX = 4;
 const NO_ROW = -1;
 const SELECT_ALL_ROW = -2;
 const CREATE_ROW = -3;
 const FOOTER_ROW = -4;
+const CHECK_SLOT_MIN_PX = 16;
+const SELECT_ALL_RULE_MARGIN_PX = 4;
+const DISABLED_CONTENT_SX = { "& > *": { opacity: SELECT_ROW_DISABLED_CONTENT_OPACITY } };
 const truncateLabel = (label, max) => max !== undefined && label.length > max ? `${label.slice(0, max)}…` : label;
 const asIdSet = (values) => new Set((values !== null && values !== void 0 ? values : []).map((v) => v.toString()));
 /** Regression-guarded id scheme — tickets e2e (`e2e/tests/helpers/selectV2.ts`) resolves it verbatim. */
@@ -42,19 +47,26 @@ const parseRemToPx = (value, fallbackPx) => {
     const match = /^(\d*\.?\d+)rem$/.exec(value);
     return match ? parseFloat(match[1]) * 16 : fallbackPx;
 };
-const OptionRow = React.memo(function OptionRow({ option, index, listboxId, isSelected, isActive, isMulti, theme, backgrounds, spec, renderOption, onSelect, onActivate, }) {
+const OptionRow = React.memo(function OptionRow({ option, index, listboxId, isSelected, isActive, isMulti, theme, backgrounds, ink, showRing, spec, renderOption, renderOptionEnd, optionAction, checkPlacement, onSelect, onActivate, }) {
     const isSingleSelected = isSelected && !isMulti;
-    return (_jsxs(Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, fontWeight: optionRowWeight(isSingleSelected), color: optionRowInk(theme.colors, isSingleSelected), bg: optionRowFill(backgrounds, isActive), transition: ROW_TRANSITION, sx: reducedMotionSx(), children: [isMulti ? (_jsx(Checkbox, { id: `${optionDomId(listboxId, option.id)}-checkbox`, isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1, sx: DECORATIVE_CHECKBOX_SX })) : null, renderOption ? (_jsx(Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : (_jsxs(_Fragment, { children: [option.icon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, _jsxs(Box, { flex: 1, minW: 0, isTruncated: true, children: [_jsx(Box, { as: "span", isTruncated: true, children: option.label }), option.description ? (_jsx(Box, { as: "span", display: "block", fontSize: spec.descriptionFontSize, color: optionRowDescriptionInk(theme.colors), isTruncated: true, children: option.description })) : null] })] })), isSingleSelected ? (_jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 })) : null] }));
+    const solidDisabledInk = option.isDisabled ? ink.disabled : null;
+    const checkSlotPx = Math.max(CHECK_SLOT_MIN_PX, spec.iconSize);
+    const checkSlot = (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", justifyContent: "center", flexShrink: 0, width: `${checkSlotPx}px`, children: isSingleSelected ? _jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText }) : null }));
+    return (_jsxs(Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, fontWeight: optionRowWeight(isSingleSelected), color: solidDisabledInk !== null && solidDisabledInk !== void 0 ? solidDisabledInk : (isSingleSelected ? ink.selected : ink.rest), bg: selectRowFill(backgrounds, { isSelected, isActive }), boxShadow: showRing ? keyboardRingShadow(backgrounds.keyboardRing) : undefined, transition: ROW_TRANSITION, sx: option.isDisabled && !ink.disabled ? { ...reducedMotionSx(), ...DISABLED_CONTENT_SX } : reducedMotionSx(), children: [!isMulti && checkPlacement === "start" ? checkSlot : null, isMulti ? (_jsx(Checkbox, { id: `${optionDomId(listboxId, option.id)}-checkbox`, isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1, sx: DECORATIVE_CHECKBOX_SX })) : null, renderOption ? (_jsx(Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : (_jsxs(_Fragment, { children: [option.icon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, _jsxs(Box, { flex: 1, minW: 0, isTruncated: true, children: [_jsx(Box, { as: "span", isTruncated: true, children: option.label }), option.description ? (_jsx(Box, { as: "span", display: "block", fontSize: spec.descriptionFontSize, color: solidDisabledInk !== null && solidDisabledInk !== void 0 ? solidDisabledInk : ink.description, isTruncated: true, children: option.description })) : null] })] })), renderOptionEnd ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: renderOptionEnd(option, { isSelected, isActive }) })) : null, optionAction ? (_jsx(Box, { as: "span", "aria-hidden": true, title: optionAction.label, onMouseDown: (event) => event.preventDefault(), onClick: (event) => {
+                    event.stopPropagation();
+                    optionAction.onAction(option);
+                }, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, cursor: "pointer", color: ink.description, _hover: { color: ink.selected }, children: optionAction.icon })) : null, !isMulti && checkPlacement === "end" ? checkSlot : null] }));
 });
 /** The unified `Select`'s popup mode (`native={false}`) — absorbs SelectV2's behaviour, plus clear/create/groups/virtualization. */
 const SelectPopup = forwardRef(function SelectPopup(props, ref) {
     var _a, _b, _c, _d, _e, _f;
-    const { options = [], id, name, placeholder = "Select Option", label, error = false, errorMessage, helperText, isDisabled = false, isReadOnly = false, isRequired = false, isInformation = false, informationMessage, size = DEFAULT_CONTROL_SIZE, isSearchable = true, width, formControlStyle, onBlur, onFocus, renderOption, renderValue, maxMenuHeight = "16rem", defaultOpen = false, isLoading = false, loadingText = "Loading...", onLoadMore, hasMore, onSearchChange, searchValue, defaultSearchValue, searchDebounceMs = 0, filterOptions, isClearable = false, onClear, noOptionsMessage, onCreate, createLabel, createWhen = "no-options", footerAction, searchFields, filterOption, isFieldLoading = false, rightIcon, virtualizeAfter, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, } = props;
+    const { options = [], id, name, placeholder = "Select Option", label, error = false, errorMessage, helperText, isDisabled = false, isReadOnly = false, isRequired = false, isInformation = false, informationMessage, size = DEFAULT_CONTROL_SIZE, isSearchable = true, width, formControlStyle, onBlur, onFocus, renderOption, renderOptionEnd, optionAction, checkPlacement = "end", renderValue, maxMenuHeight = "16rem", defaultOpen = false, isLoading = false, loadingText = "Loading...", onLoadMore, hasMore, onSearchChange, searchValue, defaultSearchValue, searchDebounceMs = 0, filterOptions, isClearable = false, onClear, noOptionsMessage, onCreate, createLabel, createWhen = "no-options", footerAction, searchFields, filterOption, isFieldLoading = false, rightIcon, virtualizeAfter, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, } = props;
     const theme = useCustomTheme();
     const { colors } = theme;
     const { isOpen, onOpen, onClose } = useDisclosure({ defaultIsOpen: defaultOpen });
     const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
     const [activeIndex, setActiveIndex] = useState(-1);
+    const [isKeyboardNav, setIsKeyboardNav] = useState(false);
     const triggerRef = useRef(null);
     const mergedTriggerRef = useMergeRefs(triggerRef, ref);
     const filterInputRef = useRef(null);
@@ -116,6 +128,7 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
         if (!isSearchControlled)
             setUncontrolledSearch("");
         setActiveIndex(-1);
+        setIsKeyboardNav(false);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
     }, [onClose, onBlur, props.isMulti, isSearchControlled]);
     const handleOpen = () => {
@@ -218,13 +231,14 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
         return () => cancelAnimationFrame(frame);
     }, [isOpen, isSearchable]);
     const spec = useMemo(() => optionRowSpec(size), [size]);
+    const listPaddingPx = parseRemToPx(spec.mx, 6);
     const maxMenuHeightPx = useMemo(() => parseRemToPx(maxMenuHeight, 256), [maxMenuHeight]);
     const shouldVirtualize = !!virtualizeAfter && filteredOptions.length > virtualizeAfter;
     const [scrollTop, setScrollTop] = useState(0);
     // A description, an avatar or a renderOption row outgrows the spec's single-line height.
     const [rowHeightPx, setRowHeightPx] = useState(spec.virtualRowHeightPx);
     const [headerHeightPx, setHeaderHeightPx] = useState(GROUP_HEADER_ESTIMATE_PX);
-    const selectAllLeadPx = showSelectAllRow ? rowHeightPx : 0;
+    const selectAllLeadPx = showSelectAllRow ? rowHeightPx + parseInt(BORDER_WIDTHS.hairline, 10) + 2 * SELECT_ALL_RULE_MARGIN_PX : 0;
     const windowTop = Math.max(0, scrollTop - selectAllLeadPx);
     const visibleCount = Math.ceil(maxMenuHeightPx / rowHeightPx) + VIRTUAL_OVERSCAN * 2;
     const groupedRows = useMemo(() => (hasGroups ? buildGroupedRows(filteredOptions) : []), [hasGroups, filteredOptions]);
@@ -292,8 +306,8 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
                 targetTop = groupedLayout.tops[startsGroup ? rowIndex - 1 : rowIndex];
                 targetBottom = groupedLayout.tops[rowIndex + 1];
             }
-            targetTop += selectAllLeadPx + LIST_PADDING_PX;
-            targetBottom += selectAllLeadPx + LIST_PADDING_PX;
+            targetTop += selectAllLeadPx + listPaddingPx;
+            targetBottom += selectAllLeadPx + listPaddingPx;
             if (targetTop < el.scrollTop) {
                 el.scrollTop = targetTop;
                 setScrollTop(targetTop);
@@ -306,7 +320,7 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
             return;
         }
         (_d = (_c = el.querySelector(`[data-index="${activeIndex}"]`)) === null || _c === void 0 ? void 0 : _c.scrollIntoView) === null || _d === void 0 ? void 0 : _d.call(_c, { block: "nearest" });
-    }, [activeIndex, shouldVirtualize, maxMenuHeightPx, rowHeightPx, groupedLayout, groupedRows, selectAllLeadPx, selectAllId, createRowId, footerId]);
+    }, [activeIndex, shouldVirtualize, maxMenuHeightPx, rowHeightPx, groupedLayout, groupedRows, selectAllLeadPx, listPaddingPx, selectAllId, createRowId, footerId]);
     const loadMoreInFlightRef = useRef(false);
     const prevOptionsLengthRef = useRef(options.length);
     const prevIsLoadingRef = useRef(isLoading);
@@ -392,6 +406,8 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
     const handleListKeyDown = (event) => {
         var _a, _b;
         const isTextInput = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT";
+        if (NAVIGATION_KEYS.has(event.key))
+            setIsKeyboardNav(true);
         switch (event.key) {
             case "ArrowDown":
                 event.preventDefault();
@@ -498,8 +514,23 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
                 : showCreateRow && (isCreateImplicit || activeIndex === CREATE_ROW)
                     ? createRowId
                     : undefined;
-    const listScrollStyles = useMemo(() => scrollbarStyles(colors, "overlay"), [colors]);
-    const rowBackgrounds = useMemo(() => listRowBackgrounds(colors), [colors]);
+    const listScrollStyles = useMemo(() => ({
+        ...scrollbarStyles(colors, "overlay"),
+        ...scrollShadowStylesVertical(colors.surfaceRaised),
+    }), [colors]);
+    const rowBackgrounds = useMemo(() => selectRowBackgrounds(colors), [colors]);
+    const rowInks = useMemo(() => ({
+        rest: selectRowInk(colors, false),
+        selected: selectRowInk(colors, true),
+        description: selectRowDescriptionInk(colors),
+        disabled: selectRowDisabledInk(colors),
+    }), [colors]);
+    const filterPlaceholderInk = useMemo(() => selectFilterPlaceholderInk(colors), [colors]);
+    const handlePointerActivate = useCallback((index) => {
+        setIsKeyboardNav(false);
+        setActiveIndex(index);
+    }, []);
+    const ringShadowFor = (isActive) => isActive && isKeyboardNav ? keyboardRingShadow(rowBackgrounds.keyboardRing) : undefined;
     const showChips = !!props.isMulti && !renderValue && selectedOptions.length > 0;
     const chipSize = size === "xs" ? "xs" : "sm";
     const maxVisibleChips = props.isMulti ? ((_a = props.maxVisibleChips) !== null && _a !== void 0 ? _a : DEFAULT_MAX_VISIBLE_CHIPS) : 0;
@@ -542,14 +573,14 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
     return (_jsxs(FormControl, { isInvalid: error, isDisabled: isDisabled, isReadOnly: isReadOnly, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [_jsx(PopoverAnchor, { children: _jsxs(Box, { as: "div", ref: mergedTriggerRef, ...ids.controlProps, role: "combobox", tabIndex: isDisabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-owns": `${listboxId} ${filterInputId}`, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled || undefined, "aria-busy": isFieldLoading || undefined, "data-readonly": isReadOnly || undefined, "aria-required": isRequired || undefined, "aria-label": triggerAriaLabel(), "aria-labelledby": ariaLabelledBy, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", textAlign: "left", cursor: isDisabled ? "not-allowed" : isReadOnly ? "default" : "pointer", "data-testid": dataTestId, sx: triggerSx, children: [_jsx(Box, { as: "span", display: "inline-flex", flexWrap: showChips ? "wrap" : "nowrap", alignItems: "center", gap: showChips ? 1 : 1.5, minW: 0, flex: 1, isTruncated: !showChips, children: showChips ? (_jsxs(_Fragment, { children: [visibleChipOptions.map((option) => (_jsx(Tag, { label: truncateLabel(String(option.label), chipMaxLength), size: chipSize, variant: "subtle", icon: canRemoveChips ? X : undefined, onIconClick: canRemoveChips ? () => handleSelect(option) : undefined }, option.id))), overflowChipCount > 0 && (_jsx(Tag, { label: `+${overflowChipCount}`, size: chipSize, variant: "subtle", colorScheme: "gray" }))] })) : (_jsxs(_Fragment, { children: [triggerIcon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, _jsx(Box, { as: "span", isTruncated: true, children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] })) }), showClear && (_jsx(Box, { as: "button", type: "button", "aria-label": "Clear selection", onClick: handleClear, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, ml: 2, color: colors.textMuted, _hover: { color: colors.text[700] }, children: _jsx(X, { size: CONTROL_SIZES[size].iconSize }) })), isFieldLoading ? (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, ml: 2, children: _jsx(Spinner, { size: "xs", label: "" }) })) : rightIcon ? ("onClick" in rightIcon && isInteractive ? (_jsx(Box, { as: "button", type: "button", "aria-label": rightIcon.ariaLabel, onClick: (event) => {
                                         event.stopPropagation();
                                         rightIcon.onClick();
-                                    }, onKeyDown: (event) => event.stopPropagation(), display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, ml: 2, color: colors.textMuted, _hover: { color: colors.text[700] }, children: rightIcon.icon })) : (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, ml: 2, color: colors.textMuted, children: rightIcon.icon }))) : (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: CHEVRON_TRANSITION, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: colors.textMuted, sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: CONTROL_SIZES[size].iconSize }) }))] }) }), _jsx(Portal, { children: _jsxs(PopoverContent, { "aria-label": (_d = label !== null && label !== void 0 ? label : ariaLabel) !== null && _d !== void 0 ? _d : placeholder, width: "max-content", minWidth: triggerWidth ? `${triggerWidth}px` : undefined, maxWidth: "min(24rem, calc(100vw - 2rem))", borderRadius: "xl", boxShadow: theme.shadows.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [_jsx(Box, { p: spec.mx, borderBottom: `${BORDER_WIDTHS.hairline} solid ${raisedRule(colors)}`, display: isSearchable ? undefined : "none", children: _jsx(Input, { ref: filterInputRef, id: filterInputId, size: size, px: spec.px, placeholder: "Type to filter...", value: currentSearch, onChange: handleFilterChange, "aria-activedescendant": activeDescendantId, "aria-controls": listboxId, "aria-label": "Filter options", tabIndex: isSearchable ? undefined : -1 }) }), _jsxs(Box, { id: listboxId, ref: listRef, role: "listbox", "aria-label": (_e = label !== null && label !== void 0 ? label : ariaLabel) !== null && _e !== void 0 ? _e : placeholder, "aria-multiselectable": props.isMulti || undefined, "aria-busy": isLoading || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: listScrollStyles, onScroll: handleListScroll, children: [filteredOptions.length === 0 && !isLoading && !showCreateRow && (_jsx(Box, { mx: spec.mx, px: spec.px, py: spec.py, fontSize: spec.fontSize, color: colors.textMuted, children: noOptionsMessage !== null && noOptionsMessage !== void 0 ? noOptionsMessage : "No Options" })), showSelectAllRow && (_jsxs(Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, onClick: handleSelectAll, onMouseEnter: () => setActiveIndex(SELECT_ALL_ROW), mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, color: optionRowInk(colors, false), bg: optionRowFill(rowBackgrounds, activeIndex === SELECT_ALL_ROW), transition: ROW_TRANSITION, sx: reducedMotionSx(), children: [_jsx(Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none", tabIndex: -1, sx: DECORATIVE_CHECKBOX_SX }), allFilteredSelected ? "Unselect All" : "Select All"] })), hasGroups
+                                    }, onKeyDown: (event) => event.stopPropagation(), display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, ml: 2, color: colors.textMuted, _hover: { color: colors.text[700] }, children: rightIcon.icon })) : (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, ml: 2, color: colors.textMuted, children: rightIcon.icon }))) : (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: CHEVRON_TRANSITION, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: colors.textMuted, sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: CONTROL_SIZES[size].iconSize }) }))] }) }), _jsx(Portal, { children: _jsxs(PopoverContent, { "aria-label": (_d = label !== null && label !== void 0 ? label : ariaLabel) !== null && _d !== void 0 ? _d : placeholder, width: "max-content", minWidth: triggerWidth ? `${triggerWidth}px` : undefined, maxWidth: "min(24rem, calc(100vw - 2rem))", borderRadius: "xl", boxShadow: theme.shadows.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [_jsx(Box, { p: spec.mx, borderBottom: `${BORDER_WIDTHS.hairline} solid ${raisedRule(colors)}`, display: isSearchable ? undefined : "none", children: _jsx(Input, { ref: filterInputRef, id: filterInputId, size: size, px: spec.px, placeholder: "Type to filter...", _placeholder: filterPlaceholderInk ? { color: filterPlaceholderInk } : undefined, value: currentSearch, onChange: handleFilterChange, "aria-activedescendant": activeDescendantId, "aria-controls": listboxId, "aria-label": "Filter options", tabIndex: isSearchable ? undefined : -1 }) }), _jsxs(Box, { id: listboxId, ref: listRef, role: "listbox", "aria-label": (_e = label !== null && label !== void 0 ? label : ariaLabel) !== null && _e !== void 0 ? _e : placeholder, "aria-multiselectable": props.isMulti || undefined, "aria-busy": isLoading || undefined, maxH: maxMenuHeight, overflowY: "auto", py: spec.mx, sx: listScrollStyles, onScroll: handleListScroll, children: [filteredOptions.length === 0 && !isLoading && !showCreateRow && (_jsx(Box, { mx: spec.mx, px: spec.px, py: spec.py, fontSize: spec.fontSize, color: colors.textMuted, children: noOptionsMessage !== null && noOptionsMessage !== void 0 ? noOptionsMessage : "No Options" })), showSelectAllRow && (_jsxs(Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, onClick: handleSelectAll, onMouseEnter: () => handlePointerActivate(SELECT_ALL_ROW), mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, color: rowInks.rest, bg: selectRowFill(rowBackgrounds, { isSelected: false, isActive: activeIndex === SELECT_ALL_ROW }), boxShadow: ringShadowFor(activeIndex === SELECT_ALL_ROW), transition: ROW_TRANSITION, sx: reducedMotionSx(), children: [_jsx(Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none", tabIndex: -1, sx: DECORATIVE_CHECKBOX_SX }), allFilteredSelected ? "Unselect All" : "Select All"] })), showSelectAllRow && (_jsx(Box, { role: "presentation", mx: spec.mx, my: `${SELECT_ALL_RULE_MARGIN_PX}px`, height: BORDER_WIDTHS.hairline, bg: raisedRule(colors) })), hasGroups
                                             ? (_jsxs(_Fragment, { children: [topPadPx > 0 && _jsx(Box, { height: `${topPadPx}px` }), renderedGroupedRows.map((row) => {
                                                         var _a;
-                                                        return row.kind === "header" ? (_jsx(Box, { "data-group-header": shouldVirtualize ? "" : undefined, mx: spec.mx, px: spec.px, pt: 2, pb: 1, fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.03em", color: colors.textMuted, children: row.group }, row.key)) : (_jsx(OptionRow, { option: row.option, index: row.index, listboxId: listboxId, isSelected: selectedIds.has(row.option.id.toString()), isActive: row.index === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, backgrounds: rowBackgrounds, spec: spec, renderOption: renderOption, onSelect: handleSelect, onActivate: setActiveIndex }, row.key));
+                                                        return row.kind === "header" ? (_jsx(Box, { "data-group-header": shouldVirtualize ? "" : undefined, mx: spec.mx, px: spec.px, pt: 2, pb: 1, fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.03em", color: colors.textMuted, children: row.group }, row.key)) : (_jsx(OptionRow, { option: row.option, index: row.index, listboxId: listboxId, isSelected: selectedIds.has(row.option.id.toString()), isActive: row.index === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, backgrounds: rowBackgrounds, ink: rowInks, showRing: isKeyboardNav && row.index === activeIndex, spec: spec, renderOption: renderOption, renderOptionEnd: renderOptionEnd, optionAction: optionAction, checkPlacement: checkPlacement, onSelect: handleSelect, onActivate: handlePointerActivate }, row.key));
                                                     }), bottomPadPx > 0 && _jsx(Box, { height: `${bottomPadPx}px` })] }))
                                             : (_jsxs(_Fragment, { children: [topPadPx > 0 && _jsx(Box, { height: `${topPadPx}px` }), renderedOptions.map((option, i) => {
                                                         var _a;
-                                                        return (_jsx(OptionRow, { option: option, index: startIndex + i, listboxId: listboxId, isSelected: selectedIds.has(option.id.toString()), isActive: startIndex + i === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, backgrounds: rowBackgrounds, spec: spec, renderOption: renderOption, onSelect: handleSelect, onActivate: setActiveIndex }, option.id));
-                                                    }), bottomPadPx > 0 && _jsx(Box, { height: `${bottomPadPx}px` })] })), showCreateRow && (_jsx(Box, { id: createRowId, role: "option", "aria-selected": false, "data-index": -1, onClick: handleCreate, mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", fontSize: spec.fontSize, fontWeight: 600, color: colors.primary[600], bg: activeDescendantId === createRowId ? rowBackgrounds.active : "transparent", children: createLabel ? createLabel(currentSearch.trim()) : `Create "${currentSearch.trim()}"` })), isLoading && (_jsxs(Box, { mx: spec.mx, px: spec.px, py: spec.py, display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, color: colors.textMuted, children: [_jsx(Spinner, { size: "xs" }), loadingText] })), footerAction && (_jsx(Box, { id: footerId, role: "option", "aria-selected": false, onClick: handleFooterAction, onMouseEnter: () => setActiveIndex(FOOTER_ROW), position: "sticky", bottom: -1, pt: 1, bg: colors.surfaceRaised, borderTop: `${BORDER_WIDTHS.hairline} solid ${raisedRule(colors)}`, children: _jsxs(Box, { mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, fontWeight: 500, color: colors.accentText, bg: activeIndex === FOOTER_ROW ? rowBackgrounds.active : "transparent", children: [(_f = footerAction.icon) !== null && _f !== void 0 ? _f : _jsx(Plus, { size: spec.iconSize }), footerAction.label] }) }))] })] }) })] }), hiddenValues.map((value) => (_jsx("input", { type: "hidden", name: name, value: value }, value))), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                                        return (_jsx(OptionRow, { option: option, index: startIndex + i, listboxId: listboxId, isSelected: selectedIds.has(option.id.toString()), isActive: startIndex + i === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, backgrounds: rowBackgrounds, ink: rowInks, showRing: isKeyboardNav && startIndex + i === activeIndex, spec: spec, renderOption: renderOption, renderOptionEnd: renderOptionEnd, optionAction: optionAction, checkPlacement: checkPlacement, onSelect: handleSelect, onActivate: handlePointerActivate }, option.id));
+                                                    }), bottomPadPx > 0 && _jsx(Box, { height: `${bottomPadPx}px` })] })), showCreateRow && (_jsx(Box, { id: createRowId, role: "option", "aria-selected": false, "data-index": -1, onClick: handleCreate, mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", fontSize: spec.fontSize, fontWeight: 600, color: colors.primary[600], bg: activeDescendantId === createRowId ? rowBackgrounds.active : "transparent", boxShadow: ringShadowFor(activeDescendantId === createRowId), children: createLabel ? createLabel(currentSearch.trim()) : `Create "${currentSearch.trim()}"` })), isLoading && (_jsxs(Box, { mx: spec.mx, px: spec.px, py: spec.py, display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, color: colors.textMuted, children: [_jsx(Spinner, { size: "xs" }), loadingText] })), footerAction && (_jsx(Box, { id: footerId, role: "option", "aria-selected": false, onClick: handleFooterAction, onMouseEnter: () => handlePointerActivate(FOOTER_ROW), position: "sticky", bottom: `-${spec.mx}`, pt: 1, bg: colors.surfaceRaised, borderTop: `${BORDER_WIDTHS.hairline} solid ${raisedRule(colors)}`, children: _jsxs(Box, { mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, fontWeight: 500, color: colors.accentText, bg: activeIndex === FOOTER_ROW ? rowBackgrounds.active : "transparent", boxShadow: ringShadowFor(activeIndex === FOOTER_ROW), children: [(_f = footerAction.icon) !== null && _f !== void 0 ? _f : _jsx(Plus, { size: spec.iconSize }), footerAction.label] }) }))] })] }) })] }), hiddenValues.map((value) => (_jsx("input", { type: "hidden", name: name, value: value }, value))), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 export default SelectPopup;

package/dist/esm/Components/Select/selectKeyboardRing.js

@@ -0,0 +1,3 @@
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+export const NAVIGATION_KEYS = new Set(["ArrowDown", "ArrowUp", "Home", "End", "PageUp", "PageDown"]);
+export const keyboardRingShadow = (ring) => `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${ring}`;

package/dist/esm/Components/Select/selectRowInk.js

@@ -0,0 +1,33 @@
+import { isDarkCanvas, AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast, neutralStep } from "../../Theme/tokens/builders/outlineRung.js";
+import { selectRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { optionRowInk } from "./optionRowInk.js";
+export const SELECT_ROW_DISABLED_CONTENT_OPACITY = 0.55;
+const NEUTRAL_INK_STEPS = {
+    label: 12.8,
+    selected: 15.4,
+    description: 7,
+    disabled: 3.6,
+    placeholder: 4.6,
+};
+// NOTE: light is a brand-free grey ladder off the panel; dark keeps the shared inks.
+const neutralInk = (colors, role) => neutralStep(colors.surfaceRaised, NEUTRAL_INK_STEPS[role]);
+const isDarkPanel = (colors) => isDarkCanvas(colors.surfaceRaised);
+export const selectRowInk = (colors, isSingleSelected) => {
+    if (isDarkPanel(colors))
+        return optionRowInk(colors, isSingleSelected);
+    return neutralInk(colors, isSingleSelected ? "selected" : "label");
+};
+export const selectRowDescriptionInk = (colors) => isDarkPanel(colors)
+    ? liftToContrast(colors.textMuted, selectRowBackgrounds(colors).selectedActive, AA_NORMAL_TEXT)
+    : neutralInk(colors, "description");
+/** Solid ink for a disabled row's content in light; dark dims content by opacity instead (null). */
+export const selectRowDisabledInk = (colors) => isDarkPanel(colors) ? null : neutralInk(colors, "disabled");
+/** Placeholder of the popup's filter input in light; dark keeps the shared placeholder ink (null). */
+export const selectFilterPlaceholderInk = (colors) => isDarkPanel(colors) ? null : neutralInk(colors, "placeholder");
+/** Cursor and selection each paint a rung; the stacked state paints the third. */
+export const selectRowFill = (rows, state) => {
+    if (state.isActive)
+        return state.isSelected ? rows.selectedActive : rows.active;
+    return state.isSelected ? rows.selected : "transparent";
+};