@leavepulse/ui 0.43.4 → 0.45.0

package/dist/chunks/LpDatePicker-DuusgT69.js

@@ -0,0 +1,195 @@
+import { defineComponent, ref, computed, useAttrs, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, createElementVNode, mergeProps, createCommentVNode, toDisplayString } from "vue";
+import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from "reka-ui";
+import { useFieldControl } from "../composables/useField.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { mergeClass } from "../composables/useMergedClass.js";
+import { POPOVER_PANEL } from "../components/dropdown.js";
+import { _ as _sfc_main$3 } from "./LpCalendar-DrA2McTU.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$2 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$4 } from "./LpTimeField-Cqe7fXnh.js";
+const _hoisted_1 = ["id", "disabled", "aria-invalid", "aria-describedby"];
+const _hoisted_2 = {
+  key: 0,
+  class: "w-[15px] shrink-0",
+  "aria-hidden": "true"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "flex items-center gap-2 border-t border-line px-3 py-2"
+};
+const _hoisted_4 = ["aria-label"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpDatePicker",
+  props: {
+    modelValue: {},
+    placeholder: { default: "Pick a date" },
+    min: {},
+    max: {},
+    isDisabled: {},
+    clearable: { type: Boolean },
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    size: { default: "md" },
+    format: { default: () => ({ year: "numeric", month: "short", day: "numeric" }) },
+    time: { type: Boolean },
+    defaultTime: { default: "00:00" },
+    doneLabel: { default: "Done" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const open = ref(false);
+    const day = computed(() => (props.modelValue || "").slice(0, 10));
+    const minute = computed(() => {
+      const at = (props.modelValue || "").slice(11, 16);
+      return /^\d{2}:\d{2}$/.test(at) ? at : "";
+    });
+    const display = computed(() => {
+      if (!props.modelValue) return "";
+      const [y, m, d] = day.value.split("-").map(Number);
+      if (!y || !m || !d) return props.modelValue;
+      const shown = new Intl.DateTimeFormat(void 0, props.format).format(new Date(y, m - 1, d));
+      return props.time && minute.value ? `${shown}, ${minute.value}` : shown;
+    });
+    const shellSize = {
+      sm: "h-(--size-control-sm) text-xs",
+      md: "h-(--size-control-md) text-sm",
+      lg: "h-(--size-control-lg) text-sm"
+    };
+    function onPick(picked) {
+      const v = picked ?? (day.value || void 0);
+      if (!props.time) {
+        emit("update:modelValue", v);
+        open.value = false;
+        return;
+      }
+      emit("update:modelValue", v ? `${v}T${minute.value || props.defaultTime}` : void 0);
+    }
+    function onTime(at) {
+      if (!day.value) return;
+      emit("update:modelValue", `${day.value}T${at || props.defaultTime}`);
+    }
+    function clear() {
+      emit("update:modelValue", void 0);
+    }
+    const attrs = useAttrs();
+    const field = useFieldControl(() => ({
+      wrapped: false,
+      id: typeof attrs.id === "string" ? attrs.id : void 0,
+      invalid: props.invalid,
+      disabled: props.disabled
+    }));
+    const labels = useLabels("datePicker", { clear: "Clear" });
+    const showClear = computed(() => props.clearable && !!props.modelValue && !field.value.disabled);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(mergeClass)("relative w-full", unref(attrs).class)),
+        style: normalizeStyle(unref(attrs).style)
+      }, [
+        createVNode(unref(PopoverRoot), {
+          open: open.value,
+          "onUpdate:open": _cache[2] || (_cache[2] = ($event) => open.value = $event)
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(PopoverTrigger), { "as-child": "" }, {
+              default: withCtx(() => [
+                createElementVNode("button", mergeProps({ ...unref(attrs), class: void 0, style: void 0 }, {
+                  id: unref(field).id,
+                  type: "button",
+                  disabled: unref(field).disabled,
+                  "aria-invalid": unref(field).invalid || void 0,
+                  "aria-describedby": unref(field).describedBy,
+                  class: ["group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55", [
+                    shellSize[__props.size],
+                    unref(field).invalid ? "border-danger focus-visible:ring-danger-soft" : "border-line focus-visible:border-brand"
+                  ]]
+                }), [
+                  createVNode(_sfc_main$1, {
+                    name: "lucide:calendar",
+                    size: 16,
+                    class: "shrink-0 text-muted"
+                  }),
+                  createVNode(_sfc_main$2, {
+                    value: display.value || __props.placeholder || "",
+                    align: "start",
+                    class: normalizeClass(["min-w-0 flex-1", display.value ? "" : "text-muted"])
+                  }, null, 8, ["value", "class"]),
+                  showClear.value ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true),
+                  createVNode(_sfc_main$1, {
+                    name: "lucide:chevron-down",
+                    size: 15,
+                    class: "shrink-0 text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[state=open]:rotate-180"
+                  })
+                ], 16, _hoisted_1)
+              ]),
+              _: 1
+            }),
+            createVNode(unref(PopoverPortal), null, {
+              default: withCtx(() => [
+                createVNode(unref(PopoverContent), {
+                  "collision-padding": 8,
+                  "side-offset": 6,
+                  align: "start",
+                  class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) rounded-card p-0 outline-none"])
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_sfc_main$3, {
+                      "model-value": day.value,
+                      min: __props.min,
+                      max: __props.max,
+                      "is-disabled": __props.isDisabled,
+                      class: "border-0 bg-transparent",
+                      "onUpdate:modelValue": onPick
+                    }, null, 8, ["model-value", "min", "max", "is-disabled"]),
+                    __props.time ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                      createVNode(_sfc_main$1, {
+                        name: "lucide:clock",
+                        size: 15,
+                        class: "shrink-0 text-muted"
+                      }),
+                      createVNode(_sfc_main$4, {
+                        "model-value": minute.value || void 0,
+                        disabled: !day.value,
+                        icon: false,
+                        size: "sm",
+                        class: "flex-1",
+                        "onUpdate:modelValue": _cache[0] || (_cache[0] = (at) => onTime(at || ""))
+                      }, null, 8, ["model-value", "disabled"]),
+                      createElementVNode("button", {
+                        type: "button",
+                        class: "shrink-0 rounded-control px-2 py-1 text-xs text-muted transition-colors hover:text-ink",
+                        onClick: _cache[1] || (_cache[1] = ($event) => open.value = false)
+                      }, toDisplayString(__props.doneLabel), 1)
+                    ])) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                }, 8, ["class"])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["open"]),
+        showClear.value ? (openBlock(), createElementBlock("button", {
+          key: 0,
+          type: "button",
+          "aria-label": unref(labels).clear,
+          class: "absolute top-1/2 right-[calc(0.75rem+15px+0.5rem)] flex -translate-y-1/2 items-center rounded-sm text-muted outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+          onClick: clear
+        }, [
+          createVNode(_sfc_main$1, {
+            name: "lucide:x",
+            size: 15
+          })
+        ], 8, _hoisted_4)) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpDateRangePicker-DHeuznfC.js

@@ -0,0 +1,208 @@
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, useAttrs, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, createElementVNode, mergeProps, createCommentVNode, Fragment, renderList, toDisplayString } from "vue";
+import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from "reka-ui";
+import { useFieldControl } from "../composables/useField.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { mergeClass } from "../composables/useMergedClass.js";
+import { normalizeRange, formatRange, defaultRangePresets, sameRange, clampRange } from "../components/dateRange.js";
+import { POPOVER_PANEL } from "../components/dropdown.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$2 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$3 } from "./LpRangeCalendar-DZuaRV0W.js";
+const _hoisted_1 = ["id", "disabled", "aria-invalid", "aria-describedby"];
+const _hoisted_2 = {
+  key: 0,
+  class: "w-[15px] shrink-0",
+  "aria-hidden": "true"
+};
+const _hoisted_3 = ["aria-label"];
+const _hoisted_4 = ["disabled", "aria-pressed", "onClick"];
+const _hoisted_5 = ["aria-label"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpDateRangePicker",
+  props: {
+    modelValue: {},
+    placeholder: {},
+    min: {},
+    max: {},
+    isDisabled: {},
+    isDateUnavailable: {},
+    maximumDays: {},
+    presets: {},
+    clearable: { type: Boolean },
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    size: { default: "md" },
+    locale: {},
+    format: {},
+    labels: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const text = useLabels(
+      "dateRangePicker",
+      {
+        placeholder: "Pick a date range",
+        clear: "Clear",
+        presets: "Presets",
+        today: "Today",
+        last7: "Last 7 days",
+        last30: "Last 30 days",
+        thisMonth: "This month",
+        lastMonth: "Last month"
+      },
+      () => props.labels
+    );
+    const open = ref(false);
+    const value = computed(() => normalizeRange(props.modelValue));
+    const display = computed(() => value.value ? formatRange(value.value, props.locale, props.format) : "");
+    const presetList = computed(() => {
+      return props.presets ?? defaultRangePresets(text.value);
+    });
+    function pick(range, change) {
+      emit("update:modelValue", range);
+      if (!change) open.value = false;
+    }
+    function pickPreset(preset) {
+      const range = clampRange(preset.range(), props.min, props.max);
+      if (range) pick(range);
+    }
+    function presetFits(preset) {
+      return !!clampRange(preset.range(), props.min, props.max);
+    }
+    const wide = ref(false);
+    let query;
+    const onQuery = () => {
+      wide.value = !!query?.matches;
+    };
+    onMounted(() => {
+      query = window.matchMedia("(min-width: 640px)");
+      onQuery();
+      query.addEventListener("change", onQuery);
+    });
+    onBeforeUnmount(() => query?.removeEventListener("change", onQuery));
+    const shellSize = {
+      sm: "h-(--size-control-sm) text-xs",
+      md: "h-(--size-control-md) text-sm",
+      lg: "h-(--size-control-lg) text-sm"
+    };
+    const attrs = useAttrs();
+    const field = useFieldControl(() => ({
+      wrapped: false,
+      id: typeof attrs.id === "string" ? attrs.id : void 0,
+      invalid: props.invalid,
+      disabled: props.disabled
+    }));
+    const showClear = computed(() => props.clearable && !!value.value && !field.value.disabled);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(mergeClass)("relative w-full", unref(attrs).class)),
+        style: normalizeStyle(unref(attrs).style)
+      }, [
+        createVNode(unref(PopoverRoot), {
+          open: open.value,
+          "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(PopoverTrigger), { "as-child": "" }, {
+              default: withCtx(() => [
+                createElementVNode("button", mergeProps({ ...unref(attrs), class: void 0, style: void 0 }, {
+                  id: unref(field).id,
+                  type: "button",
+                  disabled: unref(field).disabled,
+                  "aria-invalid": unref(field).invalid || void 0,
+                  "aria-describedby": unref(field).describedBy,
+                  class: ["group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55", [
+                    shellSize[__props.size],
+                    unref(field).invalid ? "border-danger focus-visible:ring-danger-soft" : "border-line focus-visible:border-brand"
+                  ]]
+                }), [
+                  createVNode(_sfc_main$1, {
+                    name: "lucide:calendar-range",
+                    size: 16,
+                    class: "shrink-0 text-muted"
+                  }),
+                  createVNode(_sfc_main$2, {
+                    value: display.value || __props.placeholder || unref(text).placeholder,
+                    align: "start",
+                    class: normalizeClass(["min-w-0 flex-1", display.value ? "" : "text-muted"])
+                  }, null, 8, ["value", "class"]),
+                  showClear.value ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true),
+                  createVNode(_sfc_main$1, {
+                    name: "lucide:chevron-down",
+                    size: 15,
+                    class: "shrink-0 text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[state=open]:rotate-180 motion-reduce:transition-none"
+                  })
+                ], 16, _hoisted_1)
+              ]),
+              _: 1
+            }),
+            createVNode(unref(PopoverPortal), null, {
+              default: withCtx(() => [
+                createVNode(unref(PopoverContent), {
+                  "side-offset": 6,
+                  align: "start",
+                  "collision-padding": 8,
+                  class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) flex max-w-[calc(100vw-1rem)] flex-col rounded-card p-0 outline-none sm:flex-row"])
+                }, {
+                  default: withCtx(() => [
+                    presetList.value.length ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      role: "group",
+                      "aria-label": unref(text).presets,
+                      class: "flex gap-1 overflow-x-auto border-b border-line p-2 sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-b-0"
+                    }, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(presetList.value, (preset, i) => {
+                        return openBlock(), createElementBlock("button", {
+                          key: `${i}:${preset.label}`,
+                          type: "button",
+                          disabled: !presetFits(preset),
+                          "aria-pressed": unref(sameRange)(value.value, preset.range()),
+                          class: "shrink-0 rounded-control px-2.5 py-1.5 text-left text-sm whitespace-nowrap text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:bg-surface-soft hover:text-ink focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 aria-pressed:bg-brand-soft aria-pressed:text-ink",
+                          onClick: ($event) => pickPreset(preset)
+                        }, toDisplayString(preset.label), 9, _hoisted_4);
+                      }), 128))
+                    ], 8, _hoisted_3)) : createCommentVNode("", true),
+                    createVNode(_sfc_main$3, {
+                      "model-value": value.value,
+                      min: __props.min,
+                      max: __props.max,
+                      "is-disabled": __props.isDisabled,
+                      "is-date-unavailable": __props.isDateUnavailable,
+                      "maximum-days": __props.maximumDays,
+                      months: wide.value ? 2 : 1,
+                      locale: __props.locale,
+                      class: "border-0 bg-transparent",
+                      "onUpdate:modelValue": pick
+                    }, null, 8, ["model-value", "min", "max", "is-disabled", "is-date-unavailable", "maximum-days", "months", "locale"])
+                  ]),
+                  _: 1
+                }, 8, ["class"])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["open"]),
+        showClear.value ? (openBlock(), createElementBlock("button", {
+          key: 0,
+          type: "button",
+          "aria-label": unref(text).clear,
+          class: "absolute top-1/2 right-[calc(0.75rem+15px+0.5rem)] flex -translate-y-1/2 items-center rounded-sm text-muted outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+          onClick: _cache[1] || (_cache[1] = ($event) => emit("update:modelValue", void 0))
+        }, [
+          createVNode(_sfc_main$1, {
+            name: "lucide:x",
+            size: 15
+          })
+        ], 8, _hoisted_5)) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpDisclosure-ChQYmjlR.js → LpDisclosure-Cc23-JOT.js}

@@ -1,6 +1,6 @@
 import { defineComponent, getCurrentInstance, computed, ref, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createCommentVNode, createElementVNode, renderSlot, createTextVNode, toDisplayString, nextTick } from "vue";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = { class: "min-w-0 flex-1 text-left" };
 const _hoisted_2 = { class: "grid gap-2.5 px-3 pt-1 pb-3 group-data-[state=open]/content:animate-[disclosure-body-in_300ms_var(--ease-emphasized)] motion-reduce:animate-none" };

package/dist/chunks/{LpDrawer-BZ6k3hvo.js → LpDrawer-Dt4aB4Fr.js}

@@ -1,18 +1,20 @@
-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 { ref, defineComponent, computed, watch, onBeforeUnmount, useSlots, openBlock, createElementBlock, Fragment, withDirectives, createElementVNode, normalizeStyle, unref, normalizeClass, vShow, toDisplayString, createCommentVNode, renderSlot, createVNode, withCtx, mergeProps, createBlock, createTextVNode } from "vue";
+import { DrawerRoot, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerHandle, DrawerDescription, DrawerClose } from "vaul-vue";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { useGlass } from "../composables/useGlass.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-D8xyKXcF.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-Bry1fdOM.js";
 import { useModalLayer, anyModalOpen } from "../components/modalDepth.js";
 const _hoisted_1 = { class: "text-base font-semibold text-ink" };
 const _hoisted_2 = { class: "flex flex-col gap-1" };
 const _hoisted_3 = ["data-vaul-no-drag"];
 const _hoisted_4 = {
-  key: 3,
+  key: 4,
   class: "flex justify-end gap-2 px-5 pb-5 pt-4"
 };
-const edgeOwner = ref(null);
+const EDGE_KEY = /* @__PURE__ */ Symbol.for("@leavepulse/ui:drawer-edge-owner");
+const edgeOwner = globalThis[EDGE_KEY] ??= ref(null);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpDrawer",
   props: {
@@ -38,19 +40,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     resizable: { type: Boolean },
     minSize: { default: "22rem" },
     maxSize: { default: "96vw" },
-    glass: { type: Boolean, default: void 0 }
+    glass: { type: Boolean, default: void 0 },
+    ariaLabel: {},
+    labels: {}
   },
   emits: ["update:open"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const frosted = useGlass(() => props.glass);
+    const text = useLabels("drawer", { close: "Close" }, () => props.labels);
     const emit = __emit;
     const dir = computed(() => props.direction ?? props.side ?? "right");
     const isHorizontal = computed(() => dir.value === "left" || dir.value === "right");
     const isSheet = computed(() => dir.value === "top" || dir.value === "bottom");
     const showHandle = computed(() => props.handle ?? isSheet.value);
     const SIZES = { sm: 22, md: 28, lg: 36, xl: 48 };
-    const { claim, release, layer } = useModalLayer();
+    const contentRef = ref(null);
+    const { claim, release, layer } = useModalLayer({ element: () => contentRef.value?.$el });
     watch(() => props.open, (open) => open ? claim() : release(), { immediate: true });
     onBeforeUnmount(release);
     const contentClass = computed(() => {
@@ -73,32 +79,50 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const len = props.width ?? `min(${isHorizontal.value ? "94vw" : "94vh"}, ${SIZES[props.size]}rem)`;
       return isHorizontal.value ? { width: len } : { height: len };
     });
+    function toPx(css) {
+      const n = Number.parseFloat(css);
+      if (css.endsWith("rem")) {
+        const root = typeof document === "undefined" ? 16 : Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+        return n * root;
+      }
+      if (css.endsWith("vw")) return n / 100 * window.innerWidth;
+      if (css.endsWith("vh")) return n / 100 * window.innerHeight;
+      if (css.endsWith("px") || /^[\d.]+$/.test(css.trim())) return n;
+      return Number.NaN;
+    }
+    let endResize = null;
     function startResize(e) {
       if (!props.resizable || !isHorizontal.value) return;
       e.preventDefault();
+      endResize?.();
+      const grip = e.currentTarget instanceof HTMLElement ? e.currentTarget : null;
+      grip?.setPointerCapture(e.pointerId);
       const fromRight = dir.value === "right";
-      const toPx = (css) => {
-        if (css.endsWith("rem")) return Number.parseFloat(css) * 16;
-        if (css.endsWith("vw")) return Number.parseFloat(css) / 100 * window.innerWidth;
-        return Number.parseFloat(css);
-      };
       const min = toPx(props.minSize);
       const max = toPx(props.maxSize);
       const onMove = (ev) => {
+        if (ev.pointerId !== e.pointerId) return;
         const raw = fromRight ? window.innerWidth - ev.clientX : ev.clientX;
-        resizedPx.value = Math.max(min, Math.min(max, raw));
+        resizedPx.value = Math.max(Number.isNaN(min) ? 0 : min, Math.min(Number.isNaN(max) ? Infinity : max, raw));
       };
-      const onUp = () => {
+      const end = () => {
         window.removeEventListener("pointermove", onMove);
-        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointerup", end);
+        window.removeEventListener("pointercancel", end);
+        grip?.removeEventListener("lostpointercapture", end);
         document.body.style.userSelect = "";
         document.body.style.cursor = "";
+        endResize = null;
       };
+      endResize = end;
       document.body.style.userSelect = "none";
       document.body.style.cursor = "ew-resize";
       window.addEventListener("pointermove", onMove);
-      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointerup", end);
+      window.addEventListener("pointercancel", end);
+      grip?.addEventListener("lostpointercapture", end);
     }
+    onBeforeUnmount(() => endResize?.());
     const slots = useSlots();
     const hasHeader = computed(() => Boolean(props.title || slots.title));
     const padClass = computed(() => {
@@ -134,8 +158,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     function panelPx() {
       const vw = typeof window === "undefined" ? 0 : window.innerWidth;
-      const cap = props.width ? Number.parseFloat(props.width) : SIZES[props.size] * 16;
-      return Math.min(vw * 0.94, Number.isFinite(cap) ? cap : SIZES[props.size] * 16);
+      const preset = toPx(`${SIZES[props.size]}rem`);
+      const cap = props.width ? toPx(props.width) : preset;
+      return Math.min(vw * 0.94, Number.isFinite(cap) ? cap : preset);
     }
     function edgeEnabled() {
       if (!props.edgeOpen || !isHorizontal.value || props.open || handingOff.value) return false;
@@ -313,11 +338,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   style: normalizeStyle({ zIndex: unref(layer).scrim }),
                   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": unref(frosted), "lp-scrim--nested": unref(layer).nested }])
                 }, null, 8, ["style", "class"]),
-                createVNode(unref(DrawerContent), {
-                  class: normalizeClass(contentClass.value),
-                  style: normalizeStyle([sizeStyle.value, { zIndex: unref(layer).panel }]),
+                createVNode(unref(DrawerContent), mergeProps({
+                  ref_key: "contentRef",
+                  ref: contentRef
+                }, __props.description ? {} : { "aria-describedby": void 0 }, {
+                  class: contentClass.value,
+                  style: [sizeStyle.value, { zIndex: unref(layer).panel }],
                   "data-vaul-animate": handingOff.value || skipOpenSlide.value ? "false" : void 0
-                }, {
+                }), {
                   default: withCtx(() => [
                     __props.resizable && isHorizontal.value ? (openBlock(), createElementBlock("div", {
                       key: 0,
@@ -329,12 +357,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         class: normalizeClass(["absolute inset-y-0 w-px bg-line transition-colors group-hover/resize:bg-brand", dir.value === "right" ? "left-0" : "right-0"])
                       }, null, 2)
                     ], 34)) : createCommentVNode("", true),
-                    showHandle.value ? (openBlock(), createBlock(unref(DrawerHandle), {
+                    !hasHeader.value && __props.ariaLabel ? (openBlock(), createBlock(unref(DrawerTitle), {
                       key: 1,
+                      class: "sr-only"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(__props.ariaLabel), 1)
+                      ]),
+                      _: 1
+                    })) : createCommentVNode("", true),
+                    showHandle.value ? (openBlock(), createBlock(unref(DrawerHandle), {
+                      key: 2,
                       class: "mx-auto my-2 h-1.5 w-12 shrink-0 cursor-grab rounded-pill bg-line-strong transition-colors hover:bg-muted active:cursor-grabbing"
                     })) : createCommentVNode("", true),
                     hasHeader.value ? (openBlock(), createElementBlock("header", {
-                      key: 2,
+                      key: 3,
                       class: normalizeClass(["flex items-start justify-between gap-4", headerClass.value])
                     }, [
                       createElementVNode("div", _hoisted_2, [
@@ -358,7 +395,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ]),
                       createVNode(unref(DrawerClose), {
                         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"
+                        "aria-label": unref(text).close
                       }, {
                         default: withCtx(() => [
                           createVNode(_sfc_main$1, {
@@ -368,7 +405,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           }, null, 8, ["class"])
                         ]),
                         _: 1
-                      })
+                      }, 8, ["aria-label"])
                     ], 2)) : createCommentVNode("", true),
                     withDirectives((openBlock(), createElementBlock("div", {
                       class: "flex min-h-0 min-w-0 flex-1 flex-col [-webkit-user-select:text]! [user-select:text]!",
@@ -391,7 +428,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ])) : createCommentVNode("", true)
                   ]),
                   _: 3
-                }, 8, ["class", "style", "data-vaul-animate"])
+                }, 16, ["class", "style", "data-vaul-animate"])
               ]),
               _: 3
             })

package/dist/chunks/{LpDropdownMenu-DJpoqRCb.js → LpDropdownMenu-DdJGQzPn.js}

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, renderSlot, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, createTextVNode, toDisplayString } from "vue";
 import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuItem } from "reka-ui";
 import { POPOVER_PANEL } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpDropdownMenu",
   props: {
@@ -20,6 +20,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(DropdownMenuPortal), null, {
             default: withCtx(() => [
               createVNode(unref(DropdownMenuContent), {
+                "collision-padding": 8,
                 "side-offset": 6,
                 align: "end",
                 class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) min-w-44 p-1 outline-none"])

package/dist/chunks/{LpEmptyState-Dsdqz1Wj.js → LpEmptyState-BJbZXC8D.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, mergeProps, unref, normalizeClass, createVNode, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = { class: "flex flex-col gap-1" };
 const _hoisted_2 = {