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

package/dist/BottomSheet/BottomSheet.d.ts

@@ -6,10 +6,22 @@
  *
  * BottomSheet selects one of two focused hosts. A standalone host owns its
  * native dialog lifecycle and joins the shared layer dismissal stack; a
- * switcher item participates in the parent's shared dialog, transition state
- * machine, and dismissal registration. Both render the same BottomSheetPanel,
- * which owns sheet presentation, content padding, gestures, mobile-keyboard
- * accommodation, and motion completion.
+ * switcher item owns a native dialog of its own too, but hands its lifecycle
+ * to the parent's transition state machine, scrim ownership, and dismissal
+ * registration. Both render the same BottomSheetPanel, which owns sheet
+ * presentation, content padding, gestures, mobile-keyboard accommodation,
+ * and motion completion.
+ *
+ * Every sheet dialog is native first. A scrim-backed sheet is presented with
+ * showModal(): the browser makes the page inert and keeps focus inside the
+ * dialog, delivers Escape and the platform close as `cancel`, paints the
+ * scrim as `::backdrop`, and returns focus to the opener on close(). Page
+ * scroll is locked by the shared useScrollLock hook, as for Dialog: a
+ * standalone sheet holds it while presented, a switcher holds one for the
+ * whole modal flow. The remaining script is what no single dialog can
+ * decide: gating `cancel` by `purpose` and the shared dismissal stack, and,
+ * in a switcher, handing one scrim between two dialogs and keeping focus in
+ * the active sheet when a retained dialog closes.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/BottomSheet/BottomSheetPanel.tsx
@@ -82,8 +94,8 @@ interface SwitcherBottomSheetProps extends BottomSheetSharedProps {
 }
 export type BottomSheetProps = StandaloneBottomSheetProps | SwitcherBottomSheetProps;
 /**
- * A mobile touch sheet that either owns a native dialog or participates in a
- * BottomSheetSwitcher shared dialog when given a sheetId inside that context.
+ * A mobile touch sheet that owns a native dialog. Given a sheetId inside a
+ * BottomSheetSwitcher, that switcher coordinates the dialog's lifecycle.
  */
 export declare function BottomSheet(props: BottomSheetProps): import("react").JSX.Element;
 export declare namespace BottomSheet {

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,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;AAmBhD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AA0EhF,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,0DAA0D;IAC1D,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,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;AA0YxD;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,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;AAoBhD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AA2FhF,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,0DAA0D;IAC1D,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,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;AAikBxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}

package/dist/BottomSheet/BottomSheet.js

@@ -10,10 +10,22 @@
  *
  * BottomSheet selects one of two focused hosts. A standalone host owns its
  * native dialog lifecycle and joins the shared layer dismissal stack; a
- * switcher item participates in the parent's shared dialog, transition state
- * machine, and dismissal registration. Both render the same BottomSheetPanel,
- * which owns sheet presentation, content padding, gestures, mobile-keyboard
- * accommodation, and motion completion.
+ * switcher item owns a native dialog of its own too, but hands its lifecycle
+ * to the parent's transition state machine, scrim ownership, and dismissal
+ * registration. Both render the same BottomSheetPanel, which owns sheet
+ * presentation, content padding, gestures, mobile-keyboard accommodation,
+ * and motion completion.
+ *
+ * Every sheet dialog is native first. A scrim-backed sheet is presented with
+ * showModal(): the browser makes the page inert and keeps focus inside the
+ * dialog, delivers Escape and the platform close as `cancel`, paints the
+ * scrim as `::backdrop`, and returns focus to the opener on close(). Page
+ * scroll is locked by the shared useScrollLock hook, as for Dialog: a
+ * standalone sheet holds it while presented, a switcher holds one for the
+ * whole modal flow. The remaining script is what no single dialog can
+ * decide: gating `cancel` by `purpose` and the shared dismissal stack, and,
+ * in a switcher, handing one scrim between two dialogs and keeping focus in
+ * the active sheet when a retained dialog closes.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/BottomSheet/BottomSheetPanel.tsx
@@ -32,6 +44,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { useDevWarning, useScrollLock } from "../hooks/index.js";
+import { mergeProps } from "../utils/index.js";
 import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
 import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
 import { focusForLastInput } from "../utils/focusReturn.js";
@@ -40,6 +53,53 @@ import { BottomSheetPanel } from "./BottomSheetPanel.js";
 import { BottomSheetEdgeTint } from "./BottomSheetEdgeTint.js";
 import { BottomSheetSwitcherContext } from "./BottomSheetSwitcherContext.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
+  },
+  scrim: {
+    kGyWv1: "xnixb3f",
+    k5sjJv: "xni466t xxiuuzi",
+    kND0Po: "xc0dz0a",
+    k9an0g: "x10buo38",
+    kb4ib: "x15h3t91",
+    kwHxkk: "x142juwg",
+    k4oj2o: "x15l12jy",
+    $$css: true
+  },
+  dialogNonModalItem: {
+    kfzvcC: "x47corl",
+    kzqmXN: "xh8yej3",
+    kZKoxP: "x5yr21d",
+    $$css: true
+  },
+  dialogNonModalItemTop: {
+    kY2c9j: "x1vjfegm",
+    $$css: true
+  },
+  scrimClosing: {
+    kb4ib: "x1cz9k3x",
+    $$css: true
+  }
+};
 function panelStateForSwitcherPhase(phase, alignmentOffset) {
   switch (phase) {
     case 'active':
@@ -91,6 +151,43 @@ function focusPanel(panel, isModal) {
     });
   }
 }
+
+/**
+ * Present a switcher step's dialog modally with no focus to return to.
+ * showModal() records the element focused at that moment and close() moves
+ * focus back to it, in Chromium and WebKit even when focus is in another
+ * dialog by then. For a step that element is the control that advanced the
+ * flow (Continue, Back) or the flow's opener, and the dialog closes a fade
+ * later, while the user is in the next step: the return would pull focus
+ * off the active panel with no user action. Blurring first leaves nothing
+ * recorded, so the close moves nothing; the entering step then focuses its
+ * own panel, and the switcher returns focus to the opener itself when the
+ * flow ends. The blur happens in the same task as the present, so no frame
+ * paints without focus.
+ */
+function presentStepModally(dialog) {
+  const focused = dialog.ownerDocument.activeElement;
+  if (focused instanceof HTMLElement && focused !== dialog.ownerDocument.body) {
+    focused.blur();
+  }
+  dialog.showModal();
+}
+
+/**
+ * Present a switcher dialog whose backdrop must start, and stay, clear: the
+ * opacity is set with the scrim transition pinned to 0s, the dialog is
+ * presented, and the pin is lifted only after a style flush has applied the
+ * clear backdrop, so no frame eases from a previous backdrop value.
+ */
+function presentWithClearScrim(dialog) {
+  dialog.style.setProperty('--_sheet-scrim-duration', '0s');
+  dialog.style.setProperty('--_sheet-scrim-opacity', '0');
+  presentStepModally(dialog);
+  if (typeof getComputedStyle === 'function') {
+    void getComputedStyle(dialog, '::backdrop').opacity;
+  }
+  dialog.style.removeProperty('--_sheet-scrim-duration');
+}
 function StandaloneBottomSheet({
   ref,
   isOpen,
@@ -231,10 +328,10 @@ function StandaloneBottomSheet({
         className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1a2a7pz x1lliihq"
       },
       4: {
-        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a x10buo38 x15h3t91 x142juwg x15l12jy"
       },
       12: {
-        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a x10buo38 x15h3t91 x142juwg x15l12jy"
       },
       2: {
         className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x1cz9k3x"
@@ -243,10 +340,10 @@ function StandaloneBottomSheet({
         className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x1cz9k3x"
       },
       6: {
-        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x142juwg x1viac0w x1cz9k3x"
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a x10buo38 x142juwg x15l12jy x1cz9k3x"
       },
       14: {
-        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x142juwg x1viac0w x1cz9k3x"
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a x10buo38 x142juwg x15l12jy x1cz9k3x"
       },
       1: {
         className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x47corl xfo81ep xh8yej3 x5yr21d"
@@ -255,10 +352,10 @@ function StandaloneBottomSheet({
         className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x47corl xfo81ep xh8yej3 x5yr21d"
       },
       5: {
-        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a x10buo38 x15h3t91 x142juwg x15l12jy x47corl xfo81ep xh8yej3 x5yr21d"
       },
       13: {
-        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a x10buo38 x15h3t91 x142juwg x15l12jy x47corl xfo81ep xh8yej3 x5yr21d"
       },
       3: {
         className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
@@ -267,10 +364,10 @@ function StandaloneBottomSheet({
         className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
       },
       7: {
-        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x142juwg x1viac0w x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a x10buo38 x142juwg x15l12jy x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
       },
       15: {
-        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x142juwg x1viac0w x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
+        className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xc342km xng3xce xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a x10buo38 x142juwg x15l12jy x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
       }
     }[!!shouldPresent << 3 | !!hasScrim << 2 | !!(hasScrim && !isOpen && isPresented) << 1 | !!!hasScrim << 0],
     ref: dialogRef,
@@ -324,12 +421,21 @@ function SwitcherBottomSheetItem({
     onActiveSheetChange,
     getSheetPhase,
     getSheetAlignmentOffset,
+    hostSheet,
+    isScrimOwner,
+    isFlowClosing,
     registerSheetElement,
-    registerSheetLabel,
+    registerSheetDialog,
     registerSheetPurpose,
+    onBeforeSheetPresent,
+    isCoveredInTopLayer,
     onSheetEnterStart,
     onSheetTransitionComplete,
-    onSheetScrimOpacityChange
+    onSheetScrimOpacityChange,
+    dialogProps,
+    onDialogCancel,
+    onDialogClick,
+    onDialogKeyDown
   } = switcher;
   const hasValidSheetId = typeof sheetId === 'string' && sheetId.length > 0;
   const phase = hasValidSheetId ? getSheetPhase(sheetId) : 'hidden';
@@ -339,6 +445,10 @@ function SwitcherBottomSheetItem({
   const isInactive = phase === 'covered' || phase === 'aligning' || phase === 'fading' || phase === 'exiting';
   const isPresented = phase !== 'hidden';
   const isTopSheet = phase === 'active' || phase === 'entering';
+  const ownsScrim = hasValidSheetId && isScrimOwner(sheetId);
+  const isHostSheet = hasValidSheetId && hostSheet === sheetId;
+  const dialogRef = useRef(null);
+  const dialogModeRef = useRef(null);
   const panelRef = useRef(null);
   const previousPhaseRef = useRef(phase);
   const previousPhase = previousPhaseRef.current;
@@ -357,6 +467,12 @@ function SwitcherBottomSheetItem({
       registerSheetElement(sheetId, element);
     }
   }, [hasValidSheetId, registerSheetElement, sheetId]);
+  const handleDialogElementChange = useCallback(element => {
+    dialogRef.current = element;
+    if (hasValidSheetId) {
+      registerSheetDialog(sheetId, element);
+    }
+  }, [hasValidSheetId, registerSheetDialog, sheetId]);
   const handleMotionStart = useCallback(motion => {
     if (motion === 'entering' && hasValidSheetId) {
       onSheetEnterStart(sheetId);
@@ -375,13 +491,6 @@ function SwitcherBottomSheetItem({
       onSheetScrimOpacityChange(sheetId, opacity);
     }
   }, [hasValidSheetId, onSheetScrimOpacityChange, sheetId]);
-  useLayoutEffect(() => {
-    if (!hasValidSheetId) {
-      return;
-    }
-    registerSheetLabel(sheetId, label);
-    return () => registerSheetLabel(sheetId, null);
-  }, [hasValidSheetId, label, registerSheetLabel, sheetId]);
   useLayoutEffect(() => {
     if (!hasValidSheetId) {
       return;
@@ -389,6 +498,70 @@ function SwitcherBottomSheetItem({
     registerSheetPurpose(sheetId, purpose);
     return () => registerSheetPurpose(sheetId, null);
   }, [hasValidSheetId, purpose, registerSheetPurpose, sheetId]);
+
+  // Present this sheet's own dialog while the switcher keeps the sheet on
+  // screen, and close it once the sheet is hidden. A scrim flow presents
+  // modally: an entering dialog is shown above the retained one in the top
+  // layer, and the retained dialog closes only after its panel has faded. A
+  // modal dialog that is still open beneath a newer one -- the user went back
+  // to a sheet that was still fading -- re-presents to become topmost again:
+  // the document is blocked by the topmost modal dialog, so a lower one is
+  // inert whatever the switcher calls it.
+  //
+  // Every present blurs first, so no step dialog records an element to
+  // return focus to: a close while another sheet is active moves nothing,
+  // and when the flow ends the switcher focuses the flow's opener itself.
+  useLayoutEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog == null || !hasValidSheetId) {
+      return;
+    }
+    if (!isPresented) {
+      if (dialog.open) {
+        dialog.close();
+      }
+      dialogModeRef.current = null;
+      return;
+    }
+    const nextMode = hasScrim ? 'modal' : 'non-modal';
+    if (dialog.open && dialogModeRef.current !== nextMode) {
+      dialog.close();
+    }
+    if (dialog.open && hasScrim && isInteractive && isCoveredInTopLayer(sheetId)) {
+      dialog.close();
+    }
+    if (!dialog.open) {
+      if (hasScrim) {
+        onBeforeSheetPresent(sheetId);
+        if (ownsScrim) {
+          presentStepModally(dialog);
+        } else {
+          // Entering above a retained dialog whose backdrop already dims the
+          // page: present with a clear backdrop so the page is not dimmed
+          // twice and the previous panel stays undimmed beneath this one.
+          // Pinned to 0s across the present: a dialog re-presented from the
+          // retained position (the user went back while it was fading)
+          // closed with its backdrop at 1, and would otherwise ease it down
+          // over the scrim duration on top of the new owner's backdrop.
+          presentWithClearScrim(dialog);
+        }
+      } else {
+        dialog.show();
+      }
+    }
+    dialogModeRef.current = nextMode;
+  }, [hasScrim, hasValidSheetId, isCoveredInTopLayer, isInteractive, isPresented, onBeforeSheetPresent, ownsScrim, sheetId]);
+
+  // A sheet removed while presented -- a consumer unmounts the closing sheet
+  // in the same update that closes the flow -- takes its dialog out of the
+  // top layer with it, but the element would keep its `open` state. Close it
+  // while it is still attached so the native lifecycle ends cleanly.
+  useLayoutEffect(() => () => {
+    const dialog = dialogRef.current;
+    if (dialog?.open) {
+      dialog.close();
+    }
+  }, []);
   useEffect(() => {
     if (isInteractive) {
       const wasInteractive = previousPhase === 'active' || previousPhase === 'entering';
@@ -401,50 +574,87 @@ function SwitcherBottomSheetItem({
     }
   }, [hasScrim, isInteractive, phase, previousPhase]);
   useDevWarning('BottomSheet', 'requires a non-empty `label` for an accessible name; the open sheet ' + 'has no built-in heading to derive one from.', isInteractive && !label);
-  return /*#__PURE__*/_jsx("div", {
-    ...{
-      0: {
-        className: "x10l6tqk x17y0mx6 x1ey2m1c x78zum5 xl56j7k x47corl"
-      },
-      2: {
-        className: "x10l6tqk x17y0mx6 x1ey2m1c xl56j7k x47corl x1s85apg"
-      },
-      1: {
-        className: "x10l6tqk x17y0mx6 x1ey2m1c x78zum5 xl56j7k x47corl x1vjfegm"
-      },
-      3: {
-        className: "x10l6tqk x17y0mx6 x1ey2m1c xl56j7k x47corl x1s85apg x1vjfegm"
-      }
-    }[!!!isPresented << 1 | !!isTopSheet << 0],
-    hidden: !isPresented,
+
+  // The switcher's dialog surface applies to every sheet dialog, except the
+  // attributes that identify one element: those render on the host dialog
+  // only, the one the switcher's ref resolves to. Of the attributes set
+  // explicitly below, only `role` has a consumer value to keep: a required
+  // step forces `alertdialog`, otherwise the switcher's `role` stands, as on
+  // a shared dialog. `aria-label`/`aria-labelledby` keep consumer precedence
+  // above; `aria-modal`, `aria-hidden`, and `inert` are the host's own state.
+  const {
+    className: switcherClassName,
+    style: switcherStyle,
+    xstyle: switcherXstyle,
+    'aria-label': switcherAriaLabel,
+    'aria-labelledby': switcherAriaLabelledBy,
+    id: switcherId,
+    'data-testid': switcherTestId,
+    ...switcherDialogProps
+  } = dialogProps;
+  const dialogPresentationProps = mergeProps(stylex.props(styles.dialog, isPresented && styles.dialogOpen, hasScrim && styles.scrim, hasScrim && ownsScrim && isFlowClosing && styles.scrimClosing, !hasScrim && styles.dialogNonModalItem, !hasScrim && isTopSheet && styles.dialogNonModalItemTop, switcherXstyle), switcherClassName, switcherStyle);
+  return /*#__PURE__*/_jsxs("dialog", {
+    ...switcherDialogProps,
+    ...dialogPresentationProps,
+    id: isHostSheet ? switcherId : undefined,
+    "data-testid": isHostSheet ? switcherTestId : undefined,
+    ref: handleDialogElementChange,
+    "aria-label": switcherAriaLabel ?? (switcherAriaLabelledBy == null ? label : undefined),
+    "aria-labelledby": switcherAriaLabelledBy,
+    "aria-modal": hasScrim && isInteractive ? 'true' : undefined,
     "aria-hidden": isInactive ? 'true' : undefined,
     inert: isInactive ? true : undefined,
-    children: /*#__PURE__*/_jsx(BottomSheetPanel, {
-      ...props,
-      ref: ref,
-      state: panelState,
-      height: height,
-      label: label,
-      snapPoints: snapPoints,
-      isSwipeDismissAllowed: purpose === 'info',
-      isPageScrollLocked: hasScrim,
-      xstyle: xstyle,
-      onDismiss: dismissOnSwipe,
-      onScrimOpacity: handleScrimOpacity,
-      onElementChange: handlePanelElementChange,
-      onMotionStart: handleMotionStart,
-      onMotionComplete: handleMotionComplete,
-      children: /*#__PURE__*/_jsx(BottomSheetSwitcherContext, {
-        value: null,
-        children: children
+    role: purpose === 'required' ? 'alertdialog' : switcherDialogProps.role,
+    onCancel: onDialogCancel,
+    onClick: onDialogClick,
+    onKeyDown: onDialogKeyDown,
+    children: [/*#__PURE__*/_jsx("div", {
+      ...{
+        0: {
+          className: "x10l6tqk x17y0mx6 x1ey2m1c x78zum5 xl56j7k x47corl"
+        },
+        2: {
+          className: "x10l6tqk x17y0mx6 x1ey2m1c xl56j7k x47corl x1s85apg"
+        },
+        1: {
+          className: "x10l6tqk x17y0mx6 x1ey2m1c x78zum5 xl56j7k x47corl x1vjfegm"
+        },
+        3: {
+          className: "x10l6tqk x17y0mx6 x1ey2m1c xl56j7k x47corl x1s85apg x1vjfegm"
+        }
+      }[!!!isPresented << 1 | !!isTopSheet << 0],
+      hidden: !isPresented,
+      "aria-hidden": isInactive ? 'true' : undefined,
+      inert: isInactive ? true : undefined,
+      children: /*#__PURE__*/_jsx(BottomSheetPanel, {
+        ...props,
+        ref: ref,
+        state: panelState,
+        height: height,
+        label: label,
+        snapPoints: snapPoints,
+        isSwipeDismissAllowed: purpose === 'info',
+        isPageScrollLocked: hasScrim,
+        xstyle: xstyle,
+        onDismiss: dismissOnSwipe,
+        onScrimOpacity: handleScrimOpacity,
+        onElementChange: handlePanelElementChange,
+        onMotionStart: handleMotionStart,
+        onMotionComplete: handleMotionComplete,
+        children: /*#__PURE__*/_jsx(BottomSheetSwitcherContext, {
+          value: null,
+          children: /*#__PURE__*/_jsx(LayerDepthProvider, {
+            children: children
+          })
+        })
       })
-    })
+    }), isPresented && /*#__PURE__*/_jsx(BottomSheetEdgeTint, {})]
   });
 }
 
 /**
- * A mobile touch sheet that either owns a native dialog or participates in a
- * BottomSheetSwitcher shared dialog when given a sheetId inside that context.
+ * A mobile touch sheet that owns a native dialog. Given a sheetId inside a
+ * BottomSheetSwitcher, that switcher coordinates the dialog's lifecycle.
  */
 export function BottomSheet(props) {
   const switcher = use(BottomSheetSwitcherContext);

package/dist/BottomSheet/BottomSheetSwitcher.d.ts

@@ -1,6 +1,6 @@
 /**
  * @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
  *
@@ -11,14 +11,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
@@ -29,9 +52,15 @@
 import { type ReactNode, type SyntheticEvent } from 'react';
 import type { BaseProps } from '../BaseProps';
 export interface BottomSheetSwitcherProps extends BaseProps<HTMLDialogElement> {
-    /** Ref forwarded to the shared native dialog. */
+    /**
+     * Ref resolved to the native dialog hosting the flow: the active sheet's
+     * dialog, which changes on a handoff; the exiting sheet's through its exit;
+     * and, while the flow is closed, the dialog that hosted it last (or the
+     * first mounted sheet's), so it is never null while a sheet is mounted,
+     * from the first commit on.
+     */
     ref?: React.Ref<HTMLDialogElement>;
-    /** Called when the shared native dialog receives a cancel event. */
+    /** Called when the active sheet's native dialog receives a cancel event. */
     onCancel?: (event: SyntheticEvent<HTMLDialogElement>) => void;
     /**
      * ID of the interactive BottomSheet, or null when the flow should close.
@@ -43,7 +72,7 @@ export interface BottomSheetSwitcherProps extends BaseProps<HTMLDialogElement> {
     /** Called with null when the active sheet requests dismissal. */
     onActiveSheetChange: (sheetId: string | null) => void;
     /**
-     * Whether to open the shared dialog modally with its native ::backdrop.
+     * Whether each sheet dialog opens modally with a native ::backdrop.
      * Disable for a viewport-anchored, non-modal flow over an interactive page.
      * @default true
      */
@@ -52,8 +81,8 @@ export interface BottomSheetSwitcherProps extends BaseProps<HTMLDialogElement> {
     children: ReactNode;
 }
 /**
- * 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
@@ -66,7 +95,7 @@ export interface BottomSheetSwitcherProps extends BaseProps<HTMLDialogElement> {
  * </BottomSheetSwitcher>
  * ```
  */
-export declare function BottomSheetSwitcher({ activeSheet, onActiveSheetChange, hasScrim, children, ref, xstyle, className, style, onCancel, onClick, onKeyDown, ...props }: BottomSheetSwitcherProps): import("react").JSX.Element;
+export declare function BottomSheetSwitcher({ activeSheet, onActiveSheetChange, hasScrim, children, ref, onCancel, onClick, onKeyDown, className, style, xstyle, ...restDialogProps }: BottomSheetSwitcherProps): import("react").JSX.Element;
 export declare namespace BottomSheetSwitcher {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetSwitcher.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetSwitcher.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwI5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5E,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE9D;;;;;OAKG;IACH,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B,iEAAiE;IACjE,mBAAmB,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEtD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,mBAAmB,EACnB,QAAe,EACf,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,+BAya1B;yBAtbe,mBAAmB"}
+{"version":3,"file":"BottomSheetSwitcher.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetSwitcher.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAEH,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyI5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5E;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE9D;;;;;OAKG;IACH,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B,iEAAiE;IACjE,mBAAmB,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEtD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,mBAAmB,EACnB,QAAe,EACf,QAAQ,EACR,GAAG,EACH,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,eAAe,EACnB,EAAE,wBAAwB,+BAgkB1B;yBA7kBe,mBAAmB"}