@surdeddd/bottom-sheet 0.9.1 → 0.11.0

package/dist/element.cjs

@@ -215,15 +215,27 @@ var init_cssLength = __esm({
   }
 });
 
+// src/core/primitives/devWarn.ts
+function devWarn(...args) {
+  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
+    console.warn(...args);
+  }
+}
+var init_devWarn = __esm({
+  "src/core/primitives/devWarn.ts"() {
+  }
+});
+
 // src/core/primitives/snap-points.ts
 var resolveSnapList, VH_NOT_DVH, auditVhUsage, findNearest, allowedRange, findById, MOUSE_FLICK_VELOCITY, MOUSE_DRAG_THRESHOLD, DIRECTIONAL_INTENT_VELOCITY, findDragSettleTarget;
 var init_snap_points = __esm({
   "src/core/primitives/snap-points.ts"() {
     init_cssLength();
+    init_devWarn();
     resolveSnapList = (points, mode, measureFit) => points.map((p) => {
       const raw = resolveSnap(p.size, mode, measureFit);
       if (!Number.isFinite(raw) || raw < 0) {
-        console.warn(
+        devWarn(
           `[BottomSheet] snap "${p.id}" resolved to invalid size (${String(p.size)} \u2192 ${raw}); clamped to 0.`
         );
         return { id: p.id, size: 0 };
@@ -235,7 +247,7 @@ var init_snap_points = __esm({
       for (const p of points) {
         if (typeof p.size !== "string") continue;
         if (!VH_NOT_DVH.test(p.size)) continue;
-        console.warn(
+        devWarn(
           `[BottomSheet] snap "${p.id}" uses "vh" \u2014 prefer "dvh" on mobile (iOS Safari URL bar makes vh unstable). See https://web.dev/blog/viewport-units`
         );
       }
@@ -291,6 +303,31 @@ var init_snap_points = __esm({
   }
 });
 
+// src/core/primitives/cancelable-emit.ts
+function emitCancelable(emit, base, warnLabel) {
+  let cancelled = false;
+  let frozen = false;
+  emit({
+    ...base,
+    cancel: () => {
+      if (frozen) {
+        devWarn(
+          `[BottomSheet] ${warnLabel}.cancel() called asynchronously \u2014 ignored. cancel() must be invoked synchronously inside the listener.`
+        );
+        return;
+      }
+      cancelled = true;
+    }
+  });
+  frozen = true;
+  return cancelled;
+}
+var init_cancelable_emit = __esm({
+  "src/core/primitives/cancelable-emit.ts"() {
+    init_devWarn();
+  }
+});
+
 // src/core/primitives/snap-resolver.ts
 var SnapResolver;
 var init_snap_resolver = __esm({
@@ -449,7 +486,9 @@ function notifyLinkedSheets(sheets, self) {
     try {
       if (linked.state.size === 0) continue;
       const ids = linked.getAllowedIds();
-      const target = ids.find((id) => id !== "closed");
+      const resolved = linked.getResolvedSnaps();
+      const sizeOf = (id) => resolved.find((s) => s.id === id)?.size ?? 0;
+      const target = ids.find((id) => sizeOf(id) > 0);
       if (target && target !== linked.state.activeId) {
         void linked.snapTo(target);
       }
@@ -465,6 +504,202 @@ var init_linked_sheets = __esm({
   }
 });
 
+// src/core/features/history-coordinator.ts
+function onPopState() {
+  if (suppress > 0) {
+    suppress -= 1;
+    const rebrand = pendingRebrand;
+    pendingRebrand = null;
+    if (rebrand) rebrand();
+    maybeTeardownListener();
+    return;
+  }
+  if (entries.length === 0) {
+    notifyRouteChange();
+    maybeTeardownListener();
+    return;
+  }
+  let target = null;
+  let targetIdx = -1;
+  for (let i = entries.length - 1; i >= 0; i -= 1) {
+    const entry = entries[i];
+    if (!entry.surface.isOpen()) continue;
+    if (!target) {
+      target = entry;
+      targetIdx = i;
+    }
+    if (entry.surface.isTop()) {
+      target = entry;
+      targetIdx = i;
+      break;
+    }
+  }
+  if (!target) {
+    const removed = entries.pop();
+    if (removed) removed.live = false;
+    maybeTeardownListener();
+    return;
+  }
+  target.live = false;
+  entries.splice(targetIdx, 1);
+  const settled = target;
+  void Promise.resolve(settled.surface.close()).then(() => {
+    if (settled.surface.isOpen()) restore(settled);
+  });
+  maybeTeardownListener();
+}
+function restore(entry) {
+  if (!hasWindow() || !hasHistory()) return;
+  entry.live = true;
+  runInternal(() => {
+    try {
+      history.pushState(entry.surface.markerState(), "", entry.surface.url);
+    } catch {
+      entry.live = false;
+    }
+  });
+  if (entry.live) {
+    entries.push(entry);
+    ensureListener();
+  }
+}
+function pushBackMarker(surface) {
+  const entry = { surface, priorUrl: void 0, live: false };
+  if (!hasWindow() || !hasHistory()) {
+    return entry;
+  }
+  entry.priorUrl = surface.url !== void 0 ? location.href : void 0;
+  runInternal(() => {
+    try {
+      history.pushState(surface.markerState(), "", surface.url);
+      entry.live = true;
+    } catch {
+      entry.live = false;
+    }
+  });
+  if (entry.live) {
+    entries.push(entry);
+    ensureListener();
+  }
+  return entry;
+}
+function popBackMarker(handle) {
+  if (!hasWindow() || !hasHistory()) return;
+  const entry = handle;
+  const idx = entries.indexOf(entry);
+  if (idx === -1 || !entry.live) return;
+  const last = entries.length - 1;
+  entry.live = false;
+  entries.splice(idx, 1);
+  if (idx !== last) {
+    const rebrandSurface = entries[entries.length - 1].surface;
+    const rebrandUrl = entry.priorUrl;
+    pendingRebrand = () => {
+      runInternal(() => {
+        history.replaceState(
+          rebrandSurface.markerState(),
+          "",
+          rebrandUrl !== void 0 ? rebrandUrl : location.href
+        );
+      });
+    };
+  }
+  suppress += 1;
+  runInternal(() => {
+    try {
+      history.back();
+    } catch {
+      suppress = Math.max(0, suppress - 1);
+      pendingRebrand = null;
+    }
+  });
+  maybeTeardownListener();
+}
+function subscribeRouteChange(fn) {
+  if (!hasWindow() || !hasHistory()) return () => {
+  };
+  subscribers.add(fn);
+  if (subscribers.size === 1) installPatch();
+  ensureListener();
+  return () => {
+    if (!subscribers.has(fn)) return;
+    subscribers.delete(fn);
+    if (subscribers.size === 0) removePatch();
+    maybeTeardownListener();
+  };
+}
+var entries, subscribers, suppress, internalDepth, pendingRebrand, listenerInstalled, patchInstalled, origPushState, origReplaceState, patchedPushState, patchedReplaceState, hasWindow, hasHistory, runInternal, notifyRouteChange, ensureListener, maybeTeardownListener, installPatch, removePatch;
+var init_history_coordinator = __esm({
+  "src/core/features/history-coordinator.ts"() {
+    entries = [];
+    subscribers = /* @__PURE__ */ new Set();
+    suppress = 0;
+    internalDepth = 0;
+    pendingRebrand = null;
+    listenerInstalled = false;
+    patchInstalled = false;
+    origPushState = null;
+    origReplaceState = null;
+    patchedPushState = null;
+    patchedReplaceState = null;
+    hasWindow = () => typeof window !== "undefined";
+    hasHistory = () => typeof history !== "undefined";
+    runInternal = (fn) => {
+      internalDepth += 1;
+      try {
+        fn();
+      } finally {
+        internalDepth -= 1;
+      }
+    };
+    notifyRouteChange = () => {
+      const snapshot = Array.from(subscribers);
+      for (const fn of snapshot) fn();
+    };
+    ensureListener = () => {
+      if (listenerInstalled || !hasWindow()) return;
+      window.addEventListener("popstate", onPopState);
+      listenerInstalled = true;
+    };
+    maybeTeardownListener = () => {
+      if (!listenerInstalled) return;
+      if (entries.length > 0 || subscribers.size > 0 || suppress > 0) return;
+      if (hasWindow()) window.removeEventListener("popstate", onPopState);
+      listenerInstalled = false;
+    };
+    installPatch = () => {
+      if (patchInstalled || !hasHistory()) return;
+      origPushState = history.pushState;
+      origReplaceState = history.replaceState;
+      patchedPushState = function(...args) {
+        origPushState.apply(this, args);
+        if (internalDepth === 0) notifyRouteChange();
+      };
+      patchedReplaceState = function(...args) {
+        origReplaceState.apply(this, args);
+        if (internalDepth === 0) notifyRouteChange();
+      };
+      history.pushState = patchedPushState;
+      history.replaceState = patchedReplaceState;
+      patchInstalled = true;
+    };
+    removePatch = () => {
+      if (!patchInstalled) return;
+      if (history.pushState === patchedPushState && origPushState) {
+        history.pushState = origPushState;
+      }
+      if (history.replaceState === patchedReplaceState && origReplaceState) {
+        history.replaceState = origReplaceState;
+      }
+      origPushState = null;
+      origReplaceState = null;
+      patchedPushState = null;
+      patchedReplaceState = null;
+      patchInstalled = false;
+    };
+  }
+});
+
 // src/core/features/route.ts
 function installRoute(deps) {
   if (typeof window === "undefined") {
@@ -475,135 +710,43 @@ function installRoute(deps) {
     return () => {
     };
   }
-  let pushed = false;
-  let closer = null;
-  const teardownEntry = () => {
-    if (closer) {
-      const idx = closers.indexOf(closer);
-      if (idx !== -1) closers.splice(idx, 1);
-    }
-    const wasConsumed = closer?.consumed ?? false;
-    closer = null;
-    if (pushed && !wasConsumed) {
-      pushed = false;
-      programmaticBack();
-    } else {
-      pushed = false;
-    }
-  };
-  const pushEntry = () => {
-    try {
-      if (deps.routedTo !== void 0) {
-        history.pushState({ __bsRouted: deps.sheetId }, "", deps.routedTo);
-      } else {
-        history.pushState({ __bsSheet: deps.sheetId }, "");
-      }
-      pushed = true;
-    } catch {
-      pushed = false;
-    }
-  };
+  let handle = null;
   const onOpen = () => {
-    if (closer) return;
-    const self = {
+    if (handle) return;
+    handle = pushBackMarker({
       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();
+      isTop: deps.isTopSheet,
+      close: deps.close,
+      markerState: () => deps.routedTo !== void 0 ? { __bsRouted: deps.sheetId } : { __bsSheet: deps.sheetId },
+      url: deps.routedTo
+    });
+  };
+  const onClose = () => {
+    if (!handle) return;
+    popBackMarker(handle);
+    handle = null;
   };
   const unsubscribeOpen = deps.on("open", onOpen);
-  const unsubscribeClose = deps.on("close", teardownEntry);
+  const unsubscribeClose = deps.on("close", onClose);
   if (deps.getSize() > 0) onOpen();
   return () => {
     unsubscribeOpen();
     unsubscribeClose();
-    teardownEntry();
+    if (handle) {
+      popBackMarker(handle);
+      handle = null;
+    }
   };
 }
 function installRouteChange(deps) {
-  if (typeof window === "undefined" || typeof history === "undefined") {
-    return () => {
-    };
-  }
-  const onChange = () => {
+  return subscribeRouteChange(() => {
     if (deps.isDestroyed() || deps.getSize() <= 0) return;
     void deps.close();
-  };
-  const wrap = (key) => {
-    const original = history[key];
-    const patched = function(...args) {
-      original.apply(this, args);
-      onChange();
-    };
-    history[key] = patched;
-    return () => {
-      if (history[key] === patched) {
-        history[key] = original;
-      }
-    };
-  };
-  window.addEventListener("popstate", onChange);
-  const restorePush = wrap("pushState");
-  const restoreReplace = wrap("replaceState");
-  return () => {
-    window.removeEventListener("popstate", onChange);
-    restorePush();
-    restoreReplace();
-  };
+  });
 }
-var closers, handlerInstalled, suppress, ensureHandler, programmaticBack;
 var init_route = __esm({
   "src/core/features/route.ts"() {
-    closers = [];
-    handlerInstalled = false;
-    suppress = 0;
-    ensureHandler = () => {
-      if (handlerInstalled || typeof window === "undefined") return;
-      handlerInstalled = true;
-      window.addEventListener("popstate", () => {
-        if (suppress > 0) {
-          suppress -= 1;
-          return;
-        }
-        let target = null;
-        for (let i = closers.length - 1; i >= 0; i -= 1) {
-          const c = closers[i];
-          if (!c.isOpen()) continue;
-          if (!target) target = c;
-          if (c.isTop()) {
-            target = c;
-            break;
-          }
-        }
-        if (!target) return;
-        target.consumed = true;
-        const idx = closers.indexOf(target);
-        if (idx !== -1) closers.splice(idx, 1);
-        const settled = target;
-        void Promise.resolve(settled.close()).then(() => {
-          if (settled.isOpen()) settled.restore();
-        });
-      });
-    };
-    programmaticBack = () => {
-      suppress += 1;
-      try {
-        history.back();
-      } catch {
-        suppress = Math.max(0, suppress - 1);
-      }
-    };
+    init_history_coordinator();
   }
 });
 
@@ -679,11 +822,15 @@ function installVisualViewport(deps) {
       if (clamp < deps.getMaxAxisSize()) {
         deps.setMaxAxisSize(clamp);
       }
+      const wasAnimating = deps.isAnimating?.() ?? false;
+      deps.cancelInFlight();
+      deps.newCycle();
       const max = deps.getMaxAxisSize();
       deps.setSize(Math.min(deps.getSize(), max));
       const current = deps.resolveActiveSnap();
       if (current && !deps.isDragging()) {
         deps.applySize(Math.min(current.size, max));
+        if (wasAnimating) deps.resyncAfterCancel?.();
       } else {
         deps.applySize(deps.getSize());
       }
@@ -839,6 +986,60 @@ var init_fit_observer = __esm({
   }
 });
 
+// src/core/features/max-height-controller.ts
+function createMaxHeightController(deps) {
+  let maxHeightCap;
+  let maxHeightRaw;
+  const resolveCap = () => {
+    const raw = maxHeightRaw;
+    if (raw === void 0) {
+      maxHeightCap = void 0;
+      return;
+    }
+    if (typeof raw === "number") {
+      maxHeightCap = raw;
+      return;
+    }
+    if (typeof window === "undefined") return;
+    const measured = resolveSnap(raw, deps.mode);
+    maxHeightCap = measured > 0 ? measured : void 0;
+  };
+  const clampTo = () => {
+    if (maxHeightCap === void 0) return;
+    if (deps.getMaxAxisSize() > maxHeightCap) {
+      deps.setMaxAxisSize(maxHeightCap);
+    }
+  };
+  return {
+    setRadius(r) {
+      deps.element.style.setProperty(
+        "--bs-radius",
+        typeof r === "number" ? `${r}px` : r
+      );
+    },
+    setMaxHeight(h) {
+      const value = typeof h === "number" ? `${h}px` : h;
+      const axis = layoutAxis(deps.mode);
+      deps.element.style.setProperty(
+        axis === "height" ? "max-height" : "max-width",
+        value
+      );
+      maxHeightRaw = h;
+      resolveCap();
+      deps.recompute();
+    },
+    resolveCap,
+    clampTo,
+    getCap: () => maxHeightCap
+  };
+}
+var init_max_height_controller = __esm({
+  "src/core/features/max-height-controller.ts"() {
+    init_snap_points();
+    init_transform();
+  }
+});
+
 // src/core/features/fit-measurement.ts
 var measureSheetNatural, containingExtent, measureFitSize;
 var init_fit_measurement = __esm({
@@ -995,17 +1196,6 @@ var init_opacity_dedup = __esm({
   }
 });
 
-// src/core/primitives/devWarn.ts
-function devWarn(...args) {
-  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
-    console.warn(...args);
-  }
-}
-var init_devWarn = __esm({
-  "src/core/primitives/devWarn.ts"() {
-  }
-});
-
 // src/core/primitives/overlay-position.ts
 function resolveSheetAnchoredStyle(mode, position, inset) {
   const sizeOffset = `calc(var(--bs-size, 0px) + ${inset})`;
@@ -2554,7 +2744,7 @@ var init_sheet_anchors = __esm({
 // src/core/features/scrim-stages.ts
 function installScrimStages(deps, opts) {
   const doc = deps.host.ownerDocument;
-  const entries = opts.stages.map((def) => {
+  const entries2 = opts.stages.map((def) => {
     const wrapper = doc.createElement("div");
     wrapper.className = "bs-scrim-stage";
     const ws = wrapper.style;
@@ -2575,9 +2765,9 @@ function installScrimStages(deps, opts) {
   const resolveActive = () => {
     const state = deps.getState();
     if (state.size === 0) {
-      return entries.find((e) => matchesId(e.def, state.activeId)) ?? null;
+      return entries2.find((e) => matchesId(e.def, state.activeId)) ?? null;
     }
-    return entries.find((e) => matchesId(e.def, state.activeId)) ?? entries.find((e) => matchesRange(e.def, state.progress)) ?? null;
+    return entries2.find((e) => matchesId(e.def, state.activeId)) ?? entries2.find((e) => matchesRange(e.def, state.progress)) ?? null;
   };
   const hide = (entry, animate) => {
     entry.inFlight?.cancel();
@@ -2626,13 +2816,13 @@ function installScrimStages(deps, opts) {
     deps.on("open", () => update(true)),
     deps.on("close", () => update(true))
   ];
-  if (entries.some((e) => e.def.forRange)) {
+  if (entries2.some((e) => e.def.forRange)) {
     offs.push(deps.on("progress", () => update(true)));
   }
   update(false);
   return () => {
     offs.forEach((off) => off());
-    for (const entry of entries) {
+    for (const entry of entries2) {
       entry.inFlight?.cancel();
       entry.inFlight = null;
       if (entry.wrapper.parentNode) {
@@ -2756,6 +2946,8 @@ var init_BottomSheetEngine = __esm({
     init_instance_id();
     init_event_bus();
     init_snap_points();
+    init_cancelable_emit();
+    init_devWarn();
     init_snap_resolver();
     init_persist();
     init_auto_collapse();
@@ -2765,6 +2957,7 @@ var init_BottomSheetEngine = __esm({
     init_visual_viewport();
     init_resize_observer();
     init_fit_observer();
+    init_max_height_controller();
     init_fit_measurement();
     init_slider_keyboard();
     init_scrim_controller();
@@ -2803,8 +2996,7 @@ var init_BottomSheetEngine = __esm({
         __publicField(this, "disableCloseFlag");
         __publicField(this, "disableDragFlag");
         __publicField(this, "closeOnRouteChange");
-        __publicField(this, "maxHeightCap");
-        __publicField(this, "maxHeightRaw");
+        __publicField(this, "maxHeight");
         __publicField(this, "snapPointsRaw");
         __publicField(this, "snaps");
         __publicField(this, "activeId");
@@ -2915,11 +3107,20 @@ var init_BottomSheetEngine = __esm({
         auditVhUsage(this.snapPointsRaw);
         this.auditDuplicateSnapIds(this.snapPointsRaw);
         this.rootEl = this.element.closest(".bs-root");
+        this.maxHeight = createMaxHeightController({
+          element: this.element,
+          mode: this.mode,
+          getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
+          setMaxAxisSize: (size) => {
+            this.snaps.setMaxAxisSize(size);
+          },
+          recompute: () => this.recompute()
+        });
         this.fitDeps = {
           element: this.element,
           scrollContainer: this.scrollContainer,
           mode: this.mode,
-          getMaxHeightCap: () => this.maxHeightCap
+          getMaxHeightCap: () => this.maxHeight.getCap()
         };
         this.snaps = new SnapResolver(
           this.snapPointsRaw,
@@ -2941,8 +3142,8 @@ var init_BottomSheetEngine = __esm({
         this.attach();
         this.registerInStack();
         if (this.snaps.getMaxAxisSize() === 0 && typeof IntersectionObserver !== "undefined" && typeof document !== "undefined") {
-          const io = new IntersectionObserver((entries) => {
-            for (const entry of entries) {
+          const io = new IntersectionObserver((entries2) => {
+            for (const entry of entries2) {
               if (!entry.isIntersecting) continue;
               if (this.destroyed) return;
               this.snaps.recompute();
@@ -3030,7 +3231,7 @@ var init_BottomSheetEngine = __esm({
       }
       use(plugin) {
         if (this.destroyed) {
-          console.warn(
+          devWarn(
             `[BottomSheet] use("${plugin.name}") called on destroyed engine \u2014 ignored.`
           );
           return this;
@@ -3072,6 +3273,9 @@ var init_BottomSheetEngine = __esm({
       getAllowedIds() {
         return this.snaps.getAllowedIds().slice();
       }
+      getResolvedSnaps() {
+        return this.snaps.getResolvedSnaps();
+      }
       async snapTo(id, velocityOrOpts = 0, _skipBeforeSnap = false) {
         if (this.destroyed) return;
         const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : { velocity: velocityOrOpts };
@@ -3080,11 +3284,11 @@ var init_BottomSheetEngine = __esm({
         if (externalSignal?.aborted) return;
         const target = this.snaps.findById(id);
         if (!target) {
-          console.warn(`[BottomSheet] unknown snap id: ${id}`);
+          devWarn(`[BottomSheet] unknown snap id: ${id}`);
           return;
         }
         if (!this.snaps.getAllowedIds().includes(id)) {
-          console.warn(`[BottomSheet] snap "${id}" is not in allowed list`);
+          devWarn(`[BottomSheet] snap "${id}" is not in allowed list`);
           return;
         }
         if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
@@ -3216,42 +3420,11 @@ var init_BottomSheetEngine = __esm({
       }
       setRadius(r) {
         if (this.destroyed) return;
-        this.element.style.setProperty(
-          "--bs-radius",
-          typeof r === "number" ? `${r}px` : r
-        );
+        this.maxHeight.setRadius(r);
       }
       setMaxHeight(h) {
         if (this.destroyed) return;
-        const value = typeof h === "number" ? `${h}px` : h;
-        const axis = layoutAxis(this.mode);
-        this.element.style.setProperty(
-          axis === "height" ? "max-height" : "max-width",
-          value
-        );
-        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;
-        if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
-          this.snaps.setMaxAxisSize(this.maxHeightCap);
-        }
+        this.maxHeight.setMaxHeight(h);
       }
       setAllowed(ids, snap) {
         if (this.destroyed) return;
@@ -3339,7 +3512,7 @@ var init_BottomSheetEngine = __esm({
         };
         const host = this.screenComponent?.parentElement;
         if (!host) {
-          console.warn(
+          devWarn(
             "[BottomSheet] setScrimStages: no scrim element mounted \u2014 pass `scrim` to the engine first."
           );
           return () => {
@@ -3389,9 +3562,9 @@ var init_BottomSheetEngine = __esm({
       }
       recompute() {
         if (this.destroyed) return;
-        this.resolveMaxHeightCap();
+        this.maxHeight.resolveCap();
         this.snaps.recompute();
-        this.clampToMaxHeight();
+        this.maxHeight.clampTo();
         this.scrim.invalidateOpacityCache();
         if (this.gesture?.isDragging) return;
         const current = this.snaps.findById(this.activeId);
@@ -3441,42 +3614,18 @@ var init_BottomSheetEngine = __esm({
         return this.currentAbort.signal;
       }
       emitBeforeSnap(target, previousId) {
-        let cancelled = false;
-        let frozen = false;
-        this.emit("before-snap", {
-          id: target.id,
-          size: target.size,
-          previousId,
-          cancel: () => {
-            if (frozen) {
-              console.warn(
-                "[BottomSheet] before-snap.cancel() called asynchronously \u2014 ignored. cancel() must be invoked synchronously inside the listener."
-              );
-              return;
-            }
-            cancelled = true;
-          }
-        });
-        frozen = true;
-        return cancelled;
+        return emitCancelable(
+          (payload) => this.emit("before-snap", payload),
+          { id: target.id, size: target.size, previousId },
+          "before-snap"
+        );
       }
       emitBeforeClose(reason) {
-        let cancelled = false;
-        let frozen = false;
-        this.emit("before-close", {
-          reason,
-          cancel: () => {
-            if (frozen) {
-              console.warn(
-                "[BottomSheet] before-close.cancel() called asynchronously \u2014 ignored. cancel() must be invoked synchronously inside the listener."
-              );
-              return;
-            }
-            cancelled = true;
-          }
-        });
-        frozen = true;
-        return cancelled;
+        return emitCancelable(
+          (payload) => this.emit("before-close", payload),
+          { reason },
+          "before-close"
+        );
       }
       applyAutoAriaLabelledBy() {
         if (typeof document === "undefined") return;
@@ -3491,16 +3640,16 @@ var init_BottomSheetEngine = __esm({
         this.element.setAttribute("aria-labelledby", titled.id);
       }
       recomputeSnaps() {
-        this.resolveMaxHeightCap();
+        this.maxHeight.resolveCap();
         this.snaps.setRaw(this.snapPointsRaw);
-        this.clampToMaxHeight();
+        this.maxHeight.clampTo();
         this.scrim.invalidateOpacityCache();
       }
       auditDuplicateSnapIds(points) {
         const seen = /* @__PURE__ */ new Set();
         for (const p of points) {
           if (seen.has(p.id)) {
-            console.warn(
+            devWarn(
               `[BottomSheet] duplicate snap id "${p.id}" \u2014 only the first occurrence is reachable.`
             );
           }
@@ -3667,7 +3816,15 @@ var init_BottomSheetEngine = __esm({
             setSize: (size) => {
               this.size = size;
             },
-            applySize: (size) => this.applySize(size)
+            applySize: (size) => this.applySize(size),
+            cancelInFlight: () => {
+              this.animation.cancel();
+            },
+            newCycle: () => {
+              this.newCycle();
+            },
+            isAnimating: () => this.animation.isAnimating,
+            resyncAfterCancel: () => this.resyncAfterResize()
           }));
         }
         this.teardowns.add(installSliderKeyboard({
@@ -3703,9 +3860,9 @@ var init_BottomSheetEngine = __esm({
           return;
         }
         if (this.emitBeforeSnap(target, previousId)) {
-          const restore = this.snaps.findById(previousId);
-          if (restore) {
-            void this.animation.animateTo(restore.size, 0);
+          const restore2 = this.snaps.findById(previousId);
+          if (restore2) {
+            void this.animation.animateTo(restore2.size, 0);
           }
           return;
         }
@@ -3835,7 +3992,7 @@ var init_BottomSheetEngine = __esm({
 var baseStyles;
 var init_baseStyles = __esm({
   "src/web-component/baseStyles.ts"() {
-    baseStyles = `:where(.bs-root){--bs-surface-d:#ffffff;--bs-surface-border-d:rgba(225,227,237,1);--bs-radius-d:20px;--bs-handle-color-d:rgba(26,22,20,0.3);--bs-handle-width:40px;--bs-handle-height:5px;--bs-z-backdrop:90;--bs-z-sheet:100;--bs-header-min-height:80px;--bs-backdrop-color-d:rgba(0,0,0,0.5);--bs-scrim-color-d:transparent;--bs-scrim-blur:0px;--bs-z-scrim:calc(var(--bs-z-sheet) - 1);--bs-size:0px;--bs-progress:0}.bs-backdrop{position:fixed;inset:0;background:var(--bs-backdrop-color,var(--bs-backdrop-color-d));opacity:0;pointer-events:none;z-index:var(--bs-z-backdrop);transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-backdrop,.bs-root[data-animating="true"] .bs-backdrop{transition:none}.bs-sheet{position:fixed;background:var(--bs-surface,var(--bs-surface-d));box-shadow:var(--bs-shadow,var(--bs-shadow-auto,none));z-index:var(--bs-z-sheet);pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;user-select:none;overscroll-behavior:contain}.bs-sheet[data-mode="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));padding-bottom:env(safe-area-inset-bottom);--bs-shadow-auto:0 calc(var(--bs-progress,0) * -2px - 3px) calc(var(--bs-progress,0) * 18px + 12px) rgba(0,0,0,calc(var(--bs-progress,0) * 0.15 + 0.12))}.bs-sheet[data-mode="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom:1px solid var(--bs-surface-border,var(--bs-surface-border-d));flex-direction:column-reverse;--bs-shadow-auto:0 3px 12px rgba(0,0,0,0.12);padding-top:env(safe-area-inset-top)}.bs-sheet[data-mode="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:3px 0 12px rgba(0,0,0,0.12)}.bs-sheet[data-mode="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:-3px 0 12px rgba(0,0,0,0.12)}.bs-sheet[data-mode="left"] .bs-content{padding-right:36px}.bs-sheet[data-mode="right"] .bs-content{padding-left:36px}.bs-handle{flex-shrink:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;padding:var(--bs-handle-padding,8px 16px 4px);cursor:grab;touch-action:none;user-select:none;background:var(--bs-surface,var(--bs-surface-d));-webkit-tap-highlight-color:transparent;outline:none;position:relative}.bs-handle:active{cursor:grabbing}.bs-handle:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:var(--bs-radius,var(--bs-radius-d))}.bs-handle::before{content:"";display:block;width:var(--bs-handle-width);height:var(--bs-handle-height);background:var(--bs-handle-color,var(--bs-handle-color-d));border-radius:calc(var(--bs-handle-height) / 2);margin:0 auto 8px;transition:width 0.15s ease,background 0.15s ease,transform 0.15s ease;pointer-events:none}.bs-sheet[data-mode="left"] .bs-handle,.bs-sheet[data-mode="right"] .bs-handle{position:absolute;top:0;bottom:0;width:28px;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;background:var(--bs-surface,var(--bs-surface-d));z-index:1;overflow:hidden}.bs-sheet[data-mode="left"] .bs-handle>*,.bs-sheet[data-mode="right"] .bs-handle>*{display:none}.bs-sheet[data-mode="left"] .bs-handle{right:0;border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="right"] .bs-handle{left:0;border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="left"] .bs-handle::before,.bs-sheet[data-mode="right"] .bs-handle::before{width:var(--bs-handle-height);height:var(--bs-handle-width);margin:0}.bs-sheet:hover .bs-handle::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 15%)}.bs-handle:active::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 35%);transform:scaleX(1.15)}.bs-handle.bs-handle--ticks::after{content:"";display:block;position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:calc(var(--bs-handle-width) * 2);height:3px;background-image:radial-gradient( circle,var(--bs-handle-color,var(--bs-handle-color-d)) 0 1.5px,transparent 1.6px );background-size:8px 3px;background-repeat:repeat-x;background-position:center;opacity:0;transition:opacity 0.18s ease-out;pointer-events:none}.bs-root[data-dragging="true"] .bs-handle.bs-handle--ticks::after{opacity:0.4}.bs-sheet[data-mode="top"] .bs-handle.bs-handle--ticks::after{bottom:auto;top:6px}.bs-sheet[data-mode="left"] .bs-handle.bs-handle--ticks::after,.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:3px;height:calc(var(--bs-handle-width) * 2);background-size:3px 8px;background-repeat:repeat-y;margin-left:calc(var(--bs-handle-height) + 6px)}.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{margin-left:calc(-1 * (var(--bs-handle-height) + 6px))}.bs-header{flex:0 0 auto;padding:var(--bs-header-padding,0 16px 8px);background:var(--bs-surface,var(--bs-surface-d))}.bs-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;padding:var(--bs-content-padding,0 16px 16px)}.bs-footer{flex:0 0 auto;padding:var(--bs-footer-padding,12px 16px calc(12px + env(safe-area-inset-bottom)));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));background:var(--bs-surface,var(--bs-surface-d))}.bs-sheet[data-mode="bottom"]:has(.bs-footer:not([hidden]):has(*)){padding-bottom:0}.bs-header:not(:has(*)),.bs-footer:not(:has(*)),.bs-header[hidden],.bs-footer[hidden]{display:none}.bs-screen{position:absolute;inset:0;pointer-events:none;z-index:var(--bs-z-scrim);background:var(--bs-scrim-color,var(--bs-scrim-color-d));transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-screen,.bs-root[data-animating="true"] .bs-screen{transition:none}.bs-scrim-overlay{z-index:calc(var(--bs-z-sheet) + 1);pointer-events:none}.bs-button-slot{position:fixed;z-index:calc(var(--bs-z-sheet) + 1);pointer-events:auto}.bs-button-slot[data-side="left"]{left:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-side="right"]{right:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="top"]{bottom:auto;top:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="left"]{left:calc(var(--bs-size,0px) + 12px);right:auto;bottom:auto;top:16px}.bs-button-slot[data-mode="right"]{right:calc(var(--bs-size,0px) + 12px);left:auto;bottom:auto;top:16px}@media (prefers-reduced-motion:reduce){.bs-backdrop,.bs-handle::before,.bs-button-slot[data-side="left"],.bs-button-slot[data-side="right"]{transition:none !important}}@media (prefers-color-scheme:dark){:where(.bs-root){--bs-surface-d:#1a1a1d;--bs-surface-border-d:rgba(255,255,255,0.08);--bs-handle-color-d:rgba(255,255,255,0.45);--bs-shadow-auto:0 -3px 16px rgba(0,0,0,0.5)}}.bs-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:where(.ovl-root){--ovl-surface:var(--bs-surface,var(--bs-surface-d,#ffffff));--ovl-surface-border:var(--bs-surface-border,var(--bs-surface-border-d,rgba(0,0,0,0.08)));--ovl-shadow:0 -8px 40px rgba(0,0,0,0.35);--ovl-radius:var(--bs-radius,var(--bs-radius-d,20px));--ovl-backdrop-color:rgba(0,0,0,0.5);--ovl-z-backdrop:200;--ovl-z-panel:201}.ovl-backdrop{position:fixed;inset:0;background:var(--ovl-backdrop-color);opacity:0;pointer-events:none;z-index:var(--ovl-z-backdrop)}.ovl-panel{position:fixed;background:var(--ovl-surface);box-shadow:var(--ovl-shadow);z-index:var(--ovl-z-panel);-webkit-tap-highlight-color:transparent;outline:none;transition:transform 0.32s cubic-bezier(0.29,1.24,0.84,0.99),opacity 0.32s ease-out}.ovl-panel[data-state="open"]{transform:translate3d(0,0,0);opacity:1}@starting-style{.ovl-panel[data-edge="bottom"][data-state="open"]{transform:translate3d(0,100%,0);opacity:0}.ovl-panel[data-edge="top"][data-state="open"]{transform:translate3d(0,-100%,0);opacity:0}.ovl-panel[data-edge="left"][data-state="open"]{transform:translate3d(-100%,0,0);opacity:0}.ovl-panel[data-edge="right"][data-state="open"]{transform:translate3d(100%,0,0);opacity:0}}.ovl-panel[data-edge="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--ovl-radius);border-top-right-radius:var(--ovl-radius);border-top:1px solid var(--ovl-surface-border);padding-bottom:env(safe-area-inset-bottom)}.ovl-panel[data-edge="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-bottom:1px solid var(--ovl-surface-border);padding-top:env(safe-area-inset-top)}.ovl-panel[data-edge="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-right:1px solid var(--ovl-surface-border)}.ovl-panel[data-edge="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--ovl-radius);border-bottom-left-radius:var(--ovl-radius);border-left:1px solid var(--ovl-surface-border)}@media (prefers-reduced-motion:reduce){.ovl-panel,.ovl-backdrop{transition:none !important}}`;
+    baseStyles = `:where(.bs-root){--bs-surface-d:#ffffff;--bs-surface-border-d:rgba(225,227,237,1);--bs-radius-d:20px;--bs-handle-color-d:rgba(26,22,20,0.3);--bs-handle-width:40px;--bs-handle-height:5px;--bs-z-backdrop:90;--bs-z-sheet:100;--bs-backdrop-color-d:rgba(0,0,0,0.5);--bs-scrim-color-d:transparent;--bs-scrim-blur:0px;--bs-z-scrim:calc(var(--bs-z-sheet) - 1);--bs-size:0px;--bs-progress:0}.bs-backdrop{position:fixed;inset:0;background:var(--bs-backdrop-color,var(--bs-backdrop-color-d));opacity:0;pointer-events:none;z-index:var(--bs-z-backdrop);transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-backdrop,.bs-root[data-animating="true"] .bs-backdrop{transition:none}.bs-sheet{position:fixed;background:var(--bs-surface,var(--bs-surface-d));box-shadow:var(--bs-shadow,var(--bs-shadow-auto,none));z-index:var(--bs-z-sheet);pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;user-select:none;overscroll-behavior:contain}.bs-sheet[data-mode="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));padding-bottom:env(safe-area-inset-bottom);--bs-shadow-auto:0 calc(var(--bs-progress,0) * -2px - 3px) calc(var(--bs-progress,0) * 18px + 12px) rgba(0,0,0,calc(var(--bs-progress,0) * 0.15 + 0.12))}.bs-sheet[data-mode="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom:1px solid var(--bs-surface-border,var(--bs-surface-border-d));flex-direction:column-reverse;--bs-shadow-auto:0 3px 12px rgba(0,0,0,0.12);padding-top:env(safe-area-inset-top)}.bs-sheet[data-mode="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:3px 0 12px rgba(0,0,0,0.12)}.bs-sheet[data-mode="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:-3px 0 12px rgba(0,0,0,0.12)}.bs-sheet[data-mode="left"] .bs-content{padding-right:36px}.bs-sheet[data-mode="right"] .bs-content{padding-left:36px}.bs-handle{flex-shrink:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;padding:var(--bs-handle-padding,8px 16px 4px);cursor:grab;touch-action:none;user-select:none;background:var(--bs-surface,var(--bs-surface-d));-webkit-tap-highlight-color:transparent;outline:none;position:relative}.bs-handle:active{cursor:grabbing}.bs-handle:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:var(--bs-radius,var(--bs-radius-d))}.bs-handle::before{content:"";display:block;width:var(--bs-handle-width);height:var(--bs-handle-height);background:var(--bs-handle-color,var(--bs-handle-color-d));border-radius:calc(var(--bs-handle-height) / 2);margin:0 auto 8px;transition:width 0.15s ease,background 0.15s ease,transform 0.15s ease;pointer-events:none}.bs-sheet[data-mode="left"] .bs-handle,.bs-sheet[data-mode="right"] .bs-handle{position:absolute;top:0;bottom:0;width:28px;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;background:var(--bs-surface,var(--bs-surface-d));z-index:1;overflow:hidden}.bs-sheet[data-mode="left"] .bs-handle>*,.bs-sheet[data-mode="right"] .bs-handle>*{display:none}.bs-sheet[data-mode="left"] .bs-handle{right:0;border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="right"] .bs-handle{left:0;border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="left"] .bs-handle::before,.bs-sheet[data-mode="right"] .bs-handle::before{width:var(--bs-handle-height);height:var(--bs-handle-width);margin:0}.bs-sheet:hover .bs-handle::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 15%)}.bs-handle:active::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 35%);transform:scaleX(1.15)}.bs-handle.bs-handle--ticks::after{content:"";display:block;position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:calc(var(--bs-handle-width) * 2);height:3px;background-image:radial-gradient( circle,var(--bs-handle-color,var(--bs-handle-color-d)) 0 1.5px,transparent 1.6px );background-size:8px 3px;background-repeat:repeat-x;background-position:center;opacity:0;transition:opacity 0.18s ease-out;pointer-events:none}.bs-root[data-dragging="true"] .bs-handle.bs-handle--ticks::after{opacity:0.4}.bs-sheet[data-mode="top"] .bs-handle.bs-handle--ticks::after{bottom:auto;top:6px}.bs-sheet[data-mode="left"] .bs-handle.bs-handle--ticks::after,.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:3px;height:calc(var(--bs-handle-width) * 2);background-size:3px 8px;background-repeat:repeat-y;margin-left:calc(var(--bs-handle-height) + 6px)}.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{margin-left:calc(-1 * (var(--bs-handle-height) + 6px))}.bs-header{flex:0 0 auto;min-height:var(--bs-header-min-height,0px);padding:var(--bs-header-padding,0 16px 8px);background:var(--bs-surface,var(--bs-surface-d))}.bs-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;padding:var(--bs-content-padding,0 16px 16px)}.bs-footer{flex:0 0 auto;padding:var(--bs-footer-padding,12px 16px calc(12px + env(safe-area-inset-bottom)));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));background:var(--bs-surface,var(--bs-surface-d))}.bs-sheet[data-mode="bottom"]:has(.bs-footer:not([hidden]):has(*)){padding-bottom:0}.bs-header:not(:has(*)),.bs-footer:not(:has(*)),.bs-header[hidden],.bs-footer[hidden]{display:none}.bs-screen{position:absolute;inset:0;pointer-events:none;z-index:var(--bs-z-scrim);background:var(--bs-scrim-color,var(--bs-scrim-color-d));backdrop-filter:blur(var(--bs-scrim-blur,0px));-webkit-backdrop-filter:blur(var(--bs-scrim-blur,0px));transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-screen,.bs-root[data-animating="true"] .bs-screen{transition:none}.bs-scrim-overlay{z-index:calc(var(--bs-z-sheet) + 1);pointer-events:none}.bs-button-slot{position:fixed;z-index:calc(var(--bs-z-sheet) + 1);pointer-events:auto}.bs-button-slot[data-side="left"]{left:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-side="right"]{right:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="top"]{bottom:auto;top:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="left"]{left:calc(var(--bs-size,0px) + 12px);right:auto;bottom:auto;top:16px}.bs-button-slot[data-mode="right"]{right:calc(var(--bs-size,0px) + 12px);left:auto;bottom:auto;top:16px}@media (prefers-reduced-motion:reduce){.bs-backdrop,.bs-handle::before,.bs-button-slot[data-side="left"],.bs-button-slot[data-side="right"]{transition:none !important}}@media (prefers-color-scheme:dark){:where(.bs-root){--bs-surface-d:#1a1a1d;--bs-surface-border-d:rgba(255,255,255,0.08);--bs-handle-color-d:rgba(255,255,255,0.45);--bs-shadow-auto:0 -3px 16px rgba(0,0,0,0.5)}}@media (forced-colors:active){.bs-sheet{border:1px solid CanvasText}.bs-handle::before{background:CanvasText;forced-color-adjust:none}.bs-backdrop,.bs-screen{forced-color-adjust:none}}.bs-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:where(.ovl-root){--ovl-surface:var(--bs-surface,var(--bs-surface-d,#ffffff));--ovl-surface-border:var(--bs-surface-border,var(--bs-surface-border-d,rgba(0,0,0,0.08)));--ovl-shadow:0 -8px 40px rgba(0,0,0,0.35);--ovl-radius:var(--bs-radius,var(--bs-radius-d,20px));--ovl-backdrop-color:rgba(0,0,0,0.5);--ovl-z-backdrop:200;--ovl-z-panel:201}.ovl-backdrop{position:fixed;inset:0;background:var(--ovl-backdrop-color);opacity:0;pointer-events:none;z-index:var(--ovl-z-backdrop)}.ovl-panel{position:fixed;background:var(--ovl-surface);box-shadow:var(--ovl-shadow);z-index:var(--ovl-z-panel);-webkit-tap-highlight-color:transparent;outline:none;transition:transform 0.32s cubic-bezier(0.29,1.24,0.84,0.99),opacity 0.32s ease-out}.ovl-panel[data-state="open"]{transform:translate3d(0,0,0);opacity:1}@starting-style{.ovl-panel[data-edge="bottom"][data-state="open"]{transform:translate3d(0,100%,0);opacity:0}.ovl-panel[data-edge="top"][data-state="open"]{transform:translate3d(0,-100%,0);opacity:0}.ovl-panel[data-edge="left"][data-state="open"]{transform:translate3d(-100%,0,0);opacity:0}.ovl-panel[data-edge="right"][data-state="open"]{transform:translate3d(100%,0,0);opacity:0}}.ovl-panel[data-edge="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--ovl-radius);border-top-right-radius:var(--ovl-radius);border-top:1px solid var(--ovl-surface-border);padding-bottom:env(safe-area-inset-bottom)}.ovl-panel[data-edge="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-bottom:1px solid var(--ovl-surface-border);padding-top:env(safe-area-inset-top)}.ovl-panel[data-edge="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-right:1px solid var(--ovl-surface-border)}.ovl-panel[data-edge="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--ovl-radius);border-bottom-left-radius:var(--ovl-radius);border-left:1px solid var(--ovl-surface-border)}@media (prefers-reduced-motion:reduce){.ovl-panel,.ovl-backdrop{transition:none !important}}`;
   }
 });
 
@@ -4278,10 +4435,15 @@ var init_BottomSheetElement = __esm({
             "progress",
             (payload) => this.dispatchEvent(new CustomEvent("progress", { detail: payload }))
           ),
-          this.engine.on(
-            "before-close",
-            (payload) => this.dispatchEvent(new CustomEvent("before-close", { detail: payload }))
-          ),
+          this.engine.on("before-close", (payload) => {
+            const accepted = this.dispatchEvent(
+              new CustomEvent("before-close", {
+                detail: payload,
+                cancelable: true
+              })
+            );
+            if (!accepted) payload.cancel();
+          }),
           this.engine.on(
             "opened",
             (payload) => this.dispatchEvent(new CustomEvent("opened", { detail: payload }))
@@ -4297,6 +4459,10 @@ var init_BottomSheetElement = __esm({
           this.engine.on(
             "dragend",
             (payload) => this.dispatchEvent(new CustomEvent("drag-end", { detail: payload }))
+          ),
+          this.engine.on(
+            "drag",
+            (payload) => this.dispatchEvent(new CustomEvent("drag", { detail: payload }))
           )
         ];
       }