@leavepulse/ui 0.43.3 → 0.44.0

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"

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">
+    <AvatarRoot :class="rootClass" :style="sizeStyle" v-bind="rest">
       <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover" />
       <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" />
     <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>

package/src/components/LpButton.vue

@@ -1,6 +1,15 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own rather than appended,
+// so `class="h-12"` or `class="px-6"` beats the size's defaults.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 import { tv, type VariantProps } from "tailwind-variants"
 import { computed, type Component } from "vue"
+import { useLinkComponent } from "../composables/useLpConfig"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { resolveLink, type LinkTarget } from "./link"
 
 const button = tv({
   base: [
@@ -16,13 +25,15 @@ const button = tv({
       solid: "bg-brand text-ink-inverse hover:bg-brand-hover",
       action:
         "bg-action text-ink-inverse shadow-[0_14px_28px_color-mix(in_srgb,var(--color-action)_24%,transparent)] hover:bg-action-hover",
-      outline: "border border-line-strong text-ink hover:border-brand hover:bg-white/[0.04]",
+      outline: "border border-line-strong text-ink hover:border-brand hover:bg-ink/[0.04]",
       // raised surface tile with a border — a visible, neutral filled button
       soft: "border border-line bg-surface-raised/80 text-ink hover:border-line-strong hover:bg-surface-soft",
-      ghost: "text-ink hover:bg-white/[0.06]",
-      muted: "text-muted hover:bg-white/[0.04] hover:text-ink",
-      // high-contrast light fill (e.g. a "download" CTA on a dark hero)
-      light: "border border-white/20 bg-white text-ink-inverse hover:bg-white/90",
+      ghost: "text-ink hover:bg-ink/[0.06]",
+      muted: "text-muted hover:bg-ink/[0.04] hover:text-ink",
+      // high-contrast light fill (e.g. a "download" CTA on a dark hero). The
+      // text is a fixed dark tone: `ink-inverse` is light in light themes,
+      // which made this white on white there.
+      light: "border border-black/10 bg-white text-[#0b1210] hover:bg-white/90",
       danger: "bg-danger text-ink-inverse hover:bg-danger-hover",
     },
     size: {
@@ -58,7 +69,7 @@ const button = tv({
       glow: true,
       variant: "light",
       class:
-        "shadow-[0_8px_18px_rgba(255,255,255,0.2)] hover:shadow-[0_12px_24px_rgba(255,255,255,0.3)]",
+        "shadow-[0_8px_18px_color-mix(in_srgb,var(--color-ink)_20%,transparent)] hover:shadow-[0_12px_24px_color-mix(in_srgb,var(--color-ink)_30%,transparent)]",
     },
   ],
   defaultVariants: { variant: "solid", size: "md" },
@@ -74,20 +85,52 @@ const props = withDefaults(
     square?: boolean
     glow?: boolean
     /**
-     * Root element/component. Defaults to a native <button>. Pass a router link
-     * component (e.g. NuxtLink) or "a" to render a link-styled button; the kit
-     * stays DOM-agnostic, the consumer supplies the link component.
+     * Root element/component. Defaults to a native <button>, or a link when
+     * `to`/`href` is set (the link component from provideLpConfig for internal
+     * targets). Pass a component or "a" to override.
      */
     as?: string | Component
+    /** Router destination: renders the configured link component. */
+    to?: LinkTarget
+    /** Link URL: renders an anchor (or the link component for internal paths). */
+    href?: string
     type?: "button" | "submit" | "reset"
     disabled?: boolean
   }>(),
-  { as: "button", type: "button" },
+  { type: "button" },
 )
 
-const isNativeButton = computed(() => props.as === "button")
+const linkComponent = useLinkComponent()
+
+const resolved = computed<{ is: string | Component; props: Record<string, unknown> }>(() => {
+  if (props.as && props.as !== "a") {
+    const target = props.to != null ? { to: props.to } : props.href != null ? { href: props.href } : {}
+    return { is: props.as, props: props.as === "button" ? {} : target }
+  }
+  if (props.as === "a") return { is: "a", props: { href: props.href } }
+  return resolveLink(linkComponent.value, { to: props.to, href: props.href }) ?? { is: "button", props: {} }
+})
+
+const isNativeButton = computed(() => resolved.value.is === "button")
+
+/*
+ * A disabled link has no `disabled` attribute to lean on: it must leave the tab
+ * order and swallow the click. The capture phase runs before a router link's
+ * own handler, which skips navigation once the event is default-prevented.
+ */
+function blockDisabled(event: MouseEvent) {
+  if (!props.disabled || isNativeButton.value) return
+  event.preventDefault()
+  event.stopImmediatePropagation()
+}
+
+const linkProps = computed(() => {
+  if (isNativeButton.value) return {}
+  if (!props.disabled) return resolved.value.props
+  return resolved.value.is === "a" ? {} : resolved.value.props
+})
 
-const classes = computed(() =>
+const { class: classes, attrs: rest } = useMergedAttrs(() =>
   button({
     variant: props.variant,
     size: props.size,
@@ -100,11 +143,14 @@ const classes = computed(() =>
 
 <template>
   <component
-    :is="as"
+    :is="resolved.is"
+    v-bind="{ ...rest, ...linkProps }"
     :type="isNativeButton ? type : undefined"
     :disabled="isNativeButton ? disabled : undefined"
     :aria-disabled="!isNativeButton && disabled ? 'true' : undefined"
+    :tabindex="!isNativeButton && disabled ? -1 : undefined"
     :class="classes"
+    @click.capture="blockDisabled"
   >
     <slot />
   </component>