@astryxdesign/core 0.1.7-canary.fb9c68c → 0.1.7

package/dist/theme/Theme.js

@@ -115,7 +115,7 @@ function useThemeStyleInjection(theme) {
     // One-time perf hint per theme
     if (!warnedThemes.has(theme.name)) {
       warnedThemes.add(theme.name);
-      console.warn(`[Astryx] Theme "${theme.name}" is using runtime style injection. ` + `For better performance, use the pre-built theme:\n\n` + `  import {${theme.name}Theme} from '@astryxdesign/theme-${theme.name}/built';\n` + `  import '@astryxdesign/theme-${theme.name}/theme.css';\n\n` + `For custom themes, run \`npx @astryxdesign/cli theme build <file>\` to generate ` + `the built artifacts.`);
+      console.warn(`[Astryx] Theme "${theme.name}" is using runtime style injection. ` + `For better performance, use the pre-built theme:\n\n` + `  import {${theme.name}Theme} from '@astryxdesign/theme-${theme.name}/built';\n` + `  import '@astryxdesign/theme-${theme.name}/theme.css';\n\n` + `For custom themes, run \`npx astryx theme build <file>\` to generate ` + `the built artifacts.`);
     }
     const {
       prose,

package/dist/theme/defineTheme.d.ts

@@ -3,7 +3,7 @@
  *
  * Two distribution modes:
  * - Unbuilt: Theme generates CSS and injects a <style> tag at runtime
- * - Built: `astryx theme build` pre-compiles to a CSS file; Theme just
+ * - Built: `npx astryx theme build` pre-compiles to a CSS file; Theme just
  *   sets the data-astryx-theme attribute
  *
  * Token values can be:

package/dist/theme/defineTheme.js

@@ -5,7 +5,7 @@
  *
  * Two distribution modes:
  * - Unbuilt: Theme generates CSS and injects a <style> tag at runtime
- * - Built: `astryx theme build` pre-compiles to a CSS file; Theme just
+ * - Built: `npx astryx theme build` pre-compiles to a CSS file; Theme just
  *   sets the data-astryx-theme attribute
  *
  * Token values can be:

package/dist/theme/hct.d.ts

@@ -4,6 +4,7 @@ export interface HCT {
     tone: number;
 }
 export declare function toneToY(tone: number): number;
+export declare function yToTone(y: number): number;
 /**
  * Convert a hex color to HCT.
  * Hue: 0-360, Chroma: 0-~120, Tone: 0-100.

package/dist/theme/hct.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hct.d.ts","sourceRoot":"","sources":["../../src/theme/hct.ts"],"names":[],"mappings":"AAwBA,MAAM,WAAW,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAoFD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAkBD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAkBzC;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM,CA8BzC;AAkDD;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,GACb,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAMxB;AAMD;;GAEG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAM/D"}
+{"version":3,"file":"hct.d.ts","sourceRoot":"","sources":["../../src/theme/hct.ts"],"names":[],"mappings":"AAwBA,MAAM,WAAW,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAoFD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAEzC;AAkBD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAkBzC;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM,CA8BzC;AAkDD;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,GACb,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAMxB;AAMD;;GAEG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAM/D"}

package/dist/theme/hct.js

@@ -79,6 +79,9 @@ function labToXyz(L, a, b) {
 export function toneToY(tone) {
   return labFInv((tone + 16) / 116);
 }
+export function yToTone(y) {
+  return 116 * labF(y) - 16;
+}
 
 // =============================================================================
 // Hex <-> RGB

package/locales/en.json

@@ -423,26 +423,6 @@
     "defaultMessage": "Clear sort",
     "description": "Aria label for a Table column header when clicking it will clear the current sort."
   },
-  "@astryx.table.sort.direction.ascending": {
-    "defaultMessage": "ascending",
-    "description": "Localized direction word interpolated as `direction` into @astryx.table.sort.sortedBy and @astryx.table.sort.sortedByWithPriority."
-  },
-  "@astryx.table.sort.direction.descending": {
-    "defaultMessage": "descending",
-    "description": "Localized direction word interpolated as `direction` into @astryx.table.sort.sortedBy and @astryx.table.sort.sortedByWithPriority."
-  },
-  "@astryx.table.sort.sortBy": {
-    "defaultMessage": "Sort by {label}",
-    "description": "Aria label for a sortable Table header button when the column is unsorted. `label` is the column header text."
-  },
-  "@astryx.table.sort.sortedBy": {
-    "defaultMessage": "Sort by {label}, sorted {direction}",
-    "description": "Aria label for a sorted Table header button. `direction` is the localized direction word from @astryx.table.sort.direction.*."
-  },
-  "@astryx.table.sort.sortedByWithPriority": {
-    "defaultMessage": "Sort by {label}, sorted {direction}, priority {rank, number} of {total, number}",
-    "description": "Aria label for a sorted Table header button in multi-sort. `rank` is the 1-based position of this column in the sort order; `total` is the number of sorted columns."
-  },
   "@astryx.toast.dismiss": {
     "defaultMessage": "Dismiss notification",
     "description": "Aria label for the dismiss button on a Toast."
@@ -743,14 +723,6 @@
     "defaultMessage": "Expand all rows",
     "description": "Aria label for the Table expand-all / collapse-all header button when not all rows are currently expanded."
   },
-  "@astryx.tableTree.collapseRow": {
-    "defaultMessage": "Collapse row",
-    "description": "Aria label for the Table tree-data expander chevron when the row is currently expanded."
-  },
-  "@astryx.tableTree.expandRow": {
-    "defaultMessage": "Expand row",
-    "description": "Aria label for the Table tree-data expander chevron when the row is currently collapsed."
-  },
   "@astryx.textInput.clearLabel": {
     "defaultMessage": "Clear {label}",
     "description": "Aria label for the TextInput clear button. `label` is the input's own visible label."

package/locales/pseudo.json

@@ -317,21 +317,6 @@
   "@astryx.table.sort.clear": {
     "defaultMessage": "⟦Çłéàř šóřţ⟧"
   },
-  "@astryx.table.sort.direction.ascending": {
-    "defaultMessage": "⟦àšçéñðíñĝ⟧"
-  },
-  "@astryx.table.sort.direction.descending": {
-    "defaultMessage": "⟦ðéšçéñðíñĝ⟧"
-  },
-  "@astryx.table.sort.sortBy": {
-    "defaultMessage": "⟦Šóřţ ƀý {label}⟧"
-  },
-  "@astryx.table.sort.sortedBy": {
-    "defaultMessage": "⟦Šóřţ ƀý {label}, šóřţéð {direction}⟧"
-  },
-  "@astryx.table.sort.sortedByWithPriority": {
-    "defaultMessage": "⟦Šóřţ ƀý {label}, šóřţéð {direction}, þříóříţý {rank, number} óƒ {total, number}⟧"
-  },
   "@astryx.toast.dismiss": {
     "defaultMessage": "⟦Ðíšɱíšš ñóţíƒíçàţíóñ⟧"
   },
@@ -557,12 +542,6 @@
   "@astryx.tableRowExpansion.expandAllRows": {
     "defaultMessage": "⟦Éẋþàñð àłł řóŵš⟧"
   },
-  "@astryx.tableTree.collapseRow": {
-    "defaultMessage": "⟦Çółłàþšé řóŵ⟧"
-  },
-  "@astryx.tableTree.expandRow": {
-    "defaultMessage": "⟦Éẋþàñð řóŵ⟧"
-  },
   "@astryx.textInput.clearLabel": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.1.7-canary.fb9c68c",
+  "version": "0.1.7",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -636,7 +636,6 @@
   "files": [
     "dist",
     "src",
-    "scripts/postinstall.mjs",
     "locales",
     "docs.mjs",
     "groups.doc.mjs",
@@ -663,7 +662,6 @@
     "intl-messageformat": "^11.2.9"
   },
   "scripts": {
-    "postinstall": "node scripts/postinstall.mjs",
     "build": "rimraf dist && pnpm build:i18n && pnpm build:esm && tsc --project tsconfig.build.json && pnpm build:css && pnpm build:umd && node ../../scripts/check-no-dev-jsx.mjs",
     "build:i18n": "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",

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -113,7 +113,7 @@ export const docs = {
     {
       name: 'labelIcon',
       type: 'IconType',
-      description: 'Icon to display before the label text. See `astryx docs icons` for valid semantic names.',
+      description: 'Icon to display before the label text. See `npx astryx docs icons` for valid semantic names.',
     },
     {
       name: 'status',

package/src/Collapsible/Collapsible.doc.mjs

@@ -17,7 +17,6 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-collapsible', visualProps: ['density']},
-      {className: 'astryx-collapsible-content', visualProps: ['density']},
       {className: 'astryx-collapsible-group', visualProps: ['density']},
     ],
   },
@@ -54,12 +53,6 @@ export const docs = {
       type: 'boolean',
       description: 'Controlled open state.',
     },
-    {
-      name: 'isDisabled',
-      type: 'boolean',
-      description: "Disable the item so its trigger can't be toggled (dimmed, aria-disabled, and out of the tab order). Doesn't collapse an already-open item.",
-      default: 'false',
-    },
     {
       name: 'onOpenChange',
       type: '(isOpen: boolean) => void',

package/src/Collapsible/Collapsible.test.tsx

@@ -72,12 +72,6 @@ describe('Collapsible', () => {
       expect(screen.getByTestId('root')).toHaveClass('astryx-collapsible');
     });
 
-    it('renders the stable astryx-collapsible-content class on the content area', () => {
-      render(<Collapsible trigger="T">c</Collapsible>);
-      const content = contentFor(screen.getByRole('button'));
-      expect(content).toHaveClass('astryx-collapsible-content');
-    });
-
     it('renders a ReactNode trigger, not just a string', () => {
       render(
         <Collapsible trigger={<span data-testid="rich">Rich</span>}>
@@ -246,80 +240,6 @@ describe('Collapsible', () => {
     });
   });
 
-  describe('disabled state', () => {
-    it('marks the trigger aria-disabled and drops it from the tab order', () => {
-      render(
-        <Collapsible trigger="T" isDisabled>
-          Body
-        </Collapsible>,
-      );
-      const button = screen.getByRole('button');
-      expect(button).toHaveAttribute('aria-disabled', 'true');
-      expect(button).toHaveAttribute('tabindex', '-1');
-      // Never the native disabled attribute — it stays focusable/perceivable.
-      expect(button).not.toBeDisabled();
-    });
-
-    it('is enabled by default (no aria-disabled, stays in tab order)', () => {
-      render(<Collapsible trigger="T">Body</Collapsible>);
-      const button = screen.getByRole('button');
-      expect(button).not.toHaveAttribute('aria-disabled');
-      expect(button).not.toHaveAttribute('tabindex', '-1');
-    });
-
-    it('does not toggle when the trigger is clicked while disabled', async () => {
-      const user = userEvent.setup();
-      render(
-        <Collapsible trigger="T" isDisabled defaultIsOpen>
-          Body
-        </Collapsible>,
-      );
-      const button = screen.getByRole('button');
-      expect(button).toHaveAttribute('aria-expanded', 'true');
-      await user.click(button);
-      expect(button).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    it('does not fire onOpenChange while disabled', async () => {
-      const user = userEvent.setup();
-      const onOpenChange = vi.fn();
-      render(
-        <Collapsible trigger="T" isDisabled onOpenChange={onOpenChange}>
-          Body
-        </Collapsible>,
-      );
-      await user.click(screen.getByRole('button'));
-      expect(onOpenChange).not.toHaveBeenCalled();
-    });
-
-    it('does not collapse an already-open item — content stays visible', () => {
-      render(
-        <Collapsible trigger="T" isDisabled defaultIsOpen>
-          Body
-        </Collapsible>,
-      );
-      const content = contentFor(screen.getByRole('button'));
-      expect(content).not.toHaveStyle({display: 'none'});
-    });
-
-    it('does not toggle its group item when disabled', async () => {
-      const user = userEvent.setup();
-      render(
-        <CollapsibleGroup type="single">
-          <Collapsible trigger="A" value="a" isDisabled>
-            Body A
-          </Collapsible>
-          <Collapsible trigger="B" value="b">
-            Body B
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      const triggerA = screen.getByRole('button', {name: /A/});
-      await user.click(triggerA);
-      expect(triggerA).toHaveAttribute('aria-expanded', 'false');
-    });
-  });
-
   describe('prop forwarding', () => {
     it('forwards a ref to the root element', () => {
       const ref = vi.fn();

package/src/Collapsible/Collapsible.tsx

@@ -39,7 +39,6 @@ import {
   durationVars,
   easeVars,
 } from '../theme/tokens.stylex';
-
 import {useCollapsible} from './useCollapsible';
 import {CollapsibleGroupPresentationContext} from './CollapsibleGroupContext';
 import {getIcon} from '../Icon/globalIconRegistry';
@@ -82,13 +81,6 @@ const styles = stylex.create({
     textBoxEdge: 'cap alphabetic',
     textBoxTrim: 'trim-both',
   },
-  // Disabled trigger — non-interactive, dimmed. Native `disabled` on the
-  // button blocks click + keyboard activation; these styles restore the
-  // visual affordance that `all: unset` wipes.
-  triggerDisabled: {
-    cursor: 'not-allowed',
-    opacity: 0.5,
-  },
   // Chevron indicator
   chevron: {
     display: 'inline-flex',
@@ -110,17 +102,8 @@ const styles = stylex.create({
   contentHidden: {
     display: 'none',
   },
-  // Anchors body typography so revealed text renders at the system's body
-  // scale (family/size/weight/leading) instead of inheriting from wherever
-  // the Collapsible is placed. External themes override via the
-  // `astryx-collapsible-content` target.
   content: {
     paddingBlockStart: spacingVars['--spacing-1'],
-    fontFamily: typographyVars['--font-family-body'],
-    fontSize: typeScaleVars['--text-body-size'],
-    fontWeight: typeScaleVars['--text-body-weight'],
-    lineHeight: typeScaleVars['--text-body-leading'],
-    color: colorVars['--color-text-primary'],
   },
   // Group divider chrome — a hairline above every item except the first.
   // The group's wrapper (or 'all' mode) owns the outer edges.
@@ -183,17 +166,6 @@ export interface CollapsibleProps extends BaseProps {
    */
   isOpen?: boolean;
 
-  /**
-   * Whether the collapsible is disabled. A disabled item can't be toggled —
-   * its trigger is non-interactive and dimmed. Following the system-wide
-   * disabled convention, the trigger uses `aria-disabled` (not the native
-   * `disabled` attribute) and drops out of the tab order, staying perceivable
-   * to assistive tech. The content stays in whatever open state it was;
-   * disabling doesn't collapse an already-open item.
-   * @default false
-   */
-  isDisabled?: boolean;
-
   /**
    * Callback when the open state changes.
    */
@@ -253,7 +225,6 @@ export function Collapsible({
   children,
   defaultIsOpen,
   isOpen: controlledIsOpen,
-  isDisabled = false,
   onOpenChange,
   value,
   ref,
@@ -273,17 +244,6 @@ export function Collapsible({
     value,
   });
 
-  // Activation is blocked by this guard rather than the native `disabled`
-  // attribute, so the trigger keeps `aria-disabled` semantics and stays
-  // discoverable. A native `disabled` button would silently swallow events
-  // (e.g. a wrapping tooltip's hover) — the system-wide disabled convention.
-  const handleToggle = () => {
-    if (isDisabled) {
-      return;
-    }
-    toggle();
-  };
-
   const presentation = use(CollapsibleGroupPresentationContext);
   const isDivided = presentation?.hasDividers ?? false;
   const density = presentation?.density ?? null;
@@ -308,20 +268,12 @@ export function Collapsible({
       {...props}>
       <button
         type="button"
-        onClick={handleToggle}
-        aria-disabled={isDisabled || undefined}
+        onClick={toggle}
         aria-expanded={isOpen}
         aria-controls={contentId}
-        // A disabled trigger drops out of the tab order so it isn't a silently
-        // dead tab stop; activation stays blocked by the handleToggle guard,
-        // and aria-disabled keeps the state perceivable to assistive tech —
-        // the system-wide disabled convention (never native `disabled`, which
-        // would swallow events like a wrapping tooltip's hover).
-        tabIndex={isDisabled ? -1 : undefined}
         {...stylex.props(
           styles.trigger,
           density != null && triggerDensity[density],
-          isDisabled && styles.triggerDisabled,
         )}>
         <span {...stylex.props(styles.triggerLabel)}>{trigger}</span>
         <span
@@ -334,15 +286,10 @@ export function Collapsible({
       </button>
       <div
         id={contentId}
-        {...mergeProps(
-          themeProps('collapsible-content', {
-            density: density ?? undefined,
-          }),
-          stylex.props(
-            styles.content,
-            density != null && contentDensity[density],
-            !isOpen && styles.contentHidden,
-          ),
+        {...stylex.props(
+          styles.content,
+          density != null && contentDensity[density],
+          !isOpen && styles.contentHidden,
         )}>
         {presentation != null ? (
           <CollapsibleGroupPresentationContext value={null}>

package/src/ContextMenu/ContextMenu.test.tsx

@@ -12,12 +12,7 @@ import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {ContextMenu} from './ContextMenu';
-import {
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-} from './index';
+import {ContextMenuItem} from './index';
 import {DropdownMenuItem} from '../DropdownMenu/DropdownMenuItem';
 import {Divider} from '../Divider';
 
@@ -542,72 +537,3 @@ describe('ContextMenu compound mode', () => {
     });
   });
 });
-
-describe('ContextMenu selectable items', () => {
-  it('renders checkbox and radio items with correct roles and state', () => {
-    render(
-      <ContextMenu
-        menuContent={
-          <>
-            <ContextMenuRadioGroup
-              value="name"
-              onChange={() => {}}
-              aria-label="Sort by">
-              <ContextMenuRadioItem value="name" label="Sort by name" />
-              <ContextMenuRadioItem value="date" label="Sort by date" />
-            </ContextMenuRadioGroup>
-            <ContextMenuCheckboxItem label="Show hidden" value={true} />
-          </>
-        }>
-        <div>Right-click me</div>
-      </ContextMenu>,
-    );
-    expect(
-      screen.getByRole('menuitemradio', {name: 'Sort by name', hidden: true}),
-    ).toHaveAttribute('aria-checked', 'true');
-    expect(
-      screen.getByRole('menuitemradio', {name: 'Sort by date', hidden: true}),
-    ).toHaveAttribute('aria-checked', 'false');
-    expect(
-      screen.getByRole('menuitemcheckbox', {name: 'Show hidden', hidden: true}),
-    ).toHaveAttribute('aria-checked', 'true');
-    expect(
-      screen.getByRole('group', {name: 'Sort by', hidden: true}),
-    ).toBeInTheDocument();
-  });
-
-  it('fires onChange for radio and checkbox items', async () => {
-    const user = userEvent.setup();
-    const onSort = vi.fn();
-    const onToggle = vi.fn();
-    render(
-      <ContextMenu
-        menuContent={
-          <>
-            <ContextMenuRadioGroup
-              value="name"
-              onChange={onSort}
-              aria-label="Sort by">
-              <ContextMenuRadioItem value="name" label="Sort by name" />
-              <ContextMenuRadioItem value="date" label="Sort by date" />
-            </ContextMenuRadioGroup>
-            <ContextMenuCheckboxItem
-              label="Show hidden"
-              value={false}
-              onChange={onToggle}
-            />
-          </>
-        }>
-        <div>Right-click me</div>
-      </ContextMenu>,
-    );
-    await user.click(
-      screen.getByRole('menuitemradio', {name: 'Sort by date', hidden: true}),
-    );
-    expect(onSort).toHaveBeenCalledWith('date');
-    await user.click(
-      screen.getByRole('menuitemcheckbox', {name: 'Show hidden', hidden: true}),
-    );
-    expect(onToggle).toHaveBeenCalledWith(true);
-  });
-});

package/src/ContextMenu/ContextMenu.tsx

@@ -46,10 +46,6 @@ import {
   DropdownMenuContext,
   type DropdownMenuContextValue,
 } from '../DropdownMenu/DropdownMenuContext';
-import {
-  MENU_ITEM_ROLES,
-  MENU_ITEM_SELECTOR,
-} from '../DropdownMenu/menuItemRoles';
 import {useListFocus} from '../hooks/useListFocus';
 import {useTypeahead} from '../hooks/useTypeahead';
 import {useLongPress} from '../hooks/useLongPress';
@@ -269,7 +265,7 @@ export function ContextMenu({
     focusFirst,
     focusItem,
   } = useListFocus<HTMLDivElement>({
-    itemSelector: MENU_ITEM_SELECTOR,
+    itemSelector: '[role="menuitem"]:not([aria-disabled="true"])',
     wrap: false,
     onEscape: closeMenu,
   });
@@ -279,7 +275,9 @@ export function ContextMenu({
     (): HTMLElement[] =>
       listRef.current
         ? Array.from(
-            listRef.current.querySelectorAll<HTMLElement>(MENU_ITEM_SELECTOR),
+            listRef.current.querySelectorAll<HTMLElement>(
+              '[role="menuitem"]:not([aria-disabled="true"])',
+            ),
           )
         : [],
     [listRef],
@@ -343,10 +341,7 @@ export function ContextMenu({
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         const focused = document.activeElement as HTMLElement | null;
-        if (
-          focused &&
-          MENU_ITEM_ROLES.has(focused.getAttribute('role') ?? '')
-        ) {
+        if (focused?.getAttribute('role') === 'menuitem') {
           focused.click();
         }
         return;

package/src/ContextMenu/index.ts

@@ -20,18 +20,3 @@ export {
   DropdownMenuItem as ContextMenuItem,
   type DropdownMenuItemProps as ContextMenuItemProps,
 } from '../DropdownMenu/DropdownMenuItem';
-
-// Selectable items work inside a ContextMenu too — re-exported under the
-// ContextMenu name for a coherent API.
-export {
-  DropdownMenuCheckboxItem as ContextMenuCheckboxItem,
-  type DropdownMenuCheckboxItemProps as ContextMenuCheckboxItemProps,
-} from '../DropdownMenu/DropdownMenuCheckboxItem';
-export {
-  DropdownMenuRadioGroup as ContextMenuRadioGroup,
-  type DropdownMenuRadioGroupProps as ContextMenuRadioGroupProps,
-} from '../DropdownMenu/DropdownMenuRadioGroup';
-export {
-  DropdownMenuRadioItem as ContextMenuRadioItem,
-  type DropdownMenuRadioItemProps as ContextMenuRadioItemProps,
-} from '../DropdownMenu/DropdownMenuRadioItem';

package/src/DropdownMenu/DropdownMenu.doc.mjs

@@ -8,33 +8,10 @@ export const docs = {
   group: 'DropdownMenu',
   category: 'Action',
   keywords: ["dropdown","menu","popover","select","actions","contextmenu","overflow","kebab","menubutton"],
-  playground: {
-    // `items` is required; without seeded entries the properties-tab preview
-    // renders an empty trigger button. Provide a few actions so the preview
-    // is meaningful.
-    defaults: {
-      button: {label: 'Actions'},
-      items: [
-        {label: 'Edit'},
-        {label: 'Duplicate'},
-        {label: 'Delete'},
-      ],
-    },
-  },
   theming: {
     targets: [
       {className: 'astryx-dropdown-menu'},
       {className: 'astryx-dropdown-menu-item', visualProps: ['size']},
-      {
-        className: 'astryx-dropdown-menu-checkbox',
-        visualProps: ['size'],
-        states: ['checked', 'disabled'],
-      },
-      {
-        className: 'astryx-dropdown-menu-radio',
-        visualProps: ['size'],
-        states: ['checked', 'disabled'],
-      },
     ],
     vars: [
       {name: '--_dropdown-menu-radius', description: 'Border radius of the menu popup', default: 'var(--radius-element)', private: true},

package/src/DropdownMenu/DropdownMenu.tsx

@@ -38,7 +38,6 @@ import {Icon} from '../Icon';
 import type {IconType} from '../Icon';
 
 import {renderDropdownItems} from './renderDropdownItems';
-import {MENU_ITEM_ROLES, MENU_ITEM_SELECTOR} from './menuItemRoles';
 import {
   DropdownMenuContext,
   type DropdownMenuContextValue,
@@ -256,17 +255,14 @@ export function DropdownMenu({
     popover.hide();
   }, [popover]);
 
-  // Single keyboard navigation path for both modes.
-  // The selector matches plain items plus selectable items
-  // (menuitemradio/menuitemcheckbox) so lab checkbox/radio rows are reachable
-  // and roved to alongside plain items — not just role="menuitem".
+  // Single keyboard navigation path for both modes
   const {
     listRef,
     handleKeyDown: listNavKeyDown,
     focusFirst,
     focusItem,
   } = useListFocus<HTMLDivElement>({
-    itemSelector: MENU_ITEM_SELECTOR,
+    itemSelector: '[role="menuitem"]:not([aria-disabled="true"])',
     wrap: false,
     onEscape: closeMenu,
   });
@@ -277,7 +273,9 @@ export function DropdownMenu({
     (): HTMLElement[] =>
       listRef.current
         ? Array.from(
-            listRef.current.querySelectorAll<HTMLElement>(MENU_ITEM_SELECTOR),
+            listRef.current.querySelectorAll<HTMLElement>(
+              '[role="menuitem"]:not([aria-disabled="true"])',
+            ),
           )
         : [],
     [listRef],
@@ -310,10 +308,7 @@ export function DropdownMenu({
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         const focused = document.activeElement as HTMLElement | null;
-        if (
-          focused &&
-          MENU_ITEM_ROLES.has(focused.getAttribute('role') ?? '')
-        ) {
+        if (focused?.getAttribute('role') === 'menuitem') {
           focused.click();
         }
         return;