@leavepulse/ui 0.43.4 → 0.44.0

package/src/components/LpConfirmHost.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/*
+ * Renders the requests made through `confirm()` / `useConfirm()`. Mount one
+ * near the app root, next to LpToaster.
+ */
+import { computed, ref, watch } from "vue"
+import { confirmQueue, settleConfirm } from "./confirm"
+import LpConfirmDialog from "./LpConfirmDialog.vue"
+
+withDefaults(
+  defineProps<{
+    /** Frosted glass panel. Follows `provideGlass` when unset. */
+    glass?: boolean
+  }>(),
+  { glass: undefined },
+)
+
+const current = computed(() => confirmQueue[0])
+const open = ref(false)
+let confirmed = false
+const answer = (value: boolean) => (confirmed = value)
+
+watch(
+  () => current.value?.id,
+  (id) => {
+    confirmed = false
+    open.value = id !== undefined
+  },
+  { immediate: true },
+)
+
+// The dialog closes itself after a successful action, or straight away for a
+// plain confirmation; a failed action keeps it open and never gets here.
+function onOpen(value: boolean) {
+  open.value = value
+  const request = current.value
+  if (!value && request) settleConfirm(request.id, confirmed)
+}
+</script>
+
+<template>
+  <LpConfirmDialog
+    v-if="current"
+    :key="current.id"
+    :open="open"
+    :glass="glass"
+    :title="current.title"
+    :description="current.description"
+    :danger="current.danger"
+    :icon="current.icon"
+    :confirm-label="current.confirmLabel"
+    :cancel-label="current.cancelLabel"
+    :loading-label="current.loadingLabel"
+    :action="current.action"
+    @confirm="answer(true)"
+    @cancel="answer(false)"
+    @update:open="onOpen"
+  />
+</template>

package/src/components/LpContextMenu.vue

@@ -6,20 +6,10 @@
  * long-press on touch) opens the menu at the pointer. Shares the floating-panel
  * surface + option-row look with the rest of the kit via dropdown.ts.
  */
-import {
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuPortal,
-  ContextMenuRoot,
-  ContextMenuSeparator,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from "reka-ui"
+import { ContextMenuContent, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from "reka-ui"
 import { computed } from "vue"
+import ContextMenuItems from "./ContextMenuItems.vue"
 import { POPOVER_PANEL } from "./dropdown"
-import LpIcon from "./LpIcon.vue"
 
 export interface ContextMenuItemDef {
   label: string
@@ -30,7 +20,7 @@ export interface ContextMenuItemDef {
   disabled?: boolean
   separatorBefore?: boolean
   onSelect?: () => void
-  /** Nested submenu. When present, onSelect is ignored. */
+  /** Nested submenu, to any depth. When present, onSelect is ignored. */
   children?: ContextMenuItemDef[]
   /**
    * Renders as a tick-box rather than a plain item, and the menu stays open on
@@ -52,17 +42,13 @@ const props = defineProps<{
   always?: boolean
 }>()
 
-// With no items, render just the trigger slot — no reka machinery — so the
-// element keeps the browser's native context menu. Lets callers wrap
-// unconditionally and pass [] to opt out per element. `always` overrides this so
-// a late-populated menu is ready on the very first click.
+// With no items the trigger is disabled, so the element keeps the browser's
+// native context menu. Lets callers wrap unconditionally and pass [] to opt out
+// per element. `always` overrides this so a late-populated menu is ready on the
+// very first click.
 const enabled = computed(() => props.always || props.items.length > 0)
 
 const PANEL = `${POPOVER_PANEL} z-(--z-popover) min-w-48 p-1 outline-none`
-const ITEM =
-  "group/item flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-1.5 text-sm outline-none transition-[background-color,color] duration-[var(--duration-fast)] data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-brand-soft"
-const ICON =
-  "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[highlighted]/item:translate-x-0.5"
 
 // A menu opened over a text field takes focus, and on close reka hands it to the
 // trigger, so the caret and the selection the user right-clicked are gone — the
@@ -92,104 +78,17 @@ function returnFocus(event: Event) {
 </script>
 
 <template>
-  <slot v-if="!enabled" />
-
-  <ContextMenuRoot v-else>
-    <ContextMenuTrigger as-child @contextmenu.capture="rememberField">
+  <!-- One tree whether or not there are items: swapping between a bare slot and
+       the reka trigger remounted the wrapped content whenever items arrived
+       late, losing its state and focus. A disabled trigger leaves the browser's
+       own menu in place. -->
+  <ContextMenuRoot>
+    <ContextMenuTrigger as-child :disabled="!enabled" @contextmenu.capture="rememberField">
       <slot />
     </ContextMenuTrigger>
     <ContextMenuPortal v-if="items.length">
       <ContextMenuContent :class="PANEL" @close-auto-focus="returnFocus">
-        <template v-for="(item, i) in items" :key="i">
-          <ContextMenuSeparator v-if="item.separatorBefore" class="my-1 h-px bg-line" />
-
-          <!-- Submenu branch -->
-          <ContextMenuSub v-if="item.children?.length">
-            <ContextMenuSubTrigger
-              :class="[ITEM, 'justify-between text-ink data-[highlighted]:text-brand data-[state=open]:bg-brand-soft data-[state=open]:text-brand']"
-            >
-              <span class="flex items-center gap-2">
-                <LpIcon v-if="item.icon" :name="item.icon" :size="15" :class="ICON" />
-                {{ item.label }}
-              </span>
-              <LpIcon name="lucide:chevron-right" :size="14" class="text-muted" />
-            </ContextMenuSubTrigger>
-            <ContextMenuPortal>
-              <ContextMenuSubContent :class="PANEL" :side-offset="2" :align-offset="-4">
-                <template v-for="(sub, j) in item.children" :key="j">
-                  <ContextMenuSeparator v-if="sub.separatorBefore" class="my-1 h-px bg-line" />
-                  <!-- The tick-box case, as in the top-level menu: this is
-                       where most of them live, since a submenu is what a list
-                       of choices opens into. -->
-                  <ContextMenuItem
-                    v-if="sub.checked !== undefined"
-                    :class="[ITEM, 'justify-between text-ink data-[highlighted]:text-brand']"
-                    :disabled="sub.disabled"
-                    @select.prevent="sub.onSelect?.()"
-                  >
-                    <span class="flex items-center gap-2">
-                      <LpIcon
-                        :name="sub.checked ? 'lucide:check' : 'lucide:minus'"
-                        :size="15"
-                        :class="[ICON, sub.checked ? '' : 'opacity-25']"
-                      />
-                      {{ sub.label }}
-                    </span>
-                    <kbd v-if="sub.shortcut" class="text-xs text-muted">{{ sub.shortcut }}</kbd>
-                  </ContextMenuItem>
-
-                  <ContextMenuItem
-                    v-else
-                    :class="[ITEM, 'justify-between', sub.danger ? 'text-danger data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger' : 'text-ink data-[highlighted]:text-brand']"
-                    :disabled="sub.disabled"
-                    @select="sub.onSelect?.()"
-                  >
-                    <span class="flex items-center gap-2">
-                      <LpIcon v-if="sub.icon" :name="sub.icon" :size="15" :class="ICON" />
-                      {{ sub.label }}
-                    </span>
-                    <kbd v-if="sub.shortcut" class="text-xs text-muted">{{ sub.shortcut }}</kbd>
-                  </ContextMenuItem>
-                </template>
-              </ContextMenuSubContent>
-            </ContextMenuPortal>
-          </ContextMenuSub>
-
-          <!-- Tick-box item. `@select.prevent` keeps the menu open: these come
-               in lists where several are set in one visit, and closing after
-               each tick would mean reopening for the next. The tick occupies a
-               fixed slot so unticked rows stay aligned with ticked ones. -->
-          <ContextMenuItem
-            v-else-if="item.checked !== undefined"
-            :class="[ITEM, 'justify-between text-ink data-[highlighted]:text-brand']"
-            :disabled="item.disabled"
-            @select.prevent="item.onSelect?.()"
-          >
-            <span class="flex items-center gap-2">
-              <LpIcon
-                :name="item.checked ? 'lucide:check' : 'lucide:minus'"
-                :size="15"
-                :class="[ICON, item.checked ? '' : 'opacity-25']"
-              />
-              {{ item.label }}
-            </span>
-            <kbd v-if="item.shortcut" class="text-xs text-muted">{{ item.shortcut }}</kbd>
-          </ContextMenuItem>
-
-          <!-- Leaf item -->
-          <ContextMenuItem
-            v-else
-            :class="[ITEM, 'justify-between', item.danger ? 'text-danger data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger' : 'text-ink data-[highlighted]:text-brand']"
-            :disabled="item.disabled"
-            @select="item.onSelect?.()"
-          >
-            <span class="flex items-center gap-2">
-              <LpIcon v-if="item.icon" :name="item.icon" :size="15" :class="ICON" />
-              {{ item.label }}
-            </span>
-            <kbd v-if="item.shortcut" class="text-xs text-muted">{{ item.shortcut }}</kbd>
-          </ContextMenuItem>
-        </template>
+        <ContextMenuItems :items="items" :panel="PANEL" />
       </ContextMenuContent>
     </ContextMenuPortal>
   </ContextMenuRoot>

package/src/components/LpDatePicker.vue

@@ -1,3 +1,7 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * Date field + calendar popover. The model is an ISO date string ("YYYY-MM-DD",
@@ -14,7 +18,10 @@
  * the common case.
  */
 import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui"
-import { computed, ref } from "vue"
+import { computed, ref, useAttrs } from "vue"
+import { useFieldControl } from "../composables/useField"
+import { useLabels } from "../composables/useLpConfig"
+import { mergeClass } from "../composables/useMergedClass"
 import { POPOVER_PANEL } from "./dropdown"
 import LpCalendar from "./LpCalendar.vue"
 import LpIcon from "./LpIcon.vue"
@@ -80,7 +87,11 @@ const shellSize = {
   lg: "h-(--size-control-lg) text-sm",
 }
 
-function onPick(v: string | undefined) {
+function onPick(picked: string | undefined) {
+  // Clicking the selected day again is the calendar's "deselect". Here it is
+  // someone confirming the date they already have, so it keeps the value and
+  // closes like any other pick; clearing has its own button.
+  const v = picked ?? (day.value || undefined)
   if (!props.time) {
     emit("update:modelValue", v)
     open.value = false
@@ -101,75 +112,95 @@ function onTime(at: string) {
 function clear() {
   emit("update:modelValue", undefined)
 }
+
+const attrs = useAttrs()
+const field = useFieldControl(() => ({
+  wrapped: false,
+  id: typeof attrs.id === "string" ? attrs.id : undefined,
+  invalid: props.invalid,
+  disabled: props.disabled,
+}))
+const labels = useLabels("datePicker", { clear: "Clear" })
+const showClear = computed(() => props.clearable && !!props.modelValue && !field.value.disabled)
 </script>
 
 <template>
-  <PopoverRoot v-model:open="open">
-    <PopoverTrigger as-child>
-      <button
-        type="button"
-        :disabled="disabled"
-        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"
-        :class="[
-          shellSize[size],
-          invalid ? 'border-danger focus-visible:ring-danger-soft' : 'border-line focus-visible:border-brand',
-        ]"
-      >
-        <LpIcon name="lucide:calendar" :size="16" class="shrink-0 text-muted" />
-        <span class="min-w-0 flex-1 truncate" :class="display ? '' : 'text-muted'">
-          {{ display || placeholder }}
-        </span>
-        <span
-          v-if="clearable && modelValue && !disabled"
-          role="button"
-          tabindex="-1"
-          aria-label="Clear"
-          class="shrink-0 text-muted transition-colors hover:text-ink"
-          @click.stop="clear"
-          @keydown.enter.stop="clear"
+  <!-- The clear control sits beside the trigger, not inside it: a button
+       nested in a button is invalid, and the nested one was unreachable by
+       keyboard. -->
+  <div :class="mergeClass('relative w-full', attrs.class as string)" :style="attrs.style as never">
+    <PopoverRoot v-model:open="open">
+      <PopoverTrigger as-child>
+        <button
+          v-bind="{ ...attrs, class: undefined, style: undefined }"
+          :id="field.id"
+          type="button"
+          :disabled="field.disabled"
+          :aria-invalid="field.invalid || undefined"
+          :aria-describedby="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"
+          :class="[
+            shellSize[size],
+            field.invalid ? 'border-danger focus-visible:ring-danger-soft' : 'border-line focus-visible:border-brand',
+          ]"
+        >
+          <LpIcon name="lucide:calendar" :size="16" class="shrink-0 text-muted" />
+          <span class="min-w-0 flex-1 truncate" :class="display ? '' : 'text-muted'">
+            {{ display || placeholder }}
+          </span>
+          <span v-if="showClear" class="w-[15px] shrink-0" aria-hidden="true" />
+          <LpIcon
+            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"
+          />
+        </button>
+      </PopoverTrigger>
+      <PopoverPortal>
+        <PopoverContent
+          :side-offset="6"
+          align="start"
+          :class="[POPOVER_PANEL, 'z-(--z-popover) rounded-card p-0 outline-none']"
         >
-          <LpIcon name="lucide:x" :size="15" />
-        </span>
-        <LpIcon
-          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"
-        />
-      </button>
-    </PopoverTrigger>
-    <PopoverPortal>
-      <PopoverContent
-        :side-offset="6"
-        align="start"
-        :class="[POPOVER_PANEL, 'z-(--z-popover) rounded-card p-0 outline-none']"
-      >
-        <LpCalendar
-          :model-value="day"
-          :min="min"
-          :max="max"
-          :is-disabled="isDisabled"
-          class="border-0 bg-transparent"
-          @update:model-value="onPick"
-        />
-        <div v-if="time" class="flex items-center gap-2 border-t border-line px-3 py-2">
-          <LpIcon name="lucide:clock" :size="15" class="shrink-0 text-muted" />
-          <LpTimeField
-            :model-value="minute || undefined"
-            :disabled="!day"
-            :icon="false"
-            size="sm"
-            class="flex-1"
-            @update:model-value="(at) => onTime(at || '')"
+          <LpCalendar
+            :model-value="day"
+            :min="min"
+            :max="max"
+            :is-disabled="isDisabled"
+            class="border-0 bg-transparent"
+            @update:model-value="onPick"
           />
-          <button
-            type="button"
-            class="shrink-0 rounded-control px-2 py-1 text-xs text-muted transition-colors hover:text-ink"
-            @click="open = false"
-          >
-            {{ doneLabel }}
-          </button>
-        </div>
-      </PopoverContent>
-    </PopoverPortal>
-  </PopoverRoot>
+          <div v-if="time" class="flex items-center gap-2 border-t border-line px-3 py-2">
+            <LpIcon name="lucide:clock" :size="15" class="shrink-0 text-muted" />
+            <LpTimeField
+              :model-value="minute || undefined"
+              :disabled="!day"
+              :icon="false"
+              size="sm"
+              class="flex-1"
+              @update:model-value="(at) => onTime(at || '')"
+            />
+            <button
+              type="button"
+              class="shrink-0 rounded-control px-2 py-1 text-xs text-muted transition-colors hover:text-ink"
+              @click="open = false"
+            >
+              {{ doneLabel }}
+            </button>
+          </div>
+        </PopoverContent>
+      </PopoverPortal>
+    </PopoverRoot>
+    <!-- Positioned over the spacer the trigger leaves for it, just before the
+         chevron (gap-2 + 15px chevron + px-3 from the right edge). -->
+    <button
+      v-if="showClear"
+      type="button"
+      :aria-label="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"
+      @click="clear"
+    >
+      <LpIcon name="lucide:x" :size="15" />
+    </button>
+  </div>
 </template>

package/src/components/LpDrawer.vue

@@ -1,8 +1,11 @@
 <script lang="ts">
-import { ref as sharedRef } from "vue"
+import { ref as sharedRef, type Ref } from "vue"
 
-// One pull at a time across every edge-open drawer on the page.
-const edgeOwner = sharedRef<symbol | null>(null)
+// One pull at a time across every edge-open drawer on the page, pinned to a
+// global symbol so a barrel and a deep import still share it.
+const EDGE_KEY = Symbol.for("@leavepulse/ui:drawer-edge-owner")
+type GlobalWithEdge = typeof globalThis & { [EDGE_KEY]?: Ref<symbol | null> }
+const edgeOwner = ((globalThis as GlobalWithEdge)[EDGE_KEY] ??= sharedRef<symbol | null>(null))
 </script>
 
 <script setup lang="ts">
@@ -32,6 +35,7 @@ import {
 import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { CLOSE_ICON } from "./dropdown"
 import { useGlass } from "../composables/useGlass"
+import { useLabels } from "../composables/useLpConfig"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import { anyModalOpen, useModalLayer } from "./modalDepth"
@@ -109,6 +113,9 @@ const props = withDefaults(
      * `provideGlass`, and without one it is off.
      */
     glass?: boolean
+    /** Accessible name for a drawer without a visible `title`. */
+    ariaLabel?: string
+    labels?: Partial<{ close: string }>
   }>(),
   {
     side: "right",
@@ -124,6 +131,7 @@ const props = withDefaults(
 )
 
 const frosted = useGlass(() => props.glass)
+const text = useLabels("drawer", { close: "Close" }, () => props.labels)
 
 const emit = defineEmits<{
   (e: "update:open", value: boolean): void
@@ -148,7 +156,8 @@ const SIZES = { sm: 22, md: 28, lg: 36, xl: 48 } // rem along the main axis
  * settings drawer) claimed those same rungs and the tie went to DOM order —
  * the drawer, portalled later on reopen, covered the dialog it had opened.
  */
-const { claim, release, layer } = useModalLayer()
+const contentRef = ref<{ $el: HTMLElement } | null>(null)
+const { claim, release, layer } = useModalLayer({ element: () => contentRef.value?.$el })
 watch(() => props.open, (open) => (open ? claim() : release()), { immediate: true })
 onBeforeUnmount(release)
 
@@ -179,36 +188,60 @@ const sizeStyle = computed(() => {
   return isHorizontal.value ? { width: len } : { height: len }
 })
 
+// Resolve a CSS length to px against the viewport. Anything it cannot read
+// (calc(), min()) comes back NaN for the caller to fall back on.
+function toPx(css: string): number {
+  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
+}
+
 // Drag the inner edge to resize. For a right drawer the panel grows as the
-// pointer moves left (width = viewportRight − clientX); mirror for left.
+// pointer moves left (width = viewportRight − clientX); mirror for left. The
+// pointer is captured, so a release over an iframe or outside the window still
+// ends the drag, and a cancelled touch ends it too.
+let endResize: (() => void) | null = null
+
 function startResize(e: PointerEvent) {
   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: string) => {
-    // Resolve rem/vw to px against the viewport for clamping.
-    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: PointerEvent) => {
+    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))
 
@@ -281,9 +314,9 @@ watch(
 // Resolve the panel's main-axis size in px to map drag distance → progress.
 function panelPx(): number {
   const vw = typeof window === "undefined" ? 0 : window.innerWidth
-  // mirror sizeStyle's min(94vw, SIZES[size]rem); 1rem≈16px.
-  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(): boolean {
@@ -479,6 +512,8 @@ const previewStyle = computed(() => {
         :class="{ 'lp-scrim--light': frosted, 'lp-scrim--nested': layer.nested }"
       />
       <DrawerContent
+        ref="contentRef"
+        v-bind="description ? {} : { 'aria-describedby': undefined }"
         :class="contentClass"
         :style="[sizeStyle, { zIndex: layer.panel }]"
         :data-vaul-animate="handingOff || skipOpenSlide ? 'false' : undefined"
@@ -498,6 +533,8 @@ const previewStyle = computed(() => {
           />
         </div>
 
+        <DrawerTitle v-if="!hasHeader && ariaLabel" class="sr-only">{{ ariaLabel }}</DrawerTitle>
+
         <!-- Drag handle: a pill the user grabs; vaul wires the drag to it. -->
         <DrawerHandle
           v-if="showHandle"
@@ -519,7 +556,7 @@ const previewStyle = computed(() => {
           </div>
           <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="text.close"
           >
             <LpIcon
               name="lucide:x"

package/src/components/LpDropzone.vue

@@ -23,7 +23,7 @@ export default { inheritAttrs: false }
  * invisible to a keyboard: nothing focusable, nothing that Enter activates, and
  * the file dialog unreachable without a mouse.
  */
-import { onBeforeUnmount, onMounted, ref } from "vue"
+import { onBeforeUnmount, onMounted, ref, watch } from "vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useReveal } from "../composables/useReveal"
 import LpIcon from "./LpIcon.vue"
@@ -168,17 +168,34 @@ function onPicked(event: Event) {
 }
 
 function windowPaste(event: ClipboardEvent) {
-  if (props.disabled) return
+  // Already taken by the zone itself, which the paste bubbled up from.
+  if (props.disabled || event.defaultPrevented) return
   const target = event.target as HTMLElement | null
   // A paste aimed at somewhere you can type belongs to that thing.
   if (target?.closest("input, textarea, [contenteditable]")) return
   onPaste(event)
 }
 
+let listening = false
+function listen(on: boolean) {
+  if (on === listening || typeof window === "undefined") return
+  listening = on
+  if (on) window.addEventListener("paste", windowPaste)
+  else window.removeEventListener("paste", windowPaste)
+}
+let mounted = false
 onMounted(() => {
-  if (props.pasteTarget) window.addEventListener("paste", windowPaste)
+  mounted = true
+  listen(props.pasteTarget)
+})
+watch(
+  () => props.pasteTarget,
+  (on) => mounted && listen(on),
+)
+onBeforeUnmount(() => {
+  mounted = false
+  listen(false)
 })
-onBeforeUnmount(() => window.removeEventListener("paste", windowPaste))
 
 defineExpose({ browse: () => input.value?.click() })