@surdeddd/bottom-sheet 0.8.1 → 0.9.0

package/dist/element.js

@@ -304,18 +304,25 @@ var init_snap_resolver = __esm({
         __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;
@@ -482,16 +489,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);
@@ -503,6 +501,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();
@@ -571,7 +588,10 @@ var init_route = __esm({
         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();
+        });
       });
     };
     programmaticBack = () => {
@@ -589,11 +609,13 @@ var init_route = __esm({
 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) => {
@@ -604,6 +626,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;
@@ -730,6 +753,142 @@ var init_resize_observer = __esm({
   }
 });
 
+// src/core/features/fit-observer.ts
+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);
+  };
+}
+var contentTargets;
+var init_fit_observer = __esm({
+  "src/core/features/fit-observer.ts"() {
+    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;
+    };
+  }
+});
+
+// src/core/features/fit-measurement.ts
+var measureSheetNatural, containingExtent, measureFitSize;
+var init_fit_measurement = __esm({
+  "src/core/features/fit-measurement.ts"() {
+    init_transform();
+    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;
+    };
+    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;
+    };
+    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";
@@ -1252,6 +1411,9 @@ var init_scrim_controller = __esm({
           const s = this.screenComponent.style;
           s.opacity = "";
           s.display = "";
+          s.position = "";
+          s.inset = "";
+          s.pointerEvents = "";
         }
         if (this.backdrop) {
           this.backdrop.style.opacity = "";
@@ -1524,7 +1686,12 @@ var init_animation_runner = __esm({
         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");
@@ -1532,7 +1699,7 @@ var init_animation_runner = __esm({
         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") {
@@ -1560,7 +1727,7 @@ var init_animation_runner = __esm({
         }
         if (!this.isAnimating) {
           this.getRootEl()?.removeAttribute("data-animating");
-          if (!this.isDragging()) this.element.style.willChange = "auto";
+          if (!this.isDragging()) this.element.style.willChange = "";
         }
       }
       destroy() {
@@ -1574,7 +1741,7 @@ var init_animation_runner = __esm({
 });
 
 // src/core/lifecycle/focusTrap.ts
-var FOCUSABLE, isVisible, focusables, trapStack, installFocusTrap;
+var FOCUSABLE, isVisible, collectFocusables, focusables, containsComposed, trapStack, installFocusTrap;
 var init_focusTrap = __esm({
   "src/core/lifecycle/focusTrap.ts"() {
     FOCUSABLE = [
@@ -1596,9 +1763,35 @@ var init_focusTrap = __esm({
       }
       return el.offsetParent !== null;
     };
-    focusables = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter(
+    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;
+    };
+    focusables = (root) => collectFocusables(root).filter(
       (el) => !el.hasAttribute("inert") && isVisible(el) && !el.matches("[aria-hidden='true']")
     );
+    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;
+    };
     trapStack = [];
     installFocusTrap = (container, options = {}) => {
       if (typeof document === "undefined") return () => {
@@ -1608,7 +1801,13 @@ var init_focusTrap = __esm({
       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();
@@ -1638,7 +1837,7 @@ var init_focusTrap = __esm({
       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 });
         }
@@ -1680,8 +1879,14 @@ var init_scrollLock = __esm({
           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`;
@@ -1699,6 +1904,7 @@ var init_scrollLock = __esm({
           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;
         }
@@ -1928,12 +2134,14 @@ var init_gestures = __esm({
       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);
         }
@@ -2076,7 +2284,7 @@ var init_gesture_controller = __esm({
         this.isDragging_ = false;
         this.keyboardDismissed = false;
         this.deps.getRoot()?.removeAttribute("data-dragging");
-        this.deps.element.style.willChange = "auto";
+        this.deps.element.style.willChange = "";
       }
     };
   }
@@ -2511,8 +2719,34 @@ var init_engine_options = __esm({
   }
 });
 
+// src/core/primitives/teardown-stack.ts
+var TeardownStack;
+var init_teardown_stack = __esm({
+  "src/core/primitives/teardown-stack.ts"() {
+    TeardownStack = class {
+      constructor() {
+        __publicField(this, "fns", []);
+      }
+      add(fn) {
+        if (fn) this.fns.push(fn);
+      }
+      drain() {
+        while (this.fns.length) {
+          try {
+            this.fns.pop()();
+          } catch (err) {
+            queueMicrotask(() => {
+              throw err;
+            });
+          }
+        }
+      }
+    };
+  }
+});
+
 // src/core/BottomSheetEngine.ts
-var HAPTIC_DURATION_MS, TeardownStack, BottomSheetEngine;
+var HAPTIC_DURATION_MS, BottomSheetEngine;
 var init_BottomSheetEngine = __esm({
   "src/core/BottomSheetEngine.ts"() {
     init_sheetStack();
@@ -2528,6 +2762,8 @@ var init_BottomSheetEngine = __esm({
     init_content_swipe();
     init_visual_viewport();
     init_resize_observer();
+    init_fit_observer();
+    init_fit_measurement();
     init_slider_keyboard();
     init_scrim_controller();
     init_animation_runner();
@@ -2539,27 +2775,9 @@ var init_BottomSheetEngine = __esm({
     init_sheet_anchors();
     init_scrim_stages();
     init_engine_options();
+    init_teardown_stack();
     init_opacity_dedup();
     HAPTIC_DURATION_MS = 8;
-    TeardownStack = class {
-      constructor() {
-        __publicField(this, "fns", []);
-      }
-      add(fn) {
-        if (fn) this.fns.push(fn);
-      }
-      drain() {
-        while (this.fns.length) {
-          try {
-            this.fns.pop()();
-          } catch (err) {
-            queueMicrotask(() => {
-              throw err;
-            });
-          }
-        }
-      }
-    };
     BottomSheetEngine = class {
       constructor(opts) {
         __publicField(this, "id", nextInstanceId("bs"));
@@ -2584,6 +2802,7 @@ var init_BottomSheetEngine = __esm({
         __publicField(this, "disableDragFlag");
         __publicField(this, "closeOnRouteChange");
         __publicField(this, "maxHeightCap");
+        __publicField(this, "maxHeightRaw");
         __publicField(this, "snapPointsRaw");
         __publicField(this, "snaps");
         __publicField(this, "activeId");
@@ -2619,6 +2838,7 @@ var init_BottomSheetEngine = __esm({
         __publicField(this, "detachScrimStages", null);
         __publicField(this, "stackEffectEnabled", false);
         __publicField(this, "stackEffectPrimed", false);
+        __publicField(this, "fitDeps");
         __publicField(this, "transformTemplate");
         const resolved = resolveEngineOptions(opts, {
           shouldApplyInertSiblings: () => {
@@ -2691,12 +2911,19 @@ var init_BottomSheetEngine = __esm({
         }
         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`;
           }
@@ -2730,7 +2957,18 @@ var init_BottomSheetEngine = __esm({
           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();
@@ -2881,27 +3119,33 @@ var init_BottomSheetEngine = __esm({
         } 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;
@@ -2922,19 +3166,31 @@ var init_BottomSheetEngine = __esm({
       }
       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;
       }
@@ -2971,18 +3227,23 @@ var init_BottomSheetEngine = __esm({
           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;
@@ -3113,6 +3374,7 @@ var init_BottomSheetEngine = __esm({
         this.newCycle();
         this.snapPointsRaw = points;
         auditVhUsage(points);
+        this.auditDuplicateSnapIds(points);
         this.snaps.setRaw(points);
         if (allowed) this.snaps.setAllowedIds(allowed);
         this.scrollCache.clear();
@@ -3125,6 +3387,7 @@ var init_BottomSheetEngine = __esm({
       }
       recompute() {
         if (this.destroyed) return;
+        this.resolveMaxHeightCap();
         this.snaps.recompute();
         this.clampToMaxHeight();
         this.scrim.invalidateOpacityCache();
@@ -3136,129 +3399,6 @@ var init_BottomSheetEngine = __esm({
           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;
@@ -3276,9 +3416,10 @@ var init_BottomSheetEngine = __esm({
           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 = "";
@@ -3292,6 +3433,7 @@ var init_BottomSheetEngine = __esm({
       }
       newCycle() {
         this.allowOvershoot = false;
+        this.opening = false;
         this.currentAbort.abort();
         this.currentAbort = new AbortController();
         return this.currentAbort.signal;
@@ -3347,8 +3489,14 @@ var init_BottomSheetEngine = __esm({
         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.`
@@ -3356,9 +3504,6 @@ var init_BottomSheetEngine = __esm({
           }
           seen.add(p.id);
         }
-        this.snaps.setRaw(this.snapPointsRaw);
-        this.clampToMaxHeight();
-        this.scrim.invalidateOpacityCache();
       }
       getAllowedRange() {
         return this.snaps.getAllowedRange();
@@ -3546,9 +3691,15 @@ var init_BottomSheetEngine = __esm({
           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) {
@@ -3571,27 +3722,19 @@ var init_BottomSheetEngine = __esm({
           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 {
@@ -3672,14 +3815,9 @@ var init_BottomSheetEngine = __esm({
           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() {
@@ -3699,17 +3837,102 @@ var init_baseStyles = __esm({
   }
 });
 
-// src/web-component/BottomSheetElement.ts
-var BottomSheetElement_exports = {};
-__export(BottomSheetElement_exports, {
-  BottomSheetElement: () => BottomSheetElement,
-  defineBottomSheet: () => defineBottomSheet
+// src/web-component/shadow-tree.ts
+var buildSlot, buildSlotRegion, buildShadowTree;
+var init_shadow_tree = __esm({
+  "src/web-component/shadow-tree.ts"() {
+    buildSlot = (name) => {
+      const slot = document.createElement("slot");
+      slot.name = name;
+      return slot;
+    };
+    buildSlotRegion = (name, className) => {
+      const region = document.createElement("div");
+      region.className = className;
+      region.setAttribute("part", name);
+      const slot = buildSlot(name);
+      region.appendChild(slot);
+      const sync = () => {
+        region.hidden = slot.assignedNodes({ flatten: true }).length === 0;
+      };
+      slot.addEventListener("slotchange", sync);
+      sync();
+      return region;
+    };
+    buildShadowTree = () => {
+      const root = document.createElement("div");
+      root.className = "bs-root";
+      const backdrop = document.createElement("div");
+      backdrop.className = "bs-backdrop";
+      backdrop.setAttribute("part", "backdrop");
+      const screen = document.createElement("div");
+      screen.className = "bs-screen";
+      screen.setAttribute("part", "screen");
+      screen.appendChild(buildSlot("screen"));
+      const sheet = document.createElement("section");
+      sheet.className = "bs-sheet";
+      sheet.setAttribute("part", "sheet");
+      sheet.setAttribute("role", "dialog");
+      sheet.setAttribute("aria-modal", "false");
+      const leftButton = document.createElement("div");
+      leftButton.className = "bs-button-slot";
+      leftButton.setAttribute("data-side", "left");
+      leftButton.setAttribute("part", "left-button");
+      leftButton.appendChild(buildSlot("leftButton"));
+      const rightButton = document.createElement("div");
+      rightButton.className = "bs-button-slot";
+      rightButton.setAttribute("data-side", "right");
+      rightButton.setAttribute("part", "right-button");
+      rightButton.appendChild(buildSlot("rightButton"));
+      const handle = document.createElement("div");
+      handle.className = "bs-handle";
+      handle.setAttribute("part", "handle");
+      handle.setAttribute("role", "slider");
+      handle.setAttribute("tabindex", "0");
+      handle.setAttribute("aria-label", "Resize sheet");
+      const header = buildSlotRegion("header", "bs-header");
+      const content = document.createElement("div");
+      content.className = "bs-content";
+      content.setAttribute("part", "content");
+      content.setAttribute("tabindex", "0");
+      content.setAttribute("role", "region");
+      content.setAttribute("aria-label", "Sheet content");
+      const defaultSlot = document.createElement("slot");
+      content.appendChild(defaultSlot);
+      const footer = buildSlotRegion("footer", "bs-footer");
+      const announcer = document.createElement("span");
+      announcer.className = "bs-sr-announce";
+      announcer.setAttribute("role", "status");
+      announcer.setAttribute("aria-live", "polite");
+      announcer.setAttribute("aria-atomic", "true");
+      announcer.style.cssText = "position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);";
+      sheet.append(handle, header, content, footer);
+      root.append(backdrop, screen, sheet, leftButton, rightButton, announcer);
+      const fragment = document.createDocumentFragment();
+      fragment.appendChild(root);
+      return {
+        fragment,
+        refs: {
+          sheet,
+          handle,
+          header,
+          content,
+          footer,
+          backdrop,
+          screen,
+          leftButton,
+          rightButton,
+          announcer
+        }
+      };
+    };
+  }
 });
-var ATTR_SNAP_POINTS, ATTR_ALLOWED, ATTR_INITIAL, ATTR_MODE, ATTR_BACKDROP, ATTR_STYLESHEET, ATTR_ANIMATION, ATTR_FOCUS_TRAP, ATTR_CLOSE_ON_ESCAPE, ATTR_LOCK_BODY_SCROLL, ATTR_SHEET_LABEL, ATTR_STACK_EFFECT, ATTR_PERSISTENT, ATTR_DISABLE_CLOSE, ATTR_DISABLE_DRAG, ATTR_CLOSE_ON_ROUTE_CHANGE, ATTR_RADIUS, ATTR_MAX_HEIGHT, ATTR_RETURN_FOCUS_TO, ATTR_BACKDROP_COLOR, ATTR_SCRIM_COLOR, ATTR_SNAP, LIVE_ATTRS, isValidSnapPoint, DEFAULT_SNAP_POINTS, parseSnapPoints, VALID_MODES, VALID_ANIMATIONS, parseMode, parseAnimation, parseList, parseDimension, ANCHOR_POSITIONS, ANCHOR_ANIMATIONS, parseAnchorOptions, buildSlot, buildSlotRegion, buildShadowTree, BaseHTMLElement, BottomSheetElement, defineBottomSheet;
-var init_BottomSheetElement = __esm({
-  "src/web-component/BottomSheetElement.ts"() {
-    init_BottomSheetEngine();
-    init_baseStyles();
+
+// src/web-component/attributes.ts
+var ATTR_SNAP_POINTS, ATTR_ALLOWED, ATTR_INITIAL, ATTR_MODE, ATTR_BACKDROP, ATTR_STYLESHEET, ATTR_ANIMATION, ATTR_FOCUS_TRAP, ATTR_CLOSE_ON_ESCAPE, ATTR_LOCK_BODY_SCROLL, ATTR_SHEET_LABEL, ATTR_STACK_EFFECT, ATTR_PERSISTENT, ATTR_DISABLE_CLOSE, ATTR_DISABLE_DRAG, ATTR_CLOSE_ON_ROUTE_CHANGE, ATTR_RADIUS, ATTR_MAX_HEIGHT, ATTR_RETURN_FOCUS_TO, ATTR_BACKDROP_COLOR, ATTR_SCRIM_COLOR, ATTR_SNAP, LIVE_ATTRS, OBSERVED_ATTRS, isValidSnapPoint, DEFAULT_SNAP_POINTS, parseSnapPoints, VALID_MODES, VALID_ANIMATIONS, parseMode, parseAnimation, parseList, parseDimension, ANCHOR_POSITIONS, ANCHOR_ANIMATIONS, parseAnchorOptions;
+var init_attributes = __esm({
+  "src/web-component/attributes.ts"() {
     ATTR_SNAP_POINTS = "snap-points";
     ATTR_ALLOWED = "allowed";
     ATTR_INITIAL = "initial";
@@ -3737,8 +3960,34 @@ var init_BottomSheetElement = __esm({
       ATTR_MAX_HEIGHT,
       ATTR_BACKDROP_COLOR,
       ATTR_SCRIM_COLOR,
-      ATTR_SNAP
+      ATTR_SNAP,
+      ATTR_PERSISTENT,
+      ATTR_DISABLE_CLOSE,
+      ATTR_DISABLE_DRAG
     ]);
+    OBSERVED_ATTRS = [
+      ATTR_SNAP_POINTS,
+      ATTR_ALLOWED,
+      ATTR_INITIAL,
+      ATTR_MODE,
+      ATTR_BACKDROP,
+      ATTR_ANIMATION,
+      ATTR_FOCUS_TRAP,
+      ATTR_CLOSE_ON_ESCAPE,
+      ATTR_LOCK_BODY_SCROLL,
+      ATTR_SHEET_LABEL,
+      ATTR_STACK_EFFECT,
+      ATTR_PERSISTENT,
+      ATTR_DISABLE_CLOSE,
+      ATTR_DISABLE_DRAG,
+      ATTR_CLOSE_ON_ROUTE_CHANGE,
+      ATTR_RADIUS,
+      ATTR_MAX_HEIGHT,
+      ATTR_RETURN_FOCUS_TO,
+      ATTR_BACKDROP_COLOR,
+      ATTR_SCRIM_COLOR,
+      ATTR_SNAP
+    ];
     isValidSnapPoint = (p) => !!p && typeof p === "object" && typeof p.id === "string" && (typeof p.size === "number" || typeof p.size === "string");
     DEFAULT_SNAP_POINTS = [{ id: "full", size: "full" }];
     parseSnapPoints = (raw) => {
@@ -3811,91 +4060,22 @@ var init_BottomSheetElement = __esm({
         animation: animation && ANCHOR_ANIMATIONS.includes(animation) ? animation : void 0
       };
     };
-    buildSlot = (name) => {
-      const slot = document.createElement("slot");
-      slot.name = name;
-      return slot;
-    };
-    buildSlotRegion = (name, className) => {
-      const region = document.createElement("div");
-      region.className = className;
-      region.setAttribute("part", name);
-      const slot = buildSlot(name);
-      region.appendChild(slot);
-      const sync = () => {
-        region.hidden = slot.assignedNodes({ flatten: true }).length === 0;
-      };
-      slot.addEventListener("slotchange", sync);
-      sync();
-      return region;
-    };
-    buildShadowTree = () => {
-      const root = document.createElement("div");
-      root.className = "bs-root";
-      const backdrop = document.createElement("div");
-      backdrop.className = "bs-backdrop";
-      backdrop.setAttribute("part", "backdrop");
-      const screen = document.createElement("div");
-      screen.className = "bs-screen";
-      screen.setAttribute("part", "screen");
-      screen.appendChild(buildSlot("screen"));
-      const sheet = document.createElement("section");
-      sheet.className = "bs-sheet";
-      sheet.setAttribute("part", "sheet");
-      sheet.setAttribute("role", "dialog");
-      sheet.setAttribute("aria-modal", "false");
-      const leftButton = document.createElement("div");
-      leftButton.className = "bs-button-slot";
-      leftButton.setAttribute("data-side", "left");
-      leftButton.setAttribute("part", "left-button");
-      leftButton.appendChild(buildSlot("leftButton"));
-      const rightButton = document.createElement("div");
-      rightButton.className = "bs-button-slot";
-      rightButton.setAttribute("data-side", "right");
-      rightButton.setAttribute("part", "right-button");
-      rightButton.appendChild(buildSlot("rightButton"));
-      const handle = document.createElement("div");
-      handle.className = "bs-handle";
-      handle.setAttribute("part", "handle");
-      handle.setAttribute("role", "slider");
-      handle.setAttribute("tabindex", "0");
-      handle.setAttribute("aria-label", "Resize sheet");
-      const header = buildSlotRegion("header", "bs-header");
-      const content = document.createElement("div");
-      content.className = "bs-content";
-      content.setAttribute("part", "content");
-      content.setAttribute("tabindex", "0");
-      content.setAttribute("role", "region");
-      content.setAttribute("aria-label", "Sheet content");
-      const defaultSlot = document.createElement("slot");
-      content.appendChild(defaultSlot);
-      const footer = buildSlotRegion("footer", "bs-footer");
-      const announcer = document.createElement("span");
-      announcer.className = "bs-sr-announce";
-      announcer.setAttribute("role", "status");
-      announcer.setAttribute("aria-live", "polite");
-      announcer.setAttribute("aria-atomic", "true");
-      announcer.style.cssText = "position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);";
-      sheet.append(handle, header, content, footer);
-      root.append(backdrop, screen, sheet, leftButton, rightButton, announcer);
-      const fragment = document.createDocumentFragment();
-      fragment.appendChild(root);
-      return {
-        fragment,
-        refs: {
-          sheet,
-          handle,
-          header,
-          content,
-          footer,
-          backdrop,
-          screen,
-          leftButton,
-          rightButton,
-          announcer
-        }
-      };
-    };
+  }
+});
+
+// src/web-component/BottomSheetElement.ts
+var BottomSheetElement_exports = {};
+__export(BottomSheetElement_exports, {
+  BottomSheetElement: () => BottomSheetElement,
+  defineBottomSheet: () => defineBottomSheet
+});
+var BaseHTMLElement, BottomSheetElement, defineBottomSheet;
+var init_BottomSheetElement = __esm({
+  "src/web-component/BottomSheetElement.ts"() {
+    init_BottomSheetEngine();
+    init_baseStyles();
+    init_shadow_tree();
+    init_attributes();
     BaseHTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {
     };
     BottomSheetElement = class extends BaseHTMLElement {
@@ -3908,6 +4088,7 @@ var init_BottomSheetElement = __esm({
         __publicField(this, "backdropClickHandler", null);
         __publicField(this, "stylesheetLinked", false);
         __publicField(this, "declarativeAnchors", []);
+        __publicField(this, "lastActiveId", null);
         this.root = this.attachShadow({ mode: "open" });
         const baseStyle = document.createElement("style");
         baseStyle.textContent = baseStyles;
@@ -3930,29 +4111,7 @@ var init_BottomSheetElement = __esm({
         this.root.appendChild(fragment);
       }
       static get observedAttributes() {
-        return [
-          ATTR_SNAP_POINTS,
-          ATTR_ALLOWED,
-          ATTR_INITIAL,
-          ATTR_MODE,
-          ATTR_BACKDROP,
-          ATTR_ANIMATION,
-          ATTR_FOCUS_TRAP,
-          ATTR_CLOSE_ON_ESCAPE,
-          ATTR_LOCK_BODY_SCROLL,
-          ATTR_SHEET_LABEL,
-          ATTR_STACK_EFFECT,
-          ATTR_PERSISTENT,
-          ATTR_DISABLE_CLOSE,
-          ATTR_DISABLE_DRAG,
-          ATTR_CLOSE_ON_ROUTE_CHANGE,
-          ATTR_RADIUS,
-          ATTR_MAX_HEIGHT,
-          ATTR_RETURN_FOCUS_TO,
-          ATTR_BACKDROP_COLOR,
-          ATTR_SCRIM_COLOR,
-          ATTR_SNAP
-        ];
+        return OBSERVED_ATTRS.slice();
       }
       connectedCallback() {
         if (!this.stylesheetLinked) {
@@ -3996,6 +4155,15 @@ var init_BottomSheetElement = __esm({
           case ATTR_SCRIM_COLOR:
             this.engine.setScrimColor(value);
             break;
+          case ATTR_PERSISTENT:
+            this.engine.setPersistent(value === "true");
+            break;
+          case ATTR_DISABLE_CLOSE:
+            this.engine.setDisableClose(value === "true");
+            break;
+          case ATTR_DISABLE_DRAG:
+            this.engine.setDisableDrag(value === "true");
+            break;
           case ATTR_SNAP:
             if (value && value !== this.engine.state.activeId) {
               void this.engine.snapTo(value);
@@ -4007,6 +4175,7 @@ var init_BottomSheetElement = __esm({
         return this.engine;
       }
       teardownEngine() {
+        this.lastActiveId = this.engine?.state.activeId ?? this.lastActiveId;
         this.offHandlers.forEach((off) => off());
         this.offHandlers = [];
         if (this.backdropClickHandler) {
@@ -4044,6 +4213,9 @@ var init_BottomSheetElement = __esm({
           };
           backdrop.addEventListener("click", this.backdropClickHandler);
         }
+        const snapPoints = parseSnapPoints(this.getAttribute(ATTR_SNAP_POINTS));
+        const initialAttr = this.getAttribute(ATTR_INITIAL) ?? void 0;
+        const initial = this.lastActiveId && snapPoints.some((p) => p.id === this.lastActiveId) ? this.lastActiveId : initialAttr;
         const opts = {
           element: sheet,
           handle,
@@ -4051,9 +4223,9 @@ var init_BottomSheetElement = __esm({
           backdrop: showBackdrop ? backdrop : void 0,
           scrim: this.refs.screen,
           mode,
-          snapPoints: parseSnapPoints(this.getAttribute(ATTR_SNAP_POINTS)),
+          snapPoints,
           allowed: parseList(this.getAttribute(ATTR_ALLOWED)),
-          initial: this.getAttribute(ATTR_INITIAL) ?? void 0,
+          initial,
           animation: parseAnimation(this.getAttribute(ATTR_ANIMATION)),
           focusTrap,
           closeOnEscape: this.getAttribute(ATTR_CLOSE_ON_ESCAPE) !== "false",
@@ -4083,6 +4255,15 @@ var init_BottomSheetElement = __esm({
             announcer.textContent = payload.id;
             this.dispatchEvent(new CustomEvent("snap", { detail: payload }));
           }),
+          this.engine.on("before-snap", (payload) => {
+            const accepted = this.dispatchEvent(
+              new CustomEvent("before-snap", {
+                detail: payload,
+                cancelable: true
+              })
+            );
+            if (!accepted) payload.cancel();
+          }),
           this.engine.on(
             "open",
             (payload) => this.dispatchEvent(new CustomEvent("open", { detail: payload }))