@astryxdesign/core 0.1.8 → 0.1.9-canary.02ef052

package/dist/Dialog/DialogHeader.js

@@ -39,7 +39,8 @@ const styles = {
  * Renders a title that receives focus when a modal dialog opens (for screen reader accessibility)
  * and an optional close button. Inline documentation previews suppress this autofocus.
  * The title is an h2 element with tabIndex={-1} so it can be programmatically focused but
- * doesn't appear in the tab order.
+ * doesn't appear in the tab order. The title also names the parent Dialog via
+ * aria-labelledby (unless the Dialog receives an explicit aria-label/aria-labelledby).
  *
  * Uses LayoutHeader internally for consistent styling with other layout headers.
  *
@@ -71,10 +72,13 @@ export function DialogHeader({
   const titleRef = useRef(null);
   const dialogContext = useDialogContext();
   const shouldAutoFocus = dialogContext?.isInline !== true;
+  const titleId = dialogContext?.titleId;
 
   // Auto-focus the title when mounted for screen reader accessibility.
   // Inline dialogs are documentation/showcase previews, so suppress focus to
   // avoid stealing scroll position from the surrounding page.
+  // The parent Dialog detects this title (by `titleId`) via a callback ref to
+  // set its default aria-labelledby — no registration handshake needed here.
   useEffect(() => {
     if (shouldAutoFocus && titleRef.current) {
       titleRef.current.focus();
@@ -102,6 +106,7 @@ export function DialogHeader({
         },
         children: [/*#__PURE__*/_jsx(Heading, {
           ref: titleRef,
+          id: titleId,
           level: 2,
           tabIndex: -1,
           xstyle: styles.titleFocusable,

package/dist/Divider/Divider.js

@@ -115,13 +115,13 @@ export function Divider({
   const isHorizontal = orientation === 'horizontal';
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
+    ...props,
     role: "separator",
     "aria-orientation": orientation,
     ...mergeProps(themeProps('divider', {
       variant,
       orientation
     }), stylex.props(isHorizontal ? baseStyles.horizontal : baseStyles.vertical, isFullBleed && (isHorizontal ? fullBleedStyles.horizontal : fullBleedStyles.vertical), xstyle), className, style),
-    ...props,
     children: [/*#__PURE__*/_jsx("div", {
       ...stylex.props(isHorizontal ? lineStyles.horizontalLine : lineStyles.verticalLine, lineStyles[variant])
     }), label && /*#__PURE__*/_jsx("div", {

package/dist/DropdownMenu/DropdownMenu.d.ts

@@ -27,6 +27,12 @@ export interface DropdownMenuItemData {
     onClick?: () => void;
     isDisabled?: boolean;
     icon?: ReactNode | IconType;
+    /**
+     * Nested submenu entries. When present, this row becomes a submenu (a
+     * flyout revealing `items`) instead of a leaf action — no separate item
+     * "type" is needed. Data-mode parity for the compound DropdownMenuSubMenu API.
+     */
+    items?: DropdownMenuOption[];
 }
 export interface DropdownMenuDivider {
     type: 'divider';

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAEnD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAWtC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAQtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC5B,oBAAoB,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAMnE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAC3B,qBAAqB,GAAG,yBAAyB,CAAC;AA+BpD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EAAE,eAAe,EACvB,UAAU,EAAE,gBAAgB,EAC5B,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,SAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA4QnB;yBAzRe,YAAY"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAEnD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAetC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAQtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC5B,oBAAoB,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAMnE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAC3B,qBAAqB,GAAG,yBAAyB,CAAC;AA+BpD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EAAE,eAAe,EACvB,UAAU,EAAE,gBAAgB,EAC5B,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,SAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAqRnB;yBAlSe,YAAY"}

package/dist/DropdownMenu/DropdownMenu.js

@@ -27,7 +27,7 @@ import { usePopover } from "../Popover/usePopover.js";
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
 import { renderDropdownItems } from "./renderDropdownItems.js";
-import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR } from "./menuItemRoles.js";
+import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR } from "./menuItemRoles.js";
 import { DropdownMenuContext } from "./DropdownMenuContext.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { useTypeahead } from "../hooks/useTypeahead.js";
@@ -134,6 +134,14 @@ export function DropdownMenu({
   };
   const items = ('items' in props ? props.items : undefined) ?? [];
   const children = props.children;
+
+  // Extract BaseProps pass-throughs (aria-*, id, event handlers) from the
+  // discriminated-union rest bag so they can be forwarded to the menu element.
+  const {
+    items: _items,
+    children: _children,
+    ...rest
+  } = props;
   const menuId = useId();
   const menuSize = button.size ?? 'md';
   const buttonRef = useRef(null);
@@ -195,16 +203,19 @@ export function DropdownMenu({
     listRef,
     handleKeyDown: listNavKeyDown,
     focusFirst,
-    focusItem
+    focusItem,
+    ownsEvent,
+    getItems: getMenuItems
   } = useListFocus({
     itemSelector: MENU_ITEM_SELECTOR,
+    boundarySelector: MENU_BOUNDARY_SELECTOR,
     wrap: false,
     onEscape: closeMenu
   });
 
   // First-character typeahead over the (enabled) menu items — jump to the next
-  // item whose label starts with the typed text (menus-11).
-  const getMenuItems = useCallback(() => listRef.current ? Array.from(listRef.current.querySelectorAll(MENU_ITEM_SELECTOR)) : [], [listRef]);
+  // item whose label starts with the typed text (menus-11). Reuses the hook's
+  // scoped item collection so an inline submenu flyout's items aren't swept in.
   const typeahead = useTypeahead({
     getItemLabels: () => getMenuItems().map(el => el.textContent),
     onMatch: focusItem,
@@ -225,6 +236,11 @@ export function DropdownMenu({
 
   // Extend useListFocus with Enter/Space activation + typeahead
   const listKeyDown = useCallback(e => {
+    // A submenu flyout renders inline inside this menu; its key events bubble
+    // up here. Let that level own them — only handle events from this level.
+    if (!ownsEvent(e)) {
+      return;
+    }
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       const focused = document.activeElement;
@@ -248,7 +264,7 @@ export function DropdownMenu({
       return;
     }
     listNavKeyDown(e);
-  }, [listNavKeyDown, closeMenu, typeahead]);
+  }, [listNavKeyDown, closeMenu, typeahead, ownsEvent]);
   const openAndFocus = useCallback(() => {
     popover.show();
     requestAnimationFrame(() => focusFirst());
@@ -323,6 +339,7 @@ export function DropdownMenu({
       "aria-controls": menuId,
       "data-testid": testId
     }), popover.render(/*#__PURE__*/_jsx("div", {
+      ...rest,
       ref: listRef,
       id: menuId,
       role: "menu"

package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts

@@ -71,8 +71,7 @@ export interface DropdownMenuCheckboxItemProps extends Omit<BaseProps, 'onChange
  *
  * @example
  * ```
- *  * import {DropdownMenuCheckboxItem} from '@astryxdesign/core/DropdownMenu';
- *
+ * import {DropdownMenuCheckboxItem} from '@astryxdesign/core/DropdownMenu';
  * <DropdownMenu button={{label: 'View'}}>
  *   <DropdownMenuCheckboxItem
  *     label="Show archived"

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuCheckboxItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuCheckboxItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAElD,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAY5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6D5C,MAAM,WAAW,6BAA8B,SAAQ,IAAI,CACzD,SAAS,EACT,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,CAClD;IACC;;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;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAkB,EAClB,gBAAwB,EACxB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,6BAA6B,+BAwD/B;yBArEe,wBAAwB"}
+{"version":3,"file":"DropdownMenuCheckboxItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuCheckboxItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAa5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,6BAA8B,SAAQ,IAAI,CACzD,SAAS,EACT,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,CAClD;IACC;;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;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAkB,EAClB,gBAAwB,EACxB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,6BAA6B,+BA8D/B;yBA3Ee,wBAAwB"}

package/dist/DropdownMenu/DropdownMenuCheckboxItem.js

@@ -27,6 +27,7 @@ import * as stylex from '@stylexjs/stylex';
 import { Icon, renderIconSlot } from "../Icon/index.js";
 import { Item } from "../Item/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
+import { focusMenuItemOnHover } from "./menuItemHover.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, borderVars } from "../theme/tokens.stylex.js";
 import { mergeProps, themeProps } from "../utils/index.js";
@@ -36,7 +37,7 @@ const styles = {
     kzqmXN: "xh8yej3",
     kaIpWk: "x1ws5lxm",
     kMwMTN: "x1tgivj0",
-    kWkggS: "xjbqb8w x1c52tdz x1uwx2nv",
+    kWkggS: "xjbqb8w x1c52tdz",
     kkrTdU: "x1ypdohk",
     kI3sdo: "x1a2a7pz",
     $$css: true
@@ -94,8 +95,7 @@ const boxSizeStyles = {
  *
  * @example
  * ```
- *  * import {DropdownMenuCheckboxItem} from '@astryxdesign/core/DropdownMenu';
- *
+ * import {DropdownMenuCheckboxItem} from '@astryxdesign/core/DropdownMenu';
  * <DropdownMenu button={{label: 'View'}}>
  *   <DropdownMenuCheckboxItem
  *     label="Show archived"
@@ -131,11 +131,13 @@ export function DropdownMenuCheckboxItem({
       ctx?.closeMenu();
     }
   }, [isDisabled, onChange, value, hasCloseOnSelect, ctx]);
+  const handlePointerMove = useCallback(e => focusMenuItemOnHover(e, isDisabled), [isDisabled]);
   return /*#__PURE__*/_jsx(Item, {
     ...rest,
     role: "menuitemcheckbox",
     "aria-checked": value,
     tabIndex: isDisabled ? undefined : -1,
+    onPointerMove: handlePointerMove,
     marker: /*#__PURE__*/_jsx("span", {
       "aria-hidden": "true",
       ...mergeProps(themeProps('dropdown-menu-checkbox', {

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAElD,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,+BAsCvB;yBAhDe,gBAAgB"}
+{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,+BA4CvB;yBAtDe,gBAAgB"}

package/dist/DropdownMenu/DropdownMenuItem.js

@@ -30,6 +30,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
+import { focusMenuItemOnHover } from "./menuItemHover.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const menuItemStyles = {
@@ -42,9 +43,9 @@ const menuItemStyles = {
     kMv6JI: "x9ynric",
     kGuDYH: "xcr08ib",
     kMwMTN: "x1tgivj0",
-    kWkggS: "xjbqb8w x1c52tdz x1uwx2nv",
+    kWkggS: "xjbqb8w x1c52tdz",
     kkrTdU: "x1ypdohk",
-    k9WMMc: "xdpxx8g",
+    k9WMMc: "x1yc453h",
     kI3sdo: "x1a2a7pz",
     $$css: true
   },
@@ -102,9 +103,11 @@ export function DropdownMenuItem({
     onClick();
     ctx?.closeMenu();
   }, [isDisabled, onClick, ctx]);
+  const handlePointerMove = useCallback(e => focusMenuItemOnHover(e, isDisabled), [isDisabled]);
   return /*#__PURE__*/_jsx(Item, {
     role: "menuitem",
     tabIndex: isDisabled ? undefined : -1,
+    onPointerMove: handlePointerMove,
     startContent: icon ? renderIconSlot(icon, {
       size: 'sm',
       color: 'secondary'

package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts

@@ -49,11 +49,10 @@ export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'>
  *
  * @example
  * ```
- *  * import {
+ * import {
  *   DropdownMenuRadioGroup,
  *   DropdownMenuRadioItem,
  * } from '@astryxdesign/core/DropdownMenu';
- *
  * <DropdownMenu button={{label: 'Sort'}}>
  *   <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
  *     <DropdownMenuRadioItem value="newest" label="Newest" />

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,gBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAgB7B;yBAxBe,sBAAsB"}
+{"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,gBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAgB7B;yBAxBe,sBAAsB"}

package/dist/DropdownMenu/DropdownMenuRadioGroup.js

@@ -25,11 +25,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * @example
  * ```
- *  * import {
+ * import {
  *   DropdownMenuRadioGroup,
  *   DropdownMenuRadioItem,
  * } from '@astryxdesign/core/DropdownMenu';
- *
  * <DropdownMenu button={{label: 'Sort'}}>
  *   <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
  *     <DropdownMenuRadioItem value="newest" label="Newest" />

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,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAElD,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAWtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsE5C,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;CACxB;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,+BAiE5B;yBA5Ee,qBAAqB"}
+{"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;AAYtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqE5C,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;CACxB;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,+BAuE5B;yBAlFe,qBAAqB"}

package/dist/DropdownMenu/DropdownMenuRadioItem.js

@@ -25,6 +25,7 @@ import * as stylex from '@stylexjs/stylex';
 import { renderIconSlot } from "../Icon/index.js";
 import { Item } from "../Item/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
+import { focusMenuItemOnHover } from "./menuItemHover.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, durationVars, easeVars, borderVars } from "../theme/tokens.stylex.js";
 import { mergeProps, themeProps } from "../utils/index.js";
@@ -35,7 +36,7 @@ const styles = {
     kzqmXN: "xh8yej3",
     kaIpWk: "x1ws5lxm",
     kMwMTN: "x1tgivj0",
-    kWkggS: "xjbqb8w x1c52tdz x1uwx2nv",
+    kWkggS: "xjbqb8w x1c52tdz",
     kkrTdU: "x1ypdohk",
     kI3sdo: "x1a2a7pz",
     $$css: true
@@ -141,11 +142,13 @@ export function DropdownMenuRadioItem({
       menuCtx?.closeMenu();
     }
   }, [isDisabled, groupCtx, value, menuCtx]);
+  const handlePointerMove = useCallback(e => focusMenuItemOnHover(e, isDisabled), [isDisabled]);
   return /*#__PURE__*/_jsx(Item, {
     ...rest,
     role: "menuitemradio",
     "aria-checked": isChecked,
     tabIndex: isDisabled ? undefined : -1,
+    onPointerMove: handlePointerMove,
     marker: /*#__PURE__*/_jsx("span", {
       "aria-hidden": "true",
       ...mergeProps(themeProps('dropdown-menu-radio', {

package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts

@@ -0,0 +1,104 @@
+/**
+ * @file DropdownMenuSubMenu.tsx
+ * @input React, stylex, useLayer (context mode), useListFocus, useMenuHover,
+ *   useTypeahead, Item, Icon, Spinner, DropdownMenu context + item roles.
+ * @output Exports DropdownMenuSubMenu — a single menu row that reveals a nested
+ *   flyout menu of its own children/items.
+ * @position Sub-component; place inside a DropdownMenu (or ContextMenu)
+ *   alongside plain items.
+ *
+ * One component, not three. The row itself adopts DropdownMenuItem semantics
+ * (label / icon / description / isDisabled) and its children become the
+ * flyout's content. This mirrors how SideNavItem / TreeListItem promote a
+ * normal row into a nested surface when given children, rather than the Radix
+ * Sub / SubTrigger / SubContent split. Data-driven menus never touch this
+ * component directly — renderDropdownItems renders it from a nested `items`
+ * array and passes the rendered children in.
+ *
+ * Built on existing primitives — no bespoke floating code:
+ * - Positioning: useLayer context mode opens the flyout inline-end with
+ *   viewport auto-flip via CSS anchor positioning (RTL-correct by default).
+ * - Pointer: useMenuHover for open/close intent.
+ * - Keyboard: a per-level useListFocus + useTypeahead. Right (Left in RTL) /
+ *   Enter / Space opens the flyout and focuses its first item; Left (Right in
+ *   RTL) / Escape closes it and returns focus to the trigger row.
+ *
+ * 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
+ * - /packages/core/src/DropdownMenu/index.ts
+ * - /apps/storybook/stories/DropdownMenu.stories.tsx
+ * - /packages/cli/templates/blocks/components/DropdownMenu/ (showcase blocks)
+ */
+import { type ReactNode } from 'react';
+import { type IconType } from '../Icon';
+import type { BaseProps } from '../BaseProps';
+interface DropdownMenuSubMenuBaseProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
+    /** Icon to display before the label on the trigger row. */
+    icon?: ReactNode | IconType;
+    /** Primary label text for the trigger row. */
+    label: ReactNode;
+    /** Secondary description text displayed below the label. */
+    description?: ReactNode;
+    /**
+     * Whether the submenu is disabled. A disabled submenu renders its trigger
+     * row but never opens the flyout.
+     * @default false
+     */
+    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.
+     * @default false
+     */
+    hasSpinner?: boolean;
+    /** Fixed flyout width. Defaults to sizing to its content (min 160px). */
+    menuWidth?: number | string;
+    /** Called when the flyout opens or closes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Test id for the trigger row. */
+    'data-testid'?: string;
+    /** Test id for the flyout menu. */
+    menuDataTestId?: string;
+}
+export interface DropdownMenuSubMenuProps extends DropdownMenuSubMenuBaseProps {
+    /**
+     * The flyout's menu items — the same components used at the top level
+     * (`DropdownMenuItem`, `DropdownMenuSubMenu`, selectable items, etc.).
+     *
+     * Data-mode parity lives one level up: give a `DropdownMenu`/`ContextMenu`
+     * item a nested `items` array and it renders a `DropdownMenuSubMenu` with
+     * these children automatically — so the data path never has to reach into
+     * this component.
+     */
+    children: ReactNode;
+}
+/**
+ * A single menu row that reveals a nested flyout of its own items. The row
+ * adopts DropdownMenuItem semantics (label / icon / description / isDisabled);
+ * its `children` become the flyout content. Place inside a DropdownMenu (or
+ * ContextMenu) alongside plain items.
+ *
+ * For data-driven menus, don't use this directly — give a menu item a nested
+ * `items` array and DropdownMenu/ContextMenu renders the submenu for you.
+ *
+ * @example
+ * ```
+ * <DropdownMenu button={{label: 'Actions'}}>
+ *   <DropdownMenuItem label="Rename" onClick={rename} />
+ *   <DropdownMenuSubMenu label="Move to" icon="folder">
+ *     <DropdownMenuItem label="Folder A" onClick={() => move('a')} />
+ *     <DropdownMenuItem label="Folder B" onClick={() => move('b')} />
+ *   </DropdownMenuSubMenu>
+ * </DropdownMenu>
+ * ```
+ */
+export declare function DropdownMenuSubMenu(props: DropdownMenuSubMenuProps): ReactNode;
+export declare namespace DropdownMenuSubMenu {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=DropdownMenuSubMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAc,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoB5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8F5C,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;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,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAgUX;yBAlUe,mBAAmB"}