@astryxdesign/core 0.7.7-canary.550ff21 → 0.7.7-canary.58c5b8a

package/locales/pseudo.json

@@ -191,6 +191,96 @@
   "@astryx.powersearch.resultCount": {
     "defaultMessage": "⟦{count, number} {count, plural, one {result} other {results}}⟧"
   },
+  "@astryx.powersearch.sheet.filtersTitle": {
+    "defaultMessage": "⟦Ƒíłţéřš⟧"
+  },
+  "@astryx.powersearch.sheet.addFilter": {
+    "defaultMessage": "⟦Àðð ƒíłţéř⟧"
+  },
+  "@astryx.powersearch.sheet.noFilters": {
+    "defaultMessage": "⟦Ñó ƒíłţéřš àþþłíéð⟧"
+  },
+  "@astryx.powersearch.sheet.noFiltersDescription": {
+    "defaultMessage": "⟦Àðð à ƒíłţéř ţó ñàřřóŵ ýóúř řéšúłţš àñð ƒíñð ŵĥàţ ýóú ñééð ƒàšţéř.⟧"
+  },
+  "@astryx.powersearch.sheet.clearAll": {
+    "defaultMessage": "⟦Çłéàř àłł⟧"
+  },
+  "@astryx.powersearch.sheet.clearAllTitle": {
+    "defaultMessage": "⟦Çłéàř àłł ƒíłţéřš?⟧"
+  },
+  "@astryx.powersearch.sheet.clearAllDescription": {
+    "defaultMessage": "⟦Ţĥíš řéɱóṽéš àłł éðíţàƀłé ƒíłţéřš ƒřóɱ ţĥíš šéàřçĥ.⟧"
+  },
+  "@astryx.powersearch.sheet.clearAllConfirm": {
+    "defaultMessage": "⟦Çłéàř ƒíłţéřš⟧"
+  },
+  "@astryx.powersearch.sheet.clearAllCancel": {
+    "defaultMessage": "⟦Ķééþ ƒíłţéřš⟧"
+  },
+  "@astryx.powersearch.sheet.done": {
+    "defaultMessage": "⟦Ðóñé⟧"
+  },
+  "@astryx.powersearch.sheet.search": {
+    "defaultMessage": "⟦Šéàřçĥ⟧"
+  },
+  "@astryx.powersearch.sheet.searchResults": {
+    "defaultMessage": "⟦Šéàřçĥ řéšúłţš⟧"
+  },
+  "@astryx.powersearch.sheet.searchFields": {
+    "defaultMessage": "⟦Šéàřçĥ ƒíłţéřš⟧"
+  },
+  "@astryx.powersearch.sheet.searchFieldsPlaceholder": {
+    "defaultMessage": "⟦Šéàřçĥ ƒíłţéřš…⟧"
+  },
+  "@astryx.powersearch.sheet.ungroupedFields": {
+    "defaultMessage": "⟦Ĝéñéřàł⟧"
+  },
+  "@astryx.powersearch.sheet.noMatchingFields": {
+    "defaultMessage": "⟦Ñó ƒíłţéřš ɱàţçĥ ýóúř šéàřçĥ⟧"
+  },
+  "@astryx.powersearch.sheet.tryDifferentSearch": {
+    "defaultMessage": "⟦Ţřý à ð탃éřéñţ šéàřçĥ.⟧"
+  },
+  "@astryx.powersearch.sheet.noResults": {
+    "defaultMessage": "⟦Ñó řéšúłţš ƒóúñð⟧"
+  },
+  "@astryx.powersearch.sheet.filterUnavailable": {
+    "defaultMessage": "⟦Ţĥíš ƒíłţéř íš ñó łóñĝéř àṽàíłàƀłé⟧"
+  },
+  "@astryx.powersearch.sheet.removeFilter": {
+    "defaultMessage": "⟦Řéɱóṽé {field} ƒíłţéř⟧"
+  },
+  "@astryx.powersearch.sheet.relativeDaysAgo": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {day} other {days}} àĝó⟧"
+  },
+  "@astryx.powersearch.sheet.relativeDaysFromNow": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {day} other {days}} ƒřóɱ ñóŵ⟧"
+  },
+  "@astryx.powersearch.sheet.relativeWeeksAgo": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {week} other {weeks}} àĝó⟧"
+  },
+  "@astryx.powersearch.sheet.relativeWeeksFromNow": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {week} other {weeks}} ƒřóɱ ñóŵ⟧"
+  },
+  "@astryx.powersearch.sheet.relativeMonthsAgo": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {month} other {months}} àĝó⟧"
+  },
+  "@astryx.powersearch.sheet.relativeMonthsFromNow": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {month} other {months}} ƒřóɱ ñóŵ⟧"
+  },
+  "@astryx.powersearch.sheet.fieldOperator": {
+    "defaultMessage": "⟦{field} {operator}⟧"
+  },
+  "@astryx.powersearch.sheet.labelValue": {
+    "defaultMessage": "⟦{label} {value}⟧"
+  },
+  "@astryx.powersearch.sheet.filtersClearedWithCount": {
+    "defaultMessage": "⟦Àłł ƒíłţéřš řéɱóṽéð. {resultCount}⟧"
+  },
+  "@astryx.powersearch.sheet.editableFiltersClearedWithCount": {
+    "defaultMessage": "⟦Éðíţàƀłé ƒíłţéřš řéɱóṽéð. {resultCount}⟧"
+  },
   "@astryx.alertDialog.cancel": {
     "defaultMessage": "⟦Çàñçéł⟧"
   },
@@ -842,6 +932,9 @@
   "@astryx.powersearch.allFiltersRemoved": {
     "defaultMessage": "⟦Àłł ƒíłţéřš řéɱóṽéð⟧"
   },
+  "@astryx.powersearch.editableFiltersRemoved": {
+    "defaultMessage": "⟦Éðíţàƀłé ƒíłţéřš řéɱóṽéð⟧"
+  },
   "@astryx.resizable.collapsed": {
     "defaultMessage": "⟦Çółłàþšéð⟧"
   },
@@ -1702,5 +1795,8 @@
   },
   "@astryx.comments.postFailed": {
     "defaultMessage": "⟦Ýóúř çóɱɱéñţ çóúłðñ'ţ ƀé þóšţéð.⟧"
+  },
+  "@astryx.infoTip.label": {
+    "defaultMessage": "⟦Ṁóřé íñƒóřɱàţíóñ⟧"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.7-canary.550ff21",
+  "version": "0.7.7-canary.58c5b8a",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -399,6 +399,11 @@
       "types": "./dist/Indicator/index.d.ts",
       "default": "./dist/Indicator/index.js"
     },
+    "./InfoTip": {
+      "source": "./src/InfoTip/index.ts",
+      "types": "./dist/InfoTip/index.d.ts",
+      "default": "./dist/InfoTip/index.js"
+    },
     "./InputGroup": {
       "source": "./src/InputGroup/index.ts",
       "types": "./dist/InputGroup/index.d.ts",
@@ -824,10 +829,10 @@
       "types": "./dist/internal/touch.d.ts",
       "default": "./dist/internal/touch.js"
     },
-    "./internal/tokenizer-presentation": {
-      "source": "./src/internal/tokenizer-presentation.ts",
-      "types": "./dist/internal/tokenizer-presentation.d.ts",
-      "default": "./dist/internal/tokenizer-presentation.js"
+    "./internal/touch-sheet": {
+      "source": "./src/internal/touch-sheet.ts",
+      "types": "./dist/internal/touch-sheet.d.ts",
+      "default": "./dist/internal/touch-sheet.js"
     }
   },
   "files": [
@@ -860,9 +865,9 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.7-canary.550ff21",
-    "@astryxdesign/cli": "0.7.7-canary.550ff21",
-    "@astryxdesign/interaction-harness": "0.7.7-canary.550ff21",
+    "@astryxdesign/a11y-spec": "0.7.7-canary.58c5b8a",
+    "@astryxdesign/cli": "0.7.7-canary.58c5b8a",
+    "@astryxdesign/interaction-harness": "0.7.7-canary.58c5b8a",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/AlertDialog/AlertDialog.doc.mjs

@@ -21,7 +21,7 @@ export const docs = {
   ],
   usage: {
     description:
-      'AlertDialog asks the user to confirm a destructive or irreversible action before it happens. Use it for things like deleting content, revoking access, or discarding unsaved changes.\n\nIt implements the WAI-ARIA APG [Alert Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/): `role="alertdialog"`, a title linked by `aria-labelledby`, a consequence description linked by `aria-describedby`, focus moved into the dialog on open and returned to the trigger on close, and no dismissal by clicking outside. Escape cancels.\n\nAlertDialog passes its requested width through to Dialog, which clamps the surface to the container and dynamic viewport with token gutters. Generic Dialog footers should wrap, but Dialog does not own action semantics or order; consumer composition controls that. AlertDialog owns its confirmation semantics: above 640px, actions render horizontally and may move onto another row; at 640px and below, the destructive action appears above Cancel and both buttons fill the footer width. Button labels retain their standard single-line behavior. The breakpoint follows available width, not pointer or hover capability. The body scrolls when block space is constrained.\n\nFor cases where you want to show an alert without managing open state, use the `useImperativeAlertDialog` hook: call `alert.show(options)` and render `alert.element` in your tree.',
+      'AlertDialog asks the user to confirm a destructive or irreversible action before it happens. Use it for things like deleting content, revoking access, or discarding unsaved changes.\n\nIt implements the WAI-ARIA APG [Alert Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/): `role="alertdialog"`, a title linked by `aria-labelledby`, a consequence description linked by `aria-describedby`, focus moved into the dialog on open and returned to the trigger on close, and no dismissal by clicking outside. Escape cancels.\n\nAlertDialog passes its requested width through to Dialog, which clamps the surface to the container and dynamic viewport with token gutters. Generic Dialog footers should wrap, but Dialog does not own action semantics or order; consumer composition controls that. AlertDialog owns its confirmation semantics: above 640px, actions render horizontally and may move onto another row; at 640px and below, the destructive action appears above Cancel and both buttons fill the footer width. Button labels retain their standard single-line behavior. The breakpoint follows available width, not pointer or hover capability. The body scrolls when block space is constrained.\n\nThe two actions are tracked as one group under every pointer, the way iOS tracks the actions of an alert: the action under the pointer highlights as soon as it is pressed, the highlight follows the pointer from one action to the other, and the release runs the action under it. Releasing off both actions runs nothing. The keyboard and assistive technology keep the click of each button.\n\nFor cases where you want to show an alert without managing open state, use the `useImperativeAlertDialog` hook: call `alert.show(options)` and render `alert.element` in your tree.',
     bestPractices: [
       {
         guidance: true,
@@ -196,7 +196,7 @@ export const docsDense = {
     'Confirms destructive/irreversible action before it happens (delete, revoke access, discard unsaved changes).',
   usage: {
     description:
-      'AlertDialog confirms destructive/irreversible action (delete, revoke access, discard changes). Implements WAI-ARIA APG Alert Dialog pattern (https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/): role="alertdialog", aria-labelledby title, aria-describedby description, focus into dialog on open + back to trigger on close, no outside-click dismissal, Escape cancels. Dialog preserves requested width + clamps it to container/dynamic viewport gutters. Generic Dialog footers wrap while consumers own action order. AlertDialog owns confirmation action layout: >640px horizontal buttons may move to another row; <=640px puts the destructive action above Cancel and makes both buttons full width regardless of pointer/hover capability. Button labels remain single-line. Body scrolls when height constrained. To show w/o managing open state, use useImperativeAlertDialog hook: call alert.show(options) + render alert.element in tree.',
+      'AlertDialog confirms destructive/irreversible action (delete, revoke access, discard changes). Implements WAI-ARIA APG Alert Dialog pattern (https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/): role="alertdialog", aria-labelledby title, aria-describedby description, focus into dialog on open + back to trigger on close, no outside-click dismissal, Escape cancels. Dialog preserves requested width + clamps it to container/dynamic viewport gutters. Generic Dialog footers wrap while consumers own action order. AlertDialog owns confirmation action layout: >640px horizontal buttons may move to another row; <=640px puts the destructive action above Cancel and makes both buttons full width regardless of pointer/hover capability. Button labels remain single-line. Body scrolls when height constrained. Every pointer: both actions tracked as one group like iOS alerts (action under pointer highlights at once, highlight follows pointer between actions, release runs action under pointer, release off both runs nothing); keyboard/AT keep each button click. To show w/o managing open state, use useImperativeAlertDialog hook: call alert.show(options) + render alert.element in tree.',
     bestPractices: [
       {
         guidance: true,

package/src/AlertDialog/AlertDialog.tsx

@@ -4,7 +4,9 @@
 
 /**
  * @file AlertDialog.tsx
- * @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
+ * @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button, the
+ *   action-group tracking (hooks/useActionGroupTracking) and the press-group
+ *   marker (privateAttributes/pressGroupItem.stylex)
  * @output Exports AlertDialog component, AlertDialogProps type
  * @position Core implementation; consumed by index.ts, tested by AlertDialog.test.tsx
  *
@@ -12,11 +14,12 @@
  * - /packages/core/src/AlertDialog/AlertDialog.doc.mjs (props table, features, examples)
  * - /packages/core/src/AlertDialog/AlertDialog.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/AlertDialog/index.ts (exports if types change)
+ * - /packages/core/src/AlertDialog/__tests__/AlertDialog.interaction.browser.spec.ts (touch tracking)
  * - /apps/storybook/stories/AlertDialog.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/AlertDialog/ (showcase blocks)
  */
 
-import React, {useId, useCallback} from 'react';
+import React, {useId, useCallback, useRef} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Dialog} from '../Dialog/Dialog';
 import {Layout} from '../Layout/Layout';
@@ -36,12 +39,22 @@ import {
   useComponentTranslator,
 } from '../i18n/useComponentTranslator';
 import english from '../i18n/generated-english/AlertDialog/AlertDialog.generated';
+import {useActionGroupTracking} from '../hooks/useActionGroupTracking';
+import {PressGroupContext} from '../hooks/pressGroupContext';
+import {alertController} from '../motion/uikit/alert';
+import {pressGroupItemProps} from '../privateAttributes/pressGroupItem.stylex';
 
 registerEnglishFallback(english);
 
 const SMALL_SCREEN_QUERY = '(max-width: 640px)';
 
 const styles = stylex.create({
+  // The browser may pinch-zoom on the actions but never pans there. Chrome on
+  // Android cancels a pointer it pans, which would cancel the group's press.
+  // The gesture host keeps an author's narrower touch-action.
+  trackingRow: {
+    touchAction: 'pinch-zoom',
+  },
   action: {
     maxWidth: '100%',
     minWidth: 0,
@@ -177,6 +190,19 @@ export function AlertDialog({
     onOpenChange(false);
   }, [onOpenChange]);
 
+  // Each action carries the press-group marker from its first render, so the
+  // tracker is its only painter.
+  const actionsRef = useRef<HTMLElement>(null);
+  const isTracking = isOpen && isInline !== true;
+  useActionGroupTracking(actionsRef, {
+    // The actions row holds only the two buttons.
+    itemSelector: 'button',
+    highlightOnsetMs: alertController.actions.highlightOnsetMs,
+    highlightExpansion: alertController.actions.highlightExpansion,
+    isEnabled: isTracking,
+  });
+  const actionTrackingProps = isTracking ? pressGroupItemProps : undefined;
+
   const buttonActionStyle = [
     styles.action,
     isSmallScreen && styles.stackedAction,
@@ -188,6 +214,7 @@ export function AlertDialog({
       label={cancelLabel}
       onClick={handleCancel}
       xstyle={buttonActionStyle}
+      {...actionTrackingProps}
       // Dialog focuses [data-autofocus] itself after showModal(), because
       // React's autoFocus runs during commit while the dialog is invisible.
       // Cancel is least destructive, so it remains the autofocus target even
@@ -203,6 +230,7 @@ export function AlertDialog({
       onClick={onAction}
       isLoading={isActionLoading}
       xstyle={buttonActionStyle}
+      {...actionTrackingProps}
     />
   );
 
@@ -244,13 +272,17 @@ export function AlertDialog({
                 destructive-above-Cancel narrow order because confirmation
                 actions have component-specific meaning here. */}
             <Stack
+              ref={actionsRef}
+              xstyle={isTracking && styles.trackingRow}
               direction={isSmallScreen ? 'vertical' : 'horizontal'}
               gap={2}
               hAlign={isSmallScreen ? 'stretch' : 'end'}
               wrap={isSmallScreen ? 'nowrap' : 'wrap'}>
-              {isSmallScreen
-                ? [actionButton, cancelButton]
-                : [cancelButton, actionButton]}
+              <PressGroupContext value={isTracking}>
+                {isSmallScreen
+                  ? [actionButton, cancelButton]
+                  : [cancelButton, actionButton]}
+              </PressGroupContext>
             </Stack>
           </LayoutFooter>
         }

package/src/AppShell/useCloseMobileDrawerOnActivate.ts

@@ -0,0 +1,52 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useCloseMobileDrawerOnActivate.ts
+ * @input AppShellMobileContext, TopNav and SideNav render modes
+ * @output useCloseMobileDrawerOnActivate, useIsInAppShellMobileDrawer
+ * @position Internal AppShell helper for rows in the mobile drawer. Not
+ *   exported from the package.
+ */
+
+import {useAppShellMobile} from './AppShellMobileContext';
+import {useSideNavRenderMode} from '../SideNav/SideNavRenderContext';
+import {useTopNavRenderMode} from '../TopNav/TopNavRenderContext';
+
+/**
+ * Returns a function that wraps a row's click handler. While
+ * `isInMobileDrawer` is true, the wrapped handler calls the row's handler and
+ * then closes the AppShell mobile drawer. Otherwise the row's handler comes
+ * back unchanged. Every drawer row closes the drawer through this one rule.
+ */
+export function useCloseMobileDrawerOnActivate(
+  isInMobileDrawer: boolean,
+): <Args extends unknown[]>(
+  onClick: ((...args: Args) => void) | undefined,
+) => ((...args: Args) => void) | undefined {
+  const {closeMobileNav} = useAppShellMobile();
+  return onClick => {
+    if (!isInMobileDrawer) {
+      return onClick;
+    }
+    return (...args) => {
+      onClick?.(...args);
+      closeMobileNav();
+    };
+  };
+}
+
+/**
+ * Whether the caller renders inside the AppShell mobile drawer: in TopNav
+ * content or SideNav content shown there.
+ */
+export function useIsInAppShellMobileDrawer(): boolean {
+  const topNavRenderMode = useTopNavRenderMode();
+  const sideNavRenderMode = useSideNavRenderMode();
+  return (
+    topNavRenderMode === 'drawer' ||
+    sideNavRenderMode === 'drawer' ||
+    sideNavRenderMode === 'drawer-content'
+  );
+}

package/src/Avatar/Avatar.tsx

@@ -824,7 +824,9 @@ export function Avatar({
           </div>
         )}
       </div>
-      {status && (
+      {/* The status slot renders for a truthy value only. A falsy one, 0
+          included, renders nothing, not a stray "0". */}
+      {Boolean(status) && (
         <div
           {...stylex.props(
             styles.status,

package/src/BottomSheet/BottomSheet.tsx

@@ -75,6 +75,7 @@ import {
 import {useDevWarning} from '../hooks/useDevWarning';
 import {useScrollLock} from '../hooks/useScrollLock';
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {observeMutations} from '../utils/sharedMutationObserver';
 import {mergeProps} from '../utils/mergeProps';
 import {LayerDepthProvider} from '../Layer/LayerDepthContext';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
@@ -147,12 +148,17 @@ const styles = stylex.create({
   },
   // An open standalone dialog positions its panel: the panel sits at its
   // block end, centred, with no wrapper. A tap beside a narrower panel lands
-  // on the dialog, which light dismiss reads. The stack's recede applies to
-  // this dialog too, so a covered sheet shrinks and lifts as one.
+  // on the dialog, which light dismiss reads. A flex row, not a grid: WebKit
+  // lays a grid host out again on each render inside the sheet, which makes
+  // each update slower. Not a column: WebKit then drops the content's
+  // block-end padding from the scroll range. In a row the panel's height is
+  // its own cross size, so a sheet taller than the viewport runs past the top
+  // edge, as in a grid. The stack's recede applies to this dialog too, so a
+  // covered sheet shrinks and lifts as one.
   dialogPanelHost: {
-    display: 'grid',
-    alignContent: 'end',
-    justifyItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-end',
   },
   // A non-modal sheet is in the top layer as a manual popover, so it has no
   // page z-index (AST-027). Below the Popover API floor, `show()` leaves it
@@ -207,6 +213,10 @@ const styles = stylex.create({
       transitionTimingFunction: 'linear',
     },
   },
+  // A closing sheet that keeps focus takes no pointer input during its exit.
+  exitHoldingFocus: {
+    pointerEvents: 'none',
+  },
   positioner: {
     position: 'absolute',
     insetInline: 0,
@@ -255,6 +265,24 @@ function stackPositionerStyles(view: BottomSheetStackView) {
 }
 
 /** The `data-sheet-stack` value for a host: only set while sheets stack. */
+/** Stops a click, from any input, before it reaches its target. */
+function ignoreActivation(event: React.MouseEvent): void {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+/**
+ * Stops every key except Tab before it reaches the focused control, so no
+ * key handler runs and no text changes (a search field's Enter, a typed
+ * letter, Backspace, an arrow that reopens a list). Tab still moves focus.
+ */
+function ignoreKeyDuringExit(event: React.KeyboardEvent): void {
+  if (event.key !== 'Tab') {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}
+
 function stackStateAttribute(
   view: BottomSheetStackView,
   isOpen: boolean,
@@ -445,10 +473,14 @@ function StandaloneBottomSheet({
   // `isOpen` restarts the flag during render, and the layout effect below
   // settles a close.
   const [isCloseSettled, setIsCloseSettled] = useState(false);
+  // Whether focus was inside the sheet when it closed. Such a sheet stays out
+  // of `inert` and `aria-hidden` until its exit ends and focus has left.
+  const [isExitFocusHeld, setIsExitFocusHeld] = useState(false);
   const [settledIsOpen, setSettledIsOpen] = useState(isOpen);
   if (settledIsOpen !== isOpen) {
     setSettledIsOpen(isOpen);
     setIsCloseSettled(false);
+    setIsExitFocusHeld(false);
   }
   const panelState: BottomSheetPanelState = isOpen
     ? {kind: 'open', entering: stackView.isReplacing}
@@ -576,9 +608,8 @@ function StandaloneBottomSheet({
   }, [hasScrim, shouldPresent, writeScrim]);
   useLayoutEffect(() => {
     if (!isOpen) {
-      // Read before the browser's focus fixup for the exiting sheet's
-      // `inert` runs (at the next rendering opportunity), so this is where
-      // focus was when the person closed the sheet.
+      // Where focus was when the person closed the sheet. The closing sheet
+      // is not inert yet, so focus has not moved.
       const dialog = dialogRef.current;
       hadFocusAtCloseRef.current =
         dialog != null && dialog.contains(dialog.ownerDocument.activeElement);
@@ -591,6 +622,8 @@ function StandaloneBottomSheet({
       // that was not paired as a replace is an exit from here on.
       // eslint-disable-next-line @eslint-react/set-state-in-effect -- settles the close once the registry has answered
       setIsCloseSettled(true);
+      // Read with the close, before the sheet can go inert.
+      setIsExitFocusHeld(hadFocusAtCloseRef.current);
     }
   }, [hasScrim, isOpen, shouldPresent]);
 
@@ -694,7 +727,44 @@ function StandaloneBottomSheet({
   );
 
   const {ref: modalityRef} = useInteractionModalityTracking();
-  const dialogComposedRef = useMergedRefs(dialogRef, modalityRef);
+  // Ends the exit hold once focus has left the sheet: moved elsewhere, or
+  // dropped to the page because the focused control was removed or disabled.
+  // Native listeners, because React drops the `focusout` a browser sends while
+  // React removes the focused element, and Firefox and WebKit send no
+  // `focusout` for a removed element at all, so a subtree change is read too.
+  // Each reads the focus after the event. They attach only while a closing
+  // sheet holds focus, so a closed or open sheet observes nothing.
+  const isWatchingExitFocus =
+    !isOpen && isPresented && !isReplaced && isExitFocusHeld;
+  const exitFocusRef = useCallback(
+    (dialog: HTMLDialogElement | null) => {
+      if (dialog == null || !isWatchingExitFocus) {
+        return;
+      }
+      const releaseIfFocusLeft = () => {
+        if (!dialog.contains(dialog.ownerDocument.activeElement)) {
+          setIsExitFocusHeld(false);
+        }
+      };
+      const onFocusOut = () => queueMicrotask(releaseIfFocusLeft);
+      dialog.addEventListener('focusout', onFocusOut);
+      const unobserve = observeMutations(
+        dialog,
+        {
+          childList: true,
+          subtree: true,
+          attributeFilter: ['disabled', 'hidden', 'inert'],
+        },
+        releaseIfFocusLeft,
+      );
+      return () => {
+        dialog.removeEventListener('focusout', onFocusOut);
+        unobserve();
+      };
+    },
+    [isWatchingExitFocus],
+  );
+  const dialogComposedRef = useMergedRefs(dialogRef, modalityRef, exitFocusRef);
   useScrollLock(shouldPresent && hasScrim);
   useDevWarning(
     'BottomSheet',
@@ -764,7 +834,16 @@ function StandaloneBottomSheet({
   // that contains no presented sheet is marked inert and hidden as well, so
   // the state is explicit; one that does contain the top sheet is left alone,
   // because inert on it would reach the top sheet too.
-  const isInert = isExiting || stackView.isBlocked;
+  // A sheet that closes with focus inside it is neither inert nor hidden
+  // while that focus stays: `inert` would drop the focus to the page, and
+  // `aria-hidden` would hide the focused control. When the exit ends, the
+  // dialog closes and focus returns in the same task. When focus leaves the
+  // sheet first (into a sheet opened above it, for example), the sheet goes
+  // inert at once. Until the close settles, no closing sheet is inert, so the
+  // first commit of a close never hides focus.
+  const isExitHoldingFocus =
+    isExiting && !isReplaced && (!isCloseSettled || isExitFocusHeld);
+  const isInert = (isExiting && !isExitHoldingFocus) || stackView.isBlocked;
 
   return (
     <dialog
@@ -779,6 +858,7 @@ function StandaloneBottomSheet({
         hasScrim && styles.scrim,
         hasScrim && isEntrySettled && styles.scrimSettled,
         hasScrim && isExiting && styles.scrimClosing,
+        isExitHoldingFocus && styles.exitHoldingFocus,
         !hasScrim && styles.dialogNonModal,
       )}
       ref={dialogComposedRef}
@@ -800,6 +880,11 @@ function StandaloneBottomSheet({
         hasScrim && stackView.depth > 0 ? stackView.depth : undefined
       }
       onCancel={handleCancel}
+      // A closing sheet that keeps focus takes no activation during its
+      // exit: no click and no key but Tab reaches the control that has focus.
+      onClickCapture={isExitHoldingFocus ? ignoreActivation : undefined}
+      onKeyDownCapture={isExitHoldingFocus ? ignoreKeyDuringExit : undefined}
+      onKeyUpCapture={isExitHoldingFocus ? ignoreKeyDuringExit : undefined}
       // Presses inside the sheet do not reach handlers around where it is
       // written. The dialog, not the panel, is the root, as in a switcher.
       {...layerClickBoundary({onClick: handleClick})}>

package/src/BottomSheet/BottomSheetPanel.tsx

@@ -296,14 +296,19 @@ const styles = stylex.create({
   },
   content: {
     // Preserve the body's block formatting (including margin/float isolation)
-    // and its definite percentage-height basis. min-content lets this real
+    // and its definite percentage-height basis. fit-content lets this real
     // observed box grow with async content beyond a fixed-height viewport.
     // This box is also the sheet's container: it carries the padding and
     // publishes it, so a lone Section child escapes it exactly as in Dialog.
     display: 'flow-root',
     boxSizing: 'border-box',
     height: '100%',
-    minHeight: 'min-content',
+    // fit-content, not min-content: they are one size in the block axis, but
+    // WebKit ignores min-content on a block's min-height. There the box keeps
+    // its body's height on a budget-height sheet. Content placed directly in
+    // it then overflows the box, and its block-end padding leaves the scroll
+    // range.
+    minHeight: 'fit-content',
   },
   tallKeyboardBody: {
     scrollPaddingBlockEnd: MOBILE_KEYBOARD_BOTTOM_CLEARANCE,
@@ -413,6 +418,7 @@ function waitForTransition(
 
   let done = false;
   let timer: ReturnType<typeof setTimeout> | null = null;
+  let backstopMs = 0;
   const finish = () => {
     if (done) {
       return;
@@ -426,9 +432,24 @@ function waitForTransition(
     complete();
   };
   const handleTransitionEnd = (event: TransitionEvent) => {
-    if (event.target === element && event.propertyName === propertyName) {
-      finish();
+    if (event.target !== element || event.propertyName !== propertyName) {
+      return;
+    }
+    // The engine cancels a transition whose end value changes mid-flight. A
+    // percentage transform does when the closing frame moves the height by a
+    // fraction of a pixel. A replacement runs on from where it was. That one
+    // ends the motion, not the cancel.
+    if (
+      event.type === 'transitioncancel' &&
+      hasRunningTransition(element, propertyName)
+    ) {
+      if (timer != null) {
+        clearTimeout(timer);
+        timer = setTimeout(finish, backstopMs);
+      }
+      return;
     }
+    finish();
   };
   element.addEventListener('transitionend', handleTransitionEnd);
   element.addEventListener('transitioncancel', handleTransitionEnd);
@@ -479,7 +500,8 @@ function waitForTransition(
     return () => {};
   }
 
-  timer = setTimeout(finish, transitionMs + TRANSITION_BACKSTOP_BUFFER_MS);
+  backstopMs = transitionMs + TRANSITION_BACKSTOP_BUFFER_MS;
+  timer = setTimeout(finish, backstopMs);
   return () => {
     if (timer != null) {
       clearTimeout(timer);
@@ -489,6 +511,19 @@ function waitForTransition(
   };
 }
 
+// Whether a CSS transition of `propertyName` still runs on `element`.
+function hasRunningTransition(
+  element: HTMLElement,
+  propertyName: string,
+): boolean {
+  return (element.getAnimations?.() ?? []).some(
+    animation =>
+      (animation as Animation & {transitionProperty?: string})
+        .transitionProperty === propertyName &&
+      (animation.playState === 'running' || animation.playState === 'paused'),
+  );
+}
+
 function parseTransitionTime(value: string): number | null {
   const normalizedValue = value.trim();
   if (!/^-?(?:\d+|\d*\.\d+)(?:ms|s)$/.test(normalizedValue)) {

package/src/BottomSheet/bottomSheetStack.ts

@@ -866,12 +866,16 @@ function openModalsOutside(element: Element): HTMLDialogElement[] {
     if (dialog === element || dialog.contains(element)) {
       continue;
     }
-    // A modal on its way out (a closing sheet keeps its dialog modal through
-    // the exit animation, inert and hidden) blocks nothing any more: it is
-    // gone for this decision.
+    // A modal on its way out blocks nothing any more: it is gone for this
+    // decision. A closing sheet keeps its dialog modal through the exit
+    // animation; it is inert and hidden then, unless focus was inside it at
+    // the close, so the registry's own record of the close counts too.
     if (
       dialog.hasAttribute('inert') ||
-      dialog.getAttribute('aria-hidden') === 'true'
+      dialog.getAttribute('aria-hidden') === 'true' ||
+      state.entries.some(
+        entry => !entry.isOpen && entry.getElement() === dialog,
+      )
     ) {
       continue;
     }

package/src/BottomSheet/useSheetGestures.ts

@@ -738,7 +738,9 @@ export function useSheetGestures({
         }
         return;
       }
-      recordSheetHeight(node.getBoundingClientRect().height);
+      // No measure here: reading the height while the sheet mounts forces a
+      // layout in the middle of the open. The observer's first report comes
+      // after the browser's own layout, before the first paint.
       const ro = new ResizeObserver(entries => {
         const entry = entries[0];
         if (entry) {