@astryxdesign/core 0.1.6 → 0.1.7-canary.0a6de96

package/src/DropdownMenu/DropdownMenuRadioItem.tsx

@@ -0,0 +1,232 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file DropdownMenuRadioItem.tsx
+ * @input React, stylex, Item + Icon + DropdownMenu context + tokens from core
+ * @output DropdownMenuRadioItem — a single option in a radio group.
+ * @position Sub-component; must be used inside a DropdownMenuRadioGroup.
+ *
+ * A menu item representing one option in a single-select group
+ * (role="menuitemradio"). The row owns the role and aria-checked; there is no
+ * nested native <input> (per the WAI-ARIA menuitemradio pattern). Selection
+ * 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).
+ */
+
+import {useCallback, type ReactNode} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {renderIconSlot, type IconType} from '../Icon';
+import {Item} from '../Item';
+import {useDropdownMenuContext} from './DropdownMenuContext';
+import {
+  colorVars,
+  spacingVars,
+  durationVars,
+  easeVars,
+  borderVars,
+} from '../theme/tokens.stylex';
+import {mergeProps, themeProps} from '../utils';
+import type {BaseProps} from '../BaseProps';
+import {useDropdownMenuRadioGroupContext} from './DropdownMenuContext';
+
+const styles = stylex.create({
+  root: {
+    width: '100%',
+    borderRadius: `max(0px, calc(var(--_dropdown-menu-radius, ${spacingVars['--spacing-2']}) - var(--_dropdown-menu-padding, ${spacingVars['--spacing-1']})))`,
+    color: colorVars['--color-text-primary'],
+    backgroundColor: {
+      default: 'transparent',
+      ':focus': colorVars['--color-overlay-hover'],
+      ':hover': colorVars['--color-overlay-hover'],
+    },
+    cursor: 'pointer',
+    outline: 'none',
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  // 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'],
+    order: {
+      default: 0,
+      '@media (pointer: coarse)': 1,
+    },
+    marginInlineStart: {
+      default: 0,
+      '@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},
+});
+
+export interface DropdownMenuRadioItemProps extends Omit<
+  BaseProps,
+  'role' | 'aria-checked' | 'tabIndex'
+> {
+  /**
+   * The value this item represents within its group. The group's `value`
+   * matches against this to determine the checked state.
+   */
+  value: string;
+  /**
+   * Primary label text identifying the option.
+   */
+  label: ReactNode;
+  /**
+   * Secondary description text displayed below the label.
+   */
+  description?: ReactNode;
+  /**
+   * Icon to display before the label. Accepts a semantic icon name (see
+   * `npx astryx docs icons`) or a rendered node.
+   */
+  icon?: ReactNode | IconType;
+  /**
+   * Whether this individual radio item is disabled. Disabled items stay
+   * focusable (via `aria-disabled`) so they remain discoverable by keyboard
+   * and assistive technology, but selection is blocked.
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Content to render after the label and description, such as a badge or
+   * metadata.
+   */
+  endContent?: ReactNode;
+}
+
+/**
+ * A single option in a DropdownMenuRadioGroup (role="menuitemradio").
+ *
+ * @example
+ * ```
+ * <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
+ *   <DropdownMenuRadioItem value="newest" label="Newest" />
+ *   <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
+ * </DropdownMenuRadioGroup>
+ * ```
+ */
+export function DropdownMenuRadioItem({
+  value,
+  label,
+  description,
+  icon,
+  isDisabled = false,
+  endContent,
+  xstyle,
+  className,
+  style,
+  ...rest
+}: DropdownMenuRadioItemProps) {
+  const menuCtx = useDropdownMenuContext();
+  const groupCtx = useDropdownMenuRadioGroupContext();
+  if (!groupCtx) {
+    throw new Error(
+      'DropdownMenuRadioItem must be used within a DropdownMenuRadioGroup',
+    );
+  }
+  const menuSize = menuCtx?.menuSize ?? 'md';
+  const controlSize = menuSize === 'sm' ? 'sm' : 'md';
+  const isChecked = groupCtx.value === value;
+
+  const handleClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    groupCtx.onChange(value);
+    if (groupCtx.hasCloseOnSelect) {
+      menuCtx?.closeMenu();
+    }
+  }, [isDisabled, groupCtx, value, menuCtx]);
+
+  return (
+    <Item
+      {...rest}
+      role="menuitemradio"
+      aria-checked={isChecked}
+      tabIndex={isDisabled ? undefined : -1}
+      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 {...stylex.props(styles.dot, dotSizeStyles[controlSize])} />
+          )}
+        </span>
+      }
+      startContent={
+        icon
+          ? renderIconSlot(icon, {size: 'sm', color: 'secondary'})
+          : undefined
+      }
+      label={label}
+      description={description}
+      endContent={endContent}
+      onClick={handleClick}
+      isDisabled={isDisabled}
+      xstyle={[styles.root, isDisabled && styles.disabled, xstyle]}
+      {...mergeProps(themeProps('dropdown-menu-item', {size: menuSize}), {
+        className,
+        style,
+      })}
+    />
+  );
+}
+
+DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';

package/src/DropdownMenu/DropdownMenuSelectable.test.tsx

@@ -0,0 +1,163 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file DropdownMenuSelectable.test.tsx
+ * @input vitest, @testing-library/react, DropdownMenu + selectable items
+ * @output Unit tests for DropdownMenuCheckboxItem / RadioGroup / RadioItem (#3829)
+ */
+
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {DropdownMenu} from './DropdownMenu';
+import {DropdownMenuCheckboxItem} from './DropdownMenuCheckboxItem';
+import {DropdownMenuRadioGroup} from './DropdownMenuRadioGroup';
+import {DropdownMenuRadioItem} from './DropdownMenuRadioItem';
+
+beforeEach(() => {
+  HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
+    this.setAttribute('popover-open', '');
+    const event = new Event('toggle', {bubbles: false});
+    Object.defineProperty(event, 'newState', {value: 'open'});
+    this.dispatchEvent(event);
+  });
+  HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
+    this.removeAttribute('popover-open');
+    const event = new Event('toggle', {bubbles: false});
+    Object.defineProperty(event, 'newState', {value: 'closed'});
+    this.dispatchEvent(event);
+  });
+  const originalMatches = HTMLElement.prototype.matches;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (HTMLElement.prototype as any).matches = function (
+    selector: string,
+  ): boolean {
+    if (selector === ':popover-open') {
+      return this.hasAttribute('popover-open');
+    }
+    return originalMatches.call(this, selector);
+  };
+});
+
+describe('DropdownMenuCheckboxItem', () => {
+  it('renders role menuitemcheckbox and reflects checked state', 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/}));
+    expect(
+      screen.getByRole('menuitemcheckbox', {
+        name: /Show archived/,
+        hidden: true,
+      }),
+    ).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('calls onChange with the toggled value on click', async () => {
+    const user = userEvent.setup();
+    const onChangeSpy = vi.fn();
+    render(
+      <DropdownMenu button={{label: 'View'}}>
+        <DropdownMenuCheckboxItem
+          label="Show archived"
+          value={false}
+          onChange={onChangeSpy}
+        />
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole('button', {name: /View/}));
+    await user.click(
+      screen.getByRole('menuitemcheckbox', {
+        name: /Show archived/,
+        hidden: true,
+      }),
+    );
+    expect(onChangeSpy).toHaveBeenCalledWith(true);
+  });
+
+  it('does not toggle when disabled', async () => {
+    const user = userEvent.setup();
+    const onChangeSpy = vi.fn();
+    render(
+      <DropdownMenu button={{label: 'View'}}>
+        <DropdownMenuCheckboxItem
+          label="Show archived"
+          value={false}
+          onChange={onChangeSpy}
+          isDisabled
+        />
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole('button', {name: /View/}));
+    const item = screen.getByRole('menuitemcheckbox', {
+      name: /Show archived/,
+      hidden: true,
+    });
+    expect(item).toHaveAttribute('aria-disabled', 'true');
+    await user.click(item);
+    expect(onChangeSpy).not.toHaveBeenCalled();
+  });
+});
+
+describe('DropdownMenuRadioGroup / RadioItem', () => {
+  it('renders a named group with radios reflecting the selected value', async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu button={{label: 'Sort'}}>
+        <DropdownMenuRadioGroup
+          value="newest"
+          onChange={() => {}}
+          aria-label="Sort by">
+          <DropdownMenuRadioItem value="newest" label="Newest" />
+          <DropdownMenuRadioItem value="oldest" label="Oldest" />
+        </DropdownMenuRadioGroup>
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole('button', {name: /Sort/}));
+    expect(
+      screen.getByRole('menuitemradio', {name: 'Newest', hidden: true}),
+    ).toHaveAttribute('aria-checked', 'true');
+    expect(
+      screen.getByRole('menuitemradio', {name: 'Oldest', hidden: true}),
+    ).toHaveAttribute('aria-checked', 'false');
+    expect(
+      screen.getByRole('group', {name: 'Sort by', hidden: true}),
+    ).toBeInTheDocument();
+  });
+
+  it('calls onChange with the selected value', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <DropdownMenu button={{label: 'Sort'}}>
+        <DropdownMenuRadioGroup
+          value="newest"
+          onChange={onChange}
+          aria-label="Sort by">
+          <DropdownMenuRadioItem value="newest" label="Newest" />
+          <DropdownMenuRadioItem value="oldest" label="Oldest" />
+        </DropdownMenuRadioGroup>
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole('button', {name: /Sort/}));
+    await user.click(
+      screen.getByRole('menuitemradio', {name: 'Oldest', hidden: true}),
+    );
+    expect(onChange).toHaveBeenCalledWith('oldest');
+  });
+
+  it('throws when a radio item is used outside a group', () => {
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() =>
+      render(
+        <DropdownMenu button={{label: 'Sort'}}>
+          <DropdownMenuRadioItem value="x" label="X" />
+        </DropdownMenu>,
+      ),
+    ).toThrow(/DropdownMenuRadioGroup/);
+    spy.mockRestore();
+  });
+});

package/src/DropdownMenu/index.ts

@@ -18,7 +18,27 @@ export {
   type DropdownMenuOption,
 } from './DropdownMenu';
 
+export {DropdownMenuItem, type DropdownMenuItemProps} from './DropdownMenuItem';
+
+// Selectable items — checkbox (independent) and radio (single-select group).
+export {
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemProps,
+} from './DropdownMenuCheckboxItem';
+export {
+  DropdownMenuRadioGroup,
+  type DropdownMenuRadioGroupProps,
+} from './DropdownMenuRadioGroup';
+export {
+  DropdownMenuRadioItem,
+  type DropdownMenuRadioItemProps,
+} from './DropdownMenuRadioItem';
+
+// Menu-coordination context — public so consumers can build custom menu items
+// that read the menu size / close the menu.
 export {
-  DropdownMenuItem,
-  type DropdownMenuItemProps,
-} from './DropdownMenuItem';
+  DropdownMenuContext,
+  useDropdownMenuContext,
+  type DropdownMenuContextValue,
+  type DropdownMenuSize,
+} from './DropdownMenuContext';

package/src/DropdownMenu/menuItemRoles.ts

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file menuItemRoles.ts
+ * @output Shared menu-item role set + focus selector.
+ * @position Internal; used by DropdownMenu and ContextMenu so their
+ *   roving-focus, typeahead, and Enter/Space activation stay in sync.
+ *
+ * Includes the selectable items (menuitemradio/menuitemcheckbox) alongside
+ * plain menuitem so checkbox/radio rows are reachable by arrow keys, typeahead,
+ * and Enter/Space — not just role="menuitem".
+ */
+
+export const MENU_ITEM_ROLES: ReadonlySet<string> = new Set([
+  'menuitem',
+  'menuitemradio',
+  'menuitemcheckbox',
+]);
+
+export const MENU_ITEM_SELECTOR: string = [...MENU_ITEM_ROLES]
+  .map(role => `[role="${role}"]:not([aria-disabled="true"])`)
+  .join(',');

package/src/EmptyState/EmptyState.doc.mjs

@@ -39,7 +39,7 @@ export const docs = {
       name: 'headingLevel',
       type: '1 | 2 | 3 | 4 | 5 | 6',
       description:
-        'Controls the rendered HTML heading tag (h1-h6) to fit the document outline.',
+        'Controls only the rendered HTML heading tag (h1-h6) so the title fits the document outline. This is a semantic change for accessibility and does not change the visual size of the title, which stays fixed regardless of level.',
       default: '3',
     },
     {
@@ -121,7 +121,7 @@ export const docsZh = {
       name: 'headingLevel',
       type: '1 | 2 | 3 | 4 | 5 | 6',
       description:
-        '控制渲染的 HTML 标题标签（h1-h6），以适配文档大纲。',
+        '仅控制渲染的 HTML 标题标签（h1-h6），使标题适配文档大纲。这是用于无障碍的语义变化，不会改变标题的视觉大小，标题大小始终固定，与级别无关。',
       default: '3',
     },
     {
@@ -173,7 +173,7 @@ export const docsDense = {
   },
   propDescriptions: {
     title: 'Primary msg rendered as heading (h1-h6) inside empty state.',
-    headingLevel: 'Controls HTML heading tag (h1-h6) for document outline.',
+    headingLevel: 'Controls only HTML heading tag (h1-h6) for document outline; does not change visual title size.',
     description: 'Optional secondary text w/ additional context below title.',
     icon: 'Optional icon/illustration above title; rendered decorative (aria-hidden="true").',
     actions: 'Optional action buttons below description; horizontal by default, vertical when isCompact.',

package/src/EmptyState/EmptyState.tsx

@@ -105,7 +105,10 @@ export interface EmptyStateProps extends BaseProps<HTMLDivElement> {
   actions?: ReactNode;
   /**
    * Semantic heading level for the title element.
-   * Controls the rendered HTML tag (h1–h6) to fit the document outline.
+   * Controls only the rendered HTML tag (h1–h6) so the title fits the
+   * document outline. This is a semantic change for accessibility and does
+   * not change the visual size of the title, which stays fixed regardless
+   * of level.
    * @default 3
    */
   headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;

package/src/Field/Field.doc.mjs

@@ -104,8 +104,8 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'FieldStatus',
-      description: 'Status indicator with type and optional message. When message is set, displays a colored status box.',
+      type: "{type: 'warning' | 'error' | 'success', message?: string, messageID?: string}",
+      description: 'Status indicator with type and optional message. When message is set, displays a colored status box. messageID is for wiring aria-describedby on the input.',
     },
     {
       name: 'statusVariant',

package/src/FileInput/FileInput.test.tsx

@@ -10,7 +10,13 @@
  */
 
 import {describe, it, expect, vi, afterEach, beforeEach} from 'vitest';
-import {render, screen, fireEvent, waitFor} from '@testing-library/react';
+import {
+  render,
+  screen,
+  fireEvent,
+  createEvent,
+  waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {FileInput} from './FileInput';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
@@ -588,6 +594,39 @@ describe('FileInput', () => {
       expect(screen.getByText('Choose file')).toBeInTheDocument();
     });
 
+    it('keeps the drag-over state while dragging over the dropzone children', () => {
+      render(
+        <FileInput
+          label="Upload"
+          value={null}
+          onChange={() => {}}
+          mode="dropzone"
+        />,
+      );
+      const dropzone = screen.getByRole('button', {name: 'Upload'});
+      fireEvent.dragEnter(dropzone);
+      expect(screen.getByText('Drop files here')).toBeInTheDocument();
+
+      // Moving from the container onto one of its own children fires a
+      // dragleave on the container with the child as relatedTarget — the
+      // highlight must not flicker off while still inside the dropzone.
+      // (jsdom's DragEvent init drops relatedTarget, so set it directly.)
+      const child = screen.getByText('Drop files here');
+      const leaveToChild = createEvent.dragLeave(dropzone);
+      Object.defineProperty(leaveToChild, 'relatedTarget', {value: child});
+      fireEvent(dropzone, leaveToChild);
+      expect(screen.getByText('Drop files here')).toBeInTheDocument();
+
+      // Actually leaving the dropzone ends the drag-over state.
+      const leaveToOutside = createEvent.dragLeave(dropzone);
+      Object.defineProperty(leaveToOutside, 'relatedTarget', {
+        value: document.body,
+      });
+      fireEvent(dropzone, leaveToOutside);
+      expect(screen.queryByText('Drop files here')).not.toBeInTheDocument();
+      expect(screen.getByText('Choose file')).toBeInTheDocument();
+    });
+
     it('displays file name in dropzone mode', () => {
       const file = createFile('doc.pdf', 100, 'application/pdf');
       render(

package/src/FileInput/FileInput.tsx

@@ -55,6 +55,7 @@ import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 function formatFileSize(bytes: number): string {
   if (bytes < 1024) {
@@ -425,6 +426,7 @@ export function FileInput({
   ref,
   ...rest
 }: FileInputProps) {
+  const t = useTranslator();
   const id = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
@@ -607,6 +609,15 @@ export function FileInput({
   const handleDragLeave = useCallback((e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
+    // Moving over the dropzone's own children (icon, text) fires dragleave on
+    // the container too — only a leave that actually exits the dropzone ends
+    // the drag-over state, otherwise the highlight flickers mid-drag.
+    if (
+      e.relatedTarget instanceof Node &&
+      e.currentTarget.contains(e.relatedTarget)
+    ) {
+      return;
+    }
     setIsDragOver(false);
   }, []);
 
@@ -774,7 +785,7 @@ export function FileInput({
         />
         {isDropzone ? renderDropzoneContent() : renderCompactContent()}
         {hasFiles && !isDisabled && !isLoading && (
-          <InputClearButton label={`Clear ${label}`} onClick={handleClear} />
+          <InputClearButton label={t('@astryx.fileInput.clearLabel', {label})} onClick={handleClear} />
         )}
       </div>
       <div

package/src/Grid/Grid.doc.mjs

@@ -60,28 +60,28 @@ export const docs = {
     },
     {
       name: 'gap',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: 'Spacing between all items.',
     },
     {
       name: 'rowGap',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: 'Row spacing; overrides `gap` for the row axis.',
     },
     {
       name: 'columnGap',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: 'Column spacing; overrides `gap` for the column axis.',
     },
     {
       name: 'align',
-      type: 'GridAlignment',
+      type: "'start' | 'center' | 'end' | 'stretch'",
       description: 'Vertical alignment of items.',
       default: "'stretch'",
     },
     {
       name: 'justify',
-      type: 'GridAlignment',
+      type: "'start' | 'center' | 'end' | 'stretch'",
       description: 'Horizontal alignment of items.',
       default: "'stretch'",
     },

package/src/Icon/Icon.test.tsx

@@ -96,6 +96,52 @@ describe('Icon', () => {
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
 
+  it('sizes component-mode icons in rem so they scale with root font-size', () => {
+    const sizes = {
+      xsm: '0.75rem',
+      sm: '1rem',
+      md: '1.25rem',
+      lg: '1.5rem',
+    } as const;
+    for (const [size, expected] of Object.entries(sizes)) {
+      const {unmount} = render(
+        <Icon
+          icon={TestIcon}
+          size={size as keyof typeof sizes}
+          data-testid="icon"
+        />,
+      );
+      const style = getComputedStyle(screen.getByTestId('icon'));
+      expect(style.width).toBe(expected);
+      expect(style.height).toBe(expected);
+      unmount();
+    }
+  });
+
+  it('sizes registry (string-mode) icons in rem, including fontSize', () => {
+    const sizes = {
+      xsm: '0.75rem',
+      sm: '1rem',
+      md: '1.25rem',
+      lg: '1.5rem',
+    } as const;
+    for (const [size, expected] of Object.entries(sizes)) {
+      const {unmount} = render(
+        <Icon
+          icon="check"
+          size={size as keyof typeof sizes}
+          data-testid="icon"
+        />,
+      );
+      const style = getComputedStyle(screen.getByTestId('icon'));
+      expect(style.width).toBe(expected);
+      expect(style.height).toBe(expected);
+      // fontSize is expressed in rem so 1em-based registry icons scale too.
+      expect(style.fontSize).toBe(expected);
+      unmount();
+    }
+  });
+
   it('forwards ref correctly', () => {
     const ref = vi.fn();
     render(<Icon icon={TestIcon} ref={ref} />);