@surdeddd/bottom-sheet 0.8.2 → 0.9.0

package/dist/svelte.js

@@ -266,18 +266,25 @@ var SnapResolver = class {
     __publicField(this, "resolved", []);
     __publicField(this, "maxAxisSize", 0);
     __publicField(this, "rangeCache", null);
+    __publicField(this, "notified", false);
     this.raw = raw;
     this.allowedIds = allowed ?? raw.map((p) => p.id);
     this.recompute();
   }
   recompute() {
-    this.resolved = resolveSnapList(this.raw, this.mode, this.measureFit);
-    this.maxAxisSize = this.resolved.reduce(
+    const measure = this.measureFit;
+    let measured;
+    const measureOnce = measure ? () => measured ?? (measured = measure()) : void 0;
+    this.resolved = resolveSnapList(this.raw, this.mode, measureOnce);
+    const nextMax = this.resolved.reduce(
       (m, s) => s.size > m ? s.size : m,
       0
     );
     this.rangeCache = null;
-    this.onMaxAxisSizeChange?.(this.maxAxisSize);
+    const changed = nextMax !== this.maxAxisSize || !this.notified;
+    this.maxAxisSize = nextMax;
+    this.notified = true;
+    if (changed) this.onMaxAxisSizeChange?.(this.maxAxisSize);
   }
   setRaw(raw) {
     this.raw = raw;
@@ -430,7 +437,10 @@ var ensureHandler = () => {
     target.consumed = true;
     const idx = closers.indexOf(target);
     if (idx !== -1) closers.splice(idx, 1);
-    target.close();
+    const settled = target;
+    void Promise.resolve(settled.close()).then(() => {
+      if (settled.isOpen()) settled.restore();
+    });
   });
 };
 var programmaticBack = () => {
@@ -466,16 +476,7 @@ function installRoute(deps) {
       pushed = false;
     }
   };
-  const onOpen = () => {
-    if (closer) return;
-    closer = {
-      isOpen: () => !deps.isDestroyed() && deps.getSize() > 0,
-      isTop: () => deps.isTopSheet(),
-      close: () => void deps.close(),
-      consumed: false
-    };
-    ensureHandler();
-    closers.push(closer);
+  const pushEntry = () => {
     try {
       if (deps.routedTo !== void 0) {
         history.pushState({ __bsRouted: deps.sheetId }, "", deps.routedTo);
@@ -487,6 +488,25 @@ function installRoute(deps) {
       pushed = false;
     }
   };
+  const onOpen = () => {
+    if (closer) return;
+    const self = {
+      isOpen: () => !deps.isDestroyed() && deps.getSize() > 0,
+      isTop: () => deps.isTopSheet(),
+      close: () => deps.close(),
+      restore: () => {
+        if (deps.isDestroyed() || closer !== self) return;
+        self.consumed = false;
+        if (!closers.includes(self)) closers.push(self);
+        pushEntry();
+      },
+      consumed: false
+    };
+    closer = self;
+    ensureHandler();
+    closers.push(self);
+    pushEntry();
+  };
   const unsubscribeOpen = deps.on("open", onOpen);
   const unsubscribeClose = deps.on("close", teardownEntry);
   if (deps.getSize() > 0) onOpen();
@@ -533,11 +553,13 @@ var CONTENT_PULL_THRESHOLD = 60;
 function installContentSwipe(deps) {
   const { container } = deps;
   let startY = 0;
+  let startScrollTop = 0;
   let moved = false;
   const onTouchStart = (e) => {
     const t = e.touches[0];
     if (!t) return;
     startY = t.clientY;
+    startScrollTop = container.scrollTop;
     moved = false;
   };
   const onTouchMove = (e) => {
@@ -548,6 +570,7 @@ function installContentSwipe(deps) {
   const onTouchEnd = (e) => {
     if (!moved) return;
     if (deps.isDragging() || deps.isAnimating()) return;
+    if (container.scrollTop !== startScrollTop) return;
     const t = e.changedTouches[0];
     if (!t) return;
     const deltaY = t.clientY - startY;
@@ -659,6 +682,131 @@ function installResizeObserver(deps) {
   };
 }
 
+// src/core/features/fit-observer.ts
+var contentTargets = (scroller) => {
+  if (!scroller) return [];
+  const hasSlot = typeof HTMLSlotElement !== "undefined";
+  const out = [];
+  for (const child2 of Array.from(scroller.children)) {
+    if (hasSlot && child2 instanceof HTMLSlotElement) {
+      for (const el of child2.assignedElements()) out.push(el);
+    } else {
+      out.push(child2);
+    }
+  }
+  return out;
+};
+function installFitObserver(deps) {
+  if (typeof ResizeObserver === "undefined") return () => {
+  };
+  if (!deps.hasFitSnap()) return () => {
+  };
+  let raf = 0;
+  const schedule = () => {
+    if (raf) return;
+    raf = requestAnimationFrame(() => {
+      raf = 0;
+      if (deps.isDestroyed() || deps.isDragging()) return;
+      deps.recompute();
+    });
+  };
+  const ro = new ResizeObserver(schedule);
+  ro.observe(deps.handle);
+  const scroller = deps.scrollContainer;
+  const observed = /* @__PURE__ */ new Set();
+  const slots = /* @__PURE__ */ new Set();
+  const hasSlot = typeof HTMLSlotElement !== "undefined";
+  const onSlotChange = () => resync();
+  const trackSlots = () => {
+    if (!scroller || !hasSlot) return;
+    for (const child2 of Array.from(scroller.children)) {
+      if (child2 instanceof HTMLSlotElement && !slots.has(child2)) {
+        child2.addEventListener("slotchange", onSlotChange);
+        slots.add(child2);
+      }
+    }
+  };
+  const resync = () => {
+    trackSlots();
+    const targets = contentTargets(scroller);
+    for (const el of observed) {
+      if (!targets.includes(el)) {
+        ro.unobserve(el);
+        observed.delete(el);
+      }
+    }
+    for (const el of targets) {
+      if (!observed.has(el)) {
+        ro.observe(el);
+        observed.add(el);
+      }
+    }
+    schedule();
+  };
+  let mo;
+  if (scroller) {
+    resync();
+    if (typeof MutationObserver !== "undefined") {
+      mo = new MutationObserver(resync);
+      mo.observe(scroller, { childList: true });
+    }
+  }
+  return () => {
+    ro.disconnect();
+    mo?.disconnect();
+    for (const slot of slots) {
+      slot.removeEventListener("slotchange", onSlotChange);
+    }
+    if (raf) cancelAnimationFrame(raf);
+  };
+}
+
+// src/core/features/fit-measurement.ts
+var measureSheetNatural = (element, content, vertical) => {
+  if (!content) {
+    return vertical ? element.offsetHeight : element.offsetWidth;
+  }
+  const axis = vertical ? "height" : "width";
+  const sheetStyle = element.style;
+  const cs = content.style;
+  const prevSheet = sheetStyle[axis];
+  const prevFlex = cs.flex;
+  const prevContent = vertical ? cs.height : cs.width;
+  sheetStyle[axis] = "auto";
+  cs.flex = "none";
+  if (vertical) cs.height = "auto";
+  else cs.width = "auto";
+  const poked = vertical ? element.offsetHeight : element.offsetWidth;
+  const contentBox = vertical ? content.clientHeight : content.clientWidth;
+  const contentScroll = vertical ? content.scrollHeight : content.scrollWidth;
+  const natural = Math.max(poked, poked - contentBox + contentScroll);
+  sheetStyle[axis] = prevSheet;
+  cs.flex = prevFlex;
+  if (vertical) cs.height = prevContent;
+  else cs.width = prevContent;
+  return natural;
+};
+var containingExtent = (element, vertical) => {
+  const op = element.offsetParent;
+  if (op && op !== document.body && op !== document.documentElement) {
+    return vertical ? op.clientHeight : op.clientWidth;
+  }
+  return vertical ? window.innerHeight : window.innerWidth;
+};
+var measureFitSize = (deps) => {
+  const vertical = layoutAxis(deps.mode) === "height";
+  const natural = measureSheetNatural(
+    deps.element,
+    deps.scrollContainer,
+    vertical
+  );
+  const cap = deps.getMaxHeightCap();
+  const capped = cap !== void 0 ? Math.min(natural, cap) : natural;
+  if (typeof window === "undefined") return capped;
+  const viewport = containingExtent(deps.element, vertical);
+  return viewport > 0 ? Math.min(capped, viewport) : capped;
+};
+
 // src/core/features/slider-keyboard.ts
 function installSliderKeyboard(deps) {
   const isVerticalAxis = deps.mode === "bottom" || deps.mode === "top";
@@ -1145,6 +1293,9 @@ var ScrimController = class {
       const s = this.screenComponent.style;
       s.opacity = "";
       s.display = "";
+      s.position = "";
+      s.inset = "";
+      s.pointerEvents = "";
     }
     if (this.backdrop) {
       this.backdrop.style.opacity = "";
@@ -1393,7 +1544,12 @@ var AnimationRunner = class {
     this.currentSpring?.cancel();
   }
   async animateTo(target, velocityPxPerMs) {
-    if (target === this.getSize()) return;
+    if (target === this.getSize()) {
+      if (!this.isAnimating && !this.isDragging()) {
+        this.element.style.willChange = "";
+      }
+      return;
+    }
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
     this.getRootEl()?.setAttribute("data-animating", "true");
@@ -1401,7 +1557,7 @@ var AnimationRunner = class {
     if (this.reducedMotion) {
       this.applySizeFn(target);
       this.getRootEl()?.removeAttribute("data-animating");
-      if (!this.isDragging()) this.element.style.willChange = "auto";
+      if (!this.isDragging()) this.element.style.willChange = "";
       return;
     }
     if (this.animationKind === "spring") {
@@ -1429,7 +1585,7 @@ var AnimationRunner = class {
     }
     if (!this.isAnimating) {
       this.getRootEl()?.removeAttribute("data-animating");
-      if (!this.isDragging()) this.element.style.willChange = "auto";
+      if (!this.isDragging()) this.element.style.willChange = "";
     }
   }
   destroy() {
@@ -1460,9 +1616,35 @@ var isVisible = (el) => {
   }
   return el.offsetParent !== null;
 };
-var focusables = (root2) => Array.from(root2.querySelectorAll(FOCUSABLE)).filter(
+var collectFocusables = (root2) => {
+  const out = Array.from(root2.querySelectorAll(FOCUSABLE));
+  if (typeof HTMLSlotElement !== "undefined") {
+    for (const slot of Array.from(root2.querySelectorAll("slot"))) {
+      for (const assigned of slot.assignedElements()) {
+        if (assigned.matches(FOCUSABLE)) out.push(assigned);
+        out.push(...collectFocusables(assigned));
+      }
+    }
+  }
+  return out;
+};
+var focusables = (root2) => collectFocusables(root2).filter(
   (el) => !el.hasAttribute("inert") && isVisible(el) && !el.matches("[aria-hidden='true']")
 );
+var containsComposed = (container, node) => {
+  let n = node;
+  while (n) {
+    if (n === container) return true;
+    const slot = n.assignedSlot;
+    if (slot) {
+      n = slot;
+      continue;
+    }
+    const parent = n.parentNode;
+    n = parent instanceof ShadowRoot ? parent.host : parent;
+  }
+  return false;
+};
 var trapStack = [];
 var installFocusTrap = (container, options = {}) => {
   if (typeof document === "undefined") return () => {
@@ -1472,7 +1654,13 @@ var installFocusTrap = (container, options = {}) => {
   const isActive = () => trapStack[trapStack.length - 1] === token;
   const previouslyFocused = document.activeElement;
   const focusInitial = () => {
-    const initial = typeof options.initialFocus === "string" ? container.querySelector(options.initialFocus) : options.initialFocus ?? focusables(container)[0] ?? container;
+    const spec = options.initialFocus;
+    if (spec === false) {
+      if (!container.hasAttribute("tabindex")) container.tabIndex = -1;
+      container.focus({ preventScroll: true });
+      return;
+    }
+    const initial = typeof spec === "string" ? container.querySelector(spec) : spec ?? focusables(container)[0] ?? container;
     initial?.focus({ preventScroll: true });
   };
   focusInitial();
@@ -1502,7 +1690,7 @@ var installFocusTrap = (container, options = {}) => {
   const handleFocusIn = (e) => {
     if (!isActive()) return;
     const target = e.target;
-    if (target && !container.contains(target)) {
+    if (target && !containsComposed(container, target)) {
       const list = focusables(container);
       list[0]?.focus({ preventScroll: true });
     }
@@ -1539,8 +1727,14 @@ var lockBodyScroll = () => {
       position: body.style.position,
       top: body.style.top,
       width: body.style.width,
+      paddingRight: body.style.paddingRight,
       scrollY: window.scrollY
     };
+    const scrollbarGap = window.innerWidth - document.documentElement.clientWidth;
+    if (scrollbarGap > 0) {
+      const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
+      body.style.paddingRight = `${current + scrollbarGap}px`;
+    }
     body.style.overflow = "hidden";
     body.style.position = "fixed";
     body.style.top = `-${savedStyles.scrollY}px`;
@@ -1558,6 +1752,7 @@ var lockBodyScroll = () => {
       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;
     }
@@ -1770,12 +1965,14 @@ var installGestures = (handle, mode, callbacks) => {
   handle.addEventListener("pointermove", onPointerMove);
   handle.addEventListener("pointerup", finishGesture);
   handle.addEventListener("pointercancel", onPointerCancel);
+  const prevTouchAction = handle.style.touchAction;
   handle.style.touchAction = isAxisVertical(mode) ? "pan-x" : "pan-y";
   return () => {
     handle.removeEventListener("pointerdown", onPointerDown);
     handle.removeEventListener("pointermove", onPointerMove);
     handle.removeEventListener("pointerup", finishGesture);
     handle.removeEventListener("pointercancel", onPointerCancel);
+    handle.style.touchAction = prevTouchAction;
     if (activePointerId !== null && handle.hasPointerCapture(activePointerId)) {
       handle.releasePointerCapture(activePointerId);
     }
@@ -1902,7 +2099,7 @@ var GestureController = class {
     this.isDragging_ = false;
     this.keyboardDismissed = false;
     this.deps.getRoot()?.removeAttribute("data-dragging");
-    this.deps.element.style.willChange = "auto";
+    this.deps.element.style.willChange = "";
   }
 };
 
@@ -2301,8 +2498,7 @@ function resolveEngineOptions(opts, extras) {
   };
 }
 
-// src/core/BottomSheetEngine.ts
-var HAPTIC_DURATION_MS = 8;
+// src/core/primitives/teardown-stack.ts
 var TeardownStack = class {
   constructor() {
     __publicField(this, "fns", []);
@@ -2322,6 +2518,9 @@ var TeardownStack = class {
     }
   }
 };
+
+// src/core/BottomSheetEngine.ts
+var HAPTIC_DURATION_MS = 8;
 var BottomSheetEngine = class {
   constructor(opts) {
     __publicField(this, "id", nextInstanceId("bs"));
@@ -2346,6 +2545,7 @@ var BottomSheetEngine = class {
     __publicField(this, "disableDragFlag");
     __publicField(this, "closeOnRouteChange");
     __publicField(this, "maxHeightCap");
+    __publicField(this, "maxHeightRaw");
     __publicField(this, "snapPointsRaw");
     __publicField(this, "snaps");
     __publicField(this, "activeId");
@@ -2381,6 +2581,7 @@ var BottomSheetEngine = class {
     __publicField(this, "detachScrimStages", null);
     __publicField(this, "stackEffectEnabled", false);
     __publicField(this, "stackEffectPrimed", false);
+    __publicField(this, "fitDeps");
     __publicField(this, "transformTemplate");
     const resolved = resolveEngineOptions(opts, {
       shouldApplyInertSiblings: () => {
@@ -2453,12 +2654,19 @@ var BottomSheetEngine = class {
     }
     this.activeId = resolved.initialId;
     auditVhUsage(this.snapPointsRaw);
+    this.auditDuplicateSnapIds(this.snapPointsRaw);
     this.rootEl = this.element.closest(".bs-root");
+    this.fitDeps = {
+      element: this.element,
+      scrollContainer: this.scrollContainer,
+      mode: this.mode,
+      getMaxHeightCap: () => this.maxHeightCap
+    };
     this.snaps = new SnapResolver(
       this.snapPointsRaw,
       resolved.initialAllowed,
       this.mode,
-      () => this.measureFitSize(),
+      () => measureFitSize(this.fitDeps),
       (maxAxisSize) => {
         this.element.style[layoutAxis(this.mode)] = `${maxAxisSize}px`;
       }
@@ -2492,7 +2700,18 @@ var BottomSheetEngine = class {
       io.observe(this.element);
       this.teardowns.add(() => io.disconnect());
     }
-    this.installFitObserver();
+    this.teardowns.add(
+      installFitObserver({
+        handle: this.handle,
+        scrollContainer: this.scrollContainer,
+        hasFitSnap: () => this.snapPointsRaw.some(
+          (p) => p.size === "fit" || p.size === "content"
+        ),
+        isDestroyed: () => this.destroyed,
+        isDragging: () => this.gesture?.isDragging ?? false,
+        recompute: () => this.recompute()
+      })
+    );
     if (resolved.radius !== void 0) this.setRadius(resolved.radius);
     if (resolved.maxHeight !== void 0) this.setMaxHeight(resolved.maxHeight);
     this.applyAutoAriaLabelledBy();
@@ -2643,27 +2862,33 @@ var BottomSheetEngine = class {
     } else {
       await this.animation.animateTo(target.size, velocityPxPerMs);
     }
-    this.opening = false;
     externalSignal?.removeEventListener("abort", onExternalAbort);
     if (signal.aborted) return;
-    this.scrollCache.restore(id, previousSize, target.size);
+    this.opening = false;
+    this.completeSnap(id, target.size, previousSize, wasClosed, false);
+  }
+  completeSnap(id, targetSize, previousSize, wasClosed, withHaptic) {
+    this.scrollCache.restore(id, previousSize, targetSize);
     this.updateAriaSlider();
     this.emit("snap", {
       id,
       size: this.size,
       progress: this.computeProgress(this.size)
     });
-    if (wasClosed && target.size > 0) {
-      this.emit("open", { id });
-      this.handleOpen();
-      notifyLinkedSheets(this.linkedSheets, this);
-      this.emit("opened", { id });
-    }
-    if (target.size === 0) {
-      this.emit("close", void 0);
-      this.handleClose();
-      this.emit("closed", void 0);
-    }
+    if (withHaptic) this.haptic();
+    if (wasClosed && targetSize > 0) this.emitOpenSequence(id);
+    if (targetSize === 0) this.emitCloseSequence();
+  }
+  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;
@@ -2684,19 +2909,31 @@ var BottomSheetEngine = class {
   }
   open(id) {
     if (this.destroyed) return Promise.resolve();
-    const target = id ?? this.snaps.getAllowedIds().find((a) => a !== "closed") ?? this.activeId;
+    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()[0];
+    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);
   }
   canDismiss() {
     return !this.persistent && !this.disableCloseFlag && !this.destroyed;
   }
+  setPersistent(value) {
+    if (this.destroyed) return;
+    this.persistent = value;
+  }
+  setDisableClose(value) {
+    if (this.destroyed) return;
+    this.disableCloseFlag = value;
+  }
+  setDisableDrag(value) {
+    if (this.destroyed) return;
+    this.disableDragFlag = value;
+  }
   isTop() {
     return this.isTopSheet;
   }
@@ -2733,18 +2970,23 @@ var BottomSheetEngine = class {
       axis === "height" ? "max-height" : "max-width",
       value
     );
-    if (typeof h === "number") {
-      this.maxHeightCap = h;
-      this.recompute();
-    } else if (typeof window !== "undefined") {
-      const probe2 = document.createElement("div");
-      probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
-      document.body.appendChild(probe2);
-      const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
-      probe2.remove();
-      this.maxHeightCap = measured > 0 ? measured : void 0;
-      this.recompute();
+    this.maxHeightRaw = h;
+    this.resolveMaxHeightCap();
+    this.recompute();
+  }
+  resolveMaxHeightCap() {
+    const raw = this.maxHeightRaw;
+    if (raw === void 0) {
+      this.maxHeightCap = void 0;
+      return;
     }
+    if (typeof raw === "number") {
+      this.maxHeightCap = raw;
+      return;
+    }
+    if (typeof window === "undefined") return;
+    const measured = resolveSnap(raw, this.mode);
+    this.maxHeightCap = measured > 0 ? measured : void 0;
   }
   clampToMaxHeight() {
     if (this.maxHeightCap === void 0) return;
@@ -2875,6 +3117,7 @@ var BottomSheetEngine = class {
     this.newCycle();
     this.snapPointsRaw = points;
     auditVhUsage(points);
+    this.auditDuplicateSnapIds(points);
     this.snaps.setRaw(points);
     if (allowed) this.snaps.setAllowedIds(allowed);
     this.scrollCache.clear();
@@ -2887,6 +3130,7 @@ var BottomSheetEngine = class {
   }
   recompute() {
     if (this.destroyed) return;
+    this.resolveMaxHeightCap();
     this.snaps.recompute();
     this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
@@ -2898,129 +3142,6 @@ var BottomSheetEngine = class {
       this.updateAriaSlider();
     }
   }
-  contentTargets() {
-    const scroller = this.scrollContainer;
-    if (!scroller) return [];
-    const hasSlot = typeof HTMLSlotElement !== "undefined";
-    const out = [];
-    for (const child2 of Array.from(scroller.children)) {
-      if (hasSlot && child2 instanceof HTMLSlotElement) {
-        for (const el of child2.assignedElements()) out.push(el);
-      } else {
-        out.push(child2);
-      }
-    }
-    return out;
-  }
-  measureSheetNatural(vertical) {
-    const el = this.element;
-    const content = this.scrollContainer;
-    if (!content) {
-      return vertical ? el.offsetHeight : el.offsetWidth;
-    }
-    const axis = vertical ? "height" : "width";
-    const sheetStyle = el.style;
-    const cs = content.style;
-    const prevSheet = sheetStyle[axis];
-    const prevFlex = cs.flex;
-    const prevContent = vertical ? cs.height : cs.width;
-    sheetStyle[axis] = "auto";
-    cs.flex = "none";
-    if (vertical) cs.height = "auto";
-    else cs.width = "auto";
-    const poked = vertical ? el.offsetHeight : el.offsetWidth;
-    const contentBox = vertical ? content.clientHeight : content.clientWidth;
-    const contentScroll = vertical ? content.scrollHeight : content.scrollWidth;
-    const natural = Math.max(poked, poked - contentBox + contentScroll);
-    sheetStyle[axis] = prevSheet;
-    cs.flex = prevFlex;
-    if (vertical) cs.height = prevContent;
-    else cs.width = prevContent;
-    return natural;
-  }
-  measureFitSize() {
-    const vertical = layoutAxis(this.mode) === "height";
-    const natural = this.measureSheetNatural(vertical);
-    const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
-    if (typeof window === "undefined") return capped;
-    const viewport = this.containingExtent(vertical);
-    return viewport > 0 ? Math.min(capped, viewport) : capped;
-  }
-  // The fit cap is the sheet's containing block, not always the window: a
-  // position:fixed sheet nested under a transform/filter/will-change ancestor
-  // is clipped to that ancestor, so capping by window.innerHeight oversizes the
-  // sheet and the content/footer get clipped. offsetParent resolves to that
-  // ancestor when present, and is null (→ viewport) for a plain fixed sheet.
-  containingExtent(vertical) {
-    const op = this.element.offsetParent;
-    if (op && op !== document.body && op !== document.documentElement) {
-      return vertical ? op.clientHeight : op.clientWidth;
-    }
-    return vertical ? window.innerHeight : window.innerWidth;
-  }
-  installFitObserver() {
-    if (typeof ResizeObserver === "undefined") return;
-    if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
-      return;
-    let raf = 0;
-    const schedule = () => {
-      if (raf) return;
-      raf = requestAnimationFrame(() => {
-        raf = 0;
-        if (this.destroyed || this.gesture?.isDragging) return;
-        this.recompute();
-      });
-    };
-    const ro = new ResizeObserver(schedule);
-    ro.observe(this.handle);
-    const scroller = this.scrollContainer;
-    const observed = /* @__PURE__ */ new Set();
-    const slots = /* @__PURE__ */ new Set();
-    const hasSlot = typeof HTMLSlotElement !== "undefined";
-    const onSlotChange = () => resync();
-    const trackSlots = () => {
-      if (!scroller || !hasSlot) return;
-      for (const child2 of Array.from(scroller.children)) {
-        if (child2 instanceof HTMLSlotElement && !slots.has(child2)) {
-          child2.addEventListener("slotchange", onSlotChange);
-          slots.add(child2);
-        }
-      }
-    };
-    const resync = () => {
-      trackSlots();
-      const targets = this.contentTargets();
-      for (const el of observed) {
-        if (!targets.includes(el)) {
-          ro.unobserve(el);
-          observed.delete(el);
-        }
-      }
-      for (const el of targets) {
-        if (!observed.has(el)) {
-          ro.observe(el);
-          observed.add(el);
-        }
-      }
-      schedule();
-    };
-    let mo;
-    if (scroller) {
-      resync();
-      if (typeof MutationObserver !== "undefined") {
-        mo = new MutationObserver(resync);
-        mo.observe(scroller, { childList: true });
-      }
-    }
-    this.teardowns.add(() => {
-      ro.disconnect();
-      mo?.disconnect();
-      for (const slot of slots) {
-        slot.removeEventListener("slotchange", onSlotChange);
-      }
-      if (raf) cancelAnimationFrame(raf);
-    });
-  }
   destroy() {
     this.destroyed = true;
     this.opening = false;
@@ -3038,9 +3159,10 @@ var BottomSheetEngine = class {
       this.backdrop.style.opacity = "";
       this.backdrop.style.pointerEvents = "";
     }
-    if (this.anchorHost) {
-      this.anchorHost.style.removeProperty("--bs-size");
-      this.anchorHost.style.removeProperty("--bs-progress");
+    for (const host of [this.anchorHost, this.scrimParent, this.rootEl]) {
+      if (!host) continue;
+      host.style.removeProperty("--bs-size");
+      host.style.removeProperty("--bs-progress");
     }
     if (this.screenComponent) {
       this.screenComponent.style.opacity = "";
@@ -3054,6 +3176,7 @@ var BottomSheetEngine = class {
   }
   newCycle() {
     this.allowOvershoot = false;
+    this.opening = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3109,8 +3232,14 @@ var BottomSheetEngine = class {
     this.element.setAttribute("aria-labelledby", titled.id);
   }
   recomputeSnaps() {
+    this.resolveMaxHeightCap();
+    this.snaps.setRaw(this.snapPointsRaw);
+    this.clampToMaxHeight();
+    this.scrim.invalidateOpacityCache();
+  }
+  auditDuplicateSnapIds(points) {
     const seen = /* @__PURE__ */ new Set();
-    for (const p of this.snapPointsRaw) {
+    for (const p of points) {
       if (seen.has(p.id)) {
         console.warn(
           `[BottomSheet] duplicate snap id "${p.id}" \u2014 only the first occurrence is reachable.`
@@ -3118,9 +3247,6 @@ var BottomSheetEngine = class {
       }
       seen.add(p.id);
     }
-    this.snaps.setRaw(this.snapPointsRaw);
-    this.clampToMaxHeight();
-    this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
     return this.snaps.getAllowedRange();
@@ -3308,9 +3434,15 @@ var BottomSheetEngine = class {
       flickVelocity: this.flickVelocity,
       dragThreshold: this.dragThreshold
     });
-    if (!target) return;
+    if (!target) {
+      this.clearWillChangeIfIdle();
+      return;
+    }
     const previousId = this.activeId;
-    if (target.id === previousId && target.size === this.size) return;
+    if (target.id === previousId && target.size === this.size) {
+      this.clearWillChangeIfIdle();
+      return;
+    }
     if (this.emitBeforeSnap(target, previousId)) {
       const restore = this.snaps.findById(previousId);
       if (restore) {
@@ -3333,27 +3465,19 @@ var BottomSheetEngine = class {
       if (signal.aborted) return;
       this.allowOvershoot = false;
       this.opening = false;
-      this.scrollCache.restore(target.id, previousSize, target.size);
-      this.updateAriaSlider();
-      this.emit("snap", {
-        id: target.id,
-        size: this.size,
-        progress: this.computeProgress(this.size)
-      });
-      this.haptic();
-      if (previousSnapSize === 0 && target.size > 0) {
-        this.emit("open", { id: target.id });
-        this.handleOpen();
-        notifyLinkedSheets(this.linkedSheets, this);
-        this.emit("opened", { id: target.id });
-      }
-      if (target.size === 0) {
-        this.emit("close", void 0);
-        this.handleClose();
-        this.emit("closed", void 0);
-      }
+      this.completeSnap(
+        target.id,
+        target.size,
+        previousSize,
+        previousSnapSize === 0,
+        true
+      );
     });
   }
+  clearWillChangeIfIdle() {
+    if (this.animation.isAnimating || this.gesture?.isDragging) return;
+    this.element.style.willChange = "";
+  }
   haptic() {
     if (typeof navigator !== "undefined" && "vibrate" in navigator) {
       try {
@@ -3434,14 +3558,9 @@ var BottomSheetEngine = class {
       progress: this.computeProgress(this.size)
     });
     if (target.size > 0 && !this.lifecycle.isInstalled) {
-      this.emit("open", { id: target.id });
-      this.handleOpen();
-      notifyLinkedSheets(this.linkedSheets, this);
-      this.emit("opened", { id: target.id });
+      this.emitOpenSequence(target.id);
     } else if (target.size === 0 && this.lifecycle.isInstalled) {
-      this.emit("close", void 0);
-      this.handleClose();
-      this.emit("closed", void 0);
+      this.emitCloseSequence();
     }
   }
   handleClose() {
@@ -3573,7 +3692,7 @@ var root_7 = $2.from_html(`<div class="bs-button-slot" data-side="right"><!></di
 var root = $2.from_html(`<div class="bs-root"><!> <div class="bs-screen"><!></div> <section class="bs-sheet" role="dialog"><div class="bs-handle" role="slider" tabindex="0" aria-label="Resize sheet" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0"></div> <!> <div class="bs-content" tabindex="0" role="region" aria-label="Sheet content"><!></div> <!> <span class="bs-sr-only" role="status" aria-live="polite"> </span></section> <!> <!></div>`);
 function BottomSheet($$anchor, $$props) {
   $2.push($$props, true);
-  let mode = $2.prop($$props, "mode", 3, "bottom"), animation = $2.prop($$props, "animation", 3, "spring"), focusTrap = $2.prop($$props, "focusTrap", 3, false), closeOnEscape = $2.prop($$props, "closeOnEscape", 3, true), closeOnBack = $2.prop($$props, "closeOnBack", 3, false), lockBodyScroll2 = $2.prop($$props, "lockBodyScroll", 3, true), rubberBand2 = $2.prop($$props, "rubberBand", 3, true), backdrop = $2.prop($$props, "backdrop", 3, true), closeOnBackdrop = $2.prop($$props, "closeOnBackdrop", 3, true), persistent = $2.prop($$props, "persistent", 3, false), disableClose = $2.prop($$props, "disableClose", 3, false), disableDrag = $2.prop($$props, "disableDrag", 3, false), closeOnRouteChange = $2.prop($$props, "closeOnRouteChange", 3, false), openProp = $2.prop($$props, "open", 15), snap = $2.prop($$props, "snap", 15), ariaLabel = $2.prop($$props, "ariaLabel", 3, "Bottom sheet");
+  let mode = $2.prop($$props, "mode", 3, "bottom"), animation = $2.prop($$props, "animation", 3, "spring"), focusTrap = $2.prop($$props, "focusTrap", 3, false), closeOnEscape = $2.prop($$props, "closeOnEscape", 3, true), closeOnBack = $2.prop($$props, "closeOnBack", 3, false), lockBodyScroll2 = $2.prop($$props, "lockBodyScroll", 3, true), rubberBand2 = $2.prop($$props, "rubberBand", 3, true), backdrop = $2.prop($$props, "backdrop", 3, true), closeOnBackdrop = $2.prop($$props, "closeOnBackdrop", 3, true), persistent = $2.prop($$props, "persistent", 3, false), disableClose = $2.prop($$props, "disableClose", 3, false), disableDrag = $2.prop($$props, "disableDrag", 3, false), closeOnRouteChange = $2.prop($$props, "closeOnRouteChange", 3, false), stackEffect = $2.prop($$props, "stackEffect", 3, false), teleport = $2.prop($$props, "teleport", 3, false), openProp = $2.prop($$props, "open", 15), snap = $2.prop($$props, "snap", 15), ariaLabel = $2.prop($$props, "ariaLabel", 3, "Bottom sheet");
   let sheetEl = $2.state(void 0);
   let handleEl = $2.state(void 0);
   let contentEl = $2.state(void 0);
@@ -3587,6 +3706,7 @@ function BottomSheet($$anchor, $$props) {
     progress: 0
   }));
   let engine = null;
+  let restoreTeleport = null;
   onMount(() => {
     if (!$2.get(sheetEl)) return;
     engine = new BottomSheetEngine({
@@ -3611,10 +3731,15 @@ function BottomSheet($$anchor, $$props) {
       disableClose: disableClose(),
       disableDrag: disableDrag(),
       closeOnRouteChange: closeOnRouteChange(),
+      stackEffect: stackEffect(),
       radius: $$props.radius,
       maxHeight: $$props.maxHeight,
       returnFocusTo: $$props.returnFocusTo
     });
+    const teleportTarget = teleport() === false ? null : resolveTeleportTarget($$props.teleportTo);
+    if (teleportTarget) {
+      restoreTeleport = teleportElements([$2.get(backdropEl), $2.get(screenEl), $2.get(sheetEl)], teleportTarget);
+    }
     const sync = () => {
       if (!engine) return;
       $2.set(viewState, { ...engine.state }, true);
@@ -3637,6 +3762,7 @@ function BottomSheet($$anchor, $$props) {
       $$props.onclose?.();
     });
     engine.on("before-close", (payload) => $$props.onbeforeclose?.(payload));
+    engine.on("before-snap", (payload) => $$props.onbeforesnap?.(payload));
     engine.on("opened", (payload) => $$props.onopened?.(payload.id));
     engine.on("closed", () => $$props.onclosed?.());
     engine.on("dragstart", () => {
@@ -3649,6 +3775,8 @@ function BottomSheet($$anchor, $$props) {
     });
   });
   onDestroy(() => {
+    restoreTeleport?.();
+    restoreTeleport = null;
     engine?.destroy();
     engine = null;
   });
@@ -3669,6 +3797,33 @@ function BottomSheet($$anchor, $$props) {
   const canDismiss = () => engine?.canDismiss() ?? false;
   const getState = () => engine?.state ?? $2.get(viewState);
   const getEngine = () => engine;
+  let snapDefApplied = false;
+  $2.user_effect(() => {
+    const points = $$props.snapPoints;
+    if (!snapDefApplied) {
+      snapDefApplied = true;
+      return;
+    }
+    engine?.setSnapPoints(points, untrack(() => $$props.allowed));
+  });
+  let allowedApplied = false;
+  $2.user_effect(() => {
+    const ids = $$props.allowed;
+    if (!allowedApplied) {
+      allowedApplied = true;
+      return;
+    }
+    if (ids) engine?.setAllowed(ids);
+  });
+  $2.user_effect(() => {
+    engine?.setPersistent(persistent());
+  });
+  $2.user_effect(() => {
+    engine?.setDisableClose(disableClose());
+  });
+  $2.user_effect(() => {
+    engine?.setDisableDrag(disableDrag());
+  });
   $2.user_effect(() => {
     if ($$props.radius !== void 0) engine?.setRadius($$props.radius);
   });