@astryxdesign/core 0.7.4 → 0.7.5-canary.0418c47

package/dist/DropdownMenu/DropdownMenu.js

@@ -59,7 +59,8 @@ import "../Layer/layerViewportInset.stylex.js";
 import { layerViewportInset } from "../Layer/layerViewportInset.stylex.js";
 import { useAdaptivePresentation } from "../hooks/useAdaptivePresentation.js";
 // Loaded on demand: only the bottom-sheet presentation renders the sheet.
-import { MenuBottomSheet, MenuBottomSheetActionList } from "./lazyMenuBottomSheet.js";
+import { MenuBottomSheet, MenuBottomSheetActionList, preloadMenuBottomSheetActionList } from "./lazyMenuBottomSheet.js";
+import { menuBottomSheetStyles } from "./menuBottomSheet.stylex.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars, colorVars, radiusVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
@@ -78,11 +79,12 @@ const MENU_MAX_BLOCK_SIZE_FALLBACK = `min(${MENU_BLOCK_CAP}, ${layerViewportInse
 const MENU_TRIGGER_OPEN_BACKGROUND = `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`;
 
 // A sub-menu's drilled-in view with a header or footer renders in the surface
-// host that follows the menu, as the frame marked
-// `data-astryx-submenu-regions="view"` (hidden while a deeper view shows).
-// While one shows, the menu and its header and footer step aside. The rule
-// reads that from the DOM, so no state mirrors which view shows.
-const STEPS_ASIDE_FOR_VIEW = ':has(~ * > [data-astryx-submenu-regions="view"]:not([hidden]))';
+// host that follows the menu (marked `data-astryx-submenu-host`), as the frame
+// marked `data-astryx-submenu-regions="view"` (hidden while a deeper view
+// shows). While one shows, the menu and its header and footer step aside. The
+// rule reads that from the DOM, so no state mirrors which view shows; it names
+// the host by its marker rather than a universal selector.
+const STEPS_ASIDE_FOR_VIEW = ':has(~ [data-astryx-submenu-host] > [data-astryx-submenu-regions="view"]:not([hidden]))';
 const _temp = {
   kzqmXN: "x1uyokj7",
   "$$css": true
@@ -99,7 +101,7 @@ const styles = {
   },
   dropdown: {
     kB7OPa: "x9f619",
-    k1xSpc: "x78zum5 x1ab7gxt",
+    k1xSpc: "x78zum5 x6ptruj",
     kXwgrk: "xdt5ytf",
     kOIVth: "x1lsbc85",
     kI3sdo: "x1a2a7pz",
@@ -389,6 +391,11 @@ function DropdownMenuBottomSheet({
       setSubmenuPath([]);
     }
   }
+  // The closed sheet renders nothing, so load its rows at rest: the first
+  // open shows the actions at once.
+  useEffect(() => {
+    preloadMenuBottomSheetActionList();
+  }, []);
   const currentSubmenu = submenuPath.at(-1);
   const currentItems = currentSubmenu?.items ?? items;
   const currentTitle = currentSubmenu?.label ?? button.label;
@@ -496,6 +503,16 @@ function DropdownMenuBottomSheet({
     onClick?.();
     setOpen(!isOpen);
   };
+
+  // The root view's heading stands alone; a sub-menu's sits in a row with its
+  // back button.
+  const viewHeading = /*#__PURE__*/_jsx(Heading, {
+    ref: viewHeadingRef,
+    level: 3,
+    tabIndex: -1,
+    xstyle: [bottomSheetStyles.viewHeading, submenuPath.length === 0 && [bottomSheetStyles.rootHeading, menuBottomSheetStyles.headingAlone]],
+    children: currentTitle
+  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [renderTrigger != null ? renderTrigger({
       ref: el => {
@@ -544,12 +561,12 @@ function DropdownMenuBottomSheet({
         ...rest,
         ...mergeProps(themeProps('dropdown-menu', {
           presentation: 'bottom-sheet'
-        }), stylex.props(bottomSheetStyles.content, xstyle), className, style),
-        children: [/*#__PURE__*/_jsxs("div", {
+        }), stylex.props(bottomSheetStyles.content, menuBottomSheetStyles.content, xstyle), className, style),
+        children: [submenuPath.length > 0 ? /*#__PURE__*/_jsxs("div", {
           ...{
             className: "x78zum5 x1q0g3np x6s0dn4 xzye2dw x1p37lm5"
           },
-          children: [submenuPath.length > 0 && /*#__PURE__*/_jsx(Button, {
+          children: [/*#__PURE__*/_jsx(Button, {
             label: backLabel,
             variant: "ghost",
             size: "sm",
@@ -560,14 +577,8 @@ function DropdownMenuBottomSheet({
             }),
             isIconOnly: true,
             onClick: () => setSubmenuPath(path => path.slice(0, -1))
-          }), /*#__PURE__*/_jsx(Heading, {
-            ref: viewHeadingRef,
-            level: 3,
-            tabIndex: -1,
-            xstyle: [bottomSheetStyles.viewHeading, submenuPath.length === 0 && bottomSheetStyles.rootHeading],
-            children: currentTitle
-          })]
-        }), isRenderable(header) && /*#__PURE__*/_jsx("div", {
+          }), viewHeading]
+        }) : viewHeading, isRenderable(header) && /*#__PURE__*/_jsx("div", {
           ...{
             className: "xrrkdod xce4md1"
           },
@@ -1146,6 +1157,7 @@ function DropdownMenuPopover({
   // the regions step aside (STEPS_ASIDE_FOR_VIEW).
   const surfaceHostElement = /*#__PURE__*/_jsx("div", {
     ref: attachSurfaceHost,
+    "data-astryx-submenu-host": "",
     ...{
       className: "xjp7ctv"
     }
@@ -1156,14 +1168,14 @@ function DropdownMenuPopover({
       ref: headerRef,
       onKeyDown: handleRegionKeyDown,
       ...{
-        className: "x2lah0s x9epnlk x1ab7gxt"
+        className: "x2lah0s x9epnlk x6ptruj"
       },
       children: header
     }), menu, isRenderable(footer) && /*#__PURE__*/_jsx("div", {
       ref: footerRef,
       onKeyDown: handleRegionKeyDown,
       ...{
-        className: "x2lah0s x9epnlk x1ab7gxt"
+        className: "x2lah0s x9epnlk x6ptruj"
       },
       children: footer
     }), surfaceHostElement]

package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts

@@ -22,8 +22,8 @@
  * mobile.
  */
 import { type ReactNode } from 'react';
-import { type IconType } from '../Icon';
-import type { BaseProps } from '../BaseProps';
+import { type IconType } from '../Icon/index.js';
+import type { BaseProps } from '../BaseProps.js';
 export interface DropdownMenuCheckboxItemProps extends Omit<BaseProps, 'onChange' | 'role' | 'aria-checked' | 'tabIndex'> {
     /**
      * Primary label text identifying the item.

package/dist/DropdownMenu/DropdownMenuDivider.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface DropdownMenuDividerProps extends Omit<BaseProps<HTMLDivElement>, 'role' | 'aria-orientation'> {
     /** Ref forwarded to the separator element. */
     ref?: React.Ref<HTMLDivElement>;

package/dist/DropdownMenu/DropdownMenuGroup.d.ts

@@ -19,7 +19,7 @@
  * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface DropdownMenuGroupProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
     /**
      * Heading shown above the group's rows and used as the group's accessible

package/dist/DropdownMenu/DropdownMenuItem.d.ts

@@ -24,8 +24,8 @@
  * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
  */
 import { type MouseEvent, type ReactNode } from 'react';
-import { type IconType } from '../Icon';
-import type { BaseProps } from '../BaseProps';
+import { type IconType } from '../Icon/index.js';
+import type { BaseProps } from '../BaseProps.js';
 export interface DropdownMenuItemProps extends Omit<BaseProps, 'role' | 'tabIndex'> {
     /** Icon to display before the label. */
     icon?: ReactNode | IconType;

package/dist/DropdownMenu/DropdownMenuItem.js

@@ -65,9 +65,9 @@ const menuItemStyles = {
     $$css: true
   },
   destructive: {
-    kMwMTN: "xjt36v0",
-    "--_item-label-color": "xufyqxy",
-    "--_item-description-color": "xqlix59",
+    kMwMTN: "x1wj83wy",
+    "--_item-label-color": "x1pa1ci1",
+    "--_item-description-color": "x1dj2fx0",
     $$css: true
   }
 };

package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts

@@ -10,7 +10,7 @@
  * menuitemradio rows.
  */
 import { type ReactNode, type Ref } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'> {
     /**
      * The currently selected value in the group. Pass `undefined` when nothing

package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts

@@ -8,7 +8,8 @@
  * (role="menuitemradio"). The row owns the role and aria-checked; there is no
  * nested native <input> (per the WAI-ARIA menuitemradio pattern). Selection
  * state + onChange come from DropdownMenuRadioGroupContext. Keyboard nav +
- * Enter/Space activation come from the parent DropdownMenu.
+ * Enter/Space activation come from the parent DropdownMenu. Caller onClick and
+ * onPointerMove run after the row's own selection and hover focus.
  *
  * The round radio visual is the shared radio indicator, decorative
  * (aria-hidden) — the row owns the checked state, and menu radios pick up the
@@ -17,8 +18,8 @@
  * the inline-end of the row on coarse-pointer (touch) devices via CSS `order`.
  */
 import { type ReactNode } from 'react';
-import { type IconType } from '../Icon';
-import type { BaseProps } from '../BaseProps';
+import { type IconType } from '../Icon/index.js';
+import type { BaseProps } from '../BaseProps.js';
 export interface DropdownMenuRadioItemProps extends Omit<BaseProps, 'role' | 'aria-checked' | 'tabIndex'> {
     /**
      * The value this item represents within its group. The group's `value`
@@ -39,9 +40,9 @@ export interface DropdownMenuRadioItemProps extends Omit<BaseProps, 'role' | 'ar
      */
     icon?: ReactNode | IconType;
     /**
-     * Whether this individual radio item is disabled. Disabled items stay
-     * focusable (via `aria-disabled`) so they remain discoverable by keyboard
-     * and assistive technology, but selection is blocked.
+     * Whether this individual radio item is disabled. Disabled items expose
+     * `aria-disabled`, block selection, and are currently skipped by
+     * DropdownMenu arrow-key navigation.
      * @default false
      */
     isDisabled?: boolean;
@@ -56,6 +57,10 @@ export interface DropdownMenuRadioItemProps extends Omit<BaseProps, 'role' | 'ar
 /**
  * A single option in a DropdownMenuRadioGroup (role="menuitemradio").
  *
+ * Consumer click and pointer-move handlers compose after the row's own
+ * selection and hover-focus behavior; disabled activation stops before the
+ * consumer click handler.
+ *
  * @example
  * ```
  * <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
@@ -64,7 +69,7 @@ export interface DropdownMenuRadioItemProps extends Omit<BaseProps, 'role' | 'ar
  * </DropdownMenuRadioGroup>
  * ```
  */
-export declare function DropdownMenuRadioItem({ value, label, description, icon, isDisabled, endContent, xstyle, className, style, ...rest }: DropdownMenuRadioItemProps): import("react").JSX.Element;
+export declare function DropdownMenuRadioItem({ value, label, description, icon, isDisabled, endContent, xstyle, className, style, onClick, onPointerMove, ...rest }: DropdownMenuRadioItemProps): import("react").JSX.Element;
 export declare namespace DropdownMenuRadioItem {
     var displayName: string;
 }

package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAOtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4C5C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,SAAS,EACT,MAAM,GAAG,cAAc,GAAG,UAAU,CACrC;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,mFAAmF;IACnF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,0BAA0B,+BAmE5B;yBA9Ee,qBAAqB"}
+{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAOtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4C5C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,SAAS,EACT,MAAM,GAAG,cAAc,GAAG,UAAU,CACrC;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,mFAAmF;IACnF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,GAAG,IAAI,EACR,EAAE,0BAA0B,+BAuE5B;yBApFe,qBAAqB"}

package/dist/DropdownMenu/DropdownMenuRadioItem.js

@@ -12,7 +12,8 @@
  * (role="menuitemradio"). The row owns the role and aria-checked; there is no
  * nested native <input> (per the WAI-ARIA menuitemradio pattern). Selection
  * state + onChange come from DropdownMenuRadioGroupContext. Keyboard nav +
- * Enter/Space activation come from the parent DropdownMenu.
+ * Enter/Space activation come from the parent DropdownMenu. Caller onClick and
+ * onPointerMove run after the row's own selection and hover focus.
  *
  * The round radio visual is the shared radio indicator, decorative
  * (aria-hidden) — the row owns the checked state, and menu radios pick up the
@@ -29,7 +30,7 @@ import { useDropdownMenuContext } from "./DropdownMenuContext.js";
 import { focusMenuItemOnHover } from "./menuItemHover.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
-import { mergeProps, themeProps } from "../utils/index.js";
+import { composeEventHandlers, mergeProps, themeProps } from "../utils/index.js";
 import { useDropdownMenuRadioGroupContext } from "./DropdownMenuContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -61,6 +62,10 @@ const styles = {
 /**
  * A single option in a DropdownMenuRadioGroup (role="menuitemradio").
  *
+ * Consumer click and pointer-move handlers compose after the row's own
+ * selection and hover-focus behavior; disabled activation stops before the
+ * consumer click handler.
+ *
  * @example
  * ```
  * <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
@@ -79,6 +84,8 @@ export function DropdownMenuRadioItem({
   xstyle,
   className,
   style,
+  onClick,
+  onPointerMove,
   ...rest
 }) {
   const menuCtx = useDropdownMenuContext();
@@ -90,7 +97,7 @@ export function DropdownMenuRadioItem({
   const controlSize = menuSize === 'sm' ? 'sm' : 'md';
   const isChecked = groupCtx.value === value;
   const RadioControl = useIndicator('radio');
-  const handleClick = useCallback(() => {
+  const handleClick = useCallback(event => {
     if (isDisabled) {
       return;
     }
@@ -98,14 +105,15 @@ export function DropdownMenuRadioItem({
     if (groupCtx.hasCloseOnSelect) {
       menuCtx?.closeMenu();
     }
-  }, [isDisabled, groupCtx, value, menuCtx]);
+    onClick?.(event);
+  }, [isDisabled, groupCtx, value, menuCtx, onClick]);
   const handlePointerMove = useCallback(e => focusMenuItemOnHover(e, isDisabled), [isDisabled]);
   return /*#__PURE__*/_jsx(Item, {
     ...rest,
     role: "menuitemradio",
     "aria-checked": isChecked,
     tabIndex: isDisabled ? undefined : -1,
-    onPointerMove: handlePointerMove,
+    onPointerMove: composeEventHandlers(handlePointerMove, onPointerMove),
     marker:
     /*#__PURE__*/
     // No wrapper — see DropdownMenuCheckboxItem: the target belongs on the

package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts

@@ -36,9 +36,6 @@
  * the row. The list keeps this level's own roving focus, typeahead and press
  * model, so nothing beside the row needs to know.
  *
- * Prior art: legacy internal XDS `XDSDropdownSubMenuItem` (APG menubar-
- * navigation submenu). This re-expresses the same contract on Astryx primitives.
- *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.doc.mjs
  * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.test.tsx
@@ -47,8 +44,8 @@
  * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import { type IconType } from '../Icon';
-import type { BaseProps } from '../BaseProps';
+import { type IconType } from '../Icon/index.js';
+import type { BaseProps } from '../BaseProps.js';
 export type DropdownMenuSubMenuPresentation = 'flyout' | 'drill-in' | 'adaptive';
 interface DropdownMenuSubMenuBaseProps extends Omit<BaseProps, 'role' | 'tabIndex'> {
     /** Icon to display before the label on the trigger row. */
@@ -65,7 +62,7 @@ interface DropdownMenuSubMenuBaseProps extends Omit<BaseProps, 'role' | 'tabInde
     isDisabled?: boolean;
     /**
      * Show a spinner in place of the caret, e.g. while a lazy submenu's children
-     * are loading. Ported from the legacy `hasSpinner` async-submenu affordance.
+     * are loading.
      * @default false
      */
     hasSpinner?: boolean;
@@ -82,7 +79,7 @@ interface DropdownMenuSubMenuBaseProps extends Omit<BaseProps, 'role' | 'tabInde
      * box; `adaptive` drills in when a finger opened the menu — a
      * `(pointer: coarse)` device, decided when the menu opened — and flies out
      * otherwise. Drill-in needs a `DropdownMenu` or `ContextMenu` root.
-     *  'adaptive'
+     * @default 'adaptive'
      */
     presentation?: DropdownMenuSubMenuPresentation;
     /**
@@ -104,7 +101,10 @@ interface DropdownMenuSubMenuBaseProps extends Omit<BaseProps, 'role' | 'tabInde
     footer?: ReactNode;
     /** Test id for the trigger row. */
     'data-testid'?: string;
-    /** Test id for the flyout menu. */
+    /**
+     * Test id for the sub-menu's own `role="menu"` element: the flyout, or the
+     * drilled-in list on a phone.
+     */
     menuDataTestId?: string;
     /**
      * Ref forwarded to the trigger row — the element carrying `role="menuitem"`

package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAyC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6N5C,MAAM,MAAM,+BAA+B,GACzC,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AAErC,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,+BAA+B,CAAC;IAC/C;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AA6CD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAg5BX;yBAl5Be,mBAAmB"}
+{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAyC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6N5C,MAAM,MAAM,+BAA+B,GACzC,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AAErC,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,+BAA+B,CAAC;IAC/C;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AA6CD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAg5BX;yBAl5Be,mBAAmB"}

package/dist/DropdownMenu/DropdownMenuSubMenu.js

@@ -40,9 +40,6 @@
  * the row. The list keeps this level's own roving focus, typeahead and press
  * model, so nothing beside the row needs to know.
  *
- * Prior art: legacy internal XDS `XDSDropdownSubMenuItem` (APG menubar-
- * navigation submenu). This re-expresses the same contract on Astryx primitives.
- *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.doc.mjs
  * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.test.tsx

package/dist/DropdownMenu/MenuBottomSheet.d.ts

@@ -1,10 +1,10 @@
 /**
  * @file MenuBottomSheet.tsx
- * @input Uses BottomSheet and Section
- * @output Internal action-sheet host for menu content
+ * @input Uses BottomSheet
+ * @output Internal action-sheet host for menu content; nothing of the sheet renders while it is closed
  * @position Shared by DropdownMenu and ContextMenu adaptive presentations
  */
-import type { ReactNode, RefObject } from 'react';
+import { type ReactNode, type RefObject } from 'react';
 interface MenuBottomSheetProps {
     finalFocusRef?: RefObject<HTMLElement | null>;
     isOpen: boolean;
@@ -12,7 +12,14 @@ interface MenuBottomSheetProps {
     label: string;
     children: ReactNode;
 }
-export declare function MenuBottomSheet({ finalFocusRef, isOpen, onOpenChange, label, children, }: MenuBottomSheetProps): import("react").JSX.Element;
+/**
+ * The sheet renders nothing at rest (architecture:component-style-authoring
+ * INV7): it mounts as it opens, and after it closes it stays only until its
+ * dialog has closed, so the exit plays out and focus returns to the trigger.
+ * The sheet has no content padding: callers inset their content with
+ * menuBottomSheetStyles.content, so no wrapper sits between the sheet and it.
+ */
+export declare function MenuBottomSheet({ finalFocusRef, isOpen, onOpenChange, label, children, }: MenuBottomSheetProps): import("react").JSX.Element | null;
 export declare namespace MenuBottomSheet {
     var displayName: string;
 }

package/dist/DropdownMenu/MenuBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuBottomSheet.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/MenuBottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAIhD,UAAU,oBAAoB;IAC5B,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,EAC9B,aAAa,EACb,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,+BActB;yBApBe,eAAe"}
+{"version":3,"file":"MenuBottomSheet.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/MenuBottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,UAAU,oBAAoB;IAC5B,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,aAAa,EACb,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,sCAqCtB;yBA3Ce,eAAe"}

package/dist/DropdownMenu/MenuBottomSheet.js

@@ -4,13 +4,20 @@
 
 /**
  * @file MenuBottomSheet.tsx
- * @input Uses BottomSheet and Section
- * @output Internal action-sheet host for menu content
+ * @input Uses BottomSheet
+ * @output Internal action-sheet host for menu content; nothing of the sheet renders while it is closed
  * @position Shared by DropdownMenu and ContextMenu adaptive presentations
  */
+import { useEffect, useRef, useState } from 'react';
 import { BottomSheet } from "../BottomSheet/BottomSheet.js";
-import { Section } from "../Section/Section.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The sheet renders nothing at rest (architecture:component-style-authoring
+ * INV7): it mounts as it opens, and after it closes it stays only until its
+ * dialog has closed, so the exit plays out and focus returns to the trigger.
+ * The sheet has no content padding: callers inset their content with
+ * menuBottomSheetStyles.content, so no wrapper sits between the sheet and it.
+ */
 export function MenuBottomSheet({
   finalFocusRef,
   isOpen,
@@ -18,19 +25,38 @@ export function MenuBottomSheet({
   label,
   children
 }) {
+  const [isMounted, setIsMounted] = useState(isOpen);
+  if (isOpen && !isMounted) {
+    setIsMounted(true);
+  }
+  const panelRef = useRef(null);
+  useEffect(() => {
+    if (isOpen || !isMounted) {
+      return;
+    }
+    const dialog = panelRef.current?.closest('dialog');
+    if (dialog == null || !dialog.open) {
+      // eslint-disable-next-line @eslint-react/set-state-in-effect -- the native <dialog> has already closed, so the exit is over: unmount the sheet
+      setIsMounted(false);
+      return;
+    }
+    const handleClose = () => setIsMounted(false);
+    dialog.addEventListener('close', handleClose);
+    return () => dialog.removeEventListener('close', handleClose);
+  }, [isMounted, isOpen]);
+  if (!isMounted) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(BottomSheet, {
+    ref: panelRef,
     finalFocusRef: finalFocusRef,
     isOpen: isOpen,
     onOpenChange: onOpenChange,
     label: label,
     height: "hug",
+    padding: 0,
     purpose: "info",
-    children: /*#__PURE__*/_jsx(Section, {
-      paddingBlockStart: 4,
-      paddingBlockEnd: 0,
-      paddingInline: 1,
-      children: children
-    })
+    children: children
   });
 }
 MenuBottomSheet.displayName = 'MenuBottomSheet';

package/dist/DropdownMenu/MenuBottomSheetActionList.d.ts

@@ -5,7 +5,7 @@
  * @position Shared implementation for menu bottom-sheet presentations
  */
 import React from 'react';
-import type { DropdownMenuItemData, DropdownMenuOption } from './DropdownMenu';
+import type { DropdownMenuItemData, DropdownMenuOption } from './DropdownMenu.js';
 export declare function MenuBottomSheetActionList({ items, onSelect, onOpenSubmenu, }: {
     items: DropdownMenuOption[];
     onSelect: (item: DropdownMenuItemData, event: React.MouseEvent) => void;

package/dist/DropdownMenu/MenuBottomSheetActionList.js

@@ -31,9 +31,9 @@ const styles = {
     $$css: true
   },
   destructiveAction: {
-    "--_item-label-color": "xufyqxy",
-    "--_item-description-color": "xqlix59",
-    kMwMTN: "xjt36v0",
+    "--_item-label-color": "x1pa1ci1",
+    "--_item-description-color": "x1dj2fx0",
+    kMwMTN: "x1wj83wy",
     $$css: true
   },
   divider: {

package/dist/DropdownMenu/index.d.ts

@@ -12,14 +12,14 @@
  * DropdownMenuContext + useListFocus path, so a new item type (e.g. a submenu)
  * only shows up in their public API once it's aliased there too.
  */
-export { DropdownMenu, type DropdownMenuProps, type DropdownMenuPresentation, type DropdownMenuButtonProps, type DropdownMenuTriggerProps, type DropdownMenuItemData, type DropdownMenuDividerData, type DropdownMenuSection, type DropdownMenuOption, } from './DropdownMenu';
-export type { AdaptivePresentation as MenuPresentation } from '../hooks/useAdaptivePresentation';
-export { DropdownMenuItem, type DropdownMenuItemProps } from './DropdownMenuItem';
-export { DropdownMenuDivider, type DropdownMenuDividerProps, } from './DropdownMenuDivider';
-export { DropdownMenuGroup, type DropdownMenuGroupProps, } from './DropdownMenuGroup';
-export { DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, } from './DropdownMenuCheckboxItem';
-export { DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, } from './DropdownMenuRadioGroup';
-export { DropdownMenuRadioItem, type DropdownMenuRadioItemProps, } from './DropdownMenuRadioItem';
-export { DropdownMenuSubMenu, type DropdownMenuSubMenuProps, type DropdownMenuSubMenuPresentation, } from './DropdownMenuSubMenu';
-export { DropdownMenuContext, useDropdownMenuContext, type DropdownMenuContextValue, type DropdownMenuSize, } from './DropdownMenuContext';
+export { DropdownMenu, type DropdownMenuProps, type DropdownMenuPresentation, type DropdownMenuButtonProps, type DropdownMenuTriggerProps, type DropdownMenuItemData, type DropdownMenuDividerData, type DropdownMenuSection, type DropdownMenuOption, } from './DropdownMenu.js';
+export type { AdaptivePresentation as MenuPresentation } from '../hooks/useAdaptivePresentation.js';
+export { DropdownMenuItem, type DropdownMenuItemProps } from './DropdownMenuItem.js';
+export { DropdownMenuDivider, type DropdownMenuDividerProps, } from './DropdownMenuDivider.js';
+export { DropdownMenuGroup, type DropdownMenuGroupProps, } from './DropdownMenuGroup.js';
+export { DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, } from './DropdownMenuCheckboxItem.js';
+export { DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, } from './DropdownMenuRadioGroup.js';
+export { DropdownMenuRadioItem, type DropdownMenuRadioItemProps, } from './DropdownMenuRadioItem.js';
+export { DropdownMenuSubMenu, type DropdownMenuSubMenuProps, type DropdownMenuSubMenuPresentation, } from './DropdownMenuSubMenu.js';
+export { DropdownMenuContext, useDropdownMenuContext, type DropdownMenuContextValue, type DropdownMenuSize, } from './DropdownMenuContext.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts

@@ -17,8 +17,10 @@
  * visible markup, so it first renders right after hydration.
  */
 import { type ComponentProps, type ReactElement } from 'react';
-import type { MenuBottomSheet as EagerMenuBottomSheet } from './MenuBottomSheet';
-import type { MenuBottomSheetActionList as EagerMenuBottomSheetActionList } from './MenuBottomSheetActionList';
+import type { MenuBottomSheet as EagerMenuBottomSheet } from './MenuBottomSheet.js';
+import type { MenuBottomSheetActionList as EagerMenuBottomSheetActionList } from './MenuBottomSheetActionList.js';
+/** Starts loading the action list; a sheet menu calls it at rest. */
+export declare function preloadMenuBottomSheetActionList(): void;
 export declare function MenuBottomSheet(props: ComponentProps<typeof EagerMenuBottomSheet>): ReactElement | null;
 export declare function MenuBottomSheetActionList(props: ComponentProps<typeof EagerMenuBottomSheetActionList>): ReactElement | null;
 //# sourceMappingURL=lazyMenuBottomSheet.d.ts.map

package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lazyMenuBottomSheet.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/lazyMenuBottomSheet.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,eAAe,IAAI,oBAAoB,EAAC,MAAM,mBAAmB,CAAC;AAC/E,OAAO,KAAK,EAAC,yBAAyB,IAAI,8BAA8B,EAAC,MAAM,6BAA6B,CAAC;AAc7G,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,OAAO,oBAAoB,CAAC,GACjD,YAAY,GAAG,IAAI,CASrB;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,cAAc,CAAC,OAAO,8BAA8B,CAAC,GAC3D,YAAY,GAAG,IAAI,CASrB"}
+{"version":3,"file":"lazyMenuBottomSheet.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/lazyMenuBottomSheet.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,eAAe,IAAI,oBAAoB,EAAC,MAAM,mBAAmB,CAAC;AAC/E,OAAO,KAAK,EAAC,yBAAyB,IAAI,8BAA8B,EAAC,MAAM,6BAA6B,CAAC;AAuB7G,qEAAqE;AACrE,wBAAgB,gCAAgC,IAAI,IAAI,CAEvD;AAQD,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,OAAO,oBAAoB,CAAC,GACjD,YAAY,GAAG,IAAI,CASrB;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,cAAc,CAAC,OAAO,8BAA8B,CAAC,GAC3D,YAAY,GAAG,IAAI,CAcrB"}

package/dist/DropdownMenu/lazyMenuBottomSheet.js

@@ -20,12 +20,31 @@
  * leave server markup incomplete and abort hydration. The closed sheet has no
  * visible markup, so it first renders right after hydration.
  */
-import { createElement, lazy, Suspense } from 'react';
+import { createElement, lazy, Suspense, useState } from 'react';
 import { useIsHydrating } from "../hooks/useIsHydrating.js";
 const LazyMenuBottomSheet = /*#__PURE__*/lazy(async () => import("./MenuBottomSheet.js").then(module => ({
   default: module.MenuBottomSheet
 })));
-const LazyMenuBottomSheetActionList = /*#__PURE__*/lazy(async () => import("./MenuBottomSheetActionList.js").then(module => ({
+
+// The action list renders inside the sheet, which renders nothing while
+// closed, so its first render is the first open. Once preloaded, it renders
+// directly instead of through lazy(): a suspended render on open would hold
+// the rows back (React delays revealing them for up to 300ms).
+let actionListModule = null;
+let actionListLoad = null;
+async function loadActionList() {
+  actionListLoad ??= import("./MenuBottomSheetActionList.js").then(module => {
+    actionListModule = module;
+    return module;
+  });
+  return actionListLoad;
+}
+
+/** Starts loading the action list; a sheet menu calls it at rest. */
+export function preloadMenuBottomSheetActionList() {
+  void loadActionList();
+}
+const LazyMenuBottomSheetActionList = /*#__PURE__*/lazy(async () => loadActionList().then(module => ({
   default: module.MenuBottomSheetActionList
 })));
 export function MenuBottomSheet(props) {
@@ -37,10 +56,13 @@ export function MenuBottomSheet(props) {
   }, /*#__PURE__*/createElement(LazyMenuBottomSheet, props));
 }
 export function MenuBottomSheetActionList(props) {
+  // Chosen once per mount, so a module that arrives later never swaps the
+  // rendered list (which would remount it and drop focus).
+  const [LoadedActionList] = useState(() => actionListModule?.MenuBottomSheetActionList ?? null);
   if (useIsHydrating()) {
     return null;
   }
   return /*#__PURE__*/createElement(Suspense, {
     fallback: null
-  }, /*#__PURE__*/createElement(LazyMenuBottomSheetActionList, props));
+  }, /*#__PURE__*/createElement(LoadedActionList ?? LazyMenuBottomSheetActionList, props));
 }

package/dist/DropdownMenu/menuBottomSheet.stylex.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file menuBottomSheet.stylex.ts
+ * @input Uses StyleX and the spacing tokens
+ * @output Exports menuBottomSheetStyles, the content box of a menu's sheet
+ * @position Shared by DropdownMenu and ContextMenu sheet content
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const menuBottomSheetStyles: Readonly<{
+    readonly content: Readonly<{
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "1rem">;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", 0>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "0.25rem">;
+        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "0.25rem">;
+        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "0.25rem">;
+        readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", "1rem">;
+        readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", "0px">;
+    }>;
+    readonly headingAlone: Readonly<{
+        readonly marginBottom: stylex.StyleXClassNameFor<"marginBottom", "0.5rem">;
+    }>;
+}>;
+//# sourceMappingURL=menuBottomSheet.stylex.d.ts.map