@astryxdesign/core 0.3.0-canary.ccb5ca9 → 0.3.0-canary.cd0b9f6

package/dist/AlertDialog/AlertDialog.d.ts

@@ -22,7 +22,8 @@ export interface AlertDialogProps extends BaseProps<HTMLDialogElement> {
     isOpen: boolean;
     /**
      * Renders alert dialog content inline without modal behavior.
-     * For documentation previews and showcases only.
+     * For documentation previews and showcases only. The inline path is not a
+     * modal, so it renders `role="group"` rather than `role="alertdialog"`.
      * @default false
      */
     isInline?: boolean;
@@ -73,9 +74,16 @@ export interface AlertDialogProps extends BaseProps<HTMLDialogElement> {
 /**
  * A confirmation dialog for destructive or irreversible actions.
  *
+ * Implements the WAI-ARIA APG Alert Dialog pattern:
+ * https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+ *
  * Uses `role="alertdialog"` and requires explicit user action to dismiss.
  * Cannot be dismissed by clicking outside. Escape key triggers cancel.
- * Initial focus goes to the cancel button (least destructive action).
+ * Initial focus goes to the cancel button (least destructive action), pinned
+ * with `data-autofocus` so it survives any change to the footer's order.
+ *
+ * The `isInline` preview path is not modal, so it renders `role="group"`
+ * instead — the alertdialog role would promise modality it does not have.
  *
  * @example
  * ```

package/dist/AlertDialog/AlertDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAW,EAAE,oBAAoB,EACjC,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAwDlB;yBA1Ee,WAAW"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAW,EAAE,oBAAoB,EACjC,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAkElB;yBApFe,WAAW"}

package/dist/AlertDialog/AlertDialog.js

@@ -31,9 +31,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A confirmation dialog for destructive or irreversible actions.
  *
+ * Implements the WAI-ARIA APG Alert Dialog pattern:
+ * https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+ *
  * Uses `role="alertdialog"` and requires explicit user action to dismiss.
  * Cannot be dismissed by clicking outside. Escape key triggers cancel.
- * Initial focus goes to the cancel button (least destructive action).
+ * Initial focus goes to the cancel button (least destructive action), pinned
+ * with `data-autofocus` so it survives any change to the footer's order.
+ *
+ * The `isInline` preview path is not modal, so it renders `role="group"`
+ * instead — the alertdialog role would promise modality it does not have.
  *
  * @example
  * ```
@@ -80,8 +87,14 @@ export function AlertDialog({
     isInline: isInline,
     onOpenChange: onOpenChange,
     width: width,
-    purpose: "form",
-    role: "alertdialog",
+    purpose: "form"
+    // `alertdialog` is a modal role: it promises an interruption the user
+    // has to deal with, a focus trap, and an inert page behind it. The
+    // inline path renders a plain always-present div with none of that, so
+    // the role would misdescribe it. `group` keeps the title and
+    // description associated with a container without claiming a dialog.
+    ,
+    role: isInline ? 'group' : 'alertdialog',
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId,
     ...mergeProps(themeProps('alert-dialog'), {
@@ -111,6 +124,12 @@ export function AlertDialog({
             variant: "ghost",
             label: cancelLabel,
             onClick: handleCancel
+            // Dialog focuses [data-autofocus] itself after showModal(),
+            // because React's autoFocus runs during commit while the
+            // dialog is still invisible. Cancel is the least destructive
+            // choice, so it is the one that should be preselected.
+            ,
+            "data-autofocus": true
           }), /*#__PURE__*/_jsx(Button, {
             variant: actionVariant,
             label: actionLabel,

package/dist/CheckboxInput/CheckboxInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA6JhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAmCH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,kBAAkB,+BA0NpB;yBAnPe,aAAa"}
+{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA0DhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAkMpB;yBA3Ne,aAAa"}

package/dist/CheckboxInput/CheckboxInput.js

@@ -15,20 +15,21 @@
  * - /apps/storybook/stories/CheckboxInput.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/CheckboxInput/ (showcase blocks)
  */
-import { useId, useCallback, use, useOptimistic, useTransition } from 'react';
+import { useId, useCallback, use, useOptimistic, useRef, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, typeScaleVars, fontWeightVars, borderVars } from "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, typographyVars, typeScaleVars, fontWeightVars } from "../theme/tokens.stylex.js";
 import { FieldLabel } from "../Field/FieldLabel.js";
 import { FieldStatus } from "../FieldStatus/FieldStatus.js";
 import { Spinner } from "../Spinner/index.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
-import "./checkbox.markers.stylex.js";
-import { checkboxScope } from "./checkbox.markers.stylex.js";
+import { indicatorScope } from "../Indicator/indicator.markers.stylex.js";
+import { useIndicatorFocusRing } from "../hooks/useIndicatorFocusRing.js";
+import { useIndicator } from "../Indicator/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { CheckboxListContext } from "../CheckboxList/CheckboxListContext.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   container: {
     k1xSpc: "x78zum5",
@@ -61,63 +62,6 @@ const styles = {
   inputDisabled: {
     kkrTdU: "x1h6gzvc",
     $$css: true
-  },
-  checkbox: {
-    k1xSpc: "x78zum5",
-    kGNEyG: "x6s0dn4",
-    kjj79g: "xl56j7k",
-    kMzoRj: "x1litavf",
-    ksu8eU: "x1y0btm7",
-    kaIpWk: "xx3sua9",
-    k1ekBW: "xts7igz",
-    kIyJzY: "xuedmi6 x12w9bfk",
-    kAMwcw: "xlr8y92",
-    $$css: true
-  },
-  checkboxFocus: {
-    kI3sdo: "x1a2a7pz xkri23q",
-    kInvED: "x81n7kt",
-    $$css: true
-  },
-  checkboxUnchecked: {
-    kMwMTN: "xqwr325",
-    kVAM5u: "xvy26l8 x1jtjlen",
-    kWkggS: "x10xzikg xrsv7h",
-    $$css: true
-  },
-  checkboxChecked: {
-    kMwMTN: "x17wrial",
-    kVAM5u: "xad5do x1od6ugu",
-    kWkggS: "x1ewilqj x6aeo4j",
-    $$css: true
-  },
-  checkboxDisabled: {
-    kSiTet: "xbyyjgo",
-    kVAM5u: "x14i3s5s xmt8yqp",
-    $$css: true
-  },
-  checkboxDisabledUnchecked: {
-    kWkggS: "xwmxj5m x1cjfj8k",
-    $$css: true
-  },
-  checkmark: {
-    k1xSpc: "x1s85apg",
-    kMwMTN: "x17wrial xs5hli",
-    $$css: true
-  },
-  checkmarkVisible: {
-    k1xSpc: "x1lliihq",
-    $$css: true
-  },
-  indeterminateMark: {
-    k1xSpc: "x1s85apg",
-    kWkggS: "x1azo05 xwvh9j7",
-    kaIpWk: "xjspbzw",
-    $$css: true
-  },
-  indeterminateMarkVisible: {
-    k1xSpc: "x1lliihq",
-    $$css: true
   }
 };
 const wrapperSizeStyles = {
@@ -132,42 +76,6 @@ const wrapperSizeStyles = {
     $$css: true
   }
 };
-const checkboxSizeStyles = {
-  sm: {
-    kzqmXN: "xw4jnvo",
-    kZKoxP: "x1qx5ct2",
-    $$css: true
-  },
-  md: {
-    kzqmXN: "xvy4d1p",
-    kZKoxP: "xxk0z11",
-    $$css: true
-  }
-};
-const checkmarkSizeStyles = {
-  sm: {
-    kzqmXN: "xsmyaan",
-    kZKoxP: "x1kpxq89",
-    $$css: true
-  },
-  md: {
-    kzqmXN: "x6jxa94",
-    kZKoxP: "x1v9usgg",
-    $$css: true
-  }
-};
-const indeterminateSizeStyles = {
-  sm: {
-    kzqmXN: "x1fsd2vl",
-    kZKoxP: "x36qwtl",
-    $$css: true
-  },
-  md: {
-    kzqmXN: "xsmyaan",
-    kZKoxP: "x36qwtl",
-    $$css: true
-  }
-};
 // Dynamic field width (number -> px, string used as-is).
 const dynamicWidthStyles = {
   width: width => [{
@@ -248,9 +156,19 @@ export function CheckboxInput({
     focusTrigger: 'always',
     isEnabled: showsDisabledMessage
   });
+
+  // The checkbox visual is an indicator: a theme can restyle it through the
+  // `checkbox` target or replace the component outright.
+  const CheckboxControl = useIndicator('checkbox');
+  // The ring is drawn on the indicator itself: the native input is
+  // `opacity: 0`, and only the indicator's own element can shape the outline
+  // to match it. See useIndicatorFocusRing.
+  const indicatorRef = useRef(null);
+  const {
+    focusProps
+  } = useIndicatorFocusRing(indicatorRef, isDisabled);
   const isIndeterminate = optimisticValue === 'indeterminate';
   const isChecked = optimisticValue === true;
-  const isCheckedOrIndeterminate = isChecked || isIndeterminate;
 
   // Sync the native indeterminate DOM property (can't be set via JSX
   // attribute). On a native checkbox this is the authoritative way to expose
@@ -291,9 +209,13 @@ export function CheckboxInput({
         // unconditionally is safe.
         disabledMessageTooltip.interactionRef(el);
       },
-      ...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden, !isDisabled && checkboxScope),
+      ...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden,
+      // Hover and focus reach the checkbox visual through this ancestor
+      // marker rather than props, so the whole row drives it.
+      !isDisabled && indicatorScope),
       children: [/*#__PURE__*/_jsxs("div", {
         ...stylex.props(styles.checkboxWrapper, wrapperSizeStyles[size]),
+        ...focusProps,
         children: [/*#__PURE__*/_jsx("input", {
           ...rest,
           ref: mergeRefs(ref, indeterminateRef, disabledMessageTooltip.positionRef),
@@ -333,31 +255,19 @@ export function CheckboxInput({
           "aria-invalid": status?.type === 'error' ? true : undefined,
           "aria-busy": isBusy || undefined,
           ...stylex.props(styles.input, wrapperSizeStyles[size], isDisabled && styles.inputDisabled)
-        }), /*#__PURE__*/_jsx("div", {
-          "aria-hidden": "true",
-          ...mergeProps(themeProps('checkbox', {
-            size,
-            checked: isChecked ? 'checked' : isIndeterminate ? 'indeterminate' : null,
-            disabled: isDisabled ? 'disabled' : null
-          }), stylex.props(styles.checkbox, checkboxSizeStyles[size], !isDisabled && styles.checkboxFocus, isCheckedOrIndeterminate ? styles.checkboxChecked : styles.checkboxUnchecked, isDisabled && styles.checkboxDisabled, isDisabled && !isCheckedOrIndeterminate && styles.checkboxDisabledUnchecked)),
-          children: isBusy ? /*#__PURE__*/_jsx(Spinner, {
-            size: "sm",
-            shade: "inherit"
-          }) : /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx("svg", {
-              viewBox: "0 0 10 10",
-              ...stylex.props(styles.checkmark, checkmarkSizeStyles[size], isChecked && styles.checkmarkVisible),
-              children: /*#__PURE__*/_jsx("path", {
-                d: "M8.5 2.5L4 7.5L1.5 5",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                fill: "none",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              })
-            }), /*#__PURE__*/_jsx("div", {
-              ...stylex.props(styles.indeterminateMark, indeterminateSizeStyles[size], isIndeterminate && styles.indeterminateMarkVisible)
-            })]
+        }), /*#__PURE__*/_jsx("span", {
+          ref: indicatorRef,
+          ...{
+            className: "xjp7ctv"
+          },
+          children: /*#__PURE__*/_jsx(CheckboxControl, {
+            state: isIndeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked',
+            size: size,
+            isDisabled: isDisabled,
+            children: isBusy ? /*#__PURE__*/_jsx(Spinner, {
+              size: "sm",
+              shade: "inherit"
+            }) : null
           })
         })]
       }), /*#__PURE__*/_jsx("div", {

package/dist/CodeBlock/CodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4B5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAmXxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAqPD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBA2OhB;yBAnQe,SAAS"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAwWxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAqPD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBAsNhB;yBA9Oe,SAAS"}

package/dist/CodeBlock/CodeBlock.js

@@ -14,8 +14,9 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typographyVars, fontWeightVars, typeScaleVars, borderVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { useAnnounce } from "../hooks/useAnnounce.js";
+import { useClipboard } from "../hooks/useClipboard.js";
 import { Icon } from "../Icon/index.js";
+import { IconButton } from "../IconButton/index.js";
 import { tokenize, tokenizeAsync, flatTokensToLines, SYNC_TOKENIZE_THRESHOLD } from "./tokenizer.js";
 import { ensureHighlightStyles } from "./highlightStyles.js";
 import { applyHighlightRangesChunked } from "./highlightRanges.js";
@@ -148,6 +149,16 @@ const styles = {
   sizeMd: {
     kGuDYH: "xp03k98",
     $$css: true
+  },
+  copyButton: {
+    kMwMTN: "x1mjzq1q",
+    $$css: true
+  },
+  copyButtonAbsolute: {
+    kVAEAm: "x10l6tqk",
+    k87sOh: "xctzyg",
+    kt4wiu: "x72tfeb",
+    $$css: true
   }
 };
 
@@ -437,18 +448,15 @@ export function CodeBlock({
   ...props
 }) {
   const t = useTranslator();
-  const [copied, setCopied] = useState(false);
-  const copyResetTimerRef = useRef(null);
-  const announce = useAnnounce();
-
-  // Clear a pending "copied" reset when the block unmounts.
-  useEffect(() => {
-    return () => {
-      if (copyResetTimerRef.current != null) {
-        clearTimeout(copyResetTimerRef.current);
-      }
-    };
-  }, []);
+  // Owns the clipboard write, the transient copied flag, its reset timer, and
+  // the polite copy announcement (a swapped aria-label alone is not reliably
+  // announced) — shared with Timestamp via the same hook.
+  const {
+    copy,
+    isCopied: copied
+  } = useClipboard({
+    announce: t('@astryx.codeBlock.copied')
+  });
   const useSpans = highlightMode === 'spans' || highlightMode === 'auto' && !hasHighlightAPI() || highlightMode === 'auto' && isSafari();
   const lines = useMemo(() => {
     const l = code.split('\n');
@@ -460,26 +468,11 @@ export function CodeBlock({
   const tokenLines = useTokenLines(code, language, customTokenizer);
   const highlightSet = useMemo(() => highlightLines ? new Set(highlightLines) : null, [highlightLines]);
   const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(code);
-      setCopied(true);
-      // Swapping the button's aria-label alone isn't reliably announced by
-      // screen readers, so confirm the copy via a polite live region.
-      announce(t('@astryx.codeBlock.copied'));
+    const didCopy = await copy(code);
+    if (didCopy) {
       onCopy?.();
-      // Restart the reset timer on every copy — otherwise a rapid re-copy
-      // is reverted early by the previous click's timer.
-      if (copyResetTimerRef.current != null) {
-        clearTimeout(copyResetTimerRef.current);
-      }
-      copyResetTimerRef.current = setTimeout(() => {
-        copyResetTimerRef.current = null;
-        setCopied(false);
-      }, 2000);
-    } catch {
-      // Clipboard failures leave the copied state unchanged.
     }
-  }, [code, onCopy, announce, t]);
+  }, [code, copy, onCopy]);
   const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
   // Digits in the largest line number — sizes the gutter column width.
   const maxLineDigits = String(lines.length).length;
@@ -496,28 +489,28 @@ export function CodeBlock({
   const scrollStyle = maxHeight ? {
     maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
   } : undefined;
-  const copyIcon = /*#__PURE__*/_jsx(Icon, {
-    icon: copied ? 'check' : 'copy',
+  const copyButtonEl = hasCopyButton ? /*#__PURE__*/_jsx(IconButton, {
+    variant: "ghost",
     size: "sm",
-    color: "inherit"
-  });
-  const copyButtonEl = hasCopyButton ? /*#__PURE__*/_jsx("button", {
-    type: "button",
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: copied ? 'check' : 'copy',
+      size: "sm",
+      color: "inherit"
+    })
+    // A visible "Copy" hover/focus hint via Button's built-in tooltip. It
+    // stays "Copy" after copying — the copy → check icon flip is the
+    // confirmation, not a tooltip change. The aria-label still swaps to the
+    // localized "Copied" for assistive tech, backed by the announcement.
+    ,
+    tooltip: t('@astryx.codeBlock.copyCode'),
+    label: copied ? t('@astryx.codeBlock.copied') : t('@astryx.codeBlock.copyCode'),
     onClick: e => {
       // Stop propagation so copying does not toggle the collapsible header.
       e.stopPropagation();
       void handleCopy();
     },
-    "aria-label": copied ? t('@astryx.codeBlock.copied') : t('@astryx.codeBlock.copyCode'),
-    ...{
-      0: {
-        className: "x3nfvp2 x6s0dn4 xl56j7k x9epnlk x3kzqx6 xx3sua9 xjbqb8w xe9uy6x x1mjzq1q x1ypdohk x14ju556"
-      },
-      1: {
-        className: "x3nfvp2 x6s0dn4 xl56j7k x9epnlk x3kzqx6 xx3sua9 xjbqb8w xe9uy6x x1mjzq1q x1ypdohk x14ju556 x10l6tqk xctzyg x72tfeb"
-      }
-    }[!!!showHeader << 0],
-    children: copyIcon
+    xstyle: [styles.copyButton, !showHeader && styles.copyButtonAbsolute],
+    ...themeProps('codeblock-copy-button')
   }) : null;
   const headerEl = showHeader ? /*#__PURE__*/_jsxs("div", {
     ...{

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"}