@surdeddd/bottom-sheet 0.1.0 → 0.2.0

package/dist/element.js

@@ -270,11 +270,6 @@ var init_snap_resolver = __esm({
         this.allowedIds = allowed ?? raw.map((p) => p.id);
         this.recompute();
       }
-      /**
-       * Re-resolve raw → resolved against the current viewport / fit-measure,
-       * recompute maxAxisSize, invalidate range cache, notify engine. Called on
-       * resize, orientationchange, visualViewport changes, and snap-list swaps.
-       */
       recompute() {
         this.resolved = resolveSnapList(this.raw, this.mode, this.measureFit);
         this.maxAxisSize = this.resolved.reduce(
@@ -284,15 +279,10 @@ var init_snap_resolver = __esm({
         this.rangeCache = null;
         this.onMaxAxisSizeChange?.(this.maxAxisSize);
       }
-      /** Replace the raw snap list and recompute. Engine calls on `setSnapPoints`. */
       setRaw(raw) {
         this.raw = raw;
         this.recompute();
       }
-      /**
-       * Replace the allow-list. Range cache depends on `(resolvedSnaps ×
-       * allowedIds)` so flipping ids alone invalidates without a full recompute.
-       */
       setAllowedIds(ids) {
         this.allowedIds = ids;
         this.rangeCache = null;
@@ -300,11 +290,6 @@ var init_snap_resolver = __esm({
       findById(id) {
         return findById(id, this.resolved);
       }
-      /**
-       * Pure drag-settle target resolution. Engine passes the gesture-specific
-       * fields (delta, velocity, pointerKind, flickVelocity, dragThreshold) plus
-       * `size`/`activeId` since those are still engine-owned.
-       */
       findDragSettleTarget(args) {
         return findDragSettleTarget({
           ...args,
@@ -313,18 +298,9 @@ var init_snap_resolver = __esm({
           maxAxisSize: this.maxAxisSize
         });
       }
-      /**
-       * Memoised allowed-range query. Twice-per-drag-frame (gesture onMove +
-       * applySize→computeProgress); cache collapses 2× iteration of resolvedSnaps
-       * to one recompute per geometry/allow-list change.
-       */
       getAllowedRange() {
         return this.rangeCache ?? (this.rangeCache = allowedRange(this.resolved, this.allowedIds));
       }
-      /**
-       * Read-only view of resolved snaps. Returned as `readonly` to discourage
-       * accidental mutation by feature install sites that close over this list.
-       */
       getResolvedSnaps() {
         return this.resolved;
       }
@@ -334,18 +310,6 @@ var init_snap_resolver = __esm({
       getMaxAxisSize() {
         return this.maxAxisSize;
       }
-      /**
-       * External clamp override. The resize-observer feature compares
-       * `getMaxAxisSize()` against the live viewport and shrinks if the largest
-       * resolved snap exceeds it (mobile address-bar collapse / soft-keyboard
-       * window resize). The next `recompute()` overwrites this clamp from the
-       * resolved-snap reduction.
-       *
-       * Does NOT invalidate the range cache — viewport clamping doesn't change
-       * `(resolvedSnaps × allowedIds) → range`. DOES fire `onMaxAxisSizeChange`
-       * so the resolver owns the layout-axis style write end-to-end (symmetric
-       * with `recompute()` — feature call sites no longer duplicate the write).
-       */
       setMaxAxisSize(n) {
         this.maxAxisSize = n;
         this.onMaxAxisSizeChange?.(n);
@@ -769,36 +733,17 @@ var init_opacity_dedup = __esm({
       constructor() {
         __publicField(this, "last", -1);
       }
-      /**
-       * Returns `true` (and updates the cached value) if `next` differs from the
-       * cached `last` by more than `epsilon`. Returns `false` (and leaves the
-       * cache untouched) when the delta is within epsilon — caller skips the
-       * CSSOM write.
-       */
       shouldWrite(next, epsilon) {
         if (Math.abs(next - this.last) <= epsilon) return false;
         this.last = next;
         return true;
       }
-      /**
-       * Force the next `shouldWrite` to pass. Resets the cache to `-1` so any
-       * non-negative `next` exceeds the epsilon comparison. Called from setters
-       * that mutate state under the cache (range/mode/enabled flips that change
-       * the progress→opacity mapping but don't move `progress` itself).
-       */
       invalidate() {
         this.last = -1;
       }
-      /**
-       * Record `value` as the last-written without performing a write. Used
-       * when a setter writes a literal value through a different path (e.g.
-       * `setScrimMode("off")` writes `opacity: "0"` inline) and wants future
-       * `shouldWrite` calls to short-circuit against that known cached state.
-       */
       setLastWritten(value) {
         this.last = value;
       }
-      /** Read-only accessor for diagnostic / dedup-aware peek. */
       get value() {
         return this.last;
       }
@@ -806,45 +751,74 @@ var init_opacity_dedup = __esm({
   }
 });
 
+// src/core/primitives/devWarn.ts
+function devWarn(...args) {
+  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
+    console.warn(...args);
+  }
+}
+var init_devWarn = __esm({
+  "src/core/primitives/devWarn.ts"() {
+  }
+});
+
 // src/core/controllers/scrim-controller.ts
-var ScrimController;
+function resolveSheetAnchoredStyle(mode, position, inset) {
+  const sizeOffset = `calc(var(--bs-size, 0px) + ${inset})`;
+  switch (mode) {
+    case "bottom":
+      if (position === "sheet-top-left") return { bottom: sizeOffset, left: inset };
+      if (position === "sheet-top-right") return { bottom: sizeOffset, right: inset };
+      return { bottom: sizeOffset, left: "50%", transform: "translateX(-50%)" };
+    case "top":
+      if (position === "sheet-top-left") return { top: sizeOffset, left: inset };
+      if (position === "sheet-top-right") return { top: sizeOffset, right: inset };
+      return { top: sizeOffset, left: "50%", transform: "translateX(-50%)" };
+    case "left":
+      if (position === "sheet-top-left") return { left: sizeOffset, top: inset };
+      if (position === "sheet-top-right") return { left: sizeOffset, bottom: inset };
+      return { left: sizeOffset, top: "50%", transform: "translateY(-50%)" };
+    case "right":
+      if (position === "sheet-top-left") return { right: sizeOffset, top: inset };
+      if (position === "sheet-top-right") return { right: sizeOffset, bottom: inset };
+      return { right: sizeOffset, top: "50%", transform: "translateY(-50%)" };
+  }
+}
+function applySheetAnchoredPosition(ws, mode, position, inset) {
+  const style = resolveSheetAnchoredStyle(mode, position, inset);
+  if (style.top !== void 0) ws.top = style.top;
+  if (style.bottom !== void 0) ws.bottom = style.bottom;
+  if (style.left !== void 0) ws.left = style.left;
+  if (style.right !== void 0) ws.right = style.right;
+  if (style.transform !== void 0) ws.transform = style.transform;
+}
+var VALID_CSS_LENGTH, ScrimController;
 var init_scrim_controller = __esm({
   "src/core/controllers/scrim-controller.ts"() {
     init_types();
     init_snap_points();
     init_hot_path_thresholds();
     init_opacity_dedup();
+    init_devWarn();
+    VALID_CSS_LENGTH = /^-?\d+(?:\.\d+)?(?:px|em|rem|%)$/;
     ScrimController = class {
       constructor(deps, opts) {
-        // ── DOM refs (mirror engine's; cached for hot path) ─────────────────
         __publicField(this, "screenComponent");
         __publicField(this, "backdrop");
         __publicField(this, "mode");
-        // ── Engine callbacks ────────────────────────────────────────────────
         __publicField(this, "isDestroyed");
         __publicField(this, "isTopSheet");
         __publicField(this, "getAllowedIds");
         __publicField(this, "getResolvedSnaps");
         __publicField(this, "snapToFn");
-        // ── Mode + state ────────────────────────────────────────────────────
         __publicField(this, "scrimMode");
         __publicField(this, "backdropRange");
         __publicField(this, "screenRange");
-        // setScrimEnabled toggle — gated through `scrimEnabled` rather than nuking
-        // ranges so re-enable can restore prior values without a remount. Public
-        // so tests / introspection can read it without an `as any` cast.
         __publicField(this, "scrimEnabled", true);
         __publicField(this, "savedScrimRanges", null);
-        // ── Tap-to-close ────────────────────────────────────────────────────
         __publicField(this, "scrimTapToCloseEnabled", false);
         __publicField(this, "detachScrimTap", null);
-        // ── Scrim overlay slot (positioned floating element) ────────────────
         __publicField(this, "scrimOverlayTeardown", null);
-        // ── Hot-path opacity dedup caches (per-frame writes) ────────────────
-        // Numeric sentinels migrated to WriteSentinel primitive — single
-        // invalidation surface, shared with the engine's size/progress sentinels.
-        // The two string-typed sentinels (`Pointer`, `Display`) keep their inline
-        // pattern: equality on string union, no epsilon, different reset semantics.
         __publicField(this, "backdropOpacitySentinel", new WriteSentinel());
         __publicField(this, "screenOpacitySentinel", new WriteSentinel());
         __publicField(this, "lastBackdropPointer", "");
@@ -879,41 +853,15 @@ var init_scrim_controller = __esm({
           }
         }
       }
-      /**
-       * Invalidate the opacity dedup caches. Called from any setter that mutates
-       * range/mode/enabled — opacity is a pure function of (progress, range,
-       * enabled), so a config change makes the cached values stale even if
-       * `progress` itself didn't move. Next `applyOpacity(progress, false)` call
-       * sees the -1 sentinel and re-runs the math instead of short-circuiting.
-       *
-       * Public for the engine: `setSnapPoints` mutates resolved geometry which
-       * shifts `progress→opacity` mapping under the cache; engine calls this to
-       * keep the next render frame correct on a static sheet.
-       * @internal
-       */
       invalidateOpacityCache() {
         this.backdropOpacitySentinel.invalidate();
         this.screenOpacitySentinel.invalidate();
       }
-      /** Engine calls this when its `attach()` runs — installs scrim-tap-click if requested. */
       attach() {
         if (this.scrimTapToCloseEnabled) {
           this.setScrimTapToClose(true);
         }
       }
-      // ── Hot-path: opacity computation called per-frame from engine.applySize ──
-      /**
-       * Per-frame opacity writer. Computes backdrop + screen opacity from the
-       * sheet's progress (0..1 within allowed range), gated by sub-pixel dedup
-       * caches so steady-state frames don't trigger style recalc.
-       *
-       * `progressChanged` is the engine's already-computed dedup gate — when
-       * `false`, opacity is by construction a pure function of `progress` so
-       * cached values are still valid; we short-circuit the Math.min/max +
-       * division work entirely. Setters that mutate ranges/mode/enabled
-       * invalidate the cache by writing -1 sentinels so the next call re-runs
-       * the math.
-       */
       applyOpacity(progress, progressChanged) {
         if (!progressChanged && this.backdropOpacitySentinel.value !== -1 && this.screenOpacitySentinel.value !== -1) {
           return;
@@ -959,80 +907,30 @@ var init_scrim_controller = __esm({
           }
         }
       }
-      // ── Public setters (engine forwards these 1:1) ─────────────────────
-      /**
-       * Replace the [start, end] progress window in which the backdrop fades 0→1.
-       * @param range - Tuple of two progress values in 0..1 (start <= end).
-       * @param applySize - Engine-supplied recompute hook; runs one applyOpacity pass.
-       * @example
-       *   // Backdrop only starts darkening after the sheet crosses 30% open.
-       *   engine.setBackdropRange([0.3, 1]);
-       */
       setBackdropRange(range, applySize) {
         if (this.isDestroyed()) return;
         this.backdropRange = range;
         this.invalidateOpacityCache();
         applySize();
       }
-      /**
-       * Replace the [start, end] progress window in which the screen scrim fades 0→1.
-       * @param range - Tuple of two progress values in 0..1 (start <= end).
-       * @param applySize - Engine-supplied recompute hook; runs one applyOpacity pass.
-       * @example
-       *   // Scrim is fully opaque only when the sheet is past 50% — softer feel.
-       *   engine.setScreenRange([0, 0.5]);
-       */
       setScreenRange(range, applySize) {
         if (this.isDestroyed()) return;
         this.screenRange = range;
         this.invalidateOpacityCache();
         applySize();
       }
-      /**
-       * Set the scrim background color. Pass `null`/`undefined` to clear the
-       * inline write and let consumer CSS take over.
-       * @param color - Any valid CSS color string, or `null`/`undefined` to clear.
-       * @example
-       *   engine.setScrimColor("rgba(0, 0, 0, 0.6)");
-       *   engine.setScrimColor(null); // hand back to consumer CSS
-       */
       setScrimColor(color) {
         if (this.isDestroyed()) return;
         this.applyScrimStyles({ color: color === void 0 ? null : color });
       }
-      /**
-       * Set the scrim backdrop-filter blur radius. Pass `null`/`undefined` to clear.
-       * @param blur - CSS length (e.g. `"8px"`) consumed as `blur(<value>)`, or
-       *               `null`/`undefined` to remove the filter.
-       * @example
-       *   engine.setScrimBlur("12px"); // frosted-glass effect
-       *   engine.setScrimBlur(null);    // disable blur
-       */
       setScrimBlur(blur) {
         if (this.isDestroyed()) return;
         this.applyScrimStyles({ blur: blur === void 0 ? null : blur });
       }
-      /**
-       * Toggle whether the scrim layer captures pointer events.
-       * @param interactive - `true` → `pointer-events: auto`; `false` → `none`.
-       * @example
-       *   engine.setScrimInteractive(true);  // scrim swallows clicks
-       *   engine.setScrimInteractive(false); // clicks pass through to content below
-       */
       setScrimInteractive(interactive) {
         if (this.isDestroyed()) return;
         this.applyScrimStyles({ interactive });
       }
-      /**
-       * Switch scrim positioning at runtime.
-       * @param mode - `"full"` (consumer CSS), `"above-sheet"` (engine-pinned inset
-       *               so only the area NOT covered by the sheet is dimmed), or
-       *               `"off"` (display:none + opacity:0 — no remount needed).
-       * @param applySize - Engine-supplied recompute hook; runs one applyOpacity pass.
-       * @example
-       *   engine.setScrimMode("above-sheet"); // dim only the area above the sheet
-       *   engine.setScrimMode("off");          // disable scrim layer
-       */
       setScrimMode(mode, applySize) {
         if (this.isDestroyed()) return;
         if (mode === this.scrimMode) return;
@@ -1062,15 +960,6 @@ var init_scrim_controller = __esm({
         }
         applySize();
       }
-      /**
-       * Enable or disable click-on-scrim → snap to first non-zero allowed snap.
-       * Auto-promotes `pointer-events: auto` when scrim is non-interactive so the
-       * click listener actually fires.
-       * @param enabled - `true` installs the click listener; `false` removes it.
-       * @example
-       *   engine.setScrimTapToClose(true);  // tap outside sheet collapses it
-       *   engine.setScrimTapToClose(false); // require explicit close button
-       */
       setScrimTapToClose(enabled) {
         if (this.isDestroyed()) return;
         if (!this.screenComponent) return;
@@ -1100,16 +989,6 @@ var init_scrim_controller = __esm({
           this.scrimTapToCloseEnabled = false;
         }
       }
-      /**
-       * Toggle the scrim layer without remounting. Disabling stashes current
-       * `screenRange`/`backdropRange` and degenerates them to `[1, 1]` (opacity
-       * formula → 0 across the whole range); re-enabling restores the saved values.
-       * @param enabled - `false` hides scrim, `true` restores prior ranges.
-       * @param applySize - Engine-supplied recompute hook; runs one applyOpacity pass.
-       * @example
-       *   engine.setScrimEnabled(false); // hide scrim, ranges remembered
-       *   engine.setScrimEnabled(true);  // restore prior ranges (no remount)
-       */
       setScrimEnabled(enabled, applySize) {
         if (this.isDestroyed()) return;
         if (enabled === this.scrimEnabled) return;
@@ -1128,20 +1007,6 @@ var init_scrim_controller = __esm({
         }
         applySize();
       }
-      /**
-       * Batch-update multiple scrim fields with a single applySize() at the end.
-       * If `preset` is set, it seeds color/blur/interactive/range first; explicit
-       * fields override.
-       * @param opts - Partial scrim config: preset, mode, enabled, tapToClose,
-       *               color, blur, interactive, range.
-       * @param applySize - Engine-supplied recompute hook; runs ONCE per call.
-       * @example
-       *   engine.setScrim({
-       *     preset: "frosted",
-       *     mode: "above-sheet",
-       *     tapToClose: true,
-       *   });
-       */
       setScrim(opts, applySize) {
         if (this.isDestroyed()) return;
         if (opts.preset) {
@@ -1164,27 +1029,18 @@ var init_scrim_controller = __esm({
           interactive: opts.interactive
         });
         if (opts.range !== void 0) {
-          this.screenRange = opts.range;
+          if (!this.scrimEnabled && this.savedScrimRanges) {
+            this.savedScrimRanges = {
+              screen: opts.range,
+              backdrop: this.savedScrimRanges.backdrop
+            };
+          } else {
+            this.screenRange = opts.range;
+          }
         }
         this.invalidateOpacityCache();
         applySize();
       }
-      /**
-       * Inject a positioned floating element into the scrim layer (e.g. a close
-       * button anchored top-right). Replaces any prior overlay so repeated calls
-       * (reactive effects re-running) don't accumulate wrappers.
-       * @param opts - Children element, optional `inset` (default `"16px"`),
-       *               `position` (9-way grid, default `"top-right"`), and
-       *               `interactive` flag (default `true`).
-       * @returns Teardown function that removes the wrapper from the DOM.
-       * @example
-       *   const teardown = engine.setScrimOverlay({
-       *     children: closeBtn,
-       *     position: "top-right",
-       *     inset: "20px",
-       *   });
-       *   // later: teardown(); // remove the floating button
-       */
       setScrimOverlay(opts) {
         if (this.isDestroyed()) return () => {
         };
@@ -1192,7 +1048,18 @@ var init_scrim_controller = __esm({
         };
         this.scrimOverlayTeardown?.();
         const screen = this.screenComponent;
-        const inset = opts.inset ?? "16px";
+        const insetRaw = opts.inset ?? "16px";
+        const inset = VALID_CSS_LENGTH.test(insetRaw) ? insetRaw : "16px";
+        if (inset !== insetRaw) {
+          devWarn(
+            `[bottom-sheet] setScrimOverlay: invalid inset ${JSON.stringify(insetRaw)}; expected a CSS length like "16px" / "1rem" / "5%". Falling back to "16px".`
+          );
+        }
+        if (opts.children.ownerDocument && opts.children.ownerDocument !== screen.ownerDocument) {
+          devWarn(
+            "[bottom-sheet] setScrimOverlay: children belong to a different document than the scrim. Cross-document adoption can drop event listeners; construct children via the same document as the sheet root."
+          );
+        }
         const position = opts.position ?? "top-right";
         const interactive = opts.interactive ?? true;
         const wrapper = screen.ownerDocument.createElement("div");
@@ -1241,12 +1108,30 @@ var init_scrim_controller = __esm({
             ws.bottom = inset;
             ws.right = inset;
             break;
+          case "sheet-top-left":
+          case "sheet-top-center":
+          case "sheet-top-right":
+            applySheetAnchoredPosition(
+              ws,
+              this.mode,
+              position,
+              inset
+            );
+            break;
         }
         if (interactive) {
           ws.pointerEvents = "auto";
         }
         wrapper.appendChild(opts.children);
-        screen.appendChild(wrapper);
+        const host = screen.parentElement;
+        if (!host) {
+          devWarn(
+            "[bottom-sheet] setScrimOverlay: scrim element has no parent, skipping overlay injection. Mount the sheet root before calling setScrimOverlay."
+          );
+          return () => {
+          };
+        }
+        host.appendChild(wrapper);
         const teardown = () => {
           if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
           if (this.scrimOverlayTeardown === teardown) {
@@ -1256,7 +1141,6 @@ var init_scrim_controller = __esm({
         this.scrimOverlayTeardown = teardown;
         return teardown;
       }
-      /** Tear down toggle-state listeners + remove any injected overlay wrapper. */
       destroy() {
         this.detachScrimTap?.();
         this.detachScrimTap = null;
@@ -1275,8 +1159,6 @@ var init_scrim_controller = __esm({
         this.lastBackdropPointer = "";
         this.lastScreenDisplay = "";
       }
-      // ── Private helpers ────────────────────────────────────────────────
-      /** Centralized scrim style writer — atomic 3-property write across all setters. */
       applyScrimStyles(opts) {
         if (!this.screenComponent) return;
         const s = this.screenComponent.style;
@@ -1298,7 +1180,6 @@ var init_scrim_controller = __esm({
           s.pointerEvents = opts.interactive ? "auto" : "none";
         }
       }
-      /** Pin the screen overlay to the area NOT occupied by the sheet. */
       applyAboveSheetInset() {
         if (!this.screenComponent) return;
         const insetByMode = {
@@ -1489,13 +1370,9 @@ var init_animation_runner = __esm({
         __publicField(this, "duration");
         __publicField(this, "easing");
         __publicField(this, "respectReducedMotion");
-        /** Live-tracked via mq listener so animateTo skips matchMedia per snap. */
         __publicField(this, "reducedMotion", false);
-        /** Disposes the matchMedia change listener — drained from destroy(). */
         __publicField(this, "detachReducedMotion", null);
-        /** Computed once — both inputs (option + API presence) stable for life. */
         __publicField(this, "viewTransitionsAvailable");
-        /** In-flight handles. Public for tests / debugging only — engine drives via cancel(). */
         __publicField(this, "currentTween", null);
         __publicField(this, "currentSpring", null);
         this.element = deps.element;
@@ -1526,26 +1403,13 @@ var init_animation_runner = __esm({
           }
         }
       }
-      /**
-       * Live derived flag — `true` whenever a spring/tween handle is in flight.
-       * Reading the canonical handles (instead of mirroring into a separate
-       * boolean) eliminates the reduced-motion early-return latent bug where
-       * the flag stayed true forever, and removes the cross-controller
-       * setIsAnimating callback.
-       */
       get isAnimating() {
         return this.currentTween !== null || this.currentSpring !== null;
       }
-      /** Cancel any in-flight tween/spring without touching engine state. */
       cancel() {
         this.currentTween?.cancel();
         this.currentSpring?.cancel();
       }
-      /**
-       * Animate from current size to `target`. Resolves when the animation
-       * completes; resolves early if cancelled mid-flight (caller checks an
-       * abort signal post-await for cycle-invariant correctness).
-       */
       async animateTo(target, velocityPxPerMs) {
         if (target === this.getSize()) return;
         this.currentTween?.cancel();
@@ -1586,7 +1450,6 @@ var init_animation_runner = __esm({
           if (!this.isDragging()) this.element.style.willChange = "auto";
         }
       }
-      /** Tear down the matchMedia listener. Engine calls from destroy(). */
       destroy() {
         this.detachReducedMotion?.();
         this.detachReducedMotion = null;
@@ -1768,12 +1631,8 @@ var init_lifecycle_controller = __esm({
         __publicField(this, "inertSiblings");
         __publicField(this, "shouldApplyInertSiblings");
         __publicField(this, "returnFocus");
-        /** Toggle-state teardowns — fire on close, NOT in destroy-only stack. */
         __publicField(this, "releaseFocusTrap", null);
         __publicField(this, "releaseScrollLock", null);
-        /** True between install() and release(). Guards release()/destroy() from
-         *  re-running side effects (notably `returnFocus.focus()`) on already-
-         *  released or never-installed instances. */
         __publicField(this, "installed", false);
         __publicField(this, "destroyed", false);
         this.element = deps.element;
@@ -1787,14 +1646,6 @@ var init_lifecycle_controller = __esm({
         this.returnFocus = opts.returnFocus;
         this.inertSiblings = createInertSiblings(() => this.element);
       }
-      /**
-       * Run the open-time install steps. Idempotent: each step checks its
-       * existing teardown ref so a re-open during a half-cancelled close
-       * doesn't double-install. Sets `installed=true` BEFORE the first side
-       * effect so a partial throw (detached / shadow-DOM target) leaves the
-       * caller's `release()` rollback path armed to undo whatever did succeed.
-       * No-op when destroyed.
-       */
       install() {
         if (this.destroyed) return;
         this.installed = true;
@@ -1811,22 +1662,10 @@ var init_lifecycle_controller = __esm({
           this.inertSiblings.apply();
         }
       }
-      /**
-       * Update the post-release focus target. Overlay re-binds this when the
-       * consumer changes `returnFocus` after construction; the new value applies
-       * on the next `release()`. No-op when destroyed.
-       */
       setReturnFocus(target) {
         if (this.destroyed) return;
         this.returnFocus = target;
       }
-      /**
-       * Release all install-time teardowns. Short-circuits when not installed,
-       * so `close() → destroy()` (each routing through here) only restores
-       * focus once. The `installed` guard lets `inertSiblings.remove()` and
-       * the focus-trap/scroll-lock teardown nullings stay simple — they were
-       * already idempotent, but `returnFocus.focus()` was firing on every call.
-       */
       release() {
         if (!this.installed) return;
         this.installed = false;
@@ -1840,12 +1679,6 @@ var init_lifecycle_controller = __esm({
           target?.focus?.();
         }
       }
-      /**
-       * Final teardown — releases any still-installed listeners and seals the
-       * controller. After destroy(), install() is a no-op and setReturnFocus()
-       * is rejected, so post-destroy mutations can't queue up a stale focus
-       * restore.
-       */
       destroy() {
         this.release();
         this.destroyed = true;
@@ -1860,12 +1693,10 @@ var init_gestures = __esm({
   "src/core/gestures.ts"() {
     isAxisVertical = (mode) => mode === "bottom" || mode === "top";
     SampleRing = class {
-      // current count, ≤ capacity
       constructor(capacity) {
         __publicField(this, "slots");
         __publicField(this, "capacity");
         __publicField(this, "head", 0);
-        // next write index
         __publicField(this, "size", 0);
         this.capacity = capacity;
         this.slots = new Array(capacity);
@@ -1878,12 +1709,6 @@ var init_gestures = __esm({
         this.head = (this.head + 1) % this.capacity;
         if (this.size < this.capacity) this.size++;
       }
-      /**
-       * Drop oldest entries whose timestamp is below `cutoff`, but never shrink
-       * below `minKeep`. Mirrors the original
-       *   `while (samples.length > minKeep && samples[0].t < cutoff) samples.shift()`
-       * but without copying — just advances the logical tail.
-       */
       pruneBefore(cutoff, minKeep) {
         while (this.size > minKeep) {
           const oldestIdx = (this.head - this.size + this.capacity) % this.capacity;
@@ -2036,28 +1861,14 @@ var init_gesture_controller = __esm({
         __publicField(this, "detach", null);
         __publicField(this, "isDragging_", false);
         __publicField(this, "dragStartSize", 0);
-        // Only "touch" gestures are eligible for soft-keyboard dismissal —
-        // mouse/trackpad users don't have a keyboard to dismiss.
         __publicField(this, "currentPointerKind", "touch");
-        // One blur per drag — flipping focus every move event races the keyboard's
-        // own animations on iOS and makes the page jitter.
         __publicField(this, "keyboardDismissed", false);
-        // Reused payload object for the "drag" event — mutated each onMove instead
-        // of allocating a fresh `{size, delta}` per frame. At 60-120Hz a long drag
-        // would otherwise churn tens of KB through the GC. Mirrors browser
-        // PointerEvent semantics: consumers must NOT retain the reference across
-        // frames (clone if needed). See SheetEventMap.drag JSDoc.
         __publicField(this, "dragPayload", { size: 0, delta: 0 });
         this.deps = deps;
       }
-      /** True between `dragstart` and `dragend`/`onCancel`. */
       get isDragging() {
         return this.isDragging_;
       }
-      /**
-       * Bind pointer listeners on the handle and return a teardown. Engine pushes
-       * the teardown into its TeardownStack so destroy() drains it once.
-       */
       install() {
         if (this.detach) return this.detach;
         this.detach = installGestures(this.deps.handle, this.deps.mode, {
@@ -2114,11 +1925,6 @@ var init_gesture_controller = __esm({
         });
         return this.detach;
       }
-      /**
-       * Force-clear drag visual state. Engine calls from destroy() when destroyed
-       * mid-drag — gesture detach won't synthesize an onCancel, so we have to
-       * roll back the data-attribute + will-change ourselves.
-       */
       forceClearDragState() {
         if (!this.isDragging_) return;
         this.isDragging_ = false;
@@ -2142,11 +1948,6 @@ var init_aria_slider_writer = __esm({
           mode === "bottom" || mode === "top" ? "vertical" : "horizontal"
         );
       }
-      /**
-       * Update slider position. `allowedIds` length determines `aria-valuemax`;
-       * `activeId` indexes into it for `aria-valuenow` + `aria-valuetext`.
-       * Empty list → strip every dynamic attr so AT skips the handle entirely.
-       */
       setValue(allowedIds, activeId) {
         if (allowedIds.length === 0) {
           this.handle.removeAttribute("aria-valuemin");
@@ -2224,9 +2025,6 @@ function resolveEngineOptions(opts, extras) {
       scrimMode: opts.scrimMode,
       scrimColor: opts.scrimColor,
       scrimBlur: opts.scrimBlur,
-      // Auto-promote pointer-events when tap-to-close is on so the click
-      // listener actually receives events. Caller can still force `false`
-      // explicitly to opt out — `??` only kicks in for `undefined`.
       scrimInteractive: opts.scrimInteractive ?? (opts.scrimTapToClose ? true : void 0),
       scrimTapToClose: opts.scrimTapToClose,
       scrimPreset: opts.scrimPreset,
@@ -2247,10 +2045,6 @@ function resolveEngineOptions(opts, extras) {
       closeOnEscape: opts.closeOnEscape,
       lockBodyScroll: opts.lockBodyScroll,
       inertSiblings: opts.inertSiblings,
-      // Folded in from `extras` so the lifecycle bag is fully assembled at
-      // the call site — engine no longer needs a spread+override at
-      // controller construction. When `extras` is omitted, the field stays
-      // undefined and the controller uses its own default predicate.
       shouldApplyInertSiblings: extras?.shouldApplyInertSiblings
     }
   };
@@ -2319,6 +2113,7 @@ var init_BottomSheetEngine = __esm({
         __publicField(this, "scrollContainer");
         __publicField(this, "backdrop");
         __publicField(this, "screenComponent");
+        __publicField(this, "scrimParent", null);
         __publicField(this, "mode");
         __publicField(this, "flickVelocity");
         __publicField(this, "dragThreshold");
@@ -2329,40 +2124,22 @@ var init_BottomSheetEngine = __esm({
         __publicField(this, "lifecycle");
         __publicField(this, "closeOnBack");
         __publicField(this, "routedTo");
-        // Engine retains `snapPointsRaw` for the "find a closed-id" query in
-        // close() (raw input, not resolved geometry). Resolver owns geometry.
         __publicField(this, "snapPointsRaw");
         __publicField(this, "snaps");
         __publicField(this, "activeId");
         __publicField(this, "size", 0);
-        // Constructed in attach(); a plugin's install() could read `state` before
-        // attach completes if the constructor throws partway through. State getter
-        // null-guards via `this.gesture?.isDragging ?? false`.
         __publicField(this, "gesture");
         __publicField(this, "rootEl", null);
         __publicField(this, "destroyed", false);
-        // In-flight ViewTransition handle. A second snapTo while a VT is in flight
-        // would otherwise let Chromium reject the second's promise and flicker —
-        // newCycle() calls skipTransition() to abort cleanly.
         __publicField(this, "currentViewTransition", null);
-        // Each cycle captures the signal at entry; when a newer cycle aborts the
-        // controller, the captured signal flips to `aborted=true` and post-await
-        // guards short-circuit (prevents stale snap/open/close emits).
         __publicField(this, "currentAbort", new AbortController());
-        // Sub-pixel `--bs-size` deltas and <1% `--bs-progress` deltas are not
-        // visually distinguishable; gating CSSOM writes drops 30-50% of writes
-        // during the spring's settle tail.
         __publicField(this, "sizeWriteSentinel", new WriteSentinel());
         __publicField(this, "progressWriteSentinel", new WriteSentinel());
         __publicField(this, "isTopSheet", true);
-        // Pooled payload — identity documented in SheetEventMap.progress JSDoc;
-        // consumers must not retain across frames.
         __publicField(this, "progressPayload", {
           value: 0,
           size: 0
         });
-        // Pooled buffer for `getDragContext()` — onMove calls this 60-120×/s.
-        // Inner `range` object identity is also stable (mutated in place).
         __publicField(this, "dragContextBuf", {
           size: 0,
           maxAxisSize: 0,
@@ -2373,13 +2150,7 @@ var init_BottomSheetEngine = __esm({
         __publicField(this, "persistKey");
         __publicField(this, "linkedSheets", []);
         __publicField(this, "scrollCache");
-        // Single LIFO stack for ALL destroy-only teardowns. Plugins (added last)
-        // tear down first before the infrastructure they depend on. Toggle-semantic
-        // listeners (focus-trap / scroll-lock / scrim tap-to-close) stay as named
-        // fields on their controllers.
         __publicField(this, "teardowns", new TeardownStack());
-        // Pre-computed transform template — built once per engine since `mode` is
-        // fixed for its lifetime. Avoids the 4-arm switch at 60-120 Hz.
         __publicField(this, "transformTemplate");
         const resolved = resolveEngineOptions(opts, {
           shouldApplyInertSiblings: () => {
@@ -2394,7 +2165,8 @@ var init_BottomSheetEngine = __esm({
         this.handle = opts.handle ?? opts.element;
         this.scrollContainer = opts.scrollContainer;
         this.backdrop = opts.backdrop;
-        this.screenComponent = opts.screenComponent;
+        this.screenComponent = opts.scrim ?? opts.screenComponent;
+        this.scrimParent = this.screenComponent?.parentElement ?? null;
         this.mode = resolved.mode;
         this.transformTemplate = buildTransformTemplate(this.mode);
         this.aria = new AriaSliderWriter(this.handle, this.mode);
@@ -2422,8 +2194,6 @@ var init_BottomSheetEngine = __esm({
             getRootEl: () => this.rootEl,
             applySize: (size) => this.applySize(size),
             getSize: () => this.size,
-            // Optional chain protects synthetic test paths that drive animateTo
-            // before attach() (gesture is constructed there).
             isDragging: () => this.gesture?.isDragging ?? false
           },
           resolved.animation
@@ -2528,21 +2298,6 @@ var init_BottomSheetEngine = __esm({
       on(event, fn) {
         return this.bus.on(event, fn);
       }
-      /**
-       * Register a plugin. `install` runs synchronously; if it returns a function,
-       * it's captured for teardown during `destroy()`. No-op if already destroyed
-       * — installing into a torn-down engine would leak listeners.
-       *
-       * Throws from `plugin.install` are caught and rethrown via `queueMicrotask`
-       * so a buggy plugin can't take the engine down with it: the engine stays
-       * usable, sibling plugins still install, and the error surfaces in dev tools
-       * on the next tick instead of being swallowed. Mirrors the per-fn isolation
-       * model used for teardowns.
-       *
-       * Plugins that accept the second `scope` argument get transactional cleanup:
-       * push partial-install cleanups via `scope.add(fn)` and the engine drains
-       * them on throw, OR merges them into destroy-time teardowns on success.
-       */
       use(plugin) {
         if (this.destroyed) {
           console.warn(
@@ -2552,9 +2307,6 @@ var init_BottomSheetEngine = __esm({
         }
         const scoped = [];
         const scope = {
-          // typeof check — not just truthiness — so a JS-only plugin pushing a
-          // bogus value is silently rejected instead of queueing a confusing
-          // TypeError on destroy() drain.
           add: (fn) => {
             if (typeof fn === "function") scoped.push(fn);
           }
@@ -2583,36 +2335,13 @@ var init_BottomSheetEngine = __esm({
         }
         return this;
       }
-      /**
-       * Replace the linked-sheets list at runtime. Use when peer engines aren't
-       * available at construction time (mounted later in the tree). The wiring
-       * to the `open` event is independent of this list — it reads `linkedSheets`
-       * lazily on emit, so this setter is a simple field swap.
-       */
       setLinkedSheets(sheets) {
         if (this.destroyed) return;
         this.linkedSheets = sheets;
       }
-      /** Read-only view of the current allow-list, for cross-sheet target negotiation. */
       getAllowedIds() {
         return this.snaps.getAllowedIds().slice();
       }
-      /**
-       * Animate to a snap point by id. Resolves when the animation completes.
-       *
-       * Two call shapes:
-       * ```ts
-       * engine.snapTo("full");                           // default velocity
-       * engine.snapTo("full", 0.5);                      // px/ms initial velocity
-       * engine.snapTo("full", { velocity: 0.5, signal }); // abortable
-       * ```
-       *
-       * When `opts.signal` is provided, calling `controller.abort()` cancels the
-       * in-flight tween/spring and the returned promise resolves without firing
-       * `snap`. The captured `AbortSignal` is checked after each await so external
-       * aborts ride the same cycle invariant as internal ones (resize, destroy,
-       * concurrent snapTo).
-       */
       async snapTo(id, velocityOrOpts = 0, _skipBeforeSnap = false) {
         if (this.destroyed) return;
         const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : { velocity: velocityOrOpts };
@@ -2671,16 +2400,6 @@ var init_BottomSheetEngine = __esm({
           this.handleClose();
         }
       }
-      /**
-       * Drive the sheet to an arbitrary px size, bypassing snap matching.
-       * Useful for preview scrubs, animation chaining, or programmatic gestures.
-       * Animates with the configured spring/tween. Resolves when the animation
-       * completes. Does NOT update `activeId` — call `snapTo(id)` after to commit.
-       *
-       * Unlike `snapTo`, this does not fire `before-snap` (it isn't a snap commit)
-       * nor `snap` (the sheet isn't settling to a known snap). `progress` events
-       * still fire via applySize. Target is clamped to `[0, maxAxisSize]`.
-       */
       async dragTo(targetSize, velocityOrOpts = 0) {
         if (this.destroyed) return;
         const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : { velocity: velocityOrOpts };
@@ -2718,20 +2437,10 @@ var init_BottomSheetEngine = __esm({
         this.snaps.setAllowedIds(ids);
         this.updateAriaSlider();
         if (snap && ids.includes(snap)) {
-          void this.snapTo(
-            snap,
-            0,
-            /* internal */
-            true
-          );
+          void this.snapTo(snap, 0, true);
         } else if (!ids.includes(this.activeId)) {
           const fallback = ids[0];
-          if (fallback) void this.snapTo(
-            fallback,
-            0,
-            /* internal */
-            true
-          );
+          if (fallback) void this.snapTo(fallback, 0, true);
         }
       }
       setBackdropRange(range) {
@@ -2749,21 +2458,6 @@ var init_BottomSheetEngine = __esm({
       setScrimInteractive(interactive) {
         this.scrim.setScrimInteractive(interactive);
       }
-      /**
-       * Batch-update multiple scrim fields in one call. Apply order is:
-       *   1. `preset` — fills baseline color/blur/range/interactive.
-       *   2. `mode` — re-positions the scrim (fixed inset / clear / hide).
-       *   3. `enabled` — flips the opacity contribution on/off.
-       *   4. `tapToClose` — installs/tears the click listener.
-       *   5. `color` / `blur` / `interactive` / `range` — explicit overrides.
-       *   6. ONE `applySize` so the per-frame opacity stays consistent.
-       *
-       * Performance: collecting changes here (vs calling individual setters)
-       * avoids repeated `applySize` calls during a multi-field swap. Setters
-       * called here suppress their own internal `applySize` either by passing
-       * through fast-paths (mode/enabled no-op when value unchanged) or by
-       * being visual-only (color/blur/interactive don't influence opacity).
-       */
       setScrim(opts) {
         this.scrim.setScrim(opts, () => this.applySize(this.size));
       }
@@ -2779,11 +2473,6 @@ var init_BottomSheetEngine = __esm({
       setScrimOverlay(opts) {
         return this.scrim.setScrimOverlay(opts);
       }
-      /**
-       * Read-only snapshot of scrim state. Use the `setScrim*` setters to mutate.
-       * Stable public API — internals (e.g. cached opacity sentinels) are NOT
-       * exposed so consumers can't accidentally couple to ScrimController shape.
-       */
       getScrimState() {
         return { mode: this.scrim.scrimMode, enabled: this.scrim.scrimEnabled };
       }
@@ -2829,24 +2518,11 @@ var init_BottomSheetEngine = __esm({
       emit(event, payload) {
         this.bus.emit(event, payload);
       }
-      /**
-       * Abort the current cycle's signal and replace the controller. Returns the
-       * fresh signal so the caller can capture it locally before any await — when
-       * a future newCycle() / destroy aborts our controller, the captured signal
-       * flips to aborted and post-await guards short-circuit.
-       */
       newCycle() {
         this.currentAbort.abort();
         this.currentAbort = new AbortController();
         return this.currentAbort.signal;
       }
-      /**
-       * Fire `before-snap` and report whether a listener cancelled it. The
-       * `cancel()` callback exposed to listeners is frozen after the synchronous
-       * emit phase so async callers can't silently miss — they get a console
-       * warning. Returns `true` when cancelled so callers can early-return /
-       * spring-back without re-implementing the cancel/frozen pattern.
-       */
       emitBeforeSnap(target, previousId) {
         let cancelled = false;
         let frozen = false;
@@ -2880,30 +2556,9 @@ var init_BottomSheetEngine = __esm({
         this.snaps.setRaw(this.snapPointsRaw);
         this.scrim.invalidateOpacityCache();
       }
-      /**
-       * Memoised `allowedRange()` — delegates to SnapResolver which owns the cache.
-       * Engine wrapper kept so existing call sites don't all need updating;
-       * resolver-level memoization survives across method invocations.
-       */
       getAllowedRange() {
         return this.snaps.getAllowedRange();
       }
-      /**
-       * Write ARIA slider value attributes onto the handle so the engine itself
-       * is the source of truth for screen-reader announcements. Called from the
-       * constructor and from every code path that mutates `activeId` /
-       * `allowedIds`. WAI-ARIA 1.2 requires `aria-valuenow` for `role="slider"` —
-       * without it screen readers can't announce drag/snap progress to keyboard
-       * + AT users (WCAG 4.1.2 Name, Role, Value).
-       *
-       * Engine does NOT set `role="slider"` itself — that's the adapter's or
-       * consumer markup's responsibility. We only decorate with dynamic values.
-       *
-       * Empty allowed-list is malformed input (settable via `setAllowed([])`);
-       * short-circuit to remove ARIA value attributes so screen readers see a
-       * no-value slider rather than a degenerate `min=max=now=0` (WAI-ARIA 1.2
-       * requires `valuemax > valuemin` for `role="slider"`).
-       */
       updateAriaSlider() {
         this.aria.setValue(this.snaps.getAllowedIds(), this.activeId);
       }
@@ -2928,11 +2583,6 @@ var init_BottomSheetEngine = __esm({
           element: this.element,
           mode: this.mode,
           getRoot: () => this.rootEl,
-          // Single coalesced reader — narrows the DI surface and removes 3 getter
-          // dispatches per onMove frame at 60-120Hz. Returns a SHARED buffer
-          // (this.dragContextBuf) — see field JSDoc for the retention contract.
-          // Inner `range` object is mutated in place too so callers caching its
-          // identity between frames stay valid.
           getDragContext: () => {
             const buf = this.dragContextBuf;
             const r = this.getAllowedRange();
@@ -3098,7 +2748,6 @@ var init_BottomSheetEngine = __esm({
           }
         });
       }
-      /** Trigger a brief haptic tick (iOS Safari + Android Chrome support). */
       haptic() {
         if (typeof navigator !== "undefined" && "vibrate" in navigator) {
           try {
@@ -3114,6 +2763,9 @@ var init_BottomSheetEngine = __esm({
         style.transform = this.transformTemplate(offset);
         if (this.sizeWriteSentinel.shouldWrite(size, SIZE_WRITE_EPSILON)) {
           style.setProperty("--bs-size", `${size}px`);
+          if (this.scrimParent) {
+            this.scrimParent.style.setProperty("--bs-size", `${size}px`);
+          }
         }
         const progress = this.computeProgress(size);
         const progressChanged = this.progressWriteSentinel.shouldWrite(
@@ -3160,7 +2812,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-shadow:0 -3px 12px rgba(0,0,0,0.12);--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);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);box-shadow: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;box-shadow: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);box-shadow: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);box-shadow:-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;padding:0 16px 16px}.bs-screen{position:absolute;inset:0;pointer-events:none;display:none;z-index:var(--bs-z-scrim)}.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: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:#ffffff;--bs-surface-border:rgba(225,227,237,1);--bs-shadow:0 -3px 12px rgba(0,0,0,0.12);--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);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);box-shadow: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;box-shadow: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);box-shadow: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);box-shadow:-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;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: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}}`;
   }
 });
 
@@ -3343,6 +2995,9 @@ var init_BottomSheetElement = __esm({
         this.teardownEngine();
         this.initEngine();
       }
+      getEngine() {
+        return this.engine;
+      }
       teardownEngine() {
         this.offHandlers.forEach((off) => off());
         this.offHandlers = [];
@@ -3374,7 +3029,7 @@ var init_BottomSheetElement = __esm({
           handle,
           scrollContainer: content,
           backdrop: showBackdrop ? backdrop : void 0,
-          screenComponent: this.refs.screen,
+          scrim: this.refs.screen,
           mode,
           snapPoints: parseSnapPoints(this.getAttribute(ATTR_SNAP_POINTS)),
           allowed: parseList(this.getAttribute(ATTR_ALLOWED)),