@surdeddd/bottom-sheet 0.23.4 → 0.24.0

package/dist/react.js

@@ -1,11 +1,20 @@
-import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useMemo, useCallback, useSyncExternalStore, useLayoutEffect } from 'react';
+import { forwardRef, useEffect, useRef, useState, useImperativeHandle, useMemo, useCallback, useSyncExternalStore, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
+// src/core/primitives/shared.ts
+var STORE_KEY = /* @__PURE__ */ Symbol.for("@surdeddd/bottom-sheet/shared/1");
+function shared(name, init) {
+  const host = globalThis;
+  const store = host[STORE_KEY] ?? (host[STORE_KEY] = {});
+  if (!(name in store)) store[name] = init();
+  return store[name];
+}
+
 // src/core/lifecycle/sheet-stack.ts
 var BASE_Z = 100;
 var STEP = 10;
@@ -73,7 +82,7 @@ var SheetStack = class {
     });
   }
 };
-var sheetStack = new SheetStack();
+var sheetStack = shared("stack", () => new SheetStack());
 
 // src/core/primitives/transform.ts
 function buildTransformTemplate(axis) {
@@ -98,7 +107,7 @@ var CLOSED_TRANSFORM = {
 var layoutAxis = (axis) => axis === "left" || axis === "right" ? "width" : "height";
 
 // src/core/primitives/instance-id.ts
-var counters = {};
+var counters = shared("instanceIds", () => ({}));
 function nextInstanceId(prefix) {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
     return `${prefix}-${crypto.randomUUID()}`;
@@ -126,7 +135,13 @@ function createEventBus() {
       const set = listeners.get(event);
       if (!set) return;
       for (const fn of [...set]) {
-        fn(payload);
+        try {
+          fn(payload);
+        } catch (err) {
+          queueMicrotask(() => {
+            throw err;
+          });
+        }
       }
     },
     listenerCount(event) {
@@ -138,8 +153,23 @@ function createEventBus() {
   };
 }
 
+// src/core/primitives/dev-warn.ts
+function devWarn(...args) {
+  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
+    console.warn(...args);
+  }
+}
+
 // src/core/primitives/css-length.ts
 var probe = null;
+var rejected = /* @__PURE__ */ new Set();
+var warnRejected = (value) => {
+  if (rejected.has(value)) return;
+  rejected.add(value);
+  devWarn(
+    `[BottomSheet] snap size "${value}" is not a CSS length the browser accepts \u2014 it resolves to 0.`
+  );
+};
 var PROBE_ATTR = "data-bs-probe";
 var ensureProbe = (axis) => {
   if (typeof document === "undefined") return null;
@@ -186,19 +216,14 @@ var resolveSnap = (point, mode, measureFit) => {
   if (!el) return 0;
   if (axis === "vertical") {
     el.style.height = point;
+    if (el.style.height === "") warnRejected(point);
     return Math.max(0, el.getBoundingClientRect().height);
   }
   el.style.width = point;
+  if (el.style.width === "") warnRejected(point);
   return Math.max(0, el.getBoundingClientRect().width);
 };
 
-// src/core/primitives/dev-warn.ts
-function devWarn(...args) {
-  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
-    console.warn(...args);
-  }
-}
-
 // src/core/primitives/snap-points.ts
 var resolveSnapList = (points, mode, measureFit) => points.map((p) => {
   const raw = resolveSnap(p.size, mode, measureFit);
@@ -210,6 +235,10 @@ var resolveSnapList = (points, mode, measureFit) => points.map((p) => {
   }
   return { id: p.id, size: raw };
 }).sort((a, b) => a.size - b.size);
+var startsClosed = (points, initial, allowed) => {
+  const id = initial ?? allowed?.[0] ?? points[0]?.id;
+  return points.find((p) => p.id === id)?.size === 0;
+};
 var VH_NOT_DVH = /(^|[^a-z])vh\b/i;
 var auditVhUsage = (points) => {
   for (const p of points) {
@@ -327,6 +356,7 @@ var SnapResolver = class {
   setMode(mode) {
     if (mode === this.mode) return;
     this.mode = mode;
+    this.notified = false;
     this.recompute();
   }
   setAllowedIds(ids) {
@@ -336,14 +366,20 @@ var SnapResolver = class {
   findById(id) {
     return findById(id, this.resolved);
   }
-  findDragSettleTarget(args) {
+  findDragSettleTarget(args, openOnly = false) {
     return findDragSettleTarget({
       ...args,
       resolved: this.resolved,
-      allowed: this.allowedIds,
+      allowed: this.pool(openOnly),
       maxAxisSize: this.maxAxisSize
     });
   }
+  nearest(size, openOnly) {
+    return findNearest(size, this.resolved, this.pool(openOnly));
+  }
+  pool(openOnly) {
+    return openOnly ? this.allowedIds.filter((id) => (this.findById(id)?.size ?? 0) > 0) : this.allowedIds;
+  }
   getAllowedRange() {
     return this.rangeCache ?? (this.rangeCache = allowedRange(this.resolved, this.allowedIds));
   }
@@ -391,19 +427,20 @@ var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
 var RANGE_DIVISION_EPSILON = 1e-4;
 
 // src/core/features/resize-observer.ts
+var seatOf = (deps) => {
+  const snap = deps.resolveActiveSnap();
+  const max = deps.getMaxAxisSize();
+  return { target: snap ? Math.min(snap.size, max) : null, max };
+};
+var sameSeat = (before, after) => before.target !== null && after.target !== null && Math.abs(after.target - before.target) < SIZE_WRITE_EPSILON && Math.abs(after.max - before.max) < SIZE_WRITE_EPSILON;
 function installResizeObserver(deps) {
   if (typeof window === "undefined") {
     return () => {
     };
   }
-  const seatFor = () => {
-    const snap = deps.resolveActiveSnap();
-    const max = deps.getMaxAxisSize();
-    return { target: snap ? Math.min(snap.size, max) : null, max };
-  };
   const onResize = () => {
     if (deps.isDestroyed()) return;
-    const before = seatFor();
+    const before = seatOf(deps);
     deps.recomputeSnaps();
     const mode = deps.getMode();
     const isVerticalAxis = mode === "bottom" || mode === "top";
@@ -412,21 +449,8 @@ function installResizeObserver(deps) {
     if (viewportSize2 > 0 && viewportSize2 < max) {
       deps.setMaxAxisSize(viewportSize2);
     }
-    const after = seatFor();
-    if (before.target !== null && after.target !== null && Math.abs(after.target - before.target) < SIZE_WRITE_EPSILON && Math.abs(after.max - before.max) < SIZE_WRITE_EPSILON) {
-      return;
-    }
-    const wasAnimating = deps.isAnimating?.() ?? false;
-    deps.cancelInFlight();
-    deps.newCycle();
-    const current = deps.resolveActiveSnap();
-    const newMax = deps.getMaxAxisSize();
-    const targetSize = current ? Math.min(current.size, newMax) : Math.min(deps.getSize(), newMax);
-    deps.setSize(targetSize);
-    if (current && !deps.isDragging()) {
-      deps.applySize(targetSize);
-      if (wasAnimating) deps.resyncAfterCancel?.();
-    }
+    if (sameSeat(before, seatOf(deps))) return;
+    deps.reseat();
   };
   let resizeObserver = null;
   if (typeof ResizeObserver !== "undefined") {
@@ -438,7 +462,7 @@ function installResizeObserver(deps) {
   window.addEventListener("orientationchange", onResize);
   const onVisibility = () => {
     if (deps.isDestroyed()) return;
-    if (document.hidden) deps.cancelInFlight();
+    if (document.hidden) deps.landNow();
   };
   document.addEventListener("visibilitychange", onVisibility);
   return () => {
@@ -463,6 +487,16 @@ var contentTargets = (scroller) => {
   }
   return out;
 };
+var chromeTargets = (deps) => {
+  const out = [];
+  for (const child of Array.from(deps.element.children)) {
+    if (child !== deps.scrollContainer) out.push(child);
+  }
+  if (deps.handle !== deps.element && !out.includes(deps.handle)) {
+    out.push(deps.handle);
+  }
+  return out;
+};
 function installFitObserver(deps) {
   if (typeof ResizeObserver === "undefined") return () => {
   };
@@ -478,7 +512,6 @@ function installFitObserver(deps) {
     });
   };
   const ro = new ResizeObserver(schedule);
-  ro.observe(deps.handle);
   const scroller = deps.scrollContainer;
   const observed = /* @__PURE__ */ new Set();
   const slots = /* @__PURE__ */ new Set();
@@ -495,7 +528,7 @@ function installFitObserver(deps) {
   };
   const resync = () => {
     trackSlots();
-    const targets = contentTargets(scroller);
+    const targets = [...chromeTargets(deps), ...contentTargets(scroller)];
     for (const el of observed) {
       if (!targets.includes(el)) {
         ro.unobserve(el);
@@ -510,13 +543,12 @@ function installFitObserver(deps) {
     }
     schedule();
   };
+  resync();
   let mo;
-  if (scroller) {
-    resync();
-    if (typeof MutationObserver !== "undefined") {
-      mo = new MutationObserver(resync);
-      mo.observe(scroller, { childList: true });
-    }
+  if (typeof MutationObserver !== "undefined") {
+    mo = new MutationObserver(resync);
+    mo.observe(deps.element, { childList: true });
+    if (scroller) mo.observe(scroller, { childList: true });
   }
   return () => {
     ro.disconnect();
@@ -528,6 +560,72 @@ function installFitObserver(deps) {
   };
 }
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var ROOT_CLASS = "bs-root";
+var homes = /* @__PURE__ */ new WeakMap();
+var homeRootOf = (root) => (root && homes.get(root)) ?? null;
+var mirrorClasses = (home, wrapper) => {
+  wrapper.className = home?.className ?? "";
+  wrapper.classList.add(ROOT_CLASS);
+};
+var teleportElements = (els, target) => {
+  const nodes = els.filter(
+    (el) => !!el && el.parentNode !== target
+  );
+  if (nodes.length === 0) return () => {
+  };
+  const home = nodes[0].closest(`.${ROOT_CLASS}`);
+  if (home && home.parentNode === target) return () => {
+  };
+  const wrapper = target.ownerDocument.createElement("div");
+  wrapper.setAttribute("data-bs-teleported", "");
+  mirrorClasses(home, wrapper);
+  let watcher = null;
+  if (home) {
+    for (const name of Array.from(home.style)) {
+      if (name.startsWith("--")) {
+        wrapper.style.setProperty(name, home.style.getPropertyValue(name));
+      }
+    }
+    homes.set(wrapper, home);
+    if (typeof MutationObserver !== "undefined") {
+      watcher = new MutationObserver(() => mirrorClasses(home, wrapper));
+      watcher.observe(home, { attributes: true, attributeFilter: ["class"] });
+    }
+  }
+  target.appendChild(wrapper);
+  const records = [];
+  for (const el of nodes) {
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    wrapper.appendChild(el);
+  }
+  return () => {
+    watcher?.disconnect();
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+    homes.delete(wrapper);
+    wrapper.parentNode?.removeChild(wrapper);
+  };
+};
+
 // src/core/features/max-height-controller.ts
 function createMaxHeightController(deps) {
   let maxHeightCap;
@@ -631,8 +729,9 @@ function installSliderKeyboard(deps) {
   const isVerticalAxis = deps.mode === "bottom" || deps.mode === "top";
   const stepUp = isVerticalAxis ? "ArrowUp" : "ArrowRight";
   const stepDown = isVerticalAxis ? "ArrowDown" : "ArrowLeft";
-  const sheetExpandsKey = deps.mode === "top" ? stepDown : stepUp;
-  const sheetCollapsesKey = deps.mode === "top" ? stepUp : stepDown;
+  const flipped = deps.mode === "top" || deps.mode === "right";
+  const sheetExpandsKey = flipped ? stepDown : stepUp;
+  const sheetCollapsesKey = flipped ? stepUp : stepDown;
   const onHandleKey = (e) => {
     if (deps.isDestroyed()) return;
     const allowed = deps.getAllowedIds();
@@ -708,11 +807,12 @@ var WriteSentinel = class {
 // src/core/primitives/overlay-position.ts
 function resolveSheetAnchoredStyle(mode, position, inset) {
   const sizeOffset = `calc(var(--bs-size, 0px) + ${inset})`;
+  const lifted = `calc(var(--bs-size, 0px) + var(--bs-keyboard-inset, 0px) + ${inset})`;
   switch (mode) {
     case "bottom":
-      if (position === "sheet-top-left") return { bottom: sizeOffset, left: inset };
-      if (position === "sheet-top-right") return { bottom: sizeOffset, right: inset };
-      return { bottom: sizeOffset, left: "50%", transform: "translateX(-50%)" };
+      if (position === "sheet-top-left") return { bottom: lifted, left: inset };
+      if (position === "sheet-top-right") return { bottom: lifted, right: inset };
+      return { bottom: lifted, left: "50%", transform: "translateX(-50%)" };
     case "top":
       if (position === "sheet-top-left") return { top: sizeOffset, left: inset };
       if (position === "sheet-top-right") return { top: sizeOffset, right: inset };
@@ -727,6 +827,13 @@ function resolveSheetAnchoredStyle(mode, position, inset) {
       return { right: sizeOffset, top: "50%", transform: "translateY(-50%)" };
   }
 }
+function resetOverlayPosition(ws) {
+  ws.top = "";
+  ws.bottom = "";
+  ws.left = "";
+  ws.right = "";
+  ws.transform = "";
+}
 function applyOverlayPosition(ws, mode, position, inset) {
   switch (position) {
     case "top-left":
@@ -787,6 +894,8 @@ function applyOverlayPosition(ws, mode, position, inset) {
 // src/core/controllers/scrim-controller.ts
 var VALID_CSS_LENGTH = /^-?\d+(?:\.\d+)?(?:px|em|rem|%)$/;
 var DEFAULT_SCRIM_DIM = "rgba(0, 0, 0, 0.4)";
+var BACKDROP_COLOR_VAR = "--bs-backdrop-color";
+var unit = (value) => Number.isFinite(value) ? Math.min(Math.max(value, 0), 1) : 1;
 var ScrimController = class {
   constructor(deps, opts) {
     __publicField(this, "screenComponent");
@@ -801,11 +910,13 @@ var ScrimController = class {
     __publicField(this, "scrimMode");
     __publicField(this, "backdropRange");
     __publicField(this, "screenRange");
+    __publicField(this, "backdropPeak");
     __publicField(this, "scrimEnabled", true);
     __publicField(this, "savedScrimRanges", null);
     __publicField(this, "scrimTapToCloseEnabled", false);
     __publicField(this, "detachScrimTap", null);
     __publicField(this, "scrimOverlayTeardown", null);
+    __publicField(this, "placeOverlay", null);
     __publicField(this, "backdropOpacitySentinel", new WriteSentinel());
     __publicField(this, "screenOpacitySentinel", new WriteSentinel());
     __publicField(this, "lastBackdropPointer", "");
@@ -822,6 +933,8 @@ var ScrimController = class {
     const preset = opts.scrimPreset ? SCRIM_PRESETS[opts.scrimPreset] : null;
     this.backdropRange = opts.backdropRange ?? preset?.range ?? [0, 1];
     this.screenRange = opts.screenRange ?? preset?.range ?? [0, 1];
+    this.backdropPeak = unit(opts.backdropOpacity ?? 1);
+    this.setBackdropColor(opts.backdropColor);
     this.scrimTapToCloseEnabled = opts.scrimTapToClose ?? false;
     const explicitColor = opts.scrimColor ?? preset?.color;
     const effectiveColor = explicitColor ?? (this.scrimMode !== "off" && !this.backdrop ? DEFAULT_SCRIM_DIM : void 0);
@@ -851,24 +964,19 @@ var ScrimController = class {
       this.setScrimTapToClose(true);
     }
   }
-  applyOpacity(progress, progressChanged) {
-    if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
+  applyOpacity(progress, progressChanged, epsilon = OPACITY_WRITE_EPSILON) {
+    if (epsilon > 0 && !progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
     if (this.backdrop) {
       const [s, e] = this.backdropRange;
       const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-      const backdropOpacity = Math.min(
-        Math.max((progress - s) / range, 0),
-        1
-      );
-      if (this.backdropOpacitySentinel.shouldWrite(
-        backdropOpacity,
-        OPACITY_WRITE_EPSILON
-      )) {
+      const along = Math.min(Math.max((progress - s) / range, 0), 1);
+      const backdropOpacity = along * this.backdropPeak;
+      if (this.backdropOpacitySentinel.shouldWrite(backdropOpacity, epsilon)) {
         this.backdrop.style.opacity = String(backdropOpacity);
       }
-      const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
+      const nextPointer = along > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
       if (nextPointer !== this.lastBackdropPointer) {
         this.backdrop.style.pointerEvents = nextPointer;
         this.lastBackdropPointer = nextPointer;
@@ -883,10 +991,7 @@ var ScrimController = class {
           (progress - ss) / Math.max(RANGE_DIVISION_EPSILON, se - ss)
         )
       );
-      if (this.screenOpacitySentinel.shouldWrite(
-        screenOpacity,
-        OPACITY_WRITE_EPSILON
-      )) {
+      if (this.screenOpacitySentinel.shouldWrite(screenOpacity, epsilon)) {
         this.screenComponent.style.opacity = String(screenOpacity);
       }
       const nextDisplay = screenOpacity > 0 ? "" : "none";
@@ -902,6 +1007,17 @@ var ScrimController = class {
     this.invalidateOpacityCache();
     applySize();
   }
+  setBackdropColor(color) {
+    if (this.isDestroyed() || !this.backdrop) return;
+    if (color) this.backdrop.style.setProperty(BACKDROP_COLOR_VAR, color);
+    else this.backdrop.style.removeProperty(BACKDROP_COLOR_VAR);
+  }
+  setBackdropOpacity(value, applySize) {
+    if (this.isDestroyed()) return;
+    this.backdropPeak = unit(value);
+    this.invalidateOpacityCache();
+    applySize();
+  }
   setScreenRange(range, applySize) {
     if (this.isDestroyed()) return;
     this.screenRange = range;
@@ -924,6 +1040,8 @@ var ScrimController = class {
     if (this.isDestroyed() || mode === this.mode) return;
     this.mode = mode;
     this.invalidateOpacityCache();
+    if (this.scrimMode === "above-sheet") this.applyAboveSheetInset();
+    this.placeOverlay?.();
   }
   setScrimMode(mode, applySize) {
     if (this.isDestroyed()) return;
@@ -936,7 +1054,7 @@ var ScrimController = class {
       if (previous === "above-sheet" && mode !== "above-sheet") {
         s.position = "";
         s.inset = "";
-        s.pointerEvents = "";
+        this.syncPointer();
       }
       if (mode === "above-sheet") {
         this.applyAboveSheetInset();
@@ -961,9 +1079,6 @@ var ScrimController = class {
     if (enabled === installed) return;
     if (enabled) {
       const target = this.screenComponent;
-      if (target.style.pointerEvents === "none") {
-        target.style.pointerEvents = "auto";
-      }
       const onClick = () => {
         if (this.isDestroyed()) return;
         if (this.closeFn) {
@@ -986,6 +1101,11 @@ var ScrimController = class {
       this.detachScrimTap = null;
       this.scrimTapToCloseEnabled = false;
     }
+    this.syncPointer();
+  }
+  syncPointer() {
+    if (!this.screenComponent) return;
+    this.screenComponent.style.pointerEvents = this.scrimInteractive || this.detachScrimTap ? "auto" : "none";
   }
   setScrimEnabled(enabled, applySize) {
     if (this.isDestroyed()) return;
@@ -1069,8 +1189,12 @@ var ScrimController = class {
     const wrapper = screen.ownerDocument.createElement("div");
     wrapper.className = "bs-scrim-overlay";
     const ws = wrapper.style;
-    ws.position = "absolute";
-    applyOverlayPosition(ws, this.mode, position, inset);
+    ws.position = "fixed";
+    const place = () => {
+      resetOverlayPosition(ws);
+      applyOverlayPosition(ws, this.mode, position, inset);
+    };
+    place();
     if (interactive) {
       ws.pointerEvents = "auto";
     }
@@ -1084,8 +1208,10 @@ var ScrimController = class {
       };
     }
     host.appendChild(wrapper);
+    this.placeOverlay = place;
     const teardown = () => {
       if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
+      if (this.placeOverlay === place) this.placeOverlay = null;
       if (this.scrimOverlayTeardown === teardown) {
         this.scrimOverlayTeardown = null;
       }
@@ -1109,6 +1235,7 @@ var ScrimController = class {
     if (this.backdrop) {
       this.backdrop.style.opacity = "";
       this.backdrop.style.pointerEvents = "";
+      this.backdrop.style.removeProperty(BACKDROP_COLOR_VAR);
     }
     this.invalidateOpacityCache();
     this.lastBackdropPointer = "";
@@ -1133,13 +1260,13 @@ var ScrimController = class {
     }
     if (opts.interactive !== void 0) {
       this.scrimInteractive = opts.interactive;
-      s.pointerEvents = opts.interactive ? "auto" : "none";
+      this.syncPointer();
     }
   }
   applyAboveSheetInset() {
     if (!this.screenComponent) return;
     const insetByMode = {
-      bottom: "0 0 var(--bs-size) 0",
+      bottom: "0 0 calc(var(--bs-size) + var(--bs-keyboard-inset, 0px)) 0",
       top: "var(--bs-size) 0 0 0",
       left: "0 0 0 var(--bs-size)",
       right: "0 var(--bs-size) 0 0"
@@ -1147,7 +1274,7 @@ var ScrimController = class {
     const s = this.screenComponent.style;
     s.position = "fixed";
     s.inset = insetByMode[this.mode];
-    s.pointerEvents = this.scrimInteractive || this.scrimTapToCloseEnabled ? "auto" : "none";
+    this.syncPointer();
   }
 };
 
@@ -1160,6 +1287,7 @@ var easeOutBack = (t) => {
 var easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
 var easeLinear = (t) => t;
 var easeOutQuint = (t) => 1 - Math.pow(1 - t, 5);
+var MIN_RETARGET_MS = 120;
 var tween = ({
   from,
   to,
@@ -1168,12 +1296,18 @@ var tween = ({
   onUpdate
 }) => {
   let cancelled = false;
+  let finished = false;
   let rafId = 0;
   let resolveFn = null;
-  const start = performance.now();
+  let start = performance.now();
+  let origin = from;
+  let target = to;
+  let span = duration;
+  let last = from;
   const promise = new Promise((resolve) => {
     resolveFn = resolve;
     if (duration <= 0) {
+      finished = true;
       onUpdate(to);
       resolve();
       return;
@@ -1181,12 +1315,13 @@ var tween = ({
     const step = (now) => {
       if (cancelled) return;
       const elapsed = Math.max(0, now - start);
-      const t = Math.min(elapsed / duration, 1);
-      const value = from + (to - from) * easing(t);
-      onUpdate(value);
+      const t = Math.min(elapsed / span, 1);
+      last = origin + (target - origin) * easing(t);
+      onUpdate(last);
       if (t < 1) {
         rafId = requestAnimationFrame(step);
       } else {
+        finished = true;
         resolve();
       }
     };
@@ -1198,6 +1333,15 @@ var tween = ({
       cancelAnimationFrame(rafId);
       resolveFn?.();
     },
+    retarget: (next) => {
+      if (cancelled || finished || next === target) return;
+      const now = performance.now();
+      const remaining = span - Math.max(0, now - start);
+      origin = last;
+      target = next;
+      start = now;
+      span = Math.max(remaining, MIN_RETARGET_MS);
+    },
     promise
   };
 };
@@ -1215,22 +1359,32 @@ var DEFAULT_SPRING = {
   restSpeed: 0.5
 };
 var MAX_DT = 1 / 30;
+var MAX_DURATION_MS = 3e3;
 var runSpring = ({
   from,
   to,
   velocity = 0,
   config,
+  maxDuration = MAX_DURATION_MS,
   onUpdate
 }) => {
   const cfg = { ...DEFAULT_SPRING, ...config };
   let cancelled = false;
+  let finished = false;
   let rafId = 0;
   let resolveFn = null;
   let x = from;
   let v = velocity;
+  let target = to;
   let lastTime = performance.now();
+  let deadline = lastTime + maxDuration;
   const promise = new Promise((resolve) => {
     resolveFn = resolve;
+    const land = () => {
+      finished = true;
+      onUpdate(target, 0);
+      resolve();
+    };
     const step = (now) => {
       if (cancelled) return;
       const dt = Math.min(Math.max(0, now - lastTime) / 1e3, MAX_DT);
@@ -1239,21 +1393,19 @@ var runSpring = ({
       const subDt = dt / steps;
       let stepsLeft = steps;
       while (stepsLeft-- > 0) {
-        const force = -cfg.stiffness * (x - to) - cfg.damping * v;
+        const force = -cfg.stiffness * (x - target) - cfg.damping * v;
         const accel = force / cfg.mass;
         v += accel * subDt;
         x += v * subDt;
       }
-      if (!Number.isFinite(x) || !Number.isFinite(v)) {
-        onUpdate(to, 0);
-        resolve();
+      if (!Number.isFinite(x) || !Number.isFinite(v) || lastTime >= deadline) {
+        land();
         return;
       }
       onUpdate(x, v);
-      const isAtRest = Math.abs(to - x) < (cfg.restDelta ?? 0.5) && Math.abs(v) < (cfg.restSpeed ?? 0.5);
+      const isAtRest = Math.abs(target - x) < (cfg.restDelta ?? 0.5) && Math.abs(v) < (cfg.restSpeed ?? 0.5);
       if (isAtRest) {
-        onUpdate(to, 0);
-        resolve();
+        land();
       } else {
         rafId = requestAnimationFrame(step);
       }
@@ -1266,6 +1418,11 @@ var runSpring = ({
       cancelAnimationFrame(rafId);
       resolveFn?.();
     },
+    retarget: (next) => {
+      if (cancelled || finished) return;
+      target = next;
+      deadline = performance.now() + maxDuration;
+    },
     promise
   };
 };
@@ -1417,21 +1574,40 @@ var AnimationRunner = class {
     this.applySizeFn(size);
   }
   cancel() {
-    this.currentTween?.cancel();
-    this.currentSpring?.cancel();
+    const tween2 = this.currentTween;
+    const spring = this.currentSpring;
+    this.currentTween = null;
+    this.currentSpring = null;
+    tween2?.cancel();
+    spring?.cancel();
     this.cancelWaapi();
   }
+  retarget(target) {
+    if (this.currentSpring) {
+      this.currentSpring.retarget(target);
+      return true;
+    }
+    if (this.currentTween) {
+      this.currentTween.retarget(target);
+      return true;
+    }
+    if (this.currentWaapi) {
+      this.currentWaapi.retarget(target);
+      return true;
+    }
+    return false;
+  }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
-      if (!this.isAnimating && !this.isDragging()) {
+      if (this.isAnimating) this.cancel();
+      if (!this.isDragging()) {
         this.applySizeFn(target);
+        this.getRootEl()?.removeAttribute("data-animating");
         this.element.style.willChange = "";
       }
       return;
     }
-    this.currentTween?.cancel();
-    this.currentSpring?.cancel();
-    this.cancelWaapi();
+    this.cancel();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -1441,19 +1617,13 @@ var AnimationRunner = class {
       return;
     }
     if (this.settleWaapi && this.applyAux && this.getTransformFor && typeof this.element.animate === "function") {
-      const samples = this.animationKind === "spring" ? sampleSpringSettle(
-        this.getSize(),
-        target,
-        velocityPxPerMs * VELOCITY_PX_PER_S,
-        this.springConfig
-      ) : sampleTweenSettle(
+      const samples = this.sampleSettle(
         this.getSize(),
         target,
-        this.duration,
-        this.easing
+        velocityPxPerMs * VELOCITY_PX_PER_S
       );
       if (samples.values.length >= 2 && samples.durationMs > 0) {
-        await this.runWaapiSettle(samples, target);
+        await this.runWaapiSettle({ samples, target });
         if (!this.isAnimating) {
           this.getRootEl()?.removeAttribute("data-animating");
           if (!this.isDragging()) this.element.style.willChange = "";
@@ -1495,7 +1665,10 @@ var AnimationRunner = class {
       }
     }
   }
-  async runWaapiSettle(samples, target) {
+  sampleSettle(from, to, velocityPxPerS) {
+    return this.animationKind === "spring" ? sampleSpringSettle(from, to, velocityPxPerS, this.springConfig) : sampleTweenSettle(from, to, this.duration, this.easing);
+  }
+  startWaapiLeg(samples, onRetarget) {
     const applyAux = this.applyAux;
     const getTransformFor = this.getTransformFor;
     const frames = samples.values.map((v) => ({
@@ -1510,16 +1683,20 @@ var AnimationRunner = class {
     let stopped = false;
     let auxRaf = 0;
     const lastIdx = samples.values.length - 1;
+    const cursor = () => Math.min((Number(anim.currentTime) || 0) / samples.stepMs, lastIdx);
     const sizeNow = () => {
-      const at = Math.min(
-        (Number(anim.currentTime) || 0) / samples.stepMs,
-        lastIdx
-      );
+      const at = cursor();
       const idx = Math.floor(at);
       const from = samples.values[idx];
       const to = samples.values[Math.min(idx + 1, lastIdx)];
       return from + (to - from) * (at - idx);
     };
+    const velocityNow = () => {
+      const idx = Math.min(Math.floor(cursor()), Math.max(lastIdx - 1, 0));
+      const from = samples.values[idx];
+      const to = samples.values[Math.min(idx + 1, lastIdx)];
+      return (to - from) / samples.stepMs * 1e3;
+    };
     const auxTick = () => {
       if (stopped) return;
       applyAux(sizeNow());
@@ -1532,22 +1709,55 @@ var AnimationRunner = class {
         stopped = true;
         cancelAnimationFrame(auxRaf);
       },
-      sizeNow
+      sizeNow,
+      velocityNow,
+      retarget: (to) => onRetarget(entry, to)
     };
-    this.currentWaapi = entry;
-    try {
-      await anim.finished;
-    } catch {
-    }
-    entry.stop();
-    const wasCurrent = this.currentWaapi === entry;
-    if (wasCurrent) this.currentWaapi = null;
-    if (wasCurrent && anim.playState === "finished") {
-      this.applySizeFn(target);
+    return entry;
+  }
+  async runWaapiSettle(first) {
+    let leg = first;
+    for (; ; ) {
+      let queued = null;
+      const entry = this.startWaapiLeg(leg.samples, (running, to) => {
+        const size = this.readShownSize?.() ?? running.sizeNow();
+        queued = {
+          samples: this.sampleSettle(size, to, running.velocityNow()),
+          target: to
+        };
+        running.stop();
+        try {
+          running.anim.cancel();
+        } catch {
+        }
+        this.applySizeFn(size);
+      });
+      this.currentWaapi = entry;
       try {
-        anim.cancel();
+        await entry.anim.finished;
       } catch {
       }
+      entry.stop();
+      const wasCurrent = this.currentWaapi === entry;
+      const next = queued;
+      if (wasCurrent && next) {
+        if (next.samples.values.length >= 2 && next.samples.durationMs > 0) {
+          leg = next;
+          continue;
+        }
+        this.currentWaapi = null;
+        this.applySizeFn(next.target);
+        return;
+      }
+      if (wasCurrent) this.currentWaapi = null;
+      if (wasCurrent && entry.anim.playState === "finished") {
+        this.applySizeFn(leg.target);
+        try {
+          entry.anim.cancel();
+        } catch {
+        }
+      }
+      return;
     }
   }
   destroy() {
@@ -1602,27 +1812,51 @@ var collectFocusables = (root) => {
 var focusables = (root) => collectFocusables(root).filter(
   (el) => !el.hasAttribute("inert") && isVisible(el) && !el.matches("[aria-hidden='true']")
 );
+var findDeep = (root, selector) => {
+  const direct = root.querySelector(selector);
+  if (direct || typeof HTMLSlotElement === "undefined") return direct;
+  for (const slot of Array.from(root.querySelectorAll("slot"))) {
+    for (const assigned of slot.assignedElements()) {
+      if (assigned.matches(selector)) return assigned;
+      const inner = findDeep(assigned, selector);
+      if (inner) return inner;
+    }
+  }
+  return null;
+};
+var FOCUS_ALLOW_ATTR = "data-bs-focus-allow";
+var composedParent = (node) => {
+  const slot = node.assignedSlot;
+  if (slot) return slot;
+  const parent = node.parentNode;
+  return parent instanceof ShadowRoot ? parent.host : parent;
+};
 var containsComposed = (container, node) => {
-  let n = node;
-  while (n) {
+  for (let n = node; n; n = composedParent(n)) {
     if (n === container) return true;
-    const slot = n.assignedSlot;
-    if (slot) {
-      n = slot;
-      continue;
-    }
-    const parent = n.parentNode;
-    n = parent instanceof ShadowRoot ? parent.host : parent;
   }
   return false;
 };
-var trapStack = [];
+var isAllowedOutside = (node) => {
+  for (let n = node; n; n = composedParent(n)) {
+    if (n instanceof Element && n.hasAttribute(FOCUS_ALLOW_ATTR)) return true;
+  }
+  return false;
+};
+var deepActiveElement = () => {
+  let active = document.activeElement;
+  while (active?.shadowRoot?.activeElement) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active;
+};
+var trapStack = shared("focusTraps", () => []);
 var installFocusTrap = (container, options = {}) => {
   if (typeof document === "undefined") return () => {
   };
   const token = {};
-  trapStack.push(token);
-  const isActive = () => trapStack[trapStack.length - 1] === token;
+  if (!options.isActive) trapStack.push(token);
+  const isActive = options.isActive ?? (() => trapStack[trapStack.length - 1] === token);
   const previouslyFocused = document.activeElement;
   const focusInitial = () => {
     const spec = options.initialFocus;
@@ -1631,10 +1865,11 @@ var installFocusTrap = (container, options = {}) => {
       container.focus({ preventScroll: true });
       return;
     }
-    const initial = typeof spec === "string" ? container.querySelector(spec) : spec ?? focusables(container)[0] ?? container;
+    const initial = typeof spec === "string" ? findDeep(container, spec) : spec ?? focusables(container)[0] ?? container;
     initial?.focus({ preventScroll: true });
   };
-  focusInitial();
+  if (!containsComposed(container, deepActiveElement())) focusInitial();
+  let backwards = false;
   const handleKey = (e) => {
     if (!isActive()) return;
     if (e.key === "Escape" && options.onEscape) {
@@ -1642,6 +1877,10 @@ var installFocusTrap = (container, options = {}) => {
       return;
     }
     if (e.key !== "Tab") return;
+    backwards = e.shiftKey;
+    setTimeout(() => {
+      backwards = false;
+    }, 0);
     const list = focusables(container);
     if (list.length === 0) {
       e.preventDefault();
@@ -1649,7 +1888,7 @@ var installFocusTrap = (container, options = {}) => {
     }
     const first = list[0];
     const last = list[list.length - 1];
-    const active = document.activeElement;
+    const active = deepActiveElement();
     if (e.shiftKey && active === first) {
       e.preventDefault();
       last.focus();
@@ -1660,11 +1899,11 @@ var installFocusTrap = (container, options = {}) => {
   };
   const handleFocusIn = (e) => {
     if (!isActive()) return;
-    const target = e.target;
-    if (target && !containsComposed(container, target)) {
-      const list = focusables(container);
-      list[0]?.focus({ preventScroll: true });
-    }
+    const target = e.composedPath()[0] ?? e.target;
+    if (!target || containsComposed(container, target)) return;
+    if (isAllowedOutside(target)) return;
+    const list = focusables(container);
+    list[backwards ? list.length - 1 : 0]?.focus({ preventScroll: true });
   };
   document.addEventListener("keydown", handleKey, true);
   document.addEventListener("focusin", handleFocusIn, true);
@@ -1686,21 +1925,25 @@ var installFocusTrap = (container, options = {}) => {
 };
 
 // src/core/lifecycle/scroll-lock.ts
-var lockCount = 0;
-var savedStyles = null;
+var state = shared("scrollLock", () => ({
+  count: 0,
+  saved: null
+}));
 var lockBodyScroll = () => {
   if (typeof document === "undefined") return () => {
   };
-  if (lockCount === 0) {
+  if (state.count === 0) {
     const body = document.body;
-    savedStyles = {
+    const saved = {
       overflow: body.style.overflow,
       position: body.style.position,
       top: body.style.top,
       width: body.style.width,
       paddingRight: body.style.paddingRight,
+      scrollX: window.scrollX,
       scrollY: window.scrollY
     };
+    state.saved = saved;
     const scrollbarGap = window.innerWidth - document.documentElement.clientWidth;
     if (scrollbarGap > 0) {
       const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
@@ -1708,53 +1951,72 @@ var lockBodyScroll = () => {
     }
     body.style.overflow = "hidden";
     body.style.position = "fixed";
-    body.style.top = `-${savedStyles.scrollY}px`;
+    body.style.top = `-${saved.scrollY}px`;
     body.style.width = "100%";
   }
-  lockCount++;
+  state.count++;
   let released = false;
   return () => {
     if (released) return;
     released = true;
-    lockCount = Math.max(0, lockCount - 1);
-    if (lockCount === 0 && savedStyles) {
+    state.count = Math.max(0, state.count - 1);
+    if (state.count === 0 && state.saved) {
       const body = document.body;
-      body.style.overflow = savedStyles.overflow;
-      body.style.position = savedStyles.position;
-      body.style.top = savedStyles.top;
-      body.style.width = savedStyles.width;
-      body.style.paddingRight = savedStyles.paddingRight;
-      window.scrollTo(0, savedStyles.scrollY);
-      savedStyles = null;
+      const saved = state.saved;
+      body.style.overflow = saved.overflow;
+      body.style.position = saved.position;
+      body.style.top = saved.top;
+      body.style.width = saved.width;
+      body.style.paddingRight = saved.paddingRight;
+      window.scrollTo({
+        top: saved.scrollY,
+        left: saved.scrollX,
+        behavior: "instant"
+      });
+      state.saved = null;
     }
   };
 };
 
 // src/core/features/inert-siblings.ts
+var OWN_ROOTS = ".bs-root, .ovl-root";
+var LAYER_CLASSES = [
+  "bs-backdrop",
+  "bs-screen",
+  "bs-root",
+  "ovl-backdrop",
+  "ovl-root"
+];
+var isLayer = (el) => LAYER_CLASSES.some((name) => el.classList.contains(name));
 function createInertSiblings(rootProvider) {
   const tracked = [];
+  const remove = () => {
+    for (const el of tracked) el.removeAttribute("inert");
+    tracked.length = 0;
+  };
   return {
     apply() {
       if (typeof document === "undefined") return;
-      let top = rootProvider();
-      while (top.parentElement && top.parentElement !== document.body) {
-        top = top.parentElement;
-      }
-      const parent = top.parentElement ?? document.body;
-      for (const child of Array.from(parent.children)) {
-        if (child === top) continue;
-        if (child.hasAttribute("inert")) continue;
-        if (child.classList.contains("bs-backdrop") || child.classList.contains("bs-screen") || child.classList.contains("bs-root")) {
+      remove();
+      const surface = rootProvider();
+      let node = surface.closest(OWN_ROOTS) ?? surface;
+      while (node && node !== document.body) {
+        const parent = node.parentElement;
+        if (!parent) {
+          const root = node.getRootNode();
+          node = typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot ? root.host : null;
           continue;
         }
-        child.setAttribute("inert", "");
-        tracked.push(child);
+        for (const sibling of Array.from(parent.children)) {
+          if (sibling === node) continue;
+          if (sibling.hasAttribute("inert") || isLayer(sibling)) continue;
+          sibling.setAttribute("inert", "");
+          tracked.push(sibling);
+        }
+        node = parent;
       }
     },
-    remove() {
-      for (const el of tracked) el.removeAttribute("inert");
-      tracked.length = 0;
-    }
+    remove
   };
 }
 
@@ -1762,6 +2024,7 @@ function createInertSiblings(rootProvider) {
 var LifecycleController = class {
   constructor(deps, opts) {
     __publicField(this, "element");
+    __publicField(this, "isTop");
     __publicField(this, "focusTrapEnabled");
     __publicField(this, "initialFocus");
     __publicField(this, "closeOnEscape");
@@ -1775,6 +2038,7 @@ var LifecycleController = class {
     __publicField(this, "installed", false);
     __publicField(this, "destroyed", false);
     this.element = deps.element;
+    this.isTop = deps.isTop;
     this.focusTrapEnabled = opts.focusTrap ?? false;
     this.initialFocus = opts.initialFocus;
     this.closeOnEscape = opts.closeOnEscape ?? true;
@@ -1795,12 +2059,17 @@ var LifecycleController = class {
     }
     if (this.focusTrapEnabled && !this.releaseFocusTrap) {
       this.releaseFocusTrap = installFocusTrap(this.element, {
-        initialFocus: this.initialFocus
+        initialFocus: this.initialFocus,
+        isActive: this.isTop
       });
     }
-    if (this.inertSiblingsEnabled && this.shouldApplyInertSiblings()) {
-      this.inertSiblings.apply();
-    }
+    this.syncTop();
+  }
+  syncTop() {
+    if (!this.installed || !this.inertSiblingsEnabled) return;
+    if (!this.shouldApplyInertSiblings()) return;
+    if (this.isTop?.() ?? true) this.inertSiblings.apply();
+    else this.inertSiblings.remove();
   }
   setReturnFocus(target) {
     if (this.destroyed) return;
@@ -1970,10 +2239,14 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
     if (wasPending) return;
     callbacks.onCancel?.();
   };
+  const onLostCapture = (e) => {
+    if (e.target === handle) onPointerCancel(e);
+  };
   handle.addEventListener("pointerdown", onPointerDown);
   handle.addEventListener("pointermove", onPointerMove);
   handle.addEventListener("pointerup", finishGesture);
   handle.addEventListener("pointercancel", onPointerCancel);
+  handle.addEventListener("lostpointercapture", onLostCapture);
   const managesTouchAction = options.manageTouchAction !== false;
   const prevTouchAction = handle.style.touchAction;
   if (managesTouchAction) {
@@ -1984,6 +2257,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
     handle.removeEventListener("pointermove", onPointerMove);
     handle.removeEventListener("pointerup", finishGesture);
     handle.removeEventListener("pointercancel", onPointerCancel);
+    handle.removeEventListener("lostpointercapture", onLostCapture);
     if (managesTouchAction) handle.style.touchAction = prevTouchAction;
     if (activePointerId !== null && handle.hasPointerCapture(activePointerId)) {
       handle.releasePointerCapture(activePointerId);
@@ -2100,8 +2374,7 @@ var GestureController = class {
           size: this.deps.getDragContext().size,
           velocity: 0
         });
-        const restoreTo = this.dragStartSize;
-        void this.deps.animateTo(restoreTo, 0);
+        this.deps.restoreAfterDrag();
       }
     }, this.deps.gestureOptions);
     return this.detach;
@@ -2166,6 +2439,11 @@ var readDirection = (el) => {
   }
   return "ltr";
 };
+var guessPhysicalMode = (mode) => {
+  if (mode === "start") return "left";
+  if (mode === "end") return "right";
+  return mode ?? "bottom";
+};
 var resolveMode = (mode, el) => {
   if (!isLogicalMode(mode)) return mode;
   const rtl = readDirection(el) === "rtl";
@@ -2218,22 +2496,24 @@ function createScrollCache(deps) {
     return size < max / 2;
   };
   return {
-    cache(fromId, prevSize, nextSize) {
+    leave(fromId, prevSize, nextSize) {
       const container = deps.scrollContainer;
       if (!container) return;
-      if (isSmallSize(prevSize)) return;
-      if (!isSmallSize(nextSize)) return;
+      if (nextSize <= 0) {
+        positions.clear();
+        return;
+      }
+      if (isSmallSize(prevSize) || !isSmallSize(nextSize)) return;
       positions.set(fromId, container.scrollTop);
     },
-    restore(toId, prevSize, nextSize) {
+    enter(toId, prevSize, nextSize) {
       const container = deps.scrollContainer;
       if (!container) return;
-      if (isSmallSize(nextSize)) return;
-      if (!isSmallSize(prevSize)) return;
+      if (isSmallSize(nextSize) || !isSmallSize(prevSize)) return;
       const cached = positions.get(toId);
       if (cached === void 0) return;
-      container.scrollTop = cached;
       positions.delete(toId);
+      container.scrollTop = cached;
     },
     clear() {
       positions.clear();
@@ -2347,17 +2627,18 @@ function attachAnchor(deps, opts) {
   const isDock = position === "dock-bottom" || position === "dock-top";
   const ws = wrapper.style;
   ws.position = "fixed";
-  if (isDock) {
+  const place = () => {
+    resetOverlayPosition(ws);
+    if (!isDock) {
+      applyOverlayPosition(ws, deps.getMode(), position, opts.inset ?? "16px");
+      return;
+    }
     ws.left = "0";
     ws.right = "0";
-    if (position === "dock-bottom") {
-      ws.bottom = "0";
-    } else {
-      ws.top = "0";
-    }
-  } else {
-    applyOverlayPosition(ws, deps.mode, position, opts.inset ?? "16px");
-  }
+    if (position === "dock-bottom") ws.bottom = "0";
+    else ws.top = "0";
+  };
+  place();
   if (opts.fadeRange) {
     const [r0, r1] = opts.fadeRange;
     const span = Math.max(r1 - r0, 1e-4);
@@ -2367,10 +2648,10 @@ function attachAnchor(deps, opts) {
   deps.host.appendChild(wrapper);
   let visible = null;
   let inFlight = null;
-  const shouldShow = (state) => {
-    if (typeof opts.showOn === "function") return opts.showOn(state);
-    if (Array.isArray(opts.showOn)) return opts.showOn.includes(state.activeId);
-    return isDock || state.size > 0;
+  const shouldShow = (state3) => {
+    if (typeof opts.showOn === "function") return opts.showOn(state3);
+    if (Array.isArray(opts.showOn)) return opts.showOn.includes(state3.activeId);
+    return isDock || state3.size > 0;
   };
   const applyVisibility = (next, animate) => {
     if (next === visible) return;
@@ -2417,7 +2698,8 @@ function attachAnchor(deps, opts) {
     },
     syncZ: (z) => {
       wrapper.style.zIndex = String(z);
-    }
+    },
+    reposition: place
   };
 }
 
@@ -2433,30 +2715,37 @@ var matchesRange = (def, progress) => {
 };
 function installScrimStages(deps, opts) {
   const doc = deps.host.ownerDocument;
-  const entries2 = opts.stages.map((def) => {
+  const entries = opts.stages.map((def) => {
     const wrapper = doc.createElement("div");
     wrapper.className = "bs-scrim-stage";
     const ws = wrapper.style;
-    ws.position = "absolute";
-    applyOverlayPosition(
-      ws,
-      deps.mode,
-      def.position ?? opts.position ?? "center",
-      def.inset ?? opts.inset ?? "16px"
-    );
+    ws.position = "fixed";
     ws.visibility = "hidden";
     ws.pointerEvents = "none";
     wrapper.appendChild(def.element);
     deps.host.appendChild(wrapper);
     return { def, wrapper, inFlight: null };
   });
+  const place = () => {
+    for (const entry of entries) {
+      const ws = entry.wrapper.style;
+      resetOverlayPosition(ws);
+      applyOverlayPosition(
+        ws,
+        deps.getMode(),
+        entry.def.position ?? opts.position ?? "center",
+        entry.def.inset ?? opts.inset ?? "16px"
+      );
+    }
+  };
+  place();
   let active = null;
   const resolveActive = () => {
-    const state = deps.getState();
-    if (state.size === 0) {
-      return entries2.find((e) => matchesId(e.def, state.activeId)) ?? null;
+    const state3 = deps.getState();
+    if (state3.size === 0) {
+      return entries.find((e) => matchesId(e.def, state3.activeId)) ?? null;
     }
-    return entries2.find((e) => matchesId(e.def, state.activeId)) ?? entries2.find((e) => matchesRange(e.def, state.progress)) ?? null;
+    return entries.find((e) => matchesId(e.def, state3.activeId)) ?? entries.find((e) => matchesRange(e.def, state3.progress)) ?? null;
   };
   const hide = (entry, animate) => {
     entry.inFlight?.cancel();
@@ -2505,20 +2794,23 @@ function installScrimStages(deps, opts) {
     deps.on("open", () => update(true)),
     deps.on("close", () => update(true))
   ];
-  if (entries2.some((e) => e.def.forRange)) {
+  if (entries.some((e) => e.def.forRange)) {
     offs.push(deps.on("progress", () => update(true)));
   }
   update(false);
-  return () => {
-    offs.forEach((off) => off());
-    for (const entry of entries2) {
-      entry.inFlight?.cancel();
-      entry.inFlight = null;
-      if (entry.wrapper.parentNode) {
-        entry.wrapper.parentNode.removeChild(entry.wrapper);
+  return {
+    reposition: place,
+    detach: () => {
+      offs.forEach((off) => off());
+      for (const entry of entries) {
+        entry.inFlight?.cancel();
+        entry.inFlight = null;
+        if (entry.wrapper.parentNode) {
+          entry.wrapper.parentNode.removeChild(entry.wrapper);
+        }
       }
+      active = null;
     }
-    active = null;
   };
 }
 
@@ -2554,11 +2846,13 @@ function resolveEngineOptions(opts, extras) {
       scrimMode: opts.scrimMode,
       scrimColor: opts.scrimColor,
       scrimBlur: opts.scrimBlur,
-      scrimInteractive: opts.scrimInteractive ?? (opts.scrimTapToClose ? true : void 0),
+      scrimInteractive: opts.scrimInteractive,
       scrimTapToClose: opts.scrimTapToClose,
       scrimPreset: opts.scrimPreset,
       screenRange: opts.screenRange,
-      backdropRange: opts.backdropRange
+      backdropRange: opts.backdropRange,
+      backdropOpacity: opts.backdropOpacity,
+      backdropColor: opts.backdropColor
     },
     animation: {
       animation: opts.animation,
@@ -2637,6 +2931,7 @@ var BottomSheetCore = class {
     __publicField(this, "fitContentToSnap");
     __publicField(this, "settleAnimation");
     __publicField(this, "persistent");
+    __publicField(this, "keyboardInset", 0);
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
     __publicField(this, "closeOnRouteChange");
@@ -2651,6 +2946,7 @@ var BottomSheetCore = class {
     __publicField(this, "detachSheetGesture", null);
     __publicField(this, "detachSliderKeyboard", null);
     __publicField(this, "rootEl", null);
+    __publicField(this, "homeRoot", null);
     __publicField(this, "destroyed", false);
     __publicField(this, "restClosed", false);
     __publicField(this, "currentViewTransition", null);
@@ -2658,8 +2954,13 @@ var BottomSheetCore = class {
     __publicField(this, "sizeWriteSentinel", new WriteSentinel());
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
-    __publicField(this, "opening", false);
-    __publicField(this, "promotedForOpen", false);
+    __publicField(this, "phase", "closed");
+    __publicField(this, "transition", null);
+    __publicField(this, "inFlight", null);
+    __publicField(this, "outbox", []);
+    __publicField(this, "flushing", false);
+    __publicField(this, "openPending", false);
+    __publicField(this, "settleHolds", []);
     __publicField(this, "allowOvershoot", false);
     __publicField(this, "progressPayload", {
       value: 0,
@@ -2680,6 +2981,7 @@ var BottomSheetCore = class {
     __publicField(this, "anchorHost", null);
     __publicField(this, "stackZ", 100);
     __publicField(this, "detachScrimStages", null);
+    __publicField(this, "placeScrimStages", null);
     __publicField(this, "stackEffectEnabled", false);
     __publicField(this, "stackEffectPrimed", false);
     __publicField(this, "fitDeps");
@@ -2687,13 +2989,7 @@ var BottomSheetCore = class {
     __publicField(this, "featureList", []);
     __publicField(this, "featureCtx");
     const resolved = resolveEngineOptions(opts, {
-      shouldApplyInertSiblings: () => {
-        if (typeof document === "undefined") return false;
-        const bodyChildren = Array.from(document.body.children);
-        return bodyChildren.some(
-          (c) => c === opts.element || c.contains(opts.element)
-        );
-      }
+      shouldApplyInertSiblings: () => opts.element.isConnected
     });
     this.element = opts.element;
     this.handle = opts.handle ?? opts.element;
@@ -2722,7 +3018,6 @@ var BottomSheetCore = class {
           void this.snapTo(id);
         },
         close: () => {
-          if (!this.canDismiss()) return;
           void this.close("backdrop");
         }
       },
@@ -2752,7 +3047,8 @@ var BottomSheetCore = class {
     this.lifecycle = new LifecycleController(
       {
         element: this.element,
-        close: () => this.close()
+        close: () => this.close(),
+        isTop: () => this.isTopSheet
       },
       resolved.lifecycle
     );
@@ -2779,6 +3075,7 @@ var BottomSheetCore = class {
     auditVhUsage(this.snapPointsRaw);
     this.auditDuplicateSnapIds(this.snapPointsRaw);
     this.rootEl = this.element.closest(".bs-root");
+    this.homeRoot = homeRootOf(this.rootEl);
     this.maxHeightDeps = {
       element: this.element,
       mode: this.mode,
@@ -2806,7 +3103,9 @@ var BottomSheetCore = class {
     );
     const initial = this.snaps.findById(this.activeId);
     if (initial) this.size = initial.size;
+    this.phase = this.size > 0 ? "open" : "closed";
     this.applySize(this.size);
+    this.restClosed = this.element.getAttribute("data-bs-rest") === "closed";
     this.setRestClosed(this.size === 0);
     this.updateAriaSlider();
     this.scrollCache = createScrollCache({
@@ -2817,12 +3116,11 @@ var BottomSheetCore = class {
     this.attach();
     this.registerInStack();
     if (this.snaps.getMaxAxisSize() === 0 && typeof IntersectionObserver !== "undefined" && typeof document !== "undefined") {
-      const io = new IntersectionObserver((entries2) => {
-        for (const entry of entries2) {
+      const io = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
           if (!entry.isIntersecting) continue;
           if (this.destroyed) return;
-          this.snaps.recompute();
-          this.healActiveSnap();
+          this.recompute();
           io.disconnect();
           return;
         }
@@ -2832,6 +3130,7 @@ var BottomSheetCore = class {
     }
     this.teardowns.add(
       installFitObserver({
+        element: this.element,
         handle: this.handle,
         scrollContainer: this.scrollContainer,
         hasFitSnap: () => this.snapPointsRaw.some(
@@ -2847,9 +3146,7 @@ var BottomSheetCore = class {
     this.applyAutoAriaLabelledBy();
     this.runFeatureStage("post");
     this.warnOrphanFeatureOptions();
-    if (this.size > 0) {
-      this.handleOpen();
-    }
+    if (this.phase === "open") this.installLifecycle(true);
   }
   buildFeatureContext(autoCollapseAfter) {
     return {
@@ -2877,21 +3174,27 @@ var BottomSheetCore = class {
       getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
       resolveSnap: (id) => this.snaps.findById(id),
       resolveActiveSnap: () => this.snaps.findById(this.activeId),
+      getPhase: () => this.phase,
       setSize: (size) => {
         this.size = size;
       },
       setMaxAxisSize: (size) => {
         this.snaps.setMaxAxisSize(size);
       },
+      setKeyboardInset: (px) => this.setKeyboardInset(px),
       applySize: (size) => this.applySize(size),
       recomputeSnaps: () => this.recomputeSnaps(),
+      reseat: () => this.reseat(),
+      holdSettle: (settled) => {
+        this.settleHolds.push(settled);
+      },
       newCycle: () => {
         this.newCycle();
       },
-      cancelInFlight: () => {
-        this.animation.cancel();
+      cancelInFlight: () => this.suspend(),
+      resyncAfterResize: () => {
+        if (!this.destroyed) this.land(false);
       },
-      resyncAfterResize: () => this.resyncAfterResize(),
       snapTo: (id) => {
         void this.snapTo(id);
       },
@@ -2930,8 +3233,9 @@ var BottomSheetCore = class {
     return {
       size: this.size,
       activeId: this.activeId,
+      phase: this.phase,
       isDragging: this.isDraggingAny(),
-      isAnimating: this.animation.isAnimating,
+      isAnimating: this.animation.isAnimating || this.currentViewTransition !== null,
       progress: this.computeProgress(this.size)
     };
   }
@@ -2985,49 +3289,53 @@ var BottomSheetCore = class {
   getResolvedSnaps() {
     return this.snaps.getResolvedSnaps();
   }
-  async snapTo(id, velocityOrOpts = 0, _skipBeforeSnap = false) {
-    if (this.destroyed) return;
+  snapTo(id, velocityOrOpts = 0, _skipBeforeSnap = false) {
     const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : { velocity: velocityOrOpts };
-    const velocityPxPerMs = opts.velocity ?? 0;
-    const externalSignal = opts.signal;
-    if (externalSignal?.aborted) return;
+    return this.transitionTo(
+      id,
+      opts.velocity ?? 0,
+      _skipBeforeSnap,
+      opts.signal
+    );
+  }
+  transitionTo(id, velocityPxPerMs = 0, skipBeforeSnap = false, externalSignal) {
+    if (this.destroyed || externalSignal?.aborted) return Promise.resolve();
     const target = this.snaps.findById(id);
     if (!target) {
       devWarn(`[BottomSheet] unknown snap id: ${id}`);
-      return;
+      return Promise.resolve();
     }
     if (!this.snaps.getAllowedIds().includes(id)) {
       devWarn(`[BottomSheet] snap "${id}" is not in allowed list`);
-      return;
-    }
-    if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
-      return;
-    }
-    const resumingOpen = this.opening;
-    const signal = this.newCycle();
-    const onExternalAbort = () => {
-      this.animation.cancel();
-      this.newCycle();
-    };
+      return Promise.resolve();
+    }
+    if (target.size === 0 && this.closingBlocked()) return Promise.resolve();
+    if (!externalSignal && this.inFlight?.id === id) return this.inFlight.done;
+    if (!skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
+      return Promise.resolve();
+    }
+    const flight = { id, done: Promise.resolve() };
+    flight.done = this.runTransition(
+      target,
+      velocityPxPerMs,
+      false,
+      externalSignal,
+      flight
+    );
+    return flight.done;
+  }
+  async runTransition(target, velocityPxPerMs, fromDrag, externalSignal, flight = null) {
+    const signal = this.beginTransition(target);
+    const transition = this.transition;
+    if (signal.aborted || !transition) return;
+    this.inFlight = flight;
+    const onExternalAbort = () => this.suspend();
     externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
-    const wasClosed = this.size === 0 || resumingOpen;
-    const previousId = this.activeId;
-    const previousSize = this.size;
-    this.scrollCache.cache(previousId, previousSize, target.size);
-    this.activeId = id;
-    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
-    const opensToRest = id === "closed" || rawTargetSize === 0;
-    if (wasClosed && !opensToRest) {
-      this.opening = true;
-      if (!resumingOpen) {
-        this.promotedForOpen = true;
-        sheetStack.promote(this.id);
-      }
-    }
-    if (this.animation.viewTransitionsAvailable) {
+    this.allowOvershoot = fromDrag;
+    if (!fromDrag && this.animation.viewTransitionsAvailable) {
       this.currentViewTransition?.skipTransition?.();
       const vt = document.startViewTransition(() => {
-        this.applySize(target.size);
+        if (!signal.aborted) this.applySize(transition.size);
       });
       vt.ready?.catch(() => {
       });
@@ -3038,71 +3346,241 @@ var BottomSheetCore = class {
       }
       if (this.currentViewTransition === vt) this.currentViewTransition = null;
     } else {
-      await this.animation.animateTo(target.size, velocityPxPerMs);
+      await this.animation.animateTo(transition.size, velocityPxPerMs);
     }
     externalSignal?.removeEventListener("abort", onExternalAbort);
     if (signal.aborted) return;
-    this.opening = false;
-    this.completeSnap(id, target.size, previousSize, wasClosed, false);
+    if (this.size !== transition.size) this.applySize(transition.size);
+    this.land(fromDrag);
+    if (this.settleHolds.length > 0) {
+      await Promise.allSettled(this.settleHolds.splice(0));
+    }
+  }
+  beginTransition(target) {
+    const signal = this.newCycle();
+    const cap = this.snaps.getMaxAxisSize();
+    const fromId = this.activeId;
+    const fromSize = this.snaps.findById(fromId)?.size ?? this.size;
+    this.scrollCache.leave(fromId, fromSize, target.size);
+    this.scrollCache.enter(target.id, fromSize, target.size);
+    this.activeId = target.id;
+    this.transition = {
+      size: cap > 0 ? Math.min(target.size, cap) : target.size,
+      cap
+    };
+    if (target.size > 0) {
+      this.enterOpening(target.id);
+    } else {
+      if (this.phase === "closed" && !this.isClosedSnap(target.id)) {
+        sheetStack.promote(this.id);
+      }
+      this.enterClosing();
+    }
+    this.flush();
+    return signal;
+  }
+  enterOpening(id) {
+    if (this.phase === "open" || this.phase === "opening") return;
+    const fresh = this.phase === "closed";
+    this.phase = "opening";
+    this.setRestClosed(false);
+    if (!this.installLifecycle(fresh)) return;
+    this.post("open", { id });
+    this.outbox.push(() => {
+      if (this.phase !== "closed") {
+        notifyLinkedSheets(this.linkedSheets, this);
+      }
+    });
+  }
+  enterClosing() {
+    if (this.phase === "closed" || this.phase === "closing") return;
+    this.phase = "closing";
+    this.post("close", void 0);
+  }
+  settlePhase(heal) {
+    if (this.size > 0) {
+      this.enterOpening(this.activeId);
+      if (this.phase === "opening") {
+        this.phase = "open";
+        this.post("opened", { id: this.activeId });
+      }
+      return;
+    }
+    if (heal && this.phase !== "closing") return;
+    this.enterClosing();
+    if (this.phase === "closing") {
+      this.phase = "closed";
+      this.setRestClosed(true);
+      this.lifecycle.release();
+      sheetStack.update();
+      this.post("closed", void 0);
+    }
   }
-  completeSnap(id, targetSize, previousSize, wasClosed, withHaptic) {
-    this.scrollCache.restore(id, previousSize, targetSize);
+  land(haptic) {
+    this.transition = null;
+    this.inFlight = null;
+    this.allowOvershoot = false;
+    this.openPending = this.size === 0 && !this.isClosedSnap(this.activeId);
     this.updateAriaSlider();
-    this.emit("snap", {
-      id,
+    this.setRestClosed(this.size === 0);
+    this.post("snap", {
+      id: this.activeId,
       size: this.size,
       progress: this.computeProgress(this.size)
     });
-    if (withHaptic) this.haptic();
-    this.setRestClosed(targetSize === 0);
-    if (wasClosed && targetSize > 0) this.emitOpenSequence(id);
-    if (targetSize === 0) this.emitCloseSequence();
+    this.settlePhase(false);
+    if (haptic) this.haptic();
+    this.flush();
   }
-  setRestClosed(closed) {
-    if (closed === this.restClosed) return;
-    this.restClosed = closed;
-    if (closed) this.element.setAttribute("data-bs-rest", "closed");
-    else this.element.removeAttribute("data-bs-rest");
-  }
-  emitOpenSequence(id) {
-    this.emit("open", { id });
-    this.handleOpen();
-    notifyLinkedSheets(this.linkedSheets, this);
-    this.emit("opened", { id });
-  }
-  emitCloseSequence() {
-    this.emit("close", void 0);
-    this.handleClose();
-    this.emit("closed", void 0);
+  suspend() {
+    this.animation.cancel();
+    this.currentViewTransition?.skipTransition?.();
+    this.newCycle();
   }
-  async dragTo(targetSize, velocityOrOpts = 0) {
-    if (this.destroyed) return;
-    const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : { velocity: velocityOrOpts };
-    const velocityPxPerMs = opts.velocity ?? 0;
-    const externalSignal = opts.signal;
-    if (externalSignal?.aborted) return;
+  landNow() {
+    const transition = this.transition;
+    if (this.destroyed || !transition || this.isDraggingAny()) return;
+    this.animation.cancel();
+    this.currentViewTransition?.skipTransition?.();
     this.newCycle();
-    const onExternalAbort = () => {
-      this.animation.cancel();
-      this.newCycle();
-    };
-    externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
-    const clamped = Math.max(0, Math.min(targetSize, this.snaps.getMaxAxisSize()));
-    await this.animation.animateTo(clamped, velocityPxPerMs);
-    externalSignal?.removeEventListener("abort", onExternalAbort);
-    if (this.destroyed || externalSignal?.aborted) return;
+    this.applySize(transition.size);
+    this.land(false);
   }
-  open(id) {
+  reseat() {
+    if (this.destroyed || this.isDraggingAny()) return;
+    const active = this.snaps.findById(this.activeId);
+    if (!active) return;
+    const cap = this.snaps.getMaxAxisSize();
+    const target = cap > 0 ? Math.min(active.size, cap) : active.size;
+    this.updateAriaSlider();
+    const transition = this.transition;
+    if (transition) {
+      if (Math.abs(target - transition.size) < SIZE_WRITE_EPSILON && Math.abs(cap - transition.cap) < SIZE_WRITE_EPSILON) {
+        return;
+      }
+      transition.size = target;
+      transition.cap = cap;
+      this.applySize(this.animation.retarget(target) ? this.size : target);
+      return;
+    }
+    if (this.openPending && target > 0 && this.phase === "closed") {
+      void this.runTransition(active, 0, false);
+      return;
+    }
+    this.applySize(target);
+    this.settlePhase(true);
+    this.flush();
+  }
+  installLifecycle(promote) {
+    if (promote) sheetStack.promote(this.id);
+    if (this.lifecycle.isInstalled) return true;
+    try {
+      this.lifecycle.install();
+      return true;
+    } catch (err) {
+      this.abortOpen();
+      queueMicrotask(() => {
+        throw err;
+      });
+      return false;
+    }
+  }
+  abortOpen() {
+    this.animation.cancel();
+    if (!this.destroyed) this.newCycle();
+    this.phase = "closed";
+    this.openPending = false;
+    this.lifecycle.release();
+    sheetStack.update();
+    this.activeId = this.zeroSnapId() ?? this.activeId;
+    this.applySize(0);
+    this.setRestClosed(true);
+    this.updateAriaSlider();
+  }
+  zeroSnapId() {
+    return this.snapPointsRaw.find((p) => p.id === "closed")?.id ?? this.snaps.getAllowedIds().find((a) => this.snaps.findById(a)?.size === 0);
+  }
+  isClosedSnap(id) {
+    if (id === "closed") return true;
+    return this.snapPointsRaw.find((p) => p.id === id)?.size === 0;
+  }
+  closingBlocked() {
+    return this.disableCloseFlag && this.phase !== "closed";
+  }
+  setKeyboardInset(px) {
+    if (px === this.keyboardInset) return;
+    this.keyboardInset = px;
+    for (const host of this.varHosts()) {
+      host.style.setProperty("--bs-keyboard-inset", `${px}px`);
+    }
+  }
+  varHosts() {
+    const hosts = /* @__PURE__ */ new Set([this.element]);
+    for (const host of [
+      this.anchorHost,
+      this.scrimParent,
+      this.rootEl,
+      this.homeRoot
+    ]) {
+      if (host) hosts.add(host);
+    }
+    return hosts;
+  }
+  dismissBlocked() {
+    return (this.disableCloseFlag || this.persistent) && this.phase !== "closed";
+  }
+  post(event, payload) {
+    this.outbox.push(() => this.bus.emit(event, payload));
+  }
+  flush() {
+    if (this.flushing) return;
+    this.flushing = true;
+    try {
+      for (let next = this.outbox.shift(); next; next = this.outbox.shift()) {
+        next();
+      }
+    } finally {
+      this.flushing = false;
+    }
+  }
+  setRestClosed(closed) {
+    if (closed === this.restClosed) return;
+    this.restClosed = closed;
+    if (closed) this.element.setAttribute("data-bs-rest", "closed");
+    else this.element.removeAttribute("data-bs-rest");
+  }
+  async dragTo(targetSize, velocityOrOpts = 0) {
+    if (this.destroyed) return;
+    const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : { velocity: velocityOrOpts };
+    const velocityPxPerMs = opts.velocity ?? 0;
+    const externalSignal = opts.signal;
+    if (externalSignal?.aborted) return;
+    this.newCycle();
+    const onExternalAbort = () => this.suspend();
+    externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
+    const clamped = Math.max(0, Math.min(targetSize, this.snaps.getMaxAxisSize()));
+    await this.animation.animateTo(clamped, velocityPxPerMs);
+    externalSignal?.removeEventListener("abort", onExternalAbort);
+  }
+  open(id) {
     if (this.destroyed) return Promise.resolve();
+    if (!id && (this.phase === "open" || this.phase === "opening")) {
+      return Promise.resolve();
+    }
     const target = id ?? this.snaps.getAllowedIds().find((a) => (this.snaps.findById(a)?.size ?? 0) > 0) ?? this.activeId;
     return this.snapTo(target);
   }
   close(reason = "programmatic") {
-    if (this.destroyed) return Promise.resolve();
-    if (this.disableCloseFlag) return Promise.resolve();
-    if (this.size > 0 && this.emitBeforeClose(reason)) return Promise.resolve();
-    const closedId = this.snapPointsRaw.find((p) => p.id === "closed")?.id ?? this.snaps.getAllowedIds().find((a) => this.snaps.findById(a)?.size === 0) ?? this.snaps.getAllowedIds()[0];
-    return this.snapTo(closedId ?? this.activeId);
+    if (this.destroyed || this.disableCloseFlag) return Promise.resolve();
+    if (this.persistent && reason !== "programmatic") return Promise.resolve();
+    const target = this.zeroSnapId() ?? this.allowedIdsBySize()[0];
+    if (target === void 0) return Promise.resolve();
+    if (this.phase === "closed" && this.activeId === target) {
+      return Promise.resolve();
+    }
+    const visible = this.phase === "open" || this.phase === "opening";
+    if (visible && this.emitBeforeClose(reason)) return Promise.resolve();
+    return this.snapTo(target);
   }
   canDismiss() {
     return !this.persistent && !this.disableCloseFlag && !this.destroyed;
@@ -3125,10 +3603,12 @@ var BottomSheetCore = class {
   }
   setDragFrom(mode) {
     if (this.destroyed || mode === this.dragFromMode) return;
+    const wasDragging = this.gesture?.isDragging ?? false;
     this.gesture?.forceClearDragState();
     this.detachSheetGesture?.();
     this.dragFromMode = mode;
     this.mountSheetGesture();
+    if (wasDragging) this.restoreAfterDrag();
   }
   getDragFrom() {
     return this.dragFromMode;
@@ -3141,6 +3621,7 @@ var BottomSheetCore = class {
     const nowVertical = next === "bottom" || next === "top";
     this.gesture?.forceClearDragState();
     this.detachSheetGesture?.();
+    this.landNow();
     this.animation.cancel();
     this.element.style.removeProperty(layoutAxis(this.mode));
     this.mode = next;
@@ -3156,9 +3637,12 @@ var BottomSheetCore = class {
     this.detachSliderKeyboard?.();
     this.mountSliderKeyboard();
     this.mountSheetGesture();
+    for (const anchor of this.anchors) anchor.reposition();
+    this.placeScrimStages?.();
+    if (this.stackEffectPrimed) {
+      this.element.style.transformOrigin = nowVertical ? "50% 100%" : "0% 50%";
+    }
     this.recompute();
-    const active = this.snaps.findById(this.activeId);
-    if (active) this.applySize(active.size);
     this.updateAriaSlider();
   }
   getMode() {
@@ -3200,13 +3684,24 @@ var BottomSheetCore = class {
     if (snap && ids.includes(snap)) {
       void this.snapTo(snap, 0, true);
     } else if (!ids.includes(this.activeId)) {
-      const fallback = ids[0];
-      if (fallback) void this.snapTo(fallback, 0, true);
+      const fallback = this.fallbackSnap(
+        this.snaps.findById(this.activeId)?.size ?? this.size
+      );
+      if (fallback) void this.snapTo(fallback.id, 0, true);
     }
   }
+  fallbackSnap(from) {
+    return (from > 0 ? this.snaps.nearest(from, true) : null) ?? this.snaps.nearest(from, false);
+  }
   setBackdropRange(range) {
     this.scrim.setBackdropRange(range, () => this.applySize(this.size));
   }
+  setBackdropOpacity(value) {
+    this.scrim.setBackdropOpacity(value, () => this.applySize(this.size));
+  }
+  setBackdropColor(color) {
+    this.scrim.setBackdropColor(color);
+  }
   setScreenRange(range) {
     this.scrim.setScreenRange(range, () => this.applySize(this.size));
   }
@@ -3247,7 +3742,7 @@ var BottomSheetCore = class {
     }
     const handle = attachAnchor(
       {
-        mode: this.mode,
+        getMode: () => this.mode,
         host: this.anchorHost,
         getState: () => ({
           activeId: this.activeId,
@@ -3285,9 +3780,9 @@ var BottomSheetCore = class {
       return () => {
       };
     }
-    const detachInstalled = installScrimStages(
+    const stages = installScrimStages(
       {
-        mode: this.mode,
+        getMode: () => this.mode,
         host,
         getState: () => ({
           activeId: this.activeId,
@@ -3300,10 +3795,14 @@ var BottomSheetCore = class {
       opts
     );
     const detach = () => {
-      if (this.detachScrimStages === detach) this.detachScrimStages = null;
-      detachInstalled();
+      if (this.detachScrimStages === detach) {
+        this.detachScrimStages = null;
+        this.placeScrimStages = null;
+      }
+      stages.detach();
     };
     this.detachScrimStages = detach;
+    this.placeScrimStages = stages.reposition;
     this.teardowns.add(() => this.detachScrimStages?.());
     return detach;
   }
@@ -3312,32 +3811,29 @@ var BottomSheetCore = class {
   }
   setSnapPoints(points, allowed) {
     if (this.destroyed) return;
-    this.animation.cancel();
-    this.newCycle();
+    const from = this.snaps.findById(this.activeId)?.size ?? this.size;
+    const restricted = this.snaps.getResolvedSnaps().some((s) => !this.snaps.getAllowedIds().includes(s.id));
     this.snapPointsRaw = points;
     auditVhUsage(points);
     this.auditDuplicateSnapIds(points);
+    this.maxHeight.resolveCap();
     this.snaps.setRaw(points);
+    this.maxHeight.clampTo();
     if (allowed) {
       this.snaps.setAllowedIds(allowed);
     } else {
       const present = this.snaps.getResolvedSnaps().map((s) => s.id);
-      const kept = this.snaps.getAllowedIds().filter((id) => present.includes(id));
+      const kept = restricted ? this.snaps.getAllowedIds().filter((id) => present.includes(id)) : [];
       this.snaps.setAllowedIds(kept.length ? kept : present);
     }
     this.scrollCache.clear();
     this.scrim.invalidateOpacityCache();
-    const current = this.snaps.findById(this.activeId);
-    if (current) {
-      this.applySize(current.size);
-    } else {
-      const fallback = this.snaps.getResolvedSnaps().find((s) => this.snaps.getAllowedIds().includes(s.id)) ?? this.snaps.getResolvedSnaps()[0];
-      if (fallback) {
-        this.activeId = fallback.id;
-        this.applySize(fallback.size);
-      }
+    if (this.snaps.findById(this.activeId)) {
+      this.reseat();
+      return;
     }
-    this.updateAriaSlider();
+    const fallback = this.fallbackSnap(from) ?? this.snaps.getResolvedSnaps()[0];
+    if (fallback) void this.transitionTo(fallback.id, 0, true);
   }
   recompute() {
     if (this.destroyed) return;
@@ -3345,22 +3841,11 @@ var BottomSheetCore = class {
     this.snaps.recompute();
     this.maxHeight.clampTo();
     this.scrim.invalidateOpacityCache();
-    if (this.isDraggingAny()) return;
-    this.healActiveSnap();
-  }
-  healActiveSnap() {
-    const current = this.snaps.findById(this.activeId);
-    if (!current) return;
-    this.size = current.size;
-    this.applySize(this.size);
-    this.updateAriaSlider();
-    if (this.size > 0 && !this.lifecycle.isInstalled && !this.opening && !this.animation.isAnimating) {
-      this.emitOpenSequence(this.activeId);
-    }
+    this.reseat();
   }
   destroy() {
     this.destroyed = true;
-    this.opening = false;
+    this.outbox.length = 0;
     this.currentAbort.abort();
     this.currentViewTransition?.skipTransition?.();
     this.currentViewTransition = null;
@@ -3377,11 +3862,19 @@ var BottomSheetCore = class {
       this.backdrop.style.opacity = "";
       this.backdrop.style.pointerEvents = "";
     }
-    for (const host of [this.anchorHost, this.scrimParent, this.rootEl]) {
+    for (const host of [
+      this.anchorHost,
+      this.scrimParent,
+      this.rootEl,
+      this.homeRoot
+    ]) {
       if (!host) continue;
       host.style.removeProperty("--bs-size");
       host.style.removeProperty("--bs-progress");
+      host.style.removeProperty("--bs-z-sheet");
+      host.style.removeProperty("--bs-keyboard-inset");
     }
+    this.element.style.removeProperty("--bs-keyboard-inset");
     if (this.screenComponent) {
       this.screenComponent.style.opacity = "";
       this.screenComponent.style.display = "";
@@ -3394,7 +3887,8 @@ var BottomSheetCore = class {
   }
   newCycle() {
     this.allowOvershoot = false;
-    this.opening = false;
+    this.transition = null;
+    this.inFlight = null;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3417,8 +3911,9 @@ var BottomSheetCore = class {
     if (typeof document === "undefined") return;
     if (!this.lifecycle.focusTrapEnabled) return;
     if (this.element.getAttribute("aria-labelledby")) return;
-    const scope = this.handle ?? this.element;
-    const titled = scope.querySelector("[data-bs-title]") ?? scope.querySelector("h1,h2,h3,h4,h5,h6");
+    const HEADING = "h1,h2,h3,h4,h5,h6";
+    const header = this.element.querySelector(".bs-header");
+    const titled = this.element.querySelector("[data-bs-title]") ?? this.handle.querySelector(HEADING) ?? header?.querySelector(HEADING);
     if (!titled) return;
     if (!titled.id) {
       titled.id = nextInstanceId("bs-title");
@@ -3460,12 +3955,16 @@ var BottomSheetCore = class {
         this.stackZ = z;
         this.element.style.zIndex = String(z);
         if (this.backdrop) this.backdrop.style.zIndex = String(z - 1);
+        this.rootEl?.style.setProperty("--bs-z-sheet", String(z));
+        this.homeRoot?.style.setProperty("--bs-z-sheet", String(z));
         for (const anchor of this.anchors) anchor.syncZ(z + 1);
       },
       setIsTop: (isTop) => {
+        if (isTop === this.isTopSheet) return;
         this.isTopSheet = isTop;
+        this.lifecycle.syncTop();
       },
-      isOpen: () => this.size > 0 || this.opening,
+      isOpen: () => this.phase !== "closed",
       setDepth: (depth) => this.applyStackDepth(depth)
     }));
   }
@@ -3493,15 +3992,15 @@ var BottomSheetCore = class {
         const r = this.getAllowedRange();
         buf.size = this.size;
         buf.maxAxisSize = this.snaps.getMaxAxisSize();
-        buf.range.min = r.min;
+        buf.range.min = this.dismissBlocked() ? Math.max(r.min, this.smallestOpenSize()) : r.min;
         buf.range.max = r.max;
         buf.rubberBandEnabled = this.rubberBandEnabled;
         return buf;
       },
       getDisableDrag: () => this.disableDragFlag,
-      cancelAnimation: () => this.animation.cancel(),
+      cancelAnimation: () => this.suspend(),
       applySize: (size) => this.applySize(size),
-      animateTo: (size, velocity) => this.animation.animateTo(size, velocity),
+      restoreAfterDrag: () => this.restoreAfterDrag(),
       settleAfterDrag: (delta, velocity, kind) => this.settleAfterDrag(delta, velocity, kind),
       emit: (event, payload) => this.emit(event, payload),
       listenerCount: (event) => this.bus.listenerCount(event)
@@ -3625,32 +4124,19 @@ var BottomSheetCore = class {
         element: this.element,
         getMode: () => this.mode,
         isDestroyed: () => this.destroyed,
-        isDragging: () => this.isDraggingAny(),
         resolveActiveSnap: () => this.snaps.findById(this.activeId),
         getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
-        getSize: () => this.size,
         setMaxAxisSize: (size) => {
           this.snaps.setMaxAxisSize(size);
         },
-        setSize: (size) => {
-          this.size = size;
-        },
         recomputeSnaps: () => this.recomputeSnaps(),
-        applySize: (size) => this.applySize(size),
-        cancelInFlight: () => {
-          this.animation.cancel();
-        },
-        newCycle: () => {
-          this.newCycle();
-        },
-        isAnimating: () => this.animation.isAnimating,
-        resyncAfterCancel: () => this.resyncAfterResize()
+        reseat: () => this.reseat(),
+        landNow: () => this.landNow()
       }));
       if (this.lifecycle.closeOnEscape) {
         const onKey = (e) => {
           if (this.destroyed || e.defaultPrevented) return;
-          if (!this.canDismiss()) return;
-          if (e.key === "Escape" && this.isTopSheet && this.size > 0) {
+          if (e.key === "Escape" && this.isTopSheet) {
             void this.close("escape");
           }
         };
@@ -3668,7 +4154,10 @@ var BottomSheetCore = class {
       handle: this.handle,
       mode: this.mode,
       isDestroyed: () => this.destroyed,
-      getAllowedIds: () => this.allowedIdsBySize(),
+      getAllowedIds: () => {
+        const ids = this.allowedIdsBySize();
+        return this.dismissBlocked() ? ids.filter((id) => (this.snaps.findById(id)?.size ?? 0) > 0) : ids;
+      },
       getActiveId: () => this.activeId,
       snapTo: (id) => {
         void this.snapTo(id);
@@ -3681,56 +4170,46 @@ var BottomSheetCore = class {
     });
   }
   settleAfterDrag(delta, velocity, kind = "touch") {
-    const signal = this.newCycle();
-    const target = this.snaps.findDragSettleTarget({
-      delta,
-      velocity,
-      pointerKind: kind,
-      size: this.size,
-      activeId: this.activeId,
-      flickVelocity: this.flickVelocity,
-      dragThreshold: this.dragThreshold
-    });
+    const target = this.snaps.findDragSettleTarget(
+      {
+        delta,
+        velocity,
+        pointerKind: kind,
+        size: this.size,
+        activeId: this.activeId,
+        flickVelocity: this.flickVelocity,
+        dragThreshold: this.dragThreshold
+      },
+      this.dismissBlocked()
+    );
     if (!target) {
       this.clearWillChangeIfIdle();
       return;
     }
     const previousId = this.activeId;
     if (target.id === previousId && target.size === this.size) {
+      if (this.phase === "opening" || this.phase === "closing") {
+        this.land(false);
+      }
       this.clearWillChangeIfIdle();
       return;
     }
     if (this.emitBeforeSnap(target, previousId)) {
-      const restore2 = this.snaps.findById(previousId);
-      if (restore2) {
-        void this.animation.animateTo(restore2.size, 0);
-      }
+      this.restoreAfterDrag();
       return;
     }
-    const previousSize = this.size;
-    const previousSnapSize = this.snaps.findById(previousId)?.size;
-    this.scrollCache.cache(previousId, previousSize, target.size);
-    this.activeId = target.id;
-    if (previousSnapSize === 0 && target.size > 0) {
-      this.opening = true;
-      this.promotedForOpen = true;
-      sheetStack.promote(this.id);
-    }
-    const settleCap = this.snaps.getMaxAxisSize();
-    const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
-    this.allowOvershoot = true;
-    void this.animation.animateTo(settleSize, velocity).then(() => {
-      if (signal.aborted) return;
-      this.allowOvershoot = false;
-      this.opening = false;
-      this.completeSnap(
-        target.id,
-        target.size,
-        previousSize,
-        previousSnapSize === 0,
-        true
-      );
-    });
+    void this.runTransition(target, velocity, true);
+  }
+  restoreAfterDrag() {
+    const active = this.snaps.findById(this.activeId);
+    if (active) void this.runTransition(active, 0, false);
+  }
+  smallestOpenSize() {
+    const allowed = this.snaps.getAllowedIds();
+    for (const snap of this.snaps.getResolvedSnaps()) {
+      if (snap.size > 0 && allowed.includes(snap.id)) return snap.size;
+    }
+    return 0;
   }
   isDraggingAny() {
     return (this.gesture?.isDragging ?? false) || (this.contentGesture?.isDragging ?? false);
@@ -3755,9 +4234,10 @@ var BottomSheetCore = class {
     const offset = cap - clamped;
     const style = this.element.style;
     if (!skipTransform) style.transform = this.transformTemplate(offset);
+    const moving = this.animation.isAnimating || this.isDraggingAny();
     const sizeChanged = this.sizeWriteSentinel.shouldWrite(
       clamped,
-      this.animation.isAnimating || this.isDraggingAny() ? SIZE_WRITE_EPSILON : 0
+      moving ? SIZE_WRITE_EPSILON : 0
     );
     if (sizeChanged) {
       style.setProperty("--bs-size", `${clamped}px`);
@@ -3770,11 +4250,13 @@ var BottomSheetCore = class {
       if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
         this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
       }
+      this.homeRoot?.style.setProperty("--bs-size", `${clamped}px`);
     }
     const progress = this.computeProgress(clamped);
+    const opacityEpsilon = moving ? OPACITY_WRITE_EPSILON : 0;
     const progressChanged = this.progressWriteSentinel.shouldWrite(
       progress,
-      OPACITY_WRITE_EPSILON
+      opacityEpsilon
     );
     if (progressChanged) {
       style.setProperty("--bs-progress", String(progress));
@@ -3784,8 +4266,9 @@ var BottomSheetCore = class {
       if (this.rootEl && this.rootEl !== this.anchorHost) {
         this.rootEl.style.setProperty("--bs-progress", String(progress));
       }
+      this.homeRoot?.style.setProperty("--bs-progress", String(progress));
     }
-    this.scrim.applyOpacity(progress, progressChanged);
+    this.scrim.applyOpacity(progress, progressChanged, opacityEpsilon);
     if ((progressChanged || sizeChanged) && this.bus.listenerCount("progress") > 0) {
       this.progressPayload.value = progress;
       this.progressPayload.size = clamped;
@@ -3798,238 +4281,322 @@ var BottomSheetCore = class {
     if (reachableMax <= min) return 0;
     return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
   }
-  handleOpen() {
-    if (this.promotedForOpen) this.promotedForOpen = false;
-    else sheetStack.promote(this.id);
-    try {
-      this.lifecycle.install();
-    } catch (err) {
-      if (!this.destroyed) this.newCycle();
-      this.handleClose();
-      this.applySize(0);
-      this.activeId = this.snapPointsRaw.find((p) => p.id === "closed")?.id ?? this.activeId;
-      this.size = 0;
-      queueMicrotask(() => {
-        throw err;
-      });
-    }
-  }
-  resyncAfterResize() {
-    if (this.destroyed) return;
-    const target = this.snaps.findById(this.activeId);
-    if (!target) return;
-    this.updateAriaSlider();
-    this.emit("snap", {
-      id: target.id,
-      size: this.size,
-      progress: this.computeProgress(this.size)
-    });
-    if (target.size > 0 && !this.lifecycle.isInstalled) {
-      this.emitOpenSequence(target.id);
-    } else if (target.size === 0 && this.lifecycle.isInstalled) {
-      this.emitCloseSequence();
-    }
-  }
-  handleClose() {
-    this.opening = false;
-    this.promotedForOpen = false;
-    this.lifecycle.release();
-    sheetStack.update();
-  }
 };
 
 // src/core/features/history-coordinator.ts
-var entries = [];
-var subscribers = /* @__PURE__ */ new Set();
-var suppress = 0;
-var internalDepth = 0;
-var pendingRebrands = [];
-var listenerInstalled = false;
-var patchInstalled = false;
-var origPushState = null;
-var origReplaceState = null;
-var patchedPushState = null;
-var patchedReplaceState = null;
-var hasWindow = () => typeof window !== "undefined";
-var hasHistory = () => typeof history !== "undefined";
-var brandMarker = (surface) => ({
+var MARKER = "__bs";
+var STACK = "__bsStack";
+var DEPTH = "__bsDepth";
+var ROUTED = "__bsRouted";
+var SETTLE_TIMEOUT_MS = 1e3;
+var state2 = shared(
+  "history",
+  () => ({
+    live: [],
+    stackId: void 0,
+    baseUrl: void 0,
+    position: null,
+    knownLength: 0,
+    href: "",
+    subscribers: /* @__PURE__ */ new Set(),
+    internal: 0,
+    pending: [],
+    deferred: [],
+    waiters: [],
+    timer: null,
+    listening: false,
+    leftovers: false,
+    orphanChecked: false,
+    push: null,
+    replace: null
+  })
+);
+var hasHistory = () => typeof window !== "undefined" && typeof history !== "undefined";
+var plain = (value) => value !== null && typeof value === "object" && !Array.isArray(value) ? value : null;
+var depthOf = (value) => {
+  const depth = value?.[DEPTH];
+  return typeof depth === "number" ? depth : null;
+};
+var isMarker = (value) => value?.[MARKER] === true;
+var inStack = (value) => value !== null && state2.stackId !== void 0 && value[STACK] === state2.stackId && depthOf(value) !== null;
+var foreignKeys = (value) => {
+  const out = {};
+  const source = plain(value);
+  if (!source) return out;
+  for (const key of Object.keys(source)) {
+    if (!key.startsWith(MARKER)) out[key] = source[key];
+  }
+  return out;
+};
+var markerFor = (surface, depth) => ({
+  ...foreignKeys(history.state),
   ...surface.markerState(),
-  __bs: true
+  [MARKER]: true,
+  [STACK]: state2.stackId,
+  [DEPTH]: depth
 });
+var urlForDepth = (depth) => {
+  for (let i = depth - 1; i >= 0; i -= 1) {
+    const url = state2.live[i]?.surface.url;
+    if (url !== void 0) return url;
+  }
+  return state2.baseUrl;
+};
 var runInternal = (fn) => {
-  internalDepth += 1;
+  state2.internal += 1;
   try {
     fn();
+    return true;
+  } catch {
+    return false;
   } finally {
-    internalDepth -= 1;
+    state2.internal -= 1;
   }
 };
 var notifyRouteChange = () => {
-  const snapshot = Array.from(subscribers);
-  for (const fn of snapshot) fn();
+  for (const fn of Array.from(state2.subscribers)) {
+    try {
+      fn();
+    } catch (err) {
+      queueMicrotask(() => {
+        throw err;
+      });
+    }
+  }
 };
 var ensureListener = () => {
-  if (listenerInstalled || !hasWindow()) return;
+  if (state2.listening || !hasHistory()) return;
   window.addEventListener("popstate", onPopState);
-  listenerInstalled = true;
+  state2.listening = true;
 };
 var maybeTeardownListener = () => {
-  if (!listenerInstalled) return;
-  if (entries.length > 0 || subscribers.size > 0 || suppress > 0) return;
-  if (hasWindow()) window.removeEventListener("popstate", onPopState);
-  listenerInstalled = false;
-};
-var installPatch = () => {
-  if (patchInstalled || !hasHistory()) return;
-  origPushState = history.pushState;
-  origReplaceState = history.replaceState;
-  patchedPushState = function(...args) {
-    origPushState.apply(this, args);
-    if (internalDepth === 0) notifyRouteChange();
-  };
-  patchedReplaceState = function(...args) {
-    origReplaceState.apply(this, args);
-    if (internalDepth === 0) notifyRouteChange();
-  };
-  history.pushState = patchedPushState;
-  history.replaceState = patchedReplaceState;
-  patchInstalled = true;
-};
-var removePatch = () => {
-  if (!patchInstalled) return;
-  if (history.pushState === patchedPushState && origPushState) {
-    history.pushState = origPushState;
-  }
-  if (history.replaceState === patchedReplaceState && origReplaceState) {
-    history.replaceState = origReplaceState;
-  }
-  origPushState = null;
-  origReplaceState = null;
-  patchedPushState = null;
-  patchedReplaceState = null;
-  patchInstalled = false;
-};
-function onPopState() {
-  if (suppress > 0) {
-    suppress -= 1;
-    const rebrand = pendingRebrands.shift();
-    if (rebrand) rebrand();
-    maybeTeardownListener();
+  if (!state2.listening) return;
+  if (state2.live.length > 0 || state2.subscribers.size > 0 || state2.pending.length > 0 || state2.leftovers) {
     return;
   }
-  if (entries.length === 0) {
-    notifyRouteChange();
-    maybeTeardownListener();
-    return;
-  }
-  let target = null;
-  let targetIdx = -1;
-  for (let i = entries.length - 1; i >= 0; i -= 1) {
-    const entry = entries[i];
-    if (!entry.surface.isOpen()) continue;
-    if (!target) {
-      target = entry;
-      targetIdx = i;
-    }
-    if (entry.surface.isTop()) {
-      target = entry;
-      targetIdx = i;
-      break;
-    }
-  }
-  if (!target) {
-    const removed = entries.pop();
-    if (removed) removed.live = false;
+  if (hasHistory()) window.removeEventListener("popstate", onPopState);
+  state2.listening = false;
+};
+var settleIfIdle = () => {
+  if (state2.pending.length > 0) return;
+  if (state2.timer !== null) {
+    clearTimeout(state2.timer);
+    state2.timer = null;
+  }
+  for (const entry of state2.deferred.splice(0)) pushEntry(entry);
+  for (const resolve of state2.waiters.splice(0)) resolve();
+};
+var traverse = (delta, kind) => {
+  state2.pending.push(kind);
+  if (state2.timer !== null) clearTimeout(state2.timer);
+  state2.timer = setTimeout(() => {
+    state2.timer = null;
+    state2.pending.length = 0;
+    settleIfIdle();
     maybeTeardownListener();
-    return;
-  }
-  target.live = false;
-  entries.splice(targetIdx, 1);
-  const settled = target;
-  void Promise.resolve(settled.surface.close()).then(() => {
-    if (settled.surface.isOpen()) restore(settled);
+  }, SETTLE_TIMEOUT_MS);
+  ensureListener();
+  const moved = runInternal(() => {
+    if (delta < 0) history.back();
+    else history.forward();
   });
-  maybeTeardownListener();
-}
-function restore(entry) {
-  if (!hasWindow() || !hasHistory()) return;
-  entry.live = true;
+  if (!moved) {
+    state2.pending.pop();
+    settleIfIdle();
+  }
+};
+var newStackId = () => `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+var startStack = () => {
+  state2.stackId = newStackId();
+  const current = history.state;
+  const leftover = plain(current);
+  state2.baseUrl = isMarker(leftover) && leftover?.[ROUTED] !== void 0 ? void 0 : location.href;
+  if (isMarker(leftover)) return;
+  if (current !== null && current !== void 0 && !leftover) return;
   runInternal(() => {
-    try {
-      history.pushState(brandMarker(entry.surface), "", entry.surface.url);
-    } catch {
-      entry.live = false;
-    }
+    history.replaceState(
+      { ...foreignKeys(current), [STACK]: state2.stackId, [DEPTH]: 0 },
+      "",
+      location.href
+    );
   });
-  if (entry.live) {
-    entries.push(entry);
-    ensureListener();
-  }
+};
+function pushEntry(entry) {
+  const depth = state2.live.length + 1;
+  if (state2.live.length === 0) startStack();
+  const written = runInternal(() => {
+    history.pushState(markerFor(entry.surface, depth), "", entry.surface.url);
+  });
+  if (!written) return false;
+  state2.live.push(entry);
+  state2.position = depth;
+  state2.knownLength = history.length;
+  state2.href = location.href;
+  ensureListener();
+  return true;
 }
-function pushBackMarker(surface) {
-  const entry = { surface, priorUrl: void 0, live: false };
-  if (!hasWindow() || !hasHistory()) {
-    return entry;
+var enlist = (entry) => {
+  if (state2.pending.length > 0) state2.deferred.push(entry);
+  else pushEntry(entry);
+};
+var sameBrand = (a, b) => {
+  for (const key of /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])) {
+    if (key.startsWith(MARKER) && a[key] !== b[key]) return false;
   }
-  entry.priorUrl = surface.url !== void 0 ? location.href : void 0;
+  return true;
+};
+var rebrand = (depth) => {
+  const entry = state2.live[depth - 1];
+  if (!entry) return;
+  const url = urlForDepth(depth);
+  const marker = markerFor(entry.surface, depth);
+  const atUrl = url === void 0 || new URL(url, location.href).href === location.href;
+  if (atUrl && sameBrand(plain(history.state) ?? {}, marker)) return;
   runInternal(() => {
+    history.replaceState(marker, "", url);
+  });
+  state2.href = location.href;
+};
+var closeAbove = (depth) => {
+  const dropped = state2.live.splice(depth);
+  for (let i = dropped.length - 1; i >= 0; i -= 1) {
+    const entry = dropped[i];
+    let closing = void 0;
     try {
-      history.pushState(brandMarker(surface), "", surface.url);
-      entry.live = true;
-    } catch {
-      entry.live = false;
+      closing = entry.surface.close();
+    } catch (err) {
+      queueMicrotask(() => {
+        throw err;
+      });
+    }
+    void Promise.resolve(closing).then(() => {
+      if (!entry.surface.isOpen()) return;
+      const known = (e) => e.surface === entry.surface;
+      if (state2.live.some(known) || state2.deferred.some(known)) return;
+      enlist(entry);
+    });
+  }
+};
+function onPopState(event) {
+  const kind = state2.pending.shift();
+  const byUser = kind !== "pop";
+  const landed = plain(event.state);
+  const depth = depthOf(landed);
+  const from = state2.position;
+  const liveBefore = state2.live.length;
+  const grew = history.length > state2.knownLength;
+  state2.knownLength = history.length;
+  const within = inStack(landed);
+  if (within && depth !== null) {
+    state2.position = depth;
+    if (depth > state2.live.length) {
+      const forward = from !== null && from < depth;
+      traverse(forward ? 1 : -1, byUser ? "skip" : "pop");
+    } else if (depth < state2.live.length) {
+      if (byUser) closeAbove(depth);
+    } else {
+      rebrand(depth);
+    }
+  } else if (isMarker(landed)) {
+    state2.position = null;
+    traverse(-1, byUser ? "skip" : "pop");
+  } else {
+    state2.position = null;
+    if (byUser && !grew && state2.live.length > 0) {
+      closeAbove(state2.live.length - 1);
     }
-  });
-  if (entry.live) {
-    entries.push(entry);
-    ensureListener();
   }
+  const moved = location.href !== state2.href;
+  state2.href = location.href;
+  if (kind === void 0 && moved && (liveBefore === 0 || !within)) {
+    notifyRouteChange();
+  }
+  settleIfIdle();
+  maybeTeardownListener();
+}
+function pushBackMarker(surface) {
+  const entry = { surface };
+  if (hasHistory()) enlist(entry);
   return entry;
 }
 function popBackMarker(handle) {
-  if (!hasWindow() || !hasHistory()) return;
+  if (!hasHistory()) return Promise.resolve();
   const entry = handle;
-  const idx = entries.indexOf(entry);
-  if (idx === -1 || !entry.live) return;
-  const last = entries.length - 1;
-  entry.live = false;
-  entries.splice(idx, 1);
-  let rebrand = null;
-  if (idx !== last) {
-    const rebrandSurface = entries[entries.length - 1].surface;
-    const rebrandUrl = entry.priorUrl;
-    rebrand = () => {
-      runInternal(() => {
-        history.replaceState(
-          brandMarker(rebrandSurface),
-          "",
-          rebrandUrl !== void 0 ? rebrandUrl : location.href
-        );
-      });
-    };
+  const waiting = state2.deferred.indexOf(entry);
+  if (waiting !== -1) state2.deferred.splice(waiting, 1);
+  const idx = state2.live.indexOf(entry);
+  if (idx === -1) return historySettled();
+  const top = state2.live.length;
+  state2.live.splice(idx, 1);
+  const current = plain(history.state);
+  const onTop = isMarker(current) && inStack(current) && depthOf(current) === top;
+  if (onTop && state2.pending.length === 0) {
+    traverse(-1, "pop");
+  } else {
+    state2.leftovers = true;
+    ensureListener();
   }
-  pendingRebrands.push(rebrand);
-  suppress += 1;
-  runInternal(() => {
-    try {
-      history.back();
-    } catch {
-      suppress = Math.max(0, suppress - 1);
-      pendingRebrands.pop();
-    }
-  });
   maybeTeardownListener();
+  return historySettled();
 }
+function releaseOrphanMarker() {
+  if (!hasHistory() || state2.orphanChecked) return;
+  state2.orphanChecked = true;
+  if (state2.live.length > 0 || state2.pending.length > 0) return;
+  if (!isMarker(plain(history.state))) return;
+  state2.leftovers = true;
+  traverse(-1, "pop");
+}
+function historySettled() {
+  if (state2.pending.length === 0) return Promise.resolve();
+  return new Promise((resolve) => {
+    state2.waiters.push(resolve);
+  });
+}
+var wrap = (original) => function(...args) {
+  original.apply(this, args);
+  state2.knownLength = history.length;
+  if (location.href === state2.href) return;
+  state2.href = location.href;
+  if (state2.internal === 0 && state2.subscribers.size > 0) {
+    notifyRouteChange();
+  }
+};
+var installPatch = () => {
+  if (!state2.push || history.pushState === state2.push.original) {
+    const original = history.pushState;
+    const wrapper = wrap(original);
+    history.pushState = wrapper;
+    state2.push = { wrapper, original };
+  }
+  if (!state2.replace || history.replaceState === state2.replace.original) {
+    const original = history.replaceState;
+    const wrapper = wrap(original);
+    history.replaceState = wrapper;
+    state2.replace = { wrapper, original };
+  }
+};
+var removePatch = () => {
+  if (state2.push && history.pushState === state2.push.wrapper) {
+    history.pushState = state2.push.original;
+    state2.push = null;
+  }
+  if (state2.replace && history.replaceState === state2.replace.wrapper) {
+    history.replaceState = state2.replace.original;
+    state2.replace = null;
+  }
+};
 function subscribeRouteChange(fn) {
-  if (!hasWindow() || !hasHistory()) return () => {
+  if (!hasHistory()) return () => {
   };
-  subscribers.add(fn);
-  if (subscribers.size === 1) installPatch();
+  state2.subscribers.add(fn);
+  state2.href = location.href;
+  state2.knownLength = history.length;
+  installPatch();
   ensureListener();
   return () => {
-    if (!subscribers.has(fn)) return;
-    subscribers.delete(fn);
-    if (subscribers.size === 0) removePatch();
+    if (!state2.subscribers.delete(fn)) return;
+    if (state2.subscribers.size === 0) removePatch();
     maybeTeardownListener();
   };
 }
@@ -4045,36 +4612,37 @@ function installRoute(deps) {
     };
   }
   let handle = null;
+  const surface = {
+    isOpen: () => !deps.isDestroyed() && deps.isOpen(),
+    close: deps.close,
+    markerState: () => deps.routedTo !== void 0 ? { __bsRouted: deps.sheetId } : { __bsSheet: deps.sheetId },
+    url: deps.routedTo
+  };
   const onOpen = () => {
     if (handle) return;
-    handle = pushBackMarker({
-      isOpen: () => !deps.isDestroyed() && deps.getSize() > 0,
-      isTop: deps.isTopSheet,
-      close: deps.close,
-      markerState: () => deps.routedTo !== void 0 ? { __bsRouted: deps.sheetId } : { __bsSheet: deps.sheetId },
-      url: deps.routedTo
-    });
+    handle = pushBackMarker(surface);
   };
   const onClose = () => {
     if (!handle) return;
-    popBackMarker(handle);
+    deps.hold(popBackMarker(handle));
     handle = null;
   };
   const unsubscribeOpen = deps.on("open", onOpen);
   const unsubscribeClose = deps.on("close", onClose);
-  if (deps.getSize() > 0) onOpen();
+  if (deps.isOpen()) onOpen();
+  else releaseOrphanMarker();
   return () => {
     unsubscribeOpen();
     unsubscribeClose();
     if (handle) {
-      popBackMarker(handle);
+      void popBackMarker(handle);
       handle = null;
     }
   };
 }
 function installRouteChange(deps) {
   return subscribeRouteChange(() => {
-    if (deps.isDestroyed() || deps.getSize() <= 0) return;
+    if (deps.isDestroyed() || !deps.isOpen()) return;
     void deps.close();
   });
 }
@@ -4108,7 +4676,10 @@ function installAutoCollapse(deps) {
   };
   const fire = () => {
     if (deps.isDestroyed()) return;
-    if (deps.isDragging()) return;
+    if (deps.isDragging() || deps.isAnimating()) {
+      reset();
+      return;
+    }
     const active = deps.resolveSnap(deps.getActiveId());
     if (!active || active.size === 0) return;
     let target = null;
@@ -4145,6 +4716,9 @@ function installContentDrag(deps) {
 
 // src/core/features/visual-viewport.ts
 var SAFETY_PAD = 8;
+var KEYBOARD_MIN_INSET = 1;
+var KEYBOARD_MIN_COVER = 60;
+var ZOOMED = 1.01;
 function installVisualViewport(deps) {
   if (typeof window === "undefined" || !window.visualViewport) {
     return () => {
@@ -4152,36 +4726,36 @@ function installVisualViewport(deps) {
   }
   const vv = window.visualViewport;
   let rafId = null;
+  const coveredByKeyboard = () => {
+    if ((vv.scale || 1) > ZOOMED) return 0;
+    const covered = window.innerHeight - ((vv.offsetTop || 0) + vv.height);
+    return covered >= KEYBOARD_MIN_COVER ? Math.round(covered) : 0;
+  };
   const onResize = () => {
     if (rafId !== null) return;
     rafId = requestAnimationFrame(() => {
       rafId = null;
       if (deps.isDestroyed()) return;
+      deps.setKeyboardInset(coveredByKeyboard());
+      const before = seatOf(deps);
       deps.recomputeSnaps();
       const isVertical = deps.isVerticalAxis();
       const visible = isVertical ? vv.height : vv.width;
       const windowSize = isVertical ? window.innerHeight : window.innerWidth;
-      const clamp = Math.max(0, Math.min(windowSize, visible) - SAFETY_PAD);
+      const pad = windowSize - visible > KEYBOARD_MIN_INSET ? SAFETY_PAD : 0;
+      const clamp = Math.max(0, Math.min(windowSize, visible) - pad);
       if (clamp < deps.getMaxAxisSize()) {
         deps.setMaxAxisSize(clamp);
       }
-      const wasAnimating = deps.isAnimating?.() ?? false;
-      deps.cancelInFlight();
-      deps.newCycle();
-      const max = deps.getMaxAxisSize();
-      deps.setSize(Math.min(deps.getSize(), max));
-      const current = deps.resolveActiveSnap();
-      if (current && !deps.isDragging()) {
-        deps.applySize(Math.min(current.size, max));
-        if (wasAnimating) deps.resyncAfterCancel?.();
-      } else {
-        deps.applySize(deps.getSize());
-      }
+      if (sameSeat(before, seatOf(deps))) return;
+      deps.reseat();
     });
   };
   vv.addEventListener("resize", onResize);
+  vv.addEventListener("scroll", onResize);
   return () => {
     vv.removeEventListener("resize", onResize);
+    vv.removeEventListener("scroll", onResize);
     if (rafId !== null) cancelAnimationFrame(rafId);
   };
 }
@@ -4196,7 +4770,7 @@ function routeFeature() {
         teardowns.add(
           installRouteChange({
             isDestroyed: ctx.isDestroyed,
-            getSize: ctx.getSize,
+            isOpen: () => ctx.getPhase() !== "closed",
             close: () => ctx.close()
           })
         );
@@ -4205,10 +4779,10 @@ function routeFeature() {
         installRoute({
           routedTo: ctx.options.routedTo,
           closeOnBack: ctx.options.closeOnBack,
-          isTopSheet: ctx.isTopSheet,
-          getSize: ctx.getSize,
+          isOpen: () => ctx.getPhase() !== "closed",
           isDestroyed: ctx.isDestroyed,
           close: () => ctx.close("back"),
+          hold: ctx.holdSettle,
           on: ctx.on,
           sheetId: ctx.sheetId
         })
@@ -4234,6 +4808,7 @@ function autoCollapseFeature() {
       ms: ctx.options.autoCollapseAfter,
       isDestroyed: ctx.isDestroyed,
       isDragging: ctx.isDragging,
+      isAnimating: ctx.isAnimating,
       getAllowedIds: ctx.getAllowedIds,
       getActiveId: ctx.getActiveId,
       resolveSnap: ctx.resolveSnap,
@@ -4261,21 +4836,14 @@ function visualViewportFeature() {
     install: (ctx) => {
       if (typeof window === "undefined") return;
       return installVisualViewport({
-        element: ctx.element,
         isVerticalAxis: ctx.isVerticalAxis,
         isDestroyed: ctx.isDestroyed,
-        isDragging: ctx.isDragging,
         recomputeSnaps: ctx.recomputeSnaps,
         resolveActiveSnap: ctx.resolveActiveSnap,
         getMaxAxisSize: ctx.getMaxAxisSize,
-        getSize: ctx.getSize,
         setMaxAxisSize: ctx.setMaxAxisSize,
-        setSize: ctx.setSize,
-        applySize: ctx.applySize,
-        cancelInFlight: ctx.cancelInFlight,
-        newCycle: ctx.newCycle,
-        isAnimating: ctx.isAnimating,
-        resyncAfterCancel: ctx.resyncAfterResize
+        setKeyboardInset: ctx.setKeyboardInset,
+        reseat: ctx.reseat
       });
     }
   };
@@ -4467,13 +5035,13 @@ function useEnginePropSync(engineRef, opts) {
   useEffect(() => {
     if (!engineRef.current) return;
     if (opts.backdropColor !== void 0) {
-      engineRef.current.setScrimColor(opts.backdropColor);
+      engineRef.current.setBackdropColor(opts.backdropColor);
     }
   }, [opts.backdropColor]);
   useEffect(() => {
     if (!engineRef.current) return;
     if (opts.backdropOpacity !== void 0) {
-      engineRef.current.setBackdropRange([0, opts.backdropOpacity]);
+      engineRef.current.setBackdropOpacity(opts.backdropOpacity);
     }
   }, [opts.backdropOpacity]);
   useEffect(() => {
@@ -4512,39 +5080,18 @@ function useEnginePropSync(engineRef, opts) {
     if (opts.dragFromContent !== void 0) {
       engineRef.current?.setDragFromContent(opts.dragFromContent);
     }
-  }, [opts.disableDrag]);
+  }, [opts.dragFromContent]);
 }
-
-// src/core/features/teleport.ts
-var resolveTeleportTarget = (target) => {
-  if (!target) return null;
-  if (typeof target !== "string") return target;
-  if (typeof document === "undefined") return null;
-  if (target === "body") return document.body;
-  return document.querySelector(target);
-};
-var teleportElements = (els, target) => {
-  const records = [];
-  for (const el of els) {
-    if (!el || el.parentNode === target) continue;
-    records.push({ el, parent: el.parentNode, next: el.nextSibling });
-    target.appendChild(el);
+var useElementRef = () => {
+  const holder = useRef(null);
+  if (!holder.current) {
+    const assign = ((node) => {
+      assign.current = node;
+    });
+    assign.current = null;
+    holder.current = assign;
   }
-  return () => {
-    for (let i = records.length - 1; i >= 0; i--) {
-      const { el, parent, next } = records[i];
-      if (parent && parent.isConnected) {
-        const before = next && next.parentNode === parent ? next : null;
-        try {
-          parent.insertBefore(el, before);
-        } catch {
-          el.parentNode?.removeChild(el);
-        }
-      } else {
-        el.parentNode?.removeChild(el);
-      }
-    }
-  };
+  return holder.current;
 };
 
 // src/react/useBottomSheet.ts
@@ -4552,25 +5099,32 @@ var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect
 var SSR_STATE = Object.freeze({
   size: 0,
   activeId: "",
+  phase: "closed",
   isDragging: false,
   isAnimating: false,
   progress: 0
 });
 function useBottomSheet(opts) {
-  const sheetRef = useRef(null);
-  const handleRef = useRef(null);
-  const contentRef = useRef(null);
-  const backdropRef = useRef(null);
-  const screenRef = useRef(null);
+  const sheetRef = useElementRef();
+  const handleRef = useElementRef();
+  const contentRef = useElementRef();
+  const backdropRef = useElementRef();
+  const screenRef = useElementRef();
   const engineRef = useRef(null);
   const subscribersRef = useRef(/* @__PURE__ */ new Set());
   const cachedSnapshotRef = useRef(SSR_STATE);
   const optsRef = useRef(opts);
   optsRef.current = opts;
+  const subscriptionsRef = useRef([]);
   const [, setMounted] = useState(0);
   useIsomorphicLayoutEffect(() => {
     if (!sheetRef.current) return;
     const current = optsRef.current;
+    const target = resolveTeleportTarget(optsRef.current.teleportTo);
+    const restoreTeleport = target ? teleportElements(
+      [backdropRef.current, screenRef.current, sheetRef.current],
+      target
+    ) : null;
     const engine = new BottomSheetEngine({
       ...current,
       element: sheetRef.current,
@@ -4580,16 +5134,11 @@ function useBottomSheet(opts) {
       scrim: screenRef.current ?? void 0
     });
     engineRef.current = engine;
-    const target = resolveTeleportTarget(optsRef.current.teleportTo);
-    const restoreTeleport = target ? teleportElements(
-      [backdropRef.current, screenRef.current, sheetRef.current],
-      target
-    ) : null;
-    if (optsRef.current.backdropColor !== void 0) {
-      engine.setScrimColor(optsRef.current.backdropColor);
-    }
-    if (optsRef.current.backdropOpacity !== void 0) {
-      engine.setBackdropRange([0, optsRef.current.backdropOpacity]);
+    for (const entry of subscriptionsRef.current) {
+      entry.off = engine.on(
+        entry.event,
+        entry.fn
+      );
     }
     cachedSnapshotRef.current = { ...engine.state };
     setMounted((n) => n + 1);
@@ -4647,6 +5196,7 @@ function useBottomSheet(opts) {
       offs.forEach((off) => off());
       restoreTeleport?.();
       engine.destroy();
+      for (const entry of subscriptionsRef.current) entry.off = null;
       engineRef.current = null;
       cachedSnapshotRef.current = SSR_STATE;
       setMounted((n) => n + 1);
@@ -4674,7 +5224,7 @@ function useBottomSheet(opts) {
     []
   );
   const getServerSnapshot = useCallback(() => SSR_STATE, []);
-  const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const state3 = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   const snapTo = useCallback(
     (id) => engineRef.current?.snapTo(id) ?? Promise.resolve(),
     []
@@ -4712,6 +5262,23 @@ function useBottomSheet(opts) {
     []
   );
   const recompute = useCallback(() => engineRef.current?.recompute(), []);
+  const on = useCallback(
+    (event, fn) => {
+      const entry = {
+        event,
+        fn,
+        off: engineRef.current ? engineRef.current.on(event, fn) : null
+      };
+      subscriptionsRef.current.push(entry);
+      return () => {
+        entry.off?.();
+        subscriptionsRef.current = subscriptionsRef.current.filter(
+          (e) => e !== entry
+        );
+      };
+    },
+    []
+  );
   return useMemo(
     () => ({
       sheetRef,
@@ -4719,7 +5286,7 @@ function useBottomSheet(opts) {
       contentRef,
       backdropRef,
       screenRef,
-      state,
+      state: state3,
       snapTo,
       open,
       close,
@@ -4731,10 +5298,11 @@ function useBottomSheet(opts) {
       addAnchor,
       setScrimStages,
       recompute,
+      on,
       getEngine
     }),
     [
-      state,
+      state3,
       snapTo,
       open,
       close,
@@ -4750,6 +5318,15 @@ function useBottomSheet(opts) {
     ]
   );
 }
+
+// src/core/primitives/open-state.ts
+var closedSnapId = (points) => points.find((point) => point.size === 0)?.id;
+var syncOpen = (engine, open) => {
+  const phase = engine.state.phase;
+  const showing = phase === "open" || phase === "opening";
+  if (open && !showing) void engine.open();
+  else if (!open && showing) void engine.close();
+};
 var useHasMounted = () => {
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
@@ -4757,6 +5334,13 @@ var useHasMounted = () => {
 };
 var BottomSheet = forwardRef(
   function BottomSheet2(props, ref) {
+    const mounted = useHasMounted();
+    if (props.noSSR && !mounted) return null;
+    return /* @__PURE__ */ jsx(MountedBottomSheet, { ...props, ref });
+  }
+);
+var MountedBottomSheet = forwardRef(
+  function MountedBottomSheet2(props, ref) {
     const {
       backdrop = true,
       closeOnBackdrop = true,
@@ -4782,17 +5366,21 @@ var BottomSheet = forwardRef(
       onProgress,
       ariaLabel = "Bottom sheet",
       ariaLabelledBy,
-      noSSR = false,
+      handleLabel = "Resize sheet",
+      contentLabel = "Sheet content",
+      open: openProp,
+      onOpenChange,
+      noSSR: _noSSR,
       ...engineOpts
     } = props;
-    const mounted = useHasMounted();
+    const initial = engineOpts.initial ?? (openProp === false ? closedSnapId(engineOpts.snapPoints) : void 0);
     const {
       sheetRef,
       handleRef,
       contentRef,
       backdropRef,
       screenRef,
-      state,
+      state: state3,
       snapTo,
       open,
       close,
@@ -4801,12 +5389,20 @@ var BottomSheet = forwardRef(
       isTop,
       depth,
       setAllowed,
+      on,
       getEngine
     } = useBottomSheet({
       ...engineOpts,
+      initial,
       onBeforeClose,
-      onOpen,
-      onClose,
+      onOpen: (id) => {
+        onOpen?.(id);
+        onOpenChange?.(true);
+      },
+      onClose: () => {
+        onClose?.();
+        onOpenChange?.(false);
+      },
       onOpened,
       onClosed,
       onDragStart,
@@ -4815,14 +5411,18 @@ var BottomSheet = forwardRef(
       onProgress
     });
     const ariaModal = engineOpts.focusTrap === true;
+    useEffect(() => {
+      const engine = getEngine();
+      if (openProp !== void 0 && engine) syncOpen(engine, openProp);
+    }, [openProp, getEngine]);
     const lastAnnouncedRef = useRef("");
     const [announce, setAnnounce] = useState("");
     useEffect(() => {
-      if (state.activeId !== lastAnnouncedRef.current) {
-        lastAnnouncedRef.current = state.activeId;
-        setAnnounce(state.activeId);
+      if (state3.activeId !== lastAnnouncedRef.current) {
+        lastAnnouncedRef.current = state3.activeId;
+        setAnnounce(state3.activeId);
       }
-    }, [state.activeId]);
+    }, [state3.activeId]);
     useImperativeHandle(
       ref,
       () => ({
@@ -4843,9 +5443,10 @@ var BottomSheet = forwardRef(
         setScrimStages: (opts) => getEngine()?.setScrimStages(opts) ?? (() => {
         }),
         recompute: () => getEngine()?.recompute(),
+        on,
         getEngine,
         get state() {
-          return getEngine()?.state ?? state;
+          return getEngine()?.state ?? state3;
         }
       }),
       [
@@ -4858,17 +5459,30 @@ var BottomSheet = forwardRef(
         depth,
         setAllowed,
         getEngine,
-        state
+        state3
       ]
     );
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
     useEffect(() => {
-      onChange?.(state);
-    }, [state, onChange]);
+      onChangeRef.current?.(state3);
+    }, [state3]);
     const mode = engineOpts.mode;
+    const [physicalMode, setPhysicalMode] = useState(
+      () => guessPhysicalMode(mode)
+    );
     useEffect(() => {
-      if (mode === void 0) return;
-      getEngine()?.setMode(mode);
+      const engine = getEngine();
+      if (!engine) {
+        setPhysicalMode(guessPhysicalMode(mode));
+        return;
+      }
+      if (mode !== void 0) engine.setMode(mode);
+      setPhysicalMode(engine.getMode());
     }, [getEngine, mode]);
+    const [restAtStart] = useState(
+      () => startsClosed(engineOpts.snapPoints, initial, engineOpts.allowed) ? "closed" : void 0
+    );
     const [anchorHosts, setAnchorHosts] = useState([]);
     const anchorsKey = anchors ? JSON.stringify(
       anchors.map((a) => [
@@ -4924,7 +5538,6 @@ var BottomSheet = forwardRef(
         setStageHosts([]);
       };
     }, [getEngine, stagesKey]);
-    if (noSSR && !mounted) return null;
     return /* @__PURE__ */ jsxs("div", { className: "bs-root", children: [
       backdrop && /* @__PURE__ */ jsx(
         "div",
@@ -4950,8 +5563,9 @@ var BottomSheet = forwardRef(
           ref: sheetRef,
           className: `bs-sheet ${className}`.trim(),
           style,
-          "data-mode": engineOpts.mode ?? "bottom",
-          "data-active": state.activeId,
+          "data-mode": physicalMode,
+          "data-bs-rest": restAtStart,
+          "data-active": state3.activeId,
           role: ariaModal ? "dialog" : "region",
           "aria-modal": ariaModal ? "true" : void 0,
           "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
@@ -4964,10 +5578,10 @@ var BottomSheet = forwardRef(
                 className: "bs-handle",
                 role: "slider",
                 tabIndex: 0,
-                "aria-label": "Resize sheet"
+                "aria-label": handleLabel
               }
             ),
-            header != null && header !== false && /* @__PURE__ */ jsx("div", { className: "bs-header", children: typeof header === "function" ? header(state) : header }),
+            header != null && header !== false && /* @__PURE__ */ jsx("div", { className: "bs-header", children: typeof header === "function" ? header(state3) : header }),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -4975,11 +5589,11 @@ var BottomSheet = forwardRef(
                 className: "bs-content",
                 tabIndex: 0,
                 role: "region",
-                "aria-label": "Sheet content",
+                "aria-label": contentLabel,
                 children
               }
             ),
-            footer != null && footer !== false && /* @__PURE__ */ jsx("div", { className: "bs-footer", children: typeof footer === "function" ? footer(state) : footer }),
+            footer != null && footer !== false && /* @__PURE__ */ jsx("div", { className: "bs-footer", children: typeof footer === "function" ? footer(state3) : footer }),
             /* @__PURE__ */ jsx("span", { className: "bs-sr-only", role: "status", "aria-live": "polite", children: announce })
           ]
         }
@@ -4989,7 +5603,7 @@ var BottomSheet = forwardRef(
         {
           className: "bs-button-slot",
           "data-side": "left",
-          "data-mode": engineOpts.mode ?? "bottom",
+          "data-mode": physicalMode,
           children: leftButton
         }
       ),
@@ -4998,7 +5612,7 @@ var BottomSheet = forwardRef(
         {
           className: "bs-button-slot",
           "data-side": "right",
-          "data-mode": engineOpts.mode ?? "bottom",
+          "data-mode": physicalMode,
           children: rightButton
         }
       ),
@@ -5220,7 +5834,8 @@ var OverlayEngine = class {
     this.lifecycle = new LifecycleController(
       {
         element: this.element,
-        close: () => this.close("escape")
+        close: () => this.close("escape"),
+        isTop: () => this.isTop
       },
       {
         focusTrap: this.focusTrapEnabled,
@@ -5228,12 +5843,7 @@ var OverlayEngine = class {
         closeOnEscape: this.closeOnEscape,
         lockBodyScroll: this.bodyScrollLockEnabled,
         inertSiblings: this.inertSiblingsEnabled,
-        shouldApplyInertSiblings: () => {
-          const bodyChildren = Array.from(document.body.children);
-          return bodyChildren.some(
-            (c) => c === this.element || c.contains(this.element)
-          );
-        },
+        shouldApplyInertSiblings: () => this.element.isConnected,
         returnFocus: opts.returnFocus
       }
     );
@@ -5250,9 +5860,9 @@ var OverlayEngine = class {
   open() {
     if (this.destroyed || this.isOpen_) return Promise.resolve();
     this.maybeMount();
-    this.emit("before-open", void 0);
     this.isOpen_ = true;
     this.isAnimating_ = true;
+    this.emit("before-open", void 0);
     sheetStack.promote(this.id);
     this.element.removeAttribute("hidden");
     this.element.setAttribute("data-state", "entering");
@@ -5329,13 +5939,11 @@ var OverlayEngine = class {
   }
   close(reason = "programmatic") {
     if (this.destroyed || !this.isOpen_) return Promise.resolve();
-    this.emit("before-close", void 0);
     this.isOpen_ = false;
     this.isAnimating_ = true;
+    this.emit("before-close", void 0);
     sheetStack.update();
-    if (reason !== "back" && this.backMarker) {
-      popBackMarker(this.backMarker);
-    }
+    const historyDone = reason !== "back" && this.backMarker ? popBackMarker(this.backMarker) : Promise.resolve();
     this.backMarker = null;
     this.element.setAttribute("data-state", "exiting");
     const dur = this.effectiveDuration();
@@ -5346,7 +5954,7 @@ var OverlayEngine = class {
     }
     this.setWillChange(true);
     const cycle = ++this.cycleNonce;
-    return new Promise((resolve) => {
+    const exited = new Promise((resolve) => {
       requestAnimationFrame(() => {
         if (this.destroyed || cycle !== this.cycleNonce) return resolve();
         this.element.style.transform = closedTransformFor(
@@ -5383,6 +5991,7 @@ var OverlayEngine = class {
         });
       });
     });
+    return Promise.all([exited, historyDone]).then(() => void 0);
   }
   toggle() {
     if (this.destroyed) return Promise.resolve();
@@ -5395,7 +6004,7 @@ var OverlayEngine = class {
     this.setWillChange(false);
     this.releaseInteractiveListeners();
     if (this.backMarker) {
-      popBackMarker(this.backMarker);
+      void popBackMarker(this.backMarker);
       this.backMarker = null;
     }
     this.releaseStackEntry?.();
@@ -5689,7 +6298,6 @@ var OverlayEngine = class {
     if (this.closeOnBackEnabled && this.backMarker === null && typeof window !== "undefined") {
       this.backMarker = pushBackMarker({
         isOpen: () => this.isOpen_,
-        isTop: () => this.isTop,
         close: () => this.close("back"),
         markerState: () => ({ __bsOverlay: this.id })
       });
@@ -5725,7 +6333,9 @@ var OverlayEngine = class {
         if (this.backdrop) this.backdrop.style.zIndex = String(z - 1);
       },
       setIsTop: (isTop) => {
+        const changed = this.isTop !== isTop;
         this.isTop = isTop;
+        if (changed) this.lifecycle?.syncTop();
         if (this.backdrop) {
           this.backdrop.style.display = isTop ? "" : "none";
         }
@@ -5738,12 +6348,12 @@ var OverlayEngine = class {
 // src/react/useOverlay.ts
 var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 var useOverlay = (opts) => {
-  const panelRef = useRef(null);
-  const backdropRef = useRef(null);
+  const panelRef = useElementRef();
+  const backdropRef = useElementRef();
   const engineRef = useRef(null);
   const optsRef = useRef(opts);
   optsRef.current = opts;
-  const [state, setState] = useState({
+  const [state3, setState] = useState({
     isOpen: opts.initialOpen ?? false,
     isAnimating: false
   });
@@ -5786,13 +6396,13 @@ var useOverlay = (opts) => {
     () => ({
       panelRef,
       backdropRef,
-      state,
+      state: state3,
       open,
       close,
       toggle,
       getEngine
     }),
-    [state, open, close, toggle, getEngine]
+    [state3, open, close, toggle, getEngine]
   );
 };
 var Overlay = forwardRef(function Overlay2(props, ref) {
@@ -5808,22 +6418,35 @@ var Overlay = forwardRef(function Overlay2(props, ref) {
     edge = "bottom",
     ...engineOpts
   } = props;
-  const { panelRef, backdropRef, state, open, close, toggle } = useOverlay({
+  const { panelRef, backdropRef, state: state3, open, close, toggle, getEngine } = useOverlay({
     ...engineOpts,
     edge
   });
   useEffect(() => {
     if (openProp === void 0) return;
-    if (openProp && !state.isOpen) void open();
-    else if (!openProp && state.isOpen) void close();
-  }, [openProp, state.isOpen]);
+    const live = getEngine()?.state.isOpen ?? false;
+    if (openProp && !live) void open();
+    else if (!openProp && live) void close();
+  }, [openProp]);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
   useEffect(() => {
-    onChange?.(state);
-  }, [state, onChange]);
+    const engine = getEngine();
+    if (!engine) return;
+    const report = () => onChangeRef.current?.(engine.state);
+    const offs = [
+      engine.on("before-open", report),
+      engine.on("open", report),
+      engine.on("before-close", report),
+      engine.on("close", report)
+    ];
+    report();
+    return () => offs.forEach((off) => off());
+  }, [getEngine]);
   useImperativeHandle(
     ref,
-    () => ({ open, close, toggle, state }),
-    [open, close, toggle, state]
+    () => ({ open, close, toggle, state: state3 }),
+    [open, close, toggle, state3]
   );
   return /* @__PURE__ */ jsxs("div", { className: "ovl-root", children: [
     backdrop && /* @__PURE__ */ jsx(