@leavepulse/ui 0.78.1 → 0.78.2

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…)

package/src/components/LpTimeField.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"
 /*
@@ -22,7 +23,7 @@ import { usePaletteControl, type PaletteControlOptions } from "../composables/us
 import { Time } from "@internationalized/date"
 import { TimeFieldInput, TimeFieldRoot } from "reka-ui"
 import { computed } from "vue"
-import { focusLeft, useFieldControl, mergeDescribedBy } from "../composables/useField"
+import { focusLeft, useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import LpIcon from "./LpIcon.vue"
 
@@ -34,6 +35,8 @@ const props = withDefaults(
     modelValue?: 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"
     /** 24 or 12-hour clock, independent of the browser locale. */
     hourCycle?: 12 | 24
@@ -68,9 +71,7 @@ function onUpdate(next: unknown) {
   emit("update:modelValue", `${pad(next.hour)}:${pad(next.minute)}`)
 }
 
-const field = useFieldControl(() => ({
-  wrapped: false,
-  invalid: props.invalid,
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid,
   disabled: props.disabled,
 }))
 
@@ -82,13 +83,13 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     "flex w-full items-center gap-0.5 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
     shellSize[props.size],
     field.value.invalid ? "border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand",
-  ].join(" "),
-)
+  ].join(" "), () => ownAttrs())
 
 usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid })
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <TimeFieldRoot
     v-slot="{ segments }"
     :model-value="value"
@@ -121,4 +122,5 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       </TimeFieldInput>
     </template>
   </TimeFieldRoot>
+  </FieldWrapper>
 </template>

package/src/components/calendar.ts

@@ -52,6 +52,8 @@ export interface PickerFieldProps {
   clearable?: boolean
   disabled?: boolean
   invalid?: boolean
+  /** A message under the picker, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+  error?: string
   size?: "sm" | "md" | "lg"
   /** Locale of the shown date and the calendar; defaults to reka's ConfigProvider, then the browser. */
   locale?: string

package/src/composables/useField.ts

@@ -154,6 +154,58 @@ export function fieldWrapperBinds(
   return { wrapped, id: field.id, label, hint, error, required, class: attrs.class, style: attrs.style }
 }
 
+/**
+ * Whether a control with these props draws its own LpFormField. A label or a
+ * hint is its own; an error alone is, except inside an outer LpFormField, which
+ * owns the label (its `for` points at the control) and the message line: a
+ * second field in it showed the message twice and took the label's control id.
+ * There the error only marks the control invalid.
+ */
+export function wrapsItself(
+  own: { label?: string; hint?: string; error?: string },
+  outer: ComputedRef<FieldContext> | null,
+): boolean {
+  if (own.label || own.hint) return true
+  return !!own.error && !outer?.value
+}
+
+/**
+ * A control that takes `label`, `hint` and `error` the way LpInput does: given
+ * any of them it wraps itself in LpFormField (FieldWrapper, bound to
+ * `wrapper`), an error marks it invalid, and the consumer's class and style lay
+ * out that field instead of the control (`ownAttrs` says whether the control's
+ * root still takes them). Without them it is the bare control, as before. So
+ * `v-bind="form.field('x')"`, which hands every control `error`, shows the
+ * message on any of them.
+ * Inside an outer LpFormField an error alone does not wrap (wrapsItself).
+ */
+export function useOwnField(
+  state: () => { label?: string; hint?: string; error?: string; required?: boolean; invalid?: boolean; disabled?: boolean; id?: string },
+) {
+  const attrs = useAttrs()
+  const outer = useField()
+  const wrapped = computed(() => wrapsItself(state(), outer))
+  const field = useFieldControl(() => {
+    const own = state()
+    return {
+      wrapped: wrapped.value,
+      hasMessage: !!own.error || !!own.hint,
+      id: own.id ?? (typeof attrs.id === "string" ? attrs.id : undefined),
+      invalid: !!own.invalid || !!own.error,
+      required: own.required,
+      disabled: own.disabled,
+    }
+  })
+  const wrapper = computed(() => fieldWrapperBinds(wrapped.value, field.value, state(), attrs))
+  /* The attributes for the control itself: all of them, less the class and style the wrapper takes. */
+  const controlAttrs = computed(() => {
+    if (!wrapped.value) return attrs
+    const { class: _class, style: _style, ...rest } = attrs
+    return rest
+  })
+  return { wrapped, field, wrapper, controlAttrs, ownAttrs: () => !wrapped.value }
+}
+
 /** The state of a control that takes its id from the app and draws no wrapper of its own. */
 export function useAttrsField(state: () => { invalid?: boolean; disabled?: boolean }) {
   const attrs = useAttrs()

package/src/composables/useMergedClass.ts

@@ -62,11 +62,13 @@ function merge(...classes: (string | undefined | null | false)[]): string {
  */
 export function useMergedClass(
   own: MaybeRefOrGetter<string | undefined>,
+  /** False while something else takes the consumer's class (a field wrapper). */
+  takesAttrs: () => boolean = () => true,
 ): ComputedRef<string> {
   const attrs = useAttrs()
   // `cn` returns undefined when everything it was given was empty; a class
   // binding is happier with "" than with undefined.
-  return computed(() => merge(toValue(own), attrs.class as string | undefined))
+  return computed(() => merge(toValue(own), takesAttrs() ? (attrs.class as string | undefined) : undefined))
 }
 
 /**
@@ -85,16 +87,20 @@ export function useMergedClass(
  * Vue appends that second `class` to the merged one, and stylesheet order —
  * not the caller — decides which wins.
  */
-export function useMergedAttrs(own: MaybeRefOrGetter<string | undefined>): {
+export function useMergedAttrs(
+  own: MaybeRefOrGetter<string | undefined>,
+  /** False while a field wrapper takes the consumer's class and style (useOwnField's `ownAttrs`). */
+  takesAttrs: () => boolean = () => true,
+): {
   class: ComputedRef<string>
   attrs: ComputedRef<Record<string, unknown>>
 } {
   const attrs = useAttrs()
   return {
-    class: useMergedClass(own),
+    class: useMergedClass(own, takesAttrs),
     attrs: computed(() => {
-      const { class: _omitted, ...rest } = attrs
-      return rest
+      const { class: _omitted, style, ...rest } = attrs
+      return takesAttrs() ? { ...rest, ...(style === undefined ? {} : { style }) } : rest
     }),
   }
 }