@astryxdesign/core 0.3.0 → 0.4.0-canary.3112e99

package/dist/Selector/hooks.d.ts

@@ -5,7 +5,7 @@ interface UseSelectedItemOffsetOptions {
     selectedItemIndex: number;
     listboxId: string;
     listboxRef: RefObject<HTMLDivElement | null>;
-    triggerRef: RefObject<HTMLButtonElement | null>;
+    anchorRef: RefObject<HTMLElement | null>;
 }
 interface UseSelectedItemOffsetResult {
     offset: number;
@@ -13,15 +13,15 @@ interface UseSelectedItemOffsetResult {
 }
 /**
  * Calculates the offset needed to position the dropdown so that the selected
- * item appears centered over the trigger button (macOS-style selector).
+ * item appears centered over the outer selector control (macOS-style selector).
  *
- * The desired dropdown top is calculated directly from the trigger center and
+ * The desired dropdown top is calculated directly from the anchor center and
  * selected-item center, then clamped to the viewport. This preserves the
  * default "selected item over trigger" behavior while letting the menu slide
  * upward near the bottom edge or downward near the top edge instead of being
  * clipped off-screen.
  */
-export declare function useSelectedItemOffset({ isOpen, selectedItemIndex, listboxId, listboxRef, triggerRef, }: UseSelectedItemOffsetOptions): UseSelectedItemOffsetResult;
+export declare function useSelectedItemOffset({ isOpen, selectedItemIndex, listboxId, listboxRef, anchorRef, }: UseSelectedItemOffsetOptions): UseSelectedItemOffsetResult;
 interface UseComboboxOptions {
     selectableItems: SelectorOptionData[];
     value?: string;
@@ -38,6 +38,13 @@ interface UseComboboxOptions {
      * navigation owns those keys there) or when there is no value.
      */
     onClear?: () => void;
+    /**
+     * With `hasSearch`, printable characters typed on the trigger are appended to
+     * the search query (opening the popup if needed), so type-to-find works
+     * without a separate open step. Characters keep arriving here until focus
+     * lands in the search input, which then owns its own typing.
+     */
+    onSearchSeed?: (char: string) => void;
     listboxId: string;
 }
 interface UseComboboxResult {
@@ -50,8 +57,13 @@ interface UseComboboxResult {
     onItemMouseEnter: (item: SelectorOptionData, index: number) => void;
 }
 /**
- * Handles keyboard navigation, typeahead search, and selection for combobox/listbox patterns.
+ * Handles keyboard navigation and selection for combobox/listbox patterns.
+ *
+ * Type-to-select is not handled here: callers that want it compose the shared
+ * `useTypeahead` hook and run it ahead of this handler (see Selector). That
+ * keeps matching consistent with the other collections and leaves consumers
+ * whose own input already filters the items (CommandPalette) untouched.
  */
-export declare function useCombobox({ selectableItems, value, isDisabled, isOpen, hasSearch, onOpen, onClose, onSelect, onClear, listboxId, }: UseComboboxOptions): UseComboboxResult;
+export declare function useCombobox({ selectableItems, value, isDisabled, isOpen, hasSearch, onOpen, onClose, onSelect, onClear, onSearchSeed, listboxId, }: UseComboboxOptions): UseComboboxResult;
 export {};
 //# sourceMappingURL=hooks.d.ts.map

package/dist/Selector/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/Selector/hooks.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMhD,UAAU,4BAA4B;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACjD;AAED,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE,4BAA4B,GAAG,2BAA2B,CA6E5D;AAMD,UAAU,kBAAkB;IAC1B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAe,EACf,KAAK,EACL,UAAkB,EAClB,MAAM,EACN,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,kBAAkB,GAAG,iBAAiB,CAqOxC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/Selector/hooks.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAyBhD,UAAU,4BAA4B;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC1C;AAED,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE,4BAA4B,GAAG,2BAA2B,CAgF5D;AAMD,UAAU,kBAAkB;IAC1B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAe,EACf,KAAK,EACL,UAAkB,EAClB,MAAM,EACN,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,GACV,EAAE,kBAAkB,GAAG,iBAAiB,CA2NxC"}

package/dist/Selector/hooks.js

@@ -4,11 +4,31 @@
 
 /**
  * @file hooks.ts
+ * @input Uses untransformed DOM layout geometry from the Selector's outer
+ *   anchor, listbox, and selected option
  * @output Hooks for Selector
  * @position Internal hooks; used by Selector.tsx
  */
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+// The selected row renders one optical pixel below the closed trigger label at
+// the same mathematical center, so compensate before viewport clamping.
+const SELECTED_ITEM_OPTICAL_OFFSET = 1;
+
+/**
+ * Return an element's document-relative layout top without CSS transforms.
+ * getBoundingClientRect includes the popover's entry scale, which would make
+ * the measured error grow with each option's distance from the menu top.
+ */
+function getLayoutTop(element) {
+  let top = 0;
+  let current = element;
+  while (current) {
+    top += current.offsetTop;
+    current = current.offsetParent;
+  }
+  return top;
+}
 
 // =============================================================================
 // useSelectedItemOffset - Position dropdown to center selected item over trigger
@@ -16,9 +36,9 @@ import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js
 
 /**
  * Calculates the offset needed to position the dropdown so that the selected
- * item appears centered over the trigger button (macOS-style selector).
+ * item appears centered over the outer selector control (macOS-style selector).
  *
- * The desired dropdown top is calculated directly from the trigger center and
+ * The desired dropdown top is calculated directly from the anchor center and
  * selected-item center, then clamped to the viewport. This preserves the
  * default "selected item over trigger" behavior while letting the menu slide
  * upward near the bottom edge or downward near the top edge instead of being
@@ -29,7 +49,7 @@ export function useSelectedItemOffset({
   selectedItemIndex,
   listboxId,
   listboxRef,
-  triggerRef
+  anchorRef
 }) {
   const [offset, setOffset] = useState(0);
   const [isPositioned, setIsPositioned] = useState(false);
@@ -45,7 +65,7 @@ export function useSelectedItemOffset({
       commitPosition(0, false);
       return;
     }
-    if (!listboxRef.current || !triggerRef.current) {
+    if (!listboxRef.current || !anchorRef.current) {
       commitPosition(0, true);
       return;
     }
@@ -59,35 +79,34 @@ export function useSelectedItemOffset({
       commitPosition(0, true);
       return;
     }
+    const listbox = listboxRef.current;
+    const anchorRect = anchorRef.current.getBoundingClientRect();
 
-    // Get positions. JSDOM returns zero rects by default, but browsers provide
-    // real dimensions before paint via layout effect.
-    const listboxRect = listboxRef.current.getBoundingClientRect();
-    const itemRect = targetItem.getBoundingClientRect();
-    const triggerRect = triggerRef.current.getBoundingClientRect();
-    const listboxHeight = listboxRect.height;
+    // offset* metrics intentionally exclude the popover's entry transform.
+    const listboxHeight = listbox.offsetHeight;
     if (listboxHeight <= 0) {
       commitPosition(0, true);
       return;
     }
 
     // Item center relative to listbox top. This remains stable even as the
-    // popover's top changes between measurements.
-    const itemCenterInListbox = itemRect.top - listboxRect.top + itemRect.height / 2;
-    const triggerCenter = triggerRect.top + triggerRect.height / 2;
+    // popover animates between scale values. scrollTop keeps the calculation
+    // correct when a previously scrolled listbox is reopened.
+    const itemCenterInListbox = getLayoutTop(targetItem) - getLayoutTop(listbox) - listbox.scrollTop + targetItem.offsetHeight / 2;
+    const anchorCenter = anchorRect.top + anchorRect.height / 2;
 
-    // Desired top aligns the selected item's center with trigger center.
-    const desiredTop = triggerCenter - itemCenterInListbox;
+    // Desired top aligns the selected item's center with the anchor center.
+    const desiredTop = anchorCenter - itemCenterInListbox - SELECTED_ITEM_OPTICAL_OFFSET;
     const viewportHeight = window.innerHeight;
     const maxTop = Math.max(0, viewportHeight - listboxHeight);
     const clampedTop = Math.min(Math.max(desiredTop, 0), maxTop);
 
-    // useLayer positions the popover below the trigger. Apply a negative
+    // useLayer positions the popover below the outer anchor. Apply a negative
     // block-start margin to the layer container so the listbox top moves from
-    // triggerRect.bottom to clampedTop.
-    const clampedOffset = Math.max(0, triggerRect.bottom - clampedTop);
+    // anchorRect.bottom to clampedTop.
+    const clampedOffset = Math.max(0, anchorRect.bottom - clampedTop);
     commitPosition(clampedOffset, true);
-  }, [isOpen, selectedItemIndex, listboxId, listboxRef, triggerRef, commitPosition]);
+  }, [isOpen, selectedItemIndex, listboxId, listboxRef, anchorRef, commitPosition]);
   return {
     offset,
     isPositioned
@@ -95,11 +114,16 @@ export function useSelectedItemOffset({
 }
 
 // =============================================================================
-// useCombobox - Keyboard navigation, typeahead, and selection
+// useCombobox - Keyboard navigation and selection
 // =============================================================================
 
 /**
- * Handles keyboard navigation, typeahead search, and selection for combobox/listbox patterns.
+ * Handles keyboard navigation and selection for combobox/listbox patterns.
+ *
+ * Type-to-select is not handled here: callers that want it compose the shared
+ * `useTypeahead` hook and run it ahead of this handler (see Selector). That
+ * keeps matching consistent with the other collections and leaves consumers
+ * whose own input already filters the items (CommandPalette) untouched.
  */
 export function useCombobox({
   selectableItems,
@@ -111,11 +135,10 @@ export function useCombobox({
   onClose,
   onSelect,
   onClear,
+  onSearchSeed,
   listboxId
 }) {
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
-  const [typeahead, setTypeahead] = useState('');
-  const typeaheadTimeoutRef = useRef(undefined);
   const getItemId = useCallback(index => `${listboxId}-item-${index}`, [listboxId]);
   const getEnabledIndices = useCallback(() => {
     return selectableItems.map((item, i) => !item.disabled ? i : -1).filter(i => i >= 0);
@@ -185,6 +208,8 @@ export function useCombobox({
         if (hasSearch) {
           break;
         }
+      // A space mid-typeahead extends the query instead of activating; the
+      // caller's useTypeahead claims it before this handler ever runs.
       // falls through
       case 'Enter':
         e.preventDefault();
@@ -253,26 +278,18 @@ export function useCombobox({
         }
         break;
       default:
-        if (!hasSearch && e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
-          const newTypeahead = typeahead + e.key.toLowerCase();
-          setTypeahead(newTypeahead);
-          if (typeaheadTimeoutRef.current) {
-            clearTimeout(typeaheadTimeoutRef.current);
-          }
-          typeaheadTimeoutRef.current = setTimeout(() => {
-            setTypeahead('');
-          }, 500);
-          const matchIndex = selectableItems.findIndex(item => !item.disabled && item.label?.toLowerCase().startsWith(newTypeahead));
-          if (matchIndex >= 0) {
-            if (!isOpen) {
-              onOpen();
-            }
-            setHighlightedIndex(matchIndex);
+        // Keys land here only while the trigger holds focus — once the search
+        // input takes over it handles its own typing — so they belong in the
+        // query, including the ones racing the open.
+        if (hasSearch && onSearchSeed && e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+          if (!isOpen) {
+            onOpen();
           }
+          onSearchSeed(e.key);
         }
         break;
     }
-  }, [isDisabled, isOpen, onOpen, closeAndReset, selectableItems, highlightedIndex, selectItem, findSelectedIndex, getEnabledIndices, typeahead, hasSearch, onClear, value]);
+  }, [isDisabled, isOpen, onOpen, closeAndReset, selectableItems, highlightedIndex, selectItem, findSelectedIndex, getEnabledIndices, hasSearch, onClear, onSearchSeed, value]);
   return {
     highlightedIndex,
     setHighlightedIndex,

package/dist/SideNav/SideNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAkJ/D,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAEvD;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAEtC;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;QACnD,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACP;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAmB,EACnB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,+BAiQd;yBAhRe,OAAO"}
+{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAmJ/D,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAEvD;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAEtC;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;QACnD,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACP;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAmB,EACnB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,+BAiQd;yBAhRe,OAAO"}

package/dist/SideNav/SideNav.js

@@ -320,7 +320,7 @@ export function SideNav({
           className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf xfsso4q x1wesfrj"
         },
         1: {
-          className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf x1wesfrj xexx8yu"
+          className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf x1wesfrj xexx8yu x6s0dn4"
         }
       }[!!collapsed << 0],
       children: [footer, /*#__PURE__*/_jsxs("div", {

package/dist/SideNav/SideNavCollapseButton.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file SideNavCollapseButton.tsx
- * @input Uses React, StyleX, SideNavCollapseContext, getIcon
+ * @input Uses React, StyleX, SideNavCollapseContext, Icon
  * @output Exports SideNavCollapseButton component
  * @position Composable toggle button for sidenav collapse
  *

package/dist/SideNav/SideNavCollapseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavCollapseButton.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAyBlC,MAAM,WAAW,0BAA2B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,+BAA+B,GAAG,IAAI,CAAC,CAAC;IAEpE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,0BAA0B,4BAyC5B;yBAhDe,qBAAqB"}
+{"version":3,"file":"SideNavCollapseButton.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAyBlC,MAAM,WAAW,0BAA2B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,+BAA+B,GAAG,IAAI,CAAC,CAAC;IAEpE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,0BAA0B,4BA8C5B;yBArDe,qBAAqB"}

package/dist/SideNav/SideNavCollapseButton.js

@@ -4,7 +4,7 @@
 
 /**
  * @file SideNavCollapseButton.tsx
- * @input Uses React, StyleX, SideNavCollapseContext, getIcon
+ * @input Uses React, StyleX, SideNavCollapseContext, Icon
  * @output Exports SideNavCollapseButton component
  * @position Composable toggle button for sidenav collapse
  *
@@ -20,7 +20,7 @@ import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { durationVars, easeVars } from "../theme/tokens.stylex.js";
-import { useIcon } from "../Icon/index.js";
+import { Icon } from "../Icon/index.js";
 import { Button } from "../Button/index.js";
 import { composeEventHandlers, rtlStyles } from "../utils/index.js";
 import { useSideNavCollapse } from "./SideNavCollapseContext.js";
@@ -31,6 +31,21 @@ import { useTranslator } from "../i18n/index.js";
 // Styles
 // =============================================================================
 import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  chevron: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    k1ekBW: "x11xpdln",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  },
+  chevronCollapsed: {
+    k3aq6I: "x19jd1h0",
+    $$css: true
+  }
+};
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -69,7 +84,6 @@ export function SideNavCollapseButton({
   ...props
 }) {
   const t = useTranslator();
-  const chevronLeftIcon = useIcon('chevronLeft');
   const {
     isCollapsed,
     toggle,
@@ -90,18 +104,19 @@ export function SideNavCollapseButton({
     variant: "ghost",
     ...props,
     onClick: composeEventHandlers(onClickProp, toggle),
-    icon: children ?? /*#__PURE__*/_jsx("span", {
+    icon: children ??
+    /*#__PURE__*/
+    // The RTL mirror stays on its own element, wrapping (not merged
+    // into) the state rotation: both are `transform`, so on a single
+    // element one would overwrite the other and the chevron would stop
+    // mirroring under RTL. See utils/rtlStyles.ts.
+    _jsx("span", {
       ...stylex.props(rtlStyles.mirror),
-      children: /*#__PURE__*/_jsx("span", {
-        ...{
-          0: {
-            className: "x3nfvp2 x6s0dn4 x11xpdln xuedmi6 xlr8y92"
-          },
-          1: {
-            className: "x3nfvp2 x6s0dn4 x11xpdln xuedmi6 xlr8y92 x19jd1h0"
-          }
-        }[!!isCollapsed << 0],
-        children: chevronLeftIcon
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "chevronLeft",
+        size: "sm",
+        color: "inherit",
+        xstyle: [styles.chevron, isCollapsed && styles.chevronCollapsed]
       })
     }),
     isIconOnly: true

package/dist/SideNav/SideNavHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavHeading.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAmBtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqM5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,sCAmcrB;yBApde,cAAc"}
+{"version":3,"file":"SideNavHeading.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAmBtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiN5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,sCA6drB;yBA9ee,cAAc"}

package/dist/SideNav/SideNavHeading.js

@@ -27,7 +27,7 @@ import { colorVars, spacingVars, fontWeightVars, radiusVars, typeScaleVars } fro
 // of lazy loading layer resources.
 import { usePopover } from "../Popover/usePopover.js";
 import { Link } from "../Link/index.js";
-import { useIcon } from "../Icon/index.js";
+import { Icon } from "../Icon/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { navItemStyles } from "../NavItem/navItemStyles.stylex.js";
 import { useSideNavCollapse } from "./SideNavCollapseContext.js";
@@ -74,6 +74,33 @@ const styles = {
     k9WMMc: "x1yc453h",
     $$css: true
   },
+  chevron: {
+    kmuXW: "x2lah0s",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    k7Eaqz: "xy8csz5",
+    kAzted: "ximsjs8",
+    kMwMTN: "xv9yike",
+    kGuDYH: "x1qlqyl8",
+    $$css: true
+  },
+  popoverChevron: {
+    kmuXW: "x2lah0s",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    k7Eaqz: "xy8csz5",
+    kAzted: "ximsjs8",
+    kMwMTN: "xv9yike",
+    kGuDYH: "x1qlqyl8",
+    k3aq6I: "x19jd1h0",
+    $$css: true
+  },
+  chevronGlyph: {
+    kGuDYH: "x1qlqyl8",
+    $$css: true
+  },
   popover: {
     k7Eaqz: "xrzjruh",
     keoZOQ: "xcsaf9d",
@@ -146,7 +173,6 @@ export function SideNavHeading({
   ...props
 }) {
   const t = useTranslator();
-  const chevronDownIcon = useIcon('chevronDown');
   const LinkComponent = useLinkComponent(as);
   const {
     isCollapsed
@@ -189,7 +215,7 @@ export function SideNavHeading({
       },
       children: icon
     });
-    const collapsedSetRef = mergeRefs(collapsedItemRef, ref);
+    const collapsedSetRef = mergeRefs(collapsedItemRef, ref, menu ? popover.triggerRef : undefined);
     let collapsedElement;
     if (headingHref) {
       collapsedElement = /*#__PURE__*/_jsx(LinkComponent, {
@@ -251,11 +277,11 @@ export function SideNavHeading({
                     }
                   }[!!!!(superheading || subheading) << 0],
                   children: heading
-                }), /*#__PURE__*/_jsx("span", {
-                  ...{
-                    className: "x2lah0s x78zum5 x6s0dn4 xl56j7k xy8csz5 ximsjs8 xv9yike x19jd1h0"
-                  },
-                  children: chevronDownIcon
+                }), /*#__PURE__*/_jsx(Icon, {
+                  icon: "chevronDown",
+                  size: "sm",
+                  color: "secondary",
+                  xstyle: styles.popoverChevron
                 })]
               }), subheading && /*#__PURE__*/_jsx("span", {
                 ...{
@@ -346,11 +372,11 @@ export function SideNavHeading({
       children: subheading
     }))]
   });
-  const chevronElement = showChevron && /*#__PURE__*/_jsx("span", {
-    ...{
-      className: "x2lah0s x78zum5 x6s0dn4 xl56j7k xy8csz5 ximsjs8 xv9yike"
-    },
-    children: chevronDownIcon
+  const chevronElement = showChevron && /*#__PURE__*/_jsx(Icon, {
+    icon: "chevronDown",
+    size: "sm",
+    color: "secondary",
+    xstyle: styles.chevron
   });
   const headerEndContentElement = headerEndContent && /*#__PURE__*/_jsx("span", {
     ...{
@@ -372,11 +398,11 @@ export function SideNavHeading({
         className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
       },
       children: icon
-    }), renderTextContent(/*#__PURE__*/_jsx("span", {
-      ...{
-        className: "x2lah0s x78zum5 x6s0dn4 xl56j7k xy8csz5 ximsjs8 xv9yike x19jd1h0"
-      },
-      children: chevronDownIcon
+    }), renderTextContent(/*#__PURE__*/_jsx(Icon, {
+      icon: "chevronDown",
+      size: "sm",
+      color: "secondary",
+      xstyle: styles.popoverChevron
     }))]
   });
 
@@ -421,7 +447,12 @@ export function SideNavHeading({
           ...{
             className: "x2lah0s x78zum5 x6s0dn4 xl56j7k xy8csz5 ximsjs8 xv9yike x1ypdohk xh6dtrn xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x1sodnla x1yc453h xe9uy6x"
           },
-          children: chevronDownIcon
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "chevronDown",
+            size: "sm",
+            color: "inherit",
+            xstyle: styles.chevronGlyph
+          })
         })), headerEndContentElement]
       }), popover.render(/*#__PURE__*/_jsxs("div", {
         ref: menuRef,
@@ -475,7 +506,12 @@ export function SideNavHeading({
           ...{
             className: "x2lah0s x78zum5 x6s0dn4 xl56j7k xy8csz5 ximsjs8 xv9yike x1ypdohk xh6dtrn xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x1sodnla x1yc453h xe9uy6x"
           },
-          children: chevronDownIcon
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "chevronDown",
+            size: "sm",
+            color: "inherit",
+            xstyle: styles.chevronGlyph
+          })
         }) : undefined), headerEndContentElement]
       }), popover.render(/*#__PURE__*/_jsxs("div", {
         ref: menuRef,

package/dist/SideNav/SideNavItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,OAAO,EAA0B,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE/D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AAuMhF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,GACP,EAAE,gBAAgB,sCAoVlB;yBApWe,WAAW"}
+{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA4MhF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,GACP,EAAE,gBAAgB,sCAuVlB;yBAvWe,WAAW"}

package/dist/SideNav/SideNavItem.js

@@ -21,7 +21,7 @@ import { useCallback, useId, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, sizeVars, fontWeightVars, typeScaleVars, durationVars, easeVars, borderVars, radiusVars } from "../theme/tokens.stylex.js";
-import { renderIconSlot, useIcon } from "../Icon/index.js";
+import { Icon, renderIconSlot } from "../Icon/index.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { usePopover } from "../Popover/usePopover.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
@@ -57,6 +57,23 @@ const styles = {
   itemCollapsedLg: {
     kzqmXN: "x1m747yf",
     $$css: true
+  },
+  expandChevron: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kzqmXN: "x1mtvzj0",
+    kZKoxP: "xvpftlf",
+    kGuDYH: "x1qlqyl8",
+    k1ekBW: "x11xpdln",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    kmuXW: "x2lah0s",
+    $$css: true
+  },
+  expandChevronExpanded: {
+    k3aq6I: "x19jd1h0",
+    $$css: true
   }
 };
 
@@ -150,7 +167,6 @@ export function SideNavItem({
   xstyle
 }) {
   const t = useTranslator();
-  const chevronDownIcon = useIcon('chevronDown');
   const {
     isCollapsed
   } = useSideNavCollapse();
@@ -347,16 +363,11 @@ export function SideNavItem({
         className: "x2lah0s x78zum5 x6s0dn4"
       },
       children: endContent
-    }), !isCollapsed && isItemCollapsible && !hasIndependentToggle && /*#__PURE__*/_jsx("span", {
-      ...{
-        0: {
-          className: "x3nfvp2 x6s0dn4 xl56j7k x1mtvzj0 xvpftlf x11xpdln xuedmi6 xlr8y92 x2lah0s"
-        },
-        1: {
-          className: "x3nfvp2 x6s0dn4 xl56j7k x1mtvzj0 xvpftlf x11xpdln xuedmi6 xlr8y92 x2lah0s x19jd1h0"
-        }
-      }[!!!isItemCollapsed << 0],
-      children: chevronDownIcon
+    }), !isCollapsed && isItemCollapsible && !hasIndependentToggle && /*#__PURE__*/_jsx(Icon, {
+      icon: "chevronDown",
+      size: "lg",
+      color: "inherit",
+      xstyle: [styles.expandChevron, !isItemCollapsed && styles.expandChevronExpanded]
     })]
   });
   const navItemStyleProps = mergeProps(themeProps('side-nav-item', {
@@ -406,16 +417,11 @@ export function SideNavItem({
         ...{
           className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1heor9g x1ypdohk xh6dtrn xe9uy6x xyxi2l3"
         },
-        children: /*#__PURE__*/_jsx("span", {
-          ...{
-            0: {
-              className: "x3nfvp2 x6s0dn4 xl56j7k x1mtvzj0 xvpftlf x11xpdln xuedmi6 xlr8y92 x2lah0s"
-            },
-            1: {
-              className: "x3nfvp2 x6s0dn4 xl56j7k x1mtvzj0 xvpftlf x11xpdln xuedmi6 xlr8y92 x2lah0s x19jd1h0"
-            }
-          }[!!!isItemCollapsed << 0],
-          children: chevronDownIcon
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronDown",
+          size: "lg",
+          color: "inherit",
+          xstyle: [styles.expandChevron, !isItemCollapsed && styles.expandChevronExpanded]
         })
       })]
     });

package/dist/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAO9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AA4O/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BA8mBlD;yBA9mBe,MAAM"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAO9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAkO/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BA8mBlD;yBA9mBe,MAAM"}

package/dist/Slider/Slider.js

@@ -24,6 +24,7 @@ import { Tooltip } from "../Tooltip/Tooltip.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { mergeProps, mergeRefs, rtlStyles } from "../utils/index.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { isRtlElement } from "../hooks/isRtlElement.js";
 import { themeProps } from "../utils/themeProps.js";
 
@@ -103,11 +104,6 @@ const styles = {
     kWkggS: "x1ewilqj xyxu9wt",
     $$css: true
   },
-  thumbFocusVisible: {
-    kI3sdo: "x1a2a7pz x17nn4n9",
-    kInvED: "x1wfwxd8 x7s97pk",
-    $$css: true
-  },
   thumbDisabled: {
     kWkggS: "xwmxj5m",
     kkrTdU: "x1h6gzvc",
@@ -484,7 +480,7 @@ export function Slider({
       ...mergeProps(themeProps('slider-thumb', {
         orientation,
         disabled: isDisabled ? 'disabled' : null
-      }), stylex.props(styles.thumb, isHorizontal ? styles.thumbHorizontal : rtlStyles.centerInline('50%'), !isDisabled && styles.thumbHover, !isDisabled && styles.thumbFocusVisible, isDisabled && styles.thumbDisabled), undefined, positionStyle)
+      }), stylex.props(styles.thumb, isHorizontal ? styles.thumbHorizontal : rtlStyles.centerInline('50%'), !isDisabled && styles.thumbHover, !isDisabled && focusOutlineStyles.focusVisible, isDisabled && styles.thumbDisabled), undefined, positionStyle)
     }, thumbIndex);
     if (useValueTooltip) {
       return /*#__PURE__*/_jsx(Tooltip, {