@surdeddd/bottom-sheet 0.23.4 → 0.24.0

package/dist/solid.source.jsx

@@ -1,14 +1,25 @@
 // src/solid/index.tsx
 import {
+  children,
   createSignal,
   createMemo,
   createEffect,
   on,
   onCleanup,
   onMount,
-  Show
+  Show,
+  untrack
 } from "solid-js";
 
+// src/core/primitives/shared.ts
+var STORE_KEY = /* @__PURE__ */ Symbol.for("@surdeddd/bottom-sheet/shared/1");
+function shared(name, init) {
+  const host = globalThis;
+  const store = host[STORE_KEY] ??= {};
+  if (!(name in store)) store[name] = init();
+  return store[name];
+}
+
 // src/core/lifecycle/sheet-stack.ts
 var BASE_Z = 100;
 var STEP = 10;
@@ -74,7 +85,7 @@ var SheetStack = class {
     });
   }
 };
-var sheetStack = new SheetStack();
+var sheetStack = shared("stack", () => new SheetStack());
 
 // src/core/primitives/transform.ts
 function buildTransformTemplate(axis) {
@@ -93,7 +104,7 @@ var offsetFromMatrix = (axis, m) => axis === "bottom" ? m.m42 : axis === "top" ?
 var layoutAxis = (axis) => axis === "left" || axis === "right" ? "width" : "height";
 
 // src/core/primitives/instance-id.ts
-var counters = {};
+var counters = shared("instanceIds", () => ({}));
 function nextInstanceId(prefix) {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
     return `${prefix}-${crypto.randomUUID()}`;
@@ -121,7 +132,13 @@ function createEventBus() {
       const set = listeners.get(event);
       if (!set) return;
       for (const fn of [...set]) {
-        fn(payload);
+        try {
+          fn(payload);
+        } catch (err) {
+          queueMicrotask(() => {
+            throw err;
+          });
+        }
       }
     },
     listenerCount(event) {
@@ -133,8 +150,23 @@ function createEventBus() {
   };
 }
 
+// src/core/primitives/dev-warn.ts
+function devWarn(...args) {
+  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
+    console.warn(...args);
+  }
+}
+
 // src/core/primitives/css-length.ts
 var probe = null;
+var rejected = /* @__PURE__ */ new Set();
+var warnRejected = (value) => {
+  if (rejected.has(value)) return;
+  rejected.add(value);
+  devWarn(
+    `[BottomSheet] snap size "${value}" is not a CSS length the browser accepts \u2014 it resolves to 0.`
+  );
+};
 var PROBE_ATTR = "data-bs-probe";
 var ensureProbe = (axis) => {
   if (typeof document === "undefined") return null;
@@ -181,19 +213,14 @@ var resolveSnap = (point, mode, measureFit) => {
   if (!el) return 0;
   if (axis === "vertical") {
     el.style.height = point;
+    if (el.style.height === "") warnRejected(point);
     return Math.max(0, el.getBoundingClientRect().height);
   }
   el.style.width = point;
+  if (el.style.width === "") warnRejected(point);
   return Math.max(0, el.getBoundingClientRect().width);
 };
 
-// src/core/primitives/dev-warn.ts
-function devWarn(...args) {
-  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
-    console.warn(...args);
-  }
-}
-
 // src/core/primitives/snap-points.ts
 var resolveSnapList = (points, mode, measureFit) => points.map((p) => {
   const raw = resolveSnap(p.size, mode, measureFit);
@@ -205,6 +232,10 @@ var resolveSnapList = (points, mode, measureFit) => points.map((p) => {
   }
   return { id: p.id, size: raw };
 }).sort((a, b) => a.size - b.size);
+var startsClosed = (points, initial, allowed) => {
+  const id = initial ?? allowed?.[0] ?? points[0]?.id;
+  return points.find((p) => p.id === id)?.size === 0;
+};
 var VH_NOT_DVH = /(^|[^a-z])vh\b/i;
 var auditVhUsage = (points) => {
   for (const p of points) {
@@ -325,6 +356,7 @@ var SnapResolver = class {
   setMode(mode) {
     if (mode === this.mode) return;
     this.mode = mode;
+    this.notified = false;
     this.recompute();
   }
   setAllowedIds(ids) {
@@ -334,14 +366,20 @@ var SnapResolver = class {
   findById(id) {
     return findById(id, this.resolved);
   }
-  findDragSettleTarget(args) {
+  findDragSettleTarget(args, openOnly = false) {
     return findDragSettleTarget({
       ...args,
       resolved: this.resolved,
-      allowed: this.allowedIds,
+      allowed: this.pool(openOnly),
       maxAxisSize: this.maxAxisSize
     });
   }
+  nearest(size, openOnly) {
+    return findNearest(size, this.resolved, this.pool(openOnly));
+  }
+  pool(openOnly) {
+    return openOnly ? this.allowedIds.filter((id) => (this.findById(id)?.size ?? 0) > 0) : this.allowedIds;
+  }
   getAllowedRange() {
     return this.rangeCache ?? (this.rangeCache = allowedRange(this.resolved, this.allowedIds));
   }
@@ -389,19 +427,20 @@ var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
 var RANGE_DIVISION_EPSILON = 1e-4;
 
 // src/core/features/resize-observer.ts
+var seatOf = (deps) => {
+  const snap = deps.resolveActiveSnap();
+  const max = deps.getMaxAxisSize();
+  return { target: snap ? Math.min(snap.size, max) : null, max };
+};
+var sameSeat = (before, after) => before.target !== null && after.target !== null && Math.abs(after.target - before.target) < SIZE_WRITE_EPSILON && Math.abs(after.max - before.max) < SIZE_WRITE_EPSILON;
 function installResizeObserver(deps) {
   if (typeof window === "undefined") {
     return () => {
     };
   }
-  const seatFor = () => {
-    const snap = deps.resolveActiveSnap();
-    const max = deps.getMaxAxisSize();
-    return { target: snap ? Math.min(snap.size, max) : null, max };
-  };
   const onResize = () => {
     if (deps.isDestroyed()) return;
-    const before = seatFor();
+    const before = seatOf(deps);
     deps.recomputeSnaps();
     const mode = deps.getMode();
     const isVerticalAxis = mode === "bottom" || mode === "top";
@@ -410,21 +449,8 @@ function installResizeObserver(deps) {
     if (viewportSize2 > 0 && viewportSize2 < max) {
       deps.setMaxAxisSize(viewportSize2);
     }
-    const after = seatFor();
-    if (before.target !== null && after.target !== null && Math.abs(after.target - before.target) < SIZE_WRITE_EPSILON && Math.abs(after.max - before.max) < SIZE_WRITE_EPSILON) {
-      return;
-    }
-    const wasAnimating = deps.isAnimating?.() ?? false;
-    deps.cancelInFlight();
-    deps.newCycle();
-    const current = deps.resolveActiveSnap();
-    const newMax = deps.getMaxAxisSize();
-    const targetSize = current ? Math.min(current.size, newMax) : Math.min(deps.getSize(), newMax);
-    deps.setSize(targetSize);
-    if (current && !deps.isDragging()) {
-      deps.applySize(targetSize);
-      if (wasAnimating) deps.resyncAfterCancel?.();
-    }
+    if (sameSeat(before, seatOf(deps))) return;
+    deps.reseat();
   };
   let resizeObserver = null;
   if (typeof ResizeObserver !== "undefined") {
@@ -436,7 +462,7 @@ function installResizeObserver(deps) {
   window.addEventListener("orientationchange", onResize);
   const onVisibility = () => {
     if (deps.isDestroyed()) return;
-    if (document.hidden) deps.cancelInFlight();
+    if (document.hidden) deps.landNow();
   };
   document.addEventListener("visibilitychange", onVisibility);
   return () => {
@@ -461,6 +487,16 @@ var contentTargets = (scroller) => {
   }
   return out;
 };
+var chromeTargets = (deps) => {
+  const out = [];
+  for (const child of Array.from(deps.element.children)) {
+    if (child !== deps.scrollContainer) out.push(child);
+  }
+  if (deps.handle !== deps.element && !out.includes(deps.handle)) {
+    out.push(deps.handle);
+  }
+  return out;
+};
 function installFitObserver(deps) {
   if (typeof ResizeObserver === "undefined") return () => {
   };
@@ -476,7 +512,6 @@ function installFitObserver(deps) {
     });
   };
   const ro = new ResizeObserver(schedule);
-  ro.observe(deps.handle);
   const scroller = deps.scrollContainer;
   const observed = /* @__PURE__ */ new Set();
   const slots = /* @__PURE__ */ new Set();
@@ -493,7 +528,7 @@ function installFitObserver(deps) {
   };
   const resync = () => {
     trackSlots();
-    const targets = contentTargets(scroller);
+    const targets = [...chromeTargets(deps), ...contentTargets(scroller)];
     for (const el of observed) {
       if (!targets.includes(el)) {
         ro.unobserve(el);
@@ -508,13 +543,12 @@ function installFitObserver(deps) {
     }
     schedule();
   };
+  resync();
   let mo;
-  if (scroller) {
-    resync();
-    if (typeof MutationObserver !== "undefined") {
-      mo = new MutationObserver(resync);
-      mo.observe(scroller, { childList: true });
-    }
+  if (typeof MutationObserver !== "undefined") {
+    mo = new MutationObserver(resync);
+    mo.observe(deps.element, { childList: true });
+    if (scroller) mo.observe(scroller, { childList: true });
   }
   return () => {
     ro.disconnect();
@@ -526,6 +560,72 @@ function installFitObserver(deps) {
   };
 }
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var ROOT_CLASS = "bs-root";
+var homes = /* @__PURE__ */ new WeakMap();
+var homeRootOf = (root) => (root && homes.get(root)) ?? null;
+var mirrorClasses = (home, wrapper) => {
+  wrapper.className = home?.className ?? "";
+  wrapper.classList.add(ROOT_CLASS);
+};
+var teleportElements = (els, target) => {
+  const nodes = els.filter(
+    (el) => !!el && el.parentNode !== target
+  );
+  if (nodes.length === 0) return () => {
+  };
+  const home = nodes[0].closest(`.${ROOT_CLASS}`);
+  if (home && home.parentNode === target) return () => {
+  };
+  const wrapper = target.ownerDocument.createElement("div");
+  wrapper.setAttribute("data-bs-teleported", "");
+  mirrorClasses(home, wrapper);
+  let watcher = null;
+  if (home) {
+    for (const name of Array.from(home.style)) {
+      if (name.startsWith("--")) {
+        wrapper.style.setProperty(name, home.style.getPropertyValue(name));
+      }
+    }
+    homes.set(wrapper, home);
+    if (typeof MutationObserver !== "undefined") {
+      watcher = new MutationObserver(() => mirrorClasses(home, wrapper));
+      watcher.observe(home, { attributes: true, attributeFilter: ["class"] });
+    }
+  }
+  target.appendChild(wrapper);
+  const records = [];
+  for (const el of nodes) {
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    wrapper.appendChild(el);
+  }
+  return () => {
+    watcher?.disconnect();
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+    homes.delete(wrapper);
+    wrapper.parentNode?.removeChild(wrapper);
+  };
+};
+
 // src/core/features/max-height-controller.ts
 function createMaxHeightController(deps) {
   let maxHeightCap;
@@ -629,8 +729,9 @@ function installSliderKeyboard(deps) {
   const isVerticalAxis = deps.mode === "bottom" || deps.mode === "top";
   const stepUp = isVerticalAxis ? "ArrowUp" : "ArrowRight";
   const stepDown = isVerticalAxis ? "ArrowDown" : "ArrowLeft";
-  const sheetExpandsKey = deps.mode === "top" ? stepDown : stepUp;
-  const sheetCollapsesKey = deps.mode === "top" ? stepUp : stepDown;
+  const flipped = deps.mode === "top" || deps.mode === "right";
+  const sheetExpandsKey = flipped ? stepDown : stepUp;
+  const sheetCollapsesKey = flipped ? stepUp : stepDown;
   const onHandleKey = (e) => {
     if (deps.isDestroyed()) return;
     const allowed = deps.getAllowedIds();
@@ -704,11 +805,12 @@ var WriteSentinel = class {
 // src/core/primitives/overlay-position.ts
 function resolveSheetAnchoredStyle(mode, position, inset) {
   const sizeOffset = `calc(var(--bs-size, 0px) + ${inset})`;
+  const lifted = `calc(var(--bs-size, 0px) + var(--bs-keyboard-inset, 0px) + ${inset})`;
   switch (mode) {
     case "bottom":
-      if (position === "sheet-top-left") return { bottom: sizeOffset, left: inset };
-      if (position === "sheet-top-right") return { bottom: sizeOffset, right: inset };
-      return { bottom: sizeOffset, left: "50%", transform: "translateX(-50%)" };
+      if (position === "sheet-top-left") return { bottom: lifted, left: inset };
+      if (position === "sheet-top-right") return { bottom: lifted, right: inset };
+      return { bottom: lifted, left: "50%", transform: "translateX(-50%)" };
     case "top":
       if (position === "sheet-top-left") return { top: sizeOffset, left: inset };
       if (position === "sheet-top-right") return { top: sizeOffset, right: inset };
@@ -723,6 +825,13 @@ function resolveSheetAnchoredStyle(mode, position, inset) {
       return { right: sizeOffset, top: "50%", transform: "translateY(-50%)" };
   }
 }
+function resetOverlayPosition(ws) {
+  ws.top = "";
+  ws.bottom = "";
+  ws.left = "";
+  ws.right = "";
+  ws.transform = "";
+}
 function applyOverlayPosition(ws, mode, position, inset) {
   switch (position) {
     case "top-left":
@@ -783,6 +892,8 @@ function applyOverlayPosition(ws, mode, position, inset) {
 // src/core/controllers/scrim-controller.ts
 var VALID_CSS_LENGTH = /^-?\d+(?:\.\d+)?(?:px|em|rem|%)$/;
 var DEFAULT_SCRIM_DIM = "rgba(0, 0, 0, 0.4)";
+var BACKDROP_COLOR_VAR = "--bs-backdrop-color";
+var unit = (value) => Number.isFinite(value) ? Math.min(Math.max(value, 0), 1) : 1;
 var ScrimController = class {
   screenComponent;
   backdrop;
@@ -796,11 +907,13 @@ var ScrimController = class {
   scrimMode;
   backdropRange;
   screenRange;
+  backdropPeak;
   scrimEnabled = true;
   savedScrimRanges = null;
   scrimTapToCloseEnabled = false;
   detachScrimTap = null;
   scrimOverlayTeardown = null;
+  placeOverlay = null;
   backdropOpacitySentinel = new WriteSentinel();
   screenOpacitySentinel = new WriteSentinel();
   lastBackdropPointer = "";
@@ -822,6 +935,8 @@ var ScrimController = class {
     const preset = opts.scrimPreset ? SCRIM_PRESETS[opts.scrimPreset] : null;
     this.backdropRange = opts.backdropRange ?? preset?.range ?? [0, 1];
     this.screenRange = opts.screenRange ?? preset?.range ?? [0, 1];
+    this.backdropPeak = unit(opts.backdropOpacity ?? 1);
+    this.setBackdropColor(opts.backdropColor);
     this.scrimTapToCloseEnabled = opts.scrimTapToClose ?? false;
     const explicitColor = opts.scrimColor ?? preset?.color;
     const effectiveColor = explicitColor ?? (this.scrimMode !== "off" && !this.backdrop ? DEFAULT_SCRIM_DIM : void 0);
@@ -847,24 +962,19 @@ var ScrimController = class {
       this.setScrimTapToClose(true);
     }
   }
-  applyOpacity(progress, progressChanged) {
-    if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
+  applyOpacity(progress, progressChanged, epsilon = OPACITY_WRITE_EPSILON) {
+    if (epsilon > 0 && !progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
       return;
     }
     if (this.backdrop) {
       const [s, e] = this.backdropRange;
       const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
-      const backdropOpacity = Math.min(
-        Math.max((progress - s) / range, 0),
-        1
-      );
-      if (this.backdropOpacitySentinel.shouldWrite(
-        backdropOpacity,
-        OPACITY_WRITE_EPSILON
-      )) {
+      const along = Math.min(Math.max((progress - s) / range, 0), 1);
+      const backdropOpacity = along * this.backdropPeak;
+      if (this.backdropOpacitySentinel.shouldWrite(backdropOpacity, epsilon)) {
         this.backdrop.style.opacity = String(backdropOpacity);
       }
-      const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
+      const nextPointer = along > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
       if (nextPointer !== this.lastBackdropPointer) {
         this.backdrop.style.pointerEvents = nextPointer;
         this.lastBackdropPointer = nextPointer;
@@ -879,10 +989,7 @@ var ScrimController = class {
           (progress - ss) / Math.max(RANGE_DIVISION_EPSILON, se - ss)
         )
       );
-      if (this.screenOpacitySentinel.shouldWrite(
-        screenOpacity,
-        OPACITY_WRITE_EPSILON
-      )) {
+      if (this.screenOpacitySentinel.shouldWrite(screenOpacity, epsilon)) {
         this.screenComponent.style.opacity = String(screenOpacity);
       }
       const nextDisplay = screenOpacity > 0 ? "" : "none";
@@ -898,6 +1005,17 @@ var ScrimController = class {
     this.invalidateOpacityCache();
     applySize();
   }
+  setBackdropColor(color) {
+    if (this.isDestroyed() || !this.backdrop) return;
+    if (color) this.backdrop.style.setProperty(BACKDROP_COLOR_VAR, color);
+    else this.backdrop.style.removeProperty(BACKDROP_COLOR_VAR);
+  }
+  setBackdropOpacity(value, applySize) {
+    if (this.isDestroyed()) return;
+    this.backdropPeak = unit(value);
+    this.invalidateOpacityCache();
+    applySize();
+  }
   setScreenRange(range, applySize) {
     if (this.isDestroyed()) return;
     this.screenRange = range;
@@ -920,6 +1038,8 @@ var ScrimController = class {
     if (this.isDestroyed() || mode === this.mode) return;
     this.mode = mode;
     this.invalidateOpacityCache();
+    if (this.scrimMode === "above-sheet") this.applyAboveSheetInset();
+    this.placeOverlay?.();
   }
   setScrimMode(mode, applySize) {
     if (this.isDestroyed()) return;
@@ -932,7 +1052,7 @@ var ScrimController = class {
       if (previous === "above-sheet" && mode !== "above-sheet") {
         s.position = "";
         s.inset = "";
-        s.pointerEvents = "";
+        this.syncPointer();
       }
       if (mode === "above-sheet") {
         this.applyAboveSheetInset();
@@ -957,9 +1077,6 @@ var ScrimController = class {
     if (enabled === installed) return;
     if (enabled) {
       const target = this.screenComponent;
-      if (target.style.pointerEvents === "none") {
-        target.style.pointerEvents = "auto";
-      }
       const onClick = () => {
         if (this.isDestroyed()) return;
         if (this.closeFn) {
@@ -982,6 +1099,11 @@ var ScrimController = class {
       this.detachScrimTap = null;
       this.scrimTapToCloseEnabled = false;
     }
+    this.syncPointer();
+  }
+  syncPointer() {
+    if (!this.screenComponent) return;
+    this.screenComponent.style.pointerEvents = this.scrimInteractive || this.detachScrimTap ? "auto" : "none";
   }
   setScrimEnabled(enabled, applySize) {
     if (this.isDestroyed()) return;
@@ -1065,8 +1187,12 @@ var ScrimController = class {
     const wrapper = screen.ownerDocument.createElement("div");
     wrapper.className = "bs-scrim-overlay";
     const ws = wrapper.style;
-    ws.position = "absolute";
-    applyOverlayPosition(ws, this.mode, position, inset);
+    ws.position = "fixed";
+    const place = () => {
+      resetOverlayPosition(ws);
+      applyOverlayPosition(ws, this.mode, position, inset);
+    };
+    place();
     if (interactive) {
       ws.pointerEvents = "auto";
     }
@@ -1080,8 +1206,10 @@ var ScrimController = class {
       };
     }
     host.appendChild(wrapper);
+    this.placeOverlay = place;
     const teardown = () => {
       if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
+      if (this.placeOverlay === place) this.placeOverlay = null;
       if (this.scrimOverlayTeardown === teardown) {
         this.scrimOverlayTeardown = null;
       }
@@ -1105,6 +1233,7 @@ var ScrimController = class {
     if (this.backdrop) {
       this.backdrop.style.opacity = "";
       this.backdrop.style.pointerEvents = "";
+      this.backdrop.style.removeProperty(BACKDROP_COLOR_VAR);
     }
     this.invalidateOpacityCache();
     this.lastBackdropPointer = "";
@@ -1129,13 +1258,13 @@ var ScrimController = class {
     }
     if (opts.interactive !== void 0) {
       this.scrimInteractive = opts.interactive;
-      s.pointerEvents = opts.interactive ? "auto" : "none";
+      this.syncPointer();
     }
   }
   applyAboveSheetInset() {
     if (!this.screenComponent) return;
     const insetByMode = {
-      bottom: "0 0 var(--bs-size) 0",
+      bottom: "0 0 calc(var(--bs-size) + var(--bs-keyboard-inset, 0px)) 0",
       top: "var(--bs-size) 0 0 0",
       left: "0 0 0 var(--bs-size)",
       right: "0 var(--bs-size) 0 0"
@@ -1143,7 +1272,7 @@ var ScrimController = class {
     const s = this.screenComponent.style;
     s.position = "fixed";
     s.inset = insetByMode[this.mode];
-    s.pointerEvents = this.scrimInteractive || this.scrimTapToCloseEnabled ? "auto" : "none";
+    this.syncPointer();
   }
 };
 
@@ -1156,6 +1285,7 @@ var easeOutBack = (t) => {
 var easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
 var easeLinear = (t) => t;
 var easeOutQuint = (t) => 1 - Math.pow(1 - t, 5);
+var MIN_RETARGET_MS = 120;
 var tween = ({
   from,
   to,
@@ -1164,12 +1294,18 @@ var tween = ({
   onUpdate
 }) => {
   let cancelled = false;
+  let finished = false;
   let rafId = 0;
   let resolveFn = null;
-  const start = performance.now();
+  let start = performance.now();
+  let origin = from;
+  let target = to;
+  let span = duration;
+  let last = from;
   const promise = new Promise((resolve) => {
     resolveFn = resolve;
     if (duration <= 0) {
+      finished = true;
       onUpdate(to);
       resolve();
       return;
@@ -1177,12 +1313,13 @@ var tween = ({
     const step = (now) => {
       if (cancelled) return;
       const elapsed = Math.max(0, now - start);
-      const t = Math.min(elapsed / duration, 1);
-      const value = from + (to - from) * easing(t);
-      onUpdate(value);
+      const t = Math.min(elapsed / span, 1);
+      last = origin + (target - origin) * easing(t);
+      onUpdate(last);
       if (t < 1) {
         rafId = requestAnimationFrame(step);
       } else {
+        finished = true;
         resolve();
       }
     };
@@ -1194,6 +1331,15 @@ var tween = ({
       cancelAnimationFrame(rafId);
       resolveFn?.();
     },
+    retarget: (next) => {
+      if (cancelled || finished || next === target) return;
+      const now = performance.now();
+      const remaining = span - Math.max(0, now - start);
+      origin = last;
+      target = next;
+      start = now;
+      span = Math.max(remaining, MIN_RETARGET_MS);
+    },
     promise
   };
 };
@@ -1211,22 +1357,32 @@ var DEFAULT_SPRING = {
   restSpeed: 0.5
 };
 var MAX_DT = 1 / 30;
+var MAX_DURATION_MS = 3e3;
 var runSpring = ({
   from,
   to,
   velocity = 0,
   config,
+  maxDuration = MAX_DURATION_MS,
   onUpdate
 }) => {
   const cfg = { ...DEFAULT_SPRING, ...config };
   let cancelled = false;
+  let finished = false;
   let rafId = 0;
   let resolveFn = null;
   let x = from;
   let v = velocity;
+  let target = to;
   let lastTime = performance.now();
+  let deadline = lastTime + maxDuration;
   const promise = new Promise((resolve) => {
     resolveFn = resolve;
+    const land = () => {
+      finished = true;
+      onUpdate(target, 0);
+      resolve();
+    };
     const step = (now) => {
       if (cancelled) return;
       const dt = Math.min(Math.max(0, now - lastTime) / 1e3, MAX_DT);
@@ -1235,21 +1391,19 @@ var runSpring = ({
       const subDt = dt / steps;
       let stepsLeft = steps;
       while (stepsLeft-- > 0) {
-        const force = -cfg.stiffness * (x - to) - cfg.damping * v;
+        const force = -cfg.stiffness * (x - target) - cfg.damping * v;
         const accel = force / cfg.mass;
         v += accel * subDt;
         x += v * subDt;
       }
-      if (!Number.isFinite(x) || !Number.isFinite(v)) {
-        onUpdate(to, 0);
-        resolve();
+      if (!Number.isFinite(x) || !Number.isFinite(v) || lastTime >= deadline) {
+        land();
         return;
       }
       onUpdate(x, v);
-      const isAtRest = Math.abs(to - x) < (cfg.restDelta ?? 0.5) && Math.abs(v) < (cfg.restSpeed ?? 0.5);
+      const isAtRest = Math.abs(target - x) < (cfg.restDelta ?? 0.5) && Math.abs(v) < (cfg.restSpeed ?? 0.5);
       if (isAtRest) {
-        onUpdate(to, 0);
-        resolve();
+        land();
       } else {
         rafId = requestAnimationFrame(step);
       }
@@ -1262,6 +1416,11 @@ var runSpring = ({
       cancelAnimationFrame(rafId);
       resolveFn?.();
     },
+    retarget: (next) => {
+      if (cancelled || finished) return;
+      target = next;
+      deadline = performance.now() + maxDuration;
+    },
     promise
   };
 };
@@ -1413,21 +1572,40 @@ var AnimationRunner = class {
     this.applySizeFn(size);
   }
   cancel() {
-    this.currentTween?.cancel();
-    this.currentSpring?.cancel();
+    const tween2 = this.currentTween;
+    const spring = this.currentSpring;
+    this.currentTween = null;
+    this.currentSpring = null;
+    tween2?.cancel();
+    spring?.cancel();
     this.cancelWaapi();
   }
+  retarget(target) {
+    if (this.currentSpring) {
+      this.currentSpring.retarget(target);
+      return true;
+    }
+    if (this.currentTween) {
+      this.currentTween.retarget(target);
+      return true;
+    }
+    if (this.currentWaapi) {
+      this.currentWaapi.retarget(target);
+      return true;
+    }
+    return false;
+  }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
-      if (!this.isAnimating && !this.isDragging()) {
+      if (this.isAnimating) this.cancel();
+      if (!this.isDragging()) {
         this.applySizeFn(target);
+        this.getRootEl()?.removeAttribute("data-animating");
         this.element.style.willChange = "";
       }
       return;
     }
-    this.currentTween?.cancel();
-    this.currentSpring?.cancel();
-    this.cancelWaapi();
+    this.cancel();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -1437,19 +1615,13 @@ var AnimationRunner = class {
       return;
     }
     if (this.settleWaapi && this.applyAux && this.getTransformFor && typeof this.element.animate === "function") {
-      const samples = this.animationKind === "spring" ? sampleSpringSettle(
-        this.getSize(),
-        target,
-        velocityPxPerMs * VELOCITY_PX_PER_S,
-        this.springConfig
-      ) : sampleTweenSettle(
+      const samples = this.sampleSettle(
         this.getSize(),
         target,
-        this.duration,
-        this.easing
+        velocityPxPerMs * VELOCITY_PX_PER_S
       );
       if (samples.values.length >= 2 && samples.durationMs > 0) {
-        await this.runWaapiSettle(samples, target);
+        await this.runWaapiSettle({ samples, target });
         if (!this.isAnimating) {
           this.getRootEl()?.removeAttribute("data-animating");
           if (!this.isDragging()) this.element.style.willChange = "";
@@ -1491,7 +1663,10 @@ var AnimationRunner = class {
       }
     }
   }
-  async runWaapiSettle(samples, target) {
+  sampleSettle(from, to, velocityPxPerS) {
+    return this.animationKind === "spring" ? sampleSpringSettle(from, to, velocityPxPerS, this.springConfig) : sampleTweenSettle(from, to, this.duration, this.easing);
+  }
+  startWaapiLeg(samples, onRetarget) {
     const applyAux = this.applyAux;
     const getTransformFor = this.getTransformFor;
     const frames = samples.values.map((v) => ({
@@ -1506,16 +1681,20 @@ var AnimationRunner = class {
     let stopped = false;
     let auxRaf = 0;
     const lastIdx = samples.values.length - 1;
+    const cursor = () => Math.min((Number(anim.currentTime) || 0) / samples.stepMs, lastIdx);
     const sizeNow = () => {
-      const at = Math.min(
-        (Number(anim.currentTime) || 0) / samples.stepMs,
-        lastIdx
-      );
+      const at = cursor();
       const idx = Math.floor(at);
       const from = samples.values[idx];
       const to = samples.values[Math.min(idx + 1, lastIdx)];
       return from + (to - from) * (at - idx);
     };
+    const velocityNow = () => {
+      const idx = Math.min(Math.floor(cursor()), Math.max(lastIdx - 1, 0));
+      const from = samples.values[idx];
+      const to = samples.values[Math.min(idx + 1, lastIdx)];
+      return (to - from) / samples.stepMs * 1e3;
+    };
     const auxTick = () => {
       if (stopped) return;
       applyAux(sizeNow());
@@ -1528,22 +1707,55 @@ var AnimationRunner = class {
         stopped = true;
         cancelAnimationFrame(auxRaf);
       },
-      sizeNow
+      sizeNow,
+      velocityNow,
+      retarget: (to) => onRetarget(entry, to)
     };
-    this.currentWaapi = entry;
-    try {
-      await anim.finished;
-    } catch {
-    }
-    entry.stop();
-    const wasCurrent = this.currentWaapi === entry;
-    if (wasCurrent) this.currentWaapi = null;
-    if (wasCurrent && anim.playState === "finished") {
-      this.applySizeFn(target);
+    return entry;
+  }
+  async runWaapiSettle(first) {
+    let leg = first;
+    for (; ; ) {
+      let queued = null;
+      const entry = this.startWaapiLeg(leg.samples, (running, to) => {
+        const size = this.readShownSize?.() ?? running.sizeNow();
+        queued = {
+          samples: this.sampleSettle(size, to, running.velocityNow()),
+          target: to
+        };
+        running.stop();
+        try {
+          running.anim.cancel();
+        } catch {
+        }
+        this.applySizeFn(size);
+      });
+      this.currentWaapi = entry;
       try {
-        anim.cancel();
+        await entry.anim.finished;
       } catch {
       }
+      entry.stop();
+      const wasCurrent = this.currentWaapi === entry;
+      const next = queued;
+      if (wasCurrent && next) {
+        if (next.samples.values.length >= 2 && next.samples.durationMs > 0) {
+          leg = next;
+          continue;
+        }
+        this.currentWaapi = null;
+        this.applySizeFn(next.target);
+        return;
+      }
+      if (wasCurrent) this.currentWaapi = null;
+      if (wasCurrent && entry.anim.playState === "finished") {
+        this.applySizeFn(leg.target);
+        try {
+          entry.anim.cancel();
+        } catch {
+        }
+      }
+      return;
     }
   }
   destroy() {
@@ -1598,27 +1810,51 @@ var collectFocusables = (root) => {
 var focusables = (root) => collectFocusables(root).filter(
   (el) => !el.hasAttribute("inert") && isVisible(el) && !el.matches("[aria-hidden='true']")
 );
+var findDeep = (root, selector) => {
+  const direct = root.querySelector(selector);
+  if (direct || typeof HTMLSlotElement === "undefined") return direct;
+  for (const slot of Array.from(root.querySelectorAll("slot"))) {
+    for (const assigned of slot.assignedElements()) {
+      if (assigned.matches(selector)) return assigned;
+      const inner = findDeep(assigned, selector);
+      if (inner) return inner;
+    }
+  }
+  return null;
+};
+var FOCUS_ALLOW_ATTR = "data-bs-focus-allow";
+var composedParent = (node) => {
+  const slot = node.assignedSlot;
+  if (slot) return slot;
+  const parent = node.parentNode;
+  return parent instanceof ShadowRoot ? parent.host : parent;
+};
 var containsComposed = (container, node) => {
-  let n = node;
-  while (n) {
+  for (let n = node; n; n = composedParent(n)) {
     if (n === container) return true;
-    const slot = n.assignedSlot;
-    if (slot) {
-      n = slot;
-      continue;
-    }
-    const parent = n.parentNode;
-    n = parent instanceof ShadowRoot ? parent.host : parent;
   }
   return false;
 };
-var trapStack = [];
+var isAllowedOutside = (node) => {
+  for (let n = node; n; n = composedParent(n)) {
+    if (n instanceof Element && n.hasAttribute(FOCUS_ALLOW_ATTR)) return true;
+  }
+  return false;
+};
+var deepActiveElement = () => {
+  let active = document.activeElement;
+  while (active?.shadowRoot?.activeElement) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active;
+};
+var trapStack = shared("focusTraps", () => []);
 var installFocusTrap = (container, options = {}) => {
   if (typeof document === "undefined") return () => {
   };
   const token = {};
-  trapStack.push(token);
-  const isActive = () => trapStack[trapStack.length - 1] === token;
+  if (!options.isActive) trapStack.push(token);
+  const isActive = options.isActive ?? (() => trapStack[trapStack.length - 1] === token);
   const previouslyFocused = document.activeElement;
   const focusInitial = () => {
     const spec = options.initialFocus;
@@ -1627,10 +1863,11 @@ var installFocusTrap = (container, options = {}) => {
       container.focus({ preventScroll: true });
       return;
     }
-    const initial = typeof spec === "string" ? container.querySelector(spec) : spec ?? focusables(container)[0] ?? container;
+    const initial = typeof spec === "string" ? findDeep(container, spec) : spec ?? focusables(container)[0] ?? container;
     initial?.focus({ preventScroll: true });
   };
-  focusInitial();
+  if (!containsComposed(container, deepActiveElement())) focusInitial();
+  let backwards = false;
   const handleKey = (e) => {
     if (!isActive()) return;
     if (e.key === "Escape" && options.onEscape) {
@@ -1638,6 +1875,10 @@ var installFocusTrap = (container, options = {}) => {
       return;
     }
     if (e.key !== "Tab") return;
+    backwards = e.shiftKey;
+    setTimeout(() => {
+      backwards = false;
+    }, 0);
     const list = focusables(container);
     if (list.length === 0) {
       e.preventDefault();
@@ -1645,7 +1886,7 @@ var installFocusTrap = (container, options = {}) => {
     }
     const first = list[0];
     const last = list[list.length - 1];
-    const active = document.activeElement;
+    const active = deepActiveElement();
     if (e.shiftKey && active === first) {
       e.preventDefault();
       last.focus();
@@ -1656,11 +1897,11 @@ var installFocusTrap = (container, options = {}) => {
   };
   const handleFocusIn = (e) => {
     if (!isActive()) return;
-    const target = e.target;
-    if (target && !containsComposed(container, target)) {
-      const list = focusables(container);
-      list[0]?.focus({ preventScroll: true });
-    }
+    const target = e.composedPath()[0] ?? e.target;
+    if (!target || containsComposed(container, target)) return;
+    if (isAllowedOutside(target)) return;
+    const list = focusables(container);
+    list[backwards ? list.length - 1 : 0]?.focus({ preventScroll: true });
   };
   document.addEventListener("keydown", handleKey, true);
   document.addEventListener("focusin", handleFocusIn, true);
@@ -1682,21 +1923,25 @@ var installFocusTrap = (container, options = {}) => {
 };
 
 // src/core/lifecycle/scroll-lock.ts
-var lockCount = 0;
-var savedStyles = null;
+var state = shared("scrollLock", () => ({
+  count: 0,
+  saved: null
+}));
 var lockBodyScroll = () => {
   if (typeof document === "undefined") return () => {
   };
-  if (lockCount === 0) {
+  if (state.count === 0) {
     const body = document.body;
-    savedStyles = {
+    const saved = {
       overflow: body.style.overflow,
       position: body.style.position,
       top: body.style.top,
       width: body.style.width,
       paddingRight: body.style.paddingRight,
+      scrollX: window.scrollX,
       scrollY: window.scrollY
     };
+    state.saved = saved;
     const scrollbarGap = window.innerWidth - document.documentElement.clientWidth;
     if (scrollbarGap > 0) {
       const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
@@ -1704,59 +1949,79 @@ var lockBodyScroll = () => {
     }
     body.style.overflow = "hidden";
     body.style.position = "fixed";
-    body.style.top = `-${savedStyles.scrollY}px`;
+    body.style.top = `-${saved.scrollY}px`;
     body.style.width = "100%";
   }
-  lockCount++;
+  state.count++;
   let released = false;
   return () => {
     if (released) return;
     released = true;
-    lockCount = Math.max(0, lockCount - 1);
-    if (lockCount === 0 && savedStyles) {
+    state.count = Math.max(0, state.count - 1);
+    if (state.count === 0 && state.saved) {
       const body = document.body;
-      body.style.overflow = savedStyles.overflow;
-      body.style.position = savedStyles.position;
-      body.style.top = savedStyles.top;
-      body.style.width = savedStyles.width;
-      body.style.paddingRight = savedStyles.paddingRight;
-      window.scrollTo(0, savedStyles.scrollY);
-      savedStyles = null;
+      const saved = state.saved;
+      body.style.overflow = saved.overflow;
+      body.style.position = saved.position;
+      body.style.top = saved.top;
+      body.style.width = saved.width;
+      body.style.paddingRight = saved.paddingRight;
+      window.scrollTo({
+        top: saved.scrollY,
+        left: saved.scrollX,
+        behavior: "instant"
+      });
+      state.saved = null;
     }
   };
 };
 
 // src/core/features/inert-siblings.ts
+var OWN_ROOTS = ".bs-root, .ovl-root";
+var LAYER_CLASSES = [
+  "bs-backdrop",
+  "bs-screen",
+  "bs-root",
+  "ovl-backdrop",
+  "ovl-root"
+];
+var isLayer = (el) => LAYER_CLASSES.some((name) => el.classList.contains(name));
 function createInertSiblings(rootProvider) {
   const tracked = [];
+  const remove = () => {
+    for (const el of tracked) el.removeAttribute("inert");
+    tracked.length = 0;
+  };
   return {
     apply() {
       if (typeof document === "undefined") return;
-      let top = rootProvider();
-      while (top.parentElement && top.parentElement !== document.body) {
-        top = top.parentElement;
-      }
-      const parent = top.parentElement ?? document.body;
-      for (const child of Array.from(parent.children)) {
-        if (child === top) continue;
-        if (child.hasAttribute("inert")) continue;
-        if (child.classList.contains("bs-backdrop") || child.classList.contains("bs-screen") || child.classList.contains("bs-root")) {
+      remove();
+      const surface = rootProvider();
+      let node = surface.closest(OWN_ROOTS) ?? surface;
+      while (node && node !== document.body) {
+        const parent = node.parentElement;
+        if (!parent) {
+          const root = node.getRootNode();
+          node = typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot ? root.host : null;
           continue;
         }
-        child.setAttribute("inert", "");
-        tracked.push(child);
+        for (const sibling of Array.from(parent.children)) {
+          if (sibling === node) continue;
+          if (sibling.hasAttribute("inert") || isLayer(sibling)) continue;
+          sibling.setAttribute("inert", "");
+          tracked.push(sibling);
+        }
+        node = parent;
       }
     },
-    remove() {
-      for (const el of tracked) el.removeAttribute("inert");
-      tracked.length = 0;
-    }
+    remove
   };
 }
 
 // src/core/controllers/lifecycle-controller.ts
 var LifecycleController = class {
   element;
+  isTop;
   focusTrapEnabled;
   initialFocus;
   closeOnEscape;
@@ -1774,6 +2039,7 @@ var LifecycleController = class {
   }
   constructor(deps, opts) {
     this.element = deps.element;
+    this.isTop = deps.isTop;
     this.focusTrapEnabled = opts.focusTrap ?? false;
     this.initialFocus = opts.initialFocus;
     this.closeOnEscape = opts.closeOnEscape ?? true;
@@ -1791,12 +2057,17 @@ var LifecycleController = class {
     }
     if (this.focusTrapEnabled && !this.releaseFocusTrap) {
       this.releaseFocusTrap = installFocusTrap(this.element, {
-        initialFocus: this.initialFocus
+        initialFocus: this.initialFocus,
+        isActive: this.isTop
       });
     }
-    if (this.inertSiblingsEnabled && this.shouldApplyInertSiblings()) {
-      this.inertSiblings.apply();
-    }
+    this.syncTop();
+  }
+  syncTop() {
+    if (!this.installed || !this.inertSiblingsEnabled) return;
+    if (!this.shouldApplyInertSiblings()) return;
+    if (this.isTop?.() ?? true) this.inertSiblings.apply();
+    else this.inertSiblings.remove();
   }
   setReturnFocus(target) {
     if (this.destroyed) return;
@@ -1966,10 +2237,14 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
     if (wasPending) return;
     callbacks.onCancel?.();
   };
+  const onLostCapture = (e) => {
+    if (e.target === handle) onPointerCancel(e);
+  };
   handle.addEventListener("pointerdown", onPointerDown);
   handle.addEventListener("pointermove", onPointerMove);
   handle.addEventListener("pointerup", finishGesture);
   handle.addEventListener("pointercancel", onPointerCancel);
+  handle.addEventListener("lostpointercapture", onLostCapture);
   const managesTouchAction = options.manageTouchAction !== false;
   const prevTouchAction = handle.style.touchAction;
   if (managesTouchAction) {
@@ -1980,6 +2255,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
     handle.removeEventListener("pointermove", onPointerMove);
     handle.removeEventListener("pointerup", finishGesture);
     handle.removeEventListener("pointercancel", onPointerCancel);
+    handle.removeEventListener("lostpointercapture", onLostCapture);
     if (managesTouchAction) handle.style.touchAction = prevTouchAction;
     if (activePointerId !== null && handle.hasPointerCapture(activePointerId)) {
       handle.releasePointerCapture(activePointerId);
@@ -2096,8 +2372,7 @@ var GestureController = class {
           size: this.deps.getDragContext().size,
           velocity: 0
         });
-        const restoreTo = this.dragStartSize;
-        void this.deps.animateTo(restoreTo, 0);
+        this.deps.restoreAfterDrag();
       }
     }, this.deps.gestureOptions);
     return this.detach;
@@ -2162,6 +2437,11 @@ var readDirection = (el) => {
   }
   return "ltr";
 };
+var guessPhysicalMode = (mode) => {
+  if (mode === "start") return "left";
+  if (mode === "end") return "right";
+  return mode ?? "bottom";
+};
 var resolveMode = (mode, el) => {
   if (!isLogicalMode(mode)) return mode;
   const rtl = readDirection(el) === "rtl";
@@ -2215,22 +2495,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();
@@ -2344,17 +2626,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);
@@ -2364,10 +2647,10 @@ function attachAnchor(deps, opts) {
   deps.host.appendChild(wrapper);
   let visible = null;
   let inFlight = null;
-  const shouldShow = (state) => {
-    if (typeof opts.showOn === "function") return opts.showOn(state);
-    if (Array.isArray(opts.showOn)) return opts.showOn.includes(state.activeId);
-    return isDock || state.size > 0;
+  const shouldShow = (state3) => {
+    if (typeof opts.showOn === "function") return opts.showOn(state3);
+    if (Array.isArray(opts.showOn)) return opts.showOn.includes(state3.activeId);
+    return isDock || state3.size > 0;
   };
   const applyVisibility = (next, animate) => {
     if (next === visible) return;
@@ -2414,7 +2697,8 @@ function attachAnchor(deps, opts) {
     },
     syncZ: (z) => {
       wrapper.style.zIndex = String(z);
-    }
+    },
+    reposition: place
   };
 }
 
@@ -2430,30 +2714,37 @@ var matchesRange = (def, progress) => {
 };
 function installScrimStages(deps, opts) {
   const doc = deps.host.ownerDocument;
-  const entries2 = opts.stages.map((def) => {
+  const entries = opts.stages.map((def) => {
     const wrapper = doc.createElement("div");
     wrapper.className = "bs-scrim-stage";
     const ws = wrapper.style;
-    ws.position = "absolute";
-    applyOverlayPosition(
-      ws,
-      deps.mode,
-      def.position ?? opts.position ?? "center",
-      def.inset ?? opts.inset ?? "16px"
-    );
+    ws.position = "fixed";
     ws.visibility = "hidden";
     ws.pointerEvents = "none";
     wrapper.appendChild(def.element);
     deps.host.appendChild(wrapper);
     return { def, wrapper, inFlight: null };
   });
+  const place = () => {
+    for (const entry of entries) {
+      const ws = entry.wrapper.style;
+      resetOverlayPosition(ws);
+      applyOverlayPosition(
+        ws,
+        deps.getMode(),
+        entry.def.position ?? opts.position ?? "center",
+        entry.def.inset ?? opts.inset ?? "16px"
+      );
+    }
+  };
+  place();
   let active = null;
   const resolveActive = () => {
-    const state = deps.getState();
-    if (state.size === 0) {
-      return entries2.find((e) => matchesId(e.def, state.activeId)) ?? null;
+    const state3 = deps.getState();
+    if (state3.size === 0) {
+      return entries.find((e) => matchesId(e.def, state3.activeId)) ?? null;
     }
-    return entries2.find((e) => matchesId(e.def, state.activeId)) ?? entries2.find((e) => matchesRange(e.def, state.progress)) ?? null;
+    return entries.find((e) => matchesId(e.def, state3.activeId)) ?? entries.find((e) => matchesRange(e.def, state3.progress)) ?? null;
   };
   const hide = (entry, animate) => {
     entry.inFlight?.cancel();
@@ -2502,20 +2793,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;
   };
 }
 
@@ -2551,11 +2845,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,
@@ -2631,6 +2927,7 @@ var BottomSheetCore = class {
   fitContentToSnap;
   settleAnimation;
   persistent;
+  keyboardInset = 0;
   disableCloseFlag;
   disableDragFlag;
   closeOnRouteChange;
@@ -2645,6 +2942,7 @@ var BottomSheetCore = class {
   detachSheetGesture = null;
   detachSliderKeyboard = null;
   rootEl = null;
+  homeRoot = null;
   destroyed = false;
   restClosed = false;
   currentViewTransition = null;
@@ -2652,8 +2950,13 @@ var BottomSheetCore = class {
   sizeWriteSentinel = new WriteSentinel();
   progressWriteSentinel = new WriteSentinel();
   isTopSheet = true;
-  opening = false;
-  promotedForOpen = false;
+  phase = "closed";
+  transition = null;
+  inFlight = null;
+  outbox = [];
+  flushing = false;
+  openPending = false;
+  settleHolds = [];
   allowOvershoot = false;
   progressPayload = {
     value: 0,
@@ -2674,6 +2977,7 @@ var BottomSheetCore = class {
   anchorHost = null;
   stackZ = 100;
   detachScrimStages = null;
+  placeScrimStages = null;
   stackEffectEnabled = false;
   stackEffectPrimed = false;
   fitDeps;
@@ -2682,13 +2986,7 @@ var BottomSheetCore = class {
   featureCtx;
   constructor(opts) {
     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;
@@ -2717,7 +3015,6 @@ var BottomSheetCore = class {
           void this.snapTo(id);
         },
         close: () => {
-          if (!this.canDismiss()) return;
           void this.close("backdrop");
         }
       },
@@ -2747,7 +3044,8 @@ var BottomSheetCore = class {
     this.lifecycle = new LifecycleController(
       {
         element: this.element,
-        close: () => this.close()
+        close: () => this.close(),
+        isTop: () => this.isTopSheet
       },
       resolved.lifecycle
     );
@@ -2774,6 +3072,7 @@ var BottomSheetCore = class {
     auditVhUsage(this.snapPointsRaw);
     this.auditDuplicateSnapIds(this.snapPointsRaw);
     this.rootEl = this.element.closest(".bs-root");
+    this.homeRoot = homeRootOf(this.rootEl);
     this.maxHeightDeps = {
       element: this.element,
       mode: this.mode,
@@ -2801,7 +3100,9 @@ var BottomSheetCore = class {
     );
     const initial = this.snaps.findById(this.activeId);
     if (initial) this.size = initial.size;
+    this.phase = this.size > 0 ? "open" : "closed";
     this.applySize(this.size);
+    this.restClosed = this.element.getAttribute("data-bs-rest") === "closed";
     this.setRestClosed(this.size === 0);
     this.updateAriaSlider();
     this.scrollCache = createScrollCache({
@@ -2812,12 +3113,11 @@ var BottomSheetCore = class {
     this.attach();
     this.registerInStack();
     if (this.snaps.getMaxAxisSize() === 0 && typeof IntersectionObserver !== "undefined" && typeof document !== "undefined") {
-      const io = new IntersectionObserver((entries2) => {
-        for (const entry of entries2) {
+      const io = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
           if (!entry.isIntersecting) continue;
           if (this.destroyed) return;
-          this.snaps.recompute();
-          this.healActiveSnap();
+          this.recompute();
           io.disconnect();
           return;
         }
@@ -2827,6 +3127,7 @@ var BottomSheetCore = class {
     }
     this.teardowns.add(
       installFitObserver({
+        element: this.element,
         handle: this.handle,
         scrollContainer: this.scrollContainer,
         hasFitSnap: () => this.snapPointsRaw.some(
@@ -2842,9 +3143,7 @@ var BottomSheetCore = class {
     this.applyAutoAriaLabelledBy();
     this.runFeatureStage("post");
     this.warnOrphanFeatureOptions();
-    if (this.size > 0) {
-      this.handleOpen();
-    }
+    if (this.phase === "open") this.installLifecycle(true);
   }
   buildFeatureContext(autoCollapseAfter) {
     return {
@@ -2872,21 +3171,27 @@ var BottomSheetCore = class {
       getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
       resolveSnap: (id) => this.snaps.findById(id),
       resolveActiveSnap: () => this.snaps.findById(this.activeId),
+      getPhase: () => this.phase,
       setSize: (size) => {
         this.size = size;
       },
       setMaxAxisSize: (size) => {
         this.snaps.setMaxAxisSize(size);
       },
+      setKeyboardInset: (px) => this.setKeyboardInset(px),
       applySize: (size) => this.applySize(size),
       recomputeSnaps: () => this.recomputeSnaps(),
+      reseat: () => this.reseat(),
+      holdSettle: (settled) => {
+        this.settleHolds.push(settled);
+      },
       newCycle: () => {
         this.newCycle();
       },
-      cancelInFlight: () => {
-        this.animation.cancel();
+      cancelInFlight: () => this.suspend(),
+      resyncAfterResize: () => {
+        if (!this.destroyed) this.land(false);
       },
-      resyncAfterResize: () => this.resyncAfterResize(),
       snapTo: (id) => {
         void this.snapTo(id);
       },
@@ -2925,8 +3230,9 @@ var BottomSheetCore = class {
     return {
       size: this.size,
       activeId: this.activeId,
+      phase: this.phase,
       isDragging: this.isDraggingAny(),
-      isAnimating: this.animation.isAnimating,
+      isAnimating: this.animation.isAnimating || this.currentViewTransition !== null,
       progress: this.computeProgress(this.size)
     };
   }
@@ -2980,49 +3286,53 @@ var BottomSheetCore = class {
   getResolvedSnaps() {
     return this.snaps.getResolvedSnaps();
   }
-  async snapTo(id, velocityOrOpts = 0, _skipBeforeSnap = false) {
-    if (this.destroyed) return;
+  snapTo(id, velocityOrOpts = 0, _skipBeforeSnap = false) {
     const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : { velocity: velocityOrOpts };
-    const velocityPxPerMs = opts.velocity ?? 0;
-    const externalSignal = opts.signal;
-    if (externalSignal?.aborted) return;
+    return this.transitionTo(
+      id,
+      opts.velocity ?? 0,
+      _skipBeforeSnap,
+      opts.signal
+    );
+  }
+  transitionTo(id, velocityPxPerMs = 0, skipBeforeSnap = false, externalSignal) {
+    if (this.destroyed || externalSignal?.aborted) return Promise.resolve();
     const target = this.snaps.findById(id);
     if (!target) {
       devWarn(`[BottomSheet] unknown snap id: ${id}`);
-      return;
+      return Promise.resolve();
     }
     if (!this.snaps.getAllowedIds().includes(id)) {
       devWarn(`[BottomSheet] snap "${id}" is not in allowed list`);
-      return;
-    }
-    if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
-      return;
-    }
-    const resumingOpen = this.opening;
-    const signal = this.newCycle();
-    const onExternalAbort = () => {
-      this.animation.cancel();
-      this.newCycle();
-    };
+      return Promise.resolve();
+    }
+    if (target.size === 0 && this.closingBlocked()) return Promise.resolve();
+    if (!externalSignal && this.inFlight?.id === id) return this.inFlight.done;
+    if (!skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
+      return Promise.resolve();
+    }
+    const flight = { id, done: Promise.resolve() };
+    flight.done = this.runTransition(
+      target,
+      velocityPxPerMs,
+      false,
+      externalSignal,
+      flight
+    );
+    return flight.done;
+  }
+  async runTransition(target, velocityPxPerMs, fromDrag, externalSignal, flight = null) {
+    const signal = this.beginTransition(target);
+    const transition = this.transition;
+    if (signal.aborted || !transition) return;
+    this.inFlight = flight;
+    const onExternalAbort = () => this.suspend();
     externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
-    const wasClosed = this.size === 0 || resumingOpen;
-    const previousId = this.activeId;
-    const previousSize = this.size;
-    this.scrollCache.cache(previousId, previousSize, target.size);
-    this.activeId = id;
-    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
-    const opensToRest = id === "closed" || rawTargetSize === 0;
-    if (wasClosed && !opensToRest) {
-      this.opening = true;
-      if (!resumingOpen) {
-        this.promotedForOpen = true;
-        sheetStack.promote(this.id);
-      }
-    }
-    if (this.animation.viewTransitionsAvailable) {
+    this.allowOvershoot = fromDrag;
+    if (!fromDrag && this.animation.viewTransitionsAvailable) {
       this.currentViewTransition?.skipTransition?.();
       const vt = document.startViewTransition(() => {
-        this.applySize(target.size);
+        if (!signal.aborted) this.applySize(transition.size);
       });
       vt.ready?.catch(() => {
       });
@@ -3033,71 +3343,241 @@ var BottomSheetCore = class {
       }
       if (this.currentViewTransition === vt) this.currentViewTransition = null;
     } else {
-      await this.animation.animateTo(target.size, velocityPxPerMs);
+      await this.animation.animateTo(transition.size, velocityPxPerMs);
     }
     externalSignal?.removeEventListener("abort", onExternalAbort);
     if (signal.aborted) return;
-    this.opening = false;
-    this.completeSnap(id, target.size, previousSize, wasClosed, false);
+    if (this.size !== transition.size) this.applySize(transition.size);
+    this.land(fromDrag);
+    if (this.settleHolds.length > 0) {
+      await Promise.allSettled(this.settleHolds.splice(0));
+    }
+  }
+  beginTransition(target) {
+    const signal = this.newCycle();
+    const cap = this.snaps.getMaxAxisSize();
+    const fromId = this.activeId;
+    const fromSize = this.snaps.findById(fromId)?.size ?? this.size;
+    this.scrollCache.leave(fromId, fromSize, target.size);
+    this.scrollCache.enter(target.id, fromSize, target.size);
+    this.activeId = target.id;
+    this.transition = {
+      size: cap > 0 ? Math.min(target.size, cap) : target.size,
+      cap
+    };
+    if (target.size > 0) {
+      this.enterOpening(target.id);
+    } else {
+      if (this.phase === "closed" && !this.isClosedSnap(target.id)) {
+        sheetStack.promote(this.id);
+      }
+      this.enterClosing();
+    }
+    this.flush();
+    return signal;
+  }
+  enterOpening(id) {
+    if (this.phase === "open" || this.phase === "opening") return;
+    const fresh = this.phase === "closed";
+    this.phase = "opening";
+    this.setRestClosed(false);
+    if (!this.installLifecycle(fresh)) return;
+    this.post("open", { id });
+    this.outbox.push(() => {
+      if (this.phase !== "closed") {
+        notifyLinkedSheets(this.linkedSheets, this);
+      }
+    });
+  }
+  enterClosing() {
+    if (this.phase === "closed" || this.phase === "closing") return;
+    this.phase = "closing";
+    this.post("close", void 0);
+  }
+  settlePhase(heal) {
+    if (this.size > 0) {
+      this.enterOpening(this.activeId);
+      if (this.phase === "opening") {
+        this.phase = "open";
+        this.post("opened", { id: this.activeId });
+      }
+      return;
+    }
+    if (heal && this.phase !== "closing") return;
+    this.enterClosing();
+    if (this.phase === "closing") {
+      this.phase = "closed";
+      this.setRestClosed(true);
+      this.lifecycle.release();
+      sheetStack.update();
+      this.post("closed", void 0);
+    }
   }
-  completeSnap(id, targetSize, previousSize, wasClosed, withHaptic) {
-    this.scrollCache.restore(id, previousSize, targetSize);
+  land(haptic) {
+    this.transition = null;
+    this.inFlight = null;
+    this.allowOvershoot = false;
+    this.openPending = this.size === 0 && !this.isClosedSnap(this.activeId);
     this.updateAriaSlider();
-    this.emit("snap", {
-      id,
+    this.setRestClosed(this.size === 0);
+    this.post("snap", {
+      id: this.activeId,
       size: this.size,
       progress: this.computeProgress(this.size)
     });
-    if (withHaptic) this.haptic();
-    this.setRestClosed(targetSize === 0);
-    if (wasClosed && targetSize > 0) this.emitOpenSequence(id);
-    if (targetSize === 0) this.emitCloseSequence();
-  }
-  setRestClosed(closed) {
-    if (closed === this.restClosed) return;
-    this.restClosed = closed;
-    if (closed) this.element.setAttribute("data-bs-rest", "closed");
-    else this.element.removeAttribute("data-bs-rest");
-  }
-  emitOpenSequence(id) {
-    this.emit("open", { id });
-    this.handleOpen();
-    notifyLinkedSheets(this.linkedSheets, this);
-    this.emit("opened", { id });
+    this.settlePhase(false);
+    if (haptic) this.haptic();
+    this.flush();
   }
-  emitCloseSequence() {
-    this.emit("close", void 0);
-    this.handleClose();
-    this.emit("closed", void 0);
+  suspend() {
+    this.animation.cancel();
+    this.currentViewTransition?.skipTransition?.();
+    this.newCycle();
   }
-  async dragTo(targetSize, velocityOrOpts = 0) {
-    if (this.destroyed) return;
-    const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : { velocity: velocityOrOpts };
-    const velocityPxPerMs = opts.velocity ?? 0;
-    const externalSignal = opts.signal;
-    if (externalSignal?.aborted) return;
+  landNow() {
+    const transition = this.transition;
+    if (this.destroyed || !transition || this.isDraggingAny()) return;
+    this.animation.cancel();
+    this.currentViewTransition?.skipTransition?.();
     this.newCycle();
-    const onExternalAbort = () => {
-      this.animation.cancel();
-      this.newCycle();
-    };
-    externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
-    const clamped = Math.max(0, Math.min(targetSize, this.snaps.getMaxAxisSize()));
-    await this.animation.animateTo(clamped, velocityPxPerMs);
-    externalSignal?.removeEventListener("abort", onExternalAbort);
-    if (this.destroyed || externalSignal?.aborted) return;
+    this.applySize(transition.size);
+    this.land(false);
   }
-  open(id) {
-    if (this.destroyed) return Promise.resolve();
-    const target = id ?? this.snaps.getAllowedIds().find((a) => (this.snaps.findById(a)?.size ?? 0) > 0) ?? this.activeId;
-    return this.snapTo(target);
+  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();
   }
-  close(reason = "programmatic") {
+  installLifecycle(promote) {
+    if (promote) sheetStack.promote(this.id);
+    if (this.lifecycle.isInstalled) return true;
+    try {
+      this.lifecycle.install();
+      return true;
+    } catch (err) {
+      this.abortOpen();
+      queueMicrotask(() => {
+        throw err;
+      });
+      return false;
+    }
+  }
+  abortOpen() {
+    this.animation.cancel();
+    if (!this.destroyed) this.newCycle();
+    this.phase = "closed";
+    this.openPending = false;
+    this.lifecycle.release();
+    sheetStack.update();
+    this.activeId = this.zeroSnapId() ?? this.activeId;
+    this.applySize(0);
+    this.setRestClosed(true);
+    this.updateAriaSlider();
+  }
+  zeroSnapId() {
+    return this.snapPointsRaw.find((p) => p.id === "closed")?.id ?? this.snaps.getAllowedIds().find((a) => this.snaps.findById(a)?.size === 0);
+  }
+  isClosedSnap(id) {
+    if (id === "closed") return true;
+    return this.snapPointsRaw.find((p) => p.id === id)?.size === 0;
+  }
+  closingBlocked() {
+    return this.disableCloseFlag && this.phase !== "closed";
+  }
+  setKeyboardInset(px) {
+    if (px === this.keyboardInset) return;
+    this.keyboardInset = px;
+    for (const host of this.varHosts()) {
+      host.style.setProperty("--bs-keyboard-inset", `${px}px`);
+    }
+  }
+  varHosts() {
+    const hosts = /* @__PURE__ */ new Set([this.element]);
+    for (const host of [
+      this.anchorHost,
+      this.scrimParent,
+      this.rootEl,
+      this.homeRoot
+    ]) {
+      if (host) hosts.add(host);
+    }
+    return hosts;
+  }
+  dismissBlocked() {
+    return (this.disableCloseFlag || this.persistent) && this.phase !== "closed";
+  }
+  post(event, payload) {
+    this.outbox.push(() => this.bus.emit(event, payload));
+  }
+  flush() {
+    if (this.flushing) return;
+    this.flushing = true;
+    try {
+      for (let next = this.outbox.shift(); next; next = this.outbox.shift()) {
+        next();
+      }
+    } finally {
+      this.flushing = false;
+    }
+  }
+  setRestClosed(closed) {
+    if (closed === this.restClosed) return;
+    this.restClosed = closed;
+    if (closed) this.element.setAttribute("data-bs-rest", "closed");
+    else this.element.removeAttribute("data-bs-rest");
+  }
+  async dragTo(targetSize, velocityOrOpts = 0) {
+    if (this.destroyed) return;
+    const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : { velocity: velocityOrOpts };
+    const velocityPxPerMs = opts.velocity ?? 0;
+    const externalSignal = opts.signal;
+    if (externalSignal?.aborted) return;
+    this.newCycle();
+    const onExternalAbort = () => this.suspend();
+    externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
+    const clamped = Math.max(0, Math.min(targetSize, this.snaps.getMaxAxisSize()));
+    await this.animation.animateTo(clamped, velocityPxPerMs);
+    externalSignal?.removeEventListener("abort", onExternalAbort);
+  }
+  open(id) {
     if (this.destroyed) return Promise.resolve();
-    if (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 (!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 || 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;
@@ -3120,10 +3600,12 @@ var BottomSheetCore = class {
   }
   setDragFrom(mode) {
     if (this.destroyed || mode === this.dragFromMode) return;
+    const wasDragging = this.gesture?.isDragging ?? false;
     this.gesture?.forceClearDragState();
     this.detachSheetGesture?.();
     this.dragFromMode = mode;
     this.mountSheetGesture();
+    if (wasDragging) this.restoreAfterDrag();
   }
   getDragFrom() {
     return this.dragFromMode;
@@ -3136,6 +3618,7 @@ var BottomSheetCore = class {
     const nowVertical = next === "bottom" || next === "top";
     this.gesture?.forceClearDragState();
     this.detachSheetGesture?.();
+    this.landNow();
     this.animation.cancel();
     this.element.style.removeProperty(layoutAxis(this.mode));
     this.mode = next;
@@ -3151,9 +3634,12 @@ var BottomSheetCore = class {
     this.detachSliderKeyboard?.();
     this.mountSliderKeyboard();
     this.mountSheetGesture();
+    for (const anchor of this.anchors) anchor.reposition();
+    this.placeScrimStages?.();
+    if (this.stackEffectPrimed) {
+      this.element.style.transformOrigin = nowVertical ? "50% 100%" : "0% 50%";
+    }
     this.recompute();
-    const active = this.snaps.findById(this.activeId);
-    if (active) this.applySize(active.size);
     this.updateAriaSlider();
   }
   getMode() {
@@ -3195,13 +3681,24 @@ var BottomSheetCore = class {
     if (snap && ids.includes(snap)) {
       void this.snapTo(snap, 0, true);
     } else if (!ids.includes(this.activeId)) {
-      const fallback = ids[0];
-      if (fallback) void this.snapTo(fallback, 0, true);
+      const fallback = this.fallbackSnap(
+        this.snaps.findById(this.activeId)?.size ?? this.size
+      );
+      if (fallback) void this.snapTo(fallback.id, 0, true);
     }
   }
+  fallbackSnap(from) {
+    return (from > 0 ? this.snaps.nearest(from, true) : null) ?? this.snaps.nearest(from, false);
+  }
   setBackdropRange(range) {
     this.scrim.setBackdropRange(range, () => this.applySize(this.size));
   }
+  setBackdropOpacity(value) {
+    this.scrim.setBackdropOpacity(value, () => this.applySize(this.size));
+  }
+  setBackdropColor(color) {
+    this.scrim.setBackdropColor(color);
+  }
   setScreenRange(range) {
     this.scrim.setScreenRange(range, () => this.applySize(this.size));
   }
@@ -3242,7 +3739,7 @@ var BottomSheetCore = class {
     }
     const handle = attachAnchor(
       {
-        mode: this.mode,
+        getMode: () => this.mode,
         host: this.anchorHost,
         getState: () => ({
           activeId: this.activeId,
@@ -3280,9 +3777,9 @@ var BottomSheetCore = class {
       return () => {
       };
     }
-    const detachInstalled = installScrimStages(
+    const stages = installScrimStages(
       {
-        mode: this.mode,
+        getMode: () => this.mode,
         host,
         getState: () => ({
           activeId: this.activeId,
@@ -3295,10 +3792,14 @@ var BottomSheetCore = class {
       opts
     );
     const detach = () => {
-      if (this.detachScrimStages === detach) this.detachScrimStages = null;
-      detachInstalled();
+      if (this.detachScrimStages === detach) {
+        this.detachScrimStages = null;
+        this.placeScrimStages = null;
+      }
+      stages.detach();
     };
     this.detachScrimStages = detach;
+    this.placeScrimStages = stages.reposition;
     this.teardowns.add(() => this.detachScrimStages?.());
     return detach;
   }
@@ -3307,32 +3808,29 @@ var BottomSheetCore = class {
   }
   setSnapPoints(points, allowed) {
     if (this.destroyed) return;
-    this.animation.cancel();
-    this.newCycle();
+    const from = this.snaps.findById(this.activeId)?.size ?? this.size;
+    const restricted = this.snaps.getResolvedSnaps().some((s) => !this.snaps.getAllowedIds().includes(s.id));
     this.snapPointsRaw = points;
     auditVhUsage(points);
     this.auditDuplicateSnapIds(points);
+    this.maxHeight.resolveCap();
     this.snaps.setRaw(points);
+    this.maxHeight.clampTo();
     if (allowed) {
       this.snaps.setAllowedIds(allowed);
     } else {
       const present = this.snaps.getResolvedSnaps().map((s) => s.id);
-      const kept = this.snaps.getAllowedIds().filter((id) => present.includes(id));
+      const kept = restricted ? this.snaps.getAllowedIds().filter((id) => present.includes(id)) : [];
       this.snaps.setAllowedIds(kept.length ? kept : present);
     }
     this.scrollCache.clear();
     this.scrim.invalidateOpacityCache();
-    const current = this.snaps.findById(this.activeId);
-    if (current) {
-      this.applySize(current.size);
-    } else {
-      const fallback = this.snaps.getResolvedSnaps().find((s) => this.snaps.getAllowedIds().includes(s.id)) ?? this.snaps.getResolvedSnaps()[0];
-      if (fallback) {
-        this.activeId = fallback.id;
-        this.applySize(fallback.size);
-      }
+    if (this.snaps.findById(this.activeId)) {
+      this.reseat();
+      return;
     }
-    this.updateAriaSlider();
+    const fallback = this.fallbackSnap(from) ?? this.snaps.getResolvedSnaps()[0];
+    if (fallback) void this.transitionTo(fallback.id, 0, true);
   }
   recompute() {
     if (this.destroyed) return;
@@ -3340,22 +3838,11 @@ var BottomSheetCore = class {
     this.snaps.recompute();
     this.maxHeight.clampTo();
     this.scrim.invalidateOpacityCache();
-    if (this.isDraggingAny()) return;
-    this.healActiveSnap();
-  }
-  healActiveSnap() {
-    const current = this.snaps.findById(this.activeId);
-    if (!current) return;
-    this.size = current.size;
-    this.applySize(this.size);
-    this.updateAriaSlider();
-    if (this.size > 0 && !this.lifecycle.isInstalled && !this.opening && !this.animation.isAnimating) {
-      this.emitOpenSequence(this.activeId);
-    }
+    this.reseat();
   }
   destroy() {
     this.destroyed = true;
-    this.opening = false;
+    this.outbox.length = 0;
     this.currentAbort.abort();
     this.currentViewTransition?.skipTransition?.();
     this.currentViewTransition = null;
@@ -3372,11 +3859,19 @@ var BottomSheetCore = class {
       this.backdrop.style.opacity = "";
       this.backdrop.style.pointerEvents = "";
     }
-    for (const host of [this.anchorHost, this.scrimParent, this.rootEl]) {
+    for (const host of [
+      this.anchorHost,
+      this.scrimParent,
+      this.rootEl,
+      this.homeRoot
+    ]) {
       if (!host) continue;
       host.style.removeProperty("--bs-size");
       host.style.removeProperty("--bs-progress");
+      host.style.removeProperty("--bs-z-sheet");
+      host.style.removeProperty("--bs-keyboard-inset");
     }
+    this.element.style.removeProperty("--bs-keyboard-inset");
     if (this.screenComponent) {
       this.screenComponent.style.opacity = "";
       this.screenComponent.style.display = "";
@@ -3389,7 +3884,8 @@ var BottomSheetCore = class {
   }
   newCycle() {
     this.allowOvershoot = false;
-    this.opening = false;
+    this.transition = null;
+    this.inFlight = null;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3412,8 +3908,9 @@ var BottomSheetCore = class {
     if (typeof document === "undefined") return;
     if (!this.lifecycle.focusTrapEnabled) return;
     if (this.element.getAttribute("aria-labelledby")) return;
-    const scope = this.handle ?? this.element;
-    const titled = scope.querySelector("[data-bs-title]") ?? scope.querySelector("h1,h2,h3,h4,h5,h6");
+    const HEADING = "h1,h2,h3,h4,h5,h6";
+    const header = this.element.querySelector(".bs-header");
+    const titled = this.element.querySelector("[data-bs-title]") ?? this.handle.querySelector(HEADING) ?? header?.querySelector(HEADING);
     if (!titled) return;
     if (!titled.id) {
       titled.id = nextInstanceId("bs-title");
@@ -3455,12 +3952,16 @@ var BottomSheetCore = class {
         this.stackZ = z;
         this.element.style.zIndex = String(z);
         if (this.backdrop) this.backdrop.style.zIndex = String(z - 1);
+        this.rootEl?.style.setProperty("--bs-z-sheet", String(z));
+        this.homeRoot?.style.setProperty("--bs-z-sheet", String(z));
         for (const anchor of this.anchors) anchor.syncZ(z + 1);
       },
       setIsTop: (isTop) => {
+        if (isTop === this.isTopSheet) return;
         this.isTopSheet = isTop;
+        this.lifecycle.syncTop();
       },
-      isOpen: () => this.size > 0 || this.opening,
+      isOpen: () => this.phase !== "closed",
       setDepth: (depth) => this.applyStackDepth(depth)
     }));
   }
@@ -3488,15 +3989,15 @@ var BottomSheetCore = class {
         const r = this.getAllowedRange();
         buf.size = this.size;
         buf.maxAxisSize = this.snaps.getMaxAxisSize();
-        buf.range.min = r.min;
+        buf.range.min = this.dismissBlocked() ? Math.max(r.min, this.smallestOpenSize()) : r.min;
         buf.range.max = r.max;
         buf.rubberBandEnabled = this.rubberBandEnabled;
         return buf;
       },
       getDisableDrag: () => this.disableDragFlag,
-      cancelAnimation: () => this.animation.cancel(),
+      cancelAnimation: () => this.suspend(),
       applySize: (size) => this.applySize(size),
-      animateTo: (size, velocity) => this.animation.animateTo(size, velocity),
+      restoreAfterDrag: () => this.restoreAfterDrag(),
       settleAfterDrag: (delta, velocity, kind) => this.settleAfterDrag(delta, velocity, kind),
       emit: (event, payload) => this.emit(event, payload),
       listenerCount: (event) => this.bus.listenerCount(event)
@@ -3620,32 +4121,19 @@ var BottomSheetCore = class {
         element: this.element,
         getMode: () => this.mode,
         isDestroyed: () => this.destroyed,
-        isDragging: () => this.isDraggingAny(),
         resolveActiveSnap: () => this.snaps.findById(this.activeId),
         getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
-        getSize: () => this.size,
         setMaxAxisSize: (size) => {
           this.snaps.setMaxAxisSize(size);
         },
-        setSize: (size) => {
-          this.size = size;
-        },
         recomputeSnaps: () => this.recomputeSnaps(),
-        applySize: (size) => this.applySize(size),
-        cancelInFlight: () => {
-          this.animation.cancel();
-        },
-        newCycle: () => {
-          this.newCycle();
-        },
-        isAnimating: () => this.animation.isAnimating,
-        resyncAfterCancel: () => this.resyncAfterResize()
+        reseat: () => this.reseat(),
+        landNow: () => this.landNow()
       }));
       if (this.lifecycle.closeOnEscape) {
         const onKey = (e) => {
           if (this.destroyed || e.defaultPrevented) return;
-          if (!this.canDismiss()) return;
-          if (e.key === "Escape" && this.isTopSheet && this.size > 0) {
+          if (e.key === "Escape" && this.isTopSheet) {
             void this.close("escape");
           }
         };
@@ -3663,7 +4151,10 @@ var BottomSheetCore = class {
       handle: this.handle,
       mode: this.mode,
       isDestroyed: () => this.destroyed,
-      getAllowedIds: () => this.allowedIdsBySize(),
+      getAllowedIds: () => {
+        const ids = this.allowedIdsBySize();
+        return this.dismissBlocked() ? ids.filter((id) => (this.snaps.findById(id)?.size ?? 0) > 0) : ids;
+      },
       getActiveId: () => this.activeId,
       snapTo: (id) => {
         void this.snapTo(id);
@@ -3676,56 +4167,46 @@ var BottomSheetCore = class {
     });
   }
   settleAfterDrag(delta, velocity, kind = "touch") {
-    const signal = this.newCycle();
-    const target = this.snaps.findDragSettleTarget({
-      delta,
-      velocity,
-      pointerKind: kind,
-      size: this.size,
-      activeId: this.activeId,
-      flickVelocity: this.flickVelocity,
-      dragThreshold: this.dragThreshold
-    });
+    const target = this.snaps.findDragSettleTarget(
+      {
+        delta,
+        velocity,
+        pointerKind: kind,
+        size: this.size,
+        activeId: this.activeId,
+        flickVelocity: this.flickVelocity,
+        dragThreshold: this.dragThreshold
+      },
+      this.dismissBlocked()
+    );
     if (!target) {
       this.clearWillChangeIfIdle();
       return;
     }
     const previousId = this.activeId;
     if (target.id === previousId && target.size === this.size) {
+      if (this.phase === "opening" || this.phase === "closing") {
+        this.land(false);
+      }
       this.clearWillChangeIfIdle();
       return;
     }
     if (this.emitBeforeSnap(target, previousId)) {
-      const restore2 = this.snaps.findById(previousId);
-      if (restore2) {
-        void this.animation.animateTo(restore2.size, 0);
-      }
+      this.restoreAfterDrag();
       return;
     }
-    const previousSize = this.size;
-    const previousSnapSize = this.snaps.findById(previousId)?.size;
-    this.scrollCache.cache(previousId, previousSize, target.size);
-    this.activeId = target.id;
-    if (previousSnapSize === 0 && target.size > 0) {
-      this.opening = true;
-      this.promotedForOpen = true;
-      sheetStack.promote(this.id);
-    }
-    const settleCap = this.snaps.getMaxAxisSize();
-    const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
-    this.allowOvershoot = true;
-    void this.animation.animateTo(settleSize, velocity).then(() => {
-      if (signal.aborted) return;
-      this.allowOvershoot = false;
-      this.opening = false;
-      this.completeSnap(
-        target.id,
-        target.size,
-        previousSize,
-        previousSnapSize === 0,
-        true
-      );
-    });
+    void this.runTransition(target, velocity, true);
+  }
+  restoreAfterDrag() {
+    const active = this.snaps.findById(this.activeId);
+    if (active) void this.runTransition(active, 0, false);
+  }
+  smallestOpenSize() {
+    const allowed = this.snaps.getAllowedIds();
+    for (const snap of this.snaps.getResolvedSnaps()) {
+      if (snap.size > 0 && allowed.includes(snap.id)) return snap.size;
+    }
+    return 0;
   }
   isDraggingAny() {
     return (this.gesture?.isDragging ?? false) || (this.contentGesture?.isDragging ?? false);
@@ -3750,9 +4231,10 @@ var BottomSheetCore = class {
     const offset = cap - clamped;
     const style = this.element.style;
     if (!skipTransform) style.transform = this.transformTemplate(offset);
+    const moving = this.animation.isAnimating || this.isDraggingAny();
     const sizeChanged = this.sizeWriteSentinel.shouldWrite(
       clamped,
-      this.animation.isAnimating || this.isDraggingAny() ? SIZE_WRITE_EPSILON : 0
+      moving ? SIZE_WRITE_EPSILON : 0
     );
     if (sizeChanged) {
       style.setProperty("--bs-size", `${clamped}px`);
@@ -3765,11 +4247,13 @@ var BottomSheetCore = class {
       if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
         this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
       }
+      this.homeRoot?.style.setProperty("--bs-size", `${clamped}px`);
     }
     const progress = this.computeProgress(clamped);
+    const opacityEpsilon = moving ? OPACITY_WRITE_EPSILON : 0;
     const progressChanged = this.progressWriteSentinel.shouldWrite(
       progress,
-      OPACITY_WRITE_EPSILON
+      opacityEpsilon
     );
     if (progressChanged) {
       style.setProperty("--bs-progress", String(progress));
@@ -3779,8 +4263,9 @@ var BottomSheetCore = class {
       if (this.rootEl && this.rootEl !== this.anchorHost) {
         this.rootEl.style.setProperty("--bs-progress", String(progress));
       }
+      this.homeRoot?.style.setProperty("--bs-progress", String(progress));
     }
-    this.scrim.applyOpacity(progress, progressChanged);
+    this.scrim.applyOpacity(progress, progressChanged, opacityEpsilon);
     if ((progressChanged || sizeChanged) && this.bus.listenerCount("progress") > 0) {
       this.progressPayload.value = progress;
       this.progressPayload.size = clamped;
@@ -3793,238 +4278,322 @@ var BottomSheetCore = class {
     if (reachableMax <= min) return 0;
     return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
   }
-  handleOpen() {
-    if (this.promotedForOpen) this.promotedForOpen = false;
-    else sheetStack.promote(this.id);
-    try {
-      this.lifecycle.install();
-    } catch (err) {
-      if (!this.destroyed) this.newCycle();
-      this.handleClose();
-      this.applySize(0);
-      this.activeId = this.snapPointsRaw.find((p) => p.id === "closed")?.id ?? this.activeId;
-      this.size = 0;
-      queueMicrotask(() => {
-        throw err;
-      });
-    }
-  }
-  resyncAfterResize() {
-    if (this.destroyed) return;
-    const target = this.snaps.findById(this.activeId);
-    if (!target) return;
-    this.updateAriaSlider();
-    this.emit("snap", {
-      id: target.id,
-      size: this.size,
-      progress: this.computeProgress(this.size)
-    });
-    if (target.size > 0 && !this.lifecycle.isInstalled) {
-      this.emitOpenSequence(target.id);
-    } else if (target.size === 0 && this.lifecycle.isInstalled) {
-      this.emitCloseSequence();
-    }
-  }
-  handleClose() {
-    this.opening = false;
-    this.promotedForOpen = false;
-    this.lifecycle.release();
-    sheetStack.update();
-  }
 };
 
 // src/core/features/history-coordinator.ts
-var entries = [];
-var subscribers = /* @__PURE__ */ new Set();
-var suppress = 0;
-var internalDepth = 0;
-var pendingRebrands = [];
-var listenerInstalled = false;
-var patchInstalled = false;
-var origPushState = null;
-var origReplaceState = null;
-var patchedPushState = null;
-var patchedReplaceState = null;
-var hasWindow = () => typeof window !== "undefined";
-var hasHistory = () => typeof history !== "undefined";
-var brandMarker = (surface) => ({
+var MARKER = "__bs";
+var STACK = "__bsStack";
+var DEPTH = "__bsDepth";
+var ROUTED = "__bsRouted";
+var SETTLE_TIMEOUT_MS = 1e3;
+var state2 = shared(
+  "history",
+  () => ({
+    live: [],
+    stackId: void 0,
+    baseUrl: void 0,
+    position: null,
+    knownLength: 0,
+    href: "",
+    subscribers: /* @__PURE__ */ new Set(),
+    internal: 0,
+    pending: [],
+    deferred: [],
+    waiters: [],
+    timer: null,
+    listening: false,
+    leftovers: false,
+    orphanChecked: false,
+    push: null,
+    replace: null
+  })
+);
+var hasHistory = () => typeof window !== "undefined" && typeof history !== "undefined";
+var plain = (value) => value !== null && typeof value === "object" && !Array.isArray(value) ? value : null;
+var depthOf = (value) => {
+  const depth = value?.[DEPTH];
+  return typeof depth === "number" ? depth : null;
+};
+var isMarker = (value) => value?.[MARKER] === true;
+var inStack = (value) => value !== null && state2.stackId !== void 0 && value[STACK] === state2.stackId && depthOf(value) !== null;
+var foreignKeys = (value) => {
+  const out = {};
+  const source = plain(value);
+  if (!source) return out;
+  for (const key of Object.keys(source)) {
+    if (!key.startsWith(MARKER)) out[key] = source[key];
+  }
+  return out;
+};
+var markerFor = (surface, depth) => ({
+  ...foreignKeys(history.state),
   ...surface.markerState(),
-  __bs: true
+  [MARKER]: true,
+  [STACK]: state2.stackId,
+  [DEPTH]: depth
 });
+var urlForDepth = (depth) => {
+  for (let i = depth - 1; i >= 0; i -= 1) {
+    const url = state2.live[i]?.surface.url;
+    if (url !== void 0) return url;
+  }
+  return state2.baseUrl;
+};
 var runInternal = (fn) => {
-  internalDepth += 1;
+  state2.internal += 1;
   try {
     fn();
+    return true;
+  } catch {
+    return false;
   } finally {
-    internalDepth -= 1;
+    state2.internal -= 1;
   }
 };
 var notifyRouteChange = () => {
-  const snapshot = Array.from(subscribers);
-  for (const fn of snapshot) fn();
+  for (const fn of Array.from(state2.subscribers)) {
+    try {
+      fn();
+    } catch (err) {
+      queueMicrotask(() => {
+        throw err;
+      });
+    }
+  }
 };
 var ensureListener = () => {
-  if (listenerInstalled || !hasWindow()) return;
+  if (state2.listening || !hasHistory()) return;
   window.addEventListener("popstate", onPopState);
-  listenerInstalled = true;
+  state2.listening = true;
 };
 var maybeTeardownListener = () => {
-  if (!listenerInstalled) return;
-  if (entries.length > 0 || subscribers.size > 0 || suppress > 0) return;
-  if (hasWindow()) window.removeEventListener("popstate", onPopState);
-  listenerInstalled = false;
-};
-var installPatch = () => {
-  if (patchInstalled || !hasHistory()) return;
-  origPushState = history.pushState;
-  origReplaceState = history.replaceState;
-  patchedPushState = function(...args) {
-    origPushState.apply(this, args);
-    if (internalDepth === 0) notifyRouteChange();
-  };
-  patchedReplaceState = function(...args) {
-    origReplaceState.apply(this, args);
-    if (internalDepth === 0) notifyRouteChange();
-  };
-  history.pushState = patchedPushState;
-  history.replaceState = patchedReplaceState;
-  patchInstalled = true;
-};
-var removePatch = () => {
-  if (!patchInstalled) return;
-  if (history.pushState === patchedPushState && origPushState) {
-    history.pushState = origPushState;
-  }
-  if (history.replaceState === patchedReplaceState && origReplaceState) {
-    history.replaceState = origReplaceState;
-  }
-  origPushState = null;
-  origReplaceState = null;
-  patchedPushState = null;
-  patchedReplaceState = null;
-  patchInstalled = false;
-};
-function onPopState() {
-  if (suppress > 0) {
-    suppress -= 1;
-    const rebrand = pendingRebrands.shift();
-    if (rebrand) rebrand();
-    maybeTeardownListener();
-    return;
-  }
-  if (entries.length === 0) {
-    notifyRouteChange();
-    maybeTeardownListener();
+  if (!state2.listening) return;
+  if (state2.live.length > 0 || state2.subscribers.size > 0 || state2.pending.length > 0 || state2.leftovers) {
     return;
   }
-  let target = null;
-  let targetIdx = -1;
-  for (let i = entries.length - 1; i >= 0; i -= 1) {
-    const entry = entries[i];
-    if (!entry.surface.isOpen()) continue;
-    if (!target) {
-      target = entry;
-      targetIdx = i;
-    }
-    if (entry.surface.isTop()) {
-      target = entry;
-      targetIdx = i;
-      break;
-    }
-  }
-  if (!target) {
-    const removed = entries.pop();
-    if (removed) removed.live = false;
+  if (hasHistory()) window.removeEventListener("popstate", onPopState);
+  state2.listening = false;
+};
+var settleIfIdle = () => {
+  if (state2.pending.length > 0) return;
+  if (state2.timer !== null) {
+    clearTimeout(state2.timer);
+    state2.timer = null;
+  }
+  for (const entry of state2.deferred.splice(0)) pushEntry(entry);
+  for (const resolve of state2.waiters.splice(0)) resolve();
+};
+var traverse = (delta, kind) => {
+  state2.pending.push(kind);
+  if (state2.timer !== null) clearTimeout(state2.timer);
+  state2.timer = setTimeout(() => {
+    state2.timer = null;
+    state2.pending.length = 0;
+    settleIfIdle();
     maybeTeardownListener();
-    return;
-  }
-  target.live = false;
-  entries.splice(targetIdx, 1);
-  const settled = target;
-  void Promise.resolve(settled.surface.close()).then(() => {
-    if (settled.surface.isOpen()) restore(settled);
+  }, SETTLE_TIMEOUT_MS);
+  ensureListener();
+  const moved = runInternal(() => {
+    if (delta < 0) history.back();
+    else history.forward();
   });
-  maybeTeardownListener();
-}
-function restore(entry) {
-  if (!hasWindow() || !hasHistory()) return;
-  entry.live = true;
+  if (!moved) {
+    state2.pending.pop();
+    settleIfIdle();
+  }
+};
+var newStackId = () => `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+var startStack = () => {
+  state2.stackId = newStackId();
+  const current = history.state;
+  const leftover = plain(current);
+  state2.baseUrl = isMarker(leftover) && leftover?.[ROUTED] !== void 0 ? void 0 : location.href;
+  if (isMarker(leftover)) return;
+  if (current !== null && current !== void 0 && !leftover) return;
   runInternal(() => {
-    try {
-      history.pushState(brandMarker(entry.surface), "", entry.surface.url);
-    } catch {
-      entry.live = false;
-    }
+    history.replaceState(
+      { ...foreignKeys(current), [STACK]: state2.stackId, [DEPTH]: 0 },
+      "",
+      location.href
+    );
   });
-  if (entry.live) {
-    entries.push(entry);
-    ensureListener();
-  }
+};
+function pushEntry(entry) {
+  const depth = state2.live.length + 1;
+  if (state2.live.length === 0) startStack();
+  const written = runInternal(() => {
+    history.pushState(markerFor(entry.surface, depth), "", entry.surface.url);
+  });
+  if (!written) return false;
+  state2.live.push(entry);
+  state2.position = depth;
+  state2.knownLength = history.length;
+  state2.href = location.href;
+  ensureListener();
+  return true;
 }
-function pushBackMarker(surface) {
-  const entry = { surface, priorUrl: void 0, live: false };
-  if (!hasWindow() || !hasHistory()) {
-    return entry;
+var enlist = (entry) => {
+  if (state2.pending.length > 0) state2.deferred.push(entry);
+  else pushEntry(entry);
+};
+var sameBrand = (a, b) => {
+  for (const key of /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])) {
+    if (key.startsWith(MARKER) && a[key] !== b[key]) return false;
   }
-  entry.priorUrl = surface.url !== void 0 ? location.href : void 0;
+  return true;
+};
+var rebrand = (depth) => {
+  const entry = state2.live[depth - 1];
+  if (!entry) return;
+  const url = urlForDepth(depth);
+  const marker = markerFor(entry.surface, depth);
+  const atUrl = url === void 0 || new URL(url, location.href).href === location.href;
+  if (atUrl && sameBrand(plain(history.state) ?? {}, marker)) return;
   runInternal(() => {
+    history.replaceState(marker, "", url);
+  });
+  state2.href = location.href;
+};
+var closeAbove = (depth) => {
+  const dropped = state2.live.splice(depth);
+  for (let i = dropped.length - 1; i >= 0; i -= 1) {
+    const entry = dropped[i];
+    let closing = void 0;
     try {
-      history.pushState(brandMarker(surface), "", surface.url);
-      entry.live = true;
-    } catch {
-      entry.live = false;
+      closing = entry.surface.close();
+    } catch (err) {
+      queueMicrotask(() => {
+        throw err;
+      });
     }
-  });
-  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 (state2.live.some(known) || state2.deferred.some(known)) return;
+      enlist(entry);
+    });
   }
+};
+function onPopState(event) {
+  const kind = state2.pending.shift();
+  const byUser = kind !== "pop";
+  const landed = plain(event.state);
+  const depth = depthOf(landed);
+  const from = state2.position;
+  const liveBefore = state2.live.length;
+  const grew = history.length > state2.knownLength;
+  state2.knownLength = history.length;
+  const within = inStack(landed);
+  if (within && depth !== null) {
+    state2.position = depth;
+    if (depth > state2.live.length) {
+      const forward = from !== null && from < depth;
+      traverse(forward ? 1 : -1, byUser ? "skip" : "pop");
+    } else if (depth < state2.live.length) {
+      if (byUser) closeAbove(depth);
+    } else {
+      rebrand(depth);
+    }
+  } else if (isMarker(landed)) {
+    state2.position = null;
+    traverse(-1, byUser ? "skip" : "pop");
+  } else {
+    state2.position = null;
+    if (byUser && !grew && state2.live.length > 0) {
+      closeAbove(state2.live.length - 1);
+    }
+  }
+  const moved = location.href !== state2.href;
+  state2.href = location.href;
+  if (kind === void 0 && moved && (liveBefore === 0 || !within)) {
+    notifyRouteChange();
+  }
+  settleIfIdle();
+  maybeTeardownListener();
+}
+function pushBackMarker(surface) {
+  const entry = { surface };
+  if (hasHistory()) enlist(entry);
   return entry;
 }
 function popBackMarker(handle) {
-  if (!hasWindow() || !hasHistory()) return;
+  if (!hasHistory()) return Promise.resolve();
   const entry = handle;
-  const idx = entries.indexOf(entry);
-  if (idx === -1 || !entry.live) return;
-  const last = entries.length - 1;
-  entry.live = false;
-  entries.splice(idx, 1);
-  let rebrand = null;
-  if (idx !== last) {
-    const rebrandSurface = entries[entries.length - 1].surface;
-    const rebrandUrl = entry.priorUrl;
-    rebrand = () => {
-      runInternal(() => {
-        history.replaceState(
-          brandMarker(rebrandSurface),
-          "",
-          rebrandUrl !== void 0 ? rebrandUrl : location.href
-        );
-      });
-    };
+  const waiting = state2.deferred.indexOf(entry);
+  if (waiting !== -1) state2.deferred.splice(waiting, 1);
+  const idx = state2.live.indexOf(entry);
+  if (idx === -1) return historySettled();
+  const top = state2.live.length;
+  state2.live.splice(idx, 1);
+  const current = plain(history.state);
+  const onTop = isMarker(current) && inStack(current) && depthOf(current) === top;
+  if (onTop && state2.pending.length === 0) {
+    traverse(-1, "pop");
+  } else {
+    state2.leftovers = true;
+    ensureListener();
   }
-  pendingRebrands.push(rebrand);
-  suppress += 1;
-  runInternal(() => {
-    try {
-      history.back();
-    } catch {
-      suppress = Math.max(0, suppress - 1);
-      pendingRebrands.pop();
-    }
-  });
   maybeTeardownListener();
+  return historySettled();
+}
+function releaseOrphanMarker() {
+  if (!hasHistory() || state2.orphanChecked) return;
+  state2.orphanChecked = true;
+  if (state2.live.length > 0 || state2.pending.length > 0) return;
+  if (!isMarker(plain(history.state))) return;
+  state2.leftovers = true;
+  traverse(-1, "pop");
+}
+function historySettled() {
+  if (state2.pending.length === 0) return Promise.resolve();
+  return new Promise((resolve) => {
+    state2.waiters.push(resolve);
+  });
 }
+var wrap = (original) => function(...args) {
+  original.apply(this, args);
+  state2.knownLength = history.length;
+  if (location.href === state2.href) return;
+  state2.href = location.href;
+  if (state2.internal === 0 && state2.subscribers.size > 0) {
+    notifyRouteChange();
+  }
+};
+var installPatch = () => {
+  if (!state2.push || history.pushState === state2.push.original) {
+    const original = history.pushState;
+    const wrapper = wrap(original);
+    history.pushState = wrapper;
+    state2.push = { wrapper, original };
+  }
+  if (!state2.replace || history.replaceState === state2.replace.original) {
+    const original = history.replaceState;
+    const wrapper = wrap(original);
+    history.replaceState = wrapper;
+    state2.replace = { wrapper, original };
+  }
+};
+var removePatch = () => {
+  if (state2.push && history.pushState === state2.push.wrapper) {
+    history.pushState = state2.push.original;
+    state2.push = null;
+  }
+  if (state2.replace && history.replaceState === state2.replace.wrapper) {
+    history.replaceState = state2.replace.original;
+    state2.replace = null;
+  }
+};
 function subscribeRouteChange(fn) {
-  if (!hasWindow() || !hasHistory()) return () => {
+  if (!hasHistory()) return () => {
   };
-  subscribers.add(fn);
-  if (subscribers.size === 1) installPatch();
+  state2.subscribers.add(fn);
+  state2.href = location.href;
+  state2.knownLength = history.length;
+  installPatch();
   ensureListener();
   return () => {
-    if (!subscribers.has(fn)) return;
-    subscribers.delete(fn);
-    if (subscribers.size === 0) removePatch();
+    if (!state2.subscribers.delete(fn)) return;
+    if (state2.subscribers.size === 0) removePatch();
     maybeTeardownListener();
   };
 }
@@ -4040,36 +4609,37 @@ function installRoute(deps) {
     };
   }
   let handle = null;
+  const surface = {
+    isOpen: () => !deps.isDestroyed() && deps.isOpen(),
+    close: deps.close,
+    markerState: () => deps.routedTo !== void 0 ? { __bsRouted: deps.sheetId } : { __bsSheet: deps.sheetId },
+    url: deps.routedTo
+  };
   const onOpen = () => {
     if (handle) return;
-    handle = pushBackMarker({
-      isOpen: () => !deps.isDestroyed() && deps.getSize() > 0,
-      isTop: deps.isTopSheet,
-      close: deps.close,
-      markerState: () => deps.routedTo !== void 0 ? { __bsRouted: deps.sheetId } : { __bsSheet: deps.sheetId },
-      url: deps.routedTo
-    });
+    handle = pushBackMarker(surface);
   };
   const onClose = () => {
     if (!handle) return;
-    popBackMarker(handle);
+    deps.hold(popBackMarker(handle));
     handle = null;
   };
   const unsubscribeOpen = deps.on("open", onOpen);
   const unsubscribeClose = deps.on("close", onClose);
-  if (deps.getSize() > 0) onOpen();
+  if (deps.isOpen()) onOpen();
+  else releaseOrphanMarker();
   return () => {
     unsubscribeOpen();
     unsubscribeClose();
     if (handle) {
-      popBackMarker(handle);
+      void popBackMarker(handle);
       handle = null;
     }
   };
 }
 function installRouteChange(deps) {
   return subscribeRouteChange(() => {
-    if (deps.isDestroyed() || deps.getSize() <= 0) return;
+    if (deps.isDestroyed() || !deps.isOpen()) return;
     void deps.close();
   });
 }
@@ -4103,7 +4673,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;
@@ -4140,6 +4713,9 @@ function installContentDrag(deps) {
 
 // src/core/features/visual-viewport.ts
 var SAFETY_PAD = 8;
+var KEYBOARD_MIN_INSET = 1;
+var KEYBOARD_MIN_COVER = 60;
+var ZOOMED = 1.01;
 function installVisualViewport(deps) {
   if (typeof window === "undefined" || !window.visualViewport) {
     return () => {
@@ -4147,36 +4723,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);
   };
 }
@@ -4191,7 +4767,7 @@ function routeFeature() {
         teardowns.add(
           installRouteChange({
             isDestroyed: ctx.isDestroyed,
-            getSize: ctx.getSize,
+            isOpen: () => ctx.getPhase() !== "closed",
             close: () => ctx.close()
           })
         );
@@ -4200,10 +4776,10 @@ function routeFeature() {
         installRoute({
           routedTo: ctx.options.routedTo,
           closeOnBack: ctx.options.closeOnBack,
-          isTopSheet: ctx.isTopSheet,
-          getSize: ctx.getSize,
+          isOpen: () => ctx.getPhase() !== "closed",
           isDestroyed: ctx.isDestroyed,
           close: () => ctx.close("back"),
+          hold: ctx.holdSettle,
           on: ctx.on,
           sheetId: ctx.sheetId
         })
@@ -4229,6 +4805,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,
@@ -4256,21 +4833,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
       });
     }
   };
@@ -4434,36 +5004,71 @@ var BottomSheetEngine = class extends BottomSheetCore {
   }
 };
 
-// src/core/features/teleport.ts
-var resolveTeleportTarget = (target) => {
-  if (!target) return null;
-  if (typeof target !== "string") return target;
-  if (typeof document === "undefined") return null;
-  if (target === "body") return document.body;
-  return document.querySelector(target);
-};
-var teleportElements = (els, target) => {
-  const records = [];
-  for (const el of els) {
-    if (!el || el.parentNode === target) continue;
-    records.push({ el, parent: el.parentNode, next: el.nextSibling });
-    target.appendChild(el);
+// src/core/primitives/option-keys.ts
+var 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"
+];
+var 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;
+};
+
+// src/core/primitives/open-state.ts
+var closedSnapId = (points) => points.find((point) => point.size === 0)?.id;
+var syncOpen = (engine, open) => {
+  const phase = engine.state.phase;
+  const showing = phase === "open" || phase === "opening";
+  if (open && !showing) void engine.open();
+  else if (!open && showing) void engine.close();
 };
 
 // src/solid/index.tsx
@@ -4473,19 +5078,28 @@ var BottomSheet = (props) => {
   let contentEl;
   let backdropEl;
   let scrimEl;
-  const initialActive = () => props.initial ?? props.snapPoints[0]?.id ?? "default";
-  const [state, setState] = createSignal({
+  const initialSnap = () => props.initial ?? (props.open === false ? closedSnapId(props.snapPoints) : void 0);
+  const initialActive = () => initialSnap() ?? props.snapPoints[0]?.id ?? "default";
+  const [state3, setState] = createSignal({
     size: 0,
     activeId: initialActive(),
+    phase: "closed",
     isDragging: false,
     isAnimating: false,
     progress: 0
   });
   let engine = null;
   let restoreTeleport = null;
+  const [physicalMode, setPhysicalMode] = createSignal(
+    guessPhysicalMode(untrack(() => props.mode))
+  );
+  const restAtStart = untrack(
+    () => startsClosed(props.snapPoints, initialSnap(), props.allowed) ? "closed" : void 0
+  );
   onMount(() => {
     if (!sheetEl) return;
     const engineOpts = {
+      ...pickEngineOptions(props),
       element: sheetEl,
       handle: handleEl,
       scrollContainer: contentEl,
@@ -4493,30 +5107,8 @@ var BottomSheet = (props) => {
       scrim: scrimEl,
       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,
-      radius: props.radius,
-      maxHeight: props.maxHeight,
-      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
+      initial: initialSnap()
     };
-    engine = new BottomSheetEngine(engineOpts);
-    props.engineRef?.(engine);
     const teleportTarget = props.teleport === false ? null : resolveTeleportTarget(props.teleportTo);
     if (teleportTarget) {
       restoreTeleport = teleportElements(
@@ -4524,6 +5116,9 @@ var BottomSheet = (props) => {
         teleportTarget
       );
     }
+    engine = new BottomSheetEngine(engineOpts);
+    setPhysicalMode(engine.getMode());
+    props.engineRef?.(engine);
     const sync = () => {
       if (!engine) return;
       const s = engine.state;
@@ -4537,8 +5132,15 @@ var BottomSheet = (props) => {
     });
     engine.on("before-snap", (payload) => props.onBeforeSnap?.(payload));
     engine.on("before-close", (payload) => props.onBeforeClose?.(payload));
-    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) => {
@@ -4573,9 +5175,8 @@ var BottomSheet = (props) => {
   createEffect(
     on(
       () => props.snapPoints,
-      (points, prev) => {
-        if (!engine || prev === void 0) return;
-        engine.setSnapPoints(
+      (points) => {
+        engine?.setSnapPoints(
           points,
           props.allowed
         );
@@ -4586,59 +5187,72 @@ var BottomSheet = (props) => {
   createEffect(
     on(
       () => props.allowed,
-      (allowed, prev) => {
-        if (!engine || prev === void 0) return;
-        if (allowed) engine.setAllowed(allowed);
+      (allowed) => {
+        if (allowed) engine?.setAllowed(allowed);
       },
       { defer: true }
     )
   );
   createEffect(
     on(
-      () => props.persistent,
-      (value, prev) => {
-        if (!engine || prev === void 0 || value === void 0) return;
-        engine.setPersistent(value);
+      () => props.open,
+      (value) => {
+        if (value !== void 0 && engine) syncOpen(engine, value);
       },
       { defer: true }
     )
   );
+  createEffect(
+    on(
+      () => props.persistent,
+      (value) => engine?.setPersistent(value ?? false),
+      { defer: true }
+    )
+  );
   createEffect(
     on(
       () => props.disableClose,
-      (value, prev) => {
-        if (!engine || prev === void 0 || value === void 0) return;
-        engine.setDisableClose(value);
-      },
+      (value) => engine?.setDisableClose(value ?? false),
       { defer: true }
     )
   );
   createEffect(
     on(
       () => props.disableDrag,
-      (value, prev) => {
-        if (!engine || prev === void 0 || value === void 0) return;
-        engine.setDisableDrag(value);
-      },
+      (value) => engine?.setDisableDrag(value ?? false),
       { defer: true }
     )
   );
   createEffect(
     on(
       () => props.dragFromContent,
-      (value, prev) => {
-        if (!engine || prev === void 0 || value === void 0) return;
-        engine.setDragFromContent(value);
-      },
+      (value) => engine?.setDragFromContent(value ?? true),
       { defer: true }
     )
   );
   createEffect(
     on(
       () => props.dragFrom,
-      (value, prev) => {
-        if (!engine || prev === void 0 || value === void 0) return;
-        engine.setDragFrom(value);
+      (value) => {
+        if (value !== void 0) engine?.setDragFrom(value);
+      },
+      { defer: true }
+    )
+  );
+  createEffect(
+    on(
+      () => props.radius,
+      (value) => {
+        if (value !== void 0) engine?.setRadius(value);
+      },
+      { defer: true }
+    )
+  );
+  createEffect(
+    on(
+      () => props.maxHeight,
+      (value) => {
+        if (value !== void 0) engine?.setMaxHeight(value);
       },
       { defer: true }
     )
@@ -4646,16 +5260,20 @@ var BottomSheet = (props) => {
   createEffect(
     on(
       () => props.mode,
-      (value, prev) => {
-        if (!engine || prev === void 0 || value === void 0) return;
-        engine.setMode(value);
+      (value) => {
+        const next = value ?? "bottom";
+        engine?.setMode(next);
+        setPhysicalMode(engine ? engine.getMode() : guessPhysicalMode(next));
       },
       { defer: true }
     )
   );
   const showBackdrop = createMemo(() => props.backdrop !== false);
-  const mode = createMemo(() => props.mode ?? "bottom");
   const ariaLabel = createMemo(() => props.ariaLabel ?? "Bottom sheet");
+  const header = children(() => props.header);
+  const footer = children(() => props.footer);
+  const leftButton = children(() => props.leftButton);
+  const rightButton = children(() => props.rightButton);
   return <div class="bs-root">
       {showBackdrop() ? <div class="bs-backdrop" ref={(el) => backdropEl = el} /> : null}
       <div class="bs-screen" ref={(el) => scrimEl = el}>
@@ -4664,8 +5282,9 @@ var BottomSheet = (props) => {
       <section
     class="bs-sheet"
     ref={(el) => sheetEl = el}
-    data-mode={mode()}
-    data-active={state().activeId}
+    data-mode={physicalMode()}
+    data-bs-rest={restAtStart}
+    data-active={state3().activeId}
     role="dialog"
     aria-modal={props.focusTrap ? "true" : void 0}
     aria-label={ariaLabel()}
@@ -4675,35 +5294,39 @@ var BottomSheet = (props) => {
     ref={(el) => handleEl = el}
     role="slider"
     tabIndex={0}
-    aria-label="Resize sheet"
+    aria-label={props.handleLabel ?? "Resize sheet"}
   />
-        <Show when={props.header}>
-          <div class="bs-header">{props.header}</div>
+        <Show when={header()}>
+          <div class="bs-header">{header()}</div>
         </Show>
         <div
     class="bs-content"
     ref={(el) => contentEl = el}
     tabIndex={0}
     role="region"
-    aria-label="Sheet content"
+    aria-label={props.contentLabel ?? "Sheet content"}
   >
           {props.children}
         </div>
-        <Show when={props.footer}>
-          <div class="bs-footer">{props.footer}</div>
+        <Show when={footer()}>
+          <div class="bs-footer">{footer()}</div>
         </Show>
         <span class="bs-sr-only" role="status" aria-live="polite">
-          {state().activeId}
+          {state3().activeId}
         </span>
       </section>
-      <Show when={props.leftButton}>
-        <div class="bs-button-slot" data-side="left" data-mode={mode()}>
-          {props.leftButton}
+      <Show when={leftButton()}>
+        <div class="bs-button-slot" data-side="left" data-mode={physicalMode()}>
+          {leftButton()}
         </div>
       </Show>
-      <Show when={props.rightButton}>
-        <div class="bs-button-slot" data-side="right" data-mode={mode()}>
-          {props.rightButton}
+      <Show when={rightButton()}>
+        <div
+    class="bs-button-slot"
+    data-side="right"
+    data-mode={physicalMode()}
+  >
+          {rightButton()}
         </div>
       </Show>
     </div>;