@surdeddd/bottom-sheet 0.2.0 → 0.4.0

package/dist/react.js

@@ -1,4 +1,5 @@
 import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useMemo, useCallback, useSyncExternalStore, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var __defProp = Object.defineProperty;
@@ -23,16 +24,52 @@ var SheetStack = class {
     this.entries.splice(idx, 1);
     this.recompute();
   }
+  promote(id) {
+    const idx = this.entries.findIndex((e) => e.id === id);
+    if (idx === -1) return;
+    if (idx !== this.entries.length - 1) {
+      const [entry] = this.entries.splice(idx, 1);
+      this.entries.push(entry);
+    }
+    this.recompute();
+  }
+  update() {
+    this.recompute();
+  }
   size() {
     return this.entries.length;
   }
+  depthOf(id) {
+    const open = [];
+    for (const entry of this.entries) {
+      if (!entry.isOpen || entry.isOpen()) open.push(entry);
+    }
+    const idx = open.findIndex((e) => e.id === id);
+    if (idx === -1) return 0;
+    return open.length - 1 - idx;
+  }
   clear() {
     this.entries = [];
   }
   recompute() {
+    let top = null;
+    const open = [];
+    for (const entry of this.entries) {
+      if (!entry.isOpen || entry.isOpen()) {
+        top = entry;
+        open.push(entry);
+      }
+    }
+    if (!top && this.entries.length > 0) {
+      top = this.entries[this.entries.length - 1];
+    }
     this.entries.forEach((entry, i) => {
       entry.setZIndex(BASE_Z + i * STEP);
-      entry.setIsTop(i === this.entries.length - 1);
+      entry.setIsTop(entry === top);
+      if (entry.setDepth) {
+        const openIdx = open.indexOf(entry);
+        entry.setDepth(openIdx === -1 ? 0 : open.length - 1 - openIdx);
+      }
     });
   }
 };
@@ -135,7 +172,9 @@ var PERCENT = /^(-?\d+(?:\.\d+)?)%$/;
 var resolveSnap = (point, mode, measureFit) => {
   if (typeof point === "number") return Math.max(0, point);
   if (point === "full") return viewportSize(mode);
-  if (point === "fit") return Math.max(0, measureFit?.() ?? 0);
+  if (point === "fit" || point === "content") {
+    return Math.max(0, measureFit?.() ?? 0);
+  }
   const pctMatch = point.match(PERCENT);
   if (pctMatch) {
     const pct = parseFloat(pctMatch[1]) / 100;
@@ -323,14 +362,17 @@ function installAutoCollapse(deps) {
   const fire = () => {
     if (deps.isDestroyed()) return;
     if (deps.isDragging()) return;
-    const allowed = deps.getAllowedIds();
-    const target = allowed.find((id) => {
+    const active = deps.resolveSnap(deps.getActiveId());
+    if (!active || active.size === 0) return;
+    let target = null;
+    for (const id of deps.getAllowedIds()) {
       const snap = deps.resolveSnap(id);
-      return snap !== null && snap.size > 0;
-    });
+      if (!snap || snap.size <= 0) continue;
+      if (!target || snap.size < target.size) target = snap;
+    }
     if (!target) return;
-    if (target === deps.getActiveId()) return;
-    deps.snapTo(target);
+    if (target.id === active.id || target.size >= active.size) return;
+    deps.snapTo(target.id);
   };
   const reset = () => {
     clearTimer();
@@ -341,6 +383,7 @@ function installAutoCollapse(deps) {
     }, ms);
   };
   const unsubscribe = deps.on("snap", () => reset());
+  if ((deps.resolveSnap(deps.getActiveId())?.size ?? 0) > 0) reset();
   return () => {
     clearTimer();
     unsubscribe();
@@ -353,6 +396,7 @@ function notifyLinkedSheets(sheets, self) {
   for (const linked of sheets) {
     if (linked === self) continue;
     try {
+      if (linked.state.size === 0) continue;
       const ids = linked.getAllowedIds();
       const target = ids.find((id) => id !== "closed");
       if (target && target !== linked.state.activeId) {
@@ -367,6 +411,42 @@ function notifyLinkedSheets(sheets, self) {
 }
 
 // src/core/features/route.ts
+var closers = [];
+var handlerInstalled = false;
+var suppress = 0;
+var ensureHandler = () => {
+  if (handlerInstalled || typeof window === "undefined") return;
+  handlerInstalled = true;
+  window.addEventListener("popstate", () => {
+    if (suppress > 0) {
+      suppress -= 1;
+      return;
+    }
+    let target = null;
+    for (let i = closers.length - 1; i >= 0; i -= 1) {
+      const c = closers[i];
+      if (!c.isOpen()) continue;
+      if (!target) target = c;
+      if (c.isTop()) {
+        target = c;
+        break;
+      }
+    }
+    if (!target) return;
+    target.consumed = true;
+    const idx = closers.indexOf(target);
+    if (idx !== -1) closers.splice(idx, 1);
+    target.close();
+  });
+};
+var programmaticBack = () => {
+  suppress += 1;
+  try {
+    history.back();
+  } catch {
+    suppress = Math.max(0, suppress - 1);
+  }
+};
 function installRoute(deps) {
   if (typeof window === "undefined") {
     return () => {
@@ -376,82 +456,81 @@ function installRoute(deps) {
     return () => {
     };
   }
-  let routePushed = false;
-  let closeOnBackPushed = false;
-  let detachPopstate = null;
-  const popOurMarker = (key, expected) => {
-    const state = history.state;
-    if (state && state[key] === expected) {
-      try {
-        history.back();
-      } catch {
-      }
+  let pushed = false;
+  let closer = null;
+  const teardownEntry = () => {
+    if (closer) {
+      const idx = closers.indexOf(closer);
+      if (idx !== -1) closers.splice(idx, 1);
+    }
+    const wasConsumed = closer?.consumed ?? false;
+    closer = null;
+    if (pushed && !wasConsumed) {
+      pushed = false;
+      programmaticBack();
+    } else {
+      pushed = false;
     }
   };
   const onOpen = () => {
-    if (deps.routedTo && !detachPopstate) {
-      const target = deps.routedTo;
-      try {
-        history.pushState({ __bsRouted: target }, "", target);
-        routePushed = true;
-      } catch {
-      }
-      const onPop = (event) => {
-        if (deps.isDestroyed()) return;
-        const state = event.state;
-        if (state && state.__bsRouted === target && deps.getSize() > 0) {
-          routePushed = false;
-          void deps.close();
-        }
-      };
-      window.addEventListener("popstate", onPop);
-      detachPopstate = () => window.removeEventListener("popstate", onPop);
-    } else if (deps.closeOnBack && !detachPopstate) {
-      try {
+    if (closer) return;
+    closer = {
+      isOpen: () => !deps.isDestroyed() && deps.getSize() > 0,
+      isTop: () => deps.isTopSheet(),
+      close: () => void deps.close(),
+      consumed: false
+    };
+    ensureHandler();
+    closers.push(closer);
+    try {
+      if (deps.routedTo !== void 0) {
+        history.pushState({ __bsRouted: deps.sheetId }, "", deps.routedTo);
+      } else {
         history.pushState({ __bsSheet: deps.sheetId }, "");
-        closeOnBackPushed = true;
-      } catch {
       }
-      const onPop = () => {
-        if (deps.isDestroyed()) return;
-        if (deps.getSize() > 0 && deps.isTopSheet()) {
-          const state = history.state;
-          if (state?.__bsSheet !== deps.sheetId) closeOnBackPushed = false;
-          void deps.close();
-        }
-      };
-      window.addEventListener("popstate", onPop);
-      detachPopstate = () => window.removeEventListener("popstate", onPop);
-    }
-  };
-  const onClose = () => {
-    detachPopstate?.();
-    detachPopstate = null;
-    if (routePushed) {
-      routePushed = false;
-      if (deps.routedTo !== void 0) popOurMarker("__bsRouted", deps.routedTo);
-    }
-    if (closeOnBackPushed) {
-      closeOnBackPushed = false;
-      popOurMarker("__bsSheet", deps.sheetId);
+      pushed = true;
+    } catch {
+      pushed = false;
     }
   };
   const unsubscribeOpen = deps.on("open", onOpen);
-  const unsubscribeClose = deps.on("close", onClose);
+  const unsubscribeClose = deps.on("close", teardownEntry);
   if (deps.getSize() > 0) onOpen();
   return () => {
     unsubscribeOpen();
     unsubscribeClose();
-    detachPopstate?.();
-    detachPopstate = null;
-    if (routePushed) {
-      routePushed = false;
-      if (deps.routedTo !== void 0) popOurMarker("__bsRouted", deps.routedTo);
-    }
-    if (closeOnBackPushed) {
-      closeOnBackPushed = false;
-      popOurMarker("__bsSheet", deps.sheetId);
-    }
+    teardownEntry();
+  };
+}
+function installRouteChange(deps) {
+  if (typeof window === "undefined" || typeof history === "undefined") {
+    return () => {
+    };
+  }
+  const onChange = () => {
+    if (deps.isDestroyed() || deps.getSize() <= 0) return;
+    void deps.close();
+  };
+  const wrap = (key) => {
+    const original = history[key];
+    const patched = function(...args) {
+      original.apply(this, args);
+      onChange();
+    };
+    history[key] = patched;
+    return () => {
+      if (history[key] === patched) {
+        history[key] = original;
+      }
+    };
+  };
+  window.addEventListener("popstate", onChange);
+  const restorePush = wrap("pushState");
+  const restoreReplace = wrap("replaceState");
+  return () => {
+    window.removeEventListener("popstate", onChange);
+    restorePush();
+    restoreReplace();
   };
 }
 
@@ -553,13 +632,17 @@ function installResizeObserver(deps) {
     if (viewportSize2 > 0 && viewportSize2 < max) {
       deps.setMaxAxisSize(viewportSize2);
     }
+    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 (current && !deps.isDragging()) {
+      deps.applySize(targetSize);
+      if (wasAnimating) deps.resyncAfterCancel?.();
+    }
   };
   let resizeObserver = null;
   if (typeof ResizeObserver !== "undefined") {
@@ -674,8 +757,88 @@ function devWarn(...args) {
   }
 }
 
+// src/core/primitives/overlay-position.ts
+function resolveSheetAnchoredStyle(mode, position, inset) {
+  const sizeOffset = `calc(var(--bs-size, 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%)" };
+    case "top":
+      if (position === "sheet-top-left") return { top: sizeOffset, left: inset };
+      if (position === "sheet-top-right") return { top: sizeOffset, right: inset };
+      return { top: sizeOffset, left: "50%", transform: "translateX(-50%)" };
+    case "left":
+      if (position === "sheet-top-left") return { left: sizeOffset, top: inset };
+      if (position === "sheet-top-right") return { left: sizeOffset, bottom: inset };
+      return { left: sizeOffset, top: "50%", transform: "translateY(-50%)" };
+    case "right":
+      if (position === "sheet-top-left") return { right: sizeOffset, top: inset };
+      if (position === "sheet-top-right") return { right: sizeOffset, bottom: inset };
+      return { right: sizeOffset, top: "50%", transform: "translateY(-50%)" };
+  }
+}
+function applyOverlayPosition(ws, mode, position, inset) {
+  switch (position) {
+    case "top-left":
+      ws.top = inset;
+      ws.left = inset;
+      break;
+    case "top-center":
+      ws.top = inset;
+      ws.left = "50%";
+      ws.transform = "translateX(-50%)";
+      break;
+    case "top-right":
+      ws.top = inset;
+      ws.right = inset;
+      break;
+    case "center-left":
+      ws.top = "50%";
+      ws.left = inset;
+      ws.transform = "translateY(-50%)";
+      break;
+    case "center":
+      ws.top = "50%";
+      ws.left = "50%";
+      ws.transform = "translate(-50%, -50%)";
+      break;
+    case "center-right":
+      ws.top = "50%";
+      ws.right = inset;
+      ws.transform = "translateY(-50%)";
+      break;
+    case "bottom-left":
+      ws.bottom = inset;
+      ws.left = inset;
+      break;
+    case "bottom-center":
+      ws.bottom = inset;
+      ws.left = "50%";
+      ws.transform = "translateX(-50%)";
+      break;
+    case "bottom-right":
+      ws.bottom = inset;
+      ws.right = inset;
+      break;
+    case "sheet-top-left":
+    case "sheet-top-center":
+    case "sheet-top-right": {
+      const style = resolveSheetAnchoredStyle(mode, position, inset);
+      if (style.top !== void 0) ws.top = style.top;
+      if (style.bottom !== void 0) ws.bottom = style.bottom;
+      if (style.left !== void 0) ws.left = style.left;
+      if (style.right !== void 0) ws.right = style.right;
+      if (style.transform !== void 0) ws.transform = style.transform;
+      break;
+    }
+  }
+}
+
 // 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 ScrimController = class {
   constructor(deps, opts) {
     __publicField(this, "screenComponent");
@@ -686,6 +849,8 @@ var ScrimController = class {
     __publicField(this, "getAllowedIds");
     __publicField(this, "getResolvedSnaps");
     __publicField(this, "snapToFn");
+    __publicField(this, "closeFn");
+    __publicField(this, "scrimInteractive", false);
     __publicField(this, "scrimMode");
     __publicField(this, "backdropRange");
     __publicField(this, "screenRange");
@@ -706,14 +871,17 @@ var ScrimController = class {
     this.getAllowedIds = deps.getAllowedIds;
     this.getResolvedSnaps = deps.getResolvedSnaps;
     this.snapToFn = deps.snapTo;
+    this.closeFn = deps.close;
     this.scrimMode = opts.scrimMode ?? "full";
     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.scrimTapToCloseEnabled = opts.scrimTapToClose ?? false;
+    const explicitColor = opts.scrimColor ?? preset?.color;
+    const effectiveColor = explicitColor ?? (this.scrimMode !== "off" && !this.backdrop ? DEFAULT_SCRIM_DIM : void 0);
     if (this.screenComponent) {
       this.applyScrimStyles({
-        color: opts.scrimColor ?? preset?.color,
+        color: effectiveColor,
         blur: opts.scrimBlur ?? preset?.blur,
         interactive: opts.scrimInteractive ?? preset?.interactive ?? false
       });
@@ -847,11 +1015,15 @@ var ScrimController = class {
       }
       const onClick = () => {
         if (this.isDestroyed()) return;
+        if (this.closeFn) {
+          this.closeFn();
+          return;
+        }
         const allowed = this.getAllowedIds();
         const snaps = this.getResolvedSnaps();
         const fallback = allowed.find((id) => {
           const snap = findById(id, snaps);
-          return snap !== null && snap.size > 0;
+          return snap !== null && snap.size === 0;
         });
         if (fallback) this.snapToFn(fallback);
       };
@@ -868,6 +1040,7 @@ var ScrimController = class {
     if (this.isDestroyed()) return;
     if (enabled === this.scrimEnabled) return;
     this.scrimEnabled = enabled;
+    this.invalidateOpacityCache();
     if (!enabled) {
       this.savedScrimRanges = {
         screen: this.screenRange,
@@ -891,7 +1064,12 @@ var ScrimController = class {
         blur: cfg.blur ?? null,
         interactive: cfg.interactive
       });
-      this.screenRange = cfg.range;
+      if (!this.scrimEnabled && this.savedScrimRanges) {
+        this.savedScrimRanges = { screen: cfg.range, backdrop: cfg.range };
+      } else {
+        this.screenRange = cfg.range;
+        this.backdropRange = cfg.range;
+      }
     }
     const noop = () => {
     };
@@ -941,59 +1119,7 @@ var ScrimController = class {
     wrapper.className = "bs-scrim-overlay";
     const ws = wrapper.style;
     ws.position = "absolute";
-    switch (position) {
-      case "top-left":
-        ws.top = inset;
-        ws.left = inset;
-        break;
-      case "top-center":
-        ws.top = inset;
-        ws.left = "50%";
-        ws.transform = "translateX(-50%)";
-        break;
-      case "top-right":
-        ws.top = inset;
-        ws.right = inset;
-        break;
-      case "center-left":
-        ws.top = "50%";
-        ws.left = inset;
-        ws.transform = "translateY(-50%)";
-        break;
-      case "center":
-        ws.top = "50%";
-        ws.left = "50%";
-        ws.transform = "translate(-50%, -50%)";
-        break;
-      case "center-right":
-        ws.top = "50%";
-        ws.right = inset;
-        ws.transform = "translateY(-50%)";
-        break;
-      case "bottom-left":
-        ws.bottom = inset;
-        ws.left = inset;
-        break;
-      case "bottom-center":
-        ws.bottom = inset;
-        ws.left = "50%";
-        ws.transform = "translateX(-50%)";
-        break;
-      case "bottom-right":
-        ws.bottom = inset;
-        ws.right = inset;
-        break;
-      case "sheet-top-left":
-      case "sheet-top-center":
-      case "sheet-top-right":
-        applySheetAnchoredPosition(
-          ws,
-          this.mode,
-          position,
-          inset
-        );
-        break;
-    }
+    applyOverlayPosition(ws, this.mode, position, inset);
     if (interactive) {
       ws.pointerEvents = "auto";
     }
@@ -1052,6 +1178,7 @@ var ScrimController = class {
       }
     }
     if (opts.interactive !== void 0) {
+      this.scrimInteractive = opts.interactive;
       s.pointerEvents = opts.interactive ? "auto" : "none";
     }
   }
@@ -1066,38 +1193,9 @@ var ScrimController = class {
     const s = this.screenComponent.style;
     s.position = "fixed";
     s.inset = insetByMode[this.mode];
-    s.pointerEvents = "none";
+    s.pointerEvents = this.scrimInteractive || this.scrimTapToCloseEnabled ? "auto" : "none";
   }
 };
-function resolveSheetAnchoredStyle(mode, position, inset) {
-  const sizeOffset = `calc(var(--bs-size, 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%)" };
-    case "top":
-      if (position === "sheet-top-left") return { top: sizeOffset, left: inset };
-      if (position === "sheet-top-right") return { top: sizeOffset, right: inset };
-      return { top: sizeOffset, left: "50%", transform: "translateX(-50%)" };
-    case "left":
-      if (position === "sheet-top-left") return { left: sizeOffset, top: inset };
-      if (position === "sheet-top-right") return { left: sizeOffset, bottom: inset };
-      return { left: sizeOffset, top: "50%", transform: "translateY(-50%)" };
-    case "right":
-      if (position === "sheet-top-left") return { right: sizeOffset, top: inset };
-      if (position === "sheet-top-right") return { right: sizeOffset, bottom: inset };
-      return { right: sizeOffset, top: "50%", transform: "translateY(-50%)" };
-  }
-}
-function applySheetAnchoredPosition(ws, mode, position, inset) {
-  const style = resolveSheetAnchoredStyle(mode, position, inset);
-  if (style.top !== void 0) ws.top = style.top;
-  if (style.bottom !== void 0) ws.bottom = style.bottom;
-  if (style.left !== void 0) ws.left = style.left;
-  if (style.right !== void 0) ws.right = style.right;
-  if (style.transform !== void 0) ws.transform = style.transform;
-}
 
 // src/core/animation/animation.ts
 var easeOutBack = (t) => {
@@ -1149,6 +1247,10 @@ var tween = ({
     promise
   };
 };
+var prefersReducedMotion = () => {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
 
 // src/core/animation/spring.ts
 var DEFAULT_SPRING = {
@@ -1179,14 +1281,20 @@ var runSpring = ({
       if (cancelled) return;
       const dt = Math.min((now - lastTime) / 1e3, MAX_DT);
       lastTime = now;
-      const subDt = Math.min(dt, 1 / 240);
-      let stepsLeft = Math.max(1, Math.ceil(dt / subDt));
+      const steps = Math.max(1, Math.ceil(dt * 240));
+      const subDt = dt / steps;
+      let stepsLeft = steps;
       while (stepsLeft-- > 0) {
         const force = -cfg.stiffness * (x - to) - 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();
+        return;
+      }
       onUpdate(x, v);
       const isAtRest = Math.abs(to - x) < (cfg.restDelta ?? 0.5) && Math.abs(v) < (cfg.restSpeed ?? 0.5);
       if (isAtRest) {
@@ -1361,9 +1469,13 @@ var isVisible = (el) => {
 var focusables = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter(
   (el) => !el.hasAttribute("inert") && isVisible(el) && !el.matches("[aria-hidden='true']")
 );
+var trapStack = [];
 var installFocusTrap = (container, options = {}) => {
   if (typeof document === "undefined") return () => {
   };
+  const token = {};
+  trapStack.push(token);
+  const isActive = () => trapStack[trapStack.length - 1] === token;
   const previouslyFocused = document.activeElement;
   const focusInitial = () => {
     const initial = typeof options.initialFocus === "string" ? container.querySelector(options.initialFocus) : options.initialFocus ?? focusables(container)[0] ?? container;
@@ -1371,6 +1483,7 @@ var installFocusTrap = (container, options = {}) => {
   };
   focusInitial();
   const handleKey = (e) => {
+    if (!isActive()) return;
     if (e.key === "Escape" && options.onEscape) {
       options.onEscape();
       return;
@@ -1393,6 +1506,7 @@ var installFocusTrap = (container, options = {}) => {
     }
   };
   const handleFocusIn = (e) => {
+    if (!isActive()) return;
     const target = e.target;
     if (target && !container.contains(target)) {
       const list = focusables(container);
@@ -1405,6 +1519,8 @@ var installFocusTrap = (container, options = {}) => {
   return () => {
     if (released) return;
     released = true;
+    const idx = trapStack.indexOf(token);
+    if (idx !== -1) trapStack.splice(idx, 1);
     document.removeEventListener("keydown", handleKey, true);
     document.removeEventListener("focusin", handleFocusIn, true);
     if (previouslyFocused && document.contains(previouslyFocused)) {
@@ -1460,11 +1576,17 @@ function createInertSiblings(rootProvider) {
   return {
     apply() {
       if (typeof document === "undefined") return;
-      const root = rootProvider();
-      const parent = root.parentElement ?? document.body;
+      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 === root) continue;
+        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")) {
+          continue;
+        }
         child.setAttribute("inert", "");
         tracked.push(child);
       }
@@ -1480,7 +1602,6 @@ function createInertSiblings(rootProvider) {
 var LifecycleController = class {
   constructor(deps, opts) {
     __publicField(this, "element");
-    __publicField(this, "closeFn");
     __publicField(this, "focusTrapEnabled");
     __publicField(this, "initialFocus");
     __publicField(this, "closeOnEscape");
@@ -1494,7 +1615,6 @@ var LifecycleController = class {
     __publicField(this, "installed", false);
     __publicField(this, "destroyed", false);
     this.element = deps.element;
-    this.closeFn = deps.close;
     this.focusTrapEnabled = opts.focusTrap ?? false;
     this.initialFocus = opts.initialFocus;
     this.closeOnEscape = opts.closeOnEscape ?? true;
@@ -1504,6 +1624,9 @@ var LifecycleController = class {
     this.returnFocus = opts.returnFocus;
     this.inertSiblings = createInertSiblings(() => this.element);
   }
+  get isInstalled() {
+    return this.installed;
+  }
   install() {
     if (this.destroyed) return;
     this.installed = true;
@@ -1512,8 +1635,7 @@ var LifecycleController = class {
     }
     if (this.focusTrapEnabled && !this.releaseFocusTrap) {
       this.releaseFocusTrap = installFocusTrap(this.element, {
-        initialFocus: this.initialFocus,
-        onEscape: this.closeOnEscape ? () => void this.closeFn() : void 0
+        initialFocus: this.initialFocus
       });
     }
     if (this.inertSiblingsEnabled && this.shouldApplyInertSiblings()) {
@@ -1533,7 +1655,7 @@ var LifecycleController = class {
     this.releaseScrollLock = null;
     this.inertSiblings.remove();
     if (this.returnFocus) {
-      const target = typeof this.returnFocus === "function" ? this.returnFocus() : this.returnFocus;
+      const target = typeof this.returnFocus === "function" ? this.returnFocus() : typeof this.returnFocus === "string" ? typeof document !== "undefined" ? document.querySelector(this.returnFocus) : null : this.returnFocus;
       target?.focus?.();
     }
   }
@@ -1667,10 +1789,11 @@ var installGestures = (handle, mode, callbacks) => {
 };
 
 // src/core/primitives/rubber-band.ts
-var RUBBER_BAND_FACTOR = 0.55;
 function rubberBand(overshoot, maxAxisSize) {
   const cap = Math.min(maxAxisSize * 0.15, 80);
-  return Math.sign(overshoot) * Math.pow(Math.abs(overshoot), RUBBER_BAND_FACTOR) * Math.min(6, cap / Math.max(Math.abs(overshoot), 1));
+  if (cap <= 0) return 0;
+  const abs = Math.abs(overshoot);
+  return Math.sign(overshoot) * (cap * abs / (abs + cap));
 }
 
 // src/core/features/soft-keyboard.ts
@@ -1699,6 +1822,7 @@ var GestureController = class {
     __publicField(this, "dragStartSize", 0);
     __publicField(this, "currentPointerKind", "touch");
     __publicField(this, "keyboardDismissed", false);
+    __publicField(this, "dragSuppressed", false);
     __publicField(this, "dragPayload", { size: 0, delta: 0 });
     this.deps = deps;
   }
@@ -1709,6 +1833,11 @@ var GestureController = class {
     if (this.detach) return this.detach;
     this.detach = installGestures(this.deps.handle, this.deps.mode, {
       onStart: (_coord, kind) => {
+        if (this.deps.getDisableDrag?.()) {
+          this.dragSuppressed = true;
+          return;
+        }
+        this.dragSuppressed = false;
         this.deps.cancelAnimation();
         this.isDragging_ = true;
         this.dragStartSize = this.deps.getDragContext().size;
@@ -1719,6 +1848,7 @@ var GestureController = class {
         this.deps.emit("dragstart", { size: this.dragStartSize });
       },
       onMove: (delta) => {
+        if (this.dragSuppressed) return;
         const ctx = this.deps.getDragContext();
         const { min, max } = ctx.range;
         const maxAxis = ctx.maxAxisSize;
@@ -1742,6 +1872,10 @@ var GestureController = class {
         }
       },
       onEnd: (delta, velocity, kind) => {
+        if (this.dragSuppressed) {
+          this.dragSuppressed = false;
+          return;
+        }
         this.isDragging_ = false;
         this.keyboardDismissed = false;
         this.deps.getRoot()?.removeAttribute("data-dragging");
@@ -1752,9 +1886,17 @@ var GestureController = class {
         this.deps.settleAfterDrag(delta, velocity, kind);
       },
       onCancel: () => {
+        if (this.dragSuppressed) {
+          this.dragSuppressed = false;
+          return;
+        }
         this.isDragging_ = false;
         this.keyboardDismissed = false;
         this.deps.getRoot()?.removeAttribute("data-dragging");
+        this.deps.emit("dragend", {
+          size: this.deps.getDragContext().size,
+          velocity: 0
+        });
         const restoreTo = this.dragStartSize;
         void this.deps.animateTo(restoreTo, 0);
       }
@@ -1828,6 +1970,287 @@ function createScrollCache(deps) {
   };
 }
 
+// src/core/primitives/anchor-animations.ts
+var DEFAULT_DURATION3 = 200;
+var DEFAULT_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
+var PRESET_FRAMES = {
+  fade: {
+    enter: [{ opacity: 0 }, { opacity: 1 }],
+    exit: [{ opacity: 1 }, { opacity: 0 }]
+  },
+  scale: {
+    enter: [
+      { opacity: 0, transform: "scale(0.85)" },
+      { opacity: 1, transform: "scale(1)" }
+    ],
+    exit: [
+      { opacity: 1, transform: "scale(1)" },
+      { opacity: 0, transform: "scale(0.85)" }
+    ]
+  },
+  slide: {
+    enter: [
+      { opacity: 0, transform: "translateY(10px)" },
+      { opacity: 1, transform: "translateY(0)" }
+    ],
+    exit: [
+      { opacity: 1, transform: "translateY(0)" },
+      { opacity: 0, transform: "translateY(10px)" }
+    ]
+  },
+  pop: {
+    enter: [
+      { opacity: 0, transform: "scale(0.6)", offset: 0 },
+      { opacity: 1, transform: "scale(1.06)", offset: 0.7 },
+      { opacity: 1, transform: "scale(1)", offset: 1 }
+    ],
+    exit: [
+      { opacity: 1, transform: "scale(1)" },
+      { opacity: 0, transform: "scale(0.6)" }
+    ]
+  }
+};
+var INSTANT = {
+  finished: Promise.resolve(),
+  cancel: () => {
+  }
+};
+function resolveTransitionFrames(spec, phase) {
+  const fallback = { frames: null, duration: 0, easing: DEFAULT_EASING };
+  if (spec === "none") return fallback;
+  if (spec === void 0 || typeof spec === "string") {
+    const preset2 = PRESET_FRAMES[spec ?? "fade"];
+    return {
+      frames: preset2[phase],
+      duration: DEFAULT_DURATION3,
+      easing: DEFAULT_EASING
+    };
+  }
+  const custom = phase === "enter" ? spec.enter : spec.exit;
+  if (custom) {
+    return {
+      frames: custom,
+      duration: spec.duration ?? DEFAULT_DURATION3,
+      easing: spec.easing ?? DEFAULT_EASING
+    };
+  }
+  if (spec.preset === "none") return fallback;
+  const preset = PRESET_FRAMES[spec.preset ?? "fade"];
+  return {
+    frames: preset[phase],
+    duration: spec.duration ?? DEFAULT_DURATION3,
+    easing: spec.easing ?? DEFAULT_EASING
+  };
+}
+function runAnchorTransition(el, spec, phase) {
+  const respectReduced = typeof spec === "object" ? spec.respectReducedMotion !== false : true;
+  if (respectReduced && prefersReducedMotion()) return INSTANT;
+  const { frames, duration, easing } = resolveTransitionFrames(spec, phase);
+  if (!frames || duration <= 0) return INSTANT;
+  if (typeof el.animate !== "function") return INSTANT;
+  const animation = el.animate(frames, {
+    duration,
+    easing,
+    fill: "both"
+  });
+  const finished = animation.finished.then(() => void 0).catch(() => void 0);
+  return {
+    finished,
+    cancel: () => {
+      try {
+        animation.cancel();
+      } catch {
+        return;
+      }
+    }
+  };
+}
+
+// src/core/features/sheet-anchors.ts
+function attachAnchor(deps, opts) {
+  const doc = deps.host.ownerDocument;
+  const wrapper = doc.createElement("div");
+  wrapper.className = "bs-anchor";
+  const interactive = opts.interactive ?? true;
+  const position = opts.position ?? "sheet-top-right";
+  const isDock = position === "dock-bottom" || position === "dock-top";
+  const ws = wrapper.style;
+  ws.position = "fixed";
+  if (isDock) {
+    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 (opts.fadeRange) {
+    const [r0, r1] = opts.fadeRange;
+    const span = Math.max(r1 - r0, 1e-4);
+    ws.opacity = `clamp(0, calc((var(--bs-progress, 0) - ${r0}) / ${span}), 1)`;
+  }
+  wrapper.appendChild(opts.element);
+  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 applyVisibility = (next, animate) => {
+    if (next === visible) return;
+    visible = next;
+    inFlight?.cancel();
+    inFlight = null;
+    wrapper.style.pointerEvents = next && interactive ? "auto" : "none";
+    if (next) {
+      wrapper.style.visibility = "";
+      if (animate) {
+        inFlight = runAnchorTransition(opts.element, opts.animation, "enter");
+      }
+      return;
+    }
+    if (!animate) {
+      wrapper.style.visibility = "hidden";
+      return;
+    }
+    const handle = runAnchorTransition(opts.element, opts.animation, "exit");
+    inFlight = handle;
+    void handle.finished.then(() => {
+      if (inFlight === handle && visible === false) {
+        wrapper.style.visibility = "hidden";
+      }
+    });
+  };
+  const evaluate = (animate) => {
+    if (deps.isDestroyed()) return;
+    applyVisibility(shouldShow(deps.getState()), animate);
+  };
+  const offs = [
+    deps.on("snap", () => evaluate(true)),
+    deps.on("open", () => evaluate(true)),
+    deps.on("close", () => evaluate(true))
+  ];
+  evaluate(false);
+  return {
+    wrapper,
+    detach: () => {
+      offs.forEach((off) => off());
+      inFlight?.cancel();
+      inFlight = null;
+      if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
+    },
+    syncZ: (z) => {
+      wrapper.style.zIndex = String(z);
+    }
+  };
+}
+
+// src/core/features/scrim-stages.ts
+var matchesId = (def, activeId) => {
+  if (def.for === void 0) return false;
+  return Array.isArray(def.for) ? def.for.includes(activeId) : def.for === activeId;
+};
+var matchesRange = (def, progress) => {
+  if (!def.forRange) return false;
+  const [from, to] = def.forRange;
+  return progress >= from && progress <= to;
+};
+function installScrimStages(deps, opts) {
+  const doc = deps.host.ownerDocument;
+  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.visibility = "hidden";
+    ws.pointerEvents = "none";
+    wrapper.appendChild(def.element);
+    deps.host.appendChild(wrapper);
+    return { def, wrapper, inFlight: null };
+  });
+  let active = null;
+  const resolveActive = () => {
+    const state = deps.getState();
+    if (state.size === 0) {
+      return entries.find((e) => matchesId(e.def, state.activeId)) ?? null;
+    }
+    return entries.find((e) => matchesId(e.def, state.activeId)) ?? entries.find((e) => matchesRange(e.def, state.progress)) ?? null;
+  };
+  const hide = (entry, animate) => {
+    entry.inFlight?.cancel();
+    entry.wrapper.style.pointerEvents = "none";
+    if (!animate) {
+      entry.inFlight = null;
+      entry.wrapper.style.visibility = "hidden";
+      return;
+    }
+    const handle = runAnchorTransition(
+      entry.def.element,
+      entry.def.animation ?? opts.animation,
+      "exit"
+    );
+    entry.inFlight = handle;
+    void handle.finished.then(() => {
+      if (entry.inFlight === handle && active !== entry) {
+        entry.wrapper.style.visibility = "hidden";
+      }
+    });
+  };
+  const show = (entry, animate) => {
+    entry.inFlight?.cancel();
+    entry.inFlight = null;
+    entry.wrapper.style.visibility = "";
+    entry.wrapper.style.pointerEvents = entry.def.interactive ?? opts.interactive ?? false ? "auto" : "none";
+    if (animate) {
+      entry.inFlight = runAnchorTransition(
+        entry.def.element,
+        entry.def.animation ?? opts.animation,
+        "enter"
+      );
+    }
+  };
+  const update = (animate) => {
+    if (deps.isDestroyed()) return;
+    const next = resolveActive();
+    if (next === active) return;
+    const prev = active;
+    active = next;
+    if (prev) hide(prev, animate);
+    if (next) show(next, animate);
+  };
+  const offs = [
+    deps.on("snap", () => update(true)),
+    deps.on("open", () => update(true)),
+    deps.on("close", () => update(true))
+  ];
+  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 entries) {
+      entry.inFlight?.cancel();
+      entry.inFlight = null;
+      if (entry.wrapper.parentNode) {
+        entry.wrapper.parentNode.removeChild(entry.wrapper);
+      }
+    }
+    active = null;
+  };
+}
+
 // src/core/primitives/engine-options.ts
 var DEFAULT_FLICK_VELOCITY = 0.65;
 var DEFAULT_DRAG_THRESHOLD = 18;
@@ -1846,6 +2269,12 @@ function resolveEngineOptions(opts, extras) {
     dragThreshold: opts.dragThreshold ?? DEFAULT_DRAG_THRESHOLD,
     rubberBandEnabled: opts.rubberBand ?? true,
     closeOnBack: opts.closeOnBack ?? false,
+    persistent: opts.persistent ?? false,
+    disableClose: opts.disableClose ?? false,
+    disableDrag: opts.disableDrag ?? false,
+    closeOnRouteChange: opts.closeOnRouteChange ?? false,
+    radius: opts.radius,
+    maxHeight: opts.maxHeight,
     initialAllowed,
     initialId,
     scrim: {
@@ -1872,7 +2301,8 @@ function resolveEngineOptions(opts, extras) {
       closeOnEscape: opts.closeOnEscape,
       lockBodyScroll: opts.lockBodyScroll,
       inertSiblings: opts.inertSiblings,
-      shouldApplyInertSiblings: extras?.shouldApplyInertSiblings
+      shouldApplyInertSiblings: extras?.shouldApplyInertSiblings,
+      returnFocus: opts.returnFocusTo
     }
   };
 }
@@ -1917,6 +2347,11 @@ var BottomSheetEngine = class {
     __publicField(this, "lifecycle");
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
+    __publicField(this, "persistent");
+    __publicField(this, "disableCloseFlag");
+    __publicField(this, "disableDragFlag");
+    __publicField(this, "closeOnRouteChange");
+    __publicField(this, "maxHeightCap");
     __publicField(this, "snapPointsRaw");
     __publicField(this, "snaps");
     __publicField(this, "activeId");
@@ -1929,6 +2364,7 @@ var BottomSheetEngine = class {
     __publicField(this, "sizeWriteSentinel", new WriteSentinel());
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
+    __publicField(this, "opening", false);
     __publicField(this, "progressPayload", {
       value: 0,
       size: 0
@@ -1944,6 +2380,12 @@ var BottomSheetEngine = class {
     __publicField(this, "linkedSheets", []);
     __publicField(this, "scrollCache");
     __publicField(this, "teardowns", new TeardownStack());
+    __publicField(this, "anchors", []);
+    __publicField(this, "anchorHost", null);
+    __publicField(this, "stackZ", 100);
+    __publicField(this, "detachScrimStages", null);
+    __publicField(this, "stackEffectEnabled", false);
+    __publicField(this, "stackEffectPrimed", false);
     __publicField(this, "transformTemplate");
     const resolved = resolveEngineOptions(opts, {
       shouldApplyInertSiblings: () => {
@@ -1977,6 +2419,10 @@ var BottomSheetEngine = class {
         getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
         snapTo: (id) => {
           void this.snapTo(id);
+        },
+        close: () => {
+          if (!this.canDismiss()) return;
+          void this.close("backdrop");
         }
       },
       resolved.scrim
@@ -2000,6 +2446,11 @@ var BottomSheetEngine = class {
     );
     this.closeOnBack = resolved.closeOnBack;
     this.routedTo = opts.routedTo;
+    this.persistent = resolved.persistent;
+    this.disableCloseFlag = resolved.disableClose;
+    this.disableDragFlag = resolved.disableDrag;
+    this.closeOnRouteChange = resolved.closeOnRouteChange;
+    this.stackEffectEnabled = opts.stackEffect ?? false;
     this.snapPointsRaw = opts.snapPoints;
     this.persistKey = opts.persistKey;
     if (opts.linkedSheets) {
@@ -2012,7 +2463,7 @@ var BottomSheetEngine = class {
       this.snapPointsRaw,
       resolved.initialAllowed,
       this.mode,
-      () => this.handle.offsetHeight,
+      () => this.measureFitSize(),
       (maxAxisSize) => {
         this.element.style[layoutAxis(this.mode)] = `${maxAxisSize}px`;
       }
@@ -2046,6 +2497,19 @@ var BottomSheetEngine = class {
       io.observe(this.element);
       this.teardowns.add(() => io.disconnect());
     }
+    this.installFitObserver();
+    if (resolved.radius !== void 0) this.setRadius(resolved.radius);
+    if (resolved.maxHeight !== void 0) this.setMaxHeight(resolved.maxHeight);
+    this.applyAutoAriaLabelledBy();
+    if (this.closeOnRouteChange) {
+      this.teardowns.add(
+        installRouteChange({
+          isDestroyed: () => this.destroyed,
+          getSize: () => this.size,
+          close: () => this.close()
+        })
+      );
+    }
     if (this.persistKey) {
       this.teardowns.add(installPersist(this, this.persistKey));
     }
@@ -2070,7 +2534,7 @@ var BottomSheetEngine = class {
         isTopSheet: () => this.isTopSheet,
         getSize: () => this.size,
         isDestroyed: () => this.destroyed,
-        close: () => this.close(),
+        close: () => this.close("back"),
         on: (event, fn) => this.on(event, fn),
         sheetId: this.id
       })
@@ -2164,6 +2628,10 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
+    if (wasClosed && target.size > 0) {
+      this.opening = true;
+      sheetStack.promote(this.id);
+    }
     if (this.animation.viewTransitionsAvailable) {
       this.currentViewTransition?.skipTransition?.();
       const vt = document.startViewTransition(() => {
@@ -2178,19 +2646,26 @@ var BottomSheetEngine = class {
     } else {
       await this.animation.animateTo(target.size, velocityPxPerMs);
     }
+    this.opening = false;
     externalSignal?.removeEventListener("abort", onExternalAbort);
     if (signal.aborted) return;
     this.scrollCache.restore(id, previousSize, target.size);
     this.updateAriaSlider();
-    this.emit("snap", { id, size: target.size });
+    this.emit("snap", {
+      id,
+      size: target.size,
+      progress: this.computeProgress(target.size)
+    });
     if (wasClosed && target.size > 0) {
       this.emit("open", { id });
       this.handleOpen();
       notifyLinkedSheets(this.linkedSheets, this);
+      this.emit("opened", { id });
     }
     if (target.size === 0) {
       this.emit("close", void 0);
       this.handleClose();
+      this.emit("closed", void 0);
     }
   }
   async dragTo(targetSize, velocityOrOpts = 0) {
@@ -2215,18 +2690,76 @@ var BottomSheetEngine = class {
     const target = id ?? this.snaps.getAllowedIds().find((a) => a !== "closed") ?? this.activeId;
     return this.snapTo(target);
   }
-  close() {
+  close(reason = "programmatic") {
     if (this.destroyed) return Promise.resolve();
+    if (this.disableCloseFlag) return Promise.resolve();
+    if (this.size > 0 && this.emitBeforeClose(reason)) return Promise.resolve();
     const closedId = this.snapPointsRaw.find((p) => p.id === "closed")?.id ?? this.snaps.getAllowedIds()[0];
     return this.snapTo(closedId ?? this.activeId);
   }
-  setAllowed(ids, snap) {
+  canDismiss() {
+    return !this.persistent && !this.disableCloseFlag && !this.destroyed;
+  }
+  isTop() {
+    return this.isTopSheet;
+  }
+  depth() {
+    return sheetStack.depthOf(this.id);
+  }
+  expand() {
+    if (this.destroyed) return Promise.resolve();
+    const ids = this.allowedIdsBySize();
+    const target = ids[ids.length - 1];
+    if (!target) return Promise.resolve();
+    return this.snapTo(target);
+  }
+  collapse() {
+    if (this.destroyed) return Promise.resolve();
+    const ids = this.allowedIdsBySize();
+    const nonZero = ids.find((id) => (this.snaps.findById(id)?.size ?? 0) > 0);
+    const target = nonZero ?? ids[0];
+    if (!target) return Promise.resolve();
+    return this.snapTo(target);
+  }
+  setRadius(r) {
     if (this.destroyed) return;
-    const willSnap = snap !== void 0 && ids.includes(snap) || !ids.includes(this.activeId) && ids.length > 0;
-    if (!willSnap) {
-      this.animation.cancel();
-      this.newCycle();
+    this.element.style.setProperty(
+      "--bs-radius",
+      typeof r === "number" ? `${r}px` : r
+    );
+  }
+  setMaxHeight(h) {
+    if (this.destroyed) return;
+    const value = typeof h === "number" ? `${h}px` : h;
+    const axis = layoutAxis(this.mode);
+    this.element.style.setProperty(
+      axis === "height" ? "maxHeight" : "maxWidth",
+      value
+    );
+    if (typeof h === "number") {
+      this.maxHeightCap = h;
+      this.clampToMaxHeight();
+    } else if (typeof window !== "undefined") {
+      const probe2 = document.createElement("div");
+      probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
+      document.body.appendChild(probe2);
+      const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
+      probe2.remove();
+      this.maxHeightCap = measured > 0 ? measured : void 0;
+      this.clampToMaxHeight();
+    }
+  }
+  clampToMaxHeight() {
+    if (this.maxHeightCap === void 0) return;
+    if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
+      this.snaps.setMaxAxisSize(this.maxHeightCap);
+    }
+    if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
+      this.applySize(this.maxHeightCap);
     }
+  }
+  setAllowed(ids, snap) {
+    if (this.destroyed) return;
     this.snaps.setAllowedIds(ids);
     this.updateAriaSlider();
     if (snap && ids.includes(snap)) {
@@ -2266,6 +2799,79 @@ var BottomSheetEngine = class {
   setScrimOverlay(opts) {
     return this.scrim.setScrimOverlay(opts);
   }
+  addAnchor(opts) {
+    if (this.destroyed || typeof document === "undefined") return () => {
+    };
+    if (!this.anchorHost) {
+      this.anchorHost = this.rootEl ?? this.element.parentElement ?? document.body;
+      this.anchorHost.style.setProperty("--bs-size", `${this.size}px`);
+      this.anchorHost.style.setProperty(
+        "--bs-progress",
+        String(this.computeProgress(this.size))
+      );
+    }
+    const handle = attachAnchor(
+      {
+        mode: this.mode,
+        host: this.anchorHost,
+        getState: () => ({
+          activeId: this.activeId,
+          size: this.size,
+          progress: this.computeProgress(this.size)
+        }),
+        on: (event, fn) => this.on(event, fn),
+        isDestroyed: () => this.destroyed
+      },
+      opts
+    );
+    handle.syncZ(this.stackZ + 1);
+    this.anchors.push(handle);
+    const detach = () => {
+      const idx = this.anchors.indexOf(handle);
+      if (idx === -1) return;
+      this.anchors.splice(idx, 1);
+      handle.detach();
+    };
+    this.teardowns.add(detach);
+    return detach;
+  }
+  setScrimStages(opts) {
+    if (this.destroyed || typeof document === "undefined") return () => {
+    };
+    this.detachScrimStages?.();
+    this.detachScrimStages = null;
+    if (!opts) return () => {
+    };
+    const host = this.screenComponent?.parentElement;
+    if (!host) {
+      console.warn(
+        "[BottomSheet] setScrimStages: no scrim element mounted \u2014 pass `scrim` to the engine first."
+      );
+      return () => {
+      };
+    }
+    const detachInstalled = installScrimStages(
+      {
+        mode: this.mode,
+        host,
+        getState: () => ({
+          activeId: this.activeId,
+          size: this.size,
+          progress: this.computeProgress(this.size)
+        }),
+        on: (event, fn) => this.on(event, fn),
+        isDestroyed: () => this.destroyed
+      },
+      opts
+    );
+    const detach = () => {
+      if (this.detachScrimStages === detach) this.detachScrimStages = null;
+      detachInstalled();
+    };
+    this.detachScrimStages = detach;
+    this.teardowns.add(() => this.detachScrimStages?.());
+    return detach;
+  }
   getScrimState() {
     return { mode: this.scrim.scrimMode, enabled: this.scrim.scrimEnabled };
   }
@@ -2285,8 +2891,53 @@ var BottomSheetEngine = class {
     }
     this.updateAriaSlider();
   }
+  recompute() {
+    if (this.destroyed) return;
+    this.snaps.recompute();
+    this.scrim.invalidateOpacityCache();
+    if (this.gesture?.isDragging) return;
+    const current = this.snaps.findById(this.activeId);
+    if (current) {
+      this.size = current.size;
+      this.applySize(this.size);
+      this.updateAriaSlider();
+    }
+  }
+  measureFitSize() {
+    const vertical = layoutAxis(this.mode) === "height";
+    const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
+    const content = this.scrollContainer;
+    const natural = content ? handleSize + (vertical ? content.scrollHeight : content.scrollWidth) : handleSize;
+    if (typeof window === "undefined") return natural;
+    const viewport = vertical ? window.innerHeight : window.innerWidth;
+    return viewport > 0 ? Math.min(natural, viewport) : natural;
+  }
+  installFitObserver() {
+    if (typeof ResizeObserver === "undefined") return;
+    if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
+      return;
+    const targets = [this.handle];
+    if (this.scrollContainer && this.scrollContainer !== this.handle) {
+      targets.push(this.scrollContainer);
+    }
+    let raf = 0;
+    const ro = new ResizeObserver(() => {
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        if (this.destroyed || this.gesture?.isDragging) return;
+        this.recompute();
+      });
+    });
+    for (const t of targets) ro.observe(t);
+    this.teardowns.add(() => {
+      ro.disconnect();
+      if (raf) cancelAnimationFrame(raf);
+    });
+  }
   destroy() {
     this.destroyed = true;
+    this.opening = false;
     this.currentAbort.abort();
     this.currentViewTransition?.skipTransition?.();
     this.currentViewTransition = null;
@@ -2336,6 +2987,36 @@ var BottomSheetEngine = class {
     frozen = true;
     return cancelled;
   }
+  emitBeforeClose(reason) {
+    let cancelled = false;
+    let frozen = false;
+    this.emit("before-close", {
+      reason,
+      cancel: () => {
+        if (frozen) {
+          console.warn(
+            "[BottomSheet] before-close.cancel() called asynchronously \u2014 ignored. cancel() must be invoked synchronously inside the listener."
+          );
+          return;
+        }
+        cancelled = true;
+      }
+    });
+    frozen = true;
+    return cancelled;
+  }
+  applyAutoAriaLabelledBy() {
+    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");
+    if (!titled) return;
+    if (!titled.id) {
+      titled.id = nextInstanceId("bs-title");
+    }
+    this.element.setAttribute("aria-labelledby", titled.id);
+  }
   recomputeSnaps() {
     const seen = /* @__PURE__ */ new Set();
     for (const p of this.snapPointsRaw) {
@@ -2352,24 +3033,42 @@ var BottomSheetEngine = class {
   getAllowedRange() {
     return this.snaps.getAllowedRange();
   }
+  allowedIdsBySize() {
+    return this.snaps.getAllowedIds().slice().sort(
+      (a, b) => (this.snaps.findById(a)?.size ?? 0) - (this.snaps.findById(b)?.size ?? 0)
+    );
+  }
   updateAriaSlider() {
-    this.aria.setValue(this.snaps.getAllowedIds(), this.activeId);
+    this.aria.setValue(this.allowedIdsBySize(), this.activeId);
   }
   registerInStack() {
     this.teardowns.add(sheetStack.push({
       id: this.id,
       setZIndex: (z) => {
+        this.stackZ = z;
         this.element.style.zIndex = String(z);
         if (this.backdrop) this.backdrop.style.zIndex = String(z - 1);
+        for (const anchor of this.anchors) anchor.syncZ(z + 1);
       },
       setIsTop: (isTop) => {
         this.isTopSheet = isTop;
-        if (this.backdrop) {
-          this.backdrop.style.display = isTop ? "" : "none";
-        }
-      }
+      },
+      isOpen: () => this.size > 0 || this.opening,
+      setDepth: (depth) => this.applyStackDepth(depth)
     }));
   }
+  applyStackDepth(depth) {
+    if (!this.stackEffectEnabled) return;
+    this.element.setAttribute("data-stack-depth", String(depth));
+    if (!this.stackEffectPrimed) {
+      this.stackEffectPrimed = true;
+      const isVertical = this.mode === "bottom" || this.mode === "top";
+      this.element.style.transformOrigin = isVertical ? "50% 100%" : "0% 50%";
+      this.element.style.transition = "scale 320ms cubic-bezier(0.29, 1.04, 0.84, 0.99)";
+    }
+    const scale = Math.max(1 - depth * 0.04, 0.86);
+    this.element.style.scale = scale === 1 ? "" : String(scale);
+  }
   attach() {
     this.gesture = new GestureController({
       handle: this.handle,
@@ -2386,6 +3085,7 @@ var BottomSheetEngine = class {
         buf.rubberBandEnabled = this.rubberBandEnabled;
         return buf;
       },
+      getDisableDrag: () => this.disableDragFlag,
       cancelAnimation: () => this.animation.cancel(),
       applySize: (size) => this.applySize(size),
       animateTo: (size, velocity) => this.animation.animateTo(size, velocity),
@@ -2429,7 +3129,7 @@ var BottomSheetEngine = class {
         container: this.scrollContainer,
         isDragging: () => this.gesture?.isDragging ?? false,
         isAnimating: () => this.animation.isAnimating,
-        getAllowedIds: () => this.snaps.getAllowedIds(),
+        getAllowedIds: () => this.allowedIdsBySize(),
         getActiveId: () => this.activeId,
         snapTo: (id) => {
           void this.snapTo(id);
@@ -2458,13 +3158,16 @@ var BottomSheetEngine = class {
         },
         newCycle: () => {
           this.newCycle();
-        }
+        },
+        isAnimating: () => this.animation.isAnimating,
+        resyncAfterCancel: () => this.resyncAfterResize()
       }));
       if (this.lifecycle.closeOnEscape) {
         const onKey = (e) => {
-          if (this.destroyed) return;
+          if (this.destroyed || e.defaultPrevented) return;
+          if (!this.canDismiss()) return;
           if (e.key === "Escape" && this.isTopSheet && this.size > 0) {
-            void this.close();
+            void this.close("escape");
           }
         };
         document.addEventListener("keydown", onKey);
@@ -2494,7 +3197,7 @@ var BottomSheetEngine = class {
       handle: this.handle,
       mode: this.mode,
       isDestroyed: () => this.destroyed,
-      getAllowedIds: () => this.snaps.getAllowedIds(),
+      getAllowedIds: () => this.allowedIdsBySize(),
       getActiveId: () => this.activeId,
       snapTo: (id) => {
         void this.snapTo(id);
@@ -2515,6 +3218,7 @@ var BottomSheetEngine = class {
     });
     if (!target) return;
     const previousId = this.activeId;
+    if (target.id === previousId && target.size === this.size) return;
     if (this.emitBeforeSnap(target, previousId)) {
       const restore = this.snaps.findById(previousId);
       if (restore) {
@@ -2523,21 +3227,34 @@ var BottomSheetEngine = class {
       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;
+      sheetStack.promote(this.id);
+    }
     void this.animation.animateTo(target.size, velocity).then(() => {
+      this.opening = false;
       if (signal.aborted) return;
       this.scrollCache.restore(target.id, previousSize, target.size);
       this.updateAriaSlider();
-      this.emit("snap", { id: target.id, size: target.size });
+      this.emit("snap", {
+        id: target.id,
+        size: target.size,
+        progress: this.computeProgress(target.size)
+      });
       this.haptic();
-      if (previousId === "closed" && target.size > 0) {
+      if (previousSnapSize === 0 && target.size > 0) {
         this.emit("open", { id: target.id });
         this.handleOpen();
+        notifyLinkedSheets(this.linkedSheets, this);
+        this.emit("opened", { id: target.id });
       }
       if (target.size === 0) {
         this.emit("close", void 0);
         this.handleClose();
+        this.emit("closed", void 0);
       }
     });
   }
@@ -2559,6 +3276,9 @@ var BottomSheetEngine = class {
       if (this.scrimParent) {
         this.scrimParent.style.setProperty("--bs-size", `${size}px`);
       }
+      if (this.anchorHost && this.anchorHost !== this.scrimParent) {
+        this.anchorHost.style.setProperty("--bs-size", `${size}px`);
+      }
     }
     const progress = this.computeProgress(size);
     const progressChanged = this.progressWriteSentinel.shouldWrite(
@@ -2567,6 +3287,9 @@ var BottomSheetEngine = class {
     );
     if (progressChanged) {
       style.setProperty("--bs-progress", String(progress));
+      if (this.anchorHost) {
+        this.anchorHost.style.setProperty("--bs-progress", String(progress));
+      }
     }
     this.scrim.applyOpacity(progress, progressChanged);
     if (progressChanged && this.bus.listenerCount("progress") > 0) {
@@ -2581,6 +3304,7 @@ var BottomSheetEngine = class {
     return Math.min(Math.max((size - min) / (max - min), 0), 1);
   }
   handleOpen() {
+    sheetStack.promote(this.id);
     try {
       this.lifecycle.install();
     } catch (err) {
@@ -2594,8 +3318,31 @@ var BottomSheetEngine = class {
       });
     }
   }
+  resyncAfterResize() {
+    if (this.destroyed) return;
+    const target = this.snaps.findById(this.activeId);
+    if (!target) return;
+    this.updateAriaSlider();
+    this.emit("snap", {
+      id: target.id,
+      size: target.size,
+      progress: this.computeProgress(target.size)
+    });
+    if (target.size > 0 && !this.lifecycle.isInstalled) {
+      this.emit("open", { id: target.id });
+      this.handleOpen();
+      notifyLinkedSheets(this.linkedSheets, this);
+      this.emit("opened", { id: target.id });
+    } else if (target.size === 0 && this.lifecycle.isInstalled) {
+      this.emit("close", void 0);
+      this.handleClose();
+      this.emit("closed", void 0);
+    }
+  }
   handleClose() {
+    this.opening = false;
     this.lifecycle.release();
+    sheetStack.update();
   }
 };
 
@@ -2643,8 +3390,23 @@ function useBottomSheet(opts) {
         refresh();
         optsRef.current.onSnap?.(payload.id);
       }),
-      engine.on("dragstart", refresh),
-      engine.on("dragend", refresh)
+      engine.on("before-close", (payload) => {
+        optsRef.current.onBeforeClose?.(payload);
+      }),
+      engine.on("opened", (payload) => {
+        optsRef.current.onOpened?.(payload.id);
+      }),
+      engine.on("closed", () => {
+        optsRef.current.onClosed?.();
+      }),
+      engine.on("dragstart", (payload) => {
+        refresh();
+        optsRef.current.onDragStart?.(payload);
+      }),
+      engine.on("dragend", (payload) => {
+        refresh();
+        optsRef.current.onDragEnd?.(payload);
+      })
     ];
     return () => {
       offs.forEach((off) => off());
@@ -2682,13 +3444,34 @@ function useBottomSheet(opts) {
     []
   );
   const close = useCallback(
-    () => engineRef.current?.close() ?? Promise.resolve(),
+    (reason) => engineRef.current?.close(reason) ?? Promise.resolve(),
     []
   );
+  const expand = useCallback(
+    () => engineRef.current?.expand() ?? Promise.resolve(),
+    []
+  );
+  const collapse = useCallback(
+    () => engineRef.current?.collapse() ?? Promise.resolve(),
+    []
+  );
+  const isTop = useCallback(() => engineRef.current?.isTop() ?? false, []);
+  const depth = useCallback(() => engineRef.current?.depth() ?? 0, []);
   const setAllowed = useCallback((ids, snap) => {
     engineRef.current?.setAllowed(ids, snap);
   }, []);
   const getEngine = useCallback(() => engineRef.current, []);
+  const addAnchor = useCallback(
+    (anchorOpts) => engineRef.current?.addAnchor(anchorOpts) ?? (() => {
+    }),
+    []
+  );
+  const setScrimStages = useCallback(
+    (stagesOpts) => engineRef.current?.setScrimStages(stagesOpts) ?? (() => {
+    }),
+    []
+  );
+  const recompute = useCallback(() => engineRef.current?.recompute(), []);
   return useMemo(
     () => ({
       sheetRef,
@@ -2700,11 +3483,32 @@ function useBottomSheet(opts) {
       snapTo,
       open,
       close,
+      expand,
+      collapse,
+      isTop,
+      depth,
       setAllowed,
+      addAnchor,
+      setScrimStages,
+      recompute,
       engine: engineRef.current,
       getEngine
     }),
-    [state, snapTo, open, close, setAllowed, getEngine]
+    [
+      state,
+      snapTo,
+      open,
+      close,
+      expand,
+      collapse,
+      isTop,
+      depth,
+      setAllowed,
+      addAnchor,
+      setScrimStages,
+      recompute,
+      getEngine
+    ]
   );
 }
 var useHasMounted = () => {
@@ -2724,7 +3528,14 @@ var BottomSheet = forwardRef(
       leftButton,
       rightButton,
       screen,
+      anchors,
+      scrimStages,
       onChange,
+      onBeforeClose,
+      onOpened,
+      onClosed,
+      onDragStart,
+      onDragEnd,
       ariaLabel = "Bottom sheet",
       ariaLabelledBy,
       noSSR = false,
@@ -2741,13 +3552,21 @@ var BottomSheet = forwardRef(
       snapTo,
       open,
       close,
+      expand,
+      collapse,
+      isTop,
+      depth,
       setAllowed,
       getEngine
-    } = useBottomSheet(engineOpts);
-    const isVerticalAxis = (engineOpts.mode ?? "bottom") === "bottom" || (engineOpts.mode ?? "bottom") === "top";
+    } = useBottomSheet({
+      ...engineOpts,
+      onBeforeClose,
+      onOpened,
+      onClosed,
+      onDragStart,
+      onDragEnd
+    });
     const ariaModal = engineOpts.focusTrap === true;
-    const allowedIds = engineOpts.allowed ?? engineOpts.snapPoints.map((p) => p.id);
-    const activeIdx = allowedIds.indexOf(state.activeId);
     const lastAnnouncedRef = useRef("");
     const [announce, setAnnounce] = useState("");
     useEffect(() => {
@@ -2762,21 +3581,96 @@ var BottomSheet = forwardRef(
         snapTo,
         open,
         close,
+        expand,
+        collapse,
+        isTop,
+        depth,
         setAllowed,
         setSnapPoints: (points, allowed) => getEngine()?.setSnapPoints(points, allowed),
         setScrim: (opts) => getEngine()?.setScrim(opts),
         setScrimOverlay: (opts) => getEngine()?.setScrimOverlay(opts) ?? (() => {
         }),
+        addAnchor: (opts) => getEngine()?.addAnchor(opts) ?? (() => {
+        }),
+        setScrimStages: (opts) => getEngine()?.setScrimStages(opts) ?? (() => {
+        }),
+        recompute: () => getEngine()?.recompute(),
         getEngine,
         get state() {
           return getEngine()?.state ?? state;
         }
       }),
-      [snapTo, open, close, setAllowed, getEngine, state]
+      [
+        snapTo,
+        open,
+        close,
+        expand,
+        collapse,
+        isTop,
+        depth,
+        setAllowed,
+        getEngine,
+        state
+      ]
     );
     useEffect(() => {
       onChange?.(state);
     }, [state, onChange]);
+    const [anchorHosts, setAnchorHosts] = useState([]);
+    const anchorsKey = anchors ? JSON.stringify(
+      anchors.map((a) => [
+        a.position,
+        a.inset,
+        Array.isArray(a.showOn) ? a.showOn : a.showOn ? "fn" : null,
+        a.fadeRange,
+        a.interactive,
+        typeof a.animation === "string" ? a.animation : a.animation ? "custom" : null
+      ])
+    ) : "";
+    useEffect(() => {
+      const engine = getEngine();
+      if (!engine || !anchors || anchors.length === 0) return;
+      const hosts = [];
+      const detachers = anchors.map((a) => {
+        const host = document.createElement("div");
+        hosts.push(host);
+        const { node: _node, ...rest } = a;
+        return engine.addAnchor({ ...rest, element: host });
+      });
+      setAnchorHosts(hosts);
+      return () => {
+        detachers.forEach((d) => d());
+        setAnchorHosts([]);
+      };
+    }, [getEngine, anchorsKey]);
+    const [stageHosts, setStageHosts] = useState([]);
+    const stagesKey = scrimStages ? JSON.stringify(
+      scrimStages.stages.map((s) => [
+        s.for,
+        s.forRange,
+        s.position,
+        s.inset,
+        s.interactive,
+        typeof s.animation === "string" ? s.animation : s.animation ? "custom" : null
+      ])
+    ) : "";
+    useEffect(() => {
+      const engine = getEngine();
+      if (!engine || !scrimStages || scrimStages.stages.length === 0) return;
+      const hosts = [];
+      const defs = scrimStages.stages.map((s) => {
+        const host = document.createElement("div");
+        hosts.push(host);
+        const { node: _node, ...rest } = s;
+        return { ...rest, element: host };
+      });
+      const detach = engine.setScrimStages({ ...scrimStages, stages: defs });
+      setStageHosts(hosts);
+      return () => {
+        detach();
+        setStageHosts([]);
+      };
+    }, [getEngine, stagesKey]);
     if (noSSR && !mounted) return null;
     return /* @__PURE__ */ jsxs("div", { className: "bs-root", children: [
       backdrop && /* @__PURE__ */ jsx(
@@ -2784,7 +3678,9 @@ var BottomSheet = forwardRef(
         {
           ref: backdropRef,
           className: "bs-backdrop",
-          onClick: closeOnBackdrop ? () => void close() : void 0
+          onClick: closeOnBackdrop ? () => {
+            if (getEngine()?.canDismiss()) void close("backdrop");
+          } : void 0
         }
       ),
       /* @__PURE__ */ jsx(
@@ -2817,11 +3713,6 @@ var BottomSheet = forwardRef(
                 className: "bs-handle",
                 role: "slider",
                 tabIndex: 0,
-                "aria-orientation": isVerticalAxis ? "vertical" : "horizontal",
-                "aria-valuemin": 0,
-                "aria-valuemax": Math.max(0, allowedIds.length - 1),
-                "aria-valuenow": Math.max(0, activeIdx),
-                "aria-valuetext": state.activeId,
                 "aria-label": "Resize sheet",
                 children: typeof header === "function" ? header(state) : header
               }
@@ -2840,6 +3731,12 @@ var BottomSheet = forwardRef(
             /* @__PURE__ */ jsx("span", { className: "bs-sr-only", role: "status", "aria-live": "polite", children: announce })
           ]
         }
+      ),
+      anchorHosts.map(
+        (host, i) => anchors?.[i] ? createPortal(anchors[i].node, host) : null
+      ),
+      stageHosts.map(
+        (host, i) => scrimStages?.stages[i] ? createPortal(scrimStages.stages[i].node, host) : null
       )
     ] });
   }
@@ -2924,6 +3821,10 @@ var OverlayEngine = class {
     __publicField(this, "closeOnOutsidePointerEnabled");
     __publicField(this, "detachOutsidePointer", null);
     __publicField(this, "detachSwipe", null);
+    __publicField(this, "respectReducedMotionEnabled");
+    __publicField(this, "isTop", true);
+    __publicField(this, "backPushed", false);
+    __publicField(this, "movedToTarget", false);
     __publicField(this, "onOpenCb");
     __publicField(this, "onCloseCb");
     __publicField(this, "isOpen_", false);
@@ -2960,6 +3861,7 @@ var OverlayEngine = class {
     this.mountTarget = opts.mountTo;
     this.peekRaw = opts.peek;
     this.closeOnOutsidePointerEnabled = opts.closeOnOutsidePointer ?? false;
+    this.respectReducedMotionEnabled = opts.respectReducedMotion ?? true;
     this.onOpenCb = opts.onOpen;
     this.onCloseCb = opts.onClose;
     if (this.peekRaw !== void 0 && this.edge !== "bottom") {
@@ -3007,15 +3909,17 @@ var OverlayEngine = class {
     this.emit("before-open", void 0);
     this.isOpen_ = true;
     this.isAnimating_ = true;
+    sheetStack.promote(this.id);
     this.element.removeAttribute("hidden");
     this.element.setAttribute("data-state", "entering");
     if (this.focusTrapEnabled) {
       this.element.setAttribute("aria-modal", "true");
     }
-    const transitionStr = `transform ${this.duration}ms ${this.enterEasing}, opacity ${this.duration}ms ease-out`;
+    const dur = this.effectiveDuration();
+    const transitionStr = `transform ${dur}ms ${this.enterEasing}, opacity ${dur}ms ease-out`;
     this.element.style.transition = transitionStr;
     if (this.backdrop) {
-      this.backdrop.style.transition = `opacity ${this.duration}ms ease-out`;
+      this.backdrop.style.transition = `opacity ${dur}ms ease-out`;
     }
     const cycle = ++this.cycleNonce;
     return new Promise((resolve) => {
@@ -3027,7 +3931,7 @@ var OverlayEngine = class {
           this.element.style.opacity = "1";
           if (this.backdrop) {
             this.backdrop.style.opacity = String(this.backdropOpacity);
-            this.backdrop.style.pointerEvents = "auto";
+            this.backdrop.style.pointerEvents = this.backdropOpacity > 0 ? "auto" : "none";
             if (this.backdropFilter) {
               this.backdrop.style.backdropFilter = this.backdropFilter;
               this.backdrop.style.webkitBackdropFilter = this.backdropFilter;
@@ -3063,7 +3967,10 @@ var OverlayEngine = class {
             });
             return resolve();
           }
-          this.awaitTransition(cycle).then(() => {
+          this.awaitTransition(
+            cycle,
+            this.enterAnimation === "fade" ? "opacity" : "transform"
+          ).then(() => {
             if (this.destroyed || cycle !== this.cycleNonce) return resolve();
             this.isAnimating_ = false;
             this.element.setAttribute("data-state", "open");
@@ -3080,11 +3987,14 @@ var OverlayEngine = class {
     this.emit("before-close", void 0);
     this.isOpen_ = false;
     this.isAnimating_ = true;
+    sheetStack.update();
+    this.popBackMarker(reason);
     this.element.setAttribute("data-state", "exiting");
-    const transitionStr = `transform ${this.duration}ms ${this.exitEasing}, opacity ${this.duration}ms ease-in`;
+    const dur = this.effectiveDuration();
+    const transitionStr = `transform ${dur}ms ${this.exitEasing}, opacity ${dur}ms ease-in`;
     this.element.style.transition = transitionStr;
     if (this.backdrop) {
-      this.backdrop.style.transition = `opacity ${this.duration}ms ease-in`;
+      this.backdrop.style.transition = `opacity ${dur}ms ease-in`;
     }
     const cycle = ++this.cycleNonce;
     return new Promise((resolve) => {
@@ -3095,7 +4005,7 @@ var OverlayEngine = class {
           this.exitAnimation,
           this.peekPx
         );
-        this.element.style.opacity = "0";
+        this.element.style.opacity = this.peekPx !== void 0 ? "1" : "0";
         if (this.backdrop) {
           this.backdrop.style.opacity = "0";
           this.backdrop.style.pointerEvents = "none";
@@ -3105,7 +4015,10 @@ var OverlayEngine = class {
           }
         }
         this.releaseInteractiveListeners();
-        this.awaitTransition(cycle).then(() => {
+        this.awaitTransition(
+          cycle,
+          this.exitAnimation === "fade" ? "opacity" : "transform"
+        ).then(() => {
           if (this.destroyed || cycle !== this.cycleNonce) return resolve();
           this.isAnimating_ = false;
           if (this.peekPx === void 0) {
@@ -3133,7 +4046,11 @@ var OverlayEngine = class {
     this.releaseInteractiveListeners();
     this.releaseStackEntry?.();
     this.releaseStackEntry = null;
+    const hadOriginalParent = this.originalParent !== null;
     this.restoreMount();
+    if (this.movedToTarget && !hadOriginalParent && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
   }
   setBackdropOpacity(opacity) {
     if (this.destroyed) return;
@@ -3234,6 +4151,36 @@ var OverlayEngine = class {
         }
       }
     }
+    if (opts.duration !== void 0) this.duration = opts.duration;
+    if (opts.enterEasing !== void 0) this.enterEasing = opts.enterEasing;
+    if (opts.exitEasing !== void 0) this.exitEasing = opts.exitEasing;
+    if (opts.closeOnEscape !== void 0) {
+      this.closeOnEscape = opts.closeOnEscape;
+      if (!opts.closeOnEscape) {
+        this.detachEscape?.();
+        this.detachEscape = null;
+      } else if (this.isOpen_) {
+        this.installInteractiveListeners();
+      }
+    }
+    if (opts.closeOnBackdrop !== void 0) {
+      this.closeOnBackdropEnabled = opts.closeOnBackdrop;
+      if (!opts.closeOnBackdrop) {
+        this.detachBackdrop?.();
+        this.detachBackdrop = null;
+      } else if (this.isOpen_) {
+        this.installInteractiveListeners();
+      }
+    }
+    if (opts.closeOnOutsidePointer !== void 0) {
+      this.closeOnOutsidePointerEnabled = opts.closeOnOutsidePointer;
+      if (!opts.closeOnOutsidePointer) {
+        this.detachOutsidePointer?.();
+        this.detachOutsidePointer = null;
+      } else if (this.isOpen_) {
+        this.installInteractiveListeners();
+      }
+    }
     if (opts.children !== void 0) {
       if (opts.children === null) {
         this.clearOverlayChildren();
@@ -3267,6 +4214,22 @@ var OverlayEngine = class {
   emit(event, payload) {
     this.bus.emit(event, payload);
   }
+  effectiveDuration() {
+    return this.respectReducedMotionEnabled && prefersReducedMotion() ? 0 : this.duration;
+  }
+  popBackMarker(reason) {
+    if (!this.backPushed) return;
+    this.backPushed = false;
+    if (reason === "back") return;
+    const state = history.state;
+    if (state && state.__bsOverlay === this.id) {
+      try {
+        history.back();
+      } catch {
+        return;
+      }
+    }
+  }
   resolvePeekPx(raw) {
     if (typeof raw === "number") return Math.max(0, raw);
     try {
@@ -3288,6 +4251,7 @@ var OverlayEngine = class {
     this.originalParent = this.element.parentNode;
     this.originalNextSibling = this.element.nextSibling;
     target.appendChild(this.element);
+    this.movedToTarget = true;
     this.mounted = true;
   }
   restoreMount() {
@@ -3321,7 +4285,7 @@ var OverlayEngine = class {
       this.backdrop.style.willChange = "opacity";
     }
   }
-  awaitTransition(cycle) {
+  awaitTransition(cycle, property = "transform") {
     return new Promise((resolve) => {
       let done = false;
       const finish = () => {
@@ -3336,10 +4300,10 @@ var OverlayEngine = class {
           finish();
           return;
         }
-        if (e.propertyName === "transform") finish();
+        if (e.target === this.element && e.propertyName === property) finish();
       };
       this.element.addEventListener("transitionend", onEnd);
-      const timer = window.setTimeout(finish, this.duration + 50);
+      const timer = window.setTimeout(finish, this.effectiveDuration() + 50);
     });
   }
   installInteractiveListeners() {
@@ -3349,7 +4313,10 @@ var OverlayEngine = class {
     }
     if (this.closeOnEscape && !this.detachEscape) {
       const handler = (e) => {
-        if (e.key === "Escape" && this.isOpen_) void this.close("escape");
+        if (e.defaultPrevented) return;
+        if (e.key === "Escape" && this.isOpen_ && this.isTop) {
+          void this.close("escape");
+        }
       };
       document.addEventListener("keydown", handler);
       this.detachEscape = () => document.removeEventListener("keydown", handler);
@@ -3362,10 +4329,14 @@ var OverlayEngine = class {
     if (this.closeOnBackEnabled && typeof window !== "undefined" && !this.detachHardwareBack) {
       try {
         history.pushState({ __bsOverlay: this.id }, "");
+        this.backPushed = true;
       } catch {
       }
       const onPop = () => {
-        if (this.isOpen_) void this.close("back");
+        if (this.isOpen_ && this.isTop) {
+          this.backPushed = false;
+          void this.close("back");
+        }
       };
       window.addEventListener("popstate", onPop);
       this.detachHardwareBack = () => window.removeEventListener("popstate", onPop);
@@ -3401,43 +4372,52 @@ var OverlayEngine = class {
     const edge = this.edge;
     const isVertical = edge === "bottom" || edge === "top";
     const sign = edge === "bottom" || edge === "right" ? 1 : -1;
-    const threshold = this.swipeThreshold;
-    const velocityThreshold = this.swipeVelocityThreshold;
+    const SLOP = 8;
     let startX = 0;
     let startY = 0;
     let startT = 0;
+    let tracking = false;
     let dragging = false;
     let pointerId = null;
+    const previousTouchAction = el.style.touchAction;
+    el.style.touchAction = isVertical ? "pan-x" : "pan-y";
     const onDown = (e) => {
       if (e.button !== void 0 && e.button !== 0) return;
       pointerId = e.pointerId;
       startX = e.clientX;
       startY = e.clientY;
       startT = performance.now();
-      dragging = true;
-      el.style.transition = "none";
-      try {
-        el.setPointerCapture(e.pointerId);
-      } catch {
-      }
+      tracking = true;
+      dragging = false;
     };
     const onMove = (e) => {
-      if (!dragging || e.pointerId !== pointerId) return;
+      if (!tracking || e.pointerId !== pointerId) return;
       const delta = isVertical ? e.clientY - startY : e.clientX - startX;
+      if (!dragging) {
+        if (Math.abs(delta) < SLOP) return;
+        dragging = true;
+        el.style.transition = "none";
+        try {
+          el.setPointerCapture(e.pointerId);
+        } catch {
+        }
+      }
       const offset = Math.max(0, sign * delta);
       el.style.transform = isVertical ? `translate3d(0, ${sign * offset}px, 0)` : `translate3d(${sign * offset}px, 0, 0)`;
     };
     const finish = (e) => {
-      if (!dragging || e.pointerId !== pointerId) return;
-      dragging = false;
+      if (!tracking || e.pointerId !== pointerId) return;
+      tracking = false;
       pointerId = null;
+      if (!dragging) return;
+      dragging = false;
       const dt = performance.now() - startT || 1;
       const delta = isVertical ? e.clientY - startY : e.clientX - startX;
       const offset = Math.max(0, sign * delta);
       const velocity = sign * delta / dt;
       const size = isVertical ? el.offsetHeight : el.offsetWidth;
-      const past = offset > size * threshold || velocity > velocityThreshold;
-      el.style.transition = `transform ${this.duration}ms ${this.exitEasing}`;
+      const past = offset > size * this.swipeThreshold || velocity > this.swipeVelocityThreshold;
+      el.style.transition = `transform ${this.effectiveDuration()}ms ${this.exitEasing}`;
       if (past) {
         void this.close("swipe");
       } else {
@@ -3449,6 +4429,7 @@ var OverlayEngine = class {
     el.addEventListener("pointerup", finish);
     el.addEventListener("pointercancel", finish);
     return () => {
+      el.style.touchAction = previousTouchAction;
       el.removeEventListener("pointerdown", onDown);
       el.removeEventListener("pointermove", onMove);
       el.removeEventListener("pointerup", finish);
@@ -3463,10 +4444,12 @@ var OverlayEngine = class {
         if (this.backdrop) this.backdrop.style.zIndex = String(z - 1);
       },
       setIsTop: (isTop) => {
+        this.isTop = isTop;
         if (this.backdrop) {
           this.backdrop.style.display = isTop ? "" : "none";
         }
-      }
+      },
+      isOpen: () => this.isOpen_
     });
   }
 };
@@ -3552,7 +4535,7 @@ var Overlay = forwardRef(function Overlay2(props, ref) {
     if (openProp === void 0) return;
     if (openProp && !state.isOpen) void open();
     else if (!openProp && state.isOpen) void close();
-  }, [openProp]);
+  }, [openProp, state.isOpen]);
   useEffect(() => {
     onChange?.(state);
   }, [state, onChange]);
@@ -3684,46 +4667,34 @@ var BottomSheetFromConfig = forwardRef(function BottomSheetFromConfig2(props, re
     () => sheetRef.current,
     []
   );
-  const lastActiveIdRef = useRef(null);
-  const handleChange = (state) => {
-    const prev = lastActiveIdRef.current;
-    const next = state.activeId;
-    lastActiveIdRef.current = next;
-    const evs = eventsRef.current;
-    const hs = handlersRef.current;
-    if (evs.onSnap) {
-      const fn = hs[evs.onSnap];
-      if (typeof fn === "function") {
-        fn(next);
-      } else {
-        console.warn(
-          `[BottomSheetFromConfig] eventHandlers["${evs.onSnap}"] is not a function; onSnap is a no-op.`
-        );
-      }
-    }
-    const isClosedNext = next === "" || next === "closed";
-    const isClosedPrev = prev === null || prev === "" || prev === "closed";
-    if (isClosedPrev && !isClosedNext && evs.onOpen) {
-      const fn = hs[evs.onOpen];
-      if (typeof fn === "function") {
-        fn(next);
-      } else {
-        console.warn(
-          `[BottomSheetFromConfig] eventHandlers["${evs.onOpen}"] is not a function; onOpen is a no-op.`
-        );
-      }
-    }
-    if (!isClosedPrev && isClosedNext && evs.onClose) {
-      const fn = hs[evs.onClose];
-      if (typeof fn === "function") {
+  const invoke = (key, arg) => {
+    const evName = eventsRef.current[key];
+    if (!evName) return;
+    const fn = handlersRef.current[evName];
+    if (typeof fn === "function") {
+      if (arg === void 0) {
         fn();
       } else {
-        console.warn(
-          `[BottomSheetFromConfig] eventHandlers["${evs.onClose}"] is not a function; onClose is a no-op.`
-        );
+        fn(arg);
       }
+    } else {
+      console.warn(
+        `[BottomSheetFromConfig] eventHandlers["${evName}"] is not a function; ${key} is a no-op.`
+      );
     }
   };
+  const invokeRef = useRef(invoke);
+  invokeRef.current = invoke;
+  useEffect(() => {
+    const engine = sheetRef.current?.getEngine();
+    if (!engine) return;
+    const offs = [
+      engine.on("snap", (p) => invokeRef.current("onSnap", p.id)),
+      engine.on("open", (p) => invokeRef.current("onOpen", p.id)),
+      engine.on("close", () => invokeRef.current("onClose"))
+    ];
+    return () => offs.forEach((off) => off());
+  }, []);
   return /* @__PURE__ */ jsx(
     BottomSheet,
     {
@@ -3739,7 +4710,6 @@ var BottomSheetFromConfig = forwardRef(function BottomSheetFromConfig2(props, re
       closeOnBackdrop: derived.behavior.closeOnBackdrop,
       lockBodyScroll: derived.behavior.lockBodyScroll,
       rubberBand: derived.behavior.rubberBand,
-      onChange: handleChange,
       header: slotContent?.header,
       children: slotContent?.body
     }