@surdeddd/bottom-sheet 0.8.2 → 0.9.1

package/dist/solid.source.jsx

@@ -274,14 +274,21 @@ var SnapResolver = class {
   resolved = [];
   maxAxisSize = 0;
   rangeCache = null;
+  notified = false;
   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 ??= 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;
@@ -434,7 +441,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 = () => {
@@ -470,16 +480,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);
@@ -491,6 +492,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();
@@ -537,11 +557,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) => {
@@ -552,6 +574,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;
@@ -663,6 +686,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";
@@ -1147,6 +1295,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 = "";
@@ -1395,7 +1546,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");
@@ -1403,7 +1559,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") {
@@ -1431,7 +1587,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() {
@@ -1462,9 +1618,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 () => {
@@ -1474,7 +1656,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();
@@ -1504,7 +1692,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 });
     }
@@ -1541,8 +1729,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`;
@@ -1560,6 +1754,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;
     }
@@ -1772,12 +1967,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);
     }
@@ -1904,7 +2101,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 = "";
   }
 };
 
@@ -2304,8 +2501,7 @@ function resolveEngineOptions(opts, extras) {
   };
 }
 
-// src/core/BottomSheetEngine.ts
-var HAPTIC_DURATION_MS = 8;
+// src/core/primitives/teardown-stack.ts
 var TeardownStack = class {
   fns = [];
   add(fn) {
@@ -2323,6 +2519,9 @@ var TeardownStack = class {
     }
   }
 };
+
+// src/core/BottomSheetEngine.ts
+var HAPTIC_DURATION_MS = 8;
 var BottomSheetEngine = class {
   id = nextInstanceId("bs");
   element;
@@ -2346,6 +2545,7 @@ var BottomSheetEngine = class {
   disableDragFlag;
   closeOnRouteChange;
   maxHeightCap;
+  maxHeightRaw;
   snapPointsRaw;
   snaps;
   activeId;
@@ -2381,6 +2581,7 @@ var BottomSheetEngine = class {
   detachScrimStages = null;
   stackEffectEnabled = false;
   stackEffectPrimed = false;
+  fitDeps;
   transformTemplate;
   constructor(opts) {
     const resolved = resolveEngineOptions(opts, {
@@ -2454,12 +2655,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`;
       }
@@ -2493,7 +2701,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();
@@ -2644,27 +2863,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;
@@ -2685,19 +2910,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;
   }
@@ -2734,18 +2971,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;
@@ -2876,6 +3118,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();
@@ -2888,6 +3131,7 @@ var BottomSheetEngine = class {
   }
   recompute() {
     if (this.destroyed) return;
+    this.resolveMaxHeightCap();
     this.snaps.recompute();
     this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
@@ -2899,129 +3143,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;
@@ -3039,9 +3160,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 = "";
@@ -3055,6 +3177,7 @@ var BottomSheetEngine = class {
   }
   newCycle() {
     this.allowOvershoot = false;
+    this.opening = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3110,8 +3233,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.`
@@ -3119,9 +3248,6 @@ var BottomSheetEngine = class {
       }
       seen.add(p.id);
     }
-    this.snaps.setRaw(this.snapPointsRaw);
-    this.clampToMaxHeight();
-    this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
     return this.snaps.getAllowedRange();
@@ -3309,9 +3435,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) {
@@ -3334,27 +3466,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 {
@@ -3435,14 +3559,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() {
@@ -3452,6 +3571,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/solid/index.tsx
 var BottomSheet = (props) => {
   let sheetEl;
@@ -3468,6 +3619,7 @@ var BottomSheet = (props) => {
     progress: 0
   });
   let engine = null;
+  let restoreTeleport = null;
   onMount(() => {
     if (!sheetEl) return;
     const engineOpts = {
@@ -3494,10 +3646,18 @@ var BottomSheet = (props) => {
       disableClose: props.disableClose,
       disableDrag: props.disableDrag,
       closeOnRouteChange: props.closeOnRouteChange,
+      stackEffect: props.stackEffect,
       returnFocusTo: props.returnFocusTo
     };
     engine = new BottomSheetEngine(engineOpts);
     props.engineRef?.(engine);
+    const teleportTarget = props.teleport === false ? null : resolveTeleportTarget(props.teleportTo);
+    if (teleportTarget) {
+      restoreTeleport = teleportElements(
+        [backdropEl, scrimEl, sheetEl],
+        teleportTarget
+      );
+    }
     const sync = () => {
       if (!engine) return;
       const s = engine.state;
@@ -3509,6 +3669,7 @@ var BottomSheet = (props) => {
       sync();
       props.onSnap?.(payload.id);
     });
+    engine.on("before-snap", (payload) => props.onBeforeSnap?.(payload));
     engine.on("dragstart", sync);
     engine.on("dragend", sync);
     if (props.backdrop !== false && props.closeOnBackdrop !== false && backdropEl) {
@@ -3522,6 +3683,8 @@ var BottomSheet = (props) => {
     }
   });
   onCleanup(() => {
+    restoreTeleport?.();
+    restoreTeleport = null;
     engine?.destroy();
     engine = null;
     props.engineRef?.(null);
@@ -3549,6 +3712,36 @@ var BottomSheet = (props) => {
       { defer: true }
     )
   );
+  createEffect(
+    on(
+      () => props.persistent,
+      (value, prev) => {
+        if (!engine || prev === void 0 || value === void 0) return;
+        engine.setPersistent(value);
+      },
+      { defer: true }
+    )
+  );
+  createEffect(
+    on(
+      () => props.disableClose,
+      (value, prev) => {
+        if (!engine || prev === void 0 || value === void 0) return;
+        engine.setDisableClose(value);
+      },
+      { defer: true }
+    )
+  );
+  createEffect(
+    on(
+      () => props.disableDrag,
+      (value, prev) => {
+        if (!engine || prev === void 0 || value === void 0) return;
+        engine.setDisableDrag(value);
+      },
+      { defer: true }
+    )
+  );
   const showBackdrop = createMemo(() => props.backdrop !== false);
   const mode = createMemo(() => props.mode ?? "bottom");
   const ariaLabel = createMemo(() => props.ariaLabel ?? "Bottom sheet");
@@ -3592,6 +3785,16 @@ var BottomSheet = (props) => {
           {state().activeId}
         </span>
       </section>
+      <Show when={props.leftButton}>
+        <div class="bs-button-slot" data-side="left" data-mode={mode()}>
+          {props.leftButton}
+        </div>
+      </Show>
+      <Show when={props.rightButton}>
+        <div class="bs-button-slot" data-side="right" data-mode={mode()}>
+          {props.rightButton}
+        </div>
+      </Show>
     </div>;
 };
 export {