@astryxdesign/core 0.3.0 → 0.4.0

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/Stack/stack.stylex.d.ts

@@ -170,12 +170,12 @@ export declare function stack({ crossAlign, direction, gap, mainAlign, wrap, }:
 }> | Readonly<{
     readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "24px">;
     readonly rowGap: stylex.StyleXClassNameFor<"rowGap", "24px">;
-}> | Readonly<{
-    readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "2px">;
-    readonly rowGap: stylex.StyleXClassNameFor<"rowGap", "2px">;
 }> | Readonly<{
     readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "4px">;
     readonly rowGap: stylex.StyleXClassNameFor<"rowGap", "4px">;
+}> | Readonly<{
+    readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "2px">;
+    readonly rowGap: stylex.StyleXClassNameFor<"rowGap", "2px">;
 }> | Readonly<{
     readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "6px">;
     readonly rowGap: stylex.StyleXClassNameFor<"rowGap", "6px">;

package/dist/Switch/Switch.js

@@ -117,6 +117,10 @@ const styles = {
     kzqmXN: "xh8yej3",
     $$css: true
   },
+  statusGap: {
+    keoZOQ: "xtbrsbv",
+    $$css: true
+  },
   switchWrapper: {
     kVAEAm: "x1n2onr6",
     k1xSpc: "x78zum5",
@@ -314,6 +318,7 @@ export function Switch({
       ,
       disabled: isDisabled && !showsDisabledMessage,
       "aria-disabled": showsDisabledMessage ? 'true' : undefined,
+      form: showsDisabledMessage ? '' : undefined,
       required: isRequired,
       onChange: e => {
         if (isDisabled || isBusy) {
@@ -392,16 +397,12 @@ export function Switch({
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [switchElement, labelElement]
       })]
-    }), status?.message && /*#__PURE__*/_jsx("div", {
-      ...{
-        className: "xtbrsbv"
-      },
-      children: /*#__PURE__*/_jsx(FieldStatus, {
-        type: status.type,
-        message: status.message,
-        id: statusMessageID,
-        variant: "detached"
-      })
+    }), status?.message && /*#__PURE__*/_jsx(FieldStatus, {
+      type: status.type,
+      message: status.message,
+      id: statusMessageID,
+      variant: "detached",
+      xstyle: styles.statusGap
     }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }

package/dist/TabList/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAKrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAwID;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,QAAQ,qBA2GV;yBAzHe,GAAG"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAMrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAgID;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,QAAQ,qBA2GV;yBAzHe,GAAG"}

package/dist/TabList/Tab.js

@@ -26,6 +26,7 @@ import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps } from "../utils/index.js";
 import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -54,8 +55,6 @@ const styles = {
     k1ekBW: "xt3l3uh",
     kIyJzY: "xuedmi6",
     kAMwcw: "xlr8y92",
-    kI3sdo: "x17nn4n9",
-    kInvED: "x1wfwxd8 x7s97pk",
     $$css: true
   },
   hoverBg: {
@@ -195,7 +194,7 @@ export function Tab({
     tabIndex: isSelected ? 0 : -1,
     ...mergeProps(themeProps('tab', {
       selected: isSelected ? 'selected' : null
-    }), stylex.props(styles.base, sizeStyles[size], isSelected && styles.selected, isFill && layoutStyles.fill, tabScope, xstyle), className, style)
+    }), focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isSelected && styles.selected, isFill && layoutStyles.fill, tabScope, xstyle), className, style)
   };
   const hoverBgElement = /*#__PURE__*/_jsx("span", {
     "aria-hidden": "true",

package/dist/TabList/TabMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabMenu.d.ts","sourceRoot":"","sources":["../../src/TabList/TabMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAA6B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAkBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,iBAAiB,CAAC,EAC5B,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAiLD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,qBA4Ld;yBAnMe,OAAO"}
+{"version":3,"file":"TabMenu.d.ts","sourceRoot":"","sources":["../../src/TabList/TabMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAA6B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAmBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,iBAAiB,CAAC,EAC5B,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAyKD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,qBA4Ld;yBAnMe,OAAO"}