@astryxdesign/core 0.4.1 → 0.4.2-canary.01592f7

package/dist/SideNav/SideNav.js

@@ -32,6 +32,7 @@ import { MobileNav } from "../MobileNav/MobileNav.js";
 import { useResizable } from "../Resizable/useResizable.js";
 import { ResizeHandle } from "../Resizable/ResizeHandle.js";
 import { themeProps } from "../utils/themeProps.js";
+import { SizeProvider } from "../SizeContext/SizeContext.js";
 import { useTranslator } from "../i18n/index.js";
 
 // =============================================================================
@@ -75,6 +76,13 @@ const styles = {
   }
 };
 
+/**
+ * Cascaded to the icon rows through `SizeContext` so the built-in collapse
+ * button and the consumer's `footerIcons` come out one height. An explicit
+ * `size` on a child still wins.
+ */
+const FOOTER_ICON_SIZE = 'sm';
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -160,6 +168,9 @@ export function SideNav({
   });
   const toggle = useCallback(() => {
     const next = !collapsed;
+
+    // Deprecated `handleRef` path only: an out-of-tree button reads this
+    // snapshot while rendering, which can happen before SideNav re-renders.
     collapseStateRef.current = {
       ...collapseStateRef.current,
       isCollapsed: next
@@ -204,7 +215,10 @@ export function SideNav({
         ...{
           className: "x78zum5 x6s0dn4 xzye2dw xvc5jky"
         },
-        children: footerIcons
+        children: /*#__PURE__*/_jsx(SizeProvider, {
+          value: FOOTER_ICON_SIZE,
+          children: footerIcons
+        })
       })]
     });
   }
@@ -217,6 +231,10 @@ export function SideNav({
     return /*#__PURE__*/_jsxs(MobileNav, {
       header: header,
       "data-testid": testId,
+      xstyle: xstyle,
+      className: className,
+      style: style,
+      ...props,
       children: [topContent, children, hasDrawerFooter && /*#__PURE__*/_jsxs("div", {
         ...{
           className: "x78zum5 xdt5ytf xr1yuqi x1txdalj x1xye8es"
@@ -225,7 +243,10 @@ export function SideNav({
           ...{
             className: "x78zum5 x6s0dn4 xzye2dw"
           },
-          children: footerIcons
+          children: /*#__PURE__*/_jsx(SizeProvider, {
+            value: FOOTER_ICON_SIZE,
+            children: footerIcons
+          })
         })]
       })]
     });
@@ -245,7 +266,10 @@ export function SideNav({
           ...{
             className: "x78zum5 x6s0dn4 xzye2dw"
           },
-          children: footerIcons
+          children: /*#__PURE__*/_jsx(SizeProvider, {
+            value: FOOTER_ICON_SIZE,
+            children: footerIcons
+          })
         })]
       })]
     });
@@ -323,7 +347,7 @@ export function SideNav({
           className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf x1wesfrj xexx8yu x6s0dn4"
         }
       }[!!collapsed << 0],
-      children: [footer, /*#__PURE__*/_jsxs("div", {
+      children: [footer, /*#__PURE__*/_jsx("div", {
         ...{
           0: {
             className: "x78zum5 x6s0dn4 xzye2dw"
@@ -332,7 +356,10 @@ export function SideNav({
             className: "x78zum5 x6s0dn4 xzye2dw x3ieub6"
           }
         }[!!collapsed << 0],
-        children: [showCollapseButton && /*#__PURE__*/_jsx(SideNavCollapseButton, {}), footerIcons]
+        children: /*#__PURE__*/_jsxs(SizeProvider, {
+          value: FOOTER_ICON_SIZE,
+          children: [showCollapseButton && /*#__PURE__*/_jsx(SideNavCollapseButton, {}), footerIcons]
+        })
       })]
     })]
   });

package/dist/SideNav/SideNavCollapseButton.d.ts

@@ -5,7 +5,7 @@
  * @position Composable toggle button for sidenav collapse
  *
  * Place inside SideNav (reads context automatically) or outside
- * (pass handleRef to connect). Customizable via label/children.
+ * (pass the same controlled `collapsible` config both get).
  *
  * SYNC: When modified, update:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
@@ -14,12 +14,20 @@
  */
 import React, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-import { type SideNavImperativeCollapseHandle } from './SideNavCollapseContext';
+import { type SideNavControlledCollapsible, type SideNavImperativeCollapseHandle } from './SideNavCollapseContext';
+import type { ElementSize } from '../SizeContext/SizeContext';
 export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement> {
     ref?: React.Ref<HTMLButtonElement>;
     /**
-     * Imperative handle from SideNav. Only needed when the button is rendered
-     * outside the sidenav, where collapse context is unavailable.
+     * The same controlled `collapsible` config given to SideNav
+     * (`{isCollapsed, onCollapsedChange}`). Needed only when the button is
+     * rendered outside the sidenav, where collapse context cannot reach it.
+     */
+    collapsible?: SideNavControlledCollapsible;
+    /**
+     * Imperative handle from SideNav.
+     *
+     * @deprecated Pass `collapsible` instead.
      */
     handleRef?: React.RefObject<SideNavImperativeCollapseHandle | null>;
     /**
@@ -27,6 +35,12 @@ export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement>
      * with the chevron icon. When omitted, renders as an icon-only button.
      */
     label?: string;
+    /**
+     * Button size. Defaults to the size its container cascades — `sm` in a
+     * SideNav footer — or `md` outside one. Set it for placements with no row
+     * to inherit from, e.g. a button placed in a `TopNav`.
+     */
+    size?: ElementSize;
     /**
      * Custom button content. Overrides the default chevron icon and label.
      */
@@ -37,7 +51,8 @@ export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement>
  *
  * Place anywhere inside SideNav (header, topContent, footer, footerIcons)
  * and it reads collapse state from context automatically. For placement
- * outside the sidenav (e.g. in TopNav or content area), pass handleRef.
+ * outside the sidenav (e.g. in TopNav or content area), hold the state and
+ * hand the same `collapsible` config to both.
  *
  * @example
  * ```
@@ -48,12 +63,13 @@ export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement>
  *
  * @example
  * ```
- * const ref = useRef(null);
- * <TopNav endContent={<SideNavCollapseButton handleRef={ref} />} />
- * <SideNav handleRef={ref} collapsible>...</SideNav>
+ * const [isCollapsed, setIsCollapsed] = useState(false);
+ * const collapsible = {isCollapsed, onCollapsedChange: setIsCollapsed};
+ * <TopNav endContent={<SideNavCollapseButton collapsible={collapsible} />} />
+ * <SideNav collapsible={{...collapsible, hasButton: false}}>...</SideNav>
  * ```
  */
-export declare function SideNavCollapseButton({ ref, handleRef, label, children, onClick: onClickProp, ...props }: SideNavCollapseButtonProps): React.JSX.Element | null;
+export declare function SideNavCollapseButton({ ref, collapsible, handleRef, label, size, children, onClick: onClickProp, ...props }: SideNavCollapseButtonProps): React.JSX.Element | null;
 export declare namespace SideNavCollapseButton {
     var displayName: string;
 }

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,4BA8C5B;yBArDe,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;AAKzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAGL,KAAK,4BAA4B,EACjC,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAGlC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAkC5D,MAAM,WAAW,0BAA2B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,WAAW,CAAC,EAAE,4BAA4B,CAAC;IAE3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,+BAA+B,GAAG,IAAI,CAAC,CAAC;IAEpE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,WAAW,EACX,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,0BAA0B,4BAiD5B;yBA1De,qBAAqB"}

package/dist/SideNav/SideNavCollapseButton.js

@@ -9,14 +9,14 @@
  * @position Composable toggle button for sidenav collapse
  *
  * Place inside SideNav (reads context automatically) or outside
- * (pass handleRef to connect). Customizable via label/children.
+ * (pass the same controlled `collapsible` config both get).
  *
  * SYNC: When modified, update:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
  * - /packages/core/src/SideNav/index.ts
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { durationVars, easeVars } from "../theme/tokens.stylex.js";
@@ -26,17 +26,23 @@ import { composeEventHandlers, rtlStyles } from "../utils/index.js";
 import { useSideNavCollapse } from "./SideNavCollapseContext.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
 import { useTranslator } from "../i18n/index.js";
-
+import { jsx as _jsx } from "react/jsx-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
-import { jsx as _jsx } from "react/jsx-runtime";
+
 const styles = {
+  chevronMirror: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    $$css: true
+  },
   chevron: {
     k1xSpc: "x3nfvp2",
     kGNEyG: "x6s0dn4",
     k1ekBW: "x11xpdln",
-    kIyJzY: "xuedmi6",
+    kIyJzY: "xuedmi6 x12w9bfk",
     kAMwcw: "xlr8y92",
     $$css: true
   },
@@ -59,7 +65,8 @@ const styles = {
  *
  * Place anywhere inside SideNav (header, topContent, footer, footerIcons)
  * and it reads collapse state from context automatically. For placement
- * outside the sidenav (e.g. in TopNav or content area), pass handleRef.
+ * outside the sidenav (e.g. in TopNav or content area), hold the state and
+ * hand the same `collapsible` config to both.
  *
  * @example
  * ```
@@ -70,15 +77,18 @@ const styles = {
  *
  * @example
  * ```
- * const ref = useRef(null);
- * <TopNav endContent={<SideNavCollapseButton handleRef={ref} />} />
- * <SideNav handleRef={ref} collapsible>...</SideNav>
+ * const [isCollapsed, setIsCollapsed] = useState(false);
+ * const collapsible = {isCollapsed, onCollapsedChange: setIsCollapsed};
+ * <TopNav endContent={<SideNavCollapseButton collapsible={collapsible} />} />
+ * <SideNav collapsible={{...collapsible, hasButton: false}}>...</SideNav>
  * ```
  */
 export function SideNavCollapseButton({
   ref,
+  collapsible,
   handleRef,
   label,
+  size,
   children,
   onClick: onClickProp,
   ...props
@@ -88,7 +98,7 @@ export function SideNavCollapseButton({
     isCollapsed,
     toggle,
     isCollapsible
-  } = useSideNavCollapseState(handleRef);
+  } = useSideNavCollapseState(collapsible, handleRef);
   const {
     isMobile
   } = useAppShellMobile();
@@ -102,6 +112,7 @@ export function SideNavCollapseButton({
     ref: ref,
     label: label ?? (isCollapsed ? t('@astryx.sideNavCollapseButton.expandSidebar') : t('@astryx.sideNavCollapseButton.collapseSidebar')),
     variant: "ghost",
+    size: size,
     ...props,
     onClick: composeEventHandlers(onClickProp, toggle),
     icon: children ??
@@ -111,7 +122,7 @@ export function SideNavCollapseButton({
     // element one would overwrite the other and the chevron would stop
     // mirroring under RTL. See utils/rtlStyles.ts.
     _jsx("span", {
-      ...stylex.props(rtlStyles.mirror),
+      ...stylex.props(styles.chevronMirror, rtlStyles.mirror),
       children: /*#__PURE__*/_jsx(Icon, {
         icon: "chevronLeft",
         size: "sm",
@@ -123,17 +134,30 @@ export function SideNavCollapseButton({
   });
 }
 SideNavCollapseButton.displayName = 'SideNavCollapseButton';
-function useSideNavCollapseState(handleRef) {
+function useSideNavCollapseState(collapsible, handleRef) {
   const contextCollapseState = useSideNavCollapse();
+  const {
+    isCollapsed,
+    onCollapsedChange
+  } = collapsible ?? {};
+  const toggleCollapsible = useCallback(() => onCollapsedChange?.(!isCollapsed), [isCollapsed, onCollapsedChange]);
+  const toggleHandle = useCallback(() => {
+    handleRef?.current?.getCollapseState()?.toggle();
+  }, [handleRef]);
+  if (collapsible != null) {
+    return {
+      isCollapsed: isCollapsed ?? false,
+      toggle: toggleCollapsible,
+      isCollapsible: true
+    };
+  }
   if (handleRef == null) {
     return contextCollapseState;
   }
   const externalCollapseState = handleRef.current?.getCollapseState() ?? null;
   return {
     isCollapsed: externalCollapseState?.isCollapsed ?? false,
-    toggle: () => {
-      handleRef.current?.getCollapseState()?.toggle();
-    },
+    toggle: toggleHandle,
     isCollapsible: externalCollapseState?.isCollapsible ?? true
   };
 }

package/dist/SideNav/SideNavCollapseContext.d.ts

@@ -6,6 +6,27 @@ export interface SideNavCollapseState {
     /** Whether collapse is enabled */
     isCollapsible: boolean;
 }
+/** Object form of SideNav's `collapsible` prop. */
+export interface SideNavCollapsibleConfig {
+    defaultIsCollapsed?: boolean;
+    isCollapsed?: boolean;
+    onCollapsedChange?: (isCollapsed: boolean) => void;
+    hasButton?: boolean;
+    buttonLabel?: string;
+}
+/**
+ * The controlled form: the consumer holds the state, so it can be handed to
+ * both SideNav and a SideNavCollapseButton rendered outside it.
+ */
+export interface SideNavControlledCollapsible extends SideNavCollapsibleConfig {
+    isCollapsed: boolean;
+    onCollapsedChange: (isCollapsed: boolean) => void;
+}
+/**
+ * @deprecated Pass the same controlled `collapsible` config to SideNav and to
+ * the out-of-tree SideNavCollapseButton instead. The state then reaches the
+ * button through props rather than through a ref.
+ */
 export interface SideNavImperativeCollapseHandle {
     getCollapseState: () => SideNavCollapseState | null;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SideNavCollapseContext.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseContext.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,oBAAoB;IACnC,iDAAiD;IACjD,WAAW,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,kCAAkC;IAClC,aAAa,EAAE,OAAO,CAAC;CACxB;AAGD,MAAM,WAAW,+BAA+B;IAC9C,gBAAgB,EAAE,MAAM,oBAAoB,GAAG,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,sBAAsB,+CAMlC,CAAC;AAGF;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD"}
+{"version":3,"file":"SideNavCollapseContext.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseContext.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,oBAAoB;IACnC,iDAAiD;IACjD,WAAW,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,kCAAkC;IAClC,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,mDAAmD;AACnD,MAAM,WAAW,wBAAwB;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,WAAW,4BAA6B,SAAQ,wBAAwB;IAC5E,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAED;;;;GAIG;AACH,MAAM,WAAW,+BAA+B;IAC9C,gBAAgB,EAAE,MAAM,oBAAoB,GAAG,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,sBAAsB,+CAIjC,CAAC;AAGH;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD"}

package/dist/SideNav/SideNavCollapseContext.js

@@ -10,10 +10,24 @@
  *
  * Provides collapse state to SideNavCollapseButton and other
  * sidenav children. Set by SideNav when isCollapsible is true.
- * Also provides a small imperative handle for ref-based collapse buttons
- * rendered outside the SideNav tree.
+ * A button rendered outside the SideNav tree is out of context's reach and
+ * takes the controlled `collapsible` config as a prop instead.
  */
 import { createContext, use } from 'react';
+
+/** Object form of SideNav's `collapsible` prop. */
+
+/**
+ * The controlled form: the consumer holds the state, so it can be handed to
+ * both SideNav and a SideNavCollapseButton rendered outside it.
+ */
+
+/**
+ * @deprecated Pass the same controlled `collapsible` config to SideNav and to
+ * the out-of-tree SideNavCollapseButton instead. The state then reaches the
+ * button through props rather than through a ref.
+ */
+
 export const SideNavCollapseContext = /*#__PURE__*/createContext({
   isCollapsed: false,
   toggle: () => {},

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;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"}
+{"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;AAoBtD,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,sCAwfrB;yBAzgBe,cAAc"}

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;
 }