@surdeddd/bottom-sheet 0.2.0 → 0.3.0

package/dist/element.cjs

@@ -33,6 +33,18 @@ var init_sheetStack = __esm({
         this.entries.splice(idx, 1);
         this.recompute();
       }
+      promote(id) {
+        const idx = this.entries.findIndex((e) => e.id === id);
+        if (idx === -1) return;
+        if (idx !== this.entries.length - 1) {
+          const [entry] = this.entries.splice(idx, 1);
+          this.entries.push(entry);
+        }
+        this.recompute();
+      }
+      update() {
+        this.recompute();
+      }
       size() {
         return this.entries.length;
       }
@@ -40,9 +52,24 @@ var init_sheetStack = __esm({
         this.entries = [];
       }
       recompute() {
+        let top = null;
+        const open = [];
+        for (const entry of this.entries) {
+          if (!entry.isOpen || entry.isOpen()) {
+            top = entry;
+            open.push(entry);
+          }
+        }
+        if (!top && this.entries.length > 0) {
+          top = this.entries[this.entries.length - 1];
+        }
         this.entries.forEach((entry, i) => {
           entry.setZIndex(BASE_Z + i * STEP);
-          entry.setIsTop(i === this.entries.length - 1);
+          entry.setIsTop(entry === top);
+          if (entry.setDepth) {
+            const openIdx = open.indexOf(entry);
+            entry.setDepth(openIdx === -1 ? 0 : open.length - 1 - openIdx);
+          }
         });
       }
     };
@@ -364,14 +391,17 @@ function installAutoCollapse(deps) {
   const fire = () => {
     if (deps.isDestroyed()) return;
     if (deps.isDragging()) return;
-    const allowed = deps.getAllowedIds();
-    const target = allowed.find((id) => {
+    const active = deps.resolveSnap(deps.getActiveId());
+    if (!active || active.size === 0) return;
+    let target = null;
+    for (const id of deps.getAllowedIds()) {
       const snap = deps.resolveSnap(id);
-      return snap !== null && snap.size > 0;
-    });
+      if (!snap || snap.size <= 0) continue;
+      if (!target || snap.size < target.size) target = snap;
+    }
     if (!target) return;
-    if (target === deps.getActiveId()) return;
-    deps.snapTo(target);
+    if (target.id === active.id || target.size >= active.size) return;
+    deps.snapTo(target.id);
   };
   const reset = () => {
     clearTimer();
@@ -382,6 +412,7 @@ function installAutoCollapse(deps) {
     }, ms);
   };
   const unsubscribe = deps.on("snap", () => reset());
+  if ((deps.resolveSnap(deps.getActiveId())?.size ?? 0) > 0) reset();
   return () => {
     clearTimer();
     unsubscribe();
@@ -398,6 +429,7 @@ function notifyLinkedSheets(sheets, self) {
   for (const linked of sheets) {
     if (linked === self) continue;
     try {
+      if (linked.state.size === 0) continue;
       const ids = linked.getAllowedIds();
       const target = ids.find((id) => id !== "closed");
       if (target && target !== linked.state.activeId) {
@@ -448,7 +480,7 @@ function installRoute(deps) {
       const onPop = (event) => {
         if (deps.isDestroyed()) return;
         const state = event.state;
-        if (state && state.__bsRouted === target && deps.getSize() > 0) {
+        if ((!state || state.__bsRouted !== target) && deps.getSize() > 0) {
           routePushed = false;
           void deps.close();
         }
@@ -616,13 +648,17 @@ function installResizeObserver(deps) {
     if (viewportSize2 > 0 && viewportSize2 < max) {
       deps.setMaxAxisSize(viewportSize2);
     }
+    const wasAnimating = deps.isAnimating?.() ?? false;
     deps.cancelInFlight();
     deps.newCycle();
     const current = deps.resolveActiveSnap();
     const newMax = deps.getMaxAxisSize();
     const targetSize = current ? Math.min(current.size, newMax) : Math.min(deps.getSize(), newMax);
     deps.setSize(targetSize);
-    if (current && !deps.isDragging()) deps.applySize(targetSize);
+    if (current && !deps.isDragging()) {
+      deps.applySize(targetSize);
+      if (wasAnimating) deps.resyncAfterCancel?.();
+    }
   };
   let resizeObserver = null;
   if (typeof ResizeObserver !== "undefined") {
@@ -764,7 +800,7 @@ var init_devWarn = __esm({
   }
 });
 
-// src/core/controllers/scrim-controller.ts
+// src/core/primitives/overlay-position.ts
 function resolveSheetAnchoredStyle(mode, position, inset) {
   const sizeOffset = `calc(var(--bs-size, 0px) + ${inset})`;
   switch (mode) {
@@ -786,14 +822,68 @@ function resolveSheetAnchoredStyle(mode, position, 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;
+function applyOverlayPosition(ws, mode, position, inset) {
+  switch (position) {
+    case "top-left":
+      ws.top = inset;
+      ws.left = inset;
+      break;
+    case "top-center":
+      ws.top = inset;
+      ws.left = "50%";
+      ws.transform = "translateX(-50%)";
+      break;
+    case "top-right":
+      ws.top = inset;
+      ws.right = inset;
+      break;
+    case "center-left":
+      ws.top = "50%";
+      ws.left = inset;
+      ws.transform = "translateY(-50%)";
+      break;
+    case "center":
+      ws.top = "50%";
+      ws.left = "50%";
+      ws.transform = "translate(-50%, -50%)";
+      break;
+    case "center-right":
+      ws.top = "50%";
+      ws.right = inset;
+      ws.transform = "translateY(-50%)";
+      break;
+    case "bottom-left":
+      ws.bottom = inset;
+      ws.left = inset;
+      break;
+    case "bottom-center":
+      ws.bottom = inset;
+      ws.left = "50%";
+      ws.transform = "translateX(-50%)";
+      break;
+    case "bottom-right":
+      ws.bottom = inset;
+      ws.right = inset;
+      break;
+    case "sheet-top-left":
+    case "sheet-top-center":
+    case "sheet-top-right": {
+      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;
+      break;
+    }
+  }
 }
+var init_overlay_position = __esm({
+  "src/core/primitives/overlay-position.ts"() {
+  }
+});
+
+// src/core/controllers/scrim-controller.ts
 var VALID_CSS_LENGTH, ScrimController;
 var init_scrim_controller = __esm({
   "src/core/controllers/scrim-controller.ts"() {
@@ -802,6 +892,7 @@ var init_scrim_controller = __esm({
     init_hot_path_thresholds();
     init_opacity_dedup();
     init_devWarn();
+    init_overlay_position();
     VALID_CSS_LENGTH = /^-?\d+(?:\.\d+)?(?:px|em|rem|%)$/;
     ScrimController = class {
       constructor(deps, opts) {
@@ -813,6 +904,8 @@ var init_scrim_controller = __esm({
         __publicField(this, "getAllowedIds");
         __publicField(this, "getResolvedSnaps");
         __publicField(this, "snapToFn");
+        __publicField(this, "closeFn");
+        __publicField(this, "scrimInteractive", false);
         __publicField(this, "scrimMode");
         __publicField(this, "backdropRange");
         __publicField(this, "screenRange");
@@ -833,6 +926,7 @@ var init_scrim_controller = __esm({
         this.getAllowedIds = deps.getAllowedIds;
         this.getResolvedSnaps = deps.getResolvedSnaps;
         this.snapToFn = deps.snapTo;
+        this.closeFn = deps.close;
         this.scrimMode = opts.scrimMode ?? "full";
         const preset = opts.scrimPreset ? SCRIM_PRESETS[opts.scrimPreset] : null;
         this.backdropRange = opts.backdropRange ?? preset?.range ?? [0, 1];
@@ -974,11 +1068,15 @@ var init_scrim_controller = __esm({
           }
           const onClick = () => {
             if (this.isDestroyed()) return;
+            if (this.closeFn) {
+              this.closeFn();
+              return;
+            }
             const allowed = this.getAllowedIds();
             const snaps = this.getResolvedSnaps();
             const fallback = allowed.find((id) => {
               const snap = findById(id, snaps);
-              return snap !== null && snap.size > 0;
+              return snap !== null && snap.size === 0;
             });
             if (fallback) this.snapToFn(fallback);
           };
@@ -995,6 +1093,7 @@ var init_scrim_controller = __esm({
         if (this.isDestroyed()) return;
         if (enabled === this.scrimEnabled) return;
         this.scrimEnabled = enabled;
+        this.invalidateOpacityCache();
         if (!enabled) {
           this.savedScrimRanges = {
             screen: this.screenRange,
@@ -1018,7 +1117,12 @@ var init_scrim_controller = __esm({
             blur: cfg.blur ?? null,
             interactive: cfg.interactive
           });
-          this.screenRange = cfg.range;
+          if (!this.scrimEnabled && this.savedScrimRanges) {
+            this.savedScrimRanges = { screen: cfg.range, backdrop: cfg.range };
+          } else {
+            this.screenRange = cfg.range;
+            this.backdropRange = cfg.range;
+          }
         }
         const noop = () => {
         };
@@ -1068,59 +1172,7 @@ var init_scrim_controller = __esm({
         wrapper.className = "bs-scrim-overlay";
         const ws = wrapper.style;
         ws.position = "absolute";
-        switch (position) {
-          case "top-left":
-            ws.top = inset;
-            ws.left = inset;
-            break;
-          case "top-center":
-            ws.top = inset;
-            ws.left = "50%";
-            ws.transform = "translateX(-50%)";
-            break;
-          case "top-right":
-            ws.top = inset;
-            ws.right = inset;
-            break;
-          case "center-left":
-            ws.top = "50%";
-            ws.left = inset;
-            ws.transform = "translateY(-50%)";
-            break;
-          case "center":
-            ws.top = "50%";
-            ws.left = "50%";
-            ws.transform = "translate(-50%, -50%)";
-            break;
-          case "center-right":
-            ws.top = "50%";
-            ws.right = inset;
-            ws.transform = "translateY(-50%)";
-            break;
-          case "bottom-left":
-            ws.bottom = inset;
-            ws.left = inset;
-            break;
-          case "bottom-center":
-            ws.bottom = inset;
-            ws.left = "50%";
-            ws.transform = "translateX(-50%)";
-            break;
-          case "bottom-right":
-            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;
-        }
+        applyOverlayPosition(ws, this.mode, position, inset);
         if (interactive) {
           ws.pointerEvents = "auto";
         }
@@ -1179,6 +1231,7 @@ var init_scrim_controller = __esm({
           }
         }
         if (opts.interactive !== void 0) {
+          this.scrimInteractive = opts.interactive;
           s.pointerEvents = opts.interactive ? "auto" : "none";
         }
       }
@@ -1193,14 +1246,14 @@ var init_scrim_controller = __esm({
         const s = this.screenComponent.style;
         s.position = "fixed";
         s.inset = insetByMode[this.mode];
-        s.pointerEvents = "none";
+        s.pointerEvents = this.scrimInteractive || this.scrimTapToCloseEnabled ? "auto" : "none";
       }
     };
   }
 });
 
 // src/core/animation/animation.ts
-var easeOutBack, easeOutCubic, easeLinear, easeOutQuint, tween;
+var easeOutBack, easeOutCubic, easeLinear, easeOutQuint, tween, prefersReducedMotion;
 var init_animation = __esm({
   "src/core/animation/animation.ts"() {
     easeOutBack = (t) => {
@@ -1252,6 +1305,10 @@ var init_animation = __esm({
         promise
       };
     };
+    prefersReducedMotion = () => {
+      if (typeof window === "undefined" || !window.matchMedia) return false;
+      return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    };
   }
 });
 
@@ -1287,14 +1344,20 @@ var init_spring = __esm({
           if (cancelled) return;
           const dt = Math.min((now - lastTime) / 1e3, MAX_DT);
           lastTime = now;
-          const subDt = Math.min(dt, 1 / 240);
-          let stepsLeft = Math.max(1, Math.ceil(dt / subDt));
+          const steps = Math.max(1, Math.ceil(dt * 240));
+          const subDt = dt / steps;
+          let stepsLeft = steps;
           while (stepsLeft-- > 0) {
             const force = -cfg.stiffness * (x - to) - cfg.damping * v;
             const accel = force / cfg.mass;
             v += accel * subDt;
             x += v * subDt;
           }
+          if (!Number.isFinite(x) || !Number.isFinite(v)) {
+            onUpdate(to, 0);
+            resolve();
+            return;
+          }
           onUpdate(x, v);
           const isAtRest = Math.abs(to - x) < (cfg.restDelta ?? 0.5) && Math.abs(v) < (cfg.restSpeed ?? 0.5);
           if (isAtRest) {
@@ -1463,7 +1526,7 @@ var init_animation_runner = __esm({
 });
 
 // src/core/lifecycle/focusTrap.ts
-var FOCUSABLE, isVisible, focusables, installFocusTrap;
+var FOCUSABLE, isVisible, focusables, trapStack, installFocusTrap;
 var init_focusTrap = __esm({
   "src/core/lifecycle/focusTrap.ts"() {
     FOCUSABLE = [
@@ -1488,9 +1551,13 @@ var init_focusTrap = __esm({
     focusables = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter(
       (el) => !el.hasAttribute("inert") && isVisible(el) && !el.matches("[aria-hidden='true']")
     );
+    trapStack = [];
     installFocusTrap = (container, options = {}) => {
       if (typeof document === "undefined") return () => {
       };
+      const token = {};
+      trapStack.push(token);
+      const isActive = () => trapStack[trapStack.length - 1] === token;
       const previouslyFocused = document.activeElement;
       const focusInitial = () => {
         const initial = typeof options.initialFocus === "string" ? container.querySelector(options.initialFocus) : options.initialFocus ?? focusables(container)[0] ?? container;
@@ -1498,6 +1565,7 @@ var init_focusTrap = __esm({
       };
       focusInitial();
       const handleKey = (e) => {
+        if (!isActive()) return;
         if (e.key === "Escape" && options.onEscape) {
           options.onEscape();
           return;
@@ -1520,6 +1588,7 @@ var init_focusTrap = __esm({
         }
       };
       const handleFocusIn = (e) => {
+        if (!isActive()) return;
         const target = e.target;
         if (target && !container.contains(target)) {
           const list = focusables(container);
@@ -1532,6 +1601,8 @@ var init_focusTrap = __esm({
       return () => {
         if (released) return;
         released = true;
+        const idx = trapStack.indexOf(token);
+        if (idx !== -1) trapStack.splice(idx, 1);
         document.removeEventListener("keydown", handleKey, true);
         document.removeEventListener("focusin", handleFocusIn, true);
         if (previouslyFocused && document.contains(previouslyFocused)) {
@@ -1594,11 +1665,17 @@ function createInertSiblings(rootProvider) {
   return {
     apply() {
       if (typeof document === "undefined") return;
-      const root = rootProvider();
-      const parent = root.parentElement ?? document.body;
+      let top = rootProvider();
+      while (top.parentElement && top.parentElement !== document.body) {
+        top = top.parentElement;
+      }
+      const parent = top.parentElement ?? document.body;
       for (const child of Array.from(parent.children)) {
-        if (child === root) continue;
+        if (child === top) continue;
         if (child.hasAttribute("inert")) continue;
+        if (child.classList.contains("bs-backdrop") || child.classList.contains("bs-screen") || child.classList.contains("bs-root")) {
+          continue;
+        }
         child.setAttribute("inert", "");
         tracked.push(child);
       }
@@ -1624,7 +1701,6 @@ var init_lifecycle_controller = __esm({
     LifecycleController = class {
       constructor(deps, opts) {
         __publicField(this, "element");
-        __publicField(this, "closeFn");
         __publicField(this, "focusTrapEnabled");
         __publicField(this, "initialFocus");
         __publicField(this, "closeOnEscape");
@@ -1638,7 +1714,6 @@ var init_lifecycle_controller = __esm({
         __publicField(this, "installed", false);
         __publicField(this, "destroyed", false);
         this.element = deps.element;
-        this.closeFn = deps.close;
         this.focusTrapEnabled = opts.focusTrap ?? false;
         this.initialFocus = opts.initialFocus;
         this.closeOnEscape = opts.closeOnEscape ?? true;
@@ -1648,6 +1723,9 @@ var init_lifecycle_controller = __esm({
         this.returnFocus = opts.returnFocus;
         this.inertSiblings = createInertSiblings(() => this.element);
       }
+      get isInstalled() {
+        return this.installed;
+      }
       install() {
         if (this.destroyed) return;
         this.installed = true;
@@ -1656,8 +1734,7 @@ var init_lifecycle_controller = __esm({
         }
         if (this.focusTrapEnabled && !this.releaseFocusTrap) {
           this.releaseFocusTrap = installFocusTrap(this.element, {
-            initialFocus: this.initialFocus,
-            onEscape: this.closeOnEscape ? () => void this.closeFn() : void 0
+            initialFocus: this.initialFocus
           });
         }
         if (this.inertSiblingsEnabled && this.shouldApplyInertSiblings()) {
@@ -1820,12 +1897,12 @@ var init_gestures = __esm({
 // src/core/primitives/rubber-band.ts
 function rubberBand(overshoot, maxAxisSize) {
   const cap = Math.min(maxAxisSize * 0.15, 80);
-  return Math.sign(overshoot) * Math.pow(Math.abs(overshoot), RUBBER_BAND_FACTOR) * Math.min(6, cap / Math.max(Math.abs(overshoot), 1));
+  if (cap <= 0) return 0;
+  const abs = Math.abs(overshoot);
+  return Math.sign(overshoot) * (cap * abs / (abs + cap));
 }
-var RUBBER_BAND_FACTOR;
 var init_rubber_band = __esm({
   "src/core/primitives/rubber-band.ts"() {
-    RUBBER_BAND_FACTOR = 0.55;
   }
 });
 
@@ -1921,6 +1998,10 @@ var init_gesture_controller = __esm({
             this.isDragging_ = false;
             this.keyboardDismissed = false;
             this.deps.getRoot()?.removeAttribute("data-dragging");
+            this.deps.emit("dragend", {
+              size: this.deps.getDragContext().size,
+              velocity: 0
+            });
             const restoreTo = this.dragStartSize;
             void this.deps.animateTo(restoreTo, 0);
           }
@@ -2005,6 +2086,306 @@ var init_scroll_cache = __esm({
   }
 });
 
+// src/core/primitives/anchor-animations.ts
+function resolveTransitionFrames(spec, phase) {
+  const fallback = { frames: null, duration: 0, easing: DEFAULT_EASING };
+  if (spec === "none") return fallback;
+  if (spec === void 0 || typeof spec === "string") {
+    const preset2 = PRESET_FRAMES[spec ?? "fade"];
+    return {
+      frames: preset2[phase],
+      duration: DEFAULT_DURATION3,
+      easing: DEFAULT_EASING
+    };
+  }
+  const custom = phase === "enter" ? spec.enter : spec.exit;
+  if (custom) {
+    return {
+      frames: custom,
+      duration: spec.duration ?? DEFAULT_DURATION3,
+      easing: spec.easing ?? DEFAULT_EASING
+    };
+  }
+  if (spec.preset === "none") return fallback;
+  const preset = PRESET_FRAMES[spec.preset ?? "fade"];
+  return {
+    frames: preset[phase],
+    duration: spec.duration ?? DEFAULT_DURATION3,
+    easing: spec.easing ?? DEFAULT_EASING
+  };
+}
+function runAnchorTransition(el, spec, phase) {
+  const respectReduced = typeof spec === "object" ? spec.respectReducedMotion !== false : true;
+  if (respectReduced && prefersReducedMotion()) return INSTANT;
+  const { frames, duration, easing } = resolveTransitionFrames(spec, phase);
+  if (!frames || duration <= 0) return INSTANT;
+  if (typeof el.animate !== "function") return INSTANT;
+  const animation = el.animate(frames, {
+    duration,
+    easing,
+    fill: "both"
+  });
+  const finished = animation.finished.then(() => void 0).catch(() => void 0);
+  return {
+    finished,
+    cancel: () => {
+      try {
+        animation.cancel();
+      } catch {
+        return;
+      }
+    }
+  };
+}
+var DEFAULT_DURATION3, DEFAULT_EASING, PRESET_FRAMES, INSTANT;
+var init_anchor_animations = __esm({
+  "src/core/primitives/anchor-animations.ts"() {
+    init_animation();
+    DEFAULT_DURATION3 = 200;
+    DEFAULT_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
+    PRESET_FRAMES = {
+      fade: {
+        enter: [{ opacity: 0 }, { opacity: 1 }],
+        exit: [{ opacity: 1 }, { opacity: 0 }]
+      },
+      scale: {
+        enter: [
+          { opacity: 0, transform: "scale(0.85)" },
+          { opacity: 1, transform: "scale(1)" }
+        ],
+        exit: [
+          { opacity: 1, transform: "scale(1)" },
+          { opacity: 0, transform: "scale(0.85)" }
+        ]
+      },
+      slide: {
+        enter: [
+          { opacity: 0, transform: "translateY(10px)" },
+          { opacity: 1, transform: "translateY(0)" }
+        ],
+        exit: [
+          { opacity: 1, transform: "translateY(0)" },
+          { opacity: 0, transform: "translateY(10px)" }
+        ]
+      },
+      pop: {
+        enter: [
+          { opacity: 0, transform: "scale(0.6)", offset: 0 },
+          { opacity: 1, transform: "scale(1.06)", offset: 0.7 },
+          { opacity: 1, transform: "scale(1)", offset: 1 }
+        ],
+        exit: [
+          { opacity: 1, transform: "scale(1)" },
+          { opacity: 0, transform: "scale(0.6)" }
+        ]
+      }
+    };
+    INSTANT = {
+      finished: Promise.resolve(),
+      cancel: () => {
+      }
+    };
+  }
+});
+
+// src/core/features/sheet-anchors.ts
+function attachAnchor(deps, opts) {
+  const doc = deps.host.ownerDocument;
+  const wrapper = doc.createElement("div");
+  wrapper.className = "bs-anchor";
+  const interactive = opts.interactive ?? true;
+  const position = opts.position ?? "sheet-top-right";
+  const isDock = position === "dock-bottom" || position === "dock-top";
+  const ws = wrapper.style;
+  ws.position = "fixed";
+  if (isDock) {
+    ws.left = "0";
+    ws.right = "0";
+    if (position === "dock-bottom") {
+      ws.bottom = "0";
+    } else {
+      ws.top = "0";
+    }
+  } else {
+    applyOverlayPosition(ws, deps.mode, position, opts.inset ?? "16px");
+  }
+  if (opts.fadeRange) {
+    const [r0, r1] = opts.fadeRange;
+    const span = Math.max(r1 - r0, 1e-4);
+    ws.opacity = `clamp(0, calc((var(--bs-progress, 0) - ${r0}) / ${span}), 1)`;
+  }
+  wrapper.appendChild(opts.element);
+  deps.host.appendChild(wrapper);
+  let visible = null;
+  let inFlight = null;
+  const shouldShow = (state) => {
+    if (typeof opts.showOn === "function") return opts.showOn(state);
+    if (Array.isArray(opts.showOn)) return opts.showOn.includes(state.activeId);
+    return isDock || state.size > 0;
+  };
+  const applyVisibility = (next, animate) => {
+    if (next === visible) return;
+    visible = next;
+    inFlight?.cancel();
+    inFlight = null;
+    wrapper.style.pointerEvents = next && interactive ? "auto" : "none";
+    if (next) {
+      wrapper.style.visibility = "";
+      if (animate) {
+        inFlight = runAnchorTransition(opts.element, opts.animation, "enter");
+      }
+      return;
+    }
+    if (!animate) {
+      wrapper.style.visibility = "hidden";
+      return;
+    }
+    const handle = runAnchorTransition(opts.element, opts.animation, "exit");
+    inFlight = handle;
+    void handle.finished.then(() => {
+      if (inFlight === handle && visible === false) {
+        wrapper.style.visibility = "hidden";
+      }
+    });
+  };
+  const evaluate = (animate) => {
+    if (deps.isDestroyed()) return;
+    applyVisibility(shouldShow(deps.getState()), animate);
+  };
+  const offs = [
+    deps.on("snap", () => evaluate(true)),
+    deps.on("open", () => evaluate(true)),
+    deps.on("close", () => evaluate(true))
+  ];
+  evaluate(false);
+  return {
+    wrapper,
+    detach: () => {
+      offs.forEach((off) => off());
+      inFlight?.cancel();
+      inFlight = null;
+      if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
+    },
+    syncZ: (z) => {
+      wrapper.style.zIndex = String(z);
+    }
+  };
+}
+var init_sheet_anchors = __esm({
+  "src/core/features/sheet-anchors.ts"() {
+    init_overlay_position();
+    init_anchor_animations();
+  }
+});
+
+// src/core/features/scrim-stages.ts
+function installScrimStages(deps, opts) {
+  const doc = deps.host.ownerDocument;
+  const entries = opts.stages.map((def) => {
+    const wrapper = doc.createElement("div");
+    wrapper.className = "bs-scrim-stage";
+    const ws = wrapper.style;
+    ws.position = "absolute";
+    applyOverlayPosition(
+      ws,
+      deps.mode,
+      def.position ?? opts.position ?? "center",
+      def.inset ?? opts.inset ?? "16px"
+    );
+    ws.visibility = "hidden";
+    ws.pointerEvents = "none";
+    wrapper.appendChild(def.element);
+    deps.host.appendChild(wrapper);
+    return { def, wrapper, inFlight: null };
+  });
+  let active = null;
+  const resolveActive = () => {
+    const state = deps.getState();
+    if (state.size === 0) {
+      return entries.find((e) => matchesId(e.def, state.activeId)) ?? null;
+    }
+    return entries.find((e) => matchesId(e.def, state.activeId)) ?? entries.find((e) => matchesRange(e.def, state.progress)) ?? null;
+  };
+  const hide = (entry, animate) => {
+    entry.inFlight?.cancel();
+    entry.wrapper.style.pointerEvents = "none";
+    if (!animate) {
+      entry.inFlight = null;
+      entry.wrapper.style.visibility = "hidden";
+      return;
+    }
+    const handle = runAnchorTransition(
+      entry.def.element,
+      entry.def.animation ?? opts.animation,
+      "exit"
+    );
+    entry.inFlight = handle;
+    void handle.finished.then(() => {
+      if (entry.inFlight === handle && active !== entry) {
+        entry.wrapper.style.visibility = "hidden";
+      }
+    });
+  };
+  const show = (entry, animate) => {
+    entry.inFlight?.cancel();
+    entry.inFlight = null;
+    entry.wrapper.style.visibility = "";
+    entry.wrapper.style.pointerEvents = entry.def.interactive ?? opts.interactive ?? false ? "auto" : "none";
+    if (animate) {
+      entry.inFlight = runAnchorTransition(
+        entry.def.element,
+        entry.def.animation ?? opts.animation,
+        "enter"
+      );
+    }
+  };
+  const update = (animate) => {
+    if (deps.isDestroyed()) return;
+    const next = resolveActive();
+    if (next === active) return;
+    const prev = active;
+    active = next;
+    if (prev) hide(prev, animate);
+    if (next) show(next, animate);
+  };
+  const offs = [
+    deps.on("snap", () => update(true)),
+    deps.on("open", () => update(true)),
+    deps.on("close", () => update(true))
+  ];
+  if (entries.some((e) => e.def.forRange)) {
+    offs.push(deps.on("progress", () => update(true)));
+  }
+  update(false);
+  return () => {
+    offs.forEach((off) => off());
+    for (const entry of entries) {
+      entry.inFlight?.cancel();
+      entry.inFlight = null;
+      if (entry.wrapper.parentNode) {
+        entry.wrapper.parentNode.removeChild(entry.wrapper);
+      }
+    }
+    active = null;
+  };
+}
+var matchesId, matchesRange;
+var init_scrim_stages = __esm({
+  "src/core/features/scrim-stages.ts"() {
+    init_overlay_position();
+    init_anchor_animations();
+    matchesId = (def, activeId) => {
+      if (def.for === void 0) return false;
+      return Array.isArray(def.for) ? def.for.includes(activeId) : def.for === activeId;
+    };
+    matchesRange = (def, progress) => {
+      if (!def.forRange) return false;
+      const [from, to] = def.forRange;
+      return progress >= from && progress <= to;
+    };
+  }
+});
+
 // src/core/primitives/engine-options.ts
 function resolveEngineOptions(opts, extras) {
   const initialAllowed = opts.allowed ?? opts.snapPoints.map((p) => p.id);
@@ -2085,6 +2466,8 @@ var init_BottomSheetEngine = __esm({
     init_aria_slider_writer();
     init_hot_path_thresholds();
     init_scroll_cache();
+    init_sheet_anchors();
+    init_scrim_stages();
     init_engine_options();
     init_opacity_dedup();
     HAPTIC_DURATION_MS = 8;
@@ -2153,6 +2536,12 @@ var init_BottomSheetEngine = __esm({
         __publicField(this, "linkedSheets", []);
         __publicField(this, "scrollCache");
         __publicField(this, "teardowns", new TeardownStack());
+        __publicField(this, "anchors", []);
+        __publicField(this, "anchorHost", null);
+        __publicField(this, "stackZ", 100);
+        __publicField(this, "detachScrimStages", null);
+        __publicField(this, "stackEffectEnabled", false);
+        __publicField(this, "stackEffectPrimed", false);
         __publicField(this, "transformTemplate");
         const resolved = resolveEngineOptions(opts, {
           shouldApplyInertSiblings: () => {
@@ -2186,6 +2575,9 @@ var init_BottomSheetEngine = __esm({
             getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
             snapTo: (id) => {
               void this.snapTo(id);
+            },
+            close: () => {
+              void this.close();
             }
           },
           resolved.scrim
@@ -2209,6 +2601,7 @@ var init_BottomSheetEngine = __esm({
         );
         this.closeOnBack = resolved.closeOnBack;
         this.routedTo = opts.routedTo;
+        this.stackEffectEnabled = opts.stackEffect ?? false;
         this.snapPointsRaw = opts.snapPoints;
         this.persistKey = opts.persistKey;
         if (opts.linkedSheets) {
@@ -2221,7 +2614,7 @@ var init_BottomSheetEngine = __esm({
           this.snapPointsRaw,
           resolved.initialAllowed,
           this.mode,
-          () => this.handle.offsetHeight,
+          () => layoutAxis(this.mode) === "width" ? this.handle.offsetWidth : this.handle.offsetHeight,
           (maxAxisSize) => {
             this.element.style[layoutAxis(this.mode)] = `${maxAxisSize}px`;
           }
@@ -2431,11 +2824,6 @@ var init_BottomSheetEngine = __esm({
       }
       setAllowed(ids, snap) {
         if (this.destroyed) return;
-        const willSnap = snap !== void 0 && ids.includes(snap) || !ids.includes(this.activeId) && ids.length > 0;
-        if (!willSnap) {
-          this.animation.cancel();
-          this.newCycle();
-        }
         this.snaps.setAllowedIds(ids);
         this.updateAriaSlider();
         if (snap && ids.includes(snap)) {
@@ -2475,6 +2863,79 @@ var init_BottomSheetEngine = __esm({
       setScrimOverlay(opts) {
         return this.scrim.setScrimOverlay(opts);
       }
+      addAnchor(opts) {
+        if (this.destroyed || typeof document === "undefined") return () => {
+        };
+        if (!this.anchorHost) {
+          this.anchorHost = this.rootEl ?? this.element.parentElement ?? document.body;
+          this.anchorHost.style.setProperty("--bs-size", `${this.size}px`);
+          this.anchorHost.style.setProperty(
+            "--bs-progress",
+            String(this.computeProgress(this.size))
+          );
+        }
+        const handle = attachAnchor(
+          {
+            mode: this.mode,
+            host: this.anchorHost,
+            getState: () => ({
+              activeId: this.activeId,
+              size: this.size,
+              progress: this.computeProgress(this.size)
+            }),
+            on: (event, fn) => this.on(event, fn),
+            isDestroyed: () => this.destroyed
+          },
+          opts
+        );
+        handle.syncZ(this.stackZ + 1);
+        this.anchors.push(handle);
+        const detach = () => {
+          const idx = this.anchors.indexOf(handle);
+          if (idx === -1) return;
+          this.anchors.splice(idx, 1);
+          handle.detach();
+        };
+        this.teardowns.add(detach);
+        return detach;
+      }
+      setScrimStages(opts) {
+        if (this.destroyed || typeof document === "undefined") return () => {
+        };
+        this.detachScrimStages?.();
+        this.detachScrimStages = null;
+        if (!opts) return () => {
+        };
+        const host = this.screenComponent?.parentElement;
+        if (!host) {
+          console.warn(
+            "[BottomSheet] setScrimStages: no scrim element mounted \u2014 pass `scrim` to the engine first."
+          );
+          return () => {
+          };
+        }
+        const detachInstalled = installScrimStages(
+          {
+            mode: this.mode,
+            host,
+            getState: () => ({
+              activeId: this.activeId,
+              size: this.size,
+              progress: this.computeProgress(this.size)
+            }),
+            on: (event, fn) => this.on(event, fn),
+            isDestroyed: () => this.destroyed
+          },
+          opts
+        );
+        const detach = () => {
+          if (this.detachScrimStages === detach) this.detachScrimStages = null;
+          detachInstalled();
+        };
+        this.detachScrimStages = detach;
+        this.teardowns.add(() => this.detachScrimStages?.());
+        return detach;
+      }
       getScrimState() {
         return { mode: this.scrim.scrimMode, enabled: this.scrim.scrimEnabled };
       }
@@ -2561,24 +3022,45 @@ var init_BottomSheetEngine = __esm({
       getAllowedRange() {
         return this.snaps.getAllowedRange();
       }
+      allowedIdsBySize() {
+        return this.snaps.getAllowedIds().slice().sort(
+          (a, b) => (this.snaps.findById(a)?.size ?? 0) - (this.snaps.findById(b)?.size ?? 0)
+        );
+      }
       updateAriaSlider() {
-        this.aria.setValue(this.snaps.getAllowedIds(), this.activeId);
+        this.aria.setValue(this.allowedIdsBySize(), this.activeId);
       }
       registerInStack() {
         this.teardowns.add(sheetStack.push({
           id: this.id,
           setZIndex: (z) => {
+            this.stackZ = z;
             this.element.style.zIndex = String(z);
             if (this.backdrop) this.backdrop.style.zIndex = String(z - 1);
+            for (const anchor of this.anchors) anchor.syncZ(z + 1);
           },
           setIsTop: (isTop) => {
             this.isTopSheet = isTop;
             if (this.backdrop) {
               this.backdrop.style.display = isTop ? "" : "none";
             }
-          }
+          },
+          isOpen: () => this.size > 0,
+          setDepth: (depth) => this.applyStackDepth(depth)
         }));
       }
+      applyStackDepth(depth) {
+        if (!this.stackEffectEnabled) return;
+        this.element.setAttribute("data-stack-depth", String(depth));
+        if (!this.stackEffectPrimed) {
+          this.stackEffectPrimed = true;
+          const isVertical = this.mode === "bottom" || this.mode === "top";
+          this.element.style.transformOrigin = isVertical ? "50% 100%" : "0% 50%";
+          this.element.style.transition = "scale 320ms cubic-bezier(0.29, 1.04, 0.84, 0.99)";
+        }
+        const scale = Math.max(1 - depth * 0.04, 0.86);
+        this.element.style.scale = scale === 1 ? "" : String(scale);
+      }
       attach() {
         this.gesture = new GestureController({
           handle: this.handle,
@@ -2638,7 +3120,7 @@ var init_BottomSheetEngine = __esm({
             container: this.scrollContainer,
             isDragging: () => this.gesture?.isDragging ?? false,
             isAnimating: () => this.animation.isAnimating,
-            getAllowedIds: () => this.snaps.getAllowedIds(),
+            getAllowedIds: () => this.allowedIdsBySize(),
             getActiveId: () => this.activeId,
             snapTo: (id) => {
               void this.snapTo(id);
@@ -2667,11 +3149,13 @@ var init_BottomSheetEngine = __esm({
             },
             newCycle: () => {
               this.newCycle();
-            }
+            },
+            isAnimating: () => this.animation.isAnimating,
+            resyncAfterCancel: () => this.resyncAfterResize()
           }));
           if (this.lifecycle.closeOnEscape) {
             const onKey = (e) => {
-              if (this.destroyed) return;
+              if (this.destroyed || e.defaultPrevented) return;
               if (e.key === "Escape" && this.isTopSheet && this.size > 0) {
                 void this.close();
               }
@@ -2703,7 +3187,7 @@ var init_BottomSheetEngine = __esm({
           handle: this.handle,
           mode: this.mode,
           isDestroyed: () => this.destroyed,
-          getAllowedIds: () => this.snaps.getAllowedIds(),
+          getAllowedIds: () => this.allowedIdsBySize(),
           getActiveId: () => this.activeId,
           snapTo: (id) => {
             void this.snapTo(id);
@@ -2724,6 +3208,7 @@ var init_BottomSheetEngine = __esm({
         });
         if (!target) return;
         const previousId = this.activeId;
+        if (target.id === previousId && target.size === this.size) return;
         if (this.emitBeforeSnap(target, previousId)) {
           const restore = this.snaps.findById(previousId);
           if (restore) {
@@ -2732,6 +3217,7 @@ var init_BottomSheetEngine = __esm({
           return;
         }
         const previousSize = this.size;
+        const previousSnapSize = this.snaps.findById(previousId)?.size;
         this.scrollCache.cache(previousId, previousSize, target.size);
         this.activeId = target.id;
         void this.animation.animateTo(target.size, velocity).then(() => {
@@ -2740,9 +3226,10 @@ var init_BottomSheetEngine = __esm({
           this.updateAriaSlider();
           this.emit("snap", { id: target.id, size: target.size });
           this.haptic();
-          if (previousId === "closed" && target.size > 0) {
+          if (previousSnapSize === 0 && target.size > 0) {
             this.emit("open", { id: target.id });
             this.handleOpen();
+            notifyLinkedSheets(this.linkedSheets, this);
           }
           if (target.size === 0) {
             this.emit("close", void 0);
@@ -2768,6 +3255,9 @@ var init_BottomSheetEngine = __esm({
           if (this.scrimParent) {
             this.scrimParent.style.setProperty("--bs-size", `${size}px`);
           }
+          if (this.anchorHost && this.anchorHost !== this.scrimParent) {
+            this.anchorHost.style.setProperty("--bs-size", `${size}px`);
+          }
         }
         const progress = this.computeProgress(size);
         const progressChanged = this.progressWriteSentinel.shouldWrite(
@@ -2776,6 +3266,9 @@ var init_BottomSheetEngine = __esm({
         );
         if (progressChanged) {
           style.setProperty("--bs-progress", String(progress));
+          if (this.anchorHost) {
+            this.anchorHost.style.setProperty("--bs-progress", String(progress));
+          }
         }
         this.scrim.applyOpacity(progress, progressChanged);
         if (progressChanged && this.bus.listenerCount("progress") > 0) {
@@ -2790,6 +3283,7 @@ var init_BottomSheetEngine = __esm({
         return Math.min(Math.max((size - min) / (max - min), 0), 1);
       }
       handleOpen() {
+        sheetStack.promote(this.id);
         try {
           this.lifecycle.install();
         } catch (err) {
@@ -2803,8 +3297,24 @@ var init_BottomSheetEngine = __esm({
           });
         }
       }
+      resyncAfterResize() {
+        if (this.destroyed) return;
+        const target = this.snaps.findById(this.activeId);
+        if (!target) return;
+        this.updateAriaSlider();
+        this.emit("snap", { id: target.id, size: target.size });
+        if (target.size > 0 && !this.lifecycle.isInstalled) {
+          this.emit("open", { id: target.id });
+          this.handleOpen();
+          notifyLinkedSheets(this.linkedSheets, this);
+        } else if (target.size === 0 && this.lifecycle.isInstalled) {
+          this.emit("close", void 0);
+          this.handleClose();
+        }
+      }
       handleClose() {
         this.lifecycle.release();
+        sheetStack.update();
       }
     };
   }
@@ -2814,7 +3324,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;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}}`;
+    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}}`;
   }
 });
 
@@ -2824,7 +3334,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, isValidSnapPoint, DEFAULT_SNAP_POINTS, parseSnapPoints, VALID_MODES, VALID_ANIMATIONS, parseMode, parseAnimation, parseList, buildSlot, buildShadowTree; exports.BottomSheetElement = void 0; var registered; 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, 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 init_BottomSheetElement = __esm({
   "src/web-component/BottomSheetElement.ts"() {
     init_BottomSheetEngine();
@@ -2839,6 +3349,8 @@ var init_BottomSheetElement = __esm({
     ATTR_FOCUS_TRAP = "focus-trap";
     ATTR_CLOSE_ON_ESCAPE = "close-on-escape";
     ATTR_LOCK_BODY_SCROLL = "lock-body-scroll";
+    ATTR_SHEET_LABEL = "sheet-label";
+    ATTR_STACK_EFFECT = "stack-effect";
     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) => {
@@ -2868,6 +3380,44 @@ 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;
+    ANCHOR_POSITIONS = [
+      "top-left",
+      "top-center",
+      "top-right",
+      "center-left",
+      "center",
+      "center-right",
+      "bottom-left",
+      "bottom-center",
+      "bottom-right",
+      "sheet-top-left",
+      "sheet-top-center",
+      "sheet-top-right",
+      "dock-bottom",
+      "dock-top"
+    ];
+    ANCHOR_ANIMATIONS = [
+      "fade",
+      "scale",
+      "slide",
+      "pop",
+      "none"
+    ];
+    parseAnchorOptions = (el) => {
+      const position = el.getAttribute("data-position");
+      const animation = el.getAttribute("data-animation");
+      const showOn = parseList(el.getAttribute("data-show-on"));
+      const fadeRangeRaw = parseList(el.getAttribute("data-fade-range"));
+      const fadeRange = fadeRangeRaw?.length === 2 && fadeRangeRaw.every((v) => Number.isFinite(Number(v))) ? [Number(fadeRangeRaw[0]), Number(fadeRangeRaw[1])] : void 0;
+      return {
+        position: position && ANCHOR_POSITIONS.includes(position) ? position : void 0,
+        inset: el.getAttribute("data-inset") ?? void 0,
+        showOn,
+        fadeRange,
+        interactive: el.getAttribute("data-interactive") !== "false",
+        animation: animation && ANCHOR_ANIMATIONS.includes(animation) ? animation : void 0
+      };
+    };
     buildSlot = (name) => {
       const slot = document.createElement("slot");
       slot.name = name;
@@ -2937,7 +3487,9 @@ var init_BottomSheetElement = __esm({
         }
       };
     };
-    exports.BottomSheetElement = class extends HTMLElement {
+    BaseHTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+    };
+    exports.BottomSheetElement = class extends BaseHTMLElement {
       constructor() {
         super();
         __publicField(this, "engine", null);
@@ -2945,17 +3497,12 @@ var init_BottomSheetElement = __esm({
         __publicField(this, "offHandlers", []);
         __publicField(this, "refs");
         __publicField(this, "backdropClickHandler", null);
+        __publicField(this, "stylesheetLinked", false);
+        __publicField(this, "declarativeAnchors", []);
         this.root = this.attachShadow({ mode: "open" });
         const baseStyle = document.createElement("style");
         baseStyle.textContent = baseStyles;
         this.root.appendChild(baseStyle);
-        const stylesheet = this.getAttribute(ATTR_STYLESHEET);
-        if (stylesheet) {
-          const link = document.createElement("link");
-          link.rel = "stylesheet";
-          link.href = stylesheet;
-          this.root.appendChild(link);
-        }
         const inlineStyle = document.createElement("style");
         inlineStyle.textContent = [
           ":host { display: contents; }",
@@ -2983,10 +3530,22 @@ var init_BottomSheetElement = __esm({
           ATTR_ANIMATION,
           ATTR_FOCUS_TRAP,
           ATTR_CLOSE_ON_ESCAPE,
-          ATTR_LOCK_BODY_SCROLL
+          ATTR_LOCK_BODY_SCROLL,
+          ATTR_SHEET_LABEL,
+          ATTR_STACK_EFFECT
         ];
       }
       connectedCallback() {
+        if (!this.stylesheetLinked) {
+          this.stylesheetLinked = true;
+          const stylesheet = this.getAttribute(ATTR_STYLESHEET);
+          if (stylesheet) {
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = stylesheet;
+            this.root.appendChild(link);
+          }
+        }
         this.initEngine();
       }
       disconnectedCallback() {
@@ -3009,6 +3568,10 @@ var init_BottomSheetElement = __esm({
         }
         this.engine?.destroy();
         this.engine = null;
+        for (const el of this.declarativeAnchors) {
+          this.appendChild(el);
+        }
+        this.declarativeAnchors = [];
       }
       initEngine() {
         const { sheet, handle, content, backdrop, announcer } = this.refs;
@@ -3020,6 +3583,10 @@ var init_BottomSheetElement = __esm({
         } else {
           sheet.removeAttribute("aria-modal");
         }
+        sheet.setAttribute(
+          "aria-label",
+          this.getAttribute(ATTR_SHEET_LABEL) ?? "Bottom sheet"
+        );
         const showBackdrop = this.getAttribute(ATTR_BACKDROP) !== "false";
         backdrop.style.display = showBackdrop ? "" : "none";
         if (showBackdrop) {
@@ -3039,11 +3606,20 @@ var init_BottomSheetElement = __esm({
           animation: parseAnimation(this.getAttribute(ATTR_ANIMATION)),
           focusTrap,
           closeOnEscape: this.getAttribute(ATTR_CLOSE_ON_ESCAPE) !== "false",
-          lockBodyScroll: this.getAttribute(ATTR_LOCK_BODY_SCROLL) !== "false"
+          lockBodyScroll: this.getAttribute(ATTR_LOCK_BODY_SCROLL) !== "false",
+          stackEffect: this.getAttribute(ATTR_STACK_EFFECT) === "true"
         };
         this.engine = new BottomSheetEngine(opts);
+        sheet.setAttribute("data-active", this.engine.state.activeId);
+        for (const el of Array.from(
+          this.querySelectorAll('[slot="anchor"]')
+        )) {
+          this.declarativeAnchors.push(el);
+          this.engine.addAnchor({ ...parseAnchorOptions(el), element: el });
+        }
         this.offHandlers = [
           this.engine.on("snap", (payload) => {
+            sheet.setAttribute("data-active", payload.id);
             announcer.textContent = payload.id;
             this.dispatchEvent(new CustomEvent("snap", { detail: payload }));
           }),
@@ -3073,15 +3649,22 @@ var init_BottomSheetElement = __esm({
       setAllowed(ids, snap) {
         this.engine?.setAllowed(ids, snap);
       }
+      addAnchor(opts) {
+        return this.engine?.addAnchor(opts) ?? (() => {
+        });
+      }
+      setScrimStages(opts) {
+        return this.engine?.setScrimStages(opts) ?? (() => {
+        });
+      }
       get sheetState() {
         return this.engine?.state ?? null;
       }
     };
-    registered = false;
     exports.defineBottomSheet = (tag = "bottom-sheet") => {
-      if (registered || customElements.get(tag)) return;
-      customElements.define(tag, exports.BottomSheetElement);
-      registered = true;
+      if (typeof customElements === "undefined" || customElements.get(tag)) return;
+      customElements.define(tag, class extends exports.BottomSheetElement {
+      });
     };
   }
 });