@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/dist/BottomSheet/BottomSheetHostContext.js

@@ -13,17 +13,13 @@
  * - /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".
  */
+
+// A sheet rendered in another sheet's content is presented only while its
+// host is open. Without this, a host that closes from code would leave the
+// inner dialog open in the top layer with no box: an invisible modal that
+// blocks the page. The host never writes the inner sheet's state. At the
+// root the context is null, which reads as open.
 import { createContext } from 'react';
 export const BottomSheetHostContext = /*#__PURE__*/createContext(null);
 BottomSheetHostContext.displayName = 'BottomSheetHostContext';

package/dist/BottomSheet/BottomSheetPanel.d.ts

@@ -2,13 +2,9 @@
  * @file BottomSheetPanel.tsx
  * @input Uses React, StyleX, theme tokens, text/provider boundaries, container padding, sheet gestures, shared scroll behavior, and the host label
  * @output Internal BottomSheetPanel with a keyboard-reachable scrolling body and motion-state types
- * @position Shared presentation layer for standalone and switcher BottomSheets
- *
- * This component owns everything intrinsic to a sheet surface: height budgets,
- * drag and snap gestures, the handle and scrolling body, the content box's
- * container padding, motion styles, and transition completion. It owns the
- * body's keyboard access; dialog focus entry/return, inert state, and switcher
- * registration belong to the host.
+ * @position Shared presentation layer for standalone and switcher
+ *   BottomSheets. It owns the sheet surface and the body's keyboard access.
+ *   The host owns dialog focus, inert state and switcher registration.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/BottomSheet/BottomSheet.tsx
@@ -47,6 +43,16 @@ interface BottomSheetPanelProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the visual sheet panel. */
     ref?: React.Ref<HTMLDivElement>;
     state: BottomSheetPanelState;
+    /**
+     * Whether the sheet was open on page load: it then opens where it rests,
+     * with no entry motion.
+     */
+    isEntrySettled?: boolean;
+    /**
+     * Called when the settled entry's transition ends, so the host can release
+     * it and later motion in the same open (a drag's settle) animates as usual.
+     */
+    onEntrySettled?: () => void;
     /**
      * 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
@@ -74,7 +80,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, 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 function BottomSheetPanel({ ref, state, isOpenRequested, height, label, children, padding, snapPoints, className, style, tabIndex, xstyle, isEntrySettled, onEntrySettled, onTransitionEnd, 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;AA+B5C,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;AAiN3D,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"}
+{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA4CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AAsM3D,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;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;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;AA2HD,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,cAAsB,EACtB,cAAc,EACd,eAAe,EACf,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAkZvB;yBA1ae,gBAAgB"}

package/dist/BottomSheet/BottomSheetPanel.js

@@ -6,13 +6,9 @@
  * @file BottomSheetPanel.tsx
  * @input Uses React, StyleX, theme tokens, text/provider boundaries, container padding, sheet gestures, shared scroll behavior, and the host label
  * @output Internal BottomSheetPanel with a keyboard-reachable scrolling body and motion-state types
- * @position Shared presentation layer for standalone and switcher BottomSheets
- *
- * This component owns everything intrinsic to a sheet surface: height budgets,
- * drag and snap gestures, the handle and scrolling body, the content box's
- * container padding, motion styles, and transition completion. It owns the
- * body's keyboard access; dialog focus entry/return, inert state, and switcher
- * registration belong to the host.
+ * @position Shared presentation layer for standalone and switcher
+ *   BottomSheets. It owns the sheet surface and the body's keyboard access.
+ *   The host owns dialog focus, inert state and switcher registration.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/BottomSheet/BottomSheet.tsx
@@ -39,7 +35,7 @@ import { container } from "../Layout/container.stylex.js";
 import { containerPaddingBlockEndVarStyles, containerPaddingBlockStartVarStyles, containerPaddingInlineVarStyles, overlayPaddingReset, paddingStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
 import { isValidSnapPoint, resolveSnapPoints } from "./snapOffsets.js";
 import { useMobileKeyboard } from "./useMobileKeyboard.js";
-import { useSheetGestures } from "./useSheetGestures.js";
+import { scrollPreservationPadding, sheetLayoutHeight, useSheetGestures } from "./useSheetGestures.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const HEIGHT_BUDGETS = {
   hug: '92dvh',
@@ -56,12 +52,10 @@ const TRANSITION_BACKSTOP_BUFFER_MS = 50;
 // padding already provides.
 const HANDLE_BAR_HEIGHT = spacingVars['--spacing-6'];
 
-// Measure the same viewport the height budgets are written against. Those are
-// `dvh`, which the virtual keyboard does not shrink, so reading
-// `visualViewport` here would make the two disagree by exactly the keyboard's
-// height: every detent would move while the sheet it measures did not. A
-// keyboard is `useMobileKeyboard`'s business — it holds the sheet still and
-// scrolls the body — and it does not redefine the sheet's detents.
+// Measure the viewport that the height budgets use. They are `dvh`, which
+// the virtual keyboard does not shrink, so `visualViewport` would differ by
+// the keyboard's height. `useMobileKeyboard` handles the keyboard and does
+// not change the detents.
 function layoutViewportHeight() {
   return typeof window === 'undefined' ? 0 : window.innerHeight;
 }
@@ -83,9 +77,8 @@ function snapPointsKeyFor(points) {
 }
 
 /**
- * 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.
+ * The reduced-motion queries. With a coarse primary pointer the sheet
+ * cross-fades, else it changes at once. The cross-fade lasts at most 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)';
@@ -125,6 +118,10 @@ const styles = {
     k6sLGO: "x1q1rmc8",
     $$css: true
   },
+  sheetSettled: {
+    kIyJzY: "xpvlhck",
+    $$css: true
+  },
   sheetClosing: {
     k3aq6I: "x1weeur4 x1oe9tb1",
     kSiTet: "x1m67veq",
@@ -181,10 +178,9 @@ const styles = {
   }
 };
 /**
- * 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.
+ * A hidden sheet observes nothing. The scroll area's measuring ref attaches
+ * as the sheet presents and detaches when it is hidden, so a closed sheet
+ * that stays mounted holds no resize, mutation or viewport observers.
  */
 function whilePresented(isPresented, props) {
   return isPresented ? props : {
@@ -293,6 +289,9 @@ export function BottomSheetPanel({
   style,
   tabIndex,
   xstyle,
+  isEntrySettled = false,
+  onEntrySettled,
+  onTransitionEnd,
   isSwipeDismissAllowed = true,
   isPageScrollLocked = false,
   onDismiss,
@@ -329,8 +328,7 @@ export function BottomSheetPanel({
   const isClosing = state.kind === 'exiting';
   const isFading = isRetained && state.motion === 'fading';
   // 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.
+  // entering sheet, because that is travel. It fades where it is.
   const isReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
   const alignmentOffset = isRetained && !isReducedMotion ? state.alignmentOffset : 0;
 
@@ -359,6 +357,9 @@ export function BottomSheetPanel({
     };
   }, [snapPointsKey]);
   useDevWarning('BottomSheet', ignoredSnapPointsMessage, ignoredSnapPointsMessage !== '');
+
+  // A caller's height owns the element's height: the drag never writes it.
+  const consumerHeight = style?.height;
   const {
     contentProps,
     handleProps,
@@ -382,7 +383,8 @@ export function BottomSheetPanel({
     offscreenBlockEndInset: OVERSCROLL_PADDING,
     onDismiss,
     snapHeights,
-    onScrimOpacity
+    onScrimOpacity,
+    hasFixedHeight: consumerHeight != null
   });
   const {
     getViewportProps,
@@ -433,10 +435,9 @@ 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.
+  // The cross-fade applies on a coarse pointer, and to a transition that a
+  // touch drag's release started: a finger's swipe dismissal fades in place on
+  // every pointer. A mouse or pen drag is not a touch drag.
   const isCoarseCrossFade = useMediaQuery(REDUCED_MOTION_COARSE_QUERY);
   const isCrossFade = isCoarseCrossFade || isReducedMotion && isDismissedByTouchDrag;
   useLayoutEffect(() => {
@@ -449,12 +450,11 @@ export function BottomSheetPanel({
       pendingMotionCompleteRef.current = motion;
       return;
     }
-    // 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.
+    // What ends a motion: the fade is opacity, and the entrance, alignment and
+    // exit are transforms. Under the reduced-motion cross-fade an exit fades
+    // where it is, and its dialog closes only after the fade, so it waits on
+    // opacity. The entrance still waits on its instant transform, so the
+    // retained sheet's fade starts at once and the two fades cross.
     const crossFadeMotion = isCrossFade && motion === 'exiting';
     return waitForTransition(elementRef.current, motion === 'fading' || crossFadeMotion ? 'opacity' : 'transform', () => {
       if (startedMotionRef.current === motion) {
@@ -512,6 +512,8 @@ export function BottomSheetPanel({
     // transform — the layout height changes at rest, in one reconciling render
     // whose visible geometry is identical (see useSheetGestures).
     //   - dragging above the base restores the full height below the viewport
+    //     (the move that crosses writes that height to the element itself,
+    //     so this render only catches up to it)
     //   - a peek settles with layout 0, so it slides rather than reflowing
     const layoutOffset = isDragging ? dragOffset < settledOffset ? 0 : settledLayoutOffset : settlingLayoutOffset ?? settledLayoutOffset;
     const activeOffset = isDragging ? dragOffset : settledOffset;
@@ -522,43 +524,64 @@ export function BottomSheetPanel({
     // pinned in px instead: content reflowing mid-gesture would move the
     // surface out from under the finger, or under the snap.
     const isTraveling = isDragging || settlingLayoutOffset != null;
-    resizedHeight = layoutOffset > 0 || isTraveling ? `${Math.max(0, sheetHeight - Math.max(0, layoutOffset))}px` : undefined;
+    resizedHeight = layoutOffset > 0 || isTraveling ? sheetLayoutHeight(sheetHeight, layoutOffset) : undefined;
     gestureTransform = translation !== 0 ? `translateY(${translation}px)` : undefined;
   }
   const retainedTransform = alignmentOffset > 0 ? [gestureTransform, `translateY(${alignmentOffset}px)`].filter(Boolean).join(' ') : gestureTransform;
   const sheetTransform = isInteractive ? gestureTransform : isRetained ? retainedTransform : undefined;
   const consumerTransform = style?.transform;
-  // The transform is written to the element here, not rendered through the
-  // style prop. A drag writes it straight to the element once per input
-  // sample (useSheetGestures) and renders nothing in between, so React never
-  // sees those writes; rendered through the prop, the resting value would be
-  // skipped as "unchanged" when the drag ends and the sheet would stay where
-  // the finger left it. Written after every commit instead, outside a drag,
-  // the resting value lands in the same style update as the restored
-  // transition, so a settle or a dismissal animates from the live position.
+  const hostHeight = isInteractive || isRetained || isClosing ? resizedHeight : undefined;
+  const bodyEndPadding = scrollPreservationPadding(scrollPreservationInset);
+  // The transform is written to the element here, not through the style
+  // prop. A drag writes it straight to the element and renders nothing, so
+  // React never sees those writes. Through the prop, React would skip the
+  // resting value as unchanged, and the sheet would stay where the finger
+  // left it. Written after each commit outside a drag, the resting value
+  // lands with the restored transition, so a settle animates from the live
+  // position.
+  //
+  // A drag that crosses its base detent also writes the height and the end
+  // inset. If the release runs before that move's render commits, React sees
+  // no change and writes nothing, so these are written here too. A caller's
+  // height stays in the style prop, because the drag does not write it.
   useLayoutEffect(() => {
-    if (isDragging || consumerTransform != null) {
+    if (isDragging) {
       return;
     }
     const element = elementRef.current;
     if (element != null) {
-      element.style.transform = sheetTransform ?? '';
+      if (consumerTransform == null) {
+        element.style.transform = sheetTransform ?? '';
+      }
+      if (consumerHeight == null) {
+        element.style.height = hostHeight ?? '';
+      }
+    }
+    const body = bodyElementRef.current;
+    if (body != null) {
+      body.style.paddingBlockEnd = bodyEndPadding ?? '';
     }
   });
   const gestureStyle = {
     transition: contentProps.style.transition,
     touchAction: contentProps.style.touchAction,
     overscrollBehavior: contentProps.style.overscrollBehavior,
-    height: resizedHeight
+    height: hostHeight
   };
   return /*#__PURE__*/_jsxs("div", {
     ...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, isClosing && isCrossFade && styles.sheetClosingCrossFade, isFading && styles.sheetFading, isInactive && styles.sheetInactive, xstyle), className, {
+    onTransitionEnd: event => {
+      onTransitionEnd?.(event);
+      if (isEntrySettled && event.target === event.currentTarget) {
+        onEntrySettled?.();
+      }
+    },
+    ...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, isEntrySettled && styles.sheetSettled, xstyle), className, {
       ['--_sheet-budget']: budget,
       ...(isInteractive ? gestureStyle : isRetained || isClosing ? {
-        height: resizedHeight
+        height: hostHeight
       } : {}),
       ...style
     }),
@@ -571,9 +594,9 @@ export function BottomSheetPanel({
     }), /*#__PURE__*/_jsx("div", {
       ...whilePresented(isPresented, getViewportProps({
         ...bodyProps,
-        ...mergeProps(stylex.props(focusOutlineStyles.focusVisible, styles.body, height === 'tall' && styles.tallKeyboardBody), scrollPreservationInset > 0 ? {
+        ...mergeProps(stylex.props(focusOutlineStyles.focusVisible, styles.body, height === 'tall' && styles.tallKeyboardBody), bodyEndPadding != null ? {
           style: {
-            paddingBlockEnd: `${scrollPreservationInset}px`
+            paddingBlockEnd: bodyEndPadding
           }
         } : {})
       })),

package/dist/BottomSheet/BottomSheetSwitcher.d.ts

@@ -1,60 +1,11 @@
 /**
  * @file BottomSheetSwitcher.tsx
- * @input Uses React context, StyleX, shared layer dismissal, the modal outlet registry, the private bottom-sheet stack, BottomSheetSwitcherContext, BottomSheetHostContext
+ * @input 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
- *
- * The switcher turns a set of declaratively nested BottomSheets into a
- * controlled single-selection group: `activeSheet` names the one interactive
- * child, or is null when the flow is closed. During a handoff the new sheet
- * enters above the previous sheet. If it is shorter, the previous sheet moves
- * 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>`: 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
- * 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.
- *
- * 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.
+ * @position Core switcher for mutually exclusive BottomSheet flows. It is
+ *   deprecated in favor of standalone step sheets.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/BottomSheet/BottomSheet.tsx
@@ -63,7 +14,7 @@
  * - /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
+ * - /docs/specs/components/BottomSheet/BottomSheetSwitcher.spec.md
  * - /packages/core/src/BottomSheet/BottomSheetSwitcher.test.tsx
  * - /packages/core/src/BottomSheet/index.ts
  * - /apps/storybook/stories/BottomSheetSwitcher.stories.tsx
@@ -76,9 +27,11 @@ import type { BaseProps } from '../BaseProps.js';
  * 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.
+ * release removes it: on its own as released (plus three fixes: a toast raised
+ * from a step now renders above the flow and can be pressed, reduced motion
+ * follows the reduced-motion design rules, and a flow whose active sheet is set on the
+ * server renders closed until hydration, then opens that sheet settled), as
+ * one stack level when stacked.
  */
 export interface BottomSheetSwitcherProps extends BaseProps<HTMLDialogElement> {
     /**
@@ -129,10 +82,11 @@ export interface BottomSheetSwitcherProps extends BaseProps<HTMLDialogElement> {
  * `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.
+ * minor release removes it: on its own as released (plus three fixes: a toast
+ * raised from a step now renders above the flow and can be pressed, reduced
+ * motion follows the reduced-motion design rules, and a flow whose active sheet is set
+ * on the server renders closed until hydration, then opens that sheet
+ * settled), and as one level of the stack when stacked with other sheets.
  */
 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 {

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"BottomSheetSwitcher.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetSwitcher.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAoBH,OAAO,EAUL,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2J5C;;;;;;;;;;GAUG;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;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;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,+BA0wB1B;yBAvxBe,mBAAmB"}

package/dist/BottomSheet/BottomSheetSwitcher.js

@@ -4,61 +4,12 @@
 
 /**
  * @file BottomSheetSwitcher.tsx
- * @input Uses React context, StyleX, shared layer dismissal, the modal outlet registry, the private bottom-sheet stack, BottomSheetSwitcherContext, BottomSheetHostContext
+ * @input 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
- *
- * The switcher turns a set of declaratively nested BottomSheets into a
- * controlled single-selection group: `activeSheet` names the one interactive
- * child, or is null when the flow is closed. During a handoff the new sheet
- * enters above the previous sheet. If it is shorter, the previous sheet moves
- * 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>`: 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
- * 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.
- *
- * 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.
+ * @position Core switcher for mutually exclusive BottomSheet flows. It is
+ *   deprecated in favor of standalone step sheets.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/BottomSheet/BottomSheet.tsx
@@ -67,13 +18,33 @@
  * - /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
+ * - /docs/specs/components/BottomSheet/BottomSheetSwitcher.spec.md
  * - /packages/core/src/BottomSheet/BottomSheetSwitcher.test.tsx
  * - /packages/core/src/BottomSheet/index.ts
  * - /apps/storybook/stories/BottomSheetSwitcher.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/BottomSheet/BottomSheetSwitcherShowcase.tsx
  */
+
+// `activeSheet` names the one interactive child, or null when the flow is
+// closed. On a handoff the new sheet enters above the previous one. A taller
+// previous sheet moves down until the top edges align. The previous sheet
+// fades after both motions end.
+//
+// Each child sheet owns a native `<dialog>`. A scrim flow uses showModal(),
+// and a no-scrim flow uses show() inside the flow wrapper. The switcher
+// decides which dialog is presented, retained or hidden. It keeps one scrim
+// across a handoff, holds the flow's one scroll lock and one dismissal
+// registration, and returns focus to the flow's opener when the flow ends.
+//
+// The ref resolves to the host dialog: the active sheet's, the exiting
+// sheet's during its exit, else the last host's. `id` and `data-testid`
+// render on the host dialog only. Other dialog props apply to every sheet
+// dialog. A scrim flow is one level of the sheet stack (bottomSheetStack.ts),
+// and a step switch never changes that level. A modal flow's host dialog is
+// a toast outlet (Layer/modalOutlet.ts).
 import { use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useIsHydrating } from "../hooks/useIsHydrating.js";
+import { useSettledOpen } from "../hooks/useSettledOpen.js";
 import * as stylex from '@stylexjs/stylex';
 import { useScrollLock } from "../hooks/useScrollLock.js";
 import { useFocusTrapEscapeCompatibilitySignal } from "../hooks/useFocusTrap.js";
@@ -164,9 +135,11 @@ function takeOverScrim(dialog, opacity) {
  * 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.
+ * release removes it: on its own as released (plus three fixes: a toast raised
+ * from a step now renders above the flow and can be pressed, reduced motion
+ * follows the reduced-motion design rules, and a flow whose active sheet is set on the
+ * server renders closed until hydration, then opens that sheet settled), as
+ * one stack level when stacked.
  */
 
 /**
@@ -189,10 +162,11 @@ function takeOverScrim(dialog, opacity) {
  * `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.
+ * minor release removes it: on its own as released (plus three fixes: a toast
+ * raised from a step now renders above the flow and can be pressed, reduced
+ * motion follows the reduced-motion design rules, and a flow whose active sheet is set
+ * on the server renders closed until hydration, then opens that sheet
+ * settled), and as one level of the stack when stacked with other sheets.
  */
 export function BottomSheetSwitcher({
   activeSheet: activeSheetProp,
@@ -215,7 +189,16 @@ export function BottomSheetSwitcher({
   // for it; with the host closed the flow simply reads as closed.
   const host = use(BottomSheetHostContext);
   const isHostOpen = host?.isOpen ?? true;
-  const activeSheet = isHostOpen ? activeSheetProp : null;
+  // A flow with an active sheet on the server reads as closed until
+  // hydration. It opens in the next render, the first one that can enter its
+  // native host. A <dialog> painted open with aria-modal before it is modal
+  // claims a state it does not have.
+  const isHydrating = useIsHydrating();
+  const activeSheet = isHostOpen && !isHydrating ? activeSheetProp : null;
+  // The step active on the server opens settled, with no entry motion. The
+  // first change of step animates (AST-013 FR13). It latches on the flow's
+  // own request, because a hydrating host sheet reads as closed.
+  const [settledSheet, releaseSettledSheet] = useSettledOpen(activeSheetProp, activeSheet, null);
   // Every sheet host applies the switcher's dialog surface to its own dialog.
   const dialogProps = useShallowStable({
     ...restDialogProps,
@@ -383,14 +366,11 @@ export function BottomSheetSwitcher({
     attachedRef.current = null;
   }, []);
 
-  // The flow's host dialog is an outlet for app-global surfaces (toasts)
-  // while the flow is a modal one, as a standalone scrim sheet's dialog is
-  // (`component:BottomSheet` FR13): every open scrim sheet supplies one, the
-  // latest among sheets follows the stack, and a Dialog supplied later stays
-  // above. The host changes on a handoff, so the supply follows `hostSheet`;
-  // the retained step's dialog, inert and fading, is never the outlet. A
-  // closing flow stops supplying at once, as a closing sheet does. Passive:
-  // it runs after the layout effects that present the step dialogs.
+  // While the flow is modal, its host dialog is an outlet for app-global
+  // surfaces (toasts), as a standalone scrim sheet's is. The supply follows
+  // `hostSheet` across a handoff, and the fading retained dialog is never the
+  // outlet. A closing flow stops supplying at once. Passive: it runs after the
+  // layout effects that present the step dialogs.
   useModalOutlet(hostDialogRef, isModal && isFlowOpen, stackView.isTop || !stackView.isStacked, 'bottom-sheet', hostSheet);
 
   // Focus return is native per dialog: each showModal() records the focused
@@ -746,6 +726,8 @@ export function BottomSheetSwitcher({
   const onDialogKeyDown = useMemo(() => composeEventHandlers(onKeyDown, handleKeyDown), [handleKeyDown, onKeyDown]);
   const contextValue = useMemo(() => ({
     activeSheet,
+    settledSheet,
+    releaseSettledSheet,
     hasScrim,
     onActiveSheetChange,
     getSheetPhase,
@@ -766,7 +748,7 @@ export function BottomSheetSwitcher({
     onDialogCancel,
     onDialogClick,
     onDialogKeyDown
-  }), [activeSheet, dialogProps, getSheetAlignmentOffset, getSheetPhase, hasScrim, hostSheet, isCoveredInTopLayer, isFlowClosing, isScrimOwner, onActiveSheetChange, onBeforeSheetPresent, onDialogCancel, onDialogClick, onDialogKeyDown, onSheetEnterStart, onSheetScrimOpacityChange, onSheetTransitionComplete, registerSheetDialog, registerSheetElement, registerSheetPurpose, stackView]);
+  }), [activeSheet, dialogProps, getSheetAlignmentOffset, getSheetPhase, hasScrim, hostSheet, isCoveredInTopLayer, isFlowClosing, isScrimOwner, onActiveSheetChange, onBeforeSheetPresent, onDialogCancel, onDialogClick, onDialogKeyDown, onSheetEnterStart, onSheetScrimOpacityChange, onSheetTransitionComplete, registerSheetDialog, registerSheetElement, registerSheetPurpose, releaseSettledSheet, settledSheet, stackView]);
   return /*#__PURE__*/_jsx(BottomSheetSwitcherContext, {
     value: contextValue,
     children: /*#__PURE__*/_jsx("div", {