@astryxdesign/core 0.2.0 → 0.3.0-canary.060cc9d

package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx

@@ -4,39 +4,39 @@
 
 /**
  * @file DropdownMenuCheckboxItem.tsx
- * @input React, stylex, Item + Icon + DropdownMenu context + tokens from core
+ * @input React, stylex, Item + CheckboxInput + DropdownMenu context + tokens from core
  * @output DropdownMenuCheckboxItem — a standalone checkable menu item.
  * @position Sub-component; used inside DropdownMenu.
  *
  * A menu item that toggles an independent boolean (role="menuitemcheckbox").
- * Unlike CheckboxInput, there is no nested native <input>: the row itself owns
- * the role and aria-checked, per the WAI-ARIA menuitemcheckbox pattern.
- * Keyboard navigation (arrows/typeahead) and Enter/Space activation come from
- * the parent DropdownMenu's useListFocus + activation path, which matches
- * menuitemcheckbox alongside plain menuitem rows.
+ * Unlike CheckboxInput, there is no nested native <input> that participates in
+ * accessibility: the row itself owns the role and aria-checked, per the
+ * WAI-ARIA menuitemcheckbox pattern. Keyboard navigation (arrows/typeahead) and
+ * Enter/Space activation come from the parent DropdownMenu's useListFocus +
+ * activation path, which matches menuitemcheckbox alongside plain menuitem rows.
  *
- * The square checkbox visual is decorative (aria-hidden) — the row owns the
- * checked state. Its size is derived from the menu's item size (a `sm` menu
- * gets the compact control; `md`/`lg` get the standard one) and it swaps to the
- * inline-end of the row on coarse-pointer (touch) devices via CSS `order`, so
- * it lands where selection toggles are conventionally placed on mobile. The
- * checkmark uses the `check` icon from the active theme's icon registry.
+ * The checkbox visual composes the real CheckboxInput primitive so its checkmark
+ * matches CheckboxListItem and picks up the standard `checkbox` theming slots.
+ * It is purely decorative: the composed control is wrapped in an element that is
+ * both `aria-hidden` and `inert`, so it contributes nothing to the row's
+ * accessible name, and its native <input> and sr-only label stay out of the tab
+ * order and the accessibility tree while pointer clicks fall through to the row
+ * — the same shim MultiSelector uses. The row owns the checked state and
+ * accessible name. The control size is derived from the menu's item size (a
+ * `sm` menu gets the compact control; `md`/`lg` get the standard one) and it
+ * swaps to the inline-end of the row on coarse-pointer (touch) devices via CSS
+ * `order`, so it lands where selection toggles are conventionally placed on
+ * mobile.
  */
 
 import {useCallback, type PointerEvent, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
-import {Icon, renderIconSlot, type IconType} from '../Icon';
+import {renderIconSlot, type IconType} from '../Icon';
+import {CheckboxInput} from '../CheckboxInput/CheckboxInput';
 import {Item} from '../Item';
 import {useDropdownMenuContext} from './DropdownMenuContext';
 import {focusMenuItemOnHover} from './menuItemHover';
-import {
-  colorVars,
-  spacingVars,
-  radiusVars,
-  durationVars,
-  easeVars,
-  borderVars,
-} from '../theme/tokens.stylex';
+import {colorVars, spacingVars} from '../theme/tokens.stylex';
 import {mergeProps, themeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 
@@ -58,22 +58,13 @@ const styles = stylex.create({
   },
   // Rendered in Item's `marker` slot as a raw flex child, so `order` moves it
   // relative to the label within the row. On touch it moves to the inline-end.
-  box: {
+  // `aria-hidden` + `inert` + pointer-events:none keep the composed CheckboxInput
+  // decorative: it adds no accessible name, and clicks fall through to the row,
+  // which owns the role and activation.
+  markerBox: {
     display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
     flexShrink: 0,
-    boxSizing: 'border-box',
-    borderWidth: borderVars['--border-width'],
-    borderStyle: 'solid',
-    borderRadius: radiusVars['--radius-inner'],
-    color: colorVars['--color-on-accent'],
-    transitionProperty: 'background-color, border-color',
-    transitionDuration: {
-      default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
-    },
-    transitionTimingFunction: easeVars['--ease-standard'],
+    pointerEvents: 'none',
     order: {
       default: 0,
       '@media (pointer: coarse)': 1,
@@ -83,19 +74,6 @@ const styles = stylex.create({
       '@media (pointer: coarse)': 'auto',
     },
   },
-  unchecked: {
-    borderColor: colorVars['--color-border-emphasized'],
-    backgroundColor: colorVars['--color-background-surface'],
-  },
-  checked: {
-    borderColor: colorVars['--color-accent'],
-    backgroundColor: colorVars['--color-accent'],
-  },
-});
-
-const boxSizeStyles = stylex.create({
-  sm: {width: 18, height: 18},
-  md: {width: 22, height: 22},
 });
 
 export interface DropdownMenuCheckboxItemProps extends Omit<
@@ -180,6 +158,12 @@ export function DropdownMenuCheckboxItem({
   const menuSize = ctx?.menuSize ?? 'md';
   const controlSize = menuSize === 'sm' ? 'sm' : 'md';
 
+  // The composed checkbox is decorative and inert, so its label never reaches
+  // the accessibility tree — the row's `label` prop provides the announced
+  // name. CheckboxInput still requires a string label, so pass one through when
+  // the row label is a plain string.
+  const checkboxLabel = typeof label === 'string' ? label : '';
+
   const handleClick = useCallback(() => {
     if (isDisabled) {
       return;
@@ -203,22 +187,15 @@ export function DropdownMenuCheckboxItem({
       tabIndex={isDisabled ? undefined : -1}
       onPointerMove={handlePointerMove}
       marker={
-        <span
-          aria-hidden="true"
-          {...mergeProps(
-            themeProps('dropdown-menu-checkbox', {
-              size: controlSize,
-              checked: value ? 'checked' : null,
-              disabled: isDisabled ? 'disabled' : null,
-            }),
-            stylex.props(
-              styles.box,
-              boxSizeStyles[controlSize],
-              value ? styles.checked : styles.unchecked,
-            ),
-          )}>
-          {value && <Icon icon="check" size="sm" color="inherit" />}
-        </span>
+        <div aria-hidden="true" inert {...stylex.props(styles.markerBox)}>
+          <CheckboxInput
+            label={checkboxLabel}
+            isLabelHidden
+            value={value}
+            isDisabled={isDisabled}
+            size={controlSize}
+          />
+        </div>
       }
       startContent={
         icon

package/src/DropdownMenu/DropdownMenuItem.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'DropdownMenuItem',

package/src/DropdownMenu/DropdownMenuItem.tsx

@@ -20,7 +20,7 @@
  * - /packages/core/src/DropdownMenu/DropdownMenu.test.tsx
  * - /packages/core/src/DropdownMenu/index.ts
  * - /apps/storybook/stories/DropdownMenu.stories.tsx
- * - /packages/cli/templates/blocks/components/DropdownMenu/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
  */
 
 import {useCallback, type PointerEvent, type ReactNode} from 'react';

package/src/DropdownMenu/DropdownMenuRadioGroup.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'DropdownMenuRadioGroup',
@@ -22,16 +22,10 @@ export const docs = {
       description: 'Callback fired when the selected value changes.',
     },
     {
-      name: 'aria-label',
+      name: 'label',
       type: 'string',
       description:
-        'Accessible label for the group. Required (or aria-labelledby) so screen readers announce the radios as a named set, e.g. "Sort by".',
-    },
-    {
-      name: 'aria-labelledby',
-      type: 'string',
-      description:
-        'The id of an element that labels the group, as an alternative to aria-label.',
+        'Accessible name for the group, applied as aria-label so screen readers announce the radios as a named set, e.g. "Sort by". Required. Pass aria-labelledby (via base props) instead when the name already exists as a visible element.',
     },
     {
       name: 'hasCloseOnSelect',
@@ -57,8 +51,7 @@ export const docsZh = {
   propDescriptions: {
     value: '组中当前选中的值。尚无选中项时传 undefined。',
     onChange: '所选值变化时触发的回调。',
-    'aria-label': '组的无障碍标签。必需（或 aria-labelledby），以便屏幕阅读器将单选项作为命名集合朗读。',
-    'aria-labelledby': '标记该组的元素 id，作为 aria-label 的替代。',
+    label: '组的无障碍名称，作为 aria-label 应用，以便屏幕阅读器将单选项作为命名集合朗读，例如“Sort by”。必需。当名称已作为可见元素存在时，可改用 aria-labelledby（通过基础属性）。',
     hasCloseOnSelect: '选择某值是否关闭菜单。默认关闭。',
     children: '组成该组的 DropdownMenuRadioItem。',
   },
@@ -72,8 +65,7 @@ export const docsDense = {
   propDescriptions: {
     value: 'selected value (undefined = none)',
     onChange: 'fired when selected value changes',
-    'aria-label': 'accessible group name (or aria-labelledby); required',
-    'aria-labelledby': 'id of labelling element (alt to aria-label)',
+    label: 'accessible group name (applied as aria-label); required',
     hasCloseOnSelect: 'close menu on select (default true)',
     children: 'the DropdownMenuRadioItems',
   },

package/src/DropdownMenu/DropdownMenuRadioGroup.tsx

@@ -49,16 +49,13 @@ export interface DropdownMenuRadioGroupProps extends Omit<
    */
   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
@@ -82,7 +79,7 @@ export interface DropdownMenuRadioGroupProps extends Omit<
  *   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>
@@ -92,6 +89,7 @@ export interface DropdownMenuRadioGroupProps extends Omit<
 export function DropdownMenuRadioGroup({
   value,
   onChange,
+  label,
   hasCloseOnSelect = true,
   children,
   className,
@@ -107,6 +105,7 @@ export function DropdownMenuRadioGroup({
     <div
       {...rest}
       role="group"
+      aria-label={label}
       {...mergeProps(stylex.props(styles.group), {className, style})}>
       <DropdownMenuRadioGroupContext value={contextValue}>
         {children}

package/src/DropdownMenu/DropdownMenuRadioItem.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'DropdownMenuRadioItem',

package/src/DropdownMenu/DropdownMenuRadioItem.tsx

@@ -145,7 +145,7 @@ export interface DropdownMenuRadioItemProps extends Omit<
  *
  * @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>
@@ -212,7 +212,16 @@ export function DropdownMenuRadioItem({
             ),
           )}>
           {isChecked && (
-            <span {...stylex.props(styles.dot, dotSizeStyles[controlSize])} />
+            <span
+              {...mergeProps(
+                themeProps('dropdown-menu-radio-dot', {
+                  size: controlSize,
+                  checked: 'checked',
+                  disabled: isDisabled ? 'disabled' : null,
+                }),
+                stylex.props(styles.dot, dotSizeStyles[controlSize]),
+              )}
+            />
           )}
         </span>
       }

package/src/DropdownMenu/DropdownMenuSelectable.test.tsx

@@ -78,6 +78,37 @@ describe('DropdownMenuCheckboxItem', () => {
     expect(onChangeSpy).toHaveBeenCalledWith(true);
   });
 
+  it('keeps the composed checkbox decorative (row is the only announced control)', async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu button={{label: 'View'}}>
+        <DropdownMenuCheckboxItem label="Show archived" value={true} />
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole('button', {name: /View/}));
+
+    // The row owns role="menuitemcheckbox" — it is the single such control.
+    expect(
+      screen.getAllByRole('menuitemcheckbox', {hidden: true}),
+    ).toHaveLength(1);
+
+    // The composed CheckboxInput is present in the DOM but sits inside an
+    // `aria-hidden` + `inert` subtree: it contributes nothing to the row's
+    // accessible name and its native <input> is out of the tab order and the
+    // accessibility tree, so it is not a second announced/focusable control.
+    // (Browsers enforce inert; jsdom does not model its a11y removal, so this
+    // asserts the aria-hidden/inert boundary directly rather than via role.)
+    const row = screen.getByRole('menuitemcheckbox', {
+      name: /Show archived/,
+      hidden: true,
+    });
+    const input = row.querySelector('input[type="checkbox"]');
+    expect(input).not.toBeNull();
+    const marker = input?.closest('[inert]');
+    expect(marker).not.toBeNull();
+    expect(marker).toHaveAttribute('aria-hidden', 'true');
+  });
+
   it('does not toggle when disabled', async () => {
     const user = userEvent.setup();
     const onChangeSpy = vi.fn();
@@ -110,7 +141,7 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
         <DropdownMenuRadioGroup
           value="newest"
           onChange={() => {}}
-          aria-label="Sort by">
+          label="Sort by">
           <DropdownMenuRadioItem value="newest" label="Newest" />
           <DropdownMenuRadioItem value="oldest" label="Oldest" />
         </DropdownMenuRadioGroup>
@@ -128,6 +159,39 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
     ).toBeInTheDocument();
   });
 
+  it('exposes a themeable slot on the checked radio dot', async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu button={{label: 'Sort'}}>
+        <DropdownMenuRadioGroup
+          value="newest"
+          onChange={() => {}}
+          label="Sort by">
+          <DropdownMenuRadioItem value="newest" label="Newest" />
+          <DropdownMenuRadioItem value="oldest" label="Oldest" />
+        </DropdownMenuRadioGroup>
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole('button', {name: /Sort/}));
+    const checked = screen.getByRole('menuitemradio', {
+      name: 'Newest',
+      hidden: true,
+    });
+    const dot = checked.querySelector('.astryx-dropdown-menu-radio-dot');
+    expect(dot).toBeInTheDocument();
+    // Mirrors the radio container's visual props/states for consistent theming.
+    expect(dot).toHaveAttribute('data-size', 'md');
+    expect(dot).toHaveAttribute('data-checked', 'checked');
+    // The unchecked radio has no dot, so no dot slot either.
+    const unchecked = screen.getByRole('menuitemradio', {
+      name: 'Oldest',
+      hidden: true,
+    });
+    expect(
+      unchecked.querySelector('.astryx-dropdown-menu-radio-dot'),
+    ).not.toBeInTheDocument();
+  });
+
   it('calls onChange with the selected value', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
@@ -136,7 +200,7 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
         <DropdownMenuRadioGroup
           value="newest"
           onChange={onChange}
-          aria-label="Sort by">
+          label="Sort by">
           <DropdownMenuRadioItem value="newest" label="Newest" />
           <DropdownMenuRadioItem value="oldest" label="Oldest" />
         </DropdownMenuRadioGroup>
@@ -149,6 +213,24 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
     expect(onChange).toHaveBeenCalledWith('oldest');
   });
 
+  it('names the group from the required label prop', async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu button={{label: 'Sort'}}>
+        <DropdownMenuRadioGroup
+          value="newest"
+          onChange={() => {}}
+          label="Sort by">
+          <DropdownMenuRadioItem value="newest" label="Newest" />
+        </DropdownMenuRadioGroup>
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole('button', {name: /Sort/}));
+    expect(
+      screen.getByRole('group', {name: 'Sort by', hidden: true}),
+    ).toBeInTheDocument();
+  });
+
   it('throws when a radio item is used outside a group', () => {
     const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
     expect(() =>

package/src/DropdownMenu/DropdownMenuSubMenu.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'DropdownMenuSubMenu',

package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx

@@ -8,7 +8,7 @@
 
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {useState} from 'react';
-import {render, screen, waitFor} from '@testing-library/react';
+import {render, screen, waitFor, fireEvent} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {DropdownMenu} from './DropdownMenu';
 import {DropdownMenuItem} from './DropdownMenuItem';
@@ -510,6 +510,34 @@ describe('DropdownMenuSubMenu accessibility (WCAG 2.2 / APG)', () => {
     expect(onPick).toHaveBeenCalledWith('data');
   });
 
+  // Regression: hovering the submenu trigger while a sibling item still holds
+  // focus must move the single focus-driven highlight onto the trigger — not
+  // leave two items highlighted at once (the trigger via :hover, the sibling
+  // via :focus). Mirrors DropdownMenuItem's hover-focus behavior.
+  it('moves focus to the submenu trigger on hover, keeping a single highlight', async () => {
+    const user = userEvent.setup();
+    render(<MoveMenu />);
+    await user.click(screen.getByRole('button', {name: /Actions/}));
+
+    const rename = screen.getByRole('menuitem', {
+      name: 'Rename',
+      hidden: true,
+    });
+    const trigger = screen.getByRole('menuitem', {
+      name: /Move to/,
+      hidden: true,
+    });
+
+    rename.focus();
+    expect(rename).toHaveFocus();
+
+    // A mouse hover over the submenu trigger moves focus onto it, so the single
+    // focus-driven highlight follows the pointer instead of leaving two.
+    fireEvent.pointerMove(trigger, {pointerType: 'mouse'});
+    expect(trigger).toHaveFocus();
+    expect(rename).not.toHaveFocus();
+  });
+
   // 1.4.13 Content on Hover or Focus: the flyout stays open while the pointer
   // is over it (moving onto the flyout must not dismiss it).
   it('keeps the flyout open while the pointer is over it', async () => {
@@ -633,3 +661,20 @@ describe('DropdownMenuSubMenu accessibility (WCAG 2.2 / APG)', () => {
     });
   });
 });
+
+describe('DropdownMenuSubMenu theming slots', () => {
+  it('exposes a themeable slot on the submenu indicator icon', async () => {
+    const user = userEvent.setup();
+    render(<MoveMenu />);
+    await user.click(screen.getByRole('button', {name: /Actions/}));
+    const trigger = screen.getByRole('menuitem', {
+      name: /Move to/,
+      hidden: true,
+    });
+    // The indicator-icon slot wraps the chevron affordance inside the trigger
+    // row.
+    expect(
+      trigger.querySelector('.astryx-dropdown-menu-indicator-icon'),
+    ).toBeInTheDocument();
+  });
+});

package/src/DropdownMenu/DropdownMenuSubMenu.tsx

@@ -35,7 +35,7 @@
  * - /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)
+ * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
  */
 
 import React, {
@@ -44,6 +44,7 @@ import React, {
   useMemo,
   useRef,
   useState,
+  type PointerEvent,
   type ReactNode,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -78,6 +79,7 @@ import {
   useDropdownMenuContext,
   type DropdownMenuContextValue,
 } from './DropdownMenuContext';
+import {focusMenuItemOnHover} from './menuItemHover';
 
 const triggerStyles = stylex.create({
   root: {
@@ -93,11 +95,6 @@ const triggerStyles = stylex.create({
       default: 'transparent',
       ':focus': colorVars['--color-overlay-hover'],
     },
-    ':hover': {
-      '@media (hover: hover)': {
-        backgroundColor: colorVars['--color-overlay-hover'],
-      },
-    },
     border: 'none',
     cursor: 'pointer',
     textAlign: 'start',
@@ -393,6 +390,16 @@ export function DropdownMenuSubMenu(
     [isDisabled, open],
   );
 
+  // Move the single focus-driven highlight onto the trigger as the pointer
+  // enters it, so a sibling item that still holds focus doesn't stay
+  // highlighted alongside the hovered trigger. This is separate from the
+  // hover-open intent (onMouseEnter/onMouseLeave) — the flyout still opens on
+  // the hover delay; this only keeps the highlight single.
+  const handlePointerMove = useCallback(
+    (e: PointerEvent<HTMLElement>) => focusMenuItemOnHover(e, isDisabled),
+    [isDisabled],
+  );
+
   // Enter/Space activate the focused row; typeahead jumps by first character;
   // the close key (Left, or Right in RTL) returns focus to the trigger;
   // arrows/Home/End defer to useListFocus (RTL-aware).
@@ -467,11 +474,19 @@ export function DropdownMenuSubMenu(
   );
 
   const endAffordance = hasSpinner ? (
-    <span {...stylex.props(triggerStyles.caret)}>
+    <span
+      {...mergeProps(
+        themeProps('dropdown-menu-indicator-icon'),
+        stylex.props(triggerStyles.caret),
+      )}>
       <Spinner size="sm" />
     </span>
   ) : (
-    <span {...stylex.props(triggerStyles.caret)}>
+    <span
+      {...mergeProps(
+        themeProps('dropdown-menu-indicator-icon'),
+        stylex.props(triggerStyles.caret),
+      )}>
       <Icon icon="chevronRight" size="sm" color="secondary" />
     </span>
   );
@@ -494,6 +509,7 @@ export function DropdownMenuSubMenu(
         data-testid={testId}
         onMouseEnter={triggerProps.onMouseEnter}
         onMouseLeave={triggerProps.onMouseLeave}
+        onPointerMove={handlePointerMove}
         startContent={
           icon
             ? renderIconSlot(icon, {size: 'sm', color: 'secondary'})

package/src/DropdownMenu/menuItemHover.ts

@@ -16,6 +16,7 @@
  * - /packages/core/src/DropdownMenu/DropdownMenuItem.tsx
  * - /packages/core/src/DropdownMenu/DropdownMenuCheckboxItem.tsx
  * - /packages/core/src/DropdownMenu/DropdownMenuRadioItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.tsx
  */
 
 import type {PointerEvent} from 'react';

package/src/DropdownMenu/renderDropdownItems.tsx

@@ -17,6 +17,7 @@ import {
   typeScaleVars,
   colorVars,
 } from '../theme/tokens.stylex';
+import {mergeProps, themeProps} from '../utils';
 import type {
   DropdownMenuItemData,
   DropdownMenuOption,
@@ -57,7 +58,13 @@ export function renderDropdownItems(items: DropdownMenuOption[]): ReactNode {
     const option = items[i];
 
     if ('type' in option && option.type === 'divider') {
-      elements.push(<Divider key={`divider-${i}`} xstyle={styles.divider} />);
+      elements.push(
+        <Divider
+          key={`divider-${i}`}
+          xstyle={styles.divider}
+          {...themeProps('dropdown-menu-divider')}
+        />,
+      );
     } else if ('type' in option && option.type === 'section') {
       elements.push(
         <div
@@ -65,7 +72,12 @@ export function renderDropdownItems(items: DropdownMenuOption[]): ReactNode {
           role="group"
           aria-label={option.title}>
           {option.title && (
-            <div {...stylex.props(styles.sectionHeading)} aria-hidden="true">
+            <div
+              aria-hidden="true"
+              {...mergeProps(
+                themeProps('dropdown-menu-section-heading'),
+                stylex.props(styles.sectionHeading),
+              )}>
               {option.title}
             </div>
           )}

package/src/EmptyState/EmptyState.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'EmptyState',
@@ -87,7 +87,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'EmptyState',
   displayName: 'Empty State',
@@ -156,7 +156,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'placeholder when a content area has no data: icon, title, description, action buttons',

package/src/EmptyState/EmptyState.tsx

@@ -11,7 +11,7 @@
  * - /packages/core/src/EmptyState/EmptyState.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/EmptyState/index.ts (exports if types change)
  * - /apps/storybook/stories/EmptyState.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/EmptyState/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/EmptyState/ (showcase blocks)
  */
 
 import {type ReactNode, createElement} from 'react';