@leavepulse/ui 0.43.4 → 0.44.0

package/dist/chunks/{LpConfirmDialog-Q-bxff8z.js → LpConfirmDialog-CIUOSnWo.js}

@@ -1,35 +1,75 @@
-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 { defineComponent, computed, ref, watch, openBlock, createBlock, createSlots, withCtx, renderSlot, createElementBlock, toDisplayString, createCommentVNode, createVNode, createTextVNode, unref, createElementVNode, normalizeClass, nextTick } from "vue";
+import { useLabels } from "../composables/useLpConfig.js";
+import { _ as _sfc_main$2 } from "./LpButton-kqJBHIIb.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpModal-Bt0pQCI_.js";
+import { _ as _sfc_main$1 } from "./LpModal-DPwGKBPv.js";
 const _hoisted_1 = { class: "inline-flex items-center gap-2.5" };
+const _hoisted_2 = {
+  key: 0,
+  role: "alert",
+  class: "mt-3 text-sm text-danger"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
   props: {
     open: { type: Boolean },
     title: {},
     description: {},
-    confirmLabel: { default: "Confirm" },
-    cancelLabel: { default: "Cancel" },
+    confirmLabel: {},
+    cancelLabel: {},
     danger: { type: Boolean },
     icon: {},
     loading: { type: Boolean },
-    loadingLabel: { default: "Working…" },
-    glass: { type: Boolean, default: void 0 }
+    loadingLabel: {},
+    action: {},
+    glass: { type: Boolean, default: void 0 },
+    labels: {}
   },
   emits: ["update:open", "confirm", "cancel"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const text = useLabels(
+      "confirm",
+      { confirm: "Confirm", cancel: "Cancel", loading: "Working…", failed: "Something went wrong." },
+      () => props.labels
+    );
     const marker = computed(() => {
       if (props.icon !== void 0) return props.icon;
       return props.danger ? "lucide:triangle-alert" : "";
     });
-    function confirm() {
+    const running = ref(false);
+    const error = ref("");
+    const busy = computed(() => props.loading || running.value);
+    watch(
+      () => props.open,
+      (open) => {
+        if (open) error.value = "";
+      }
+    );
+    async function confirm() {
+      if (busy.value) return;
+      error.value = "";
       emit("confirm");
+      if (props.action) {
+        running.value = true;
+        try {
+          await props.action();
+        } catch (e) {
+          error.value = e instanceof Error && e.message ? e.message : text.value.failed;
+          return;
+        } finally {
+          running.value = false;
+        }
+        emit("update:open", false);
+        return;
+      }
+      await nextTick();
       if (!props.loading) emit("update:open", false);
     }
-    function cancel() {
+    function dismiss(open) {
+      if (open) return emit("update:open", true);
+      if (busy.value) return;
       emit("cancel");
       emit("update:open", false);
     }
@@ -39,32 +79,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         open: __props.open,
         title: __props.title,
         description: __props.description,
-        "onUpdate:open": _cache[0] || (_cache[0] = (v) => _ctx.$emit("update:open", v))
+        role: "alertdialog",
+        "onUpdate:open": dismiss
       }, createSlots({
         footer: withCtx(() => [
           createVNode(_sfc_main$2, {
             variant: "ghost",
-            disabled: __props.loading,
-            onClick: cancel
+            disabled: busy.value,
+            onClick: _cache[0] || (_cache[0] = ($event) => dismiss(false))
           }, {
             default: withCtx(() => [
-              createTextVNode(toDisplayString(__props.cancelLabel), 1)
+              createTextVNode(toDisplayString(__props.cancelLabel ?? unref(text).cancel), 1)
             ]),
             _: 1
           }, 8, ["disabled"]),
           createVNode(_sfc_main$2, {
             variant: __props.danger ? "danger" : "solid",
-            disabled: __props.loading,
+            disabled: busy.value,
             onClick: confirm
           }, {
             default: withCtx(() => [
-              createTextVNode(toDisplayString(__props.loading ? __props.loadingLabel : __props.confirmLabel), 1)
+              createTextVNode(toDisplayString(busy.value ? __props.loadingLabel ?? unref(text).loading : __props.confirmLabel ?? unref(text).confirm), 1)
             ]),
             _: 1
           }, 8, ["variant", "disabled"])
         ]),
         default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
+          renderSlot(_ctx.$slots, "default"),
+          error.value ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(error.value), 1)) : createCommentVNode("", true)
         ]),
         _: 2
       }, [

package/dist/chunks/LpConfirmHost-CDm0Wtpv.js

@@ -0,0 +1,49 @@
+import { defineComponent, computed, ref, watch, openBlock, createBlock, createCommentVNode } from "vue";
+import { confirmQueue, settleConfirm } from "../components/confirm.js";
+import { _ as _sfc_main$1 } from "./LpConfirmDialog-CIUOSnWo.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpConfirmHost",
+  props: {
+    glass: { type: Boolean, default: void 0 }
+  },
+  setup(__props) {
+    const current = computed(() => confirmQueue[0]);
+    const open = ref(false);
+    let confirmed = false;
+    const answer = (value) => confirmed = value;
+    watch(
+      () => current.value?.id,
+      (id) => {
+        confirmed = false;
+        open.value = id !== void 0;
+      },
+      { immediate: true }
+    );
+    function onOpen(value) {
+      open.value = value;
+      const request = current.value;
+      if (!value && request) settleConfirm(request.id, confirmed);
+    }
+    return (_ctx, _cache) => {
+      return current.value ? (openBlock(), createBlock(_sfc_main$1, {
+        key: current.value.id,
+        open: open.value,
+        glass: __props.glass,
+        title: current.value.title,
+        description: current.value.description,
+        danger: current.value.danger,
+        icon: current.value.icon,
+        "confirm-label": current.value.confirmLabel,
+        "cancel-label": current.value.cancelLabel,
+        "loading-label": current.value.loadingLabel,
+        action: current.value.action,
+        onConfirm: _cache[0] || (_cache[0] = ($event) => answer(true)),
+        onCancel: _cache[1] || (_cache[1] = ($event) => answer(false)),
+        "onUpdate:open": onOpen
+      }, null, 8, ["open", "glass", "title", "description", "danger", "icon", "confirm-label", "cancel-label", "loading-label", "action"])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpContextMenu-DQw5dGfG.js

@@ -0,0 +1,68 @@
+import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createVNode, renderSlot, normalizeClass, createCommentVNode } from "vue";
+import { ContextMenuRoot, ContextMenuTrigger, ContextMenuPortal, ContextMenuContent } from "reka-ui";
+import { _ as _sfc_main$1 } from "./ContextMenuItems-CrfeNPWT.js";
+import { POPOVER_PANEL } from "../components/dropdown.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpContextMenu",
+  props: {
+    items: {},
+    always: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const enabled = computed(() => props.always || props.items.length > 0);
+    const PANEL = `${POPOVER_PANEL} z-(--z-popover) min-w-48 p-1 outline-none`;
+    const SELECTABLE = /* @__PURE__ */ new Set(["text", "search", "url", "tel", "password"]);
+    let field = null;
+    function rememberField() {
+      const el = document.activeElement;
+      const text = el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement && SELECTABLE.has(el.type);
+      field = text ? { el, value: el.value, start: el.selectionStart ?? 0, end: el.selectionEnd ?? 0 } : null;
+    }
+    function returnFocus(event) {
+      const saved = field;
+      field = null;
+      if (!saved || !saved.el.isConnected) return;
+      event.preventDefault();
+      saved.el.focus();
+      if (saved.el.value === saved.value) saved.el.setSelectionRange(saved.start, saved.end);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ContextMenuRoot), null, {
+        default: withCtx(() => [
+          createVNode(unref(ContextMenuTrigger), {
+            "as-child": "",
+            disabled: !enabled.value,
+            onContextmenuCapture: rememberField
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["disabled"]),
+          __props.items.length ? (openBlock(), createBlock(unref(ContextMenuPortal), { key: 0 }, {
+            default: withCtx(() => [
+              createVNode(unref(ContextMenuContent), {
+                class: normalizeClass(PANEL),
+                onCloseAutoFocus: returnFocus
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$1, {
+                    items: __props.items,
+                    panel: PANEL
+                  }, null, 8, ["items"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpDatePicker-Drirx1AK.js

@@ -0,0 +1,191 @@
+import { defineComponent, ref, computed, useAttrs, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, createElementVNode, mergeProps, toDisplayString, createCommentVNode } 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$2 } from "./LpCalendar-B7Ko5RdR.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$3 } from "./LpTimeField-C5HRgS5H.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"
+                  }),
+                  createElementVNode("span", {
+                    class: normalizeClass(["min-w-0 flex-1 truncate", display.value ? "" : "text-muted"])
+                  }, toDisplayString(display.value || __props.placeholder), 3),
+                  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), {
+                  "side-offset": 6,
+                  align: "start",
+                  class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) rounded-card p-0 outline-none"])
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_sfc_main$2, {
+                      "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$3, {
+                        "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/{LpDrawer-BZ6k3hvo.js → LpDrawer-bScx-KMO.js}

@@ -1,7 +1,8 @@
-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 { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-D8xyKXcF.js";
 import { useModalLayer, anyModalOpen } from "../components/modalDepth.js";
@@ -9,10 +10,11 @@ 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
             })