modal_stack 0.1.1 → 0.3.0

data/app/assets/javascripts/modal_stack.js

@@ -11,6 +11,16 @@ var VARIANTS = Object.freeze([
 var SNAPSHOT_VERSION = 1;
 var DEFAULT_MAX_AGE_MS = 30 * 60 * 1000;
 var DRAWER_SIDES = Object.freeze(["left", "right", "top", "bottom"]);
+var MAX_DEPTH_STRATEGIES = Object.freeze(["raise", "warn", "silent"]);
+
+class ModalStackDepthError extends Error {
+  constructor({ maxDepth, attemptedDepth }) {
+    super(`modal_stack: cannot push past max_depth=${maxDepth} ` + `(attempted depth=${attemptedDepth})`);
+    this.name = "ModalStackDepthError";
+    this.maxDepth = maxDepth;
+    this.attemptedDepth = attemptedDepth;
+  }
+}
 function normalizeLayerOptions({ variant, size, side, width, height }) {
   const normalizedSide = variant === "drawer" ? side ?? "right" : side ?? null;
   if (variant === "drawer" && !DRAWER_SIDES.includes(normalizedSide)) {
@@ -46,7 +56,7 @@ function createStack({ stackId, baseUrl }) {
 function topLayer(state) {
   return state.layers[state.layers.length - 1] ?? null;
 }
-function push(state, layer) {
+function push(state, layer, options = {}) {
   if (!layer?.id)
     throw new Error("layer.id required");
   if (!layer?.url)
@@ -55,6 +65,22 @@ function push(state, layer) {
   if (!VARIANTS.includes(variant)) {
     throw new Error(`unknown variant: ${variant}`);
   }
+  const { maxDepth = null, maxDepthStrategy = "warn" } = options;
+  if (maxDepth != null && state.layers.length >= maxDepth) {
+    if (!MAX_DEPTH_STRATEGIES.includes(maxDepthStrategy)) {
+      throw new Error(`unknown maxDepthStrategy: ${maxDepthStrategy} (expected one of ${MAX_DEPTH_STRATEGIES.join(", ")})`);
+    }
+    if (maxDepthStrategy === "raise") {
+      throw new ModalStackDepthError({
+        maxDepth,
+        attemptedDepth: state.layers.length + 1
+      });
+    }
+    if (maxDepthStrategy === "warn" && typeof console !== "undefined") {
+      console.warn(`[modal_stack] push ignored: stack is at max_depth=${maxDepth}. ` + `Set ModalStack.configuration.max_depth higher, or use ` + `max_depth_strategy = :silent to suppress this warning.`);
+    }
+    return { state, commands: [] };
+  }
   const newLayer = freezeLayer({
     id: layer.id,
     url: layer.url,
@@ -100,15 +126,16 @@ function pop(state) {
     return { state, commands: [] };
   const newLayers = Object.freeze(state.layers.slice(0, -1));
   const newTop = newLayers[newLayers.length - 1] ?? null;
-  const commands = [
-    { type: "unmountTopLayer" },
-    { type: "historyBack", n: 1 }
-  ];
+  const commands = [];
   if (newTop) {
+    commands.push({ type: "unmountTopLayer" });
+    commands.push({ type: "historyBack", n: 1 });
     commands.push({ type: "inertLayer", layerId: newTop.id, value: false });
     commands.push({ type: "persistSnapshot" });
   } else {
     commands.push({ type: "closeDialog" });
+    commands.push({ type: "unmountTopLayer" });
+    commands.push({ type: "historyBack", n: 1 });
     commands.push({ type: "unlockScroll" });
     commands.push({ type: "clearSnapshot" });
   }
@@ -166,8 +193,8 @@ function closeAll(state) {
   return {
     state: { ...state, layers: Object.freeze([]) },
     commands: [
-      { type: "unmountAllLayers" },
       { type: "closeDialog" },
+      { type: "unmountAllLayers" },
       { type: "unlockScroll" },
       { type: "historyBack", n },
       { type: "clearSnapshot" }
@@ -182,8 +209,8 @@ function handlePopstate(state, { historyState, locationHref }) {
     return {
       state: { ...state, layers: Object.freeze([]) },
       commands: [
-        { type: "unmountAllLayers" },
         { type: "closeDialog" },
+        { type: "unmountAllLayers" },
         { type: "unlockScroll" },
         { type: "clearSnapshot" }
       ]
@@ -196,6 +223,8 @@ function handlePopstate(state, { historyState, locationHref }) {
     const newLayers = Object.freeze(state.layers.slice(0, targetDepth));
     const newTop = newLayers[newLayers.length - 1] ?? null;
     const commands = [];
+    if (!newTop)
+      commands.push({ type: "closeDialog" });
     for (let i = 0;i < currentDepth - targetDepth; i++) {
       commands.push({ type: "unmountTopLayer" });
     }
@@ -203,7 +232,6 @@ function handlePopstate(state, { historyState, locationHref }) {
       commands.push({ type: "inertLayer", layerId: newTop.id, value: false });
       commands.push({ type: "persistSnapshot" });
     } else {
-      commands.push({ type: "closeDialog" });
       commands.push({ type: "unlockScroll" });
       commands.push({ type: "clearSnapshot" });
     }
@@ -300,12 +328,27 @@ function restore(serialized, { stackId, maxAgeMs = DEFAULT_MAX_AGE_MS, now = Dat
 }
 
 // app/javascript/modal_stack/orchestrator.js
+var PREFETCH_TTL_MS = 30000;
+
 class Orchestrator {
   #expectedPopstates = 0;
-  constructor({ runtime, stackId, baseUrl, restoreFrom = null }) {
+  #fragmentCache = new Map;
+  #inflight = new Map;
+  constructor({
+    runtime,
+    stackId,
+    baseUrl,
+    restoreFrom = null,
+    maxDepth = null,
+    maxDepthStrategy = "warn",
+    prefetchTtlMs = PREFETCH_TTL_MS
+  }) {
     if (!runtime)
       throw new Error("runtime required");
     this.runtime = runtime;
+    this.maxDepth = maxDepth;
+    this.maxDepthStrategy = maxDepthStrategy;
+    this.prefetchTtlMs = prefetchTtlMs;
     this.state = createStack({ stackId, baseUrl });
     if (restoreFrom) {
       const restored = restore(restoreFrom, { stackId });
@@ -320,10 +363,16 @@ class Orchestrator {
     return this.state.layers.length;
   }
   async push(layer, { html = null, fragment = null } = {}) {
+    const transition = push(this.state, layer, {
+      maxDepth: this.maxDepth,
+      maxDepthStrategy: this.maxDepthStrategy
+    });
+    if (transition.commands.length === 0)
+      return;
     if (fragment == null && html == null && layer?.url) {
       fragment = await this.#prefetch(layer.url);
     }
-    return this.#dispatch(push(this.state, layer), { html, fragment });
+    return this.#dispatch(transition, { html, fragment });
   }
   pop() {
     return this.#dispatch(pop(this.state));
@@ -337,9 +386,44 @@ class Orchestrator {
   async#prefetch(url) {
     if (typeof this.runtime.fetchFragment !== "function")
       return null;
-    return this.runtime.fetchFragment(url);
+    const cached = this.#fragmentCache.get(url);
+    if (cached && Date.now() - cached.ts < this.prefetchTtlMs) {
+      return cloneFragment(cached.fragment);
+    }
+    const existing = this.#inflight.get(url);
+    if (existing) {
+      const entry2 = await existing.promise;
+      return cloneFragment(entry2.fragment);
+    }
+    const controller = supportsAbort() ? new AbortController : null;
+    const fetchPromise = this.runtime.fetchFragment(url, controller ? { signal: controller.signal } : undefined).then((fragment) => {
+      const entry2 = { fragment, ts: Date.now() };
+      this.#fragmentCache.set(url, entry2);
+      return entry2;
+    }).finally(() => {
+      this.#inflight.delete(url);
+    });
+    this.#inflight.set(url, { controller, promise: fetchPromise });
+    const entry = await fetchPromise;
+    return cloneFragment(entry.fragment);
+  }
+  #invalidatePrefetch() {
+    for (const { controller } of this.#inflight.values()) {
+      try {
+        controller?.abort();
+      } catch {}
+    }
+    this.#inflight.clear();
+    this.#fragmentCache.clear();
+  }
+  prefetch(url) {
+    if (!url || typeof this.runtime.fetchFragment !== "function") {
+      return Promise.resolve(null);
+    }
+    return this.#prefetch(url).catch(() => null);
   }
   closeAll() {
+    this.#invalidatePrefetch();
     return this.#dispatch(closeAll(this.state));
   }
   onPopstate({ historyState, locationHref }) {
@@ -347,6 +431,7 @@ class Orchestrator {
       this.#expectedPopstates -= 1;
       return Promise.resolve();
     }
+    this.#invalidatePrefetch();
     return this.#dispatch(handlePopstate(this.state, { historyState, locationHref }));
   }
   async#dispatch({ state, commands }, payload = {}) {
@@ -371,17 +456,32 @@ class Orchestrator {
     }
     const handler = this.runtime[cmd.type];
     if (typeof handler !== "function") {
-      throw new Error(`runtime missing handler for "${cmd.type}"`);
+      const known = Object.getOwnPropertyNames(Object.getPrototypeOf(this.runtime)).filter((name) => name !== "constructor" && typeof this.runtime[name] === "function").sort().join(", ");
+      throw new Error(`[modal_stack] runtime missing handler for "${cmd.type}" ` + `(stack depth=${this.depth}). ` + `Known handlers: ${known || "<none>"}.`);
     }
     await handler.call(this.runtime, cmd);
   }
 }
+function cloneFragment(fragment) {
+  if (!fragment)
+    return fragment;
+  if (typeof fragment.cloneNode === "function") {
+    return fragment.cloneNode(true);
+  }
+  return fragment;
+}
+function supportsAbort() {
+  return typeof globalThis.AbortController === "function";
+}
 
 // app/javascript/modal_stack/runtime.js
 var SNAPSHOT_KEY = "modalStackSnapshot";
 var FRAGMENT_HEADER = "X-Modal-Stack-Request";
+var SCROLLBAR_WIDTH_VAR = "--modal-stack-scrollbar-width";
 var LAYER_SELECTOR = '[data-modal-stack-target="layer"]';
-var LEAVE_TIMEOUT_MS = 600;
+var DURATION_CSS_VAR = "--modal-stack-duration";
+var LEAVE_TIMEOUT_FLOOR_MS = 300;
+var LEAVE_TIMEOUT_FALLBACK_MS = 600;
 
 class BrowserRuntime {
   constructor({
@@ -414,12 +514,22 @@ class BrowserRuntime {
       this.dialog.close();
   }
   lockScroll() {
-    if (this.body)
-      this.body.dataset.modalStackLocked = "";
+    if (!this.body)
+      return;
+    const root = this.document?.documentElement;
+    if (root) {
+      const scrollbarWidth = Math.max(0, (globalThis.innerWidth ?? root.clientWidth) - root.clientWidth);
+      root.style.setProperty(SCROLLBAR_WIDTH_VAR, `${scrollbarWidth}px`);
+    }
+    this.body.dataset.modalStackLocked = "";
   }
   unlockScroll() {
-    if (this.body)
-      delete this.body.dataset.modalStackLocked;
+    if (!this.body)
+      return;
+    delete this.body.dataset.modalStackLocked;
+    const root = this.document?.documentElement;
+    if (root)
+      root.style.removeProperty(SCROLLBAR_WIDTH_VAR);
   }
   inertLayer({ layerId, value }) {
     const layer = this.#findLayer(layerId);
@@ -449,11 +559,12 @@ class BrowserRuntime {
     const layer = this.#topLayer();
     if (!layer)
       return;
-    await animateOut(layer);
+    await animateOut(layer, this.#leaveTimeoutMs());
   }
   async unmountAllLayers() {
     const layers = [...this.dialog.querySelectorAll(LAYER_SELECTOR)];
-    await Promise.all(layers.map(animateOut));
+    const timeout = this.#leaveTimeoutMs();
+    await Promise.all(layers.map((l) => animateOut(l, timeout)));
   }
   pushHistory({ url, historyState }) {
     this.history.pushState(historyState, "", url);
@@ -490,6 +601,22 @@ class BrowserRuntime {
       return null;
     }
   }
+  #leaveTimeoutMs() {
+    if (this._cachedLeaveTimeoutMs != null)
+      return this._cachedLeaveTimeoutMs;
+    const get = globalThis.getComputedStyle;
+    if (typeof get !== "function" || !this.dialog?.ownerDocument) {
+      return LEAVE_TIMEOUT_FALLBACK_MS;
+    }
+    let parsed = NaN;
+    try {
+      const raw = get(this.dialog).getPropertyValue(DURATION_CSS_VAR);
+      parsed = parseDurationMs(raw);
+    } catch {}
+    const ms = Number.isFinite(parsed) ? Math.max(Math.ceil(parsed * 1.5), LEAVE_TIMEOUT_FLOOR_MS) : LEAVE_TIMEOUT_FALLBACK_MS;
+    this._cachedLeaveTimeoutMs = ms;
+    return ms;
+  }
   #findLayer(layerId) {
     return this.dialog.querySelector(`${LAYER_SELECTOR}[data-layer-id="${escapeAttr(layerId)}"]`);
   }
@@ -526,13 +653,14 @@ class BrowserRuntime {
       layer.style.removeProperty("height");
     }
   }
-  async fetchFragment(url) {
+  async fetchFragment(url, { signal } = {}) {
     const resp = await this.fetcher(url, {
       headers: {
         Accept: "text/html, text/vnd.turbo-stream.html",
         [FRAGMENT_HEADER]: "1"
       },
-      credentials: "same-origin"
+      credentials: "same-origin",
+      signal
     });
     if (!resp.ok) {
       throw new Error(`modal_stack: fetch ${url} → ${resp.status}`);
@@ -555,7 +683,7 @@ function parseFragment(html, doc) {
   fragment.append(...parsed.body.childNodes);
   return fragment;
 }
-function animateOut(layer) {
+function animateOut(layer, timeoutMs = LEAVE_TIMEOUT_FALLBACK_MS) {
   return new Promise((resolve) => {
     let done = false;
     const finish = () => {
@@ -568,9 +696,20 @@ function animateOut(layer) {
     };
     layer.addEventListener("transitionend", finish, { once: true });
     layer.dataset.leaving = "";
-    setTimeout(finish, LEAVE_TIMEOUT_MS);
+    setTimeout(finish, timeoutMs);
   });
 }
+function parseDurationMs(raw) {
+  if (typeof raw !== "string")
+    return NaN;
+  const value = raw.trim();
+  if (!value)
+    return NaN;
+  const num = parseFloat(value);
+  if (!Number.isFinite(num))
+    return NaN;
+  return /m?s$/i.test(value) && !/ms$/i.test(value) ? num * 1000 : num;
+}
 function escapeAttr(value) {
   if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
     return CSS.escape(value);
@@ -582,7 +721,9 @@ function escapeAttr(value) {
 class ModalStackController extends Controller {
   static values = {
     stackId: String,
-    baseUrl: String
+    baseUrl: String,
+    maxDepth: { type: Number, default: 0 },
+    maxDepthStrategy: { type: String, default: "warn" }
   };
   connect() {
     const stackId = this.stackIdValue || generateLayerId();
@@ -593,7 +734,9 @@ class ModalStackController extends Controller {
       runtime: this.runtime,
       stackId,
       baseUrl,
-      restoreFrom: snapshot2
+      restoreFrom: snapshot2,
+      maxDepth: this.maxDepthValue > 0 ? this.maxDepthValue : null,
+      maxDepthStrategy: this.maxDepthStrategyValue || "warn"
     });
     this._onPopstate = (event) => this.orchestrator.onPopstate({
       historyState: event.state,
@@ -637,6 +780,9 @@ class ModalStackController extends Controller {
   closeAll() {
     return this.orchestrator.closeAll();
   }
+  prefetch(url) {
+    return this.orchestrator.prefetch(url);
+  }
   #topLayer() {
     const layers = this.orchestrator.layers;
     return layers[layers.length - 1] ?? null;
@@ -649,25 +795,46 @@ class ModalStackController extends Controller {
     }
     const StreamActions = Turbo.StreamActions || (Turbo.StreamActions = {});
     const orchestrator = this.orchestrator;
-    StreamActions.modal_push = function modalPush() {
-      orchestrator.push(layerFromStreamElement(this), {
+    const dialog = this.element;
+    const guarded = (action, fn) => function guardedStreamAction() {
+      try {
+        const result = fn.call(this, orchestrator);
+        if (result && typeof result.catch === "function") {
+          result.catch((err) => emitStreamError(dialog, action, err));
+        }
+      } catch (err) {
+        emitStreamError(dialog, action, err);
+      }
+    };
+    StreamActions.modal_push = guarded("modal_push", function(orch) {
+      return orch.push(layerFromStreamElement(this), {
         fragment: this.templateContent.cloneNode(true)
       });
-    };
-    StreamActions.modal_pop = function modalPop() {
-      orchestrator.pop();
-    };
-    StreamActions.modal_replace = function modalReplace() {
-      orchestrator.replaceTop(layerPatchFromStreamElement(this), {
+    });
+    StreamActions.modal_pop = guarded("modal_pop", function(orch) {
+      return orch.pop();
+    });
+    StreamActions.modal_replace = guarded("modal_replace", function(orch) {
+      return orch.replaceTop(layerPatchFromStreamElement(this), {
         fragment: this.templateContent.cloneNode(true),
         historyMode: this.dataset.historyMode || "replace"
       });
-    };
-    StreamActions.modal_close_all = function modalCloseAll() {
-      orchestrator.closeAll();
-    };
+    });
+    StreamActions.modal_close_all = guarded("modal_close_all", function(orch) {
+      return orch.closeAll();
+    });
   }
 }
+function emitStreamError(dialog, action, error) {
+  if (typeof console !== "undefined" && console.error) {
+    console.error(`[modal_stack] stream action "${action}" failed:`, error);
+  }
+  dialog.dispatchEvent(new CustomEvent("modal_stack:error", {
+    bubbles: true,
+    cancelable: false,
+    detail: { action, error }
+  }));
+}
 function layerFromStreamElement(el) {
   return {
     id: el.dataset.layerId || generateLayerId(),
@@ -712,11 +879,21 @@ function generateLayerId() {
 import { Controller as Controller2 } from "@hotwired/stimulus";
 
 class ModalStackLinkController extends Controller2 {
-  open(event) {
-    const stack = document.querySelector('[data-controller~="modal-stack"]');
-    if (!stack)
+  connect() {
+    if (this.element.dataset.modalStackLinkPrefetch === "false")
+      return;
+    this._onIntent = () => this.#warm();
+    this.element.addEventListener("pointerenter", this._onIntent);
+    this.element.addEventListener("focus", this._onIntent);
+  }
+  disconnect() {
+    if (!this._onIntent)
       return;
-    const controller = this.application.getControllerForElementAndIdentifier(stack, "modal-stack");
+    this.element.removeEventListener("pointerenter", this._onIntent);
+    this.element.removeEventListener("focus", this._onIntent);
+  }
+  open(event) {
+    const controller = this.#stackController();
     if (!controller)
       return;
     event.preventDefault();
@@ -732,6 +909,18 @@ class ModalStackLinkController extends Controller2 {
       dismissible: ds.modalStackLinkDismissible !== "false"
     });
   }
+  #warm() {
+    const controller = this.#stackController();
+    if (!controller || typeof controller.prefetch !== "function")
+      return;
+    controller.prefetch(this.element.href);
+  }
+  #stackController() {
+    const stack = document.querySelector('[data-controller~="modal-stack"]');
+    if (!stack)
+      return null;
+    return this.application.getControllerForElementAndIdentifier(stack, "modal-stack");
+  }
 }
 function generateLayerId2() {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {

data/app/assets/stylesheets/modal_stack/bootstrap.css

@@ -23,7 +23,9 @@
   --modal-stack-fg: var(--bs-body-color, #212529);
   --modal-stack-shadow: var(--bs-box-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175));
   --modal-stack-backdrop: rgba(var(--bs-backdrop-color, 0, 0, 0), var(--bs-backdrop-opacity, 0.5));
-  --modal-stack-backdrop-blur: 0;
+  /* Default `none` so Chrome skips the filter pass. Opt in with
+   * `:root { --modal-stack-backdrop-filter: blur(8px); }`. */
+  --modal-stack-backdrop-filter: none;
   --modal-stack-panel-padding: var(--bs-modal-padding, 1rem);
   --modal-stack-size-sm: 300px;
   --modal-stack-size-md: 500px;
@@ -65,23 +67,22 @@ body[data-modal-stack-locked] {
 
 #modal-stack-root::backdrop {
   background: rgba(0, 0, 0, 0);
-  backdrop-filter: blur(0);
   transition:
     background var(--modal-stack-duration) var(--modal-stack-ease),
-    backdrop-filter var(--modal-stack-duration) var(--modal-stack-ease),
     overlay var(--modal-stack-duration) var(--modal-stack-ease) allow-discrete,
     display var(--modal-stack-duration) var(--modal-stack-ease) allow-discrete;
 }
 
 #modal-stack-root[open]::backdrop {
   background: var(--modal-stack-backdrop);
-  backdrop-filter: blur(var(--modal-stack-backdrop-blur));
+  /* Static. Default is `none` (no filter pass). Opt in with
+   * --modal-stack-backdrop-filter on :root. */
+  backdrop-filter: var(--modal-stack-backdrop-filter);
 }
 
 @starting-style {
   #modal-stack-root[open]::backdrop {
     background: rgba(0, 0, 0, 0);
-    backdrop-filter: blur(0);
   }
 }
 
@@ -101,8 +102,7 @@ body[data-modal-stack-locked] {
   transform: translate(-50%, -50%);
   transition:
     transform var(--modal-stack-duration) var(--modal-stack-ease),
-    opacity var(--modal-stack-duration) var(--modal-stack-ease),
-    filter var(--modal-stack-duration) var(--modal-stack-ease);
+    opacity var(--modal-stack-duration) var(--modal-stack-ease);
 }
 
 @starting-style {
@@ -120,7 +120,6 @@ body[data-modal-stack-locked] {
 
 [data-modal-stack-target="layer"][inert] {
   opacity: 0.5;
-  filter: blur(0.5px);
 }
 
 [data-modal-stack-target="layer"][data-modal-stack-size="sm"] { width: var(--modal-stack-size-sm); }

data/app/assets/stylesheets/modal_stack/{tailwind.css → tailwind_v3.css}

@@ -1,11 +1,14 @@
 /*
- * modal_stack — Tailwind preset
+ * modal_stack — Tailwind v3 preset
+ *
+ * Tailwind v3 doesn't expose its design tokens as native CSS variables,
+ * so this preset ships static values aligned with the Tailwind defaults
+ * (slate text, white surface, rounded-2xl-ish radius, container sizes).
+ * Override the `--modal-stack-*` tokens on `:root` to retheme without
+ * touching the gem.
  *
  * Structural CSS for the <dialog id="modal-stack-root"> + layered
  * `[data-modal-stack-target="layer"]` setup driven by the JS runtime.
- * Visual tokens are exposed as CSS custom properties on `:root` so they
- * can be overridden globally, per scope, or via Tailwind's
- * `:root { --modal-stack-* }` declaration.
  *
  * Variants:    [data-variant="modal" | "drawer" | "bottom_sheet" | "confirmation"]
  * Drawer side: [data-side="left" | "right" | "top" | "bottom"]
@@ -27,7 +30,13 @@
   --modal-stack-fg: #0f172a;
   --modal-stack-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.35);
   --modal-stack-backdrop: rgba(15, 23, 42, 0.55);
-  --modal-stack-backdrop-blur: 2px;
+  /* `none` by default — `backdrop-filter: blur()` even at radius 0
+   * still allocates a filter layer on the compositor, and animating
+   * a non-zero radius costs ~190ms/frame on Hi-DPI displays. Opt in
+   * with `:root { --modal-stack-backdrop-filter: blur(8px); }` —
+   * the filter is applied statically when the dialog opens (no
+   * per-frame compositor cost). */
+  --modal-stack-backdrop-filter: none;
   --modal-stack-panel-padding: 24px;
   --modal-stack-size-sm: 24rem;   /* 384px */
   --modal-stack-size-md: 34rem;   /* 544px */
@@ -79,23 +88,23 @@ body[data-modal-stack-locked] {
 
 #modal-stack-root::backdrop {
   background: rgba(15, 23, 42, 0);
-  backdrop-filter: blur(0);
   transition:
     background var(--modal-stack-duration) var(--modal-stack-ease),
-    backdrop-filter var(--modal-stack-duration) var(--modal-stack-ease),
     overlay var(--modal-stack-duration) var(--modal-stack-ease) allow-discrete,
     display var(--modal-stack-duration) var(--modal-stack-ease) allow-discrete;
 }
 
 #modal-stack-root[open]::backdrop {
   background: var(--modal-stack-backdrop);
-  backdrop-filter: blur(var(--modal-stack-backdrop-blur));
+  /* Static (not in the transition list above). Default is `none` so
+   * Chrome skips the filter pass entirely. Override --modal-stack-
+   * backdrop-filter to opt in. */
+  backdrop-filter: var(--modal-stack-backdrop-filter);
 }
 
 @starting-style {
   #modal-stack-root[open]::backdrop {
     background: rgba(15, 23, 42, 0);
-    backdrop-filter: blur(0);
   }
 }
 
@@ -117,8 +126,7 @@ body[data-modal-stack-locked] {
   transform: translate(-50%, -50%);
   transition:
     transform var(--modal-stack-duration) var(--modal-stack-ease),
-    opacity var(--modal-stack-duration) var(--modal-stack-ease),
-    filter var(--modal-stack-duration) var(--modal-stack-ease);
+    opacity var(--modal-stack-duration) var(--modal-stack-ease);
 }
 
 @starting-style {
@@ -136,7 +144,6 @@ body[data-modal-stack-locked] {
 
 [data-modal-stack-target="layer"][inert] {
   opacity: 0.5;
-  filter: blur(0.5px);
 }
 
 /* --- Sizes via [data-modal-stack-size] ----------------------------- */