@astryxdesign/core 0.7.7-canary.f9ac85f → 0.7.7

package/dist/motion/reducedMotion.d.ts

@@ -22,4 +22,28 @@ export declare function reducedMotionFade(element?: Element | null, options?: {
     /** The change starts from the release of a touch drag (DR2). */
     touchRelease?: boolean;
 }): ReducedMotionFade | null;
+/** A running Reduced Motion dip. */
+export interface ReducedMotionDip {
+    /** Stops the dip. A change that has not landed yet never lands. */
+    cancel(): void;
+}
+/**
+ * Plays `fade` on `element` as a dip, and runs `land` at its middle: the
+ * fade-out, the change, then the fade-in. The fade-out holds at 0 until `land`
+ * has run, and the fade-in starts only after it. So the change never shows at
+ * full opacity, however late the main thread runs. A timer at the middle can
+ * fire after the fade-in has begun.
+ *
+ * `land` must apply the change before it returns: the fade-in starts right
+ * after it. `from` is the opacity the fade-out starts at: a leaving element
+ * fades out from where it is.
+ *
+ * @example
+ * ```
+ * const dip = playReducedMotionDip(scroller, fade, () => scroller.scrollTo({top}));
+ * // A newer change replaces it:
+ * dip.cancel();
+ * ```
+ */
+export declare function playReducedMotionDip(element: Element, fade: ReducedMotionFade, land: () => void, from?: number): ReducedMotionDip;
 //# sourceMappingURL=reducedMotion.d.ts.map

package/dist/motion/reducedMotion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reducedMotion.d.ts","sourceRoot":"","sources":["../../src/motion/reducedMotion.ts"],"names":[],"mappings":"AAqDA,6EAA6E;AAC7E,eAAO,MAAM,yBAAyB,2DACoB,CAAC;AAE3D,gFAAgF;AAChF,eAAO,MAAM,4BAA4B,iEACuB,CAAC;AAEjE;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,EACxB,OAAO,GAAE;IACP,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;CACnB,GACL,iBAAiB,GAAG,IAAI,CAmB1B"}
+{"version":3,"file":"reducedMotion.d.ts","sourceRoot":"","sources":["../../src/motion/reducedMotion.ts"],"names":[],"mappings":"AAqDA,6EAA6E;AAC7E,eAAO,MAAM,yBAAyB,2DACoB,CAAC;AAE3D,gFAAgF;AAChF,eAAO,MAAM,4BAA4B,iEACuB,CAAC;AAEjE;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,EACxB,OAAO,GAAE;IACP,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;CACnB,GACL,iBAAiB,GAAG,IAAI,CAmB1B;AAED,oCAAoC;AACpC,MAAM,WAAW,gBAAgB;IAC/B,mEAAmE;IACnE,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,iBAAiB,EACvB,IAAI,EAAE,MAAM,IAAI,EAChB,IAAI,SAAI,GACP,gBAAgB,CAyClB"}

package/dist/motion/reducedMotion.js

@@ -4,7 +4,7 @@
  * @file reducedMotion.ts
  * @input The Reduced Motion preference, the primary pointer, the motion tables
  * @output reducedMotionFade (the fade the animator would play, for motion it
- *   does not drive) and the two media queries a StyleX transition spells
+ *   does not drive), playReducedMotionDip, and the queries a transition spells
  * @position The one Reduced Motion policy (design:reduced-motion) for code
  *   beside the animator: a raw Web Animations fade, a CSS transition
  *
@@ -86,4 +86,81 @@ export function reducedMotionFade(element, options = {}) {
     duration: reducedMotionCrossFade.durationMs,
     easing: `cubic-bezier(${curve.join(', ')})`
   };
+}
+
+/** A running Reduced Motion dip. */
+
+/**
+ * Plays `fade` on `element` as a dip, and runs `land` at its middle: the
+ * fade-out, the change, then the fade-in. The fade-out holds at 0 until `land`
+ * has run, and the fade-in starts only after it. So the change never shows at
+ * full opacity, however late the main thread runs. A timer at the middle can
+ * fire after the fade-in has begun.
+ *
+ * `land` must apply the change before it returns: the fade-in starts right
+ * after it. `from` is the opacity the fade-out starts at: a leaving element
+ * fades out from where it is.
+ *
+ * @example
+ * ```
+ * const dip = playReducedMotionDip(scroller, fade, () => scroller.scrollTo({top}));
+ * // A newer change replaces it:
+ * dip.cancel();
+ * ```
+ */
+export function playReducedMotionDip(element, fade, land, from = 1) {
+  const half = fade.duration / 2;
+  let isCancelled = false;
+  let fadeIn = null;
+  const fadeOut = element.animate([{
+    opacity: from,
+    easing: fade.easing
+  }, {
+    opacity: 0
+  }], {
+    duration: half,
+    fill: 'forwards'
+  });
+  fadeOut.finished.then(() => {
+    if (isCancelled) {
+      return;
+    }
+    land();
+    // The fade-in holds 0 until it starts: after a long stall, its start can
+    // come after the frame that runs this.
+    fadeIn = element.animate([{
+      opacity: 0,
+      easing: fade.easing
+    }, {
+      opacity: 1
+    }], {
+      duration: half,
+      fill: 'backwards'
+    });
+    // The fade-in keeps the dip's own schedule: it starts where the fade-out
+    // ended, so the dip keeps its length. The clock is read after the
+    // landing, because a frame's timestamp does not count the landing's own
+    // work. After a long stall, half of the fade-in still plays.
+    const fadeOutEnd = endTime(fadeOut, half);
+    if (fadeOutEnd != null) {
+      fadeIn.startTime = Math.max(fadeOutEnd, performance.now() - half / 2);
+    }
+    // The fade-in now holds the opacity, so the held 0 can go.
+    fadeOut.cancel();
+  },
+  // A cancelled fade-out rejects `finished`: nothing lands.
+  () => {});
+  return {
+    cancel() {
+      isCancelled = true;
+      fadeOut.cancel();
+      fadeIn?.cancel();
+    }
+  };
+}
+
+/** When `animation` was due to end, on its timeline (ms), if it has started. */
+function endTime(animation, duration) {
+  const start = animation.startTime;
+  return typeof start === 'number' ? start + duration : null;
 }

package/dist/utils/clickGuard.d.ts

@@ -18,9 +18,16 @@ export interface ClickGuardOptions {
      * @default false
      */
     readonly takesLateMouse?: boolean;
+    /**
+     * The menu press model's arm at a finger's release: the guard also cancels
+     * that touch's `touchend`, so the browser creates no click for it. A
+     * cancelled `touchend` disarms the guard.
+     * @default false
+     */
+    readonly cancelsTouchEnd?: boolean;
 }
 /** Swallow the browser's next click on `doc` (see the file header). */
-export declare function armClickGuard(doc: Document, { staysInstalled, takesLateMouse }?: ClickGuardOptions): void;
+export declare function armClickGuard(doc: Document, { staysInstalled, takesLateMouse, cancelsTouchEnd, }?: ClickGuardOptions): void;
 /** Stop swallowing on `doc`; idempotent. */
 export declare function disarmClickGuard(doc: Document): void;
 /** Whether the guard on `doc` would swallow the next click. */

package/dist/utils/clickGuard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clickGuard.d.ts","sourceRoot":"","sources":["../../src/utils/clickGuard.ts"],"names":[],"mappings":"AAqCA;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,yCAAyC;AACzC,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;CACnC;AA8BD,uEAAuE;AACvE,wBAAgB,aAAa,CAC3B,GAAG,EAAE,QAAQ,EACb,EAAC,cAAsB,EAAE,cAAsB,EAAC,GAAE,iBAAsB,GACvE,IAAI,CA2BN;AAED,4CAA4C;AAC5C,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAYpD;AAED,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,QAAQ,GAAG,OAAO,CAExD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAOzD;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,IAAI,CAQ/C"}
+{"version":3,"file":"clickGuard.d.ts","sourceRoot":"","sources":["../../src/utils/clickGuard.ts"],"names":[],"mappings":"AA0CA;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,yCAAyC;AACzC,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;;;OAKG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;CACpC;AA8BD,uEAAuE;AACvE,wBAAgB,aAAa,CAC3B,GAAG,EAAE,QAAQ,EACb,EACE,cAAsB,EACtB,cAAsB,EACtB,eAAuB,GACxB,GAAE,iBAAsB,GACxB,IAAI,CA+CN;AAED,4CAA4C;AAC5C,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAYpD;AAED,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,QAAQ,GAAG,OAAO,CAExD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAOzD;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,IAAI,CAQ/C"}

package/dist/utils/clickGuard.js

@@ -26,6 +26,11 @@
 // `touchend`, aimed at whatever is under the finger by then. They go with
 // the click, the next `pointerdown` or the window, as the guard does.
 //
+// The menu press model's arm at a finger's release also cancels that touch's
+// `touchend`, so the browser creates no click and no compatibility mouse
+// events. A busy main thread can otherwise hold that click past the window,
+// when a drill-in has put another row under the finger.
+//
 // Some clicks always pass:
 // - a click with `detail` 0: a keyboard's, a screen reader's, or one that the
 //   page dispatches;
@@ -67,7 +72,8 @@ function listenForClicks(view) {
 /** Swallow the browser's next click on `doc` (see the file header). */
 export function armClickGuard(doc, {
   staysInstalled = false,
-  takesLateMouse = false
+  takesLateMouse = false,
+  cancelsTouchEnd = false
 } = {}) {
   const view = doc.defaultView;
   if (view == null) {
@@ -96,6 +102,23 @@ export function armClickGuard(doc, {
       }));
     }
   }
+  if (cancelsTouchEnd) {
+    // A touch sends its pointerup before its touchend, so the next touchend is
+    // that touch's own. The next pointerdown disarms the guard first.
+    const stopTouchEnd = subscribeInput(view, 'touchend', event => {
+      stopTouchEnd();
+      // A touchend that the browser took for a scroll is not cancelable.
+      // The guard stays armed for a click that may follow it.
+      if (event.cancelable) {
+        event.preventDefault();
+        // No click follows a cancelled touchend.
+        disarmClickGuard(doc);
+      }
+    }, {
+      cancels: true
+    });
+    guard.unsubscribers.push(stopTouchEnd);
+  }
   guard.timer = setTimeout(() => disarmClickGuard(doc), CLICK_GUARD_WINDOW_MS);
 }
 

package/locales/en.json

@@ -1123,6 +1123,10 @@
     "defaultMessage": "All filters removed",
     "description": "Screen-reader announcement after a PowerSearch field's Clear all removes every filter. Distinct from @astryx.tokenizer.allRemoved: PowerSearch words its items as filters."
   },
+  "@astryx.powersearch.editableFiltersRemoved": {
+    "defaultMessage": "Editable filters removed",
+    "description": "Screen-reader announcement after a PowerSearch field's Clear all removes the filters the user can edit and keeps its read-only filters. Used instead of @astryx.powersearch.allFiltersRemoved while a read-only filter remains."
+  },
   "@astryx.resizable.collapsed": {
     "defaultMessage": "Collapsed",
     "description": "aria-valuetext for the Resizable drag handle (role=separator) while its panel is collapsed to zero size. Replaces the numeric value announcement, since the numeric value is clamped to the minimum while collapsed. Adjective describing the panel state, not a verb/command."

package/locales/pseudo.json

@@ -842,6 +842,9 @@
   "@astryx.powersearch.allFiltersRemoved": {
     "defaultMessage": "⟦Àłł ƒíłţéřš řéɱóṽéð⟧"
   },
+  "@astryx.powersearch.editableFiltersRemoved": {
+    "defaultMessage": "⟦Éðíţàƀłé ƒíłţéřš řéɱóṽéð⟧"
+  },
   "@astryx.resizable.collapsed": {
     "defaultMessage": "⟦Çółłàþšéð⟧"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.7-canary.f9ac85f",
+  "version": "0.7.7",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -829,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": [
@@ -865,9 +865,6 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.7-canary.f9ac85f",
-    "@astryxdesign/cli": "0.7.7-canary.f9ac85f",
-    "@astryxdesign/interaction-harness": "0.7.7-canary.f9ac85f",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -878,7 +875,10 @@
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
     "@types/babel__core": "^7.20.5",
-    "tailwindcss": "^4.3.2"
+    "tailwindcss": "^4.3.2",
+    "@astryxdesign/a11y-spec": "0.0.0",
+    "@astryxdesign/interaction-harness": "0.0.0",
+    "@astryxdesign/cli": "0.7.7"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

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/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,

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/Breadcrumbs/BreadcrumbItem.tsx

@@ -7,7 +7,8 @@
  * @input Uses React use/useRef/useEffect, stylex, theme tokens, BreadcrumbContext,
  *   rtlStyles for the contextual default slash, and (for the menu trigger)
  *   usePopover + the shared DropdownMenu item API (renderDropdownItems,
- *   DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus)
+ *   DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus), and
+ *   the AppShell mobile drawer helpers
  * @output Exports BreadcrumbItem component and BreadcrumbItemProps
  * @position Individual breadcrumb item; used inside Breadcrumbs
  *
@@ -72,6 +73,10 @@ import {
 import type {DropdownMenuOption} from '../DropdownMenu/DropdownMenu';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {
+  useCloseMobileDrawerOnActivate,
+  useIsInAppShellMobileDrawer,
+} from '../AppShell/useCloseMobileDrawerOnActivate';
 import {useInteractionModalityTracking} from '../utils/interactionModality';
 import {isRenderable} from '../utils/isRenderable';
 // =============================================================================
@@ -306,6 +311,11 @@ export function BreadcrumbItem({
   // aria-current on this instead of guessing the <li>'s last child.
   const contentRef = useRef<HTMLElement>(null);
 
+  const closeDrawerAfter = useCloseMobileDrawerOnActivate(
+    useIsInAppShellMobileDrawer(),
+  );
+  const handleActivate = closeDrawerAfter(onClick);
+
   const isCurrent = isCurrentProp === true;
   const isAutoCandidate = isCurrentProp == null;
   const hasMenu = menu != null;
@@ -456,7 +466,7 @@ export function BreadcrumbItem({
         <LinkComponent
           ref={contentRef}
           href={href}
-          onClick={onClick}
+          onClick={handleActivate}
           {...focusOutlineProps.focusVisible(
             itemStyles.link,
             isSupporting ? itemStyles.supportingLink : itemStyles.defaultLink,
@@ -467,7 +477,7 @@ export function BreadcrumbItem({
         <button
           ref={contentRef as React.RefObject<HTMLButtonElement | null>}
           type="button"
-          onClick={onClick}
+          onClick={handleActivate}
           {...focusOutlineProps.focusVisible(
             itemStyles.link,
             itemStyles.buttonReset,