@leavepulse/ui 0.35.0 → 0.36.0

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

package/dist/chunks/LpModal-7LvuAA7U.js

@@ -0,0 +1,224 @@
+import { defineComponent, computed, useSlots, watch, onBeforeUnmount, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, createElementVNode, createElementBlock, renderSlot, createCommentVNode, mergeProps, createTextVNode, toDisplayString, normalizeClass } 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";
+import { CLOSE_ICON } from "../components/dropdown.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+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"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "flex shrink-0 items-start justify-between gap-4 p-5 pb-3"
+};
+const _hoisted_3 = { class: "flex flex-col gap-1" };
+const _hoisted_4 = {
+  key: 3,
+  class: "flex shrink-0 justify-end gap-2 p-5 pt-4"
+};
+const _hoisted_5 = {
+  key: 1,
+  "data-lp-modal-aside": "",
+  class: "pointer-events-auto flex min-h-0 flex-col"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpModal",
+  props: {
+    open: { type: Boolean },
+    title: {},
+    description: {},
+    size: { default: "md" },
+    width: {},
+    fillBody: { type: Boolean },
+    autoFocus: { default: "auto" }
+  },
+  emits: ["update:open"],
+  setup(__props) {
+    const { claim, release, layer } = useModalLayer();
+    const props = __props;
+    const onInteractOutside = (event) => {
+      const target = event.target;
+      if (target instanceof Element && target.closest("[data-lp-modal-aside]")) {
+        event.preventDefault();
+      }
+    };
+    const describedByAttrs = computed(
+      () => props.description ? {} : { "aria-describedby": void 0 }
+    );
+    const widthClass = computed(() => {
+      if (props.width) return "";
+      return {
+        sm: "w-[min(92vw,24rem)]",
+        md: "w-[min(92vw,28rem)]",
+        lg: "w-[min(92vw,34rem)]",
+        xl: "w-[min(92vw,42rem)]",
+        "2xl": "w-[min(94vw,56rem)]",
+        "3xl": "w-[min(95vw,72rem)]",
+        full: "w-[96vw]"
+      }[props.size];
+    });
+    const slots = useSlots();
+    const hasAside = computed(() => Boolean(slots.aside || slots.asideEnd));
+    watch(() => props.open, (open) => open ? claim() : release(), { immediate: true });
+    onBeforeUnmount(release);
+    const bodyPad = computed(
+      () => [
+        "px-5",
+        props.title || slots.title ? "pt-1" : "pt-5",
+        slots.footer ? "" : "pb-5"
+      ].filter(Boolean).join(" ")
+    );
+    const panelRef = ref(null);
+    const AUTO_FOCUS_ORDER = [
+      "input:not([type=hidden]):not([disabled]):not([readonly])",
+      "textarea:not([disabled]):not([readonly])",
+      "select:not([disabled])",
+      "[data-lp-autofocus]",
+      "button:not([disabled]):not([data-lp-dialog-close])",
+      "[href]",
+      "[tabindex]:not([tabindex='-1'])"
+    ];
+    function onOpenAutoFocus(event) {
+      if (props.autoFocus === "none") return;
+      const panel = panelRef.value?.$el;
+      if (!(panel instanceof HTMLElement)) return;
+      const selectors = props.autoFocus === "auto" ? AUTO_FOCUS_ORDER : [props.autoFocus];
+      for (const selector of selectors) {
+        const target = panel.querySelector(selector);
+        if (!target || target.hasAttribute("disabled")) continue;
+        event.preventDefault();
+        if (!target.closest("[data-lp-ring-owner]")) {
+          target.setAttribute("data-lp-focus-ring", "");
+          target.addEventListener(
+            "blur",
+            () => target.removeAttribute("data-lp-focus-ring"),
+            { once: true }
+          );
+        }
+        target.focus();
+        return;
+      }
+    }
+    const {
+      el: sizedEl,
+      tweening,
+      resizing
+    } = useShift({ axis: "height", enabled: () => props.open });
+    watch(
+      () => props.open ? panelRef.value : null,
+      (panel) => {
+        const el = panel?.$el;
+        sizedEl.value = el instanceof HTMLElement ? el : null;
+      },
+      { flush: "post" }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(DialogRoot), {
+        open: __props.open,
+        "onUpdate:open": _cache[0] || (_cache[0] = (v) => _ctx.$emit("update:open", v))
+      }, {
+        default: withCtx(() => [
+          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]",
+                style: normalizeStyle({ zIndex: unref(layer).scrim })
+              }, null, 8, ["style"]),
+              createElementVNode("div", {
+                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)
+                }, [
+                  _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(() => [
+                      __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("header", _hoisted_2, [
+                        createElementVNode("div", _hoisted_3, [
+                          createVNode(unref(DialogTitle), { class: "text-base font-semibold text-ink" }, {
+                            default: withCtx(() => [
+                              renderSlot(_ctx.$slots, "title", {}, () => [
+                                createTextVNode(toDisplayString(__props.title), 1)
+                              ])
+                            ]),
+                            _: 3
+                          }),
+                          __props.description ? (openBlock(), createBlock(unref(DialogDescription), {
+                            key: 0,
+                            class: "text-sm text-muted"
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(__props.description), 1)
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true)
+                        ]),
+                        createVNode(unref(DialogClose), {
+                          "data-lp-dialog-close": "",
+                          class: "group flex shrink-0 items-center rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                          "aria-label": "Close"
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_sfc_main$1, {
+                              name: "lucide:x",
+                              size: 18,
+                              class: normalizeClass(unref(CLOSE_ICON))
+                            }, null, 8, ["class"])
+                          ]),
+                          _: 1
+                        })
+                      ])) : createCommentVNode("", true),
+                      __props.fillBody ? (openBlock(), createElementBlock("div", {
+                        key: 1,
+                        class: normalizeClass(["flex min-h-0 flex-1 flex-col overflow-hidden text-sm text-ink/90", bodyPad.value])
+                      }, [
+                        renderSlot(_ctx.$slots, "default")
+                      ], 2)) : (openBlock(), createBlock(_sfc_main$2, {
+                        key: 2,
+                        class: normalizeClass(["min-h-0 flex-1 text-sm text-ink/90", unref(resizing) ? "[&_[data-scrollbarimpl]]:invisible" : ""]),
+                        "content-class": bodyPad.value
+                      }, {
+                        default: withCtx(() => [
+                          renderSlot(_ctx.$slots, "default")
+                        ]),
+                        _: 3
+                      }, 8, ["class", "content-class"])),
+                      _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [
+                        renderSlot(_ctx.$slots, "footer")
+                      ])) : createCommentVNode("", true)
+                    ]),
+                    _: 3
+                  }, 16, ["class", "style"]),
+                  _ctx.$slots.asideEnd ? (openBlock(), createElementBlock("aside", _hoisted_5, [
+                    renderSlot(_ctx.$slots, "asideEnd")
+                  ])) : createCommentVNode("", true)
+                ], 4)
+              ], 4)
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 8, ["open"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpModalNav-DBMGlq_x.js

@@ -0,0 +1,166 @@
+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-7LvuAA7U.js";
+import { _ as _sfc_main$4 } from "./LpSidebar-DcYavim2.js";
+const _hoisted_1 = { class: "flex items-center gap-2" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpModalNav",
+  props: {
+    open: { type: Boolean },
+    modelValue: {},
+    items: {},
+    sections: {},
+    title: {},
+    description: {},
+    size: { default: "2xl" },
+    width: {},
+    navWidth: { default: "13rem" },
+    searchable: { type: Boolean },
+    searchPlaceholder: {},
+    loading: { type: Boolean },
+    mobileBreakpoint: { default: "lg" },
+    navLabel: { default: "Sections" },
+    navSide: { default: "start" },
+    fillBody: { type: Boolean }
+  },
+  emits: ["update:open", "update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const navOpen = ref(false);
+    const active = computed({
+      get: () => props.modelValue ?? "",
+      set: (v) => emit("update:modelValue", v)
+    });
+    const hasNav = computed(() => Boolean(props.items?.length || props.sections?.length));
+    const RAIL_GAP = {
+      sm: "sm:mr-3",
+      md: "md:mr-3",
+      lg: "lg:mr-3",
+      xl: "xl:mr-3"
+    };
+    const RAIL_GAP_END = {
+      sm: "sm:ml-3",
+      md: "md:ml-3",
+      lg: "lg:ml-3",
+      xl: "xl:ml-3"
+    };
+    const TRIGGER_VISIBILITY = {
+      sm: "sm:hidden",
+      md: "md:hidden",
+      lg: "lg:hidden",
+      xl: "xl:hidden"
+    };
+    const railClass = computed(
+      () => (props.navSide === "end" ? RAIL_GAP_END : RAIL_GAP)[props.mobileBreakpoint]
+    );
+    const triggerClass = computed(() => TRIGGER_VISIBILITY[props.mobileBreakpoint]);
+    const railStyle = { maxHeight: "min(90vh, calc(100dvh - 2rem))" };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        open: __props.open,
+        title: __props.title,
+        description: __props.description,
+        size: __props.size,
+        width: __props.width,
+        "fill-body": __props.fillBody,
+        "onUpdate:open": _cache[5] || (_cache[5] = ($event) => emit("update:open", $event))
+      }, createSlots({
+        title: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            hasNav.value ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              variant: "ghost",
+              size: "sm",
+              square: "",
+              "aria-label": __props.navLabel,
+              class: normalizeClass(triggerClass.value),
+              onClick: _cache[4] || (_cache[4] = ($event) => navOpen.value = true)
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$3, {
+                  name: "lucide:menu",
+                  size: 18
+                })
+              ]),
+              _: 1
+            }, 8, ["aria-label", "class"])) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              createTextVNode(toDisplayString(__props.title), 1)
+            ])
+          ])
+        ]),
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 2
+      }, [
+        hasNav.value && __props.navSide === "start" ? {
+          name: "aside",
+          fn: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(railClass.value)
+            }, [
+              createVNode(_sfc_main$4, {
+                modelValue: active.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event),
+                open: navOpen.value,
+                "onUpdate:open": _cache[1] || (_cache[1] = ($event) => navOpen.value = $event),
+                variant: "panel",
+                items: __props.items,
+                sections: __props.sections,
+                width: __props.navWidth,
+                searchable: __props.searchable,
+                "search-placeholder": __props.searchPlaceholder,
+                loading: __props.loading,
+                responsive: "",
+                "mobile-breakpoint": __props.mobileBreakpoint,
+                style: railStyle,
+                class: "rounded-card border border-line bg-surface-raised p-2 shadow-panel"
+              }, null, 8, ["modelValue", "open", "items", "sections", "width", "searchable", "search-placeholder", "loading", "mobile-breakpoint"])
+            ], 2)
+          ]),
+          key: "0"
+        } : void 0,
+        hasNav.value && __props.navSide === "end" ? {
+          name: "asideEnd",
+          fn: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(railClass.value)
+            }, [
+              createVNode(_sfc_main$4, {
+                modelValue: active.value,
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => active.value = $event),
+                open: navOpen.value,
+                "onUpdate:open": _cache[3] || (_cache[3] = ($event) => navOpen.value = $event),
+                variant: "panel",
+                items: __props.items,
+                sections: __props.sections,
+                width: __props.navWidth,
+                searchable: __props.searchable,
+                "search-placeholder": __props.searchPlaceholder,
+                loading: __props.loading,
+                responsive: "",
+                "mobile-breakpoint": __props.mobileBreakpoint,
+                style: railStyle,
+                class: "rounded-card border border-line bg-surface-raised p-2 shadow-panel"
+              }, null, 8, ["modelValue", "open", "items", "sections", "width", "searchable", "search-placeholder", "loading", "mobile-breakpoint"])
+            ], 2)
+          ]),
+          key: "1"
+        } : void 0,
+        _ctx.$slots.footer ? {
+          name: "footer",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "footer")
+          ]),
+          key: "2"
+        } : void 0
+      ]), 1032, ["open", "title", "description", "size", "width", "fill-body"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/components/LpAddressInput.vue.js

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

package/dist/components/LpConfirmDialog.vue.js

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

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

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

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

@@ -10,10 +10,6 @@ type __VLS_Props = {
     sections?: SidebarSection[];
     title?: string;
     description?: string;
-    /**
-     * Defaults wider than `LpModal`'s `md`: the rail comes out of the content's
-     * width, and at `md` what is left is too narrow to be worth splitting.
-     */
     size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
     width?: string;
     /** Width of the nav rail (any CSS length). */
@@ -27,29 +23,22 @@ type __VLS_Props = {
     mobileBreakpoint?: Breakpoint;
     /** Label for the button that opens that drawer. */
     navLabel?: string;
+    /** Stand the rail to the right of the dialog instead of the left. */
+    navSide?: "start" | "end";
     /**
-     * Let the body fill the height instead of scrolling itself. On by default,
-     * unlike a plain modal: the rail is only a full-height column if the two
-     * of them agree on a height to fill.
+     * Let the body fill the height instead of scrolling itself. Off by default,
+     * as in a plain modal: it existed here to make the rail a full-height
+     * column inside the body, and the rail is no longer in the body.
      */
     fillBody?: boolean;
 };
-declare var __VLS_24: {}, __VLS_33: {}, __VLS_36: {
-    item: SidebarItem;
-    active: boolean;
-}, __VLS_39: {}, __VLS_41: {}, __VLS_44: {};
+declare var __VLS_36: {}, __VLS_38: {}, __VLS_41: {};
 type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_24) => any;
-} & {
-    navHeader?: (props: typeof __VLS_33) => any;
-} & {
-    navItem?: (props: typeof __VLS_36) => any;
-} & {
-    navFooter?: (props: typeof __VLS_39) => any;
+    title?: (props: typeof __VLS_36) => any;
 } & {
-    default?: (props: typeof __VLS_41) => any;
+    default?: (props: typeof __VLS_38) => any;
 } & {
-    footer?: (props: typeof __VLS_44) => any;
+    footer?: (props: typeof __VLS_41) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
@@ -59,10 +48,10 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
-    fillBody: boolean;
     mobileBreakpoint: Breakpoint;
     navWidth: string;
     navLabel: string;
+    navSide: "start" | "end";
 }, {}, {}, {}, 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/LpModalNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModalNav-B7W9VAne.js";
+import { _ as _sfc_main } from "../chunks/LpModalNav-DBMGlq_x.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-DAqXzsm-.js";
+import { _ as _sfc_main$1 } from "../chunks/LpModal-7LvuAA7U.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-FZXfljWV.js";
+import { _ as _2 } from "./chunks/LpAddressInput-D4t8WFD-.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-CQBVaLpo.js";
+import { _ as _17 } from "./chunks/LpConfirmDialog-CxbizvSB.js";
 import { _ as _18 } from "./chunks/LpContextMenu-B6WBLleS.js";
 import { _ as _19 } from "./chunks/LpDatePicker-6JFXllj5.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-DAqXzsm-.js";
-import { _ as _35 } from "./chunks/LpModalNav-B7W9VAne.js";
+import { _ as _34 } from "./chunks/LpModal-7LvuAA7U.js";
+import { _ as _35 } from "./chunks/LpModalNav-DBMGlq_x.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.35.0",
+  "version": "0.36.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpModal.vue

@@ -72,6 +72,20 @@ defineEmits<{ (e: "update:open", value: boolean): void }>()
 // Spread rather than a plain `:aria-describedby` binding: with a description
 // the key must be absent entirely so reka-ui's own generated id survives, and
 // only the description-less case overrides it away.
+/*
+ * A click on the aside lands outside DialogContent, and reka reads anything
+ * outside it as a click on the scrim — the dialog closed under the pointer the
+ * moment you picked a section. The aside marks itself, and a click that starts
+ * inside one keeps the dialog open. Without an aside nothing carries the
+ * attribute and every click behaves exactly as before.
+ */
+const onInteractOutside = (event: Event) => {
+  const target = event.target
+  if (target instanceof Element && target.closest("[data-lp-modal-aside]")) {
+    event.preventDefault()
+  }
+}
+
 const describedByAttrs = computed(() =>
   props.description ? {} : { "aria-describedby": undefined },
 )
@@ -93,6 +107,9 @@ const widthClass = computed(() => {
 // inset horizontally; top only when there's no header, bottom only when there's
 // no footer (header/footer own those edges).
 const slots = useSlots()
+
+// Dialog and aside only form a pair when something fills the slot.
+const hasAside = computed(() => Boolean(slots.aside || slots.asideEnd))
 // The body clips overflow and focus rings are drawn outside their control, so a
 // field flush against the top edge lost its ring; pt-1 clears the ring's width.
 /*
@@ -225,10 +242,50 @@ watch(
            this wrapper: `max-h-full` on a centred flex child resolves against a
            box it is free to overflow, so a tall body stopped handing its
            overflow to the scroll area below and simply ran off-screen. -->
+      <!-- A companion panel standing OUTSIDE the dialog, in the same centring
+           row: a section list, a preview, a picker. Inside, it would take the
+           width the body already wants; measured against the viewport it would
+           have to be re-measured on every resize.
+
+           The row keeps `items-center` until something fills the slot, so a
+           dialog without one centres exactly as it always has. With an aside
+           the two align to the top of the row instead, and because the row
+           collapses to its content the taller of the pair sets that top edge —
+           so the aside may be shorter than the dialog, and the dialog is never
+           shorter than the aside. Neither is stretched: `stretch` here would
+           pull every dialog to the full height of its own ceiling.
+
+           Height, width, the gap to the dialog and whether it appears at all
+           are the caller's, and deliberately so: a utility class written in
+           this file is not in the consuming app's Tailwind scan and would never
+           be generated. The gap in particular has to go with the aside — kept
+           here, it survives an aside hidden at a breakpoint this file knows
+           nothing about, and pushes the dialog off centre by its own width. -->
       <div
         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"
+      >
+      <!-- `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="$slots.aside"
+        data-lp-modal-aside
+        class="pointer-events-auto 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
@@ -240,9 +297,11 @@ watch(
         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"
+        :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">
@@ -294,6 +353,15 @@ watch(
           <slot name="footer" />
         </footer>
       </DialogContent>
+
+      <aside
+        v-if="$slots.asideEnd"
+        data-lp-modal-aside
+        class="pointer-events-auto flex min-h-0 flex-col"
+      >
+        <slot name="asideEnd" />
+      </aside>
+      </div>
       </div>
     </DialogPortal>
   </DialogRoot>

package/src/components/LpModalNav.vue

@@ -1,24 +1,17 @@
 <script setup lang="ts">
 /*
- * A dialog whose sections stay visible while you read one — settings, a profile
- * with tabs' worth of detail, a wizard that lets you skip a step. The shape
- * these all reach for is a nav column that persists next to the body, and
- * without it they fall back to a row of tabs that runs out of width, or to a
- * back-and-forth between a list screen and a detail screen.
+ * A dialog whose sections stand BESIDE it rather than inside it — settings, a
+ * profile with tabs' worth of detail, a wizard you can skip around in. Put the
+ * list inside the panel and it takes the width the content already wants; a row
+ * of tabs across the top runs out of room at about five.
  *
- * The nav lives INSIDE the dialog. Standing it outside, as a sibling floating
- * beside the panel, is the arrangement this component deliberately does not
- * use: it then sits outside the focus trap, `interact-outside` reads a click on
- * it as a click on the scrim and closes the dialog under the pointer, and its
- * height has to be reconciled with a dialog height that changes as content
- * arrives. Inside, all three come out right for free, and `LpModal` keeps the
- * centring every other modal in the kit relies on.
- *
- * Width is the one cost: the rail comes out of the body's width, which is why
- * the default `size` is wider than a plain modal's. Below `mobileBreakpoint`
- * there is no width to spare at all, so the rail becomes a drawer — and since
- * LpSidebar leaves opening it to the app, the header grows the button for it
- * rather than leaving the sections unreachable on a phone.
+ * This is LpModal's `aside` slot plus LpSidebar, wired together: the pair
+ * shares one centring row, so the list lines up with the dialog at any window
+ * width and neither has to measure the other. What is added on top is the part
+ * that only matters here — below `mobileBreakpoint` there is no room beside the
+ * dialog at all, so the rail folds into a drawer and the header grows the
+ * button that opens it. LpSidebar leaves that button to the app, and without
+ * one the sections are simply unreachable on a phone.
  */
 import { computed, ref } from "vue"
 import LpButton from "./LpButton.vue"
@@ -41,10 +34,6 @@ const props = withDefaults(
     sections?: SidebarSection[]
     title?: string
     description?: string
-    /**
-     * Defaults wider than `LpModal`'s `md`: the rail comes out of the content's
-     * width, and at `md` what is left is too narrow to be worth splitting.
-     */
     size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"
     width?: string
     /** Width of the nav rail (any CSS length). */
@@ -58,10 +47,12 @@ const props = withDefaults(
     mobileBreakpoint?: Breakpoint
     /** Label for the button that opens that drawer. */
     navLabel?: string
+    /** Stand the rail to the right of the dialog instead of the left. */
+    navSide?: "start" | "end"
     /**
-     * Let the body fill the height instead of scrolling itself. On by default,
-     * unlike a plain modal: the rail is only a full-height column if the two
-     * of them agree on a height to fill.
+     * Let the body fill the height instead of scrolling itself. Off by default,
+     * as in a plain modal: it existed here to make the rail a full-height
+     * column inside the body, and the rail is no longer in the body.
      */
     fillBody?: boolean
   }>(),
@@ -70,7 +61,7 @@ const props = withDefaults(
     navWidth: "13rem",
     mobileBreakpoint: "lg",
     navLabel: "Sections",
-    fillBody: true,
+    navSide: "start",
   },
 )
 
@@ -86,23 +77,50 @@ const active = computed({
   set: (v: string) => emit("update:modelValue", v),
 })
 
-const hasNav = computed(
-  () => Boolean(props.items?.length || props.sections?.length),
-)
+const hasNav = computed(() => Boolean(props.items?.length || props.sections?.length))
 
 /*
- * Spelled out rather than built from the prop: a class assembled at runtime is
- * not in anyone's Tailwind scan and would never be generated. Mirrors the
- * rail's own visibility in LpSidebar — the button appears exactly where the
- * rail disappears.
+ * Both halves of the responsive switch are spelled out rather than built from
+ * the prop: a class assembled at runtime is in nobody's Tailwind scan and would
+ * never be generated. The rail hides exactly where the button appears.
+ *
+ * `responsive` on LpSidebar hides its own rail below the breakpoint and draws
+ * the drawer as a SIBLING of it, so wrapping the whole thing in a `hidden`
+ * element takes the drawer with it — and the sections are then unreachable at
+ * exactly the width where the drawer is the only way to them. What is left here
+ * is the gap, which has to disappear along with the rail: an aside that is
+ * empty but still spaced pushes the dialog off centre.
  */
+const RAIL_GAP: Record<Breakpoint, string> = {
+  sm: "sm:mr-3",
+  md: "md:mr-3",
+  lg: "lg:mr-3",
+  xl: "xl:mr-3",
+}
+const RAIL_GAP_END: Record<Breakpoint, string> = {
+  sm: "sm:ml-3",
+  md: "md:ml-3",
+  lg: "lg:ml-3",
+  xl: "xl:ml-3",
+}
 const TRIGGER_VISIBILITY: Record<Breakpoint, string> = {
   sm: "sm:hidden",
   md: "md:hidden",
   lg: "lg:hidden",
   xl: "xl:hidden",
 }
+const railClass = computed(() =>
+  (props.navSide === "end" ? RAIL_GAP_END : RAIL_GAP)[props.mobileBreakpoint],
+)
 const triggerClass = computed(() => TRIGGER_VISIBILITY[props.mobileBreakpoint])
+
+/*
+ * The rail carries the dialog's own ceiling, so a long list scrolls with the
+ * dialog instead of running past the bottom of the window. Inline because it
+ * mirrors LpModal's max-height, which is not a class this file can put in the
+ * consuming app's scan.
+ */
+const railStyle = { maxHeight: "min(90vh, calc(100dvh - 2rem))" }
 </script>
 
 <template>
@@ -115,6 +133,49 @@ const triggerClass = computed(() => TRIGGER_VISIBILITY[props.mobileBreakpoint])
     :fill-body="fillBody"
     @update:open="emit('update:open', $event)"
   >
+    <!-- The gap sits on a wrapper rather than on LpSidebar itself: LpSidebar
+         splits its `class` between its root and the inner `nav`, so a margin
+         given to it lands on both. -->
+    <template v-if="hasNav && navSide === 'start'" #aside>
+      <div :class="railClass">
+        <LpSidebar
+          v-model="active"
+          v-model:open="navOpen"
+          variant="panel"
+          :items="items"
+          :sections="sections"
+          :width="navWidth"
+          :searchable="searchable"
+          :search-placeholder="searchPlaceholder"
+          :loading="loading"
+          responsive
+          :mobile-breakpoint="mobileBreakpoint"
+          :style="railStyle"
+          class="rounded-card border border-line bg-surface-raised p-2 shadow-panel"
+        />
+      </div>
+    </template>
+
+    <template v-if="hasNav && navSide === 'end'" #asideEnd>
+      <div :class="railClass">
+        <LpSidebar
+          v-model="active"
+          v-model:open="navOpen"
+          variant="panel"
+          :items="items"
+          :sections="sections"
+          :width="navWidth"
+          :searchable="searchable"
+          :search-placeholder="searchPlaceholder"
+          :loading="loading"
+          responsive
+          :mobile-breakpoint="mobileBreakpoint"
+          :style="railStyle"
+          class="rounded-card border border-line bg-surface-raised p-2 shadow-panel"
+        />
+      </div>
+    </template>
+
     <template #title>
       <div class="flex items-center gap-2">
         <LpButton
@@ -132,43 +193,7 @@ const triggerClass = computed(() => TRIGGER_VISIBILITY[props.mobileBreakpoint])
       </div>
     </template>
 
-    <div class="flex min-h-0 flex-1 gap-4">
-      <!-- `shrink-0`: a flex item's default is to give up width to a greedy
-           sibling, so a wide table in the body would squeeze the rail down to
-           its longest unbreakable word. -->
-      <LpSidebar
-        v-if="hasNav"
-        v-model="active"
-        v-model:open="navOpen"
-        variant="panel"
-        :items="items"
-        :sections="sections"
-        :width="navWidth"
-        :searchable="searchable"
-        :search-placeholder="searchPlaceholder"
-        :loading="loading"
-        responsive
-        :mobile-breakpoint="mobileBreakpoint"
-        class="shrink-0"
-      >
-        <template v-if="$slots.navHeader" #header>
-          <slot name="navHeader" />
-        </template>
-        <template v-if="$slots.navItem" #item="slotProps">
-          <slot name="navItem" v-bind="slotProps" />
-        </template>
-        <template v-if="$slots.navFooter" #footer>
-          <slot name="navFooter" />
-        </template>
-      </LpSidebar>
-
-      <!-- `min-w-0` is the same guard in the other direction: without it a wide
-           child sets this column's minimum to its own width, and the dialog
-           grows past its size instead of the content scrolling. -->
-      <div class="flex min-h-0 min-w-0 flex-1 flex-col">
-        <slot />
-      </div>
-    </div>
+    <slot />
 
     <template v-if="$slots.footer" #footer>
       <slot name="footer" />

package/dist/chunks/LpModal-DAqXzsm-.js

@@ -1,192 +0,0 @@
-import { defineComponent, computed, useSlots, watch, onBeforeUnmount, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, createElementVNode, mergeProps, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass } 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";
-import { CLOSE_ICON } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-D8xyKXcF.js";
-const _hoisted_1 = {
-  key: 0,
-  class: "flex shrink-0 items-start justify-between gap-4 p-5 pb-3"
-};
-const _hoisted_2 = { class: "flex flex-col gap-1" };
-const _hoisted_3 = {
-  key: 3,
-  class: "flex shrink-0 justify-end gap-2 p-5 pt-4"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpModal",
-  props: {
-    open: { type: Boolean },
-    title: {},
-    description: {},
-    size: { default: "md" },
-    width: {},
-    fillBody: { type: Boolean },
-    autoFocus: { default: "auto" }
-  },
-  emits: ["update:open"],
-  setup(__props) {
-    const { claim, release, layer } = useModalLayer();
-    const props = __props;
-    const describedByAttrs = computed(
-      () => props.description ? {} : { "aria-describedby": void 0 }
-    );
-    const widthClass = computed(() => {
-      if (props.width) return "";
-      return {
-        sm: "w-[min(92vw,24rem)]",
-        md: "w-[min(92vw,28rem)]",
-        lg: "w-[min(92vw,34rem)]",
-        xl: "w-[min(92vw,42rem)]",
-        "2xl": "w-[min(94vw,56rem)]",
-        "3xl": "w-[min(95vw,72rem)]",
-        full: "w-[96vw]"
-      }[props.size];
-    });
-    const slots = useSlots();
-    watch(() => props.open, (open) => open ? claim() : release(), { immediate: true });
-    onBeforeUnmount(release);
-    const bodyPad = computed(
-      () => [
-        "px-5",
-        props.title || slots.title ? "pt-1" : "pt-5",
-        slots.footer ? "" : "pb-5"
-      ].filter(Boolean).join(" ")
-    );
-    const panelRef = ref(null);
-    const AUTO_FOCUS_ORDER = [
-      "input:not([type=hidden]):not([disabled]):not([readonly])",
-      "textarea:not([disabled]):not([readonly])",
-      "select:not([disabled])",
-      "[data-lp-autofocus]",
-      "button:not([disabled]):not([data-lp-dialog-close])",
-      "[href]",
-      "[tabindex]:not([tabindex='-1'])"
-    ];
-    function onOpenAutoFocus(event) {
-      if (props.autoFocus === "none") return;
-      const panel = panelRef.value?.$el;
-      if (!(panel instanceof HTMLElement)) return;
-      const selectors = props.autoFocus === "auto" ? AUTO_FOCUS_ORDER : [props.autoFocus];
-      for (const selector of selectors) {
-        const target = panel.querySelector(selector);
-        if (!target || target.hasAttribute("disabled")) continue;
-        event.preventDefault();
-        if (!target.closest("[data-lp-ring-owner]")) {
-          target.setAttribute("data-lp-focus-ring", "");
-          target.addEventListener(
-            "blur",
-            () => target.removeAttribute("data-lp-focus-ring"),
-            { once: true }
-          );
-        }
-        target.focus();
-        return;
-      }
-    }
-    const {
-      el: sizedEl,
-      tweening,
-      resizing
-    } = useShift({ axis: "height", enabled: () => props.open });
-    watch(
-      () => props.open ? panelRef.value : null,
-      (panel) => {
-        const el = panel?.$el;
-        sizedEl.value = el instanceof HTMLElement ? el : null;
-      },
-      { flush: "post" }
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(DialogRoot), {
-        open: __props.open,
-        "onUpdate:open": _cache[0] || (_cache[0] = (v) => _ctx.$emit("update:open", v))
-      }, {
-        default: withCtx(() => [
-          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]",
-                style: normalizeStyle({ zIndex: unref(layer).scrim })
-              }, null, 8, ["style"]),
-              createElementVNode("div", {
-                class: "fixed inset-0 flex items-center justify-center pointer-events-none",
-                style: normalizeStyle({ zIndex: unref(layer).panel })
-              }, [
-                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 } : void 0
-                }, describedByAttrs.value, { onOpenAutoFocus }), {
-                  default: withCtx(() => [
-                    __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("header", _hoisted_1, [
-                      createElementVNode("div", _hoisted_2, [
-                        createVNode(unref(DialogTitle), { class: "text-base font-semibold text-ink" }, {
-                          default: withCtx(() => [
-                            renderSlot(_ctx.$slots, "title", {}, () => [
-                              createTextVNode(toDisplayString(__props.title), 1)
-                            ])
-                          ]),
-                          _: 3
-                        }),
-                        __props.description ? (openBlock(), createBlock(unref(DialogDescription), {
-                          key: 0,
-                          class: "text-sm text-muted"
-                        }, {
-                          default: withCtx(() => [
-                            createTextVNode(toDisplayString(__props.description), 1)
-                          ]),
-                          _: 1
-                        })) : createCommentVNode("", true)
-                      ]),
-                      createVNode(unref(DialogClose), {
-                        "data-lp-dialog-close": "",
-                        class: "group flex shrink-0 items-center rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
-                        "aria-label": "Close"
-                      }, {
-                        default: withCtx(() => [
-                          createVNode(_sfc_main$1, {
-                            name: "lucide:x",
-                            size: 18,
-                            class: normalizeClass(unref(CLOSE_ICON))
-                          }, null, 8, ["class"])
-                        ]),
-                        _: 1
-                      })
-                    ])) : createCommentVNode("", true),
-                    __props.fillBody ? (openBlock(), createElementBlock("div", {
-                      key: 1,
-                      class: normalizeClass(["flex min-h-0 flex-1 flex-col overflow-hidden text-sm text-ink/90", bodyPad.value])
-                    }, [
-                      renderSlot(_ctx.$slots, "default")
-                    ], 2)) : (openBlock(), createBlock(_sfc_main$2, {
-                      key: 2,
-                      class: normalizeClass(["min-h-0 flex-1 text-sm text-ink/90", unref(resizing) ? "[&_[data-scrollbarimpl]]:invisible" : ""]),
-                      "content-class": bodyPad.value
-                    }, {
-                      default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "default")
-                      ]),
-                      _: 3
-                    }, 8, ["class", "content-class"])),
-                    _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3, [
-                      renderSlot(_ctx.$slots, "footer")
-                    ])) : createCommentVNode("", true)
-                  ]),
-                  _: 3
-                }, 16, ["class", "style"])
-              ], 4)
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      }, 8, ["open"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/dist/chunks/LpModalNav-B7W9VAne.js

@@ -1,142 +0,0 @@
-import { defineComponent, ref, computed, openBlock, createBlock, createSlots, withCtx, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, normalizeClass, createVNode, createTextVNode, toDisplayString } from "vue";
-import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
-import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpModal-DAqXzsm-.js";
-import { _ as _sfc_main$2 } from "./LpSidebar-DcYavim2.js";
-const _hoisted_1 = { class: "flex items-center gap-2" };
-const _hoisted_2 = { class: "flex min-h-0 flex-1 gap-4" };
-const _hoisted_3 = { class: "flex min-h-0 min-w-0 flex-1 flex-col" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpModalNav",
-  props: {
-    open: { type: Boolean },
-    modelValue: {},
-    items: {},
-    sections: {},
-    title: {},
-    description: {},
-    size: { default: "2xl" },
-    width: {},
-    navWidth: { default: "13rem" },
-    searchable: { type: Boolean },
-    searchPlaceholder: {},
-    loading: { type: Boolean },
-    mobileBreakpoint: { default: "lg" },
-    navLabel: { default: "Sections" },
-    fillBody: { type: Boolean, default: true }
-  },
-  emits: ["update:open", "update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const navOpen = ref(false);
-    const active = computed({
-      get: () => props.modelValue ?? "",
-      set: (v) => emit("update:modelValue", v)
-    });
-    const hasNav = computed(
-      () => Boolean(props.items?.length || props.sections?.length)
-    );
-    const TRIGGER_VISIBILITY = {
-      sm: "sm:hidden",
-      md: "md:hidden",
-      lg: "lg:hidden",
-      xl: "xl:hidden"
-    };
-    const triggerClass = computed(() => TRIGGER_VISIBILITY[props.mobileBreakpoint]);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1, {
-        open: __props.open,
-        title: __props.title,
-        description: __props.description,
-        size: __props.size,
-        width: __props.width,
-        "fill-body": __props.fillBody,
-        "onUpdate:open": _cache[3] || (_cache[3] = ($event) => emit("update:open", $event))
-      }, createSlots({
-        title: withCtx(() => [
-          createElementVNode("div", _hoisted_1, [
-            hasNav.value ? (openBlock(), createBlock(_sfc_main$3, {
-              key: 0,
-              variant: "ghost",
-              size: "sm",
-              square: "",
-              "aria-label": __props.navLabel,
-              class: normalizeClass(triggerClass.value),
-              onClick: _cache[0] || (_cache[0] = ($event) => navOpen.value = true)
-            }, {
-              default: withCtx(() => [
-                createVNode(_sfc_main$4, {
-                  name: "lucide:menu",
-                  size: 18
-                })
-              ]),
-              _: 1
-            }, 8, ["aria-label", "class"])) : createCommentVNode("", true),
-            renderSlot(_ctx.$slots, "title", {}, () => [
-              createTextVNode(toDisplayString(__props.title), 1)
-            ])
-          ])
-        ]),
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_2, [
-            hasNav.value ? (openBlock(), createBlock(_sfc_main$2, {
-              key: 0,
-              modelValue: active.value,
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => active.value = $event),
-              open: navOpen.value,
-              "onUpdate:open": _cache[2] || (_cache[2] = ($event) => navOpen.value = $event),
-              variant: "panel",
-              items: __props.items,
-              sections: __props.sections,
-              width: __props.navWidth,
-              searchable: __props.searchable,
-              "search-placeholder": __props.searchPlaceholder,
-              loading: __props.loading,
-              responsive: "",
-              "mobile-breakpoint": __props.mobileBreakpoint,
-              class: "shrink-0"
-            }, createSlots({ _: 2 }, [
-              _ctx.$slots.navHeader ? {
-                name: "header",
-                fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "navHeader")
-                ]),
-                key: "0"
-              } : void 0,
-              _ctx.$slots.navItem ? {
-                name: "item",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "navItem", normalizeProps(guardReactiveProps(slotProps)))
-                ]),
-                key: "1"
-              } : void 0,
-              _ctx.$slots.navFooter ? {
-                name: "footer",
-                fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "navFooter")
-                ]),
-                key: "2"
-              } : void 0
-            ]), 1032, ["modelValue", "open", "items", "sections", "width", "searchable", "search-placeholder", "loading", "mobile-breakpoint"])) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_3, [
-              renderSlot(_ctx.$slots, "default")
-            ])
-          ])
-        ]),
-        _: 2
-      }, [
-        _ctx.$slots.footer ? {
-          name: "footer",
-          fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "footer")
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["open", "title", "description", "size", "width", "fill-body"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};