@astryxdesign/core 0.7.7-canary.fc68123 → 0.7.7

package/src/CheckboxInput/CheckboxInput.tsx

@@ -46,7 +46,6 @@ import {useTooltip} from '../Tooltip/useTooltip';
 import {mergeProps} from '../utils/mergeProps';
 import {rtlStyles} from '../utils/rtlStyles';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
-import {indicatorPressScope} from '../internal/indicatorPress.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
@@ -64,11 +63,6 @@ import english from '../i18n/generated-english/CheckboxInput/CheckboxInput.gener
 
 registerEnglishFallback(english);
 
-/** Written by the touch press controller while the row is pressed. */
-const PRESSED_ON = '[data-astryx-press="on"]';
-/** Written by the touch press controller for the press's release. */
-const PRESSED_FADING = '[data-astryx-press="fading"]';
-
 // The touch press's paint, declared by the shared overlay styles on the
 // element the controller writes to (`pressedAlpha`) at the press's strength,
 // 1 while on and 1 → 0 over the release, and inherited resolved by the layer
@@ -84,20 +78,6 @@ const styles = stylex.create({
   containerLabelHidden: {
     gap: 0,
   },
-  // An indicator in another package may not name this row's private press
-  // attribute. So the row hands its touch press image down to an indicator
-  // that paints its own press, but only in its own press states. A pressed
-  // ancestor row reaches it no more than it reaches the built-in box. The
-  // property has no default: a layered stylesheet ranks a default above the
-  // arms. Only this row declares it. A menu item paints its own press, so a
-  // mapped indicator there paints none.
-  indicatorPressImage: {
-    '--_indicator-press-image': {
-      default: null,
-      [PRESSED_ON]: 'var(--_press-paint-image)',
-      [PRESSED_FADING]: 'var(--_press-paint-image)',
-    },
-  },
   checkboxWrapper: {
     position: 'relative',
     display: 'flex',
@@ -106,22 +86,15 @@ const styles = stylex.create({
     flexShrink: 0,
     isolation: 'isolate',
   },
-  // The owner paints this layer over the resolved indicator, so a plain theme
-  // replacement keeps the pressed feedback. An indicator with
-  // `indicatorPressScope` paints its own press from what the row hands down,
-  // so this layer stays off over it.
+  // The owner paints this layer over the resolved indicator, so a theme
+  // replacement cannot accidentally drop the component's pressed contract.
   // Two pointers, two press models (see interactionOverlay.stylex.ts): a
   // mouse keeps `:active`; under a coarse pointer that arm is dropped and the
   // touch press controller writes `data-astryx-press` on the row, which this layer
   // reads off the same scope marker as the hover tint.
   indicatorPressOverlay: {
     '::after': {
-      // `when.descendant` takes a pseudo-class; `:is(*)` matches any marked
-      // indicator.
-      content: {
-        default: '""',
-        [stylex.when.descendant(':is(*)', indicatorPressScope)]: 'none',
-      },
+      content: '""',
       position: 'absolute',
       inset: 0,
       borderRadius: radiusVars['--radius-inner'],
@@ -139,14 +112,15 @@ const styles = stylex.create({
       // what moves. Coarse pointers only, like the drop above.
       backgroundImage: {
         default: null,
-        [stylex.when.ancestor(PRESSED_ON, indicatorScope)]: {
-          default: null,
-          '@media (pointer: coarse)': pressedOverlayImage,
-        },
-        [stylex.when.ancestor(PRESSED_FADING, indicatorScope)]: {
+        [stylex.when.ancestor('[data-astryx-press="on"]', indicatorScope)]: {
           default: null,
           '@media (pointer: coarse)': pressedOverlayImage,
         },
+        [stylex.when.ancestor('[data-astryx-press="fading"]', indicatorScope)]:
+          {
+            default: null,
+            '@media (pointer: coarse)': pressedOverlayImage,
+          },
       },
     },
   },
@@ -476,7 +450,6 @@ export function CheckboxInput({
           // Hover and focus reach the checkbox visual through this ancestor
           // marker rather than props, so the whole row drives it.
           !isDisabled && indicatorScope,
-          !isDisabled && styles.indicatorPressImage,
           // The touch press's strength and release live on the row the
           // controller writes to; the layer over the checkbox box inherits
           // and paints it.

package/src/ComplexSelector/ComplexSelector.tsx

@@ -35,7 +35,6 @@ import {
 } from '../Field/fieldParts';
 import {useDevWarning} from '../hooks/useDevWarning';
 import {mergeRefs} from '../utils/mergeRefs';
-import {isFocusLost} from '../utils/focusReturn';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {Field, inputWrapperStyles} from '../Field';
@@ -348,10 +347,7 @@ export interface ComplexSelectorRenderState {
 export interface ComplexSelectorHandle {
   /** Open the selector surface. No-op when disabled or already open. */
   open(): void;
-  /**
-   * Close the selector surface. Focus returns to the trigger only when it
-   * would otherwise be lost; a caller-rendered trigger always gets it back.
-   */
+  /** Close the selector surface. Restores focus to the trigger. */
   close(): void;
   /** Toggle the selector surface open or closed. */
   toggle(): void;
@@ -634,22 +630,12 @@ export function ComplexSelector<Value>({
     onOpenChange?.(true);
   }, [onOpenChange]);
 
-  // The popup's content element, read when it closes.
-  const popupContentRef = useRef<HTMLElement | null>(null);
-  const hasCallerTrigger = renderTrigger != null;
   const handlePopoverHide = useCallback(() => {
-    const trigger = triggerRef.current;
-    // A press that moved focus to another control keeps it there. A caller's
-    // control always gets focus back. Focus moves before the callback, so a
-    // consumer that moves it from the callback wins.
-    if (
-      hasCallerTrigger ||
-      isFocusLost(popupContentRef.current, trigger?.ownerDocument)
-    ) {
-      trigger?.focus();
-    }
+    // Focus is restored first so a consumer that moves focus elsewhere from
+    // the callback wins, instead of being overwritten a line later.
+    triggerRef.current?.focus();
     onOpenChange?.(false);
-  }, [hasCallerTrigger, onOpenChange]);
+  }, [onOpenChange]);
 
   const popover = usePopover({
     dialogLabel: label,
@@ -659,7 +645,6 @@ export function ComplexSelector<Value>({
     onShow: handlePopoverShow,
     onHide: handlePopoverHide,
   });
-  popupContentRef.current = popover.contentRef.current;
 
   const isOpen = popover.isOpen;
 

package/src/ContextMenu/ContextMenu.tsx

@@ -712,14 +712,14 @@ export function ContextMenu({
   );
   const handleTriggerTouchEnd = useCallback(
     (event: React.TouchEvent<HTMLElement>) => {
-      handleLongPressTouchEnd(event);
+      handleLongPressTouchEnd();
       onTouchEndProp?.(event);
     },
     [handleLongPressTouchEnd, onTouchEndProp],
   );
   const handleTriggerTouchCancel = useCallback(
     (event: React.TouchEvent<HTMLElement>) => {
-      handleLongPressTouchCancel(event);
+      handleLongPressTouchCancel();
       onTouchCancelProp?.(event);
     },
     [handleLongPressTouchCancel, onTouchCancelProp],

package/src/Dialog/Dialog.tsx

@@ -81,10 +81,7 @@ import {themeProps} from '../utils/themeProps';
 import type {DialogVariantMap} from './index';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {useInteractionModalityTracking} from '../utils/interactionModality';
-import {
-  focusForLastInput,
-  prepareFocusReturnOnRemoval,
-} from '../utils/focusReturn';
+import {focusForLastInput, isFocusLost} from '../utils/focusReturn';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
@@ -656,15 +653,39 @@ export function Dialog({
   }, [isOpen, isInline]);
 
   // A dialog that unmounts while open (rendered only while open, or removed
-  // with the rest of a view) never runs the close branch above. Focus the
-  // removal lost goes back to the opener.
+  // with the rest of a view) never runs the close branch above, and removing a
+  // <dialog> does not run the browser's own focus return. Focus left inside
+  // it, or dropped to the body by the removal, goes back to the opener.
   useEffect(() => {
-    const dialog = dialogRef.current;
-    if (isInline || dialog == null) {
+    if (isInline) {
       return;
     }
-    const returnFocusOnRemoval = prepareFocusReturnOnRemoval(dialog);
-    return () => returnFocusOnRemoval(triggerElementRef.current);
+    const dialog = dialogRef.current;
+    // Read now: a removed iframe's document has no window, so its frame
+    // element can no longer be found once the dialog is gone.
+    const host = dialog?.ownerDocument.defaultView?.frameElement ?? null;
+    return () => {
+      const trigger = triggerElementRef.current;
+      if (dialog == null || trigger == null) {
+        return;
+      }
+      // Checked once the commit has finished: StrictMode's simulated unmount
+      // leaves the dialog in the document, and only a real removal returns
+      // focus.
+      queueMicrotask(() => {
+        if (dialog.isConnected || !trigger.isConnected) {
+          return;
+        }
+        // isFocusLost reads the dialog's own document. For a dialog in an
+        // iframe, the document that hosts the frame must also have lost focus
+        // or keep it on that frame, wherever the opener is: a control the
+        // user pressed outside the frame to remove the dialog, or the frame
+        // itself, keeps its focus.
+        if (isFocusLost(dialog) && (host == null || isFocusLost(host))) {
+          focusForLastInput(trigger);
+        }
+      });
+    };
   }, [isInline]);
 
   // Host app-global surfaces (toasts) inside this modal while it is open, so

package/src/Field/Field.tsx

@@ -25,11 +25,11 @@ import {FieldStatus} from '../FieldStatus/FieldStatus';
 import {useFieldStatusAnnouncement} from '../FieldStatus/useFieldStatusAnnouncement';
 import {spacingVars, borderVars, sizeVars} from '../theme/tokens.stylex';
 import type {IconType} from '../Icon';
-import {mergeProps} from '../utils/mergeProps';
+import {mergeProps} from '../utils';
 import {useDevWarning} from '../hooks/useDevWarning';
 import {FormLayoutContext} from '../FormLayout/FormLayoutContext';
 import {Text} from '../Text/Text';
-import {VisuallyHidden} from '../VisuallyHidden/VisuallyHidden';
+import {VisuallyHidden} from '../VisuallyHidden';
 import {themeProps} from '../utils/themeProps';
 import type {FieldStatusPlacement} from './fieldStatusPlacement';
 

package/src/HoverCard/HoverCard.doc.mjs

@@ -98,8 +98,7 @@ export const docs = {
         {
           name: 'focusTrigger',
           type: "'auto' | 'always' | 'never'",
-          description:
-            'When focus should open the hover card. auto opens when the trigger itself takes focus, or focus lands inside a trigger that is focusable at that moment, so a roving-tabindex member opens when the arrow keys reach it.',
+          description: 'Controls when focus events trigger the hover card.',
           default: "'auto'",
         },
         {
@@ -304,8 +303,7 @@ export const docsZh = {
         {
           name: 'focusTrigger',
           type: "'auto' | 'always' | 'never'",
-          description:
-            '焦点何时打开悬浮卡片。auto 在触发元素自身获得焦点，或焦点落在当时可聚焦的触发元素内部时打开，因此方向键到达漫游 tabindex 成员时也会打开。',
+          description: '控制焦点事件何时触发悬浮卡片。',
           default: "'auto'",
         },
         {

package/src/HoverCard/HoverCard.tsx

@@ -16,14 +16,7 @@
  * - /packages/cli/assets/templates/blocks/components/HoverCard/ (showcase blocks)
  */
 
-import {
-  useCallback,
-  useRef,
-  useState,
-  type ReactElement,
-  type ReactNode,
-} from 'react';
-import {observeMutations} from '../utils/sharedMutationObserver';
+import {useCallback, useRef, type ReactElement, type ReactNode} from 'react';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import * as stylex from '@stylexjs/stylex';
 import {
@@ -155,10 +148,9 @@ export interface HoverCardProps extends Pick<
 
   /**
    * When to trigger on focus:
-   * - `auto`: focus on the trigger itself, or within a trigger that is
-   *   focusable when focus arrives
-   * - `always`: focus on the trigger or anything inside it
-   * - `never`: never on focus (for composite widgets)
+   * - `auto`: Only if element is naturally focusable
+   * - `always`: Always attach focus listeners
+   * - `never`: Never attach focus listeners (for composite widgets)
    *
    * @default 'auto'
    */
@@ -311,28 +303,6 @@ export function HoverCard({
     onHide: handleHide,
   });
 
-  // The wrapper's first element is the trigger, and it can be replaced after
-  // mount: by new children, or by a child component that swaps its own root
-  // without a render here. Syncs with the DOM: on a replacement the wiring
-  // below re-runs, so the old element is released before the new one is wired.
-  const [triggerReplacements, setTriggerReplacements] = useState(0);
-  const observedTriggerRef = useRef<Element | null>(null);
-  useIsomorphicLayoutEffect(() => {
-    const wrapper = wrapperRef.current;
-    if (textOnly || wrapper == null) {
-      return;
-    }
-    observedTriggerRef.current = wrapper.firstElementChild;
-    return observeMutations(wrapper, {childList: true}, () => {
-      const trigger = wrapper.firstElementChild;
-      if (trigger === observedTriggerRef.current) {
-        return;
-      }
-      observedTriggerRef.current = trigger;
-      setTriggerReplacements(count => count + 1);
-    });
-  }, [textOnly]);
-
   // For element children with display:contents, attach ref to first child
   useIsomorphicLayoutEffect(() => {
     if (textOnly) {
@@ -437,7 +407,6 @@ export function HoverCard({
     hoverCard.id,
     hoverCard.isOpen,
     hoverCard.describedBy,
-    triggerReplacements,
   ]);
 
   // While closed, useLayer leaves only an inert <template> marker at this JSX

package/src/HoverCard/useHoverCard.doc.mjs

@@ -5,159 +5,37 @@ export const docs = {
   name: 'useHoverCard',
   displayName: 'useHoverCard',
   group: 'HoverCard',
-  keywords: [
-    'hovercard',
-    'hover',
-    'preview',
-    'card',
-    'tooltip',
-    'popup',
-    'floating',
-    'anchor',
-  ],
+  keywords: ['hovercard', 'hover', 'preview', 'card', 'tooltip', 'popup', 'floating', 'anchor'],
   params: [
-    {
-      name: 'placement',
-      type: "'above' | 'below' | 'start' | 'end'",
-      description:
-        "Position relative to the trigger. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).",
-      default: "'above'",
-    },
-    {
-      name: 'alignment',
-      type: "'start' | 'center' | 'end'",
-      description:
-        "Alignment along the placement axis. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).",
-      default: "'center'",
-    },
-    {
-      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 opens when the trigger itself takes focus, or focus lands inside a trigger that is focusable at that moment, so a roving-tabindex member opens when the arrow keys reach it.',
-      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.',
-    },
-    {
-      name: 'isDefaultOpen',
-      type: 'boolean',
-      description: 'Whether the hover card should be shown on mount.',
-      default: 'false',
-    },
-    {
-      name: 'onShow',
-      type: '() => void',
-      description: 'Callback fired when the hover card becomes visible.',
-    },
-    {
-      name: 'onHide',
-      type: '() => void',
-      description: 'Callback fired when the hover card is hidden.',
-    },
+    {name: 'placement', type: "'above' | 'below' | 'start' | 'end'", description: "Position relative to the trigger. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).", default: "'above'"},
+    {name: 'alignment', type: "'start' | 'center' | 'end'", description: "Alignment along the placement axis. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).", default: "'center'"},
+    {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 (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.'},
+    {name: 'isDefaultOpen', type: 'boolean', description: 'Whether the hover card should be shown on mount.', default: 'false'},
+    {name: 'onShow', type: '() => void', description: 'Callback fired when the hover card becomes visible.'},
+    {name: 'onHide', type: '() => void', description: 'Callback fired when the hover card is hidden.'},
   ],
   returns: [
-    {
-      name: 'ref',
-      type: 'RefCallback<HTMLElement>',
-      description:
-        'Combined ref that sets both position and interaction on the same trigger element.',
-    },
-    {
-      name: 'positionRef',
-      type: 'RefCallback<HTMLElement>',
-      description:
-        'Ref for the positioning anchor element. Use when position and interaction live on different elements.',
-    },
-    {
-      name: 'interactionRef',
-      type: 'RefCallback<HTMLElement>',
-      description:
-        'Ref for the hover/focus interaction element. Use with positionRef for split trigger patterns.',
-    },
-    {
-      name: 'anchorId',
-      type: 'string',
-      description: 'CSS anchor name for advanced positioning cases.',
-    },
-    {
-      name: 'describedBy',
-      type: 'string',
-      description: 'ID to compose into aria-describedby on the trigger.',
-    },
-    {
-      name: 'renderHoverCard',
-      type: "(children: ReactNode, props?: Omit<ContextRenderProps, 'positioning'>) => ReactNode",
-      description:
-        'Render function for the anchor-positioned hover card content. The positioning opt-out is excluded: the hover card always derives its position from placement/alignment.',
-    },
-    {
-      name: 'show',
-      type: '() => void',
-      description: 'Imperatively show the hover card immediately.',
-    },
-    {
-      name: 'hide',
-      type: '() => void',
-      description: 'Imperatively hide the hover card immediately.',
-    },
+    {name: 'ref', type: 'RefCallback<HTMLElement>', description: 'Combined ref that sets both position and interaction on the same trigger element.'},
+    {name: 'positionRef', type: 'RefCallback<HTMLElement>', description: 'Ref for the positioning anchor element. Use when position and interaction live on different elements.'},
+    {name: 'interactionRef', type: 'RefCallback<HTMLElement>', description: 'Ref for the hover/focus interaction element. Use with positionRef for split trigger patterns.'},
+    {name: 'anchorId', type: 'string', description: 'CSS anchor name for advanced positioning cases.'},
+    {name: 'describedBy', type: 'string', description: 'ID to compose into aria-describedby on the trigger.'},
+    {name: 'renderHoverCard', type: "(children: ReactNode, props?: Omit<ContextRenderProps, 'positioning'>) => ReactNode", description: 'Render function for the anchor-positioned hover card content. The positioning opt-out is excluded: the hover card always derives its position from placement/alignment.'},
+    {name: 'show', type: '() => void', description: 'Imperatively show the hover card immediately.'},
+    {name: 'hide', type: '() => void', description: 'Imperatively hide the hover card immediately.'},
   ],
   usage: {
-    description:
-      'Headless hook for hover-triggered floating cards. Builds on useLayer with hover/focus intent detection, configurable delays, safe hover behavior, and accessible aria-describedby linking. Use for rich previews on hover when you need full control over the trigger or rendered content.',
+    description: 'Headless hook for hover-triggered floating cards. Builds on useLayer with hover/focus intent detection, configurable delays, safe hover behavior, and accessible aria-describedby linking. Use for rich previews on hover when you need full control over the trigger or rendered content.',
     bestPractices: [
-      {
-        guidance: true,
-        description:
-          'Use for rich content previews such as user profiles, entity summaries, and link previews.',
-      },
-      {
-        guidance: true,
-        description:
-          'Prefer the HoverCard component for standard trigger-content pairs; use the hook for custom trigger patterns.',
-      },
-      {
-        guidance: false,
-        description:
-          'Use for simple text hints: use Tooltip or useTooltip instead.',
-      },
+      {guidance: true, description: 'Use for rich content previews such as user profiles, entity summaries, and link previews.'},
+      {guidance: true, description: 'Prefer the HoverCard component for standard trigger-content pairs; use the hook for custom trigger patterns.'},
+      {guidance: false, description: 'Use for simple text hints: use Tooltip or useTooltip instead.'},
     ],
   },
   relatedComponents: ['HoverCard', 'Tooltip', 'Popover'],
@@ -168,24 +46,17 @@ export const docs = {
 
 /** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
-  description:
-    'Headless hover-triggered floating cards. Builds on useLayer w/ hover/focus intent, delays, safe hover behavior, aria-describedby. Use for rich previews when trigger/content rendering needs full control.',
+  description: 'Headless hover-triggered floating cards. Builds on useLayer w/ hover/focus intent, delays, safe hover behavior, aria-describedby. Use for rich previews when trigger/content rendering needs full control.',
   paramDescriptions: {
-    placement:
-      "position relative to trigger. logical: start/end follow the popover's inherited direction (RTL mirrors).",
-    alignment:
-      "alignment along placement axis. logical: start/end follow the popover's inherited direction (RTL mirrors).",
+    placement: 'position relative to trigger. logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
+    alignment: 'alignment along placement axis. logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
     delay: 'show delay in ms.',
     hideDelay: 'hide delay after mouse/focus leave in ms.',
-    focusTrigger:
-      'when focus opens hover card; auto = focus on the trigger, or inside a trigger focusable when focus arrives.',
-    touchTrigger:
-      'tap behavior with no hover; auto = tap unless trigger acts, tap = always, none = never.',
+    focusTrigger: 'when focus opens hover card; auto = naturally focusable elements only.',
+    touchTrigger: 'tap behavior with no hover; auto = tap unless trigger acts, tap = always, none = never.',
     isEnabled: 'whether hover/focus triggers are enabled.',
-    label:
-      'accessible name for popup. with label: named role="dialog"; without: role="group".',
-    isOpen:
-      'controlled open state: true force-show, false force-hide, undefined unmanaged.',
+    label: 'accessible name for popup. with label: named role="dialog"; without: role="group".',
+    isOpen: 'controlled open state: true force-show, false force-hide, undefined unmanaged.',
     isDefaultOpen: 'show on mount.',
     onShow: 'fires when hover card becomes visible.',
     onHide: 'fires when hover card hides.',
@@ -201,24 +72,11 @@ export const docsDense = {
     hide: 'hide immediately.',
   },
   usage: {
-    description:
-      'Headless hover-triggered floating cards. Builds on useLayer w/ hover/focus intent, delays, safe hover behavior, aria-describedby. Use for rich previews when trigger/content rendering needs full control.',
+    description: 'Headless hover-triggered floating cards. Builds on useLayer w/ hover/focus intent, delays, safe hover behavior, aria-describedby. Use for rich previews when trigger/content rendering needs full control.',
     bestPractices: [
-      {
-        guidance: true,
-        description:
-          'Use for rich previews: profiles, entity summaries, link previews.',
-      },
-      {
-        guidance: true,
-        description:
-          'Prefer HoverCard for standard trigger-content pairs; use hook for custom trigger patterns.',
-      },
-      {
-        guidance: false,
-        description:
-          'Use for simple text hints: use Tooltip / useTooltip instead.',
-      },
+      {guidance: true, description: 'Use for rich previews: profiles, entity summaries, link previews.'},
+      {guidance: true, description: 'Prefer HoverCard for standard trigger-content pairs; use hook for custom trigger patterns.'},
+      {guidance: false, description: 'Use for simple text hints: use Tooltip / useTooltip instead.'},
     ],
   },
 };