@leavepulse/ui 0.69.0 → 0.70.0

package/src/components/LpBreadcrumbs.vue

@@ -6,8 +6,10 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
-import { computed, type Component } from "vue"
+import { computed, ref, watch, type Component } from "vue"
 import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
+import LpShift from "./LpShift.vue"
 import { useLabels, useLinkComponent } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { resolveLink } from "./link"
@@ -51,6 +53,43 @@ const crumbs = computed(() =>
   })),
 )
 
+/*
+ * A crumb on its way out is lifted out of the row where it stands. Left in
+ * the flow it would hold the row at its old width until it had faded, and the
+ * trail would shrink only afterwards, in a second step; out of the flow the
+ * row starts easing to its new width (LpShift) at once and clips the leaver
+ * as it fades. Pinned at its own offset because an absolute flex item
+ * otherwise jumps to the start of the row.
+ *
+ * The offsets are read before the update rather than as each crumb leaves: a
+ * trail cut short by two crumbs lifts them one after the other, and the
+ * second, measured after the first had left the flow, slid into its slot.
+ * Lifting synchronously, during the patch, also keeps LpShift's first
+ * measurement on the row as it was.
+ */
+const list = ref<{ $el: HTMLElement } | null>(null)
+const spots = new WeakMap<Element, [number, number]>()
+
+// `crumbs` rather than `items`: a trail pushed to in place is the same array.
+watch(
+  crumbs,
+  () => {
+    for (const crumb of Array.from(list.value?.$el.children ?? [])) {
+      if (crumb instanceof HTMLElement) spots.set(crumb, [crumb.offsetLeft, crumb.offsetTop])
+    }
+  },
+  { flush: "pre" },
+)
+
+function liftLeaving(el: Element) {
+  const crumb = el as HTMLElement
+  const [left, top] = spots.get(crumb) ?? [crumb.offsetLeft, crumb.offsetTop]
+  crumb.style.left = `${left}px`
+  crumb.style.top = `${top}px`
+  crumb.style.position = "absolute"
+  crumb.style.pointerEvents = "none"
+}
+
 // The trail sets its own gap, which a dense header bar needs to reduce.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "flex min-w-0 items-center gap-1.5 text-sm",
@@ -60,42 +99,69 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
 <template>
   <!-- One line however long the labels: the earlier crumbs keep their size
        and the current one gives way with an ellipsis. Wrapping, a long name
-       pushed the trail onto three lines over whatever bar held it. -->
-  <nav :aria-label="text.nav" class="min-w-0" v-bind="rest">
-    <ol :class="rootClass">
-      <li
-        v-for="({ item, last, link }, i) in crumbs"
-        :key="i"
-        class="inline-flex min-w-0 items-center gap-1.5"
-        :class="last ? 'shrink' : 'shrink-0'"
+       pushed the trail onto three lines over whatever bar held it.
+
+       A trail that changes depth reads as motion rather than a redraw: crumbs
+       fade and slide in or out with their separator, the row eases to its new
+       width (LpShift) so whatever sits beside or centres it glides, and a
+       crumb whose label changes in place rolls to the new one.
+
+       The nav is a flex row so the LpShift box is sized to the trail rather
+       than to the bar, and is held to the bar by shrinking (`min-w-0`), not
+       by a `max-width`: LpShift measures with any max-* lifted, so a clamped
+       trail never matched its settled size and re-tweened on every render.
+
+       Keyed by depth: the crumb at depth 2 renamed is the same crumb with a
+       new name, not a new crumb. Crumbs therefore only ever join or leave at
+       the end, and there is no move class: a FLIP offset measured against
+       the row's new width fought LpShift holding it at the old one, and the
+       trail lurched sideways for a frame before gliding back. -->
+  <nav :aria-label="text.nav" class="flex min-w-0" v-bind="rest">
+    <LpShift axis="width" class="min-w-0">
+      <TransitionGroup
+        ref="list"
+        tag="ol"
+        :class="[rootClass, 'relative']"
+        enter-active-class="transition-[opacity,translate] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+        enter-from-class="-translate-x-1 opacity-0"
+        leave-active-class="transition-[opacity,translate] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+        leave-to-class="-translate-x-1 opacity-0"
+        @before-leave="liftLeaving"
       >
-        <LpIcon
-          v-if="i > 0"
-          name="lucide:chevron-right"
-          :size="14"
-          class="shrink-0 text-muted"
-          aria-hidden="true"
-        />
-        <component
-          :is="link.is"
-          v-if="link"
-          v-bind="link.props"
-          class="inline-flex min-w-0 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" />
-          <span class="truncate">{{ item.label }}</span>
-        </component>
-        <span
-          v-else
+        <li
+          v-for="({ item, last, link }, i) in crumbs"
+          :key="i"
           class="inline-flex min-w-0 items-center gap-1.5"
-          :class="last ? 'text-ink' : 'text-muted'"
-          :aria-current="last ? 'page' : undefined"
+          :class="last ? 'shrink' : 'shrink-0'"
         >
-          <LpIcon v-if="item.icon" :name="item.icon" :size="14" />
-          <span class="truncate">{{ item.label }}</span>
-        </span>
-      </li>
-    </ol>
+          <LpIcon
+            v-if="i > 0"
+            name="lucide:chevron-right"
+            :size="14"
+            class="shrink-0 text-muted"
+            aria-hidden="true"
+          />
+          <component
+            :is="link.is"
+            v-if="link"
+            v-bind="link.props"
+            class="inline-flex min-w-0 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" />
+            <LpRollingText :value="item.label" align="start" class="min-w-0" />
+          </component>
+          <span
+            v-else
+            class="inline-flex min-w-0 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" />
+            <LpRollingText :value="item.label" align="start" class="min-w-0" />
+          </span>
+        </li>
+      </TransitionGroup>
+    </LpShift>
   </nav>
 </template>

package/src/components/LpButton.vue

@@ -13,7 +13,7 @@ import { appleModifierLabel, parseCombo, useAppleKeyboard, useHotkeys } from "..
 import { useLabels, useLinkComponent } from "../composables/useLpConfig"
 import { useToast } from "../composables/useToast"
 import { useMergedAttrs } from "../composables/useMergedClass"
-import LpIcon from "./LpIcon.vue"
+import LpLoader from "./LpLoader.vue"
 import { resolveLink, type LinkTarget } from "./link"
 
 const button = tv({
@@ -175,7 +175,17 @@ let viaKey = false
 // that changes ("Save" → "Saved").
 const spoken = ref("")
 function readSpoken() {
-  spoken.value = String(attrs["aria-label"] ?? rootEl()?.textContent?.trim() ?? "")
+  const el = rootEl()
+  spoken.value = String(attrs["aria-label"] ?? (el ? labelText(el).trim() : ""))
+}
+
+// The button's words without any loader in it (its own busy overlay, or one an
+// app put in the slot): a loader carries a screen-reader "Loading…" that would
+// otherwise end up in the key reference as part of the button's name.
+function labelText(node: Node): string {
+  if (node instanceof Element && node.getAttribute("role") === "status") return ""
+  if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? ""
+  return Array.from(node.childNodes, labelText).join("")
 }
 onMounted(readSpoken)
 onUpdated(readSpoken)
@@ -297,7 +307,9 @@ const { class: classes, attrs: rest } = useMergedAttrs(() =>
       :class="spinnerTone"
       aria-hidden="true"
     >
-      <LpIcon name="lucide:loader-circle" class="size-[1.15em] animate-spin motion-reduce:animate-none" />
+      <!-- Shown at once: the faded label already acknowledged the click, so a
+           delay would only leave the button blank. -->
+      <LpLoader size="inline" tone="current" :delay="0" class="text-[1.15em]" />
     </span>
   </component>
 </template>

package/src/components/LpCard.vue

@@ -12,6 +12,7 @@ import type { ContextMenuItemDef } from "./LpContextMenu.vue"
 import { MenuWhen } from "./menuWhen"
 import LpSkeleton from "./LpSkeleton.vue"
 import LpSwap from "./LpSwap.vue"
+import { useSpotlight } from "../composables/useSpotlight"
 
 const card = tv({
   // break-words: a card is where text with no spaces in it ends up (a
@@ -104,6 +105,18 @@ const props = withDefaults(
     accent?: string
     /** Width of the `accent` stripe. */
     accentWidth?: string
+    /**
+     * A soft glow follows the mouse inside the card. For a grid of cards the
+     * user scans with the pointer (a launcher's library, a gallery of builds):
+     * the lit one is the one about to be clicked. Same effect as LpSpotlight.
+     */
+    spotlight?: boolean
+    /**
+     * A gradient runs round the edge — for the one card that must be noticed
+     * first ("new", "recommended"). Same effect as LpGlowBorder; static where
+     * the browser cannot animate it, still under reduced motion.
+     */
+    glow?: boolean
   }>(),
   { variant: "raised", padded: true, interactive: false, as: "div", loading: false },
 )
@@ -112,15 +125,25 @@ const props = withDefaults(
 // consumer's `class` next to ours and leave the winner to stylesheet order —
 // `class="p-1"` lost to the `p-5` of `padded`. useMergedAttrs merges it in and
 // hands back the remaining attrs, so the class never arrives a second time.
+// The effect classes are plain CSS (tokens/effects.css) painted on pseudo
+// elements, so the card's children stay exactly what the app put there.
 const { class: classes, attrs: rest } = useMergedAttrs(() =>
-  card({
-    variant: props.variant,
-    padded: props.padded,
-    interactive: props.interactive,
-    accent: Boolean(props.accent),
-  }),
+  [
+    card({
+      variant: props.variant,
+      padded: props.padded,
+      interactive: props.interactive,
+      accent: Boolean(props.accent),
+    }),
+    props.spotlight && "lp-spotlight",
+    props.glow && "lp-glow-border",
+  ]
+    .filter(Boolean)
+    .join(" "),
 )
 
+const { el: spotlightEl } = useSpotlight({ disabled: () => !props.spotlight })
+
 // Remembers that this card has been through a loading state, so the swap
 // wrapper stays once content arrives instead of being torn down (which would
 // remount the content right after it faded in).
@@ -150,7 +173,7 @@ const accentStyle = computed(() =>
   <!-- The menu wraps the card only when it has items, so a directive the app
        puts on the card (`v-hint`) reaches its element: see menuWhen.ts. -->
   <MenuWhen :items="menuItems" :title="menuTitle" :subtitle="menuSubtitle">
-    <component :is="as" :class="classes" :style="accentStyle" :aria-busy="loading || undefined" v-bind="rest">
+    <component :is="as" ref="spotlightEl" :class="classes" :style="accentStyle" :aria-busy="loading || undefined" v-bind="rest">
       <!-- The swap only once loading has been asked for: a card that never
            loads keeps its slot as a direct child, so layouts that style the
            card's children (grids, `space-y-*`) are left exactly as they were. -->