@surdeddd/bottom-sheet 0.3.0 → 0.4.1

package/dist/element.cjs

@@ -48,6 +48,15 @@ var init_sheetStack = __esm({
       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 = [];
       }
@@ -185,7 +194,9 @@ var init_cssLength = __esm({
     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;
@@ -457,86 +468,122 @@ function installRoute(deps) {
     return () => {
     };
   }
-  let routePushed = false;
-  let closeOnBackPushed = false;
-  let detachPopstate = null;
-  const popOurMarker = (key, expected) => {
-    const state = history.state;
-    if (state && state[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 state = event.state;
-        if ((!state || state.__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 state = history.state;
-          if (state?.__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();
+  };
+}
+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);
+        target.close();
+      });
+    };
+    programmaticBack = () => {
+      suppress += 1;
+      try {
+        history.back();
+      } catch {
+        suppress = Math.max(0, suppress - 1);
+      }
+    };
   }
 });
 
@@ -884,7 +931,7 @@ var init_overlay_position = __esm({
 });
 
 // src/core/controllers/scrim-controller.ts
-var VALID_CSS_LENGTH, ScrimController;
+var VALID_CSS_LENGTH, DEFAULT_SCRIM_DIM, ScrimController;
 var init_scrim_controller = __esm({
   "src/core/controllers/scrim-controller.ts"() {
     init_types();
@@ -894,6 +941,7 @@ var init_scrim_controller = __esm({
     init_devWarn();
     init_overlay_position();
     VALID_CSS_LENGTH = /^-?\d+(?:\.\d+)?(?:px|em|rem|%)$/;
+    DEFAULT_SCRIM_DIM = "rgba(0, 0, 0, 0.4)";
     ScrimController = class {
       constructor(deps, opts) {
         __publicField(this, "screenComponent");
@@ -932,9 +980,11 @@ var init_scrim_controller = __esm({
         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
           });
@@ -1754,7 +1804,7 @@ var init_lifecycle_controller = __esm({
         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?.();
         }
       }
@@ -1942,6 +1992,7 @@ var init_gesture_controller = __esm({
         __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;
       }
@@ -1952,6 +2003,11 @@ var init_gesture_controller = __esm({
         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;
@@ -1962,6 +2018,7 @@ var init_gesture_controller = __esm({
             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;
@@ -1985,6 +2042,10 @@ var init_gesture_controller = __esm({
             }
           },
           onEnd: (delta, velocity, kind) => {
+            if (this.dragSuppressed) {
+              this.dragSuppressed = false;
+              return;
+            }
             this.isDragging_ = false;
             this.keyboardDismissed = false;
             this.deps.getRoot()?.removeAttribute("data-dragging");
@@ -1995,6 +2056,10 @@ var init_gesture_controller = __esm({
             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");
@@ -2402,6 +2467,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: {
@@ -2428,7 +2499,8 @@ function resolveEngineOptions(opts, extras) {
       closeOnEscape: opts.closeOnEscape,
       lockBodyScroll: opts.lockBodyScroll,
       inertSiblings: opts.inertSiblings,
-      shouldApplyInertSiblings: extras?.shouldApplyInertSiblings
+      shouldApplyInertSiblings: extras?.shouldApplyInertSiblings,
+      returnFocus: opts.returnFocusTo
     }
   };
 }
@@ -2509,6 +2581,11 @@ var init_BottomSheetEngine = __esm({
         __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");
@@ -2521,6 +2598,7 @@ var init_BottomSheetEngine = __esm({
         __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
@@ -2577,7 +2655,8 @@ var init_BottomSheetEngine = __esm({
               void this.snapTo(id);
             },
             close: () => {
-              void this.close();
+              if (!this.canDismiss()) return;
+              void this.close("backdrop");
             }
           },
           resolved.scrim
@@ -2601,6 +2680,10 @@ var init_BottomSheetEngine = __esm({
         );
         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;
@@ -2614,7 +2697,7 @@ var init_BottomSheetEngine = __esm({
           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`;
           }
@@ -2648,6 +2731,19 @@ var init_BottomSheetEngine = __esm({
           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));
         }
@@ -2672,7 +2768,7 @@ var init_BottomSheetEngine = __esm({
             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
           })
@@ -2766,6 +2862,10 @@ var init_BottomSheetEngine = __esm({
         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(() => {
@@ -2780,19 +2880,26 @@ 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.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) {
@@ -2817,11 +2924,74 @@ var init_BottomSheetEngine = __esm({
         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);
@@ -2955,8 +3125,53 @@ var init_BottomSheetEngine = __esm({
         }
         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;
@@ -3006,6 +3221,36 @@ var init_BottomSheetEngine = __esm({
         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) {
@@ -3041,11 +3286,8 @@ var init_BottomSheetEngine = __esm({
           },
           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)
         }));
       }
@@ -3077,6 +3319,7 @@ var init_BottomSheetEngine = __esm({
             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),
@@ -3156,8 +3399,9 @@ var init_BottomSheetEngine = __esm({
           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);
@@ -3220,20 +3464,31 @@ var init_BottomSheetEngine = __esm({
         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);
           }
         });
       }
@@ -3258,6 +3513,9 @@ var init_BottomSheetEngine = __esm({
           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(
@@ -3269,6 +3527,9 @@ var init_BottomSheetEngine = __esm({
           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) {
@@ -3302,17 +3563,24 @@ var init_BottomSheetEngine = __esm({
         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();
       }
@@ -3324,7 +3592,7 @@ var init_BottomSheetEngine = __esm({
 var baseStyles;
 var init_baseStyles = __esm({
   "src/web-component/baseStyles.ts"() {
-    baseStyles = `:where(.bs-root){--bs-surface:#ffffff;--bs-surface-border:rgba(225,227,237,1);--bs-radius:20px;--bs-handle-color:#b5b3a8;--bs-handle-width:40px;--bs-handle-height:5px;--bs-z-backdrop:90;--bs-z-sheet:100;--bs-header-min-height:80px;--bs-backdrop-color:rgba(0,0,0,0.5);--bs-scrim-color:rgba(0,0,0,0.4);--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);opacity:0;pointer-events:none;z-index:var(--bs-z-backdrop);transition:opacity 0.15s linear;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);box-shadow:var(--bs-shadow,var(--bs-shadow-auto,none));z-index:var(--bs-z-sheet);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);border-top-right-radius:var(--bs-radius);border-top:1px solid var(--bs-surface-border);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);border-bottom-right-radius:var(--bs-radius);border-bottom:1px solid var(--bs-surface-border);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);border-bottom-right-radius:var(--bs-radius);border-right:1px solid var(--bs-surface-border);--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);border-bottom-left-radius:var(--bs-radius);border-left:1px solid var(--bs-surface-border);--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:8px 16px 4px;cursor:grab;touch-action:none;user-select:none;background:var(--bs-surface);-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)}.bs-handle::before{content:"";display:block;width:var(--bs-handle-width);height:var(--bs-handle-height);background:var(--bs-handle-color);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);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)}.bs-sheet[data-mode="right"] .bs-handle{left:0;border-right:1px solid var(--bs-surface-border)}.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),#000 15%)}.bs-handle:active::before{background:color-mix(in oklab,var(--bs-handle-color),#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) 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-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;padding:0 16px 16px}.bs-screen{position:absolute;inset:0;pointer-events:none;z-index:var(--bs-z-scrim)}.bs-scrim-overlay{z-index:calc(var(--bs-z-sheet) + 1);pointer-events:none}.bs-scrim{background:var(--bs-scrim-color);transition:opacity 0.15s linear;will-change:opacity}.bs-root[data-dragging="true"] .bs-scrim,.bs-root[data-animating="true"] .bs-scrim{transition:none}.bs-scrim{backdrop-filter:blur(var(--bs-scrim-blur));-webkit-backdrop-filter:blur(var(--bs-scrim-blur))}.bs-button-slot{position:absolute;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);transition:bottom 0.15s ease}.bs-button-slot[data-side="right"]{right:16px;bottom:calc(var(--bs-size,0px) + 12px);transition:bottom 0.15s ease}@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:#1a1a1d;--bs-surface-border:rgba(255,255,255,0.08);--bs-handle-color: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,#ffffff);--ovl-surface-border:var(--bs-surface-border,rgba(0,0,0,0.08));--ovl-shadow:0 -8px 40px rgba(0,0,0,0.35);--ovl-radius:var(--bs-radius,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-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: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-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;padding:0 16px 16px}.bs-footer{flex:0 0 auto;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-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}}`;
   }
 });
 
@@ -3334,7 +3602,7 @@ __export(BottomSheetElement_exports, {
   BottomSheetElement: () => exports.BottomSheetElement,
   defineBottomSheet: () => exports.defineBottomSheet
 });
-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, isValidSnapPoint, DEFAULT_SNAP_POINTS, parseSnapPoints, VALID_MODES, VALID_ANIMATIONS, parseMode, parseAnimation, parseList, ANCHOR_POSITIONS, ANCHOR_ANIMATIONS, parseAnchorOptions, buildSlot, buildShadowTree, BaseHTMLElement; exports.BottomSheetElement = void 0; exports.defineBottomSheet = void 0;
+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, buildShadowTree, BaseHTMLElement; exports.BottomSheetElement = void 0; exports.defineBottomSheet = void 0;
 var init_BottomSheetElement = __esm({
   "src/web-component/BottomSheetElement.ts"() {
     init_BottomSheetEngine();
@@ -3351,6 +3619,23 @@ var init_BottomSheetElement = __esm({
     ATTR_LOCK_BODY_SCROLL = "lock-body-scroll";
     ATTR_SHEET_LABEL = "sheet-label";
     ATTR_STACK_EFFECT = "stack-effect";
+    ATTR_PERSISTENT = "persistent";
+    ATTR_DISABLE_CLOSE = "disable-close";
+    ATTR_DISABLE_DRAG = "disable-drag";
+    ATTR_CLOSE_ON_ROUTE_CHANGE = "close-on-route-change";
+    ATTR_RADIUS = "radius";
+    ATTR_MAX_HEIGHT = "max-height";
+    ATTR_RETURN_FOCUS_TO = "return-focus-to";
+    ATTR_BACKDROP_COLOR = "backdrop-color";
+    ATTR_SCRIM_COLOR = "scrim-color";
+    ATTR_SNAP = "snap";
+    LIVE_ATTRS = /* @__PURE__ */ new Set([
+      ATTR_RADIUS,
+      ATTR_MAX_HEIGHT,
+      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) => {
@@ -3380,6 +3665,11 @@ var init_BottomSheetElement = __esm({
     parseMode = (raw) => raw && VALID_MODES.includes(raw) ? raw : "bottom";
     parseAnimation = (raw) => raw && VALID_ANIMATIONS.includes(raw) ? raw : void 0;
     parseList = (raw) => raw ? raw.split(",").map((s) => s.trim()).filter(Boolean) : void 0;
+    parseDimension = (raw) => {
+      if (raw === null) return void 0;
+      const numeric = Number(raw);
+      return Number.isFinite(numeric) && raw.trim() !== "" ? numeric : raw;
+    };
     ANCHOR_POSITIONS = [
       "top-left",
       "top-center",
@@ -3469,8 +3759,8 @@ var init_BottomSheetElement = __esm({
       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(leftButton, rightButton, handle, content);
-      root.append(backdrop, screen, sheet, announcer);
+      sheet.append(handle, content);
+      root.append(backdrop, screen, sheet, leftButton, rightButton, announcer);
       const fragment = document.createDocumentFragment();
       fragment.appendChild(root);
       return {
@@ -3532,7 +3822,17 @@ var init_BottomSheetElement = __esm({
           ATTR_CLOSE_ON_ESCAPE,
           ATTR_LOCK_BODY_SCROLL,
           ATTR_SHEET_LABEL,
-          ATTR_STACK_EFFECT
+          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
         ];
       }
       connectedCallback() {
@@ -3551,11 +3851,39 @@ var init_BottomSheetElement = __esm({
       disconnectedCallback() {
         this.teardownEngine();
       }
-      attributeChangedCallback() {
+      attributeChangedCallback(name, _old, value) {
         if (!this.engine) return;
+        if (LIVE_ATTRS.has(name)) {
+          this.applyLiveAttribute(name, value);
+          return;
+        }
         this.teardownEngine();
         this.initEngine();
       }
+      applyLiveAttribute(name, value) {
+        if (!this.engine) return;
+        switch (name) {
+          case ATTR_RADIUS: {
+            const r = parseDimension(value);
+            if (r !== void 0) this.engine.setRadius(r);
+            break;
+          }
+          case ATTR_MAX_HEIGHT: {
+            const h = parseDimension(value);
+            if (h !== void 0) this.engine.setMaxHeight(h);
+            break;
+          }
+          case ATTR_BACKDROP_COLOR:
+          case ATTR_SCRIM_COLOR:
+            this.engine.setScrimColor(value);
+            break;
+          case ATTR_SNAP:
+            if (value && value !== this.engine.state.activeId) {
+              void this.engine.snapTo(value);
+            }
+            break;
+        }
+      }
       getEngine() {
         return this.engine;
       }
@@ -3577,6 +3905,8 @@ var init_BottomSheetElement = __esm({
         const { sheet, handle, content, backdrop, announcer } = this.refs;
         const mode = parseMode(this.getAttribute(ATTR_MODE));
         sheet.setAttribute("data-mode", mode);
+        this.refs.leftButton.setAttribute("data-mode", mode);
+        this.refs.rightButton.setAttribute("data-mode", mode);
         const focusTrap = this.getAttribute(ATTR_FOCUS_TRAP) === "true";
         if (focusTrap) {
           sheet.setAttribute("aria-modal", "true");
@@ -3590,7 +3920,9 @@ var init_BottomSheetElement = __esm({
         const showBackdrop = this.getAttribute(ATTR_BACKDROP) !== "false";
         backdrop.style.display = showBackdrop ? "" : "none";
         if (showBackdrop) {
-          this.backdropClickHandler = () => void this.engine?.close();
+          this.backdropClickHandler = () => {
+            if (this.engine?.canDismiss()) void this.engine.close("backdrop");
+          };
           backdrop.addEventListener("click", this.backdropClickHandler);
         }
         const opts = {
@@ -3607,10 +3939,19 @@ var init_BottomSheetElement = __esm({
           focusTrap,
           closeOnEscape: this.getAttribute(ATTR_CLOSE_ON_ESCAPE) !== "false",
           lockBodyScroll: this.getAttribute(ATTR_LOCK_BODY_SCROLL) !== "false",
-          stackEffect: this.getAttribute(ATTR_STACK_EFFECT) === "true"
+          stackEffect: this.getAttribute(ATTR_STACK_EFFECT) === "true",
+          persistent: this.getAttribute(ATTR_PERSISTENT) === "true",
+          disableClose: this.getAttribute(ATTR_DISABLE_CLOSE) === "true",
+          disableDrag: this.getAttribute(ATTR_DISABLE_DRAG) === "true",
+          closeOnRouteChange: this.getAttribute(ATTR_CLOSE_ON_ROUTE_CHANGE) === "true",
+          radius: parseDimension(this.getAttribute(ATTR_RADIUS)),
+          maxHeight: parseDimension(this.getAttribute(ATTR_MAX_HEIGHT)),
+          returnFocusTo: this.getAttribute(ATTR_RETURN_FOCUS_TO) ?? void 0
         };
         this.engine = new BottomSheetEngine(opts);
         sheet.setAttribute("data-active", this.engine.state.activeId);
+        const scrimColor = this.getAttribute(ATTR_SCRIM_COLOR) ?? this.getAttribute(ATTR_BACKDROP_COLOR);
+        if (scrimColor !== null) this.engine.setScrimColor(scrimColor);
         for (const el of Array.from(
           this.querySelectorAll('[slot="anchor"]')
         )) {
@@ -3634,6 +3975,26 @@ var init_BottomSheetElement = __esm({
           this.engine.on(
             "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(
+            "opened",
+            (payload) => this.dispatchEvent(new CustomEvent("opened", { detail: payload }))
+          ),
+          this.engine.on(
+            "closed",
+            () => this.dispatchEvent(new CustomEvent("closed"))
+          ),
+          this.engine.on(
+            "dragstart",
+            (payload) => this.dispatchEvent(new CustomEvent("drag-start", { detail: payload }))
+          ),
+          this.engine.on(
+            "dragend",
+            (payload) => this.dispatchEvent(new CustomEvent("drag-end", { detail: payload }))
           )
         ];
       }
@@ -3643,8 +4004,29 @@ var init_BottomSheetElement = __esm({
       open(id) {
         return this.engine?.open(id) ?? Promise.resolve();
       }
-      close() {
-        return this.engine?.close() ?? Promise.resolve();
+      close(reason) {
+        return this.engine?.close(reason) ?? Promise.resolve();
+      }
+      expand() {
+        return this.engine?.expand() ?? Promise.resolve();
+      }
+      collapse() {
+        return this.engine?.collapse() ?? Promise.resolve();
+      }
+      isTop() {
+        return this.engine?.isTop() ?? false;
+      }
+      depth() {
+        return this.engine?.depth() ?? 0;
+      }
+      canDismiss() {
+        return this.engine?.canDismiss() ?? false;
+      }
+      setRadius(r) {
+        this.engine?.setRadius(r);
+      }
+      setMaxHeight(h) {
+        this.engine?.setMaxHeight(h);
       }
       setAllowed(ids, snap) {
         this.engine?.setAllowed(ids, snap);
@@ -3657,9 +4039,26 @@ var init_BottomSheetElement = __esm({
         return this.engine?.setScrimStages(opts) ?? (() => {
         });
       }
+      recompute() {
+        this.engine?.recompute();
+      }
       get sheetState() {
         return this.engine?.state ?? null;
       }
+      get snap() {
+        return this.engine?.state.activeId ?? this.getAttribute(ATTR_SNAP);
+      }
+      set snap(id) {
+        if (id === null) {
+          this.removeAttribute(ATTR_SNAP);
+          return;
+        }
+        if (this.engine) {
+          if (id !== this.engine.state.activeId) void this.engine.snapTo(id);
+        } else {
+          this.setAttribute(ATTR_SNAP, id);
+        }
+      }
     };
     exports.defineBottomSheet = (tag = "bottom-sheet") => {
       if (typeof customElements === "undefined" || customElements.get(tag)) return;