@leavepulse/ui 0.38.0 → 0.39.0

package/dist/assets/{LpCommandPalette-C0yStVNy.css → LpCommandPalette-DdETX0-G.css}

@@ -1,21 +1,21 @@
 
-.lp-cmd-excerpt[data-v-2a5d3558] {
+.lp-cmd-excerpt[data-v-eecd2c28] {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 /* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-2a5d3558] {
-  animation: lp-cmd-in-2a5d3558 140ms ease-out both;
+.lp-cmd-item[data-v-eecd2c28] {
+  animation: lp-cmd-in-eecd2c28 140ms ease-out both;
 }
-@keyframes lp-cmd-in-2a5d3558 {
+@keyframes lp-cmd-in-eecd2c28 {
 from {
     opacity: 0;
     transform: translateY(3px);
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-2a5d3558] {
+.lp-cmd-item[data-v-eecd2c28] {
     animation: none;
 }
 }

package/dist/assets/{LpShortcutsDialog-B7H-RZLQ.css → LpShortcutsDialog-Cap_ALQM.css}

@@ -1,12 +1,12 @@
 
 /* Two columns where there is room: the list is long enough that one column
    pushes the last group off a laptop screen. */
-.shortcut-groups[data-v-d86b724b] {
+.shortcut-groups[data-v-7b1cdfeb] {
   display: grid;
   gap: 18px;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 }
-.shortcut-group h3[data-v-d86b724b] {
+.shortcut-group h3[data-v-7b1cdfeb] {
   margin: 0 0 6px;
   color: var(--color-muted);
   font-size: 0.7rem;
@@ -14,31 +14,31 @@
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
-.shortcut-group dl[data-v-d86b724b] {
+.shortcut-group dl[data-v-7b1cdfeb] {
   display: flex;
   flex-direction: column;
   gap: 1px;
   margin: 0;
 }
-.shortcut-row[data-v-d86b724b] {
+.shortcut-row[data-v-7b1cdfeb] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 5px 0;
 }
-.shortcut-row dt[data-v-d86b724b] {
+.shortcut-row dt[data-v-7b1cdfeb] {
   color: var(--color-ink);
   font-size: 0.82rem;
   min-width: 0;
 }
-.shortcut-row dd[data-v-d86b724b] {
+.shortcut-row dd[data-v-7b1cdfeb] {
   display: flex;
   flex-shrink: 0;
   gap: 3px;
   margin: 0;
 }
-kbd[data-v-d86b724b] {
+kbd[data-v-7b1cdfeb] {
   display: inline-flex;
   min-width: 20px;
   align-items: center;

package/dist/chunks/{LpAddressInput-DOVpUONY.js → LpAddressInput-H5NdhK6c.js}

@@ -6,7 +6,7 @@ import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$1 } from "./LpFormField-CazBc2-a.js";
 import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpInput-9EXWUM9B.js";
-import { _ as _sfc_main$7 } from "./LpModal-Dq_qXN8-.js";
+import { _ as _sfc_main$7 } from "./LpModal-EyEdRuqF.js";
 import { _ as _sfc_main$6 } from "./LpSelect-ANIVtrpM.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = { class: "flex items-stretch gap-2" };

package/dist/chunks/{LpAppShell-CRDw1Du5.js → LpAppShell-BfqSA1ba.js}

@@ -3,7 +3,7 @@ import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpScrollArea-D8xyKXcF.js";
 import { _ as _sfc_main$4 } from "./LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-B1wLj-B2.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-DZ20iBxY.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = { class: "flex min-w-0 flex-1 flex-col" };
 const _hoisted_2 = { class: "relative flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };

package/dist/chunks/{LpConfirmDialog-BH7az_E7.js → LpConfirmDialog-BBRnMkV4.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, openBlock, createBlock, createSlots, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString, createElementVNode, normalizeClass } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpModal-Dq_qXN8-.js";
+import { _ as _sfc_main$1 } from "./LpModal-EyEdRuqF.js";
 const _hoisted_1 = { class: "inline-flex items-center gap-2.5" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
@@ -14,7 +14,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     danger: { type: Boolean },
     icon: {},
     loading: { type: Boolean },
-    loadingLabel: { default: "Working…" }
+    loadingLabel: { default: "Working…" },
+    glass: { type: Boolean }
   },
   emits: ["update:open", "confirm", "cancel"],
   setup(__props, { emit: __emit }) {
@@ -34,6 +35,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, {
+        glass: __props.glass,
         open: __props.open,
         title: __props.title,
         description: __props.description,
@@ -86,7 +88,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["open", "title", "description"]);
+      ]), 1032, ["glass", "open", "title", "description"]);
     };
   }
 });

package/dist/chunks/{LpDrawer-E67O8fFP.js → LpDrawer-B8vBnCWF.js}

@@ -1,4 +1,4 @@
-import { ref, defineComponent, computed, watch, onBeforeUnmount, useSlots, openBlock, createElementBlock, Fragment, withDirectives, createElementVNode, normalizeStyle, unref, vShow, normalizeClass, toDisplayString, createCommentVNode, renderSlot, createVNode, withCtx, createBlock, createTextVNode } from "vue";
+import { ref, defineComponent, computed, watch, onBeforeUnmount, useSlots, openBlock, createElementBlock, Fragment, withDirectives, createElementVNode, normalizeStyle, unref, normalizeClass, vShow, toDisplayString, createCommentVNode, renderSlot, createVNode, withCtx, createBlock, createTextVNode } from "vue";
 import { DrawerRoot, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHandle, DrawerTitle, DrawerDescription, DrawerClose } from "vaul-vue";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
@@ -36,7 +36,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     edgeOpenThreshold: { default: 0.3 },
     resizable: { type: Boolean },
     minSize: { default: "22rem" },
-    maxSize: { default: "96vw" }
+    maxSize: { default: "96vw" },
+    glass: { type: Boolean, default: false }
   },
   emits: ["update:open"],
   setup(__props, { emit: __emit }) {
@@ -51,7 +52,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(() => props.open, (open) => open ? claim() : release(), { immediate: true });
     onBeforeUnmount(release);
     const contentClass = computed(() => {
-      const base = "fixed z-(--z-modal) flex flex-col border-line bg-surface-raised shadow-panel outline-none";
+      const surface = props.glass ? "lp-glass-overlay" : "bg-surface-raised";
+      const base = `fixed z-(--z-modal) flex flex-col border-line ${surface} shadow-panel outline-none`;
       const map = {
         left: "inset-y-0 left-0 border-r rounded-r-card",
         right: "inset-y-0 right-0 border-l rounded-l-card",
@@ -266,9 +268,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         __props.edgeOpen && isHorizontal.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           withDirectives(createElementVNode("div", {
-            class: "lp-scrim pointer-events-none fixed inset-0",
+            class: normalizeClass(["lp-scrim pointer-events-none fixed inset-0", { "lp-scrim--light": __props.glass }]),
             style: normalizeStyle({ zIndex: unref(layer).scrim, opacity: peek.value, transition: peeking.value || reducedMotion() ? "none" : "opacity 0.18s ease-out" })
-          }, null, 4), [
+          }, null, 6), [
             [vShow, peeking.value || peek.value > 0]
           ]),
           withDirectives(createElementVNode("div", {
@@ -307,8 +309,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               default: withCtx(() => [
                 createVNode(unref(DrawerOverlay), {
                   style: normalizeStyle({ zIndex: unref(layer).scrim }),
-                  class: "lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
-                }, null, 8, ["style"]),
+                  class: normalizeClass(["lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]", { "lp-scrim--light": __props.glass }])
+                }, null, 8, ["style", "class"]),
                 createVNode(unref(DrawerContent), {
                   class: normalizeClass(contentClass.value),
                   style: normalizeStyle([sizeStyle.value, { zIndex: unref(layer).panel }]),

package/dist/chunks/{LpModal-Dq_qXN8-.js → LpModal-EyEdRuqF.js}

@@ -1,4 +1,4 @@
-import { defineComponent, computed, useSlots, watch, onBeforeUnmount, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, createElementVNode, mergeProps, createElementBlock, renderSlot, createCommentVNode, normalizeClass, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, computed, useSlots, watch, onBeforeUnmount, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass, createElementVNode, mergeProps, createElementBlock, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from "reka-ui";
 import { useShift } from "../composables/useShift.js";
 import { useModalLayer } from "../components/modalDepth.js";
@@ -33,7 +33,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     size: { default: "md" },
     width: {},
     fillBody: { type: Boolean },
-    autoFocus: { default: "auto" }
+    autoFocus: { default: "auto" },
+    glass: { type: Boolean, default: false }
   },
   emits: ["update:open"],
   setup(__props) {
@@ -123,9 +124,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(DialogPortal), null, {
             default: withCtx(() => [
               createVNode(unref(DialogOverlay), {
-                class: "lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]",
+                class: normalizeClass([{ "lp-scrim--light": __props.glass }, "lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"]),
                 style: normalizeStyle({ zIndex: unref(layer).scrim })
-              }, null, 8, ["style"]),
+              }, null, 8, ["class", "style"]),
               createElementVNode("div", {
                 class: "fixed inset-0 flex items-center justify-center pointer-events-none",
                 style: normalizeStyle({ zIndex: unref(layer).panel })
@@ -145,7 +146,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     createElementVNode("div", {
                       ref_key: "panelRef",
                       ref: panelRef,
-                      class: normalizeClass(["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", [widthClass.value, unref(tweening) ? "transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none" : ""]]),
+                      class: normalizeClass(["flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line shadow-panel", [__props.glass ? "lp-glass-overlay" : "bg-surface-raised", widthClass.value, unref(tweening) ? "transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none" : ""]]),
                       style: normalizeStyle({ ...__props.width ? { width: __props.width } : {}, ...hasAside.value ? { alignSelf: "stretch" } : {} })
                     }, [
                       __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("header", _hoisted_2, [

package/dist/chunks/{LpModalNav-CqxXbTkl.js → LpModalNav-BrDtP7b_.js}

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed, openBlock, createBlock, createSlots, withCtx, renderSlot, createElementVNode, normalizeClass, createVNode, createCommentVNode, createTextVNode, toDisplayString } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpModal-Dq_qXN8-.js";
-import { _ as _sfc_main$4 } from "./LpSidebar-B1wLj-B2.js";
+import { _ as _sfc_main$1 } from "./LpModal-EyEdRuqF.js";
+import { _ as _sfc_main$4 } from "./LpSidebar-DZ20iBxY.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpModalNav",
@@ -22,7 +22,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     mobileBreakpoint: { default: "lg" },
     navLabel: { default: "Sections" },
     navSide: { default: "start" },
-    fillBody: { type: Boolean }
+    fillBody: { type: Boolean },
+    glass: { type: Boolean }
   },
   emits: ["update:open", "update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -59,6 +60,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const railStyle = { maxHeight: "min(90vh, calc(100dvh - 2rem))" };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, {
+        glass: __props.glass,
         open: __props.open,
         title: __props.title,
         description: __props.description,
@@ -157,7 +159,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           key: "2"
         } : void 0
-      ]), 1032, ["open", "title", "description", "size", "width", "fill-body"]);
+      ]), 1032, ["glass", "open", "title", "description", "size", "width", "fill-body"]);
     };
   }
 });

package/dist/chunks/{LpSidebar-B1wLj-B2.js → LpSidebar-DZ20iBxY.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, ref, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, normalizeClass, renderSlot, createCommentVNode, createBlock, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
-import { _ as _sfc_main$3 } from "./LpDrawer-E67O8fFP.js";
+import { _ as _sfc_main$3 } from "./LpDrawer-B8vBnCWF.js";
 import { _ as _sfc_main$1 } from "./LpInput-9EXWUM9B.js";
 import { _ as _sfc_main$2 } from "./LpSidebarNav-llOcs_Fn.js";
 const _hoisted_1 = {

package/dist/components/LpAddressInput.vue.js

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

package/dist/components/LpAppShell.vue.js

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

package/dist/components/LpCommandPalette.vue.d.ts

@@ -151,6 +151,12 @@ type __VLS_Props = {
      * Hidden below the md breakpoint, where there is no room beside the list.
      */
     previewPane?: boolean;
+    /**
+     * Frosted glass instead of a solid panel: the page shows through,
+     * blurred, under a lighter scrim (.lp-glass-overlay, .lp-scrim--light).
+     * A look, not a behaviour, so it is the app's call and off by default.
+     */
+    glass?: boolean;
 };
 type __VLS_Slots = {
     /** Body of the preview pane for the highlighted command. */
@@ -170,6 +176,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     placeholder: string;
     emptyText: string;
     minChars: number;
+    glass: boolean;
     debounce: number;
     recentLimit: number;
     hotkey: boolean;

package/dist/components/LpCommandPalette.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, useId, shallowRef, watch, nextTick, openBlock, createBlock, unref, withCtx, createVNode, withModifiers, normalizeClass, createTextVNode, createElementVNode, createElementBlock, Fragment, renderList, createCommentVNode, toDisplayString, withDirectives, withKeys, vModelText, resolveDynamicComponent, normalizeStyle, renderSlot } from "vue";
+import { defineComponent, computed, ref, useId, shallowRef, watch, nextTick, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, withModifiers, createTextVNode, createElementVNode, createElementBlock, Fragment, renderList, createCommentVNode, toDisplayString, withDirectives, withKeys, vModelText, resolveDynamicComponent, normalizeStyle, renderSlot } from "vue";
 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-D8xyKXcF.js";
@@ -6,7 +6,7 @@ import { useAsyncTask } from "../composables/useAsyncTask.js";
 import { useClipboard } from "../composables/useClipboard.js";
 import { useHotkeys } from "../composables/useHotkeys.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpCommandPalette-C0yStVNy.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
+import '../assets/LpCommandPalette-DdETX0-G.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
 const _hoisted_2 = ["title", "onClick"];
 const _hoisted_3 = ["aria-activedescendant", "placeholder", "onKeydown"];
 const _hoisted_4 = { class: "flex min-h-0 flex-1" };
@@ -94,7 +94,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     excerptLines: { default: 4 },
     groupLimit: { default: 0 },
     layoutFallback: { type: Boolean, default: true },
-    previewPane: { type: Boolean, default: false }
+    previewPane: { type: Boolean, default: false },
+    glass: { type: Boolean, default: false }
   },
   emits: ["update:open", "select", "run"],
   setup(__props, { emit: __emit }) {
@@ -457,7 +458,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           await nextTick();
           inputRef.value?.focus();
         }
-      }
+      },
+      { immediate: true }
     );
     useHotkeys(
       () => props.hotkey ? [
@@ -478,9 +480,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(unref(DialogPortal), null, {
             default: withCtx(() => [
-              createVNode(unref(DialogOverlay), { class: "lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]" }),
+              createVNode(unref(DialogOverlay), {
+                class: normalizeClass([{ "lp-scrim--light": __props.glass }, "lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"])
+              }, null, 8, ["class"]),
               createVNode(unref(DialogContent), {
-                class: normalizeClass(["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 lp-glass-overlay shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]", __props.previewPane && "md:h-[min(76vh,36rem)] md:w-[min(92vw,64rem)]"]),
+                class: normalizeClass(["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 shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]", [
+                  __props.glass ? "lp-glass-overlay" : "bg-surface-raised",
+                  __props.previewPane && "md:h-[min(76vh,36rem)] md:w-[min(92vw,64rem)]"
+                ]]),
                 onOpenAutoFocus: _cache[2] || (_cache[2] = withModifiers(() => {
                 }, ["prevent"]))
               }, {
@@ -754,7 +761,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2a5d3558"]]);
+const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-eecd2c28"]]);
 export {
   LpCommandPalette as default
 };

package/dist/components/LpConfirmDialog.vue.d.ts

@@ -28,6 +28,8 @@ type __VLS_Props = {
      */
     loading?: boolean;
     loadingLabel?: string;
+    /** Frosted glass panel, passed to LpModal. Off by default. */
+    glass?: boolean;
 };
 declare var __VLS_16: {};
 type __VLS_Slots = {} & {

package/dist/components/LpConfirmDialog.vue.js

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

package/dist/components/LpDrawer.vue.d.ts

@@ -63,6 +63,12 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     minSize?: string;
     /** Max main-axis size while resizing (any CSS length). Default 96vw. */
     maxSize?: string;
+    /**
+     * Frosted glass instead of a solid panel: the page shows through,
+     * blurred, under a lighter scrim (.lp-glass-overlay, .lp-scrim--light).
+     * A look, not a behaviour, so it is the app's call and off by default.
+     */
+    glass?: boolean;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:open": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<{
@@ -128,11 +134,18 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     minSize?: string;
     /** Max main-axis size while resizing (any CSS length). Default 96vw. */
     maxSize?: string;
+    /**
+     * Frosted glass instead of a solid panel: the page shows through,
+     * blurred, under a lighter scrim (.lp-glass-overlay, .lp-scrim--light).
+     * A look, not a behaviour, so it is the app's call and off by default.
+     */
+    glass?: boolean;
 }> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg" | "xl";
     side: "left" | "right";
+    glass: boolean;
     dismissible: boolean;
     noDragControls: boolean;
     edgeSize: number;

package/dist/components/LpDrawer.vue.js

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

package/dist/components/LpModal.vue.d.ts

@@ -25,6 +25,12 @@ type __VLS_Props = {
      * the element yourself.
      */
     autoFocus?: "auto" | "none" | string;
+    /**
+     * Frosted glass instead of a solid panel: the page shows through,
+     * blurred, under a lighter scrim (.lp-glass-overlay, .lp-scrim--light).
+     * A look, not a behaviour, so it is the app's call and off by default.
+     */
+    glass?: boolean;
 };
 declare var __VLS_31: {}, __VLS_39: {}, __VLS_58: {}, __VLS_66: {}, __VLS_68: {}, __VLS_70: {};
 type __VLS_Slots = {} & {
@@ -47,6 +53,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     size: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
     autoFocus: "auto" | "none" | string;
+    glass: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/LpModal.vue.js

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

package/dist/components/LpModalNav.vue.d.ts

@@ -31,6 +31,8 @@ type __VLS_Props = {
      * column inside the body, and the rail is no longer in the body.
      */
     fillBody?: boolean;
+    /** Frosted glass panel, passed to LpModal. Off by default. */
+    glass?: boolean;
 };
 declare var __VLS_36: {}, __VLS_38: {}, __VLS_41: {};
 type __VLS_Slots = {} & {

package/dist/components/LpModalNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModalNav-CqxXbTkl.js";
+import { _ as _sfc_main } from "../chunks/LpModalNav-BrDtP7b_.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpShortcutsDialog.vue.d.ts

@@ -12,6 +12,8 @@ type __VLS_Props = {
     groups: ShortcutGroup[];
     title?: string;
     description?: string;
+    /** Frosted glass panel, passed to LpModal. Off by default. */
+    glass?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:open": (value: boolean) => any;

package/dist/components/LpShortcutsDialog.vue.js

@@ -1,15 +1,16 @@
 import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, unref } from "vue";
-import { _ as _sfc_main$1 } from "../chunks/LpModal-Dq_qXN8-.js";
+import { _ as _sfc_main$1 } from "../chunks/LpModal-EyEdRuqF.js";
 import { appleModifierLabel } from "../composables/useHotkeys.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpShortcutsDialog-B7H-RZLQ.css';const _hoisted_1 = { class: "shortcut-groups" };
+import '../assets/LpShortcutsDialog-Cap_ALQM.css';const _hoisted_1 = { class: "shortcut-groups" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpShortcutsDialog",
   props: {
     open: { type: Boolean, default: false },
     groups: {},
     title: { default: "Keyboard shortcuts" },
-    description: {}
+    description: {},
+    glass: { type: Boolean }
   },
   emits: ["update:open"],
   setup(__props, { emit: __emit }) {
@@ -17,6 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, {
+        glass: props.glass,
         open: props.open,
         size: "lg",
         title: props.title,
@@ -53,11 +55,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])
         ]),
         _: 1
-      }, 8, ["open", "title", "description"]);
+      }, 8, ["glass", "open", "title", "description"]);
     };
   }
 });
-const LpShortcutsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d86b724b"]]);
+const LpShortcutsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7b1cdfeb"]]);
 export {
   LpShortcutsDialog as default
 };

package/dist/components/LpSidebar.vue.js

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

package/dist/index.js

@@ -1,10 +1,10 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-DOVpUONY.js";
+import { _ as _2 } from "./chunks/LpAddressInput-H5NdhK6c.js";
 import { _ as _3 } from "./chunks/LpMapPicker-ul4oYno6.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BlvtGB2P.js";
 import { _ as _5 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _6 } from "./chunks/LpAppShell-CRDw1Du5.js";
+import { _ as _6 } from "./chunks/LpAppShell-BfqSA1ba.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DExlIZe_.js";
 import { _ as _8 } from "./chunks/LpAvatar-B3-xAOH3.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
@@ -19,12 +19,12 @@ import { _ as _15 } from "./chunks/LpCodeBlock-Bo0B4TFR.js";
 import { _ as _16 } from "./chunks/LpColorPicker-BlXea7LM.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
-import { _ as _17 } from "./chunks/LpConfirmDialog-BH7az_E7.js";
+import { _ as _17 } from "./chunks/LpConfirmDialog-BBRnMkV4.js";
 import { _ as _18 } from "./chunks/LpContextMenu-CwW1QXe_.js";
 import { _ as _19 } from "./chunks/LpDatePicker-CwOToxGq.js";
 import { _ as _20 } from "./chunks/LpDisclosure-ChQYmjlR.js";
 import { _ as _21 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _22 } from "./chunks/LpDrawer-E67O8fFP.js";
+import { _ as _22 } from "./chunks/LpDrawer-B8vBnCWF.js";
 import { _ as _23 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { default as default4 } from "./components/LpDropzone.vue.js";
 import { _ as _24 } from "./chunks/LpEmptyState-Dsdqz1Wj.js";
@@ -40,8 +40,8 @@ import { fileNameOf } from "./components/lightbox.js";
 import { _ as _31 } from "./chunks/LpLink-DCND-zyu.js";
 import { _ as _32 } from "./chunks/LpLogViewer-CaRy5MeS.js";
 import { _ as _33 } from "./chunks/LpMediaGallery-Cid7PGYx.js";
-import { _ as _34 } from "./chunks/LpModal-Dq_qXN8-.js";
-import { _ as _35 } from "./chunks/LpModalNav-CqxXbTkl.js";
+import { _ as _34 } from "./chunks/LpModal-EyEdRuqF.js";
+import { _ as _35 } from "./chunks/LpModalNav-BrDtP7b_.js";
 import { _ as _36 } from "./chunks/LpNotificationBell-DyGGsMAM.js";
 import { _ as _37 } from "./chunks/LpNumberField-CWuX08iX.js";
 import { _ as _38 } from "./chunks/LpTimeField-K6nAGboX.js";
@@ -64,7 +64,7 @@ import { _ as _53 } from "./chunks/LpSelect-ANIVtrpM.js";
 import { _ as _54 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _55 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default6 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _56 } from "./chunks/LpSidebar-B1wLj-B2.js";
+import { _ as _56 } from "./chunks/LpSidebar-DZ20iBxY.js";
 import { _ as _57 } from "./chunks/LpSkeleton-CTI-vBgW.js";
 import { _ as _58 } from "./chunks/LpSlider-BwNIBkAK.js";
 import { _ as _59 } from "./chunks/LpSparkline-C6xQ2dwv.js";

package/package.json

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

package/src/components/LpCommandPalette.vue

@@ -199,6 +199,12 @@ const props = withDefaults(
      * Hidden below the md breakpoint, where there is no room beside the list.
      */
     previewPane?: boolean
+    /**
+     * Frosted glass instead of a solid panel: the page shows through,
+     * blurred, under a lighter scrim (.lp-glass-overlay, .lp-scrim--light).
+     * A look, not a behaviour, so it is the app's call and off by default.
+     */
+    glass?: boolean
   }>(),
   {
     placeholder: "Type a command or search…",
@@ -213,6 +219,7 @@ const props = withDefaults(
     groupLimit: 0,
     layoutFallback: true,
     previewPane: false,
+    glass: false,
   },
 )
 
@@ -780,6 +787,11 @@ function onEscape(event: KeyboardEvent) {
 // into the mode someone left three screens deep is never what they meant by
 // ⌘K, and a pending request from last time is dropped rather than landing in
 // the new list.
+//
+// Immediate, because a palette mounted already open — lazily, on the first
+// ⌘K — never sees `open` change, and reka's own auto-focus is turned off
+// below: without this the first open left focus on the page and the first
+// keystrokes went nowhere.
 watch(
   () => props.open,
   async (o) => {
@@ -795,6 +807,7 @@ watch(
       inputRef.value?.focus()
     }
   },
+  { immediate: true },
 )
 
 // Through useHotkeys rather than a listener of its own: the palette is the one
@@ -819,11 +832,15 @@ useHotkeys(() =>
   <DialogRoot :open="open" @update:open="(v) => emit('update:open', v)">
     <DialogPortal>
       <DialogOverlay
+        :class="{ 'lp-scrim--light': glass }"
         class="lp-scrim fixed inset-0 z-(--z-overlay) 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 lp-glass-overlay shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]"
-        :class="previewPane && 'md:h-[min(76vh,36rem)] md:w-[min(92vw,64rem)]'"
+        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 shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]"
+        :class="[
+          glass ? 'lp-glass-overlay' : 'bg-surface-raised',
+          previewPane && 'md:h-[min(76vh,36rem)] md:w-[min(92vw,64rem)]',
+        ]"
         @open-auto-focus.prevent
       >
         <DialogTitle class="sr-only">Command palette</DialogTitle>

package/src/components/LpConfirmDialog.vue

@@ -36,6 +36,8 @@ const props = withDefaults(
      */
     loading?: boolean
     loadingLabel?: string
+    /** Frosted glass panel, passed to LpModal. Off by default. */
+    glass?: boolean
   }>(),
   { confirmLabel: "Confirm", cancelLabel: "Cancel", loadingLabel: "Working…" },
 )
@@ -76,6 +78,7 @@ function cancel() {
 
 <template>
   <LpModal
+    :glass="glass"
     :open="open"
     :title="title"
     :description="description"

package/src/components/LpDrawer.vue

@@ -101,6 +101,12 @@ const props = withDefaults(
     minSize?: string
     /** Max main-axis size while resizing (any CSS length). Default 96vw. */
     maxSize?: string
+    /**
+     * Frosted glass instead of a solid panel: the page shows through,
+     * blurred, under a lighter scrim (.lp-glass-overlay, .lp-scrim--light).
+     * A look, not a behaviour, so it is the app's call and off by default.
+     */
+    glass?: boolean
   }>(),
   {
     side: "right",
@@ -111,6 +117,7 @@ const props = withDefaults(
     edgeOpenThreshold: 0.3,
     minSize: "22rem",
     maxSize: "96vw",
+    glass: false,
   },
 )
 
@@ -142,7 +149,8 @@ watch(() => props.open, (open) => (open ? claim() : release()), { immediate: tru
 onBeforeUnmount(release)
 
 const contentClass = computed(() => {
-  const base = "fixed z-(--z-modal) flex flex-col border-line bg-surface-raised shadow-panel outline-none"
+  const surface = props.glass ? "lp-glass-overlay" : "bg-surface-raised"
+  const base = `fixed z-(--z-modal) flex flex-col border-line ${surface} shadow-panel outline-none`
   const map: Record<Direction, string> = {
     left: "inset-y-0 left-0 border-r rounded-r-card",
     right: "inset-y-0 right-0 border-l rounded-l-card",
@@ -431,6 +439,7 @@ const previewStyle = computed(() => {
     <div
       v-show="peeking || peek > 0"
       class="lp-scrim pointer-events-none fixed inset-0"
+      :class="{ 'lp-scrim--light': glass }"
       :style="{ zIndex: layer.scrim, opacity: peek, transition: peeking || reducedMotion() ? 'none' : 'opacity 0.18s ease-out' }"
     />
     <div
@@ -463,6 +472,7 @@ const previewStyle = computed(() => {
       <DrawerOverlay
         :style="{ zIndex: layer.scrim }"
         class="lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
+        :class="{ 'lp-scrim--light': glass }"
       />
       <DrawerContent
         :class="contentClass"

package/src/components/LpModal.vue

@@ -62,8 +62,14 @@ const props = withDefaults(
      * the element yourself.
      */
     autoFocus?: "auto" | "none" | string
+    /**
+     * Frosted glass instead of a solid panel: the page shows through,
+     * blurred, under a lighter scrim (.lp-glass-overlay, .lp-scrim--light).
+     * A look, not a behaviour, so it is the app's call and off by default.
+     */
+    glass?: boolean
   }>(),
-  { size: "md", autoFocus: "auto" },
+  { size: "md", autoFocus: "auto", glass: false },
 )
 
 defineEmits<{ (e: "update:open", value: boolean): void }>()
@@ -222,6 +228,7 @@ watch(
   <DialogRoot :open="open" @update:open="(v) => $emit('update:open', v)">
     <DialogPortal>
       <DialogOverlay
+        :class="{ 'lp-scrim--light': glass }"
         class="lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
         :style="{ zIndex: layer.scrim }"
       />
@@ -290,8 +297,8 @@ watch(
       </aside>
       <div
         ref="panelRef"
-        class="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"
-        :class="[widthClass, tweening ? 'transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none' : '']"
+        class="flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line shadow-panel"
+        :class="[glass ? 'lp-glass-overlay' : 'bg-surface-raised', widthClass, tweening ? 'transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none' : '']"
         :style="{ ...(width ? { width } : {}), ...(hasAside ? { alignSelf: 'stretch' } : {}) }"
       >
         <header v-if="title || $slots.title" class="flex shrink-0 items-start justify-between gap-4 p-5 pb-3">

package/src/components/LpModalNav.vue

@@ -55,6 +55,8 @@ const props = withDefaults(
      * column inside the body, and the rail is no longer in the body.
      */
     fillBody?: boolean
+    /** Frosted glass panel, passed to LpModal. Off by default. */
+    glass?: boolean
   }>(),
   {
     size: "2xl",
@@ -125,6 +127,7 @@ const railStyle = { maxHeight: "min(90vh, calc(100dvh - 2rem))" }
 
 <template>
   <LpModal
+    :glass="glass"
     :open="open"
     :title="title"
     :description="description"

package/src/components/LpShortcutsDialog.vue

@@ -30,6 +30,8 @@ const props = withDefaults(
     groups: ShortcutGroup[]
     title?: string
     description?: string
+    /** Frosted glass panel, passed to LpModal. Off by default. */
+    glass?: boolean
   }>(),
   { open: false, title: "Keyboard shortcuts" },
 )
@@ -39,6 +41,7 @@ const emit = defineEmits<{ (e: "update:open", value: boolean): void }>()
 
 <template>
   <LpModal
+    :glass="props.glass"
     :open="props.open"
     size="lg"
     :title="props.title"

package/src/tokens/tokens.css

@@ -522,23 +522,37 @@
   --scrim-opacity: 0.78;
 }
 
+/*
+ * Under a glass panel (.lp-glass-overlay) the usual tint leaves nothing but
+ * grey to see through it, so the scrim dims less and the panel's own blur
+ * does the separating. Without a working blur the no-backdrop rule above is
+ * more specific and puts the full tint back.
+ */
+.lp-scrim--light {
+  --scrim-opacity: 0.32;
+}
+
 /*
  * Frosted overlay: a floating panel that lets the page show through, softened.
  * For surfaces that float over everything and are read briefly (the command
  * palette), where a hint of what lies beneath says "this is on top, the page
- * is still there" better than a solid slab. The fill keeps enough opacity for
- * text to read without the blur; where the blur does not composite
- * (WebKitGTK, see above) the fill turns solid instead of leaving the page
- * readable through it.
+ * is still there" better than a solid slab. It sits on a dimmed scrim, so the
+ * fill has to be well below opaque for anything to show through at all — at
+ * 80 % the panel read as solid; the blur is what keeps text legible at 45 %.
+ * The faint top-down sheen is the edge light of glass. Where the blur does
+ * not composite (WebKitGTK, see above) the fill turns solid instead of
+ * leaving the page readable through it.
  */
 .lp-glass-overlay {
-  background-color: color-mix(in srgb, var(--color-surface-raised) var(--glass-overlay-fill, 82%), transparent);
-  -webkit-backdrop-filter: blur(var(--glass-overlay-blur, 24px)) saturate(140%);
-  backdrop-filter: blur(var(--glass-overlay-blur, 24px)) saturate(140%);
+  background-color: color-mix(in srgb, var(--color-surface-raised) var(--glass-overlay-fill, 45%), transparent);
+  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.05), transparent 45%);
+  -webkit-backdrop-filter: blur(var(--glass-overlay-blur, 28px)) saturate(170%);
+  backdrop-filter: blur(var(--glass-overlay-blur, 28px)) saturate(170%);
 }
 
 :root[data-lp-no-backdrop] .lp-glass-overlay {
   background-color: var(--color-surface-raised);
+  background-image: none;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
 }