@surdeddd/bottom-sheet 0.3.0 → 0.4.1

package/dist/svelte.cjs

@@ -61,6 +61,15 @@ var SheetStack = class {
   size() {
     return this.entries.length;
   }
+  depthOf(id) {
+    const open = [];
+    for (const entry of this.entries) {
+      if (!entry.isOpen || entry.isOpen()) open.push(entry);
+    }
+    const idx = open.findIndex((e) => e.id === id);
+    if (idx === -1) return 0;
+    return open.length - 1 - idx;
+  }
   clear() {
     this.entries = [];
   }
@@ -179,7 +188,9 @@ var PERCENT = /^(-?\d+(?:\.\d+)?)%$/;
 var resolveSnap = (point, mode, measureFit) => {
   if (typeof point === "number") return Math.max(0, point);
   if (point === "full") return viewportSize(mode);
-  if (point === "fit") return Math.max(0, measureFit?.() ?? 0);
+  if (point === "fit" || point === "content") {
+    return Math.max(0, measureFit?.() ?? 0);
+  }
   const pctMatch = point.match(PERCENT);
   if (pctMatch) {
     const pct = parseFloat(pctMatch[1]) / 100;
@@ -416,6 +427,42 @@ function notifyLinkedSheets(sheets, self) {
 }
 
 // src/core/features/route.ts
+var closers = [];
+var handlerInstalled = false;
+var suppress = 0;
+var 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);
+    target.close();
+  });
+};
+var programmaticBack = () => {
+  suppress += 1;
+  try {
+    history.back();
+  } catch {
+    suppress = Math.max(0, suppress - 1);
+  }
+};
 function installRoute(deps) {
   if (typeof window === "undefined") {
     return () => {
@@ -425,82 +472,81 @@ function installRoute(deps) {
     return () => {
     };
   }
-  let routePushed = false;
-  let closeOnBackPushed = false;
-  let detachPopstate = null;
-  const popOurMarker = (key, expected) => {
-    const state2 = history.state;
-    if (state2 && state2[key] === expected) {
-      try {
-        history.back();
-      } catch {
-      }
+  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 onOpen = () => {
-    if (deps.routedTo && !detachPopstate) {
-      const target = deps.routedTo;
-      try {
-        history.pushState({ __bsRouted: target }, "", target);
-        routePushed = true;
-      } catch {
-      }
-      const onPop = (event) => {
-        if (deps.isDestroyed()) return;
-        const state2 = event.state;
-        if ((!state2 || state2.__bsRouted !== target) && deps.getSize() > 0) {
-          routePushed = false;
-          void deps.close();
-        }
-      };
-      window.addEventListener("popstate", onPop);
-      detachPopstate = () => window.removeEventListener("popstate", onPop);
-    } else if (deps.closeOnBack && !detachPopstate) {
-      try {
+    if (closer) return;
+    closer = {
+      isOpen: () => !deps.isDestroyed() && deps.getSize() > 0,
+      isTop: () => deps.isTopSheet(),
+      close: () => void deps.close(),
+      consumed: false
+    };
+    ensureHandler();
+    closers.push(closer);
+    try {
+      if (deps.routedTo !== void 0) {
+        history.pushState({ __bsRouted: deps.sheetId }, "", deps.routedTo);
+      } else {
         history.pushState({ __bsSheet: deps.sheetId }, "");
-        closeOnBackPushed = true;
-      } catch {
       }
-      const onPop = () => {
-        if (deps.isDestroyed()) return;
-        if (deps.getSize() > 0 && deps.isTopSheet()) {
-          const state2 = history.state;
-          if (state2?.__bsSheet !== deps.sheetId) closeOnBackPushed = false;
-          void deps.close();
-        }
-      };
-      window.addEventListener("popstate", onPop);
-      detachPopstate = () => window.removeEventListener("popstate", onPop);
-    }
-  };
-  const onClose = () => {
-    detachPopstate?.();
-    detachPopstate = null;
-    if (routePushed) {
-      routePushed = false;
-      if (deps.routedTo !== void 0) popOurMarker("__bsRouted", deps.routedTo);
-    }
-    if (closeOnBackPushed) {
-      closeOnBackPushed = false;
-      popOurMarker("__bsSheet", deps.sheetId);
+      pushed = true;
+    } catch {
+      pushed = false;
     }
   };
   const unsubscribeOpen = deps.on("open", onOpen);
-  const unsubscribeClose = deps.on("close", onClose);
+  const unsubscribeClose = deps.on("close", teardownEntry);
   if (deps.getSize() > 0) onOpen();
   return () => {
     unsubscribeOpen();
     unsubscribeClose();
-    detachPopstate?.();
-    detachPopstate = null;
-    if (routePushed) {
-      routePushed = false;
-      if (deps.routedTo !== void 0) popOurMarker("__bsRouted", deps.routedTo);
-    }
-    if (closeOnBackPushed) {
-      closeOnBackPushed = false;
-      popOurMarker("__bsSheet", deps.sheetId);
-    }
+    teardownEntry();
+  };
+}
+function installRouteChange(deps) {
+  if (typeof window === "undefined" || typeof history === "undefined") {
+    return () => {
+    };
+  }
+  const onChange = () => {
+    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();
   };
 }
 
@@ -808,6 +854,7 @@ function applyOverlayPosition(ws, mode, position, inset) {
 
 // src/core/controllers/scrim-controller.ts
 var VALID_CSS_LENGTH = /^-?\d+(?:\.\d+)?(?:px|em|rem|%)$/;
+var DEFAULT_SCRIM_DIM = "rgba(0, 0, 0, 0.4)";
 var ScrimController = class {
   constructor(deps, opts) {
     __publicField(this, "screenComponent");
@@ -846,9 +893,11 @@ var ScrimController = class {
     this.backdropRange = opts.backdropRange ?? preset?.range ?? [0, 1];
     this.screenRange = opts.screenRange ?? preset?.range ?? [0, 1];
     this.scrimTapToCloseEnabled = opts.scrimTapToClose ?? false;
+    const explicitColor = opts.scrimColor ?? preset?.color;
+    const effectiveColor = explicitColor ?? (this.scrimMode !== "off" && !this.backdrop ? DEFAULT_SCRIM_DIM : void 0);
     if (this.screenComponent) {
       this.applyScrimStyles({
-        color: opts.scrimColor ?? preset?.color,
+        color: effectiveColor,
         blur: opts.scrimBlur ?? preset?.blur,
         interactive: opts.scrimInteractive ?? preset?.interactive ?? false
       });
@@ -1622,7 +1671,7 @@ var LifecycleController = class {
     this.releaseScrollLock = null;
     this.inertSiblings.remove();
     if (this.returnFocus) {
-      const target = typeof this.returnFocus === "function" ? this.returnFocus() : this.returnFocus;
+      const target = typeof this.returnFocus === "function" ? this.returnFocus() : typeof this.returnFocus === "string" ? typeof document !== "undefined" ? document.querySelector(this.returnFocus) : null : this.returnFocus;
       target?.focus?.();
     }
   }
@@ -1789,6 +1838,7 @@ var GestureController = class {
     __publicField(this, "dragStartSize", 0);
     __publicField(this, "currentPointerKind", "touch");
     __publicField(this, "keyboardDismissed", false);
+    __publicField(this, "dragSuppressed", false);
     __publicField(this, "dragPayload", { size: 0, delta: 0 });
     this.deps = deps;
   }
@@ -1799,6 +1849,11 @@ var GestureController = class {
     if (this.detach) return this.detach;
     this.detach = installGestures(this.deps.handle, this.deps.mode, {
       onStart: (_coord, kind) => {
+        if (this.deps.getDisableDrag?.()) {
+          this.dragSuppressed = true;
+          return;
+        }
+        this.dragSuppressed = false;
         this.deps.cancelAnimation();
         this.isDragging_ = true;
         this.dragStartSize = this.deps.getDragContext().size;
@@ -1809,6 +1864,7 @@ var GestureController = class {
         this.deps.emit("dragstart", { size: this.dragStartSize });
       },
       onMove: (delta) => {
+        if (this.dragSuppressed) return;
         const ctx = this.deps.getDragContext();
         const { min, max } = ctx.range;
         const maxAxis = ctx.maxAxisSize;
@@ -1832,6 +1888,10 @@ var GestureController = class {
         }
       },
       onEnd: (delta, velocity, kind) => {
+        if (this.dragSuppressed) {
+          this.dragSuppressed = false;
+          return;
+        }
         this.isDragging_ = false;
         this.keyboardDismissed = false;
         this.deps.getRoot()?.removeAttribute("data-dragging");
@@ -1842,6 +1902,10 @@ var GestureController = class {
         this.deps.settleAfterDrag(delta, velocity, kind);
       },
       onCancel: () => {
+        if (this.dragSuppressed) {
+          this.dragSuppressed = false;
+          return;
+        }
         this.isDragging_ = false;
         this.keyboardDismissed = false;
         this.deps.getRoot()?.removeAttribute("data-dragging");
@@ -2221,6 +2285,12 @@ function resolveEngineOptions(opts, extras) {
     dragThreshold: opts.dragThreshold ?? DEFAULT_DRAG_THRESHOLD,
     rubberBandEnabled: opts.rubberBand ?? true,
     closeOnBack: opts.closeOnBack ?? false,
+    persistent: opts.persistent ?? false,
+    disableClose: opts.disableClose ?? false,
+    disableDrag: opts.disableDrag ?? false,
+    closeOnRouteChange: opts.closeOnRouteChange ?? false,
+    radius: opts.radius,
+    maxHeight: opts.maxHeight,
     initialAllowed,
     initialId,
     scrim: {
@@ -2247,7 +2317,8 @@ function resolveEngineOptions(opts, extras) {
       closeOnEscape: opts.closeOnEscape,
       lockBodyScroll: opts.lockBodyScroll,
       inertSiblings: opts.inertSiblings,
-      shouldApplyInertSiblings: extras?.shouldApplyInertSiblings
+      shouldApplyInertSiblings: extras?.shouldApplyInertSiblings,
+      returnFocus: opts.returnFocusTo
     }
   };
 }
@@ -2292,6 +2363,11 @@ var BottomSheetEngine = class {
     __publicField(this, "lifecycle");
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
+    __publicField(this, "persistent");
+    __publicField(this, "disableCloseFlag");
+    __publicField(this, "disableDragFlag");
+    __publicField(this, "closeOnRouteChange");
+    __publicField(this, "maxHeightCap");
     __publicField(this, "snapPointsRaw");
     __publicField(this, "snaps");
     __publicField(this, "activeId");
@@ -2304,6 +2380,7 @@ var BottomSheetEngine = class {
     __publicField(this, "sizeWriteSentinel", new WriteSentinel());
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
+    __publicField(this, "opening", false);
     __publicField(this, "progressPayload", {
       value: 0,
       size: 0
@@ -2360,7 +2437,8 @@ var BottomSheetEngine = class {
           void this.snapTo(id);
         },
         close: () => {
-          void this.close();
+          if (!this.canDismiss()) return;
+          void this.close("backdrop");
         }
       },
       resolved.scrim
@@ -2384,6 +2462,10 @@ var BottomSheetEngine = class {
     );
     this.closeOnBack = resolved.closeOnBack;
     this.routedTo = opts.routedTo;
+    this.persistent = resolved.persistent;
+    this.disableCloseFlag = resolved.disableClose;
+    this.disableDragFlag = resolved.disableDrag;
+    this.closeOnRouteChange = resolved.closeOnRouteChange;
     this.stackEffectEnabled = opts.stackEffect ?? false;
     this.snapPointsRaw = opts.snapPoints;
     this.persistKey = opts.persistKey;
@@ -2397,7 +2479,7 @@ var BottomSheetEngine = class {
       this.snapPointsRaw,
       resolved.initialAllowed,
       this.mode,
-      () => layoutAxis(this.mode) === "width" ? this.handle.offsetWidth : this.handle.offsetHeight,
+      () => this.measureFitSize(),
       (maxAxisSize) => {
         this.element.style[layoutAxis(this.mode)] = `${maxAxisSize}px`;
       }
@@ -2431,6 +2513,19 @@ var BottomSheetEngine = class {
       io.observe(this.element);
       this.teardowns.add(() => io.disconnect());
     }
+    this.installFitObserver();
+    if (resolved.radius !== void 0) this.setRadius(resolved.radius);
+    if (resolved.maxHeight !== void 0) this.setMaxHeight(resolved.maxHeight);
+    this.applyAutoAriaLabelledBy();
+    if (this.closeOnRouteChange) {
+      this.teardowns.add(
+        installRouteChange({
+          isDestroyed: () => this.destroyed,
+          getSize: () => this.size,
+          close: () => this.close()
+        })
+      );
+    }
     if (this.persistKey) {
       this.teardowns.add(installPersist(this, this.persistKey));
     }
@@ -2455,7 +2550,7 @@ var BottomSheetEngine = class {
         isTopSheet: () => this.isTopSheet,
         getSize: () => this.size,
         isDestroyed: () => this.destroyed,
-        close: () => this.close(),
+        close: () => this.close("back"),
         on: (event, fn) => this.on(event, fn),
         sheetId: this.id
       })
@@ -2549,6 +2644,10 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
+    if (wasClosed && target.size > 0) {
+      this.opening = true;
+      sheetStack.promote(this.id);
+    }
     if (this.animation.viewTransitionsAvailable) {
       this.currentViewTransition?.skipTransition?.();
       const vt = document.startViewTransition(() => {
@@ -2563,19 +2662,26 @@ var BottomSheetEngine = class {
     } else {
       await this.animation.animateTo(target.size, velocityPxPerMs);
     }
+    this.opening = false;
     externalSignal?.removeEventListener("abort", onExternalAbort);
     if (signal.aborted) return;
     this.scrollCache.restore(id, previousSize, target.size);
     this.updateAriaSlider();
-    this.emit("snap", { id, size: target.size });
+    this.emit("snap", {
+      id,
+      size: target.size,
+      progress: this.computeProgress(target.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);
     }
   }
   async dragTo(targetSize, velocityOrOpts = 0) {
@@ -2600,11 +2706,74 @@ var BottomSheetEngine = class {
     const target = id ?? this.snaps.getAllowedIds().find((a) => a !== "closed") ?? this.activeId;
     return this.snapTo(target);
   }
-  close() {
+  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];
     return this.snapTo(closedId ?? this.activeId);
   }
+  canDismiss() {
+    return !this.persistent && !this.disableCloseFlag && !this.destroyed;
+  }
+  isTop() {
+    return this.isTopSheet;
+  }
+  depth() {
+    return sheetStack.depthOf(this.id);
+  }
+  expand() {
+    if (this.destroyed) return Promise.resolve();
+    const ids = this.allowedIdsBySize();
+    const target = ids[ids.length - 1];
+    if (!target) return Promise.resolve();
+    return this.snapTo(target);
+  }
+  collapse() {
+    if (this.destroyed) return Promise.resolve();
+    const ids = this.allowedIdsBySize();
+    const nonZero = ids.find((id) => (this.snaps.findById(id)?.size ?? 0) > 0);
+    const target = nonZero ?? ids[0];
+    if (!target) return Promise.resolve();
+    return this.snapTo(target);
+  }
+  setRadius(r) {
+    if (this.destroyed) return;
+    this.element.style.setProperty(
+      "--bs-radius",
+      typeof r === "number" ? `${r}px` : 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" ? "maxHeight" : "maxWidth",
+      value
+    );
+    if (typeof h === "number") {
+      this.maxHeightCap = h;
+      this.clampToMaxHeight();
+    } 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.clampToMaxHeight();
+    }
+  }
+  clampToMaxHeight() {
+    if (this.maxHeightCap === void 0) return;
+    if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
+      this.snaps.setMaxAxisSize(this.maxHeightCap);
+    }
+    if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
+      this.applySize(this.maxHeightCap);
+    }
+  }
   setAllowed(ids, snap) {
     if (this.destroyed) return;
     this.snaps.setAllowedIds(ids);
@@ -2738,8 +2907,53 @@ var BottomSheetEngine = class {
     }
     this.updateAriaSlider();
   }
+  recompute() {
+    if (this.destroyed) return;
+    this.snaps.recompute();
+    this.scrim.invalidateOpacityCache();
+    if (this.gesture?.isDragging) return;
+    const current = this.snaps.findById(this.activeId);
+    if (current) {
+      this.size = current.size;
+      this.applySize(this.size);
+      this.updateAriaSlider();
+    }
+  }
+  measureFitSize() {
+    const vertical = layoutAxis(this.mode) === "height";
+    const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
+    const content = this.scrollContainer;
+    const natural = content ? handleSize + (vertical ? content.scrollHeight : content.scrollWidth) : handleSize;
+    if (typeof window === "undefined") return natural;
+    const viewport = vertical ? window.innerHeight : window.innerWidth;
+    return viewport > 0 ? Math.min(natural, viewport) : natural;
+  }
+  installFitObserver() {
+    if (typeof ResizeObserver === "undefined") return;
+    if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
+      return;
+    const targets = [this.handle];
+    if (this.scrollContainer && this.scrollContainer !== this.handle) {
+      targets.push(this.scrollContainer);
+    }
+    let raf = 0;
+    const ro = new ResizeObserver(() => {
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        if (this.destroyed || this.gesture?.isDragging) return;
+        this.recompute();
+      });
+    });
+    for (const t of targets) ro.observe(t);
+    this.teardowns.add(() => {
+      ro.disconnect();
+      if (raf) cancelAnimationFrame(raf);
+    });
+  }
   destroy() {
     this.destroyed = true;
+    this.opening = false;
     this.currentAbort.abort();
     this.currentViewTransition?.skipTransition?.();
     this.currentViewTransition = null;
@@ -2789,6 +3003,36 @@ var BottomSheetEngine = class {
     frozen = true;
     return cancelled;
   }
+  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;
+  }
+  applyAutoAriaLabelledBy() {
+    if (typeof document === "undefined") return;
+    if (!this.lifecycle.focusTrapEnabled) return;
+    if (this.element.getAttribute("aria-labelledby")) return;
+    const scope = this.handle ?? this.element;
+    const titled = scope.querySelector("[data-bs-title]") ?? scope.querySelector("h1,h2,h3,h4,h5,h6");
+    if (!titled) return;
+    if (!titled.id) {
+      titled.id = nextInstanceId("bs-title");
+    }
+    this.element.setAttribute("aria-labelledby", titled.id);
+  }
   recomputeSnaps() {
     const seen = /* @__PURE__ */ new Set();
     for (const p of this.snapPointsRaw) {
@@ -2824,11 +3068,8 @@ var BottomSheetEngine = class {
       },
       setIsTop: (isTop) => {
         this.isTopSheet = isTop;
-        if (this.backdrop) {
-          this.backdrop.style.display = isTop ? "" : "none";
-        }
       },
-      isOpen: () => this.size > 0,
+      isOpen: () => this.size > 0 || this.opening,
       setDepth: (depth) => this.applyStackDepth(depth)
     }));
   }
@@ -2860,6 +3101,7 @@ var BottomSheetEngine = class {
         buf.rubberBandEnabled = this.rubberBandEnabled;
         return buf;
       },
+      getDisableDrag: () => this.disableDragFlag,
       cancelAnimation: () => this.animation.cancel(),
       applySize: (size) => this.applySize(size),
       animateTo: (size, velocity) => this.animation.animateTo(size, velocity),
@@ -2939,8 +3181,9 @@ var BottomSheetEngine = class {
       if (this.lifecycle.closeOnEscape) {
         const onKey = (e) => {
           if (this.destroyed || e.defaultPrevented) return;
+          if (!this.canDismiss()) return;
           if (e.key === "Escape" && this.isTopSheet && this.size > 0) {
-            void this.close();
+            void this.close("escape");
           }
         };
         document.addEventListener("keydown", onKey);
@@ -3003,20 +3246,31 @@ var BottomSheetEngine = class {
     const previousSnapSize = this.snaps.findById(previousId)?.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = target.id;
+    if (previousSnapSize === 0 && target.size > 0) {
+      this.opening = true;
+      sheetStack.promote(this.id);
+    }
     void this.animation.animateTo(target.size, velocity).then(() => {
+      this.opening = false;
       if (signal.aborted) return;
       this.scrollCache.restore(target.id, previousSize, target.size);
       this.updateAriaSlider();
-      this.emit("snap", { id: target.id, size: target.size });
+      this.emit("snap", {
+        id: target.id,
+        size: target.size,
+        progress: this.computeProgress(target.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);
       }
     });
   }
@@ -3041,6 +3295,9 @@ var BottomSheetEngine = class {
       if (this.anchorHost && this.anchorHost !== this.scrimParent) {
         this.anchorHost.style.setProperty("--bs-size", `${size}px`);
       }
+      if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-size", `${size}px`);
+      }
     }
     const progress = this.computeProgress(size);
     const progressChanged = this.progressWriteSentinel.shouldWrite(
@@ -3052,6 +3309,9 @@ var BottomSheetEngine = class {
       if (this.anchorHost) {
         this.anchorHost.style.setProperty("--bs-progress", String(progress));
       }
+      if (this.rootEl && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-progress", String(progress));
+      }
     }
     this.scrim.applyOpacity(progress, progressChanged);
     if (progressChanged && this.bus.listenerCount("progress") > 0) {
@@ -3085,17 +3345,24 @@ var BottomSheetEngine = class {
     const target = this.snaps.findById(this.activeId);
     if (!target) return;
     this.updateAriaSlider();
-    this.emit("snap", { id: target.id, size: target.size });
+    this.emit("snap", {
+      id: target.id,
+      size: target.size,
+      progress: this.computeProgress(target.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 });
     } else if (target.size === 0 && this.lifecycle.isInstalled) {
       this.emit("close", void 0);
       this.handleClose();
+      this.emit("closed", void 0);
     }
   }
   handleClose() {
+    this.opening = false;
     this.lifecycle.release();
     sheetStack.update();
   }
@@ -3149,6 +3416,10 @@ function createBottomSheet(opts) {
     snapTo: (id) => engine?.snapTo(id) ?? Promise.resolve(),
     open: (id) => engine?.open(id) ?? Promise.resolve(),
     close: () => engine?.close() ?? Promise.resolve(),
+    expand: () => engine?.expand() ?? Promise.resolve(),
+    collapse: () => engine?.collapse() ?? Promise.resolve(),
+    isTop: () => engine?.isTop() ?? false,
+    depth: () => engine?.depth() ?? 0,
     setAllowed: (ids, snap) => engine?.setAllowed(ids, snap),
     setSnapPoints: (points, allowed) => engine?.setSnapPoints(points, allowed),
     setScrim: (scrimOpts) => engine?.setScrim(scrimOpts),
@@ -3158,6 +3429,7 @@ function createBottomSheet(opts) {
     }),
     setScrimStages: (stagesOpts) => engine?.setScrimStages(stagesOpts) ?? (() => {
     }),
+    recompute: () => engine?.recompute(),
     destroy: () => {
       engine?.destroy();
       engine = null;
@@ -3166,12 +3438,12 @@ function createBottomSheet(opts) {
   };
 }
 var root_1 = $2__namespace.from_html(`<div class="bs-backdrop" aria-hidden="true"></div>`);
-var root_3 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="left"><!></div>`);
-var root_4 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="right"><!></div>`);
-var root = $2__namespace.from_html(`<div class="bs-root"><!> <div class="bs-screen"><!></div> <section class="bs-sheet" role="dialog"><!> <!> <div class="bs-handle" role="slider" tabindex="0" aria-label="Resize sheet"><!></div> <div class="bs-content" tabindex="0" role="region" aria-label="Sheet content"><!></div> <span class="bs-sr-only" role="status" aria-live="polite"> </span></section></div>`);
+var root_5 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="left"><!></div>`);
+var root_6 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="right"><!></div>`);
+var root = $2__namespace.from_html(`<div class="bs-root"><!> <div class="bs-screen"><!></div> <section class="bs-sheet" role="dialog"><div class="bs-handle" role="slider" tabindex="0" aria-label="Resize sheet"><!></div> <div class="bs-content" tabindex="0" role="region" aria-label="Sheet content"><!></div> <span class="bs-sr-only" role="status" aria-live="polite"> </span></section> <!> <!></div>`);
 function BottomSheet($$anchor, $$props) {
   $2__namespace.push($$props, true);
-  let mode = $2__namespace.prop($$props, "mode", 3, "bottom"), animation = $2__namespace.prop($$props, "animation", 3, "spring"), focusTrap = $2__namespace.prop($$props, "focusTrap", 3, false), closeOnEscape = $2__namespace.prop($$props, "closeOnEscape", 3, true), closeOnBack = $2__namespace.prop($$props, "closeOnBack", 3, false), lockBodyScroll2 = $2__namespace.prop($$props, "lockBodyScroll", 3, true), rubberBand2 = $2__namespace.prop($$props, "rubberBand", 3, true), backdrop = $2__namespace.prop($$props, "backdrop", 3, true), closeOnBackdrop = $2__namespace.prop($$props, "closeOnBackdrop", 3, true), ariaLabel = $2__namespace.prop($$props, "ariaLabel", 3, "Bottom sheet");
+  let mode = $2__namespace.prop($$props, "mode", 3, "bottom"), animation = $2__namespace.prop($$props, "animation", 3, "spring"), focusTrap = $2__namespace.prop($$props, "focusTrap", 3, false), closeOnEscape = $2__namespace.prop($$props, "closeOnEscape", 3, true), closeOnBack = $2__namespace.prop($$props, "closeOnBack", 3, false), lockBodyScroll2 = $2__namespace.prop($$props, "lockBodyScroll", 3, true), rubberBand2 = $2__namespace.prop($$props, "rubberBand", 3, true), backdrop = $2__namespace.prop($$props, "backdrop", 3, true), closeOnBackdrop = $2__namespace.prop($$props, "closeOnBackdrop", 3, true), persistent = $2__namespace.prop($$props, "persistent", 3, false), disableClose = $2__namespace.prop($$props, "disableClose", 3, false), disableDrag = $2__namespace.prop($$props, "disableDrag", 3, false), closeOnRouteChange = $2__namespace.prop($$props, "closeOnRouteChange", 3, false), openProp = $2__namespace.prop($$props, "open", 15), snap = $2__namespace.prop($$props, "snap", 15), ariaLabel = $2__namespace.prop($$props, "ariaLabel", 3, "Bottom sheet");
   let sheetEl = $2__namespace.state(void 0);
   let handleEl = $2__namespace.state(void 0);
   let contentEl = $2__namespace.state(void 0);
@@ -3204,7 +3476,14 @@ function BottomSheet($$anchor, $$props) {
       closeOnBack: closeOnBack(),
       lockBodyScroll: lockBodyScroll2(),
       rubberBand: rubberBand2(),
-      backdropRange: $$props.backdropRange
+      backdropRange: $$props.backdropRange,
+      persistent: persistent(),
+      disableClose: disableClose(),
+      disableDrag: disableDrag(),
+      closeOnRouteChange: closeOnRouteChange(),
+      radius: $$props.radius,
+      maxHeight: $$props.maxHeight,
+      returnFocusTo: $$props.returnFocusTo
     });
     const sync = () => {
       if (!engine) return;
@@ -3212,14 +3491,32 @@ function BottomSheet($$anchor, $$props) {
       $$props.onchange?.($2__namespace.get(viewState));
     };
     sync();
+    if ($$props.backdropColor !== void 0) engine.setScrimColor($$props.backdropColor);
+    if ($$props.backdropOpacity !== void 0) engine.setBackdropRange([0, $$props.backdropOpacity]);
     engine.on("snap", (payload) => {
       sync();
+      snap(payload.id);
       $$props.onsnap?.(payload.id);
     });
-    engine.on("open", (payload) => $$props.onopen?.(payload.id));
-    engine.on("close", () => $$props.onclose?.());
-    engine.on("dragstart", sync);
-    engine.on("dragend", sync);
+    engine.on("open", (payload) => {
+      openProp(true);
+      $$props.onopen?.(payload.id);
+    });
+    engine.on("close", () => {
+      openProp(false);
+      $$props.onclose?.();
+    });
+    engine.on("before-close", (payload) => $$props.onbeforeclose?.(payload));
+    engine.on("opened", (payload) => $$props.onopened?.(payload.id));
+    engine.on("closed", () => $$props.onclosed?.());
+    engine.on("dragstart", () => {
+      sync();
+      $$props.ondragstart?.();
+    });
+    engine.on("dragend", () => {
+      sync();
+      $$props.ondragend?.();
+    });
   });
   svelte.onDestroy(() => {
     engine?.destroy();
@@ -3228,13 +3525,46 @@ function BottomSheet($$anchor, $$props) {
   const snapTo = (id) => engine?.snapTo(id) ?? Promise.resolve();
   const open = (id) => engine?.open(id) ?? Promise.resolve();
   const close = () => engine?.close() ?? Promise.resolve();
-  const setAllowed = (ids, snap) => engine?.setAllowed(ids, snap);
+  const expand = () => engine?.expand() ?? Promise.resolve();
+  const collapse = () => engine?.collapse() ?? Promise.resolve();
+  const isTop = () => engine?.isTop() ?? false;
+  const depth = () => engine?.depth() ?? 0;
+  const setAllowed = (ids, snap2) => engine?.setAllowed(ids, snap2);
   const setSnapPoints = (points, nextAllowed) => engine?.setSnapPoints(points, nextAllowed);
   const setScrim = (opts) => engine?.setScrim(opts);
   const setScrimOverlay = (opts) => engine?.setScrimOverlay(opts) ?? (() => {
   });
+  const setRadius = (r) => engine?.setRadius(r);
+  const setMaxHeight = (h) => engine?.setMaxHeight(h);
+  const canDismiss = () => engine?.canDismiss() ?? false;
   const getState = () => engine?.state ?? $2__namespace.get(viewState);
   const getEngine = () => engine;
+  $2__namespace.user_effect(() => {
+    if ($$props.radius !== void 0) engine?.setRadius($$props.radius);
+  });
+  $2__namespace.user_effect(() => {
+    if ($$props.maxHeight !== void 0) engine?.setMaxHeight($$props.maxHeight);
+  });
+  $2__namespace.user_effect(() => {
+    if ($$props.backdropColor !== void 0) engine?.setScrimColor($$props.backdropColor);
+  });
+  $2__namespace.user_effect(() => {
+    if ($$props.backdropOpacity !== void 0) engine?.setBackdropRange([0, $$props.backdropOpacity]);
+  });
+  $2__namespace.user_effect(() => {
+    if (snap() === void 0) return;
+    const next = snap();
+    if (!engine || svelte.untrack(() => $2__namespace.get(viewState).activeId) === next) return;
+    void engine.snapTo(next);
+  });
+  $2__namespace.user_effect(() => {
+    if (openProp() === void 0) return;
+    const next = openProp();
+    if (!engine) return;
+    const isOpen = svelte.untrack(() => $2__namespace.get(viewState).size) > 0;
+    if (next && !isOpen) void engine.open();
+    else if (!next && isOpen) void engine.close();
+  });
   let allowedIds = $2__namespace.derived(() => $$props.allowed && $$props.allowed.length > 0 ? $$props.allowed : $$props.snapPoints.map((s) => s.id));
   let activeIdx = $2__namespace.derived(() => $2__namespace.get(allowedIds).indexOf($2__namespace.get(viewState).activeId));
   let isVerticalAxis = $2__namespace.derived(() => mode() === "bottom" || mode() === "top");
@@ -3242,10 +3572,17 @@ function BottomSheet($$anchor, $$props) {
     snapTo,
     open,
     close,
+    expand,
+    collapse,
+    isTop,
+    depth,
     setAllowed,
     setSnapPoints,
     setScrim,
     setScrimOverlay,
+    setRadius,
+    setMaxHeight,
+    canDismiss,
     getState,
     getEngine
   };
@@ -3256,7 +3593,9 @@ function BottomSheet($$anchor, $$props) {
       var div_1 = root_1();
       $2__namespace.bind_this(div_1, ($$value) => $2__namespace.set(backdropEl, $$value), () => $2__namespace.get(backdropEl));
       $2__namespace.delegated("click", div_1, function(...$$args) {
-        (closeOnBackdrop() ? () => engine?.close() : void 0)?.apply(this, $$args);
+        (closeOnBackdrop() ? () => {
+          if (engine?.canDismiss()) void engine.close("backdrop");
+        } : void 0)?.apply(this, $$args);
       });
       $2__namespace.append($$anchor2, div_1);
     };
@@ -3280,68 +3619,70 @@ function BottomSheet($$anchor, $$props) {
   $2__namespace.reset(div_2);
   $2__namespace.bind_this(div_2, ($$value) => $2__namespace.set(screenEl, $$value), () => $2__namespace.get(screenEl));
   var section = $2__namespace.sibling(div_2, 2);
-  var node_3 = $2__namespace.child(section);
+  var div_3 = $2__namespace.child(section);
+  $2__namespace.set_attribute(div_3, "aria-valuemin", 0);
+  var node_3 = $2__namespace.child(div_3);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_3 = root_3();
-      var node_4 = $2__namespace.child(div_3);
-      $2__namespace.snippet(node_4, () => $$props.leftButton);
-      $2__namespace.reset(div_3);
-      $2__namespace.append($$anchor2, div_3);
+      var fragment_1 = $2__namespace.comment();
+      var node_4 = $2__namespace.first_child(fragment_1);
+      $2__namespace.snippet(node_4, () => $$props.header, () => $2__namespace.get(viewState));
+      $2__namespace.append($$anchor2, fragment_1);
     };
     $2__namespace.if(node_3, ($$render) => {
-      if ($$props.leftButton) $$render(consequent_2);
+      if ($$props.header) $$render(consequent_2);
     });
   }
-  var node_5 = $2__namespace.sibling(node_3, 2);
+  $2__namespace.reset(div_3);
+  $2__namespace.bind_this(div_3, ($$value) => $2__namespace.set(handleEl, $$value), () => $2__namespace.get(handleEl));
+  var div_4 = $2__namespace.sibling(div_3, 2);
+  var node_5 = $2__namespace.child(div_4);
   {
     var consequent_3 = ($$anchor2) => {
-      var div_4 = root_4();
-      var node_6 = $2__namespace.child(div_4);
-      $2__namespace.snippet(node_6, () => $$props.rightButton);
-      $2__namespace.reset(div_4);
-      $2__namespace.append($$anchor2, div_4);
+      var fragment_2 = $2__namespace.comment();
+      var node_6 = $2__namespace.first_child(fragment_2);
+      $2__namespace.snippet(node_6, () => $$props.children);
+      $2__namespace.append($$anchor2, fragment_2);
     };
     $2__namespace.if(node_5, ($$render) => {
-      if ($$props.rightButton) $$render(consequent_3);
+      if ($$props.children) $$render(consequent_3);
     });
   }
-  var div_5 = $2__namespace.sibling(node_5, 2);
-  $2__namespace.set_attribute(div_5, "aria-valuemin", 0);
-  var node_7 = $2__namespace.child(div_5);
+  $2__namespace.reset(div_4);
+  $2__namespace.bind_this(div_4, ($$value) => $2__namespace.set(contentEl, $$value), () => $2__namespace.get(contentEl));
+  var span = $2__namespace.sibling(div_4, 2);
+  var text = $2__namespace.child(span, true);
+  $2__namespace.reset(span);
+  $2__namespace.reset(section);
+  $2__namespace.bind_this(section, ($$value) => $2__namespace.set(sheetEl, $$value), () => $2__namespace.get(sheetEl));
+  var node_7 = $2__namespace.sibling(section, 2);
   {
     var consequent_4 = ($$anchor2) => {
-      var fragment_1 = $2__namespace.comment();
-      var node_8 = $2__namespace.first_child(fragment_1);
-      $2__namespace.snippet(node_8, () => $$props.header, () => $2__namespace.get(viewState));
-      $2__namespace.append($$anchor2, fragment_1);
+      var div_5 = root_5();
+      var node_8 = $2__namespace.child(div_5);
+      $2__namespace.snippet(node_8, () => $$props.leftButton);
+      $2__namespace.reset(div_5);
+      $2__namespace.template_effect(() => $2__namespace.set_attribute(div_5, "data-mode", mode()));
+      $2__namespace.append($$anchor2, div_5);
     };
     $2__namespace.if(node_7, ($$render) => {
-      if ($$props.header) $$render(consequent_4);
+      if ($$props.leftButton) $$render(consequent_4);
     });
   }
-  $2__namespace.reset(div_5);
-  $2__namespace.bind_this(div_5, ($$value) => $2__namespace.set(handleEl, $$value), () => $2__namespace.get(handleEl));
-  var div_6 = $2__namespace.sibling(div_5, 2);
-  var node_9 = $2__namespace.child(div_6);
+  var node_9 = $2__namespace.sibling(node_7, 2);
   {
     var consequent_5 = ($$anchor2) => {
-      var fragment_2 = $2__namespace.comment();
-      var node_10 = $2__namespace.first_child(fragment_2);
-      $2__namespace.snippet(node_10, () => $$props.children);
-      $2__namespace.append($$anchor2, fragment_2);
+      var div_6 = root_6();
+      var node_10 = $2__namespace.child(div_6);
+      $2__namespace.snippet(node_10, () => $$props.rightButton);
+      $2__namespace.reset(div_6);
+      $2__namespace.template_effect(() => $2__namespace.set_attribute(div_6, "data-mode", mode()));
+      $2__namespace.append($$anchor2, div_6);
     };
     $2__namespace.if(node_9, ($$render) => {
-      if ($$props.children) $$render(consequent_5);
+      if ($$props.rightButton) $$render(consequent_5);
     });
   }
-  $2__namespace.reset(div_6);
-  $2__namespace.bind_this(div_6, ($$value) => $2__namespace.set(contentEl, $$value), () => $2__namespace.get(contentEl));
-  var span = $2__namespace.sibling(div_6, 2);
-  var text = $2__namespace.child(span, true);
-  $2__namespace.reset(span);
-  $2__namespace.reset(section);
-  $2__namespace.bind_this(section, ($$value) => $2__namespace.set(sheetEl, $$value), () => $2__namespace.get(sheetEl));
   $2__namespace.reset(div);
   $2__namespace.template_effect(
     ($0, $1) => {
@@ -3349,10 +3690,10 @@ function BottomSheet($$anchor, $$props) {
       $2__namespace.set_attribute(section, "data-active", $2__namespace.get(viewState).activeId);
       $2__namespace.set_attribute(section, "aria-modal", focusTrap() ? "true" : void 0);
       $2__namespace.set_attribute(section, "aria-label", ariaLabel());
-      $2__namespace.set_attribute(div_5, "aria-orientation", $2__namespace.get(isVerticalAxis) ? "vertical" : "horizontal");
-      $2__namespace.set_attribute(div_5, "aria-valuemax", $0);
-      $2__namespace.set_attribute(div_5, "aria-valuenow", $1);
-      $2__namespace.set_attribute(div_5, "aria-valuetext", $2__namespace.get(viewState).activeId);
+      $2__namespace.set_attribute(div_3, "aria-orientation", $2__namespace.get(isVerticalAxis) ? "vertical" : "horizontal");
+      $2__namespace.set_attribute(div_3, "aria-valuemax", $0);
+      $2__namespace.set_attribute(div_3, "aria-valuenow", $1);
+      $2__namespace.set_attribute(div_3, "aria-valuetext", $2__namespace.get(viewState).activeId);
       $2__namespace.set_text(text, $2__namespace.get(viewState).activeId);
     },
     [