@leavepulse/ui 0.78.1 → 0.78.2

package/dist/index.js

@@ -1,11 +1,11 @@
 import { _ } from "./chunks/LayoutCanvas-CZKOltfA.js";
-import { _ as _2 } from "./chunks/LpAddressInput-BSS49jpm.js";
+import { _ as _2 } from "./chunks/LpAddressInput-ft8fQOGx.js";
 import { _ as _3 } from "./chunks/LpMapPicker-D5_YLLBC.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BGMk5KoG.js";
 import { _ as _5 } from "./chunks/LpAlert-CjvTZIKF.js";
-import { _ as _6 } from "./chunks/LpAppShell-BKbYCHkx.js";
-import { _ as _7 } from "./chunks/LpAutocomplete-DkY6CSyD.js";
+import { _ as _6 } from "./chunks/LpAppShell-DkvU6IBB.js";
+import { _ as _7 } from "./chunks/LpAutocomplete-CrZbd0uv.js";
 import { _ as _8 } from "./chunks/LpAvatar-cQVsNk6F.js";
 import { _ as _9 } from "./chunks/LpBadge-D5QQdDQ_.js";
 import { _ as _10 } from "./chunks/LpBreadcrumbs-CIIBsygI.js";
@@ -18,10 +18,10 @@ import { CHART_PALETTE, axisTicks, chartSummary, formatTick, markerIndex, niceSc
 import { chartView, lttbIndices, minMaxBuckets, panRange, slotOf, sourceOf, zoomRange } from "./components/chartWindow.js";
 import { useChartSync } from "./composables/useChartSync.js";
 import { createLinkedView, linkChart, linkLog, linkPipeline, linkTable, linkTopology, provideLinkedView, useLinkedView } from "./composables/useLinkedView.js";
-import { _ as _14 } from "./chunks/LpCheckbox-D6RuDW4X.js";
+import { _ as _14 } from "./chunks/LpCheckbox-CCWCwD0y.js";
 import { _ as _15 } from "./chunks/LpCodeBlock-DBqy4RLd.js";
 import { tokenizeLines } from "./components/codeHighlight.js";
-import { _ as _16 } from "./chunks/LpColorPicker-COHzV68R.js";
+import { _ as _16 } from "./chunks/LpColorPicker-BONURBFN.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
 import { applyQueryFilters, highlightParts, parseCommandQuery, parsePaletteQuery, rankCommandItems, searchCommandItems, swapCommandLayout } from "./components/commandSearch.js";
@@ -37,8 +37,8 @@ import { _ as _18 } from "./chunks/LpConfirmDialog-CnrmzkuN.js";
 import { _ as _19 } from "./chunks/LpConfirmHost-CwbObVGH.js";
 import { confirm, useConfirm } from "./components/confirm.js";
 import { _ as _20 } from "./chunks/LpContextMenu-Bx_IhQDS.js";
-import { _ as _21 } from "./chunks/LpDatePicker-DwSDY0mt.js";
-import { _ as _22 } from "./chunks/LpDateRangePicker-CNQXdTVv.js";
+import { _ as _21 } from "./chunks/LpDatePicker-C2AOtxgF.js";
+import { _ as _22 } from "./chunks/LpDateRangePicker-CiXdIAyh.js";
 import { _ as _23 } from "./chunks/LpRangeCalendar-BrqlGZzE.js";
 import { clampRange, dayAllowed, defaultDatePresets, defaultRangePresets, formatRange, normalizeRange, sameRange } from "./components/dateRange.js";
 import { _ as _24 } from "./chunks/LpDisclosure-DG7JCo-d.js";
@@ -47,7 +47,7 @@ import { _ as _26 } from "./chunks/LpDrawer-DXNQFpAA.js";
 import { _ as _27 } from "./chunks/LpDropdownMenu-CLzxIOgM.js";
 import { default as default9 } from "./components/LpDropzone.vue.js";
 import { _ as _28 } from "./chunks/LpEmptyState-DurPF001.js";
-import { _ as _29 } from "./chunks/LpFileTree-C-rJKzEQ.js";
+import { _ as _29 } from "./chunks/LpFileTree-CpNurwZp.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _30 } from "./chunks/LpFieldNotice-DJ10cYIo.js";
 import { _ as _31 } from "./chunks/LpFormField-BKYn9dyP.js";
@@ -55,54 +55,54 @@ import { _ as _32 } from "./chunks/LpIcon-C6JpQ5td.js";
 import { i, r, a, b } from "./chunks/icons-CYfcpSDS.js";
 import { default as default10 } from "./components/LpImageEditor.vue.js";
 import { _ as _33 } from "./chunks/LpInfraNode-Bb5nbuFY.js";
-import { _ as _34 } from "./chunks/LpInput-D0O6dpuA.js";
+import { _ as _34 } from "./chunks/LpInput-CbI7z5fQ.js";
 import { _ as _35 } from "./chunks/LpLightbox-CtDTQV01.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _36 } from "./chunks/LpLink-Krkjhe_y.js";
-import { _ as _37 } from "./chunks/LpLogViewer-umCZBapN.js";
-import { _ as _38 } from "./chunks/LpLogInspector-BdQlX6S-.js";
+import { _ as _37 } from "./chunks/LpLogViewer-CWu49Dko.js";
+import { _ as _38 } from "./chunks/LpLogInspector-CcSJSGan.js";
 import { compilePattern, findIds, messageShape, structuredPayload, timeMs } from "./components/logTools.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
 import { _ as _39 } from "./chunks/LpMediaGallery-BYEwySoF.js";
 import { _ as _40 } from "./chunks/LpModal-DDvrSAnf.js";
-import { _ as _41 } from "./chunks/LpModalNav-gOi1Giz1.js";
+import { _ as _41 } from "./chunks/LpModalNav-DI3BW5ff.js";
 import { _ as _42 } from "./chunks/LpNotificationBell-DUbVyK6R.js";
-import { _ as _43 } from "./chunks/LpNumberField-Csg-1Zh_.js";
-import { _ as _44 } from "./chunks/LpTimeField-DeOcKWJq.js";
+import { _ as _43 } from "./chunks/LpNumberField-C8LfUz_R.js";
+import { _ as _44 } from "./chunks/LpTimeField-B5n0m8m0.js";
 import { _ as _45 } from "./chunks/LpNumberFlow-Vqj0tP7B.js";
-import { _ as _46 } from "./chunks/LpOtpInput-BRpLBbOD.js";
+import { _ as _46 } from "./chunks/LpOtpInput-B1X9l9no.js";
 import { _ as _47 } from "./chunks/LpPagination-snQ020xQ.js";
-import { _ as _48 } from "./chunks/LpPasswordInput-D4HPhqfV.js";
+import { _ as _48 } from "./chunks/LpPasswordInput-Duc_3wPv.js";
 import { _ as _49 } from "./chunks/LpPie-oVNHjsKD.js";
-import { _ as _50 } from "./chunks/LpPhoneInput-BSL7NX4z.js";
+import { _ as _50 } from "./chunks/LpPhoneInput-CctcRK9K.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _51 } from "./chunks/LpPopover-BQSuxtai.js";
 import { _ as _52 } from "./chunks/LpProgress-D_MSjowb.js";
 import { _ as _53 } from "./chunks/LpRadio-CWA5Eb3M.js";
-import { _ as _54 } from "./chunks/LpRadioGroup-BrazjLY_.js";
+import { _ as _54 } from "./chunks/LpRadioGroup-DTM0nd9G.js";
 import { _ as _55 } from "./chunks/LpRollingText-B54Pje7P.js";
 import { _ as _56 } from "./chunks/LpScrollArea-CqvwfZs2.js";
 import { _ as _57 } from "./chunks/LpPageScrollbar-D2O0xhJw.js";
-import { _ as _58 } from "./chunks/LpSegmented-DbEJhbv-.js";
+import { _ as _58 } from "./chunks/LpSegmented-sskrJKJJ.js";
 import { _ as _59 } from "./chunks/LpSection-BfteipxU.js";
-import { _ as _60 } from "./chunks/LpSelect-Y-iuSymW.js";
+import { _ as _60 } from "./chunks/LpSelect-JFZehOkd.js";
 import { fitChips, toggledValues } from "./components/select.js";
 import { _ as _61 } from "./chunks/LpServiceNode-Cln2ntdw.js";
 import { _ as _62 } from "./chunks/LpShift-DAgS_d2x.js";
 import { _ as _63 } from "./chunks/LpSwap-M7nFeW3C.js";
 import { _ as _64 } from "./chunks/LpHintExample-YzCXiSUp.js";
 import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _65 } from "./chunks/LpSidebar-DDNJzb69.js";
+import { _ as _65 } from "./chunks/LpSidebar-CvRvVBTt.js";
 import { _ as _66 } from "./chunks/LpContextSwitcher-1C1tExdl.js";
 import { _ as _67 } from "./chunks/LpSkeleton-BB6XIV-w.js";
-import { _ as _68 } from "./chunks/LpSlider-A4ixovgS.js";
-import { _ as _69 } from "./chunks/LpRangeSlider-fz61tzc-.js";
+import { _ as _68 } from "./chunks/LpSlider-C4ilCtZX.js";
+import { _ as _69 } from "./chunks/LpRangeSlider-DJsEZXad.js";
 import { _ as _70 } from "./chunks/LpVideoBackdrop-Ct4St4ZL.js";
 import { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop.js";
 import { _ as _71 } from "./chunks/LpSparkline-CExIRDb3.js";
 import { _ as _72 } from "./chunks/LpStat-DPjc6_fX.js";
 import { _ as _73 } from "./chunks/LpStepper-DNnh7lCu.js";
-import { _ as _74 } from "./chunks/LpSwitch-DnC2-0aV.js";
+import { _ as _74 } from "./chunks/LpSwitch-DyAYTchz.js";
 import { default as default12 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
 import { filterRows, showOnly, shownValues } from "./components/tableFilter.js";
@@ -111,10 +111,10 @@ import { resolveRowMenu } from "./components/tableRowMenu.js";
 import { _ as _75 } from "./chunks/LpTableOfContents-CKkWEK6R.js";
 import { default as default13 } from "./components/LpTabs.vue.js";
 import { _ as _76 } from "./chunks/LpBottomNav-zxLGGbjm.js";
-import { _ as _77 } from "./chunks/LpTagsInput-Dt0mteSj.js";
+import { _ as _77 } from "./chunks/LpTagsInput-CkNxpNYa.js";
 import { addTags, splitTags } from "./components/tags.js";
-import { _ as _78 } from "./chunks/LpTextarea-Co0b9PVx.js";
-import { _ as _79 } from "./chunks/LpThemeSwitcher-DmCZ21P_.js";
+import { _ as _78 } from "./chunks/LpTextarea-CFK_5QB8.js";
+import { _ as _79 } from "./chunks/LpThemeSwitcher-Bzy15MCP.js";
 import { _ as _80 } from "./chunks/LpTilt-B7KHX1zH.js";
 import { _ as _81 } from "./chunks/LpToaster-Ct_ZOhCh.js";
 import { _ as _82 } from "./chunks/LpTooltip-Bz_rrq5S.js";
@@ -124,14 +124,14 @@ import { _ as _84 } from "./chunks/LpHintLayer-BeKRsRon.js";
 import { _ as _85 } from "./chunks/LpHints-qf3xYsza.js";
 import { HINT_SIGNALS, contextMenuTip, createHintSystem, dropzoneTip, hintKey, hintSummary, hotkeyTip, localHintStorage, noteDropzone, noteHotkeyTarget, paletteTip, provideHintSystem, runningHintSystem, useHintSystem } from "./composables/useHintSystem.js";
 import { _ as _86 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
-import { _ as _87 } from "./chunks/LpTopologyCanvas-jqz1KCq2.js";
+import { _ as _87 } from "./chunks/LpTopologyCanvas-BNgw9RyZ.js";
 import { clusterGraph, diffTopology, findPath, layeredLayout, neighborhood, topologyToSvg } from "./components/topologyGraph.js";
 import { _ as _88 } from "./chunks/LpUptimeBar-BoxcCDVY.js";
 import { addLeaf, addTab, countBlocks, countLeaves, deserializeLayout, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, serializeLayout, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
 import { layoutController, useLayout } from "./layout/useLayout.js";
 import { useWorkspaces } from "./layout/useWorkspaces.js";
-import { _ as _89 } from "./chunks/LpWorkspaceSwitcher-BeNHCLd5.js";
+import { _ as _89 } from "./chunks/LpWorkspaceSwitcher-ugv-fyig.js";
 import { _ as _90 } from "./chunks/LpInspector-DO3fTCQ1.js";
 import { _ as _91 } from "./chunks/LpWindow-B8YSRVTH.js";
 import { WINDOW_DOCKS, clampRect, dockAt, dockedRect, isWindowRect, resizeRect, snapRect, useWindowLayer } from "./composables/windowing.js";
@@ -181,10 +181,10 @@ import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
 import { _ as _92 } from "./chunks/LpThemeProvider-XK6ZeWAE.js";
 import { _ as _93 } from "./chunks/LpFrame-Bv5Fphte.js";
-import { _ as _94 } from "./chunks/LpThemeStudio-ChU0_Ga8.js";
+import { _ as _94 } from "./chunks/LpThemeStudio-R-wohbCY.js";
 import { _ as _95 } from "./chunks/LpThemeStudioSection-B7bt8Iyg.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
-import { _ as _96 } from "./chunks/LpRepeater-BkJHSPI1.js";
+import { _ as _96 } from "./chunks/LpRepeater-Czib3rmv.js";
 import { _ as _97 } from "./chunks/LpGauge-KZaQ_FDR.js";
 import { _ as _98 } from "./chunks/LpQuota-CgWPgdVt.js";
 import { _ as _99 } from "./chunks/LpStatus-DGJFwk5F.js";
@@ -205,11 +205,11 @@ import { useNow } from "./composables/useNow.js";
 import { _ as _105 } from "./chunks/LpCountdown-DVl7vXI1.js";
 import { DEFAULT_MILESTONES, DEFAULT_UNIT_LABELS, ceilToSecond, crossedMilestone, formatElapsed, formatTime, msToNextSecond, splitTime, timeParts } from "./components/timeSpan.js";
 import { _ as _106 } from "./chunks/LpCopyButton-sAMvWeLP.js";
-import { _ as _107 } from "./chunks/LpSecretField-B2roc4Iz.js";
+import { _ as _107 } from "./chunks/LpSecretField-BtlCk3IH.js";
 import { _ as _108 } from "./chunks/LpDataList-CaVfsozH.js";
 import { _ as _109 } from "./chunks/LpEditable-DVT0Rh8F.js";
 import { _ as _110 } from "./chunks/LpTruncate-ellq9RYM.js";
-import { _ as _111 } from "./chunks/LpCodeDisplay-D3BUAhV1.js";
+import { _ as _111 } from "./chunks/LpCodeDisplay-D59uPwRb.js";
 import { formatRemaining, groupCode, middleTruncate, normalizeCode } from "./components/fieldText.js";
 import { _ as _112 } from "./chunks/LpHoverCard-CHE9jAJG.js";
 import { _ as _113 } from "./chunks/LpIdenticon-Dbbr4fvt.js";
@@ -239,7 +239,7 @@ import { _ as _125 } from "./chunks/LpCommandScope-DRUvHiX7.js";
 import { createPaletteRegistry, mergePaletteCommands, usePaletteCommands, vPalette } from "./composables/usePaletteCommands.js";
 import { commandShortcuts, commandToHotkey, commandToMenuItem, commandToPalette, useCommands } from "./composables/useCommands.js";
 import { usePaletteTheme } from "./theme/palette.js";
-import { _ as _126 } from "./chunks/LpPaletteTheme-BIXpZLGe.js";
+import { _ as _126 } from "./chunks/LpPaletteTheme-B-xuZiKK.js";
 export {
   CHART_PALETTE,
   DEFAULT_MASK_TOKENS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.78.1",
+  "version": "0.78.2",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpAddressInput.vue

@@ -18,6 +18,7 @@ export default { inheritAttrs: false }
  * the picker is an async component, so the tile maths stays out of the bundle
  * of every form that never shows a map.
  */
+import FieldWrapper from "./FieldWrapper.vue"
 import { computed, defineAsyncComponent, onMounted, ref, watch } from "vue"
 import { useAsyncTask } from "../composables/useAsyncTask"
 import {
@@ -41,7 +42,7 @@ import LpIcon from "./LpIcon.vue"
 import LpInput from "./LpInput.vue"
 import LpModal from "./LpModal.vue"
 import LpSelect from "./LpSelect.vue"
-import { useFieldControl, mergeDescribedBy } from "../composables/useField"
+import { useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
@@ -68,6 +69,8 @@ const props = withDefaults(
     disabled?: boolean
     /** Mark every part of the address invalid (also set by a surrounding LpFormField's error). */
     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"
     /** Hide the map button when picking a point makes no sense. */
     hideMap?: boolean
@@ -289,15 +292,15 @@ function confirmPoint() {
  * every part: each inner field provides its own context, which would otherwise
  * hide the outer one from the controls.
  */
-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 }))
 
 // The group stacks its fields on a fixed gap that a tighter form has to close.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "flex flex-col gap-3",
-)
+  "flex flex-col gap-3", () => ownAttrs())
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <div
     role="group"
     :aria-labelledby="field.labelId"
@@ -428,4 +431,5 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       </template>
     </LpModal>
   </div>
+  </FieldWrapper>
 </template>

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/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/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>