@leavepulse/ui 0.43.4 → 0.45.0

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
@@ -634,16 +697,21 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
               </span>
             </LpShift>
           </template>
+            <!-- The canvas keeps its natural size where there is room and scales
+                 down as a whole where there is not (a phone, a narrow column):
+                 the callout labels widen the box well past the circle, and at a
+                 fixed width they ran off the screen. -->
             <div
-              class="relative shrink-0"
-              :style="{ width: `${canvasWidth}px`, height: `${canvasHeight}px` }"
+              class="relative max-w-full shrink-0 max-sm:mx-auto"
+              :style="{ width: `${canvasWidth}px`, aspectRatio: `${canvasWidth} / ${canvasHeight}` }"
             >
             <!-- Clicking the empty middle (or the gaps) clears, so a selection can
                  be dropped without hunting for somewhere outside the chart. -->
             <svg
-              :width="canvasWidth"
-              :height="canvasHeight"
-              class="touch-none select-none"
+              :viewBox="`0 0 ${canvasWidth} ${canvasHeight}`"
+              class="block size-full touch-none select-none"
+              role="img"
+              :aria-label="summary"
               @pointerleave="leaveChart"
               @pointerup="endDrag"
               @click.self="clearSelection"
@@ -672,7 +740,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 +752,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 +833,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 +841,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 +860,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 },
 )
@@ -30,9 +32,11 @@ const open = defineModel<boolean>("open")
     </PopoverTrigger>
     <PopoverPortal>
       <PopoverContent
+        :collision-padding="8"
         :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)"