@leavepulse/ui 0.18.3 → 0.19.1

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-N8O-LtCS.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-vlrgcEY_.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-B-amVJsM.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-vlrgcEY_.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-vlrgcEY_.js}

@@ -1,4 +1,4 @@
-import { defineComponent, computed, useSlots, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, mergeProps, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass } from "vue";
+import { defineComponent, computed, useSlots, ref, watch, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, mergeProps, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from "reka-ui";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
@@ -13,6 +13,7 @@ const _hoisted_4 = {
   key: 3,
   class: "flex shrink-0 justify-end gap-2 p-5 pt-4"
 };
+const TWEEN_MS = 160;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpModal",
   props: {
@@ -49,6 +50,73 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         slots.footer ? "" : "pb-5"
       ].filter(Boolean).join(" ")
     );
+    const panelRef = ref(null);
+    const tweening = ref(false);
+    const resizing = ref(false);
+    let ro;
+    let mo;
+    let raf = 0;
+    let settleTimer;
+    const retune = (el) => {
+      const from = el.offsetHeight;
+      el.style.height = "";
+      const to = el.offsetHeight;
+      if (to === 0) return;
+      if (to === from) {
+        el.style.height = `${to}px`;
+        return;
+      }
+      el.style.height = `${from}px`;
+      void el.offsetHeight;
+      el.style.height = `${to}px`;
+      resizing.value = true;
+      clearTimeout(settleTimer);
+      settleTimer = setTimeout(() => {
+        resizing.value = false;
+      }, TWEEN_MS);
+    };
+    watch(
+      () => props.open,
+      (isOpen) => {
+        ro?.disconnect();
+        mo?.disconnect();
+        ro = void 0;
+        mo = void 0;
+        cancelAnimationFrame(raf);
+        clearTimeout(settleTimer);
+        tweening.value = false;
+        resizing.value = false;
+        const el = panelRef.value?.$el;
+        if (!isOpen || !(el instanceof HTMLElement)) return;
+        el.style.height = `${el.offsetHeight}px`;
+        raf = requestAnimationFrame(() => {
+          tweening.value = true;
+        });
+        const watchChildren = () => {
+          if (!ro) return;
+          ro.disconnect();
+          for (const child of Array.from(el.children)) ro.observe(child);
+        };
+        if (typeof ResizeObserver !== "undefined") {
+          ro = new ResizeObserver(() => retune(el));
+          watchChildren();
+        }
+        if (typeof MutationObserver !== "undefined") {
+          mo = new MutationObserver(() => {
+            watchChildren();
+            retune(el);
+          });
+          mo.observe(el, { childList: true, subtree: true, characterData: true });
+        }
+      },
+      { flush: "post" }
+    );
+    onBeforeUnmount(() => {
+      ro?.disconnect();
+      mo?.disconnect();
+      cancelAnimationFrame(raf);
+      clearTimeout(settleTimer);
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(DialogRoot), {
         open: __props.open,
@@ -57,10 +125,12 @@ 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],
+                  ref_key: "panelRef",
+                  ref: panelRef,
+                  class: ["pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden 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, tweening.value ? "transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none" : ""]],
                   style: __props.width ? { width: __props.width } : void 0
                 }, describedByAttrs.value), {
                   default: withCtx(() => [
@@ -105,14 +175,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       renderSlot(_ctx.$slots, "default")
                     ], 2)) : (openBlock(), createBlock(_sfc_main$2, {
                       key: 2,
-                      class: "min-h-0 flex-1 text-sm text-ink/90",
+                      class: normalizeClass(["min-h-0 flex-1 text-sm text-ink/90", resizing.value ? "[&_[data-scrollbarimpl]]:invisible" : ""]),
                       "content-class": bodyPad.value
                     }, {
                       default: withCtx(() => [
                         renderSlot(_ctx.$slots, "default")
                       ]),
                       _: 3
-                    }, 8, ["content-class"])),
+                    }, 8, ["class", "content-class"])),
                     _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [
                       renderSlot(_ctx.$slots, "footer")
                     ])) : createCommentVNode("", true)

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-N8O-LtCS.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-B-amVJsM.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.d.ts

@@ -16,15 +16,15 @@ type __VLS_Props = {
      */
     fillBody?: boolean;
 };
-declare var __VLS_33: {}, __VLS_52: {}, __VLS_60: {}, __VLS_62: {};
+declare var __VLS_35: {}, __VLS_54: {}, __VLS_62: {}, __VLS_64: {};
 type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_33) => any;
+    title?: (props: typeof __VLS_35) => any;
 } & {
-    default?: (props: typeof __VLS_52) => any;
+    default?: (props: typeof __VLS_54) => any;
 } & {
-    default?: (props: typeof __VLS_60) => any;
+    default?: (props: typeof __VLS_62) => any;
 } & {
-    footer?: (props: typeof __VLS_62) => any;
+    footer?: (props: typeof __VLS_64) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:open": (value: boolean) => any;

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-vlrgcEY_.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-N8O-LtCS.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-B-amVJsM.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-vlrgcEY_.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.1",
   "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

@@ -8,7 +8,8 @@ import {
   DialogRoot,
   DialogTitle,
 } from "reka-ui"
-import { computed, useSlots } from "vue"
+import type { ComponentPublicInstance } from "vue"
+import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
@@ -70,13 +71,125 @@ const bodyPad = computed(() =>
     .filter(Boolean)
     .join(" "),
 )
+
+/*
+ * Height is content-derived, so a body that arrives late — a placeholder swapped
+ * for the loaded thing — resizes the panel in a single frame, right on top of
+ * the open animation. CSS alone can't smooth it: `height: auto` isn't
+ * interpolable, and the keyword-interpolation escape hatches
+ * (`interpolate-size`, `calc-size()`) are Chromium-only, so they would do
+ * nothing in the WebKitGTK launcher. Measuring and pinning a pixel height is
+ * what works on every engine.
+ *
+ * The pin is always the panel's own natural height, so `max-h` still clips and
+ * the body keeps `flex-1 min-h-0` — an over-tall panel hands its overflow to the
+ * scroll area exactly as before. A panel whose size never moves is pinned once
+ * and never transitions.
+ */
+// reka renders a real element but exposes it as a component instance, so the
+// panel is reached through $el.
+const panelRef = ref<ComponentPublicInstance | null>(null)
+const tweening = ref(false)
+const resizing = ref(false)
+
+/** Kept in step with the `duration-fast` utility on the panel. */
+const TWEEN_MS = 160
+
+let ro: ResizeObserver | undefined
+let mo: MutationObserver | undefined
+let raf = 0
+let settleTimer: ReturnType<typeof setTimeout> | undefined
+
+// The height is driven imperatively rather than through a style binding. By the
+// time replacement content is in the DOM the panel has already reflowed to its
+// new size, so a bound value would only ever be written once, with no earlier
+// height for the transition to start from. Writing the OLD height, forcing a
+// reflow, then writing the new one gives the transition both ends.
+const retune = (el: HTMLElement) => {
+  const from = el.offsetHeight
+  el.style.height = ""
+  const to = el.offsetHeight
+  if (to === 0) return
+  if (to === from) {
+    el.style.height = `${to}px`
+    return
+  }
+  el.style.height = `${from}px`
+  void el.offsetHeight
+  el.style.height = `${to}px`
+
+  // While the panel is still catching up, the body is shorter than the content
+  // it already holds, so the scroll area would flash a bar for an overflow that
+  // resolves itself the moment the transition lands.
+  resizing.value = true
+  clearTimeout(settleTimer)
+  settleTimer = setTimeout(() => {
+    resizing.value = false
+  }, TWEEN_MS)
+}
+
+// Keyed off `open` rather than the ref: the panel is portalled and remounts on
+// every open, and the teardown has to run on close, when the ref is already gone.
+watch(
+  () => props.open,
+  (isOpen) => {
+    ro?.disconnect()
+    mo?.disconnect()
+    ro = undefined
+    mo = undefined
+    cancelAnimationFrame(raf)
+    clearTimeout(settleTimer)
+    tweening.value = false
+    resizing.value = false
+
+    const el = panelRef.value?.$el
+    if (!isOpen || !(el instanceof HTMLElement)) return
+
+    el.style.height = `${el.offsetHeight}px`
+    // The opening panel must not animate its height in from the pre-content box,
+    // so the transition only arms once that first pin has painted.
+    raf = requestAnimationFrame(() => {
+      tweening.value = true
+    })
+
+    // Two triggers, since either can move the height alone: the resize observer
+    // catches a child growing in place (an image decoding, a list filling in),
+    // the mutation observer catches one subtree swapped for another, where every
+    // observed box may keep its size. Children are observed, never the panel —
+    // that would feed the pin straight back in.
+    const watchChildren = () => {
+      if (!ro) return
+      ro.disconnect()
+      for (const child of Array.from(el.children)) ro.observe(child)
+    }
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(() => retune(el))
+      watchChildren()
+    }
+    if (typeof MutationObserver !== "undefined") {
+      mo = new MutationObserver(() => {
+        watchChildren()
+        retune(el)
+      })
+      mo.observe(el, { childList: true, subtree: true, characterData: true })
+    }
+  },
+  { flush: "post" },
+)
+
+onBeforeUnmount(() => {
+  ro?.disconnect()
+  mo?.disconnect()
+  cancelAnimationFrame(raf)
+  clearTimeout(settleTimer)
+})
 </script>
 
 <template>
   <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
@@ -100,8 +213,9 @@ const bodyPad = computed(() =>
            pass a description keeps the generated id and the link to
            DialogDescription. -->
       <DialogContent
-        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)]"
-        :class="widthClass"
+        ref="panelRef"
+        class="pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden 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)]"
+        :class="[widthClass, tweening ? 'transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none' : '']"
         :style="width ? { width } : undefined"
         v-bind="describedByAttrs"
       >
@@ -135,9 +249,14 @@ const bodyPad = computed(() =>
         >
           <slot />
         </div>
+        <!-- While the panel is still growing it is briefly shorter than the body
+             it already holds, so the scroll area raises a bar for an overflow
+             that resolves itself as the transition lands. Hiding just the bar
+             for the length of the tween leaves scrolling itself untouched. -->
         <LpScrollArea
           v-else
           class="min-h-0 flex-1 text-sm text-ink/90"
+          :class="resizing ? '[&_[data-scrollbarimpl]]:invisible' : ''"
           :content-class="bodyPad"
         >
           <slot />

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: "";