@surdeddd/bottom-sheet 0.8.1 → 0.9.0

package/dist/index.js

@@ -268,18 +268,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;
@@ -432,7 +439,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 = () => {
@@ -468,16 +478,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);
@@ -489,6 +490,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();
@@ -535,11 +555,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) => {
@@ -550,6 +572,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;
@@ -661,6 +684,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);
     }
@@ -1905,7 +2102,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 {
   constructor() {
     __publicField(this, "fns", []);
@@ -2325,6 +2521,9 @@ var TeardownStack = class {
     }
   }
 };
+
+// src/core/BottomSheetEngine.ts
+var HAPTIC_DURATION_MS = 8;
 var BottomSheetEngine = class {
   constructor(opts) {
     __publicField(this, "id", nextInstanceId("bs"));
@@ -2349,6 +2548,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");
@@ -2384,6 +2584,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: () => {
@@ -2456,12 +2657,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`;
       }
@@ -2495,7 +2703,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();
@@ -2646,27 +2865,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;
@@ -2687,19 +2912,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;
   }
@@ -2736,18 +2973,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;
@@ -2878,6 +3120,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();
@@ -2890,6 +3133,7 @@ var BottomSheetEngine = class {
   }
   recompute() {
     if (this.destroyed) return;
+    this.resolveMaxHeightCap();
     this.snaps.recompute();
     this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
@@ -2901,129 +3145,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;
@@ -3041,9 +3162,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 = "";
@@ -3057,6 +3179,7 @@ var BottomSheetEngine = class {
   }
   newCycle() {
     this.allowOvershoot = false;
+    this.opening = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3112,8 +3235,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.`
@@ -3121,9 +3250,6 @@ var BottomSheetEngine = class {
       }
       seen.add(p.id);
     }
-    this.snaps.setRaw(this.snapPointsRaw);
-    this.clampToMaxHeight();
-    this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
     return this.snaps.getAllowedRange();
@@ -3311,9 +3437,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) {
@@ -3336,27 +3468,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 {
@@ -3437,14 +3561,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() {
@@ -3480,6 +3599,95 @@ var createSheetManager = (initial = {}) => {
   };
 };
 
+// src/core/primitives/overlay-transforms.ts
+var closedTransform = (edge) => CLOSED_TRANSFORM[edge];
+var closedTransformFor = (edge, animation, peekPx) => {
+  switch (animation) {
+    case "fade":
+      return "translate3d(0, 0, 0)";
+    case "scale":
+      return "translate3d(0, 0, 0) scale(0.94)";
+    case "slide":
+    default:
+      if (peekPx !== void 0 && edge === "bottom") {
+        return `translate3d(0, calc(100% - ${peekPx}px), 0)`;
+      }
+      return closedTransform(edge);
+  }
+};
+var openTransformFor = (animation) => animation === "scale" ? "translate3d(0, 0, 0) scale(1)" : "translate3d(0, 0, 0)";
+
+// src/core/features/overlay-swipe.ts
+function installOverlaySwipe(deps) {
+  const el = deps.element;
+  const edge = deps.edge;
+  const isVertical = edge === "bottom" || edge === "top";
+  const sign = edge === "bottom" || edge === "right" ? 1 : -1;
+  const SLOP = 8;
+  let startX = 0;
+  let startY = 0;
+  let startT = 0;
+  let tracking = false;
+  let dragging = false;
+  let pointerId = null;
+  const previousTouchAction = el.style.touchAction;
+  el.style.touchAction = isVertical ? "pan-x" : "pan-y";
+  const onDown = (e) => {
+    if (e.button !== void 0 && e.button !== 0) return;
+    pointerId = e.pointerId;
+    startX = e.clientX;
+    startY = e.clientY;
+    startT = performance.now();
+    tracking = true;
+    dragging = false;
+  };
+  const onMove = (e) => {
+    if (!tracking || e.pointerId !== pointerId) return;
+    const delta = isVertical ? e.clientY - startY : e.clientX - startX;
+    if (!dragging) {
+      if (Math.abs(delta) < SLOP) return;
+      dragging = true;
+      el.style.transition = "none";
+      try {
+        el.setPointerCapture(e.pointerId);
+      } catch {
+      }
+    }
+    const offset = Math.max(0, sign * delta);
+    el.style.transform = isVertical ? `translate3d(0, ${sign * offset}px, 0)` : `translate3d(${sign * offset}px, 0, 0)`;
+  };
+  const finish = (e) => {
+    if (!tracking || e.pointerId !== pointerId) return;
+    tracking = false;
+    pointerId = null;
+    if (!dragging) return;
+    dragging = false;
+    const dt = performance.now() - startT || 1;
+    const delta = isVertical ? e.clientY - startY : e.clientX - startX;
+    const offset = Math.max(0, sign * delta);
+    const velocity = sign * delta / dt;
+    const size = isVertical ? el.offsetHeight : el.offsetWidth;
+    const past = offset > size * deps.getThreshold() || velocity > deps.getVelocityThreshold();
+    el.style.transition = deps.getExitTransition();
+    if (past) {
+      deps.close();
+    } else {
+      el.style.transform = deps.getOpenTransform();
+    }
+  };
+  el.addEventListener("pointerdown", onDown);
+  el.addEventListener("pointermove", onMove);
+  el.addEventListener("pointerup", finish);
+  el.addEventListener("pointercancel", finish);
+  return () => {
+    el.style.touchAction = previousTouchAction;
+    el.removeEventListener("pointerdown", onDown);
+    el.removeEventListener("pointermove", onMove);
+    el.removeEventListener("pointerup", finish);
+    el.removeEventListener("pointercancel", finish);
+  };
+}
+
 // src/core/overlay.ts
 var OVERLAY_PRESETS = Object.freeze({
   sheet: Object.freeze({
@@ -3511,22 +3719,6 @@ var OVERLAY_PRESETS = Object.freeze({
     swipeToClose: false
   })
 });
-var closedTransform = (edge) => CLOSED_TRANSFORM[edge];
-var closedTransformFor = (edge, animation, peekPx) => {
-  switch (animation) {
-    case "fade":
-      return "translate3d(0, 0, 0)";
-    case "scale":
-      return "translate3d(0, 0, 0) scale(0.94)";
-    case "slide":
-    default:
-      if (peekPx !== void 0 && edge === "bottom") {
-        return `translate3d(0, calc(100% - ${peekPx}px), 0)`;
-      }
-      return closedTransform(edge);
-  }
-};
-var openTransformFor = (animation) => animation === "scale" ? "translate3d(0, 0, 0) scale(1)" : "translate3d(0, 0, 0)";
 var OverlayEngine = class {
   constructor(opts) {
     __publicField(this, "id", nextInstanceId("ovl"));
@@ -3659,6 +3851,7 @@ var OverlayEngine = class {
     if (this.backdrop) {
       this.backdrop.style.transition = `opacity ${dur}ms ease-out`;
     }
+    this.setWillChange(true);
     const cycle = ++this.cycleNonce;
     return new Promise((resolve) => {
       requestAnimationFrame(() => {
@@ -3681,6 +3874,7 @@ var OverlayEngine = class {
             this.releaseInteractiveListeners();
             this.isOpen_ = false;
             this.isAnimating_ = false;
+            this.setWillChange(false);
             this.element.style.transform = closedTransformFor(
               this.edge,
               this.enterAnimation,
@@ -3711,6 +3905,7 @@ var OverlayEngine = class {
           ).then(() => {
             if (this.destroyed || cycle !== this.cycleNonce) return resolve();
             this.isAnimating_ = false;
+            this.setWillChange(false);
             this.element.setAttribute("data-state", "open");
             this.emit("open", void 0);
             this.onOpenCb?.();
@@ -3734,6 +3929,7 @@ var OverlayEngine = class {
     if (this.backdrop) {
       this.backdrop.style.transition = `opacity ${dur}ms ease-in`;
     }
+    this.setWillChange(true);
     const cycle = ++this.cycleNonce;
     return new Promise((resolve) => {
       requestAnimationFrame(() => {
@@ -3759,6 +3955,7 @@ var OverlayEngine = class {
         ).then(() => {
           if (this.destroyed || cycle !== this.cycleNonce) return resolve();
           this.isAnimating_ = false;
+          this.setWillChange(false);
           if (this.peekPx === void 0) {
             this.element.setAttribute("hidden", "");
           }
@@ -3781,6 +3978,7 @@ var OverlayEngine = class {
     this.destroyed = true;
     this.cycleNonce++;
     this.bus.clear();
+    this.setWillChange(false);
     this.releaseInteractiveListeners();
     this.releaseStackEntry?.();
     this.releaseStackEntry = null;
@@ -4006,7 +4204,6 @@ var OverlayEngine = class {
     this.originalNextSibling = null;
   }
   applyClosedStyles() {
-    this.element.style.willChange = "transform, opacity";
     this.element.style.transform = closedTransformFor(
       this.edge,
       this.enterAnimation,
@@ -4020,7 +4217,12 @@ var OverlayEngine = class {
     if (this.backdrop) {
       this.backdrop.style.opacity = "0";
       this.backdrop.style.pointerEvents = "none";
-      this.backdrop.style.willChange = "opacity";
+    }
+  }
+  setWillChange(on) {
+    this.element.style.willChange = on ? "transform, opacity" : "";
+    if (this.backdrop) {
+      this.backdrop.style.willChange = on ? "opacity" : "";
     }
   }
   awaitTransition(cycle, property = "transform") {
@@ -4106,73 +4308,15 @@ var OverlayEngine = class {
     this.lifecycle.release();
   }
   installSwipeToClose() {
-    const el = this.element;
-    const edge = this.edge;
-    const isVertical = edge === "bottom" || edge === "top";
-    const sign = edge === "bottom" || edge === "right" ? 1 : -1;
-    const SLOP = 8;
-    let startX = 0;
-    let startY = 0;
-    let startT = 0;
-    let tracking = false;
-    let dragging = false;
-    let pointerId = null;
-    const previousTouchAction = el.style.touchAction;
-    el.style.touchAction = isVertical ? "pan-x" : "pan-y";
-    const onDown = (e) => {
-      if (e.button !== void 0 && e.button !== 0) return;
-      pointerId = e.pointerId;
-      startX = e.clientX;
-      startY = e.clientY;
-      startT = performance.now();
-      tracking = true;
-      dragging = false;
-    };
-    const onMove = (e) => {
-      if (!tracking || e.pointerId !== pointerId) return;
-      const delta = isVertical ? e.clientY - startY : e.clientX - startX;
-      if (!dragging) {
-        if (Math.abs(delta) < SLOP) return;
-        dragging = true;
-        el.style.transition = "none";
-        try {
-          el.setPointerCapture(e.pointerId);
-        } catch {
-        }
-      }
-      const offset = Math.max(0, sign * delta);
-      el.style.transform = isVertical ? `translate3d(0, ${sign * offset}px, 0)` : `translate3d(${sign * offset}px, 0, 0)`;
-    };
-    const finish = (e) => {
-      if (!tracking || e.pointerId !== pointerId) return;
-      tracking = false;
-      pointerId = null;
-      if (!dragging) return;
-      dragging = false;
-      const dt = performance.now() - startT || 1;
-      const delta = isVertical ? e.clientY - startY : e.clientX - startX;
-      const offset = Math.max(0, sign * delta);
-      const velocity = sign * delta / dt;
-      const size = isVertical ? el.offsetHeight : el.offsetWidth;
-      const past = offset > size * this.swipeThreshold || velocity > this.swipeVelocityThreshold;
-      el.style.transition = `transform ${this.effectiveDuration()}ms ${this.exitEasing}`;
-      if (past) {
-        void this.close("swipe");
-      } else {
-        el.style.transform = openTransformFor(this.enterAnimation);
-      }
-    };
-    el.addEventListener("pointerdown", onDown);
-    el.addEventListener("pointermove", onMove);
-    el.addEventListener("pointerup", finish);
-    el.addEventListener("pointercancel", finish);
-    return () => {
-      el.style.touchAction = previousTouchAction;
-      el.removeEventListener("pointerdown", onDown);
-      el.removeEventListener("pointermove", onMove);
-      el.removeEventListener("pointerup", finish);
-      el.removeEventListener("pointercancel", finish);
-    };
+    return installOverlaySwipe({
+      element: this.element,
+      edge: this.edge,
+      getThreshold: () => this.swipeThreshold,
+      getVelocityThreshold: () => this.swipeVelocityThreshold,
+      getExitTransition: () => `transform ${this.effectiveDuration()}ms ${this.exitEasing}`,
+      getOpenTransform: () => openTransformFor(this.enterAnimation),
+      close: () => void this.close("swipe")
+    });
   }
   registerInStack() {
     this.releaseStackEntry = sheetStack.push({