@astryxdesign/core 0.7.7-canary.4a8a76e → 0.7.7-canary.4e495ec

package/src/CheckboxList/CheckboxListItem.tsx

@@ -24,6 +24,7 @@ import {colorVars} from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
 import {CheckboxInput} from '../CheckboxInput/CheckboxInput';
 import type {CheckboxInputProps} from '../CheckboxInput/CheckboxInput';
+import type {InputStatus} from '../Field/types';
 import {ListItem} from '../List/ListItem';
 import {ListContext} from '../List/ListContext';
 import {CheckboxListContext} from './CheckboxListContext';
@@ -149,6 +150,8 @@ export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
 // Component
 // =============================================================================
 
+const ERROR_STATUS: InputStatus = {type: 'error'};
+
 /**
  * The row's visible description is the checkbox's accessible description. Item
  * renders that element and owns its id, and publishes the id through
@@ -167,11 +170,17 @@ function DescribedCheckboxInput(
   props: Omit<CheckboxInputProps, 'aria-describedby'>,
 ) {
   const describedBy = use(ItemDescriptionContext);
-  const reasonID = use(CheckboxListContext)?.disabledMessageID;
+  const listContext = use(CheckboxListContext);
   return (
     <CheckboxInput
       {...props}
-      aria-describedby={joinAriaIDs(describedBy ?? undefined, reasonID)}
+      aria-describedby={joinAriaIDs(
+        describedBy ?? undefined,
+        listContext?.disabledMessageID,
+      )}
+      // The status has no message, so CheckboxInput renders nothing. The list
+      // renders the message.
+      status={listContext?.isInvalid ? ERROR_STATUS : undefined}
     />
   );
 }

package/src/DateInput/DateInput.tsx

@@ -884,12 +884,18 @@ function PointerDateField({
         if (!isEffectivelyDisabled) {
           popover.show({skipAutoFocus: true});
         }
-      } else if (e.key === 'Enter') {
+      } else if (
+        e.key === 'Enter' &&
+        (pendingInput !== null || isEffectivelyDisabled)
+      ) {
+        // Typed text holds Enter back, or a form would submit the value from
+        // before the commit. A disabled or busy field must not submit its
+        // form either. Otherwise Enter keeps its default, as in any text field.
         e.preventDefault();
         commitPendingInput();
       }
     },
-    [popover, commitPendingInput, isEffectivelyDisabled],
+    [popover, commitPendingInput, isEffectivelyDisabled, pendingInput],
   );
 
   const inputWrapper = (

package/src/DateTimeInput/DateTimeInput.tsx

@@ -1143,12 +1143,18 @@ function PointerDateTimeField({
         if (!isEffectivelyDisabled) {
           popover.show({skipAutoFocus: true});
         }
-      } else if (e.key === 'Enter') {
+      } else if (
+        e.key === 'Enter' &&
+        (datePendingInput !== null || isEffectivelyDisabled)
+      ) {
+        // Typed text holds Enter back, or a form would submit the value from
+        // before the commit. A disabled or busy field must not submit its
+        // form either. Otherwise Enter keeps its default, as in any text field.
         e.preventDefault();
         commitDatePendingInput();
       }
     },
-    [popover, commitDatePendingInput, isEffectivelyDisabled],
+    [popover, commitDatePendingInput, isEffectivelyDisabled, datePendingInput],
   );
 
   // --- Time-option popover (#2727) ---

package/src/Dialog/Dialog.tsx

@@ -52,6 +52,7 @@ import {LayerContentBoundary} from '../Layer/layerScopedContext';
 import {layerClickBoundary} from '../Layer/layerClickBoundary';
 import {LayerDepthProvider} from '../Layer/LayerDepthContext';
 import {useLayerDismissal} from '../Layer/useLayerDismissal';
+import {useBackdropPress} from '../Layer/useBackdropPress';
 import {useModalOutlet} from '../Layer/modalOutlet';
 import {
   colorVars,
@@ -84,6 +85,8 @@ import {focusForLastInput, isFocusLost} from '../utils/focusReturn';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+
+type PointerHandler = (event: React.PointerEvent<HTMLDialogElement>) => void;
 /**
  * Calculate a directional translate offset for dialog entry animation.
  * Returns a normalized vector from the trigger element toward the viewport
@@ -186,8 +189,22 @@ const styles = stylex.create({
     position: 'fixed',
     margin: 'auto',
     padding: 0,
-    borderWidth: 0,
-    borderStyle: 'none',
+    // The backdrop does not blur the page. Forced colors override the
+    // backdrop's colour, so a 1px border keeps the modal separate from the
+    // page. It is a border, not an outline: the focus ring
+    // (focusOutlineProps) owns the outline longhands on this element.
+    borderWidth: {
+      default: 0,
+      '@media (forced-colors: active)': 1,
+    },
+    borderStyle: {
+      default: 'none',
+      '@media (forced-colors: active)': 'solid',
+    },
+    borderColor: {
+      default: null,
+      '@media (forced-colors: active)': 'CanvasText',
+    },
     backgroundColor: colorVars['--color-background-surface'],
     '--_dialog-radius': radiusVars['--radius-container'],
     borderRadius: 'var(--_dialog-radius)',
@@ -233,11 +250,10 @@ const styles = stylex.create({
   openSettled: {
     animationName: 'none',
   },
-  // Backdrop using ::backdrop pseudo-element
+  // No backdrop-filter: a full-viewport blur is costly to repaint.
   backdrop: {
     '::backdrop': {
       backgroundColor: colorVars['--color-overlay'],
-      backdropFilter: 'blur(2px)',
     },
   },
   fullscreen: {
@@ -246,6 +262,8 @@ const styles = stylex.create({
     maxWidth: '100dvw',
     maxHeight: '100dvh',
     borderRadius: 0,
+    // Nothing of the page shows around a full-screen dialog: no edge.
+    borderWidth: 0,
     margin: 0,
     inset: 0,
   },
@@ -723,16 +741,16 @@ export function Dialog({
     }
   }, [isOpen, isInline, hasConsumerName, titleId]);
 
-  // Handle backdrop click — when the user clicks the ::backdrop pseudo-element,
-  // the event target is the <dialog> element itself; clicks on child content
-  // always target the child. This avoids false positives from native browser
+  // A press on the ::backdrop targets the <dialog> itself, so native browser
   // popups (date pickers, selects, color pickers) that render outside the
-  // dialog's bounding rect.
-  const handleClick = (event: React.MouseEvent<HTMLDialogElement>) => {
-    if (event.target === event.currentTarget && allowBackdropClick) {
-      onOpenChange(false);
-    }
-  };
+  // dialog's rect never count. The press must start and end there.
+  const handleBackdropPress = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const backdropPress = useBackdropPress(
+    handleBackdropPress,
+    allowBackdropClick,
+  );
 
   // The native `cancel` event is the browser's own close-watcher firing: an
   // Android back gesture, or a close request the stack never saw a press for.
@@ -890,8 +908,20 @@ export function Dialog({
       // written.
       {...layerClickBoundary({
         ...safeProps,
-        onClick: chainEventHandlers(handleClick, onClickProp),
+        onClick: chainEventHandlers(backdropPress.onClick, onClickProp),
       })}
+      onPointerDownCapture={chainEventHandlers(
+        backdropPress.onPointerDownCapture,
+        safeProps.onPointerDownCapture as PointerHandler | undefined,
+      )}
+      onPointerUpCapture={chainEventHandlers(
+        backdropPress.onPointerUpCapture,
+        safeProps.onPointerUpCapture as PointerHandler | undefined,
+      )}
+      onPointerCancelCapture={chainEventHandlers(
+        backdropPress.onPointerCancelCapture,
+        safeProps.onPointerCancelCapture as PointerHandler | undefined,
+      )}
       onCancel={handleCancel}
       aria-modal={isHydrating ? undefined : 'true'}
       // The default aria-labelledby (from a DialogHeader title) is set

package/src/Drawer/Drawer.tsx

@@ -78,9 +78,11 @@ import {layerTextReset} from '../Layer/layerTextReset.stylex';
 import {layerStructureReset} from '../Layer/layerStructureReset.stylex';
 import {LayerContentBoundary} from '../Layer/layerScopedContext';
 import {useModalOutlet} from '../Layer/modalOutlet';
+import {useBackdropPress} from '../Layer/useBackdropPress';
 import {layerClickBoundary} from '../Layer/layerClickBoundary';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 import {composeEventHandlers, mergeProps, themeProps} from '../utils';
+import {chainEventHandlers} from '../utils/chainEventHandlers';
 import {container, overlayPaddingReset} from '../Layout';
 import {
   containerPaddingBlockEndVarStyles,
@@ -92,6 +94,8 @@ import {
 import type {SpacingStep, SpacingToken} from '../Layout';
 import {useDrawerDialogPresence} from './useDrawerDialogPresence';
 
+type PointerHandler = (event: React.PointerEvent<HTMLDialogElement>) => void;
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -218,8 +222,8 @@ const styles = stylex.create({
   // Scrim via the browser's ::backdrop pseudo-element (top layer).
   scrim: {
     '::backdrop': {
+      // No backdrop-filter: a full-viewport blur is costly to repaint.
       backgroundColor: colorVars['--color-overlay'],
-      backdropFilter: 'blur(2px)',
       opacity: 0,
       transitionProperty: 'opacity',
       transitionDuration: durationVars['--duration-medium'],
@@ -543,15 +547,14 @@ export function Drawer({
     [allowEscape, handleDismiss, shouldDismissOnCloseRequest],
   );
 
-  // Clicks on the ::backdrop target the <dialog> element itself; clicks on
-  // drawer content always target a child (the content area fills the panel).
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLDialogElement>) => {
-      if (event.target === event.currentTarget && hasScrim && allowScrimClick) {
-        onOpenChange(false);
-      }
-    },
-    [allowScrimClick, hasScrim, onOpenChange],
+  // A press on the ::backdrop targets the <dialog> itself (the content area
+  // fills the panel). The press must start and end there.
+  const handleScrimPress = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const scrimPress = useBackdropPress(
+    handleScrimPress,
+    hasScrim && allowScrimClick,
   );
 
   const widthValue = typeof width === 'number' ? `${width}px` : width;
@@ -612,8 +615,22 @@ export function Drawer({
       // written.
       {...layerClickBoundary({
         ...safeProps,
-        onClick: composeEventHandlers(onClickProp, handleClick),
+        onClick: composeEventHandlers(onClickProp, scrimPress.onClick),
       })}
+      // The hook records where the press started first. The caller's capture
+      // handler then runs, also when a child prevented default.
+      onPointerDownCapture={chainEventHandlers(
+        scrimPress.onPointerDownCapture,
+        safeProps.onPointerDownCapture as PointerHandler | undefined,
+      )}
+      onPointerUpCapture={chainEventHandlers(
+        scrimPress.onPointerUpCapture,
+        safeProps.onPointerUpCapture as PointerHandler | undefined,
+      )}
+      onPointerCancelCapture={chainEventHandlers(
+        scrimPress.onPointerCancelCapture,
+        safeProps.onPointerCancelCapture as PointerHandler | undefined,
+      )}
       onKeyDown={onKeyDownProp}
       onCancel={handleCancel}>
       <ModalAnnounceProvider dialogRef={dialogRef} isOpen={isOpen && hasScrim}>

package/src/Drawer/useDrawerDialogPresence.ts

@@ -33,6 +33,7 @@ import {
 } from 'react';
 import {flushSync} from 'react-dom';
 import {notifyTopLayerEntry} from '../Layer/modalOutlet';
+import {runPopoverOperation} from '../Layer/popoverOperations';
 
 /** Slack past the computed transition before the backstop gives up waiting. */
 const EXIT_BACKSTOP_BUFFER_MS = 50;
@@ -71,7 +72,10 @@ function showDrawerHost(dialog: HTMLDialogElement, isModal: boolean): void {
   if (isModal) {
     dialog.showModal();
   } else if (typeof dialog.showPopover === 'function') {
-    dialog.showPopover();
+    // The dialog's show focuses its first control. A tooltip on that control
+    // then asks to show. The browser refuses a show inside another show.
+    // Counting this show makes the tooltip wait until it ends.
+    runPopoverOperation(dialog.ownerDocument, () => dialog.showPopover());
     // The drawer is now the newest top-layer entry: global hosts shown before
     // it (the toast viewport) re-enter above it, as they do above a modal.
     notifyTopLayerEntry();

package/src/Field/PanelSearchInput.tsx

@@ -58,6 +58,7 @@ import {
 } from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
 import {textEntryTraitAttributes} from './textEntryTraits';
+import {inputWrapperStyles} from './inputStyles.stylex';
 
 const styles = stylex.create({
   // Gutter only. Matches the option list's own padding so the field below
@@ -185,6 +186,14 @@ export interface PanelSearchInputProps extends Omit<
    * the field to the same height as its rows.
    */
   fieldXstyle?: StyleXStyles;
+  /**
+   * Draw the field as the shared input box — the input border, accent while
+   * focused, surface and radius — instead of the borderless panel row. A
+   * touch sheet is a full-width surface, not a bordered panel, so its field
+   * reads as a form input.
+   * @default false
+   */
+  hasInputBox?: boolean;
 }
 
 /**
@@ -208,6 +217,7 @@ export function PanelSearchInput({
   onBlur,
   onContainerKeyDown,
   fieldXstyle,
+  hasInputBox = false,
   xstyle,
   className,
   style,
@@ -268,6 +278,7 @@ export function PanelSearchInput({
         {...stylex.props(
           styles.field,
           isKeyboardFocus && styles.fieldKeyboardFocus,
+          hasInputBox && inputWrapperStyles.base,
           fieldXstyle,
         )}>
         <Icon icon="search" size="sm" color="secondary" xstyle={styles.icon} />

package/src/InfoTip/InfoTip.doc.mjs

@@ -66,7 +66,7 @@ export const docs = {
       {
         guidance: true,
         description:
-          'Rely on InfoTip rather than a hand-rolled info button on touch: it sets Tooltip triggerBehavior to toggle, so a tap, a click, Enter, or Space pins the tooltip even though the trigger is a button, and a tap outside dismisses it.',
+          'Rely on InfoTip rather than a hand-rolled info button on touch: it pins its help on a press, so a tap, a click, Enter, or Space pins the tooltip even though the trigger is a button, and a tap outside dismisses it.',
       },
       {
         guidance: false,
@@ -131,7 +131,7 @@ export const docsZh = {
       {
         guidance: true,
         description:
-          'Rely on InfoTip rather than a hand-rolled info button on touch: it sets Tooltip triggerBehavior to toggle, so a tap, a click, Enter, or Space pins the tooltip even though the trigger is a button, and a tap outside dismisses it.',
+          'Rely on InfoTip rather than a hand-rolled info button on touch: it pins its help on a press, so a tap, a click, Enter, or Space pins the tooltip even though the trigger is a button, and a tap outside dismisses it.',
       },
       {
         guidance: false,
@@ -168,7 +168,7 @@ export const docsDense = {
       {
         guidance: true,
         description:
-          'Rely on InfoTip rather than a hand-rolled info button on touch: it sets Tooltip triggerBehavior to toggle, so a tap, a click, Enter, or Space pins the tooltip even though the trigger is a button, and a tap outside dismisses it.',
+          'Rely on InfoTip rather than a hand-rolled info button on touch: it pins its help on a press, so a tap, a click, Enter, or Space pins the tooltip even though the trigger is a button, and a tap outside dismisses it.',
       },
       {
         guidance: false,

package/src/InfoTip/InfoTip.tsx

@@ -23,7 +23,7 @@ import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {Icon, type IconSize} from '../Icon/Icon';
-import {Tooltip} from '../Tooltip/Tooltip';
+import {TooltipWithTriggerBehavior} from '../Tooltip/Tooltip';
 import {
   registerEnglishFallback,
   useComponentTranslator,
@@ -122,8 +122,8 @@ const styles = stylex.create({
  * labels, values, and metrics for permission notes, metric definitions, and
  * field help.
  *
- * InfoTip is Tooltip with `triggerBehavior="toggle"` on a named button: Tooltip
- * opens, pins, announces, and closes the help. The info icon resolves from
+ * InfoTip is a press-to-pin Tooltip on a named button: Tooltip opens, pins,
+ * announces, and closes the help. The info icon resolves from
  * the icon registry, so themes can replace it.
  *
  * @example
@@ -157,7 +157,7 @@ export function InfoTip({
   // stack takes Escape, so one press never closes both the help and an
   // enclosing Dialog.
   return (
-    <Tooltip
+    <TooltipWithTriggerBehavior
       content={content}
       // The tooltip is the button's only purpose. A click, a tap, Enter, or
       // Space pins it open, and the press stops at the button. So an InfoTip's
@@ -179,7 +179,7 @@ export function InfoTip({
         )}>
         <Icon icon="info" size={size} />
       </button>
-    </Tooltip>
+    </TooltipWithTriggerBehavior>
   );
 }
 

package/src/Layer/layerAnimations.stylex.ts

@@ -2,7 +2,8 @@
 
 /**
  * @file layerAnimations.stylex.ts
- * @input Uses StyleX, theme duration/easing tokens
+ * @input Uses StyleX, theme duration/easing tokens, the Reduce Motion fade
+ *   constants
  * @output Exports shared entry animation styles for layer-based components
  * @position Shared animation primitives; consumed by DropdownMenu, Popover,
  *   HoverCard, Tooltip, Selector, and any component using useLayer
@@ -27,6 +28,7 @@
  */
 
 import * as stylex from '@stylexjs/stylex';
+import {reducedMotionFadeConsts} from '../motion/reducedMotion.stylex';
 import {durationVars, easeVars, spacingVars} from '../theme/tokens.stylex';
 
 const enterBelow = stylex.keyframes({
@@ -84,17 +86,21 @@ const enterStartRtl = stylex.keyframes({
 
 // Reduce Motion under a finger: the same entrance without its travel. A touch
 // presentation substitutes a cross-fade for motion, never a jump.
+// The fade's curve rides in its first keyframe, so the published class type
+// of `animationTimingFunction` stays the theme ease's.
 const fadeIn = stylex.keyframes({
-  from: {opacity: 0},
+  from: {opacity: 0, animationTimingFunction: reducedMotionFadeConsts.easing},
   to: {opacity: 1},
 });
 
+// No theme value lengthens the Reduce Motion fade, so its values are constants.
+// The media keys stay literal: StyleX gives an imported at-rule key a later
+// priority layer (see reducedMotionKeys).
 const animationBase = {
   animationDuration: {
     default: durationVars['--duration-fast-max'],
-    // The cross-fade is 200 ms or less, whatever the theme's duration
-    // (design:reduced-motion DR2).
-    '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': `min(${durationVars['--duration-fast-max']}, 200ms)`,
+    '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+      reducedMotionFadeConsts.duration,
   },
   animationTimingFunction: easeVars['--ease-standard'],
   animationFillMode: 'backwards' as const,
@@ -106,19 +112,18 @@ const animationBase = {
  * Keyed by LayerPlacement ('above' | 'below' | 'start' | 'end')
  * for easy lookup: `layerAnimations[placement]`.
  *
- * Each entry disables its keyframe animation under
- * `prefers-reduced-motion: reduce` so the layer appears instantly instead of
- * translating/scaling in (infra-6). Under a finger (the primary pointer is
- * coarse) it fades in instead, opacity only and in 200 ms or less: on a touch
- * screen Reduce Motion replaces motion with a cross-fade rather than a jump
- * (design:reduced-motion DR2, DR3), as iOS does for its menus, popovers and
- * tips.
+ * Under `prefers-reduced-motion: reduce` each entry drops its travel and
+ * scale. Under a finger (the primary pointer is coarse) the layer fades in,
+ * opacity only, in 200 ms on easeInOut: on a touch screen Reduce Motion
+ * replaces motion with a cross-fade rather than a jump; under any other
+ * pointer it appears at once.
  */
 export const layerAnimations = stylex.create({
   below: {
     animationName: {
       default: enterBelow,
-      '@media (prefers-reduced-motion: reduce)': 'none',
+      '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+        'none',
       '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': fadeIn,
     },
     ...animationBase,
@@ -126,7 +131,8 @@ export const layerAnimations = stylex.create({
   above: {
     animationName: {
       default: enterAbove,
-      '@media (prefers-reduced-motion: reduce)': 'none',
+      '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+        'none',
       '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': fadeIn,
     },
     ...animationBase,
@@ -135,7 +141,8 @@ export const layerAnimations = stylex.create({
     animationName: {
       default: enterEnd,
       ':is([dir="rtl"] *)': enterEndRtl,
-      '@media (prefers-reduced-motion: reduce)': 'none',
+      '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+        'none',
       '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': fadeIn,
     },
     ...animationBase,
@@ -144,7 +151,8 @@ export const layerAnimations = stylex.create({
     animationName: {
       default: enterStart,
       ':is([dir="rtl"] *)': enterStartRtl,
-      '@media (prefers-reduced-motion: reduce)': 'none',
+      '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+        'none',
       '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': fadeIn,
     },
     ...animationBase,

package/src/Layer/useBackdropPress.ts

@@ -0,0 +1,81 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useBackdropPress.ts
+ * @input A modal layer's backdrop dismissal and whether it is allowed now
+ * @output Capture-phase pointer handlers and a click handler for the layer's
+ *   <dialog> root
+ * @position Shared backdrop-press rule for Dialog and Drawer
+ */
+
+import {useCallback, useRef, type PointerEvent, type MouseEvent} from 'react';
+
+export interface BackdropPressHandlers {
+  onPointerDownCapture: (event: PointerEvent<HTMLElement>) => void;
+  onPointerUpCapture: (event: PointerEvent<HTMLElement>) => void;
+  onPointerCancelCapture: (event: PointerEvent<HTMLElement>) => void;
+  onClick: (event: MouseEvent<HTMLElement>) => void;
+}
+
+/**
+ * A press on a modal layer's backdrop targets the <dialog> root itself. A
+ * click there is also what the browser sends when a press starts on one side
+ * of the layer's edge and ends on the other (it goes to the nearest common
+ * ancestor), so a backdrop press dismisses only when its pointer-down and its
+ * pointer-up both landed on the backdrop. A cancelled pointer ends the press.
+ *
+ * The pointer handlers run in the capture phase. A nested layer, such as a
+ * popover open in the dialog, stops its presses at its own root, so a
+ * bubble-phase handler here does not see them.
+ */
+export function useBackdropPress(
+  onBackdropPress: () => void,
+  isEnabled: boolean,
+): BackdropPressHandlers {
+  const startedOnBackdropRef = useRef(false);
+  const endedOnBackdropRef = useRef(false);
+
+  const onPointerDownCapture = useCallback(
+    (event: PointerEvent<HTMLElement>) => {
+      startedOnBackdropRef.current = event.target === event.currentTarget;
+      endedOnBackdropRef.current = false;
+    },
+    [],
+  );
+
+  const onPointerUpCapture = useCallback((event: PointerEvent<HTMLElement>) => {
+    endedOnBackdropRef.current =
+      startedOnBackdropRef.current && event.target === event.currentTarget;
+    startedOnBackdropRef.current = false;
+  }, []);
+
+  const onPointerCancelCapture = useCallback(() => {
+    startedOnBackdropRef.current = false;
+    endedOnBackdropRef.current = false;
+  }, []);
+
+  const onClick = useCallback(
+    (event: MouseEvent<HTMLElement>) => {
+      const pressWasOnBackdrop = endedOnBackdropRef.current;
+      startedOnBackdropRef.current = false;
+      endedOnBackdropRef.current = false;
+      if (
+        isEnabled &&
+        pressWasOnBackdrop &&
+        event.target === event.currentTarget
+      ) {
+        onBackdropPress();
+      }
+    },
+    [isEnabled, onBackdropPress],
+  );
+
+  return {
+    onPointerDownCapture,
+    onPointerUpCapture,
+    onPointerCancelCapture,
+    onClick,
+  };
+}

package/src/Layer/usePressPin.ts

@@ -35,12 +35,10 @@ import {
 
 /**
  * How the trigger opens the layer. `adaptive`, the default, previews it on
- * hover and focus, and a tap opens it unless the trigger acts. While
- * `touchTrigger` remains, it decides those taps. `hover` previews it on hover
- * and focus, and no touch or pen tap opens it. `toggle` pins it on every
- * press of a button trigger.
+ * hover and focus, and `touchTrigger` decides taps. `toggle` pins it on every
+ * press of a button trigger. Internal: InfoTip's press-to-pin uses `toggle`.
  */
-export type LayerTriggerBehavior = 'adaptive' | 'hover' | 'toggle';
+export type LayerTriggerBehavior = 'adaptive' | 'toggle';
 
 /** The clicks a press pin answered, so the wrapper can stop them (`stopPressPinClick`). */
 const pressPinClicks = new WeakSet<Event>();
@@ -214,11 +212,7 @@ export function usePressPin(options: UsePressPinOptions): UsePressPinReturn {
     clearTapOpen,
     armOutsideDismiss,
   } = useTouchTriggerInternal({
-    touchTrigger: isToggleMode
-      ? 'tap'
-      : triggerBehavior === 'hover'
-        ? 'none'
-        : options.touchTrigger,
+    touchTrigger: isToggleMode ? 'tap' : options.touchTrigger,
     isEnabled: options.isEnabled,
     isControlled: isOpen !== undefined,
     isOpen: isLayerOpen,
@@ -466,7 +460,7 @@ export function usePressPin(options: UsePressPinOptions): UsePressPinReturn {
   const isWired = isToggleMode && offeredKind === 'button';
   useDevWarning(
     options.component,
-    '`triggerBehavior="toggle"` pins only a button trigger (a <button> or role="button"); this trigger keeps tap-only opening.',
+    'A press-to-pin tooltip pins only a button trigger (a <button> or role="button"); this trigger keeps tap-only opening.',
     isToggleMode && offeredKind === 'other',
   );
 

package/src/MobileNav/MobileNav.tsx

@@ -143,8 +143,8 @@ const styles = stylex.create({
   // ::backdrop is provided by the browser's top layer
   backdrop: {
     '::backdrop': {
+      // No backdrop-filter: a full-viewport blur is costly to repaint.
       backgroundColor: colorVars['--color-overlay'],
-      backdropFilter: 'blur(2px)',
       opacity: 0,
       transitionProperty: 'opacity',
       transitionDuration: durationVars['--duration-medium'],

package/src/MultiSelector/hooks.ts

@@ -174,13 +174,11 @@ export function useMultiCombobox({
       // The action cell is the caller's control, usable whether or not the
       // option itself is disabled (spec:AST-058 FR4).
       if (cell === 'action') {
-        highlightOnHover(index);
-        setHighlightedCell('action');
+        highlightOnHover(index, () => setHighlightedCell('action'));
         return;
       }
       if (!item.disabled) {
-        highlightOnHover(index);
-        setHighlightedCell('option');
+        highlightOnHover(index, () => setHighlightedCell('option'));
       }
     },
     [highlightOnHover],