@leavepulse/ui 0.43.3 → 0.44.0

package/src/components/LpOtpInput.vue

@@ -16,8 +16,10 @@ export default { inheritAttrs: false }
  * is filled. Digits-only by default (TOTP); flip `alphanumeric` for backup codes.
  */
 import { PinInputInput, PinInputRoot } from "reka-ui"
-import { computed } from "vue"
+import { computed, ref, watch } from "vue"
+import { useFieldControl } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { joinCells, splitCode, type OtpCells } from "./otp"
 
 const props = withDefaults(
   defineProps<{
@@ -45,13 +47,44 @@ const emit = defineEmits<{
 
 // reka models the value as an array of per-cell strings; we bridge to a single
 // string at the boundary so callers never touch the array shape.
+//
+// The cells are kept here, positions and all, rather than re-split from the
+// string on every render: clearing a middle cell leaves a gap the string cannot
+// express, and re-splitting it shifted every later digit one cell left. The
+// cells are only rebuilt when the model changes from outside.
+const local = ref<string[]>(splitCode(props.modelValue, props.length))
+let emitted = props.modelValue ?? ""
+watch(
+  () => props.modelValue ?? "",
+  (value) => {
+    if (value === emitted) return
+    emitted = value
+    local.value = splitCode(value, props.length)
+  },
+)
+watch(
+  () => props.length,
+  (length) => {
+    local.value = local.value.slice(0, length)
+  },
+)
 const cells = computed<string[]>({
-  get: () => (props.modelValue ?? "").split("").slice(0, props.length),
-  set: (arr) => emit("update:modelValue", arr.join("")),
+  get: () => local.value,
+  set: (arr) => {
+    local.value = arr
+    emitted = joinCells(arr)
+    emit("update:modelValue", emitted)
+  },
 })
 
-function onComplete(arr: string[]) {
-  emit("complete", arr.join(""))
+const field = useFieldControl(() => ({
+  wrapped: false,
+  invalid: props.invalid,
+  disabled: props.disabled,
+}))
+
+function onComplete(arr: OtpCells) {
+  emit("complete", joinCells(arr))
 }
 
 const cellSize = {
@@ -71,7 +104,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     v-model="cells"
     :type="alphanumeric ? 'text' : 'number'"
     :mask="mask"
-    :disabled="disabled"
+    :disabled="field.disabled"
     otp
     :class="rootClass"
     v-bind="rest"
@@ -81,14 +114,16 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       v-for="i in length"
       :key="i"
       :index="i - 1"
-      :aria-invalid="invalid || undefined"
+      :id="i === 1 ? field.id : undefined"
+      :aria-invalid="field.invalid || undefined"
+      :aria-describedby="field.describedBy"
       :class="[
         cellSize[size],
         'rounded-control border bg-surface-soft text-center font-semibold text-ink caret-brand',
         'outline-none transition-colors duration-[var(--duration-fast)]',
         'focus:border-brand focus:ring-2 focus:ring-ring',
         'disabled:cursor-not-allowed disabled:opacity-55',
-        invalid ? 'border-danger focus:border-danger focus:ring-danger-soft' : 'border-line',
+        field.invalid ? 'border-danger focus:border-danger focus:ring-danger-soft' : 'border-line',
       ]"
     />
   </PinInputRoot>

package/src/components/LpPagination.vue

@@ -22,6 +22,7 @@ import { computed, useId } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
 import LpIcon from "./LpIcon.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { useLabels } from "../composables/useLpConfig"
 
 const props = withDefaults(
   defineProps<{
@@ -35,22 +36,37 @@ const props = withDefaults(
     /** Pages shown on each side of the current one in the inner run. */
     siblings?: number
     disabled?: boolean
+    labels?: Partial<Record<"nav" | "previous" | "next", string>>
   }>(),
   { page: 1, pageSize: 10, siblings: 1 },
 )
 
+const text = useLabels(
+  "pagination",
+  { nav: "Pagination", previous: "Previous page", next: "Next page" },
+  () => props.labels,
+)
+
 const emit = defineEmits<{
   (e: "update:page", value: number): void
   (e: "change", value: number): void
 }>()
 
 const count = computed(() => {
-  if (props.pageCount != null) return Math.max(1, props.pageCount)
-  if (props.total != null) return Math.max(1, Math.ceil(props.total / props.pageSize))
-  return 1
+  // Guarded so a zero page size or a total still loading never yields an
+  // "Infinity" or "NaN" page.
+  const n =
+    props.pageCount != null
+      ? props.pageCount
+      : props.total != null && props.pageSize > 0
+        ? Math.ceil(props.total / props.pageSize)
+        : 1
+  return Number.isFinite(n) ? Math.max(1, Math.floor(n)) : 1
 })
 
-const current = computed(() => Math.min(Math.max(1, props.page), count.value))
+const current = computed(() =>
+  Number.isFinite(props.page) ? Math.min(Math.max(1, Math.floor(props.page)), count.value) : 1,
+)
 
 // A fixed run of page slots. Each slot is either a real page or a gap ("…").
 // The number of slots is constant for a given `count`, so the row width is
@@ -122,12 +138,12 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
 <template>
   <nav
     :class="rootClass"
-    v-bind="rest" aria-label="Pagination">
+    v-bind="rest" :aria-label="text.nav">
     <button
       type="button"
       :class="[navBase, navArrow]"
       :disabled="disabled || current === 1"
-      aria-label="Previous page"
+      :aria-label="text.previous"
       @click="go(current - 1)"
     >
       <LpIcon name="lucide:chevron-left" :size="16" />
@@ -171,7 +187,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       type="button"
       :class="[navBase, navArrow]"
       :disabled="disabled || current === count"
-      aria-label="Next page"
+      :aria-label="text.next"
       @click="go(current + 1)"
     >
       <LpIcon name="lucide:chevron-right" :size="16" />

package/src/components/LpPasswordInput.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 // Password field = LpInput + a show/hide toggle in its trailing slot.
 // No duplicated field styling — the shell lives in LpInput.
 import { ref } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import LpIcon from "./LpIcon.vue"
 import LpInput from "./LpInput.vue"
 
@@ -23,6 +24,7 @@ defineProps<{
 }>()
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
+const text = useLabels("passwordInput", { show: "Show password", hide: "Hide password" })
 const visible = ref(false)
 const inner = ref<InstanceType<typeof LpInput> | null>(null)
 defineExpose({
@@ -35,6 +37,7 @@ defineExpose({
 <template>
   <LpInput
     ref="inner"
+    v-bind="$attrs"
     :model-value="modelValue"
     :type="visible ? 'text' : 'password'"
     :placeholder="placeholder"
@@ -51,7 +54,7 @@ defineExpose({
       <button
         type="button"
         class="group rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:text-ink"
-        :aria-label="visible ? 'Hide password' : 'Show password'"
+        :aria-label="visible ? text.hide : text.show"
         @click="visible = !visible"
       >
         <LpIcon

package/src/components/LpPhoneInput.vue

@@ -27,9 +27,11 @@ import {
   ComboboxTrigger,
   ComboboxViewport,
 } from "reka-ui"
-import { computed, onMounted, ref } from "vue"
+import { computed, onMounted, ref, useAttrs } from "vue"
+import { useFieldControl } from "../composables/useField"
 import { useInputFilter } from "../composables/useInputFilter"
-import { type Country, flagEmoji, loadCountries, matchCountryByValue } from "./countries"
+import { useLabels } from "../composables/useLpConfig"
+import { type Country, filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./countries"
 import { OPTION_ITEM, POPOVER_PANEL } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
@@ -74,7 +76,9 @@ const emit = defineEmits<{
 // Phone keys only: digits, "+", spaces and the usual separators. Free typing of
 // "+code" stays possible; letters and junk are blocked at the source.
 const PHONE_CHARS = /[\d+()\-\s]/
-const { onBeforeInput, onPaste } = useInputFilter({ restrict: () => PHONE_CHARS })
+const { onBeforeInput, onInput: filterInput, onCompositionEnd, onPaste } = useInputFilter({
+  restrict: () => PHONE_CHARS,
+})
 
 // The dial-code table is code-split; it's empty until the lazy chunk resolves.
 // Everything degrades gracefully meanwhile: digits still parse, the flag shows a
@@ -100,13 +104,7 @@ const activeCountry = computed<Country | undefined>(
 const open = ref(false)
 const query = ref("")
 
-const filtered = computed(() => {
-  const q = query.value.trim().toLowerCase()
-  if (!q) return countries.value
-  return countries.value.filter(
-    (c) => c.name.toLowerCase().includes(q) || c.dial.includes(q.replace(/\D/g, "")),
-  )
-})
+const filtered = computed(() => filterCountries(countries.value, query.value))
 
 function parse(value: string): PhoneDetail {
   const country = matchCountryByValue(value, countries.value)
@@ -123,6 +121,7 @@ function setValue(value: string) {
 }
 
 function onInput(e: Event) {
+  filterInput(e)
   setValue((e.target as HTMLInputElement).value)
 }
 
@@ -139,16 +138,22 @@ function chooseCountry(c: Country) {
   query.value = ""
 }
 
-// Load the dial-code table on mount (lazy chunk), then seed the default
-// country's "+code" into an empty field so the user starts with the prefix in
-// place — but never clobber a value the consumer already provided.
 onMounted(async () => {
   allCountries.value = await loadCountries()
-  if (!props.modelValue && fallback.value) {
-    emit("update:modelValue", `+${fallback.value.dial} `)
-  }
 })
 
+// The default country's "+code" is put in place when the user enters an empty
+// field, and taken back out if they leave without typing a number. Seeding it
+// on mount instead made every untouched optional field submit "+380 ", pass
+// `required`, and read as edited.
+const seeded = computed(() => (fallback.value ? `+${fallback.value.dial} ` : ""))
+function onFocus() {
+  if (!props.modelValue && seeded.value) setValue(seeded.value)
+}
+function onBlur() {
+  if (seeded.value && props.modelValue?.trim() === seeded.value.trim()) setValue("")
+}
+
 const sizeClass = {
   sm: "h-(--size-control-sm) text-xs",
   md: "h-(--size-control-md) text-sm",
@@ -157,23 +162,37 @@ const sizeClass = {
 
 // 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,
+  disabled: props.disabled,
+}))
+const text = useLabels("phoneInput", { selectCountry: "Select country" })
 const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
   [
     "flex w-full items-stretch rounded-control border bg-surface-soft text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring",
     sizeClass[props.size],
-    props.invalid
+    field.value.invalid
       ? "border-danger focus-within:border-danger focus-within:ring-danger-soft"
       : "border-line focus-within:border-brand",
-    props.disabled ? "cursor-not-allowed opacity-55" : "",
+    field.value.disabled ? "cursor-not-allowed opacity-55" : "",
   ].join(" "),
 )
+const inputAttrs = computed(() => {
+  const { style: _s, ...others } = rest.value
+  return others
+})
 </script>
 
 <template>
   <div
     data-lp-ring-owner
     :class="rootClass"
-    v-bind="rest"
+    :style="attrs.style as never"
   >
     <!-- 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
@@ -184,15 +203,15 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
       :ignore-filter="true"
       :reset-search-term-on-select="false"
       :reset-search-term-on-blur="false"
-      :disabled="disabled"
+      :disabled="field.disabled"
       class="flex"
     >
       <ComboboxAnchor as-child>
         <ComboboxTrigger
           type="button"
-          :disabled="disabled"
-          class="flex shrink-0 items-center gap-1 rounded-l-control border-r border-line px-2.5 outline-none hover:bg-white/[0.04] data-[state=open]:bg-white/[0.04]"
-          aria-label="Select country"
+          :disabled="field.disabled"
+          class="flex shrink-0 items-center gap-1 rounded-l-control border-r border-line px-2.5 outline-none hover:bg-ink/5 data-[state=open]:bg-ink/5"
+          :aria-label="text.selectCountry"
         >
           <span class="text-base leading-none">{{ activeCountry ? flagEmoji(activeCountry.iso2) : "🌐" }}</span>
           <LpIcon
@@ -247,17 +266,24 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     </ComboboxRoot>
 
     <input
-      :value="modelValue"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :aria-invalid="invalid || undefined"
       type="tel"
       inputmode="tel"
       autocomplete="tel"
+      v-bind="inputAttrs"
+      :id="field.id"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="field.disabled"
+      :required="field.required || undefined"
+      :aria-invalid="field.invalid || undefined"
+      :aria-describedby="field.describedBy"
       class="lp-autofill min-w-0 flex-1 self-stretch bg-transparent px-3 outline-none placeholder:text-muted"
       @beforeinput="onBeforeInput"
       @paste="onPaste"
+      @compositionend="onCompositionEnd"
       @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
     />
   </div>
 </template>

package/src/components/LpPie.vue

@@ -31,6 +31,16 @@ import LpRollingText from "./LpRollingText.vue"
 import LpShift from "./LpShift.vue"
 import LpTooltip from "./LpTooltip.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { useLabels } from "../composables/useLpConfig"
+
+export interface PieText {
+  [key: string]: string
+  empty: string
+  other: string
+  total: string
+  /** "{n} selected"; `{n}` is replaced by the count. */
+  selected: string
+}
 
 /** A slice, as reported by every interaction event. */
 export interface SliceEvent {
@@ -107,21 +117,26 @@ const props = withDefaults(
      */
     menuItems?: (slice: SliceEvent, selection: SliceEvent[]) => ContextMenuItemDef[]
     emptyLabel?: string
+    /** Accessible name for the chart. Defaults to a generated summary. */
+    ariaLabel?: string
+    /** Render the slices as a visually hidden table for screen readers. */
+    dataTable?: boolean
+    /** Text overrides (`labels` is taken by the callout switch). */
+    text?: Partial<PieText>
   }>(),
   {
     type: "donut",
     size: 180,
     innerRatio: 0.62,
     maxSlices: 6,
-    otherLabel: "Other",
     showPercent: true,
     showTotal: true,
     labelWidth: 140,
     padAngle: 1.5,
     cornerRadius: 4,
     hoverOffset: 8,
-    emptyLabel: "No data",
     animate: true,
+    dataTable: false,
     duration: 900,
   },
 )
@@ -134,11 +149,17 @@ const emit = defineEmits<{
   (e: "sliceContextMenu", payload: SliceEvent): void
 }>()
 
+const strings = useLabels<PieText>(
+  "pie",
+  { empty: "No data", other: "Other", total: "total", selected: "{n} selected" },
+  () => props.text,
+)
+
 const resolved = computed(() =>
   resolveSlices(
     props.slices,
     props.maxSlices || undefined,
-    props.otherLabel,
+    props.otherLabel ?? strings.value.other,
     !props.sortBySize,
   ),
 )
@@ -336,6 +357,23 @@ const dragging = ref(false)
 
 const isSelected = (i: number) => selected.value.has(i)
 
+/*
+ * Indices only mean something against the slices they were taken from. When
+ * the data changes shape, a selection or hover pointing past the end would read
+ * a slice that no longer exists, so anything out of range is dropped.
+ */
+watch(
+  () => arcs.value.length,
+  (n) => {
+    if (active.value >= n) active.value = -1
+    if (anchor.value >= n) anchor.value = -1
+    if ([...selected.value].some((i) => i >= n)) {
+      selected.value = new Set([...selected.value].filter((i) => i < n))
+      emitSelection()
+    }
+  },
+)
+
 const payloadFor = (i: number) => {
   const a = arcs.value[i]
   return { index: i, label: a.label, value: a.value, isOther: a.isOther }
@@ -354,7 +392,9 @@ const rangeTo = (i: number) => {
   return next
 }
 
-const onSlicePointerDown = (i: number, e: PointerEvent) => {
+type Modifiers = Pick<MouseEvent, "button" | "shiftKey" | "ctrlKey" | "metaKey">
+
+const onSlicePointerDown = (i: number, e: Modifiers, drag = true) => {
   // Right-click opens a menu; it must not disturb a selection the menu acts on.
   if (e.button === 2) return
 
@@ -372,12 +412,18 @@ const onSlicePointerDown = (i: number, e: PointerEvent) => {
     const only = selected.value.size === 1 && selected.value.has(i)
     selected.value = only ? new Set() : new Set([i])
     anchor.value = only ? -1 : i
-    if (!only) beginDrag()
+    if (!only && drag) beginDrag()
   }
   emitSelection()
   emit("sliceClick", payloadFor(i))
 }
 
+/* Enter and Space on a legend entry arrive as a click with no pointer behind
+   it (detail 0); pointer clicks were already handled on pointerdown. */
+const onLegendClick = (i: number, e: MouseEvent) => {
+  if (e.detail === 0) onSlicePointerDown(i, e, false)
+}
+
 /** Drag across slices to gather them — same gesture as a rubber-band in a list. */
 const onSlicePointerEnter = (i: number) => {
   clearTimeout(leaveTimer)
@@ -516,8 +562,10 @@ const onSliceContextMenu = (i: number) => {
 
 /** The slice the centre reads out: the hovered one, else a lone selection. */
 const focused = computed(() => {
-  if (active.value >= 0) return active.value
-  return selected.value.size === 1 ? [...selected.value][0] : -1
+  const n = arcs.value.length
+  if (active.value >= 0 && active.value < n) return active.value
+  const only = selected.value.size === 1 ? [...selected.value][0] : -1
+  return only < n ? only : -1
 })
 
 /** Unselected slices only recede once something is actually selected. */
@@ -526,11 +574,14 @@ const dimmed = (i: number) => selected.value.size > 0 && !selected.value.has(i)
 const total = computed(() => resolved.value.total)
 
 const selectedArcs = computed(() =>
-  [...selected.value].sort((x, y) => x - y).map((i) => arcs.value[i]),
+  [...selected.value]
+    .sort((x, y) => x - y)
+    .filter((i) => i < arcs.value.length)
+    .map((i) => arcs.value[i]),
 )
 
 /** The slice under the pointer; null over the gaps, which disables the tip. */
-const hovered = computed(() => (active.value >= 0 ? arcs.value[active.value] : null))
+const hovered = computed(() => arcs.value[active.value] ?? null)
 
 /* Sticky copy for the tooltip's own contents: `hovered` drops to null the
    instant the pointer leaves a slice, and reading it directly would blank the
@@ -550,10 +601,22 @@ const centreValue = computed(() => {
 
 const centreLabel = computed(() => {
   if (focused.value >= 0) return arcs.value[focused.value].label
-  if (selected.value.size > 1) return `${selected.value.size} selected`
-  return "total"
+  if (selected.value.size > 1)
+    return strings.value.selected.replace("{n}", String(selected.value.size))
+  return strings.value.total
 })
 
+const summary = computed(
+  () =>
+    props.ariaLabel ??
+    [
+      props.title,
+      ...arcs.value.map((a) => `${a.label}: ${fmt(a.value)} (${pct(a.fraction)})`),
+    ]
+      .filter(Boolean)
+      .join(", "),
+)
+
 // The pie sets its own gap between chart and legend, which a narrow card has to close up.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "flex flex-col gap-3",
@@ -575,7 +638,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       :style="{ width: `${size}px`, height: `${size}px` }"
     >
       <LpIcon name="lucide:chart-pie" :size="18" />
-      <span class="text-xs">{{ emptyLabel }}</span>
+      <span class="text-xs">{{ emptyLabel ?? strings.empty }}</span>
     </div>
 
     <!-- items-start, not items-center: an unfolded legend can be taller than
@@ -644,6 +707,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
               :width="canvasWidth"
               :height="canvasHeight"
               class="touch-none select-none"
+              role="img"
+              :aria-label="summary"
               @pointerleave="leaveChart"
               @pointerup="endDrag"
               @click.self="clearSelection"
@@ -672,7 +737,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
               <g :clip-path="animate ? `url(#${sweepId}-sweep)` : undefined">
                 <path
                   v-for="(a, i) in arcs"
-                  :key="a.label"
+                  :key="`${i}-${a.label}`"
                   :d="a.d"
                   :fill="a.color"
                   class="pointer-events-none transition-[transform,opacity] duration-medium ease-[var(--ease-emphasized)] motion-reduce:transition-none"
@@ -684,7 +749,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
               <!-- Invisible, unmoving, and on top: the actual hit area. -->
               <path
                 v-for="(a, i) in arcs"
-                :key="`hit-${a.label}`"
+                :key="`hit-${i}-${a.label}`"
                 :d="a.d"
                 fill="transparent"
                 class="cursor-pointer"
@@ -765,7 +830,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         <div v-if="legendShown" class="flex min-w-0 flex-col gap-1.5" @pointerup="endDrag">
           <button
             v-for="(a, i) in arcs"
-            :key="a.label"
+            :key="`${i}-${a.label}`"
             type="button"
             class="group flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs outline-none transition-[opacity,background-color] duration-fast focus-visible:ring-2 focus-visible:ring-ring"
             :class="[dimmed(i) ? 'opacity-45' : '', isSelected(i) ? 'bg-surface-soft' : '']"
@@ -773,6 +838,9 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
             @pointerenter="onSlicePointerEnter(i)"
             @pointerleave="onSlicePointerLeave(i)"
             @pointerdown="onSlicePointerDown(i, $event)"
+            @click="onLegendClick(i, $event)"
+            @focus="active = i"
+            @blur="active === i && (active = -1)"
             @contextmenu="onSliceContextMenu(i)"
           >
             <span
@@ -789,5 +857,16 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         </div>
       </div>
     </LpContextMenu>
+
+    <table v-if="dataTable && hasData" class="sr-only">
+      <caption v-if="title">{{ title }}</caption>
+      <tbody>
+        <tr v-for="(a, i) in arcs" :key="`${i}-${a.label}`">
+          <th scope="row">{{ a.label }}</th>
+          <td>{{ fmt(a.value) }}</td>
+          <td>{{ pct(a.fraction) }}</td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>

package/src/components/LpPopover.vue

@@ -14,6 +14,8 @@ 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. */
+    ariaLabel?: string
   }>(),
   { side: "bottom", align: "center", sideOffset: 6 },
 )
@@ -33,6 +35,7 @@ const open = defineModel<boolean>("open")
         :side="side"
         :align="align"
         :side-offset="sideOffset"
+        :aria-label="ariaLabel"
         :class="[POPOVER_PANEL, 'z-(--z-popover) w-64 rounded-card p-3 text-sm text-ink outline-none', panelClass]"
       >
         <slot />

package/src/components/LpProgress.vue

@@ -166,9 +166,11 @@ watch(
   () => runSweep(props.value, props.duration),
 )
 
-const pct = computed(() =>
-  Math.max(0, Math.min(100, (shown.value / props.max) * 100)),
-)
+// 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
+})
 
 /*
  * The tone actually painted. `auto` reads the fill and crosses two thresholds;

package/src/components/LpRadioGroup.vue

@@ -7,6 +7,7 @@ export default { inheritAttrs: false }
 
 <script setup lang="ts">
 import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui"
+import { useFieldControl } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 export interface RadioOption {
@@ -17,9 +18,11 @@ export interface RadioOption {
 // `options` renders simple {value,label} rows. For rich items (icons, badges,
 // multi-line) pass <LpRadio> children in the default slot instead — they share
 // the same RadioGroupRoot, so selection still flows through v-model.
-defineProps<{ modelValue?: string; options?: RadioOption[]; disabled?: boolean }>()
+const props = defineProps<{ modelValue?: string; options?: RadioOption[]; disabled?: boolean }>()
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
+const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
+
 // 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",
@@ -29,7 +32,11 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
 <template>
   <RadioGroupRoot
     :model-value="modelValue"
-    :disabled="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"
     @update:model-value="(v) => $emit('update:modelValue', v as string)"