@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}

package/dist/DropdownMenu/DropdownMenu.js

@@ -55,11 +55,13 @@ import { moveRegionsTab } from "./menuRegionStops.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { useMenuDrillIn } from "./useMenuDrillIn.js";
 import { resolveMenuWidth } from "./menuWidth.js";
+import { menuTouchActionStyles } from "./menuTouchAction.stylex.js";
 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 +80,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 +102,7 @@ const styles = {
   },
   dropdown: {
     kB7OPa: "x9f619",
-    k1xSpc: "x78zum5 x1ab7gxt",
+    k1xSpc: "x78zum5 x6ptruj",
     kXwgrk: "xdt5ytf",
     kOIVth: "x1lsbc85",
     kI3sdo: "x1a2a7pz",
@@ -136,15 +139,6 @@ const styles = {
     kAzted: "x2lwn1j",
     $$css: true
   },
-  touchPinchZoom: {
-    kFalU9: "x1j4r261",
-    $$css: true
-  },
-  touchPanYPinchZoom: {
-    kFalU9: "xge0x1e",
-    kZeWKH: "xish69e",
-    $$css: true
-  },
   popoverViewport: {
     kB7OPa: "x9f619",
     kskxy: "x1uh1i8a",
@@ -389,6 +383,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 +495,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 +553,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 +569,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 +1149,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 +1160,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]
@@ -1258,7 +1262,7 @@ function DropdownMenuPopover({
         }
       },
       ...menuPress.menuProps,
-      ...mergeProps(themeProps('dropdown-menu'), stylex.props(styles.dropdown, resolvedMaxHeight != null && dynamicStyles.menuMaxHeight(resolvedMaxHeight), hasOverflow ? styles.touchPanYPinchZoom : styles.touchPinchZoom, hasOverflow && styles.scrollable, hasRegions && styles.menuInFrame,
+      ...mergeProps(themeProps('dropdown-menu'), stylex.props(styles.dropdown, resolvedMaxHeight != null && dynamicStyles.menuMaxHeight(resolvedMaxHeight), hasOverflow ? menuTouchActionStyles.scrolls : menuTouchActionStyles.fits, hasOverflow && styles.scrollable, hasRegions && styles.menuInFrame,
       // Between a header and a footer the menu is a Tab stop, so
       // keyboard focus on it must be visible (the base style removes
       // the ring for the pointer-open focus target).

package/dist/DropdownMenu/DropdownMenuGroup.d.ts

@@ -1,6 +1,7 @@
 /**
  * @file DropdownMenuGroup.tsx
- * @input Uses spacing/typography/color tokens, themeProps (heading target)
+ * @input Uses spacing/typography/color tokens, themeProps (heading target);
+ *   forwards host props to the group element
  * @output Exports DropdownMenuGroup component and DropdownMenuGroupProps
  * @position Sub-component; used inside DropdownMenu
  *
@@ -20,7 +21,7 @@
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps.js';
-export interface DropdownMenuGroupProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
+export interface DropdownMenuGroupProps extends Omit<BaseProps<HTMLDivElement>, 'role'> {
     /**
      * Heading shown above the group's rows and used as the group's accessible
      * name (`aria-labelledby`). Omit it for an unnamed group. Keep this content
@@ -39,7 +40,9 @@ export interface DropdownMenuGroupProps extends Pick<BaseProps, 'xstyle' | 'clas
  * `menuitem`, so arrow-key navigation and typeahead skip it. Keep heading
  * content non-interactive; place controls in DropdownMenu's `header` or
  * `footer`. The compound peer of
- * `{type: 'section', title, items}` in the `items` data API.
+ * `{type: 'section', title, items}` in the `items` data API. Host attributes
+ * (`id`, `data-*`, `aria-*`) and DOM handlers reach the group element; its
+ * role, and its name while it has a title, stay component-owned.
  *
  * @example
  * ```
@@ -53,7 +56,7 @@ export interface DropdownMenuGroupProps extends Pick<BaseProps, 'xstyle' | 'clas
  * </DropdownMenu>
  * ```
  */
-export declare function DropdownMenuGroup({ title, children, xstyle, className, style, ref, }: DropdownMenuGroupProps): import("react").JSX.Element;
+export declare function DropdownMenuGroup({ title, children, xstyle, className, style, ref, 'aria-labelledby': ariaLabelledBy, ...rest }: DropdownMenuGroupProps): import("react").JSX.Element;
 export declare namespace DropdownMenuGroup {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,sBAAsB,+BAuBxB;yBA9Be,iBAAiB"}
+{"version":3,"file":"DropdownMenuGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,SAAS,CAAC,cAAc,CAAC,EACzB,MAAM,CACP;IACC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,iBAAiB,EAAE,cAAc,EACjC,GAAG,IAAI,EACR,EAAE,sBAAsB,+BAwBxB;yBAjCe,iBAAiB"}

package/dist/DropdownMenu/DropdownMenuGroup.js

@@ -4,7 +4,8 @@
 
 /**
  * @file DropdownMenuGroup.tsx
- * @input Uses spacing/typography/color tokens, themeProps (heading target)
+ * @input Uses spacing/typography/color tokens, themeProps (heading target);
+ *   forwards host props to the group element
  * @output Exports DropdownMenuGroup component and DropdownMenuGroupProps
  * @position Sub-component; used inside DropdownMenu
  *
@@ -36,7 +37,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * `menuitem`, so arrow-key navigation and typeahead skip it. Keep heading
  * content non-interactive; place controls in DropdownMenu's `header` or
  * `footer`. The compound peer of
- * `{type: 'section', title, items}` in the `items` data API.
+ * `{type: 'section', title, items}` in the `items` data API. Host attributes
+ * (`id`, `data-*`, `aria-*`) and DOM handlers reach the group element; its
+ * role, and its name while it has a title, stay component-owned.
  *
  * @example
  * ```
@@ -56,14 +59,17 @@ export function DropdownMenuGroup({
   xstyle,
   className,
   style,
-  ref
+  ref,
+  'aria-labelledby': ariaLabelledBy,
+  ...rest
 }) {
   const headingId = useId();
   const hasTitle = title != null && title !== '' && title !== false;
   return /*#__PURE__*/_jsxs("div", {
+    ...rest,
     ref: ref,
     role: "group",
-    "aria-labelledby": hasTitle ? headingId : undefined,
+    "aria-labelledby": hasTitle ? headingId : ariaLabelledBy,
     ...mergeProps(stylex.props(xstyle), className, style),
     children: [hasTitle && /*#__PURE__*/_jsx("div", {
       id: headingId,

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/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
@@ -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
@@ -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.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/lazyMenuBottomSheet.d.ts

@@ -19,6 +19,8 @@
 import { type ComponentProps, type ReactElement } from 'react';
 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));
 }