@leavepulse/ui 0.43.4 → 0.45.0

package/src/components/LpSidebar.vue

@@ -14,6 +14,7 @@
  * the static <nav> it always has — existing call sites are unaffected.
  */
 import { computed, ref, useId } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import LpDrawer from "./LpDrawer.vue"
 import LpInput from "./LpInput.vue"
 import LpSidebarNav from "./LpSidebarNav.vue"
@@ -45,8 +46,10 @@ const props = withDefaults(
      * query is active — a hidden match is the same as no match.
      */
     searchable?: boolean
-    /** Placeholder for that field. */
+    /** Placeholder for that field (defaults to the `search` label). */
     searchPlaceholder?: string
+    /** Text overrides: `nav` names the landmark, `search` the filter field. */
+    labels?: Partial<{ nav: string; search: string }>
     /** The query, when the app wants to own it (v-model:search). */
     search?: string
     /** Show a skeleton placeholder instead of the items. */
@@ -113,7 +116,6 @@ const props = withDefaults(
     autoCollapseAfter?: number
   }>(),
   {
-    searchPlaceholder: "Search",
     skeletonRows: 6,
     skeletonHeader: true,
     responsive: false,
@@ -132,6 +134,9 @@ const emit = defineEmits<{
   (e: "update:search", value: string): void
 }>()
 
+const text = useLabels("sidebar", { nav: "Sidebar", search: "Search" }, () => props.labels)
+const placeholder = computed(() => props.searchPlaceholder ?? text.value.search)
+
 // Normalise both inputs to a single section list.
 const allGroups = computed<SidebarSection[]>(() =>
   props.sections ?? (props.items ? [{ items: props.items }] : []),
@@ -271,7 +276,7 @@ defineOptions({ inheritAttrs: false })
     class="h-full flex-col gap-1 p-3"
     :class="[railClass, chromeClass, width ? '' : 'w-60']"
     :style="width ? { width } : undefined"
-    aria-label="Sidebar"
+    :aria-label="text.nav"
     v-bind="$attrs"
   >
     <!-- Rail: edge-to-edge (negative margins cancel the p-3) and h-16 to match
@@ -298,8 +303,8 @@ defineOptions({ inheritAttrs: false })
       size="sm"
       icon="lucide:search"
       class="mb-2 shrink-0"
-      :placeholder="searchPlaceholder"
-      :aria-label="searchPlaceholder"
+      :placeholder="placeholder"
+      :aria-label="placeholder"
     />
     <LpSidebarNav
       :groups="groups"
@@ -339,7 +344,7 @@ defineOptions({ inheritAttrs: false })
     :edge-breakpoint="mobileBreakpoint"
     @update:open="(v) => emit('update:open', v)"
   >
-    <div class="flex h-full flex-col gap-1">
+    <nav class="flex h-full flex-col gap-1" :aria-label="text.nav">
       <div
         v-if="$slots.header"
         class="shrink-0"
@@ -357,8 +362,8 @@ defineOptions({ inheritAttrs: false })
         size="sm"
         icon="lucide:search"
         class="mb-2 shrink-0"
-        :placeholder="searchPlaceholder"
-        :aria-label="searchPlaceholder"
+        :placeholder="placeholder"
+        :aria-label="placeholder"
       />
       <LpSidebarNav
         :groups="groups"
@@ -383,6 +388,6 @@ defineOptions({ inheritAttrs: false })
       <div v-if="$slots.footer" class="mt-2 shrink-0 border-t border-line pt-3">
         <slot name="footer" />
       </div>
-    </div>
+    </nav>
   </LpDrawer>
 </template>

package/src/components/LpSidebarNav.vue

@@ -21,6 +21,8 @@ import LpContextMenu from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import type { SidebarItem, SidebarSection } from "./sidebar"
+import { resolveLink, type ResolvedLink } from "./link"
+import { useLinkComponent } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
@@ -75,6 +77,18 @@ function isOpen(section: SidebarSection): boolean {
 
 const pillTransition = usePillTransition()
 
+const linkComponent = useLinkComponent()
+
+/*
+ * A disabled item is always a disabled button: an anchor cannot be disabled,
+ * and the old enabled-button fallback for a disabled link stayed focusable.
+ */
+function rowOf(item: SidebarItem): ResolvedLink {
+  const link = item.disabled ? null : resolveLink(linkComponent.value, { to: item.to, href: item.href })
+  if (link) return link
+  return { is: "button", props: { type: "button", disabled: item.disabled || undefined } }
+}
+
 // The nav fills the remaining height with a fixed gap between groups; a short sidebar needs both under the consumer's control.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "flex min-h-0 flex-1 flex-col gap-4",
@@ -118,7 +132,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
            because a thing that reacts to a click must look like one. -->
       <CollapsibleTrigger
         v-if="section.title && section.collapsible"
-        class="group/section mt-2 flex cursor-pointer items-center gap-2 rounded-control px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:bg-white/[0.04] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+        class="group/section mt-2 flex cursor-pointer items-center gap-2 rounded-control px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:bg-ink/[0.04] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
       >
         <LpIcon
           v-if="section.icon"
@@ -165,10 +179,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :items="item.menu ?? []"
       >
         <component
-          :is="item.href && !item.disabled ? 'a' : 'button'"
-          :href="item.href && !item.disabled ? item.href : undefined"
-          :type="item.href ? undefined : 'button'"
-          :disabled="item.href ? undefined : item.disabled"
+          :is="rowOf(item).is"
+          v-bind="rowOf(item).props"
           :aria-current="itemActive(item) ? 'page' : undefined"
           :aria-disabled="item.disabled || undefined"
           class="group/item relative flex items-center gap-3 rounded-control px-3 py-2 text-sm font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"

package/src/components/LpSkeleton.vue

@@ -88,7 +88,10 @@ const isBlock = computed(() => !slots.default)
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .lp-skeleton-item {
+  /* Repeats the descendant form: it outranks a bare class, and grouped items
+     kept pulsing under reduced motion. */
+  .lp-skeleton-item,
+  .lp-skeleton .lp-skeleton-item {
     animation: none;
     opacity: 0.75;
   }

package/src/components/LpSlider.vue

@@ -9,6 +9,7 @@ export default { inheritAttrs: false }
 // Single-value slider (reka Slider). reka models value as an array; we expose
 // a plain number for the common single-thumb case. Themed via tokens.
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui"
+import { useFieldControl } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
@@ -38,6 +39,8 @@ function onCommit(v: number[] | undefined) {
   if (v && v.length) emit("change", v[0])
 }
 
+const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
+
 // A slider is full-width by default; putting one in a toolbar means constraining it, and a fixed h-5 has to yield to a denser row.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55",
@@ -50,7 +53,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     :min="min"
     :max="max"
     :step="step"
-    :disabled="disabled"
+    :disabled="field.disabled"
     :class="rootClass"
     v-bind="rest"
     @update:model-value="onUpdate"
@@ -60,7 +63,10 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       <SliderRange class="absolute h-full rounded-pill bg-brand" />
     </SliderTrack>
     <SliderThumb
+      :id="field.id"
       :aria-label="ariaLabel"
+      :aria-labelledby="ariaLabel ? undefined : field.labelId"
+      :aria-describedby="field.describedBy"
       class="block size-4 rounded-pill border-2 border-brand bg-surface shadow outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
     />
   </SliderRoot>

package/src/components/LpSparkline.vue

@@ -16,6 +16,7 @@
  */
 import { computed } from "vue"
 import { useReveal } from "../composables/useReveal"
+import { useLabels } from "../composables/useLpConfig"
 import { areaPath, extent, linePath, normalise, type Box } from "./chart"
 
 const props = withDefaults(
@@ -56,6 +57,7 @@ const props = withDefaults(
      * watched being drawn — not a figure mostly spent easing out.
      */
     duration?: number
+    labels?: Partial<Record<"empty" | "up" | "down" | "flat" | "latest", string>>
   }>(),
   { width: 84, height: 24, tone: "brand", smooth: 0.9, animate: true, duration: 900 },
 )
@@ -131,14 +133,20 @@ const lastPoint = computed(() => {
 const hasData = computed(() => series.value[0].values.some((v) => v != null))
 
 /* A bare <svg> is invisible to a screen reader; say the shape out loud. */
+const text = useLabels(
+  "sparkline",
+  { empty: "No data", up: "trending up", down: "trending down", flat: "flat", latest: "latest" },
+  () => props.labels,
+)
+
 const label = computed(() => {
   if (props.ariaLabel) return props.ariaLabel
   const values = series.value[0].values.filter((v): v is number => v != null)
-  if (!values.length) return "No data"
+  if (!values.length) return text.value.empty
   const first = values[0]
   const last = values[values.length - 1]
-  const dir = last > first ? "trending up" : last < first ? "trending down" : "flat"
-  return `${dir}, latest ${last}`
+  const dir = last > first ? text.value.up : last < first ? text.value.down : text.value.flat
+  return `${dir}, ${text.value.latest} ${last}`
 })
 
 /*

package/src/components/LpStepper.vue

@@ -8,6 +8,7 @@ export default { inheritAttrs: false }
 <script setup lang="ts">
 import { computed } from "vue"
 import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 export interface Step {
@@ -65,19 +66,28 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     >
       <div class="flex items-center gap-2">
         <span
-          class="flex size-7 shrink-0 items-center justify-center rounded-pill border text-xs font-semibold transition-colors"
+          class="flex size-7 shrink-0 items-center justify-center rounded-pill border text-xs font-semibold transition-colors duration-[var(--duration-medium)]"
           :class="isCompleted(step, i)
             ? 'border-transparent bg-brand text-ink-inverse'
             : isCurrent(i)
               ? 'border-brand text-brand'
               : 'border-line text-muted'"
         >
-          <LpIcon v-if="isCompleted(step, i)" name="lucide:check" :size="14" />
-          <LpIcon v-else-if="step.icon" :name="step.icon" :size="14" />
-          <template v-else>{{ i + 1 }}</template>
+          <!-- The number turns into the tick rather than swapping for it. -->
+          <LpRollingText
+            mode="flip"
+            :duration="260"
+            :value="isCompleted(step, i) ? 'done' : step.icon ? 'icon' : String(i + 1)"
+          >
+            <template #default="{ value }">
+              <LpIcon v-if="value === 'done'" name="lucide:check" :size="14" />
+              <LpIcon v-else-if="value === 'icon' && step.icon" :name="step.icon" :size="14" />
+              <template v-else>{{ value }}</template>
+            </template>
+          </LpRollingText>
         </span>
         <span
-          class="text-sm"
+          class="text-sm transition-colors duration-[var(--duration-medium)]"
           :class="isCompleted(step, i) || isCurrent(i) ? 'text-ink' : 'text-muted'"
         >
           {{ step.label }}
@@ -91,11 +101,14 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           }}</span>
         </span>
       </div>
-      <span
-        v-if="i < steps.length - 1"
-        class="h-px flex-1"
-        :class="isCompleted(step, i) ? 'bg-brand' : 'bg-line'"
-      />
+      <!-- The connector fills from the step it leaves towards the next one,
+           so finishing a step reads as moving forward. -->
+      <span v-if="i < steps.length - 1" class="relative h-px flex-1 overflow-hidden bg-line">
+        <span
+          class="absolute inset-0 origin-left bg-brand transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none rtl:origin-right"
+          :class="isCompleted(step, i) ? 'scale-x-100' : 'scale-x-0'"
+        />
+      </span>
     </li>
   </ol>
 </template>

package/src/components/LpSwitch.vue

@@ -6,8 +6,9 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
-import { computed, useSlots } from "vue"
+import { computed, useId, useSlots } from "vue"
 import { SwitchRoot, SwitchThumb } from "reka-ui"
+import { useFieldControl } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
@@ -34,7 +35,7 @@ const labelled = computed(() => Boolean(props.label || props.description || slot
 const TRACK =
   "group inline-flex h-5 w-9 shrink-0 items-center rounded-pill border border-line bg-surface-soft px-0.5 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"
 const THUMB =
-  "h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:w-5 group-data-[state=checked]:translate-x-4 group-data-[state=checked]:bg-ink-inverse group-data-[state=checked]:group-active:-translate-x-1 motion-reduce:group-active:w-3.5"
+  "h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:w-5 group-data-[state=checked]:translate-x-4 group-data-[state=checked]:bg-ink-inverse group-data-[state=checked]:group-active:translate-x-2.5 motion-reduce:group-active:w-3.5"
 
 // Bare, the switch is the root, so a consumer asking for a bigger track must not
 // have to depend on stylesheet order to get it. With text, the row is the root
@@ -46,31 +47,53 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() => {
     : "inline-flex cursor-pointer items-center gap-2 text-sm text-ink"
 })
 
+// Whatever is not class (name, aria-*, @focus…) belongs to the switch itself,
+// labelled or not: on the label row it would land on the <label>.
+const field = useFieldControl(() => ({
+  wrapped: false,
+  id: typeof rest.value.id === "string" ? rest.value.id : undefined,
+  disabled: props.disabled,
+}))
+const descriptionId = `${useId()}-description`
+const describedBy = computed(
+  () => [props.description && labelled.value ? descriptionId : "", field.value.describedBy ?? ""].filter(Boolean).join(" ") || undefined,
+)
+
 function onUpdate(value: boolean) {
   emit("update:modelValue", value)
 }
 </script>
 
 <template>
-  <label v-if="labelled" :class="[rootClass, disabled && 'cursor-not-allowed']" v-bind="rest">
+  <label v-if="labelled" :class="[rootClass, field.disabled && 'cursor-not-allowed']">
     <span v-if="labelPosition === 'start'" class="flex min-w-0 flex-col">
       <slot>{{ label }}</slot>
-      <span v-if="description" class="text-xs text-muted">{{ description }}</span>
+      <span v-if="description" :id="descriptionId" class="text-xs text-muted">{{ description }}</span>
     </span>
-    <SwitchRoot :model-value="modelValue" :disabled="disabled" :class="TRACK" @update:model-value="onUpdate">
+    <SwitchRoot
+      v-bind="rest"
+      :id="field.id"
+      :model-value="modelValue"
+      :disabled="field.disabled"
+      :aria-describedby="describedBy"
+      :class="TRACK"
+      @update:model-value="onUpdate"
+    >
       <SwitchThumb :class="THUMB" />
     </SwitchRoot>
     <span v-if="labelPosition === 'end'" class="flex min-w-0 flex-col">
       <slot>{{ label }}</slot>
-      <span v-if="description" class="text-xs text-muted">{{ description }}</span>
+      <span v-if="description" :id="descriptionId" class="text-xs text-muted">{{ description }}</span>
     </span>
   </label>
   <SwitchRoot
     v-else
+    v-bind="rest"
+    :id="field.id"
     :model-value="modelValue"
-    :disabled="disabled"
+    :disabled="field.disabled"
+    :aria-describedby="describedBy"
     :class="rootClass"
-    v-bind="rest"
     @update:model-value="onUpdate"
   >
     <SwitchThumb :class="THUMB" />