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

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/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAoC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AA4BrD;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAsJD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AA6ED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BA2Pb;yBA9Qe,MAAM"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAoC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAe5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AA4BrD;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AA4HD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AA6ED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BA0Pb;yBA7Qe,MAAM"}

package/dist/Avatar/Avatar.js

@@ -25,6 +25,7 @@ import { AvatarSizeContext } from "./AvatarSizeContext.js";
 import { useAvatarGroup } from "../AvatarGroup/AvatarGroupContext.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { useTooltip } from "../Tooltip/useTooltip.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { useTranslator } from "../i18n/index.js";
@@ -130,11 +131,6 @@ const styles = {
     kVAEAm: "x10l6tqk",
     $$css: true
   },
-  focusable: {
-    kI3sdo: "x17nn4n9",
-    kInvED: "x1wfwxd8 x7s97pk",
-    $$css: true
-  },
   interactive: {
     kysU6D: "xjyslct",
     kmVPX3: "x1717udv",
@@ -147,10 +143,6 @@ const styles = {
     kybGjl: "x1hl2dhg",
     kkrTdU: "x1ypdohk",
     kaIpWk: "xjspbzw",
-    kMeerF: "x1k57tk5 x784prv",
-    k3XXqK: "x1t137rt x9v5kkp",
-    kjBf7l: "xzunyri",
-    kInvED: "x1wfwxd8 x7s97pk",
     $$css: true
   }
 };
@@ -445,7 +437,7 @@ export function Avatar({
   // `<a>`/`<button>` and the static `<div>` carry the exact same box.
   const rootStylexProps = mergeProps(themeProps('avatar', {
     size: resolvedSize
-  }), stylex.props(styles.wrapper, isInteractive && styles.interactive, !isInteractive && showTooltip && !avatarGroup && styles.focusable, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style);
+  }), focusOutlineProps.focusVisible(styles.wrapper, isInteractive && styles.interactive, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style);
   let rootElement;
 
   // `props` is typed for the default `<div>` root (its event handlers are

package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAW5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CA0DtC;yBAnEe,mBAAmB"}
+{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAW5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAoED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CA0DtC;yBAnEe,mBAAmB"}

package/dist/AvatarGroup/AvatarGroupOverflow.js

@@ -19,6 +19,7 @@ import { colorVars, typographyVars, fontWeightVars, radiusVars, spacingVars } fr
 import { mergeProps } from "../utils/index.js";
 import { useAvatarGroup } from "./AvatarGroupContext.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { useTranslator } from "../i18n/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BORDER_WIDTH = 2;
@@ -47,8 +48,6 @@ const styles = {
     kkrTdU: "x1ypdohk",
     k8WAf4: "xt970qd",
     kKwaWg: "x14bno8m xbfmc0r x1nocapi",
-    kI3sdo: "x1a2a7pz x17nn4n9",
-    kInvED: "x7s97pk",
     $$css: true
   },
   overlap: {
@@ -122,7 +121,7 @@ export function AvatarGroupOverflow({
       ...rest,
       "aria-label": label,
       "data-avatar-item": "",
-      ...mergeProps(themeProps('avatar-group-overflow'), stylex.props(styles.base, styles.button, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
+      ...mergeProps(themeProps('avatar-group-overflow'), focusOutlineProps.focusVisible(styles.base, styles.button, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
       children: content
     });
   }

package/dist/Button/Button.d.ts.map

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

package/dist/Button/Button.js

@@ -30,6 +30,7 @@ import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { useTranslator } from "../i18n/index.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
@@ -39,6 +40,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 const styles = {
   base: {
+    "--button-focus-offset": "xkzo27j",
+    kInvED: "x1wfwxd8 x13aywxo",
     kVAEAm: "x1n2onr6",
     k1xSpc: "x3nfvp2",
     kGNEyG: "x6s0dn4",
@@ -178,43 +181,32 @@ const elevationStyles = {
  * Variant styles using backgroundImage for layered colors
  * Pseudo-classes are nested within properties per StyleX recommendation
  * Overlay is stacked on top of base color using multiple linear-gradients
- * Focus outline color matches variant (destructive uses negative color)
+ * Focus outline is shared across variants for consistent keyboard affordance.
  */
 const variants = {
   primary: {
     kWkggS: "x1ewilqj",
     kMwMTN: "x17wrial",
     kKwaWg: "x1ilzqfv xq8i9tn",
-    kI3sdo: "x17nn4n9",
-    "--button-focus-offset": "xkzo27j",
-    kInvED: "x1wfwxd8 x13aywxo",
     $$css: true
   },
   secondary: {
     kWkggS: "x17x4s8c",
     kMwMTN: "x1tgivj0",
     kKwaWg: "x1ilzqfv xq8i9tn",
-    kI3sdo: "x17nn4n9",
-    "--button-focus-offset": "xkzo27j",
-    kInvED: "x1wfwxd8 x13aywxo",
     $$css: true
   },
   ghost: {
     kWkggS: "xjbqb8w",
     kMwMTN: "x1tgivj0",
     kKwaWg: "x1ilzqfv xq8i9tn",
-    kI3sdo: "x17nn4n9",
-    "--button-focus-offset": "xkzo27j",
-    kInvED: "x1wfwxd8 x13aywxo",
     $$css: true
   },
   destructive: {
     kWkggS: "x1pjz0fi",
     kMwMTN: "x1m024r3",
+    kjBf7l: "x1e0x2sz",
     kKwaWg: "x1ilzqfv xq8i9tn",
-    kI3sdo: "x1p73he7",
-    "--button-focus-offset": "xkzo27j",
-    kInvED: "x1wfwxd8 x13aywxo",
     $$css: true
   }
 };
@@ -442,10 +434,14 @@ export function Button({
   } : null;
 
   // Shared StyleX props for both button and link rendering
-  const sharedStylexProps = stylex.props(styles.base, sizeStyles[size], variants[variant], isIconOnly && styles.iconOnly, buttonDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical),
+  const sharedStylexProps = focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isIconOnly && styles.iconOnly, buttonDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical),
   // Standalone floating buttons only — a grouped button's elevation is owned
   // by the ButtonGroup so the shared surface lifts as one unit.
-  !buttonGroup && elevationStyles[elevation], width != null && dynamicStyles.width(width), xstyle);
+  !buttonGroup && elevationStyles[elevation], width != null && dynamicStyles.width(width),
+  // AFTER the shared focus outline: the outline supplies width/style/offset
+  // for every variant, and `destructive` re-colors just the ring to match
+  // its own surface. Ordering is the mechanism — StyleX is last-wins.
+  variants[variant], xstyle);
   const sharedMergedProps = mergeProps(themeProps('button', {
     variant,
     size

package/dist/Calendar/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8C5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAK5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BA+VtD;yBA/Ve,QAAQ"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+C5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAK5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BA+VtD;yBA/Ve,QAAQ"}

package/dist/Calendar/Calendar.js

@@ -25,6 +25,7 @@ import { useCalendarDays, useCalendarConstraints } from "./hooks/index.js";
 import { calendarStyles, monthGridStyles, dayCellStyles, dayCellTheme } from "./styles.js";
 import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
 import { mergeProps, composeEventHandlers, rtlStyles } from "../utils/index.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { computeDayCellState, computeRangeRounding, computePreviewRounding, computeDayNeighborContinuity, isEndpoint } from "./dayCellUtils.js";
 
 // =============================================================================
@@ -768,7 +769,7 @@ function DayCell({
         // `marker` mirrors the StyleX conditions below exactly, preserving
         // the default rendering.
         marker: markerState
-      }), stylex.props(dayCellStyles.day, dayCellTheme.day, isOutside && dayCellStyles.dayOutside, isOutside && dayCellTheme.dayOutside, showsTodayRing && dayCellStyles.dayToday, showsTodayRing && dayCellTheme.dayToday, showsTodayInRangeRing && dayCellStyles.dayTodayInRange, showsTodayInRangeRing && dayCellTheme.dayTodayInRange, endpoint && dayCellStyles.daySelected, endpoint && dayCellTheme.daySelected, state.effectivelyDisabled && dayCellStyles.dayDisabled, state.effectivelyDisabled && dayCellTheme.dayDisabled)),
+      }), focusOutlineProps.focusVisible(dayCellStyles.day, dayCellTheme.day, isOutside && dayCellStyles.dayOutside, isOutside && dayCellTheme.dayOutside, showsTodayRing && dayCellStyles.dayToday, showsTodayRing && dayCellTheme.dayToday, showsTodayInRangeRing && dayCellStyles.dayTodayInRange, showsTodayInRangeRing && dayCellTheme.dayTodayInRange, endpoint && dayCellStyles.daySelected, endpoint && dayCellTheme.daySelected, state.effectivelyDisabled && dayCellStyles.dayDisabled, state.effectivelyDisabled && dayCellTheme.dayDisabled)),
       children: dayNumber
     })]
   });

package/dist/Calendar/styles.d.ts

@@ -198,8 +198,6 @@ export declare const dayCellTheme: Readonly<{
         readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", {
             readonly '@media (hover: hover)': `linear-gradient(${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">}, ${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">})`;
         } | null>;
-        readonly outline: stylex.StyleXClassNameFor<"outline", `2px solid ${stylex.StyleXVar<"light-dark(#0064E0, #2694FE)">}` | null>;
-        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "0" | "2px">;
     }>;
     readonly dayOutside: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#4E606F, #AAAFB5)">;

package/dist/Calendar/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CzB,CAAC;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1B,CAAC;AAMH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GxB,CAAC;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CzB,CAAC;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1B,CAAC;AAMH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GxB,CAAC;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DvB,CAAC"}

package/dist/Calendar/styles.js

@@ -254,8 +254,6 @@ export const dayCellTheme = {
     kMwMTN: "x1tgivj0",
     kWkggS: "xjbqb8w",
     kKwaWg: "x1ilzqfv",
-    kI3sdo: "x17nn4n9",
-    kInvED: "x1wfwxd8 x7s97pk",
     $$css: true
   },
   dayOutside: {

package/dist/Chat/ChatLayoutScrollButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA2DD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,qBA4B7B;yBArCe,sBAAsB"}
+{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA2DD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,qBA6B7B;yBAtCe,sBAAsB"}

package/dist/Chat/ChatLayoutScrollButton.js

@@ -102,6 +102,7 @@ export function ChatLayoutScrollButton({
         }),
         variant: "ghost",
         size: "md",
+        isIconOnly: !label,
         onClick: onClick,
         xstyle: [styles.button, label ? styles.buttonWithLabel : null],
         children: label ?? undefined

package/dist/Chat/ChatToolCalls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatToolCalls.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatToolCalls.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwB5C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6FAA6F;IAC7F,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+BAA+B;IAC/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AA8YD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,4BA0JtD;yBA1Je,aAAa"}
+{"version":3,"file":"ChatToolCalls.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatToolCalls.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwB5C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6FAA6F;IAC7F,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+BAA+B;IAC/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AA0ZD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,4BA0JtD;yBA1Je,aAAa"}

package/dist/Chat/ChatToolCalls.js

@@ -411,7 +411,7 @@ export function ChatToolCalls(props) {
       }[!!isExpanded << 0],
       children: /*#__PURE__*/_jsx("div", {
         ...{
-          className: "xb3r6kr x2lwn1j"
+          className: "xb3r6kr x2lwn1j x7a5moj xtedp8i"
         },
         children: /*#__PURE__*/_jsx("div", {
           ...{

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/ClickableCard/ClickableCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AASxE,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGtE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmG5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,+BA+EpB;yBAlGe,aAAa"}
+{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AASxE,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGtE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6F5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAgFpB;yBAnGe,aAAa"}

package/dist/ClickableCard/ClickableCard.js

@@ -37,6 +37,7 @@ import { Card } from "../Card/Card.js";
 import { useClickableContainer } from "../hooks/useClickableContainer.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 
 // =============================================================================
 // Styles — only the interactive layer, Card handles everything else
@@ -48,12 +49,6 @@ const styles = {
     kkrTdU: "x1ypdohk",
     kybGjl: "x1hl2dhg",
     kMwMTN: "x1heor9g",
-    kInvED: "x1hl8ikr",
-    $$css: true
-  },
-  focusWithin: {
-    kRYL1X: "x1irc7jg",
-    koJ47v: "xdjuwb3",
     $$css: true
   },
   overlay: {
@@ -192,11 +187,8 @@ export function ClickableCard({
     elevation: elevation,
     ...mergeProps(themeProps('clickable-card', {
       variant
-    }), {
-      className: classNameProp,
-      style
-    }),
-    xstyle: [styles.interactive, styles.focusWithin, hasBorder ? styles.bordered : styles.borderless, !isDisabled && styles.overlay, !isDisabled && styles.hoverOnPointer, !isDisabled && hasBorder && styles.borderedHoverOnPointer, isDisabled && styles.disabled, xstyleProp],
+    }), focusOutlineProps.focusWithin(), classNameProp, style),
+    xstyle: [styles.interactive, hasBorder ? styles.bordered : styles.borderless, !isDisabled && styles.overlay, !isDisabled && styles.hoverOnPointer, !isDisabled && hasBorder && styles.borderedHoverOnPointer, isDisabled && styles.disabled, xstyleProp],
     onClick: !isDisabled ? onClick : undefined,
     onMouseUp: !isDisabled ? handleMouseUp : undefined,
     ...props,