@leavepulse/ui 0.43.4 → 0.45.0

package/src/components/LpAddressInput.vue

@@ -19,6 +19,7 @@ export default { inheritAttrs: false }
  * of every form that never shows a map.
  */
 import { computed, defineAsyncComponent, onMounted, ref, watch } from "vue"
+import { useAsyncTask } from "../composables/useAsyncTask"
 import {
   type AddressField,
   type AddressLabels,
@@ -113,11 +114,32 @@ const geocoder = computed(() => props.provider ?? fallbackProvider)
 
 const value = computed<AddressValue>(() => props.modelValue ?? emptyAddress())
 
+// Patches build on the last value emitted, not on the prop: the prop only
+// catches up on the parent's next render, and two patches in one tick (the
+// text a suggestion fills in, then the parts it resolved) would otherwise each
+// start from the stale value and the second would undo the first.
+let latest: AddressValue | undefined
+watch(
+  () => props.modelValue,
+  () => (latest = undefined),
+)
 function patch(changes: Partial<AddressValue>) {
-  emit("update:modelValue", { ...value.value, ...changes })
+  latest = { ...(latest ?? value.value), ...changes }
+  emit("update:modelValue", latest)
+}
+
+// A part typed by hand describes a different place than the point a suggestion
+// or the map resolved, so the coordinates go with it: kept, they would pin the
+// stored address to somewhere else.
+function edit(changes: Partial<AddressValue>) {
+  patch({ ...changes, lat: undefined, lon: undefined })
 }
 
-const countries = ref<Country[]>([])
+const allCountries = ref<Country[]>([])
+const countries = computed(() => {
+  const only = props.only?.map((code) => code.toUpperCase())
+  return only?.length ? allCountries.value.filter((c) => only.includes(c.iso2)) : allCountries.value
+})
 const countryOptions = computed(() =>
   countries.value.map((country) => ({
     value: country.iso2,
@@ -126,9 +148,7 @@ const countryOptions = computed(() =>
 )
 
 onMounted(async () => {
-  const list = await loadCountries()
-  const only = props.only?.map((code) => code.toUpperCase())
-  countries.value = only?.length ? list.filter((c) => only.includes(c.iso2)) : list
+  allCountries.value = await loadCountries()
 })
 
 /*
@@ -138,37 +158,31 @@ onMounted(async () => {
  */
 function useSuggestions(field: AddressField) {
   const options = ref<AddressSuggestion[]>([])
-  const loading = ref(false)
-  let timer: ReturnType<typeof setTimeout> | undefined
-  let controller: AbortController | undefined
+  const task = useAsyncTask<AddressSuggestion[]>()
 
   function query(term: string) {
-    if (timer) clearTimeout(timer)
-    controller?.abort()
     if (term.trim().length < props.minChars) {
+      task.cancel()
       options.value = []
-      loading.value = false
       return
     }
-    loading.value = true
-    timer = setTimeout(async () => {
-      controller = new AbortController()
-      try {
-        options.value = await geocoder.value.search(term.trim(), field, {
+    task.run(
+      (signal) =>
+        geocoder.value.search(term.trim(), field, {
           country: value.value.country || undefined,
           language: props.language,
-          signal: controller.signal,
-        })
-      } catch {
-        // Abort or network failure: leave the field usable as free text.
-        options.value = []
-      } finally {
-        loading.value = false
-      }
-    }, props.debounce)
+          signal,
+        }),
+      {
+        delay: props.debounce,
+        apply: (found) => (options.value = found),
+        // Network failure: leave the field usable as free text.
+        fail: () => (options.value = []),
+      },
+    )
   }
 
-  return { options, loading, query }
+  return { options, loading: task.pending, query }
 }
 
 const lineSuggestions = useSuggestions("line")
@@ -230,19 +244,21 @@ watch(mapOpen, (open) => {
   resolved.value = undefined
 })
 
-async function onPick(next: LatLon) {
+// Pins dropped in quick succession each start a lookup; only the latest one's
+// answer may describe the pin on screen.
+const reverse = useAsyncTask<AddressSuggestion | undefined>()
+watch(reverse.pending, (busy) => (resolving.value = busy))
+
+function onPick(next: LatLon) {
   point.value = next
-  resolving.value = true
   resolved.value = undefined
-  try {
-    resolved.value = await geocoder.value.reverse(next.lat, next.lon, {
-      language: props.language,
-    })
-  } catch {
-    resolved.value = undefined
-  } finally {
-    resolving.value = false
-  }
+  reverse.run(
+    () => geocoder.value.reverse(next.lat, next.lon, { language: props.language }),
+    {
+      apply: (found) => (resolved.value = found),
+      fail: () => (resolved.value = undefined),
+    },
+  )
 }
 
 /** Confirm the pin: fill in whatever came back and always keep the point. */
@@ -288,7 +304,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           :empty-text="text.noSuggestions"
           :loading-text="text.searching"
           icon="lucide:map-pin"
-          @update:model-value="(next: string) => { patch({ line: next }); lineSuggestions.query(next) }"
+          @update:model-value="(next: string) => { edit({ line: next }); lineSuggestions.query(next) }"
           @select="onLineSelect"
         />
         <LpButton
@@ -330,7 +346,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           :placeholder="text.cityPlaceholder"
           :empty-text="text.noSuggestions"
           :loading-text="text.searching"
-          @update:model-value="(next: string) => { patch({ city: next }); citySuggestions.query(next) }"
+          @update:model-value="(next: string) => { edit({ city: next }); citySuggestions.query(next) }"
           @select="onCitySelect"
         />
       </LpFormField>
@@ -342,7 +358,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :disabled="disabled"
         :size="size"
         autocomplete="postal-code"
-        @update:model-value="(next: string) => patch({ postalCode: next })"
+        @update:model-value="(next: string) => edit({ postalCode: next })"
       />
     </div>
 
@@ -355,7 +371,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :disabled="disabled"
         :size="size"
         searchable
-        @update:model-value="(next) => patch({ country: String(next ?? '') })"
+        @update:model-value="(next) => edit({ country: String(next ?? '') })"
       />
     </LpFormField>
 

package/src/components/LpAlert.vue

@@ -37,18 +37,31 @@ const props = withDefaults(
     variant?: AlertVariants["variant"]
     title?: string
     icon?: string
+    /**
+     * Announce the alert to screen readers when it appears. "assertive"
+     * (role=alert) interrupts and is for something that needs action now,
+     * "polite" (role=status) waits its turn, false reads it in place. By
+     * default only `danger` interrupts: an info or success banner that is part
+     * of the page from the start should not be shouted on load.
+     */
+    live?: "assertive" | "polite" | false
   }>(),
-  { variant: "info" },
+  { variant: "info", live: undefined },
 )
 
+const role = computed(() => {
+  const live = props.live ?? (props.variant === "danger" ? "assertive" : false)
+  return live === "assertive" ? "alert" : live === "polite" ? "status" : undefined
+})
+
 const classes = computed(() => alert({ variant: props.variant }))
 const resolvedIcon = computed(() => props.icon ?? ICONS[props.variant ?? "info"])
 const iconTone = computed(() => ICON_TONE[props.variant ?? "info"])
 </script>
 
 <template>
-  <div :class="classes" role="alert">
-    <LpIcon :name="resolvedIcon" :size="18" :class="['mt-0.5 shrink-0', iconTone]" />
+  <div :class="classes" :role="role">
+    <LpIcon :name="resolvedIcon" :size="18" :class="['mt-0.5 shrink-0', iconTone]" aria-hidden="true" />
     <div class="min-w-0">
       <p v-if="title" class="font-semibold text-ink">{{ title }}</p>
       <div :class="['text-muted-strong', title ? 'mt-0.5' : '']">

package/src/components/LpAppShell.vue

@@ -31,7 +31,8 @@ export default { inheritAttrs: false }
  * Overlays that aren't part of the frame (command palette, toaster) live in the
  * host next to <LpAppShell>.
  */
-import { computed, watch } from "vue"
+import { computed, ref, useId, watch } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
@@ -81,6 +82,8 @@ const props = withDefaults(
     fullBleed?: boolean
     /** Loading skeleton for the nav. */
     loading?: boolean
+    /** Text overrides: the burger's name and the skip link. */
+    labels?: Partial<{ openMenu: string; skipToContent: string }>
   }>(),
   {
     mobileBreakpoint: "lg",
@@ -140,10 +143,30 @@ const drawerOpen = computed({
   get: () => props.open ?? false,
   set: (v) => emit("update:open", v),
 })
+const text = useLabels(
+  "appShell",
+  { openMenu: "Open menu", skipToContent: "Skip to content" },
+  () => props.labels,
+)
+
+/*
+ * The page scrolls inside the shell's own region, not the window, so the
+ * router's scroll behaviour never reaches it: without this a route change from
+ * a scrolled page landed mid-way down the next one.
+ */
+const scrollArea = ref<{ viewportEl: HTMLElement | null } | null>(null)
+const mainId = `lp-main-${useId()}`
+
+// Focus instead of following the hash, which a router would treat as a navigation.
+function skipToMain() {
+  document.getElementById(mainId)?.focus()
+}
+
 watch(
   () => props.path,
   () => {
     if (drawerOpen.value) emit("update:open", false)
+    scrollArea.value?.viewportEl?.scrollTo({ top: 0, left: 0, behavior: "instant" })
   },
 )
 
@@ -176,6 +199,13 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
   <div
     :class="rootClass"
     v-bind="rest">
+    <a
+      :href="`#${mainId}`"
+      @click.prevent="skipToMain"
+      class="sr-only z-(--z-toast) rounded-control bg-surface-raised px-3 py-2 text-sm font-medium text-ink focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:outline-none focus:ring-2 focus:ring-ring"
+    >
+      {{ text.skipToContent }}
+    </a>
     <LpSidebar
       :model-value="modelValue"
       :items="items"
@@ -225,7 +255,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           variant="ghost"
           size="sm"
           square
-          aria-label="Open menu"
+          :aria-label="text.openMenu"
           @click="emit('update:open', true)"
         >
           <LpIcon name="lucide:menu" :size="18" />
@@ -265,16 +295,19 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
 
       <!-- full-bleed: page owns the whole region (canvas/map); otherwise the
            single scroll region with padding. -->
-      <div v-if="fullBleed" class="min-h-0 flex-1 overflow-hidden">
-        <slot />
-      </div>
-      <LpScrollArea
-        v-else
-        class="min-h-0 flex-1"
-        :content-class="`px-4 py-6 md:px-6 ${contentClass}`"
-      >
-        <slot />
-      </LpScrollArea>
+      <main :id="mainId" tabindex="-1" class="flex min-h-0 flex-1 flex-col outline-none">
+        <div v-if="fullBleed" class="min-h-0 flex-1 overflow-hidden">
+          <slot />
+        </div>
+        <LpScrollArea
+          v-else
+          ref="scrollArea"
+          class="min-h-0 flex-1"
+          :content-class="`px-4 py-6 md:px-6 ${contentClass}`"
+        >
+          <slot />
+        </LpScrollArea>
+      </main>
     </div>
 
     <slot name="overlays" />

package/src/components/LpAutocomplete.vue

@@ -1,3 +1,7 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * Free-text autocomplete — a text field that suggests as you type but never
@@ -21,8 +25,10 @@ import {
   ComboboxRoot,
   ComboboxViewport,
 } from "reka-ui"
-import { computed, ref, watch } from "vue"
+import { computed, ref, useAttrs, watch } from "vue"
+import { useFieldControl } from "../composables/useField"
 import { useInputFilter } from "../composables/useInputFilter"
+import { useLabels } from "../composables/useLpConfig"
 import { CLOSE_ICON, OPTION_ITEM, POPOVER_PANEL } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 
@@ -78,7 +84,7 @@ const emit = defineEmits<{
   (e: "select", value: string): void
 }>()
 
-const { isInvalid, onBeforeInput, onPaste } = useInputFilter({
+const { isInvalid, onBeforeInput, onInput: filterInput, onCompositionEnd, onPaste } = useInputFilter({
   pattern: () => props.pattern,
   restrict: () => props.restrict,
 })
@@ -88,7 +94,22 @@ const text = computed<string>({
   set: (v) => emit("update:modelValue", v),
 })
 
-const isInvalidState = computed(() => props.invalid || isInvalid(props.modelValue))
+// class/style lay out the whole control; every other attr (name, autocomplete,
+// @blur, @keydown…) belongs to the text <input>.
+const attrs = useAttrs()
+const inputAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs
+  return rest
+})
+
+const field = useFieldControl(() => ({
+  wrapped: false,
+  id: typeof attrs.id === "string" ? attrs.id : undefined,
+  invalid: props.invalid || isInvalid(props.modelValue),
+  disabled: props.disabled,
+}))
+const isInvalidState = computed(() => field.value.invalid)
+const labels = useLabels("autocomplete", { clear: "Clear" })
 
 // Normalise string|option to a stable shape.
 const items = computed<AutocompleteOption[]>(() =>
@@ -135,6 +156,13 @@ watch(canOpen, (can) => {
   if (focused.value && can) open.value = true
 })
 
+// reka opens the list on every keystroke; below `minChars` (or with nothing to
+// show) that only produced an empty "No suggestions" panel, so opening is
+// refused here. Closing is always allowed.
+function onOpenChange(next: boolean) {
+  open.value = next && canOpen.value
+}
+
 const hasValue = computed(() => (props.modelValue ?? "").length > 0)
 
 const anchorSize = {
@@ -144,6 +172,7 @@ const anchorSize = {
 }
 
 function onInput(event: Event) {
+  filterInput(event)
   typing.value = true
   text.value = (event.target as HTMLInputElement).value
 }
@@ -172,12 +201,14 @@ function clear() {
 
 <template>
   <ComboboxRoot
-    v-model:open="open"
+    :open="open"
     :ignore-filter="true"
     :reset-search-term-on-blur="false"
     :reset-search-term-on-select="false"
-    :disabled="disabled"
-    class="relative"
+    :disabled="field.disabled"
+    :class="['relative', attrs.class]"
+    :style="attrs.style as never"
+    @update:open="onOpenChange"
   >
     <ComboboxAnchor
       data-lp-ring-owner
@@ -198,14 +229,18 @@ function clear() {
         so `text` (and the reactive `open`) track the field exactly.
       -->
       <ComboboxInput
+        v-bind="inputAttrs"
+        :id="field.id"
         :model-value="text"
         :placeholder="placeholder"
-        :disabled="disabled"
+        :disabled="field.disabled"
+        :required="field.required || undefined"
         :aria-invalid="isInvalidState || undefined"
-        auto-focus
+        :aria-describedby="field.describedBy"
         class="lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted"
         @beforeinput="onBeforeInput"
         @paste="onPaste"
+        @compositionend="onCompositionEnd"
         @input="onInput"
         @focus="onFocus"
         @blur="focused = false"
@@ -214,8 +249,9 @@ function clear() {
         v-if="clearable && hasValue"
         type="button"
         class="group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
-        aria-label="Clear"
-        @pointerdown.prevent="clear"
+        :aria-label="labels.clear"
+        @pointerdown.prevent
+        @click="clear"
       >
         <LpIcon
           name="lucide:x"
@@ -227,6 +263,7 @@ function clear() {
 
     <ComboboxPortal>
       <ComboboxContent
+        :collision-padding="8"
         position="popper"
         :side-offset="6"
         :class="[POPOVER_PANEL, 'z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden']"

package/src/components/LpAvatar.vue

@@ -10,6 +10,7 @@ import { AvatarFallback, AvatarImage, AvatarRoot } from "reka-ui"
 import { tv, type VariantProps } from "tailwind-variants"
 import { computed, onMounted, ref } from "vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const avatar = tv({
   base: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-surface-soft font-medium text-muted-strong",
@@ -65,8 +66,21 @@ const sizeStyle = computed(() =>
     : undefined,
 )
 
-const initials = computed(
-  () => props.fallback ?? props.alt?.slice(0, 2).toUpperCase() ?? "?",
+/* "John Doe" → "JD", "Ada" → "AD". Split by code point, so a name starting
+   with an emoji or an astral letter is not cut in half. */
+const initials = computed(() => {
+  if (props.fallback) return props.fallback
+  const words = (props.alt ?? "").trim().split(/\s+/).filter(Boolean)
+  if (!words.length) return "?"
+  const first = Array.from(words[0])
+  const letters =
+    words.length > 1 ? [first[0], Array.from(words[words.length - 1])[0]] : first.slice(0, 2)
+  return letters.join("").toUpperCase()
+})
+
+// A consumer's `size-20` must beat the preset's `size-9`, not race it.
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  avatar({ size: props.pixelSize ? undefined : props.size, shape: props.shape, ring: props.ring }),
 )
 
 // reka's AvatarImage resolves the image load on the client, so SSR renders the
@@ -83,13 +97,13 @@ onMounted(() => {
 
 <template>
   <LpContextMenu v-if="menuItems?.length" :items="menuItems">
-    <AvatarRoot :class="avatar({ size: pixelSize ? undefined : size, shape, ring })" :style="sizeStyle" v-bind="$attrs">
-      <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover" />
+    <AvatarRoot :class="rootClass" :style="sizeStyle" v-bind="rest">
+      <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover animate-[fade-in_var(--duration-medium)_ease] motion-reduce:animate-none" />
       <AvatarFallback>{{ initials }}</AvatarFallback>
     </AvatarRoot>
   </LpContextMenu>
-  <AvatarRoot v-else :class="avatar({ size: pixelSize ? undefined : size, shape, ring })" :style="sizeStyle" v-bind="$attrs">
-    <AvatarImage v-if="src" :src="src" :alt="alt" class="size-full object-cover" />
+  <AvatarRoot v-else :class="rootClass" :style="sizeStyle" v-bind="rest">
+    <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover animate-[fade-in_var(--duration-medium)_ease] motion-reduce:animate-none" />
     <AvatarFallback>{{ initials }}</AvatarFallback>
   </AvatarRoot>
 </template>

package/src/components/LpBreadcrumbs.vue

@@ -6,32 +6,51 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
-import type { Component } from "vue"
+import { computed, type Component } from "vue"
 import LpIcon from "./LpIcon.vue"
+import { useLabels, useLinkComponent } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { resolveLink } from "./link"
 
 export interface Crumb {
   label: string
   href?: string
-  /** Destination for router links; passed straight to the `as` component. */
+  /** Destination for router links; rendered through the link component. */
   to?: string | Record<string, unknown>
   /** Leading icon, for crumbs that carry a glyph (a home root, a section). */
   icon?: string
 }
 
-withDefaults(
-  defineProps<{
-    items: Crumb[]
-    /**
-     * Root element/component for linked crumbs. Defaults to a native <a>;
-     * pass a router link component to keep client-side navigation.
-     */
-    as?: string | Component
-  }>(),
-  { as: "a" },
-)
+const props = defineProps<{
+  items: Crumb[]
+  /**
+   * Component for linked crumbs. By default `to` and internal `href` use the
+   * link component from provideLpConfig and other hrefs a plain <a>.
+   */
+  as?: string | Component
+  labels?: Partial<{ nav: string }>
+}>()
 defineEmits<{ (e: "navigate", item: Crumb, index: number): void }>()
 
+const text = useLabels("breadcrumbs", { nav: "Breadcrumb" }, () => props.labels)
+const linkComponent = useLinkComponent()
+
+function linkOf(item: Crumb) {
+  if (props.as && props.as !== "a") {
+    if (item.to != null) return { is: props.as, props: { to: item.to } }
+    return item.href != null ? { is: "a", props: { href: item.href } } : null
+  }
+  return resolveLink(props.as === "a" ? "a" : linkComponent.value, { to: item.to, href: item.href })
+}
+
+const crumbs = computed(() =>
+  props.items.map((item, i) => ({
+    item,
+    last: i === props.items.length - 1,
+    link: i === props.items.length - 1 ? null : linkOf(item),
+  })),
+)
+
 // The trail sets its own gap, which a dense header bar needs to reduce.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "flex items-center gap-1.5 text-sm",
@@ -39,35 +58,40 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
 </script>
 
 <template>
-  <nav
-    :class="rootClass"
-    v-bind="rest" aria-label="Breadcrumb">
-    <template v-for="(item, i) in items" :key="i">
-      <LpIcon
-        v-if="i > 0"
-        name="lucide:chevron-right"
-        :size="14"
-        class="text-muted"
-      />
-      <component
-        :is="as"
-        v-if="(item.href || item.to) && i < items.length - 1"
-        :href="as === 'a' ? item.href : undefined"
-        :to="as === 'a' ? undefined : item.to"
-        class="inline-flex items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
-        @click="$emit('navigate', item, i)"
-      >
-        <LpIcon v-if="item.icon" :name="item.icon" :size="14" />
-        {{ item.label }}
-      </component>
-      <span
-        v-else
+  <nav :aria-label="text.nav" v-bind="rest">
+    <ol :class="rootClass">
+      <li
+        v-for="({ item, last, link }, i) in crumbs"
+        :key="i"
         class="inline-flex items-center gap-1.5"
-        :class="i === items.length - 1 ? 'text-ink' : 'text-muted'"
       >
-        <LpIcon v-if="item.icon" :name="item.icon" :size="14" />
-        {{ item.label }}
-      </span>
-    </template>
+        <LpIcon
+          v-if="i > 0"
+          name="lucide:chevron-right"
+          :size="14"
+          class="text-muted"
+          aria-hidden="true"
+        />
+        <component
+          :is="link.is"
+          v-if="link"
+          v-bind="link.props"
+          class="inline-flex items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+          @click="$emit('navigate', item, i)"
+        >
+          <LpIcon v-if="item.icon" :name="item.icon" :size="14" />
+          {{ item.label }}
+        </component>
+        <span
+          v-else
+          class="inline-flex items-center gap-1.5"
+          :class="last ? 'text-ink' : 'text-muted'"
+          :aria-current="last ? 'page' : undefined"
+        >
+          <LpIcon v-if="item.icon" :name="item.icon" :size="14" />
+          {{ item.label }}
+        </span>
+      </li>
+    </ol>
   </nav>
 </template>