@surdeddd/bottom-sheet 0.23.4 → 0.24.1

package/dist/qwik-lib/index.qwik.mjs

@@ -3,6 +3,13 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
 import { component$, useSignal, useStore, useVisibleTask$, noSerialize, useTask$, Slot } from "@builder.io/qwik";
+const 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];
+}
 const BASE_Z = 100;
 const STEP = 10;
 class SheetStack {
@@ -69,7 +76,7 @@ class SheetStack {
     });
   }
 }
-const sheetStack = new SheetStack();
+const sheetStack = shared("stack", () => new SheetStack());
 function buildTransformTemplate(axis) {
   switch (axis) {
     case "bottom":
@@ -84,7 +91,7 @@ function buildTransformTemplate(axis) {
 }
 const offsetFromMatrix = (axis, m) => axis === "bottom" ? m.m42 : axis === "top" ? -m.m42 : axis === "left" ? -m.m41 : m.m41;
 const layoutAxis = (axis) => axis === "left" || axis === "right" ? "width" : "height";
-const counters = {};
+const counters = shared("instanceIds", () => ({}));
 function nextInstanceId(prefix) {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
     return `${prefix}-${crypto.randomUUID()}`;
@@ -112,7 +119,13 @@ function createEventBus() {
       for (const fn of [
         ...set
       ]) {
-        fn(payload);
+        try {
+          fn(payload);
+        } catch (err) {
+          queueMicrotask(() => {
+            throw err;
+          });
+        }
       }
     },
     listenerCount(event) {
@@ -123,7 +136,18 @@ function createEventBus() {
     }
   };
 }
+function devWarn(...args) {
+  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
+    console.warn(...args);
+  }
+}
 let probe = null;
+const rejected = /* @__PURE__ */ new Set();
+const warnRejected = (value) => {
+  if (rejected.has(value)) return;
+  rejected.add(value);
+  devWarn(`[BottomSheet] snap size "${value}" is not a CSS length the browser accepts — it resolves to 0.`);
+};
 const PROBE_ATTR = "data-bs-probe";
 const ensureProbe = (axis) => {
   if (typeof document === "undefined") return null;
@@ -170,16 +194,13 @@ const 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);
 };
-function devWarn(...args) {
-  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
-    console.warn(...args);
-  }
-}
 const resolveSnapList = (points, mode, measureFit) => points.map((p) => {
   const raw = resolveSnap(p.size, mode, measureFit);
   if (!Number.isFinite(raw) || raw < 0) {
@@ -194,6 +215,10 @@ const resolveSnapList = (points, mode, measureFit) => points.map((p) => {
     size: raw
   };
 }).sort((a, b) => a.size - b.size);
+const startsClosed = (points, initial, allowed) => {
+  const id = initial ?? allowed?.[0] ?? points[0]?.id;
+  return points.find((p) => p.id === id)?.size === 0;
+};
 const VH_NOT_DVH = /(^|[^a-z])vh\b/i;
 const auditVhUsage = (points) => {
   for (const p of points) {
@@ -304,6 +329,7 @@ class SnapResolver {
   setMode(mode) {
     if (mode === this.mode) return;
     this.mode = mode;
+    this.notified = false;
     this.recompute();
   }
   setAllowedIds(ids) {
@@ -313,14 +339,20 @@ class SnapResolver {
   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));
   }
@@ -362,22 +394,23 @@ const SIZE_WRITE_EPSILON = 0.5;
 const OPACITY_WRITE_EPSILON = 5e-3;
 const POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
 const RANGE_DIVISION_EPSILON = 1e-4;
+const seatOf = (deps) => {
+  const snap = deps.resolveActiveSnap();
+  const max = deps.getMaxAxisSize();
+  return {
+    target: snap ? Math.min(snap.size, max) : null,
+    max
+  };
+};
+const 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";
@@ -386,21 +419,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") {
@@ -412,7 +432,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 () => {
@@ -435,6 +455,16 @@ const contentTargets = (scroller) => {
   }
   return out;
 };
+const 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 () => {
   };
@@ -450,7 +480,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();
@@ -467,7 +496,10 @@ 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);
@@ -482,15 +514,16 @@ 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();
@@ -501,6 +534,77 @@ function installFitObserver(deps) {
     if (raf) cancelAnimationFrame(raf);
   };
 }
+const 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);
+};
+const ROOT_CLASS = "bs-root";
+const homes = /* @__PURE__ */ new WeakMap();
+const homeRootOf = (root) => (root && homes.get(root)) ?? null;
+const mirrorClasses = (home, wrapper) => {
+  wrapper.className = home?.className ?? "";
+  wrapper.classList.add(ROOT_CLASS);
+};
+const 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);
+  };
+};
 function createMaxHeightController(deps) {
   let maxHeightCap;
   let maxHeightRaw;
@@ -589,8 +693,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();
@@ -672,18 +777,19 @@ class WriteSentinel {
 }
 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,
+        bottom: lifted,
         left: inset
       };
       if (position === "sheet-top-right") return {
-        bottom: sizeOffset,
+        bottom: lifted,
         right: inset
       };
       return {
-        bottom: sizeOffset,
+        bottom: lifted,
         left: "50%",
         transform: "translateX(-50%)"
       };
@@ -731,6 +837,13 @@ function resolveSheetAnchoredStyle(mode, position, inset) {
       };
   }
 }
+function resetOverlayPosition(ws) {
+  ws.top = "";
+  ws.bottom = "";
+  ws.left = "";
+  ws.right = "";
+  ws.transform = "";
+}
 function applyOverlayPosition(ws, mode, position, inset) {
   switch (position) {
     case "top-left":
@@ -789,6 +902,8 @@ function applyOverlayPosition(ws, mode, position, inset) {
 }
 const VALID_CSS_LENGTH = /^-?\d+(?:\.\d+)?(?:px|em|rem|%)$/;
 const DEFAULT_SCRIM_DIM = "rgba(0, 0, 0, 0.4)";
+const BACKDROP_COLOR_VAR = "--bs-backdrop-color";
+const unit = (value) => Number.isFinite(value) ? Math.min(Math.max(value, 0), 1) : 1;
 class ScrimController {
   constructor(deps, opts) {
     __publicField(this, "screenComponent");
@@ -803,11 +918,13 @@ class ScrimController {
     __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", "");
@@ -830,6 +947,8 @@ class ScrimController {
       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);
@@ -859,18 +978,19 @@ class ScrimController {
       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;
@@ -879,7 +999,7 @@ class ScrimController {
     if (this.screenComponent && this.scrimMode !== "off") {
       const [ss, se] = this.screenRange;
       const screenOpacity = Math.min(1, Math.max(0, (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";
@@ -895,6 +1015,17 @@ class ScrimController {
     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;
@@ -923,6 +1054,8 @@ class ScrimController {
     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;
@@ -935,7 +1068,7 @@ class ScrimController {
       if (previous === "above-sheet" && mode !== "above-sheet") {
         s.position = "";
         s.inset = "";
-        s.pointerEvents = "";
+        this.syncPointer();
       }
       if (mode === "above-sheet") {
         this.applyAboveSheetInset();
@@ -960,9 +1093,6 @@ class ScrimController {
     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) {
@@ -985,6 +1115,11 @@ class ScrimController {
       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;
@@ -1079,8 +1214,12 @@ class ScrimController {
     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";
     }
@@ -1092,8 +1231,10 @@ class ScrimController {
       };
     }
     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;
       }
@@ -1117,6 +1258,7 @@ class ScrimController {
     if (this.backdrop) {
       this.backdrop.style.opacity = "";
       this.backdrop.style.pointerEvents = "";
+      this.backdrop.style.removeProperty(BACKDROP_COLOR_VAR);
     }
     this.invalidateOpacityCache();
     this.lastBackdropPointer = "";
@@ -1141,13 +1283,13 @@ class ScrimController {
     }
     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"
@@ -1155,7 +1297,7 @@ class ScrimController {
     const s = this.screenComponent.style;
     s.position = "fixed";
     s.inset = insetByMode[this.mode];
-    s.pointerEvents = this.scrimInteractive || this.scrimTapToCloseEnabled ? "auto" : "none";
+    this.syncPointer();
   }
 }
 const easeOutBack = (t) => {
@@ -1166,14 +1308,21 @@ const easeOutBack = (t) => {
 const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
 const easeLinear = (t) => t;
 const easeOutQuint = (t) => 1 - Math.pow(1 - t, 5);
+const MIN_RETARGET_MS = 120;
 const tween = ({ from, to, duration, easing = easeOutCubic, 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 +1330,13 @@ const tween = ({ from, to, duration, easing = easeOutCubic, onUpdate }) => {
     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 +1348,15 @@ const tween = ({ from, to, duration, easing = easeOutCubic, onUpdate }) => {
       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
   };
 };
@@ -1213,19 +1372,28 @@ const DEFAULT_SPRING = {
   restSpeed: 0.5
 };
 const MAX_DT = 1 / 30;
-const runSpring = ({ from, to, velocity = 0, config, onUpdate }) => {
+const MAX_DURATION_MS = 3e3;
+const 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);
@@ -1234,21 +1402,19 @@ const runSpring = ({ from, to, velocity = 0, config, onUpdate }) => {
       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);
       }
@@ -1261,6 +1427,11 @@ const runSpring = ({ from, to, velocity = 0, config, onUpdate }) => {
       cancelAnimationFrame(rafId);
       resolveFn?.();
     },
+    retarget: (next) => {
+      if (cancelled || finished) return;
+      target = next;
+      deadline = performance.now() + maxDuration;
+    },
     promise
   };
 };
@@ -1434,21 +1605,40 @@ class AnimationRunner {
     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) {
@@ -1458,9 +1648,12 @@ class AnimationRunner {
       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(this.getSize(), target, this.duration, this.easing);
+      const samples = this.sampleSettle(this.getSize(), target, 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 = "";
@@ -1502,7 +1695,10 @@ class AnimationRunner {
       }
     }
   }
-  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) => ({
@@ -1517,13 +1713,20 @@ class AnimationRunner {
     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());
@@ -1536,22 +1739,55 @@ class AnimationRunner {
         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() {
@@ -1605,27 +1841,51 @@ const collectFocusables = (root) => {
   return out;
 };
 const focusables = (root) => collectFocusables(root).filter((el) => !el.hasAttribute("inert") && isVisible(el) && !el.matches("[aria-hidden='true']"));
+const 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;
+};
+const FOCUS_ALLOW_ATTR = "data-bs-focus-allow";
+const composedParent = (node) => {
+  const slot = node.assignedSlot;
+  if (slot) return slot;
+  const parent = node.parentNode;
+  return parent instanceof ShadowRoot ? parent.host : parent;
+};
 const 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;
 };
-const trapStack = [];
+const isAllowedOutside = (node) => {
+  for (let n = node; n; n = composedParent(n)) {
+    if (n instanceof Element && n.hasAttribute(FOCUS_ALLOW_ATTR)) return true;
+  }
+  return false;
+};
+const deepActiveElement = () => {
+  let active = document.activeElement;
+  while (active?.shadowRoot?.activeElement) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active;
+};
+const trapStack = shared("focusTraps", () => []);
 const 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;
@@ -1636,12 +1896,13 @@ const installFocusTrap = (container, options = {}) => {
       });
       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) {
@@ -1649,6 +1910,10 @@ const 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();
@@ -1656,7 +1921,7 @@ const 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();
@@ -1667,13 +1932,13 @@ const 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);
@@ -1697,21 +1962,25 @@ const installFocusTrap = (container, options = {}) => {
     }
   };
 };
-let lockCount = 0;
-let savedStyles = null;
+const state$1 = shared("scrollLock", () => ({
+  count: 0,
+  saved: null
+}));
 const lockBodyScroll = () => {
   if (typeof document === "undefined") return () => {
   };
-  if (lockCount === 0) {
+  if (state$1.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$1.saved = saved;
     const scrollbarGap = window.innerWidth - document.documentElement.clientWidth;
     if (scrollbarGap > 0) {
       const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
@@ -1719,56 +1988,76 @@ const 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$1.count++;
   let released = false;
   return () => {
     if (released) return;
     released = true;
-    lockCount = Math.max(0, lockCount - 1);
-    if (lockCount === 0 && savedStyles) {
+    state$1.count = Math.max(0, state$1.count - 1);
+    if (state$1.count === 0 && state$1.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$1.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$1.saved = null;
     }
   };
 };
+const OWN_ROOTS = ".bs-root, .ovl-root";
+const LAYER_CLASSES = [
+  "bs-backdrop",
+  "bs-screen",
+  "bs-root",
+  "ovl-backdrop",
+  "ovl-root"
+];
+const 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
   };
 }
 class LifecycleController {
   constructor(deps, opts) {
     __publicField(this, "element");
+    __publicField(this, "isTop");
     __publicField(this, "focusTrapEnabled");
     __publicField(this, "initialFocus");
     __publicField(this, "closeOnEscape");
@@ -1782,6 +2071,7 @@ class LifecycleController {
     __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;
@@ -1802,12 +2092,17 @@ class LifecycleController {
     }
     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;
@@ -1978,10 +2273,14 @@ const 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) {
@@ -1992,6 +2291,7 @@ const 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);
@@ -2107,8 +2407,7 @@ class GestureController {
           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;
@@ -2167,6 +2466,11 @@ const readDirection = (el) => {
   }
   return "ltr";
 };
+const guessPhysicalMode = (mode) => {
+  if (mode === "start") return "left";
+  if (mode === "end") return "right";
+  return mode ?? "bottom";
+};
 const resolveMode = (mode, el) => {
   if (!isLogicalMode(mode)) return mode;
   const rtl = readDirection(el) === "rtl";
@@ -2213,22 +2517,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();
@@ -2398,17 +2704,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);
@@ -2418,10 +2725,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 = (state2) => {
+    if (typeof opts.showOn === "function") return opts.showOn(state2);
+    if (Array.isArray(opts.showOn)) return opts.showOn.includes(state2.activeId);
+    return isDock || state2.size > 0;
   };
   const applyVisibility = (next, animate) => {
     if (next === visible) return;
@@ -2468,7 +2775,8 @@ function attachAnchor(deps, opts) {
     },
     syncZ: (z) => {
       wrapper.style.zIndex = String(z);
-    }
+    },
+    reposition: place
   };
 }
 const matchesId = (def, activeId) => {
@@ -2482,12 +2790,11 @@ const 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);
@@ -2498,13 +2805,21 @@ function installScrimStages(deps, opts) {
       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 state2 = deps.getState();
+    if (state2.size === 0) {
+      return entries.find((e) => matchesId(e.def, state2.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, state2.activeId)) ?? entries.find((e) => matchesRange(e.def, state2.progress)) ?? null;
   };
   const hide = (entry, animate) => {
     entry.inFlight?.cancel();
@@ -2545,20 +2860,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;
   };
 }
 const DEFAULT_FLICK_VELOCITY = 0.65;
@@ -2592,11 +2910,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,
@@ -2671,6 +2991,7 @@ class BottomSheetCore {
     __publicField(this, "fitContentToSnap");
     __publicField(this, "settleAnimation");
     __publicField(this, "persistent");
+    __publicField(this, "keyboardInset", 0);
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
     __publicField(this, "closeOnRouteChange");
@@ -2685,6 +3006,7 @@ class BottomSheetCore {
     __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);
@@ -2692,8 +3014,13 @@ class BottomSheetCore {
     __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,
@@ -2717,6 +3044,7 @@ class BottomSheetCore {
     __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");
@@ -2724,11 +3052,7 @@ class BottomSheetCore {
     __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;
@@ -2756,7 +3080,6 @@ class BottomSheetCore {
         void this.snapTo(id);
       },
       close: () => {
-        if (!this.canDismiss()) return;
         void this.close("backdrop");
       }
     }, resolved.scrim);
@@ -2780,7 +3103,8 @@ class BottomSheetCore {
     }, resolved.animation);
     this.lifecycle = new LifecycleController({
       element: this.element,
-      close: () => this.close()
+      close: () => this.close(),
+      isTop: () => this.isTopSheet
     }, resolved.lifecycle);
     this.closeOnBack = resolved.closeOnBack;
     this.routedTo = opts.routedTo;
@@ -2805,6 +3129,7 @@ class BottomSheetCore {
     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,
@@ -2826,7 +3151,9 @@ class BottomSheetCore {
     });
     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({
@@ -2837,12 +3164,11 @@ class BottomSheetCore {
     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;
         }
@@ -2851,6 +3177,7 @@ class BottomSheetCore {
       this.teardowns.add(() => io.disconnect());
     }
     this.teardowns.add(installFitObserver({
+      element: this.element,
       handle: this.handle,
       scrollContainer: this.scrollContainer,
       hasFitSnap: () => this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"),
@@ -2863,9 +3190,7 @@ class BottomSheetCore {
     this.applyAutoAriaLabelledBy();
     this.runFeatureStage("post");
     this.warnOrphanFeatureOptions();
-    if (this.size > 0) {
-      this.handleOpen();
-    }
+    if (this.phase === "open") this.installLifecycle(true);
   }
   buildFeatureContext(autoCollapseAfter) {
     return {
@@ -2893,21 +3218,27 @@ class BottomSheetCore {
       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);
       },
@@ -2940,8 +3271,9 @@ class BottomSheetCore {
     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)
     };
   }
@@ -2993,53 +3325,49 @@ class BottomSheetCore {
   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;
+      return Promise.resolve();
     }
-    if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
-      return;
+    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 resumingOpen = this.opening;
-    const signal = this.newCycle();
-    const onExternalAbort = () => {
-      this.animation.cancel();
-      this.newCycle();
+    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(() => {
       });
@@ -3050,25 +3378,208 @@ class BottomSheetCore {
       }
       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);
+      }
+    });
   }
-  completeSnap(id, targetSize, previousSize, wasClosed, withHaptic) {
-    this.scrollCache.restore(id, previousSize, targetSize);
+  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);
+    }
+  }
+  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();
+  }
+  suspend() {
+    this.animation.cancel();
+    this.currentViewTransition?.skipTransition?.();
+    this.newCycle();
+  }
+  landNow() {
+    const transition = this.transition;
+    if (this.destroyed || !transition || this.isDraggingAny()) return;
+    this.animation.cancel();
+    this.currentViewTransition?.skipTransition?.();
+    this.newCycle();
+    this.applySize(transition.size);
+    this.land(false);
+  }
+  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;
@@ -3076,21 +3587,6 @@ class BottomSheetCore {
     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);
-  }
   async dragTo(targetSize, velocityOrOpts = 0) {
     if (this.destroyed) return;
     const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : {
@@ -3100,29 +3596,33 @@ class BottomSheetCore {
     const externalSignal = opts.signal;
     if (externalSignal?.aborted) return;
     this.newCycle();
-    const onExternalAbort = () => {
-      this.animation.cancel();
-      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);
-    if (this.destroyed || externalSignal?.aborted) return;
   }
   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;
@@ -3145,10 +3645,12 @@ class BottomSheetCore {
   }
   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;
@@ -3161,6 +3663,7 @@ class BottomSheetCore {
     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;
@@ -3176,9 +3679,12 @@ class BottomSheetCore {
     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() {
@@ -3220,13 +3726,22 @@ class BottomSheetCore {
     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));
   }
@@ -3263,7 +3778,7 @@ class BottomSheetCore {
       this.anchorHost.style.setProperty("--bs-progress", String(this.computeProgress(this.size)));
     }
     const handle = attachAnchor({
-      mode: this.mode,
+      getMode: () => this.mode,
       host: this.anchorHost,
       getState: () => ({
         activeId: this.activeId,
@@ -3297,8 +3812,8 @@ class BottomSheetCore {
       return () => {
       };
     }
-    const detachInstalled = installScrimStages({
-      mode: this.mode,
+    const stages = installScrimStages({
+      getMode: () => this.mode,
       host,
       getState: () => ({
         activeId: this.activeId,
@@ -3309,10 +3824,14 @@ class BottomSheetCore {
       isDestroyed: () => this.destroyed
     }, 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;
   }
@@ -3324,32 +3843,29 @@ class BottomSheetCore {
   }
   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;
@@ -3357,22 +3873,11 @@ class BottomSheetCore {
     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;
@@ -3392,12 +3897,16 @@ class BottomSheetCore {
     for (const host of [
       this.anchorHost,
       this.scrimParent,
-      this.rootEl
+      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 = "";
@@ -3410,7 +3919,8 @@ class BottomSheetCore {
   }
   newCycle() {
     this.allowOvershoot = false;
-    this.opening = false;
+    this.transition = null;
+    this.inFlight = null;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3431,8 +3941,9 @@ class BottomSheetCore {
     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");
@@ -3470,12 +3981,16 @@ class BottomSheetCore {
         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)
     }));
   }
@@ -3503,15 +4018,15 @@ class BottomSheetCore {
         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)
@@ -3628,32 +4143,19 @@ class BottomSheetCore {
         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");
           }
         };
@@ -3669,7 +4171,10 @@ class BottomSheetCore {
       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);
@@ -3682,7 +4187,6 @@ class BottomSheetCore {
     });
   }
   settleAfterDrag(delta, velocity, kind = "touch") {
-    const signal = this.newCycle();
     const target = this.snaps.findDragSettleTarget({
       delta,
       velocity,
@@ -3691,41 +4195,35 @@ class BottomSheetCore {
       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);
@@ -3750,7 +4248,8 @@ class BottomSheetCore {
     const offset = cap - clamped;
     const style = this.element.style;
     if (!skipTransform) style.transform = this.transformTemplate(offset);
-    const sizeChanged = this.sizeWriteSentinel.shouldWrite(clamped, this.animation.isAnimating || this.isDraggingAny() ? SIZE_WRITE_EPSILON : 0);
+    const moving = this.animation.isAnimating || this.isDraggingAny();
+    const sizeChanged = this.sizeWriteSentinel.shouldWrite(clamped, moving ? SIZE_WRITE_EPSILON : 0);
     if (sizeChanged) {
       style.setProperty("--bs-size", `${clamped}px`);
       if (this.scrimParent) {
@@ -3762,9 +4261,11 @@ class BottomSheetCore {
       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 progressChanged = this.progressWriteSentinel.shouldWrite(progress, OPACITY_WRITE_EPSILON);
+    const opacityEpsilon = moving ? OPACITY_WRITE_EPSILON : 0;
+    const progressChanged = this.progressWriteSentinel.shouldWrite(progress, opacityEpsilon);
     if (progressChanged) {
       style.setProperty("--bs-progress", String(progress));
       if (this.anchorHost) {
@@ -3773,8 +4274,9 @@ class BottomSheetCore {
       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;
@@ -3787,236 +4289,328 @@ class BottomSheetCore {
     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();
-  }
 }
-const entries = [];
-const subscribers = /* @__PURE__ */ new Set();
-let suppress = 0;
-let internalDepth = 0;
-const pendingRebrands = [];
-let listenerInstalled = false;
-let patchInstalled = false;
-let origPushState = null;
-let origReplaceState = null;
-let patchedPushState = null;
-let patchedReplaceState = null;
-const hasWindow = () => typeof window !== "undefined";
-const hasHistory = () => typeof history !== "undefined";
-const brandMarker = (surface) => ({
+const MARKER = "__bs";
+const STACK = "__bsStack";
+const DEPTH = "__bsDepth";
+const ROUTED = "__bsRouted";
+const SETTLE_TIMEOUT_MS = 1e3;
+const state = 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
+}));
+const hasHistory = () => typeof window !== "undefined" && typeof history !== "undefined";
+const plain = (value) => value !== null && typeof value === "object" && !Array.isArray(value) ? value : null;
+const depthOf = (value) => {
+  const depth = value?.[DEPTH];
+  return typeof depth === "number" ? depth : null;
+};
+const isMarker = (value) => value?.[MARKER] === true;
+const inStack = (value) => value !== null && state.stackId !== void 0 && value[STACK] === state.stackId && depthOf(value) !== null;
+const 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;
+};
+const markerFor = (surface, depth) => ({
+  ...foreignKeys(history.state),
   ...surface.markerState(),
-  __bs: true
+  [MARKER]: true,
+  [STACK]: state.stackId,
+  [DEPTH]: depth
 });
+const urlForDepth = (depth) => {
+  for (let i = depth - 1; i >= 0; i -= 1) {
+    const url = state.live[i]?.surface.url;
+    if (url !== void 0) return url;
+  }
+  return state.baseUrl;
+};
 const runInternal = (fn) => {
-  internalDepth += 1;
+  state.internal += 1;
   try {
     fn();
+    return true;
+  } catch {
+    return false;
   } finally {
-    internalDepth -= 1;
+    state.internal -= 1;
   }
 };
 const notifyRouteChange = () => {
-  const snapshot = Array.from(subscribers);
-  for (const fn of snapshot) fn();
+  for (const fn of Array.from(state.subscribers)) {
+    try {
+      fn();
+    } catch (err) {
+      queueMicrotask(() => {
+        throw err;
+      });
+    }
+  }
 };
 const ensureListener = () => {
-  if (listenerInstalled || !hasWindow()) return;
+  if (state.listening || !hasHistory()) return;
   window.addEventListener("popstate", onPopState);
-  listenerInstalled = true;
+  state.listening = true;
 };
 const maybeTeardownListener = () => {
-  if (!listenerInstalled) return;
-  if (entries.length > 0 || subscribers.size > 0 || suppress > 0) return;
-  if (hasWindow()) window.removeEventListener("popstate", onPopState);
-  listenerInstalled = false;
-};
-const 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;
-};
-const 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 (!state.listening) return;
+  if (state.live.length > 0 || state.subscribers.size > 0 || state.pending.length > 0 || state.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);
+  state.listening = false;
+};
+const settleIfIdle = () => {
+  if (state.pending.length > 0) return;
+  if (state.timer !== null) {
+    clearTimeout(state.timer);
+    state.timer = null;
+  }
+  for (const entry of state.deferred.splice(0)) pushEntry(entry);
+  for (const resolve of state.waiters.splice(0)) resolve();
+};
+const traverse = (delta, kind) => {
+  state.pending.push(kind);
+  if (state.timer !== null) clearTimeout(state.timer);
+  state.timer = setTimeout(() => {
+    state.timer = null;
+    state.pending.length = 0;
+    settleIfIdle();
     maybeTeardownListener();
-    return;
+  }, SETTLE_TIMEOUT_MS);
+  ensureListener();
+  const moved = runInternal(() => {
+    if (delta < 0) history.back();
+    else history.forward();
+  });
+  if (!moved) {
+    state.pending.pop();
+    settleIfIdle();
   }
-  target.live = false;
-  entries.splice(targetIdx, 1);
-  const settled = target;
-  void Promise.resolve(settled.surface.close()).then(() => {
-    if (settled.surface.isOpen()) restore(settled);
+};
+const newStackId = () => `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+const startStack = () => {
+  state.stackId = newStackId();
+  const current = history.state;
+  const leftover = plain(current);
+  state.baseUrl = isMarker(leftover) && leftover?.[ROUTED] !== void 0 ? void 0 : location.href;
+  if (isMarker(leftover)) return;
+  if (current !== null && current !== void 0 && !leftover) return;
+  runInternal(() => {
+    history.replaceState({
+      ...foreignKeys(current),
+      [STACK]: state.stackId,
+      [DEPTH]: 0
+    }, "", location.href);
   });
-  maybeTeardownListener();
+};
+function pushEntry(entry) {
+  const depth = state.live.length + 1;
+  if (state.live.length === 0) startStack();
+  const written = runInternal(() => {
+    history.pushState(markerFor(entry.surface, depth), "", entry.surface.url);
+  });
+  if (!written) return false;
+  state.live.push(entry);
+  state.position = depth;
+  state.knownLength = history.length;
+  state.href = location.href;
+  ensureListener();
+  return true;
 }
-function restore(entry) {
-  if (!hasWindow() || !hasHistory()) return;
-  entry.live = true;
+const enlist = (entry) => {
+  if (state.pending.length > 0) state.deferred.push(entry);
+  else pushEntry(entry);
+};
+const 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;
+  }
+  return true;
+};
+const rebrand = (depth) => {
+  const entry = state.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);
+  });
+  state.href = location.href;
+};
+const closeAbove = (depth) => {
+  const dropped = state.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(entry.surface), "", entry.surface.url);
-    } catch {
-      entry.live = false;
+      closing = entry.surface.close();
+    } catch (err) {
+      queueMicrotask(() => {
+        throw err;
+      });
     }
-  });
-  if (entry.live) {
-    entries.push(entry);
-    ensureListener();
+    void Promise.resolve(closing).then(() => {
+      if (!entry.surface.isOpen()) return;
+      const known = (e) => e.surface === entry.surface;
+      if (state.live.some(known) || state.deferred.some(known)) return;
+      enlist(entry);
+    });
   }
+};
+function onPopState(event) {
+  const kind = state.pending.shift();
+  const byUser = kind !== "pop";
+  const landed = plain(event.state);
+  const depth = depthOf(landed);
+  const from = state.position;
+  const liveBefore = state.live.length;
+  const grew = history.length > state.knownLength;
+  state.knownLength = history.length;
+  const within = inStack(landed);
+  if (within && depth !== null) {
+    state.position = depth;
+    if (depth > state.live.length) {
+      const forward = from !== null && from < depth;
+      traverse(forward ? 1 : -1, byUser ? "skip" : "pop");
+    } else if (depth < state.live.length) {
+      if (byUser) closeAbove(depth);
+    } else {
+      rebrand(depth);
+    }
+  } else if (isMarker(landed)) {
+    state.position = null;
+    traverse(-1, byUser ? "skip" : "pop");
+  } else {
+    state.position = null;
+    if (byUser && !grew && state.live.length > 0) {
+      closeAbove(state.live.length - 1);
+    }
+  }
+  const moved = location.href !== state.href;
+  state.href = location.href;
+  if (kind === void 0 && moved && (liveBefore === 0 || !within)) {
+    notifyRouteChange();
+  }
+  settleIfIdle();
+  maybeTeardownListener();
 }
 function pushBackMarker(surface) {
   const entry = {
-    surface,
-    priorUrl: void 0,
-    live: false
+    surface
   };
-  if (!hasWindow() || !hasHistory()) {
-    return entry;
-  }
-  entry.priorUrl = surface.url !== void 0 ? location.href : void 0;
-  runInternal(() => {
-    try {
-      history.pushState(brandMarker(surface), "", surface.url);
-      entry.live = true;
-    } catch {
-      entry.live = false;
-    }
-  });
-  if (entry.live) {
-    entries.push(entry);
-    ensureListener();
-  }
+  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 = state.deferred.indexOf(entry);
+  if (waiting !== -1) state.deferred.splice(waiting, 1);
+  const idx = state.live.indexOf(entry);
+  if (idx === -1) return historySettled();
+  const top = state.live.length;
+  state.live.splice(idx, 1);
+  const current = plain(history.state);
+  const onTop = isMarker(current) && inStack(current) && depthOf(current) === top;
+  if (onTop && state.pending.length === 0) {
+    traverse(-1, "pop");
+  } else {
+    state.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() || state.orphanChecked) return;
+  state.orphanChecked = true;
+  if (state.live.length > 0 || state.pending.length > 0) return;
+  if (!isMarker(plain(history.state))) return;
+  state.leftovers = true;
+  traverse(-1, "pop");
+}
+function historySettled() {
+  if (state.pending.length === 0) return Promise.resolve();
+  return new Promise((resolve) => {
+    state.waiters.push(resolve);
+  });
+}
+const wrap = (original) => function(...args) {
+  original.apply(this, args);
+  state.knownLength = history.length;
+  if (location.href === state.href) return;
+  state.href = location.href;
+  if (state.internal === 0 && state.subscribers.size > 0) {
+    notifyRouteChange();
+  }
+};
+const installPatch = () => {
+  if (!state.push || history.pushState === state.push.original) {
+    const original = history.pushState;
+    const wrapper = wrap(original);
+    history.pushState = wrapper;
+    state.push = {
+      wrapper,
+      original
+    };
+  }
+  if (!state.replace || history.replaceState === state.replace.original) {
+    const original = history.replaceState;
+    const wrapper = wrap(original);
+    history.replaceState = wrapper;
+    state.replace = {
+      wrapper,
+      original
+    };
+  }
+};
+const removePatch = () => {
+  if (state.push && history.pushState === state.push.wrapper) {
+    history.pushState = state.push.original;
+    state.push = null;
+  }
+  if (state.replace && history.replaceState === state.replace.wrapper) {
+    history.replaceState = state.replace.original;
+    state.replace = null;
+  }
+};
 function subscribeRouteChange(fn) {
-  if (!hasWindow() || !hasHistory()) return () => {
+  if (!hasHistory()) return () => {
   };
-  subscribers.add(fn);
-  if (subscribers.size === 1) installPatch();
+  state.subscribers.add(fn);
+  state.href = location.href;
+  state.knownLength = history.length;
+  installPatch();
   ensureListener();
   return () => {
-    if (!subscribers.has(fn)) return;
-    subscribers.delete(fn);
-    if (subscribers.size === 0) removePatch();
+    if (!state.subscribers.delete(fn)) return;
+    if (state.subscribers.size === 0) removePatch();
     maybeTeardownListener();
   };
 }
@@ -4030,40 +4624,41 @@ 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();
   });
 }
@@ -4093,7 +4688,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;
@@ -4126,6 +4724,9 @@ function installContentDrag(deps) {
   return () => detach?.();
 }
 const SAFETY_PAD = 8;
+const KEYBOARD_MIN_INSET = 1;
+const KEYBOARD_MIN_COVER = 60;
+const ZOOMED = 1.01;
 function installVisualViewport(deps) {
   if (typeof window === "undefined" || !window.visualViewport) {
     return () => {
@@ -4133,36 +4734,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);
   };
 }
@@ -4174,17 +4775,17 @@ function routeFeature() {
       if (ctx.options.closeOnRouteChange) {
         teardowns.add(installRouteChange({
           isDestroyed: ctx.isDestroyed,
-          getSize: ctx.getSize,
+          isOpen: () => ctx.getPhase() !== "closed",
           close: () => ctx.close()
         }));
       }
       teardowns.add(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
       }));
@@ -4211,6 +4812,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,
@@ -4238,21 +4840,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
       });
     }
   };
@@ -4407,39 +5002,68 @@ class BottomSheetEngine extends BottomSheetCore {
     });
   }
 }
-const 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);
-};
-const 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);
+const ENGINE_OPTION_KEYS = [
+  "mode",
+  "snapPoints",
+  "allowed",
+  "initial",
+  "duration",
+  "easing",
+  "respectReducedMotion",
+  "flickVelocity",
+  "dragThreshold",
+  "dragFrom",
+  "dragFromContent",
+  "fitContentToSnap",
+  "rubberBand",
+  "backdropRange",
+  "backdropOpacity",
+  "backdropColor",
+  "screenRange",
+  "scrimMode",
+  "scrimColor",
+  "scrimBlur",
+  "scrimInteractive",
+  "scrimTapToClose",
+  "scrimPreset",
+  "animation",
+  "settleAnimation",
+  "spring",
+  "focusTrap",
+  "initialFocus",
+  "closeOnEscape",
+  "lockBodyScroll",
+  "closeOnBack",
+  "routedTo",
+  "inertSiblings",
+  "persistent",
+  "disableClose",
+  "disableDrag",
+  "closeOnRouteChange",
+  "radius",
+  "maxHeight",
+  "returnFocusTo",
+  "persistKey",
+  "autoCollapseAfter",
+  "linkedSheets",
+  "viewTransitions",
+  "stackEffect",
+  "features"
+];
+const pickEngineOptions = (source) => {
+  const out = {};
+  for (const key of ENGINE_OPTION_KEYS) {
+    const value = source[key];
+    if (value !== void 0) out[key] = value;
   }
-  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 out;
+};
+const closedSnapId = (points) => points.find((point) => point.size === 0)?.id;
+const 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();
 };
 const BottomSheet = component$((props) => {
   const sheetRef = useSignal();
@@ -4451,10 +5075,12 @@ const BottomSheet = component$((props) => {
   const footerRef = useSignal();
   const leftBtnRef = useSignal();
   const rightBtnRef = useSignal();
-  const initialActive = props.initial ?? props.snapPoints[0]?.id ?? "default";
-  const state = useStore({
+  const initialSnap = props.initial ?? (props.open === false ? closedSnapId(props.snapPoints) : void 0) ?? props.snap;
+  const initialActive = initialSnap ?? props.snapPoints[0]?.id ?? "default";
+  const state2 = useStore({
     size: 0,
     activeId: initialActive,
+    phase: "closed",
     isDragging: false,
     isAnimating: false,
     progress: 0
@@ -4462,12 +5088,15 @@ const BottomSheet = component$((props) => {
   const engineStore = useStore({
     engine: void 0
   });
+  const physicalMode = useSignal(guessPhysicalMode(props.mode));
+  const restAtStart = startsClosed(props.snapPoints, initialSnap, props.allowed) ? "closed" : void 0;
   useVisibleTask$(({ cleanup }) => {
     if (!sheetRef.value) return;
     if (!handleRef.value || !contentRef.value) {
       devWarn("[BottomSheet/qwik] handle or content ref missing at attach time — drag and content-swipe disabled. Make sure ref bindings render before useVisibleTask$ fires.");
     }
     const engineOpts = {
+      ...pickEngineOptions(props),
       element: sheetRef.value,
       handle: handleRef.value,
       scrollContainer: contentRef.value,
@@ -4475,43 +5104,25 @@ const BottomSheet = component$((props) => {
       scrim: scrimRef.value,
       mode: props.mode ?? "bottom",
       snapPoints: props.snapPoints,
-      allowed: props.allowed,
-      initial: props.initial,
-      animation: props.animation,
-      spring: props.spring,
-      focusTrap: props.focusTrap,
-      closeOnEscape: props.closeOnEscape,
-      closeOnBack: props.closeOnBack,
-      lockBodyScroll: props.lockBodyScroll,
-      rubberBand: props.rubberBand,
-      backdropRange: props.backdropRange,
-      persistent: props.persistent,
-      disableClose: props.disableClose,
-      disableDrag: props.disableDrag,
-      dragFrom: props.dragFrom,
-      dragFromContent: props.dragFromContent,
-      fitContentToSnap: props.fitContentToSnap,
-      closeOnRouteChange: props.closeOnRouteChange,
-      stackEffect: props.stackEffect,
-      returnFocusTo: props.returnFocusTo,
-      radius: props.radius,
-      maxHeight: props.maxHeight
+      initial: initialSnap
     };
-    const engine = new BottomSheetEngine(engineOpts);
-    engineStore.engine = noSerialize(engine);
     const teleportTarget = props.teleport === false ? null : resolveTeleportTarget(props.teleportTo);
     const restoreTeleport = teleportTarget ? teleportElements([
       backdropRef.value,
       scrimRef.value,
       sheetRef.value
     ], teleportTarget) : null;
+    const engine = new BottomSheetEngine(engineOpts);
+    engineStore.engine = noSerialize(engine);
+    physicalMode.value = engine.getMode();
     const sync = () => {
       const s = engine.state;
-      state.size = s.size;
-      state.activeId = s.activeId;
-      state.isDragging = s.isDragging;
-      state.isAnimating = s.isAnimating;
-      state.progress = s.progress;
+      state2.size = s.size;
+      state2.activeId = s.activeId;
+      state2.isDragging = s.isDragging;
+      state2.phase = s.phase;
+      state2.isAnimating = s.isAnimating;
+      state2.progress = s.progress;
       props.onChange$?.(s);
     };
     sync();
@@ -4519,8 +5130,15 @@ const BottomSheet = component$((props) => {
       sync();
       props.onSnap$?.(payload.id);
     });
-    engine.on("open", (payload) => props.onOpen$?.(payload.id));
-    engine.on("close", () => props.onClose$?.());
+    engine.on("open", (payload) => {
+      props.onOpen$?.(payload.id);
+      props.onOpenChange$?.(true);
+    });
+    engine.on("close", () => {
+      props.onClose$?.();
+      props.onOpenChange$?.(false);
+    });
+    if (props.open !== void 0) syncOpen(engine, props.open);
     engine.on("opened", (payload) => props.onOpened$?.(payload.id));
     engine.on("closed", () => props.onClosed$?.());
     engine.on("dragstart", (payload) => {
@@ -4578,6 +5196,8 @@ const BottomSheet = component$((props) => {
       engineStore.engine = void 0;
       engine.destroy();
     });
+  }, {
+    strategy: "document-ready"
   });
   useTask$(({ track }) => {
     const points = track(() => props.snapPoints);
@@ -4610,14 +5230,25 @@ const BottomSheet = component$((props) => {
     }
     if (dragFrom !== void 0) engine.setDragFrom(dragFrom);
   });
+  useTask$(({ track }) => {
+    const open = track(() => props.open);
+    const engine = engineStore.engine;
+    if (engine && open !== void 0) syncOpen(engine, open);
+  });
+  useTask$(({ track }) => {
+    const snap = track(() => props.snap);
+    const engine = engineStore.engine;
+    if (!engine || snap === void 0 || snap === engine.state.activeId) return;
+    void engine.snapTo(snap);
+  });
   useTask$(({ track }) => {
     const nextMode = track(() => props.mode);
     const engine = engineStore.engine;
     if (!engine || nextMode === void 0) return;
     engine.setMode(nextMode);
+    physicalMode.value = engine.getMode();
   });
   const showBackdrop = props.backdrop !== false;
-  const mode = props.mode ?? "bottom";
   const ariaLabel = props.ariaLabel ?? "Bottom sheet";
   return /* @__PURE__ */ jsxs("div", {
     class: "bs-root",
@@ -4636,8 +5267,9 @@ const BottomSheet = component$((props) => {
       /* @__PURE__ */ jsxs("section", {
         class: "bs-sheet",
         ref: sheetRef,
-        "data-mode": mode,
-        "data-active": state.activeId,
+        "data-mode": physicalMode.value,
+        "data-bs-rest": restAtStart,
+        "data-active": state2.activeId,
         role: "dialog",
         "aria-modal": props.focusTrap ? "true" : void 0,
         "aria-label": ariaLabel,
@@ -4647,7 +5279,7 @@ const BottomSheet = component$((props) => {
             ref: handleRef,
             role: "slider",
             tabIndex: 0,
-            "aria-label": "Resize sheet"
+            "aria-label": props.handleLabel ?? "Resize sheet"
           }),
           /* @__PURE__ */ jsx("div", {
             class: "bs-header",
@@ -4659,6 +5291,9 @@ const BottomSheet = component$((props) => {
           /* @__PURE__ */ jsx("div", {
             class: "bs-content",
             ref: contentRef,
+            tabIndex: 0,
+            role: "region",
+            "aria-label": props.contentLabel ?? "Sheet content",
             children: /* @__PURE__ */ jsx(Slot, {})
           }),
           /* @__PURE__ */ jsx("div", {
@@ -4672,14 +5307,14 @@ const BottomSheet = component$((props) => {
             class: "bs-sr-only",
             role: "status",
             "aria-live": "polite",
-            children: state.activeId
+            children: state2.activeId
           })
         ]
       }),
       /* @__PURE__ */ jsx("div", {
         class: "bs-button-slot",
         "data-side": "left",
-        "data-mode": mode,
+        "data-mode": physicalMode.value,
         ref: leftBtnRef,
         children: /* @__PURE__ */ jsx(Slot, {
           name: "leftButton"
@@ -4688,7 +5323,7 @@ const BottomSheet = component$((props) => {
       /* @__PURE__ */ jsx("div", {
         class: "bs-button-slot",
         "data-side": "right",
-        "data-mode": mode,
+        "data-mode": physicalMode.value,
         ref: rightBtnRef,
         children: /* @__PURE__ */ jsx(Slot, {
           name: "rightButton"