@leavepulse/ui 0.37.4 → 0.37.5

package/dist/chunks/{LpAddressInput-C8NZWkH_.js → LpAddressInput-DOVpUONY.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-D3QxgWaT.js";
+import { _ as _sfc_main$7 } from "./LpModal-Dq_qXN8-.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/{LpConfirmDialog-B6RAvDES.js → LpConfirmDialog-BH7az_E7.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-D3QxgWaT.js";
+import { _ as _sfc_main$1 } from "./LpModal-Dq_qXN8-.js";
 const _hoisted_1 = { class: "inline-flex items-center gap-2.5" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",

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

@@ -1,4 +1,4 @@
-import { defineComponent, computed, useSlots, watch, onBeforeUnmount, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, createElementVNode, createElementBlock, renderSlot, createCommentVNode, mergeProps, createTextVNode, toDisplayString, normalizeClass } from "vue";
+import { defineComponent, computed, useSlots, watch, onBeforeUnmount, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, createElementVNode, mergeProps, createElementBlock, renderSlot, createCommentVNode, normalizeClass, 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";
@@ -8,7 +8,7 @@ import { _ as _sfc_main$2 } from "./LpScrollArea-D8xyKXcF.js";
 const _hoisted_1 = {
   key: 0,
   "data-lp-modal-aside": "",
-  class: "pointer-events-auto flex min-h-0 flex-col"
+  class: "flex min-h-0 flex-col"
 };
 const _hoisted_2 = {
   key: 0,
@@ -22,7 +22,7 @@ const _hoisted_4 = {
 const _hoisted_5 = {
   key: 1,
   "data-lp-modal-aside": "",
-  class: "pointer-events-auto flex min-h-0 flex-col"
+  class: "flex min-h-0 flex-col"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpModal",
@@ -83,8 +83,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     ];
     function onOpenAutoFocus(event) {
       if (props.autoFocus === "none") return;
-      const panel = panelRef.value?.$el;
-      if (!(panel instanceof HTMLElement)) return;
+      const panel = panelRef.value;
+      if (!panel) return;
       const selectors = props.autoFocus === "auto" ? AUTO_FOCUS_ORDER : [props.autoFocus];
       for (const selector of selectors) {
         const target = panel.querySelector(selector);
@@ -110,8 +110,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       () => props.open ? panelRef.value : null,
       (panel) => {
-        const el = panel?.$el;
-        sizedEl.value = el instanceof HTMLElement ? el : null;
+        sizedEl.value = panel;
       },
       { flush: "post" }
     );
@@ -131,24 +130,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: "fixed inset-0 flex items-center justify-center pointer-events-none",
                 style: normalizeStyle({ zIndex: unref(layer).panel })
               }, [
-                createElementVNode("div", {
-                  class: "flex items-start",
-                  style: normalizeStyle(hasAside.value ? { maxHeight: "min(90vh, calc(100dvh - 2rem))" } : void 0)
-                }, [
-                  __props.open && _ctx.$slots.aside ? (openBlock(), createElementBlock("aside", _hoisted_1, [
-                    renderSlot(_ctx.$slots, "aside")
-                  ])) : createCommentVNode("", true),
-                  createVNode(unref(DialogContent), mergeProps({
-                    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, unref(tweening) ? "transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none" : ""]],
-                    style: { ...__props.width ? { width: __props.width } : {}, ...hasAside.value ? { alignSelf: "stretch" } : {} }
-                  }, describedByAttrs.value, {
-                    onOpenAutoFocus,
-                    onInteractOutside,
-                    onPointerDownOutside: onInteractOutside
-                  }), {
-                    default: withCtx(() => [
+                createVNode(unref(DialogContent), mergeProps({
+                  class: "pointer-events-auto flex min-h-0 items-start 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)]",
+                  style: { maxHeight: "min(90vh, calc(100dvh - 2rem))" }
+                }, describedByAttrs.value, {
+                  onOpenAutoFocus,
+                  onInteractOutside,
+                  onPointerDownOutside: onInteractOutside
+                }), {
+                  default: withCtx(() => [
+                    _ctx.$slots.aside ? (openBlock(), createElementBlock("aside", _hoisted_1, [
+                      renderSlot(_ctx.$slots, "aside")
+                    ])) : createCommentVNode("", true),
+                    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" : ""]]),
+                      style: normalizeStyle({ ...__props.width ? { width: __props.width } : {}, ...hasAside.value ? { alignSelf: "stretch" } : {} })
+                    }, [
                       __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("header", _hoisted_2, [
                         createElementVNode("div", _hoisted_3, [
                           createVNode(unref(DialogTitle), { class: "text-base font-semibold text-ink" }, {
@@ -202,13 +201,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [
                         renderSlot(_ctx.$slots, "footer")
                       ])) : createCommentVNode("", true)
-                    ]),
-                    _: 3
-                  }, 16, ["class", "style"]),
-                  __props.open && _ctx.$slots.asideEnd ? (openBlock(), createElementBlock("aside", _hoisted_5, [
-                    renderSlot(_ctx.$slots, "asideEnd")
-                  ])) : createCommentVNode("", true)
-                ], 4)
+                    ], 6),
+                    _ctx.$slots.asideEnd ? (openBlock(), createElementBlock("aside", _hoisted_5, [
+                      renderSlot(_ctx.$slots, "asideEnd")
+                    ])) : createCommentVNode("", true)
+                  ]),
+                  _: 3
+                }, 16)
               ], 4)
             ]),
             _: 3

package/dist/chunks/{LpModalNav--a3i7c89.js → LpModalNav-B42a7R-3.js}

@@ -1,7 +1,7 @@
 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-D3QxgWaT.js";
+import { _ as _sfc_main$1 } from "./LpModal-Dq_qXN8-.js";
 import { _ as _sfc_main$4 } from "./LpSidebar-DvxMte3k.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/components/LpAddressInput.vue.js

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

package/dist/components/LpConfirmDialog.vue.js

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

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

@@ -26,19 +26,19 @@ type __VLS_Props = {
      */
     autoFocus?: "auto" | "none" | string;
 };
-declare var __VLS_21: {}, __VLS_41: {}, __VLS_60: {}, __VLS_68: {}, __VLS_70: {}, __VLS_72: {};
+declare var __VLS_31: {}, __VLS_39: {}, __VLS_58: {}, __VLS_66: {}, __VLS_68: {}, __VLS_70: {};
 type __VLS_Slots = {} & {
-    aside?: (props: typeof __VLS_21) => any;
+    aside?: (props: typeof __VLS_31) => any;
 } & {
-    title?: (props: typeof __VLS_41) => any;
+    title?: (props: typeof __VLS_39) => any;
 } & {
-    default?: (props: typeof __VLS_60) => any;
+    default?: (props: typeof __VLS_58) => any;
 } & {
-    default?: (props: typeof __VLS_68) => any;
+    default?: (props: typeof __VLS_66) => any;
 } & {
-    footer?: (props: typeof __VLS_70) => any;
+    footer?: (props: typeof __VLS_68) => any;
 } & {
-    asideEnd?: (props: typeof __VLS_72) => any;
+    asideEnd?: (props: typeof __VLS_70) => 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-D3QxgWaT.js";
+import { _ as _sfc_main } from "../chunks/LpModal-Dq_qXN8-.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModalNav.vue.js

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

package/dist/components/LpShortcutsDialog.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, unref } from "vue";
-import { _ as _sfc_main$1 } from "../chunks/LpModal-D3QxgWaT.js";
+import { _ as _sfc_main$1 } from "../chunks/LpModal-Dq_qXN8-.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" };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-C8NZWkH_.js";
+import { _ as _2 } from "./chunks/LpAddressInput-DOVpUONY.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";
@@ -19,7 +19,7 @@ import { _ as _15 } from "./chunks/LpCodeBlock-Bo0B4TFR.js";
 import { _ as _16 } from "./chunks/LpColorPicker-CFC6iaNK.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-B6RAvDES.js";
+import { _ as _17 } from "./chunks/LpConfirmDialog-BH7az_E7.js";
 import { _ as _18 } from "./chunks/LpContextMenu-B6WBLleS.js";
 import { _ as _19 } from "./chunks/LpDatePicker-BPbvu3cZ.js";
 import { _ as _20 } from "./chunks/LpDisclosure-ChQYmjlR.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-y53ZqSVq.js";
 import { _ as _33 } from "./chunks/LpMediaGallery-Cid7PGYx.js";
-import { _ as _34 } from "./chunks/LpModal-D3QxgWaT.js";
-import { _ as _35 } from "./chunks/LpModalNav--a3i7c89.js";
+import { _ as _34 } from "./chunks/LpModal-Dq_qXN8-.js";
+import { _ as _35 } from "./chunks/LpModalNav-B42a7R-3.js";
 import { _ as _36 } from "./chunks/LpNotificationBell-lHePf89W.js";
 import { _ as _37 } from "./chunks/LpNumberField-CWuX08iX.js";
 import { _ as _38 } from "./chunks/LpNumberFlow-amWYaeuA.js";

package/package.json

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

package/src/components/LpModal.vue

@@ -8,7 +8,6 @@ import {
   DialogRoot,
   DialogTitle,
 } from "reka-ui"
-import type { ComponentPublicInstance } from "vue"
 import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { useShift } from "../composables/useShift"
 import { useModalLayer } from "./modalDepth"
@@ -143,7 +142,7 @@ const bodyPad = computed(() =>
  * scroll area exactly as before. A panel whose size never moves is pinned once
  * and never transitions.
  */
-const panelRef = ref<ComponentPublicInstance | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
 
 /**
  * Controls that are worth landing on when the dialog opens, in order of
@@ -171,8 +170,8 @@ const AUTO_FOCUS_ORDER = [
  */
 function onOpenAutoFocus(event: Event) {
   if (props.autoFocus === "none") return
-  const panel = panelRef.value?.$el
-  if (!(panel instanceof HTMLElement)) return
+  const panel = panelRef.value
+  if (!panel) return
 
   const selectors =
     props.autoFocus === "auto" ? AUTO_FOCUS_ORDER : [props.autoFocus]
@@ -210,13 +209,10 @@ const {
   resizing,
 } = useShift({ axis: "height", enabled: () => props.open })
 
-// reka renders a real element but exposes it as a component instance, so the
-// sized element is handed over through $el once the panel has mounted.
 watch(
   () => (props.open ? panelRef.value : null),
   (panel) => {
-    const el = panel?.$el
-    sizedEl.value = el instanceof HTMLElement ? el : null
+    sizedEl.value = panel
   },
   { flush: "post" },
 )
@@ -265,48 +261,38 @@ watch(
         class="fixed inset-0 flex items-center justify-center pointer-events-none"
         :style="{ zIndex: layer.panel }"
       >
-      <!-- The dialog and its aside stand in a row of their own, and that row is
-           what the wrapper centres. Aligning them on the full-screen wrapper
-           instead would pin them to the top of the WINDOW, and the dialog would
-           be free to end up shorter than the aside beside it.
-           `items-start` inside the row: the row collapses to the taller of the
-           two, both hang from its top edge, and neither is stretched. -->
-      <div
-        class="flex items-start"
-        :style="hasAside ? { maxHeight: 'min(90vh, calc(100dvh - 2rem))' } : undefined"
+      <!-- The dialog and its asides stand in one row, and that row IS the
+           DialogContent. An aside rendered as a sibling of DialogContent sat
+           outside the modal: reka marks everything outside aria-hidden and traps
+           focus inside, so a section list beside the dialog could be neither
+           tabbed to nor read by a screen reader. Inside DialogContent it belongs
+           to the dialog, while the visible card is the inner panel, so nothing
+           moves on screen.
+           `items-start`: the row collapses to the taller of the two, both hang
+           from its top edge, and neither is stretched. Without a description
+           reka-ui warns on every open, and the opt-out it checks for is an
+           ABSENT `aria-describedby`; a caller that passes a description keeps
+           the link to DialogDescription. -->
+      <DialogContent
+        class="pointer-events-auto flex min-h-0 items-start 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)]"
+        :style="{ maxHeight: 'min(90vh, calc(100dvh - 2rem))' }"
+        v-bind="describedByAttrs"
+        @open-auto-focus="onOpenAutoFocus"
+        @interact-outside="onInteractOutside"
+        @pointer-down-outside="onInteractOutside"
       >
-      <!-- Bound to `open`, not to the slot alone: DialogContent unmounts itself
-           with the dialog, but an aside is an ordinary node in the portal and
-           stayed on screen after the dialog closed — a section list floating
-           over the page with nothing behind it.
-
-           `pointer-events-auto` because the wrapper lets clicks through to the
-           overlay, and the aside is not the overlay. `data-lp-modal-aside` is
-           what tells `interact-outside` a click here is not a click on the
-           scrim — without it the dialog closes under the pointer. -->
       <aside
-        v-if="open && $slots.aside"
+        v-if="$slots.aside"
         data-lp-modal-aside
-        class="pointer-events-auto flex min-h-0 flex-col"
+        class="flex min-h-0 flex-col"
       >
         <slot name="aside" />
       </aside>
-      <!-- Without a description reka-ui warns on every open, and the opt-out it
-           checks for is an ABSENT `aria-describedby` — despite the message
-           naming the string "undefined" (a leftover from Radix, where
-           `aria-describedby={undefined}` is how you drop the attribute).
-           Dropping it here is what silences the warning; a caller that does
-           pass a description keeps the generated id and the link to
-           DialogDescription. -->
-      <DialogContent
+      <div
         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="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' : '']"
         :style="{ ...(width ? { width } : {}), ...(hasAside ? { alignSelf: 'stretch' } : {}) }"
-        v-bind="describedByAttrs"
-        @open-auto-focus="onOpenAutoFocus"
-        @interact-outside="onInteractOutside"
-        @pointer-down-outside="onInteractOutside"
       >
         <header v-if="title || $slots.title" class="flex shrink-0 items-start justify-between gap-4 p-5 pb-3">
           <div class="flex flex-col gap-1">
@@ -357,16 +343,15 @@ watch(
         <footer v-if="$slots.footer" class="flex shrink-0 justify-end gap-2 p-5 pt-4">
           <slot name="footer" />
         </footer>
-      </DialogContent>
-
+      </div>
       <aside
-        v-if="open && $slots.asideEnd"
+        v-if="$slots.asideEnd"
         data-lp-modal-aside
-        class="pointer-events-auto flex min-h-0 flex-col"
+        class="flex min-h-0 flex-col"
       >
         <slot name="asideEnd" />
       </aside>
-      </div>
+      </DialogContent>
       </div>
     </DialogPortal>
   </DialogRoot>