@leavepulse/ui 0.78.0 → 0.78.2

package/src/components/LpAppShell.vue

@@ -65,6 +65,7 @@ import LpBottomNav from "./LpBottomNav.vue"
 import LpContextSwitcher from "./LpContextSwitcher.vue"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
+import LpPageScrollbar from "./LpPageScrollbar.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import LpShift from "./LpShift.vue"
 import LpSidebar from "./LpSidebar.vue"
@@ -130,6 +131,13 @@ const props = withDefaults(
      * remounts the page.
      */
     scroll?: "document" | "region"
+    /**
+     * While the document scrolls, draw the kit's overlay bar for it
+     * (LpPageScrollbar) under the header and above the bottom bar, in place of
+     * the browser's, which takes width from the page. `false` keeps the
+     * browser's. Where the browser's bars float anyway (phones) it draws none.
+     */
+    pageScrollbar?: boolean
     /** Loading skeleton for the nav. */
     loading?: boolean
     /** Text overrides: the burger's name and the skip link. */
@@ -206,6 +214,7 @@ const props = withDefaults(
     divider: true,
     contentClass: "mx-auto w-full max-w-6xl",
     scroll: "document",
+    pageScrollbar: true,
     // Unset, not false: an absent boolean would hand the sidebar "expanded"
     // and override the state it remembers.
     compact: undefined,
@@ -380,6 +389,18 @@ watch(bleeding, (bleed) => {
     void nextTick(() => view.scrollTo({ top, behavior: "instant" }))
   }
 })
+// The bottom bar's height, for the page's scrollbar to stop above it (0 where it is hidden).
+const bottomBarEl = ref<{ $el: HTMLElement } | null>(null)
+const bottomBarHeight = ref(0)
+let bottomBarSize: ResizeObserver | undefined
+onMounted(() => {
+  const el = bottomBarEl.value?.$el
+  if (!el || el.nodeType !== 1) return
+  bottomBarSize = new (nodeWindow(el).ResizeObserver)(() => (bottomBarHeight.value = el.offsetHeight))
+  bottomBarSize.observe(el)
+})
+onBeforeUnmount(() => bottomBarSize?.disconnect())
+
 let releaseDocument: (() => void) | undefined
 onMounted(() => {
   if (!documentScroll || !pageEl.value) return
@@ -748,8 +769,10 @@ const backToTopClass = computed(() =>
           <slot name="aside" />
         </LpScrollArea>
       </aside>
+      <LpPageScrollbar v-if="windowScrolls && pageScrollbar" top="var(--lp-shell-top)" :bottom="`${bottomBarHeight}px`" />
       <LpBottomNav
         v-if="bottomNav"
+        ref="bottomBarEl"
         :class="[burgerHidden[mobileBreakpoint], spanClass, windowScrolls && `${STICKY} bottom-0`]"
         :items="bottomItems"
         :is-active="activeTest"

package/src/components/LpAutocomplete.vue

@@ -10,6 +10,7 @@ export type AutocompleteLabels = {
 </script>
 
 <script setup lang="ts">
+import FieldWrapper from "./FieldWrapper.vue"
 import IconCloseButton from "./IconCloseButton.vue"
 import { CONTROL_SIZE } from "./controlSize"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
@@ -35,8 +36,8 @@ import {
   ComboboxRoot,
   ComboboxViewport,
 } from "reka-ui"
-import { computed, nextTick, ref, useId, watch } from "vue"
-import { useAttrsField, mergeDescribedBy } from "../composables/useField"
+import { computed, nextTick, ref, useId, watch, useAttrs } from "vue"
+import { useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useInputFilter } from "../composables/useInputFilter"
 import { useLabels } from "../composables/useLpConfig"
 import { CLOSE_ICON, OPTION_ITEM, optionStagger, COMBOBOX_PANEL, POPOVER_PANEL } from "./dropdown"
@@ -64,6 +65,8 @@ const props = withDefaults(
     size?: "sm" | "md" | "lg"
     icon?: string
     invalid?: boolean
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string
     emptyText?: string
     loading?: boolean
     loadingText?: string
@@ -122,7 +125,8 @@ const inputAttrs = computed(() => {
   return rest
 })
 
-const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid || isInvalid(props.modelValue), disabled: props.disabled }))
+const attrs = useAttrs()
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid || isInvalid(props.modelValue), disabled: props.disabled }))
 const isInvalidState = computed(() => field.value.invalid)
 const labels = useLabels<AutocompleteLabels>(
   "autocomplete",
@@ -270,14 +274,15 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <ComboboxRoot
     :open="open"
     :ignore-filter="true"
     :reset-search-term-on-blur="false"
     :reset-search-term-on-select="false"
     :disabled="field.disabled"
-    :class="['relative', attrs.class]"
-    :style="attrs.style as never"
+    :class="['relative', ownAttrs() ? attrs.class : undefined]"
+    :style="ownAttrs() ? (attrs.style as never) : undefined"
     @update:open="onOpenChange"
   >
     <ComboboxAnchor
@@ -410,4 +415,5 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       </ComboboxContent>
     </ComboboxPortal>
   </ComboboxRoot>
+  </FieldWrapper>
 </template>

package/src/components/LpCheckbox.vue

@@ -6,12 +6,13 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import FieldWrapper from "./FieldWrapper.vue"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { CheckboxIndicator, CheckboxRoot } from "reka-ui"
 import { computed, useId } from "vue"
 import LpIcon from "./LpIcon.vue"
 import LpLoader from "./LpLoader.vue"
-import { isAttrOn, mergeDescribedBy, useFieldControl } from "../composables/useField"
+import { isAttrOn, mergeDescribedBy, useOwnField } from "../composables/useField"
 import { useOptimisticToggle } from "../composables/useOptimisticToggle"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
@@ -22,6 +23,8 @@ const props = withDefaults(defineProps<{
   /** Mixed state (e.g. a "select all" with a partial selection). Shows a dash. */
   indeterminate?: boolean
   disabled?: boolean
+  /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+  error?: string
   label?: string
   /** Secondary line under the label, as on LpSwitch. */
   description?: string
@@ -67,8 +70,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
   [
     "group/check inline-flex cursor-pointer gap-2 text-sm text-ink",
     props.description ? "items-start" : "items-center",
-  ].join(" "),
-)
+  ].join(" "), () => ownAttrs())
 
 /*
  * The box is the control, so what describes it (aria-*, name, title) goes to
@@ -89,9 +91,7 @@ const parts = computed(() => {
   return { label, control }
 })
 
-const field = useFieldControl(() => ({
-  wrapped: false,
-  id: props.id,
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, id: props.id,
   required: isAttrOn(rest.value.required),
   disabled: props.disabled,
 }))
@@ -104,6 +104,7 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <label
     :class="rootClass"
     v-bind="parts.label">
@@ -143,4 +144,5 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
     </span>
     <slot v-else>{{ label }}</slot>
   </label>
+  </FieldWrapper>
 </template>

package/src/components/LpColorPicker.vue

@@ -29,6 +29,7 @@
  * keeps the colours settled on in browser storage and offers them back above
  * the presets.
  */
+import FieldWrapper from "./FieldWrapper.vue"
 import { CONTROL_SIZE } from "./controlSize"
 import { clamp } from "../composables/clamp"
 import {
@@ -41,7 +42,7 @@ import {
 import { computed, nextTick, ref, useAttrs, watch } from "vue"
 import { useKitStorage } from "../composables/usePersisted"
 import { prefersReducedMotion } from "../composables/easing"
-import { useFieldControl, mergeDescribedBy } from "../composables/useField"
+import { useOwnField, mergeDescribedBy } from "../composables/useField"
 import {
   clampHsv,
   DEFAULT_SWATCHES,
@@ -103,6 +104,8 @@ const props = withDefaults(
     hideInput?: boolean
     disabled?: boolean
     invalid?: boolean
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string
     size?: "sm" | "md" | "lg"
     /** Trigger text beside the swatch. Defaults to the colour's own value. */
     label?: string
@@ -623,9 +626,7 @@ const menuItems = computed<ContextMenuItemDef[]>(() => {
 })
 
 const attrs = useAttrs()
-const field = useFieldControl(() => ({
-  wrapped: false,
-  invalid: props.invalid,
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid,
   disabled: props.disabled,
 }))
 
@@ -639,6 +640,7 @@ const guardOutside = useOutsideGuard()
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <PopoverRoot v-model:open="open">
     <!-- reka supports chaining `as-child` triggers onto one element, but only
          when each link forwards the props down — and LpContextMenu is a wrapper
@@ -879,4 +881,5 @@ const guardOutside = useOutsideGuard()
       </PopoverContent>
     </PopoverPortal>
   </PopoverRoot>
+  </FieldWrapper>
 </template>

package/src/components/LpContextMenu.vue

@@ -159,6 +159,12 @@ const portalTo = usePortalTarget()
 const guardOutside = useOutsideGuard()
 
 useMenuPalette(props)
+
+// 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>
@@ -169,6 +175,7 @@ useMenuPalette(props)
   <ContextMenuRoot @update:open="opened">
     <ContextMenuTrigger
       as-child
+      v-bind="$attrs"
       :disabled="!enabled"
       :data-lp-context-menu="hinted ? '' : undefined"
       @click.capture="leftClick"

package/src/components/LpDatePicker.vue

@@ -32,8 +32,9 @@ export interface DatePickerLabels extends Record<string, string> {
  * week") and, unlike the range picker's, are opt-in, so forms that already use
  * the picker keep the plain calendar they were laid out around.
  */
-import { computed, ref } from "vue"
-import { useAttrsField } from "../composables/useField"
+import FieldWrapper from "./FieldWrapper.vue"
+import { computed, ref, useAttrs } from "vue"
+import { useOwnField } from "../composables/useField"
 import { useLocale } from "../composables/useLocale"
 import { useLabels } from "../composables/useLpConfig"
 import type { CalendarLabels, PickerFieldProps } from "./calendar"
@@ -131,7 +132,8 @@ function clear() {
   emit("update:modelValue", undefined)
 }
 
-const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid, disabled: props.disabled }))
+const attrs = useAttrs()
+const { field, wrapper, controlAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid, disabled: props.disabled }))
 const text = useLabels<DatePickerLabels>(
   "datePicker",
   {
@@ -172,8 +174,9 @@ const presetOptions = computed(() => presetList.value.map((preset) => ({
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <PickerField
-    v-bind="attrs"
+    v-bind="controlAttrs"
     v-model:open="open"
     :field="field"
     :display="display"
@@ -221,4 +224,5 @@ const presetOptions = computed(() => presetList.value.map((preset) => ({
       </div>
     </div>
   </PickerField>
+  </FieldWrapper>
 </template>

package/src/components/LpDateRangePicker.vue

@@ -9,8 +9,9 @@ export default { inheritAttrs: false }
  * Picking the second end or a preset fills the field and closes the popover.
  * Two months sit side by side where there is room, one on a phone.
  */
-import { computed, ref } from "vue"
-import { useAttrsField } from "../composables/useField"
+import FieldWrapper from "./FieldWrapper.vue"
+import { computed, ref, useAttrs } from "vue"
+import { useOwnField } from "../composables/useField"
 import { useLocale } from "../composables/useLocale"
 import { useLabels } from "../composables/useLpConfig"
 import { useMediaQuery } from "../composables/useMediaQuery"
@@ -121,7 +122,8 @@ function presetFits(preset: DateRangePreset): boolean {
 
 const wide = useMediaQuery("(min-width: 640px)")
 
-const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid, disabled: props.disabled }))
+const attrs = useAttrs()
+const { field, wrapper, controlAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid, disabled: props.disabled }))
 const showClear = computed(() => props.clearable && !!value.value && !field.value.disabled)
 
 const presetOptions = computed(() => presetList.value.map((preset) => ({
@@ -133,8 +135,9 @@ const presetOptions = computed(() => presetList.value.map((preset) => ({
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <PickerField
-    v-bind="attrs"
+    v-bind="controlAttrs"
     v-model:open="open"
     :field="field"
     :display="display"
@@ -163,4 +166,5 @@ const presetOptions = computed(() => presetList.value.map((preset) => ({
       @update:model-value="pick"
     />
   </PickerField>
+  </FieldWrapper>
 </template>

package/src/components/LpHoverCard.vue

@@ -165,6 +165,12 @@ watch(
 )
 
 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>
@@ -172,6 +178,7 @@ 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"

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

@@ -7,12 +7,13 @@ 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 { fieldWrapperBinds, isAttrOn, mergeDescribedBy, useFieldControl } from "../composables/useField"
+import { fieldWrapperBinds, isAttrOn, mergeDescribedBy, useField, useFieldControl, wrapsItself } 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
@@ -137,9 +138,8 @@ const slots = useSlots()
 const attrs = useAttrs()
 const hasLeading = computed(() => !!slots.leading || !!props.icon)
 const hasTrailing = computed(() => !!slots.trailing || showClear.value)
-const hasField = computed(
-  () => !!props.label || !!props.hint || !!props.error,
-)
+const outerFieldOf = useField()
+const hasField = computed(() => wrapsItself(props, outerFieldOf))
 const field = useFieldControl(() => ({
   wrapped: hasField.value,
   hasMessage: !!props.error || !!props.hint,
@@ -189,9 +189,9 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
       :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"

package/src/components/LpLaneNode.vue

@@ -10,6 +10,8 @@
  * tab stays clickable-looking but is inert. Tailwind utilities only so styles
  * reach consumer apps via @source.
  */
+import type { NodeProps } from "@vue-flow/core"
+
 export interface LaneNodeData {
   label: string
   /** Optional accent colour token for the lane border + label. */
@@ -18,7 +20,9 @@ export interface LaneNodeData {
   height: number
 }
 
-const props = defineProps<{ data: LaneNodeData }>()
+// 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<NodeProps<LaneNodeData>>()
 </script>
 
 <template>

package/src/components/LpNumberField.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import FieldWrapper from "./FieldWrapper.vue"
 import { CONTROL_SIZE } from "./controlSize"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 // Numeric input with stepper buttons (reka NumberField). Themed via tokens.
@@ -15,9 +16,10 @@ import {
   NumberFieldInput,
   NumberFieldRoot,
 } from "reka-ui"
-import { computed, useId } from "vue"
+import { computed, useId, useAttrs } from "vue"
+import FieldLeading from "./FieldLeading.vue"
 import LpIcon from "./LpIcon.vue"
-import { focusLeft, useAttrsField, mergeDescribedBy } from "../composables/useField"
+import { focusLeft, useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedClass } from "../composables/useMergedClass"
 
@@ -67,7 +69,11 @@ const props = withDefaults(defineProps<{
   // "Depth", "Weight" tells the reader nothing about which one wants grams.
   // Not part of the value: it is never typed, selected, or submitted.
   unit?: string
+  /** A leading icon, as on LpInput; the `leading` slot replaces it. */
+  icon?: string
   invalid?: boolean
+  /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+  error?: string
   /** Control height, matching LpInput. */
   size?: "sm" | "md" | "lg"
   labels?: Partial<NumberFieldLabels>
@@ -96,7 +102,8 @@ const text = useLabels<NumberFieldLabels>(
 
 const SIZE = CONTROL_SIZE
 
-const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid, disabled: props.disabled }))
+const attrs = useAttrs()
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid, disabled: props.disabled }))
 const describedBy = computed(
   () => mergeDescribedBy(attrs["aria-describedby"], field.value.describedBy, props.unit ? unitId : undefined),
 )
@@ -123,13 +130,13 @@ const rootClass = useMergedClass(() =>
     field.value.invalid
       ? "border-danger focus-within:border-danger focus-within:ring-danger-soft"
       : "border-line focus-within:border-brand focus-within:ring-ring",
-  ].join(" "),
-)
+  ].join(" "), () => ownAttrs())
 
 usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid })
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <NumberFieldRoot
     :model-value="modelValue ?? undefined"
     :min="min"
@@ -146,11 +153,14 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
     :required="field.required"
     data-lp-ring-owner
     :class="rootClass"
-    :style="attrs.style"
+    :style="ownAttrs() ? attrs.style : undefined"
     :name="typeof attrs.name === 'string' ? attrs.name : undefined"
     @update:model-value="(v) => emit('update:modelValue', Number.isNaN(v) ? null : (v ?? null))"
     @focusout="onFocusOut"
   >
+    <FieldLeading :icon="icon" class="pl-2.5">
+      <template v-if="$slots.leading" #default><slot name="leading" /></template>
+    </FieldLeading>
     <NumberFieldDecrement
       v-if="steppers"
       :aria-label="text.decrease"
@@ -168,7 +178,7 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       :aria-describedby="describedBy"
       :aria-invalid="field.invalid || undefined"
       class="min-w-0 flex-1 bg-transparent text-ink outline-none placeholder:text-muted [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
-      :class="steppers ? 'text-center @max-[8.5rem]:px-3 @max-[8.5rem]:text-left' : 'px-3'"
+      :class="steppers ? 'text-center @max-[8.5rem]:px-3 @max-[8.5rem]:text-left' : icon || $slots.leading ? 'pl-2 pr-3' : 'px-3'"
     />
     <!-- The unit sits between the value and the increment button, so a long one
          narrows the field rather than covering the digits. Not focusable and
@@ -186,4 +196,5 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       />
     </NumberFieldIncrement>
   </NumberFieldRoot>
+  </FieldWrapper>
 </template>

package/src/components/LpOtpInput.vue

@@ -19,9 +19,10 @@ export default { inheritAttrs: false }
  * size's width and no further, and shrinks with the row when the container is
  * narrower, so eight cells fit a phone instead of running off its edge.
  */
+import FieldWrapper from "./FieldWrapper.vue"
 import { PinInputInput, PinInputRoot } from "reka-ui"
 import { computed, ref, watch } from "vue"
-import { useFieldControl, mergeDescribedBy } from "../composables/useField"
+import { useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { groupBreaks, joinCells, splitCode, upperCells, type OtpCells } from "./otp"
 
@@ -50,6 +51,8 @@ const props = withDefaults(
     group?: number | number[]
     /** Error state — tints the cells red (e.g. wrong code). */
     invalid?: boolean
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string
     size?: "sm" | "md" | "lg"
   }>(),
   { length: 6, size: "md", alphanumeric: false, uppercase: undefined },
@@ -97,9 +100,7 @@ const cells = computed<string[]>({
   },
 })
 
-const field = useFieldControl(() => ({
-  wrapped: false,
-  invalid: props.invalid,
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid,
   disabled: props.disabled,
 }))
 
@@ -144,11 +145,11 @@ const cellSize = {
 }
 
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "flex min-w-0 max-w-full items-center gap-1.5 sm:gap-2",
-)
+  "flex min-w-0 max-w-full items-center gap-1.5 sm:gap-2", () => ownAttrs())
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <PinInputRoot
     ref="root"
     v-model="cells"
@@ -188,4 +189,5 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       />
     </template>
   </PinInputRoot>
+  </FieldWrapper>
 </template>