@surdeddd/bottom-sheet 0.1.0

package/dist/overlay.cjs

@@ -0,0 +1,1058 @@
+'use strict';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/core/lifecycle/sheetStack.ts
+var BASE_Z = 100;
+var STEP = 10;
+var SheetStack = class {
+  constructor() {
+    __publicField(this, "entries", []);
+  }
+  push(entry) {
+    this.entries.push(entry);
+    this.recompute();
+    return () => this.remove(entry.id);
+  }
+  remove(id) {
+    const idx = this.entries.findIndex((e) => e.id === id);
+    if (idx === -1) return;
+    this.entries.splice(idx, 1);
+    this.recompute();
+  }
+  size() {
+    return this.entries.length;
+  }
+  clear() {
+    this.entries = [];
+  }
+  recompute() {
+    this.entries.forEach((entry, i) => {
+      entry.setZIndex(BASE_Z + i * STEP);
+      entry.setIsTop(i === this.entries.length - 1);
+    });
+  }
+};
+var sheetStack = new SheetStack();
+
+// src/core/primitives/transform.ts
+var CLOSED_TRANSFORM = {
+  bottom: "translate3d(0, 100%, 0)",
+  top: "translate3d(0, -100%, 0)",
+  left: "translate3d(-100%, 0, 0)",
+  right: "translate3d(100%, 0, 0)"
+};
+
+// src/core/primitives/cssLength.ts
+var probe = null;
+var PROBE_ATTR = "data-bs-probe";
+var ensureProbe = (axis) => {
+  if (typeof document === "undefined") return null;
+  if (!probe || !probe.isConnected) {
+    const existing = document.querySelector(`[${PROBE_ATTR}]`);
+    if (existing) {
+      probe = existing;
+    } else {
+      probe = document.createElement("div");
+      probe.setAttribute("aria-hidden", "true");
+      probe.setAttribute(PROBE_ATTR, "");
+      probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;contain:strict;left:0;top:0;width:0;height:0;";
+      document.body.appendChild(probe);
+    }
+  }
+  {
+    probe.style.width = "0";
+    probe.style.height = "";
+  }
+  return probe;
+};
+var viewportSize = (mode) => {
+  if (typeof window === "undefined") return 0;
+  return window.innerHeight ;
+};
+var PERCENT = /^(-?\d+(?:\.\d+)?)%$/;
+var resolveSnap = (point, mode, measureFit) => {
+  if (typeof point === "number") return Math.max(0, point);
+  if (point === "full") return viewportSize();
+  if (point === "fit") return Math.max(0, 0);
+  const pctMatch = point.match(PERCENT);
+  if (pctMatch) {
+    const pct = parseFloat(pctMatch[1]) / 100;
+    return Math.max(0, viewportSize() * pct);
+  }
+  const el = ensureProbe();
+  if (!el) return 0;
+  {
+    el.style.height = point;
+    return Math.max(0, el.getBoundingClientRect().height);
+  }
+};
+
+// src/core/primitives/instance-id.ts
+var counters = {};
+function nextInstanceId(prefix) {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return `${prefix}-${crypto.randomUUID()}`;
+  }
+  counters[prefix] = (counters[prefix] ?? 0) + 1;
+  return `${prefix}-${counters[prefix]}`;
+}
+
+// src/core/primitives/event-bus.ts
+function createEventBus() {
+  const listeners = /* @__PURE__ */ new Map();
+  return {
+    on(event, fn) {
+      let set = listeners.get(event);
+      if (!set) {
+        set = /* @__PURE__ */ new Set();
+        listeners.set(event, set);
+      }
+      set.add(fn);
+      return () => {
+        set.delete(fn);
+      };
+    },
+    emit(event, payload) {
+      const set = listeners.get(event);
+      if (!set) return;
+      for (const fn of [...set]) {
+        fn(payload);
+      }
+    },
+    listenerCount(event) {
+      return listeners.get(event)?.size ?? 0;
+    },
+    clear() {
+      listeners.clear();
+    }
+  };
+}
+
+// src/core/lifecycle/focusTrap.ts
+var FOCUSABLE = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "object",
+  "embed",
+  "[contenteditable='true']",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var isVisible = (el) => {
+  if (typeof el.checkVisibility === "function") {
+    return el.checkVisibility({ checkOpacity: false, checkVisibilityCSS: true });
+  }
+  return el.offsetParent !== null;
+};
+var focusables = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter(
+  (el) => !el.hasAttribute("inert") && isVisible(el) && !el.matches("[aria-hidden='true']")
+);
+var installFocusTrap = (container, options = {}) => {
+  if (typeof document === "undefined") return () => {
+  };
+  const previouslyFocused = document.activeElement;
+  const focusInitial = () => {
+    const initial = typeof options.initialFocus === "string" ? container.querySelector(options.initialFocus) : options.initialFocus ?? focusables(container)[0] ?? container;
+    initial?.focus({ preventScroll: true });
+  };
+  focusInitial();
+  const handleKey = (e) => {
+    if (e.key === "Escape" && options.onEscape) {
+      options.onEscape();
+      return;
+    }
+    if (e.key !== "Tab") return;
+    const list = focusables(container);
+    if (list.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    const first = list[0];
+    const last = list[list.length - 1];
+    const active = document.activeElement;
+    if (e.shiftKey && active === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
+  const handleFocusIn = (e) => {
+    const target = e.target;
+    if (target && !container.contains(target)) {
+      const list = focusables(container);
+      list[0]?.focus({ preventScroll: true });
+    }
+  };
+  document.addEventListener("keydown", handleKey, true);
+  document.addEventListener("focusin", handleFocusIn, true);
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    document.removeEventListener("keydown", handleKey, true);
+    document.removeEventListener("focusin", handleFocusIn, true);
+    if (previouslyFocused && document.contains(previouslyFocused)) {
+      previouslyFocused.focus({ preventScroll: true });
+    } else {
+      const fallback = document.querySelector("[data-bs-restore-fallback]");
+      fallback?.focus({ preventScroll: true });
+    }
+  };
+};
+
+// src/core/lifecycle/scrollLock.ts
+var lockCount = 0;
+var savedStyles = null;
+var lockBodyScroll = () => {
+  if (typeof document === "undefined") return () => {
+  };
+  if (lockCount === 0) {
+    const body = document.body;
+    savedStyles = {
+      overflow: body.style.overflow,
+      position: body.style.position,
+      top: body.style.top,
+      width: body.style.width,
+      scrollY: window.scrollY
+    };
+    body.style.overflow = "hidden";
+    body.style.position = "fixed";
+    body.style.top = `-${savedStyles.scrollY}px`;
+    body.style.width = "100%";
+  }
+  lockCount++;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    lockCount = Math.max(0, lockCount - 1);
+    if (lockCount === 0 && savedStyles) {
+      const body = document.body;
+      body.style.overflow = savedStyles.overflow;
+      body.style.position = savedStyles.position;
+      body.style.top = savedStyles.top;
+      body.style.width = savedStyles.width;
+      window.scrollTo(0, savedStyles.scrollY);
+      savedStyles = null;
+    }
+  };
+};
+
+// src/core/features/inert-siblings.ts
+function createInertSiblings(rootProvider) {
+  const tracked = [];
+  return {
+    apply() {
+      if (typeof document === "undefined") return;
+      const root = rootProvider();
+      const parent = root.parentElement ?? document.body;
+      for (const child of Array.from(parent.children)) {
+        if (child === root) continue;
+        if (child.hasAttribute("inert")) continue;
+        child.setAttribute("inert", "");
+        tracked.push(child);
+      }
+    },
+    remove() {
+      for (const el of tracked) el.removeAttribute("inert");
+      tracked.length = 0;
+    }
+  };
+}
+
+// src/core/controllers/lifecycle-controller.ts
+var LifecycleController = class {
+  constructor(deps, opts) {
+    __publicField(this, "element");
+    __publicField(this, "closeFn");
+    __publicField(this, "focusTrapEnabled");
+    __publicField(this, "initialFocus");
+    __publicField(this, "closeOnEscape");
+    __publicField(this, "bodyScrollLockEnabled");
+    __publicField(this, "inertSiblingsEnabled");
+    __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;
+    this.closeFn = deps.close;
+    this.focusTrapEnabled = opts.focusTrap ?? false;
+    this.initialFocus = opts.initialFocus;
+    this.closeOnEscape = opts.closeOnEscape ?? true;
+    this.bodyScrollLockEnabled = opts.lockBodyScroll ?? true;
+    this.inertSiblingsEnabled = opts.inertSiblings ?? false;
+    this.shouldApplyInertSiblings = opts.shouldApplyInertSiblings ?? (() => true);
+    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;
+    if (this.bodyScrollLockEnabled && !this.releaseScrollLock) {
+      this.releaseScrollLock = lockBodyScroll();
+    }
+    if (this.focusTrapEnabled && !this.releaseFocusTrap) {
+      this.releaseFocusTrap = installFocusTrap(this.element, {
+        initialFocus: this.initialFocus,
+        onEscape: this.closeOnEscape ? () => void this.closeFn() : void 0
+      });
+    }
+    if (this.inertSiblingsEnabled && this.shouldApplyInertSiblings()) {
+      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;
+    this.releaseFocusTrap?.();
+    this.releaseFocusTrap = null;
+    this.releaseScrollLock?.();
+    this.releaseScrollLock = null;
+    this.inertSiblings.remove();
+    if (this.returnFocus) {
+      const target = typeof this.returnFocus === "function" ? this.returnFocus() : this.returnFocus;
+      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;
+  }
+};
+
+// src/core/overlay.ts
+var OVERLAY_PRESETS = Object.freeze({
+  sheet: Object.freeze({
+    enterAnimation: "slide",
+    exitAnimation: "slide",
+    backdropOpacity: 0.5,
+    backdropFilter: void 0,
+    swipeToClose: true
+  }),
+  dialog: Object.freeze({
+    enterAnimation: "scale",
+    exitAnimation: "scale",
+    backdropOpacity: 0.6,
+    backdropFilter: "blur(8px)",
+    swipeToClose: false
+  }),
+  sidebar: Object.freeze({
+    enterAnimation: "slide",
+    exitAnimation: "slide",
+    backdropOpacity: 0.4,
+    backdropFilter: void 0,
+    swipeToClose: true
+  }),
+  toast: Object.freeze({
+    enterAnimation: "fade",
+    exitAnimation: "fade",
+    backdropOpacity: 0,
+    backdropFilter: void 0,
+    swipeToClose: false
+  })
+});
+var closedTransform = (edge) => CLOSED_TRANSFORM[edge];
+var closedTransformFor = (edge, animation, peekPx) => {
+  switch (animation) {
+    case "fade":
+      return "translate3d(0, 0, 0)";
+    case "scale":
+      return "translate3d(0, 0, 0) scale(0.94)";
+    case "slide":
+    default:
+      if (peekPx !== void 0 && edge === "bottom") {
+        return `translate3d(0, calc(100% - ${peekPx}px), 0)`;
+      }
+      return closedTransform(edge);
+  }
+};
+var openTransformFor = (animation) => animation === "scale" ? "translate3d(0, 0, 0) scale(1)" : "translate3d(0, 0, 0)";
+var OverlayEngine = class {
+  constructor(opts) {
+    __publicField(this, "id", nextInstanceId("ovl"));
+    __publicField(this, "element");
+    __publicField(this, "backdrop");
+    __publicField(this, "edge");
+    __publicField(this, "closeOnEscape");
+    __publicField(this, "closeOnBackdropEnabled");
+    __publicField(this, "focusTrapEnabled");
+    __publicField(this, "initialFocus");
+    __publicField(this, "bodyScrollLockEnabled");
+    __publicField(this, "inertSiblingsEnabled");
+    __publicField(this, "closeOnBackEnabled");
+    __publicField(this, "duration");
+    __publicField(this, "enterEasing");
+    __publicField(this, "exitEasing");
+    __publicField(this, "backdropOpacity");
+    __publicField(this, "backdropFilter");
+    // Definite-assignment: written via assignSwipeFromConfig in the
+    // constructor — TS can't follow the helper, mark the assertion explicit.
+    __publicField(this, "swipeToCloseEnabled");
+    __publicField(this, "swipeThreshold");
+    __publicField(this, "swipeVelocityThreshold");
+    __publicField(this, "enterAnimation");
+    __publicField(this, "exitAnimation");
+    __publicField(this, "mountTarget");
+    __publicField(this, "originalParent", null);
+    __publicField(this, "originalNextSibling", null);
+    __publicField(this, "mounted", false);
+    __publicField(this, "peekRaw");
+    __publicField(this, "peekPx");
+    __publicField(this, "closeOnOutsidePointerEnabled");
+    __publicField(this, "detachOutsidePointer", null);
+    __publicField(this, "detachSwipe", null);
+    __publicField(this, "onOpenCb");
+    __publicField(this, "onCloseCb");
+    __publicField(this, "isOpen_", false);
+    __publicField(this, "isAnimating_", false);
+    __publicField(this, "destroyed", false);
+    // Tracks whether setOverlayChildren ever populated the panel — lets
+    // clearOverlayChildren skip the DOM mutation when nothing was injected
+    // (so the field also acts as a zero-allocation feature flag).
+    __publicField(this, "hasInjectedChildren", false);
+    // Bumped on every open/close. awaitTransition captures it and ignores
+    // transitionend/timeout fired by older cycles — prevents cross-cycle
+    // listener bleed during rapid toggling.
+    __publicField(this, "cycleNonce", 0);
+    __publicField(this, "bus", createEventBus());
+    __publicField(this, "detachEscape", null);
+    __publicField(this, "detachBackdrop", null);
+    __publicField(this, "detachHardwareBack", null);
+    __publicField(this, "releaseStackEntry", null);
+    __publicField(this, "lifecycle");
+    this.element = opts.element;
+    this.backdrop = opts.backdrop;
+    this.edge = opts.edge ?? "bottom";
+    this.closeOnEscape = opts.closeOnEscape ?? true;
+    this.closeOnBackdropEnabled = opts.closeOnBackdrop ?? true;
+    this.focusTrapEnabled = opts.focusTrap ?? true;
+    this.initialFocus = opts.initialFocus;
+    this.bodyScrollLockEnabled = opts.lockBodyScroll ?? true;
+    this.inertSiblingsEnabled = opts.inertSiblings ?? false;
+    this.closeOnBackEnabled = opts.closeOnBack ?? false;
+    this.duration = opts.duration ?? 320;
+    this.enterEasing = opts.enterEasing ?? "cubic-bezier(0.29, 1.24, 0.84, 0.99)";
+    this.exitEasing = opts.exitEasing ?? "cubic-bezier(0.4, 0, 1, 1)";
+    const preset = opts.preset ? OVERLAY_PRESETS[opts.preset] : void 0;
+    this.backdropOpacity = opts.backdropOpacity ?? preset?.backdropOpacity ?? 1;
+    this.backdropFilter = opts.backdropFilter ?? preset?.backdropFilter ?? void 0;
+    const swipeRaw = opts.swipeToClose !== void 0 ? opts.swipeToClose : preset?.swipeToClose;
+    this.assignSwipeFromConfig(swipeRaw);
+    this.enterAnimation = opts.enterAnimation ?? preset?.enterAnimation ?? "slide";
+    this.exitAnimation = opts.exitAnimation ?? preset?.exitAnimation ?? this.enterAnimation;
+    this.mountTarget = opts.mountTo;
+    this.peekRaw = opts.peek;
+    this.closeOnOutsidePointerEnabled = opts.closeOnOutsidePointer ?? false;
+    this.onOpenCb = opts.onOpen;
+    this.onCloseCb = opts.onClose;
+    if (this.peekRaw !== void 0 && this.edge !== "bottom") {
+      console.warn(
+        "[OverlayEngine] `peek` is only supported on edge: 'bottom' \u2014 ignoring."
+      );
+      this.peekRaw = void 0;
+    }
+    if (this.peekRaw !== void 0) {
+      this.peekPx = this.resolvePeekPx(this.peekRaw);
+    }
+    this.lifecycle = new LifecycleController(
+      {
+        element: this.element,
+        close: () => this.close("escape")
+      },
+      {
+        focusTrap: this.focusTrapEnabled,
+        initialFocus: this.initialFocus,
+        closeOnEscape: this.closeOnEscape,
+        lockBodyScroll: this.bodyScrollLockEnabled,
+        inertSiblings: this.inertSiblingsEnabled,
+        // Overlay-specific guard: only paint body siblings inert when the
+        // overlay element is actually a body descendant. Detached / shadow-
+        // DOM / portal overlays would otherwise lock unrelated trees.
+        shouldApplyInertSiblings: () => {
+          const bodyChildren = Array.from(document.body.children);
+          return bodyChildren.some(
+            (c) => c === this.element || c.contains(this.element)
+          );
+        },
+        returnFocus: opts.returnFocus
+      }
+    );
+    this.applyClosedStyles();
+    this.registerInStack();
+    if (opts.initialOpen) void this.open();
+  }
+  get state() {
+    return { isOpen: this.isOpen_, isAnimating: this.isAnimating_ };
+  }
+  on(event, fn) {
+    return this.bus.on(event, fn);
+  }
+  open() {
+    if (this.destroyed || this.isOpen_) return Promise.resolve();
+    this.maybeMount();
+    this.emit("before-open", void 0);
+    this.isOpen_ = true;
+    this.isAnimating_ = true;
+    this.element.removeAttribute("hidden");
+    this.element.setAttribute("data-state", "entering");
+    if (this.focusTrapEnabled) {
+      this.element.setAttribute("aria-modal", "true");
+    }
+    const transitionStr = `transform ${this.duration}ms ${this.enterEasing}, opacity ${this.duration}ms ease-out`;
+    this.element.style.transition = transitionStr;
+    if (this.backdrop) {
+      this.backdrop.style.transition = `opacity ${this.duration}ms ease-out`;
+    }
+    const cycle = ++this.cycleNonce;
+    return new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        if (this.destroyed || cycle !== this.cycleNonce) return resolve();
+        requestAnimationFrame(() => {
+          if (this.destroyed || cycle !== this.cycleNonce) return resolve();
+          this.element.style.transform = openTransformFor(this.enterAnimation);
+          this.element.style.opacity = "1";
+          if (this.backdrop) {
+            this.backdrop.style.opacity = String(this.backdropOpacity);
+            this.backdrop.style.pointerEvents = "auto";
+            if (this.backdropFilter) {
+              this.backdrop.style.backdropFilter = this.backdropFilter;
+              this.backdrop.style.webkitBackdropFilter = this.backdropFilter;
+            }
+          }
+          try {
+            this.installInteractiveListeners();
+          } catch (err) {
+            this.releaseInteractiveListeners();
+            this.isOpen_ = false;
+            this.isAnimating_ = false;
+            this.element.style.transform = closedTransformFor(
+              this.edge,
+              this.enterAnimation,
+              this.peekPx
+            );
+            this.element.style.opacity = "0";
+            if (this.backdrop) {
+              this.backdrop.style.opacity = "0";
+              this.backdrop.style.pointerEvents = "none";
+              if (this.backdropFilter) {
+                this.backdrop.style.backdropFilter = "";
+                this.backdrop.style.webkitBackdropFilter = "";
+              }
+            }
+            this.element.setAttribute("data-state", "closed");
+            this.element.setAttribute("hidden", "");
+            if (this.focusTrapEnabled) {
+              this.element.removeAttribute("aria-modal");
+            }
+            queueMicrotask(() => {
+              throw err;
+            });
+            return resolve();
+          }
+          this.awaitTransition(cycle).then(() => {
+            if (this.destroyed || cycle !== this.cycleNonce) return resolve();
+            this.isAnimating_ = false;
+            this.element.setAttribute("data-state", "open");
+            this.emit("open", void 0);
+            this.onOpenCb?.();
+            resolve();
+          });
+        });
+      });
+    });
+  }
+  close(reason = "programmatic") {
+    if (this.destroyed || !this.isOpen_) return Promise.resolve();
+    this.emit("before-close", void 0);
+    this.isOpen_ = false;
+    this.isAnimating_ = true;
+    this.element.setAttribute("data-state", "exiting");
+    const transitionStr = `transform ${this.duration}ms ${this.exitEasing}, opacity ${this.duration}ms ease-in`;
+    this.element.style.transition = transitionStr;
+    if (this.backdrop) {
+      this.backdrop.style.transition = `opacity ${this.duration}ms ease-in`;
+    }
+    const cycle = ++this.cycleNonce;
+    return new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        if (this.destroyed || cycle !== this.cycleNonce) return resolve();
+        this.element.style.transform = closedTransformFor(
+          this.edge,
+          this.exitAnimation,
+          this.peekPx
+        );
+        this.element.style.opacity = "0";
+        if (this.backdrop) {
+          this.backdrop.style.opacity = "0";
+          this.backdrop.style.pointerEvents = "none";
+          if (this.backdropFilter) {
+            this.backdrop.style.backdropFilter = "";
+            this.backdrop.style.webkitBackdropFilter = "";
+          }
+        }
+        this.releaseInteractiveListeners();
+        this.awaitTransition(cycle).then(() => {
+          if (this.destroyed || cycle !== this.cycleNonce) return resolve();
+          this.isAnimating_ = false;
+          if (this.peekPx === void 0) {
+            this.element.setAttribute("hidden", "");
+          }
+          this.element.setAttribute("data-state", "closed");
+          if (this.focusTrapEnabled) {
+            this.element.removeAttribute("aria-modal");
+          }
+          this.emit("close", { reason });
+          this.onCloseCb?.();
+          resolve();
+        });
+      });
+    });
+  }
+  toggle() {
+    if (this.destroyed) return Promise.resolve();
+    return this.isOpen_ ? this.close() : this.open();
+  }
+  destroy() {
+    this.destroyed = true;
+    this.cycleNonce++;
+    this.bus.clear();
+    this.releaseInteractiveListeners();
+    this.releaseStackEntry?.();
+    this.releaseStackEntry = null;
+    this.restoreMount();
+  }
+  /**
+   * Runtime visual setter — opacity is applied immediately when open so a
+   * live-controls panel can preview the change without re-opening. When
+   * closed we only stash the field; next open() picks it up so we don't
+   * mutate hidden DOM (avoids paint thrash on detached panels).
+   */
+  setBackdropOpacity(opacity) {
+    if (this.destroyed) return;
+    this.backdropOpacity = opacity;
+    if (this.isOpen_ && this.backdrop) {
+      this.backdrop.style.opacity = String(opacity);
+    }
+  }
+  /**
+   * Runtime visual setter for `backdrop-filter`. `undefined` clears the
+   * filter (mirrors the close() behaviour). Defers to next open() when the
+   * overlay is currently closed.
+   */
+  setBackdropFilter(filter) {
+    if (this.destroyed) return;
+    this.backdropFilter = filter;
+    if (!this.isOpen_ || !this.backdrop) return;
+    const style = this.backdrop.style;
+    if (filter) {
+      this.backdrop.style.backdropFilter = filter;
+      style.webkitBackdropFilter = filter;
+    } else {
+      this.backdrop.style.backdropFilter = "";
+      style.webkitBackdropFilter = "";
+    }
+  }
+  /**
+   * Toggle / reconfigure swipe-to-close at runtime. Re-resolves the flat
+   * threshold fields, then installs or tears down the pointer listener so
+   * the change applies to the CURRENT open cycle. Idempotent: safe to call
+   * with the same config repeatedly.
+   */
+  setSwipeToClose(config) {
+    if (this.destroyed) return;
+    const wasEnabled = this.swipeToCloseEnabled;
+    this.assignSwipeFromConfig(config);
+    if (!this.isOpen_) return;
+    if (this.swipeToCloseEnabled && !this.detachSwipe) {
+      this.detachSwipe = this.installSwipeToClose();
+    } else if (!this.swipeToCloseEnabled && wasEnabled && this.detachSwipe) {
+      this.detachSwipe();
+      this.detachSwipe = null;
+    }
+  }
+  /** Animation setters only stage the field — applied on next open/close. */
+  setEnterAnimation(animation) {
+    if (this.destroyed) return;
+    this.enterAnimation = animation;
+  }
+  setExitAnimation(animation) {
+    if (this.destroyed) return;
+    this.exitAnimation = animation;
+  }
+  /** Updates the field used at next close() — no immediate side effect. */
+  setReturnFocus(target) {
+    if (this.destroyed) return;
+    this.lifecycle.setReturnFocus(target);
+  }
+  /**
+   * Batch update — preset first, then individual overrides. Applied as a
+   * single DOM-write phase when open so live-controls don't trigger
+   * cascading reflows. Safe to call when closed (defers to next open).
+   */
+  setOverlay(opts) {
+    if (this.destroyed) return;
+    const preset = opts.preset ? OVERLAY_PRESETS[opts.preset] : void 0;
+    const merged = preset ? {
+      backdropOpacity: preset.backdropOpacity,
+      // Preset's `undefined` filter means "no filter" — surface as null
+      // so the merged step clears the field instead of inheriting old.
+      backdropFilter: preset.backdropFilter === void 0 ? null : preset.backdropFilter,
+      swipeToClose: preset.swipeToClose,
+      enterAnimation: preset.enterAnimation,
+      exitAnimation: preset.exitAnimation
+    } : {};
+    if (opts.backdropOpacity !== void 0) {
+      merged.backdropOpacity = opts.backdropOpacity;
+    }
+    if (opts.backdropFilter !== void 0) {
+      merged.backdropFilter = opts.backdropFilter;
+    }
+    if (opts.swipeToClose !== void 0) {
+      merged.swipeToClose = opts.swipeToClose;
+    }
+    if (opts.enterAnimation !== void 0) {
+      merged.enterAnimation = opts.enterAnimation;
+    }
+    if (opts.exitAnimation !== void 0) {
+      merged.exitAnimation = opts.exitAnimation;
+    }
+    if (merged.enterAnimation !== void 0) {
+      this.enterAnimation = merged.enterAnimation;
+    }
+    if (merged.exitAnimation !== void 0) {
+      this.exitAnimation = merged.exitAnimation;
+    }
+    if (merged.swipeToClose !== void 0) {
+      this.setSwipeToClose(merged.swipeToClose);
+    }
+    if (merged.backdropOpacity !== void 0) {
+      this.backdropOpacity = merged.backdropOpacity;
+    }
+    if (merged.backdropFilter !== void 0) {
+      this.backdropFilter = merged.backdropFilter === null ? void 0 : merged.backdropFilter;
+    }
+    if (this.isOpen_ && this.backdrop) {
+      if (merged.backdropOpacity !== void 0) {
+        this.backdrop.style.opacity = String(this.backdropOpacity);
+      }
+      if (merged.backdropFilter !== void 0) {
+        const style = this.backdrop.style;
+        if (this.backdropFilter) {
+          this.backdrop.style.backdropFilter = this.backdropFilter;
+          style.webkitBackdropFilter = this.backdropFilter;
+        } else {
+          this.backdrop.style.backdropFilter = "";
+          style.webkitBackdropFilter = "";
+        }
+      }
+    }
+    if (opts.children !== void 0) {
+      if (opts.children === null) {
+        this.clearOverlayChildren();
+      } else {
+        this.setOverlayChildren(opts.children);
+      }
+    }
+  }
+  /**
+   * Runtime children injection — replace the panel's contents without
+   * unmounting the engine. `replaceChildren()` is a single atomic DOM op,
+   * so callers can swap content rapidly without intermediate flicker.
+   * Function form is resolved exactly ONCE per call (cheap lazy content).
+   */
+  setOverlayChildren(children) {
+    if (this.destroyed) return;
+    const node = typeof children === "function" ? children() : children;
+    this.element.replaceChildren(node);
+    this.hasInjectedChildren = true;
+  }
+  /**
+   * Clear injected children. No-op when nothing was injected so consumers
+   * who never used setOverlayChildren can call this defensively without
+   * paying for a DOM mutation.
+   */
+  clearOverlayChildren() {
+    if (this.destroyed || !this.hasInjectedChildren) return;
+    this.element.replaceChildren();
+    this.hasInjectedChildren = false;
+  }
+  // Shared swipe-config normalizer — used by constructor, setSwipeToClose,
+  // and setOverlay so the union/object shape is decoded in exactly one place.
+  assignSwipeFromConfig(swipe) {
+    if (typeof swipe === "object" && swipe !== null) {
+      this.swipeToCloseEnabled = swipe.enabled ?? true;
+      this.swipeThreshold = swipe.threshold ?? 0.3;
+      this.swipeVelocityThreshold = swipe.velocityThreshold ?? 0.5;
+    } else {
+      this.swipeToCloseEnabled = swipe ?? false;
+      this.swipeThreshold = 0.3;
+      this.swipeVelocityThreshold = 0.5;
+    }
+  }
+  emit(event, payload) {
+    this.bus.emit(event, payload);
+  }
+  resolvePeekPx(raw) {
+    if (typeof raw === "number") return Math.max(0, raw);
+    try {
+      return Math.max(0, resolveSnap(raw, "bottom"));
+    } catch {
+      return 0;
+    }
+  }
+  maybeMount() {
+    if (this.mounted || !this.mountTarget || this.mountTarget === "parent") {
+      this.mounted = true;
+      return;
+    }
+    const target = this.mountTarget === "body" ? document.body : this.mountTarget;
+    if (!target) {
+      this.mounted = true;
+      return;
+    }
+    this.originalParent = this.element.parentNode;
+    this.originalNextSibling = this.element.nextSibling;
+    target.appendChild(this.element);
+    this.mounted = true;
+  }
+  restoreMount() {
+    if (!this.originalParent) return;
+    try {
+      if (this.originalNextSibling && this.originalNextSibling.parentNode === this.originalParent) {
+        this.originalParent.insertBefore(this.element, this.originalNextSibling);
+      } else {
+        this.originalParent.appendChild(this.element);
+      }
+    } catch {
+    }
+    this.originalParent = null;
+    this.originalNextSibling = null;
+  }
+  applyClosedStyles() {
+    this.element.style.willChange = "transform, opacity";
+    this.element.style.transform = closedTransformFor(
+      this.edge,
+      this.enterAnimation,
+      this.peekPx
+    );
+    this.element.style.opacity = this.peekPx !== void 0 ? "1" : "0";
+    if (this.peekPx === void 0) {
+      this.element.setAttribute("hidden", "");
+    }
+    this.element.setAttribute("data-state", "closed");
+    if (this.backdrop) {
+      this.backdrop.style.opacity = "0";
+      this.backdrop.style.pointerEvents = "none";
+      this.backdrop.style.willChange = "opacity";
+    }
+  }
+  awaitTransition(cycle) {
+    return new Promise((resolve) => {
+      let done = false;
+      const finish = () => {
+        if (done) return;
+        done = true;
+        this.element.removeEventListener("transitionend", onEnd);
+        clearTimeout(timer);
+        resolve();
+      };
+      const onEnd = (e) => {
+        if (cycle !== this.cycleNonce) {
+          finish();
+          return;
+        }
+        if (e.propertyName === "transform") finish();
+      };
+      this.element.addEventListener("transitionend", onEnd);
+      const timer = window.setTimeout(finish, this.duration + 50);
+    });
+  }
+  installInteractiveListeners() {
+    this.lifecycle.install();
+    if (this.swipeToCloseEnabled && !this.detachSwipe) {
+      this.detachSwipe = this.installSwipeToClose();
+    }
+    if (this.closeOnEscape && !this.detachEscape) {
+      const handler = (e) => {
+        if (e.key === "Escape" && this.isOpen_) void this.close("escape");
+      };
+      document.addEventListener("keydown", handler);
+      this.detachEscape = () => document.removeEventListener("keydown", handler);
+    }
+    if (this.closeOnBackdropEnabled && this.backdrop && !this.detachBackdrop) {
+      const handler = () => void this.close("backdrop");
+      this.backdrop.addEventListener("click", handler);
+      this.detachBackdrop = () => this.backdrop?.removeEventListener("click", handler);
+    }
+    if (this.closeOnBackEnabled && typeof window !== "undefined" && !this.detachHardwareBack) {
+      try {
+        history.pushState({ __bsOverlay: this.id }, "");
+      } catch {
+      }
+      const onPop = () => {
+        if (this.isOpen_) void this.close("back");
+      };
+      window.addEventListener("popstate", onPop);
+      this.detachHardwareBack = () => window.removeEventListener("popstate", onPop);
+    }
+    if (this.closeOnOutsidePointerEnabled && !this.detachOutsidePointer) {
+      const handler = (e) => {
+        if (!this.isOpen_) return;
+        const target = e.target;
+        if (!target) return;
+        if (this.element.contains(target)) return;
+        if (this.backdrop && this.backdrop.contains(target)) return;
+        void this.close("outside-pointer");
+      };
+      document.addEventListener("pointerdown", handler, true);
+      this.detachOutsidePointer = () => document.removeEventListener("pointerdown", handler, true);
+    }
+  }
+  releaseInteractiveListeners() {
+    this.detachEscape?.();
+    this.detachEscape = null;
+    this.detachBackdrop?.();
+    this.detachBackdrop = null;
+    this.detachHardwareBack?.();
+    this.detachHardwareBack = null;
+    this.detachSwipe?.();
+    this.detachSwipe = null;
+    this.detachOutsidePointer?.();
+    this.detachOutsidePointer = null;
+    this.lifecycle.release();
+  }
+  /**
+   * Light pointer-driven dismiss. Tracks finger along the edge axis, follows
+   * with translate, dismisses if past `swipeThreshold` (fraction of panel
+   * size) or release velocity exceeds `swipeVelocityThreshold` (px/ms).
+   * Pure CSS-transform during drag — no rAF or physics required since the
+   * panel only moves one direction.
+   */
+  installSwipeToClose() {
+    const el = this.element;
+    const edge = this.edge;
+    const isVertical = edge === "bottom" || edge === "top";
+    const sign = edge === "bottom" || edge === "right" ? 1 : -1;
+    const threshold = this.swipeThreshold;
+    const velocityThreshold = this.swipeVelocityThreshold;
+    let startX = 0;
+    let startY = 0;
+    let startT = 0;
+    let dragging = false;
+    let pointerId = null;
+    const onDown = (e) => {
+      if (e.button !== void 0 && e.button !== 0) return;
+      pointerId = e.pointerId;
+      startX = e.clientX;
+      startY = e.clientY;
+      startT = performance.now();
+      dragging = true;
+      el.style.transition = "none";
+      try {
+        el.setPointerCapture(e.pointerId);
+      } catch {
+      }
+    };
+    const onMove = (e) => {
+      if (!dragging || e.pointerId !== pointerId) return;
+      const delta = isVertical ? e.clientY - startY : e.clientX - startX;
+      const offset = Math.max(0, sign * delta);
+      el.style.transform = isVertical ? `translate3d(0, ${sign * offset}px, 0)` : `translate3d(${sign * offset}px, 0, 0)`;
+    };
+    const finish = (e) => {
+      if (!dragging || e.pointerId !== pointerId) return;
+      dragging = false;
+      pointerId = null;
+      const dt = performance.now() - startT || 1;
+      const delta = isVertical ? e.clientY - startY : e.clientX - startX;
+      const offset = Math.max(0, sign * delta);
+      const velocity = sign * delta / dt;
+      const size = isVertical ? el.offsetHeight : el.offsetWidth;
+      const past = offset > size * threshold || velocity > velocityThreshold;
+      el.style.transition = `transform ${this.duration}ms ${this.exitEasing}`;
+      if (past) {
+        void this.close("swipe");
+      } else {
+        el.style.transform = openTransformFor(this.enterAnimation);
+      }
+    };
+    el.addEventListener("pointerdown", onDown);
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerup", finish);
+    el.addEventListener("pointercancel", finish);
+    return () => {
+      el.removeEventListener("pointerdown", onDown);
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerup", finish);
+      el.removeEventListener("pointercancel", finish);
+    };
+  }
+  registerInStack() {
+    this.releaseStackEntry = sheetStack.push({
+      id: this.id,
+      setZIndex: (z) => {
+        this.element.style.zIndex = String(z);
+        if (this.backdrop) this.backdrop.style.zIndex = String(z - 1);
+      },
+      setIsTop: (isTop) => {
+        if (this.backdrop) {
+          this.backdrop.style.display = isTop ? "" : "none";
+        }
+      }
+    });
+  }
+};
+var createOverlay = (opts) => new OverlayEngine(opts);
+
+exports.OVERLAY_PRESETS = OVERLAY_PRESETS;
+exports.Overlay = OverlayEngine;
+exports.OverlayEngine = OverlayEngine;
+exports.createOverlay = createOverlay;
+//# sourceMappingURL=overlay.cjs.map
+//# sourceMappingURL=overlay.cjs.map