@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/Grid/GridSpan.doc.mjs

@@ -19,7 +19,8 @@ export const docs = {
     {
       name: 'columns',
       type: "number | 'full'",
-      description: "Columns to span; use `'full'` to span all explicit columns.",
+      description:
+        "Columns to span; use `'full'` to span all explicit columns.",
     },
     {
       name: 'rows',
@@ -31,6 +32,28 @@ export const docs = {
       type: 'ReactNode',
       description: 'Content.',
     },
+    {
+      name: 'xstyle',
+      type: 'StyleXStyles',
+      description:
+        'StyleX styles applied to the span wrapper. Must be a stylex.create() value: not an inline style object like style={{}}.',
+    },
+    {
+      name: 'className',
+      type: 'string',
+      description: 'CSS class name applied to the span wrapper.',
+    },
+    {
+      name: 'style',
+      type: 'React.CSSProperties',
+      description:
+        'Inline styles applied to the span wrapper. When `columns` or `rows` is set, its `grid-column` or `grid-row` replaces the same property in `style`.',
+    },
+    {
+      name: 'ref',
+      type: 'React.Ref<HTMLDivElement>',
+      description: 'Ref forwarded to the span wrapper.',
+    },
   ],
 };
 
@@ -55,17 +78,43 @@ export const docsZh = {
       type: 'ReactNode',
       description: '内容。',
     },
+    {
+      name: 'xstyle',
+      type: 'StyleXStyles',
+      description:
+        '应用于跨度包装元素的 StyleX 样式。必须是 stylex.create() 的值，而不是 style={{}} 这样的内联样式对象。',
+    },
+    {
+      name: 'className',
+      type: 'string',
+      description: '应用于跨度包装元素的 CSS 类名。',
+    },
+    {
+      name: 'style',
+      type: 'React.CSSProperties',
+      description:
+        '应用于跨度包装元素的内联样式。设置 `columns` 或 `rows` 时，其 `grid-column` 或 `grid-row` 会替换 `style` 中的同名属性。',
+    },
+    {
+      name: 'ref',
+      type: 'React.Ref<HTMLDivElement>',
+      description: '转发到跨度包装元素的 Ref。',
+    },
   ],
 };
 
 export const docsDense = {
   name: 'GridSpan',
-  isHiddenFromOverview: true,
   displayName: 'Grid Span',
   description: 'Grid item spanning multiple columns/rows.',
   propDescriptions: {
     columns: "Columns to span; 'full' spans all explicit columns.",
     rows: 'Rows to span.',
     children: 'Content.',
+    xstyle: 'StyleX styles on the span wrapper; stylex.create() value only.',
+    className: 'CSS class on the span wrapper.',
+    style:
+      'inline styles on the span wrapper; a set columns/rows replaces its grid-column/grid-row.',
+    ref: 'ref to the span wrapper div.',
   },
 };

package/src/Grid/GridSpan.tsx

@@ -7,8 +7,10 @@
  * @position Grid span component; controls grid item span
  *
  * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Grid/GridSpan.doc.mjs
  * - /packages/core/src/Grid/Grid.doc.mjs
  * - /packages/core/src/Grid/Grid.test.tsx
+ * - /apps/storybook/stories/GridSpan.stories.tsx
  * - /apps/storybook/stories/Grid.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Grid/ (showcase blocks)
  */

package/src/HStack/HStack.tsx

@@ -55,7 +55,8 @@ export interface HStackProps extends Omit<
 }
 
 /**
- * Horizontal stack component for arranging items left-to-right.
+ * Horizontal stack component that arranges items along the inline axis:
+ * left to right in LTR, right to left in RTL.
  * Convenience wrapper around `Stack` with `direction="horizontal"`.
  *
  * @example

package/src/Heading/Heading.tsx

@@ -9,10 +9,12 @@
  * @position Core implementation; lives in own Heading/ dir, re-exported by Text/
  *
  * SYNC: When modified, update these files to stay in sync:
- * - /packages/core/src/Text/Text.doc.mjs (props table, features, implementation notes)
+ * - /packages/core/src/Text/Heading.doc.mjs (props table, theming target)
+ * - /packages/core/src/Text/Text.doc.mjs (shared truncation and tooltip guidance)
  * - /packages/core/src/Heading/Heading.test.tsx (tests for new/changed behavior)
- * - /packages/core/src/Text/index.ts (exports if types change)
- * - /apps/storybook/stories/Text.stories.tsx (storybook stories)
+ * - /packages/core/src/Heading/index.ts (exports if types change)
+ * - /packages/core/src/Text/index.ts (re-exports if types change)
+ * - /apps/storybook/stories/Heading.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/Heading/ (showcase blocks)
  * - /packages/cli/assets/templates/blocks/components/Text/ (showcase blocks)
  */

package/src/HoverCard/HoverCard.doc.mjs

@@ -53,7 +53,8 @@ export const docs = {
         {
           name: 'children',
           type: 'ReactNode',
-          description: 'Trigger element that must accept a ref.',
+          description:
+            'The trigger. A single string or number is wrapped in a focusable inline span. Text that reaches HoverCard in several pieces, such as `Edited {when}`, gets no trigger, so pass one string, such as a template literal, or wrap it in a focusable element. With element children, HoverCard wires the first element, so that element does not need to accept a ref.',
         },
         {
           name: 'content',
@@ -104,7 +105,7 @@ export const docs = {
           name: 'touchTrigger',
           type: "'auto' | 'tap' | 'none'",
           description:
-            'What a tap does where there is no hover. auto opens on tap unless the trigger performs an action of its own (a button, link, or form control), whose tap belongs to the control. tap always opens. none never opens on touch. A tap-opened card is dismissed by a tap outside it.',
+            'What a tap does where there is no hover. auto opens on tap unless the trigger performs an action of its own (a button, link, or form control), whose tap belongs to the control; an aria-disabled control performs none, so a tap on it opens its reason. tap always opens. none never opens on touch. A tap-opened card is dismissed by a tap outside it.',
           default: "'auto'",
         },
         {
@@ -128,7 +129,8 @@ export const docs = {
         {
           name: 'hasHoverIndication',
           type: "'auto' | boolean",
-          description: 'Shows a dashed underline on the trigger element.',
+          description:
+            'Shows a dashed underline on a text trigger. auto shows it when children is a single string or number. It has no effect on an element trigger, which keeps its own styling.',
           default: "'auto'",
         },
         {
@@ -140,7 +142,25 @@ export const docs = {
         {
           name: 'isOpen',
           type: 'boolean',
-          description: 'Controlled open state for the hover card.',
+          description:
+            'Controlled open state. true holds the card open. false holds it closed against hover, but focus on the trigger still opens it. A controlled card answers Escape by calling onOpenChange(false) without closing; it closes when you set isOpen to false, and focus inside the card then returns to the trigger.',
+        },
+        {
+          name: 'xstyle',
+          type: 'StyleXStyles',
+          description:
+            'StyleX styles for the card surface, the element that carries the hover-card theme target.',
+        },
+        {
+          name: 'className',
+          type: 'string',
+          description:
+            'Class name added to the card surface, beside the hover-card target class.',
+        },
+        {
+          name: 'style',
+          type: 'CSSProperties',
+          description: 'Inline styles for the card surface.',
         },
       ],
     },
@@ -245,7 +265,8 @@ export const docsZh = {
         {
           name: 'children',
           type: 'ReactNode',
-          description: '必须接受 ref 的触发元素。',
+          description:
+            '触发元素。单个字符串或数字会被包裹在可聚焦的内联 span 中。分成多段到达的文本（例如 `Edited {when}`）不会得到触发器，请传入单个字符串（例如模板字符串）或用可聚焦元素包裹。传入元素时，HoverCard 连接第一个元素，因此该元素无需接受 ref。',
         },
         {
           name: 'content',
@@ -289,7 +310,7 @@ export const docsZh = {
           name: 'touchTrigger',
           type: "'auto' | 'tap' | 'none'",
           description:
-            '在没有悬停的触摸设备上，轻点的行为。auto：轻点即打开，除非触发元素本身会执行操作（按钮、链接、表单控件），此时轻点归该控件所有。tap：始终轻点打开。none：触摸永不打开。轻点打开的卡片可通过点击卡片外部关闭。',
+            '在没有悬停的触摸设备上，轻点的行为。auto：轻点即打开，除非触发元素本身会执行操作（按钮、链接、表单控件），此时轻点归该控件所有；设置了 aria-disabled 的控件不执行操作，因此轻点它会显示其原因。tap：始终轻点打开。none：触摸永不打开。轻点打开的卡片可通过点击卡片外部关闭。',
           default: "'auto'",
         },
         {
@@ -313,7 +334,8 @@ export const docsZh = {
         {
           name: 'hasHoverIndication',
           type: "'auto' | boolean",
-          description: '在触发元素上显示虚线下划线。',
+          description:
+            '在文本触发元素上显示虚线下划线。auto：当 children 是单个字符串或数字时显示。对元素触发器无效，元素保留自身样式。',
           default: "'auto'",
         },
         {
@@ -321,6 +343,28 @@ export const docsZh = {
           type: 'boolean',
           description: '是否在挂载时显示悬浮卡片。仍然可以关闭。',
         },
+        {
+          name: 'isOpen',
+          type: 'boolean',
+          description:
+            '受控的打开状态。true 保持卡片打开。false 使悬停无法打开卡片，但触发元素获得焦点时仍会打开。受控卡片响应 Escape 时调用 onOpenChange(false) 而不关闭；将 isOpen 设为 false 时关闭，此时卡片内的焦点返回触发元素。',
+        },
+        {
+          name: 'xstyle',
+          type: 'StyleXStyles',
+          description:
+            '卡片表面（带有 hover-card 主题目标的元素）的 StyleX 样式。',
+        },
+        {
+          name: 'className',
+          type: 'string',
+          description: '添加到卡片表面的类名，与 hover-card 目标类名并列。',
+        },
+        {
+          name: 'style',
+          type: 'CSSProperties',
+          description: '卡片表面的内联样式。',
+        },
       ],
     },
   ],
@@ -429,7 +473,8 @@ export const docsDense = {
       description:
         'Component wrapper for hover card overlay; richer overlay triggered on hover/focus.',
       propDescriptions: {
-        children: 'Trigger element; must accept ref.',
+        children:
+          'Trigger. A single string/number is wrapped in a focusable inline span; text in several pieces (`Edited {when}`) gets no trigger; pass one string or a focusable element. With elements, the first element is wired (no ref needed).',
         content: 'Hover card content.',
         placement:
           "Position relative to anchor element. Logical: start/end follow the popover's inherited direction (RTL mirrors).",
@@ -439,14 +484,20 @@ export const docsDense = {
         hideDelay: 'Hide delay in ms.',
         focusTrigger: 'Controls when focus events trigger hover card.',
         touchTrigger:
-          'Tap behavior where there is no hover. auto = tap opens unless the trigger acts (button/link/control); tap = always opens; none = never on touch. Tap-opened cards close on a tap outside.',
+          'Tap behavior where there is no hover. auto = tap opens unless the trigger acts (button/link/control; an aria-disabled control does not act); tap = always opens; none = never on touch. Tap-opened cards close on a tap outside.',
         isEnabled: 'Enable/disable hover + focus triggers.',
         label:
           'Accessible name for the popup. With label: named role="dialog"; without: role="group".',
         onOpenChange:
           'Callback when visibility changes; true=shown, false=hidden.',
-        hasHoverIndication: 'Dashed underline on trigger element.',
+        hasHoverIndication:
+          'Dashed underline on a text trigger. auto = single string/number children; no effect on element triggers.',
         isDefaultOpen: 'Show hover card on mount. Still dismissible.',
+        isOpen:
+          'Controlled open state. true holds open; false holds closed against hover, but trigger focus still opens it. Escape calls onOpenChange(false) without closing; setting false returns focus inside the card to the trigger.',
+        xstyle: 'StyleX styles for the card surface (hover-card target).',
+        className: 'Class added to the card surface.',
+        style: 'Inline styles for the card surface.',
       },
     },
   ],

package/src/HoverCard/HoverCard.tsx

@@ -10,6 +10,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/HoverCard/HoverCard.test.tsx
+ * - /packages/core/src/HoverCard/HoverCard.doc.mjs
  * - /packages/core/src/HoverCard/index.ts
  * - /apps/storybook/stories/HoverCard.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/HoverCard/ (showcase blocks)
@@ -190,9 +191,10 @@ export interface HoverCardProps extends Pick<
   onOpenChange?: (isOpen: boolean) => void;
 
   /**
-   * Whether to show hover indication (dashed underline) on the trigger.
-   * - `'auto'`: Show for text-only children
-   * - `true`: Always show
+   * Whether to show hover indication (dashed underline) on a text trigger.
+   * An element trigger keeps its own styling, so this has no effect on it.
+   * - `'auto'`: Show when children is a single string or number
+   * - `true`: Show on a text trigger
    * - `false`: Never show
    *
    * @default 'auto'
@@ -200,9 +202,10 @@ export interface HoverCardProps extends Pick<
   hasHoverIndication?: 'auto' | boolean;
 
   /**
-   * Controlled open state. When provided, overrides hover/focus triggers:
+   * Controlled open state. When provided, overrides the hover trigger:
    * - `true`: force-show the hover card (hover/focus hide is suppressed)
-   * - `false`: force-hide the hover card
+   * - `false`: hide the hover card and keep hover from opening it; focus on
+   *   the trigger still opens it
    * - `undefined`: uncontrolled — hover/focus triggers manage visibility
    *
    * A controlled hover card still takes Escape when it is the top-most layer,

package/src/HoverCard/useHoverCard.doc.mjs

@@ -12,7 +12,7 @@ export const docs = {
     {name: 'delay', type: 'number', description: 'Delay before showing the hover card on hover, in milliseconds.', default: '300'},
     {name: 'hideDelay', type: 'number', description: 'Delay before hiding after mouse or focus leaves, in milliseconds.', default: '200'},
     {name: 'focusTrigger', type: "'auto' | 'always' | 'never'", description: 'When focus should open the hover card. auto only attaches focus listeners to naturally focusable elements.', default: "'auto'"},
-    {name: 'touchTrigger', type: "'auto' | 'tap' | 'none'", description: 'What a tap does where there is no hover. auto opens on tap unless the trigger performs an action of its own; tap always opens; none never opens on touch.', default: "'auto'"},
+    {name: 'touchTrigger', type: "'auto' | 'tap' | 'none'", description: 'What a tap does where there is no hover. auto opens on tap unless the trigger performs an action of its own (an aria-disabled control performs none); tap always opens; none never opens on touch.', default: "'auto'"},
     {name: 'isEnabled', type: 'boolean', description: 'Whether hover and focus triggers are enabled.', default: 'true'},
     {name: 'label', type: 'string', description: 'Accessible name for the hover card popup. When provided, the popup is exposed as a named role="dialog"; when omitted, it falls back to role="group" (a group may validly be unnamed).'},
     {name: 'isOpen', type: 'boolean', description: 'Controlled open state. true force-shows, false force-hides, undefined lets hover/focus manage visibility.'},

package/src/HoverCard/useHoverCard.tsx

@@ -31,6 +31,7 @@ import {
   type LayerTouchTrigger,
 } from '../Layer/useTouchTrigger';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
+import {registerLayerSurface} from '../Layer/layerSurfacePress';
 import {useLayerDismissal} from '../Layer/useLayerDismissal';
 import {
   colorVars,
@@ -132,9 +133,10 @@ export interface HoverCardOptions {
   label?: string;
 
   /**
-   * Controlled open state. When provided, overrides hover/focus triggers:
+   * Controlled open state. When provided, overrides the hover trigger:
    * - `true`: force-show the hover card (hover/focus hide is suppressed)
-   * - `false`: force-hide the hover card
+   * - `false`: hide the hover card and keep hover from opening it; focus on
+   *   the trigger still opens it
    * - `undefined`: uncontrolled — hover/focus triggers manage visibility
    *
    * A controlled hover card still takes Escape when it is the top-most layer,
@@ -273,6 +275,7 @@ function isFocusable(element: HTMLElement): boolean {
  * {hoverCard.renderHoverCard(<ProfileCard user={user} />)}
  * ```
  */
+
 export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
   const {
     placement = 'above',
@@ -666,6 +669,11 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
 
       return renderLayer(
         <div
+          // FR11: a press inside the card acts only within the card. A
+          // registered surface counts as something else in the shared
+          // interactive-ancestor walk, so a clickable container around the
+          // trigger leaves it alone; document listeners still see it.
+          ref={registerLayerSurface}
           {...stylex.props(styles.content)}
           onMouseEnter={() => {
             // Touch synthesizes these over the card too; letting a tap inside

package/src/InputGroup/groupStyles.ts

@@ -26,8 +26,15 @@ const MEMBER = '[data-astryx-input-group-item]';
 // any sibling; only context-layer infrastructure (popovers, inert markers,
 // native dialog surfaces) is skipped. Followers are not always members, so
 // this rule cannot name them by the marker.
-const FOLLOWED = ':has(~ *:not([popover]):not(template):not(dialog))';
-const IS_LAST_ITEM = `:not(${FOLLOWED})`;
+//
+// `:nth-last-child(1 of S)`, not `:not(:has(~ S))`: the stylesheet is global,
+// and WebKit re-evaluates a sibling-relative `:has()` against every earlier
+// sibling on each insertion, so filling any container became quadratic
+// (ButtonGroup FR3). A member always matches S, so being the last of S is the
+// same as having no following S.
+const IS_LAST_ITEM =
+  ':nth-last-child(1 of :not([popover]):not(template):not(dialog))';
+const FOLLOWED = `:not(${IS_LAST_ITEM})`;
 
 // Button consumes InputGroup context anywhere below the group, including buttons
 // inside an input's own implementation. Keep the visual adaptation on direct

package/src/Item/Item.tsx

@@ -718,7 +718,7 @@ export function Item({
 
   // Inline rows are one line by definition, so the description always
   // ellipsizes there — a ReactNode description cannot wrap the row open.
-  const isInline = layout === 'inline' && description != null;
+  const isInline = layout === 'inline' && hasRenderableDescription;
 
   const descriptionTruncateStyle =
     descriptionLines != null
@@ -742,9 +742,9 @@ export function Item({
         )}>
         {label}
       </span>
-      {description != null && (
+      {hasRenderableDescription && (
         <span
-          id={hasRenderableDescription ? descriptionID : undefined}
+          id={descriptionID}
           {...stylex.props(
             styles.description,
             isInline && styles.inlineDescription,
@@ -772,7 +772,7 @@ export function Item({
 
   const content = (
     <>
-      {startContent != null && (
+      {isRenderable(startContent) && (
         <span
           {...stylex.props(
             styles.startContent,
@@ -830,7 +830,7 @@ export function Item({
         </span>
       )}
 
-      {endContent != null && (
+      {isRenderable(endContent) && (
         <span
           {...stylex.props(
             styles.endContent,

package/src/Item/ItemSwipeLayer.tsx

@@ -31,6 +31,7 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils/mergeProps';
 import {themeProps} from '../utils/themeProps';
+import {disabledInteractionProps} from '../utils/disabledInteraction';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 import {
@@ -307,13 +308,19 @@ export default function ItemSwipeLayer({
               <button
                 key={entry.id ?? entry.label}
                 type="button"
-                disabled={entry.isDisabled === true}
+                aria-disabled={entry.isDisabled === true ? true : undefined}
                 onClick={() =>
                   swipe.activateEntry(() => {
                     void entry.onActivate();
                     return entry.hasRemoval === true;
                   })
                 }
+                // A disabled entry stays focusable while the row rests open but
+                // is inert: it runs no `onActivate` and its click does not
+                // reach the row (spec:AST-085 FR1, FR2).
+                {...(entry.isDisabled === true
+                  ? disabledInteractionProps<HTMLButtonElement>()
+                  : null)}
                 {...mergeProps(
                   themeProps('item-swipe-action', {variant}),
                   focusOutlineProps.focusVisible(

package/src/Kbd/Kbd.tsx

@@ -19,7 +19,7 @@ import {mergeProps} from '../utils';
 import {isApplePlatform} from '../utils/isApplePlatform';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator, type TranslatorFn} from '../i18n';
+import type {TranslatorFn} from '../i18n';
 import {
   colorVars,
   spacingVars,
@@ -28,6 +28,13 @@ import {
   fontWeightVars,
   typeScaleVars,
 } from '../theme/tokens.stylex';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Kbd/Kbd.generated';
+
+registerEnglishFallback(english);
 
 const styles = stylex.create({
   wrapper: {
@@ -90,7 +97,9 @@ function getKeyDisplay(key: string, isMac: boolean, t: TranslatorFn): string {
   if (key === 'mod') {
     return isMac ? '\u2318' : t('@astryx.kbd.key.controlShort');
   }
-  if (key === 'escape') return t('@astryx.kbd.key.escapeShort');
+  if (key === 'escape') {
+    return t('@astryx.kbd.key.escapeShort');
+  }
   return KEY_DISPLAY.get(key) ?? key.toUpperCase();
 }
 
@@ -166,7 +175,7 @@ export interface KbdProps extends BaseProps<HTMLSpanElement> {
  * ```
  */
 export function Kbd({keys, ref, xstyle, className, style, ...rest}: KbdProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const isMac = useSyncExternalStore(
     subscribeToPlatformChanges,
     isApplePlatform,

package/src/Layer/layerClickBoundary.ts

@@ -0,0 +1,97 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file layerClickBoundary.ts
+ * @input React pointer, mouse, touch and click events on a layer root
+ * @output Exports layerClickBoundary, the props every layer content root
+ *   spreads, including the layer-root mark
+ * @position Internal to Layer; used by useLayer's renderers and the Dialog,
+ *   Drawer, Lightbox, MobileNav, BottomSheetPanel and ToastViewport roots.
+ *   Not exported from the package.
+ *
+ * A press that starts inside a layer runs the handlers inside the layer and
+ * the root's own, then stops propagating through the React tree, so no
+ * bubble-phase handler on an ancestor of the layer's JSX position receives it.
+ * Capture-phase handlers on those ancestors already ran. The stop is
+ * React-only: it marks the synthetic event stopped and never calls the
+ * native `stopPropagation()`, so document and window listeners (outside
+ * presses, light dismiss, deferred clicks) still receive the press.
+ */
+
+import type {SyntheticEvent} from 'react';
+import {layerRootProps} from '../privateAttributes/layerRoot.stylex';
+
+/** The React event props that stop at a layer root. */
+const BOUNDARY_EVENTS = [
+  'onClick',
+  'onAuxClick',
+  'onDoubleClick',
+  'onContextMenu',
+  'onMouseDown',
+  'onMouseUp',
+  'onMouseMove',
+  'onMouseOver',
+  'onMouseOut',
+  'onPointerDown',
+  'onPointerUp',
+  'onPointerMove',
+  'onPointerOver',
+  'onPointerOut',
+  'onPointerCancel',
+  'onGotPointerCapture',
+  'onLostPointerCapture',
+  'onTouchStart',
+  'onTouchMove',
+  'onTouchEnd',
+  'onTouchCancel',
+] as const;
+
+type BoundaryEvent = (typeof BOUNDARY_EVENTS)[number];
+type Handler = (event: SyntheticEvent) => void;
+
+export type LayerClickBoundaryProps = Record<BoundaryEvent, Handler> &
+  Readonly<Record<`data-${string}`, string>>;
+
+const returnTrue = () => true;
+
+/**
+ * Stop a synthetic event at this element for the rest of the React tree only.
+ * React's dispatch asks `isPropagationStopped()` before each further
+ * listener; the native event is left alone.
+ */
+function stopInReactTree(event: SyntheticEvent): void {
+  event.isPropagationStopped = returnTrue;
+}
+
+/**
+ * The boundary props for a layer content root. Pass the root's own props
+ * (its caller's rest props and its own handlers): for each boundary event, a
+ * handler found there runs first, then the event stops. Spread the result
+ * after the root's other props.
+ *
+ * @param own - The root's props; only its boundary-event handlers are read.
+ * @returns One handler per boundary event, to spread on the root element.
+ */
+export function layerClickBoundary(
+  own: Readonly<Record<string, unknown>> = {},
+): LayerClickBoundaryProps {
+  const props: Partial<Record<BoundaryEvent, Handler>> = {};
+  for (const name of BOUNDARY_EVENTS) {
+    const handler = own[name];
+    props[name] =
+      typeof handler === 'function'
+        ? event => {
+            (handler as Handler)(event);
+            stopInReactTree(event);
+          }
+        : stopInReactTree;
+  }
+  return {
+    // Every boundary event is set by the loop above.
+    ...(props as Record<BoundaryEvent, Handler>),
+    // Marks the root, so code outside the layer can find where it starts.
+    ...layerRootProps,
+  };
+}

package/src/Layer/layerStructureReset.stylex.ts

@@ -27,5 +27,10 @@ export const layerStructureReset = stylex.create({
     // fallback. A value set on the inner Stepper, through its `stepper` theme
     // target, or by a caller style on this layer root still applies.
     '--step-connector-gap': 'initial',
+    // A container that wraps with `overflow-wrap: anywhere` passes it to the
+    // Text inside it (Text and Heading FR3). Text in a layer opened from such
+    // a container keeps its own `break-word`: `initial` makes the variable
+    // invalid, so Text falls back.
+    '--_astryx-text-overflow-wrap': 'initial',
   },
 });

package/src/Layer/layerSurfacePress.ts

@@ -0,0 +1,35 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file layerSurfacePress.ts
+ * @input The content element of an open Tooltip or HoverCard surface.
+ * @output A registry of those elements, read only by the public
+ *   hasInteractiveAncestor, whose documentation promises that a press inside
+ *   one answers true.
+ * @position Kept until the next minor for that public answer; Core's own
+ *   containers rely on layer roots stopping such presses instead. Not
+ *   exported from the package.
+ */
+
+const surfaces = new WeakSet<Element>();
+
+/**
+ * Ref callback for a layer surface's content element. The layer root around
+ * it is registered too: a caller's `style`, `xstyle` or `className` (padding,
+ * for instance) lands there, so a press on that edge is still the surface's.
+ */
+export function registerLayerSurface(element: Element | null): void {
+  if (element == null) {
+    return;
+  }
+  surfaces.add(element);
+  const root = element.parentElement;
+  if (root?.hasAttribute('popover')) {
+    surfaces.add(root);
+  }
+}
+
+/** Whether this element is a registered layer surface. */
+export function isLayerSurface(element: Element): boolean {
+  return surfaces.has(element);
+}