@surdeddd/bottom-sheet 0.23.3 → 0.24.0

package/dist/element.js

@@ -1,8 +1,13 @@
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
 };
 var __export = (target, all) => {
   for (var name in all)
@@ -10,10 +15,25 @@ var __export = (target, all) => {
 };
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
+// src/core/primitives/shared.ts
+function shared(name, init) {
+  const host = globalThis;
+  const store = host[STORE_KEY] ?? (host[STORE_KEY] = {});
+  if (!(name in store)) store[name] = init();
+  return store[name];
+}
+var STORE_KEY;
+var init_shared = __esm({
+  "src/core/primitives/shared.ts"() {
+    STORE_KEY = /* @__PURE__ */ Symbol.for("@surdeddd/bottom-sheet/shared/1");
+  }
+});
+
 // src/core/lifecycle/sheet-stack.ts
 var BASE_Z, STEP, SheetStack, sheetStack;
 var init_sheet_stack = __esm({
   "src/core/lifecycle/sheet-stack.ts"() {
+    init_shared();
     BASE_Z = 100;
     STEP = 10;
     SheetStack = class {
@@ -80,7 +100,7 @@ var init_sheet_stack = __esm({
         });
       }
     };
-    sheetStack = new SheetStack();
+    sheetStack = shared("stack", () => new SheetStack());
   }
 });
 
@@ -116,7 +136,8 @@ function nextInstanceId(prefix) {
 var counters;
 var init_instance_id = __esm({
   "src/core/primitives/instance-id.ts"() {
-    counters = {};
+    init_shared();
+    counters = shared("instanceIds", () => ({}));
   }
 });
 
@@ -139,7 +160,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) {
@@ -155,11 +182,31 @@ var init_event_bus = __esm({
   }
 });
 
+// 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);
+  }
+}
+var init_dev_warn = __esm({
+  "src/core/primitives/dev-warn.ts"() {
+  }
+});
+
 // src/core/primitives/css-length.ts
-var probe, PROBE_ATTR, ensureProbe, isViewportAxisVertical, viewportSize, PERCENT, resolveSnap;
+var probe, rejected, warnRejected, PROBE_ATTR, ensureProbe, isViewportAxisVertical, viewportSize, PERCENT, resolveSnap;
 var init_css_length = __esm({
   "src/core/primitives/css-length.ts"() {
+    init_dev_warn();
     probe = null;
+    rejected = /* @__PURE__ */ new Set();
+    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.`
+      );
+    };
     PROBE_ATTR = "data-bs-probe";
     ensureProbe = (axis) => {
       if (typeof document === "undefined") return null;
@@ -206,25 +253,16 @@ var init_css_length = __esm({
       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);
-  }
-}
-var init_dev_warn = __esm({
-  "src/core/primitives/dev-warn.ts"() {
-  }
-});
-
 // src/core/primitives/snap-points.ts
 var resolveSnapList, VH_NOT_DVH, auditVhUsage, findNearest, allowedRange, findById, MOUSE_FLICK_VELOCITY, MOUSE_DRAG_THRESHOLD, DIRECTIONAL_INTENT_VELOCITY, findDragSettleTarget;
 var init_snap_points = __esm({
@@ -369,6 +407,7 @@ var init_snap_resolver = __esm({
       setMode(mode) {
         if (mode === this.mode) return;
         this.mode = mode;
+        this.notified = false;
         this.recompute();
       }
       setAllowedIds(ids) {
@@ -378,14 +417,20 @@ var init_snap_resolver = __esm({
       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));
       }
@@ -449,14 +494,9 @@ function installResizeObserver(deps) {
     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";
@@ -465,21 +505,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") {
@@ -491,7 +518,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 () => {
@@ -501,9 +528,16 @@ function installResizeObserver(deps) {
     document.removeEventListener("visibilitychange", onVisibility);
   };
 }
+var seatOf, sameSeat;
 var init_resize_observer = __esm({
   "src/core/features/resize-observer.ts"() {
     init_hot_path_thresholds();
+    seatOf = (deps) => {
+      const snap = deps.resolveActiveSnap();
+      const max = deps.getMaxAxisSize();
+      return { target: snap ? Math.min(snap.size, max) : null, max };
+    };
+    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;
   }
 });
 
@@ -523,7 +557,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();
@@ -540,7 +573,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);
@@ -555,13 +588,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();
@@ -572,7 +604,7 @@ function installFitObserver(deps) {
     if (raf) cancelAnimationFrame(raf);
   };
 }
-var contentTargets;
+var contentTargets, chromeTargets;
 var init_fit_observer = __esm({
   "src/core/features/fit-observer.ts"() {
     contentTargets = (scroller) => {
@@ -588,6 +620,25 @@ var init_fit_observer = __esm({
       }
       return out;
     };
+    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;
+    };
+  }
+});
+
+// src/core/features/teleport.ts
+var homes, homeRootOf;
+var init_teleport = __esm({
+  "src/core/features/teleport.ts"() {
+    homes = /* @__PURE__ */ new WeakMap();
+    homeRootOf = (root) => (root && homes.get(root)) ?? null;
   }
 });
 
@@ -706,8 +757,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();
@@ -797,11 +849,12 @@ var init_opacity_dedup = __esm({
 // 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 };
@@ -816,6 +869,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":
@@ -878,7 +938,7 @@ var init_overlay_position = __esm({
 });
 
 // src/core/controllers/scrim-controller.ts
-var VALID_CSS_LENGTH, DEFAULT_SCRIM_DIM, ScrimController;
+var VALID_CSS_LENGTH, DEFAULT_SCRIM_DIM, BACKDROP_COLOR_VAR, unit, ScrimController;
 var init_scrim_controller = __esm({
   "src/core/controllers/scrim-controller.ts"() {
     init_types();
@@ -889,6 +949,8 @@ var init_scrim_controller = __esm({
     init_overlay_position();
     VALID_CSS_LENGTH = /^-?\d+(?:\.\d+)?(?:px|em|rem|%)$/;
     DEFAULT_SCRIM_DIM = "rgba(0, 0, 0, 0.4)";
+    BACKDROP_COLOR_VAR = "--bs-backdrop-color";
+    unit = (value) => Number.isFinite(value) ? Math.min(Math.max(value, 0), 1) : 1;
     ScrimController = class {
       constructor(deps, opts) {
         __publicField(this, "screenComponent");
@@ -903,11 +965,13 @@ var init_scrim_controller = __esm({
         __publicField(this, "scrimMode");
         __publicField(this, "backdropRange");
         __publicField(this, "screenRange");
+        __publicField(this, "backdropPeak");
         __publicField(this, "scrimEnabled", true);
         __publicField(this, "savedScrimRanges", null);
         __publicField(this, "scrimTapToCloseEnabled", false);
         __publicField(this, "detachScrimTap", null);
         __publicField(this, "scrimOverlayTeardown", null);
+        __publicField(this, "placeOverlay", null);
         __publicField(this, "backdropOpacitySentinel", new WriteSentinel());
         __publicField(this, "screenOpacitySentinel", new WriteSentinel());
         __publicField(this, "lastBackdropPointer", "");
@@ -924,6 +988,8 @@ var init_scrim_controller = __esm({
         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);
@@ -953,24 +1019,19 @@ var init_scrim_controller = __esm({
           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;
@@ -985,10 +1046,7 @@ var init_scrim_controller = __esm({
               (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";
@@ -1004,6 +1062,17 @@ var init_scrim_controller = __esm({
         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;
@@ -1026,6 +1095,8 @@ var init_scrim_controller = __esm({
         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;
@@ -1038,7 +1109,7 @@ var init_scrim_controller = __esm({
           if (previous === "above-sheet" && mode !== "above-sheet") {
             s.position = "";
             s.inset = "";
-            s.pointerEvents = "";
+            this.syncPointer();
           }
           if (mode === "above-sheet") {
             this.applyAboveSheetInset();
@@ -1063,9 +1134,6 @@ var init_scrim_controller = __esm({
         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) {
@@ -1088,6 +1156,11 @@ var init_scrim_controller = __esm({
           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;
@@ -1171,8 +1244,12 @@ var init_scrim_controller = __esm({
         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";
         }
@@ -1186,8 +1263,10 @@ var init_scrim_controller = __esm({
           };
         }
         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;
           }
@@ -1211,6 +1290,7 @@ var init_scrim_controller = __esm({
         if (this.backdrop) {
           this.backdrop.style.opacity = "";
           this.backdrop.style.pointerEvents = "";
+          this.backdrop.style.removeProperty(BACKDROP_COLOR_VAR);
         }
         this.invalidateOpacityCache();
         this.lastBackdropPointer = "";
@@ -1235,13 +1315,13 @@ var init_scrim_controller = __esm({
         }
         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"
@@ -1249,14 +1329,14 @@ var init_scrim_controller = __esm({
         const s = this.screenComponent.style;
         s.position = "fixed";
         s.inset = insetByMode[this.mode];
-        s.pointerEvents = this.scrimInteractive || this.scrimTapToCloseEnabled ? "auto" : "none";
+        this.syncPointer();
       }
     };
   }
 });
 
 // src/core/animation/animation.ts
-var easeOutBack, easeOutCubic, easeLinear, easeOutQuint, tween, prefersReducedMotion;
+var easeOutBack, easeOutCubic, easeLinear, easeOutQuint, MIN_RETARGET_MS, tween, prefersReducedMotion;
 var init_animation = __esm({
   "src/core/animation/animation.ts"() {
     easeOutBack = (t) => {
@@ -1267,6 +1347,7 @@ var init_animation = __esm({
     easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
     easeLinear = (t) => t;
     easeOutQuint = (t) => 1 - Math.pow(1 - t, 5);
+    MIN_RETARGET_MS = 120;
     tween = ({
       from,
       to,
@@ -1275,12 +1356,18 @@ var init_animation = __esm({
       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;
@@ -1288,12 +1375,13 @@ var init_animation = __esm({
         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();
           }
         };
@@ -1305,6 +1393,15 @@ var init_animation = __esm({
           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
       };
     };
@@ -1316,7 +1413,7 @@ var init_animation = __esm({
 });
 
 // src/core/animation/spring.ts
-var DEFAULT_SPRING, MAX_DT, runSpring;
+var DEFAULT_SPRING, MAX_DT, MAX_DURATION_MS, runSpring;
 var init_spring = __esm({
   "src/core/animation/spring.ts"() {
     DEFAULT_SPRING = {
@@ -1327,22 +1424,32 @@ var init_spring = __esm({
       restSpeed: 0.5
     };
     MAX_DT = 1 / 30;
+    MAX_DURATION_MS = 3e3;
     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);
@@ -1351,21 +1458,19 @@ var init_spring = __esm({
           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);
           }
@@ -1378,6 +1483,11 @@ var init_spring = __esm({
           cancelAnimationFrame(rafId);
           resolveFn?.();
         },
+        retarget: (next) => {
+          if (cancelled || finished) return;
+          target = next;
+          deadline = performance.now() + maxDuration;
+        },
         promise
       };
     };
@@ -1550,21 +1660,40 @@ var init_animation_runner = __esm({
         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) {
@@ -1574,19 +1703,13 @@ var init_animation_runner = __esm({
           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 = "";
@@ -1628,7 +1751,10 @@ var init_animation_runner = __esm({
           }
         }
       }
-      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) => ({
@@ -1643,16 +1769,20 @@ var init_animation_runner = __esm({
         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());
@@ -1665,22 +1795,55 @@ var init_animation_runner = __esm({
             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() {
@@ -1703,9 +1866,10 @@ var init_animation_runner = __esm({
 });
 
 // src/core/lifecycle/focus-trap.ts
-var FOCUSABLE, isVisible, collectFocusables, focusables, containsComposed, trapStack, installFocusTrap;
+var FOCUSABLE, isVisible, collectFocusables, focusables, findDeep, FOCUS_ALLOW_ATTR, composedParent, containsComposed, isAllowedOutside, deepActiveElement, trapStack, installFocusTrap;
 var init_focus_trap = __esm({
   "src/core/lifecycle/focus-trap.ts"() {
+    init_shared();
     FOCUSABLE = [
       "a[href]",
       "area[href]",
@@ -1740,27 +1904,51 @@ var init_focus_trap = __esm({
     focusables = (root) => collectFocusables(root).filter(
       (el) => !el.hasAttribute("inert") && isVisible(el) && !el.matches("[aria-hidden='true']")
     );
+    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;
+    };
+    FOCUS_ALLOW_ATTR = "data-bs-focus-allow";
+    composedParent = (node) => {
+      const slot = node.assignedSlot;
+      if (slot) return slot;
+      const parent = node.parentNode;
+      return parent instanceof ShadowRoot ? parent.host : parent;
+    };
     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;
     };
-    trapStack = [];
+    isAllowedOutside = (node) => {
+      for (let n = node; n; n = composedParent(n)) {
+        if (n instanceof Element && n.hasAttribute(FOCUS_ALLOW_ATTR)) return true;
+      }
+      return false;
+    };
+    deepActiveElement = () => {
+      let active = document.activeElement;
+      while (active?.shadowRoot?.activeElement) {
+        active = active.shadowRoot.activeElement;
+      }
+      return active;
+    };
+    trapStack = shared("focusTraps", () => []);
     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;
@@ -1769,10 +1957,11 @@ var init_focus_trap = __esm({
           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) {
@@ -1780,6 +1969,10 @@ var init_focus_trap = __esm({
           return;
         }
         if (e.key !== "Tab") return;
+        backwards = e.shiftKey;
+        setTimeout(() => {
+          backwards = false;
+        }, 0);
         const list = focusables(container);
         if (list.length === 0) {
           e.preventDefault();
@@ -1787,7 +1980,7 @@ var init_focus_trap = __esm({
         }
         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();
@@ -1798,11 +1991,11 @@ var init_focus_trap = __esm({
       };
       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);
@@ -1826,24 +2019,29 @@ var init_focus_trap = __esm({
 });
 
 // src/core/lifecycle/scroll-lock.ts
-var lockCount, savedStyles, lockBodyScroll;
+var state, lockBodyScroll;
 var init_scroll_lock = __esm({
   "src/core/lifecycle/scroll-lock.ts"() {
-    lockCount = 0;
-    savedStyles = null;
+    init_shared();
+    state = shared("scrollLock", () => ({
+      count: 0,
+      saved: null
+    }));
     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;
@@ -1851,24 +2049,29 @@ var init_scroll_lock = __esm({
         }
         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;
         }
       };
     };
@@ -1878,32 +2081,47 @@ var init_scroll_lock = __esm({
 // src/core/features/inert-siblings.ts
 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
   };
 }
+var OWN_ROOTS, LAYER_CLASSES, isLayer;
 var init_inert_siblings = __esm({
   "src/core/features/inert-siblings.ts"() {
+    OWN_ROOTS = ".bs-root, .ovl-root";
+    LAYER_CLASSES = [
+      "bs-backdrop",
+      "bs-screen",
+      "bs-root",
+      "ovl-backdrop",
+      "ovl-root"
+    ];
+    isLayer = (el) => LAYER_CLASSES.some((name) => el.classList.contains(name));
   }
 });
 
@@ -1917,6 +2135,7 @@ var init_lifecycle_controller = __esm({
     LifecycleController = class {
       constructor(deps, opts) {
         __publicField(this, "element");
+        __publicField(this, "isTop");
         __publicField(this, "focusTrapEnabled");
         __publicField(this, "initialFocus");
         __publicField(this, "closeOnEscape");
@@ -1930,6 +2149,7 @@ var init_lifecycle_controller = __esm({
         __publicField(this, "installed", false);
         __publicField(this, "destroyed", false);
         this.element = deps.element;
+        this.isTop = deps.isTop;
         this.focusTrapEnabled = opts.focusTrap ?? false;
         this.initialFocus = opts.initialFocus;
         this.closeOnEscape = opts.closeOnEscape ?? true;
@@ -1950,12 +2170,17 @@ var init_lifecycle_controller = __esm({
         }
         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;
@@ -2130,10 +2355,14 @@ var init_gestures = __esm({
         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) {
@@ -2144,6 +2373,7 @@ var init_gestures = __esm({
         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);
@@ -2276,8 +2506,7 @@ var init_gesture_controller = __esm({
               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;
@@ -2336,7 +2565,7 @@ var init_content_gesture = __esm({
 });
 
 // src/core/primitives/logical-mode.ts
-var isLogicalMode, readDirection, resolveMode;
+var isLogicalMode, readDirection, guessPhysicalMode, resolveMode;
 var init_logical_mode = __esm({
   "src/core/primitives/logical-mode.ts"() {
     isLogicalMode = (mode) => mode === "start" || mode === "end";
@@ -2357,6 +2586,11 @@ var init_logical_mode = __esm({
       }
       return "ltr";
     };
+    guessPhysicalMode = (mode) => {
+      if (mode === "start") return "left";
+      if (mode === "end") return "right";
+      return mode ?? "bottom";
+    };
     resolveMode = (mode, el) => {
       if (!isLogicalMode(mode)) return mode;
       const rtl = readDirection(el) === "rtl";
@@ -2420,22 +2654,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();
@@ -2559,17 +2795,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);
@@ -2579,10 +2816,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;
@@ -2629,7 +2866,8 @@ function attachAnchor(deps, opts) {
     },
     syncZ: (z) => {
       wrapper.style.zIndex = String(z);
-    }
+    },
+    reposition: place
   };
 }
 var init_sheet_anchors = __esm({
@@ -2642,30 +2880,37 @@ var init_sheet_anchors = __esm({
 // src/core/features/scrim-stages.ts
 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();
@@ -2714,20 +2959,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;
   };
 }
 var matchesId, matchesRange;
@@ -2777,11 +3025,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,
@@ -2862,6 +3112,7 @@ var init_BottomSheetCore = __esm({
     init_linked_sheets();
     init_resize_observer();
     init_fit_observer();
+    init_teleport();
     init_max_height_controller();
     init_fit_measurement();
     init_slider_keyboard();
@@ -2906,6 +3157,7 @@ var init_BottomSheetCore = __esm({
         __publicField(this, "fitContentToSnap");
         __publicField(this, "settleAnimation");
         __publicField(this, "persistent");
+        __publicField(this, "keyboardInset", 0);
         __publicField(this, "disableCloseFlag");
         __publicField(this, "disableDragFlag");
         __publicField(this, "closeOnRouteChange");
@@ -2920,6 +3172,7 @@ var init_BottomSheetCore = __esm({
         __publicField(this, "detachSheetGesture", null);
         __publicField(this, "detachSliderKeyboard", null);
         __publicField(this, "rootEl", null);
+        __publicField(this, "homeRoot", null);
         __publicField(this, "destroyed", false);
         __publicField(this, "restClosed", false);
         __publicField(this, "currentViewTransition", null);
@@ -2927,8 +3180,13 @@ var init_BottomSheetCore = __esm({
         __publicField(this, "sizeWriteSentinel", new WriteSentinel());
         __publicField(this, "progressWriteSentinel", new WriteSentinel());
         __publicField(this, "isTopSheet", true);
-        __publicField(this, "opening", false);
-        __publicField(this, "promotedForOpen", false);
+        __publicField(this, "phase", "closed");
+        __publicField(this, "transition", null);
+        __publicField(this, "inFlight", null);
+        __publicField(this, "outbox", []);
+        __publicField(this, "flushing", false);
+        __publicField(this, "openPending", false);
+        __publicField(this, "settleHolds", []);
         __publicField(this, "allowOvershoot", false);
         __publicField(this, "progressPayload", {
           value: 0,
@@ -2949,6 +3207,7 @@ var init_BottomSheetCore = __esm({
         __publicField(this, "anchorHost", null);
         __publicField(this, "stackZ", 100);
         __publicField(this, "detachScrimStages", null);
+        __publicField(this, "placeScrimStages", null);
         __publicField(this, "stackEffectEnabled", false);
         __publicField(this, "stackEffectPrimed", false);
         __publicField(this, "fitDeps");
@@ -2956,13 +3215,7 @@ var init_BottomSheetCore = __esm({
         __publicField(this, "featureList", []);
         __publicField(this, "featureCtx");
         const resolved = resolveEngineOptions(opts, {
-          shouldApplyInertSiblings: () => {
-            if (typeof document === "undefined") return false;
-            const bodyChildren = Array.from(document.body.children);
-            return bodyChildren.some(
-              (c) => c === opts.element || c.contains(opts.element)
-            );
-          }
+          shouldApplyInertSiblings: () => opts.element.isConnected
         });
         this.element = opts.element;
         this.handle = opts.handle ?? opts.element;
@@ -2991,7 +3244,6 @@ var init_BottomSheetCore = __esm({
               void this.snapTo(id);
             },
             close: () => {
-              if (!this.canDismiss()) return;
               void this.close("backdrop");
             }
           },
@@ -3021,7 +3273,8 @@ var init_BottomSheetCore = __esm({
         this.lifecycle = new LifecycleController(
           {
             element: this.element,
-            close: () => this.close()
+            close: () => this.close(),
+            isTop: () => this.isTopSheet
           },
           resolved.lifecycle
         );
@@ -3048,6 +3301,7 @@ var init_BottomSheetCore = __esm({
         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,
@@ -3075,7 +3329,9 @@ var init_BottomSheetCore = __esm({
         );
         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({
@@ -3086,12 +3342,11 @@ var init_BottomSheetCore = __esm({
         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;
             }
@@ -3101,6 +3356,7 @@ var init_BottomSheetCore = __esm({
         }
         this.teardowns.add(
           installFitObserver({
+            element: this.element,
             handle: this.handle,
             scrollContainer: this.scrollContainer,
             hasFitSnap: () => this.snapPointsRaw.some(
@@ -3116,9 +3372,7 @@ var init_BottomSheetCore = __esm({
         this.applyAutoAriaLabelledBy();
         this.runFeatureStage("post");
         this.warnOrphanFeatureOptions();
-        if (this.size > 0) {
-          this.handleOpen();
-        }
+        if (this.phase === "open") this.installLifecycle(true);
       }
       buildFeatureContext(autoCollapseAfter) {
         return {
@@ -3146,21 +3400,27 @@ var init_BottomSheetCore = __esm({
           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);
           },
@@ -3199,8 +3459,9 @@ var init_BottomSheetCore = __esm({
         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)
         };
       }
@@ -3254,49 +3515,53 @@ var init_BottomSheetCore = __esm({
       getResolvedSnaps() {
         return this.snaps.getResolvedSnaps();
       }
-      async snapTo(id, velocityOrOpts = 0, _skipBeforeSnap = false) {
-        if (this.destroyed) return;
+      snapTo(id, velocityOrOpts = 0, _skipBeforeSnap = false) {
         const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : { velocity: velocityOrOpts };
-        const velocityPxPerMs = opts.velocity ?? 0;
-        const externalSignal = opts.signal;
-        if (externalSignal?.aborted) return;
+        return this.transitionTo(
+          id,
+          opts.velocity ?? 0,
+          _skipBeforeSnap,
+          opts.signal
+        );
+      }
+      transitionTo(id, velocityPxPerMs = 0, skipBeforeSnap = false, externalSignal) {
+        if (this.destroyed || externalSignal?.aborted) return Promise.resolve();
         const target = this.snaps.findById(id);
         if (!target) {
           devWarn(`[BottomSheet] unknown snap id: ${id}`);
-          return;
+          return Promise.resolve();
         }
         if (!this.snaps.getAllowedIds().includes(id)) {
           devWarn(`[BottomSheet] snap "${id}" is not in allowed list`);
-          return;
+          return Promise.resolve();
         }
-        if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
-          return;
+        if (target.size === 0 && this.closingBlocked()) return Promise.resolve();
+        if (!externalSignal && this.inFlight?.id === id) return this.inFlight.done;
+        if (!skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
+          return Promise.resolve();
         }
-        const resumingOpen = this.opening;
-        const signal = this.newCycle();
-        const onExternalAbort = () => {
-          this.animation.cancel();
-          this.newCycle();
-        };
+        const flight = { id, done: Promise.resolve() };
+        flight.done = this.runTransition(
+          target,
+          velocityPxPerMs,
+          false,
+          externalSignal,
+          flight
+        );
+        return flight.done;
+      }
+      async runTransition(target, velocityPxPerMs, fromDrag, externalSignal, flight = null) {
+        const signal = this.beginTransition(target);
+        const transition = this.transition;
+        if (signal.aborted || !transition) return;
+        this.inFlight = flight;
+        const onExternalAbort = () => this.suspend();
         externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
-        const wasClosed = this.size === 0 || resumingOpen;
-        const previousId = this.activeId;
-        const previousSize = this.size;
-        this.scrollCache.cache(previousId, previousSize, target.size);
-        this.activeId = id;
-        const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
-        const opensToRest = id === "closed" || rawTargetSize === 0;
-        if (wasClosed && !opensToRest) {
-          this.opening = true;
-          if (!resumingOpen) {
-            this.promotedForOpen = true;
-            sheetStack.promote(this.id);
-          }
-        }
-        if (this.animation.viewTransitionsAvailable) {
+        this.allowOvershoot = fromDrag;
+        if (!fromDrag && this.animation.viewTransitionsAvailable) {
           this.currentViewTransition?.skipTransition?.();
           const vt = document.startViewTransition(() => {
-            this.applySize(target.size);
+            if (!signal.aborted) this.applySize(transition.size);
           });
           vt.ready?.catch(() => {
           });
@@ -3307,25 +3572,202 @@ var init_BottomSheetCore = __esm({
           }
           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));
+        }
       }
-      completeSnap(id, targetSize, previousSize, wasClosed, withHaptic) {
-        this.scrollCache.restore(id, previousSize, targetSize);
+      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);
+        }
+      }
+      land(haptic) {
+        this.transition = null;
+        this.inFlight = null;
+        this.allowOvershoot = false;
+        this.openPending = this.size === 0 && !this.isClosedSnap(this.activeId);
         this.updateAriaSlider();
-        this.emit("snap", {
-          id,
+        this.setRestClosed(this.size === 0);
+        this.post("snap", {
+          id: this.activeId,
           size: this.size,
           progress: this.computeProgress(this.size)
         });
-        if (withHaptic) this.haptic();
-        this.setRestClosed(targetSize === 0);
-        if (wasClosed && targetSize > 0) this.emitOpenSequence(id);
-        if (targetSize === 0) this.emitCloseSequence();
+        this.settlePhase(false);
+        if (haptic) this.haptic();
+        this.flush();
+      }
+      suspend() {
+        this.animation.cancel();
+        this.currentViewTransition?.skipTransition?.();
+        this.newCycle();
+      }
+      landNow() {
+        const transition = this.transition;
+        if (this.destroyed || !transition || this.isDraggingAny()) return;
+        this.animation.cancel();
+        this.currentViewTransition?.skipTransition?.();
+        this.newCycle();
+        this.applySize(transition.size);
+        this.land(false);
+      }
+      reseat() {
+        if (this.destroyed || this.isDraggingAny()) return;
+        const active = this.snaps.findById(this.activeId);
+        if (!active) return;
+        const cap = this.snaps.getMaxAxisSize();
+        const target = cap > 0 ? Math.min(active.size, cap) : active.size;
+        this.updateAriaSlider();
+        const transition = this.transition;
+        if (transition) {
+          if (Math.abs(target - transition.size) < SIZE_WRITE_EPSILON && Math.abs(cap - transition.cap) < SIZE_WRITE_EPSILON) {
+            return;
+          }
+          transition.size = target;
+          transition.cap = cap;
+          this.applySize(this.animation.retarget(target) ? this.size : target);
+          return;
+        }
+        if (this.openPending && target > 0 && this.phase === "closed") {
+          void this.runTransition(active, 0, false);
+          return;
+        }
+        this.applySize(target);
+        this.settlePhase(true);
+        this.flush();
+      }
+      installLifecycle(promote) {
+        if (promote) sheetStack.promote(this.id);
+        if (this.lifecycle.isInstalled) return true;
+        try {
+          this.lifecycle.install();
+          return true;
+        } catch (err) {
+          this.abortOpen();
+          queueMicrotask(() => {
+            throw err;
+          });
+          return false;
+        }
+      }
+      abortOpen() {
+        this.animation.cancel();
+        if (!this.destroyed) this.newCycle();
+        this.phase = "closed";
+        this.openPending = false;
+        this.lifecycle.release();
+        sheetStack.update();
+        this.activeId = this.zeroSnapId() ?? this.activeId;
+        this.applySize(0);
+        this.setRestClosed(true);
+        this.updateAriaSlider();
+      }
+      zeroSnapId() {
+        return this.snapPointsRaw.find((p) => p.id === "closed")?.id ?? this.snaps.getAllowedIds().find((a) => this.snaps.findById(a)?.size === 0);
+      }
+      isClosedSnap(id) {
+        if (id === "closed") return true;
+        return this.snapPointsRaw.find((p) => p.id === id)?.size === 0;
+      }
+      closingBlocked() {
+        return this.disableCloseFlag && this.phase !== "closed";
+      }
+      setKeyboardInset(px) {
+        if (px === this.keyboardInset) return;
+        this.keyboardInset = px;
+        for (const host of this.varHosts()) {
+          host.style.setProperty("--bs-keyboard-inset", `${px}px`);
+        }
+      }
+      varHosts() {
+        const hosts = /* @__PURE__ */ new Set([this.element]);
+        for (const host of [
+          this.anchorHost,
+          this.scrimParent,
+          this.rootEl,
+          this.homeRoot
+        ]) {
+          if (host) hosts.add(host);
+        }
+        return hosts;
+      }
+      dismissBlocked() {
+        return (this.disableCloseFlag || this.persistent) && this.phase !== "closed";
+      }
+      post(event, payload) {
+        this.outbox.push(() => this.bus.emit(event, payload));
+      }
+      flush() {
+        if (this.flushing) return;
+        this.flushing = true;
+        try {
+          for (let next = this.outbox.shift(); next; next = this.outbox.shift()) {
+            next();
+          }
+        } finally {
+          this.flushing = false;
+        }
       }
       setRestClosed(closed) {
         if (closed === this.restClosed) return;
@@ -3333,17 +3775,6 @@ var init_BottomSheetCore = __esm({
         if (closed) this.element.setAttribute("data-bs-rest", "closed");
         else this.element.removeAttribute("data-bs-rest");
       }
-      emitOpenSequence(id) {
-        this.emit("open", { id });
-        this.handleOpen();
-        notifyLinkedSheets(this.linkedSheets, this);
-        this.emit("opened", { id });
-      }
-      emitCloseSequence() {
-        this.emit("close", void 0);
-        this.handleClose();
-        this.emit("closed", void 0);
-      }
       async dragTo(targetSize, velocityOrOpts = 0) {
         if (this.destroyed) return;
         const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : { velocity: velocityOrOpts };
@@ -3351,27 +3782,31 @@ var init_BottomSheetCore = __esm({
         const externalSignal = opts.signal;
         if (externalSignal?.aborted) return;
         this.newCycle();
-        const onExternalAbort = () => {
-          this.animation.cancel();
-          this.newCycle();
-        };
+        const onExternalAbort = () => this.suspend();
         externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
         const clamped = Math.max(0, Math.min(targetSize, this.snaps.getMaxAxisSize()));
         await this.animation.animateTo(clamped, velocityPxPerMs);
         externalSignal?.removeEventListener("abort", onExternalAbort);
-        if (this.destroyed || externalSignal?.aborted) return;
       }
       open(id) {
         if (this.destroyed) return Promise.resolve();
+        if (!id && (this.phase === "open" || this.phase === "opening")) {
+          return Promise.resolve();
+        }
         const target = id ?? this.snaps.getAllowedIds().find((a) => (this.snaps.findById(a)?.size ?? 0) > 0) ?? this.activeId;
         return this.snapTo(target);
       }
       close(reason = "programmatic") {
-        if (this.destroyed) return Promise.resolve();
-        if (this.disableCloseFlag) return Promise.resolve();
-        if (this.size > 0 && this.emitBeforeClose(reason)) return Promise.resolve();
-        const closedId = this.snapPointsRaw.find((p) => p.id === "closed")?.id ?? this.snaps.getAllowedIds().find((a) => this.snaps.findById(a)?.size === 0) ?? this.snaps.getAllowedIds()[0];
-        return this.snapTo(closedId ?? this.activeId);
+        if (this.destroyed || this.disableCloseFlag) return Promise.resolve();
+        if (this.persistent && reason !== "programmatic") return Promise.resolve();
+        const target = this.zeroSnapId() ?? this.allowedIdsBySize()[0];
+        if (target === void 0) return Promise.resolve();
+        if (this.phase === "closed" && this.activeId === target) {
+          return Promise.resolve();
+        }
+        const visible = this.phase === "open" || this.phase === "opening";
+        if (visible && this.emitBeforeClose(reason)) return Promise.resolve();
+        return this.snapTo(target);
       }
       canDismiss() {
         return !this.persistent && !this.disableCloseFlag && !this.destroyed;
@@ -3394,10 +3829,12 @@ var init_BottomSheetCore = __esm({
       }
       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;
@@ -3410,6 +3847,7 @@ var init_BottomSheetCore = __esm({
         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;
@@ -3425,9 +3863,12 @@ var init_BottomSheetCore = __esm({
         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() {
@@ -3469,13 +3910,24 @@ var init_BottomSheetCore = __esm({
         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));
       }
@@ -3516,7 +3968,7 @@ var init_BottomSheetCore = __esm({
         }
         const handle = attachAnchor(
           {
-            mode: this.mode,
+            getMode: () => this.mode,
             host: this.anchorHost,
             getState: () => ({
               activeId: this.activeId,
@@ -3554,9 +4006,9 @@ var init_BottomSheetCore = __esm({
           return () => {
           };
         }
-        const detachInstalled = installScrimStages(
+        const stages = installScrimStages(
           {
-            mode: this.mode,
+            getMode: () => this.mode,
             host,
             getState: () => ({
               activeId: this.activeId,
@@ -3569,10 +4021,14 @@ var init_BottomSheetCore = __esm({
           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;
       }
@@ -3581,32 +4037,29 @@ var init_BottomSheetCore = __esm({
       }
       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;
@@ -3614,22 +4067,11 @@ var init_BottomSheetCore = __esm({
         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;
@@ -3646,11 +4088,19 @@ var init_BottomSheetCore = __esm({
           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 = "";
@@ -3663,7 +4113,8 @@ var init_BottomSheetCore = __esm({
       }
       newCycle() {
         this.allowOvershoot = false;
-        this.opening = false;
+        this.transition = null;
+        this.inFlight = null;
         this.currentAbort.abort();
         this.currentAbort = new AbortController();
         return this.currentAbort.signal;
@@ -3686,8 +4137,9 @@ var init_BottomSheetCore = __esm({
         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");
@@ -3729,12 +4181,16 @@ var init_BottomSheetCore = __esm({
             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)
         }));
       }
@@ -3762,15 +4218,15 @@ var init_BottomSheetCore = __esm({
             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)
@@ -3894,32 +4350,19 @@ var init_BottomSheetCore = __esm({
             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");
               }
             };
@@ -3937,7 +4380,10 @@ var init_BottomSheetCore = __esm({
           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);
@@ -3950,56 +4396,46 @@ var init_BottomSheetCore = __esm({
         });
       }
       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);
@@ -4024,9 +4460,10 @@ var init_BottomSheetCore = __esm({
         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`);
@@ -4039,11 +4476,13 @@ var init_BottomSheetCore = __esm({
           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));
@@ -4053,8 +4492,9 @@ var init_BottomSheetCore = __esm({
           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;
@@ -4067,245 +4507,330 @@ var init_BottomSheetCore = __esm({
         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
-function onPopState() {
-  if (suppress > 0) {
-    suppress -= 1;
-    const rebrand = pendingRebrands.shift();
-    if (rebrand) rebrand();
-    maybeTeardownListener();
-    return;
-  }
-  if (entries.length === 0) {
-    notifyRouteChange();
-    maybeTeardownListener();
-    return;
-  }
-  let target = null;
-  let targetIdx = -1;
-  for (let i = entries.length - 1; i >= 0; i -= 1) {
-    const entry = entries[i];
-    if (!entry.surface.isOpen()) continue;
-    if (!target) {
-      target = entry;
-      targetIdx = i;
+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 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);
     }
-    if (entry.surface.isTop()) {
-      target = entry;
-      targetIdx = i;
-      break;
+  } else if (isMarker(landed)) {
+    state2.position = null;
+    traverse(-1, byUser ? "skip" : "pop");
+  } else {
+    state2.position = null;
+    if (byUser && !grew && state2.live.length > 0) {
+      closeAbove(state2.live.length - 1);
     }
   }
-  if (!target) {
-    const removed = entries.pop();
-    if (removed) removed.live = false;
-    maybeTeardownListener();
-    return;
+  const moved = location.href !== state2.href;
+  state2.href = location.href;
+  if (kind === void 0 && moved && (liveBefore === 0 || !within)) {
+    notifyRouteChange();
   }
-  target.live = false;
-  entries.splice(targetIdx, 1);
-  const settled = target;
-  void Promise.resolve(settled.surface.close()).then(() => {
-    if (settled.surface.isOpen()) restore(settled);
-  });
+  settleIfIdle();
   maybeTeardownListener();
 }
-function restore(entry) {
-  if (!hasWindow() || !hasHistory()) return;
-  entry.live = true;
-  runInternal(() => {
-    try {
-      history.pushState(brandMarker(entry.surface), "", entry.surface.url);
-    } catch {
-      entry.live = false;
-    }
-  });
-  if (entry.live) {
-    entries.push(entry);
-    ensureListener();
-  }
-}
 function pushBackMarker(surface) {
-  const entry = { surface, priorUrl: void 0, live: false };
-  if (!hasWindow() || !hasHistory()) {
-    return entry;
-  }
-  entry.priorUrl = surface.url !== void 0 ? location.href : void 0;
-  runInternal(() => {
-    try {
-      history.pushState(brandMarker(surface), "", surface.url);
-      entry.live = true;
-    } catch {
-      entry.live = false;
-    }
-  });
-  if (entry.live) {
-    entries.push(entry);
-    ensureListener();
-  }
+  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);
+  });
 }
 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();
   };
 }
-var entries, subscribers, suppress, internalDepth, pendingRebrands, listenerInstalled, patchInstalled, origPushState, origReplaceState, patchedPushState, patchedReplaceState, hasWindow, hasHistory, brandMarker, runInternal, notifyRouteChange, ensureListener, maybeTeardownListener, installPatch, removePatch;
+var MARKER, STACK, DEPTH, ROUTED, SETTLE_TIMEOUT_MS, state2, hasHistory, plain, depthOf, isMarker, inStack, foreignKeys, markerFor, urlForDepth, runInternal, notifyRouteChange, ensureListener, maybeTeardownListener, settleIfIdle, traverse, newStackId, startStack, enlist, sameBrand, rebrand, closeAbove, wrap, installPatch, removePatch;
 var init_history_coordinator = __esm({
   "src/core/features/history-coordinator.ts"() {
-    entries = [];
-    subscribers = /* @__PURE__ */ new Set();
-    suppress = 0;
-    internalDepth = 0;
-    pendingRebrands = [];
-    listenerInstalled = false;
-    patchInstalled = false;
-    origPushState = null;
-    origReplaceState = null;
-    patchedPushState = null;
-    patchedReplaceState = null;
-    hasWindow = () => typeof window !== "undefined";
-    hasHistory = () => typeof history !== "undefined";
-    brandMarker = (surface) => ({
+    init_shared();
+    MARKER = "__bs";
+    STACK = "__bsStack";
+    DEPTH = "__bsDepth";
+    ROUTED = "__bsRouted";
+    SETTLE_TIMEOUT_MS = 1e3;
+    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
+      })
+    );
+    hasHistory = () => typeof window !== "undefined" && typeof history !== "undefined";
+    plain = (value) => value !== null && typeof value === "object" && !Array.isArray(value) ? value : null;
+    depthOf = (value) => {
+      const depth = value?.[DEPTH];
+      return typeof depth === "number" ? depth : null;
+    };
+    isMarker = (value) => value?.[MARKER] === true;
+    inStack = (value) => value !== null && state2.stackId !== void 0 && value[STACK] === state2.stackId && depthOf(value) !== null;
+    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;
+    };
+    markerFor = (surface, depth) => ({
+      ...foreignKeys(history.state),
       ...surface.markerState(),
-      __bs: true
+      [MARKER]: true,
+      [STACK]: state2.stackId,
+      [DEPTH]: depth
     });
+    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;
+    };
     runInternal = (fn) => {
-      internalDepth += 1;
+      state2.internal += 1;
       try {
         fn();
+        return true;
+      } catch {
+        return false;
       } finally {
-        internalDepth -= 1;
+        state2.internal -= 1;
       }
     };
     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;
+          });
+        }
+      }
     };
     ensureListener = () => {
-      if (listenerInstalled || !hasWindow()) return;
+      if (state2.listening || !hasHistory()) return;
       window.addEventListener("popstate", onPopState);
-      listenerInstalled = true;
+      state2.listening = true;
     };
     maybeTeardownListener = () => {
-      if (!listenerInstalled) return;
-      if (entries.length > 0 || subscribers.size > 0 || suppress > 0) return;
-      if (hasWindow()) window.removeEventListener("popstate", onPopState);
-      listenerInstalled = false;
+      if (!state2.listening) return;
+      if (state2.live.length > 0 || state2.subscribers.size > 0 || state2.pending.length > 0 || state2.leftovers) {
+        return;
+      }
+      if (hasHistory()) window.removeEventListener("popstate", onPopState);
+      state2.listening = false;
+    };
+    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();
+    };
+    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();
+      }, SETTLE_TIMEOUT_MS);
+      ensureListener();
+      const moved = runInternal(() => {
+        if (delta < 0) history.back();
+        else history.forward();
+      });
+      if (!moved) {
+        state2.pending.pop();
+        settleIfIdle();
+      }
+    };
+    newStackId = () => `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+    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(() => {
+        history.replaceState(
+          { ...foreignKeys(current), [STACK]: state2.stackId, [DEPTH]: 0 },
+          "",
+          location.href
+        );
+      });
+    };
+    enlist = (entry) => {
+      if (state2.pending.length > 0) state2.deferred.push(entry);
+      else pushEntry(entry);
+    };
+    sameBrand = (a, b) => {
+      for (const key of /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])) {
+        if (key.startsWith(MARKER) && a[key] !== b[key]) return false;
+      }
+      return true;
+    };
+    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;
+    };
+    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 {
+          closing = entry.surface.close();
+        } catch (err) {
+          queueMicrotask(() => {
+            throw err;
+          });
+        }
+        void Promise.resolve(closing).then(() => {
+          if (!entry.surface.isOpen()) return;
+          const known = (e) => e.surface === entry.surface;
+          if (state2.live.some(known) || state2.deferred.some(known)) return;
+          enlist(entry);
+        });
+      }
+    };
+    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();
+      }
     };
     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;
+      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 };
+      }
     };
     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;
+      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;
+      }
     };
   }
 });
@@ -4321,36 +4846,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();
   });
 }
@@ -4393,7 +4919,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;
@@ -4444,43 +4973,47 @@ 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);
   };
 }
-var SAFETY_PAD;
+var SAFETY_PAD, KEYBOARD_MIN_INSET, KEYBOARD_MIN_COVER, ZOOMED;
 var init_visual_viewport = __esm({
   "src/core/features/visual-viewport.ts"() {
+    init_resize_observer();
     SAFETY_PAD = 8;
+    KEYBOARD_MIN_INSET = 1;
+    KEYBOARD_MIN_COVER = 60;
+    ZOOMED = 1.01;
   }
 });
 
@@ -4494,7 +5027,7 @@ function routeFeature() {
         teardowns.add(
           installRouteChange({
             isDestroyed: ctx.isDestroyed,
-            getSize: ctx.getSize,
+            isOpen: () => ctx.getPhase() !== "closed",
             close: () => ctx.close()
           })
         );
@@ -4503,10 +5036,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
         })
@@ -4532,6 +5065,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,
@@ -4559,21 +5093,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
       });
     }
   };
@@ -4766,11 +5293,88 @@ var init_BottomSheetEngine = __esm({
   }
 });
 
+// src/core/primitives/open-state.ts
+var closedSnapId, syncOpen;
+var init_open_state = __esm({
+  "src/core/primitives/open-state.ts"() {
+    closedSnapId = (points) => points.find((point) => point.size === 0)?.id;
+    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/core/primitives/option-keys.ts
+var ENGINE_OPTION_KEYS, pickEngineOptions;
+var init_option_keys = __esm({
+  "src/core/primitives/option-keys.ts"() {
+    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"
+    ];
+    pickEngineOptions = (source) => {
+      const out = {};
+      for (const key of ENGINE_OPTION_KEYS) {
+        const value = source[key];
+        if (value !== void 0) out[key] = value;
+      }
+      return out;
+    };
+  }
+});
+
 // src/web-component/baseStyles.ts
 var baseStyles;
 var init_baseStyles = __esm({
   "src/web-component/baseStyles.ts"() {
-    baseStyles = `:where(.bs-root){--bs-surface-d:#ffffff;--bs-surface-border-d:rgba(225,227,237,1);--bs-radius-d:20px;--bs-handle-color-d:rgba(26,22,20,0.3);--bs-handle-width:40px;--bs-handle-height:5px;--bs-z-backdrop:90;--bs-z-sheet:100;--bs-backdrop-color-d:rgba(0,0,0,0.5);--bs-scrim-color-d:transparent;--bs-scrim-blur:0px;--bs-z-scrim:calc(var(--bs-z-sheet) - 1);--bs-size:0px;--bs-progress:0}.bs-backdrop{position:fixed;inset:0;background:var(--bs-backdrop-color,var(--bs-backdrop-color-d));opacity:0;pointer-events:none;z-index:var(--bs-z-backdrop);transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-backdrop,.bs-root[data-animating="true"] .bs-backdrop{transition:none}.bs-sheet{position:fixed;background:var(--bs-surface,var(--bs-surface-d));box-shadow:var(--bs-shadow,var(--bs-shadow-auto,none));--bs-shadow-fade:clamp(0,calc(var(--bs-progress,0) * 8),1);z-index:var(--bs-z-sheet);pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;user-select:none;overscroll-behavior:contain}.bs-sheet[data-mode="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));padding-bottom:env(safe-area-inset-bottom);--bs-shadow-auto:0 calc(var(--bs-progress,0) * -2px - 3px) calc(var(--bs-progress,0) * 18px + 12px) rgba( 0,0,0,calc(var(--bs-shadow-fade) * (var(--bs-progress,0) * 0.15 + 0.12)) )}.bs-sheet[data-mode="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom:1px solid var(--bs-surface-border,var(--bs-surface-border-d));flex-direction:column-reverse;--bs-shadow-auto:0 3px 12px rgba(0,0,0,calc(var(--bs-shadow-fade) * 0.12));padding-top:env(safe-area-inset-top)}.bs-sheet[data-mode="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:3px 0 12px rgba(0,0,0,calc(var(--bs-shadow-fade) * 0.12))}.bs-sheet[data-mode="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:-3px 0 12px rgba(0,0,0,calc(var(--bs-shadow-fade) * 0.12))}.bs-sheet[data-bs-rest="closed"]{box-shadow:none;visibility:hidden}.bs-sheet[data-bs-webgl="on"],.bs-sheet[data-bs-webgl="on"] .bs-handle,.bs-sheet[data-bs-webgl="on"] .bs-header,.bs-sheet[data-bs-webgl="on"] .bs-footer{background:transparent;box-shadow:none}.bs-sheet[data-mode="left"] .bs-content{padding-right:36px}.bs-sheet[data-mode="right"] .bs-content{padding-left:36px}.bs-handle{flex-shrink:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;padding:var(--bs-handle-padding,8px 16px 4px);cursor:grab;touch-action:none;user-select:none;background:var(--bs-surface,var(--bs-surface-d));-webkit-tap-highlight-color:transparent;outline:none;position:relative}.bs-handle:active{cursor:grabbing}.bs-handle:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:var(--bs-radius,var(--bs-radius-d))}.bs-handle::before{content:"";display:block;width:var(--bs-handle-width);height:var(--bs-handle-height);background:var(--bs-handle-color,var(--bs-handle-color-d));border-radius:calc(var(--bs-handle-height) / 2);margin:0 auto 8px;transition:width 0.15s ease,background 0.15s ease,transform 0.15s ease;pointer-events:none}.bs-sheet[data-mode="left"] .bs-handle,.bs-sheet[data-mode="right"] .bs-handle{position:absolute;top:0;bottom:0;width:28px;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;background:var(--bs-surface,var(--bs-surface-d));z-index:1;overflow:hidden}.bs-sheet[data-mode="left"] .bs-handle>*,.bs-sheet[data-mode="right"] .bs-handle>*{display:none}.bs-sheet[data-mode="left"] .bs-handle{right:0;border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="right"] .bs-handle{left:0;border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="left"] .bs-handle::before,.bs-sheet[data-mode="right"] .bs-handle::before{width:var(--bs-handle-height);height:var(--bs-handle-width);margin:0}.bs-sheet:hover .bs-handle::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 15%)}.bs-handle:active::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 35%);transform:scaleX(1.15)}.bs-handle.bs-handle--ticks::after{content:"";display:block;position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:calc(var(--bs-handle-width) * 2);height:3px;background-image:radial-gradient( circle,var(--bs-handle-color,var(--bs-handle-color-d)) 0 1.5px,transparent 1.6px );background-size:8px 3px;background-repeat:repeat-x;background-position:center;opacity:0;transition:opacity 0.18s ease-out;pointer-events:none}.bs-root[data-dragging="true"] .bs-handle.bs-handle--ticks::after{opacity:0.4}.bs-sheet[data-mode="top"] .bs-handle.bs-handle--ticks::after{bottom:auto;top:6px}.bs-sheet[data-mode="left"] .bs-handle.bs-handle--ticks::after,.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:3px;height:calc(var(--bs-handle-width) * 2);background-size:3px 8px;background-repeat:repeat-y;margin-left:calc(var(--bs-handle-height) + 6px)}.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{margin-left:calc(-1 * (var(--bs-handle-height) + 6px))}.bs-header{flex:0 0 auto;min-height:var(--bs-header-min-height,0px);padding:var(--bs-header-padding,0 16px 8px);background:var(--bs-surface,var(--bs-surface-d))}.bs-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;padding:var(--bs-content-padding,0 16px 16px)}.bs-sheet[data-bs-fit-content="moving"] .bs-content{scroll-padding-bottom:var(--bs-content-inset,0px)}.bs-sheet[data-bs-fit-content="moving"] .bs-content::after{content:"";display:block;flex:none;height:var(--bs-content-inset,0px)}.bs-sheet[data-bs-fit-content="rest"][data-mode="bottom"]::after{content:"";flex:0 1 max(0px,var(--bs-max-size,0px) - var(--bs-size,0px))}.bs-footer{flex:0 0 auto;padding:var(--bs-footer-padding,12px 16px calc(12px + env(safe-area-inset-bottom)));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));background:var(--bs-surface,var(--bs-surface-d))}.bs-sheet[data-bs-fit-content="moving"][data-mode="bottom"] .bs-footer{transform:translateY( clamp( calc(-1 * var(--bs-footer-lift-max,0px)),calc(var(--bs-size,0px) - var(--bs-max-size,0px)),0px ) )}.bs-sheet[data-bs-fit-content="moving"][data-mode="bottom"][data-bs-webgl="on"] .bs-footer{background:var(--bs-surface,var(--bs-surface-d))}.bs-sheet[data-mode="bottom"]:has(.bs-footer:not([hidden]):has(*)){padding-bottom:0}.bs-header:not(:has(*)),.bs-footer:not(:has(*)),.bs-header[hidden],.bs-footer[hidden]{display:none}.bs-screen{position:absolute;inset:0;pointer-events:none;z-index:var(--bs-z-scrim);background:var(--bs-scrim-color,var(--bs-scrim-color-d));backdrop-filter:blur(var(--bs-scrim-blur,0px));-webkit-backdrop-filter:blur(var(--bs-scrim-blur,0px));transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-screen,.bs-root[data-animating="true"] .bs-screen{transition:none}.bs-scrim-overlay{z-index:calc(var(--bs-z-sheet) + 1);pointer-events:none}.bs-button-slot{position:fixed;z-index:calc(var(--bs-z-sheet) + 1);pointer-events:auto}.bs-button-slot[data-side="left"]{left:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-side="right"]{right:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="top"]{bottom:auto;top:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="left"]{left:calc(var(--bs-size,0px) + 12px);right:auto;bottom:auto;top:16px}.bs-button-slot[data-mode="right"]{right:calc(var(--bs-size,0px) + 12px);left:auto;bottom:auto;top:16px}@media (prefers-reduced-motion:reduce){.bs-backdrop,.bs-handle::before,.bs-button-slot[data-side="left"],.bs-button-slot[data-side="right"]{transition:none !important}}@media (prefers-color-scheme:dark){:where(.bs-root){--bs-surface-d:#1a1a1d;--bs-surface-border-d:rgba(255,255,255,0.08);--bs-handle-color-d:rgba(255,255,255,0.45);--bs-shadow-auto:0 -3px 16px rgba(0,0,0,0.5)}}@media (forced-colors:active){.bs-sheet{border:1px solid CanvasText}.bs-handle::before{background:CanvasText;forced-color-adjust:none}.bs-backdrop,.bs-screen{forced-color-adjust:none}}.bs-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:where(.ovl-root){--ovl-surface:var(--bs-surface,var(--bs-surface-d,#ffffff));--ovl-surface-border:var(--bs-surface-border,var(--bs-surface-border-d,rgba(0,0,0,0.08)));--ovl-shadow:0 -8px 40px rgba(0,0,0,0.35);--ovl-radius:var(--bs-radius,var(--bs-radius-d,20px));--ovl-backdrop-color:rgba(0,0,0,0.5);--ovl-z-backdrop:200;--ovl-z-panel:201}.ovl-backdrop{position:fixed;inset:0;background:var(--ovl-backdrop-color);opacity:0;pointer-events:none;z-index:var(--ovl-z-backdrop)}.ovl-panel{position:fixed;background:var(--ovl-surface);box-shadow:var(--ovl-shadow);z-index:var(--ovl-z-panel);-webkit-tap-highlight-color:transparent;outline:none;transition:transform 0.32s cubic-bezier(0.29,1.24,0.84,0.99),opacity 0.32s ease-out}.ovl-panel[data-state="open"]{transform:translate3d(0,0,0);opacity:1}@starting-style{.ovl-panel[data-edge="bottom"][data-state="open"]{transform:translate3d(0,100%,0);opacity:0}.ovl-panel[data-edge="top"][data-state="open"]{transform:translate3d(0,-100%,0);opacity:0}.ovl-panel[data-edge="left"][data-state="open"]{transform:translate3d(-100%,0,0);opacity:0}.ovl-panel[data-edge="right"][data-state="open"]{transform:translate3d(100%,0,0);opacity:0}}.ovl-panel[data-edge="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--ovl-radius);border-top-right-radius:var(--ovl-radius);border-top:1px solid var(--ovl-surface-border);padding-bottom:env(safe-area-inset-bottom)}.ovl-panel[data-edge="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-bottom:1px solid var(--ovl-surface-border);padding-top:env(safe-area-inset-top)}.ovl-panel[data-edge="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-right:1px solid var(--ovl-surface-border)}.ovl-panel[data-edge="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--ovl-radius);border-bottom-left-radius:var(--ovl-radius);border-left:1px solid var(--ovl-surface-border)}@media (prefers-reduced-motion:reduce){.ovl-panel,.ovl-backdrop{transition:none !important}}`;
+    baseStyles = `:where(.bs-root){--bs-surface-d:#ffffff;--bs-surface-border-d:rgba(225,227,237,1);--bs-radius-d:20px;--bs-handle-color-d:rgba(26,22,20,0.3);--bs-handle-width:40px;--bs-handle-height:5px;--bs-z-backdrop:90;--bs-z-sheet:100;--bs-backdrop-color-d:rgba(0,0,0,0.5);--bs-scrim-color-d:transparent;--bs-scrim-blur:0px;--bs-z-scrim:calc(var(--bs-z-sheet) - 1);--bs-size:0px;--bs-progress:0}.bs-backdrop{position:fixed;inset:0;background:var(--bs-backdrop-color,var(--bs-backdrop-color-d));opacity:0;pointer-events:none;z-index:var(--bs-z-backdrop);transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-backdrop,.bs-root[data-animating="true"] .bs-backdrop{transition:none}.bs-sheet,.bs-handle,.bs-header,.bs-content,.bs-footer{box-sizing:border-box}.bs-sheet{position:fixed;background:var(--bs-surface,var(--bs-surface-d));box-shadow:var(--bs-shadow,var(--bs-shadow-auto,none));--bs-shadow-fade:clamp(0,calc(var(--bs-progress,0) * 8),1);z-index:var(--bs-z-sheet);pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;user-select:none;overscroll-behavior:contain}.bs-sheet[data-mode="bottom"]{left:0;right:0;bottom:var(--bs-keyboard-inset,0px);transition:bottom 0.2s cubic-bezier(0.22,1,0.36,1);width:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));padding-bottom:env(safe-area-inset-bottom);--bs-shadow-auto:0 calc(var(--bs-progress,0) * -2px - 3px) calc(var(--bs-progress,0) * 18px + 12px) rgba( 0,0,0,calc(var(--bs-shadow-fade) * (var(--bs-progress,0) * 0.15 + 0.12)) )}.bs-sheet[data-mode="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom:1px solid var(--bs-surface-border,var(--bs-surface-border-d));flex-direction:column-reverse;--bs-shadow-auto:0 3px 12px rgba(0,0,0,calc(var(--bs-shadow-fade) * 0.12));padding-top:env(safe-area-inset-top)}.bs-sheet[data-mode="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:3px 0 12px rgba(0,0,0,calc(var(--bs-shadow-fade) * 0.12))}.bs-sheet[data-mode="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:-3px 0 12px rgba(0,0,0,calc(var(--bs-shadow-fade) * 0.12))}.bs-sheet[data-bs-rest="closed"]{box-shadow:none;visibility:hidden}.bs-sheet[data-bs-webgl="on"],.bs-sheet[data-bs-webgl="on"] .bs-handle,.bs-sheet[data-bs-webgl="on"] .bs-header,.bs-sheet[data-bs-webgl="on"] .bs-footer{background:transparent;box-shadow:none}.bs-sheet[data-mode="left"] .bs-content,.bs-sheet[data-mode="left"] .bs-header,.bs-sheet[data-mode="left"] .bs-footer{padding-right:36px}.bs-sheet[data-mode="right"] .bs-content,.bs-sheet[data-mode="right"] .bs-header,.bs-sheet[data-mode="right"] .bs-footer{padding-left:36px}.bs-handle{flex-shrink:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;padding:var(--bs-handle-padding,8px 16px 4px);cursor:grab;touch-action:none;user-select:none;background:var(--bs-surface,var(--bs-surface-d));-webkit-tap-highlight-color:transparent;outline:none;position:relative}.bs-handle:active{cursor:grabbing}.bs-handle:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:var(--bs-radius,var(--bs-radius-d))}.bs-handle::before{content:"";display:block;width:var(--bs-handle-width);height:var(--bs-handle-height);background:var(--bs-handle-color,var(--bs-handle-color-d));border-radius:calc(var(--bs-handle-height) / 2);margin:0 auto 8px;transition:width 0.15s ease,background 0.15s ease,transform 0.15s ease;pointer-events:none}.bs-sheet[data-mode="left"] .bs-handle,.bs-sheet[data-mode="right"] .bs-handle{position:absolute;top:0;bottom:0;width:28px;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;background:var(--bs-surface,var(--bs-surface-d));z-index:1;overflow:hidden}.bs-sheet[data-mode="left"] .bs-handle>*,.bs-sheet[data-mode="right"] .bs-handle>*{display:none}.bs-sheet[data-mode="left"] .bs-handle{right:0;border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="right"] .bs-handle{left:0;border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="left"] .bs-handle::before,.bs-sheet[data-mode="right"] .bs-handle::before{width:var(--bs-handle-height);height:var(--bs-handle-width);margin:0}.bs-sheet:hover .bs-handle::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 15%)}.bs-handle:active::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 35%);transform:scaleX(1.15)}.bs-handle.bs-handle--ticks::after{content:"";display:block;position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:calc(var(--bs-handle-width) * 2);height:3px;background-image:radial-gradient( circle,var(--bs-handle-color,var(--bs-handle-color-d)) 0 1.5px,transparent 1.6px );background-size:8px 3px;background-repeat:repeat-x;background-position:center;opacity:0;transition:opacity 0.18s ease-out;pointer-events:none}.bs-root[data-dragging="true"] .bs-handle.bs-handle--ticks::after{opacity:0.4}.bs-sheet[data-mode="top"] .bs-handle.bs-handle--ticks::after{bottom:auto;top:6px}.bs-sheet[data-mode="left"] .bs-handle.bs-handle--ticks::after,.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:3px;height:calc(var(--bs-handle-width) * 2);background-size:3px 8px;background-repeat:repeat-y;margin-left:calc(var(--bs-handle-height) + 6px)}.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{margin-left:calc(-1 * (var(--bs-handle-height) + 6px))}.bs-header{flex:0 0 auto;min-height:var(--bs-header-min-height,0px);padding:var(--bs-header-padding,0 16px 8px);background:var(--bs-surface,var(--bs-surface-d))}.bs-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;padding:var(--bs-content-padding,0 16px 16px)}.bs-sheet[data-bs-fit-content="moving"] .bs-content{scroll-padding-bottom:var(--bs-content-inset,0px)}.bs-sheet[data-bs-fit-content="moving"] .bs-content::after{content:"";display:block;flex:none;height:var(--bs-content-inset,0px)}.bs-sheet[data-bs-fit-content="rest"][data-mode="bottom"]::after{content:"";flex:0 1 max(0px,var(--bs-max-size,0px) - var(--bs-size,0px))}.bs-footer{flex:0 0 auto;padding:var(--bs-footer-padding,12px 16px calc(12px + env(safe-area-inset-bottom)));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));background:var(--bs-surface,var(--bs-surface-d))}.bs-sheet[data-bs-fit-content="moving"][data-mode="bottom"] .bs-footer{transform:translateY( clamp( calc(-1 * var(--bs-footer-lift-max,0px)),calc(var(--bs-size,0px) - var(--bs-max-size,0px)),0px ) )}.bs-sheet[data-bs-fit-content="moving"][data-mode="bottom"][data-bs-webgl="on"] .bs-footer{background:var(--bs-surface,var(--bs-surface-d))}.bs-sheet[data-mode="bottom"]:has(.bs-footer:not([hidden]):has(*)){padding-bottom:0}.bs-header:not(:has(*)),.bs-footer:not(:has(*)),.bs-header[hidden],.bs-footer[hidden]{display:none}.bs-screen{position:fixed;inset:0;pointer-events:none;z-index:var(--bs-z-scrim);background:var(--bs-scrim-color,var(--bs-scrim-color-d));backdrop-filter:blur(var(--bs-scrim-blur,0px));-webkit-backdrop-filter:blur(var(--bs-scrim-blur,0px));transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-screen,.bs-root[data-animating="true"] .bs-screen{transition:none}.bs-scrim-overlay{z-index:calc(var(--bs-z-sheet) + 1);pointer-events:none}.bs-button-slot{position:fixed;z-index:calc(var(--bs-z-sheet) + 1);pointer-events:auto}.bs-button-slot[data-side="left"]{left:16px;bottom:calc(var(--bs-size,0px) + var(--bs-keyboard-inset,0px) + 12px)}.bs-button-slot[data-side="right"]{right:16px;bottom:calc(var(--bs-size,0px) + var(--bs-keyboard-inset,0px) + 12px)}.bs-button-slot[data-mode="top"]{bottom:auto;top:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="left"]{left:calc(var(--bs-size,0px) + 12px);right:auto;bottom:auto;top:16px}.bs-button-slot[data-mode="right"]{right:calc(var(--bs-size,0px) + 12px);left:auto;bottom:auto;top:16px}@media (prefers-reduced-motion:reduce){.bs-sheet,.bs-backdrop,.bs-handle::before,.bs-button-slot[data-side="left"],.bs-button-slot[data-side="right"]{transition:none !important}}@media (prefers-color-scheme:dark){:where(.bs-root){--bs-surface-d:#1a1a1d;--bs-surface-border-d:rgba(255,255,255,0.08);--bs-handle-color-d:rgba(255,255,255,0.45);--bs-shadow-auto:0 -3px 16px rgba(0,0,0,0.5)}}@media (forced-colors:active){.bs-sheet{border:1px solid CanvasText}.bs-handle::before{background:CanvasText;forced-color-adjust:none}.bs-backdrop,.bs-screen{forced-color-adjust:none}}.bs-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:where(.ovl-root){--ovl-surface:var(--bs-surface,var(--bs-surface-d,#ffffff));--ovl-surface-border:var(--bs-surface-border,var(--bs-surface-border-d,rgba(0,0,0,0.08)));--ovl-shadow:0 -8px 40px rgba(0,0,0,0.35);--ovl-radius:var(--bs-radius,var(--bs-radius-d,20px));--ovl-backdrop-color:rgba(0,0,0,0.5);--ovl-z-backdrop:200;--ovl-z-panel:201}.ovl-backdrop{position:fixed;inset:0;background:var(--ovl-backdrop-color);opacity:0;pointer-events:none;z-index:var(--ovl-z-backdrop)}.ovl-panel{position:fixed;background:var(--ovl-surface);box-shadow:var(--ovl-shadow);z-index:var(--ovl-z-panel);-webkit-tap-highlight-color:transparent;outline:none;transition:transform 0.32s cubic-bezier(0.29,1.24,0.84,0.99),opacity 0.32s ease-out}.ovl-panel[data-state="open"]{transform:translate3d(0,0,0);opacity:1}@starting-style{.ovl-panel[data-edge="bottom"][data-state="open"]{transform:translate3d(0,100%,0);opacity:0}.ovl-panel[data-edge="top"][data-state="open"]{transform:translate3d(0,-100%,0);opacity:0}.ovl-panel[data-edge="left"][data-state="open"]{transform:translate3d(-100%,0,0);opacity:0}.ovl-panel[data-edge="right"][data-state="open"]{transform:translate3d(100%,0,0);opacity:0}}.ovl-panel[data-edge="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--ovl-radius);border-top-right-radius:var(--ovl-radius);border-top:1px solid var(--ovl-surface-border);padding-bottom:env(safe-area-inset-bottom)}.ovl-panel[data-edge="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-bottom:1px solid var(--ovl-surface-border);padding-top:env(safe-area-inset-top)}.ovl-panel[data-edge="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-right:1px solid var(--ovl-surface-border)}.ovl-panel[data-edge="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--ovl-radius);border-bottom-left-radius:var(--ovl-radius);border-left:1px solid var(--ovl-surface-border)}@media (prefers-reduced-motion:reduce){.ovl-panel,.ovl-backdrop{transition:none !important}}`;
   }
 });
 
@@ -4867,9 +5471,11 @@ var init_shadow_tree = __esm({
 });
 
 // src/web-component/attributes.ts
-var ATTR_SNAP_POINTS, ATTR_ALLOWED, ATTR_INITIAL, ATTR_MODE, ATTR_BACKDROP, ATTR_STYLESHEET, ATTR_ANIMATION, ATTR_FOCUS_TRAP, ATTR_CLOSE_ON_ESCAPE, ATTR_LOCK_BODY_SCROLL, ATTR_SHEET_LABEL, ATTR_STACK_EFFECT, ATTR_PERSISTENT, ATTR_DISABLE_CLOSE, ATTR_DISABLE_DRAG, ATTR_DRAG_FROM, ATTR_DRAG_FROM_CONTENT, ATTR_FIT_CONTENT_TO_SNAP, ATTR_CLOSE_ON_ROUTE_CHANGE, ATTR_RADIUS, ATTR_MAX_HEIGHT, ATTR_RETURN_FOCUS_TO, ATTR_BACKDROP_COLOR, ATTR_SCRIM_COLOR, ATTR_SNAP, LIVE_ATTRS, OBSERVED_ATTRS, isValidSnapPoint, DEFAULT_SNAP_POINTS, parseSnapPoints, VALID_MODES, VALID_ANIMATIONS, parseMode, parseAnimation, VALID_DRAG_FROM, parseDragFrom, parseList, parseDimension, ANCHOR_POSITIONS, ANCHOR_ANIMATIONS, parseAnchorOptions;
+var ATTR_SNAP_POINTS, ATTR_ALLOWED, ATTR_INITIAL, ATTR_MODE, ATTR_BACKDROP, ATTR_STYLESHEET, ATTR_ANIMATION, ATTR_FOCUS_TRAP, ATTR_CLOSE_ON_ESCAPE, ATTR_LOCK_BODY_SCROLL, ATTR_SHEET_LABEL, ATTR_STACK_EFFECT, ATTR_PERSISTENT, ATTR_DISABLE_CLOSE, ATTR_DISABLE_DRAG, ATTR_DRAG_FROM, ATTR_DRAG_FROM_CONTENT, ATTR_FIT_CONTENT_TO_SNAP, ATTR_CLOSE_ON_ROUTE_CHANGE, ATTR_RADIUS, ATTR_MAX_HEIGHT, ATTR_RETURN_FOCUS_TO, ATTR_BACKDROP_COLOR, ATTR_SCRIM_COLOR, ATTR_SNAP, ATTR_OPEN, ATTR_OPTIONS, ATTR_HANDLE_LABEL, ATTR_CONTENT_LABEL, LIVE_ATTRS, OBSERVED_ATTRS, parseOptions, isValidSnapPoint, DEFAULT_SNAP_POINTS, parseSnapPoints, VALID_MODES, VALID_ANIMATIONS, parseMode, parseAnimation, VALID_DRAG_FROM, parseDragFrom, parseList, parseDimension, ANCHOR_POSITIONS, ANCHOR_ANIMATIONS, parseAnchorOptions;
 var init_attributes = __esm({
   "src/web-component/attributes.ts"() {
+    init_dev_warn();
+    init_option_keys();
     ATTR_SNAP_POINTS = "snap-points";
     ATTR_ALLOWED = "allowed";
     ATTR_INITIAL = "initial";
@@ -4895,6 +5501,10 @@ var init_attributes = __esm({
     ATTR_BACKDROP_COLOR = "backdrop-color";
     ATTR_SCRIM_COLOR = "scrim-color";
     ATTR_SNAP = "snap";
+    ATTR_OPEN = "open";
+    ATTR_OPTIONS = "options";
+    ATTR_HANDLE_LABEL = "handle-label";
+    ATTR_CONTENT_LABEL = "content-label";
     LIVE_ATTRS = /* @__PURE__ */ new Set([
       ATTR_MODE,
       ATTR_RADIUS,
@@ -4906,7 +5516,10 @@ var init_attributes = __esm({
       ATTR_DISABLE_CLOSE,
       ATTR_DISABLE_DRAG,
       ATTR_DRAG_FROM,
-      ATTR_DRAG_FROM_CONTENT
+      ATTR_DRAG_FROM_CONTENT,
+      ATTR_HANDLE_LABEL,
+      ATTR_CONTENT_LABEL,
+      ATTR_OPEN
     ]);
     OBSERVED_ATTRS = [
       ATTR_SNAP_POINTS,
@@ -4932,8 +5545,26 @@ var init_attributes = __esm({
       ATTR_RETURN_FOCUS_TO,
       ATTR_BACKDROP_COLOR,
       ATTR_SCRIM_COLOR,
-      ATTR_SNAP
+      ATTR_SNAP,
+      ATTR_OPTIONS,
+      ATTR_HANDLE_LABEL,
+      ATTR_CONTENT_LABEL,
+      ATTR_OPEN
     ];
+    parseOptions = (raw) => {
+      if (!raw) return {};
+      try {
+        const parsed = JSON.parse(raw);
+        if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+          return pickEngineOptions(parsed);
+        }
+      } catch {
+      }
+      devWarn(
+        `[BottomSheet] options="${raw}" is not a JSON object \u2014 ignored.`
+      );
+      return {};
+    };
     isValidSnapPoint = (p) => !!p && typeof p === "object" && typeof p.id === "string" && (typeof p.size === "number" || typeof p.size === "string");
     DEFAULT_SNAP_POINTS = [{ id: "full", size: "full" }];
     parseSnapPoints = (raw) => {
@@ -4946,18 +5577,36 @@ var init_attributes = __esm({
         if (Array.isArray(parsed)) return DEFAULT_SNAP_POINTS;
       } catch {
       }
-      return raw.split(",").map((s) => s.trim()).filter(Boolean).map((part) => {
+      const points = [];
+      for (const part of raw.split(",")) {
         const [id, size] = part.split(":").map((s) => s.trim());
+        if (!id || !size) {
+          if (part.trim()) {
+            devWarn(
+              `[BottomSheet] snap-points entry "${part.trim()}" is not "id:size" \u2014 skipped.`
+            );
+          }
+          continue;
+        }
         const numeric = Number(size);
-        const resolvedSize = Number.isFinite(numeric) ? numeric : size;
-        return { id: id ?? "default", size: resolvedSize };
-      });
+        points.push({
+          id,
+          size: Number.isFinite(numeric) ? numeric : size
+        });
+      }
+      if (points.length > 0) return points;
+      devWarn(
+        `[BottomSheet] snap-points="${raw}" has no usable entry \u2014 falling back to a single full-height snap.`
+      );
+      return DEFAULT_SNAP_POINTS;
     };
     VALID_MODES = [
       "bottom",
       "top",
       "left",
-      "right"
+      "right",
+      "start",
+      "end"
     ];
     VALID_ANIMATIONS = ["spring", "tween", "ios-spring", "material-bounce", "linear", "snappy"];
     parseMode = (raw) => raw && VALID_MODES.includes(raw) ? raw : "bottom";
@@ -5025,6 +5674,9 @@ var BaseHTMLElement, BottomSheetElement, defineBottomSheet;
 var init_BottomSheetElement = __esm({
   "src/web-component/BottomSheetElement.ts"() {
     init_BottomSheetEngine();
+    init_logical_mode();
+    init_open_state();
+    init_option_keys();
     init_baseStyles();
     init_shadow_tree();
     init_attributes();
@@ -5041,6 +5693,7 @@ var init_BottomSheetElement = __esm({
         __publicField(this, "stylesheetLinked", false);
         __publicField(this, "declarativeAnchors", []);
         __publicField(this, "lastActiveId", null);
+        __publicField(this, "extraOptions", {});
         this.root = this.attachShadow({ mode: "open" });
         const baseStyle = document.createElement("style");
         baseStyle.textContent = baseStyles;
@@ -5065,7 +5718,21 @@ var init_BottomSheetElement = __esm({
       static get observedAttributes() {
         return OBSERVED_ATTRS.slice();
       }
+      get options() {
+        return this.extraOptions;
+      }
+      set options(value) {
+        this.extraOptions = value ? pickEngineOptions(value) : {};
+        if (!this.engine) return;
+        this.teardownEngine();
+        this.initEngine();
+      }
       connectedCallback() {
+        if (Object.prototype.hasOwnProperty.call(this, "options")) {
+          const early = this.options;
+          delete this.options;
+          this.options = early;
+        }
         if (!this.stylesheetLinked) {
           this.stylesheetLinked = true;
           const stylesheet = this.getAttribute(ATTR_STYLESHEET);
@@ -5081,8 +5748,8 @@ var init_BottomSheetElement = __esm({
       disconnectedCallback() {
         this.teardownEngine();
       }
-      attributeChangedCallback(name, _old, value) {
-        if (!this.engine) return;
+      attributeChangedCallback(name, old, value) {
+        if (!this.engine || old === value) return;
         if (LIVE_ATTRS.has(name)) {
           this.applyLiveAttribute(name, value);
           return;
@@ -5104,6 +5771,8 @@ var init_BottomSheetElement = __esm({
             break;
           }
           case ATTR_BACKDROP_COLOR:
+            this.engine.setBackdropColor(value);
+            break;
           case ATTR_SCRIM_COLOR:
             this.engine.setScrimColor(value);
             break;
@@ -5126,12 +5795,20 @@ var init_BottomSheetElement = __esm({
           }
           case ATTR_MODE:
             this.engine.setMode(parseMode(value));
+            this.writeMode(this.engine.getMode());
             break;
           case ATTR_SNAP:
             if (value && value !== this.engine.state.activeId) {
               void this.engine.snapTo(value);
             }
             break;
+          case ATTR_HANDLE_LABEL:
+          case ATTR_CONTENT_LABEL:
+            this.writeLabels();
+            break;
+          case ATTR_OPEN:
+            syncOpen(this.engine, value !== null && value !== "false");
+            break;
         }
       }
       getEngine() {
@@ -5145,20 +5822,51 @@ var init_BottomSheetElement = __esm({
           this.refs.backdrop.removeEventListener("click", this.backdropClickHandler);
           this.backdropClickHandler = null;
         }
-        this.engine?.destroy();
-        this.engine = null;
-        for (const el of this.declarativeAnchors) {
-          this.appendChild(el);
+        for (const anchor of this.declarativeAnchors) {
+          anchor.detach();
+          anchor.el.setAttribute("slot", "anchor");
         }
         this.declarativeAnchors = [];
+        this.engine?.destroy();
+        this.engine = null;
       }
-      initEngine() {
-        const { sheet, handle, content, backdrop, announcer } = this.refs;
-        const mode = parseMode(this.getAttribute(ATTR_MODE));
-        sheet.setAttribute("data-mode", mode);
+      reflectOpen(open) {
+        const raw = this.getAttribute(ATTR_OPEN);
+        if (open === (raw !== null && raw !== "false")) return;
+        if (open) this.setAttribute(ATTR_OPEN, "");
+        else this.removeAttribute(ATTR_OPEN);
+      }
+      writeLabels() {
+        this.refs.handle.setAttribute(
+          "aria-label",
+          this.getAttribute(ATTR_HANDLE_LABEL) ?? "Resize sheet"
+        );
+        this.refs.content.setAttribute(
+          "aria-label",
+          this.getAttribute(ATTR_CONTENT_LABEL) ?? "Sheet content"
+        );
+      }
+      writeMode(mode) {
+        this.refs.sheet.setAttribute("data-mode", mode);
         this.refs.leftButton.setAttribute("data-mode", mode);
         this.refs.rightButton.setAttribute("data-mode", mode);
-        const focusTrap = this.getAttribute(ATTR_FOCUS_TRAP) === "true";
+      }
+      initEngine() {
+        const { sheet, handle, content, backdrop, announcer } = this.refs;
+        const extra = {
+          ...this.extraOptions,
+          ...parseOptions(this.getAttribute(ATTR_OPTIONS))
+        };
+        const given = (name, read) => {
+          const raw = this.getAttribute(name);
+          return raw === null ? void 0 : read(raw);
+        };
+        const isTrue = (raw) => raw === "true";
+        const notFalse = (raw) => raw !== "false";
+        const mode = given(ATTR_MODE, parseMode) ?? extra.mode ?? parseMode(null);
+        this.writeMode(guessPhysicalMode(mode));
+        this.writeLabels();
+        const focusTrap = given(ATTR_FOCUS_TRAP, isTrue) ?? extra.focusTrap ?? false;
         if (focusTrap) {
           sheet.setAttribute("aria-modal", "true");
         } else {
@@ -5176,10 +5884,12 @@ var init_BottomSheetElement = __esm({
           };
           backdrop.addEventListener("click", this.backdropClickHandler);
         }
-        const snapPoints = parseSnapPoints(this.getAttribute(ATTR_SNAP_POINTS));
-        const initialAttr = this.getAttribute(ATTR_INITIAL) ?? void 0;
-        const initial = this.lastActiveId && snapPoints.some((p) => p.id === this.lastActiveId) ? this.lastActiveId : initialAttr;
+        const snapPoints = given(ATTR_SNAP_POINTS, parseSnapPoints) ?? extra.snapPoints ?? parseSnapPoints(null);
+        const known = (id) => id !== null && snapPoints.some((p) => p.id === id);
+        const snapAttr = this.getAttribute(ATTR_SNAP);
+        const initial = known(this.lastActiveId) ? this.lastActiveId : known(snapAttr) ? snapAttr : this.getAttribute(ATTR_INITIAL) ?? extra.initial ?? (this.getAttribute(ATTR_OPEN) === "false" ? closedSnapId(snapPoints) : void 0);
         const opts = {
+          ...extra,
           element: sheet,
           handle,
           scrollContainer: content,
@@ -5187,34 +5897,48 @@ var init_BottomSheetElement = __esm({
           scrim: this.refs.screen,
           mode,
           snapPoints,
-          allowed: parseList(this.getAttribute(ATTR_ALLOWED)),
+          allowed: given(ATTR_ALLOWED, parseList) ?? extra.allowed,
           initial,
-          animation: parseAnimation(this.getAttribute(ATTR_ANIMATION)),
+          animation: given(ATTR_ANIMATION, parseAnimation) ?? extra.animation,
           focusTrap,
-          closeOnEscape: this.getAttribute(ATTR_CLOSE_ON_ESCAPE) !== "false",
-          lockBodyScroll: this.getAttribute(ATTR_LOCK_BODY_SCROLL) !== "false",
-          stackEffect: this.getAttribute(ATTR_STACK_EFFECT) === "true",
-          persistent: this.getAttribute(ATTR_PERSISTENT) === "true",
-          disableClose: this.getAttribute(ATTR_DISABLE_CLOSE) === "true",
-          disableDrag: this.getAttribute(ATTR_DISABLE_DRAG) === "true",
-          dragFrom: parseDragFrom(this.getAttribute(ATTR_DRAG_FROM)),
-          dragFromContent: this.getAttribute(ATTR_DRAG_FROM_CONTENT) === null ? void 0 : this.getAttribute(ATTR_DRAG_FROM_CONTENT) !== "false",
-          fitContentToSnap: this.hasAttribute(ATTR_FIT_CONTENT_TO_SNAP) && this.getAttribute(ATTR_FIT_CONTENT_TO_SNAP) !== "false",
-          closeOnRouteChange: this.getAttribute(ATTR_CLOSE_ON_ROUTE_CHANGE) === "true",
-          radius: parseDimension(this.getAttribute(ATTR_RADIUS)),
-          maxHeight: parseDimension(this.getAttribute(ATTR_MAX_HEIGHT)),
-          returnFocusTo: this.getAttribute(ATTR_RETURN_FOCUS_TO) ?? void 0
+          closeOnEscape: given(ATTR_CLOSE_ON_ESCAPE, notFalse) ?? extra.closeOnEscape,
+          lockBodyScroll: given(ATTR_LOCK_BODY_SCROLL, notFalse) ?? extra.lockBodyScroll,
+          stackEffect: given(ATTR_STACK_EFFECT, isTrue) ?? extra.stackEffect,
+          persistent: given(ATTR_PERSISTENT, isTrue) ?? extra.persistent,
+          disableClose: given(ATTR_DISABLE_CLOSE, isTrue) ?? extra.disableClose,
+          disableDrag: given(ATTR_DISABLE_DRAG, isTrue) ?? extra.disableDrag,
+          dragFrom: given(ATTR_DRAG_FROM, parseDragFrom) ?? extra.dragFrom,
+          dragFromContent: given(ATTR_DRAG_FROM_CONTENT, notFalse) ?? extra.dragFromContent,
+          fitContentToSnap: given(ATTR_FIT_CONTENT_TO_SNAP, notFalse) ?? extra.fitContentToSnap,
+          closeOnRouteChange: given(ATTR_CLOSE_ON_ROUTE_CHANGE, isTrue) ?? extra.closeOnRouteChange,
+          radius: given(ATTR_RADIUS, parseDimension) ?? extra.radius,
+          maxHeight: given(ATTR_MAX_HEIGHT, parseDimension) ?? extra.maxHeight,
+          returnFocusTo: this.getAttribute(ATTR_RETURN_FOCUS_TO) ?? extra.returnFocusTo,
+          backdropColor: this.getAttribute(ATTR_BACKDROP_COLOR) ?? extra.backdropColor,
+          scrimColor: this.getAttribute(ATTR_SCRIM_COLOR) ?? extra.scrimColor
         };
         this.engine = new BottomSheetEngine(opts);
+        const wanted = this.getAttribute(ATTR_OPEN);
+        if (wanted !== null) syncOpen(this.engine, wanted !== "false");
+        this.reflectOpen(this.engine.state.phase !== "closed");
+        this.writeMode(this.engine.getMode());
         sheet.setAttribute("data-active", this.engine.state.activeId);
-        const scrimColor = this.getAttribute(ATTR_SCRIM_COLOR) ?? this.getAttribute(ATTR_BACKDROP_COLOR);
-        if (scrimColor !== null) this.engine.setScrimColor(scrimColor);
-        for (const el of Array.from(
-          this.querySelectorAll('[slot="anchor"]')
-        )) {
-          this.declarativeAnchors.push(el);
-          this.engine.addAnchor({ ...parseAnchorOptions(el), element: el });
-        }
+        const anchors = Array.from(this.children).filter(
+          (child) => child.getAttribute("slot") === "anchor"
+        );
+        anchors.forEach((el, index) => {
+          const name = `bs-anchor-${index}`;
+          const host = document.createElement("div");
+          const slot = document.createElement("slot");
+          slot.name = name;
+          host.appendChild(slot);
+          el.setAttribute("slot", name);
+          const detach = this.engine.addAnchor({
+            ...parseAnchorOptions(el),
+            element: host
+          });
+          this.declarativeAnchors.push({ el, detach });
+        });
         this.offHandlers = [
           this.engine.on("snap", (payload) => {
             sheet.setAttribute("data-active", payload.id);
@@ -5230,14 +5954,14 @@ var init_BottomSheetElement = __esm({
             );
             if (!accepted) payload.cancel();
           }),
-          this.engine.on(
-            "open",
-            (payload) => this.dispatchEvent(new CustomEvent("open", { detail: payload }))
-          ),
-          this.engine.on(
-            "close",
-            () => this.dispatchEvent(new CustomEvent("close"))
-          ),
+          this.engine.on("open", (payload) => {
+            this.reflectOpen(true);
+            this.dispatchEvent(new CustomEvent("open", { detail: payload }));
+          }),
+          this.engine.on("close", () => {
+            this.reflectOpen(false);
+            this.dispatchEvent(new CustomEvent("close"));
+          }),
           this.engine.on(
             "progress",
             (payload) => this.dispatchEvent(new CustomEvent("progress", { detail: payload }))
@@ -5317,6 +6041,11 @@ var init_BottomSheetElement = __esm({
       recompute() {
         this.engine?.recompute();
       }
+      setMode(mode) {
+        if (!this.engine) return;
+        this.engine.setMode(mode);
+        this.writeMode(this.engine.getMode());
+      }
       get sheetState() {
         return this.engine?.state ?? null;
       }