@astryxdesign/core 0.1.9-canary.d2d84f8 → 0.1.9-canary.e00a241

package/dist/DropdownMenu/menuItemHover.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file menuItemHover.ts
+ * @output Exports focusMenuItemOnHover
+ * @position Shared helper for DropdownMenu/ContextMenu item components
+ *
+ * Menus keep a single highlighted item by using DOM focus as the sole
+ * highlight source. Mouse hover moves focus onto the pointed-at item so the
+ * one focus highlight follows the pointer — instead of a separate `:hover`
+ * background leaving the keyboard-focused item highlighted at the same time.
+ *
+ * SYNC: When modified, update the item components that use it:
+ * - /packages/core/src/DropdownMenu/DropdownMenuItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuCheckboxItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuRadioItem.tsx
+ */
+import type { PointerEvent } from 'react';
+/**
+ * Move focus to a menu item as the pointer moves over it, so hover and
+ * keyboard navigation share a single focus-driven highlight. Only reacts to a
+ * real mouse (not touch/pen, which have no hover), and skips disabled items.
+ */
+export declare function focusMenuItemOnHover(e: PointerEvent<HTMLElement>, isDisabled?: boolean): void;
+//# sourceMappingURL=menuItemHover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menuItemHover.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/menuItemHover.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAExC;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,EAC5B,UAAU,CAAC,EAAE,OAAO,GACnB,IAAI,CAQN"}

package/dist/DropdownMenu/menuItemHover.js

@@ -0,0 +1,33 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file menuItemHover.ts
+ * @output Exports focusMenuItemOnHover
+ * @position Shared helper for DropdownMenu/ContextMenu item components
+ *
+ * Menus keep a single highlighted item by using DOM focus as the sole
+ * highlight source. Mouse hover moves focus onto the pointed-at item so the
+ * one focus highlight follows the pointer — instead of a separate `:hover`
+ * background leaving the keyboard-focused item highlighted at the same time.
+ *
+ * SYNC: When modified, update the item components that use it:
+ * - /packages/core/src/DropdownMenu/DropdownMenuItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuCheckboxItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuRadioItem.tsx
+ */
+/**
+ * Move focus to a menu item as the pointer moves over it, so hover and
+ * keyboard navigation share a single focus-driven highlight. Only reacts to a
+ * real mouse (not touch/pen, which have no hover), and skips disabled items.
+ */
+export function focusMenuItemOnHover(e, isDisabled) {
+  if (isDisabled || e.pointerType !== 'mouse') {
+    return;
+  }
+  const el = e.currentTarget;
+  if (el !== el.ownerDocument.activeElement) {
+    el.focus();
+  }
+}

package/dist/DropdownMenu/menuItemRoles.d.ts

@@ -10,4 +10,12 @@
  */
 export declare const MENU_ITEM_ROLES: ReadonlySet<string>;
 export declare const MENU_ITEM_SELECTOR: string;
+/**
+ * Boundary selector for a single menu level. A menu and its submenu flyouts
+ * both use `role="menu"`, and flyouts render inline (native popover, not a
+ * portal), so a nested menu's items and key events would otherwise be picked
+ * up by the parent. Pass this as `useListFocus`'s `boundarySelector` so each
+ * level scopes item collection and key handling to its own container.
+ */
+export declare const MENU_BOUNDARY_SELECTOR = "[role=\"menu\"]";
 //# sourceMappingURL=menuItemRoles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"menuItemRoles.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/menuItemRoles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,eAAO,MAAM,eAAe,EAAE,WAAW,CAAC,MAAM,CAI9C,CAAC;AAEH,eAAO,MAAM,kBAAkB,EAAE,MAErB,CAAC"}
+{"version":3,"file":"menuItemRoles.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/menuItemRoles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,eAAO,MAAM,eAAe,EAAE,WAAW,CAAC,MAAM,CAI9C,CAAC;AAEH,eAAO,MAAM,kBAAkB,EAAE,MAErB,CAAC;AAEb;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,oBAAkB,CAAC"}

package/dist/DropdownMenu/menuItemRoles.js

@@ -12,4 +12,13 @@
  */
 
 export const MENU_ITEM_ROLES = new Set(['menuitem', 'menuitemradio', 'menuitemcheckbox']);
-export const MENU_ITEM_SELECTOR = [...MENU_ITEM_ROLES].map(role => `[role="${role}"]:not([aria-disabled="true"])`).join(',');
+export const MENU_ITEM_SELECTOR = [...MENU_ITEM_ROLES].map(role => `[role="${role}"]:not([aria-disabled="true"])`).join(',');
+
+/**
+ * Boundary selector for a single menu level. A menu and its submenu flyouts
+ * both use `role="menu"`, and flyouts render inline (native popover, not a
+ * portal), so a nested menu's items and key events would otherwise be picked
+ * up by the parent. Pass this as `useListFocus`'s `boundarySelector` so each
+ * level scopes item collection and key handling to its own container.
+ */
+export const MENU_BOUNDARY_SELECTOR = '[role="menu"]';

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

@@ -1 +1 @@
-{"version":3,"file":"renderDropdownItems.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/renderDropdownItems.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAUrC,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AAyBxB;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,kBAAkB,EAAE,GAC1B,SAAS,CA8CX"}
+{"version":3,"file":"renderDropdownItems.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/renderDropdownItems.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAWrC,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AAyBxB;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,kBAAkB,EAAE,GAAG,SAAS,CA6D1E"}

package/dist/DropdownMenu/renderDropdownItems.js

@@ -9,6 +9,7 @@
 import * as stylex from '@stylexjs/stylex';
 import { Divider } from "../Divider/index.js";
 import { DropdownMenuItem } from "./DropdownMenuItem.js";
+import { DropdownMenuSubMenu } from "./DropdownMenuSubMenu.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars, typographyVars, typeScaleVars, colorVars } from "../theme/tokens.stylex.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -55,12 +56,26 @@ export function renderDropdownItems(items) {
         }, getItemKey(item)))]
       }, getSectionKey(option, i)));
     } else if (!('type' in option)) {
-      elements.push(/*#__PURE__*/_jsx(DropdownMenuItem, {
-        icon: option.icon,
-        label: option.label,
-        onClick: option.onClick,
-        isDisabled: option.isDisabled
-      }, getItemKey(option)));
+      // A plain item that declares nested `items` becomes a submenu (data-mode
+      // parity with the compound DropdownMenuSubMenu API); otherwise it's a
+      // leaf. renderDropdownItems owns the recursion and hands the rendered
+      // children to DropdownMenuSubMenu — so DropdownMenuSubMenu never imports
+      // this module back (no import cycle).
+      if (option.items && option.items.length > 0) {
+        elements.push(/*#__PURE__*/_jsx(DropdownMenuSubMenu, {
+          icon: option.icon,
+          label: option.label,
+          isDisabled: option.isDisabled,
+          children: renderDropdownItems(option.items)
+        }, getItemKey(option)));
+      } else {
+        elements.push(/*#__PURE__*/_jsx(DropdownMenuItem, {
+          icon: option.icon,
+          label: option.label,
+          onClick: option.onClick,
+          isDisabled: option.isDisabled
+        }, getItemKey(option)));
+      }
     }
   }
   return elements;

package/dist/Field/Field.d.ts

@@ -14,6 +14,7 @@
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 import type { SizeValue } from '../utils/types';
+import type { FieldStatusVariant } from '../FieldStatus/FieldStatus';
 import type { IconType } from '../Icon';
 export type { SizeValue } from '../utils/types';
 export type FieldStatusType = 'warning' | 'error' | 'success';
@@ -105,9 +106,10 @@ export interface FieldProps extends Omit<BaseProps<HTMLDivElement>, 'children'>
      * How the status message is rendered relative to the input.
      * - 'attached': Status sits directly below the input (default, for bordered inputs)
      * - 'detached': Status is a separate element below the field (for checkboxes, switches, sliders)
+     * - 'tooltip': No message box; the input surfaces status through a tooltip on its on-field icon
      * @default 'attached'
      */
-    statusVariant?: 'attached' | 'detached';
+    statusVariant?: FieldStatusVariant;
     /**
      * Width of the field. Numbers are treated as pixels, strings are used as-is
      * (e.g. `'100%'`). Sizes the whole field — label, control, and status — so

package/dist/Field/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAqCtC,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACxC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAa,EACb,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,MAAM,EACN,YAAY,EACZ,aAA0B,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BAqGZ;yBA3He,KAAK"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAC;AAEnE,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAqCtC,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAa,EACb,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,MAAM,EACN,YAAY,EACZ,aAA0B,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BAwGZ;yBA9He,KAAK"}

package/dist/Field/Field.js

@@ -109,7 +109,10 @@ export function Field({
     description: isHorizontalLabels ? undefined : description,
     descriptionID: isHorizontalLabels ? undefined : resolvedDescriptionID
   });
-  const statusNode = status?.message ? /*#__PURE__*/_jsx(FieldStatus, {
+
+  // The 'tooltip' variant surfaces status through the input's on-field icon
+  // tooltip, so Field renders no message box for it.
+  const statusNode = status?.message && statusVariant !== 'tooltip' ? /*#__PURE__*/_jsx(FieldStatus, {
     type: status.type,
     message: status.message,
     id: resolvedMessageID,

package/dist/Field/inputStyles.stylex.d.ts

@@ -44,6 +44,7 @@ export declare const inputWrapperStyles: Readonly<{
         readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
         readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.5>;
         readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#CCD3DB, #494D53)">;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none">;
     }>;
 }>;
 /**

package/dist/Field/inputStyles.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputStyles.stylex.d.ts","sourceRoot":"","sources":["../../src/Field/inputStyles.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAW3C;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;EAUlC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;EAyBvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;EAmBvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;EAmBjC,CAAC"}
+{"version":3,"file":"inputStyles.stylex.d.ts","sourceRoot":"","sources":["../../src/Field/inputStyles.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAW3C;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyC7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;EAUlC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;EAyBvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;EAmBvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;EAmBjC,CAAC"}

package/dist/Field/inputStyles.stylex.js

@@ -49,6 +49,7 @@ export const inputWrapperStyles = {
     kkrTdU: "x1h6gzvc",
     kSiTet: "xbyyjgo",
     kVAM5u: "xvy26l8",
+    kGVxlE: "x1gnnqk1",
     $$css: true
   }
 };

package/dist/FieldStatus/FieldStatus.d.ts

@@ -17,6 +17,7 @@ import type { InputStatusType } from '../Field/types';
 export interface FieldStatusVariantMap {
     attached: true;
     detached: true;
+    tooltip: true;
 }
 /**
  * FieldStatus variant type. Extensible via module augmentation of FieldStatusVariantMap.
@@ -48,7 +49,9 @@ export interface FieldStatusProps extends BaseProps<HTMLDivElement> {
  * decorative for assistive tech (`aria-hidden`): the message text already names
  * the status in words and is announced through the live region. The `attached`
  * variant keeps its status affordance on the bordered input, so it renders no
- * icon here to avoid a duplicate.
+ * icon here to avoid a duplicate. The `tooltip` variant renders no message box
+ * at all — the input surfaces the status through a tooltip on its on-field
+ * icon — so callers skip rendering FieldStatus for it.
  *
  * Screen-reader announcements go through the persistent `useAnnounce` live
  * regions (assertive for errors, polite otherwise) rather than `role`/

package/dist/FieldStatus/FieldStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldStatus.d.ts","sourceRoot":"","sources":["../../src/FieldStatus/FieldStatus.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAiEpD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,IAAI,CAAC;IACf,QAAQ,EAAE,IAAI,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAI,EACJ,OAAO,EACP,EAAE,EACF,OAAoB,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,qBA2ClB;yBArDe,WAAW"}
+{"version":3,"file":"FieldStatus.d.ts","sourceRoot":"","sources":["../../src/FieldStatus/FieldStatus.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAoEpD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,IAAI,CAAC;IACf,QAAQ,EAAE,IAAI,CAAC;IACf,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAI,EACJ,OAAO,EACP,EAAE,EACF,OAAoB,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,qBA2ClB;yBArDe,WAAW"}

package/dist/FieldStatus/FieldStatus.js

@@ -104,7 +104,9 @@ const colorStyles = {
  * decorative for assistive tech (`aria-hidden`): the message text already names
  * the status in words and is announced through the live region. The `attached`
  * variant keeps its status affordance on the bordered input, so it renders no
- * icon here to avoid a duplicate.
+ * icon here to avoid a duplicate. The `tooltip` variant renders no message box
+ * at all — the input surfaces the status through a tooltip on its on-field
+ * icon — so callers skip rendering FieldStatus for it.
  *
  * Screen-reader announcements go through the persistent `useAnnounce` live
  * regions (assertive for errors, polite otherwise) rather than `role`/
@@ -164,7 +166,7 @@ export function FieldStatus({
       },
       children: [/*#__PURE__*/_jsx("span", {
         ...{
-          className: "x1ltkj2j x2lah0s"
+          className: "x3nfvp2 x6s0dn4 x14o5nre x2lah0s"
         },
         children: /*#__PURE__*/_jsx(Icon, {
           icon: statusIconMap[type],

package/dist/FileInput/FileInput.d.ts

@@ -90,6 +90,7 @@ export interface FileInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
      * How the status message is placed relative to the input.
      * - 'attached': message overlaps directly below the input (bordered treatment)
      * - 'detached': message floats below as a separate element with spacing
+     * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
      * @default 'attached'
      */
     statusVariant?: FieldStatusVariant;

package/dist/FileInput/FileInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAEhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAMlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA0N9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,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,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAkYhB;yBA7Ze,SAAS"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA+M9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,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,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BA2ZhB;yBAtbe,SAAS"}

package/dist/FileInput/FileInput.js

@@ -4,7 +4,7 @@
 
 /**
  * @file FileInput.tsx
- * @input Uses React, useId, Field, Icon, Spinner
+ * @input Uses React, useId, Field, Icon, Spinner, VisuallyHidden
  * @output Exports FileInput component, FileInputProps, FileInputStatus
  * @position Core implementation; consumed by index.ts, tested by FileInput.test.tsx
  *
@@ -22,7 +22,10 @@ import { colorVars, sizeVars, spacingVars, radiusVars, typographyVars, typeScale
 import { Field, InputClearButton } from "../Field/index.js";
 import { Icon } from "../Icon/index.js";
 import { Spinner } from "../Spinner/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
+import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
+import { useClickableContainer } from "../hooks/useClickableContainer.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -199,22 +202,24 @@ export function FileInput({
   const id = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
-  const liveRegionID = useId();
+  const requiredID = useId();
   const inputRef = useRef(null);
+  const containerRef = useRef(null);
   const [isDragOver, setIsDragOver] = useState(false);
   const [validationError, setValidationError] = useState(null);
   const [, startTransition] = useTransition();
 
   // Announce successful file selection to screen readers via a persistent
-  // live region (forms-17). The component's own role="status" region only
-  // carries validation errors, so a successful attach was previously silent.
+  // live region (forms-17). Validation errors are announced (assertively) by
+  // the FieldStatus that the derived error status mounts, so only the
+  // successful attach needs an explicit announcement here.
   const announce = useAnnounce();
 
   // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
-  // tooltip listeners attach to the role="button" trigger (which already
-  // exists) and the trigger stays perceivable via aria-disabled instead of the
-  // native disabled attribute. Opening the picker is blocked by the isDisabled
-  // guards in handleClick / handleKeyDown / handleFiles.
+  // tooltip listeners attach to the visible container (which stays hoverable)
+  // and the trigger stays perceivable via aria-disabled instead of the native
+  // disabled attribute. Opening the picker is blocked by the isDisabled guards
+  // in the handlers.
   const showsDisabledMessage = isDisabled && !!disabledMessage;
   const disabledMessageTooltip = useTooltip({
     placement: 'above',
@@ -225,17 +230,24 @@ export function FileInput({
     type: 'error',
     message: validationError
   } : undefined);
-  const statusIconMap = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success'
-  };
-  const statusIconColorMap = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success'
-  };
-  const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
+  const {
+    statusIcon,
+    describedBy: statusTooltipDescribedBy
+  } = useInputStatusIcon({
+    status,
+    statusVariant
+  });
+
+  // Required state. The trigger is a real button, but AT does not reliably
+  // announce aria-required, so the trigger instead points its aria-describedby
+  // at a visually hidden "Required" span — mirroring the Field label's visible
+  // indicator (where isOptional takes precedence) and the pattern Slider uses
+  // for its thumbs.
+  const conveysRequired = isRequired && !isOptional;
+  const ariaDescribedBy = [description ? descriptionID : null, statusVariant !== 'tooltip' && status?.message ? statusMessageID : null,
+  // The tooltip variant renders no message box; describe the input by the
+  // tooltip's content instead so the status is still announced.
+  statusTooltipDescribedBy, conveysRequired ? requiredID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
   const defaultPlaceholder = isMultiple ? 'Choose files' : 'Choose file';
   const displayPlaceholder = placeholder ?? defaultPlaceholder;
   const handleFiles = useCallback(fileList => {
@@ -259,8 +271,9 @@ export function FileInput({
     onChange(result);
 
     // Announce the successful selection politely. Validation errors are
-    // handled by the role="status" region below, so only announce the
-    // attach here (do not double-announce errors).
+    // announced assertively by the FieldStatus that the derived error
+    // status mounts, so only announce the attach here (do not
+    // double-announce errors).
     if (errors.length === 0) {
       announce(valid.length === 1 ? `1 file selected: ${valid[0].name}` : `${valid.length} files selected`);
     }
@@ -291,12 +304,28 @@ export function FileInput({
       inputRef.current?.click();
     }
   }, [isDisabled]);
+
+  // Explicit keyboard activation so Enter/Space open the picker even where a
+  // synthetic keydown does not raise a native click. The isDisabled guard
+  // blocks activation while focusable-disabled.
   const handleKeyDown = useCallback(e => {
     if ((e.key === 'Enter' || e.key === ' ') && !isDisabled) {
       e.preventDefault();
       inputRef.current?.click();
     }
   }, [isDisabled]);
+
+  // Make the surface clickable without giving it an interactive role. Clicks on
+  // the nested clear/status controls are ignored by the hook, so those buttons
+  // are plain siblings — no nested-interactive violation.
+  const {
+    onClick: onContainerClick,
+    onMouseUp: onContainerMouseUp
+  } = useClickableContainer({
+    containerRef,
+    onClick: handleClick,
+    disabled: isDisabled
+  });
   const handleDragEnter = useCallback(e => {
     e.preventDefault();
     e.stopPropagation();
@@ -397,11 +426,7 @@ export function FileInput({
           }
         }[!!hasFiles << 1 | !!hasFiles << 0],
         children: fileNames ?? displayPlaceholder
-      }), status && /*#__PURE__*/_jsx(Icon, {
-        icon: statusIconMap[status.type],
-        size: "md",
-        color: statusIconColorMap[status.type]
-      })]
+      }), statusIcon]
     });
   };
   const isDropzone = mode === 'dropzone';
@@ -430,43 +455,49 @@ export function FileInput({
     width: width,
     children: [/*#__PURE__*/_jsxs("div", {
       ref: el => {
-        // Anchor + hover/focus listeners for the disabled-message tooltip.
-        // Handlers are gated internally by isEnabled, and anchor names
-        // compose, so attaching unconditionally is safe.
+        containerRef.current = el;
+        // Anchor + hover/focus listeners for the disabled-message tooltip on
+        // the visible container (the focusable trigger is visually hidden, so
+        // anchoring there would place the tooltip at a 1px box). focusin
+        // bubbles from the trigger button, so the tooltip still opens on
+        // keyboard focus. Handlers are gated internally by isEnabled.
         disabledMessageTooltip.ref(el);
       },
-      role: "button"
-      // With a disabledMessage the trigger keeps focusability via
-      // aria-disabled so the reason is focus-discoverable; opening the picker
-      // is still blocked by the isDisabled guards in the handlers.
-      ,
-      tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
-      "aria-disabled": showsDisabledMessage ? 'true' : undefined,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown
-      // aria-label suppresses child content from the accessible name, so
-      // compose the selected filenames into it — otherwise a screen-reader
-      // user refocusing the control hears only the field label and cannot
-      // tell what (if anything) is attached.
-      ,
-      "aria-label": hasFiles && fileNames ? t('@astryx.fileInput.triggerWithFiles', {
-        label,
-        fileNames
-      }) : label,
-      "aria-busy": isLoading || undefined
-      // These describe the operable control, so they belong on the focusable
-      // role="button" wrapper — not the hidden tabIndex={-1} file input the
-      // user never focuses (forms-6).
-      ,
-      "aria-describedby": ariaDescribedBy,
-      "aria-required": isRequired ? 'true' : undefined,
-      "aria-invalid": status?.type === 'error' ? 'true' : undefined,
+      onClick: !isDisabled ? onContainerClick : undefined,
+      onMouseUp: !isDisabled ? onContainerMouseUp : undefined,
       ...dragDropProps,
       ...mergeProps(themeProps('file-input', {
         mode,
         status: status?.type ?? null
       }), stylex.props(isDropzone ? styles.dropzone : styles.compact, isDropzone && !isDisabled && styles.dropzoneHover, isDropzone && isDragOver && styles.dropzoneActive, isDropzone && isDisabled && styles.dropzoneDisabled, !isDropzone && isDisabled && styles.compactDisabled, status && statusBorderStyles[status.type], xstyle), className, style),
-      children: [/*#__PURE__*/_jsx("input", {
+      children: [/*#__PURE__*/_jsx(VisuallyHidden, {
+        children: /*#__PURE__*/_jsx("button", {
+          type: "button"
+          // With a disabledMessage the trigger keeps focusability via
+          // aria-disabled so the reason is focus-discoverable; opening the
+          // picker is still blocked by the isDisabled guards in the handlers.
+          // Otherwise the native disabled attribute removes it from the tab
+          // order.
+          ,
+          disabled: isDisabled && !showsDisabledMessage,
+          tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
+          "aria-disabled": showsDisabledMessage ? 'true' : undefined,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown
+          // aria-label suppresses child content from the accessible name, so
+          // compose the selected filenames into it — otherwise a
+          // screen-reader user refocusing the control hears only the field
+          // label and cannot tell what (if anything) is attached.
+          ,
+          "aria-label": hasFiles && fileNames ? t('@astryx.fileInput.triggerWithFiles', {
+            label,
+            fileNames
+          }) : label,
+          "aria-busy": isLoading || undefined,
+          "aria-describedby": ariaDescribedBy,
+          "aria-invalid": status?.type === 'error' ? 'true' : undefined
+        })
+      }), /*#__PURE__*/_jsx("input", {
         ...rest,
         ref: mergeRefs(ref, inputRef),
         id: id,
@@ -476,7 +507,7 @@ export function FileInput({
         disabled: isDisabled,
         onChange: handleInputChange
         // The visually-hidden native input is never focused (tabIndex={-1});
-        // its describedby/required/invalid live on the role="button" wrapper.
+        // its describedby/required/invalid live on the trigger button.
         ,
         "aria-hidden": "true",
         tabIndex: -1,
@@ -489,14 +520,9 @@ export function FileInput({
         }),
         onClick: handleClear
       })]
-    }), /*#__PURE__*/_jsx("div", {
-      id: liveRegionID,
-      role: "status",
-      "aria-live": "polite",
-      ...{
-        className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
-      },
-      children: validationError
+    }), conveysRequired && /*#__PURE__*/_jsx(VisuallyHidden, {
+      id: requiredID,
+      children: t('@astryx.fileInput.required')
     }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }

package/dist/HoverCard/useHoverCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AA6C3B;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CA4S5E"}
+{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AA4C3B;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CAyT5E"}

package/dist/HoverCard/useHoverCard.js

@@ -17,7 +17,6 @@ import { useLayer } from "../Layer/useLayer.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, shadowVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
-import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -259,6 +258,7 @@ export function useHoverCard(options = {}) {
   // Render function that wraps layer.render with hover card behavior
   const renderHoverCard = useCallback((children, props) => {
     const renderPlacement = props?.placement ?? placement;
+    const themeClassName = themeProps('hovercard').className;
     const renderProps = {
       placement: renderPlacement,
       alignment: props?.alignment ?? alignment,
@@ -267,15 +267,21 @@ export function useHoverCard(options = {}) {
       // are non-modal, so group is honest semantics without a name.
       role: label ? 'dialog' : 'group',
       'aria-label': label || undefined,
-      xstyle: [popoverXstyle, layerAnimations[renderPlacement]],
+      // Consumer surface style props land on the layer container — the
+      // themed surface (bg/radius/shadow) where the theme class lives — so
+      // customizing the card targets the same element as the theme. The inner
+      // span keeps `styles.content` for padding.
+      xstyle: [popoverXstyle, layerAnimations[renderPlacement], props?.xstyle],
+      className: props?.className ? `${themeClassName} ${props.className}` : themeClassName,
+      style: props?.style,
       // Render the layer as inline-safe phrasing markup so HoverCard stays
       // valid (and hydration-stable) inside inline contexts like a `<p>`.
       as: 'span'
     };
     return layer.render(/*#__PURE__*/_jsx("span", {
-      ...mergeProps(themeProps('hovercard'), {
+      ...{
         className: "x1lliihq x1vlblms xvmdzux x126nfab x1t818jl"
-      }),
+      },
       onMouseEnter: () => {
         isHoveringContentRef.current = true;
         clearTimeouts();

package/dist/Icon/Icon.d.ts

@@ -19,6 +19,7 @@
  */
 import React, { type ComponentType, type SVGProps } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import type { StyleXStyles } from '@stylexjs/stylex';
 import type { IconName } from './globalIconRegistry';
 declare const colorStyles: Readonly<{
     readonly primary: Readonly<{
@@ -170,6 +171,19 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
      * ```
      */
     label?: string;
+    /**
+     * StyleX styles created via `stylex.create()`. Folded into the icon's own
+     * `stylex.props()` call (as the last argument) so it merges with the base
+     * color/size styles for optimal deduplication, matching how other Astryx
+     * components accept `xstyle`.
+     *
+     * @example
+     * ```
+     * const overrides = stylex.create({ root: { opacity: 0.5 } });
+     * <Icon icon="search" xstyle={overrides.root} />
+     * ```
+     */
+    xstyle?: StyleXStyles;
 }
 /**
  * Renders an icon from the icon registry or a custom SVG component.
@@ -179,7 +193,7 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
  * <Icon icon="close" size="md" color="primary" />
  * ```
  */
-export declare function Icon({ icon, color, size, label, ref, ...props }: IconProps): React.JSX.Element;
+export declare function Icon({ icon, color, size, label, ref, className, style, xstyle, ...props }: IconProps): React.JSX.Element;
 export declare namespace Icon {
     var displayName: string;
 }

package/dist/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAyCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyBD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,qBAkCX;yBAzCe,IAAI;;;AA4FpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAGnD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAyCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAyBD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,KAAK,EACL,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBA4CX;yBAtDe,IAAI;;;AA8HpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}