@astryxdesign/core 0.3.0 → 0.4.0

package/dist/TopNav/TopNavMegaMenu.js

@@ -12,6 +12,13 @@
  * eliminating z-index stacking. CSS anchor positioning places the panel below
  * the nav wrapper.
  *
+ * The default (desktop) trigger opens on hover and click. Hover opens are
+ * transient; click/keyboard opens are pinned. A click shortly after hover-open
+ * confirms and pins the panel instead of closing it. The panel remains an auto
+ * popover for native dismissal and sibling exclusivity; `popoverTarget`
+ * registers the trigger as its native invoker so the guard runs before any
+ * dismiss.
+ *
  * Supports three render modes via TopNavRenderContext:
  * - 'default': desktop popover mega menu (hover/click triggered)
  * - 'mobile-bar': returns null (hidden in compact mobile bar)
@@ -28,18 +35,59 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, fontWeightVars, shadowVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
 import { usePopover } from "../Popover/usePopover.js";
 import { Grid } from "../Grid/Grid.js";
-import { useIcon } from "../Icon/index.js";
+import { Icon } from "../Icon/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { navItemStyles } from "../NavItem/navItemStyles.stylex.js";
 import { useTopNavSlot } from "./TopNavContext.js";
 import { useTopNavRenderMode } from "./TopNavRenderContext.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 
 // =============================================================================
 // Styles
 // =============================================================================
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {
+  trigger: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "x1txdalj",
+    k8WAf4: "x1vofgu7",
+    kg3NbH: "xrrkdod",
+    kaIpWk: "xh6dtrn",
+    kGuDYH: "xcr08ib",
+    kLWn49: "x1kq96og",
+    k63SB2: "x1e4wzip",
+    kMwMTN: "xv1l7n4",
+    kybGjl: "x1hl2dhg",
+    kkrTdU: "x1ypdohk",
+    k1ekBW: "xs2xxs2",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    kWkggS: "xjbqb8w xe9uy6x",
+    kMv6JI: "xjb2p0i",
+    $$css: true
+  },
+  triggerOpen: {
+    kMwMTN: "x1tgivj0",
+    kWkggS: "x1lmrjuc",
+    $$css: true
+  },
+  chevron: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kzqmXN: "x15vhz18",
+    kZKoxP: "xlzyvqe",
+    kGuDYH: "x1qlqyl8",
+    k1ekBW: "x11xpdln",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  },
+  chevronOpen: {
+    k3aq6I: "x19jd1h0",
+    $$css: true
+  },
   panelAnimation: {
     kSiTet: "xg01cxk xofkqq2",
     k3aq6I: "x1bvilyr x9cjr8z",
@@ -52,14 +100,35 @@ const styles = {
     $$css: true
   },
   panelViewportFit: {
-    k1xSpc: "x78zum5",
+    k1xSpc: "x1s85apg x1y40yee",
     kXwgrk: "xdt5ytf",
     kskxy: "xbhvqqn",
     $$css: true
   },
+  menuWrapper: {
+    kzQI83: "xgyuaek",
+    kmuXW: "xs83m0k",
+    kCS8Yb: "xchdapg",
+    k7Eaqz: "xeuugli",
+    $$css: true
+  },
   drawerHeader: {
     kjj79g: "x1qughib",
     $$css: true
+  },
+  drawerChevron: {
+    k1xSpc: "x3nfvp2",
+    kzqmXN: "x15vhz18",
+    kZKoxP: "xlzyvqe",
+    kGuDYH: "x1qlqyl8",
+    k1ekBW: "x11xpdln",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  },
+  drawerChevronExpanded: {
+    k3aq6I: "x19jd1h0",
+    $$css: true
   }
 };
 
@@ -164,6 +233,7 @@ TopNavMegaMenu.displayName = 'TopNavMegaMenu';
 // DefaultMegaMenu — desktop popover mode
 // =============================================================================
 
+const CLICK_GUARD_MS = 500;
 function DefaultMegaMenu({
   ref,
   label,
@@ -174,27 +244,36 @@ function DefaultMegaMenu({
   onOpenChange
 }) {
   const slot = useTopNavSlot();
-  const chevronDownIcon = useIcon('chevronDown');
   const showTimeoutRef = useRef(null);
   const hideTimeoutRef = useRef(null);
   const triggerButtonRef = useRef(null);
-  const clickLockedRef = useRef(false);
+  const hoverOpenedAtRef = useRef(0);
+  const stickyRef = useRef(false);
   const handlePopoverShow = useCallback(() => {
     onOpenChange?.(true);
   }, [onOpenChange]);
   const handlePopoverHide = useCallback(() => {
+    hoverOpenedAtRef.current = 0;
+    stickyRef.current = false;
     onOpenChange?.(false);
   }, [onOpenChange]);
   const popover = usePopover({
     // role: 'none' — the panel exposes its own role="group" labeled by
-    // `label`. Focus stays on the trigger while the panel is open, so a
-    // role="dialog" aria-modal="true" wrapper would announce an unnamed
-    // modal dialog around a grid of links.
+    // `label`. Pointer/hover opens keep focus on the trigger; keyboard and
+    // assistive-tech opens move focus into the panel (a labeled group you exit
+    // with Escape or by tabbing out). Either way role="dialog"
+    // aria-modal="true" would be wrong: it announces an unnamed modal dialog
+    // around a grid of links (and, when focus stays on the trigger, marks the
+    // focused control inert).
     role: 'none',
     // hasSurface: false — mega menu provides its own surface (panelContainer)
     // with border-top and custom overflow. Animation is applied via the
     // render() call's xstyle prop (panelAnimation), not the hook options.
     hasSurface: false,
+    // Keep native outside-click/Escape dismissal and sibling exclusivity.
+    // The trigger's popoverTarget association prevents its activation from
+    // being treated as an ordinary outside interaction.
+    hasLightDismiss: true,
     onShow: handlePopoverShow,
     onHide: handlePopoverHide
   });
@@ -222,38 +301,65 @@ function DefaultMegaMenu({
   const scheduleShow = useCallback(() => {
     clearTimeouts();
     showTimeoutRef.current = setTimeout(() => {
+      hoverOpenedAtRef.current = Date.now();
       popover.show({
         skipAutoFocus: true
       });
     }, delay);
-  }, [clearTimeouts, popover, delay]);
+  }, [clearTimeouts, delay, popover]);
   const scheduleHide = useCallback(() => {
     clearTimeouts();
     hideTimeoutRef.current = setTimeout(() => {
       popover.hide();
     }, hideDelay);
-  }, [clearTimeouts, popover, hideDelay]);
-  const handleMouseEnter = useCallback(() => {
-    if (!clickLockedRef.current) {
+  }, [clearTimeouts, hideDelay, popover]);
+  const focusFirstPanelItem = useCallback(() => {
+    popover.contentRef.current?.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')?.focus();
+  }, [popover.contentRef]);
+  const handleTriggerMouseEnter = useCallback(() => {
+    clearTimeouts();
+    if (!popover.isOpen) {
       scheduleShow();
     }
-  }, [scheduleShow]);
+  }, [clearTimeouts, popover.isOpen, scheduleShow]);
+  const handlePanelMouseEnter = useCallback(() => {
+    clearTimeouts();
+  }, [clearTimeouts]);
   const handleMouseLeave = useCallback(() => {
-    if (!clickLockedRef.current) {
+    if (!stickyRef.current) {
       scheduleHide();
     }
   }, [scheduleHide]);
-  const handleClick = useCallback(() => {
+  const handleClick = useCallback(event => {
+    // Cancel the native invoker toggle so this guard is the single source of
+    // truth for trigger activation. popoverTarget still establishes the
+    // invoker relationship used by native light-dismiss and stacking.
+    event.preventDefault();
     clearTimeouts();
-    if (popover.isOpen) {
-      clickLockedRef.current = false;
+    if (event.detail === 0) {
+      stickyRef.current = true;
+      hoverOpenedAtRef.current = 0;
+      if (popover.isOpen) {
+        focusFirstPanelItem();
+      } else {
+        popover.show();
+      }
+    } else if (!popover.isOpen) {
+      stickyRef.current = true;
+      popover.show({
+        skipAutoFocus: true
+      });
+    } else if (Date.now() - hoverOpenedAtRef.current < CLICK_GUARD_MS) {
+      // A click that naturally follows a hover-open confirms the open state
+      // instead of toggling the panel shut. From here it behaves like any
+      // other click-open and stays pinned until explicit dismissal.
+      stickyRef.current = true;
+      hoverOpenedAtRef.current = 0;
+    } else {
       popover.hide();
       triggerButtonRef.current?.focus();
-    } else {
-      clickLockedRef.current = true;
-      popover.show();
     }
-  }, [popover, clearTimeouts]);
+  }, [clearTimeouts, focusFirstPanelItem, popover]);
   useEffect(() => {
     return () => {
       clearTimeouts();
@@ -264,27 +370,17 @@ function DefaultMegaMenu({
       ref: mergeRefs(triggerButtonRef, ref),
       type: "button",
       ...popover.triggerProps,
+      // Native invoker prevents trigger light-dismiss.
+      popoverTarget: popover.id,
       onClick: handleClick,
-      onMouseEnter: handleMouseEnter,
+      onMouseEnter: handleTriggerMouseEnter,
       onMouseLeave: handleMouseLeave,
-      ...mergeProps(themeProps('top-nav-mega-menu'), {
-        0: {
-          className: "x3nfvp2 x6s0dn4 x1txdalj x1vofgu7 xrrkdod xh6dtrn xcr08ib x1kq96og x1e4wzip xv1l7n4 x1hl2dhg x1ypdohk xs2xxs2 xuedmi6 xlr8y92 xjbqb8w xe9uy6x x17nn4n9 x1wfwxd8 x7s97pk xjb2p0i"
-        },
-        1: {
-          className: "x3nfvp2 x6s0dn4 x1txdalj x1vofgu7 xrrkdod xh6dtrn xcr08ib x1kq96og x1e4wzip x1hl2dhg x1ypdohk xs2xxs2 xuedmi6 xlr8y92 x17nn4n9 x1wfwxd8 x7s97pk xjb2p0i x1tgivj0 x1lmrjuc"
-        }
-      }[!!popover.isOpen << 0]),
-      children: [label, /*#__PURE__*/_jsx("span", {
-        ...{
-          0: {
-            className: "x3nfvp2 x6s0dn4 x11xpdln xuedmi6 xlr8y92"
-          },
-          1: {
-            className: "x3nfvp2 x6s0dn4 x11xpdln xuedmi6 xlr8y92 x19jd1h0"
-          }
-        }[!!popover.isOpen << 0],
-        children: chevronDownIcon
+      ...mergeProps(themeProps('top-nav-mega-menu'), focusOutlineProps.focusVisible(styles.trigger, popover.isOpen && styles.triggerOpen)),
+      children: [label, /*#__PURE__*/_jsx(Icon, {
+        icon: "chevronDown",
+        size: "sm",
+        color: "inherit",
+        xstyle: [styles.chevron, popover.isOpen && styles.chevronOpen]
       })]
     }), popover.render(/*#__PURE__*/_jsx("div", {
       // role="group" — a mega menu is a browsing grid of links, not an
@@ -292,7 +388,7 @@ function DefaultMegaMenu({
       // for action menus; link mega menus are the documented anti-case).
       role: "group",
       "aria-label": label,
-      onMouseEnter: handleMouseEnter,
+      onMouseEnter: handlePanelMouseEnter,
       onMouseLeave: handleMouseLeave,
       ...{
         className: "x1prclbq x11xkdxz x13fuv20 x1pc3f07 x1hviunn x1i5ehqx xb3r6kr x78zum5 xdt5ytf x2lwn1j"
@@ -301,15 +397,11 @@ function DefaultMegaMenu({
         ...{
           className: "x78zum5 x1a02dak x1qh66ti x8o8v82 xrrkdod x1m1aaou x9f619 x1odjw0f xish69e"
         },
-        children: [items != null && /*#__PURE__*/_jsx("div", {
-          ...{
-            className: "xgyuaek xs83m0k xchdapg xeuugli"
-          },
-          children: /*#__PURE__*/_jsx(Grid, {
-            columns: 2,
-            gap: 2,
-            children: items
-          })
+        children: [items != null && /*#__PURE__*/_jsx(Grid, {
+          columns: 2,
+          gap: 2,
+          xstyle: styles.menuWrapper,
+          children: items
         }), featured != null && /*#__PURE__*/_jsx("div", {
           ...{
             className: "x1iyjqo2 xs83m0k xjpgo6f x1hviunn xwmxj5m xb3r6kr x78zum5 xdt5ytf"
@@ -335,7 +427,6 @@ function DrawerMegaMenu({
   featured
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const chevronDownIcon = useIcon('chevronDown');
   const menuId = `mega-menu-${label.toLowerCase().replace(/\s+/g, '-')}`;
   return /*#__PURE__*/_jsxs("div", {
     ...{
@@ -349,16 +440,11 @@ function DrawerMegaMenu({
       ...mergeProps(themeProps('top-nav-mega-menu', {
         mode: 'drawer'
       }), stylex.props(navItemStyles.item, styles.drawerHeader)),
-      children: [label, /*#__PURE__*/_jsx("span", {
-        ...{
-          0: {
-            className: "x3nfvp2 x11xpdln xuedmi6 xlr8y92"
-          },
-          1: {
-            className: "x3nfvp2 x11xpdln xuedmi6 xlr8y92 x19jd1h0"
-          }
-        }[!!isExpanded << 0],
-        children: chevronDownIcon
+      children: [label, /*#__PURE__*/_jsx(Icon, {
+        icon: "chevronDown",
+        size: "sm",
+        color: "inherit",
+        xstyle: [styles.drawerChevron, isExpanded && styles.drawerChevronExpanded]
       })]
     }), /*#__PURE__*/_jsx("div", {
       id: `${menuId}-items`,

package/dist/TopNav/TopNavMegaMenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavMegaMenuItem.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6G5C,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,KAAK,EACL,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,EAAE,EACF,QAAQ,GACT,EAAE,uBAAuB,qBA+DzB;yBAxEe,kBAAkB"}
+{"version":3,"file":"TopNavMegaMenuItem.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsG5C,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,KAAK,EACL,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,EAAE,EACF,QAAQ,GACT,EAAE,uBAAuB,qBA+DzB;yBAxEe,kBAAkB"}

package/dist/TopNav/TopNavMegaMenuItem.js

@@ -24,12 +24,33 @@ import { useTopNavRenderMode } from "./TopNavRenderContext.js";
 import { mergeProps } from "../utils/index.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 
 // =============================================================================
 // Styles
 // =============================================================================
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
+  desktop: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x1cy8zhl",
+    kOIVth: "xjcht0a",
+    k8WAf4: "x8o8v82",
+    kg3NbH: "xrrkdod",
+    kaIpWk: "xh6dtrn",
+    kybGjl: "x1hl2dhg",
+    kkrTdU: "x1ypdohk",
+    k1ekBW: "x15406qy",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    kWkggS: "xjbqb8w xe9uy6x xyxi2l3",
+    kMwMTN: "x1heor9g",
+    kMv6JI: "xjb2p0i",
+    k9WMMc: "x1yc453h",
+    kB7OPa: "x9f619",
+    kzqmXN: "xh8yej3",
+    $$css: true
+  },
   drawerItem: {
     kZCmMZ: "x31w388",
     kGNEyG: "x1cy8zhl",
@@ -134,9 +155,7 @@ export function TopNavMegaMenuItem({
     href: href,
     onClick: onClick,
     tabIndex: tabIndex,
-    ...mergeProps(themeProps('top-nav-mega-menu-item'), {
-      className: "x78zum5 x1cy8zhl xjcht0a x8o8v82 xrrkdod xh6dtrn x1hl2dhg x1ypdohk x15406qy xuedmi6 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x17nn4n9 x1wfwxd8 x7s97pk x1heor9g xjb2p0i x1yc453h x9f619 xh8yej3"
-    }),
+    ...mergeProps(themeProps('top-nav-mega-menu-item'), focusOutlineProps.focusVisible(styles.desktop)),
     children: [icon && /*#__PURE__*/_jsx("div", {
       ...{
         className: "x78zum5 x6s0dn4 xl56j7k x100vrsf x1vqgdyp xh6dtrn x17x4s8c x2lah0s xv9yike"

package/dist/TopNav/TopNavMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmM5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,GAChB,EAAE,eAAe,4BAgOjB;yBAtOe,UAAU"}
+{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8L5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,GAChB,EAAE,eAAe,4BAkOjB;yBAxOe,UAAU"}

package/dist/TopNav/TopNavMenu.js

@@ -21,7 +21,7 @@ import { usePopover } from "../Popover/usePopover.js";
 import { useMenuHover } from "../hooks/useMenuHover.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { useTypeahead } from "../hooks/useTypeahead.js";
-import { useIcon } from "../Icon/index.js";
+import { Icon } from "../Icon/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { navItemStyles } from "../NavItem/navItemStyles.stylex.js";
 import { useTopNavSlot } from "./TopNavContext.js";
@@ -29,6 +29,7 @@ import { useTopNavRenderMode } from "./TopNavRenderContext.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
 
@@ -37,8 +38,59 @@ import { colorVars, spacingVars, radiusVars, durationVars, easeVars, fontWeightV
 // =============================================================================
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {
-  menuOffset: {
-    keoZOQ: "xcsaf9d",
+  trigger: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "x1txdalj",
+    k8WAf4: "x1vofgu7",
+    kg3NbH: "xrrkdod",
+    kaIpWk: "xh6dtrn",
+    kGuDYH: "xcr08ib",
+    kLWn49: "x1kq96og",
+    k63SB2: "x1e4wzip",
+    kMwMTN: "xv1l7n4",
+    kybGjl: "x1hl2dhg",
+    kkrTdU: "x1ypdohk",
+    k1ekBW: "xs2xxs2",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    kWkggS: "xjbqb8w xe9uy6x",
+    kMv6JI: "xjb2p0i",
+    $$css: true
+  },
+  triggerOpen: {
+    kMwMTN: "x1tgivj0",
+    kWkggS: "x1lmrjuc",
+    $$css: true
+  },
+  chevron: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kzqmXN: "x15vhz18",
+    kZKoxP: "xlzyvqe",
+    kGuDYH: "x1qlqyl8",
+    k1ekBW: "x11xpdln",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  },
+  chevronOpen: {
+    k3aq6I: "x19jd1h0",
+    $$css: true
+  },
+  menuItem: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "xjcht0a",
+    k8WAf4: "x8o8v82",
+    kg3NbH: "xrrkdod",
+    kaIpWk: "xh6dtrn",
+    kybGjl: "x1hl2dhg",
+    kkrTdU: "x1ypdohk",
+    k1ekBW: "x15406qy",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    kWkggS: "xjbqb8w xe9uy6x",
     $$css: true
   }
 };
@@ -47,6 +99,20 @@ const drawerStyles = {
     kjj79g: "x1qughib",
     $$css: true
   },
+  chevron: {
+    k1xSpc: "x3nfvp2",
+    kzqmXN: "x15vhz18",
+    kZKoxP: "xlzyvqe",
+    kGuDYH: "x1qlqyl8",
+    k1ekBW: "x11xpdln",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  },
+  chevronExpanded: {
+    k3aq6I: "x19jd1h0",
+    $$css: true
+  },
   item: {
     kZCmMZ: "x31w388",
     kybGjl: "x1hl2dhg",
@@ -113,7 +179,6 @@ export function TopNavMenu({
   hideDelay = 200
 }) {
   const renderMode = useTopNavRenderMode();
-  const chevronDownIcon = useIcon('chevronDown');
   const {
     closeMobileNav
   } = useAppShellMobile();
@@ -126,8 +191,7 @@ export function TopNavMenu({
     // The popup's own role="menu" is the exposed semantics; a modal dialog
     // wrapper would announce an unnamed dialog around the menu and make the
     // trigger claim aria-haspopup="dialog" for menu content (see TabMenu).
-    role: 'none',
-    xstyle: styles.menuOffset
+    role: 'none'
   });
   const {
     triggerProps,
@@ -209,16 +273,11 @@ export function TopNavMenu({
         "aria-expanded": drawerExpanded,
         "aria-controls": `${menuId}-items`,
         ...stylex.props(navItemStyles.item, drawerStyles.header),
-        children: [label, /*#__PURE__*/_jsx("span", {
-          ...{
-            0: {
-              className: "x3nfvp2 x11xpdln xuedmi6 xlr8y92"
-            },
-            1: {
-              className: "x3nfvp2 x11xpdln xuedmi6 xlr8y92 x19jd1h0"
-            }
-          }[!!drawerExpanded << 0],
-          children: chevronDownIcon
+        children: [label, /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronDown",
+          size: "sm",
+          color: "inherit",
+          xstyle: [drawerStyles.chevron, drawerExpanded && drawerStyles.chevronExpanded]
         })]
       }), /*#__PURE__*/_jsx("div", {
         id: `${menuId}-items`,
@@ -270,24 +329,12 @@ export function TopNavMenu({
       type: "button",
       ...popover.triggerProps,
       ...triggerProps,
-      ...mergeProps(themeProps('top-nav-menu'), {
-        0: {
-          className: "x3nfvp2 x6s0dn4 x1txdalj x1vofgu7 xrrkdod xh6dtrn xcr08ib x1kq96og x1e4wzip xv1l7n4 x1hl2dhg x1ypdohk xs2xxs2 xuedmi6 xlr8y92 xjbqb8w xe9uy6x x17nn4n9 x1wfwxd8 x7s97pk xjb2p0i"
-        },
-        1: {
-          className: "x3nfvp2 x6s0dn4 x1txdalj x1vofgu7 xrrkdod xh6dtrn xcr08ib x1kq96og x1e4wzip x1hl2dhg x1ypdohk xs2xxs2 xuedmi6 xlr8y92 x17nn4n9 x1wfwxd8 x7s97pk xjb2p0i x1tgivj0 x1lmrjuc"
-        }
-      }[!!popover.isOpen << 0]),
-      children: [label, /*#__PURE__*/_jsx("span", {
-        ...{
-          0: {
-            className: "x3nfvp2 x6s0dn4 x11xpdln xuedmi6 xlr8y92"
-          },
-          1: {
-            className: "x3nfvp2 x6s0dn4 x11xpdln xuedmi6 xlr8y92 x19jd1h0"
-          }
-        }[!!popover.isOpen << 0],
-        children: chevronDownIcon
+      ...mergeProps(themeProps('top-nav-menu'), focusOutlineProps.focusVisible(styles.trigger, popover.isOpen && styles.triggerOpen)),
+      children: [label, /*#__PURE__*/_jsx(Icon, {
+        icon: "chevronDown",
+        size: "sm",
+        color: "inherit",
+        xstyle: [styles.chevron, popover.isOpen && styles.chevronOpen]
       })]
     }), popover.render(/*#__PURE__*/_jsx("div", {
       ref: setMenuRef,
@@ -312,9 +359,7 @@ export function TopNavMenu({
           tabIndex: -1,
           href: item.href,
           onClick: item.onClick,
-          ...{
-            className: "x78zum5 x6s0dn4 xjcht0a x8o8v82 xrrkdod xh6dtrn x1hl2dhg x1ypdohk x15406qy xuedmi6 xlr8y92 xjbqb8w xe9uy6x x17nn4n9 x1wfwxd8 x7s97pk"
-          },
+          ...focusOutlineProps.focusVisible(styles.menuItem),
           children: [/*#__PURE__*/_jsx("div", {
             ...{
               className: "x78zum5 x6s0dn4 xl56j7k x100vrsf x1vqgdyp xh6dtrn x17x4s8c x2lah0s"
@@ -341,7 +386,7 @@ export function TopNavMenu({
     }), {
       placement: 'below',
       alignment: slot,
-      xstyle: styles.menuOffset
+      offset: spacingVars['--spacing-1']
     })]
   });
 }

package/dist/TreeList/TreeList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EAAC,KAAK,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA4ED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAoB,EACpB,OAAsB,EACtB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,aAAa,+BAqJf;yBA/Je,QAAQ"}
+{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EAAC,KAAK,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmFD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAoB,EACpB,OAAsB,EACtB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,aAAa,+BAoKf;yBA9Ke,QAAQ"}

package/dist/TreeList/TreeList.js

@@ -35,6 +35,7 @@ const styles = {
   root: {
     kVAEAm: "x1n2onr6",
     "--tree-list-indent": "xpa4xmd",
+    "--tree-list-row-gap": "x1xbi2jf",
     $$css: true
   }
 };
@@ -176,7 +177,18 @@ export function TreeList({
     onActivate: activateItem,
     hasRovingTabIndex: true
   });
+  const hasExpandableItems = items.some(item => item.children != null && item.children.length > 0);
   function renderItems(items, nestedLevel, ancestorsIsLast) {
+    // A leaf reserves the chevron column (so its label lines up under a parent's
+    // caret) whenever the tree contains ANY expandable item — i.e. whenever a
+    // caret exists somewhere to align under. This is a whole-tree property, not
+    // a per-group one: a leaf nested under an expandable ancestor must still
+    // reserve the column so it stays indented past its parent's label, even if
+    // its own immediate group happens to be all leaves. Only a fully flat tree
+    // (no expandable items anywhere) has no caret to align under, so its rows
+    // sit flush. Because any expandable descendant forces its whole ancestor
+    // chain to be expandable, "the tree has an expandable item" is equivalent to
+    // "the root group has an expandable item" — checked once at the root.
     return items.map((item, index) => {
       const isLast = index === items.length - 1;
       const isExpanded = expandedKeysOverride.has(item.id) ? expandedKeysOverride.get(item.id) ?? false : expandedKeysFromProps.has(item.id);
@@ -190,6 +202,7 @@ export function TreeList({
         startContent: item.startContent,
         endContent: item.endContent,
         hasChildren: hasChildren,
+        hasExpandableItems: hasExpandableItems,
         onClick: item.onClick,
         href: item.href,
         target: item.target,

package/dist/TreeList/TreeListBranches.d.ts

@@ -12,7 +12,7 @@ interface TreeListBranchesProps {
  * `backgroundColor` or `display: 'none'`) instead of hiding the built-in guides
  * and reimplementing them.
  */
-export declare function TreeListBranches({ ancestorsIsLast, isLast: _isLast, nestedLevel, }: TreeListBranchesProps): import("react").JSX.Element;
+export declare function TreeListBranches({ ancestorsIsLast, isLast, nestedLevel, }: TreeListBranchesProps): import("react").JSX.Element;
 export declare namespace TreeListBranches {
     var displayName: string;
 }

package/dist/TreeList/TreeListBranches.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeListBranches.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListBranches.tsx"],"names":[],"mappings":"AAyDA,UAAU,qBAAqB;IAC7B,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;CACrB;AAMD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,MAAM,EAAE,OAAO,EACf,WAAW,GACZ,EAAE,qBAAqB,+BA8CvB;yBAlDe,gBAAgB"}
+{"version":3,"file":"TreeListBranches.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListBranches.tsx"],"names":[],"mappings":"AAwEA,UAAU,qBAAqB;IAC7B,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;CACrB;AAMD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,MAAM,EACN,WAAW,GACZ,EAAE,qBAAqB,+BAsDvB;yBA1De,gBAAgB"}