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

package/dist/esm/Components/SelectSearch/SelectSearch.js

@@ -1,13 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
-import { Box, Input, Spinner, VStack, Text, InputGroup, InputRightElement, HStack, Tag, TagLabel, TagCloseButton, Avatar, FormControl, } from "@chakra-ui/react";
+import { Box, Input, Spinner, VStack, Text, InputGroup, InputRightElement, HStack, Tag, TagLabel, TagCloseButton, FormControl, } from "@chakra-ui/react";
+import Avatar from "../Avatar/Avatar.js";
 import { TextLabel } from "../Common/FormLabel.js";
-import { FIELD_RADIUS, fieldFocusRing } from "../Common/fieldStyles.js";
+import { controlSizeStyles, fieldControlStyles } from "../Common/fieldStyles.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { PlusIcon } from "lucide-react";
-import ErrorMessage from "../Common/ErrorMessage.js";
+const ROW_TRANSITION = transitionFor(["background-color"]);
 const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, }) => {
     const theme = useCustomTheme();
     const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
@@ -27,27 +33,22 @@ const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOp
                         : "transparent";
                 return (_jsxs(Box, { as: "button", type: "button", ref: (el) => {
                         optionRefs.current[index] = el;
-                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", bg: rowBg, px: 4, py: 2, cursor: "pointer", color: theme.colors.text[700], fontWeight: selected ? 600 : 500, transition: "background 0.12s ease", _hover: {
+                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", bg: rowBg, px: 4, py: 1.5, fontSize: "0.8125rem", cursor: "pointer", color: theme.colors.text[700], fontWeight: selected ? 600 : 400, transition: ROW_TRANSITION, sx: reducedMotionSx(), _hover: {
                         bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
                     }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
                         if (e.key === "Enter" || e.key === " ") {
                             e.preventDefault();
                             handleOptionClick(option);
                         }
-                    }, display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && (_jsx(Box, { children: _jsx(Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && (_jsx(Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), _jsxs(Box, { children: [_jsx(Box, { children: option.label }), option.email && (_jsx(Box, { fontSize: 12, color: theme.colors.textMuted, children: option.email }))] })] }, option.id));
+                    }, display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && (_jsx(Box, { children: _jsx(Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && (_jsx(Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), _jsxs(Box, { children: [_jsx(Box, { children: option.label }), option.email && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.textMuted, children: option.email }))] })] }, option.id));
             }) }));
     }
     return (_jsx(Text, { px: 4, py: 2, color: theme.colors.textMuted, children: "No options found" }));
 };
-/** Search-as-you-type combobox with avatar/color/email rows — Enter only picks on an exact label match, not the highlighted option. */
-export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText = "loading", boxStyle, placeholder = "Select Option", searchQuery = null, isInformation = false, informationMessage, rightIcon, rightElementStyle, isMultipleSelect = false, isRequired = false, onOptionMultiSelect, error = false, isProfile = false, isBottomIcon = false, errorMessage, 
-// BottomIconStyle,
-BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }) {
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
+export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText = "loading", boxStyle, placeholder = "Select Option", searchQuery = null, isInformation = false, informationMessage, rightIcon, rightElementStyle, isMultipleSelect = false, isRequired = false, onOptionMultiSelect, error = false, isProfile = false, isBottomIcon = false, errorMessage, helperText, size = DEFAULT_CONTROL_SIZE, BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }) {
     const theme = useCustomTheme();
-    const errorBorder = `2px solid ${theme.colors.semanticText.error}`;
-    // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
-    // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
-    const defaultBorderThin = `1px solid ${theme.colors.boxborder[500]}`;
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
     const [selectedOptions, setSelectedOptions] = useState(initialSelectedOption ? [initialSelectedOption] : []);
     const [inputValue, setInputValue] = useState(searchQuery);
     const [isOpen, setIsOpen] = useState(false);
@@ -60,14 +61,10 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
     const inputRef = useRef(null);
     const dropdownRef = useRef(null);
     const listboxId = useId();
-    // Roving-tabindex keyboard nav for the options list (same shape as
-    // Table/filters/CompactSelect's listbox pattern): real DOM focus moves
-    // through the options, so no aria-activedescendant is needed.
+    // NOTE: roving-tabindex nav (same shape as Table/filters/CompactSelect) — real DOM focus, no aria-activedescendant needed.
     const optionRefs = useRef([]);
     const [activeIndex, setActiveIndex] = useState(0);
     const pendingFocusFirstOption = useRef(false);
-    // Programmatically focusing the input (Escape returning focus there) would
-    // otherwise re-trigger its own onFocus and immediately reopen the list.
     const skipNextInputFocusOpen = useRef(false);
     const closeAndFocusInput = () => {
         var _a;
@@ -80,58 +77,17 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
         setActiveIndex(next);
         (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
-    // const filteredOptions = useMemo(() => {
-    //   return options.filter((option) => {
-    //     const optionLabel = option.label || '';
-    //     const searchValue = inputValue || '';
-    //     return optionLabel.toLowerCase().includes(searchValue.toLowerCase());
-    //   });
-    // }, [options, inputValue]);
     const filteredOptions = useMemo(() => {
         return options.filter((option) => {
-            // First filter out already selected options
-            // const isNotSelected = !selectedOptions.some(
-            //   (selected) => selected.id === option.id
-            // );
             const isNotSelected = isMultipleSelect
                 ? !selectedOptions.some((selected) => selected.id === option.id)
                 : true;
-            // Then apply the search filter
             const optionLabel = option.label || "";
             const searchValue = inputValue || "";
             return (isNotSelected &&
                 optionLabel.toLowerCase().includes(searchValue.toLowerCase()));
         });
     }, [options, inputValue, isMultipleSelect, selectedOptions]);
-    // const filteredOptions = useMemo(() => {
-    //   return options.filter((option) =>
-    //     option.label?.toLowerCase().includes((inputValue ?? "")?.toLowerCase())
-    //   );
-    // }, [options, inputValue]);
-    //   const handleOptionClick = useCallback(
-    //     (option: selectOptions) => {
-    //       if (isMultipleSelect) {
-    //         setSelectedOptions((prev) => {
-    //           const isSelected = prev.some((selected) => selected.id === option.id);
-    //           const newSelected = isSelected
-    //             ? prev.filter((selected) => selected.id !== option.id)
-    //             : [...prev, option];
-    //           setInputValue("");
-    //           if (onOptionMultiSelect) {
-    //             onOptionMultiSelect(newSelected);
-    //           }
-    //           return newSelected;
-    //         });
-    //       } else {
-    //         setInputValue(option.label);
-    //         setIsOpen(false);
-    //         if (onOptionSelect) {
-    //           onOptionSelect(option);
-    //         }
-    //       }
-    //     },
-    //     [isMultipleSelect, onOptionSelect, onOptionMultiSelect]
-    //   );
     const handleOptionClick = useCallback((option) => {
         if (isMultipleSelect) {
             setSelectedOptions((prev) => {
@@ -262,31 +218,13 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    return (_jsx(_Fragment, { children: _jsx(FormControl, { isInvalid: error, children: _jsxs(Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && (_jsx(TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && (_jsx(HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => (_jsxs(Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [_jsx(TagLabel, { width: "50px", children: option.label }), _jsx(TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), _jsxs(InputGroup, { children: [_jsx(Input, { ref: inputRef, variant: "outline", borderRadius: FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: openDropdown, onFocus: () => {
+    return (_jsx(_Fragment, { children: _jsx(FormControl, { isInvalid: error, children: _jsxs(Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && (_jsx(HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => (_jsxs(Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [_jsx(TagLabel, { width: "3.125rem", children: option.label }), _jsx(TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), _jsxs(InputGroup, { children: [_jsx(Input, { ref: inputRef, ...ids.controlProps, variant: "outline", value: inputValue ? inputValue : "", onClick: openDropdown, onFocus: () => {
                                     if (skipNextInputFocusOpen.current) {
                                         skipNextInputFocusOpen.current = false;
                                         return;
                                     }
                                     openDropdown();
-                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, cursor: "pointer", borderColor: theme.colors.boxborder[500], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
-                                    borderColor: error
-                                        ? theme.colors.semanticText.error
-                                        : theme.colors.primary[500],
-                                }, _focus: {
-                                    borderColor: error
-                                        ? theme.colors.semanticText.error
-                                        : theme.colors.primary[500],
-                                    boxShadow: fieldFocusRing(theme, !!error),
-                                }, style: {
-                                    ...inputStyle,
-                                    backgroundColor: theme.colors.background[50],
-                                    fontWeight: 600,
-                                    color: theme.colors.text[700],
-                                    padding: "0 0.75rem",
-                                    fontSize: 15,
-                                    letterSpacing: 0.7,
-                                    border: error ? errorBorder : defaultBorderThin,
-                                } }), rightIcon && (_jsx(InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && (_jsxs(Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "md", bg: theme.colors.background[50], maxHeight: "150px", overflowY: "auto", zIndex: 10, children: [_jsx(Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: _jsx(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), _jsx("hr", {}), isBottomIcon && (_jsxs(Box, { position: "sticky", bottom: 0, background: theme.colors.background[50], display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.boxborder[200]}`, children: [_jsx(Box, { children: BottomIcon ? BottomIcon : _jsx(PlusIcon, { size: "1rem" }) }), _jsx(Box, { fontSize: "0.875rem", color: BottomTextColor
+                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...fieldControlStyles(theme.colors), ...controlSizeStyles(size), ...reducedMotionSx() }, style: inputStyle }), rightIcon && (_jsx(InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && (_jsxs(Box, { ref: dropdownRef, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [_jsx(Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: _jsx(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), _jsx("hr", {}), isBottomIcon && (_jsxs(Box, { position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.boxborder[200]}`, children: [_jsx(Box, { children: BottomIcon ? BottomIcon : _jsx(PlusIcon, { size: "1rem" }) }), _jsx(Box, { fontSize: "0.875rem", color: BottomTextColor
                                             ? BottomTextColor
-                                            : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), error && _jsx(ErrorMessage, { errorMessage: errorMessage })] }) }) }));
+                                            : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }) }) }));
 }

package/dist/esm/Components/SelectV2/SelectV2.js

@@ -1,233 +1,18 @@
-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 { Box, Checkbox, FormControl, Input, Popover, PopoverAnchor, PopoverContent, Portal, useDisclosure, } from "@chakra-ui/react";
-import { ChevronDown } from "lucide-react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
-import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
-import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
-import { getFieldStateStyles } from "../Common/fieldStyles.js";
-import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
-import { TextLabel } from "../Common/FormLabel.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
-import HelperText from "../Common/HelperText.js";
-// Mirrors Select.styles.ts sizing so a call site swapping Select -> SelectV2 keeps its layout.
-const SIZE_MAP = {
-    sm: { h: "2.125rem", fontSize: "0.8125rem", px: "0.5rem" },
-    md: { h: "2.375rem", fontSize: "0.875rem", px: "0.75rem" },
-    lg: { h: "2.75rem", fontSize: "0.9375rem", px: "1rem" },
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Select from "../Select/Select.js";
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+const CHIP_TAG_HEIGHT_PX = { xs: 20, sm: 24 };
+const controlHeightPx = (size) => parseFloat(CONTROL_SIZES[size].height) * 16;
+const chipRowPaddingY = (size, chipSize) => `${(controlHeightPx(size) - CHIP_TAG_HEIGHT_PX[chipSize]) / 2 / 16}rem`;
+export const chipTriggerSizeStyles = (size, hasChips, chipSize = "sm") => {
+    const spec = CONTROL_SIZES[size];
+    const base = { minH: spec.height, fontSize: spec.fontSize, px: spec.paddingX };
+    return hasChips ? { ...base, py: chipRowPaddingY(size, chipSize) } : { ...base, h: spec.height };
 };
-const asIdSet = (values) => new Set((values !== null && values !== void 0 ? values : []).map((v) => v.toString()));
-// Derived from the option's own id (not its index) so it stays stable across filtering/reordering.
-const optionDomId = (listboxId, id) => `${listboxId}-option-${id.toString().replace(/[^a-zA-Z0-9_-]/g, "-")}`;
-const OptionRow = React.memo(function OptionRow({ option, index, listboxId, isSelected, isActive, isMulti, theme, backgrounds, renderOption, onSelect, onActivate, }) {
-    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: 1.5, px: 2.5, py: 1.5, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: 2, fontSize: "0.8125rem", fontWeight: isSelected && !isMulti ? 600 : 500, color: isSelected && !isMulti
-            ? theme.colors.accentText
-            : theme.colors.text[700], bg: isSelected && !isMulti
-            ? isActive
-                ? backgrounds.selectedActive
-                : backgrounds.selected
-            : isActive
-                ? backgrounds.active
-                : "transparent", transition: "background 0.12s ease, color 0.12s ease", children: [isMulti ? (_jsx(Checkbox, { isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : 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: "0.75rem", fontWeight: 400, color: theme.colors.textMuted, isTruncated: true, children: option.description })) : null] })] }))] }));
+/** @deprecated Use `Select` with `native={false}`. See MERGE-NOTES-select-deprecation.md. */
+const SelectV2 = forwardRef(function SelectV2(props, ref) {
+    return _jsx(Select, { ...props, native: false, ref: ref });
 });
-/** Themed custom-popup select (fully React-rendered popup); not virtualized — for very large option lists, prefer SearchSelect. */
-export default function SelectV2(props) {
-    var _a, _b;
-    const { options = [], placeholder = "Select Option", label, error = false, errorMessage, helperText, isDisabled = false, isRequired = false, size = "md", isSearchable = true, width, formControlStyle, onBlur, onFocus, renderOption, renderValue, maxMenuHeight = "16rem", defaultOpen = false, "data-testid": dataTestId, "aria-label": ariaLabel, } = props;
-    const theme = useCustomTheme();
-    const { isOpen, onOpen, onClose } = useDisclosure({ defaultIsOpen: defaultOpen });
-    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
-    const [filterText, setFilterText] = useState("");
-    const [activeIndex, setActiveIndex] = useState(-1);
-    const triggerRef = useRef(null);
-    const filterInputRef = useRef(null);
-    const listRef = useRef(null);
-    const s = (_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : SIZE_MAP.md;
-    const fieldStyles = useMemo(() => getFieldStateStyles(theme, { error, focused: isOpen }), [theme, error, isOpen]);
-    const selectedIds = useMemo(() => props.isMulti
-        ? asIdSet(props.value)
-        : asIdSet(props.value !== undefined ? [props.value] : undefined), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.isMulti, props.isMulti ? props.value : props.value]);
-    const selectedOptions = useMemo(() => options.filter((option) => selectedIds.has(option.id.toString())), [options, selectedIds]);
-    const filteredOptions = useMemo(() => {
-        if (!isSearchable || !filterText.trim())
-            return options;
-        const needle = filterText.trim().toLowerCase();
-        return options.filter((option) => option.label.toString().toLowerCase().includes(needle));
-    }, [options, filterText, isSearchable]);
-    const resetAndClose = useCallback((opts) => {
-        if (props.isMulti && (opts === null || opts === void 0 ? void 0 : opts.keepOpenForMulti))
-            return;
-        onClose();
-        setFilterText("");
-        setActiveIndex(-1);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [onClose, onBlur, props.isMulti]);
-    const handleOpen = () => {
-        var _a;
-        if (isDisabled)
-            return;
-        requestExclusiveOpen();
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-        onOpen();
-        const firstSelected = props.isMulti ? (_a = props.value) === null || _a === void 0 ? void 0 : _a[0] : props.value;
-        const selectedFilteredIndex = filteredOptions.findIndex((option) => option.id.toString() === (firstSelected === null || firstSelected === void 0 ? void 0 : firstSelected.toString()));
-        setActiveIndex(selectedFilteredIndex);
-    };
-    const handleSelect = useCallback((option) => {
-        var _a, _b;
-        if (option.isDisabled)
-            return;
-        if (props.isMulti) {
-            const alreadySelected = selectedIds.has(option.id.toString());
-            const next = alreadySelected
-                ? selectedOptions.filter((selected) => selected.id.toString() !== option.id.toString())
-                : [...selectedOptions, option];
-            props.onChange(next);
-            resetAndClose({ keepOpenForMulti: true });
-            (_a = filterInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            return;
-        }
-        props.onChange(option);
-        resetAndClose();
-        (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.isMulti, props.onChange, selectedIds, selectedOptions, resetAndClose]);
-    useEffect(() => {
-        if (isOpen && isSearchable) {
-            // Popover content mounts after open; defer focus so it lands on the rendered input.
-            const id = requestAnimationFrame(() => { var _a; return (_a = filterInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
-            return () => cancelAnimationFrame(id);
-        }
-    }, [isOpen, isSearchable]);
-    useEffect(() => {
-        var _a;
-        if (activeIndex < 0 || !listRef.current)
-            return;
-        const activeEl = listRef.current.querySelector(`[data-index="${activeIndex}"]`);
-        (_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(activeEl, { block: "nearest" });
-    }, [activeIndex]);
-    const moveActive = (delta) => {
-        if (!filteredOptions.length)
-            return;
-        setActiveIndex((current) => {
-            const next = current + delta;
-            if (next < 0)
-                return filteredOptions.length - 1;
-            if (next >= filteredOptions.length)
-                return 0;
-            return next;
-        });
-    };
-    // Page keys jump-and-clamp rather than wrap, matching the APG listbox pattern.
-    const PAGE_STEP = 8;
-    const moveActiveBy = (delta) => {
-        if (!filteredOptions.length)
-            return;
-        setActiveIndex((current) => Math.min(Math.max(current + delta, 0), filteredOptions.length - 1));
-    };
-    const moveActiveToEdge = (edge) => {
-        if (!filteredOptions.length)
-            return;
-        setActiveIndex(edge === "start" ? 0 : filteredOptions.length - 1);
-    };
-    const handleTriggerKeyDown = (event) => {
-        if (isDisabled)
-            return;
-        if (!isOpen) {
-            if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                handleOpen();
-            }
-            return;
-        }
-        // Popup already open with focus still on the trigger (isSearchable=false has no
-        // filter input to move focus into) — drive the same listbox navigation from here.
-        handleListKeyDown(event);
-    };
-    const handleListKeyDown = (event) => {
-        var _a, _b;
-        // Home/End on the type-ahead filter input must move the text cursor, not the active option.
-        const isTextInput = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT";
-        switch (event.key) {
-            case "ArrowDown":
-                event.preventDefault();
-                moveActive(1);
-                break;
-            case "ArrowUp":
-                event.preventDefault();
-                moveActive(-1);
-                break;
-            case "Home":
-                if (isTextInput)
-                    break;
-                event.preventDefault();
-                moveActiveToEdge("start");
-                break;
-            case "End":
-                if (isTextInput)
-                    break;
-                event.preventDefault();
-                moveActiveToEdge("end");
-                break;
-            case "PageUp":
-                event.preventDefault();
-                moveActiveBy(-PAGE_STEP);
-                break;
-            case "PageDown":
-                event.preventDefault();
-                moveActiveBy(PAGE_STEP);
-                break;
-            case "Enter": {
-                event.preventDefault();
-                const activeOption = filteredOptions[activeIndex];
-                if (activeOption)
-                    handleSelect(activeOption);
-                break;
-            }
-            case "Escape":
-                event.preventDefault();
-                resetAndClose();
-                (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-                break;
-            case "Tab":
-                resetAndClose();
-                break;
-            default:
-                break;
-        }
-    };
-    const instanceId = useId();
-    const listboxId = `selectv2-listbox-${instanceId}`;
-    const triggerId = `selectv2-trigger-${instanceId}`;
-    const activeOption = filteredOptions[activeIndex];
-    const activeDescendantId = activeOption ? optionDomId(listboxId, activeOption.id) : undefined;
-    const listScrollStyles = useMemo(() => scrollbarStyles(theme.colors, "overlay"), [theme]);
-    // primary[500] is the filled-button rung, so resolveHoverTint short-circuited and every hovered
-    // row became a solid brand fill under unresolved ink.
-    const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme]);
-    const defaultTriggerContent = () => {
-        var _a;
-        if (props.isMulti) {
-            const max = (_a = props.maxLabelsBeforeSummary) !== null && _a !== void 0 ? _a : 2;
-            if (selectedOptions.length === 0)
-                return placeholder;
-            if (selectedOptions.length > max) {
-                return `${selectedOptions.length} selected`;
-            }
-            return selectedOptions.map((o) => o.label).join(", ");
-        }
-        return selectedOptions[0] ? selectedOptions[0].label : placeholder;
-    };
-    const triggerIcon = !props.isMulti && ((_b = selectedOptions[0]) === null || _b === void 0 ? void 0 : _b.icon) ? selectedOptions[0].icon : null;
-    return (_jsxs(FormControl, { isInvalid: error, isDisabled: isDisabled, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: triggerId, isRequired: isRequired })), _jsxs(Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", matchWidth: true, autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [_jsx(PopoverAnchor, { children: _jsxs(Box, { as: "button", type: "button", id: triggerId, ref: triggerRef, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled, "aria-label": ariaLabel, disabled: isDisabled, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", h: s.h, px: s.px, fontSize: s.fontSize, fontWeight: 500, textAlign: "left", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.4 : 1, color: selectedOptions.length ? theme.colors.text[900] : placeholderInk(theme.colors), "data-testid": dataTestId, ...fieldStyles, children: [_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 1.5, minW: 0, isTruncated: true, 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() })] }), _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: theme.colors.textMuted, children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(Portal, { children: _jsxs(PopoverContent, { width: "100%", borderRadius: "xl", boxShadow: theme.shadows.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [isSearchable && (_jsx(Box, { p: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: _jsx(Input, { ref: filterInputRef, size: "sm", placeholder: "Type to filter...", value: filterText, onChange: (event) => {
-                                            setFilterText(event.target.value);
-                                            setActiveIndex(0);
-                                        }, "aria-activedescendant": activeDescendantId, "aria-label": "Filter options" }) })), _jsxs(Box, { id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": props.isMulti || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: listScrollStyles, children: [filteredOptions.length === 0 && (_jsx(Box, { px: 3, py: 2, fontSize: "0.8125rem", color: theme.colors.textMuted, children: "No Options" })), filteredOptions.map((option, index) => {
-                                            var _a;
-                                            return (_jsx(OptionRow, { option: option, index: index, listboxId: listboxId, isSelected: selectedIds.has(option.id.toString()), isActive: index === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, backgrounds: rowBackgrounds, renderOption: renderOption, onSelect: handleSelect, onActivate: setActiveIndex }, option.id));
-                                        })] })] }) })] }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
-}
+/** @deprecated Use `Select` with `native={false}`. */
+export default SelectV2;

package/dist/esm/Components/SettingRow/SettingRow.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Divider, Flex, Grid, Text } from "@chakra-ui/react";
+import { cloneElement, isValidElement, useId } from "react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** One settings-form row: title + description left, one right-aligned control; stacks on mobile. */
+const SettingRow = ({ title, description, control, htmlFor, descriptionId, isDisabled = false }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    const rowId = useId().replace(/:/g, "");
+    const titleId = `setting-row-title-${rowId}`;
+    const resolvedDescriptionId = descriptionId !== null && descriptionId !== void 0 ? descriptionId : `setting-row-desc-${rowId}`;
+    const controlProps = isValidElement(control) ? control.props : undefined;
+    const isSelfNamed = Boolean((controlProps === null || controlProps === void 0 ? void 0 : controlProps["aria-label"]) || (controlProps === null || controlProps === void 0 ? void 0 : controlProps["aria-labelledby"]));
+    const namedControl = !htmlFor && isValidElement(control) && !isSelfNamed
+        ? cloneElement(control, {
+            "aria-labelledby": titleId,
+            "aria-describedby": (_a = controlProps === null || controlProps === void 0 ? void 0 : controlProps["aria-describedby"]) !== null && _a !== void 0 ? _a : resolvedDescriptionId,
+        })
+        : control;
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, { borderColor: colors.boxborder[200] }), _jsxs(Grid, { templateColumns: { base: "1fr", md: "15rem 1fr" }, gap: { base: 2, md: 6 }, py: 4, alignItems: "start", opacity: isDisabled ? 0.5 : 1, "aria-disabled": isDisabled || undefined, children: [_jsxs(Box, { children: [htmlFor ? (_jsx(Text, { as: "label", htmlFor: htmlFor, display: "block", fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })) : (_jsx(Text, { id: titleId, fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })), _jsx(Text, { id: resolvedDescriptionId, mt: 0.5, fontSize: "0.8125rem", color: colors.textMuted, children: description })] }), _jsx(Flex, { minW: 0, justify: { base: "flex-start", md: "flex-end" }, children: namedControl })] })] }));
+};
+export default SettingRow;

package/dist/esm/Components/SettingRow/SettingRowProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/SettingRow/SettingsSection.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Flex, Heading, Text } from "@chakra-ui/react";
+import Card from "../Card/Card.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Titled Card wrapping SettingRows; rows and an optional footer separate with one divider each, never a nested border. */
+const SettingsSection = ({ id, title, description, children, footer, action, isDanger = false }) => {
+    const { colors } = useCustomTheme();
+    const titleColor = isDanger ? colors.semanticText.error : colors.header[900];
+    return (_jsxs(Card, { id: id, scrollMarginTop: 4, borderColor: isDanger ? colors.semanticText.error : undefined, header: _jsxs(Flex, { align: "flex-start", gap: 3, children: [_jsxs(Box, { flex: 1, minW: 0, children: [_jsx(Heading, { as: "h2", fontSize: "md", fontWeight: 600, color: titleColor, children: title }), description && (_jsx(Text, { mt: 0.5, fontSize: "xs", fontWeight: 400, color: colors.textMuted, children: description }))] }), action && _jsx(Box, { flexShrink: 0, children: action })] }), children: [children, footer && (_jsxs(_Fragment, { children: [_jsx(Divider, { borderColor: colors.boxborder[200] }), _jsx(Box, { pt: 4, children: footer })] }))] }));
+};
+export default SettingsSection;

package/dist/esm/Components/SettingRow/SettingsSectionProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/SideBar/SecondaryBar.js

@@ -3,10 +3,20 @@ import { useState } from "react";
 import { Box, Flex, Icon, VStack, Badge, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { getSidebarActiveAccent } from "./sidebarAccentColors.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { menuDisabled } from "./menuDisabled.js";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import OverflowTooltipText from "./components/OverflowTooltipText.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { HEADER_HEIGHT } from "../../Constants/Sidebar.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { sidebarRowPeak } from "../../Theme/tokens/builders/sidebarAccent.js";
+import { scaleFor } from "../../Theme/chakra/paletteFromTheme.js";
+import { fullViewportHeight } from "../../Theme/tokens/builders/viewportHeight.js";
+const softBadge = (colors, colorScheme, surface) => {
+    const tone = resolveSoftTone(colors, scaleFor(colors, colorScheme), surface);
+    return { bg: tone.bg, color: tone.fg };
+};
 const parseBadge = (badge) => {
     var _a, _b, _c;
     return ({
@@ -21,37 +31,37 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return (_jsxs(Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": item.disabled ? true : undefined, textDecoration: "none", py: "8px", mb: "2px", borderRadius: "md", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", _hover: {
-                        bg: item.disabled
+    return (_jsxs(Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": menuDisabled(item) ? true : undefined, textDecoration: "none", py: 2, mb: "2px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: menuDisabled(item) ? "not-allowed" : "pointer", opacity: menuDisabled(item) ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", _hover: {
+                        bg: menuDisabled(item)
                             ? "transparent"
                             : isActive
                                 ? "whiteAlpha.400"
                                 : "whiteAlpha.200",
                     }, onClick: (e) => {
                         e.preventDefault();
-                        if (!item.disabled)
+                        if (!menuDisabled(item))
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: _jsx(PopoverBody, { p: "0.75rem", children: _jsxs(Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && (_jsx(Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: menuDisabled(item) ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: _jsx(PopoverBody, { p: 3, children: _jsxs(Flex, { align: "center", gap: 2, justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return (_jsxs(Flex, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": item.disabled ? true : undefined, textDecoration: "none", px: "8px", py: "7px", mb: "2px", borderRadius: "md", align: "center", justify: "space-between", gap: "8px", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
-            bg: item.disabled ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
+    return (_jsxs(Flex, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": menuDisabled(item) ? true : undefined, textDecoration: "none", px: 2, py: "7px", mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, overflow: "hidden", cursor: menuDisabled(item) ? "not-allowed" : "pointer", opacity: menuDisabled(item) ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
+            bg: menuDisabled(item) ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
         }, onClick: (e) => {
             e.preventDefault();
-            if (!item.disabled)
+            if (!menuDisabled(item))
                 onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "8px", flex: "1", minW: 0, overflow: "hidden", children: [_jsx(Icon, { as: item.icon, fontSize: "0.95rem", flexShrink: 0, color: isActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isActive ? undefined : { color: "white" }, transition: "color 0.12s" }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : "whiteAlpha.900", _groupHover: isActive ? undefined : { color: "white" }, as: "p", children: item.title }) })] }), badgeVal != null && (_jsx(Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }));
+        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [_jsx(Icon, { as: item.icon, fontSize: "0.95rem", flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }));
 };
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = "0.75rem", itemFontSize = "0.75rem", selected, onItemClick, title, icon, }) => {
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
     const [collapsed, setCollapsed] = useState(defaultCollapsed);
     const width = collapsed ? collapsedWidth : expandedWidth;
-    return (_jsx(Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: "whiteAlpha.100", boxShadow: theme.shadows.md, zIndex: 1, children: _jsxs(VStack, { align: "stretch", spacing: 0, h: "100%", children: [_jsxs(Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: "whiteAlpha.100", flexShrink: 0, children: [!collapsed && (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { as: icon, fontSize: "0.95rem", color: activeAccent.icon, flexShrink: 0 })), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: "whiteAlpha.900", as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), _jsx(Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "base", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.100" }, transition: "background 0.15s", children: collapsed ? (_jsx(ToolTip, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: _jsx(ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), _jsx(Box, { id: "secondary-scroll-container", flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", p: "8px 6px", children: items.map((item) => {
+    return (_jsx(Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: transitionFor(["width"], "base"), pos: "sticky", top: 0, sx: fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: _jsxs(VStack, { align: "stretch", spacing: 0, h: "100%", children: [_jsxs(Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { as: icon, fontSize: "0.95rem", color: activeAccent.icon, flexShrink: 0 })), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), _jsx(Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.100" }, transition: "background 0.15s", children: collapsed ? (_jsx(ToolTip, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: _jsx(ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), _jsx(Box, { id: "secondary-scroll-container", flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", children: items.map((item) => {
                         var _a;
                         const isActive = String(selected) === String(item.id) ||
                             String(selected) === String(item.title);