@leavepulse/ui 0.78.1 → 0.78.3

package/src/components/LpInput.vue

@@ -7,7 +7,7 @@ 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"
@@ -138,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,

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,10 +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"
 
@@ -71,6 +72,8 @@ const props = withDefaults(defineProps<{
   /** 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>
@@ -99,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),
 )
@@ -126,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"
@@ -149,7 +153,7 @@ 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"
@@ -192,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>

package/src/components/LpPhoneInput.vue

@@ -36,6 +36,7 @@ export type PhoneInputLabels = {
  * is what a form should store. Until the library arrives the field takes digits
  * as before, unformatted.
  */
+import FieldWrapper from "./FieldWrapper.vue"
 import { CONTROL_SIZE } from "./controlSize"
 import {
   ComboboxAnchor,
@@ -48,8 +49,8 @@ import {
   ComboboxTrigger,
   ComboboxViewport,
 } from "reka-ui"
-import { computed, onMounted, ref, shallowRef } from "vue"
-import { useField, useAttrsField, mergeDescribedBy } from "../composables/useField"
+import { computed, onMounted, ref, shallowRef, useAttrs } from "vue"
+import { useField, useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useFieldNotice, type FieldNoticeOptions } from "../composables/useFieldNotice"
 import { useInputFilter } from "../composables/useInputFilter"
 import { useLabels } from "../composables/useLpConfig"
@@ -101,6 +102,8 @@ const props = withDefaults(
     placeholder?: string
     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"
     emptyText?: string
     searchPlaceholder?: string
@@ -322,7 +325,8 @@ const sizeClass = CONTROL_SIZE
 // placing it in a narrow column has to change, so `class="w-48"` must win.
 // style lays out the frame; every other attr (name, autocomplete, @blur…)
 // belongs to the number <input>.
-const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid || flagged.value, disabled: props.disabled }))
+const attrs = useAttrs()
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid || flagged.value, disabled: props.disabled }))
 const text = useLabels<PhoneInputLabels>("phoneInput", {
   selectCountry: "Select country",
   placeholder: "Phone number",
@@ -345,8 +349,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
       ? "border-danger focus-within:border-danger focus-within:ring-danger-soft"
       : "border-line focus-within:border-brand",
     field.value.disabled ? "cursor-not-allowed opacity-55" : "",
-  ].join(" "),
-)
+  ].join(" "), () => ownAttrs())
 const inputAttrs = computed(() => {
   const { style: _s, ...others } = rest.value
   return others
@@ -360,10 +363,11 @@ const guardOutside = useOutsideGuard()
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <div
     data-lp-ring-owner
     :class="rootClass"
-    :style="attrs.style as never"
+    :style="ownAttrs() ? (attrs.style as never) : undefined"
   >
     <!-- reset-search-term-on-{select,blur}: as in LpSelect, the trigger shows
          the selection and the box only filters, so reka seeding the chosen value
@@ -460,4 +464,5 @@ const guardOutside = useOutsideGuard()
     />
     <LpFieldNotice v-if="ownNotice" :notice="notice" :id="noticeId" />
   </div>
+  </FieldWrapper>
 </template>

package/src/components/LpRadioGroup.vue

@@ -6,10 +6,11 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import FieldWrapper from "./FieldWrapper.vue"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui"
 import { useId } from "vue"
-import { useFieldControl, mergeDescribedBy } from "../composables/useField"
+import { useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import LpIcon from "./LpIcon.vue"
 import type { LpOptionBase } from "./options"
@@ -22,21 +23,23 @@ export interface RadioOption extends LpOptionBase<string> {
 // a disabled option stays visible but cannot be picked. For anything richer
 // (badges, custom layout) pass <LpRadio> children in the default slot instead —
 // they share the same RadioGroupRoot, so selection still flows through v-model.
-const props = withDefaults(defineProps<{ palette?: PaletteControlOptions; modelValue?: string; options?: RadioOption[]; disabled?: boolean }>(), { palette: undefined })
+const props = withDefaults(defineProps<{ palette?: PaletteControlOptions; modelValue?: string; options?: RadioOption[]; disabled?: boolean
+  /** A message under the group, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+  error?: string }>(), { palette: undefined })
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
-const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, disabled: props.disabled }))
 const uid = useId()
 
 // A radio group stacks with a fixed gap; a dense settings list needs it smaller, and a horizontal layout needs it gone.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "flex flex-col gap-2",
-)
+  "flex flex-col gap-2", () => ownAttrs())
 
 usePaletteControl({ disabled: () => field.value.disabled })
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <RadioGroupRoot
     :model-value="modelValue"
     :disabled="field.disabled"
@@ -82,4 +85,5 @@ usePaletteControl({ disabled: () => field.value.disabled })
       </label>
     </slot>
   </RadioGroupRoot>
+  </FieldWrapper>
 </template>

package/src/components/LpRangeSlider.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import FieldWrapper from "./FieldWrapper.vue"
 import SliderRail from "./SliderRail.vue"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
@@ -16,7 +17,7 @@ import { usePaletteControl, type PaletteControlOptions } from "../composables/us
  * focused or dragged, so the numbers are readable without a second readout.
  */
 import { SliderRoot, SliderThumb } from "reka-ui"
-import { useFieldControl, mergeDescribedBy } from "../composables/useField"
+import { useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { SLIDER_GLIDE, useSliderDrag } from "./slider"
 
@@ -31,6 +32,8 @@ const props = withDefaults(
     /** The least distance the two ends keep between them, in model units. */
     minGap?: number
     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
     /** Accessible names for the two thumbs when there's no visible label. */
     ariaLabels?: [string, string]
     /** Label over each thumb while it is in use: `(value) => "1:05"`. */
@@ -58,11 +61,10 @@ function onCommit(v: number[] | undefined) {
   if (value) emit("change", value)
 }
 
-const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, disabled: props.disabled }))
 
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  `relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`,
-)
+  `relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`, () => ownAttrs())
 const { dragging, onPointerDown } = useSliderDrag()
 
 const thumbClass =
@@ -74,6 +76,7 @@ usePaletteControl({ disabled: () => field.value.disabled })
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <SliderRoot
     :model-value="[props.modelValue[0], props.modelValue[1]]"
     :min="min"
@@ -101,4 +104,5 @@ usePaletteControl({ disabled: () => field.value.disabled })
       <span v-if="format" :class="labelClass">{{ format(props.modelValue[index]) }}</span>
     </SliderThumb>
   </SliderRoot>
+  </FieldWrapper>
 </template>

package/src/components/LpRepeater.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="T extends object">
+import FieldWrapper from "./FieldWrapper.vue"
 import { nextTick, ref } from "vue"
-import { useFieldControl } from "../composables/useField"
+import { useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useRepeater, type RepeaterItemKey } from "../composables/useRepeater"
@@ -17,6 +18,8 @@ const props = defineProps<{
   itemKey?: RepeaterItemKey<T>
   label?: string
   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
   labels?: Partial<{ add: string; remove: string; empty: string }>
 }>()
 const model = defineModel<T[]>({ default: () => [] })
@@ -25,7 +28,7 @@ defineSlots<{
   empty?(): unknown
 }>()
 
-const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, disabled: props.disabled }))
 const text = useLabels("repeater", { add: "Add item", remove: "Remove item {index}", empty: "No items" }, () => props.labels)
 const list = useRepeater({
   value: () => model.value,
@@ -78,11 +81,19 @@ async function remove(index: number) {
   else (addButton.value?.$el as HTMLElement | undefined)?.focus({ preventScroll: true })
 }
 defineExpose({ add, remove, update: list.update })
-const { class: rootClass, attrs: rest } = useMergedAttrs("flex min-w-0 flex-col gap-2")
+const { class: rootClass, attrs: rest } = useMergedAttrs("flex min-w-0 flex-col gap-2", () => ownAttrs())
 </script>
 
 <template>
-  <div v-bind="rest" :class="rootClass">
+  <FieldWrapper v-bind="wrapper">
+  <!-- A group, named by its label, so the field's message is read with it. -->
+  <div
+    v-bind="rest"
+    role="group"
+    :aria-label="label || undefined"
+    :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy)"
+    :class="rootClass"
+  >
     <div class="flex items-center justify-between gap-2">
       <span v-if="label" class="text-sm font-medium text-ink">{{ label }}</span>
       <LpButton ref="addButton" size="xs" variant="ghost" :disabled="field.disabled" @click="add">
@@ -105,6 +116,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs("flex min-w-0 flex-col
       </div>
     </LpShift>
   </div>
+  </FieldWrapper>
 </template>
 
 <style>

package/src/components/LpSegmented.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 { isHTMLElement } from "../composables/useView"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
@@ -19,7 +20,7 @@ import { usePaletteControl, type PaletteControlOptions } from "../composables/us
 import { Motion } from "motion-v"
 import { ToggleGroupItem, ToggleGroupRoot } from "reka-ui"
 import { ref, useId } from "vue"
-import { useFieldControl, mergeDescribedBy } from "../composables/useField"
+import { useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { usePillTransition } from "../composables/usePillTransition"
 import AttentionDot from "./AttentionDot.vue"
@@ -47,6 +48,8 @@ const props = withDefaults(
     /** Stretch to fill the container with equal-width segments. */
     block?: 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
     /**
      * The pill glides under the hovered segment and springs back on leave (the
      * default, as in LpTabs). False pins it to the selected segment and hover
@@ -80,10 +83,9 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     // `w-fit`, not left to the parent: in a column a flex item stretches, and
     // the options sat on the left of an empty bar (the theme studio met it).
     props.block ? "flex w-full" : "w-fit",
-  ].join(" "),
-)
+  ].join(" "), () => ownAttrs())
 
-const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, disabled: props.disabled }))
 
 const pillId = `lp-segmented-${useId()}`
 const pillTransition = usePillTransition()
@@ -114,6 +116,7 @@ usePaletteControl({ disabled: () => field.value.disabled })
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <ToggleGroupRoot
     :model-value="modelValue"
     type="single"
@@ -152,4 +155,5 @@ usePaletteControl({ disabled: () => field.value.disabled })
       <AttentionDot v-if="opt.dot && opt.label" class="mt-1.5" />
     </ToggleGroupItem>
   </ToggleGroupRoot>
+  </FieldWrapper>
 </template>

package/src/components/LpSelect.vue

@@ -39,7 +39,8 @@ import {
   ComboboxViewport,
 } from "reka-ui"
 import { computed, nextTick, reactive, ref, useAttrs, useId, watch } from "vue"
-import { useFieldBlur, useFieldControl, mergeDescribedBy } from "../composables/useField"
+import FieldWrapper from "./FieldWrapper.vue"
+import { useFieldBlur, useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { OPTION_ITEM, optionStagger, POPOVER_PANEL } from "./dropdown"
@@ -75,6 +76,8 @@ const props = withDefaults(
     clearable?: boolean
     disabled?: boolean
     invalid?: boolean
+    /** A message under the select, as on LpInput: it marks the select invalid (what `form.field()` hands it). */
+    error?: string
     emptyText?: string
     // Server-side search: bind with `v-model:searchTerm`. When provided, the
     // parent owns filtering (fetches matching `options` per term), so the
@@ -110,11 +113,7 @@ const props = withDefaults(
 const SIZE_HEIGHT = CONTROL_SIZE
 const anchorHeight = computed(() => SIZE_HEIGHT[props.size])
 
-const field = useFieldControl(() => ({
-  wrapped: false,
-  invalid: props.invalid,
-  disabled: props.disabled,
-}))
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid, disabled: props.disabled }))
 const labels = useLabels<SelectLabels>(
   "select",
   {
@@ -136,7 +135,7 @@ const emptyLabel = computed(() => props.emptyText ?? labels.value.empty)
 const loadingLabel = computed(() => props.loadingText ?? labels.value.loading)
 
 // The consumer's `class="w-40"` has to beat the root's own layout.
-const { class: rootClass, attrs: rootAttrs } = useMergedAttrs("relative")
+const { class: rootClass, attrs: rootAttrs } = useMergedAttrs("relative", ownAttrs)
 
 const emit = defineEmits<{
   // Full v-model state (single value, array for multiple, or empty).
@@ -450,6 +449,7 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
        the seeding left the list pinned to one option until it was cleared by
        hand. Both flags default true and reach the same writer, so both must go:
        we own the term (`query`) and reka must not write to it. -->
+  <FieldWrapper v-bind="wrapper">
   <ComboboxRoot
     :model-value="comboModel"
     :multiple="multiple"
@@ -635,4 +635,5 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       </ComboboxContent>
     </ComboboxPortal>
   </ComboboxRoot>
+  </FieldWrapper>
 </template>

package/src/components/LpSlider.vue

@@ -6,12 +6,13 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import FieldWrapper from "./FieldWrapper.vue"
 import SliderRail from "./SliderRail.vue"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 // Single-value slider (reka Slider). reka models value as an array; we expose
 // a plain number for the common single-thumb case. Themed via tokens.
 import { SliderRoot, SliderThumb } from "reka-ui"
-import { useFieldControl, mergeDescribedBy } from "../composables/useField"
+import { useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { SLIDER_GLIDE, useSliderDrag } from "./slider"
 
@@ -24,6 +25,8 @@ const props = withDefaults(
     max?: number
     step?: number
     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
     /** Accessible name for the thumb when there's no visible label. */
     ariaLabel?: string
   }>(),
@@ -44,18 +47,18 @@ function onCommit(v: number[] | undefined) {
   if (v && v.length) emit("change", v[0])
 }
 
-const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, disabled: props.disabled }))
 
 // A slider is full-width by default; putting one in a toolbar means constraining it, and a fixed h-5 has to yield to a denser row.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  `relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`,
-)
+  `relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`, () => ownAttrs())
 const { dragging, onPointerDown } = useSliderDrag()
 
 usePaletteControl({ disabled: () => field.value.disabled })
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <SliderRoot
     :model-value="[props.modelValue]"
     :min="min"
@@ -78,4 +81,5 @@ usePaletteControl({ disabled: () => field.value.disabled })
       class="block size-4 rounded-pill border-2 border-brand bg-surface shadow outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
     />
   </SliderRoot>
+  </FieldWrapper>
 </template>

package/src/components/LpSwitch.vue

@@ -6,10 +6,11 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import FieldWrapper from "./FieldWrapper.vue"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { computed, useId, useSlots } from "vue"
 import { SwitchRoot, SwitchThumb } from "reka-ui"
-import { mergeDescribedBy, useFieldControl } from "../composables/useField"
+import { mergeDescribedBy, useOwnField } from "../composables/useField"
 import { useOptimisticToggle } from "../composables/useOptimisticToggle"
 import LpLoader from "./LpLoader.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
@@ -20,6 +21,8 @@ const props = withDefaults(
     palette?: PaletteControlOptions
     modelValue?: 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. */
     description?: string
@@ -67,13 +70,11 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() => {
   return props.labelPosition === "start"
     ? "flex w-full cursor-pointer items-center justify-between gap-3 text-sm text-ink"
     : "inline-flex cursor-pointer items-center gap-2 text-sm text-ink"
-})
+}, () => ownAttrs())
 
 // Whatever is not class (name, aria-*, @focus…) belongs to the switch itself,
 // labelled or not: on the label row it would land on the <label>.
-const field = useFieldControl(() => ({
-  wrapped: false,
-  id: typeof rest.value.id === "string" ? rest.value.id : undefined,
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, id: typeof rest.value.id === "string" ? rest.value.id : undefined,
   disabled: props.disabled,
 }))
 const descriptionId = `${useId()}-description`
@@ -89,6 +90,7 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <component :is="labelled ? 'label' : 'span'" :class="labelled ? [rootClass, field.disabled && 'cursor-not-allowed'] : 'contents'">
     <span v-if="labelled && labelPosition === 'start'" class="flex min-w-0 flex-col">
       <slot>{{ label }}</slot>
@@ -121,4 +123,5 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
       <span v-if="description" :id="descriptionId" class="text-xs text-muted">{{ description }}</span>
     </span>
   </component>
+  </FieldWrapper>
 </template>

package/src/components/LpTagsInput.vue

@@ -39,7 +39,7 @@ import {
   TagsInputRoot,
 } from "reka-ui"
 import { computed, ref, useAttrs, useId, watch } from "vue"
-import { fieldWrapperBinds, fieldMessageId, useField, useFieldControl, mergeDescribedBy } from "../composables/useField"
+import { wrapsItself, fieldWrapperBinds, fieldMessageId, useField, useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { prefersReducedMotion } from "../composables/easing"
 import { useFieldNotice, type FieldNoticeOptions } from "../composables/useFieldNotice"
 import { useShift } from "../composables/useShift"
@@ -137,7 +137,8 @@ const text = useLabels<TagsInputLabels>(
 )
 
 const attrs = useAttrs()
-const hasField = computed(() => !!props.label || !!props.hint || !!props.error)
+const outerFieldOf = useField()
+const hasField = computed(() => wrapsItself(props, outerFieldOf))
 /*
  * Notes go to the field that frames the control, which fades its own hint out
  * under them: this component's own LpFormField when it has a label or hint,
@@ -145,7 +146,7 @@ const hasField = computed(() => !!props.label || !!props.hint || !!props.error)
  * alone.
  */
 const notice = useFieldNotice()
-const outerField = useField()
+const outerField = outerFieldOf
 type FieldHandle = { notify: (text: string, options?: FieldNoticeOptions) => void; clearNotice: () => void }
 const ownField = ref<FieldHandle | null>(null)
 function bindField(c: unknown): void {

package/src/components/LpTextarea.vue

@@ -6,7 +6,7 @@ export default { inheritAttrs: false }
 import { nodeWindow } from "../composables/realm"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { computed, nextTick, onMounted, ref, useAttrs, watch } from "vue"
-import { fieldWrapperBinds, useFieldControl, mergeDescribedBy } from "../composables/useField"
+import { wrapsItself, useField, fieldWrapperBinds, useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { mergeClass } from "../composables/useMergedClass"
 import FieldWrapper from "./FieldWrapper.vue"
 
@@ -37,7 +37,8 @@ const props = withDefaults(defineProps<{
 
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
-const hasField = computed(() => !!props.label || !!props.hint || !!props.error)
+const outerFieldOf = useField()
+const hasField = computed(() => wrapsItself(props, outerFieldOf))
 
 // class/style lay out the field when there is one, and style the <textarea>
 // when it stands alone; every other attr (name, maxlength, autofocus, @blur…)