@astryxdesign/core 0.2.0 → 0.3.0-canary.041a0ef

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';
@@ -89,12 +89,12 @@ describe('DropdownMenuSubMenu', () => {
       name: /Move to/,
       hidden: true,
     });
-    // The menu focuses its first item (Rename) on open via rAF; wait for that
-    // to settle before moving focus to the submenu trigger, so the deferred
-    // focus can't steal it back mid-test.
+    // A pointer open focuses the menu container via rAF (#4477); wait for
+    // that to settle before moving focus to the submenu trigger, so the
+    // deferred focus can't steal it back mid-test.
     await waitFor(() => {
       expect(
-        screen.getByRole('menuitem', {name: 'Rename', hidden: true}),
+        screen.getByRole('menu', {name: 'Actions', hidden: true}),
       ).toHaveFocus();
     });
     trigger.focus();
@@ -176,11 +176,12 @@ describe('DropdownMenuSubMenu', () => {
       name: /Move to/,
       hidden: true,
     });
-    // Let the root menu's open-focus (Rename, via rAF) settle before moving
-    // focus to the submenu trigger, so it can't steal focus back mid-test.
+    // Let the root menu's pointer-open focus (the container, via rAF) settle
+    // before moving focus to the submenu trigger, so it can't steal focus
+    // back mid-test.
     await waitFor(() => {
       expect(
-        screen.getByRole('menuitem', {name: 'Rename', hidden: true}),
+        screen.getByRole('menu', {name: 'Actions', hidden: true}),
       ).toHaveFocus();
     });
     trigger.focus();
@@ -235,6 +236,13 @@ describe('DropdownMenuSubMenu', () => {
       name: /Move to/,
       hidden: true,
     });
+    // Let the pointer-open container focus (rAF, #4477) settle so it can't
+    // steal focus from the manually focused trigger mid-test.
+    await waitFor(() => {
+      expect(
+        screen.getByRole('menu', {name: 'Actions', hidden: true}),
+      ).toHaveFocus();
+    });
     trigger.focus();
     await user.keyboard('{ArrowRight}');
     // Opens and focuses the first item.
@@ -334,13 +342,20 @@ describe('DropdownMenu data-driven submenus', () => {
       />,
     );
     await user.click(screen.getByRole('button', {name: /Actions/}));
+    // Pointer open focuses the container (#4477); the first ArrowDown then
+    // moves onto Rename.
+    await waitFor(() => {
+      expect(
+        screen.getByRole('menu', {name: 'Actions', hidden: true}),
+      ).toHaveFocus();
+    });
+    await user.keyboard('{ArrowDown}');
     await waitFor(() => {
       expect(
         screen.getByRole('menuitem', {name: 'Rename', hidden: true}),
       ).toHaveFocus();
     });
-    // Rename → Move to → Delete (three ArrowDowns, no stalling on hidden
-    // flyout items).
+    // Rename → Move to → Delete (no stalling on hidden flyout items).
     await user.keyboard('{ArrowDown}');
     await waitFor(() => {
       expect(
@@ -372,7 +387,7 @@ describe('DropdownMenuSubMenu accessibility (WCAG 2.2 / APG)', () => {
     });
     await waitFor(() => {
       expect(
-        screen.getByRole('menuitem', {name: 'Rename', hidden: true}),
+        screen.getByRole('menu', {name: 'Actions', hidden: true}),
       ).toHaveFocus();
     });
     trigger.focus();
@@ -409,6 +424,13 @@ describe('DropdownMenuSubMenu accessibility (WCAG 2.2 / APG)', () => {
       name: /Move to/,
       hidden: true,
     });
+    // Let the pointer-open container focus (rAF, #4477) settle so it can't
+    // steal focus from the manually focused trigger mid-test.
+    await waitFor(() => {
+      expect(
+        screen.getByRole('menu', {name: 'Actions', hidden: true}),
+      ).toHaveFocus();
+    });
     trigger.focus();
     await user.keyboard('{ArrowRight}');
     await waitFor(() => {
@@ -463,11 +485,12 @@ describe('DropdownMenuSubMenu accessibility (WCAG 2.2 / APG)', () => {
       name: /Share to/,
       hidden: true,
     });
-    // Let the root menu's open-focus (Copy link, via rAF) settle first so it
-    // can't steal focus back after we move to the submenu trigger.
+    // Let the root menu's pointer-open focus (the container, via rAF, #4477)
+    // settle first so it can't steal focus back after we move to the submenu
+    // trigger.
     await waitFor(() => {
       expect(
-        screen.getByRole('menuitem', {name: 'Copy link', hidden: true}),
+        screen.getByRole('menu', {name: 'Share', hidden: true}),
       ).toHaveFocus();
     });
     shareTo.focus();
@@ -510,6 +533,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 () => {
@@ -556,7 +607,7 @@ describe('DropdownMenuSubMenu accessibility (WCAG 2.2 / APG)', () => {
     });
     await waitFor(() => {
       expect(
-        screen.getByRole('menuitem', {name: 'Rename', hidden: true}),
+        screen.getByRole('menu', {name: 'Actions', hidden: true}),
       ).toHaveFocus();
     });
     trigger.focus();
@@ -622,6 +673,13 @@ describe('DropdownMenuSubMenu accessibility (WCAG 2.2 / APG)', () => {
       name: /Move to/,
       hidden: true,
     });
+    // Let the pointer-open container focus (rAF, #4477) settle so it can't
+    // steal focus from the manually focused trigger mid-test.
+    await waitFor(() => {
+      expect(
+        screen.getByRole('menu', {name: 'Actions', hidden: true}),
+      ).toHaveFocus();
+    });
     trigger.focus();
     await user.keyboard('{ArrowRight}');
     // Children resolve on open; ArrowDown moves from the container to Folder A.
@@ -633,3 +691,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

@@ -6,7 +6,7 @@
  * @position Utility; used by DropdownMenu to unify data-driven and compound paths
  */
 
-import type {ReactNode} from 'react';
+import type {ReactElement, ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Divider} from '../Divider';
 import {DropdownMenuItem} from './DropdownMenuItem';
@@ -17,6 +17,7 @@ import {
   typeScaleVars,
   colorVars,
 } from '../theme/tokens.stylex';
+import {mergeProps, themeProps} from '../utils';
 import type {
   DropdownMenuItemData,
   DropdownMenuOption,
@@ -46,6 +47,20 @@ function getSectionKey(section: DropdownMenuSection, index: number): string {
   return `section-${section.title ?? index}`;
 }
 
+/**
+ * Renders one leaf row as a `DropdownMenuItem`.
+ *
+ * `items` is stripped because it selects the submenu shape rather than being an
+ * item prop; every other field of `DropdownMenuItemData` is a
+ * `DropdownMenuItem` prop by construction (the type is `Pick`ed from
+ * `DropdownMenuItemProps`), so the data path forwards them wholesale and can't
+ * silently drop a field the data API advertises.
+ */
+function renderLeafItem(item: DropdownMenuItemData): ReactElement {
+  const {items: _submenuItems, ...itemProps} = item;
+  return <DropdownMenuItem key={getItemKey(item)} {...itemProps} />;
+}
+
 /**
  * Converts data-driven items into DropdownMenuItem components,
  * so both modes share the same rendering and keyboard navigation path.
@@ -57,7 +72,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,19 +86,16 @@ 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>
           )}
-          {option.items.map(item => (
-            <DropdownMenuItem
-              key={getItemKey(item)}
-              icon={item.icon}
-              label={item.label}
-              onClick={item.onClick}
-              isDisabled={item.isDisabled}
-            />
-          ))}
+          {option.items.map(renderLeafItem)}
         </div>,
       );
     } else if (!('type' in option)) {
@@ -97,15 +115,7 @@ export function renderDropdownItems(items: DropdownMenuOption[]): ReactNode {
           </DropdownMenuSubMenu>,
         );
       } else {
-        elements.push(
-          <DropdownMenuItem
-            key={getItemKey(option)}
-            icon={option.icon}
-            label={option.label}
-            onClick={option.onClick}
-            isDisabled={option.isDisabled}
-          />,
-        );
+        elements.push(renderLeafItem(option));
       }
     }
   }

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';

package/src/Field/Field.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: 'Field',
@@ -30,6 +30,10 @@ export const docs = {
       {className: 'astryx-field', visualProps: ['layout']},
       {className: 'astryx-field-label'},
       {className: 'astryx-field-status', visualProps: ['type', 'variant']},
+      {
+        className: 'astryx-input-status-icon',
+        visualProps: ['size', 'status'],
+      },
     ],
     vars: [
       {name: '--_field-radius', description: 'Border radius of input fields', default: 'var(--radius-element)', private: true},
@@ -192,7 +196,7 @@ function CustomSliderField() {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description: 'Field is a low-level wrapper for custom, native, or third-party controls that do not already provide field label, description, and status UI. Use it when you need the Field shell around a control you own; use styled Astryx inputs like TextInput, Typeahead, and Select directly when they already expose label, description, and validation props.',
@@ -208,7 +212,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Low-level field shell for custom controls needing label/description/status.',