@astryxdesign/core 0.2.0-canary.ea693ac → 0.2.0-canary.ebed74f

package/dist/DropdownMenu/DropdownMenu.js

@@ -19,7 +19,7 @@
  * - /packages/core/src/DropdownMenu/DropdownMenu.test.tsx
  * - /packages/core/src/DropdownMenu/index.ts
  * - /apps/storybook/stories/DropdownMenu.stories.tsx
- * - /packages/cli/templates/blocks/components/DropdownMenu/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
  */
 import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -122,6 +122,7 @@ export function DropdownMenu({
   onClick,
   hasChevron = true,
   placement = 'below',
+  alignment = 'start',
   className,
   style,
   xstyle,
@@ -159,27 +160,21 @@ export function DropdownMenu({
   // Close menu + return focus to trigger
   const handleLayerHide = useCallback(() => {
     lastHideTimeRef.current = Date.now();
-    if (isControlled) {
-      onOpenChange?.(false);
-    } else {
+    onOpenChange?.(false);
+    if (!isControlled) {
       setInternalIsOpen(false);
     }
     buttonRef.current?.focus();
   }, [isControlled, onOpenChange]);
 
-  // Track whether to focus the first item when the menu opens
+  // Defer item focus until the layer has committed open, so focus restore
+  // captures the trigger instead of the first menu item.
   const shouldFocusOnOpenRef = useRef(false);
   const handleLayerShow = useCallback(() => {
-    if (isControlled) {
-      onOpenChange?.(true);
-    } else {
+    onOpenChange?.(true);
+    if (!isControlled) {
       setInternalIsOpen(true);
     }
-    if (shouldFocusOnOpenRef.current) {
-      shouldFocusOnOpenRef.current = false;
-      // focusFirst is called via openAndFocus below — defer to rAF
-      // so the popover content is rendered before we query for items
-    }
   }, [isControlled, onOpenChange]);
   const popover = usePopover({
     onHide: handleLayerHide,
@@ -222,17 +217,26 @@ export function DropdownMenu({
     getCurrentIndex: () => getMenuItems().findIndex(el => el === document.activeElement || el.contains(document.activeElement))
   });
 
-  // Sync controlled open state → popover, and focus first item on open
+  // Sync controlled open state → popover.
   useEffect(() => {
     if (isControlled) {
       if (controlledIsOpen && !popover.isOpen) {
+        shouldFocusOnOpenRef.current = true;
         popover.show();
-        requestAnimationFrame(() => focusFirst());
       } else if (!controlledIsOpen && popover.isOpen) {
         popover.hide();
       }
     }
-  }, [controlledIsOpen, isControlled, popover, focusFirst]);
+  }, [controlledIsOpen, isControlled, popover]);
+
+  // Move focus into the menu only after the layer has committed open.
+  useEffect(() => {
+    if (!popover.isOpen || !shouldFocusOnOpenRef.current) {
+      return;
+    }
+    shouldFocusOnOpenRef.current = false;
+    requestAnimationFrame(() => focusFirst());
+  }, [popover.isOpen, focusFirst]);
 
   // Extend useListFocus with Enter/Space activation + typeahead
   const listKeyDown = useCallback(e => {
@@ -266,9 +270,9 @@ export function DropdownMenu({
     listNavKeyDown(e);
   }, [listNavKeyDown, closeMenu, typeahead, ownsEvent]);
   const openAndFocus = useCallback(() => {
+    shouldFocusOnOpenRef.current = true;
     popover.show();
-    requestAnimationFrame(() => focusFirst());
-  }, [popover, focusFirst]);
+  }, [popover]);
   const handleButtonClick = useCallback(() => {
     // If the menu was just closed by light dismiss (e.g. iOS Safari fires
     // pointerdown → hide before the trigger's click), the click would
@@ -356,7 +360,7 @@ export function DropdownMenu({
       })
     }), {
       placement,
-      alignment: 'start',
+      alignment,
       xstyle: [popoverXstyle, popoverGapStyle, layerAnimations[placement]]
     })]
   });

package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts

@@ -1,22 +1,28 @@
 /**
  * @file DropdownMenuCheckboxItem.tsx
- * @input React, stylex, Item + Icon + DropdownMenu context + tokens from core
+ * @input React, stylex, Item + CheckboxInput + DropdownMenu context + tokens from core
  * @output DropdownMenuCheckboxItem — a standalone checkable menu item.
  * @position Sub-component; used inside DropdownMenu.
  *
  * A menu item that toggles an independent boolean (role="menuitemcheckbox").
- * Unlike CheckboxInput, there is no nested native <input>: the row itself owns
- * the role and aria-checked, per the WAI-ARIA menuitemcheckbox pattern.
- * Keyboard navigation (arrows/typeahead) and Enter/Space activation come from
- * the parent DropdownMenu's useListFocus + activation path, which matches
- * menuitemcheckbox alongside plain menuitem rows.
+ * Unlike CheckboxInput, there is no nested native <input> that participates in
+ * accessibility: the row itself owns the role and aria-checked, per the
+ * WAI-ARIA menuitemcheckbox pattern. Keyboard navigation (arrows/typeahead) and
+ * Enter/Space activation come from the parent DropdownMenu's useListFocus +
+ * activation path, which matches menuitemcheckbox alongside plain menuitem rows.
  *
- * The square checkbox visual is decorative (aria-hidden) — the row owns the
- * checked state. Its size is derived from the menu's item size (a `sm` menu
- * gets the compact control; `md`/`lg` get the standard one) and it swaps to the
- * inline-end of the row on coarse-pointer (touch) devices via CSS `order`, so
- * it lands where selection toggles are conventionally placed on mobile. The
- * checkmark uses the `check` icon from the active theme's icon registry.
+ * The checkbox visual composes the real CheckboxInput primitive so its checkmark
+ * matches CheckboxListItem and picks up the standard `checkbox` theming slots.
+ * It is purely decorative: the composed control is wrapped in an element that is
+ * both `aria-hidden` and `inert`, so it contributes nothing to the row's
+ * accessible name, and its native <input> and sr-only label stay out of the tab
+ * order and the accessibility tree while pointer clicks fall through to the row
+ * — the same shim MultiSelector uses. The row owns the checked state and
+ * accessible name. The control size is derived from the menu's item size (a
+ * `sm` menu gets the compact control; `md`/`lg` get the standard one) and it
+ * swaps to the inline-end of the row on coarse-pointer (touch) devices via CSS
+ * `order`, so it lands where selection toggles are conventionally placed on
+ * mobile.
  */
 import { type ReactNode } from 'react';
 import { type IconType } from '../Icon';

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

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

package/dist/DropdownMenu/DropdownMenuCheckboxItem.js

@@ -4,32 +4,39 @@
 
 /**
  * @file DropdownMenuCheckboxItem.tsx
- * @input React, stylex, Item + Icon + DropdownMenu context + tokens from core
+ * @input React, stylex, Item + CheckboxInput + DropdownMenu context + tokens from core
  * @output DropdownMenuCheckboxItem — a standalone checkable menu item.
  * @position Sub-component; used inside DropdownMenu.
  *
  * A menu item that toggles an independent boolean (role="menuitemcheckbox").
- * Unlike CheckboxInput, there is no nested native <input>: the row itself owns
- * the role and aria-checked, per the WAI-ARIA menuitemcheckbox pattern.
- * Keyboard navigation (arrows/typeahead) and Enter/Space activation come from
- * the parent DropdownMenu's useListFocus + activation path, which matches
- * menuitemcheckbox alongside plain menuitem rows.
+ * Unlike CheckboxInput, there is no nested native <input> that participates in
+ * accessibility: the row itself owns the role and aria-checked, per the
+ * WAI-ARIA menuitemcheckbox pattern. Keyboard navigation (arrows/typeahead) and
+ * Enter/Space activation come from the parent DropdownMenu's useListFocus +
+ * activation path, which matches menuitemcheckbox alongside plain menuitem rows.
  *
- * The square checkbox visual is decorative (aria-hidden) — the row owns the
- * checked state. Its size is derived from the menu's item size (a `sm` menu
- * gets the compact control; `md`/`lg` get the standard one) and it swaps to the
- * inline-end of the row on coarse-pointer (touch) devices via CSS `order`, so
- * it lands where selection toggles are conventionally placed on mobile. The
- * checkmark uses the `check` icon from the active theme's icon registry.
+ * The checkbox visual composes the real CheckboxInput primitive so its checkmark
+ * matches CheckboxListItem and picks up the standard `checkbox` theming slots.
+ * It is purely decorative: the composed control is wrapped in an element that is
+ * both `aria-hidden` and `inert`, so it contributes nothing to the row's
+ * accessible name, and its native <input> and sr-only label stay out of the tab
+ * order and the accessibility tree while pointer clicks fall through to the row
+ * — the same shim MultiSelector uses. The row owns the checked state and
+ * accessible name. The control size is derived from the menu's item size (a
+ * `sm` menu gets the compact control; `md`/`lg` get the standard one) and it
+ * swaps to the inline-end of the row on coarse-pointer (touch) devices via CSS
+ * `order`, so it lands where selection toggles are conventionally placed on
+ * mobile.
  */
 import { useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { Icon, renderIconSlot } from "../Icon/index.js";
+import { renderIconSlot } from "../Icon/index.js";
+import { CheckboxInput } from "../CheckboxInput/CheckboxInput.js";
 import { Item } from "../Item/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
 import { focusMenuItemOnHover } from "./menuItemHover.js";
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars, radiusVars, durationVars, easeVars, borderVars } from "../theme/tokens.stylex.js";
+import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps, themeProps } from "../utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -46,45 +53,6 @@ const styles = {
     kSiTet: "xbyyjgo",
     kkrTdU: "x1h6gzvc",
     $$css: true
-  },
-  box: {
-    k1xSpc: "x78zum5",
-    kGNEyG: "x6s0dn4",
-    kjj79g: "xl56j7k",
-    kmuXW: "x2lah0s",
-    kB7OPa: "x9f619",
-    kMzoRj: "x1litavf",
-    ksu8eU: "x1y0btm7",
-    kaIpWk: "xx3sua9",
-    kMwMTN: "x17wrial",
-    k1ekBW: "xts7igz",
-    kIyJzY: "xuedmi6 x12w9bfk",
-    kAMwcw: "xlr8y92",
-    kayTVb: "x1g77sc7 xozvky",
-    keTefX: "x1lziwak x1jymrmb",
-    $$css: true
-  },
-  unchecked: {
-    kVAM5u: "xvy26l8",
-    kWkggS: "x10xzikg",
-    $$css: true
-  },
-  checked: {
-    kVAM5u: "xad5do",
-    kWkggS: "x1ewilqj",
-    $$css: true
-  }
-};
-const boxSizeStyles = {
-  sm: {
-    kzqmXN: "x1xp8n7a",
-    kZKoxP: "xmix8c7",
-    $$css: true
-  },
-  md: {
-    kzqmXN: "x17z2i9w",
-    kZKoxP: "x17rw0jw",
-    $$css: true
   }
 };
 /**
@@ -122,6 +90,12 @@ export function DropdownMenuCheckboxItem({
   const ctx = useDropdownMenuContext();
   const menuSize = ctx?.menuSize ?? 'md';
   const controlSize = menuSize === 'sm' ? 'sm' : 'md';
+
+  // The composed checkbox is decorative and inert, so its label never reaches
+  // the accessibility tree — the row's `label` prop provides the announced
+  // name. CheckboxInput still requires a string label, so pass one through when
+  // the row label is a plain string.
+  const checkboxLabel = typeof label === 'string' ? label : '';
   const handleClick = useCallback(() => {
     if (isDisabled) {
       return;
@@ -138,17 +112,18 @@ export function DropdownMenuCheckboxItem({
     "aria-checked": value,
     tabIndex: isDisabled ? undefined : -1,
     onPointerMove: handlePointerMove,
-    marker: /*#__PURE__*/_jsx("span", {
+    marker: /*#__PURE__*/_jsx("div", {
       "aria-hidden": "true",
-      ...mergeProps(themeProps('dropdown-menu-checkbox', {
-        size: controlSize,
-        checked: value ? 'checked' : null,
-        disabled: isDisabled ? 'disabled' : null
-      }), stylex.props(styles.box, boxSizeStyles[controlSize], value ? styles.checked : styles.unchecked)),
-      children: value && /*#__PURE__*/_jsx(Icon, {
-        icon: "check",
-        size: "sm",
-        color: "inherit"
+      inert: true,
+      ...{
+        className: "x78zum5 x2lah0s x47corl x1g77sc7 xozvky x1lziwak x1jymrmb"
+      },
+      children: /*#__PURE__*/_jsx(CheckboxInput, {
+        label: checkboxLabel,
+        isLabelHidden: true,
+        value: value,
+        isDisabled: isDisabled,
+        size: controlSize
       })
     }),
     startContent: icon ? renderIconSlot(icon, {

package/dist/DropdownMenu/DropdownMenuItem.d.ts

@@ -16,7 +16,7 @@
  * - /packages/core/src/DropdownMenu/DropdownMenu.test.tsx
  * - /packages/core/src/DropdownMenu/index.ts
  * - /apps/storybook/stories/DropdownMenu.stories.tsx
- * - /packages/cli/templates/blocks/components/DropdownMenu/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
 import { type IconType } from '../Icon';

package/dist/DropdownMenu/DropdownMenuItem.js

@@ -20,7 +20,7 @@
  * - /packages/core/src/DropdownMenu/DropdownMenu.test.tsx
  * - /packages/core/src/DropdownMenu/index.ts
  * - /apps/storybook/stories/DropdownMenu.stories.tsx
- * - /packages/cli/templates/blocks/components/DropdownMenu/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
  */
 import { useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';

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

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

package/dist/DropdownMenu/DropdownMenuRadioItem.js

@@ -157,7 +157,11 @@ export function DropdownMenuRadioItem({
         disabled: isDisabled ? 'disabled' : null
       }), stylex.props(styles.circle, circleSizeStyles[controlSize], isChecked ? styles.checked : styles.unchecked)),
       children: isChecked && /*#__PURE__*/_jsx("span", {
-        ...stylex.props(styles.dot, dotSizeStyles[controlSize])
+        ...mergeProps(themeProps('dropdown-menu-radio-dot', {
+          size: controlSize,
+          checked: 'checked',
+          disabled: isDisabled ? 'disabled' : null
+        }), stylex.props(styles.dot, dotSizeStyles[controlSize]))
       })
     }),
     startContent: icon ? renderIconSlot(icon, {

package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts

@@ -31,7 +31,7 @@
  * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.test.tsx
  * - /packages/core/src/DropdownMenu/index.ts
  * - /apps/storybook/stories/DropdownMenu.stories.tsx
- * - /packages/cli/templates/blocks/components/DropdownMenu/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
 import { type IconType } from '../Icon';

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAc,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoB5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8F5C,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAgUX;yBAlUe,mBAAmB"}
+{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAc,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoB5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0F5C,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAmVX;yBArVe,mBAAmB"}

package/dist/DropdownMenu/DropdownMenuSubMenu.js

@@ -35,7 +35,7 @@
  * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.test.tsx
  * - /packages/core/src/DropdownMenu/index.ts
  * - /apps/storybook/stories/DropdownMenu.stories.tsx
- * - /packages/cli/templates/blocks/components/DropdownMenu/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
  */
 import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -53,6 +53,7 @@ import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR } from "./menuItemRoles.js";
 import { DropdownMenuContext, useDropdownMenuContext } from "./DropdownMenuContext.js";
+import { focusMenuItemOnHover } from "./menuItemHover.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const triggerStyles = {
   root: {
@@ -65,7 +66,6 @@ const triggerStyles = {
     kGuDYH: "xcr08ib",
     kMwMTN: "x1tgivj0",
     kWkggS: "xjbqb8w x1c52tdz",
-    kHE3J0: "xe9uy6x",
     kkrTdU: "x1ypdohk",
     k9WMMc: "x1yc453h",
     kI3sdo: "x1a2a7pz",
@@ -281,6 +281,13 @@ export function DropdownMenuSubMenu(props) {
     }
   }, [isDisabled, open]);
 
+  // Move the single focus-driven highlight onto the trigger as the pointer
+  // enters it, so a sibling item that still holds focus doesn't stay
+  // highlighted alongside the hovered trigger. This is separate from the
+  // hover-open intent (onMouseEnter/onMouseLeave) — the flyout still opens on
+  // the hover delay; this only keeps the highlight single.
+  const handlePointerMove = useCallback(e => focusMenuItemOnHover(e, isDisabled), [isDisabled]);
+
   // Enter/Space activate the focused row; typeahead jumps by first character;
   // the close key (Left, or Right in RTL) returns focus to the trigger;
   // arrows/Home/End defer to useListFocus (RTL-aware).
@@ -348,16 +355,16 @@ export function DropdownMenuSubMenu(props) {
     }
   }), [menuSize, close, menuCtx]);
   const endAffordance = hasSpinner ? /*#__PURE__*/_jsx("span", {
-    ...{
+    ...mergeProps(themeProps('dropdown-menu-indicator-icon'), {
       className: "x78zum5 x6s0dn4"
-    },
+    }),
     children: /*#__PURE__*/_jsx(Spinner, {
       size: "sm"
     })
   }) : /*#__PURE__*/_jsx("span", {
-    ...{
+    ...mergeProps(themeProps('dropdown-menu-indicator-icon'), {
       className: "x78zum5 x6s0dn4"
-    },
+    }),
     children: /*#__PURE__*/_jsx(Icon, {
       icon: "chevronRight",
       size: "sm",
@@ -378,6 +385,7 @@ export function DropdownMenuSubMenu(props) {
       "data-testid": testId,
       onMouseEnter: triggerProps.onMouseEnter,
       onMouseLeave: triggerProps.onMouseLeave,
+      onPointerMove: handlePointerMove,
       startContent: icon ? renderIconSlot(icon, {
         size: 'sm',
         color: 'secondary'

package/dist/DropdownMenu/menuItemHover.d.ts

@@ -12,6 +12,7 @@
  * - /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';
 /**

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

@@ -1 +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"}
+{"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

@@ -16,6 +16,7 @@
  * - /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

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;AAWrC,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AAyBxB;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,kBAAkB,EAAE,GAAG,SAAS,CA6D1E"}
+{"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

@@ -12,6 +12,7 @@ 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: {
@@ -36,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,

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,7 +9,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 { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

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';

package/dist/Field/FieldLabel.d.ts

@@ -7,10 +7,10 @@
  * 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":"AAIA;;;;;;;;;;;GAWG;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;AAmD5D,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,+BA+DjB;yBAjFe,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

@@ -11,9 +11,10 @@
  * 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";
@@ -22,6 +23,7 @@ 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: {
@@ -98,6 +100,35 @@ export function FieldLabel({
   // 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',
@@ -132,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 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
     })]
   });