@astryxdesign/core 0.3.0-canary.e9fc2bb → 0.3.0-canary.ee705d8

package/dist/ContextMenu/ContextMenu.js

@@ -337,9 +337,9 @@ export function ContextMenu({
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       ref: mergeRefs(ref, triggerRef),
+      ...triggerProps,
       onContextMenu: handleContextMenu,
       ...longPressHandlers,
-      ...triggerProps,
       "data-testid": testId,
       ...stylex.props(styles.trigger, ...(triggerXstyle ? Array.isArray(triggerXstyle) ? triggerXstyle : [triggerXstyle] : [])),
       children: [children, /*#__PURE__*/_jsx("span", {

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAqB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AA+HD;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA2Sb;yBA3Te,MAAM"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAsB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuHD;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA2Sb;yBA3Te,MAAM"}

package/dist/Dialog/Dialog.js

@@ -27,12 +27,14 @@ import { mergeProps, mergeRefs } from "../utils/index.js";
 import { devWarn } from "../utils/devWarning.js";
 import { DialogContext } from "./DialogContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
+
 /**
  * Calculate a directional translate offset for dialog entry animation.
  * Returns a normalized vector from the trigger element toward the viewport
  * center, scaled to the given distance.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function getDialogDirection(triggerEl, distance = 16) {
   const rect = triggerEl.getBoundingClientRect();
   const dx = rect.left + rect.width / 2 - window.innerWidth / 2;
@@ -91,8 +93,6 @@ const styles = {
     k44tkh: "xqgcaz",
     kyAemX: "x128ha8g",
     kWV6AL: "xskzprw",
-    kI3sdo: "x17nn4n9",
-    kInvED: "x1wfwxd8 x7s97pk",
     $$css: true
   },
   open: {
@@ -447,7 +447,7 @@ export function Dialog({
     ...safeProps,
     ...mergeProps(themeProps('dialog', {
       variant
-    }), stylex.props(styles.dialog, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && (() => {
+    }), focusOutlineProps.focusVisible(styles.dialog, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && (() => {
       const o = resolveDialogPositionOffsets(position);
       return dynamicStyles.position(o.top, o.insetInlineStart, o.insetInlineEnd, o.bottom);
     })(), isFullscreen && styles.fullscreen, xstyle), className, style),

package/dist/DropdownMenu/DropdownMenu.d.ts

@@ -10,6 +10,11 @@
  *
  * Both modes use useListFocus for DOM-based keyboard navigation.
  *
+ * Initial focus on open follows the input modality: a keyboard open
+ * (Enter / Space / ArrowDown on the trigger) focuses the first enabled item
+ * (APG menu-button); a pointer open focuses the menu container itself so no
+ * item reads as pre-selected, and the first ArrowDown then moves to item 1.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DropdownMenu/DropdownMenu.doc.mjs
  * - /packages/core/src/DropdownMenu/DropdownMenu.test.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAInD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAa9D,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAQtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,qBAAqB,EACrB,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,CAC9C;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC5B,oBAAoB,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAMnE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAC3B,qBAAqB,GAAG,yBAAyB,CAAC;AA+BpD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EAAE,eAAe,EACvB,UAAU,EAAE,gBAAgB,EAC5B,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,SAAmB,EACnB,SAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAwRnB;yBAtSe,YAAY"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAInD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAa9D,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAQtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,qBAAqB,EACrB,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,CAC9C;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC5B,oBAAoB,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAMnE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAC3B,qBAAqB,GAAG,yBAAyB,CAAC;AA+BpD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EAAE,eAAe,EACvB,UAAU,EAAE,gBAAgB,EAC5B,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,SAAmB,EACnB,SAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA+TnB;yBA7Ue,YAAY"}

package/dist/DropdownMenu/DropdownMenu.js

@@ -14,6 +14,11 @@
  *
  * Both modes use useListFocus for DOM-based keyboard navigation.
  *
+ * Initial focus on open follows the input modality: a keyboard open
+ * (Enter / Space / ArrowDown on the trigger) focuses the first enabled item
+ * (APG menu-button); a pointer open focuses the menu container itself so no
+ * item reads as pre-selected, and the first ArrowDown then moves to item 1.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DropdownMenu/DropdownMenu.doc.mjs
  * - /packages/core/src/DropdownMenu/DropdownMenu.test.tsx
@@ -179,6 +184,13 @@ export function DropdownMenu({
   // Defer item focus until the layer has committed open, so focus restore
   // captures the trigger instead of the first menu item.
   const shouldFocusOnOpenRef = useRef(false);
+
+  // How the next open was initiated. Keyboard (and programmatic) opens focus
+  // the first enabled item per the APG menu-button pattern; pointer opens
+  // focus the menu container instead, so no item is visually highlighted as
+  // if pre-selected (#4477). Reset to 'keyboard' after every open so
+  // programmatic controlled opens keep the item-focus behavior.
+  const openModalityRef = useRef('keyboard');
   const handleLayerShow = useCallback(() => {
     onOpenChange?.(true);
     if (!isControlled) {
@@ -238,14 +250,26 @@ export function DropdownMenu({
     }
   }, [controlledIsOpen, isControlled, popover]);
 
-  // Move focus into the menu only after the layer has committed open.
+  // Move focus into the menu only after the layer has committed open,
+  // honoring the input modality: keyboard (and programmatic) opens land on
+  // the first enabled item per the APG menu-button pattern; pointer opens
+  // focus the menu container itself (tabIndex={-1}) so no item is
+  // highlighted as if pre-selected (#4477). Container focus keeps arrows,
+  // typeahead, Escape and Tab in the menu's onKeyDown, and is also the
+  // fallback when no item is focusable (e.g. all disabled), mirroring the
+  // submenu flyout fallback.
   useEffect(() => {
     if (!popover.isOpen || !shouldFocusOnOpenRef.current) {
       return;
     }
     shouldFocusOnOpenRef.current = false;
-    requestAnimationFrame(() => focusFirst());
-  }, [popover.isOpen, focusFirst]);
+    requestAnimationFrame(() => {
+      if (openModalityRef.current === 'pointer' || !focusFirst()) {
+        listRef.current?.focus();
+      }
+      openModalityRef.current = 'keyboard';
+    });
+  }, [popover.isOpen, focusFirst, listRef]);
 
   // Extend useListFocus with Enter/Space activation + typeahead
   const listKeyDown = useCallback(e => {
@@ -278,25 +302,34 @@ export function DropdownMenu({
     }
     listNavKeyDown(e);
   }, [listNavKeyDown, closeMenu, typeahead, ownsEvent]);
-  const openAndFocus = useCallback(() => {
+  const openAndFocus = useCallback((modality = 'keyboard') => {
+    openModalityRef.current = modality;
     shouldFocusOnOpenRef.current = true;
     popover.show();
   }, [popover]);
-  const handleButtonClick = useCallback(() => {
+  const handleButtonClick = useCallback(e => {
     // If the menu was just closed by light dismiss (e.g. iOS Safari fires
     // pointerdown → hide before the trigger's click), the click would
-    // otherwise immediately re-open it. Short-circuit within the guard window.
+    // otherwise immediately re-open it. Short-circuit within the guard
+    // window.
     if (Date.now() - lastHideTimeRef.current < 50) {
       return;
     }
     onClick?.();
+    // detail === 0 marks a synthesized click (screen reader / AT
+    // activation): treat it as keyboard so those users still land on the
+    // first item. Real pointer clicks report detail >= 1.
+    const modality = e.detail === 0 ? 'keyboard' : 'pointer';
     if (isControlled) {
+      if (!controlledIsOpen) {
+        openModalityRef.current = modality;
+      }
       onOpenChange?.(!controlledIsOpen);
     } else {
       if (popover.isOpen) {
         popover.hide();
       } else {
-        openAndFocus();
+        openAndFocus(modality);
       }
     }
   }, [onClick, isControlled, onOpenChange, controlledIsOpen, popover, openAndFocus]);
@@ -356,6 +389,12 @@ export function DropdownMenu({
       ref: listRef,
       id: menuId,
       role: "menu"
+      // Focus target for pointer opens (not in the Tab order): holding
+      // focus on the container keeps key events (arrows, typeahead,
+      // Escape, Tab) inside the menu without highlighting any item.
+      // Mirrors the DropdownMenuSubMenu flyout container.
+      ,
+      tabIndex: -1
       // Give the menu an accessible name from its trigger's label, so
       // screen readers announce e.g. "Actions menu" rather than an unnamed
       // menu (menus-13).

package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts

@@ -11,17 +11,14 @@
  * Enter/Space activation come from the parent DropdownMenu's useListFocus +
  * activation path, which matches menuitemcheckbox alongside plain menuitem rows.
  *
- * The checkbox visual composes the real CheckboxInput primitive so its checkmark
- * matches CheckboxListItem and picks up the standard `checkbox` theming slots.
- * It is purely decorative: the composed control is wrapped in an element that is
- * both `aria-hidden` and `inert`, so it contributes nothing to the row's
- * accessible name, and its native <input> and sr-only label stay out of the tab
- * order and the accessibility tree while pointer clicks fall through to the row
- * — the same shim MultiSelector uses. The row owns the checked state and
- * accessible name. The control size is derived from the menu's item size (a
- * `sm` menu gets the compact control; `md`/`lg` get the standard one) and it
- * swaps to the inline-end of the row on coarse-pointer (touch) devices via CSS
- * `order`, so it lands where selection toggles are conventionally placed on
+ * The checkbox visual is the shared checkbox indicator, decorative
+ * (aria-hidden) — the row owns the role, checked state, and accessible name, so
+ * there is no nested native <input> to shim out of the accessibility tree. It
+ * picks up the same `checkbox` theming (and any theme replacement) as
+ * CheckboxInput. The control size is derived from the menu's item size (a `sm`
+ * menu gets the compact control; `md`/`lg` get the standard one) and the marker
+ * box swaps to the inline-end of the row on coarse-pointer (touch) devices via
+ * CSS `order`, so it lands where selection toggles are conventionally placed on
  * mobile.
  */
 import { type ReactNode } from 'react';

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuCheckboxItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuCheckboxItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAOtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsC5C,MAAM,WAAW,6BAA8B,SAAQ,IAAI,CACzD,SAAS,EACT,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,CAClD;IACC;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAkB,EAClB,gBAAwB,EACxB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,6BAA6B,+BA6D/B;yBA1Ee,wBAAwB"}
+{"version":3,"file":"DropdownMenuCheckboxItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuCheckboxItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAOtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C,MAAM,WAAW,6BAA8B,SAAQ,IAAI,CACzD,SAAS,EACT,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,CAClD;IACC;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAkB,EAClB,gBAAwB,EACxB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,6BAA6B,+BA0D/B;yBAvEe,wBAAwB"}

package/dist/DropdownMenu/DropdownMenuCheckboxItem.js

@@ -15,23 +15,20 @@
  * Enter/Space activation come from the parent DropdownMenu's useListFocus +
  * activation path, which matches menuitemcheckbox alongside plain menuitem rows.
  *
- * The checkbox visual composes the real CheckboxInput primitive so its checkmark
- * matches CheckboxListItem and picks up the standard `checkbox` theming slots.
- * It is purely decorative: the composed control is wrapped in an element that is
- * both `aria-hidden` and `inert`, so it contributes nothing to the row's
- * accessible name, and its native <input> and sr-only label stay out of the tab
- * order and the accessibility tree while pointer clicks fall through to the row
- * — the same shim MultiSelector uses. The row owns the checked state and
- * accessible name. The control size is derived from the menu's item size (a
- * `sm` menu gets the compact control; `md`/`lg` get the standard one) and it
- * swaps to the inline-end of the row on coarse-pointer (touch) devices via CSS
- * `order`, so it lands where selection toggles are conventionally placed on
+ * The checkbox visual is the shared checkbox indicator, decorative
+ * (aria-hidden) — the row owns the role, checked state, and accessible name, so
+ * there is no nested native <input> to shim out of the accessibility tree. It
+ * picks up the same `checkbox` theming (and any theme replacement) as
+ * CheckboxInput. The control size is derived from the menu's item size (a `sm`
+ * menu gets the compact control; `md`/`lg` get the standard one) and the marker
+ * box swaps to the inline-end of the row on coarse-pointer (touch) devices via
+ * CSS `order`, so it lands where selection toggles are conventionally placed on
  * mobile.
  */
 import { useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { renderIconSlot } from "../Icon/index.js";
-import { CheckboxInput } from "../CheckboxInput/CheckboxInput.js";
+import { useIndicator } from "../Indicator/index.js";
 import { Item } from "../Item/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
 import { focusMenuItemOnHover } from "./menuItemHover.js";
@@ -53,8 +50,18 @@ const styles = {
     kSiTet: "xbyyjgo",
     kkrTdU: "x1h6gzvc",
     $$css: true
+  },
+  marker: {
+    kfzvcC: "x47corl",
+    kayTVb: "x1g77sc7 xozvky",
+    keTefX: "x1lziwak x1jymrmb",
+    $$css: true
   }
 };
+
+// Matches the control sizes CheckboxInput uses, so a checkbox reads the same in
+// a menu row as it does in a form.
+
 /**
  * A checkable dropdown menu item (role="menuitemcheckbox").
  *
@@ -90,12 +97,7 @@ export function DropdownMenuCheckboxItem({
   const ctx = useDropdownMenuContext();
   const menuSize = ctx?.menuSize ?? 'md';
   const controlSize = menuSize === 'sm' ? 'sm' : 'md';
-
-  // The composed checkbox is decorative and inert, so its label never reaches
-  // the accessibility tree — the row's `label` prop provides the announced
-  // name. CheckboxInput still requires a string label, so pass one through when
-  // the row label is a plain string.
-  const checkboxLabel = typeof label === 'string' ? label : '';
+  const CheckboxControl = useIndicator('checkbox');
   const handleClick = useCallback(() => {
     if (isDisabled) {
       return;
@@ -112,19 +114,18 @@ export function DropdownMenuCheckboxItem({
     "aria-checked": value,
     tabIndex: isDisabled ? undefined : -1,
     onPointerMove: handlePointerMove,
-    marker: /*#__PURE__*/_jsx("div", {
-      "aria-hidden": "true",
-      inert: true,
-      ...{
-        className: "x78zum5 x2lah0s x47corl x1g77sc7 xozvky x1lziwak x1jymrmb"
-      },
-      children: /*#__PURE__*/_jsx(CheckboxInput, {
-        label: checkboxLabel,
-        isLabelHidden: true,
-        value: value,
-        isDisabled: isDisabled,
-        size: controlSize
-      })
+    marker:
+    /*#__PURE__*/
+    // No wrapper, and no menu-specific theme target: the shared
+    // `astryx-checkbox` target is already on this element (main reached
+    // the menu checkbox through it too), so the menu adds only its own
+    // placement rules. A wrapper here would have duplicated the
+    // indicator's control size and moved nothing themeable.
+    _jsx(CheckboxControl, {
+      state: value ? 'checked' : 'unchecked',
+      size: controlSize,
+      isDisabled: isDisabled,
+      xstyle: styles.marker
     }),
     startContent: icon ? renderIconSlot(icon, {
       size: 'sm',

package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts

@@ -10,11 +10,11 @@
  * state + onChange come from DropdownMenuRadioGroupContext. Keyboard nav +
  * Enter/Space activation come from the parent DropdownMenu.
  *
- * The round radio visual (circle + center dot) is decorative (aria-hidden) —
- * the row owns the checked state. Its size is derived from the menu's item size
- * and it swaps to the inline-end of the row on coarse-pointer (touch) devices
- * via CSS `order`. The dot is a shaped element, not an icon (a filled circle
- * has no registry glyph).
+ * The round radio visual is the shared radio indicator, decorative
+ * (aria-hidden) — the row owns the checked state, and menu radios pick up the
+ * same `radio` theming (and any theme replacement) as RadioList. This row keeps
+ * the marker box: its size is derived from the menu's item size and it swaps to
+ * the inline-end of the row on coarse-pointer (touch) devices via CSS `order`.
  */
 import { type ReactNode } from 'react';
 import { type IconType } from '../Icon';

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAYtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqE5C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,SAAS,EACT,MAAM,GAAG,cAAc,GAAG,UAAU,CACrC;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,0BAA0B,+BAgF5B;yBA3Fe,qBAAqB"}
+{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAOtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,SAAS,EACT,MAAM,GAAG,cAAc,GAAG,UAAU,CACrC;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,0BAA0B,+BAmE5B;yBA9Ee,qBAAqB"}

package/dist/DropdownMenu/DropdownMenuRadioItem.js

@@ -14,20 +14,21 @@
  * state + onChange come from DropdownMenuRadioGroupContext. Keyboard nav +
  * Enter/Space activation come from the parent DropdownMenu.
  *
- * The round radio visual (circle + center dot) is decorative (aria-hidden) —
- * the row owns the checked state. Its size is derived from the menu's item size
- * and it swaps to the inline-end of the row on coarse-pointer (touch) devices
- * via CSS `order`. The dot is a shaped element, not an icon (a filled circle
- * has no registry glyph).
+ * The round radio visual is the shared radio indicator, decorative
+ * (aria-hidden) — the row owns the checked state, and menu radios pick up the
+ * same `radio` theming (and any theme replacement) as RadioList. This row keeps
+ * the marker box: its size is derived from the menu's item size and it swaps to
+ * the inline-end of the row on coarse-pointer (touch) devices via CSS `order`.
  */
 import { useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { renderIconSlot } from "../Icon/index.js";
+import { useIndicator } from "../Indicator/index.js";
 import { Item } from "../Item/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
 import { focusMenuItemOnHover } from "./menuItemHover.js";
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars, durationVars, easeVars, borderVars } from "../theme/tokens.stylex.js";
+import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps, themeProps } from "../utils/index.js";
 import { useDropdownMenuRadioGroupContext } from "./DropdownMenuContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -46,62 +47,17 @@ const styles = {
     kkrTdU: "x1h6gzvc",
     $$css: true
   },
-  circle: {
-    k1xSpc: "x78zum5",
-    kGNEyG: "x6s0dn4",
-    kjj79g: "xl56j7k",
-    kmuXW: "x2lah0s",
-    kB7OPa: "x9f619",
-    kMzoRj: "x1litavf",
-    ksu8eU: "x1y0btm7",
-    kaIpWk: "x16rqkct",
-    k1ekBW: "xts7igz",
-    kIyJzY: "xuedmi6 x12w9bfk",
-    kAMwcw: "xlr8y92",
+  marker: {
+    kfzvcC: "x47corl",
     kayTVb: "x1g77sc7 xozvky",
     keTefX: "x1lziwak x1jymrmb",
     $$css: true
-  },
-  unchecked: {
-    kVAM5u: "xvy26l8",
-    kWkggS: "x10xzikg",
-    $$css: true
-  },
-  checked: {
-    kVAM5u: "xad5do",
-    kWkggS: "x1ewilqj",
-    $$css: true
-  },
-  dot: {
-    kaIpWk: "x16rqkct",
-    kWkggS: "x1azo05",
-    $$css: true
-  }
-};
-const circleSizeStyles = {
-  sm: {
-    kzqmXN: "x1xp8n7a",
-    kZKoxP: "xmix8c7",
-    $$css: true
-  },
-  md: {
-    kzqmXN: "x17z2i9w",
-    kZKoxP: "x17rw0jw",
-    $$css: true
-  }
-};
-const dotSizeStyles = {
-  sm: {
-    kzqmXN: "x1v4s8kt",
-    kZKoxP: "xols6we",
-    $$css: true
-  },
-  md: {
-    kzqmXN: "x1xc55vz",
-    kZKoxP: "xdk7pt",
-    $$css: true
   }
 };
+
+// Matches the control sizes RadioList uses, so a radio reads the same in a
+// menu row as it does in a radio group.
+
 /**
  * A single option in a DropdownMenuRadioGroup (role="menuitemradio").
  *
@@ -133,6 +89,7 @@ export function DropdownMenuRadioItem({
   const menuSize = menuCtx?.menuSize ?? 'md';
   const controlSize = menuSize === 'sm' ? 'sm' : 'md';
   const isChecked = groupCtx.value === value;
+  const RadioControl = useIndicator('radio');
   const handleClick = useCallback(() => {
     if (isDisabled) {
       return;
@@ -149,19 +106,19 @@ export function DropdownMenuRadioItem({
     "aria-checked": isChecked,
     tabIndex: isDisabled ? undefined : -1,
     onPointerMove: handlePointerMove,
-    marker: /*#__PURE__*/_jsx("span", {
-      "aria-hidden": "true",
-      ...mergeProps(themeProps('dropdown-menu-radio', {
+    marker:
+    /*#__PURE__*/
+    // No wrapper — see DropdownMenuCheckboxItem: the target belongs on the
+    // visible circle, and the indicator already owns its control size.
+    _jsx(RadioControl, {
+      state: isChecked ? 'checked' : 'unchecked',
+      size: controlSize,
+      isDisabled: isDisabled,
+      xstyle: styles.marker,
+      ...themeProps('dropdown-menu-radio', {
         size: controlSize,
         checked: isChecked ? 'checked' : null,
         disabled: isDisabled ? 'disabled' : null
-      }), stylex.props(styles.circle, circleSizeStyles[controlSize], isChecked ? styles.checked : styles.unchecked)),
-      children: isChecked && /*#__PURE__*/_jsx("span", {
-        ...mergeProps(themeProps('dropdown-menu-radio-dot', {
-          size: controlSize,
-          checked: 'checked',
-          disabled: isDisabled ? 'disabled' : null
-        }), stylex.props(styles.dot, dotSizeStyles[controlSize]))
       })
     }),
     startContent: icon ? renderIconSlot(icon, {

package/dist/EmptyState/EmptyState.js

@@ -77,11 +77,11 @@ export function EmptyState({
   const HeadingTag = `h${headingLevel}`;
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
+    ...props,
     role: "status",
     ...mergeProps(themeProps('empty-state', {
       variant: isCompact ? 'compact' : null
     }), stylex.props(styles.container, isCompact && styles.containerCompact, xstyle), className, style),
-    ...props,
     children: [icon != null && /*#__PURE__*/_jsx("div", {
       "aria-hidden": "true",
       children: icon

package/dist/Indicator/CheckIndicator.d.ts

@@ -0,0 +1,26 @@
+import type { IndicatorProps } from './types';
+/**
+ * The default single-selection mark: a checkmark when chosen, nothing when not.
+ *
+ * Decorative and non-interactive — it renders `aria-hidden` and owns no role,
+ * state, or focus behavior; the option or row that hosts it keeps all of that.
+ *
+ * @example
+ * ```
+ * <CheckIndicator state={isSelected ? 'checked' : 'unchecked'} size="sm" />
+ * ```
+ *
+ * Swap every single-selection mark for a radio:
+ *
+ * @example
+ * ```
+ * import {RadioIndicator} from '@astryxdesign/core/Indicator';
+ *
+ * defineTheme({name: 'brand', indicators: {check: RadioIndicator}});
+ * ```
+ */
+export declare function CheckIndicator({ state, size, isDisabled, children, ref, className, style, xstyle, ...rest }: IndicatorProps<'singleSelection'>): import("react").JSX.Element | null;
+export declare namespace CheckIndicator {
+    var displayName: string;
+}
+//# sourceMappingURL=CheckIndicator.d.ts.map

package/dist/Indicator/CheckIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckIndicator.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AA6B5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,iBAAiB,CAAC,sCA6EnC;yBAvFe,cAAc"}