@leavepulse/ui 0.78.0 → 0.78.2

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

@@ -15,7 +15,7 @@ import LpSkeleton from "./LpSkeleton.vue"
 import LpStatus from "./LpStatus.vue"
 import { useFitScale } from "../composables/useFitScale"
 import { useMergedAttrs } from "../composables/useMergedClass"
-import { TONES } from "./tone"
+import { TONES, toneOf, type ToneName } from "./tone"
 
 const props = withDefaults(
   defineProps<{
@@ -59,10 +59,26 @@ const props = withDefaults(
      * (it names the tile, it is not data); an empty one pulses too.
      */
     loading?: boolean
+    /**
+     * Colour of the figure, from the kit's tones (`danger` for offenders,
+     * `success`, `warning`…). Unset, it is ink. The delta keeps its own colour.
+     */
+    tone?: ToneName
+    /** Size of the figure: `lg` (the tile's own, text-3xl), `md` or `sm` for a dense row. */
+    size?: "sm" | "md" | "lg"
   }>(),
-  { trend: "auto", decimals: 0, animateOnMount: true },
+  { trend: "auto", decimals: 0, animateOnMount: true, size: "lg" },
 )
 
+/* The figure's type, and the variable its fit to the tile scales from. */
+const FIGURE_SIZE = {
+  sm: { class: "text-lg", font: "var(--text-lg, 1.125rem)", line: "var(--text-lg--line-height, 1.55)" },
+  md: { class: "text-2xl", font: "var(--text-2xl, 1.5rem)", line: "var(--text-2xl--line-height, 1.33)" },
+  lg: { class: "text-3xl", font: "var(--text-3xl, 1.875rem)", line: "var(--text-3xl--line-height, 1.2)" },
+} as const
+const figureSize = computed(() => FIGURE_SIZE[props.size])
+const figureColor = computed(() => (props.tone ? TONES[toneOf(props.tone)].text : "text-ink"))
+
 // Resolve the trend direction: explicit wins; "auto" reads a numeric delta.
 const dir = computed<"up" | "down" | "flat">(() => {
   if (props.trend !== "auto") return props.trend
@@ -136,7 +152,11 @@ const FIT_MIN = 0.6
 const row = ref<HTMLElement | null>(null)
 const figure = ref<HTMLElement | null>(null)
 const fit = useFitScale(row, figure, FIT_MIN)
-const figureStyle = computed(() => (fit.scale.value < 1 ? { fontSize: `calc(var(--text-3xl, 1.875rem) * ${fit.scale.value})`, lineHeight: "calc(var(--text-3xl, 1.875rem) * var(--text-3xl--line-height, 1.2))" } : undefined))
+const figureStyle = computed(() => {
+  if (fit.scale.value >= 1) return undefined
+  const { font, line } = figureSize.value
+  return { fontSize: `calc(${font} * ${fit.scale.value})`, lineHeight: `calc(${font} * ${line})` }
+})
 const figureTitle = computed(() => (fit.clipped.value && !props.loading ? `${props.prefix ?? ""}${props.value}${props.valueSuffix ?? ""}` : undefined))
 
 // A stat tile spaces its label and value on a fixed gap; a dense KPI row needs that tighter.
@@ -168,8 +188,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
            is the real one: the tile cannot change height when the figure lands. -->
       <span
         ref="figure"
-        class="max-w-full whitespace-nowrap font-mono text-3xl font-medium tracking-tight text-ink"
-        :class="fit.clipped.value ? 'inline-block overflow-hidden text-ellipsis align-bottom' : ''"
+        class="max-w-full whitespace-nowrap font-mono font-medium tracking-tight"
+        :class="[figureSize.class, figureColor, fit.clipped.value ? 'inline-block overflow-hidden text-ellipsis align-bottom' : '']"
         :style="figureStyle"
         :title="figureTitle"
       >

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

@@ -296,6 +296,12 @@ const portalTo = usePortalTarget()
 // What happens in another document (the page around a frame, or a frame in
 // the page) is not "outside" for this layer.
 const guardOutside = useOutsideGuard()
+
+// Several roots (trigger and portal), so Vue cannot hand attributes on by
+// itself and dropped them: a trigger wrapped around this one from outside (an
+// LpPopover's, as-child) lost its id, ARIA state and click, and its popover
+// never opened. They go to the trigger, which merges them onto the slot's element.
+defineOptions({ inheritAttrs: false })
 </script>
 
 <template>
@@ -318,6 +324,7 @@ const guardOutside = useOutsideGuard()
            lands on the real button rather than on a wrapper. -->
       <TooltipTrigger
         as-child
+        v-bind="$attrs"
         :aria-label="label ? content : undefined"
         @pointermove="onPointerMove"
       >

package/src/components/LpTopologyCanvas.vue

@@ -30,6 +30,7 @@ import { useResizeObserver } from "../composables/useResizeObserver"
 import { isHTMLElement, nodeWindow } from "../composables/useView"
 import { backgroundOf, resolveCssColor, svgToPng } from "./exportData"
 import LpButton from "./LpButton.vue"
+import LpIcon from "./LpIcon.vue"
 import LpInfraNode, { type InfraNodeData } from "./LpInfraNode.vue"
 import LpInput from "./LpInput.vue"
 import LpLaneNode from "./LpLaneNode.vue"
@@ -962,9 +963,10 @@ defineExpose({
         :key="action.id"
         size="sm"
         variant="outline"
-        :icon="action.icon"
         @click="emit('selection-action', { action: action.id, ids: selectedIds })"
       >
+        <!-- LpButton has no icon prop: an :icon here fell through and drew nothing. -->
+        <LpIcon v-if="action.icon" :name="action.icon" :size="14" />
         {{ action.label }}
       </LpButton>
     </Panel>

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/components/scrollbar.ts

@@ -0,0 +1,71 @@
+import { prefersReducedMotion } from "../composables/easing"
+import { nodeWindow } from "../composables/useView"
+
+/*
+ * The kit's overlay scrollbar, shared by LpScrollArea (reka's bar over its own
+ * viewport) and LpPageScrollbar (the document's, drawn by the kit), so the two
+ * look and answer alike.
+ *
+ * The bar is a pointer target far wider than it looks: the visible rail is the
+ * thumb, while the bar pads it out to a grabbable strip (a 4px-wide hit area is
+ * near-impossible to catch with a mouse). Padding, not width, carries the room
+ * so the thumb stays flush against the wall. The thumb is sized with
+ * min-width/min-height: reka sets an inline width from a variable it never
+ * defines for a vertical bar, and a minimum wins over that.
+ */
+export const BAR_Y = "group flex touch-none select-none justify-end pl-2.5"
+export const BAR_X = "group flex flex-col touch-none select-none justify-end pt-2.5"
+/* Against a wall, and inside a card or panel (a gap from the edge). */
+export const BAR_Y_SIZE = { wall: "w-3.5 py-px pr-px", floating: "w-4 py-1 pr-1" }
+export const BAR_X_SIZE = { wall: "h-3.5 px-px pb-px", floating: "h-4 px-1 pb-1" }
+
+export const THUMB_Y =
+  "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"
+export const THUMB_X =
+  "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"
+/* Rounded on the outer edge only against a wall; at both ends inside a card. */
+export const THUMB_Y_ROUND = { wall: "rounded-l-pill", floating: "rounded-pill" }
+export const THUMB_X_ROUND = { wall: "rounded-t-pill", floating: "rounded-pill" }
+
+/* In and out by the bar's `data-state` (visible | hidden), as reka sets it. */
+export const BAR_FADE =
+  "opacity-0 data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=visible]:opacity-100 data-[state=hidden]:animate-[fade-out_240ms_ease]"
+
+/* How long the bar stays after the last scroll or the pointer leaving it. */
+export const SCROLL_HIDE_DELAY_MS = 500
+
+/* A press beside the thumb pages this much of the view towards the pointer. */
+const PAGE_FRACTION = 0.85
+
+/**
+ * A press on the bar beside the thumb. Like a native bar it pages one view
+ * towards the pointer, smoothly, rather than putting the thumb's middle under
+ * it (reka's own answer, which yanked the content by half a thumb on a near
+ * miss and teleported it on a far press).
+ */
+export function pageToward(scroller: Element, axis: "x" | "y", before: boolean): void {
+  const view = axis === "y" ? scroller.clientHeight : scroller.clientWidth
+  const step = view * PAGE_FRACTION * (before ? -1 : 1)
+  const behavior = prefersReducedMotion(nodeWindow(scroller)) ? "auto" : "smooth"
+  scroller.scrollBy(axis === "y" ? { top: step, behavior } : { left: step, behavior })
+}
+
+/* Owners per document, so two page bars cannot give the browser's bar back early. */
+const nativeHidden = new WeakMap<Document, number>()
+
+/**
+ * Hide the document's own scrollbar (`lp-scrollbar-none` on <html>) while the
+ * kit draws one. Scrolling is untouched. Returns the release.
+ */
+export function hideNativeBar(doc: Document): () => void {
+  nativeHidden.set(doc, (nativeHidden.get(doc) ?? 0) + 1)
+  doc.documentElement.classList.add("lp-scrollbar-none")
+  let released = false
+  return () => {
+    if (released) return
+    released = true
+    const left = (nativeHidden.get(doc) ?? 1) - 1
+    nativeHidden.set(doc, left)
+    if (!left) doc.documentElement.classList.remove("lp-scrollbar-none")
+  }
+}

package/src/composables/propCheck.ts

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance, Plugin } from "vue"
+import { Teleport, type ComponentPublicInstance, type Plugin, type VNode } from "vue"
 
 /*
  * Development check for a misspelt prop on a kit component.
@@ -61,11 +61,26 @@ export function unknownAttributes(
   })
 }
 
+/*
+ * The elements a component rendered at its top. Not `$el`: with several roots
+ * (a trigger and its portal) that is the fragment's empty text anchor, which
+ * made every attribute look unknown. A teleport's content is left out, since
+ * nothing a caller passes lands there.
+ */
+function rootElements(vnode: VNode | null | undefined, out: Element[] = []): Element[] {
+  if (!vnode || vnode.type === Teleport) return out
+  if (vnode.component) return rootElements(vnode.component.subTree, out)
+  const el = vnode.el as Node | null
+  if (el?.nodeType === 1) {
+    out.push(el as Element)
+    return out
+  }
+  if (Array.isArray(vnode.children)) for (const child of vnode.children) if (child && typeof child === "object") rootElements(child as VNode, out)
+  return out
+}
+
 function renderedElements(instance: ComponentPublicInstance): Element[] {
-  const root = instance.$el as Node | null
-  if (root?.nodeType !== 1) return []
-  const el = root as Element
-  return [el, ...el.querySelectorAll(FORWARD_TARGETS)]
+  return rootElements(instance.$.subTree).flatMap((el) => [el, ...el.querySelectorAll(FORWARD_TARGETS)])
 }
 
 export const lpPropCheck: Plugin<[PropCheckOptions?]> = {

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
     }),
   }
 }

package/src/composables/usePaletteCommands.ts

@@ -218,8 +218,11 @@ export function usePaletteControl(options: {
           h(raw.label ? "h3" : "label", { id: `${editorId}-label`, for: raw.label ? undefined : editorId, class: "text-sm font-semibold text-ink" }, label()),
           h(instance.type as Component, {
             ...raw, id: undefined, name: undefined, form: undefined, autofocus: undefined, palette: false,
-            disabled: options.disabled?.() || !writable(), invalid: options.invalid?.(),
-            required: field?.value.required ?? instance.props.required,
+            disabled: options.disabled?.() || !writable(),
+            // Only to a control that declares them: elsewhere they fell through
+            // as attributes onto its root (a switch's button took `required`).
+            ...("invalid" in instance.props ? { invalid: options.invalid?.() } : {}),
+            ...("required" in instance.props ? { required: field?.value.required ?? instance.props.required } : {}),
             "aria-label": label(), class: "w-full", style: undefined,
           }, instance.slots),
           error() || hint() ? h("p", { id: `${editorId}-message`, class: error() ? "text-xs text-danger" : "text-xs text-muted", role: error() ? "alert" : undefined }, error() || hint()) : null,

package/src/index.ts

@@ -198,6 +198,7 @@ export { default as LpRadioGroup } from "./components/LpRadioGroup.vue"
 export type { RadioOption } from "./components/LpRadioGroup.vue"
 export { default as LpRollingText } from "./components/LpRollingText.vue"
 export { default as LpScrollArea } from "./components/LpScrollArea.vue"
+export { default as LpPageScrollbar } from "./components/LpPageScrollbar.vue"
 export { default as LpSegmented } from "./components/LpSegmented.vue"
 export type { SegmentedOption } from "./components/LpSegmented.vue"
 export { default as LpSection } from "./components/LpSection.vue"