@leavepulse/ui 0.77.3 → 0.78.1

package/src/components/LpNumberField.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { CONTROL_SIZE } from "./controlSize"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 // Numeric input with stepper buttons (reka NumberField). Themed via tokens.
 import {
@@ -14,9 +15,10 @@ import {
   NumberFieldInput,
   NumberFieldRoot,
 } from "reka-ui"
-import { computed, useAttrs, useId } from "vue"
+import { computed, useId } from "vue"
+import FieldLeading from "./FieldLeading.vue"
 import LpIcon from "./LpIcon.vue"
-import { focusLeft, useFieldControl } from "../composables/useField"
+import { focusLeft, useAttrsField, mergeDescribedBy } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedClass } from "../composables/useMergedClass"
 
@@ -66,6 +68,8 @@ const props = withDefaults(defineProps<{
   // "Depth", "Weight" tells the reader nothing about which one wants grams.
   // Not part of the value: it is never typed, selected, or submitted.
   unit?: string
+  /** A leading icon, as on LpInput; the `leading` slot replaces it. */
+  icon?: string
   invalid?: boolean
   /** Control height, matching LpInput. */
   size?: "sm" | "md" | "lg"
@@ -93,21 +97,11 @@ const text = useLabels<NumberFieldLabels>(
   () => props.labels,
 )
 
-const SIZE = {
-  sm: "h-(--size-control-sm) text-xs",
-  md: "h-(--size-control-md) text-sm",
-  lg: "h-(--size-control-lg) text-sm",
-}
+const SIZE = CONTROL_SIZE
 
-const attrs = useAttrs()
-const field = useFieldControl(() => ({
-  wrapped: false,
-  id: typeof attrs.id === "string" ? attrs.id : undefined,
-  invalid: props.invalid,
-  disabled: props.disabled,
-}))
+const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid, disabled: props.disabled }))
 const describedBy = computed(
-  () => [field.value.describedBy, props.unit ? unitId : undefined].filter(Boolean).join(" ") || undefined,
+  () => mergeDescribedBy(attrs["aria-describedby"], field.value.describedBy, props.unit ? unitId : undefined),
 )
 
 // The frame takes the consumer's class and style, and `name` goes to reka's
@@ -160,6 +154,9 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
     @update:model-value="(v) => emit('update:modelValue', Number.isNaN(v) ? null : (v ?? null))"
     @focusout="onFocusOut"
   >
+    <FieldLeading :icon="icon" class="pl-2.5">
+      <template v-if="$slots.leading" #default><slot name="leading" /></template>
+    </FieldLeading>
     <NumberFieldDecrement
       v-if="steppers"
       :aria-label="text.decrease"
@@ -177,7 +174,7 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       :aria-describedby="describedBy"
       :aria-invalid="field.invalid || undefined"
       class="min-w-0 flex-1 bg-transparent text-ink outline-none placeholder:text-muted [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
-      :class="steppers ? 'text-center @max-[8.5rem]:px-3 @max-[8.5rem]:text-left' : 'px-3'"
+      :class="steppers ? 'text-center @max-[8.5rem]:px-3 @max-[8.5rem]:text-left' : icon || $slots.leading ? 'pl-2 pr-3' : 'px-3'"
     />
     <!-- The unit sits between the value and the increment button, so a long one
          narrows the field rather than covering the digits. Not focusable and

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