@astryxdesign/core 0.1.9 → 0.2.0-canary.0b7a99e

package/dist/DropdownMenu/index.js

@@ -6,6 +6,15 @@
  * @file index.ts
  * @output Exports DropdownMenu, DropdownMenuItem and related types
  * @position Public API entry point
+ *
+ * SYNC: The item components below are re-exported (aliased) by the other menu
+ * surfaces that reuse the DropdownMenu item pipeline. When you add or remove an
+ * item component here, mirror it in:
+ * - /packages/core/src/ContextMenu/index.ts        (ContextMenu* aliases)
+ * - /packages/core/src/Breadcrumbs/index.ts        (BreadcrumbMenu* aliases)
+ * Those surfaces render menu items through the same renderDropdownItems +
+ * DropdownMenuContext + useListFocus path, so a new item type (e.g. a submenu)
+ * only shows up in their public API once it's aliased there too.
  */
 export { DropdownMenu } from "./DropdownMenu.js";
 export { DropdownMenuItem } from "./DropdownMenuItem.js";
@@ -15,6 +24,10 @@ export { DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.js";
 export { DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.js";
 export { DropdownMenuRadioItem } from "./DropdownMenuRadioItem.js";
 
+// Submenu — a single menu row that reveals a nested flyout of its own
+// children/items. Data mode via DropdownMenuItemData.items.
+export { DropdownMenuSubMenu } from "./DropdownMenuSubMenu.js";
+
 // Menu-coordination context — public so consumers can build custom menu items
 // that read the menu size / close the menu.
 export { DropdownMenuContext, useDropdownMenuContext } from "./DropdownMenuContext.js";

package/dist/DropdownMenu/menuItemHover.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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
+ * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.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;;;;;;;;;;;;;;;GAeG;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,34 @@
+// 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
+ * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.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;AAYrC,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AAyBxB;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAwE1E"}

package/dist/DropdownMenu/renderDropdownItems.js

@@ -9,8 +9,10 @@
 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 { mergeProps, themeProps } from "../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   divider: {
@@ -35,17 +37,18 @@ export function renderDropdownItems(items) {
     const option = items[i];
     if ('type' in option && option.type === 'divider') {
       elements.push(/*#__PURE__*/_jsx(Divider, {
-        xstyle: styles.divider
+        xstyle: styles.divider,
+        ...themeProps('dropdown-menu-divider')
       }, `divider-${i}`));
     } else if ('type' in option && option.type === 'section') {
       elements.push(/*#__PURE__*/_jsxs("div", {
         role: "group",
         "aria-label": option.title,
         children: [option.title && /*#__PURE__*/_jsx("div", {
-          ...{
-            className: "xu0wf1k xf314gf x9ynric x141an7d x1ltkj2j xv1l7n4 x87ps6o"
-          },
           "aria-hidden": "true",
+          ...mergeProps(themeProps('dropdown-menu-section-heading'), {
+            className: "xu0wf1k xf314gf x9ynric x141an7d x1ltkj2j xv1l7n4 x87ps6o"
+          }),
           children: option.title
         }), option.items.map(item => /*#__PURE__*/_jsx(DropdownMenuItem, {
           icon: item.icon,
@@ -55,12 +58,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/EmptyState/EmptyState.d.ts

@@ -9,7 +9,7 @@
  * - /packages/core/src/EmptyState/EmptyState.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/EmptyState/index.ts (exports if types change)
  * - /apps/storybook/stories/EmptyState.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/EmptyState/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/EmptyState/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/EmptyState/EmptyState.js

@@ -11,7 +11,7 @@
  * - /packages/core/src/EmptyState/EmptyState.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/EmptyState/index.ts (exports if types change)
  * - /apps/storybook/stories/EmptyState.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/EmptyState/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/EmptyState/ (showcase blocks)
  */
 
 import { createElement } from 'react';

package/dist/Field/Field.d.ts

@@ -9,11 +9,12 @@
  * - /packages/core/src/Field/Field.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Field/index.ts (exports if types change)
  * - /apps/storybook/stories/Field.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Field/ (showcase blocks)
  */
 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

@@ -13,7 +13,7 @@
  * - /packages/core/src/Field/Field.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Field/index.ts (exports if types change)
  * - /apps/storybook/stories/Field.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Field/ (showcase blocks)
  */
 import { use } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -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/FieldLabel.d.ts

@@ -1,15 +1,16 @@
 /**
  * @file FieldLabel.tsx
- * @input Uses React, Icon, IconType
+ * @input Uses React, Icon, IconType, useTranslator
  * @output Exports FieldLabel component, FieldLabelProps
  * @position Core label implementation; used by Field, CheckboxInput, Switch
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/Field/index.ts (exports if types change)
- * - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Field/ (showcase blocks)
+ * - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
  */
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 import { type IconType } from '../Icon';
 export interface FieldLabelProps extends BaseProps<HTMLLabelElement> {

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

@@ -1 +1 @@
-{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAkD5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;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;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA0DjB;yBA5Ee,UAAU"}
+{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAyD5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;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;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BAwGjB;yBA1He,UAAU"}

package/dist/Field/FieldLabel.js

@@ -1,24 +1,29 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
 /**
  * @file FieldLabel.tsx
- * @input Uses React, Icon, IconType
+ * @input Uses React, Icon, IconType, useTranslator
  * @output Exports FieldLabel component, FieldLabelProps
  * @position Core label implementation; used by Field, CheckboxInput, Switch
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/Field/index.ts (exports if types change)
- * - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Field/ (showcase blocks)
+ * - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
  */
-
+import { useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, fontWeightVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Icon, renderIconSlot } from "../Icon/index.js";
 import { Tooltip } from "../Tooltip/index.js";
+import { useTranslator } from "../i18n/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { useInputContainer } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {
   label: {
@@ -42,7 +47,7 @@ const styles = {
     ksu8eU: "xng3xce",
     kMcinP: "xzpqnlu",
     kZKoxP: "xjm9jq1",
-    kbCHJM: "xu96u03",
+    kLqNvP: "x1o0tod",
     kogj98: "xkdpibf",
     kVQacm: "xb3r6kr",
     kmVPX3: "x1717udv",
@@ -87,13 +92,43 @@ export function FieldLabel({
   ref,
   ...rest
 }) {
-  const statusText = isOptional ? 'Optional' : isRequired ? 'Required' : null;
+  const t = useTranslator();
+  const statusText = isOptional ? t('@astryx.field.optional') : isRequired ? t('@astryx.field.required') : null;
 
   // A group label (e.g. for a radiogroup) must not be a literal `<label>`
   // element: a `<label>` semantically names a single form control and can't be
   // associated with a group. Render it as a `<span>` instead, keeping all the
   // label styling and slots. The group references it via `aria-labelledby`.
   const LabelElement = isGroupLabel ? 'span' : 'label';
+
+  // Clicking the description forwards to the associated control, so the whole
+  // label area (label text + description) is one hit target — mirroring native
+  // `<label>` click behavior, which the description can't get from `htmlFor`
+  // because it stays a sibling `<span>` (nesting it in the `<label>` would fold
+  // it into the control's accessible name and double-announce it alongside
+  // `aria-describedby`). A group label names a group, not one control, so it
+  // has nothing to forward to.
+  const forwardsDescriptionClick = !isGroupLabel && inputID != null;
+
+  // Reuse `useInputContainer` — the same hook input wrappers use to forward
+  // clicks on non-interactive chrome to their control. It skips nested
+  // interactive content (a link/button inside a ReactNode description) and
+  // guards against forwarding during text selection, so the description needs
+  // no bespoke click logic. The "input" is resolved from `inputID` lazily via
+  // a ref-shaped object, since FieldLabel points at the control by id rather
+  // than holding a ref to it.
+  const descriptionRef = useRef(null);
+  const controlRef = useMemo(() => ({
+    get current() {
+      return inputID == null ? null : descriptionRef.current?.ownerDocument.getElementById(inputID) ?? null;
+    },
+    set current(_value) {}
+  }), [inputID]);
+  const descriptionClickProps = useInputContainer({
+    containerRef: descriptionRef,
+    inputRef: controlRef,
+    disabled: !forwardsDescriptionClick
+  });
   const labelContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [labelIcon && renderIconSlot(labelIcon, {
       size: 'sm',
@@ -128,15 +163,23 @@ export function FieldLabel({
       ...mergeProps(themeProps('field-label'), stylex.props(styles.label, isDisabled && styles.labelDisabled, isLabelHidden && styles.srOnly, xstyle), className, style),
       children: labelContent
     }), description && /*#__PURE__*/_jsx("span", {
+      ref: forwardsDescriptionClick ? descriptionRef : undefined,
       id: descriptionID,
+      ...(forwardsDescriptionClick ? descriptionClickProps : undefined),
       ...{
         0: {
           className: "x9ynric x141an7d x1ltkj2j x1sodnla xv1l7n4"
         },
+        2: {
+          className: "x9ynric x141an7d x1ltkj2j x1sodnla xv1l7n4 x1ypdohk"
+        },
         1: {
-          className: "x9ynric x141an7d x1ltkj2j x1sodnla xv1l7n4 xng3xce xzpqnlu xjm9jq1 xu96u03 xkdpibf xb3r6kr x1717udv x47corl x10l6tqk x13vifvy x87ps6o xuxw1ft x1i1rx1s"
+          className: "x9ynric x141an7d x1ltkj2j x1sodnla xv1l7n4 xng3xce xzpqnlu xjm9jq1 x1o0tod xkdpibf xb3r6kr x1717udv x47corl x10l6tqk x13vifvy x87ps6o xuxw1ft x1i1rx1s"
+        },
+        3: {
+          className: "x9ynric x141an7d x1ltkj2j x1sodnla xv1l7n4 x1ypdohk xng3xce xzpqnlu xjm9jq1 x1o0tod xkdpibf xb3r6kr x1717udv x47corl x10l6tqk x13vifvy x87ps6o xuxw1ft x1i1rx1s"
         }
-      }[!!isLabelHidden << 0],
+      }[!!forwardsDescriptionClick << 1 | !!isLabelHidden << 0],
       children: description
     })]
   });

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

@@ -1,23 +1,7 @@
 import React from 'react';
 import type { BaseProps } from '../BaseProps';
 import type { InputStatusType } from '../Field/types';
-/**
- * Extensible variant map for FieldStatus.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/FieldStatus' {
- *   interface FieldStatusVariantMap {
- *     'inline': true;
- *   }
- * }
- * ```
- */
-export interface FieldStatusVariantMap {
-    attached: true;
-    detached: true;
-}
+import type { FieldStatusVariantMap } from './index';
 /**
  * FieldStatus variant type. Extensible via module augmentation of FieldStatusVariantMap.
  */
@@ -43,6 +27,15 @@ export interface FieldStatusProps extends BaseProps<HTMLDivElement> {
 /**
  * A status message component for form fields.
  *
+ * The `detached` variant renders a leading status icon before the message so
+ * status is not conveyed by color or position alone (WCAG 1.4.1). The icon is
+ * 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. 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`/
  * `aria-live` on the rendered element. Live regions that mount together with

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;AAyCpD;;;;;;;;;;;;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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;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,qBAkClB;yBA5Ce,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;AAKpD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAgEnD;;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,qBAsDlB;yBAhEe,WAAW"}

package/dist/FieldStatus/FieldStatus.js

@@ -2,7 +2,7 @@
 
 /**
  * @file FieldStatus.tsx
- * @input Uses React, stylex, theme tokens, useAnnounce
+ * @input Uses React, stylex, theme tokens, useAnnounce, Icon
  * @output Exports FieldStatus component, FieldStatusProps
  * @position Core implementation; consumed by Field, Switch, CheckboxInput, and the FieldStatus entrypoint
  *
@@ -11,7 +11,7 @@
  * - /packages/core/src/Field/Field.doc.mjs (compat docs when public API changes)
  * - /packages/core/src/FieldStatus/index.ts (exports if types change)
  * - /packages/core/src/Field/index.ts (compat re-export if public API changes)
- * - /packages/cli/templates/blocks/components/FieldStatus/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/FieldStatus/ (showcase blocks)
  */
 
 'use client';
@@ -24,7 +24,18 @@ import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { useEntryAnimation } from "../hooks/useEntryAnimation.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "../Icon/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Maps each status type to its status glyph. Mirrors the mapping the input
+ * controls already use for the on-field status affordance, so the detached
+ * message shows the same icon a consumer sees elsewhere for that status.
+ */
+const statusIconMap = {
+  warning: 'warning',
+  error: 'error',
+  success: 'success'
+};
 const styles = {
   base: {
     kMv6JI: "x9ynric",
@@ -37,8 +48,8 @@ const styles = {
     kLKAdn: "x1ak3mig",
     kGO01o: "x1wesfrj",
     kg3NbH: "xf314gf",
-    kqGeR4: "x14lggfu",
-    kYm2EN: "xtufxuj",
+    kVL7Gh: "xquck67",
+    kT0f0o: "x14i3lts",
     $$css: true
   },
   detached: {
@@ -67,20 +78,6 @@ const colorStyles = {
   }
 };
 
-/**
- * Extensible variant map for FieldStatus.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/FieldStatus' {
- *   interface FieldStatusVariantMap {
- *     'inline': true;
- *   }
- * }
- * ```
- */
-
 /**
  * FieldStatus variant type. Extensible via module augmentation of FieldStatusVariantMap.
  */
@@ -88,6 +85,15 @@ const colorStyles = {
 /**
  * A status message component for form fields.
  *
+ * The `detached` variant renders a leading status icon before the message so
+ * status is not conveyed by color or position alone (WCAG 1.4.1). The icon is
+ * 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. 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`/
  * `aria-live` on the rendered element. Live regions that mount together with
@@ -140,7 +146,33 @@ export function FieldStatus({
       type,
       variant
     }), stylex.props(styles.base, entryStyle, variant === 'attached' ? styles.attached : styles.detached, colorStyles[type], xstyle), className, style),
-    children: message
+    children: variant === 'detached' ? /*#__PURE__*/_jsxs("span", {
+      ...{
+        className: "x78zum5 x1cy8zhl xzye2dw"
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        ...{
+          className: "x3nfvp2 x6s0dn4 x14o5nre x2lah0s"
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: statusIconMap[type],
+          size: "sm",
+          color: "inherit"
+          // Stable theme target on the detached message box's leading glyph
+          // itself, so a theme can restyle just this icon (color, size) —
+          // and each status — via `defineTheme`. Same-element rules in
+          // @layer astryx-theme win over the icon's own base
+          // width/height/fontSize, which a field-level target could not
+          // reach.
+          ,
+          ...themeProps('field-status-icon', {
+            type
+          })
+        })
+      }), /*#__PURE__*/_jsx("span", {
+        children: message
+      })]
+    }) : message
   });
 }
 FieldStatus.displayName = 'FieldStatus';

package/dist/FieldStatus/index.d.ts

@@ -4,6 +4,24 @@
  * @output Exports FieldStatus and related types
  * @position Entry point for @astryxdesign/core/FieldStatus subpath export
  */
+/**
+ * Extensible variant map for FieldStatus.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/FieldStatus' {
+ *   interface FieldStatusVariantMap {
+ *     'inline': true;
+ *   }
+ * }
+ * ```
+ */
+export interface FieldStatusVariantMap {
+    attached: true;
+    detached: true;
+    tooltip: true;
+}
 export { FieldStatus } from './FieldStatus';
-export type { FieldStatusProps, FieldStatusVariant, FieldStatusVariantMap, } from './FieldStatus';
+export type { FieldStatusProps, FieldStatusVariant } from './FieldStatus';
 //# sourceMappingURL=index.d.ts.map