@leavepulse/ui 0.18.3 → 0.19.0

package/dist/assets/{LpCommandPalette-D315B47-.css → LpCommandPalette-Cp6Y-j7g.css}

@@ -1,16 +1,16 @@
 
 /* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-d845063e] {
-  animation: lp-cmd-in-d845063e 140ms ease-out both;
+.lp-cmd-item[data-v-7fba2dd8] {
+  animation: lp-cmd-in-7fba2dd8 140ms ease-out both;
 }
-@keyframes lp-cmd-in-d845063e {
+@keyframes lp-cmd-in-7fba2dd8 {
 from {
     opacity: 0;
     transform: translateY(3px);
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-d845063e] {
+.lp-cmd-item[data-v-7fba2dd8] {
     animation: none;
 }
 }

package/dist/chunks/{LpAddressInput-Dfyn88Dd.js → LpAddressInput-CWlfDyKz.js}

@@ -6,7 +6,7 @@ import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$1 } from "./LpFormField-Bn-ZwC6z.js";
 import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpInput-BauZRyzm.js";
-import { _ as _sfc_main$7 } from "./LpModal-CYKAaSHO.js";
+import { _ as _sfc_main$7 } from "./LpModal-BJTiTSDJ.js";
 import { _ as _sfc_main$6 } from "./LpSelect-D5mU4cZO.js";
 const _hoisted_1 = { class: "flex flex-col gap-3" };
 const _hoisted_2 = { class: "flex items-stretch gap-2" };

package/dist/chunks/{LpAppShell-BvAVgVLW.js → LpAppShell-D42la4ZD.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, watch, openBlock, createElementBlock, create
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$4 } from "./LpScrollArea-DQ0Yudfu.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-BBG9NhAn.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-DlLZJk1u.js";
 const _hoisted_1 = { class: "flex h-dvh overflow-hidden bg-surface text-ink" };
 const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };
 const _hoisted_3 = { class: "flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };

package/dist/chunks/{LpConfirmDialog-BxBU4Pj9.js → LpConfirmDialog-JNW4rpx3.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createBlock, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
-import { _ as _sfc_main$1 } from "./LpModal-CYKAaSHO.js";
+import { _ as _sfc_main$1 } from "./LpModal-BJTiTSDJ.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
   props: {

package/dist/chunks/{LpDrawer-DaCsNuW3.js → LpDrawer-CYm-nUIZ.js}

@@ -215,7 +215,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             createVNode(unref(DrawerPortal), null, {
               default: withCtx(() => [
-                createVNode(unref(DrawerOverlay), { class: "fixed inset-0 z-(--z-overlay) bg-black/50 backdrop-blur-sm data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]" }),
+                createVNode(unref(DrawerOverlay), { class: "lp-scrim fixed inset-0 z-(--z-overlay) backdrop-blur-sm data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]" }),
                 createVNode(unref(DrawerContent), {
                   class: normalizeClass(contentClass.value),
                   style: normalizeStyle(sizeStyle.value),

package/dist/chunks/{LpLightbox-CWdIsthW.js → LpLightbox-CzhFe9wZ.js}

@@ -210,9 +210,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(unref(DialogPortal), null, {
             default: withCtx(() => [
-              createVNode(unref(DialogOverlay), { class: "fixed inset-0 z-(--z-overlay) bg-black/85 backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]" }),
+              createVNode(unref(DialogOverlay), { class: "lp-scrim fixed inset-0 z-(--z-lightbox-overlay) backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]" }),
               createVNode(unref(DialogContent), {
-                class: "fixed inset-0 z-(--z-modal) flex flex-col outline-none data-[state=open]:animate-[lightbox-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[lightbox-out_140ms_cubic-bezier(0.4,0,1,1)] motion-reduce:animate-none",
+                class: "fixed inset-0 z-(--z-lightbox) flex flex-col outline-none data-[state=open]:animate-[lightbox-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[lightbox-out_140ms_cubic-bezier(0.4,0,1,1)] motion-reduce:animate-none",
                 onKeydown
               }, {
                 default: withCtx(() => [

package/dist/chunks/{LpModal-CYKAaSHO.js → LpModal-BJTiTSDJ.js}

@@ -57,7 +57,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(unref(DialogPortal), null, {
             default: withCtx(() => [
-              createVNode(unref(DialogOverlay), { class: "fixed inset-0 z-(--z-overlay) bg-black/50 backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]" }),
+              createVNode(unref(DialogOverlay), { class: "lp-scrim fixed inset-0 z-(--z-overlay) backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]" }),
               createElementVNode("div", _hoisted_1, [
                 createVNode(unref(DialogContent), mergeProps({
                   class: ["pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]", widthClass.value],

package/dist/chunks/{LpSidebar-BBG9NhAn.js → LpSidebar-DlLZJk1u.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, normalizeClass, renderSlot, createCommentVNode, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps, createBlock } from "vue";
-import { _ as _sfc_main$2 } from "./LpDrawer-DaCsNuW3.js";
+import { _ as _sfc_main$2 } from "./LpDrawer-CYm-nUIZ.js";
 import { _ as _sfc_main$1 } from "./LpSidebarNav-DSDa5mAY.js";
 const _hoisted_1 = {
   key: 1,

package/dist/chunks/{LpThemeSwitcher-Ct-lnXMa.js → LpThemeSwitcher-B_kj0T2b.js}

@@ -249,6 +249,19 @@ const nord = {
   font: { ...interFont }
 };
 const presets = { dark, light, lime, leavepulse, rose, amber, violet, nord };
+const NO_BACKDROP_ATTR = "data-lp-no-backdrop";
+function isBrokenBackdropEngine(nav = navigator) {
+  const ua = nav.userAgent;
+  if (!/AppleWebKit/.test(ua)) return false;
+  if (/Chrome|Chromium|Edg\//.test(ua)) return false;
+  return !/Mac|iPhone|iPad|iPod/.test(nav.platform || "");
+}
+function detectBackdropFilter(root = document.documentElement) {
+  if (typeof navigator === "undefined") return true;
+  const usable = !isBrokenBackdropEngine();
+  root.toggleAttribute(NO_BACKDROP_ATTR, !usable);
+  return usable;
+}
 const COLOR_VARS = {
   surface: "--color-surface",
   surfaceRaised: "--color-surface-raised",
@@ -341,6 +354,7 @@ function applyTheme(theme, root = document.documentElement) {
   }
   root.dataset.themeMode = theme.mode;
   root.style.colorScheme = theme.mode;
+  detectBackdropFilter(root);
 }
 function prefersReducedMotion() {
   return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
@@ -600,6 +614,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 export {
   DEFAULT_SURFACE as D,
+  NO_BACKDROP_ATTR as N,
   THEME_COOKIE as T,
   _sfc_main as _,
   parseTheme as a,
@@ -608,11 +623,13 @@ export {
   applyThemeWithTransition as d,
   bootstrapTheme as e,
   dark as f,
-  light as g,
-  lime as h,
-  themeToCssRule as i,
-  themeToCssVars as j,
+  detectBackdropFilter as g,
+  light as h,
+  isBrokenBackdropEngine as i,
+  lime as j,
+  themeToCssRule as k,
   leavepulse as l,
+  themeToCssVars as m,
   nord as n,
   presets as p,
   rose as r,

package/dist/components/LpAddressInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAddressInput-Dfyn88Dd.js";
+import { _ as _sfc_main } from "../chunks/LpAddressInput-CWlfDyKz.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-BvAVgVLW.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-D42la4ZD.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpCommandPalette.vue.js

@@ -2,7 +2,7 @@ import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnm
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from "reka-ui";
 import { _ as _sfc_main$1 } from "../chunks/LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$2 } from "../chunks/LpScrollArea-DQ0Yudfu.js";
-import '../assets/LpCommandPalette-D315B47-.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
+import '../assets/LpCommandPalette-Cp6Y-j7g.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
 const _hoisted_2 = ["placeholder", "onKeydown"];
 const _hoisted_3 = {
   key: 0,
@@ -167,7 +167,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(unref(DialogPortal), null, {
             default: withCtx(() => [
-              createVNode(unref(DialogOverlay), { class: "fixed inset-0 z-(--z-overlay) bg-black/50 backdrop-blur-sm data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]" }),
+              createVNode(unref(DialogOverlay), { class: "lp-scrim fixed inset-0 z-(--z-overlay) backdrop-blur-sm data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]" }),
               createVNode(unref(DialogContent), {
                 class: "fixed left-1/2 top-[12vh] z-(--z-modal) flex max-h-[76vh] w-[min(92vw,40rem)] -translate-x-1/2 flex-col overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]",
                 onOpenAutoFocus: _cache[1] || (_cache[1] = withModifiers(() => {
@@ -304,7 +304,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d845063e"]]);
+const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7fba2dd8"]]);
 export {
   LpCommandPalette as default
 };

package/dist/components/LpConfirmDialog.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpConfirmDialog-BxBU4Pj9.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-JNW4rpx3.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpDrawer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDrawer-DaCsNuW3.js";
+import { _ as _sfc_main } from "../chunks/LpDrawer-CYm-nUIZ.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpLightbox.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLightbox-CWdIsthW.js";
+import { _ as _sfc_main } from "../chunks/LpLightbox-CzhFe9wZ.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModal.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModal-CYKAaSHO.js";
+import { _ as _sfc_main } from "../chunks/LpModal-BJTiTSDJ.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebar-BBG9NhAn.js";
+import { _ as _sfc_main } from "../chunks/LpSidebar-DlLZJk1u.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpThemeSwitcher.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-Ct-lnXMa.js";
+import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-B_kj0T2b.js";
 export {
   _sfc_main as default
 };

package/dist/index.d.ts

@@ -98,6 +98,7 @@ export { useLayout } from './layout/useLayout';
 export type { UseLayout, UseLayoutOptions } from './layout/useLayout';
 export { applyTheme, applyThemeWithTransition, bootstrapTheme, parseTheme, serializeTheme, THEME_COOKIE, themeFromCookie, themeToCssRule, themeToCssVars, useTheme, } from './theme/useTheme';
 export type { RevealOrigin } from './theme/useTheme';
+export { detectBackdropFilter, isBrokenBackdropEngine, NO_BACKDROP_ATTR } from './theme/backdrop';
 export { DEFAULT_SURFACE } from './theme/tokens';
 export { defineTheme } from './theme/define';
 export type { ThemeOverrides } from './theme/define';

package/dist/index.js

@@ -1,9 +1,9 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-Dfyn88Dd.js";
+import { _ as _2 } from "./chunks/LpAddressInput-CWlfDyKz.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DFKrd1Ne.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _5 } from "./chunks/LpAppShell-BvAVgVLW.js";
+import { _ as _5 } from "./chunks/LpAppShell-D42la4ZD.js";
 import { _ as _6 } from "./chunks/LpAutocomplete-DIgXmtCA.js";
 import { _ as _7 } from "./chunks/LpAvatar-B1Ez0ZAx.js";
 import { _ as _8 } from "./chunks/LpBadge-CXzBPnwO.js";
@@ -14,12 +14,12 @@ import { _ as _12 } from "./chunks/LpCard-BmrTvWOe.js";
 import { _ as _13 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _14 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";
-import { _ as _15 } from "./chunks/LpConfirmDialog-BxBU4Pj9.js";
+import { _ as _15 } from "./chunks/LpConfirmDialog-JNW4rpx3.js";
 import { _ as _16 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _17 } from "./chunks/LpDatePicker-dY2q4dr4.js";
 import { _ as _18 } from "./chunks/LpDisclosure-DP6yfgfM.js";
 import { _ as _19 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _20 } from "./chunks/LpDrawer-DaCsNuW3.js";
+import { _ as _20 } from "./chunks/LpDrawer-CYm-nUIZ.js";
 import { _ as _21 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { _ as _22 } from "./chunks/LpEmptyState-CrfyRJUG.js";
 import { _ as _23 } from "./chunks/LpFileTree-DXb3yKzH.js";
@@ -28,11 +28,11 @@ import { _ as _24 } from "./chunks/LpFormField-Bn-ZwC6z.js";
 import { _ as _25 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { _ as _26 } from "./chunks/LpInfraNode-C_PHcthC.js";
 import { _ as _27 } from "./chunks/LpInput-BauZRyzm.js";
-import { _ as _28 } from "./chunks/LpLightbox-CWdIsthW.js";
+import { _ as _28 } from "./chunks/LpLightbox-CzhFe9wZ.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _29 } from "./chunks/LpLink-DHwOEp4e.js";
 import { _ as _30 } from "./chunks/LpLogViewer-tmKPNTuU.js";
-import { _ as _31 } from "./chunks/LpModal-CYKAaSHO.js";
+import { _ as _31 } from "./chunks/LpModal-BJTiTSDJ.js";
 import { _ as _32 } from "./chunks/LpNotificationBell-DHze8wYN.js";
 import { _ as _33 } from "./chunks/LpNumberField-C5ar-OwE.js";
 import { _ as _34 } from "./chunks/LpOtpInput-DqaT0Z75.js";
@@ -48,7 +48,7 @@ import { _ as _42 } from "./chunks/LpScrollArea-DQ0Yudfu.js";
 import { _ as _43 } from "./chunks/LpSegmented-BmpanyAo.js";
 import { _ as _44 } from "./chunks/LpSelect-D5mU4cZO.js";
 import { _ as _45 } from "./chunks/LpServiceNode-Dc-Ut5RS.js";
-import { _ as _46 } from "./chunks/LpSidebar-BBG9NhAn.js";
+import { _ as _46 } from "./chunks/LpSidebar-DlLZJk1u.js";
 import { _ as _47 } from "./chunks/LpSkeleton-eSFIo4kD.js";
 import { _ as _48 } from "./chunks/LpSlider-B1SF3pRV.js";
 import { _ as _49 } from "./chunks/LpStat-CdbEFOvn.js";
@@ -58,8 +58,8 @@ import { _ as _52 } from "./chunks/LpTable-DqZ-L4Au.js";
 import { _ as _53 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
 import { _ as _54 } from "./chunks/LpTabs-D7aTVPOb.js";
 import { _ as _55 } from "./chunks/LpTextarea-CRAkhemZ.js";
-import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-Ct-lnXMa.js";
-import { D, _ as _56, T, b, c, d, e, f, l, g, h, n, r, t, i, j, u, v } from "./chunks/LpThemeSwitcher-Ct-lnXMa.js";
+import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-B_kj0T2b.js";
+import { D, _ as _56, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-B_kj0T2b.js";
 import { _ as _57 } from "./chunks/LpTilt-DuyKbpkA.js";
 import { _ as _58 } from "./chunks/LpToaster-gDB1EaU3.js";
 import { _ as _59 } from "./chunks/LpTooltip-CIwoRCag.js";
@@ -167,6 +167,7 @@ export {
   _59 as LpTooltip,
   _60 as LpTopologyCanvas,
   _61 as LpUptimeBar,
+  N as NO_BACKDROP_ATTR,
   OSM_TILES,
   T as THEME_COOKIE,
   UI_CONFIG_VERSION,
@@ -188,6 +189,7 @@ export {
   defineBlocks,
   defineTheme,
   deserializeLayout,
+  g as detectBackdropFilter,
   emptyAddress,
   fileIcon,
   fileNameOf,
@@ -195,9 +197,10 @@ export {
   formatAddress,
   formatModified,
   formatSize,
+  i as isBrokenBackdropEngine,
   l as leavepulse,
-  g as light,
-  h as lime,
+  h as light,
+  j as lime,
   loadCountries,
   makeLayout,
   matchCountryByValue,
@@ -220,8 +223,8 @@ export {
   subtreeIds,
   subtreeSize,
   t as themeFromCookie,
-  i as themeToCssRule,
-  j as themeToCssVars,
+  k as themeToCssRule,
+  m as themeToCssVars,
   tileUrl,
   unproject,
   useInputFilter,

package/dist/theme/backdrop.d.ts

@@ -0,0 +1,9 @@
+/** Set on <html> when backdrop-filter resolves but does not composite. */
+export declare const NO_BACKDROP_ATTR = "data-lp-no-backdrop";
+export declare function isBrokenBackdropEngine(nav?: Navigator): boolean;
+/**
+ * Flag the document when backdrop-filter cannot be trusted, so the fallback
+ * rules in tokens.css can trade blur for opacity. Safe to call more than once
+ * and a no-op outside the browser.
+ */
+export declare function detectBackdropFilter(root?: HTMLElement): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.18.3",
+  "version": "0.19.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpCommandPalette.vue

@@ -212,7 +212,7 @@ onBeforeUnmount(() => window.removeEventListener("keydown", onHotkey))
   <DialogRoot :open="open" @update:open="(v) => emit('update:open', v)">
     <DialogPortal>
       <DialogOverlay
-        class="fixed inset-0 z-(--z-overlay) bg-black/50 backdrop-blur-sm data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
+        class="lp-scrim fixed inset-0 z-(--z-overlay) backdrop-blur-sm data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
       />
       <DialogContent
         class="fixed left-1/2 top-[12vh] z-(--z-modal) flex max-h-[76vh] w-[min(92vw,40rem)] -translate-x-1/2 flex-col overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]"

package/src/components/LpDrawer.vue

@@ -345,7 +345,7 @@ const edgeStripClass = computed(() =>
   >
     <DrawerPortal>
       <DrawerOverlay
-        class="fixed inset-0 z-(--z-overlay) bg-black/50 backdrop-blur-sm data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
+        class="lp-scrim fixed inset-0 z-(--z-overlay) backdrop-blur-sm data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
       />
       <DrawerContent
         :class="contentClass"

package/src/components/LpLightbox.vue

@@ -270,11 +270,13 @@ const ARROW =
 <template>
   <DialogRoot :open="open" @update:open="(v) => emit('update:open', v)">
     <DialogPortal>
+      <!-- Sits on the lightbox rung, not the shared modal one: opening this
+           from inside a dialog must cover that dialog, not tie with it. -->
       <DialogOverlay
-        class="fixed inset-0 z-(--z-overlay) bg-black/85 backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
+        class="lp-scrim fixed inset-0 z-(--z-lightbox-overlay) backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
       />
       <DialogContent
-        class="fixed inset-0 z-(--z-modal) flex flex-col outline-none data-[state=open]:animate-[lightbox-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[lightbox-out_140ms_cubic-bezier(0.4,0,1,1)] motion-reduce:animate-none"
+        class="fixed inset-0 z-(--z-lightbox) flex flex-col outline-none data-[state=open]:animate-[lightbox-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[lightbox-out_140ms_cubic-bezier(0.4,0,1,1)] motion-reduce:animate-none"
         @keydown="onKeydown"
       >
         <!-- reka wants both for a labelled dialog; the caption is the title. -->

package/src/components/LpModal.vue

@@ -76,7 +76,7 @@ const bodyPad = computed(() =>
   <DialogRoot :open="open" @update:open="(v) => $emit('update:open', v)">
     <DialogPortal>
       <DialogOverlay
-        class="fixed inset-0 z-(--z-overlay) bg-black/50 backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
+        class="lp-scrim fixed inset-0 z-(--z-overlay) backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
       />
       <!-- Centred by a full-screen flex wrapper rather than by translating the
            panel off its own centre. With `top:50% / -translate-y-1/2` the panel

package/src/index.ts

@@ -165,6 +165,7 @@ export {
   useTheme,
 } from "./theme/useTheme"
 export type { RevealOrigin } from "./theme/useTheme"
+export { detectBackdropFilter, isBrokenBackdropEngine, NO_BACKDROP_ATTR } from "./theme/backdrop"
 export { DEFAULT_SURFACE } from "./theme/tokens"
 export { defineTheme } from "./theme/define"
 export type { ThemeOverrides } from "./theme/define"

package/src/theme/backdrop.ts

@@ -0,0 +1,51 @@
+/*
+ * backdrop-filter capability detection.
+ *
+ * Every glass surface in the kit (dialog scrims, dropdown panels, the glass
+ * skin) leans on backdrop-filter. WebKitGTK — the engine Tauri embeds on Linux,
+ * and the one behind WebKit2GTK desktop shells — parses the property, reports
+ * it as supported through BOTH CSS.supports() and @supports, resolves it to a
+ * real computed value, and then composites it as a no-op. The layer tints; it
+ * never blurs.
+ *
+ * That makes the usual feature query worthless: there is no CSS condition that
+ * separates a working implementation from this one, because the engine answers
+ * "yes" to all of them. Tailwind's own Safari workaround does not fire either
+ * (WebKitGTK matches `margin-trim`, which the hack uses to rule Safari out).
+ *
+ * So the check is a runtime one, and deliberately conservative: it only flags
+ * the engine fingerprint that is known to be broken, and treats anything it
+ * cannot positively identify as working. A false negative costs a blur nobody
+ * sees; a false positive would strip the blur from browsers that render it
+ * correctly, which is the worse failure.
+ */
+
+/** Set on <html> when backdrop-filter resolves but does not composite. */
+export const NO_BACKDROP_ATTR = "data-lp-no-backdrop"
+
+/*
+ * WebKit that is neither Chromium nor an Apple platform. Chromium keeps
+ * "AppleWebKit" in its UA string, so it has to be excluded explicitly; real
+ * Safari only ever runs on a Mac/iOS platform string. What survives both
+ * filters is WebKitGTK/WPE — the broken case.
+ */
+export function isBrokenBackdropEngine(nav: Navigator = navigator): boolean {
+  const ua = nav.userAgent
+  if (!/AppleWebKit/.test(ua)) return false
+  if (/Chrome|Chromium|Edg\//.test(ua)) return false
+  return !/Mac|iPhone|iPad|iPod/.test(nav.platform || "")
+}
+
+/**
+ * Flag the document when backdrop-filter cannot be trusted, so the fallback
+ * rules in tokens.css can trade blur for opacity. Safe to call more than once
+ * and a no-op outside the browser.
+ */
+export function detectBackdropFilter(
+  root: HTMLElement = document.documentElement,
+): boolean {
+  if (typeof navigator === "undefined") return true
+  const usable = !isBrokenBackdropEngine()
+  root.toggleAttribute(NO_BACKDROP_ATTR, !usable)
+  return usable
+}

package/src/theme/useTheme.ts

@@ -5,6 +5,7 @@
  * serialize/parse with validation.
  */
 import { computed, readonly, shallowRef, type ComputedRef, type DeepReadonly, type Ref } from "vue"
+import { detectBackdropFilter } from "./backdrop"
 import {
   COLOR_VARS,
   DEFAULT_SURFACE,
@@ -75,6 +76,9 @@ export function applyTheme(theme: TokenSet, root: HTMLElement = document.documen
   }
   root.dataset.themeMode = theme.mode
   root.style.colorScheme = theme.mode
+  // Engine capability, not theme data — but this is the one path every consumer
+  // already calls, so the glass fallback lands without extra wiring.
+  detectBackdropFilter(root)
 }
 
 /** Point a circular theme reveal expands from (viewport px). */

package/src/tokens/tokens.css

@@ -120,6 +120,15 @@
   --z-popover: 120;
   --z-tooltip: 130;
   --z-toast: 200;
+
+  /* A lightbox is usually opened FROM a dialog — click a thumbnail in a modal
+     and the full image comes up over it. Sharing --z-overlay/--z-modal left
+     that order to DOM insertion alone, so the lightbox's own scrim landed on
+     top of the modal panel and swallowed it while double-darkening the page
+     behind. Its own rung above the modal (but below tooltip/toast, which must
+     outrank everything) makes the stack explicit. */
+  --z-lightbox-overlay: 140;
+  --z-lightbox: 150;
 }
 
 /* ── overlay enter/exit animations ───────────────
@@ -379,6 +388,45 @@
   -webkit-backdrop-filter: blur(var(--surface-panel-blur)) saturate(var(--surface-panel-saturate));
 }
 
+/*
+ * No-backdrop fallback. WebKitGTK — the engine behind Tauri on Linux — parses
+ * backdrop-filter and reports it through both CSS.supports() and @supports,
+ * then composites it as a no-op: the layer tints but never blurs. Since the
+ * lie makes @supports useless here, detectBackdropFilter() sets this flag on
+ * <html> instead, and every glass surface trades the blur it cannot get for
+ * the opacity it can. Without it a translucent panel over busy content reads
+ * as unfinished rather than frosted.
+ */
+:root[data-lp-no-backdrop] {
+  --surface-panel-blur: 0px;
+  --surface-panel-saturate: 100%;
+}
+
+:root[data-lp-no-backdrop] .lp-skin-panel {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+/*
+ * Scrims lean on the same trick. `.lp-scrim` marks the full-screen overlay
+ * behind a dialog; where the blur lands the tint stays light, and where it
+ * cannot the tint carries the separation on its own.
+ *
+ * The bump is deliberately mild. Scrims stack — a lightbox opened from a modal
+ * paints two — and opacity compounds, so a value tuned to look right alone goes
+ * nearly black in a pair. 0.62 reads as a clear backdrop on its own and still
+ * leaves the stacked case legible.
+ */
+.lp-scrim {
+  background-color: rgb(0 0 0 / var(--scrim-opacity, 0.5));
+}
+
+:root[data-lp-no-backdrop] .lp-scrim {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  --scrim-opacity: 0.62;
+}
+
 /* The overlay gradient rides above the base fill but under the content. */
 .lp-skin-panel::before {
   content: "";