@leavepulse/ui 0.77.3 → 0.78.1

package/src/components/LpFileTreeNode.vue

@@ -16,11 +16,12 @@ export default { inheritAttrs: false }
  * (the one matching `focusedId`), which is what a11y expects of role="tree" —
  * Tab enters the tree once, arrows move within it. The parent owns that state.
  */
-import { computed } from "vue"
+import { computed, nextTick, ref, watch } from "vue"
 import {
   fileIcon,
   formatModified,
   formatSize,
+  renameSelectionEnd,
   sortNodes,
   type FileNode,
   type NodeStats,
@@ -53,6 +54,21 @@ const props = defineProps<{
   stats: Map<string, NodeStats>
   showSize: boolean
   showModified: boolean
+  /** Rows picked with Ctrl and Shift, in `multiple` mode. */
+  selectedIds?: ReadonlySet<string>
+  multiple?: boolean
+  /** The root flattens the tree to window it: this row renders alone, with its place stated. */
+  flat?: boolean
+  setSize?: number
+  posInSet?: number
+  /** Rows can be dragged; the root decides where they land. */
+  movable?: boolean
+  dropTargetId?: string
+  /** The row being renamed, the text in its field and whether that text can stand. */
+  renamingId?: string
+  renameValue?: string
+  renameInvalid?: boolean
+  renameLabel?: string
 }>()
 
 const emit = defineEmits<{
@@ -60,6 +76,15 @@ const emit = defineEmits<{
   (e: "toggle", node: FileNode): void
   (e: "focus", node: FileNode): void
   (e: "check", node: FileNode, value: boolean): void
+  (e: "pick", node: FileNode, mode: "toggle" | "range"): void
+  (e: "move-start", node: FileNode, event: DragEvent): void
+  (e: "move-over", node: FileNode, event: DragEvent): void
+  (e: "move-leave", node: FileNode): void
+  (e: "move-drop", node: FileNode): void
+  (e: "move-end"): void
+  (e: "rename-input", value: string): void
+  (e: "rename-commit", blurred?: boolean): void
+  (e: "rename-cancel"): void
 }>()
 
 // Declared explicitly: the component renders itself, so an inferred slot type
@@ -71,7 +96,8 @@ defineSlots<{
 const isDir = computed(() => props.node.kind === "dir")
 const isOpen = computed(() => isDir.value && props.expanded.has(props.node.id))
 const isLoading = computed(() => props.loading.has(props.node.id))
-const isSelected = computed(() => props.selectedId === props.node.id)
+const isSelected = computed(() => props.selectedId === props.node.id || !!props.selectedIds?.has(props.node.id))
+const isRenaming = computed(() => props.renamingId === props.node.id)
 const isFocused = computed(() => props.focusedId === props.node.id)
 
 // A directory with no `children` array hasn't been loaded yet — we can't know if
@@ -127,15 +153,50 @@ function rowDelay(index: number): string {
   return `${staggerDelay(index, 0, 18, 10)}ms`
 }
 
-function onActivate() {
+function onActivate(event: MouseEvent) {
   if (props.node.disabled) return
   emit("focus", props.node)
+  if (props.multiple && (event.shiftKey || event.ctrlKey || event.metaKey)) {
+    emit("pick", props.node, event.shiftKey ? "range" : "toggle")
+    return
+  }
   // A directory row toggles; a file row selects. Directories still emit select
   // so callers can drive a details panel off the highlighted entry.
   emit("select", props.node)
   if (isDir.value) emit("toggle", props.node)
 }
 
+const renameField = ref<HTMLInputElement | null>(null)
+
+// Opens on the name without its extension, so typing replaces only that.
+watch(
+  isRenaming,
+  async (renaming) => {
+    if (!renaming) return
+    await nextTick()
+    renameField.value?.focus()
+    renameField.value?.setSelectionRange(0, renameSelectionEnd(props.node))
+  },
+  { immediate: true },
+)
+
+// The field keeps every key to itself: the tree would take the arrows and Home,
+// and a dialog around it would close on the Escape that cancels the rename.
+function onRenameKey(event: KeyboardEvent) {
+  event.stopPropagation()
+  if (event.key === "Enter") emit("rename-commit", false)
+  else if (event.key === "Escape") emit("rename-cancel")
+}
+
+function onMoveStart(event: DragEvent) {
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = "move"
+    // Firefox starts no drag without data.
+    event.dataTransfer.setData("text/plain", props.node.name)
+  }
+  emit("move-start", props.node, event)
+}
+
 // A node is a list row whose min-width the consumer may need to release when the tree scrolls horizontally.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "min-w-0",
@@ -151,6 +212,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     :aria-selected="isSelected"
     :aria-expanded="canExpand ? isOpen : undefined"
     :aria-disabled="node.disabled || undefined"
+    :aria-setsize="flat ? setSize : undefined"
+    :aria-posinset="flat ? posInSet : undefined"
   >
     <!-- Passthrough when the node has no menu, so the row keeps the native one.
          Headed by the entry's own name and icon: in a column of look-alike
@@ -166,6 +229,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       <div
         :data-node-id="node.id"
         :tabindex="isFocused ? 0 : -1"
+        :draggable="movable && !node.disabled && !isRenaming ? 'true' : undefined"
+        :data-drop-target="dropTargetId === node.id ? '' : undefined"
         class="group/row relative flex min-w-0 cursor-pointer select-none items-center gap-1.5 rounded-control py-1 pr-2 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
         :class="[
           node.disabled
@@ -173,9 +238,15 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
             : isSelected
               ? 'bg-brand-soft text-ink'
               : 'text-muted hover:bg-surface-soft hover:text-ink',
+          dropTargetId === node.id ? 'ring-2 ring-inset ring-brand' : '',
         ]"
         :style="{ paddingLeft: `${depth * 14 + 6}px` }"
         @click.stop="onActivate"
+        @dragstart="onMoveStart"
+        @dragover="emit('move-over', node, $event)"
+        @dragleave="emit('move-leave', node)"
+        @drop.prevent="emit('move-drop', node)"
+        @dragend="emit('move-end')"
       >
         <!-- Chevron sits in a fixed-width slot so names line up whether or not
              the row can expand. Leaves get the same gutter, left empty.
@@ -228,7 +299,20 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         />
 
         <span class="min-w-0 flex-1 shrink-[2] truncate">
-          <slot name="row" :node="node" :depth="depth" :expanded="isOpen" :selected="isSelected">
+          <input
+            v-if="isRenaming"
+            ref="renameField"
+            class="w-full min-w-0 rounded-sm border bg-surface-soft px-1 text-sm text-ink outline-none"
+            :class="renameInvalid ? 'border-danger' : 'border-line-strong'"
+            :value="renameValue"
+            :aria-label="renameLabel"
+            :aria-invalid="renameInvalid || undefined"
+            @click.stop
+            @keydown="onRenameKey"
+            @input="emit('rename-input', ($event.target as HTMLInputElement).value)"
+            @blur="emit('rename-commit', true)"
+          >
+          <slot v-else name="row" :node="node" :depth="depth" :expanded="isOpen" :selected="isSelected">
             {{ node.name }}
           </slot>
         </span>
@@ -260,7 +344,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
 
     <!-- The branch folds open and shut (LpCollapse); a toggle mid-way reverses
          from where it is. Rows inside stagger themselves in. -->
-    <LpCollapse :open="isOpen && hasChildren">
+    <LpCollapse v-if="!flat" :open="isOpen && hasChildren">
       <ul role="group" class="flex min-w-0 flex-col overflow-hidden">
         <LpFileTreeNode
           v-for="(child, i) in children"
@@ -280,10 +364,27 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           :stats="stats"
           :show-size="showSize"
           :show-modified="showModified"
+          :selected-ids="selectedIds"
+          :multiple="multiple"
+          :movable="movable"
+          :drop-target-id="dropTargetId"
+          :renaming-id="renamingId"
+          :rename-value="renameValue"
+          :rename-invalid="renameInvalid"
+          :rename-label="renameLabel"
           @select="emit('select', $event)"
           @toggle="emit('toggle', $event)"
           @focus="emit('focus', $event)"
           @check="(n, v) => emit('check', n, v)"
+          @pick="(n, mode) => emit('pick', n, mode)"
+          @move-start="(n, e) => emit('move-start', n, e)"
+          @move-over="(n, e) => emit('move-over', n, e)"
+          @move-leave="emit('move-leave', $event)"
+          @move-drop="emit('move-drop', $event)"
+          @move-end="emit('move-end')"
+          @rename-input="emit('rename-input', $event)"
+          @rename-commit="emit('rename-commit', $event)"
+          @rename-cancel="emit('rename-cancel')"
         >
           <template #row="slotProps">
             <slot name="row" v-bind="slotProps" />

package/src/components/LpFormField.vue

@@ -81,7 +81,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
 const control = ref<HTMLElement | null>(null)
 const LABELABLE = "input, button, select, textarea, meter, output, progress"
 function focusControl() {
-  const target = document.getElementById(id.value)
+  const target = control.value?.ownerDocument.getElementById(id.value)
   if (target?.matches(LABELABLE)) return
   const first = control.value?.querySelector<HTMLElement>(
     'input:not([type="hidden"]):not([disabled]), button:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]',

package/src/components/LpFrame.vue

@@ -59,24 +59,41 @@ const { class: frameClass, attrs: rest } = useMergedAttrs(
 )
 
 const cleanups: (() => void)[] = []
+const LAYERS = "[data-dismissable-layer], [role=dialog], [role=menu], [role=listbox]"
+
+/* What can change on a stylesheet that is already in the page: a theme swapped by `href`, one turned off. */
+const SHEET_ATTRIBUTES = ["href", "rel", "media", "disabled", "crossorigin", "integrity", "title", "type"]
 
 function mirrorHead(doc: Document) {
-  const copies = new Map<Node, Node>()
+  const copies = new Map<Node, Element>()
+  const isSheet = (node: Node) => node instanceof HTMLStyleElement || (node instanceof HTMLLinkElement && node.rel === "stylesheet")
   const copy = (node: Node) => {
-    if (!(node instanceof HTMLStyleElement || (node instanceof HTMLLinkElement && node.rel === "stylesheet"))) return
-    const clone = doc.importNode(node, true)
+    if (!isSheet(node) || copies.has(node)) return
+    const clone = doc.importNode(node as Element, true)
     copies.set(node, clone)
     doc.head.appendChild(clone)
   }
+  const drop = (node: Node) => {
+    copies.get(node)?.remove()
+    copies.delete(node)
+  }
+  const syncAttribute = (node: Element, name: string) => {
+    if (!isSheet(node)) return drop(node)
+    if (!copies.has(node)) return copy(node)
+    const value = node.getAttribute(name)
+    if (value === null) copies.get(node)!.removeAttribute(name)
+    else copies.get(node)!.setAttribute(name, value)
+  }
   for (const node of document.head.childNodes) copy(node)
   const observer = new MutationObserver((records) => {
     for (const record of records) {
       if (record.type === "childList") {
         for (const node of record.addedNodes) copy(node)
-        for (const node of record.removedNodes) {
-          copies.get(node)?.parentNode?.removeChild(copies.get(node)!)
-          copies.delete(node)
-        }
+        for (const node of record.removedNodes) drop(node)
+        continue
+      }
+      if (record.type === "attributes") {
+        syncAttribute(record.target as Element, record.attributeName!)
         continue
       }
       // A style rewritten in place (a hot reload) is copied again.
@@ -84,7 +101,7 @@ function mirrorHead(doc: Document) {
       if (style instanceof HTMLStyleElement && copies.has(style)) copies.get(style)!.textContent = style.textContent
     }
   })
-  observer.observe(document.head, { childList: true, subtree: true, characterData: true })
+  observer.observe(document.head, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: SHEET_ATTRIBUTES })
   cleanups.push(() => observer.disconnect())
 }
 
@@ -118,7 +135,9 @@ function liftForeignLocks(doc: Document) {
     }
   }
   const observer = new MutationObserver(lift)
-  observer.observe(document.body, { attributes: true, attributeFilter: ["style"] })
+  // The child list too: when the page's own layer goes while the frame's stays,
+  // reka keeps the lock and the style never changes to say so.
+  observer.observe(document.body, { attributes: true, attributeFilter: ["style"], childList: true, subtree: true })
   cleanups.push(() => observer.disconnect())
 }
 
@@ -143,12 +162,13 @@ function setup() {
   let pending = 0
   const measure = () => {
     pending = 0
-    let bottom = content.offsetHeight
+    // scrollHeight as well: what is positioned inside overflows the box without growing it.
+    let bottom = Math.max(content.offsetHeight, content.scrollHeight)
     for (const child of doc.body.children) {
       if (child === content) continue
-      for (const layer of child.querySelectorAll("[data-dismissable-layer], [role=dialog], [role=menu], [role=listbox]")) {
-        bottom = Math.max(bottom, Math.ceil(layer.getBoundingClientRect().bottom + 8))
-      }
+      // The portal's root can be the layer itself, which querySelectorAll skips.
+      const layers = [...(child.matches(LAYERS) ? [child] : []), ...child.querySelectorAll(LAYERS)]
+      for (const layer of layers) bottom = Math.max(bottom, Math.ceil(layer.getBoundingClientRect().bottom + 8))
     }
     contentHeight.value = bottom
   }

package/src/components/LpHoverCard.vue

@@ -94,7 +94,11 @@ const guardOutside = useOutsideGuard()
  * the link under it.
  */
 const SLOP = 8
+/* A long press may produce no click at all; past this the next click is the user's own. */
+const CLICK_AFTER_RELEASE_MS = 350
 let holdTimer = 0
+/* The finger the hold belongs to: a second one must not move or end it. */
+let holdPointer: number | null = null
 let start = { x: 0, y: 0 }
 let held = false
 
@@ -103,9 +107,28 @@ function cancelHold() {
   holdTimer = 0
 }
 
+function onPointerUp(event: PointerEvent) {
+  if (holdPointer !== null && event.pointerId !== holdPointer) return
+  holdPointer = null
+  cancelHold()
+  if (held) window.setTimeout(() => (held = false), CLICK_AFTER_RELEASE_MS)
+}
+
+// A cancelled press produces no click, so there is nothing left to swallow.
+function onPointerCancel(event?: PointerEvent) {
+  if (event && holdPointer !== null && event.pointerId !== holdPointer) return
+  holdPointer = null
+  cancelHold()
+  held = false
+}
+
 function onPointerDown(event: PointerEvent) {
-  if (event.pointerType !== "touch" || props.touch !== "hold" || props.disabled) return
+  // Any new press starts over: on a hybrid laptop the mouse click after a hold
+  // must not be taken for that hold's own click.
+  if (holdTimer && event.pointerId !== holdPointer) return
   held = false
+  if (event.pointerType !== "touch" || props.touch !== "hold" || props.disabled) return
+  holdPointer = event.pointerId
   start = { x: event.clientX, y: event.clientY }
   cancelHold()
   holdTimer = window.setTimeout(() => {
@@ -116,7 +139,7 @@ function onPointerDown(event: PointerEvent) {
 }
 
 function onPointerMove(event: PointerEvent) {
-  if (!holdTimer) return
+  if (!holdTimer || event.pointerId !== holdPointer) return
   if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > SLOP) cancelHold()
 }
 
@@ -135,11 +158,19 @@ function onContextMenu(event: Event) {
 watch(
   () => props.disabled,
   (off) => {
-    if (off) open.value = false
+    if (!off) return
+    onPointerCancel()
+    open.value = false
   },
 )
 
 onBeforeUnmount(cancelHold)
+
+// Several roots (trigger and portal), so Vue cannot hand attributes on by
+// itself and dropped them: a trigger wrapped around this one from outside (an
+// LpPopover's, as-child) lost its id, ARIA state and click, and its popover
+// never opened. They go to the trigger, which merges them onto the slot's element.
+defineOptions({ inheritAttrs: false })
 </script>
 
 <template>
@@ -147,11 +178,12 @@ onBeforeUnmount(cancelHold)
   <HoverCardRoot v-else v-model:open="open" :open-delay="openDelay" :close-delay="closeDelay">
     <HoverCardTrigger
       as-child
+      v-bind="$attrs"
       :class="touch === 'hold' ? '[-webkit-touch-callout:none]' : undefined"
       @pointerdown="onPointerDown"
       @pointermove="onPointerMove"
-      @pointerup="cancelHold"
-      @pointercancel="cancelHold"
+      @pointerup="onPointerUp"
+      @pointercancel="onPointerCancel"
       @click.capture="onClickCapture"
       @contextmenu="onContextMenu"
     >

package/src/components/LpIcon.vue

@@ -14,12 +14,14 @@
  */
 import { computed, watchEffect } from "vue"
 import { Icon, getIcon } from "@iconify/vue"
-import { iconsVersion, requestIcon } from "../icons"
+import { failedIcons, iconsVersion, requestIcon } from "../icons"
 
 const props = defineProps<{
   /** iconify name, e.g. "lucide:check". Bare names assume the lucide set. */
   name: string
   size?: number | string
+  /** An icon to show if `name` is unknown or its chunk fails to load; it must already be registered. */
+  fallback?: string
 }>()
 
 function resolve(name: string): string {
@@ -29,7 +31,9 @@ function resolve(name: string): string {
 const fullName = computed(() => resolve(props.name))
 const data = computed(() => {
   void iconsVersion.value
-  return getIcon(fullName.value)
+  const icon = getIcon(fullName.value)
+  if (icon || !props.fallback || !failedIcons.has(fullName.value)) return icon
+  return getIcon(resolve(props.fallback))
 })
 const lucide = computed(() => fullName.value.startsWith("lucide:"))
 

package/src/components/LpIdenticon.vue

@@ -17,6 +17,7 @@ export default { inheritAttrs: false }
  * `identicon()` in identicon.ts, which a canvas, a favicon or a notification
  * icon can call directly.
  */
+import { clamp } from "../composables/clamp"
 import { computed } from "vue"
 import { identicon, identiconRects } from "./identicon"
 import { useMergedAttrs } from "../composables/useMergedClass"
@@ -43,7 +44,7 @@ const props = withDefaults(
 
 const icon = computed(() => identicon(props.seed, { grid: props.grid }))
 const rects = computed(() => identiconRects(icon.value.cells))
-const pad = computed(() => props.grid * Math.max(0, Math.min(0.4, props.padding)))
+const pad = computed(() => props.grid * clamp(props.padding, 0, 0.4))
 const view = computed(() => props.grid + pad.value * 2)
 const wash = computed(() => `color-mix(in oklab, ${icon.value.color} 16%, var(--color-surface-soft))`)
 

package/src/components/LpImageEditor.vue

@@ -175,6 +175,8 @@ watch(
   () => props.file,
   async (file) => {
     revoke()
+    // Decoding needs the browser; on the server the editor renders empty.
+    if (typeof document === "undefined") return
     rotation.value = 0
     zoom.reset()
     failed.value = false
@@ -278,7 +280,7 @@ async function decode(
 const sourceSize = computed(() => {
   const s = source.value
   if (!s) return null
-  return s instanceof HTMLImageElement
+  return "naturalWidth" in s
     ? { width: s.naturalWidth, height: s.naturalHeight }
     : { width: s.width, height: s.height }
 })
@@ -287,7 +289,8 @@ function revoke() {
   if (ownedUrl) URL.revokeObjectURL(ownedUrl)
   ownedUrl = ""
   objectUrl.value = ""
-  if (source.value instanceof ImageBitmap) source.value.close()
+  // By what it can do: the class is absent on the server and differs per window.
+    if (source.value && "close" in source.value) source.value.close()
   source.value = null
 }
 

package/src/components/LpInfraNode.vue

@@ -8,7 +8,7 @@
  * `@source` over the kit emits these classes — scoped CSS in a published
  * component doesn't reach apps that only import the kit's token css.
  */
-import { Handle, Position } from "@vue-flow/core"
+import { Handle, Position, type NodeProps } from "@vue-flow/core"
 import { computed } from "vue"
 import LpBadge from "./LpBadge.vue"
 import LpStatus from "./LpStatus.vue"
@@ -66,8 +66,9 @@ export interface InfraNodeLabels {
   old?: string
 }
 
-const props = defineProps<{
-  data: InfraNodeData
+// Vue Flow hands a custom node all of NodeProps. Declared, they stop falling
+// through onto the node's root as attributes (position="[object Object]").
+const props = defineProps<Omit<NodeProps<InfraNodeData>, "selected"> & {
   selected?: boolean
   /** Extra/overriding role styles, merged over the defaults below. */
   roles?: Record<string, InfraRoleStyle>

package/src/components/LpInput.vue

@@ -3,15 +3,17 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { CONTROL_SIZE } from "./controlSize"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { tv, type VariantProps } from "tailwind-variants"
 import { computed, ref, useAttrs, useSlots } from "vue"
-import { useFieldControl } from "../composables/useField"
+import { fieldWrapperBinds, isAttrOn, mergeDescribedBy, useFieldControl } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useInputFilter } from "../composables/useInputFilter"
 import { DEFAULT_MASK_TOKENS, useInputMask, type MaskSpec, type MaskTokens } from "../composables/useInputMask"
 import { mergeClass } from "../composables/useMergedClass"
 import FieldWrapper from "./FieldWrapper.vue"
+import FieldLeading from "./FieldLeading.vue"
 import LpIcon from "./LpIcon.vue"
 
 // Single source of truth for the field shell — bare input and adorned input
@@ -29,11 +31,7 @@ const shell = tv({
     "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-55",
   ],
   variants: {
-    size: {
-      sm: "h-(--size-control-sm) text-xs",
-      md: "h-(--size-control-md) text-sm",
-      lg: "h-(--size-control-lg) text-sm",
-    },
+    size: CONTROL_SIZE,
     invalid: {
       true: "border-danger focus-within:border-danger focus-within:ring-danger-soft",
     },
@@ -113,22 +111,24 @@ const shown = computed(() => (masking.active.value ? masking.format(props.modelV
 function onBefore(event: InputEvent): void {
   onBeforeInput(event)
   if (!event.defaultPrevented) masking.onBeforeInput(event)
-  if (event.defaultPrevented && masking.active.value && event.target instanceof HTMLInputElement) {
-    emit("update:modelValue", event.target.value)
+  if (event.defaultPrevented && masking.active.value) {
+    emit("update:modelValue", (event.target as HTMLInputElement).value)
   }
 }
 
 function onInputEvent(event: Event): void {
+  // `restrict` first: it sees what was typed, and the mask then lays out what
+  // is left, putting back any literal the clean-up took along.
+  filterInput(event)
   if (masking.active.value) masking.onInput(event)
-  else filterInput(event)
   emit("update:modelValue", (event.target as HTMLInputElement).value)
 }
 
 function onComposed(event: CompositionEvent): void {
-  if (masking.active.value) {
-    masking.onCompositionEnd(event)
-    emit("update:modelValue", (event.target as HTMLInputElement).value)
-  } else onCompositionEnd(event)
+  onCompositionEnd(event)
+  if (!masking.active.value) return
+  masking.onCompositionEnd(event)
+  emit("update:modelValue", (event.target as HTMLInputElement).value)
 }
 
 // Pattern failure folds into the same invalid state as the explicit prop/error.
@@ -150,7 +150,7 @@ const field = useFieldControl(() => ({
   disabled: props.disabled,
 }))
 const text = useLabels("input", { clear: "Clear" }, () => props.labels)
-const showClear = computed(() => props.clearable && !!props.modelValue && !field.value.disabled && (attrs.readonly === undefined || attrs.readonly === false))
+const showClear = computed(() => props.clearable && !!props.modelValue && !field.value.disabled && !isAttrOn(attrs.readonly) && !isAttrOn(attrs.readOnly))
 const isInvalidState = computed(() => field.value.invalid)
 const shellClass = computed(() =>
   shell({ size: props.size, invalid: isInvalidState.value }),
@@ -183,23 +183,16 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
 
 <template>
   <FieldWrapper
-    :wrapped="hasField"
-    :id="field.id"
-    :label="label"
-    :hint="hint"
-    :error="error"
-    :required="required"
-    :class="attrs.class"
-    :style="attrs.style"
+    v-bind="fieldWrapperBinds(hasField, field, $props, attrs)"
   >
     <div
       data-lp-ring-owner
       :class="mergeClass(shellClass, hasLeading ? 'pl-2.5' : '', hasTrailing ? 'pr-1.5' : '', hasField ? '' : (attrs.class as string))"
       :style="hasField ? undefined : attrs.style"
     >
-      <span v-if="hasLeading" class="flex shrink-0 items-center text-muted">
-        <slot name="leading"><LpIcon v-if="icon" :name="icon" :size="16" /></slot>
-      </span>
+      <FieldLeading :icon="icon">
+        <template v-if="$slots.leading" #default><slot name="leading" /></template>
+      </FieldLeading>
       <input
         ref="inputEl"
         v-bind="inputAttrs"
@@ -210,7 +203,7 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
         :disabled="field.disabled"
         :required="field.required || undefined"
         :aria-invalid="isInvalidState || undefined"
-        :aria-describedby="field.describedBy"
+        :aria-describedby="mergeDescribedBy(attrs['aria-describedby'], field.describedBy)"
         :class="[
           'lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted',
           clearable && '[&::-webkit-search-cancel-button]:hidden',