@surdeddd/bottom-sheet 0.8.1 → 0.9.0

package/dist/qwik.js

@@ -265,18 +265,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;
@@ -429,7 +436,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 = () => {
@@ -465,16 +475,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);
@@ -486,6 +487,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();
@@ -532,11 +552,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) => {
@@ -547,6 +569,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;
@@ -658,6 +681,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 child of Array.from(scroller.children)) {
+    if (hasSlot && child instanceof HTMLSlotElement) {
+      for (const el of child.assignedElements()) out.push(el);
+    } else {
+      out.push(child);
+    }
+  }
+  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 child of Array.from(scroller.children)) {
+      if (child instanceof HTMLSlotElement && !slots.has(child)) {
+        child.addEventListener("slotchange", onSlotChange);
+        slots.add(child);
+      }
+    }
+  };
+  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";
@@ -1144,6 +1292,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 = "";
@@ -1392,7 +1543,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");
@@ -1400,7 +1556,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") {
@@ -1428,7 +1584,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() {
@@ -1459,9 +1615,35 @@ var isVisible = (el) => {
   }
   return el.offsetParent !== null;
 };
-var focusables = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter(
+var collectFocusables = (root) => {
+  const out = Array.from(root.querySelectorAll(FOCUSABLE));
+  if (typeof HTMLSlotElement !== "undefined") {
+    for (const slot of Array.from(root.querySelectorAll("slot"))) {
+      for (const assigned of slot.assignedElements()) {
+        if (assigned.matches(FOCUSABLE)) out.push(assigned);
+        out.push(...collectFocusables(assigned));
+      }
+    }
+  }
+  return out;
+};
+var focusables = (root) => collectFocusables(root).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 () => {
@@ -1471,7 +1653,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();
@@ -1501,7 +1689,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 });
     }
@@ -1538,8 +1726,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`;
@@ -1557,6 +1751,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;
     }
@@ -1769,12 +1964,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);
     }
@@ -1901,7 +2098,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 = "";
   }
 };
 
@@ -2300,8 +2497,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", []);
@@ -2321,6 +2517,9 @@ var TeardownStack = class {
     }
   }
 };
+
+// src/core/BottomSheetEngine.ts
+var HAPTIC_DURATION_MS = 8;
 var BottomSheetEngine = class {
   constructor(opts) {
     __publicField(this, "id", nextInstanceId("bs"));
@@ -2345,6 +2544,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");
@@ -2380,6 +2580,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: () => {
@@ -2452,12 +2653,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`;
       }
@@ -2491,7 +2699,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();
@@ -2642,27 +2861,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;
@@ -2683,19 +2908,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;
   }
@@ -2732,18 +2969,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;
@@ -2874,6 +3116,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();
@@ -2886,6 +3129,7 @@ var BottomSheetEngine = class {
   }
   recompute() {
     if (this.destroyed) return;
+    this.resolveMaxHeightCap();
     this.snaps.recompute();
     this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
@@ -2897,129 +3141,6 @@ var BottomSheetEngine = class {
       this.updateAriaSlider();
     }
   }
-  contentTargets() {
-    const scroller = this.scrollContainer;
-    if (!scroller) return [];
-    const hasSlot = typeof HTMLSlotElement !== "undefined";
-    const out = [];
-    for (const child of Array.from(scroller.children)) {
-      if (hasSlot && child instanceof HTMLSlotElement) {
-        for (const el of child.assignedElements()) out.push(el);
-      } else {
-        out.push(child);
-      }
-    }
-    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 child of Array.from(scroller.children)) {
-        if (child instanceof HTMLSlotElement && !slots.has(child)) {
-          child.addEventListener("slotchange", onSlotChange);
-          slots.add(child);
-        }
-      }
-    };
-    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;
@@ -3037,9 +3158,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 = "";
@@ -3053,6 +3175,7 @@ var BottomSheetEngine = class {
   }
   newCycle() {
     this.allowOvershoot = false;
+    this.opening = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3108,8 +3231,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.`
@@ -3117,9 +3246,6 @@ var BottomSheetEngine = class {
       }
       seen.add(p.id);
     }
-    this.snaps.setRaw(this.snapPointsRaw);
-    this.clampToMaxHeight();
-    this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
     return this.snaps.getAllowedRange();
@@ -3307,9 +3433,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) {
@@ -3332,27 +3464,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 {
@@ -3433,14 +3557,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() {
@@ -3457,6 +3576,8 @@ var BottomSheet = component$((props) => {
   const scrimRef = useSignal();
   const headerRef = useSignal();
   const footerRef = useSignal();
+  const leftBtnRef = useSignal();
+  const rightBtnRef = useSignal();
   const initialActive = props.initial ?? props.snapPoints[0]?.id ?? "default";
   const state = useStore({
     size: 0,
@@ -3495,6 +3616,7 @@ var BottomSheet = component$((props) => {
       disableClose: props.disableClose,
       disableDrag: props.disableDrag,
       closeOnRouteChange: props.closeOnRouteChange,
+      stackEffect: props.stackEffect,
       returnFocusTo: props.returnFocusTo,
       radius: props.radius,
       maxHeight: props.maxHeight
@@ -3530,9 +3652,33 @@ var BottomSheet = component$((props) => {
       if (empty) el.setAttribute("hidden", "");
       else el.removeAttribute("hidden");
     };
-    collapseEmpty(headerRef.value);
-    collapseEmpty(footerRef.value);
+    const collapseBoth = () => {
+      collapseEmpty(headerRef.value);
+      collapseEmpty(footerRef.value);
+      collapseEmpty(leftBtnRef.value);
+      collapseEmpty(rightBtnRef.value);
+    };
+    collapseBoth();
+    let slotObserver;
+    if (typeof MutationObserver !== "undefined") {
+      slotObserver = new MutationObserver(collapseBoth);
+      for (const el of [
+        headerRef.value,
+        footerRef.value,
+        leftBtnRef.value,
+        rightBtnRef.value
+      ]) {
+        if (el) {
+          slotObserver.observe(el, {
+            childList: true,
+            subtree: true,
+            characterData: true
+          });
+        }
+      }
+    }
     cleanup(() => {
+      slotObserver?.disconnect();
       if (onBackdropClick && backdropRef.value) {
         backdropRef.value.removeEventListener("click", onBackdropClick);
       }
@@ -3558,6 +3704,16 @@ var BottomSheet = component$((props) => {
     if (radius !== void 0) engine.setRadius(radius);
     if (maxHeight !== void 0) engine.setMaxHeight(maxHeight);
   });
+  useTask$(({ track }) => {
+    const persistent = track(() => props.persistent);
+    const disableClose = track(() => props.disableClose);
+    const disableDrag = track(() => props.disableDrag);
+    const engine = engineStore.engine;
+    if (!engine) return;
+    if (persistent !== void 0) engine.setPersistent(persistent);
+    if (disableClose !== void 0) engine.setDisableClose(disableClose);
+    if (disableDrag !== void 0) engine.setDisableDrag(disableDrag);
+  });
   const showBackdrop = props.backdrop !== false;
   const mode = props.mode ?? "bottom";
   const ariaLabel = props.ariaLabel ?? "Bottom sheet";
@@ -3591,6 +3747,26 @@ var BottomSheet = component$((props) => {
           /* @__PURE__ */ jsx("span", { class: "bs-sr-only", role: "status", "aria-live": "polite", children: state.activeId })
         ]
       }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        class: "bs-button-slot",
+        "data-side": "left",
+        "data-mode": mode,
+        ref: leftBtnRef,
+        children: /* @__PURE__ */ jsx(Slot, { name: "leftButton" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        class: "bs-button-slot",
+        "data-side": "right",
+        "data-mode": mode,
+        ref: rightBtnRef,
+        children: /* @__PURE__ */ jsx(Slot, { name: "rightButton" })
+      }
     )
   ] });
 });