@astryxdesign/core 0.1.9 → 0.2.0-canary.136a00f

package/dist/DateTimeInput/DateTimeInput.js

@@ -28,6 +28,7 @@ import { useCalendarConstraints } from "../Calendar/hooks/index.js";
 import { usePopover } from "../Popover/index.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
+import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { parseDateInput, parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, adjustTime, mergeProps, mergeRefs } from "../utils/index.js";
 import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
 import { useSize } from "../SizeContext/SizeContext.js";
@@ -181,17 +182,19 @@ export function DateTimeInput({
     focusTrigger: 'always',
     isEnabled: showsDisabledMessage
   });
-  const statusIconMap = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success'
-  };
-  const statusIconColorMap = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success'
-  };
-  const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
+
+  // DateTimeInput fixes its status presentation to the detached message box,
+  // so the shared helper suppresses the on-field icon (the message box carries
+  // its own leading glyph). Routed through the helper for consistency with the
+  // rest of the bordered input family.
+  const {
+    statusIcon,
+    describedBy: statusTooltipDescribedBy
+  } = useInputStatusIcon({
+    status,
+    statusVariant: 'detached'
+  });
+  const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null, statusTooltipDescribedBy, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
 
   // Split min/max and current value
   const minParts = useMemo(() => splitDateTime(min), [min]);
@@ -496,7 +499,10 @@ export function DateTimeInput({
       }), stylex.props(styles.row, xstyle), className, style),
       children: [/*#__PURE__*/_jsxs("div", {
         ref: popover.triggerRef,
-        ...stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.dateWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type]),
+        ...mergeProps(themeProps('date-time-input-date-segment', {
+          size,
+          status: status?.type ?? null
+        }), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.dateWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type])),
         children: [/*#__PURE__*/_jsx("button", {
           type: "button",
           onClick: handleCalendarToggle,
@@ -578,16 +584,15 @@ export function DateTimeInput({
           })
         }), isBusy && /*#__PURE__*/_jsx(Spinner, {
           size: "sm"
-        }), status && /*#__PURE__*/_jsx(Icon, {
-          icon: statusIconMap[status.type],
-          size: "md",
-          color: statusIconColorMap[status.type]
-        })]
+        }), statusIcon]
       }), /*#__PURE__*/_jsxs("div", {
         ref: timeContainerRef,
         onClick: handleTimeWrapperClick,
         onMouseUp: handleTimeWrapperMouseUp,
-        ...stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.timeWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type]),
+        ...mergeProps(themeProps('date-time-input-time-segment', {
+          size,
+          status: status?.type ?? null
+        }), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.timeWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type])),
         children: [/*#__PURE__*/_jsx("div", {
           ...{
             className: "x78zum5 x6s0dn4 xl56j7k x2lah0s"

package/dist/Divider/Divider.d.ts

@@ -10,7 +10,7 @@
  * - /apps/storybook/stories/Divider.stories.tsx
  * - /packages/cli/templates/blocks/components/Divider/ (showcase blocks)
  */
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 /**
  * Extensible variant map for Divider.
@@ -71,7 +71,7 @@ export interface DividerProps extends BaseProps<HTMLDivElement> {
  * <Divider label="or" />
  * ```
  */
-export declare function Divider({ orientation, label, variant, isFullBleed, xstyle, className, style, ref, ...props }: DividerProps): import("react").JSX.Element;
+export declare function Divider({ orientation, label, variant, isFullBleed, xstyle, className, style, ref, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DividerProps): import("react").JSX.Element;
 export declare namespace Divider {
     var displayName: string;
 }

package/dist/Divider/Divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../src/Divider/Divider.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,IAAI,CAAC;CACd;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAiED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,EACtB,WAA0B,EAC1B,KAAK,EACL,OAAkB,EAClB,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BA+Cd;yBAzDe,OAAO"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../src/Divider/Divider.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,IAAI,CAAC;CACd;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAiED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,EACtB,WAA0B,EAC1B,KAAK,EACL,OAAkB,EAClB,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,KAAK,EACT,EAAE,YAAY,+BA0Dd;yBAtEe,OAAO"}

package/dist/Divider/Divider.js

@@ -14,6 +14,7 @@
  * - /apps/storybook/stories/Divider.stories.tsx
  * - /packages/cli/templates/blocks/components/Divider/ (showcase blocks)
  */
+import { useId } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
@@ -110,14 +111,25 @@ export function Divider({
   className,
   style,
   ref,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
   ...props
 }) {
   const isHorizontal = orientation === 'horizontal';
+  const labelId = useId();
+
+  // A separator does not derive its accessible name from its content, so the
+  // rendered label must be referenced explicitly via aria-labelledby to be
+  // exposed as the separator's name (WCAG 1.3.1). An explicit aria-label or
+  // aria-labelledby from the consumer takes precedence.
+  const resolvedLabelledBy = ariaLabelledBy ?? (label && ariaLabel == null ? labelId : undefined);
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     ...props,
     role: "separator",
     "aria-orientation": orientation,
+    "aria-label": ariaLabel,
+    "aria-labelledby": resolvedLabelledBy,
     ...mergeProps(themeProps('divider', {
       variant,
       orientation
@@ -125,6 +137,7 @@ export function Divider({
     children: [/*#__PURE__*/_jsx("div", {
       ...stylex.props(isHorizontal ? lineStyles.horizontalLine : lineStyles.verticalLine, lineStyles[variant])
     }), label && /*#__PURE__*/_jsx("div", {
+      id: labelId,
       ...{
         0: {
           className: "x2lah0s xrrkdod x141an7d x1ltkj2j xv1l7n4"

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.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;;;;;;;;;;;;;;;;;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,+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
@@ -130,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

@@ -22,16 +22,13 @@ export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'>
      */
     onChange: (value: string) => void;
     /**
-     * Accessible label for the group. Required (together with `aria-labelledby`,
-     * one of the two) so screen readers announce the radios as a named set,
-     * e.g. "Sort by".
+     * Accessible name for the group, announced by screen readers so the radios
+     * read as a named set (e.g. "Sort by"). Applied as the group's `aria-label`.
+     * Required -- an unnamed radio group is an accessibility defect. Pass
+     * `aria-labelledby` (via base props) instead if the name already exists as a
+     * visible element on the page.
      */
-    'aria-label'?: string;
-    /**
-     * The id of an element that labels the group, as an alternative to
-     * `aria-label`.
-     */
-    'aria-labelledby'?: string;
+    label: string;
     /**
      * Whether selecting a value closes the menu. Radio items default to closing
      * on selection (a single-choice commit), unlike checkbox items which stay
@@ -54,14 +51,14 @@ export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'>
  *   DropdownMenuRadioItem,
  * } from '@astryxdesign/core/DropdownMenu';
  * <DropdownMenu button={{label: 'Sort'}}>
- *   <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
+ *   <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
  *     <DropdownMenuRadioItem value="newest" label="Newest" />
  *     <DropdownMenuRadioItem value="oldest" label="Oldest" />
  *   </DropdownMenuRadioGroup>
  * </DropdownMenu>
  * ```
  */
-export declare function DropdownMenuRadioGroup({ value, onChange, hasCloseOnSelect, children, className, style, ...rest }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
+export declare function DropdownMenuRadioGroup({ value, onChange, label, hasCloseOnSelect, children, className, style, ...rest }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
 export declare namespace DropdownMenuRadioGroup {
     var displayName: string;
 }

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;;;;;;;;;;;;;;;;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"}
+{"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;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;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,KAAK,EACL,gBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAiB7B;yBA1Be,sBAAsB"}

package/dist/DropdownMenu/DropdownMenuRadioGroup.js

@@ -30,7 +30,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *   DropdownMenuRadioItem,
  * } from '@astryxdesign/core/DropdownMenu';
  * <DropdownMenu button={{label: 'Sort'}}>
- *   <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
+ *   <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
  *     <DropdownMenuRadioItem value="newest" label="Newest" />
  *     <DropdownMenuRadioItem value="oldest" label="Oldest" />
  *   </DropdownMenuRadioGroup>
@@ -40,6 +40,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function DropdownMenuRadioGroup({
   value,
   onChange,
+  label,
   hasCloseOnSelect = true,
   children,
   className,
@@ -54,6 +55,7 @@ export function DropdownMenuRadioGroup({
   return /*#__PURE__*/_jsx("div", {
     ...rest,
     role: "group",
+    "aria-label": label,
     ...mergeProps({
       className: "x78zum5 xdt5ytf x1lsbc85"
     }, {

package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts

@@ -56,7 +56,7 @@ export interface DropdownMenuRadioItemProps extends Omit<BaseProps, 'role' | 'ar
  *
  * @example
  * ```
- * <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
+ * <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
  *   <DropdownMenuRadioItem value="newest" label="Newest" />
  *   <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
  * </DropdownMenuRadioGroup>

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
@@ -106,7 +107,7 @@ const dotSizeStyles = {
  *
  * @example
  * ```
- * <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
+ * <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
  *   <DropdownMenuRadioItem value="newest" label="Newest" />
  *   <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
  * </DropdownMenuRadioGroup>
@@ -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"}