@leavepulse/ui 0.78.0 → 0.78.2

package/src/components/LpPageScrollbar.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+/*
+ * The kit's overlay scrollbar for the document itself, for a page that scrolls
+ * the window (LpAppShell's default): the same bar as LpScrollArea's, drawn by
+ * the kit over the content instead of the browser's beside it.
+ *
+ *   <LpPageScrollbar top="4rem" />
+ *
+ * The browser's own bar is hidden while this is mounted, so the page no longer
+ * loses its width to a gutter, nor changes width when it starts to scroll. The
+ * scrolling stays the browser's: wheel, keyboard, touch, find-in-page, anchors,
+ * scroll restoration, sticky, a full-page screenshot and printing are untouched
+ * (the bar is not printed, and at rest it is not drawn). What the kit adds is
+ * the drawing, a thumb that drags, and a press beside it that pages.
+ *
+ * Where the browser's bars already float over the content (phones, macOS set
+ * to show them while scrolling) it draws nothing and leaves the browser's.
+ *
+ * `top` and `bottom` keep the bar clear of what covers the window's edges: a
+ * sticky header, a bottom bar. Any CSS length, a variable included, and a
+ * change eases.
+ */
+import { computed, onBeforeUnmount, onMounted, ref } from "vue"
+import { mergeClass } from "../composables/useMergedClass"
+import { nodeWindow } from "../composables/useView"
+import { BAR_FADE, BAR_Y, BAR_Y_SIZE, hideNativeBar, pageToward, SCROLL_HIDE_DELAY_MS, THUMB_Y, THUMB_Y_ROUND } from "./scrollbar"
+
+const props = withDefaults(defineProps<{ top?: string; bottom?: string }>(), { top: "0px", bottom: "0px" })
+
+/* Shorter than this the thumb is hard to catch; reka's bar holds the same floor. */
+const MIN_THUMB_PX = 18
+
+const barEl = ref<HTMLElement | null>(null)
+const active = ref(false)
+const thumb = ref({ top: 0, height: 0 })
+const scrollable = ref(false)
+const scrolling = ref(false)
+const hovered = ref(false)
+const dragging = ref(false)
+// Unset until the bar first shows: a bar mounting "hidden" would play its fade-out.
+const state = computed(() => (scrolling.value || hovered.value || dragging.value ? "visible" : shownOnce.value ? "hidden" : undefined))
+const shownOnce = ref(false)
+
+let releaseNative: (() => void) | undefined
+let doc: Document | undefined
+let hideTimer: ReturnType<typeof setTimeout> | undefined
+let frame = 0
+let sizes: ResizeObserver | undefined
+
+function scroller(): HTMLElement | null {
+  return (doc?.scrollingElement as HTMLElement | null) ?? null
+}
+
+/* The width the browser's bar takes from the layout: 0 where it floats over the content. */
+function nativeBarWidth(d: Document): number {
+  const probe = d.createElement("div")
+  probe.style.cssText = "position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll"
+  d.body.append(probe)
+  const width = probe.offsetWidth - probe.clientWidth
+  probe.remove()
+  return width
+}
+
+function measure() {
+  frame = 0
+  const view = scroller()
+  const bar = barEl.value
+  if (!view || !bar) return
+  const range = view.scrollHeight - view.clientHeight
+  scrollable.value = range > 1
+  if (!scrollable.value) return
+  const track = bar.clientHeight
+  const height = Math.max(MIN_THUMB_PX, Math.round((track * view.clientHeight) / view.scrollHeight))
+  thumb.value = { height, top: Math.round(((track - height) * view.scrollTop) / range) }
+}
+function measureSoon() {
+  if (!frame && doc) frame = nodeWindow(doc).requestAnimationFrame(measure)
+}
+
+function onScroll() {
+  measureSoon()
+  scrolling.value = true
+  shownOnce.value = true
+  clearTimeout(hideTimer)
+  hideTimer = setTimeout(() => (scrolling.value = false), SCROLL_HIDE_DELAY_MS)
+}
+function onEnter() {
+  hovered.value = true
+  shownOnce.value = true
+}
+function onLeave() {
+  hideTimer && clearTimeout(hideTimer)
+  hideTimer = setTimeout(() => {
+    hovered.value = false
+    scrolling.value = false
+  }, SCROLL_HIDE_DELAY_MS)
+}
+
+/* A dialog that locks the page locks the bar with it. */
+function locked(): boolean {
+  return !!doc && nodeWindow(doc).getComputedStyle(doc.body).overflow === "hidden"
+}
+
+function onTrackPointerDown(event: PointerEvent) {
+  const view = scroller()
+  const thumbEl = barEl.value?.querySelector<HTMLElement>("[data-lp-thumb]")
+  if (!view || !thumbEl || event.button !== 0 || thumbEl.contains(event.target as Node) || locked()) return
+  event.preventDefault()
+  pageToward(view, "y", event.clientY < thumbEl.getBoundingClientRect().top)
+}
+
+function onThumbPointerDown(event: PointerEvent) {
+  const view = scroller()
+  const bar = barEl.value
+  if (!view || !bar || event.button !== 0 || locked()) return
+  // Not a text selection across the page, and the release is heard wherever it lands.
+  event.preventDefault()
+  const handle = event.currentTarget as HTMLElement
+  handle.setPointerCapture(event.pointerId)
+  dragging.value = true
+  const startY = event.clientY
+  const startTop = view.scrollTop
+  const perPixel = (view.scrollHeight - view.clientHeight) / Math.max(1, bar.clientHeight - thumb.value.height)
+  const move = (e: PointerEvent) => view.scrollTo({ top: startTop + (e.clientY - startY) * perPixel, behavior: "instant" })
+  const stop = () => {
+    dragging.value = false
+    handle.removeEventListener("pointermove", move)
+    handle.removeEventListener("pointerup", stop)
+    handle.removeEventListener("pointercancel", stop)
+    handle.removeEventListener("lostpointercapture", stop)
+  }
+  handle.addEventListener("pointermove", move)
+  handle.addEventListener("pointerup", stop)
+  handle.addEventListener("pointercancel", stop)
+  handle.addEventListener("lostpointercapture", stop)
+}
+
+onMounted(() => {
+  const host = barEl.value ?? undefined
+  doc = host?.ownerDocument
+  if (!doc || nativeBarWidth(doc) === 0) return
+  active.value = true
+  releaseNative = hideNativeBar(doc)
+  const win = nodeWindow(doc)
+  win.addEventListener("scroll", onScroll, { passive: true })
+  win.addEventListener("resize", measureSoon)
+  sizes = new win.ResizeObserver(measureSoon)
+  sizes.observe(doc.body)
+  if (host) sizes.observe(host)
+  measure()
+})
+
+onBeforeUnmount(() => {
+  clearTimeout(hideTimer)
+  sizes?.disconnect()
+  if (!doc || !active.value) return
+  const win = nodeWindow(doc)
+  if (frame) win.cancelAnimationFrame(frame)
+  win.removeEventListener("scroll", onScroll)
+  win.removeEventListener("resize", measureSoon)
+  releaseNative?.()
+})
+
+const barClass = computed(() =>
+  mergeClass(
+    BAR_Y,
+    BAR_Y_SIZE.wall,
+    BAR_FADE,
+    "fixed right-0 z-(--z-sticky) transition-[top,bottom] duration-[var(--duration-medium)] ease-[var(--ease-settle)] print:hidden",
+  ),
+)
+</script>
+
+<template>
+  <!-- Always in the DOM, so it can be measured; drawn only where the kit owns the bar. -->
+  <div
+    ref="barEl"
+    aria-hidden="true"
+    data-lp-page-scrollbar
+    :class="barClass"
+    :data-state="active && scrollable ? state : undefined"
+    :style="{ top: props.top, bottom: props.bottom, visibility: active && scrollable ? undefined : 'hidden' }"
+    @pointerenter="onEnter"
+    @pointerleave="onLeave"
+    @pointerdown="onTrackPointerDown"
+  >
+    <div
+      data-lp-thumb
+      class="absolute right-px"
+      :class="[THUMB_Y, THUMB_Y_ROUND.wall]"
+      :style="{ top: `${thumb.top}px`, height: `${thumb.height}px` }"
+      @pointerdown.stop="onThumbPointerDown"
+    />
+  </div>
+</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/LpScrollArea.vue

@@ -13,8 +13,20 @@ import {
   ScrollAreaThumb,
   ScrollAreaViewport,
 } from "reka-ui"
-import { prefersReducedMotion } from "../composables/easing"
 import { nodeWindow } from "../composables/useView"
+import {
+  BAR_FADE,
+  BAR_X,
+  BAR_X_SIZE,
+  BAR_Y,
+  BAR_Y_SIZE,
+  pageToward,
+  SCROLL_HIDE_DELAY_MS,
+  THUMB_X,
+  THUMB_X_ROUND,
+  THUMB_Y,
+  THUMB_Y_ROUND,
+} from "./scrollbar"
 
 // `fade` softens whichever of the top/bottom edges currently has content beyond
 // it, so a clipped list reads as continuing rather than as cut off. On by
@@ -80,8 +92,7 @@ function onViewportBlur() {
 // `opacity-0` + the hidden-state fade is what keeps the bar invisible at rest:
 // with force-mount the element stays in the DOM, so a one-shot fade-out alone
 // would snap back to visible once the animation finished.
-const barFade =
-  "opacity-0 data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=visible]:opacity-100 data-[state=hidden]:animate-[fade-out_240ms_ease]"
+const edge = computed(() => (props.floating ? "floating" : "wall"))
 
 // Dragging the thumb pulls the pointer off the bar and across the content, and
 // the browser reads that as a text selection — the rows highlight blue while
@@ -197,13 +208,9 @@ onBeforeUnmount(() => {
 })
 
 /*
- * A press on the bar beside the thumb. reka treats any press on the track as
- * "put the thumb's middle under the pointer" and sets the scroll in one go,
- * so a press that just missed the narrow thumb yanked the content by half a
- * thumb, and a press further away teleported it. Like a native bar, a press
- * off the thumb now pages one viewport towards the pointer, smoothly; the
- * thumb itself has a hit area as wide as the bar (see its `before:`), so a
- * press that meant to grab it does.
+ * A press on the bar beside the thumb pages towards the pointer (pageToward)
+ * instead of reka's jump; the thumb's hit area is as wide as the bar (its
+ * `before:`), so a press that meant to grab it does.
  */
 function onTrackPointerDown(event: PointerEvent, axis: "x" | "y") {
   const el = viewportEl.value
@@ -213,10 +220,7 @@ function onTrackPointerDown(event: PointerEvent, axis: "x" | "y") {
   event.preventDefault()
   event.stopImmediatePropagation()
   const rect = thumb.getBoundingClientRect()
-  const before = axis === "y" ? event.clientY < rect.top : event.clientX < rect.left
-  const step = (axis === "y" ? el.clientHeight : el.clientWidth) * 0.85 * (before ? -1 : 1)
-  const behavior = prefersReducedMotion() ? "auto" : "smooth"
-  el.scrollBy(axis === "y" ? { top: step, behavior } : { left: step, behavior })
+  pageToward(el, axis, axis === "y" ? event.clientY < rect.top : event.clientX < rect.left)
 }
 
 let stopThumbDrag: (() => void) | null = null
@@ -253,7 +257,7 @@ function onThumbPointerDown(event: PointerEvent) {
     class="relative flex flex-col overflow-hidden"
     :class="dragging ? 'select-none' : undefined"
     type="hover"
-    :scroll-hide-delay="500"
+    :scroll-hide-delay="SCROLL_HIDE_DELAY_MS"
   >
     <!-- The bar itself is a pointer target far wider than it looks: the visible
          rail is the thumb, sized below, while the track pads it out to a
@@ -273,8 +277,8 @@ function onThumbPointerDown(event: PointerEvent) {
     <ScrollAreaScrollbar
       orientation="vertical"
       force-mount
-      class="group z-1 flex touch-none select-none justify-end pl-2.5"
-      :class="[barFade, floating ? 'w-4 py-1 pr-1' : 'w-3.5 py-px pr-px']"
+      class="z-1"
+      :class="[BAR_Y, BAR_FADE, BAR_Y_SIZE[edge]]"
       :style="barInsetTop ? { marginTop: barInsetTop } : undefined"
       @pointerdown.capture="onTrackPointerDown($event, 'y')"
     >
@@ -286,22 +290,22 @@ function onThumbPointerDown(event: PointerEvent) {
            the positioning reka owns. -->
       <ScrollAreaThumb
         data-lp-thumb
-        class="relative min-w-1 bg-brand/40 before:absolute before:inset-y-0 before:right-0 before:-left-2.5 before:content-[''] transition-[min-width,background-color] duration-[var(--duration-fast)] group-hover:min-w-1.5 group-hover:bg-brand"
-        :class="floating ? 'rounded-pill' : 'rounded-l-pill'"
+        class="relative"
+        :class="[THUMB_Y, THUMB_Y_ROUND[edge]]"
         @pointerdown="onThumbPointerDown"
       />
     </ScrollAreaScrollbar>
 
     <ScrollAreaScrollbar
       orientation="horizontal"
-      class="group z-1 flex flex-col touch-none select-none justify-end pt-2.5"
-      :class="[barFade, floating ? 'h-4 px-1 pb-1' : 'h-3.5 px-px pb-px']"
+      class="z-1"
+      :class="[BAR_X, BAR_FADE, BAR_X_SIZE[edge]]"
       @pointerdown.capture="onTrackPointerDown($event, 'x')"
     >
       <ScrollAreaThumb
         data-lp-thumb
-        class="relative min-h-1 bg-brand/40 before:absolute before:inset-x-0 before:bottom-0 before:-top-2.5 before:content-[''] transition-[min-height,background-color] duration-[var(--duration-fast)] group-hover:min-h-1.5 group-hover:bg-brand"
-        :class="floating ? 'rounded-pill' : 'rounded-t-pill'"
+        class="relative"
+        :class="[THUMB_X, THUMB_X_ROUND[edge]]"
         @pointerdown="onThumbPointerDown"
       />
     </ScrollAreaScrollbar>

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/LpServiceNode.vue

@@ -5,7 +5,7 @@
  * depends_on edges connect these across host frames. Tailwind utilities only
  * (no scoped CSS) so styles reach consumer apps via @source.
  */
-import { Handle, Position } from "@vue-flow/core"
+import { Handle, Position, type NodeProps } from "@vue-flow/core"
 import { computed } from "vue"
 
 export interface ServiceNodeData {
@@ -16,7 +16,9 @@ export interface ServiceNodeData {
   dimmed?: boolean
 }
 
-const props = defineProps<{ data: ServiceNodeData; selected?: boolean }>()
+// Vue Flow hands a custom node all of NodeProps. Declared, they stop falling
+// through onto the node's root as attributes (position="[object Object]").
+const props = defineProps<Omit<NodeProps<ServiceNodeData>, "selected"> & { selected?: boolean }>()
 
 const kindVar: Record<string, string> = {
   service: "var(--color-brand)",