@astryxdesign/core 0.7.3 → 0.7.4-canary.1b56e00

package/dist/BottomSheet/BottomSheetSwitcher.js

@@ -4,7 +4,7 @@
 
 /**
  * @file BottomSheetSwitcher.tsx
- * @input Uses React context, StyleX, theme tokens, shared layer dismissal, focus/scroll-lock hooks, BottomSheetSwitcherContext
+ * @input Uses React context, StyleX, shared layer dismissal, BottomSheetSwitcherContext
  * @output Exports BottomSheetSwitcher and BottomSheetSwitcherProps
  * @position Core switcher for mutually exclusive BottomSheet flows
  *
@@ -15,14 +15,37 @@
  * down at the same time until their top edges align; otherwise it stays
  * stationary. The previous sheet fades only after both motions complete.
  *
- * All child sheets render as panels inside one switcher-owned `<dialog>`. A
- * scrim flow calls showModal() once and keeps that native top-layer dialog open
- * across every handoff. A no-scrim flow calls show() on the same non-modal shell.
- * This keeps one modal boundary and one native ::backdrop without a portal.
+ * Every child sheet owns a native `<dialog>`, exactly like a standalone
+ * sheet: a scrim flow presents each sheet with showModal(), a no-scrim flow
+ * with show(). The browser then does what a modal dialog does -- the page is
+ * inert, focus stays in the top-layer dialog, Escape and the platform close
+ * arrive as `cancel`. The switcher is the coordinator: it decides which
+ * sheet dialog is presented, retained, or hidden, keeps one scrim painted
+ * across a handoff (the retained sheet's backdrop until it fades, then the
+ * new sheet's, swapped without a fade), holds the flow's one page scroll
+ * lock (the shared useScrollLock, as Dialog uses, acquired once while the
+ * flow is presented and released after its exit, never per step) and the
+ * one layer-dismissal registration, and returns focus to the flow's opener
+ * when the flow ends, which no single dialog can know.
+ *
+ * The switcher's one element is a flow wrapper. In a scrim flow it has no box
+ * (`display: contents`): the dialogs sit in the top layer. In a no-scrim flow
+ * it is the isolated surface that orders the sheet dialogs locally, the way
+ * the shared shell once did, so no sheet needs a page-level value of its own.
+ *
+ * Its `ref` resolves to the host dialog: the one presenting the active sheet,
+ * the exiting sheet's through its exit, and the last host's (or the first
+ * mounted sheet's) while the flow is closed, so the ref is never null while a
+ * sheet is mounted. `id` and `data-testid` render on the host dialog only:
+ * a flow that mounts open carries them on the active sheet's dialog in server
+ * markup too; a flow that mounts closed carries them from the first commit's
+ * synchronous re-render on, and its server markup carries them on no element.
+ * Every other dialog prop and handler, `onCancel` included, applies to every
+ * sheet dialog; the browser raises `cancel` on the dialog it presents.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/BottomSheet/BottomSheet.tsx
- * - /packages/core/src/BottomSheet/BottomSheetEdgeTint.tsx
+ * - /packages/core/src/BottomSheet/BottomSheetSwitcherContext.ts
  * - /packages/core/src/BottomSheet/BottomSheetSwitcher.doc.mjs
  * - /packages/core/src/BottomSheet/BottomSheetSwitcher.spec.md
  * - /packages/core/src/BottomSheet/BottomSheetSwitcher.test.tsx
@@ -32,62 +55,14 @@
  */
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import "../theme/tokens.stylex.js";
-import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { useScrollLock } from "../hooks/index.js";
-import { useFocusTrap, useFocusTrapEscapeCompatibilitySignal } from "../hooks/useFocusTrap.js";
-import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
+import { useFocusTrapEscapeCompatibilitySignal } from "../hooks/useFocusTrap.js";
 import { dispatchLayerEscapeKeyDown } from "../Layer/layerStack.js";
 import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
-import { composeEventHandlers, mergeProps } from "../utils/index.js";
-import { BottomSheetEdgeTint } from "./BottomSheetEdgeTint.js";
+import { composeEventHandlers } from "../utils/index.js";
+import { mergeRefs } from "../utils/mergeRefs.js";
 import { BottomSheetSwitcherContext } from "./BottomSheetSwitcherContext.js";
-import { useMergedRefs } from "../hooks/useMergedRefs.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  dialog: {
-    kVAEAm: "xixxii4",
-    kpwlN0: "x10a8y8t",
-    kzqmXN: "x1o6l61p",
-    kZKoxP: "xtdtrs8",
-    ks0D6T: "x1x1rfll",
-    kskxy: "x7ab17h",
-    kogj98: "x1ghz6dp",
-    kmVPX3: "x1717udv",
-    kMzoRj: "xc342km",
-    ksu8eU: "xng3xce",
-    kWkggS: "xjbqb8w",
-    kVQacm: "x1rea2x4",
-    k1xSpc: "x1s85apg",
-    kI3sdo: "x1a2a7pz",
-    $$css: true
-  },
-  dialogOpen: {
-    k1xSpc: "x1lliihq",
-    $$css: true
-  },
-  dialogNonModal: {
-    kfzvcC: "x47corl",
-    kY2c9j: "xfo81ep",
-    kzqmXN: "xh8yej3",
-    kZKoxP: "x5yr21d",
-    $$css: true
-  },
-  scrim: {
-    kGyWv1: "xnixb3f",
-    k5sjJv: "xni466t xxiuuzi",
-    kND0Po: "xc0dz0a",
-    k9an0g: "xft5bk6",
-    kb4ib: "x15h3t91",
-    kwHxkk: "x142juwg",
-    k4oj2o: "x1viac0w",
-    $$css: true
-  },
-  scrimClosing: {
-    kb4ib: "x1cz9k3x",
-    $$css: true
-  }
-};
+import { jsx as _jsx } from "react/jsx-runtime";
 const IDLE_TRANSITION = {
   enteringSheet: null,
   retainedSheet: null,
@@ -125,9 +100,44 @@ function alignmentOffsetForElements(enteringElement, retainedElement) {
   const enteringTop = enteringPositioner?.getBoundingClientRect().top ?? enteringElement.getBoundingClientRect().top;
   return Math.max(0, enteringTop - retainedElement.getBoundingClientRect().top);
 }
+
+/**
+ * Keeps one object identity while its own enumerable entries are unchanged, so
+ * the consumer's rest props can sit in a memoized context value without
+ * refreshing every sheet host on each switcher render.
+ */
+function useShallowStable(value) {
+  const stableRef = useRef(value);
+  const previous = stableRef.current;
+  const previousKeys = Object.keys(previous);
+  const nextKeys = Object.keys(value);
+  const isSame = previousKeys.length === nextKeys.length && nextKeys.every(key => Object.is(previous[key], value[key]));
+  if (!isSame) {
+    stableRef.current = value;
+  }
+  return stableRef.current;
+}
+
+/**
+ * Hands the flow's scrim to `dialog` without a fade. The backdrop's opacity
+ * transition would otherwise ease from the transparent value the entering
+ * dialog was presented with, dipping the page's dim for one motion token
+ * exactly when the previous dialog's backdrop disappears. Even a near-zero
+ * duration paints its first frame at the start value, so the swap disables
+ * the transition outright, flushes style so the new value is committed under
+ * that rule, then restores the token for later gesture and exit fades.
+ */
+function takeOverScrim(dialog, opacity) {
+  dialog.style.setProperty('--_sheet-scrim-duration', '0s');
+  dialog.style.setProperty('--_sheet-scrim-opacity', String(opacity));
+  if (typeof getComputedStyle === 'function') {
+    void getComputedStyle(dialog, '::backdrop').opacity;
+  }
+  dialog.style.removeProperty('--_sheet-scrim-duration');
+}
 /**
- * Coordinates a set of BottomSheets so zero or one is active at a time inside
- * one shared native dialog. During a handoff the previous panel stays visible
+ * Coordinates a set of BottomSheets so zero or one is active at a time, each
+ * in its own native dialog. During a handoff the previous panel stays visible
  * and inert beneath the entering panel, then fades after motion completes.
  *
  * @example
@@ -146,27 +156,70 @@ export function BottomSheetSwitcher({
   hasScrim = true,
   children,
   ref,
-  xstyle,
-  className,
-  style,
   onCancel,
   onClick,
   onKeyDown,
-  ...props
+  className,
+  style,
+  xstyle,
+  ...restDialogProps
 }) {
-  const dialogRef = useRef(null);
-  const dialogModeRef = useRef(null);
+  // Every sheet host applies the switcher's dialog surface to its own dialog.
+  const dialogProps = useShallowStable({
+    ...restDialogProps,
+    className,
+    style,
+    xstyle
+  });
+  const hostDialogRef = useRef(null);
+  const sheetDialogsRef = useRef(new Map());
+  // Sheet ids in the order their dialogs mounted (tree order on first mount).
+  // State, not a ref: the resting host below is rendered -- it carries the
+  // consumer's `id` -- so a sheet mounting or leaving must re-render.
+  const [sheetOrder, setSheetOrder] = useState([]);
+  // The sheet that hosted the flow last, kept while the flow is closed so the
+  // ref and `id` stay on the dialog the person last used. State adjusted
+  // during render (not a ref read during render): it changes exactly when
+  // the presented host does, and the next render reads it.
+  const [lastHostSheet, setLastHostSheet] = useState(null);
+  const presentationOrderRef = useRef(new Map());
+  const presentationCounterRef = useRef(0);
+  const modalFlowRef = useRef(false);
   const triggerRef = useRef(null);
   const sheetElementsRef = useRef(new Map());
   const committedActiveSheetRef = useRef(activeSheet);
-  const [sheetLabels, setSheetLabels] = useState(() => new Map());
+  const scrimOpacityRef = useRef(1);
+  const scrimOwnerRef = useRef(null);
   const [sheetPurposes, setSheetPurposes] = useState(() => new Map());
   const [unmountedSheetIds, setUnmountedSheetIds] = useState(() => new Set());
   const [transition, setTransition] = useState(IDLE_TRANSITION);
   const activeSheetChanged = committedActiveSheetRef.current !== activeSheet;
   const visibleTransition = activeSheetChanged ? transitionForActiveSheetChange(committedActiveSheetRef.current, activeSheet) : transition;
-  const isFlowVisible = activeSheet != null && !unmountedSheetIds.has(activeSheet) || visibleTransition.retainedSheet != null && !unmountedSheetIds.has(visibleTransition.retainedSheet);
+  const presentedActiveSheet = activeSheet != null && !unmountedSheetIds.has(activeSheet) ? activeSheet : null;
+  const presentedRetainedSheet = visibleTransition.retainedSheet != null && !unmountedSheetIds.has(visibleTransition.retainedSheet) ? visibleTransition.retainedSheet : null;
+  const isFlowVisible = presentedActiveSheet != null || presentedRetainedSheet != null;
   const isModal = hasScrim && isFlowVisible;
+  // The dialog that hosts the flow for its ref, its single-instance
+  // attributes, and its dismissal registration: the active sheet's, the
+  // retained sheet's while the flow closes through its exit, and while the
+  // flow is closed the dialog that hosted it last (or the first mounted
+  // sheet's before any open), so the ref resolves to a closed dialog element
+  // rather than to null, as the shared dialog did. Which sheet mounts first
+  // is known only once its dialog registers during the first commit: the
+  // ref is attached to it in that same commit (below), and the rendered
+  // `id` follows in the synchronous re-render that commit schedules, before
+  // the first paint. Server markup therefore carries the `id` on no element.
+  const presentedHostSheet = presentedActiveSheet ?? presentedRetainedSheet;
+  if (presentedHostSheet != null && presentedHostSheet !== lastHostSheet) {
+    setLastHostSheet(presentedHostSheet);
+  }
+  const restingHostSheet = lastHostSheet != null && sheetOrder.includes(lastHostSheet) ? lastHostSheet : sheetOrder[0] ?? null;
+  const hostSheet = presentedHostSheet ?? restingHostSheet;
+  // The dialog whose backdrop paints the flow's one scrim. A retained sheet
+  // keeps it through a handoff so the entering dialog, presented above it in
+  // the top layer, does not dim the previous panel beneath its own backdrop.
+  const scrimOwnerSheet = presentedRetainedSheet ?? presentedActiveSheet;
+  const isFlowClosing = isFlowVisible && activeSheet == null;
   const activeSheetPurpose = (activeSheet == null ? null : sheetPurposes.get(activeSheet)) ?? 'info';
   const allowsEscapeDismiss = activeSheetPurpose !== 'required';
   const allowsLightDismiss = activeSheetPurpose === 'info';
@@ -189,61 +242,96 @@ export function BottomSheetSwitcher({
       onActiveSheetChange(null);
     }
   }, [allowsLightDismiss, onActiveSheetChange]);
-  const {
-    containerRef
-  } = useFocusTrap({
-    isActive: isModal
-  });
-  // Before the shared dismissal stack, this modal trap supplied `onEscape`, so
-  // the released compatibility shim reported it as active. Keep that signal
-  // without registering the switcher twice in the one shared stack.
+  // Focus containment is the native modal dialog's: showModal() makes the
+  // page inert, so Tab cannot leave the active sheet. The released read-only
+  // `hasActiveFocusTrapEscape()` signal still reports a modal flow as a trap,
+  // as it did when a JavaScript trap backed it.
   useFocusTrapEscapeCompatibilitySignal(isModal);
+  // One lock for the whole modal flow, as on a shared dialog: `isModal` stays
+  // true through a handoff (two dialogs open) and through the exit motion, so
+  // the shared counter is taken once and given back once.
+  useScrollLock(isModal);
   const {
     shouldDismissOnCloseRequest
   } = useLayerDismissal({
     isActive: isFlowVisible,
     escapeBehavior: allowsEscapeDismiss ? 'close' : 'block',
     onDismiss: dismissOnEscape,
-    getContainer: () => dialogRef.current,
-    isPresent: () => dialogRef.current?.open ?? false
+    getContainer: () => hostDialogRef.current,
+    isPresent: () => hostDialogRef.current?.open ?? false
   });
-  useScrollLock(isModal);
 
-  // Open one shared shell for the complete flow. Modal flows enter the native
-  // top layer once; handoffs only swap panels inside it. The final panel owns
-  // the exit timing, so isFlowVisible becomes false only when it is safe to
-  // close the dialog and restore focus.
+  // Point the consumer ref and the dismissal registration at the host dialog.
+  // Sheet hosts register their dialogs during commit, so by the time this
+  // layout effect runs the map already names the dialog for `hostSheet` --
+  // and, in the first commit of a flow that mounts closed, the first
+  // registered dialog before `sheetOrder` has caught up, so a parent's own
+  // mount effects already find the ref resolved. The ref is attached the way
+  // React attaches one: a callback ref's returned cleanup runs on detach, and
+  // only a ref without one receives null. Attachment follows the resolved
+  // element, not the render that resolved it: the re-render that catches
+  // `sheetOrder` up resolves the same dialog and leaves the ref alone.
+  const attachedRef = useRef(null);
   useLayoutEffect(() => {
-    const dialog = dialogRef.current;
-    if (dialog == null) {
+    const host = hostSheet == null ? sheetDialogsRef.current.values().next().value ?? null : sheetDialogsRef.current.get(hostSheet) ?? null;
+    hostDialogRef.current = host;
+    const attached = attachedRef.current;
+    if (attached?.host === host && attached.ref === ref) {
       return;
     }
+    attached?.detach?.();
+    if (host == null) {
+      attachedRef.current = null;
+      return;
+    }
+    const detach = mergeRefs(ref)(host);
+    attachedRef.current = {
+      ref,
+      host,
+      detach: typeof detach === 'function' ? detach : undefined
+    };
+  }, [hostSheet, ref, sheetOrder]);
+  useLayoutEffect(() => () => {
+    hostDialogRef.current = null;
+    attachedRef.current?.detach?.();
+    attachedRef.current = null;
+  }, []);
+
+  // Focus return is native per dialog: each showModal() records the focused
+  // element and close() focuses it again. That serves a one-sheet flow, but
+  // the second sheet of a flow records a control inside the first, which is
+  // hidden by the time the flow ends, so the browser's return lands nowhere.
+  // The flow therefore remembers its own opener -- the page element focused
+  // before the first modal present -- and focuses it after the last dialog
+  // closes. Sheet hosts ask before presenting modally, so the capture sees
+  // the page element; hosts present in their own layout effects, which run
+  // before the one below, so the restore follows the last dialog's close.
+  const onBeforeSheetPresent = useCallback(sheetId => {
+    if (triggerRef.current == null) {
+      triggerRef.current = document.activeElement;
+    }
+    modalFlowRef.current = true;
+    presentationCounterRef.current += 1;
+    presentationOrderRef.current.set(sheetId, presentationCounterRef.current);
+  }, []);
+  useLayoutEffect(() => {
     if (isFlowVisible) {
-      const nextMode = hasScrim ? 'modal' : 'non-modal';
-      if (dialog.open && dialogModeRef.current !== nextMode) {
-        dialog.close();
-      }
-      if (!dialog.open) {
-        if (hasScrim && triggerRef.current == null) {
-          triggerRef.current = document.activeElement;
-        }
-        if (hasScrim) {
-          dialog.showModal();
-        } else {
-          dialog.show();
-        }
+      if (!hasScrim) {
+        modalFlowRef.current = false;
       }
-      dialogModeRef.current = nextMode;
       return;
     }
-    if (dialog.open) {
-      dialog.close();
-    }
-    if (dialogModeRef.current === 'modal') {
-      triggerRef.current?.focus();
+    if (modalFlowRef.current) {
+      // Like the browser's own return on close(), without scrolling: the
+      // page kept its scroll offset under the lock, and an opener scrolled
+      // out of view must not drag the page back to itself.
+      triggerRef.current?.focus({
+        preventScroll: true
+      });
     }
     triggerRef.current = null;
-    dialogModeRef.current = null;
+    modalFlowRef.current = false;
+    presentationOrderRef.current.clear();
   }, [hasScrim, isFlowVisible]);
   const getSheetPhase = useCallback(sheetId => {
     if (sheetId === activeSheet) {
@@ -255,6 +343,7 @@ export function BottomSheetSwitcher({
     return 'hidden';
   }, [activeSheet, visibleTransition]);
   const getSheetAlignmentOffset = useCallback(sheetId => visibleTransition.retainedSheet === sheetId ? visibleTransition.alignmentOffset : 0, [visibleTransition]);
+  const isScrimOwner = useCallback(sheetId => sheetId === scrimOwnerSheet, [scrimOwnerSheet]);
   const registerSheetElement = useCallback((sheetId, element) => {
     if (element == null) {
       sheetElementsRef.current.delete(sheetId);
@@ -279,23 +368,28 @@ export function BottomSheetSwitcher({
       });
     }
   }, []);
-  const registerSheetLabel = useCallback((sheetId, label) => {
-    setSheetLabels(current => {
-      if (label == null) {
-        if (!current.has(sheetId)) {
-          return current;
-        }
-        const next = new Map(current);
-        next.delete(sheetId);
-        return next;
-      }
-      if (current.get(sheetId) === label) {
-        return current;
+  const registerSheetDialog = useCallback((sheetId, dialog) => {
+    if (dialog == null) {
+      sheetDialogsRef.current.delete(sheetId);
+      presentationOrderRef.current.delete(sheetId);
+      setSheetOrder(current => current.includes(sheetId) ? current.filter(id => id !== sheetId) : current);
+    } else {
+      sheetDialogsRef.current.set(sheetId, dialog);
+      setSheetOrder(current => current.includes(sheetId) ? current : [...current, sheetId]);
+    }
+  }, []);
+  const isCoveredInTopLayer = useCallback(sheetId => {
+    const order = presentationOrderRef.current;
+    const own = order.get(sheetId);
+    if (own == null) {
+      return false;
+    }
+    for (const [otherId, stamp] of order) {
+      if (otherId !== sheetId && stamp > own && sheetDialogsRef.current.get(otherId)?.open) {
+        return true;
       }
-      const next = new Map(current);
-      next.set(sheetId, label);
-      return next;
-    });
+    }
+    return false;
   }, []);
   const registerSheetPurpose = useCallback((sheetId, purpose) => {
     setSheetPurposes(current => {
@@ -375,39 +469,54 @@ export function BottomSheetSwitcher({
       return current;
     });
   }, []);
-  const setScrimOpacity = useCallback(opacity => {
-    dialogRef.current?.style.setProperty('--_sheet-scrim-opacity', String(opacity));
-  }, []);
+
+  // One scrim for the flow. Only the owning dialog's backdrop carries the
+  // current opacity; every other presented dialog keeps its backdrop clear.
+  // When ownership moves — the retained dialog has faded and closes, or a
+  // rapid replacement hides it — the new owner takes the value without a
+  // fade, in the same layout pass that closes the old one.
+  const applyScrimOpacity = useCallback(() => {
+    const owner = scrimOwnerSheet == null ? null : sheetDialogsRef.current.get(scrimOwnerSheet) ?? null;
+    // A fresh open keeps the backdrop's @starting-style fade; only a hand
+    // from one presented dialog to another swaps without one.
+    const ownerChanged = scrimOwnerRef.current != null && scrimOwnerRef.current !== scrimOwnerSheet;
+    scrimOwnerRef.current = scrimOwnerSheet;
+    for (const [sheetId, dialog] of sheetDialogsRef.current) {
+      if (dialog === owner) {
+        if (ownerChanged && dialog.open) {
+          takeOverScrim(dialog, scrimOpacityRef.current);
+        } else {
+          dialog.style.setProperty('--_sheet-scrim-opacity', String(scrimOpacityRef.current));
+        }
+      } else if (sheetId !== scrimOwnerSheet) {
+        dialog.style.setProperty('--_sheet-scrim-opacity', '0');
+      }
+    }
+  }, [scrimOwnerSheet]);
   const onSheetScrimOpacityChange = useCallback((sheetId, opacity) => {
     // A pointer captured by the outgoing sheet can keep delivering gesture
     // events after a handoff. Only the currently committed sheet owns the
-    // shared backdrop, so stale gesture updates must not reach the dialog.
+    // flow's scrim value, so stale gesture updates must not reach it.
     if (sheetId !== committedActiveSheetRef.current) {
       return;
     }
-    setScrimOpacity(opacity);
-  }, [setScrimOpacity]);
+    scrimOpacityRef.current = opacity;
+    applyScrimOpacity();
+  }, [applyScrimOpacity]);
+
+  // A committed selection resets the flow's scrim value -- 1 while a sheet
+  // is active, 0 for the exit fade -- and writes it to the owning backdrop in
+  // the same effect; a gesture then adjusts the value through
+  // `onSheetScrimOpacityChange` until the next selection.
   useLayoutEffect(() => {
-    setScrimOpacity(activeSheet == null ? 0 : 1);
-  }, [activeSheet, setScrimOpacity]);
-  const contextValue = useMemo(() => ({
-    activeSheet,
-    hasScrim,
-    onActiveSheetChange,
-    getSheetPhase,
-    getSheetAlignmentOffset,
-    registerSheetElement,
-    registerSheetLabel,
-    registerSheetPurpose,
-    onSheetEnterStart,
-    onSheetTransitionComplete,
-    onSheetScrimOpacityChange
-  }), [activeSheet, getSheetAlignmentOffset, getSheetPhase, hasScrim, onActiveSheetChange, onSheetEnterStart, onSheetScrimOpacityChange, onSheetTransitionComplete, registerSheetElement, registerSheetLabel, registerSheetPurpose]);
-  const activeLabel = (activeSheet == null ? null : sheetLabels.get(activeSheet)) ?? (visibleTransition.retainedSheet == null ? undefined : sheetLabels.get(visibleTransition.retainedSheet));
+    scrimOpacityRef.current = activeSheet == null ? 0 : 1;
+    applyScrimOpacity();
+  }, [applyScrimOpacity, activeSheet, hasScrim, isFlowVisible]);
 
-  // A `cancel` that bubbles up from a step is not a close request for the
-  // flow: a file input fires one when its picker is dismissed, and a step
-  // renders no dialog of its own, so it lands here. It is left alone.
+  // A `cancel` that bubbles up from inside a step is not a close request for
+  // the flow: a file input fires one when its picker is dismissed, and it
+  // reaches the step's dialog. Only a `cancel` fired at a sheet dialog itself
+  // dismisses; the bubbled one is left alone.
   const handleCancel = useCallback(event => {
     if (event.target !== event.currentTarget) {
       return;
@@ -425,30 +534,50 @@ export function BottomSheetSwitcher({
     dispatchLayerEscapeKeyDown(event.nativeEvent);
   }, []);
   const handleClick = useCallback(event => {
-    if (hasScrim && event.target === event.currentTarget) {
+    // A `::backdrop` click targets its dialog element. Only the active
+    // sheet's backdrop is the flow's scrim; a retained dialog is inert and
+    // a hidden one closed, so neither can be clicked, but be explicit.
+    if (hasScrim && event.target === event.currentTarget && event.currentTarget === hostDialogRef.current) {
       dismissOnLightInteraction();
     }
   }, [dismissOnLightInteraction, hasScrim]);
-  const dialogStyleProps = stylex.props(styles.dialog, isFlowVisible && styles.dialogOpen, hasScrim && styles.scrim, hasScrim && isFlowVisible && activeSheet == null && styles.scrimClosing, !hasScrim && styles.dialogNonModal, xstyle);
-  const dialogPresentationProps = mergeProps(dialogStyleProps, className, style);
-  const ariaLabel = props['aria-label'] ?? (props['aria-labelledby'] == null ? activeLabel : undefined);
+  const onDialogCancel = useMemo(() => composeEventHandlers(onCancel, handleCancel), [handleCancel, onCancel]);
+  const onDialogClick = useMemo(() => composeEventHandlers(onClick, handleClick), [handleClick, onClick]);
+  const onDialogKeyDown = useMemo(() => composeEventHandlers(onKeyDown, handleKeyDown), [handleKeyDown, onKeyDown]);
+  const contextValue = useMemo(() => ({
+    activeSheet,
+    hasScrim,
+    onActiveSheetChange,
+    getSheetPhase,
+    getSheetAlignmentOffset,
+    hostSheet,
+    isScrimOwner,
+    isFlowClosing,
+    registerSheetElement,
+    registerSheetDialog,
+    registerSheetPurpose,
+    onBeforeSheetPresent,
+    isCoveredInTopLayer,
+    onSheetEnterStart,
+    onSheetTransitionComplete,
+    onSheetScrimOpacityChange,
+    dialogProps,
+    onDialogCancel,
+    onDialogClick,
+    onDialogKeyDown
+  }), [activeSheet, dialogProps, getSheetAlignmentOffset, getSheetPhase, hasScrim, hostSheet, isCoveredInTopLayer, isFlowClosing, isScrimOwner, onActiveSheetChange, onBeforeSheetPresent, onDialogCancel, onDialogClick, onDialogKeyDown, onSheetEnterStart, onSheetScrimOpacityChange, onSheetTransitionComplete, registerSheetDialog, registerSheetElement, registerSheetPurpose]);
   return /*#__PURE__*/_jsx(BottomSheetSwitcherContext, {
     value: contextValue,
-    children: /*#__PURE__*/_jsxs("dialog", {
-      ...props,
-      ...dialogPresentationProps,
-      ref: useMergedRefs(ref, dialogRef, containerRef),
-      "aria-label": ariaLabel,
-      "aria-modal": isModal ? 'true' : undefined,
-      onCancel: composeEventHandlers(onCancel, handleCancel),
-      onClick: composeEventHandlers(onClick, handleClick),
-      onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
-      ...(activeSheetPurpose === 'required' ? {
-        role: 'alertdialog'
-      } : undefined),
-      children: [/*#__PURE__*/_jsx(LayerDepthProvider, {
-        children: children
-      }), /*#__PURE__*/_jsx(BottomSheetEdgeTint, {})]
+    children: /*#__PURE__*/_jsx("div", {
+      ...{
+        0: {
+          className: "xjp7ctv"
+        },
+        1: {
+          className: "x1lliihq xixxii4 x10a8y8t xh8yej3 x5yr21d x47corl xc8icb0 xfo81ep"
+        }
+      }[!!(!hasScrim && isFlowVisible) << 0],
+      children: children
     })
   });
 }

package/dist/BottomSheet/BottomSheetSwitcherContext.d.ts

@@ -1,21 +1,71 @@
+/**
+ * @file BottomSheetSwitcherContext.ts
+ * @input Uses React context
+ * @output Internal phase, lifecycle, and host-dialog context shared by BottomSheetSwitcher and BottomSheet
+ * @position Private coordination layer for mutually exclusive BottomSheets
+ *
+ * Every child sheet renders its own native `<dialog>`; the switcher's only
+ * element is a flow wrapper. This context carries the phase machine, the
+ * host-dialog selection, and the switcher's dialog-level props and handlers
+ * down to those sheet hosts.
+ */
+import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, SyntheticEvent } from 'react';
+import type { BaseProps } from '../BaseProps';
 import type { DialogPurpose } from '../Dialog';
 export type BottomSheetSwitcherPhase = 'entering' | 'active' | 'covered' | 'aligning' | 'fading' | 'exiting' | 'hidden';
 export interface BottomSheetSwitcherTransitionEvent {
     sheetId: string;
     phase: 'entering' | 'aligning' | 'fading' | 'exiting';
 }
+/**
+ * The switcher's own dialog surface, applied by every sheet host. `ref` is not
+ * part of it: the switcher resolves its ref to the host sheet's dialog, and
+ * the single-instance attributes (`id`, `data-testid`) render there only.
+ */
+export type BottomSheetSwitcherDialogProps = Omit<BaseProps<HTMLDialogElement>, 'onClick' | 'onKeyDown'>;
 export interface BottomSheetSwitcherContextValue {
     activeSheet: string | null;
     hasScrim: boolean;
     onActiveSheetChange: (sheetId: string | null) => void;
     getSheetPhase: (sheetId: string) => BottomSheetSwitcherPhase;
     getSheetAlignmentOffset: (sheetId: string) => number;
+    /**
+     * The sheet whose dialog hosts the flow: the active sheet, the exiting
+     * sheet through its exit, and the last host (or the first mounted sheet)
+     * while the flow is closed. The switcher's ref and its single-instance
+     * attributes resolve to this sheet's dialog.
+     */
+    hostSheet: string | null;
+    /**
+     * Whether this sheet's dialog paints the flow's one scrim right now. During
+     * a handoff the retained sheet keeps it, so the entering dialog's backdrop
+     * stays transparent above the still-visible previous panel.
+     */
+    isScrimOwner: (sheetId: string) => boolean;
+    /** The flow is closing: the owning backdrop fades out on the exit curve. */
+    isFlowClosing: boolean;
     registerSheetElement: (sheetId: string, element: HTMLElement | null) => void;
-    registerSheetLabel: (sheetId: string, label: string | null) => void;
+    registerSheetDialog: (sheetId: string, dialog: HTMLDialogElement | null) => void;
     registerSheetPurpose: (sheetId: string, purpose: DialogPurpose | null) => void;
+    /**
+     * Called by a sheet host just before it presents its dialog modally, so the
+     * switcher can remember the page element that opened the flow.
+     */
+    onBeforeSheetPresent: (sheetId: string) => void;
+    /**
+     * Whether a modal sheet dialog that is already open sits beneath another
+     * open sheet dialog in the top layer, so it must re-present to become the
+     * topmost layer again.
+     */
+    isCoveredInTopLayer: (sheetId: string) => boolean;
     onSheetEnterStart: (sheetId: string) => void;
     onSheetTransitionComplete: (event: BottomSheetSwitcherTransitionEvent) => void;
     onSheetScrimOpacityChange: (sheetId: string, opacity: number) => void;
+    /** Consumer dialog props the switcher forwards to every sheet dialog. */
+    dialogProps: BottomSheetSwitcherDialogProps;
+    onDialogCancel: (event: SyntheticEvent<HTMLDialogElement>) => void;
+    onDialogClick: (event: ReactMouseEvent<HTMLDialogElement>) => void;
+    onDialogKeyDown: (event: ReactKeyboardEvent<HTMLDialogElement>) => void;
 }
 export declare const BottomSheetSwitcherContext: import("react").Context<BottomSheetSwitcherContextValue | null>;
 //# sourceMappingURL=BottomSheetSwitcherContext.d.ts.map