@astryxdesign/core 0.7.4 → 0.7.5-canary.04434e7

package/dist/utils/dateParser.d.ts

@@ -8,9 +8,9 @@
  * - /packages/core/src/utils/dateParser.test.ts
  * - /packages/core/src/utils/index.ts
  */
-import { type PlainDate } from './plainDate';
-import type { Locale } from '../i18n/types';
-export { plainDateFromISO as parseISO, plainDateToISO as dateToISO, } from './plainDate';
+import { type PlainDate } from './plainDate.js';
+import type { Locale } from '../i18n/types.js';
+export { plainDateFromISO as parseISO, plainDateToISO as dateToISO, } from './plainDate.js';
 /**
  * Detects if the locale uses day-first date format (DD/MM/YYYY).
  * US and a few others use month-first (MM/DD/YYYY).

package/dist/utils/groupItems.d.ts

@@ -5,7 +5,7 @@
  * @position Shared utility; used by CommandPalette, trigger menu, and
  *   any future component that needs to group search results by category.
  */
-import type { SearchableItem } from '../Typeahead/types';
+import type { SearchableItem } from '../Typeahead/types.js';
 /**
  * A group of items with an optional heading.
  * `heading` is null for ungrouped items.

package/dist/utils/index.d.ts

@@ -4,33 +4,33 @@
  * @output Re-exports all utility functions and shared types
  * @position Package entry point for utils
  */
-export type { SizeValue } from './types';
-export type { ISODateString, DayOfWeek, PlainDate, DateRange } from './dateTypes';
-export { parseDateInput, dateToISO, parseISO, isLocaleDayFirst, } from './dateParser';
-export { plainDateCreate, plainDateFromISO, plainDateToISO, plainDateToDate, plainDateFromDate, plainDateToday, getDaysInMonth, plainDateDayOfWeek, plainDateAddMonths, plainDateAddDays, plainDateToInstant, plainDateFromInstant, plainDateIsBefore, plainDateIsAfter, plainDateIsEqual, plainDateMax, plainDateMin, plainDateIsInRange, plainDateSetFirstOfMonth, plainDateSetStartOfWeek, plainDateSetEndOfWeekExclusive, plainDateGetWeekNumber, plainDateFormat, formatSharedDate, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_SHORT_WITH_WEEKDAY, DATE_FORMAT_LONG, DATE_FORMAT_MONTH_YEAR, DATE_FORMAT_MONTH_ONLY, DATE_FORMAT_WEEKDAY_ONLY, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR, SHARED_DATE_FORMAT_OPTIONS, } from './plainDate';
-export type { SharedDateFormat } from './plainDate';
-export { parseISOTime, formatISOTime, formatDisplayTime12h, formatDisplayTime24h, parseTimeInput, compareTime, isTimeInRange, clampTime, adjustTime, createISOTimeString, } from './timeParser';
-export type { ISOTimeString, ParsedTime } from './timeParser';
-export { parseStyleKey } from './parseStyleKey';
-export { getKey, type Key, type KeyFallback } from './getKey';
-export { characterCount, firstCharacter, truncateCharacters } from './characters';
-export { mergeProps } from './mergeProps';
-export { mergeRefs } from './mergeRefs';
-export { isFocusDetached } from './focusReturn';
-export { composeEventHandlers } from './composeEventHandlers';
-export { themeProps, themeDataAttributes } from './themeProps';
-export type { ClassValue, ClassProps, ThemeDataAttributes, ThemeProps, } from './themeProps';
-export { groupItems, getItemGroup } from './groupItems';
-export type { ItemGroup, GroupItemsOptions } from './groupItems';
-export { observeResize, unobserveResize } from './sharedResizeObserver';
-export { isRenderable } from './isRenderable';
-export { getInputARIA } from './inputAria';
-export type { InputARIA, InputARIAInputGroup } from './inputAria';
-export { parseHex, parseRgb, parseColor, formatHex, formatColor, toGLFloats, } from './color';
-export type { RGBA } from './color';
-export { devWarn, devError, warnOnce, formatDevMessage } from './devWarning';
-export { rtlStyles } from './rtlStyles';
-export { focusOutlineStyles, focusOutlineProps } from './focusOutline.stylex';
-export { isImeKeyEvent } from './ime';
-export { interactionOverlayStyles } from './interactionOverlay.stylex';
+export type { SizeValue } from './types.js';
+export type { ISODateString, DayOfWeek, PlainDate, DateRange } from './dateTypes.js';
+export { parseDateInput, dateToISO, parseISO, isLocaleDayFirst, } from './dateParser.js';
+export { plainDateCreate, plainDateFromISO, plainDateToISO, plainDateToDate, plainDateFromDate, plainDateToday, getDaysInMonth, plainDateDayOfWeek, plainDateAddMonths, plainDateAddDays, plainDateToInstant, plainDateFromInstant, plainDateIsBefore, plainDateIsAfter, plainDateIsEqual, plainDateMax, plainDateMin, plainDateIsInRange, plainDateSetFirstOfMonth, plainDateSetStartOfWeek, plainDateSetEndOfWeekExclusive, plainDateGetWeekNumber, plainDateFormat, formatSharedDate, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_SHORT_WITH_WEEKDAY, DATE_FORMAT_LONG, DATE_FORMAT_MONTH_YEAR, DATE_FORMAT_MONTH_ONLY, DATE_FORMAT_WEEKDAY_ONLY, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR, SHARED_DATE_FORMAT_OPTIONS, } from './plainDate.js';
+export type { SharedDateFormat } from './plainDate.js';
+export { parseISOTime, formatISOTime, formatDisplayTime12h, formatDisplayTime24h, parseTimeInput, compareTime, isTimeInRange, clampTime, adjustTime, createISOTimeString, } from './timeParser.js';
+export type { ISOTimeString, ParsedTime } from './timeParser.js';
+export { parseStyleKey } from './parseStyleKey.js';
+export { getKey, type Key, type KeyFallback } from './getKey.js';
+export { characterCount, firstCharacter, truncateCharacters } from './characters.js';
+export { mergeProps } from './mergeProps.js';
+export { mergeRefs } from './mergeRefs.js';
+export { isFocusDetached } from './focusReturn.js';
+export { composeEventHandlers } from './composeEventHandlers.js';
+export { themeProps, themeDataAttributes } from './themeProps.js';
+export type { ClassValue, ClassProps, ThemeDataAttributes, ThemeProps, } from './themeProps.js';
+export { groupItems, getItemGroup } from './groupItems.js';
+export type { ItemGroup, GroupItemsOptions } from './groupItems.js';
+export { observeResize, unobserveResize } from './sharedResizeObserver.js';
+export { isRenderable } from './isRenderable.js';
+export { getInputARIA } from './inputAria.js';
+export type { InputARIA, InputARIAInputGroup } from './inputAria.js';
+export { parseHex, parseRgb, parseColor, formatHex, formatColor, toGLFloats, } from './color.js';
+export type { RGBA } from './color.js';
+export { devWarn, devError, warnOnce, formatDevMessage } from './devWarning.js';
+export { rtlStyles } from './rtlStyles.js';
+export { focusOutlineStyles, focusOutlineProps } from './focusOutline.stylex.js';
+export { isImeKeyEvent } from './ime.js';
+export { interactionOverlayStyles } from './interactionOverlay.stylex.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/plainDate.d.ts

@@ -4,9 +4,9 @@
  * @output Immutable PlainDate records and pure date arithmetic
  * @position Shared utility; replaces scattered Date usage across Calendar hooks
  */
-import type { ISODateString, PlainDate } from './dateTypes';
-import type { Locale } from '../i18n/types';
-export type { PlainDate } from './dateTypes';
+import type { ISODateString, PlainDate } from './dateTypes.js';
+import type { Locale } from '../i18n/types.js';
+export type { PlainDate } from './dateTypes.js';
 export declare function plainDateCreate(year: number, month: number, day: number): PlainDate;
 export declare function plainDateFromISO(str: ISODateString): PlainDate;
 export declare function plainDateToISO(pd: PlainDate): ISODateString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.4",
+  "version": "0.7.5-canary.04434e7",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -792,6 +792,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
+    "@astryxdesign/a11y-spec": "0.7.5-canary.04434e7",
+    "@astryxdesign/cli": "0.7.5-canary.04434e7",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -802,16 +804,14 @@
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
     "@types/babel__core": "^7.20.5",
-    "tailwindcss": "^4.3.2",
-    "@astryxdesign/a11y-spec": "0.0.0",
-    "@astryxdesign/cli": "0.7.4"
+    "tailwindcss": "^4.3.2"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"
   },
   "scripts": {
     "postinstall": "node scripts/postinstall.mjs",
-    "build": "node ../../scripts/clean-dist.mjs && pnpm build:i18n && pnpm build:esm && tsc --project tsconfig.build.json && pnpm build:css && node ../../scripts/check-no-dev-jsx.mjs && node ../../scripts/check-fully-specified.mjs",
+    "build": "node ../../scripts/clean-dist.mjs && pnpm build:i18n && pnpm build:esm && tsc --project tsconfig.build.json && node ../../scripts/add-declaration-extensions.mjs && pnpm build:css && node ../../scripts/check-no-dev-jsx.mjs && node ../../scripts/check-fully-specified.mjs",
     "build:i18n": "node ../../scripts/generate-i18n-runtime.mjs && node scripts/build-pseudo-locale.mjs",
     "build:esm": "babel src --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.ts,**/*.test.tsx,**/__tests__/**,**/*.perf.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css,**/*.css.d.ts\" --config-file ./babel.config.json",
     "build:css": "node ../../scripts/build-css.mjs",

package/src/Badge/Badge.doc.mjs

@@ -18,6 +18,7 @@ export const docs = {
     {
       name: 'label',
       type: 'ReactNode',
+      required: true,
       description:
         'Badge text content. A badge is one line, so a label wider than the space available is cut with an ellipsis rather than escaping its container; a string or number label is also set as the badge\'s title so the full text stays reachable on hover.',
     },
@@ -93,7 +94,7 @@ export const docsZh = {
       description: '视觉样式变体。语义变体使用实色背景，非语义颜色变体使用浅色背景配彩色文字。',
       default: "'neutral'",
     },
-    {name: 'label', type: 'ReactNode', description: '徽章文本内容。'},
+    {name: 'label', type: 'ReactNode', required: true, description: '徽章文本内容。'},
     {name: 'icon', type: 'ReactNode', description: '可选的前置图标。'},
   ],
   theming: {

package/src/BottomSheet/BottomSheet.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file BottomSheet.tsx
- * @input Uses React, StyleX, core hooks, shared layer dismissal, the shared interaction modality, named BottomSheetPanel, BottomSheetSwitcherContext
+ * @input Uses React, StyleX, core hooks, shared layer dismissal, the modal outlet registry, the shared interaction modality, named BottomSheetPanel, BottomSheetSwitcherContext
  * @output Exports BottomSheet component and BottomSheetProps
  * @position Public BottomSheet router plus private standalone/switcher hosts
  *
@@ -27,6 +27,9 @@
  * in a switcher, handing one scrim between two dialogs and keeping focus in
  * the active sheet when a retained dialog closes.
  *
+ * While a standalone modal sheet is open, its dialog is the outlet that
+ * app-global surfaces (toasts) render into (Layer/modalOutlet.ts).
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/BottomSheet/BottomSheetPanel.tsx
  * - /packages/core/src/BottomSheet/BottomSheetEdgeTint.tsx
@@ -36,6 +39,7 @@
  * - /packages/core/src/BottomSheet/BottomSheetSwitcher.test.tsx
  * - /packages/core/src/Layer/layerDismissalFamilies.test.tsx
  * - /packages/core/src/Layer/layerDismissalInvariants.test.tsx
+ * - /packages/core/src/Toast/ToastViewport.modalHost.test.tsx
  * - /apps/storybook/stories/BottomSheet.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/BottomSheet/BottomSheetShowcase.tsx
  */
@@ -58,6 +62,7 @@ import {colorVars, durationVars, easeVars} from '../theme/tokens.stylex';
 import {useDevWarning, useScrollLock} from '../hooks';
 import {mergeProps} from '../utils';
 import {LayerDepthProvider} from '../Layer/LayerDepthContext';
+import {useModalOutlet} from '../Layer/modalOutlet';
 import {useLayerDismissal} from '../Layer/useLayerDismissal';
 import {focusForLastInput} from '../utils/focusReturn';
 import {useInteractionModalityTracking} from '../utils/interactionModality';
@@ -373,6 +378,12 @@ function StandaloneBottomSheet({
     }
   }, [hasScrim, isOpen]);
 
+  // Host app-global surfaces (toasts) inside this sheet while it is an open
+  // modal, so they stay visible and operable above it. A closing sheet stays
+  // modal through its exit animation, but inert and hidden, so it hands them
+  // back as soon as it starts closing.
+  useModalOutlet(dialogRef, isOpen && hasScrim);
+
   useEffect(() => {
     if (!isOpen && isPresented && hasScrim) {
       handleScrimOpacity(0);

package/src/BottomSheet/__tests__/BottomSheetToastOutlet.a11y.chromium.spec.ts

@@ -0,0 +1,82 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file BottomSheetToastOutlet.a11y.chromium.spec.ts
+ * @input The built Core/Toast AppToastOverBottomSheet story; real Chromium hit
+ *   testing and mouse input
+ * @output Browser evidence that a toast fired from an open BottomSheet, on its
+ *   own or over a Dialog, is hit-testable above the sheet and takes a click
+ * @position Chromium proof for BottomSheet's modal outlet
+ *   (Layer/modalOutlet.ts). jsdom has no top layer and no modal inertness, so
+ *   Toast/ToastViewport.modalHost.test.tsx can only check where the viewport
+ *   lives.
+ */
+
+import {expect, test} from '@playwright/test';
+import {holdMotionStill} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+// Phone width: where an app presents its dialogs as bottom sheets.
+test.use({viewport: {width: 390, height: 844}});
+
+const SCENARIOS = [
+  {name: 'on its own', opens: ['Open sheet']},
+  {name: 'over a Dialog', opens: ['Open dialog', 'Open sheet from the dialog']},
+];
+
+for (const {name, opens} of SCENARIOS) {
+  test(`a toast action above a sheet opened ${name} takes the click`, async ({
+    page,
+  }) => {
+    await page.goto(
+      `${storybook.origin}/iframe.html?id=core-toast--app-toast-over-bottom-sheet&viewMode=story`,
+    );
+    await holdMotionStill(page);
+    for (const label of opens) {
+      await page.getByRole('button', {name: label, exact: true}).click();
+    }
+    const sheet = page.getByRole('dialog', {name: 'Item actions'});
+    await expect(sheet).toBeVisible();
+    await sheet.getByRole('button', {name: 'Archive'}).click();
+    await expect(sheet.getByText('The item is archived.')).toBeVisible();
+
+    const undo = page.locator('[popover] button', {hasText: 'Undo'});
+    await expect(undo).toBeVisible();
+    const box = await undo.boundingBox();
+    if (box == null) {
+      throw new Error('the Undo button has no box');
+    }
+    const x = box.x + box.width / 2;
+    const y = box.y + box.height / 2;
+
+    // Hit testing skips inert content and follows top-layer order: a toast
+    // left outside the sheet's modal, or under it, loses this point to the
+    // sheet.
+    const hit = await page.evaluate(
+      ([px, py]) =>
+        document.elementFromPoint(px, py)?.closest('button')?.textContent ??
+        null,
+      [x, y],
+    );
+    expect(hit).toBe('Undo');
+
+    await page.mouse.click(x, y);
+    await expect(
+      sheet.getByText('The item is back in your inbox.'),
+    ).toBeVisible();
+  });
+}

package/src/DateInput/DateInputTouch.test.tsx

@@ -2540,6 +2540,15 @@ describe('DateInput — scroll CSS (definition-level)', () => {
     );
   });
 
+  it('leaves a two-finger pinch to the page over the wheels', () => {
+    // `pan-y` alone also refuses the browser's pinch-zoom over the wheel, so
+    // the page could not be zoomed over an open picker. The real-engine proof
+    // is WheelPinchZoom.a11y.chromium.spec.ts; jsdom computes no touch-action.
+    expect(declarations(read('Wheel.tsx'), 'scroller')).toContain(
+      "touchAction: 'pan-y pinch-zoom'",
+    );
+  });
+
   it('guards the scroll-driven falloff behind @supports', () => {
     const source = read('Wheel.tsx');
     // Without the guard, a browser that does not understand animation-timeline

package/src/DateInput/Wheel.tsx

@@ -106,7 +106,10 @@ const styles = stylex.create({
     transformStyle: 'preserve-3d',
     scrollbarWidth: 'none',
     outline: 'none',
-    touchAction: 'pan-y',
+    // Vertical pans scroll the wheel; a two-finger pinch stays the page's, so
+    // the page can still zoom over an open picker (WCAG 1.4.4), as it does
+    // over the menus and listboxes (`module:DropdownMenu/useMenuPress` FR4).
+    touchAction: 'pan-y pinch-zoom',
   },
   item: {
     display: 'flex',

package/src/DateInput/__tests__/WheelPinchZoom.a11y.chromium.spec.ts

@@ -0,0 +1,158 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file WheelPinchZoom.a11y.chromium.spec.ts
+ * @input The built TimeInput bottom-sheet story and real Chromium touch input
+ *   (CDP) on a phone profile
+ * @output Browser evidence that a two-finger pinch over an open picker wheel
+ *   zooms the page (WCAG 1.4.4) and changes no value
+ * @position Real-engine proof for the wheel's `touch-action`; jsdom computes
+ *   no touch-action. The menus and listboxes have the same proof in
+ *   MenuPinchZoom.a11y.chromium.spec.ts.
+ */
+
+import {
+  expect,
+  test,
+  type CDPSession,
+  type Locator,
+  type Page,
+} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+// A phone: the viewport meta applies and the page can pinch-zoom.
+test.use({
+  hasTouch: true,
+  isMobile: true,
+  viewport: {width: 390, height: 844},
+  deviceScaleFactor: 3,
+});
+
+const sleep = async (ms: number) =>
+  new Promise(resolve => setTimeout(resolve, ms));
+
+async function pageScale(page: Page) {
+  return page.evaluate(() => window.visualViewport?.scale ?? 1);
+}
+
+async function centerOf(locator: Locator) {
+  const box = await locator.boundingBox();
+  if (box == null) {
+    throw new Error('no rendered bounds');
+  }
+  return {x: box.x + box.width / 2, y: box.y + box.height / 2};
+}
+
+type Point = {x: number; y: number};
+
+// Two fingers land one after the other and spread apart sideways, as a person
+// pinches. Sideways, because the wheel pans vertically: a vertical spread would
+// spend its first stretch scrolling the wheel before the zoom takes over.
+async function pinch(cdp: CDPSession, at: Point) {
+  const steps = 12;
+  const spread = 3;
+  const point = (dx: number, k: number, id: number) => ({
+    x: at.x + dx * k,
+    y: at.y,
+    id,
+  });
+  await cdp.send('Input.dispatchTouchEvent', {
+    type: 'touchStart',
+    touchPoints: [point(-30, 1, 1)],
+  });
+  await sleep(30);
+  await cdp.send('Input.dispatchTouchEvent', {
+    type: 'touchStart',
+    touchPoints: [point(-30, 1, 1), point(30, 1, 2)],
+  });
+  for (let i = 1; i <= steps; i++) {
+    await sleep(16);
+    const k = 1 + ((spread - 1) * i) / steps;
+    await cdp.send('Input.dispatchTouchEvent', {
+      type: 'touchMove',
+      touchPoints: [point(-30, k, 1), point(30, k, 2)],
+    });
+  }
+  await sleep(16);
+  await cdp.send('Input.dispatchTouchEvent', {
+    type: 'touchEnd',
+    touchPoints: [],
+  });
+  await sleep(600);
+}
+
+test('a pinch over an open picker wheel zooms the page and changes no value', async ({
+  page,
+}) => {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-timeinput--styling-parts&viewMode=story`,
+  );
+  const field = page.locator('[data-parts-row="control-bottom-sheet"] input');
+  await expect(field).toBeVisible();
+  await field.tap();
+  const wheel = page.getByRole('listbox', {name: 'Minute'});
+  await expect(wheel).toBeVisible();
+  // Let the sheet finish presenting, so the pinch lands on a wheel at rest.
+  await sleep(800);
+  const valueBefore = await field.inputValue();
+  expect(await pageScale(page)).toBe(1);
+
+  const cdp = await page.context().newCDPSession(page);
+  await pinch(cdp, await centerOf(wheel));
+
+  expect(await pageScale(page)).toBeGreaterThan(1.2);
+  await expect(wheel).toBeVisible();
+  expect(await field.inputValue()).toBe(valueBefore);
+});
+
+test('one finger dragged up a wheel still scrolls it and leaves the page at scale 1', async ({
+  page,
+}) => {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-timeinput--styling-parts&viewMode=story`,
+  );
+  const field = page.locator('[data-parts-row="control-bottom-sheet"] input');
+  await field.tap();
+  const wheel = page.getByRole('listbox', {name: 'Minute'});
+  await expect(wheel).toBeVisible();
+  await sleep(800);
+  const scrollTopBefore = await wheel.evaluate(el => el.scrollTop);
+
+  const cdp = await page.context().newCDPSession(page);
+  const at = await centerOf(wheel);
+  await cdp.send('Input.dispatchTouchEvent', {
+    type: 'touchStart',
+    touchPoints: [{x: at.x, y: at.y + 60, id: 1}],
+  });
+  for (let i = 1; i <= 12; i++) {
+    await sleep(16);
+    await cdp.send('Input.dispatchTouchEvent', {
+      type: 'touchMove',
+      touchPoints: [{x: at.x, y: at.y + 60 - i * 10, id: 1}],
+    });
+  }
+  await cdp.send('Input.dispatchTouchEvent', {
+    type: 'touchEnd',
+    touchPoints: [],
+  });
+  await sleep(600);
+
+  expect(await wheel.evaluate(el => el.scrollTop)).toBeGreaterThan(
+    scrollTopBefore + 60,
+  );
+  expect(await pageScale(page)).toBe(1);
+});

package/src/DropdownMenu/DropdownMenuRadioItem.doc.mjs

@@ -26,12 +26,14 @@ export const docs = {
     {
       name: 'value',
       type: 'string',
+      required: true,
       description:
         "The value this item represents within its group. The group's value matches against this to determine the checked state.",
     },
     {
       name: 'label',
       type: 'ReactNode',
+      required: true,
       description: 'Primary label text identifying the option.',
     },
     {
@@ -50,7 +52,7 @@ export const docs = {
       type: 'boolean',
       default: 'false',
       description:
-        '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.',
+        'Whether this individual radio item is disabled. Disabled items expose aria-disabled, block selection, and are currently skipped by DropdownMenu arrow-key navigation.',
     },
     {
       name: 'endContent',
@@ -94,7 +96,8 @@ export const docsDense = {
     label: 'primary label text',
     description: 'secondary text below label',
     icon: 'icon before label',
-    isDisabled: 'disabled; stays focusable via aria-disabled',
+    isDisabled:
+      'disabled; aria-disabled, blocks selection, skipped by arrow keys',
     endContent: 'content after label+description',
     ref: 'forwarded to the row root (the role="menuitemradio" element)',
   },