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

package/dist/BottomSheet/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAuBH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAuDhD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AA6JhF,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AA21BxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAuBH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAwDhD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAmLhF,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AAo5BxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}

package/dist/BottomSheet/BottomSheet.js

@@ -58,6 +58,7 @@ import { colorVars, durationVars, easeVars, spacingVars } from "../theme/tokens.
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { useScrollLock } from "../hooks/useScrollLock.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { observeMutations } from "../utils/sharedMutationObserver.js";
 import { mergeProps } from "../utils/mergeProps.js";
 import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
 import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
@@ -135,6 +136,10 @@ const styles = {
     kb4ib: "x1cz9k3x",
     $$css: true
   },
+  exitHoldingFocus: {
+    kfzvcC: "x47corl",
+    $$css: true
+  },
   positioner: {
     kVAEAm: "x10l6tqk",
     kkqhue: "x17y0mx6",
@@ -176,6 +181,23 @@ function stackPositionerStyles(view) {
 }
 
 /** 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) {
+  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) {
+  if (event.key !== 'Tab') {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}
 function stackStateAttribute(view, isOpen) {
   if (!view.isStacked) {
     return undefined;
@@ -291,10 +313,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 = isOpen ? {
     kind: 'open',
@@ -408,9 +434,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);
     }
@@ -422,6 +447,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]);
 
@@ -507,7 +534,36 @@ 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 => {
+    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', 'requires a non-empty `label` for an accessible name; the open sheet ' + 'has no built-in heading to derive one from.', isOpen && !label);
 
@@ -563,13 +619,21 @@ 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 /*#__PURE__*/_jsxs("dialog", {
     ...stylex.props(styles.dialog, shouldPresent && styles.dialogOpen, shouldPresent && styles.dialogPanelHost,
     // The dialog is the panel's positioner, so the stack's recede
     // transforms the dialog: panel, grabber and all shrink and lift as
     // one. The backdrop is not a descendant and stays put.
-    ...stackPositionerStyles(stackView), hasScrim && styles.scrim, hasScrim && isEntrySettled && styles.scrimSettled, hasScrim && isExiting && styles.scrimClosing, !hasScrim && styles.dialogNonModal),
+    ...stackPositionerStyles(stackView), hasScrim && styles.scrim, hasScrim && isEntrySettled && styles.scrimSettled, hasScrim && isExiting && styles.scrimClosing, isExitHoldingFocus && styles.exitHoldingFocus, !hasScrim && styles.dialogNonModal),
     ref: dialogComposedRef
     // A non-modal sheet is hosted in the top layer as a manual popover
     // (no light dismiss, no backdrop), so sheets order by presentation
@@ -586,6 +650,12 @@ function StandaloneBottomSheet({
     "data-sheet-stack": hasScrim ? stackStateAttribute(stackView, isOpen) : undefined,
     "data-sheet-stack-depth": 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.
     ,

package/dist/BottomSheet/bottomSheetStack.d.ts.map

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

package/dist/BottomSheet/bottomSheetStack.js

@@ -593,10 +593,11 @@ function openModalsOutside(element) {
     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.
-    if (dialog.hasAttribute('inert') || dialog.getAttribute('aria-hidden') === 'true') {
+    // 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' || state.entries.some(entry => !entry.isOpen && entry.getElement() === dialog)) {
       continue;
     }
     if (isModalDialog(dialog)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.7-canary.4931743",
+  "version": "0.7.7-canary.4e495ec",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -865,9 +865,9 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.7-canary.4931743",
-    "@astryxdesign/cli": "0.7.7-canary.4931743",
-    "@astryxdesign/interaction-harness": "0.7.7-canary.4931743",
+    "@astryxdesign/a11y-spec": "0.7.7-canary.4e495ec",
+    "@astryxdesign/cli": "0.7.7-canary.4e495ec",
+    "@astryxdesign/interaction-harness": "0.7.7-canary.4e495ec",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

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';
@@ -212,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,
@@ -260,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,
@@ -450,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}
@@ -581,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);
@@ -596,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]);
 
@@ -699,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',
@@ -769,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
@@ -784,6 +858,7 @@ function StandaloneBottomSheet({
         hasScrim && styles.scrim,
         hasScrim && isEntrySettled && styles.scrimSettled,
         hasScrim && isExiting && styles.scrimClosing,
+        isExitHoldingFocus && styles.exitHoldingFocus,
         !hasScrim && styles.dialogNonModal,
       )}
       ref={dialogComposedRef}
@@ -805,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/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;
     }