@astryxdesign/core 0.7.3-canary.296edaf → 0.7.3-canary.2f47a4a

package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts

@@ -9,7 +9,7 @@
  * comes from the parent DropdownMenu's useListFocus, which matches
  * menuitemradio rows.
  */
-import { type ReactNode } from 'react';
+import { type ReactNode, type Ref } from 'react';
 import type { BaseProps } from '../BaseProps';
 export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'> {
     /**
@@ -24,9 +24,9 @@ export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'>
     /**
      * 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.
+     * Required even when `aria-labelledby` (via base props) points to visible
+     * text; that visible reference becomes the computed name while `label`
+     * remains the fallback.
      */
     label: string;
     /**
@@ -36,6 +36,10 @@ export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'>
      * @default true
      */
     hasCloseOnSelect?: boolean;
+    /**
+     * Ref forwarded to the role="group" root.
+     */
+    ref?: Ref<HTMLDivElement>;
     /**
      * The `DropdownMenuRadioItem`s that make up the group.
      */
@@ -58,7 +62,7 @@ export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'>
  * </DropdownMenu>
  * ```
  */
-export declare function DropdownMenuRadioGroup({ value, onChange, label, hasCloseOnSelect, children, xstyle, className, style, ...rest }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
+export declare function DropdownMenuRadioGroup({ value, onChange, label, hasCloseOnSelect, children, ref, xstyle, className, style, ...rest }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
 export declare namespace DropdownMenuRadioGroup {
     var displayName: string;
 }

package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAuB,EACvB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAiB7B;yBA3Be,sBAAsB"}
+{"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAIxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAuB,EACvB,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAkB7B;yBA7Be,sBAAsB"}

package/dist/DropdownMenu/DropdownMenuRadioGroup.js

@@ -51,6 +51,7 @@ export function DropdownMenuRadioGroup({
   label,
   hasCloseOnSelect = true,
   children,
+  ref,
   xstyle,
   className,
   style,
@@ -63,6 +64,7 @@ export function DropdownMenuRadioGroup({
   }), [value, onChange, hasCloseOnSelect]);
   return /*#__PURE__*/_jsx("div", {
     ...rest,
+    ref: ref,
     role: "group",
     "aria-label": label,
     ...mergeProps(stylex.props(styles.group, xstyle), {

package/dist/TimeInput/TimeInput.d.ts

@@ -59,12 +59,12 @@ export interface TimeInputProps extends Omit<FieldInputBaseProps<HTMLInputElemen
     /**
      * Explains why the input is disabled. When set together with
      * `isDisabled`, the input shows a tooltip with this text on hover and
-     * keyboard focus, and the field stays focusable (via `aria-disabled`)
-     * so the reason is discoverable by keyboard and assistive technology.
-     * Typing and arrow-key adjustment stay blocked.
+     * keyboard focus, and the input is described by it, so the reason is
+     * discoverable by keyboard and assistive technology. Typing and arrow-key
+     * adjustment stay blocked.
      *
-     * Use this instead of wrapping a disabled input in `Tooltip` — disabled
-     * controls don't emit the pointer events an external tooltip needs.
+     * Use this instead of wrapping a disabled input in `Tooltip`, so the
+     * reason is tied to the field.
      *
      * @example
      * ```

package/dist/TimeInput/TimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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"}

package/dist/TimeInput/TimeInput.js

@@ -46,6 +46,13 @@ import { effectiveInputPresentation, resolveInputPresentation } from "../utils/i
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const TOUCH_POINTER_QUERY = '(pointer: coarse)';
+const styles = {
+  disabledFocusRing: {
+    kVAM5u: "xvy26l8 x6q1khz",
+    kGVxlE: "x1gnnqk1 xuihb5h",
+    $$css: true
+  }
+};
 const sizeStyles = {
   sm: {
     kZKoxP: "x6k0iem",
@@ -175,10 +182,10 @@ function TimeField({
     }
   }, [announce, inputGroup, status?.message, status?.type]);
 
-  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
-  // tooltip listeners attach to the input container (which already exists) and
-  // the input stays perceivable via aria-disabled instead of the disabled
-  // attribute. Typing is blocked with readOnly and value mutation guards.
+  // A disabled field never renders native `disabled` (spec:AST-085 FR1): the
+  // input stays focusable via aria-disabled, and readOnly plus the value
+  // mutation guards block typing. The disabled-reason tooltip's listeners
+  // attach to the input container.
   const showsDisabledMessage = isDisabled && !!disabledMessage;
   const disabledMessageTooltip = useTooltip({
     placement: 'above',
@@ -258,8 +265,8 @@ function TimeField({
 
   // Handle input text change - update immediately if valid
   const handleInputChange = useCallback(e => {
-    // With a disabledMessage the input drops `disabled` for focusability, so
-    // guard value mutation explicitly (readOnly also blocks typing).
+    // The input is never natively disabled (spec:AST-085 FR1), so guard
+    // value mutation explicitly (readOnly also blocks typing).
     if (isDisabled) {
       return;
     }
@@ -290,6 +297,11 @@ function TimeField({
     if (pendingInput === null) {
       return;
     }
+    // Disabled: keep the value, drop the draft (spec:AST-085 FR2).
+    if (isDisabled) {
+      setPendingInput(null);
+      return;
+    }
     if (!pendingInput.trim()) {
       // Empty input clears the value
       if (value !== undefined) {
@@ -307,9 +319,15 @@ function TimeField({
     }
     // Clear pending input - display will revert to formatted value
     setPendingInput(null);
-  }, [pendingInput, value, fireChange, hasSeconds, min, max]);
+  }, [pendingInput, isDisabled, value, fireChange, hasSeconds, min, max]);
 
   // Handle keyboard navigation on input
+  // Enter in a focused disabled field would submit a surrounding form (FR2).
+  const preventDisabledEnter = e => {
+    if (isDisabled && e.key === 'Enter') {
+      e.preventDefault();
+    }
+  };
   const handleInputKeyDown = useCallback(e => {
     // ArrowUp/ArrowDown step the time and preventDefault; an IME candidate
     // window uses those same arrows to navigate candidates, so guard the
@@ -318,8 +336,7 @@ function TimeField({
     if (isImeKeyEvent(e.nativeEvent)) {
       return;
     }
-    // Arrow-key adjustment mutates the value; block it while showing a
-    // disabled reason (the input keeps focusability via aria-disabled).
+    // Arrow-key adjustment mutates the value; block it while disabled.
     if (isDisabled) {
       return;
     }
@@ -393,7 +410,7 @@ function TimeField({
       size,
       status: status?.type ?? null,
       disabled: isDisabled ? 'disabled' : null
-    }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
+    }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, isDisabled && styles.disabledFocusRing, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
     children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
       id: inputLabelID,
       children: label
@@ -420,7 +437,7 @@ function TimeField({
       max: max,
       hourFormat: hourFormat,
       isEffectivelyDisabled: isDisabled,
-      isFocusableDisabled: showsDisabledMessage,
+      isFocusableDisabled: true,
       isEffectivelyRequired: isEffectivelyRequired,
       isBusy: isBusy,
       statusType: status?.type,
@@ -429,7 +446,8 @@ function TimeField({
         ...controlProps,
         onFocus: onFocusProp,
         onBlur: onBlurProp,
-        onKeyDown: onKeyDownProp
+        onKeyDown: chainEventHandlers(preventDisabledEnter, onKeyDownProp),
+        onClick: isDisabled ? undefined : controlProps.onClick
       }
     }) : /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {
@@ -450,15 +468,14 @@ function TimeField({
         onChange: handleInputChange,
         onFocus: chainEventHandlers(handleFocus, onFocusProp),
         onBlur: chainEventHandlers(handleBlur, onBlurProp),
-        onKeyDown: chainEventHandlers(handleInputKeyDown, onKeyDownProp),
-        placeholder: displayPlaceholder
-        // With a disabledMessage the input keeps focusability via
-        // aria-disabled so the reason is focus-discoverable; typing and
-        // arrow-key adjustment are blocked with readOnly and the guards.
+        onKeyDown: chainEventHandlers(preventDisabledEnter, handleInputKeyDown, onKeyDownProp),
+        placeholder: displayPlaceholder,
+        "aria-disabled": isDisabled ? 'true' : undefined,
+        readOnly: isDisabled || undefined
+        // The browser still dispatches a click on an aria-disabled input,
+        // so a caller's onClick is skipped too (spec:AST-085 FR2).
         ,
-        disabled: isDisabled && !showsDisabledMessage,
-        "aria-disabled": showsDisabledMessage ? 'true' : undefined,
-        readOnly: showsDisabledMessage || undefined,
+        onClick: isDisabled ? undefined : controlProps.onClick,
         autoFocus: hasAutoFocus,
         "data-autofocus": hasAutoFocus || undefined,
         "aria-describedby": ariaDescribedBy,

package/dist/TimeInput/TouchTimeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchTimeField.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TouchTimeField.tsx"],"names":[],"mappings":"AAmEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AA0GhD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,UAAkB,EAClB,QAAgB,EAChB,UAAkB,EAGlB,SAAS,EAAE,UAAU,EACrB,YAAY,EAAE,aAAa,EAC3B,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BAuYhB;yBA1ae,cAAc"}
+{"version":3,"file":"TouchTimeField.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TouchTimeField.tsx"],"names":[],"mappings":"AAoEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAqHhD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,UAAkB,EAClB,QAAgB,EAChB,UAAkB,EAGlB,SAAS,EAAE,UAAU,EACrB,YAAY,EAAE,aAAa,EAC3B,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BAiZhB;yBApbe,cAAc"}

package/dist/TimeInput/TouchTimeField.js

@@ -30,7 +30,7 @@ import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { Icon } from "../Icon/index.js";
 import { useTranslator } from "../i18n/index.js";
 import "../theme/tokens.stylex.js";
-import { sizeVars, spacingVars } from "../theme/tokens.stylex.js";
+import { colorVars, sizeVars, spacingVars } from "../theme/tokens.stylex.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { Spinner } from "../Spinner/index.js";
 import { useTooltip } from "../Tooltip/index.js";
@@ -60,6 +60,11 @@ const sizeStyles = {
   }
 };
 const styles = {
+  disabledFocusRing: {
+    kVAM5u: "xvy26l8 x6q1khz",
+    kGVxlE: "x1gnnqk1 xuihb5h",
+    $$css: true
+  },
   iconButton: {
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
@@ -309,11 +314,11 @@ export function TouchTimeField({
       size,
       status: status?.type ?? null,
       disabled: isDisabled ? 'disabled' : null
-    }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
+    }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, isDisabled && styles.disabledFocusRing, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
     children: [/*#__PURE__*/_jsx("button", {
       type: "button",
       onClick: openSheet,
-      disabled: isEffectivelyDisabled,
+      "aria-disabled": isEffectivelyDisabled || undefined,
       "aria-label": t('@astryx.timeInput.openPicker', {
         label
       }),
@@ -334,10 +339,16 @@ export function TouchTimeField({
       readOnly: true,
       inputMode: "none",
       onChange: () => {},
-      onClick: chainEventHandlers(openSheet, onClickProp),
+      onClick: isEffectivelyDisabled ? undefined : chainEventHandlers(openSheet, onClickProp)
+      // Enter would submit a surrounding form while disabled (FR2).
+      ,
+      onKeyDown: chainEventHandlers(e => {
+        if (isEffectivelyDisabled && e.key === 'Enter') {
+          e.preventDefault();
+        }
+      }, controlProps.onKeyDown),
       placeholder: placeholder,
-      disabled: isEffectivelyDisabled && !showsDisabledMessage,
-      "aria-disabled": showsDisabledMessage ? 'true' : undefined,
+      "aria-disabled": isEffectivelyDisabled ? 'true' : undefined,
       "aria-describedby": ariaDescribedBy,
       "aria-required": isEffectivelyRequired ? 'true' : undefined,
       "aria-invalid": status?.type === 'error' ? 'true' : undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.3-canary.296edaf",
+  "version": "0.7.3-canary.2f47a4a",
   "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,8 +792,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.3-canary.296edaf",
-    "@astryxdesign/cli": "0.7.3-canary.296edaf",
+    "@astryxdesign/a11y-spec": "0.7.3-canary.2f47a4a",
+    "@astryxdesign/cli": "0.7.3-canary.2f47a4a",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/DropdownMenu/DropdownMenuItem.doc.mjs

@@ -8,7 +8,50 @@ export const docs = {
   displayName: 'Dropdown Menu Item',
   isHiddenFromOverview: true,
   description:
-    'Helper component for custom item rendering with consistent styling. Host attributes and DOM event handlers (aria-*, data-*, id, drag and drop) reach the row root, the element carrying role="menuitem".',
+    'One action or destination row in the pointer presentation of DropdownMenu. The parent menu owns keyboard navigation; the row owns activation, disabled state, destination behavior, content layout, and its theme target. Supported host attributes, DOM handlers, className, style, xstyle, and ref reach or compose on the role="menuitem" root.',
+  usage: {
+    description:
+      'Use DropdownMenuItem inside DropdownMenu compound mode for one action or destination. Keep label, description, icon, and endContent non-interactive; controls belong in separate rows or the menu header/footer.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Use href for a destination so LinkProvider, modified clicks, middle clicks, and browser link affordances remain available.',
+      },
+      {
+        guidance: true,
+        description:
+          'Use hasCloseOnSelect=false only when activation reports a result in place on the same row.',
+      },
+      {
+        guidance: false,
+        description:
+          'Put buttons, links, or other focusable controls inside label, description, or endContent. Each menu row is one interactive target.',
+      },
+    ],
+    anatomy: [
+      {
+        name: 'Row',
+        required: true,
+        description:
+          'The role="menuitem" root that owns activation, disabled state, destination behavior, and theme state.',
+      },
+      {
+        name: 'Content',
+        required: true,
+        description:
+          'The non-interactive label plus optional icon, description, and end content.',
+      },
+    ],
+  },
+  theming: {
+    targets: [
+      {
+        className: 'astryx-dropdown-menu-item',
+        visualProps: ['size', 'variant'],
+      },
+    ],
+  },
   playground: {
     // Standalone DropdownMenuItem has no required props, so the properties-tab
     // preview renders an empty row without seeded content. Seed a label and
@@ -26,6 +69,7 @@ export const docs = {
       name: 'label',
       type: 'ReactNode',
       description: 'Primary label text.',
+      required: true,
     },
     {
       name: 'description',
@@ -55,11 +99,18 @@ export const docs = {
       description:
         'Link relationship. noopener noreferrer is added for target="_blank". Only used with href.',
     },
+    {
+      name: 'isDisabled',
+      type: 'boolean',
+      description:
+        'Whether the row is unavailable. Disabled rows expose aria-disabled, remove link destinations, and suppress activation.',
+      default: 'false',
+    },
     {
       name: 'endContent',
       type: 'ReactNode',
       description:
-        'Additional content rendered after the label and description.',
+        'Non-interactive content rendered after the label and description.',
     },
     {
       name: 'hasCloseOnSelect',
@@ -95,7 +146,7 @@ export const docsZh = {
   isHiddenFromOverview: true,
   displayName: 'Dropdown Menu Item',
   description:
-    '用于自定义项渲染的辅助组件，提供一致的样式。宿主属性和 DOM 事件处理器（aria-*、data-*、id、拖放）会落在行根元素上，即带 role="menuitem" 的元素。',
+    'DropdownMenu 指针呈现中的一个操作或目标行。父菜单负责键盘导航；该行负责激活、禁用状态、目标行为、内容布局和主题目标。支持的宿主属性、DOM 处理程序、className、style、xstyle 和 ref 会落在或组合到 role="menuitem" 根元素上。',
   props: [
     {
       name: 'icon',
@@ -106,6 +157,7 @@ export const docsZh = {
       name: 'label',
       type: 'ReactNode',
       description: '主标签文本。',
+      required: true,
     },
     {
       name: 'description',
@@ -134,10 +186,16 @@ export const docsZh = {
       type: 'string',
       description: '链接关系。target="_blank" 时自动加入 noopener noreferrer。',
     },
+    {
+      name: 'isDisabled',
+      type: 'boolean',
+      description: '该行是否不可用；不可用的行不会激活或导航。',
+      default: 'false',
+    },
     {
       name: 'endContent',
       type: 'ReactNode',
-      description: '在标签和描述之后渲染的附加内容。',
+      description: '在标签和描述之后渲染的非交互式附加内容。',
     },
     {
       name: 'hasCloseOnSelect',
@@ -168,9 +226,9 @@ export const docsZh = {
 
 export const docsDense = {
   name: 'DropdownMenuItem',
-  isHiddenFromOverview: true,
   displayName: 'Dropdown Menu Item',
-  description: 'helper for custom item rendering w/ consistent styling',
+  description:
+    'one pointer-menu action/destination row; parent owns keyboard, row owns activation, state, destination, content, and root inputs',
   propDescriptions: {
     icon: 'icon before label',
     label: 'primary label text',
@@ -180,7 +238,8 @@ export const docsDense = {
     href: 'row is a real anchor w/ role=menuitem; modified/middle click keeps browser meaning',
     target: "link target ('_blank' | '_self'), with href",
     rel: 'link rel; noopener noreferrer added for _blank',
-    endContent: 'additional content after label+description',
+    isDisabled: 'unavailable; removes destinations and suppresses activation',
+    endContent: 'non-interactive content after label+description',
     hasCloseOnSelect:
       'false keeps the menu open on activation (in-place result on the item)',
     variant: