@astryxdesign/core 0.4.1 → 0.4.2-canary.464a445

package/dist/SideNav/SideNavHeading.js

@@ -30,6 +30,7 @@ import { Link } from "../Link/index.js";
 import { Icon } from "../Icon/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { navItemStyles } from "../NavItem/navItemStyles.stylex.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { useSideNavCollapse } from "./SideNavCollapseContext.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
@@ -62,6 +63,19 @@ const styles = {
     kg3NbH: "xnjsko4",
     $$css: true
   },
+  interactive: {
+    kkrTdU: "x1ypdohk",
+    kaIpWk: "xh6dtrn",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kMv6JI: "xjb2p0i",
+    kGuDYH: "x1qlqyl8",
+    k63SB2: "x1sodnla",
+    k9WMMc: "x1yc453h",
+    kHE3J0: "xe9uy6x",
+    $$css: true
+  },
   menuTrigger: {
     kkrTdU: "x1ypdohk",
     kaIpWk: "xh6dtrn",
@@ -74,6 +88,32 @@ const styles = {
     k9WMMc: "x1yc453h",
     $$css: true
   },
+  icon: {
+    kmuXW: "x2lah0s",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    $$css: true
+  },
+  heading: {
+    kGuDYH: "x18juvz8",
+    k63SB2: "x2mo6ok",
+    kLWn49: "xf74fhv",
+    kMwMTN: "x1tgivj0",
+    kybGjl: "x1hl2dhg",
+    kVQacm: "xb3r6kr",
+    kg5iWk: "xlyipyv",
+    khDVqt: "xuxw1ft",
+    $$css: true
+  },
+  headingLink: {
+    kybGjl: "x1hl2dhg",
+    kMwMTN: "x1heor9g",
+    kVQacm: "xb3r6kr",
+    kg5iWk: "xlyipyv",
+    khDVqt: "xuxw1ft",
+    $$css: true
+  },
   chevron: {
     kmuXW: "x2lah0s",
     k1xSpc: "x78zum5",
@@ -85,6 +125,26 @@ const styles = {
     kGuDYH: "x1qlqyl8",
     $$css: true
   },
+  popoverHeading: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "x1txdalj",
+    kzqmXN: "xh8yej3",
+    kWkggS: "xjbqb8w",
+    kMv6JI: "xjb2p0i",
+    kGuDYH: "x1qlqyl8",
+    kMwMTN: "x1heor9g",
+    k9WMMc: "x1yc453h",
+    kAzted: "xkoleio",
+    kZCmMZ: "x12gdq22 x1betex2",
+    kwRFfy: "x1djylfy",
+    k8WAf4: "xt970qd",
+    keoZOQ: "xcsaf9d",
+    k1K539: "x1p37lm5",
+    kUOVxO: "xhrcg97",
+    kkrTdU: "x1ypdohk",
+    $$css: true
+  },
   popoverChevron: {
     kmuXW: "x2lah0s",
     k1xSpc: "x78zum5",
@@ -187,14 +247,12 @@ export function SideNavHeading({
     role: 'none',
     hasCloseButton: false
   });
-  const closeMenuCtx = useMemo(() => ({
-    closeMenu: popover.hide
-  }), [popover.hide]);
   const {
     triggerProps,
     contentProps,
     menuRef,
-    setTriggerEl
+    setTriggerEl,
+    close: closeMenu
   } = useMenuHover({
     show: popover.show,
     hide: popover.hide,
@@ -202,7 +260,14 @@ export function SideNavHeading({
     isEnabled: !!menu,
     showDelay: 0
   });
-  const setRef = mergeRefs(rootRef, setTriggerEl, ref, menu ? popover.triggerRef : undefined);
+  const closeMenuCtx = useMemo(() => ({
+    closeMenu
+  }), [closeMenu]);
+
+  // setTriggerEl belongs on the chevron button, not this root: it is the
+  // focus-restore target and a <div> cannot take focus. triggerRef stays here
+  // because the panel anchors to the whole heading.
+  const setRef = mergeRefs(rootRef, ref, menu ? popover.triggerRef : undefined);
 
   // In collapsed mode: hide if no icon, show icon-only if has icon
   if (isCollapsed && !icon) {
@@ -215,7 +280,9 @@ export function SideNavHeading({
       },
       children: icon
     });
-    const collapsedSetRef = mergeRefs(collapsedItemRef, ref, menu ? popover.triggerRef : undefined);
+    const collapsedSetRef = mergeRefs(collapsedItemRef, ref,
+    // Collapsed, this button is the trigger, so it takes both roles.
+    menu ? popover.triggerRef : undefined, menu ? setTriggerEl : undefined);
     let collapsedElement;
     if (headingHref) {
       collapsedElement = /*#__PURE__*/_jsx(LinkComponent, {
@@ -223,7 +290,7 @@ export function SideNavHeading({
         href: headingHref,
         "aria-label": heading,
         "data-testid": testId,
-        ...mergeProps(themeProps('side-nav-heading'), stylex.props(navItemStyles.item, styles.rootCollapsed, xstyle), className, style),
+        ...mergeProps(themeProps('side-nav-heading'), focusOutlineProps.focusVisible(navItemStyles.item, styles.rootCollapsed, xstyle), className, style),
         children: collapsedIcon
       });
     } else if (menu) {
@@ -235,7 +302,7 @@ export function SideNavHeading({
           "data-testid": testId,
           ...popover.triggerProps,
           ...triggerProps,
-          ...mergeProps(themeProps('side-nav-heading'), stylex.props(navItemStyles.item, styles.rootCollapsed, styles.menuTrigger, xstyle), className, style),
+          ...mergeProps(themeProps('side-nav-heading'), focusOutlineProps.focusVisible(navItemStyles.item, styles.rootCollapsed, styles.menuTrigger, xstyle), className, style),
           children: collapsedIcon
         }), popover.render(/*#__PURE__*/_jsxs("div", {
           ref: menuRef,
@@ -245,10 +312,9 @@ export function SideNavHeading({
           ...contentProps,
           children: [/*#__PURE__*/_jsxs("button", {
             type: "button",
-            ...{
-              className: "x78zum5 x6s0dn4 x1txdalj xh8yej3 xjbqb8w xjb2p0i x1qlqyl8 x1heor9g x1yc453h xkoleio x12gdq22 x1betex2 x1djylfy xt970qd xcsaf9d x1p37lm5 xhrcg97 x1ypdohk"
-            },
-            onClick: triggerProps.onClick,
+            ...focusOutlineProps.focusVisible(styles.popoverHeading),
+            // A close affordance, not the trigger: dismiss only.
+            onClick: closeMenu,
             children: [icon && /*#__PURE__*/_jsx("span", {
               ...{
                 className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
@@ -350,9 +416,7 @@ export function SideNavHeading({
       },
       children: [hasAnyHref && headingHref && menu ? /*#__PURE__*/_jsx(LinkComponent, {
         href: headingHref,
-        ...{
-          className: "x18juvz8 x2mo6ok xf74fhv x1hl2dhg x1heor9g xb3r6kr xlyipyv xuxw1ft"
-        },
+        ...focusOutlineProps.focusVisible(styles.heading, styles.headingLink),
         children: heading
       }) : /*#__PURE__*/_jsx("span", {
         ...{
@@ -389,10 +453,9 @@ export function SideNavHeading({
   // sizing, with flipped chevron inline after the title. Always static (no links).
   const popoverHeadingContent = /*#__PURE__*/_jsxs("button", {
     type: "button",
-    ...{
-      className: "x78zum5 x6s0dn4 x1txdalj xh8yej3 xjbqb8w xjb2p0i x1qlqyl8 x1heor9g x1yc453h xkoleio x12gdq22 x1betex2 x1djylfy xt970qd xcsaf9d x1p37lm5 xhrcg97 x1ypdohk"
-    },
-    onClick: triggerProps.onClick,
+    ...focusOutlineProps.focusVisible(styles.popoverHeading),
+    // A close affordance, not the trigger: dismiss only.
+    onClick: closeMenu,
     children: [icon && /*#__PURE__*/_jsx("span", {
       ...{
         className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
@@ -412,7 +475,7 @@ export function SideNavHeading({
       ref: ref,
       href: headingHref,
       "data-testid": testId,
-      ...mergeProps(themeProps('side-nav-heading'), stylex.props(styles.root, styles.menuTrigger, xstyle), className, style),
+      ...mergeProps(themeProps('side-nav-heading'), focusOutlineProps.focusVisible(styles.root, styles.menuTrigger, xstyle), className, style),
       ...props,
       children: [icon && /*#__PURE__*/_jsx("span", {
         ...{
@@ -437,6 +500,7 @@ export function SideNavHeading({
           },
           children: icon
         }), renderTextContent(/*#__PURE__*/_jsx("button", {
+          ref: setTriggerEl,
           type: "button",
           "aria-label": t('@astryx.sideNav.heading.openMenu'),
           onClick: e => {
@@ -444,9 +508,7 @@ export function SideNavHeading({
             triggerProps.onClick();
           },
           ...popover.triggerProps,
-          ...{
-            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k xy8csz5 ximsjs8 xv9yike x1ypdohk xh6dtrn xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x1sodnla x1yc453h xe9uy6x"
-          },
+          ...focusOutlineProps.focusVisible(styles.chevron, styles.interactive),
           children: /*#__PURE__*/_jsx(Icon, {
             icon: "chevronDown",
             size: "sm",
@@ -486,9 +548,7 @@ export function SideNavHeading({
         children: [icon && (headingHref ? /*#__PURE__*/_jsx(LinkComponent, {
           href: headingHref,
           "aria-label": heading,
-          ...{
-            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
-          },
+          ...focusOutlineProps.focusVisible(styles.icon),
           children: icon
         }) : /*#__PURE__*/_jsx("span", {
           ...{
@@ -496,6 +556,7 @@ export function SideNavHeading({
           },
           children: icon
         })), renderTextContent(showChevron ? /*#__PURE__*/_jsx("button", {
+          ref: setTriggerEl,
           type: "button",
           "aria-label": t('@astryx.sideNav.heading.openMenu'),
           onClick: e => {
@@ -503,9 +564,7 @@ export function SideNavHeading({
             triggerProps.onClick();
           },
           ...popover.triggerProps,
-          ...{
-            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k xy8csz5 ximsjs8 xv9yike x1ypdohk xh6dtrn xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x1sodnla x1yc453h xe9uy6x"
-          },
+          ...focusOutlineProps.focusVisible(styles.chevron, styles.interactive),
           children: /*#__PURE__*/_jsx(Icon, {
             icon: "chevronDown",
             size: "sm",
@@ -542,9 +601,7 @@ export function SideNavHeading({
       children: [icon && (headingHref ? /*#__PURE__*/_jsx(LinkComponent, {
         href: headingHref,
         "aria-label": heading,
-        ...{
-          className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
-        },
+        ...focusOutlineProps.focusVisible(styles.icon),
         children: icon
       }) : /*#__PURE__*/_jsx("span", {
         ...{

package/dist/SideNav/SideNavItem.d.ts

@@ -1,11 +1,16 @@
 /**
  * @file SideNavItem.tsx
- * @input Uses React, ReactNode, StyleX, Icon, IconType
+ * @input Uses React, ReactNode, StyleX, Icon, IconType, useMenuHover
  * @output Exports SideNavItem component and SideNavItemProps
  * @position Core implementation; used inside SideNav children
  *
  * Navigation item with icon, selected state, and nesting.
  *
+ * Collapsed items with children open their submenu flyout through
+ * `useMenuHover`, the shared hover-intent hook (same one `SideNavHeading` and
+ * `TopNavMenu` use). Hover is a progressive enhancement over the popover's
+ * click behavior and is inert on coarse pointers.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
  * - /packages/core/src/SideNav/SideNav.test.tsx
@@ -107,7 +112,7 @@ export interface SideNavItemProps extends BaseProps<HTMLElement> {
  * </SideNavItem>
  * ```
  */
-export declare function SideNavItem({ as, label, icon, selectedIcon, isSelected, isDisabled, href, onClick, endContent, children, collapsible: itemCollapsible, size, 'data-testid': testId, ref, xstyle, }: SideNavItemProps): import("react").JSX.Element | null;
+export declare function SideNavItem({ as, label, icon, selectedIcon, isSelected, isDisabled, href, onClick, endContent, children, collapsible: itemCollapsible, size, 'data-testid': testId, ref, xstyle, ...rest }: SideNavItemProps): import("react").JSX.Element | null;
 export declare namespace SideNavItem {
     var displayName: string;
 }

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,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"}
+{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA8NhF,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,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCA4UlB;yBA7Ve,WAAW"}

package/dist/SideNav/SideNavItem.js

@@ -4,12 +4,17 @@
 
 /**
  * @file SideNavItem.tsx
- * @input Uses React, ReactNode, StyleX, Icon, IconType
+ * @input Uses React, ReactNode, StyleX, Icon, IconType, useMenuHover
  * @output Exports SideNavItem component and SideNavItemProps
  * @position Core implementation; used inside SideNav children
  *
  * Navigation item with icon, selected state, and nesting.
  *
+ * Collapsed items with children open their submenu flyout through
+ * `useMenuHover`, the shared hover-intent hook (same one `SideNavHeading` and
+ * `TopNavMenu` use). Hover is a progressive enhancement over the popover's
+ * click behavior and is inert on coarse pointers.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
  * - /packages/core/src/SideNav/SideNav.test.tsx
@@ -20,13 +25,15 @@
 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 { colorVars, spacingVars, sizeVars, fontWeightVars, typeScaleVars, durationVars, easeVars, radiusVars } from "../theme/tokens.stylex.js";
 import { Icon, renderIconSlot } from "../Icon/index.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { usePopover } from "../Popover/usePopover.js";
+import { useMenuHover } from "../hooks/useMenuHover.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { navItemStyles } from "../NavItem/navItemStyles.stylex.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { useSideNavCollapse, SideNavCollapseContext } from "./SideNavCollapseContext.js";
 import { useSideNavRenderMode } from "./SideNavRenderContext.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
@@ -66,7 +73,7 @@ const styles = {
     kZKoxP: "xvpftlf",
     kGuDYH: "x1qlqyl8",
     k1ekBW: "x11xpdln",
-    kIyJzY: "xuedmi6",
+    kIyJzY: "xuedmi6 x12w9bfk",
     kAMwcw: "xlr8y92",
     kmuXW: "x2lah0s",
     $$css: true
@@ -74,6 +81,50 @@ const styles = {
   expandChevronExpanded: {
     k3aq6I: "x19jd1h0",
     $$css: true
+  },
+  expandToggle: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmuXW: "x2lah0s",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kMwMTN: "x1heor9g",
+    kkrTdU: "x1ypdohk",
+    kaIpWk: "xh6dtrn",
+    kHE3J0: "xe9uy6x",
+    kSReZ0: "xyxi2l3",
+    $$css: true
+  },
+  splitAction: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kSGwAc: "xkh2ocl",
+    kOIVth: "x1txdalj",
+    kUk6DE: "x98rzlu",
+    k7Eaqz: "xeuugli",
+    kMwMTN: "x1heor9g",
+    kybGjl: "x1hl2dhg",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kMv6JI: "xjb2p0i",
+    kGuDYH: "x1qlqyl8",
+    k63SB2: "x1pd3egz",
+    kLWn49: "x15bjb6t",
+    k9WMMc: "x1yc453h",
+    kkrTdU: "x1ypdohk",
+    $$css: true
+  },
+  popoverGap: {
+    keTefX: "x11g1kdw",
+    k71WvV: "xnur1sd",
+    $$css: true
   }
 };
 
@@ -164,7 +215,8 @@ export function SideNavItem({
   size = 'md',
   'data-testid': testId,
   ref,
-  xstyle
+  xstyle,
+  ...rest
 }) {
   const t = useTranslator();
   const {
@@ -184,7 +236,9 @@ export function SideNavItem({
     hasLightDismiss: true,
     hasAutoFocus: true,
     hasCloseButton: false,
-    dialogLabel: `${label} submenu`
+    dialogLabel: t('@astryx.sideNavItem.submenuLabel', {
+      label
+    })
   });
 
   // Collapse state for items with children
@@ -230,39 +284,24 @@ export function SideNavItem({
     toggleItemCollapse();
   };
 
-  // Hover handlers for collapsed popover (mirrors TopNavMenu pattern)
-  const showTimeoutRef = useRef(null);
-  const hideTimeoutRef = useRef(null);
-  const clearPopoverTimeouts = useCallback(() => {
-    if (showTimeoutRef.current) {
-      clearTimeout(showTimeoutRef.current);
-      showTimeoutRef.current = null;
-    }
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current);
-      hideTimeoutRef.current = null;
-    }
-  }, []);
-  const schedulePopoverShow = useCallback(() => {
-    clearPopoverTimeouts();
-    showTimeoutRef.current = setTimeout(() => {
-      popover.show({
-        skipAutoFocus: true
-      });
-    }, 150);
-  }, [clearPopoverTimeouts, popover]);
-  const schedulePopoverHide = useCallback(() => {
-    clearPopoverTimeouts();
-    hideTimeoutRef.current = setTimeout(() => {
-      popover.hide();
-    }, 200);
-  }, [clearPopoverTimeouts, popover]);
-  const handlePopoverMouseEnter = useCallback(() => {
-    schedulePopoverShow();
-  }, [schedulePopoverShow]);
-  const handlePopoverMouseLeave = useCallback(() => {
-    schedulePopoverHide();
-  }, [schedulePopoverHide]);
+  // Pointer half only. The hook's `onKeyDown`/`menuRef` drive a `useListFocus`
+  // over `[role="menuitem"]`, and this flyout is a focus-trapped dialog of
+  // links — wiring them would swallow arrow keys rather than navigate with
+  // them. Keyboard stays with `usePopover`'s trap, as in DropdownMenuSubMenu.
+  const {
+    triggerProps: hoverTriggerProps,
+    contentProps: hoverContentProps
+  } = useMenuHover({
+    show: popover.show,
+    hide: popover.hide,
+    isOpen: popover.isOpen,
+    isEnabled: isCollapsed && hasChildren,
+    // Standard popover toggling: the flyout opens beside the rail, not over
+    // the icon, so the click after a hover-open is a deliberate dismissal
+    // rather than the #3121 confirmation the nav menus need.
+    clickGuardMs: 0,
+    ownsFocus: false
+  });
 
   // In collapsed mode: hide items without icons
   if (isCollapsed && !icon) {
@@ -275,14 +314,19 @@ export function SideNavItem({
   if (isCollapsed) {
     const collapsedIcon = displayIcon && renderIconSlot(displayIcon, {
       size: 'sm',
-      color: isSelected ? 'primary' : isDisabled ? 'disabled' : 'secondary'
+      // `inherit` so a selected row's icon follows the row to HighlightText
+      // under forced colors. Identical to `primary` otherwise: both token
+      // families are emitted from one expression.
+      color: isSelected ? 'inherit' : isDisabled ? 'disabled' : 'secondary'
     });
 
-    // Shared collapsed item styles — used by trigger, link, and button
+    // Shared collapsed item styles — used by trigger, link, and button.
+    // All three render a focusable element, so each draws the shared ring.
     const collapsedItemStyles = mergeProps(themeProps('side-nav-item', {
       size,
-      selected: isSelected ? 'selected' : null
-    }), stylex.props(navItemStyles.item, navItemStyles[size], styles.itemCollapsed, size === 'sm' && styles.itemCollapsedSm, size === 'lg' && styles.itemCollapsedLg, isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled));
+      selected: isSelected ? 'selected' : null,
+      disabled: isDisabled ? 'disabled' : null
+    }), focusOutlineProps.focusVisible(navItemStyles.item, navItemStyles[size], styles.itemCollapsed, size === 'sm' && styles.itemCollapsedSm, size === 'lg' && styles.itemCollapsedLg, isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled));
 
     // Items with children: popover trigger + popover
     if (hasChildren) {
@@ -291,9 +335,8 @@ export function SideNavItem({
         children: [/*#__PURE__*/_jsx("button", {
           ref: mergeRefs(ref, popover.triggerRef),
           type: "button",
-          onClick: popover.toggle,
-          onMouseEnter: handlePopoverMouseEnter,
-          onMouseLeave: handlePopoverMouseLeave,
+          ...rest,
+          ...hoverTriggerProps,
           "aria-label": label,
           "data-testid": testId,
           ...popover.triggerProps,
@@ -301,10 +344,10 @@ export function SideNavItem({
           children: collapsedIcon
         }), popover.render(/*#__PURE__*/_jsxs("div", {
           ...{
-            className: "x1litavf x1y0btm7 x14i3s5s xu0wf1k x7a5moj x11g1kdw xfb3i0g"
+            className: "x1hviunn xu0wf1k x7a5moj xfb3i0g"
           },
-          onMouseEnter: handlePopoverMouseEnter,
-          onMouseLeave: handlePopoverMouseLeave,
+          onMouseEnter: hoverContentProps.onMouseEnter,
+          onMouseLeave: hoverContentProps.onMouseLeave,
           onClick: () => popover.hide(),
           children: [/*#__PURE__*/_jsx("div", {
             ...{
@@ -317,7 +360,8 @@ export function SideNavItem({
           })]
         }), {
           placement: 'end',
-          alignment: 'start'
+          alignment: 'start',
+          xstyle: styles.popoverGap
         })]
       });
     }
@@ -335,6 +379,7 @@ export function SideNavItem({
       as: as,
       isDisabled: isDisabled,
       onClick: handleClick,
+      ...rest,
       ...collapsedAriaProps,
       ...collapsedItemStyles,
       children: collapsedIcon
@@ -352,7 +397,8 @@ export function SideNavItem({
   const itemContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [displayIcon && renderIconSlot(displayIcon, {
       size: 'sm',
-      color: isSelected ? 'primary' : isDisabled ? 'disabled' : 'secondary'
+      // `inherit` — see the collapsed path above.
+      color: isSelected ? 'inherit' : isDisabled ? 'disabled' : 'secondary'
     }), !isCollapsed && /*#__PURE__*/_jsx("span", {
       ...{
         className: "x98rzlu xeuugli xb3r6kr xlyipyv xuxw1ft"
@@ -370,39 +416,38 @@ export function SideNavItem({
       xstyle: [styles.expandChevron, !isItemCollapsed && styles.expandChevronExpanded]
     })]
   });
-  const navItemStyleProps = mergeProps(themeProps('side-nav-item', {
+  const itemThemeProps = themeProps('side-nav-item', {
     size,
-    selected: isSelected ? 'selected' : null
-  }), stylex.props(navItemStyles.item, navItemStyles[size], isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled));
-
-  // ── Split-action path: <div> row with <a> + <button> as siblings ──
-  //
-  // When both collapsible and href are set, we can't nest a <button>
-  // inside an <a>. Instead we use a <div> as the flex row container,
-  // an <a display:contents> for the link (with ::before covering the row),
-  // and a <button> sibling lifted above the overlay via z-index.
+    selected: isSelected ? 'selected' : null,
+    disabled: isDisabled ? 'disabled' : null
+  });
+  const itemStyleArgs = [navItemStyles.item, navItemStyles[size], isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled];
 
-  // ── Split-action path: primary element + toggle button as siblings ──
-  //
-  // When collapsible and a primary action (href or onClick) are both set,
-  // we render a <div> row with the primary element and chevron toggle as
-  // siblings. This avoids nesting interactive elements (<button> inside <a>).
+  // Two shapes of the same row appearance:
+  // - `rowProps` for the split-action path, where the row is a plain <div>
+  //   container and its children take focus (so the ring belongs on them);
+  // - `focusableRowProps` for every other path, where the row element is
+  //   itself the focusable control.
+  const rowProps = mergeProps(itemThemeProps, stylex.props(...itemStyleArgs));
+  const focusableRowProps = mergeProps(itemThemeProps, focusOutlineProps.focusVisible(...itemStyleArgs));
 
+  // Split-action path: collapsible plus a primary action renders the primary
+  // element and the chevron toggle as siblings in a <div> row, since a
+  // <button> cannot nest inside an <a>.
   let itemElement;
   if (hasIndependentToggle) {
     itemElement = /*#__PURE__*/_jsxs("div", {
       "data-testid": testId,
-      ...navItemStyleProps,
+      ...rowProps,
       children: [/*#__PURE__*/_jsx(NavItemElement, {
         ref: ref,
         href: href,
         as: as,
         isDisabled: isDisabled,
         onClick: handleClick,
+        ...rest,
         "aria-current": isSelected ? 'page' : undefined,
-        ...{
-          className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli x1heor9g x1hl2dhg x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x1pd3egz x15bjb6t x1yc453h x1ypdohk"
-        },
+        ...focusOutlineProps.focusVisible(styles.splitAction),
         children: itemContent
       }), /*#__PURE__*/_jsx("button", {
         type: "button",
@@ -414,9 +459,7 @@ export function SideNavItem({
         }),
         "aria-expanded": !isItemCollapsed,
         "aria-controls": `${id}-children`,
-        ...{
-          className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1heor9g x1ypdohk xh6dtrn xe9uy6x xyxi2l3"
-        },
+        ...focusOutlineProps.focusVisible(styles.expandToggle),
         children: /*#__PURE__*/_jsx(Icon, {
           icon: "chevronDown",
           size: "lg",
@@ -439,8 +482,9 @@ export function SideNavItem({
       as: as,
       isDisabled: isDisabled,
       onClick: handleClick,
+      ...rest,
       ...ariaProps,
-      ...navItemStyleProps,
+      ...focusableRowProps,
       children: itemContent
     });
   }
@@ -455,10 +499,10 @@ export function SideNavItem({
       inert: isItemCollapsed ? true : undefined,
       ...{
         0: {
-          className: "xrvj5dj x1tu4anv x1qn9uv2 x80gvsz xlr8y92"
+          className: "xrvj5dj x1tu4anv x1qn9uv2 x80gvsz x12w9bfk xlr8y92"
         },
         1: {
-          className: "xrvj5dj x1qn9uv2 x80gvsz xlr8y92 xihq33y"
+          className: "xrvj5dj x1qn9uv2 x80gvsz x12w9bfk xlr8y92 xihq33y"
         }
       }[!!isItemCollapsed << 0],
       children: /*#__PURE__*/_jsxs("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"SideNavSection.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavSection.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AASnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+D5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAMD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,cAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAyDrB;yBArEe,cAAc"}
+{"version":3,"file":"SideNavSection.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavSection.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AASnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgE5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAMD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,cAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBA0CrB;yBAtDe,cAAc"}