@astryxdesign/core 0.4.1 → 0.4.2-canary.01592f7

package/dist/ComplexSelector/ComplexSelector.js

@@ -4,8 +4,8 @@
 
 /**
  * @file ComplexSelector.tsx
- * @input Uses React, StyleX, Field, usePopover
- * @output Exports ComplexSelector component for custom selector surfaces
+ * @input Uses React, StyleX, Field, Icon slots, Layer positioning, and usePopover
+ * @output Exports a rich-selector shell with exact token-sized input and ghost triggers, plus an imperative open/close handle
  * @position Core implementation; consumed by index.ts
  *
  * SYNC: When modified, update:
@@ -13,17 +13,18 @@
  * - /packages/core/src/ComplexSelector/ComplexSelector.test.tsx
  * - /packages/core/src/ComplexSelector/index.ts
  * - /apps/storybook/stories/ComplexSelector.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/ComplexSelector/ (showcase blocks)
  */
-import React, { useCallback, useId, useOptimistic, useTransition } from 'react';
+import React, { useCallback, useId, useImperativeHandle, useOptimistic, useRef, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { Field, inputWrapperStyles } from "../Field/index.js";
-import { Icon } from "../Icon/index.js";
+import { Icon, renderIconSlot } from "../Icon/index.js";
 import { Spinner } from "../Spinner/index.js";
 import { useTranslator } from "../i18n/index.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import { usePopover } from "../Popover/usePopover.js";
 import "../theme/tokens.stylex.js";
-import { colorVars, durationVars, easeVars, radiusVars, sizeVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { colorVars, durationVars, easeVars, fontWeightVars, radiusVars, sizeVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { composeEventHandlers } from "../utils/composeEventHandlers.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
@@ -82,6 +83,22 @@ const styles = {
     kMwMTN: "xv1l7n4",
     $$css: true
   },
+  triggerGhost: {
+    kzqmXN: "x14atkfc",
+    kMzoRj: "xc342km",
+    kWkggS: "xjbqb8w",
+    kKwaWg: "x1ilzqfv xq8i9tn",
+    kGVxlE: "x1gnnqk1 x1irk71m x15ysqaf",
+    k63SB2: "x1e4wzip",
+    k1ekBW: "xrafxwg",
+    k3aq6I: "x3oybdh xk4oym4",
+    $$css: true
+  },
+  triggerGhostDisabled: {
+    kKwaWg: "x18o3ruo",
+    k3aq6I: "x1c071of x1pdlv7q",
+    $$css: true
+  },
   triggerIcon: {
     kmuXW: "x2lah0s",
     $$css: true
@@ -109,15 +126,15 @@ const styles = {
     $$css: true
   },
   sm: {
-    kAzted: "x1gdqauq",
+    kZKoxP: "x6k0iem",
     $$css: true
   },
   md: {
-    kAzted: "x1uogy3y",
+    kZKoxP: "x1ueg155",
     $$css: true
   },
   lg: {
-    kAzted: "x1xf4nls",
+    kZKoxP: "xssyfek",
     $$css: true
   },
   disabled: {
@@ -125,6 +142,16 @@ const styles = {
     $$css: true
   }
 };
+
+/**
+ * Imperative control surface for ComplexSelector, accessed via the `handleRef`
+ * prop. Methods drive the same popover machinery as the built-in trigger, so
+ * they respect focus restoration, light dismiss, and Escape. Prefer these
+ * callbacks over mirroring open state in the parent — the selector owns its
+ * visibility, and imperative calls avoid the focus-management pitfalls of
+ * syncing an external `isOpen` prop.
+ */
+
 /**
  * A selector shell for rich, custom selection surfaces.
  *
@@ -170,8 +197,12 @@ export function ComplexSelector({
   statusVariant = 'attached',
   labelTooltip,
   size = 'md',
+  variant = 'input',
+  startIcon,
   width,
   placement = 'below',
+  alignment = 'start',
+  handleRef,
   contentXstyle,
   xstyle,
   className,
@@ -182,28 +213,62 @@ export function ComplexSelector({
 }) {
   const t = useTranslator();
   const placeholder = placeholderFromProps ?? t('@astryx.selector.placeholder');
+  const effectiveStatusVariant = variant === 'ghost' && statusVariant === 'attached' ? 'detached' : statusVariant;
   const triggerId = useId();
   const labelId = useId();
   const contentId = useId();
   const descriptionId = useId();
   const statusMessageId = useId();
   const ariaDescribedBy = [description ? descriptionId : null, status?.message ? statusMessageId : null].filter(id => id != null).join(' ') || undefined;
+  const triggerRef = useRef(null);
+  const lastHideTimeRef = useRef(0);
   const [isPending, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || isPending;
+  const handlePopoverHide = useCallback(() => {
+    lastHideTimeRef.current = Date.now();
+    triggerRef.current?.focus();
+  }, []);
   const popover = usePopover({
     dialogLabel: label,
     hasCloseButton: false,
     hasAutoFocus: true,
-    // The popup's theme target belongs on the SURFACE — the element painting
-    // background, radius and elevation — which `usePopover` owns. Rendered on
-    // the content box below it, a theme's background or radius rule paints the
-    // wrong box.
     surfaceTarget: 'complex-selector-popup',
-    onHide: () => {
-      document.getElementById(triggerId)?.focus();
-    }
+    onHide: handlePopoverHide
   });
+  const isOpen = popover.isOpen;
+  const handleTriggerClick = useCallback(() => {
+    if (isDisabled || Date.now() - lastHideTimeRef.current < 50) {
+      return;
+    }
+    if (popover.isOpen) {
+      popover.hide();
+    } else {
+      popover.show();
+    }
+  }, [isDisabled, popover]);
+  const close = useCallback(() => {
+    popover.hide();
+  }, [popover]);
+  useImperativeHandle(handleRef, () => ({
+    open: () => {
+      if (!isDisabled) {
+        popover.show();
+      }
+    },
+    close: () => popover.hide(),
+    toggle: () => {
+      if (isDisabled) {
+        return;
+      }
+      if (popover.isOpen) {
+        popover.hide();
+      } else {
+        popover.show();
+      }
+    },
+    isOpen: () => popover.isOpen
+  }), [isDisabled, popover]);
   const commitValue = useCallback(nextValue => {
     onChange?.(nextValue);
     if (changeAction) {
@@ -217,8 +282,8 @@ export function ComplexSelector({
   const content = /*#__PURE__*/_jsx("div", {
     id: contentId,
     ...stylex.props(styles.content, contentXstyle),
-    children: children(optimisticValue, commitValue, popover.hide, {
-      isOpen: popover.isOpen,
+    children: children(optimisticValue, commitValue, close, {
+      isOpen,
       isBusy,
       triggerId,
       contentId
@@ -229,25 +294,21 @@ export function ComplexSelector({
       ref: popover.triggerRef,
       "data-testid": testId,
       ...props,
-      onClick: composeEventHandlers(onClickProp, () => {
-        if (!isDisabled) {
-          popover.toggle();
-        }
-      }),
+      onClick: composeEventHandlers(onClickProp, handleTriggerClick),
       ...mergeProps(themeProps('complex-selector', {
+        variant,
         size,
         status: status?.type ?? null
-      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, styles[size],
-      // The ring belongs to the wrapper (the focusable `<button>` sits
-      // inside it), but it must still be a KEYBOARD ring: `:focus-within`
-      // matched a mouse click on the trigger and drew the outline for
-      // pointer users too. `focusWithin` here is `:has(:focus-visible)`.
-      focusOutlineStyles.focusWithin, isDisabled && inputWrapperStyles.disabled, isDisabled && styles.disabled, triggerLabel == null && styles.placeholder, xstyle), className, style),
-      children: [/*#__PURE__*/_jsx("button", {
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, styles[size], variant === 'input' && focusOutlineStyles.focusWithin, variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && focusOutlineStyles.focusWithin, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, isDisabled && styles.disabled, triggerLabel == null && styles.placeholder, xstyle), className, style),
+      children: [startIcon && renderIconSlot(startIcon, {
+        size: 'sm',
+        color: 'secondary'
+      }), /*#__PURE__*/_jsx("button", {
+        ref: triggerRef,
         id: triggerId,
         type: "button",
         "aria-haspopup": "dialog",
-        "aria-expanded": popover.isOpen,
+        "aria-expanded": isOpen,
         "aria-controls": contentId,
         "aria-describedby": ariaDescribedBy,
         "aria-labelledby": labelId,
@@ -256,7 +317,7 @@ export function ComplexSelector({
         "aria-busy": isBusy || undefined,
         disabled: isDisabled,
         onKeyDown: event => {
-          if (event.key === 'ArrowDown' && !popover.isOpen && !isDisabled) {
+          if (event.key === 'ArrowDown' && !isOpen && !isDisabled) {
             event.preventDefault();
             popover.show();
           }
@@ -281,14 +342,14 @@ export function ComplexSelector({
         // IS the trigger's icon element — one node carrying the box, the
         // color, the rotation, and the theme target.
         ,
-        xstyle: [styles.triggerIcon, styles.triggerIconRotation, popover.isOpen && styles.triggerIconOpen],
+        xstyle: [styles.triggerIcon, styles.triggerIconRotation, isOpen && styles.triggerIconOpen],
         ...themeProps('complex-selector-indicator-icon', {
-          state: popover.isOpen ? 'expanded' : 'collapsed'
+          state: isOpen ? 'expanded' : 'collapsed'
         })
       })]
     }), popover.render(content, {
       placement,
-      alignment: 'start',
+      alignment,
       offset: spacingVars['--spacing-1'],
       xstyle: [styles.popover, layerAnimations[placement]]
     })]
@@ -308,7 +369,7 @@ export function ComplexSelector({
       message: status.message,
       messageID: status.message ? statusMessageId : undefined
     } : undefined,
-    statusVariant: statusVariant,
+    statusVariant: effectiveStatusVariant,
     labelTooltip: labelTooltip,
     width: width,
     children: selectorContent

package/dist/ComplexSelector/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * @file index.ts
- * @output Exports ComplexSelector and types
+ * @output Exports ComplexSelector and its trigger-size contract types
  * @position Public API entry point
  */
-export { ComplexSelector, type ComplexSelectorProps, type ComplexSelectorRenderState, type ComplexSelectorSize, type ComplexSelectorStatus, } from './ComplexSelector';
+export { ComplexSelector, type ComplexSelectorHandle, type ComplexSelectorProps, type ComplexSelectorRenderState, type ComplexSelectorSize, type ComplexSelectorStatus, type ComplexSelectorVariant, } from './ComplexSelector';
 //# sourceMappingURL=index.d.ts.map

package/dist/ComplexSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,GAC3B,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,eAAe,EACf,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,GAC5B,MAAM,mBAAmB,CAAC"}

package/dist/ComplexSelector/index.js

@@ -4,7 +4,7 @@
 
 /**
  * @file index.ts
- * @output Exports ComplexSelector and types
+ * @output Exports ComplexSelector and its trigger-size contract types
  * @position Public API entry point
  */
 export { ComplexSelector } from "./ComplexSelector.js";

package/dist/DateTimeInput/DateTimeInput.d.ts.map

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

package/dist/DateTimeInput/DateTimeInput.js

@@ -287,10 +287,10 @@ export function DateTimeInput({
   }, [timePendingInput, hasSeconds, timeMin, timeMax]);
   const resolvedTimePlaceholder = useMemo(() => {
     if (isTimeFocused && !timeDisplayValue) {
-      return hourFormat === '12h' ? 'e.g., 2:30 PM' : 'e.g., 14:30';
+      return hourFormat === '12h' ? t('@astryx.dateTimeInput.timeHint12h') : t('@astryx.dateTimeInput.timeHint24h');
     }
     return timePlaceholder;
-  }, [isTimeFocused, timeDisplayValue, hourFormat, timePlaceholder]);
+  }, [isTimeFocused, timeDisplayValue, hourFormat, timePlaceholder, t]);
 
   // --- Unified change handler ---
   const fireChange = useCallback(newValue => {

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,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;AAqF5C,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,CAoVX;yBAtVe,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;AAqF5C,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,CAwVX;yBA1Ve,mBAAmB"}

package/dist/DropdownMenu/DropdownMenuSubMenu.js

@@ -198,9 +198,13 @@ export function DropdownMenuSubMenu(props) {
 
   // Hover-intent: entering the trigger opens after a short delay; leaving
   // either surface closes after a delay. Hover-open does not steal focus.
+  // Hover intent and the shared hover→click guard only: this level owns its own
+  // click handling, roving focus and typeahead. popover="manual", so the
+  // invoker wiring other consumers need does not apply.
   const {
     triggerProps,
-    contentProps
+    contentProps,
+    confirmHoverOpen
   } = useMenuHover({
     show: showLayer,
     hide: hideLayer,
@@ -213,18 +217,12 @@ export function DropdownMenuSubMenu(props) {
     }
     layer.show();
     if (options?.focusFirst) {
-      requestAnimationFrame(() => {
-        // Move focus into the flyout. When it has no focusable items yet
-        // (e.g. an async submenu showing only a disabled "Loading…" row via
-        // hasSpinner), focusFirst() finds nothing — fall back to focusing the
-        // flyout container itself so keyboard ownership still transfers off
-        // the parent list. Otherwise the parent would keep focus, letting
-        // arrow keys rove the parent while the empty flyout stays open.
-        const focusedItem = focusFirst();
-        if (!focusedItem) {
-          menuRef.current?.focus();
-        }
-      });
+      // Synchronous by design — see the focus note in useMenuHover. A
+      // still-loading flyout has no focusable item, so fall back to the
+      // container: keyboard ownership must leave the parent list either way.
+      if (!focusFirst()) {
+        menuRef.current?.focus();
+      }
     }
   }, [canOpen, layer, focusFirst, menuRef]);
   const close = useCallback(options => {
@@ -244,8 +242,14 @@ export function DropdownMenuSubMenu(props) {
     if (isDisabled) {
       return;
     }
-    // Click toggles the flyout, moving focus into it on open.
+    // Toggles, except for the click that follows a hover-open (#3121).
     if (isOpen) {
+      if (confirmHoverOpen()) {
+        if (!focusFirst()) {
+          menuRef.current?.focus();
+        }
+        return;
+      }
       close({
         focusTrigger: true
       });
@@ -254,7 +258,7 @@ export function DropdownMenuSubMenu(props) {
         focusFirst: true
       });
     }
-  }, [isDisabled, isOpen, open, close]);
+  }, [isDisabled, isOpen, open, close, confirmHoverOpen, focusFirst, menuRef]);
   const handleTriggerKeyDown = useCallback(e => {
     if (isDisabled) {
       return;

package/dist/HoverCard/HoverCard.d.ts

@@ -2,7 +2,7 @@
  * @file HoverCard.tsx
  * @input Uses React, useHoverCard hook
  * @output Exports HoverCard component for hover/focus triggered layers
- * @position Layer component; uses inline-safe trigger wrapper and renders the floating layer inline
+ * @position Layer component; inline-safe trigger wrapper, floating layer hosted by useLayer
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/HoverCard/HoverCard.test.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAe,KAAK,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AACxE,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EAAC,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AAiB1D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;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;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,SAAgB,EAChB,KAAK,EACL,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CAiH/B;yBAlIe,SAAS"}
+{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAe,KAAK,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AACxE,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EAAC,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AAiB1D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;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;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,SAAgB,EAChB,KAAK,EACL,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CAyG/B;yBA1He,SAAS"}

package/dist/HoverCard/HoverCard.js

@@ -6,7 +6,7 @@
  * @file HoverCard.tsx
  * @input Uses React, useHoverCard hook
  * @output Exports HoverCard component for hover/focus triggered layers
- * @position Layer component; uses inline-safe trigger wrapper and renders the floating layer inline
+ * @position Layer component; inline-safe trigger wrapper, floating layer hosted by useLayer
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/HoverCard/HoverCard.test.tsx
@@ -127,18 +127,10 @@ export function HoverCard({
     };
   }, [textOnly, hoverCard.ref, hoverCard.describedBy]);
 
-  // Render the floating layer inline, in the same place on the server and the
-  // client. The layer is a `popover` element opened via the Popover API, so the
-  // browser promotes it to the top layer when shown — that already escapes
-  // ancestor clipping, stacking, and transform containing-block traps, and CSS
-  // anchor positioning resolves the trigger reference regardless of where the
-  // element sits in the DOM, so no portal is needed to "escape" layout.
-  //
-  // The layer renders as inline-safe phrasing markup (a `<span>`, see
-  // useHoverCard), which stays put inside a `<p>` instead of being reparented
-  // by the HTML parser. That keeps the server markup and the first client
-  // render identical, so there is no hydration mismatch — and it preserves the
-  // inline-safety guarantee (no block elements injected into a paragraph).
+  // While closed, useLayer leaves only an inert <template> marker at this JSX
+  // position. When the card needs to open, it uses that marker to keep the
+  // final layer inline when the parent is safe or portal it outside a <p>,
+  // link, or other ancestor that cannot contain it safely.
   const renderedHoverCard = hoverCard.renderHoverCard(content, {
     xstyle,
     className,

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,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAgC3B;;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,CAiT5E"}
+{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AA4B3B;;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,CAkT5E"}

package/dist/HoverCard/useHoverCard.js

@@ -88,6 +88,7 @@ export function useHoverCard(options = {}) {
   } = options;
   const layer = useLayer({
     mode: 'context',
+    lazyMount: true,
     onShow,
     onHide
   });
@@ -254,15 +255,15 @@ export function useHoverCard(options = {}) {
       // 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.
+      // div 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'
+      // useLayer mounts only after it has verified or corrected the parent,
+      // so rich HoverCard content can use block-safe markup.
+      as: 'div'
     };
-    return layer.render(/*#__PURE__*/_jsx("span", {
+    return layer.render(/*#__PURE__*/_jsx("div", {
       ...{
         className: "x1lliihq x1vlblms xvmdzux x126nfab x1t818jl"
       },

package/dist/InputGroup/groupStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"groupStyles.d.ts","sourceRoot":"","sources":["../../src/InputGroup/groupStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EAmCtB,CAAC"}
+{"version":3,"file":"groupStyles.d.ts","sourceRoot":"","sources":["../../src/InputGroup/groupStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAQ3C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EA6BtB,CAAC"}

package/dist/InputGroup/groupStyles.js

@@ -10,6 +10,11 @@
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { radiusVars, borderVars } from "../theme/tokens.stylex.js";
+
+// A grouped control may be followed by context-layer infrastructure rather
+// than another control. Neither the inert marker nor the popover is a visual
+// group member, so skip both when finding the trailing edge.
+const IS_LAST_ITEM = ':not(:has(~ *:not([popover]):not(template)))';
 export const groupStyles = {
   inGroup: {
     kUk6DE: "x98rzlu",
@@ -18,8 +23,8 @@ export const groupStyles = {
     keTefX: "xd10s4z x1pwwqoy",
     krdFHd: "x15mokao x8eehn2",
     kVL7Gh: "xbiv7yw x1xrp5p4",
-    kfmiAY: "x1ga7v0g x11xp8u1 xpufgd0 x1ir7nn6",
-    kT0f0o: "x16uus16 x747jw7 xxd14kb x1vej5at",
+    kfmiAY: "x1ga7v0g x1tzxhge",
+    kT0f0o: "x16uus16 x1rmb4wm",
     kXnDq0: "x1rm9qnc",
     $$css: true
   }

package/dist/Layer/layerHost.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Return the corrective portal target for a layer's intended inline parent.
+ *
+ * A null result means the inline parent and all of its ancestors are safe, so
+ * the layer should stay at its JSX position. Otherwise the result is the
+ * nearest element outside every unsafe ancestor around that position.
+ *
+ * Walking up from the actual render position (rather than the trigger, or
+ * portaling to `document.body`) keeps the two things a layer inherits there:
+ *
+ * - **Theme.** Theme scopes live on DOM ancestors. Staying as close as
+ *   possible to the intended render position preserves their component rules
+ *   and custom properties; `document.body` may sit outside a nested scope.
+ * - **Tab order.** Sequential focus follows DOM order, so a host near the
+ *   trigger keeps the layer's focusables next to it. (`show()` also passes
+ *   the trigger as the popover's invoker `source`, which pins focus order to
+ *   the invoker in browsers that support it.)
+ *
+ * The outermost unsafe ancestor matters. A safe div may itself sit inside an
+ * anchor; stopping at that div would still put the layer's buttons inside the
+ * link. Walking the whole chain ensures the target is outside both.
+ */
+export declare function resolveLayerPortalTarget(inlineParent: HTMLElement | null): HTMLElement | null;
+//# sourceMappingURL=layerHost.d.ts.map

package/dist/Layer/layerHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layerHost.d.ts","sourceRoot":"","sources":["../../src/Layer/layerHost.ts"],"names":[],"mappings":"AAqGA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,wBAAwB,CACtC,YAAY,EAAE,WAAW,GAAG,IAAI,GAC/B,WAAW,GAAG,IAAI,CAepB"}

package/dist/Layer/layerHost.js

@@ -0,0 +1,79 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file layerHost.ts
+ * @input Uses the layer's intended inline parent element
+ * @output Exports resolveLayerPortalTarget, the corrective portal target
+ * @position Layer utility; used by useLayer to place the popover in the DOM
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Layer/layerHost.test.ts
+ */
+
+/**
+ * Ancestors a layer must not be hosted inside.
+ *
+ * Two overlapping reasons, both verified in Chrome:
+ *
+ * 1. The HTML parser owns server markup. `<p>` and the heading-ish elements
+ *    take phrasing content only, so a block element inside one makes the
+ *    parser close the paragraph and reparent the rest — the layer's content
+ *    ends up in the page instead of the popover. A nested `<a>` triggers the
+ *    same tearing through the adoption agency algorithm.
+ * 2. Interactive ancestors capture the layer's own interactions. A card
+ *    hosted inside an `<a>` or `<button>` puts its links and buttons inside
+ *    that control: clicking one navigates the wrapping link, and every
+ *    focusable in the card joins the control's own tab stop.
+ *
+ * Inline formatting elements are on the list for a third, milder reason: a
+ * layer hosted in one inherits its typography (font-size, text-align), so a
+ * card in a 13px centered paragraph renders 13px and centered.
+ */
+const UNSAFE_HOSTS = new Set([
+// Phrasing-content-only containers
+'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'dt', 'pre', 'legend', 'data', 'dfn', 'meter', 'output', 'progress', 'option', 'optgroup',
+// Structural containers whose direct children are restricted. An inert
+// <template> marker is valid script-supporting content in these positions,
+// but the eventual div/span layer is not.
+'table', 'thead', 'tbody', 'tfoot', 'tr', 'colgroup', 'ul', 'ol', 'menu', 'dl', 'select', 'datalist', 'picture', 'hgroup', 'ruby', 'rt', 'rp',
+// Interactive containers
+'a', 'button', 'label', 'summary',
+// Inline formatting context
+'span', 'em', 'strong', 'b', 'i', 'u', 's', 'small', 'mark', 'code', 'kbd', 'samp', 'var', 'sub', 'sup', 'abbr', 'cite', 'q', 'time', 'bdi', 'bdo', 'ins', 'del']);
+
+/**
+ * Return the corrective portal target for a layer's intended inline parent.
+ *
+ * A null result means the inline parent and all of its ancestors are safe, so
+ * the layer should stay at its JSX position. Otherwise the result is the
+ * nearest element outside every unsafe ancestor around that position.
+ *
+ * Walking up from the actual render position (rather than the trigger, or
+ * portaling to `document.body`) keeps the two things a layer inherits there:
+ *
+ * - **Theme.** Theme scopes live on DOM ancestors. Staying as close as
+ *   possible to the intended render position preserves their component rules
+ *   and custom properties; `document.body` may sit outside a nested scope.
+ * - **Tab order.** Sequential focus follows DOM order, so a host near the
+ *   trigger keeps the layer's focusables next to it. (`show()` also passes
+ *   the trigger as the popover's invoker `source`, which pins focus order to
+ *   the invoker in browsers that support it.)
+ *
+ * The outermost unsafe ancestor matters. A safe div may itself sit inside an
+ * anchor; stopping at that div would still put the layer's buttons inside the
+ * link. Walking the whole chain ensures the target is outside both.
+ */
+export function resolveLayerPortalTarget(inlineParent) {
+  if (!inlineParent) {
+    return null;
+  }
+  let outermostUnsafe = null;
+  let node = inlineParent;
+  while (node) {
+    if (UNSAFE_HOSTS.has(node.tagName.toLowerCase())) {
+      outermostUnsafe = node;
+    }
+    node = node.parentElement;
+  }
+  return outermostUnsafe?.parentElement ?? null;
+}