@leavepulse/ui 0.77.3 → 0.78.0

package/src/components/LpOtpInput.vue

@@ -21,7 +21,7 @@ export default { inheritAttrs: false }
  */
 import { PinInputInput, PinInputRoot } from "reka-ui"
 import { computed, ref, watch } from "vue"
-import { useFieldControl } from "../composables/useField"
+import { useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { groupBreaks, joinCells, splitCode, upperCells, type OtpCells } from "./otp"
 
@@ -166,7 +166,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :index="i - 1"
         :id="i === 1 ? field.id : undefined"
         :aria-invalid="field.invalid || undefined"
-        :aria-describedby="field.describedBy"
+        :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy)"
         :autocapitalize="upper ? 'characters' : 'none'"
         autocorrect="off"
         :spellcheck="false"

package/src/components/LpPagination.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { nodeWindow } from "../composables/realm"
 /*
  * Page navigator. Pairs with LpTable but stands alone.
  *
@@ -17,6 +18,7 @@ export default { inheritAttrs: false }
  * and just swaps its number — which lets the brand pill glide between slots via
  * motion-v's shared layoutId with zero list-animation conflicts.
  */
+import { clamp } from "../composables/clamp"
 import { Motion } from "motion-v"
 import { computed, ref, useId } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
@@ -66,7 +68,7 @@ const count = computed(() => {
 })
 
 const current = computed(() =>
-  Number.isFinite(props.page) ? Math.min(Math.max(1, Math.floor(props.page)), count.value) : 1,
+  Number.isFinite(props.page) ? clamp(Math.floor(props.page), 1, count.value) : 1,
 )
 
 // A fixed run of page slots. Each slot is either a real page or a gap ("…").
@@ -85,7 +87,7 @@ const gap = ref(6)
 function measure() {
   const nav = root.value
   if (!nav || !nav.children.length) return
-  gap.value = parseFloat(getComputedStyle(nav).columnGap) || 0
+  gap.value = parseFloat(nodeWindow(nav).getComputedStyle(nav).columnGap) || 0
   const items = nav.children.length
   const used = [...nav.children].reduce((sum, el) => sum + (el as HTMLElement).offsetWidth, 0)
   slotWidth.value = used / items
@@ -144,7 +146,7 @@ const slots = computed<Slot[]>(() => {
 
 function go(p: number) {
   if (props.disabled) return
-  const next = Math.min(Math.max(1, p), count.value)
+  const next = clamp(p, 1, count.value)
   if (next === current.value) return
   emit("update:page", next)
   emit("change", next)

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 { CONTROL_SIZE } from "./controlSize"
 import {
   ComboboxAnchor,
   ComboboxContent,
@@ -47,13 +48,13 @@ import {
   ComboboxTrigger,
   ComboboxViewport,
 } from "reka-ui"
-import { computed, onMounted, ref, shallowRef, useAttrs } from "vue"
-import { useField, useFieldControl } from "../composables/useField"
+import { computed, onMounted, ref, shallowRef } from "vue"
+import { useField, useAttrsField, mergeDescribedBy } from "../composables/useField"
 import { useFieldNotice, type FieldNoticeOptions } from "../composables/useFieldNotice"
 import { useInputFilter } from "../composables/useInputFilter"
 import { useLabels } from "../composables/useLpConfig"
 import { type Country, filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./countries"
-import { OPTION_ITEM, optionStagger, POPOVER_PANEL } from "./dropdown"
+import { OPTION_ITEM, optionStagger, COMBOBOX_PANEL, POPOVER_PANEL } from "./dropdown"
 import LpFieldNotice from "./LpFieldNotice.vue"
 import LpIcon from "./LpIcon.vue"
 import {
@@ -315,23 +316,13 @@ function onBlur() {
   say(reason.replace("{country}", name), { tone: "danger", duration: 0 })
 }
 
-const sizeClass = {
-  sm: "h-(--size-control-sm) text-xs",
-  md: "h-(--size-control-md) text-sm",
-  lg: "h-(--size-control-lg) text-sm",
-}
+const sizeClass = CONTROL_SIZE
 
 // The control is full-width with its own frame — the two things a consumer
 // 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 = useAttrs()
-const field = useFieldControl(() => ({
-  wrapped: false,
-  id: typeof attrs.id === "string" ? attrs.id : undefined,
-  invalid: props.invalid || flagged.value,
-  disabled: props.disabled,
-}))
+const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid || flagged.value, disabled: props.disabled }))
 const text = useLabels<PhoneInputLabels>("phoneInput", {
   selectCountry: "Select country",
   placeholder: "Phone number",
@@ -406,10 +397,8 @@ const guardOutside = useOutsideGuard()
         <ComboboxContent
           @interact-outside="guardOutside"
           @escape-key-down="guardOutside"
-          :collision-padding="8"
-          position="popper"
+          v-bind="COMBOBOX_PANEL"
           align="start"
-          :side-offset="6"
           :class="[POPOVER_PANEL, 'z-(--z-popover) max-h-72 w-72 overflow-hidden']"
         >
           <div class="border-b border-line p-2">
@@ -460,7 +449,7 @@ const guardOutside = useOutsideGuard()
       :disabled="field.disabled"
       :required="field.required || undefined"
       :aria-invalid="field.invalid || undefined"
-      :aria-describedby="[field.describedBy, notice.message.value ? noticeId : ''].filter(Boolean).join(' ') || undefined"
+      :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy, notice.message.value ? noticeId : undefined)"
       class="lp-autofill min-w-0 flex-1 self-stretch bg-transparent px-3 outline-none placeholder:text-muted"
       @beforeinput="onBeforeEdit"
       @paste="onPaste"

package/src/components/LpPie.vue

@@ -20,7 +20,10 @@ export default { inheritAttrs: false }
  * A donut's hole is the natural place for the headline the chart is about — the
  * total, or whatever the caller puts in the `center` slot.
  */
+import { clamp } from "../composables/clamp"
+import { isElement, useView, viewWindow } from "../composables/useView"
 import { computed, onBeforeUnmount, ref, watch } from "vue"
+import { useHotkeys } from "../composables/useHotkeys"
 import { easeTravel, prefersReducedMotion } from "../composables/easing"
 import { useReveal } from "../composables/useReveal"
 import { lerp, mixColor, useTween } from "../composables/useTween"
@@ -272,7 +275,7 @@ const skeletonRing = computed(() => {
   return { inset: `${inset}px`, borderWidth: `${Math.max(1, band)}px` }
 })
 const inner = computed(() =>
-  props.type === "donut" ? outer.value * Math.min(0.95, Math.max(0, props.innerRatio)) : 0,
+  props.type === "donut" ? outer.value * clamp(props.innerRatio, 0, 0.95) : 0,
 )
 
 /*
@@ -682,7 +685,7 @@ const leaveChart = (e: PointerEvent) => {
   // it, so look both up and down from wherever the pointer was reported to go.
   const to = e.relatedTarget
   if (
-    to instanceof Element &&
+    isElement(to) &&
     (to.closest("[data-lp-follow]") || to.querySelector("[data-lp-follow]"))
   )
     return
@@ -691,22 +694,28 @@ const leaveChart = (e: PointerEvent) => {
   endDrag()
 }
 
+const view = useView()
+
+// Where the pointer is held: inside an LpFrame its release stays in the frame's window.
+let dragWindow: Window | null = null
+
 const endDrag = () => {
   dragging.value = false
-  window.removeEventListener("pointerup", endDrag)
-  window.removeEventListener("pointercancel", endDrag)
+  dragWindow?.removeEventListener("pointerup", endDrag)
+  dragWindow?.removeEventListener("pointercancel", endDrag)
+  dragWindow = null
 }
 
 const beginDrag = () => {
   dragging.value = true
-  window.addEventListener("pointerup", endDrag)
-  window.addEventListener("pointercancel", endDrag)
+  dragWindow = viewWindow(view.value)
+  dragWindow.addEventListener("pointerup", endDrag)
+  dragWindow.addEventListener("pointercancel", endDrag)
 }
 
 onBeforeUnmount(() => {
   endDrag()
   clearTimeout(leaveTimer)
-  window.removeEventListener("keydown", onKeydown)
 })
 
 const clearSelection = () => {
@@ -717,23 +726,16 @@ const clearSelection = () => {
 }
 
 /*
- * Escape drops the selection, the way it dismisses any transient state. Bound
- * to the window rather than the chart because a selection made with the mouse
- * leaves focus nowhere in particular — requiring the user to focus the chart
- * first would make the key useless exactly when they reach for it. Only armed
- * while something is selected, so the chart never swallows an Escape meant for
- * a dialog or a menu above it.
+ * Escape drops the selection, the way it dismisses any transient state. Global
+ * rather than on the chart because a selection made with the mouse leaves focus
+ * nowhere in particular — requiring the user to focus the chart first would
+ * make the key useless exactly when they reach for it. Only armed while
+ * something is selected, so the chart never swallows an Escape meant for a
+ * dialog or a menu above it.
  */
-const onKeydown = (e: KeyboardEvent) => {
-  if (e.key === "Escape") clearSelection()
-}
-
-watch(
-  () => selected.value.size > 0,
-  (hasSelection) => {
-    if (hasSelection) window.addEventListener("keydown", onKeydown)
-    else window.removeEventListener("keydown", onKeydown)
-  },
+useHotkeys(
+  () => [{ key: "escape", allowInInput: true, handler: clearSelection }],
+  { enabled: () => selected.value.size > 0 },
 )
 
 const menuPoint = ref<{ index: number; label: string; value: number; isOther: boolean } | null>(

package/src/components/LpPipeline.vue

@@ -27,6 +27,8 @@ export default { inheritAttrs: false }
  */
 import { computed, nextTick, ref, useId, useSlots, watch } from "vue"
 import { prefersReducedMotion } from "../composables/easing"
+import { isElement } from "../composables/useView"
+import { devWarn } from "../composables/devWarn"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useNow } from "../composables/useNow"
@@ -42,6 +44,7 @@ import {
   connectorFilled,
   currentStepIndex,
   stepElapsed,
+  duplicateStepKeys,
   stepKey,
   type PipelineStep,
   type StepStatus,
@@ -73,6 +76,8 @@ const props = withDefaults(
     /**
      * Keep the current step (see `currentStepIndex`) scrolled into view as the
      * run advances: a long job list, or a horizontal strip wider than its box.
+     * It moves only when the current step changes, so a status update inside a
+     * step leaves the reader's scroll alone.
      */
     follow?: boolean
     /**
@@ -164,11 +169,17 @@ const announcement = ref("")
 let seen = new Map<string, StepStatus>()
 /* Steps the pipeline opened itself — the only ones it may close again. */
 const autoOpened = new Set<string>()
+const warnedKeys = new Set<string>()
 
 watch(
   () => props.steps.map((s, i) => [stepKey(s, i), s.status] as const),
   (pairs, old) => {
     const next = new Map(pairs)
+    const repeated = duplicateStepKeys(props.steps).filter((key) => !warnedKeys.has(key))
+    if (repeated.length) {
+      repeated.forEach((key) => warnedKeys.add(key))
+      devWarn(`LpPipeline: step keys must be unique, repeated: ${repeated.join(", ")}`)
+    }
     if (old) {
       const opened: string[] = []
       const closed: string[] = []
@@ -191,6 +202,8 @@ watch(
       }
     }
     seen = next
+    // A step that left the run will never pass to be folded again.
+    for (const key of autoOpened) if (!next.has(key)) autoOpened.delete(key)
   },
   { immediate: true },
 )
@@ -198,7 +211,7 @@ watch(
 /* ── Following the current step. */
 const uid = useId()
 const items: Array<Element | null> = []
-const bindItem = (i: number) => (el: unknown) => { items[i] = el instanceof Element ? el : null }
+const bindItem = (i: number) => (el: unknown) => { items[i] = isElement(el) ? el : null }
 const current = computed(() => currentStepIndex(props.steps))
 
 watch(current, async (i) => {

package/src/components/LpPopover.vue

@@ -5,7 +5,7 @@ import {
   PopoverRoot,
   PopoverTrigger,
 } from "reka-ui"
-import { computed } from "vue"
+import { computed, useAttrs } from "vue"
 import { mergeClass } from "../composables/useMergedClass"
 import { POPOVER_PANEL } from "./dropdown"
 import { useOutsideGuard, usePortalTarget } from "../composables/useView"
@@ -20,7 +20,11 @@ const props = withDefaults(
     sideOffset?: number
     /** Extra classes for the floating panel (width, padding, overflow). */
     panelClass?: string
-    /** Accessible name of the panel, which reka exposes as a dialog. */
+    /**
+     * Accessible name of the panel, which reka exposes as a dialog. Without
+     * one the trigger names it. A heading inside the panel names it better:
+     * pass `aria-labelledby` with its id.
+     */
     ariaLabel?: string
   }>(),
   { side: "bottom", align: "center", sideOffset: 6 },
@@ -36,6 +40,22 @@ const panel = computed(() =>
   mergeClass(POPOVER_PANEL, "z-(--z-popover) w-64 rounded-card p-3 text-sm text-ink outline-none", props.panelClass),
 )
 
+/*
+ * reka writes the trigger's id into `aria-labelledby` after the attributes it
+ * was given, and that outranks `aria-label`: a name passed here never reached
+ * a reader. It renders that value once per open, so the panel can be put right
+ * as it opens without being overwritten.
+ */
+const attrs = useAttrs()
+function namePanel(event: Event) {
+  // The event comes from the positioning wrapper around the panel.
+  const panel = (event.currentTarget as HTMLElement).querySelector('[role="dialog"]')
+  if (!panel) return
+  const labelledBy = attrs["aria-labelledby"]
+  if (typeof labelledBy === "string") panel.setAttribute("aria-labelledby", labelledBy)
+  else if (props.ariaLabel) panel.removeAttribute("aria-labelledby")
+}
+
 // Overlays open in the window this component renders in (an LpFrame's, inside one).
 const portalTo = usePortalTarget()
 // What happens in another document (the page around a frame, or a frame in
@@ -51,6 +71,7 @@ const guardOutside = useOutsideGuard()
     <PopoverPortal :to="portalTo">
       <PopoverContent
         v-bind="$attrs"
+        @open-auto-focus="namePanel"
         @interact-outside="guardOutside"
         @escape-key-down="guardOutside"
         :collision-padding="8"

package/src/components/LpProgress.vue

@@ -16,6 +16,7 @@ export default { inheritAttrs: false }
  * reka ProgressRoot underneath (so assistive tech reads a progressbar with a
  * value either way).
  */
+import { clamp } from "../composables/clamp"
 import { ProgressIndicator, ProgressRoot } from "reka-ui"
 import { computed } from "vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
@@ -130,7 +131,7 @@ const bindReveal = (instance: unknown) => {
 // A zero or missing max (no quota known yet) reads as empty, not as NaN%.
 const pct = computed(() => {
   const ratio = props.max > 0 ? (shown.value / props.max) * 100 : 0
-  return Number.isFinite(ratio) ? Math.max(0, Math.min(100, ratio)) : 0
+  return Number.isFinite(ratio) ? clamp(ratio, 0, 100) : 0
 })
 
 /*

package/src/components/LpRadioGroup.vue

@@ -9,7 +9,7 @@ export default { inheritAttrs: false }
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui"
 import { useId } from "vue"
-import { useFieldControl } from "../composables/useField"
+import { useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import LpIcon from "./LpIcon.vue"
 import type { LpOptionBase } from "./options"
@@ -42,10 +42,10 @@ usePaletteControl({ disabled: () => field.value.disabled })
     :disabled="field.disabled"
     :required="field.required"
     :aria-labelledby="field.labelId"
-    :aria-describedby="field.describedBy"
     :aria-invalid="field.invalid || undefined"
     :class="rootClass"
     v-bind="rest"
+    :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy)"
     @update:model-value="(v) => $emit('update:modelValue', v as string)"
   >
     <slot>

package/src/components/LpRangeSlider.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import SliderRail from "./SliderRail.vue"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * Two thumbs on one track: a range rather than a value. A price "from – to",
@@ -14,8 +15,8 @@ import { usePaletteControl, type PaletteControlOptions } from "../composables/us
  * Each thumb can carry a label above it (`format`), shown while it is hovered,
  * focused or dragged, so the numbers are readable without a second readout.
  */
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui"
-import { useFieldControl } from "../composables/useField"
+import { SliderRoot, SliderThumb } from "reka-ui"
+import { useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { SLIDER_GLIDE, useSliderDrag } from "./slider"
 
@@ -87,16 +88,14 @@ usePaletteControl({ disabled: () => field.value.disabled })
     @update:model-value="onUpdate"
     @value-commit="onCommit"
   >
-    <SliderTrack class="relative h-1.5 grow overflow-hidden rounded-pill bg-surface-soft">
-      <SliderRange class="absolute h-full rounded-pill bg-brand" />
-    </SliderTrack>
+    <SliderRail />
     <SliderThumb
       v-for="index in [0, 1] as const"
       :key="index"
       :id="index === 0 ? field.id : undefined"
       :aria-label="ariaLabels?.[index]"
       :aria-labelledby="ariaLabels ? undefined : field.labelId"
-      :aria-describedby="field.describedBy"
+      :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy)"
       :class="thumbClass"
     >
       <span v-if="format" :class="labelClass">{{ format(props.modelValue[index]) }}</span>

package/src/components/LpRevealOnScroll.vue

@@ -85,7 +85,7 @@ function play(node: HTMLElement) {
   if (props.immediate || prefersReducedMotion() || typeof node.animate !== "function") return
   const from = revealFrom(props.preset, props.direction, props.distance)
   const frames = [from, revealTo(from)]
-  const easing = easingToken("ease-emphasized")
+  const easing = easingToken("ease-emphasized", undefined, node)
   // `backwards` holds each target in its hidden state through its delay, so a
   // staggered child does not flash in before its turn.
   const targets = props.stagger > 0 ? Array.from(node.children) : [node]

package/src/components/LpScrollArea.vue

@@ -14,6 +14,7 @@ import {
   ScrollAreaViewport,
 } from "reka-ui"
 import { prefersReducedMotion } from "../composables/easing"
+import { nodeWindow } from "../composables/useView"
 
 // `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
@@ -122,7 +123,9 @@ function measureEdges(el: HTMLElement) {
  * it has to come off the element.
  *
  * Kept in sync with content size rather than set once: a list that fills in
- * later becomes scrollable without anything else changing.
+ * later becomes scrollable without anything else changing. The viewport's
+ * tabindex is therefore this component's alone; `tabindex` on LpScrollArea
+ * lands on its root and does not reach it.
  */
 function syncViewportFocusable(el: HTMLElement) {
   const scrollable = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
@@ -161,8 +164,10 @@ watch(
     }
     remeasure()
 
-    if (typeof ResizeObserver !== "undefined") {
-      edgeResize = new ResizeObserver(remeasure)
+    // The element's own window: the observers belong to the realm they watch.
+    const win = nodeWindow(el)
+    if (win.ResizeObserver) {
+      edgeResize = new win.ResizeObserver(remeasure)
       edgeResize.observe(el)
       // Watching the children too, since a grid that reflows into more rows
       // grows the content box without the viewport's own size moving.
@@ -171,8 +176,8 @@ watch(
     // Rows arriving after the first paint are the common case — a list waiting
     // on a query renders empty, and observing only the boxes that existed then
     // left the fade off until something else happened to trigger a measure.
-    if (typeof MutationObserver !== "undefined") {
-      edgeMutation = new MutationObserver(() => {
+    if (win.MutationObserver) {
+      edgeMutation = new win.MutationObserver(() => {
         if (edgeResize) {
           edgeResize.disconnect()
           edgeResize.observe(el)
@@ -186,7 +191,10 @@ watch(
   { immediate: true, flush: "post" },
 )
 
-onBeforeUnmount(stopEdgeWatch)
+onBeforeUnmount(() => {
+  stopEdgeWatch()
+  stopThumbDrag?.()
+})
 
 /*
  * A press on the bar beside the thumb. reka treats any press on the track as
@@ -211,17 +219,26 @@ function onTrackPointerDown(event: PointerEvent, axis: "x" | "y") {
   el.scrollBy(axis === "y" ? { top: step, behavior } : { left: step, behavior })
 }
 
-function onThumbPointerDown() {
+let stopThumbDrag: (() => void) | null = null
+
+function onThumbPointerDown(event: PointerEvent) {
   dragging.value = true
+  stopThumbDrag?.()
+  // The thumb's own window: inside an LpFrame the page's never hears the release.
+  const win = nodeWindow(event.currentTarget as Node)
   const stop = () => {
     dragging.value = false
-    window.removeEventListener("pointerup", stop)
-    window.removeEventListener("pointercancel", stop)
+    win.removeEventListener("pointerup", stop)
+    win.removeEventListener("pointercancel", stop)
+    win.removeEventListener("lostpointercapture", stop)
+    stopThumbDrag = null
   }
+  stopThumbDrag = stop
   // Bound on the window: the pointer is captured by the thumb, and the release
   // routinely happens far outside the scroll area.
-  window.addEventListener("pointerup", stop)
-  window.addEventListener("pointercancel", stop)
+  win.addEventListener("pointerup", stop)
+  win.addEventListener("pointercancel", stop)
+  win.addEventListener("lostpointercapture", stop)
 }
 </script>
 

package/src/components/LpSecretField.vue

@@ -12,6 +12,7 @@ export interface SecretFieldLabels extends Record<string, string> {
 </script>
 
 <script setup lang="ts">
+import { isElement } from "../composables/useView"
 import { suppressPaletteDiscovery } from "../composables/usePaletteCommands"
 /*
  * A value someone must be able to read and copy but should not have on screen
@@ -159,7 +160,7 @@ const field = ref<{ $el?: Element } | null>(null)
 watch(revealed, () => {
   if (!props.input || prefersReducedMotion()) return
   const el = field.value?.$el
-  const input = el instanceof Element ? el.querySelector("input") : null
+  const input = isElement(el) ? el.querySelector("input") : null
   input?.animate([{ filter: "blur(4px)", opacity: 0.35 }, { filter: "blur(0)", opacity: 1 }], {
     duration: 260,
     easing: "cubic-bezier(0.2, 0, 0, 1)",

package/src/components/LpSegmented.vue

@@ -6,6 +6,8 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { CONTROL_SIZE } from "./controlSize"
+import { isHTMLElement } from "../composables/useView"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * Segmented control — a compact bar of mutually-exclusive options with a sliding
@@ -17,7 +19,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 } from "../composables/useField"
+import { useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { usePillTransition } from "../composables/usePillTransition"
 import AttentionDot from "./AttentionDot.vue"
@@ -66,11 +68,7 @@ function onChange(v: unknown) {
   if (typeof v === "string" && v) emit("update:modelValue", v)
 }
 
-const sizeCls = {
-  sm: "h-(--size-control-sm) text-xs",
-  md: "h-(--size-control-md) text-sm",
-  lg: "h-(--size-control-lg) text-sm",
-}
+const sizeCls = CONTROL_SIZE
 
 // The bar sizes itself from `size` and `block`, which is right until a consumer
 // needs it flush against something — `class="p-0"` and `class="rounded-none"`
@@ -109,7 +107,7 @@ function pillUnder(value: string): boolean {
  */
 function releaseFocusAfterPointer(event: PointerEvent) {
   const target = event.currentTarget
-  if (target instanceof HTMLElement) target.blur()
+  if (isHTMLElement(target)) target.blur()
 }
 
 usePaletteControl({ disabled: () => field.value.disabled })
@@ -121,10 +119,10 @@ usePaletteControl({ disabled: () => field.value.disabled })
     type="single"
     :disabled="field.disabled"
     :aria-labelledby="field.labelId"
-    :aria-describedby="field.describedBy"
     :rovingFocus="true"
     :class="rootClass"
     v-bind="rest"
+    :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy)"
     @update:model-value="onChange"
     @pointerleave="hovered = null"
   >