@astryxdesign/core 0.3.0 → 0.4.0

package/src/DropdownMenu/DropdownMenuRadioItem.tsx

@@ -14,26 +14,21 @@
  * state + onChange come from DropdownMenuRadioGroupContext. Keyboard nav +
  * Enter/Space activation come from the parent DropdownMenu.
  *
- * The round radio visual (circle + center dot) is decorative (aria-hidden) —
- * the row owns the checked state. Its size is derived from the menu's item size
- * and it swaps to the inline-end of the row on coarse-pointer (touch) devices
- * via CSS `order`. The dot is a shaped element, not an icon (a filled circle
- * has no registry glyph).
+ * The round radio visual is the shared radio indicator, decorative
+ * (aria-hidden) — the row owns the checked state, and menu radios pick up the
+ * same `radio` theming (and any theme replacement) as RadioList. This row keeps
+ * the marker box: its size is derived from the menu's item size and it swaps to
+ * the inline-end of the row on coarse-pointer (touch) devices via CSS `order`.
  */
 
 import {useCallback, type PointerEvent, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {renderIconSlot, type IconType} from '../Icon';
+import {useIndicator} from '../Indicator';
 import {Item} from '../Item';
 import {useDropdownMenuContext} from './DropdownMenuContext';
 import {focusMenuItemOnHover} from './menuItemHover';
-import {
-  colorVars,
-  spacingVars,
-  durationVars,
-  easeVars,
-  borderVars,
-} from '../theme/tokens.stylex';
+import {colorVars, spacingVars} from '../theme/tokens.stylex';
 import {mergeProps, themeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {useDropdownMenuRadioGroupContext} from './DropdownMenuContext';
@@ -56,21 +51,13 @@ const styles = stylex.create({
   },
   // Rendered in Item's `marker` slot as a raw flex child. On touch it moves to
   // the inline-end of the row via `order`.
-  circle: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    boxSizing: 'border-box',
-    borderWidth: borderVars['--border-width'],
-    borderStyle: 'solid',
-    borderRadius: '50%',
-    transitionProperty: 'background-color, border-color',
-    transitionDuration: {
-      default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
-    },
-    transitionTimingFunction: easeVars['--ease-standard'],
+  // Layout box for the decorative marker. The painted circle is the radio
+  // indicator inside it, which carries the shared `radio` theme target.
+  // Placement of the marker within the row. The indicator draws its own box
+  // (size, fill, border) — these are only the rules the MENU owns: where the
+  // marker sits in the row, and that it never takes the pointer.
+  marker: {
+    pointerEvents: 'none',
     order: {
       default: 0,
       '@media (pointer: coarse)': 1,
@@ -80,30 +67,10 @@ 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'],
-  },
-  dot: {
-    borderRadius: '50%',
-    backgroundColor: colorVars['--color-on-accent'],
-  },
-});
-
-const circleSizeStyles = stylex.create({
-  sm: {width: 18, height: 18},
-  md: {width: 22, height: 22},
-});
-
-const dotSizeStyles = stylex.create({
-  sm: {width: 6, height: 6},
-  md: {width: 8, height: 8},
 });
 
+// Matches the control sizes RadioList uses, so a radio reads the same in a
+// menu row as it does in a radio group.
 export interface DropdownMenuRadioItemProps extends Omit<
   BaseProps,
   'role' | 'aria-checked' | 'tabIndex'
@@ -173,6 +140,7 @@ export function DropdownMenuRadioItem({
   const menuSize = menuCtx?.menuSize ?? 'md';
   const controlSize = menuSize === 'sm' ? 'sm' : 'md';
   const isChecked = groupCtx.value === value;
+  const RadioControl = useIndicator('radio');
 
   const handleClick = useCallback(() => {
     if (isDisabled) {
@@ -197,33 +165,19 @@ export function DropdownMenuRadioItem({
       tabIndex={isDisabled ? undefined : -1}
       onPointerMove={handlePointerMove}
       marker={
-        <span
-          aria-hidden="true"
-          {...mergeProps(
-            themeProps('dropdown-menu-radio', {
-              size: controlSize,
-              checked: isChecked ? 'checked' : null,
-              disabled: isDisabled ? 'disabled' : null,
-            }),
-            stylex.props(
-              styles.circle,
-              circleSizeStyles[controlSize],
-              isChecked ? styles.checked : styles.unchecked,
-            ),
-          )}>
-          {isChecked && (
-            <span
-              {...mergeProps(
-                themeProps('dropdown-menu-radio-dot', {
-                  size: controlSize,
-                  checked: 'checked',
-                  disabled: isDisabled ? 'disabled' : null,
-                }),
-                stylex.props(styles.dot, dotSizeStyles[controlSize]),
-              )}
-            />
-          )}
-        </span>
+        // No wrapper — see DropdownMenuCheckboxItem: the target belongs on the
+        // visible circle, and the indicator already owns its control size.
+        <RadioControl
+          state={isChecked ? 'checked' : 'unchecked'}
+          size={controlSize}
+          isDisabled={isDisabled}
+          xstyle={styles.marker}
+          {...themeProps('dropdown-menu-radio', {
+            size: controlSize,
+            checked: isChecked ? 'checked' : null,
+            disabled: isDisabled ? 'disabled' : null,
+          })}
+        />
       }
       startContent={
         icon

package/src/DropdownMenu/DropdownMenuSelectable.test.tsx

@@ -78,7 +78,7 @@ describe('DropdownMenuCheckboxItem', () => {
     expect(onChangeSpy).toHaveBeenCalledWith(true);
   });
 
-  it('keeps the composed checkbox decorative (row is the only announced control)', async () => {
+  it('keeps the checkbox indicator decorative (row is the only announced control)', async () => {
     const user = userEvent.setup();
     render(
       <DropdownMenu button={{label: 'View'}}>
@@ -92,21 +92,20 @@ describe('DropdownMenuCheckboxItem', () => {
       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.)
+    // The visual is the shared checkbox indicator: aria-hidden, with no nested
+    // native <input>, so the row is the only announced/focusable control.
     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(row.querySelector('input[type="checkbox"]')).toBeNull();
+    // The shared checkbox target, directly on the row — no wrapper, and no
+    // menu-specific target added for it (main reached this element through
+    // `astryx-checkbox` too).
+    const marker = row.querySelector('.astryx-checkbox');
+    expect(marker).toBeInTheDocument();
     expect(marker).toHaveAttribute('aria-hidden', 'true');
+    expect(marker).toHaveAttribute('data-checked', 'checked');
   });
 
   it('does not toggle when disabled', async () => {
@@ -159,7 +158,7 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
     ).toBeInTheDocument();
   });
 
-  it('exposes a themeable slot on the checked radio dot', async () => {
+  it('renders the shared radio indicator in the menu marker', async () => {
     const user = userEvent.setup();
     render(
       <DropdownMenu button={{label: 'Sort'}}>
@@ -177,18 +176,25 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
       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.
+    // The menu's target and the shared radio target land on the SAME painted
+    // circle, so menu radios and RadioList radios theme together and a theme
+    // never has to reach through a wrapper.
+    const box = checked.querySelector('.astryx-dropdown-menu-radio');
+    expect(box).toHaveClass('astryx-radio');
+    expect(box).toHaveAttribute('data-size', 'md');
+    expect(box).toHaveAttribute('data-checked', 'checked');
+    expect(box?.querySelector('.astryx-radio-dot')).toBeInTheDocument();
+
+    // The unchecked radio still draws its circle, without the dot.
     const unchecked = screen.getByRole('menuitemradio', {
       name: 'Oldest',
       hidden: true,
     });
+    const uncheckedIndicator = unchecked.querySelector('.astryx-radio');
+    expect(uncheckedIndicator).toBeInTheDocument();
+    expect(uncheckedIndicator).not.toHaveAttribute('data-checked');
     expect(
-      unchecked.querySelector('.astryx-dropdown-menu-radio-dot'),
+      uncheckedIndicator?.querySelector('.astryx-radio-dot'),
     ).not.toBeInTheDocument();
   });
 

package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx

@@ -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();
@@ -584,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();
@@ -650,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.

package/src/DropdownMenu/DropdownMenuSubMenu.tsx

@@ -147,14 +147,9 @@ const flyoutStyles = stylex.create({
   },
   popover: {
     minWidth: '160px',
-    // Small inline gap so the flyout doesn't sit flush against the parent menu.
-    marginInlineStart: spacingVars['--spacing-1'],
-    marginInlineEnd: spacingVars['--spacing-1'],
   },
   popoverCustomWidth: (width: string | number) => ({
     minWidth: typeof width === 'number' ? `${width}px` : width,
-    marginInlineStart: spacingVars['--spacing-1'],
-    marginInlineEnd: spacingVars['--spacing-1'],
   }),
 });
 
@@ -559,6 +554,7 @@ export function DropdownMenuSubMenu(
         {
           placement: 'end',
           alignment: 'start',
+          offset: spacingVars['--spacing-1'],
           xstyle: [popoverXstyle, layerAnimations.end],
         },
       )}

package/src/DropdownMenu/index.ts

@@ -22,13 +22,20 @@ export {
   type DropdownMenuProps,
   type DropdownMenuButtonProps,
   type DropdownMenuItemData,
-  type DropdownMenuDivider,
+  type DropdownMenuDividerData,
   type DropdownMenuSection,
   type DropdownMenuOption,
 } from './DropdownMenu';
 
 export {DropdownMenuItem, type DropdownMenuItemProps} from './DropdownMenuItem';
 
+// Divider — the compound peer of the data API's `{type: 'divider'}`. Both
+// modes render this component, so they cannot drift.
+export {
+  DropdownMenuDivider,
+  type DropdownMenuDividerProps,
+} from './DropdownMenuDivider';
+
 // Selectable items — checkbox (independent) and radio (single-select group).
 export {
   DropdownMenuCheckboxItem,

package/src/DropdownMenu/renderDropdownItems.tsx

@@ -6,10 +6,10 @@
  * @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';
+import {DropdownMenuDivider} from './DropdownMenuDivider';
 import {DropdownMenuSubMenu} from './DropdownMenuSubMenu';
 import {
   spacingVars,
@@ -34,17 +34,38 @@ const styles = stylex.create({
     color: colorVars['--color-text-secondary'],
     userSelect: 'none',
   },
-  divider: {
-    marginBlock: spacingVars['--spacing-1'],
-  },
 });
 
-function getItemKey(item: DropdownMenuItemData): string {
-  return `item-${item.label}`;
+function getItemKey(item: DropdownMenuItemData, index: number): string {
+  return `item-${item.id ?? index}`;
 }
 
 function getSectionKey(section: DropdownMenuSection, index: number): string {
-  return `section-${section.title ?? index}`;
+  return `section-${section.id ?? index}`;
+}
+
+/**
+ * Renders one leaf row as a `DropdownMenuItem`.
+ *
+ * Keyed by `item.id` when the caller supplies one, else by position. NOT by
+ * label: an item that reports its own result (a copy row swapping to "Copied")
+ * would change key mid-interaction, remounting the row and dropping keyboard
+ * focus. Position is the safe default because a menu's rows are usually fixed;
+ * a menu whose items reorder or filter needs `id` for the same reason.
+ *
+ * `items` selects the submenu shape rather than being an item prop, and `id` is
+ * identity for React rather than something `DropdownMenuItem` renders, so both
+ * are stripped. Every remaining 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,
+  index: number,
+): ReactElement {
+  const {items: _submenuItems, id: _id, ...itemProps} = item;
+  return <DropdownMenuItem key={getItemKey(item, index)} {...itemProps} />;
 }
 
 /**
@@ -58,13 +79,7 @@ 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}
-          {...themeProps('dropdown-menu-divider')}
-        />,
-      );
+      elements.push(<DropdownMenuDivider key={`divider-${i}`} />);
     } else if ('type' in option && option.type === 'section') {
       elements.push(
         <div
@@ -81,15 +96,7 @@ export function renderDropdownItems(items: DropdownMenuOption[]): ReactNode {
               {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)) {
@@ -101,7 +108,7 @@ export function renderDropdownItems(items: DropdownMenuOption[]): ReactNode {
       if (option.items && option.items.length > 0) {
         elements.push(
           <DropdownMenuSubMenu
-            key={getItemKey(option)}
+            key={getItemKey(option, i)}
             icon={option.icon}
             label={option.label}
             isDisabled={option.isDisabled}>
@@ -109,15 +116,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, i));
       }
     }
   }

package/src/EmptyState/EmptyState.doc.mjs

@@ -66,6 +66,8 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-empty-state', visualProps: ['variant']},
+      {className: 'astryx-empty-state-title', visualProps: ['variant']},
+      {className: 'astryx-empty-state-description', visualProps: ['variant']},
     ],
   },
   usage: {
@@ -141,6 +143,8 @@ export const docsZh = {
   theming: {
     targets: [
       {className: 'astryx-empty-state', visualProps: ['variant']},
+      {className: 'astryx-empty-state-title', visualProps: ['variant']},
+      {className: 'astryx-empty-state-description', visualProps: ['variant']},
     ],
   },
   usage: {

package/src/EmptyState/EmptyState.test.tsx

@@ -3,6 +3,13 @@
 import {describe, it, expect} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {EmptyState} from './EmptyState';
+import {defineTheme} from '../theme/defineTheme';
+import {generateThemeCSS} from '../theme/generateThemeRules';
+
+function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
+  const {prose, component} = generateThemeCSS(theme);
+  return [prose, component].filter(Boolean).join('\n\n');
+}
 
 describe('EmptyState', () => {
   it('renders with title', () => {
@@ -148,4 +155,59 @@ describe('EmptyState', () => {
     expect(screen.getByText('Clear filters')).toBeInTheDocument();
     expect(screen.getByText('Go back')).toBeInTheDocument();
   });
+
+  describe('theming targets', () => {
+    it('puts astryx-empty-state-title on the title heading', () => {
+      render(<EmptyState title="No results" />);
+      const heading = screen.getByRole('heading', {name: 'No results'});
+      expect(heading).toHaveClass('astryx-empty-state-title');
+    });
+
+    it('puts astryx-empty-state-description on the description', () => {
+      render(
+        <EmptyState title="No results" description="Try another search." />,
+      );
+      const description = screen.getByText('Try another search.');
+      expect(description).toHaveClass('astryx-empty-state-description');
+    });
+
+    it('reflects the compact variant on the title and description targets', () => {
+      render(
+        <EmptyState
+          title="No results"
+          description="Try another search."
+          isCompact
+        />,
+      );
+      expect(screen.getByRole('heading', {name: 'No results'})).toHaveAttribute(
+        'data-variant',
+        'compact',
+      );
+      expect(screen.getByText('Try another search.')).toHaveAttribute(
+        'data-variant',
+        'compact',
+      );
+    });
+
+    it('exposes the title and description as themeable defineTheme targets', () => {
+      // jsdom can't resolve the @layer cascade, so this asserts the targets are
+      // reachable by a theme via the sanctioned defineTheme channel — replacing
+      // the structural `> div:has(> :is(h1..h6))` heading-detection selectors a
+      // consumer would otherwise need to restyle the title and description.
+      const theme = defineTheme({
+        name: 'empty-state-target-test',
+        components: {
+          'empty-state-title': {
+            base: {fontSize: 'var(--text-large-size)'},
+          },
+          'empty-state-description': {
+            base: {color: 'var(--color-text-secondary)'},
+          },
+        },
+      });
+      const css = generateThemeTestCSS(theme);
+      expect(css).toContain('.astryx-empty-state-title');
+      expect(css).toContain('.astryx-empty-state-description');
+    });
+  });
 });

package/src/EmptyState/EmptyState.tsx

@@ -157,6 +157,7 @@ export function EmptyState({
   return (
     <div
       ref={ref}
+      {...props}
       role="status"
       {...mergeProps(
         themeProps('empty-state', {variant: isCompact ? 'compact' : null}),
@@ -167,13 +168,17 @@ export function EmptyState({
         ),
         className,
         style,
-      )}
-      {...props}>
+      )}>
       {icon != null && <div aria-hidden="true">{icon}</div>}
       <div {...stylex.props(styles.textGroup)}>
         {createElement(
           HeadingTag,
-          stylex.props(styles.title, isCompact && styles.titleCompact),
+          mergeProps(
+            themeProps('empty-state-title', {
+              variant: isCompact ? 'compact' : null,
+            }),
+            stylex.props(styles.title, isCompact && styles.titleCompact),
+          ),
           title,
         )}
         {description != null && (
@@ -182,9 +187,14 @@ export function EmptyState({
           // mismatches. The StyleX style sets margin: 0, so appearance is
           // unchanged.
           <div
-            {...stylex.props(
-              styles.description,
-              isCompact && styles.descriptionCompact,
+            {...mergeProps(
+              themeProps('empty-state-description', {
+                variant: isCompact ? 'compact' : null,
+              }),
+              stylex.props(
+                styles.description,
+                isCompact && styles.descriptionCompact,
+              ),
             )}>
             {description}
           </div>