@astryxdesign/core 0.7.4 → 0.7.5-canary.0418c47

package/dist/BottomSheet/BottomSheetHostContext.d.ts

@@ -0,0 +1,8 @@
+export interface BottomSheetHostContextValue {
+    /** Whether the host sheet is open; a closing host reads false at once. */
+    isOpen: boolean;
+}
+export declare const BottomSheetHostContext: import("react").Context<BottomSheetHostContextValue | null>;
+export declare const OPEN_BOTTOM_SHEET_HOST: BottomSheetHostContextValue;
+export declare const CLOSED_BOTTOM_SHEET_HOST: BottomSheetHostContextValue;
+//# sourceMappingURL=BottomSheetHostContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetHostContext.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetHostContext.ts"],"names":[],"mappings":"AA6BA,MAAM,WAAW,2BAA2B;IAC1C,0EAA0E;IAC1E,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,sBAAsB,6DACsB,CAAC;AAG1D,eAAO,MAAM,sBAAsB,EAAE,2BAEpC,CAAC;AACF,eAAO,MAAM,wBAAwB,EAAE,2BAEtC,CAAC"}

package/dist/BottomSheet/BottomSheetHostContext.js

@@ -0,0 +1,35 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file BottomSheetHostContext.ts
+ * @input React context
+ * @output Exports BottomSheetHostContext and its value type
+ * @position Internal to BottomSheet; how a sheet rendered inside another
+ *   sheet's content learns whether that sheet is open
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/BottomSheet/BottomSheet.tsx
+ * - /packages/core/src/BottomSheet/BottomSheetSwitcher.tsx
+ * - /packages/core/src/BottomSheet/BottomSheetStacking.test.tsx
+ *
+ * A sheet rendered in another sheet's content is part of that sheet: it is
+ * presented only while its host is open, leaves with it, and comes back with
+ * it if its own `isOpen` is still true. Without this a host closing from code
+ * would leave the inner dialog open in the top layer with no box to paint —
+ * an invisible modal blocking the page. The inner sheet's state is never
+ * written by the host: it stays the consumer's, as with a Dialog rendered in
+ * a closed Dialog. The context is provided by every host (standalone, modal
+ * or not, and each switcher step) and read by every standalone sheet and
+ * every switcher flow; at the root it is null, which reads as "open".
+ */
+import { createContext } from 'react';
+export const BottomSheetHostContext = /*#__PURE__*/createContext(null);
+BottomSheetHostContext.displayName = 'BottomSheetHostContext';
+export const OPEN_BOTTOM_SHEET_HOST = {
+  isOpen: true
+};
+export const CLOSED_BOTTOM_SHEET_HOST = {
+  isOpen: false
+};

package/dist/BottomSheet/BottomSheetPanel.d.ts

@@ -19,9 +19,9 @@
  * - /packages/core/src/Layout/container.stylex.ts (bottom-sheet padding chain)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { SpacingStep } from '../utils/types';
-import { type BottomSheetSnapPoint } from './snapOffsets';
+import type { BaseProps } from '../BaseProps.js';
+import type { SpacingStep } from '../utils/types.js';
+import { type BottomSheetSnapPoint } from './snapOffsets.js';
 declare const HEIGHT_BUDGETS: {
     readonly hug: "92dvh";
     readonly capped: "62dvh";
@@ -29,6 +29,7 @@ declare const HEIGHT_BUDGETS: {
 };
 export type BottomSheetHeight = keyof typeof HEIGHT_BUDGETS;
 export type { BottomSheetSnapPoint };
+export declare const REDUCED_MOTION_COARSE_QUERY = "(prefers-reduced-motion: reduce) and (pointer: coarse)";
 export type BottomSheetPanelMotion = 'entering' | 'aligning' | 'fading' | 'exiting';
 export type BottomSheetPanelState = {
     kind: 'hidden';
@@ -46,6 +47,13 @@ interface BottomSheetPanelProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the visual sheet panel. */
     ref?: React.Ref<HTMLDivElement>;
     state: BottomSheetPanelState;
+    /**
+     * The host's controlled open state — false as soon as the host has taken
+     * a close, true while it is open or has refused one — distinct from
+     * `state`, which stays `open` until the close settles. Decides whether a
+     * swipe release's dismissal was honored (the reduced-motion cross-fade).
+     */
+    isOpenRequested?: boolean;
     height: BottomSheetHeight | number | string;
     /** Existing host name, reused for the keyboard scrolling group. */
     label: string;
@@ -66,7 +74,7 @@ interface BottomSheetPanelProps extends BaseProps<HTMLDivElement> {
     onMotionComplete?: (motion: BottomSheetPanelMotion) => void;
 }
 /** Internal visual and gesture surface shared by every BottomSheet host. */
-export declare function BottomSheetPanel({ ref, state, height, label, children, padding, snapPoints, className, style, tabIndex, xstyle, isSwipeDismissAllowed, isPageScrollLocked, onDismiss, onScrimOpacity, onElementChange, onMotionStart, onMotionComplete, ...props }: BottomSheetPanelProps): import("react").JSX.Element;
+export declare function BottomSheetPanel({ ref, state, isOpenRequested, height, label, children, padding, snapPoints, className, style, tabIndex, xstyle, isSwipeDismissAllowed, isPageScrollLocked, onDismiss, onScrimOpacity, onElementChange, onMotionStart, onMotionComplete, ...props }: BottomSheetPanelProps): import("react").JSX.Element;
 export declare namespace BottomSheetPanel {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAIvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AAyMnC,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AA+GD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAoVvB;yBAxWe,gBAAgB"}
+{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAIvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA+CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AA2M3D,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AA4HD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAyXvB;yBA9Ye,gBAAgB"}

package/dist/BottomSheet/BottomSheetPanel.js

@@ -24,7 +24,8 @@
  */
 import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { useDevWarning } from "../hooks/index.js";
+import { useDevWarning } from "../hooks/useDevWarning.js";
+import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { useScrollableArea } from "../hooks/useScrollableArea.js";
 import "../theme/tokens.stylex.js";
 import { borderVars, colorVars, durationVars, easeVars, focusVars, radiusVars, shadowVars, sizeVars, spacingVars } from "../theme/tokens.stylex.js";
@@ -79,6 +80,15 @@ function snapPointsKeyFor(points) {
   }
   return key;
 }
+
+/**
+ * The queries `design:reduced-motion` names: reduced motion with a coarse
+ * primary pointer cross-fades (DR2); reduced motion otherwise changes at once
+ * (DR3). The cross-fade's ceiling is the record's 200 ms.
+ */
+const REDUCED_MOTION_COARSE = '@media (prefers-reduced-motion: reduce) and (pointer: coarse)';
+export const REDUCED_MOTION_COARSE_QUERY = '(prefers-reduced-motion: reduce) and (pointer: coarse)';
+const CROSS_FADE_MS = 200;
 const styles = {
   sheet: {
     kfzvcC: "x67bb7w",
@@ -106,20 +116,26 @@ const styles = {
     kVQacm: "xb3r6kr",
     kGO01o: "x1wkw6tp",
     k1K539: "x1if0o47",
-    k3aq6I: "xnn1q72 xhbqy3z",
-    kSiTet: "x1hc1fzr",
+    k3aq6I: "xnn1q72 xhbqy3z xspp5ug",
+    kSiTet: "x1hc1fzr x1igigxu xgo67oj",
     k1ekBW: "xwcsmn1",
-    kIyJzY: "x80gvsz",
+    kIyJzY: "x80gvsz xzg1mie x1qzunnh",
     kAMwcw: "xlr8y92",
     k6sLGO: "x1q1rmc8",
-    k6CgDc: "xzg1mie",
     $$css: true
   },
   sheetClosing: {
-    k3aq6I: "x1weeur4",
+    k3aq6I: "x1weeur4 x1oe9tb1",
+    kSiTet: "x1m67veq",
     kAMwcw: "xv2sgk5",
     $$css: true
   },
+  sheetClosingCrossFade: {
+    k3aq6I: "xnn1q72",
+    kSiTet: "xg01cxk",
+    kIyJzY: "x8uwg2f",
+    $$css: true
+  },
   sheetFading: {
     kSiTet: "xg01cxk",
     $$css: true
@@ -163,6 +179,18 @@ const styles = {
     $$css: true
   }
 };
+/**
+ * A hidden sheet observes nothing (component:Popover PR1, FR5): the scroll
+ * area's measuring ref attaches as the sheet presents and detaches once it is
+ * hidden again, so a closed sheet that stays mounted holds no resize,
+ * mutation or viewport observers.
+ */
+function whilePresented(isPresented, props) {
+  return isPresented ? props : {
+    ...props,
+    ref: undefined
+  };
+}
 function motionForState(state) {
   if (state.kind === 'open') {
     return state.entering ? 'entering' : null;
@@ -254,6 +282,7 @@ function parseTransitionTime(value) {
 export function BottomSheetPanel({
   ref,
   state,
+  isOpenRequested,
   height,
   label,
   children,
@@ -298,7 +327,11 @@ export function BottomSheetPanel({
   const isInactive = isRetained || state.kind === 'exiting';
   const isClosing = state.kind === 'exiting';
   const isFading = isRetained && state.motion === 'fading';
-  const alignmentOffset = isRetained ? state.alignmentOffset : 0;
+  // Under reduced motion a retained sheet does not align down to a shorter
+  // entering sheet: that is travel (design:reduced-motion DR1). It fades where
+  // it is.
+  const isReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+  const alignmentOffset = isRetained && !isReducedMotion ? state.alignmentOffset : 0;
 
   // Everything derived from the snap points keys off their identity, not the
   // array's: the resolver's identity is the hook's signal that the stops
@@ -335,6 +368,7 @@ export function BottomSheetPanel({
     settledOffset,
     isDragging,
     isTraveling,
+    isDismissedByTouchDrag,
     sheetHeight,
     scrollPreservationInset,
     settlingLayoutOffset,
@@ -342,6 +376,7 @@ export function BottomSheetPanel({
     completeScrollAreaSettle
   } = useSheetGestures({
     isOpen: isInteractive,
+    isOpenRequested: isOpenRequested ?? isInteractive,
     canDismiss: isSwipeDismissAllowed,
     offscreenBlockEndInset: OVERSCROLL_PADDING,
     onDismiss,
@@ -364,11 +399,22 @@ export function BottomSheetPanel({
     // content while fitting, as it was before shared scroll adoption.
     stickyContainment: 'always'
   });
+
+  // The sheet measures its own height only while it is presented; a hidden
+  // sheet that stays mounted observes nothing.
+  const isPresentedRef = useRef(isPresented);
   const setElement = useCallback(element => {
-    sheetRef(element);
+    sheetRef(isPresentedRef.current ? element : null);
     elementRef.current = element;
     onElementChange?.(element);
   }, [onElementChange, sheetRef]);
+  useLayoutEffect(() => {
+    if (isPresentedRef.current === isPresented) {
+      return;
+    }
+    isPresentedRef.current = isPresented;
+    sheetRef(isPresented ? elementRef.current : null);
+  }, [isPresented, sheetRef]);
   useMobileKeyboard({
     bodyRef: bodyElementRef,
     bottomClearance: MOBILE_KEYBOARD_BOTTOM_CLEARANCE,
@@ -386,6 +432,12 @@ export function BottomSheetPanel({
   // could be mistaken for the panel unmounting and cancel a sheet handoff.
   useImperativeHandle(ref, () => elementRef.current, []);
   const motion = motionForState(state);
+  // design:reduced-motion DR2: the cross-fade applies on a coarse pointer, and
+  // to a transition the release of a touch drag started — a finger's swipe
+  // dismissal fades out in place on every pointer. A mouse or pen drag is not
+  // a touch drag; DR3 covers it and the rest.
+  const isCoarseCrossFade = useMediaQuery(REDUCED_MOTION_COARSE_QUERY);
+  const isCrossFade = isCoarseCrossFade || isReducedMotion && isDismissedByTouchDrag;
   useLayoutEffect(() => {
     if (motion == null) {
       return;
@@ -396,14 +448,21 @@ export function BottomSheetPanel({
       pendingMotionCompleteRef.current = motion;
       return;
     }
-    return waitForTransition(elementRef.current, motion === 'fading' ? 'opacity' : 'transform', () => {
+    // What ends a motion: the fade is opacity; the entrance, alignment and
+    // exit are transforms — except that under the reduced-motion cross-fade
+    // (DR2) an exit fades out where it is and its dialog may close only once
+    // the fade has ended, so it waits on opacity. The entrance keeps waiting
+    // on its (instant) transform, so the retained sheet's fade starts at once
+    // and the two fades cross; the alignment is instant.
+    const crossFadeMotion = isCrossFade && motion === 'exiting';
+    return waitForTransition(elementRef.current, motion === 'fading' || crossFadeMotion ? 'opacity' : 'transform', () => {
       if (startedMotionRef.current === motion) {
         onMotionCompleteRef.current?.(motion);
       } else {
         pendingMotionCompleteRef.current = motion;
       }
     });
-  }, [motion]);
+  }, [motion, isCrossFade]);
   // The snap is transform-only; the layout height reconciles when it lands.
   // waitForTransition — the same helper the motion states use — resolves that
   // even when no `transitionend` is coming: inline or computed
@@ -495,7 +554,7 @@ export function BottomSheetPanel({
     ...props,
     ref: setElement,
     tabIndex: tabIndex ?? -1,
-    ...mergeProps(themeProps('bottom-sheet'), stylex.props(layerTextReset.reset, layerStructureReset.reset, styles.sheet, overlayPaddingReset.reset, height === 'hug' ? styles.hugHeight : styles.budget, isClosing && styles.sheetClosing, isFading && styles.sheetFading, isInactive && styles.sheetInactive, xstyle), className, {
+    ...mergeProps(themeProps('bottom-sheet'), stylex.props(layerTextReset.reset, layerStructureReset.reset, styles.sheet, overlayPaddingReset.reset, height === 'hug' ? styles.hugHeight : styles.budget, isClosing && styles.sheetClosing, isClosing && isCrossFade && styles.sheetClosingCrossFade, isFading && styles.sheetFading, isInactive && styles.sheetInactive, xstyle), className, {
       ['--_sheet-budget']: budget,
       ...(isInteractive ? gestureStyle : isRetained || isClosing ? {
         height: resizedHeight
@@ -504,33 +563,28 @@ export function BottomSheetPanel({
     }),
     children: [/*#__PURE__*/_jsx("div", {
       ...{
-        className: "x10l6tqk x13vifvy x1o0tod xtijo5x x1vjfegm x78zum5 x6s0dn4 xl56j7k xvpftlf xafqdz2 x1j4r261 x1jm3nie x16khyan"
+        className: "x10l6tqk x13vifvy x1o0tod xtijo5x x1vjfegm x78zum5 x6s0dn4 xl56j7k xvpftlf xafqdz2 x1j4r261 x1jm3nie x16khyan x1cpjm7i x1oke5ut x34npju xmwhqxd x1hw15nc"
       },
       ...handleProps,
-      "aria-hidden": "true",
-      children: /*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x1m747yf x11c6zpc xjspbzw x1m4xfpy"
-        }
-      })
+      "aria-hidden": "true"
     }), /*#__PURE__*/_jsx("div", {
-      ...getViewportProps({
+      ...whilePresented(isPresented, getViewportProps({
         ...bodyProps,
         ...mergeProps(stylex.props(focusOutlineStyles.focusVisible, styles.body, height === 'tall' && styles.tallKeyboardBody), scrollPreservationInset > 0 ? {
           style: {
             paddingBlockEnd: `${scrollPreservationInset}px`
           }
         } : {})
-      }),
+      })),
       children: /*#__PURE__*/_jsx("div", {
-        ...getContentProps(stylex.props(styles.content, ...container(usesThemePadding ? {
+        ...whilePresented(isPresented, getContentProps(stylex.props(styles.content, ...container(usesThemePadding ? {
           useThemeDefault: 'bottom-sheet'
         } : {
           paddingInnerX: paddingToken,
           paddingInnerY: paddingToken,
           paddingOuterX: paddingToken,
           paddingOuterY: paddingToken
-        }), !usesThemePadding && effectivePadding !== 4 && paddingStyles[effectivePadding], !usesThemePadding && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !usesThemePadding && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !usesThemePadding && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding])),
+        }), !usesThemePadding && effectivePadding !== 4 && paddingStyles[effectivePadding], !usesThemePadding && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !usesThemePadding && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !usesThemePadding && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding]))),
         children: /*#__PURE__*/_jsx(LayerContentBoundary, {
           children: children
         })

package/dist/BottomSheet/BottomSheetSwitcher.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file BottomSheetSwitcher.tsx
- * @input Uses React context, StyleX, shared layer dismissal, BottomSheetSwitcherContext
+ * @input Uses React context, StyleX, shared layer dismissal, the modal outlet registry, the private bottom-sheet stack, BottomSheetSwitcherContext, BottomSheetHostContext
  * @output Exports BottomSheetSwitcher and BottomSheetSwitcherProps
  * @position Core switcher for mutually exclusive BottomSheet flows
  *
@@ -11,11 +11,13 @@
  * down at the same time until their top edges align; otherwise it stays
  * stationary. The previous sheet fades only after both motions complete.
  *
- * 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
+ * Every child sheet owns a native `<dialog>`: a scrim flow presents each
+ * sheet with showModal(), as a standalone modal sheet does, and a no-scrim
+ * flow with show() inside the flow wrapper (a standalone no-scrim sheet is a
+ * manual popover in the top layer instead; this deprecated path keeps its
+ * released hosting). For a modal flow 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
@@ -39,8 +41,26 @@
  * Every other dialog prop and handler, `onCancel` included, applies to every
  * sheet dialog; the browser raises `cancel` on the dialog it presents.
  *
+ * A scrim flow is one level of the private bottom-sheet stack
+ * (bottomSheetStack.ts) while it is visible: it stacks over, or under, other
+ * modal sheets in open order, recedes as a whole when covered, and switching
+ * its step in place never changes its position. The level is realized by the
+ * active step's dialog; on a handoff the registry is told the dialog changed
+ * so the sheets above the flow stay above its new dialog. A flow stacked
+ * above another sheet keeps every step backdrop clear; a flow beneath owns
+ * the stack's one scrim and hands it between its own steps as it always did.
+ * A switcher step is never paired in a replace: the flow replaces its own
+ * steps. A flow rendered in another sheet's content leaves and returns with
+ * that sheet, like a standalone sheet, without its state being written. A
+ * modal flow's host dialog is a toast outlet like a standalone scrim sheet's
+ * (Layer/modalOutlet.ts), following the handoff. The switcher is deprecated
+ * in favour of standalone step sheets.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/BottomSheet/BottomSheet.tsx
+ * - /packages/core/src/BottomSheet/bottomSheetStack.ts
+ * - /packages/core/src/BottomSheet/BottomSheetHostContext.ts
+ * - /packages/core/src/BottomSheet/BottomSheetStacking.test.tsx
  * - /packages/core/src/BottomSheet/BottomSheetSwitcherContext.ts
  * - /packages/core/src/BottomSheet/BottomSheetSwitcher.doc.mjs
  * - /packages/core/src/BottomSheet/BottomSheetSwitcher.spec.md
@@ -50,7 +70,16 @@
  * - /packages/cli/assets/templates/blocks/components/BottomSheet/BottomSheetSwitcherShowcase.tsx
  */
 import { type ReactNode, type SyntheticEvent } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
+/**
+ * @deprecated Write each step as its own `BottomSheet` with `isOpen`, driven
+ * by one state value that names the open step; closing the top sheet and
+ * opening the next in the same update, from inside the open step, runs the
+ * same replace handoff (see BottomSheet, "Replacing a sheet"). Keeps working until a future minor
+ * release removes it: on its own as released (plus two fixes: a toast raised
+ * from a step now renders above the flow and can be pressed, and reduced motion
+ * follows design:reduced-motion), as one stack level when stacked.
+ */
 export interface BottomSheetSwitcherProps extends BaseProps<HTMLDialogElement> {
     /**
      * Ref resolved to the native dialog hosting the flow: the active sheet's
@@ -85,17 +114,27 @@ export interface BottomSheetSwitcherProps extends BaseProps<HTMLDialogElement> {
  * 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
+ * @deprecated Write each step as its own `BottomSheet` with `isOpen`, driven
+ * by one state value that names the open step:
+ *
  * ```
- * <BottomSheetSwitcher
- *   activeSheet={activeSheet}
- *   onActiveSheetChange={setActiveSheet}>
- *   <BottomSheet sheetId="details" label="Details">…</BottomSheet>
- *   <BottomSheet sheetId="confirm" label="Confirm">…</BottomSheet>
- * </BottomSheetSwitcher>
+ * const [step, setStep] = useState(null);
+ * const close = own => isOpen => !isOpen && setStep(c => (c === own ? null : c));
+ * <BottomSheet isOpen={step === 'details'} onOpenChange={close('details')} label="Details">…</BottomSheet>
+ * <BottomSheet isOpen={step === 'confirm'} onOpenChange={close('confirm')} label="Confirm">…</BottomSheet>
  * ```
+ *
+ * Closing the top sheet and opening the next in the same update, from a
+ * control inside the open step, runs the same replace handoff, with no
+ * `sheetId` and no switcher, for modal and `hasScrim={false}` flows alike; a
+ * step changed from outside the flow's sheets closes and opens with the
+ * sheets' own motion. The switcher keeps working until a future
+ * minor release removes it: on its own as released (plus two fixes: a toast
+ * raised from a step now renders above the flow and can be pressed, and reduced
+ * motion follows design:reduced-motion), and as one level of the stack when
+ * stacked with other sheets.
  */
-export declare function BottomSheetSwitcher({ activeSheet, onActiveSheetChange, hasScrim, children, ref, onCancel, onClick, onKeyDown, className, style, xstyle, ...restDialogProps }: BottomSheetSwitcherProps): import("react").JSX.Element;
+export declare function BottomSheetSwitcher({ activeSheet: activeSheetProp, 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"BottomSheetSwitcher.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetSwitcher.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AAEH,OAAO,EAUL,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6J5C;;;;;;;;GAQG;AACH,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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EAAE,eAAe,EAC5B,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,+BA4vB1B;yBAzwBe,mBAAmB"}