@leavepulse/ui 0.22.21 → 0.23.0

package/src/components/LpFormField.vue

@@ -2,9 +2,15 @@
 /*
  * Form-control wrapper: label + the control (default slot) + hint/error.
  * Error takes priority over hint. Uses reka Label for proper association.
+ *
+ * The message line eases its height (LpShift): validation messages arrive
+ * and clear as the user types, and each one appearing under the control shoved
+ * every field below it down a line. The control itself is left outside the
+ * eased box, so the thing being typed into never moves.
  */
 import { Label } from "reka-ui"
 import { useId } from "vue"
+import LpShift from "./LpShift.vue"
 
 defineProps<{
   label?: string
@@ -17,6 +23,7 @@ const id = useId()
 </script>
 
 <template>
+  <!-- `gap` covers label→control only; the message carries its own spacing. -->
   <div class="flex flex-col gap-1.5">
     <Label v-if="label" :for="id" class="text-sm font-medium text-ink">
       {{ label }}
@@ -25,7 +32,17 @@ const id = useId()
 
     <slot :id="id" />
 
-    <p v-if="error" class="text-xs text-danger">{{ error }}</p>
-    <p v-else-if="hint" class="text-xs text-muted">{{ hint }}</p>
+    <!-- Swapping hint→error changes the text but not the height, so the eased
+         box only ever moves when a message appears or clears.
+
+         The gap that used to separate the message from the control is carried
+         INSIDE the eased box as padding, not by the parent's `gap`: a flex gap
+         applies to the wrapper whether or not it holds a message, which would
+         leave every message-less field a row taller than before — and would be
+         a step the easing could not cover, since it exists even at height 0. -->
+    <LpShift axis="height">
+      <p v-if="error" class="pt-1.5 text-xs text-danger">{{ error }}</p>
+      <p v-else-if="hint" class="pt-1.5 text-xs text-muted">{{ hint }}</p>
+    </LpShift>
   </div>
 </template>

package/src/components/LpInput.vue

@@ -54,6 +54,12 @@ const props = withDefaults(
     hint?: string
     error?: string
     icon?: string
+    /**
+     * Marks the label with the required indicator. The attribute still reaches
+     * the underlying <input> for native validation; this only makes the field
+     * read as required.
+     */
+    required?: boolean
     /**
      * RegExp/string the whole value must match to be valid. Validation only —
      * never blocks typing; a non-matching non-empty value shows the invalid
@@ -118,6 +124,7 @@ defineExpose({
     :label="hasField ? label : undefined"
     :hint="hasField ? hint : undefined"
     :error="hasField ? error : undefined"
+    :required="hasField ? required : undefined"
     :class="hasField ? rootClass : undefined"
     :style="hasField ? rootStyle : undefined"
   >
@@ -136,6 +143,7 @@ defineExpose({
         :value="modelValue"
         :placeholder="placeholder"
         :disabled="disabled"
+        :required="required || undefined"
         :aria-invalid="isInvalidState || undefined"
         :class="[
           'lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted',

package/src/components/LpLink.vue

@@ -1,11 +1,27 @@
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, type Component } from "vue"
 
 const props = withDefaults(
   defineProps<{
     href?: string
     external?: boolean
+    /** Shorthand for `tone="muted"`. */
     muted?: boolean
+    /**
+     * "brand" — the accent link colour (default).
+     * "ink"   — inherits body text colour; for links that sit inside prose or
+     *   chrome where an accent would shout (breadcrumbs, footers, nav).
+     * "muted" / "soft" — progressively quieter, both resolving to ink on hover.
+     */
+    tone?: "brand" | "ink" | "muted" | "soft"
+    /**
+     * Root element/component. Defaults to a native <a>. Pass a router link
+     * component (e.g. NuxtLink or RouterLink) to keep client-side navigation;
+     * the kit stays DOM-agnostic, the consumer supplies the link component.
+     * Router links take their destination through their own prop (`to`), which
+     * falls through as a plain attribute.
+     */
+    as?: string | Component
     /**
      * "default" — plain hover underline.
      * "reveal"  — an underline bar that grows in from the left on hover
@@ -14,15 +30,30 @@ const props = withDefaults(
      */
     variant?: "default" | "reveal"
   }>(),
-  { variant: "default" },
+  { variant: "default", as: "a" },
 )
 
+// A router link component owns its destination through its own prop (`to`),
+// so `href` is only bound when this really renders an anchor. `target`/`rel`
+// stay in play either way — router links honour them for external targets.
+const isAnchor = computed(() => props.as === "a")
+
 const rel = computed(() => (props.external ? "noopener noreferrer" : undefined))
 const target = computed(() => (props.external ? "_blank" : undefined))
 
-const colorClass = computed(() =>
-  props.muted ? "text-muted hover:text-ink" : "text-brand hover:text-brand-hover",
-)
+const colorClass = computed(() => {
+  const tone = props.tone ?? (props.muted ? "muted" : "brand")
+  switch (tone) {
+    case "ink":
+      return "text-ink"
+    case "muted":
+      return "text-muted-strong hover:text-ink"
+    case "soft":
+      return "text-muted hover:text-ink"
+    default:
+      return "text-brand hover:text-brand-hover"
+  }
+})
 
 // The reveal bar: an ::after pseudo-element pinned to the baseline, full-width
 // but scaled to 0 on the x-axis from the left, growing to 1 on hover/focus. The
@@ -33,8 +64,9 @@ const revealClass =
 </script>
 
 <template>
-  <a
-    :href="href"
+  <component
+    :is="as"
+    :href="isAnchor ? href : undefined"
     :target="target"
     :rel="rel"
     class="inline-flex items-center gap-1 underline-offset-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
@@ -44,5 +76,5 @@ const revealClass =
     ]"
   >
     <slot />
-  </a>
+  </component>
 </template>

package/src/components/LpModal.vue

@@ -9,7 +9,8 @@ import {
   DialogTitle,
 } from "reka-ui"
 import type { ComponentPublicInstance } from "vue"
-import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
+import { computed, ref, useSlots, watch } from "vue"
+import { useShift } from "../composables/useShift"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
@@ -86,20 +87,14 @@ const bodyPad = computed(() =>
 
 /*
  * Height is content-derived, so a body that arrives late — a placeholder swapped
- * for the loaded thing — resizes the panel in a single frame, right on top of
- * the open animation. CSS alone can't smooth it: `height: auto` isn't
- * interpolable, and the keyword-interpolation escape hatches
- * (`interpolate-size`, `calc-size()`) are Chromium-only, so they would do
- * nothing in the WebKitGTK launcher. Measuring and pinning a pixel height is
- * what works on every engine.
+ * for the loaded thing — would resize the panel in a single frame, right on top
+ * of the open animation. The easing is set up further down.
  *
  * The pin is always the panel's own natural height, so `max-h` still clips and
  * the body keeps `flex-1 min-h-0` — an over-tall panel hands its overflow to the
  * scroll area exactly as before. A panel whose size never moves is pinned once
  * and never transitions.
  */
-// reka renders a real element but exposes it as a component instance, so the
-// panel is reached through $el.
 const panelRef = ref<ComponentPublicInstance | null>(null)
 
 /**
@@ -156,130 +151,27 @@ function onOpenAutoFocus(event: Event) {
     return
   }
 }
-const tweening = ref(false)
-const resizing = ref(false)
-
-/** Kept in step with the `duration-fast` utility on the panel. */
-const TWEEN_MS = 160
-
-let ro: ResizeObserver | undefined
-let mo: MutationObserver | undefined
-let raf = 0
-let settleTimer: ReturnType<typeof setTimeout> | undefined
-/** Where the panel last settled, so a retune has a height to ease FROM. */
-let lastHeight = 0
-/** True while a tween owns the height, so observers don't cancel it midway. */
-let inFlight = false
-
-// The height is driven imperatively rather than through a style binding. By the
-// time replacement content is in the DOM the panel has already reflowed to its
-// new size, so a bound value would only ever be written once, with no earlier
-// height for the transition to start from. Writing the OLD height, forcing a
-// reflow, then writing the new one gives the transition both ends.
-const retune = (el: HTMLElement) => {
-  // One swap wakes both observers — the mutation as content lands, the resize as
-  // it reflows — and the second call would clear the pin the first just wrote.
-  if (inFlight) return
-  // Remembered, not measured: by the time either observer fires the panel has
-  // already reflowed, so the element can only report where it is going.
-  const from = lastHeight
-  el.style.height = ""
-  // `max-h` comes from a class, so the panel already reports the clipped figure
-  // once the cap bites. Pinning that would leave a short panel sitting over
-  // content it can no longer grow to fit, so the natural height is measured with
-  // the cap lifted and the clamp is left to CSS afterwards.
-  el.style.maxHeight = "none"
-  const to = el.offsetHeight
-  el.style.maxHeight = ""
-  lastHeight = to
-  // Nothing moved, so there is nothing to ease — and leaving the height unset
-  // keeps the panel free to size itself.
-  if (to === 0 || from === 0 || to === from) return
-  el.style.height = `${from}px`
-  void el.offsetHeight
-  el.style.height = `${to}px`
-
-  inFlight = true
-  // While the panel is still catching up, the body is shorter than the content
-  // it already holds, so the scroll area would flash a bar for an overflow that
-  // resolves itself the moment the transition lands.
-  resizing.value = true
-  clearTimeout(settleTimer)
-  settleTimer = setTimeout(() => {
-    inFlight = false
-    resizing.value = false
-    // Released once the panel has arrived. A height left pinned in pixels stops
-    // being a starting point and becomes a cap: content that grows afterwards
-    // is clipped, and `max-h` can no longer size the panel itself.
-    el.style.height = ""
-    // Re-read rather than trusting `to`: `max-h` may have clamped the panel
-    // short of it, and the next tween has to start from where it really sits.
-    lastHeight = el.offsetHeight
-  }, TWEEN_MS)
-}
+// The panel's height eases between content-derived sizes — see
+// `useShift`, which owns the measure/pin/tween mechanism and is shared
+// with LpShift. Gated on `open`, because the panel is portalled and remounts
+// on every open: a remount must measure afresh rather than ease in from the
+// size the previous incarnation happened to hold.
+const {
+  el: sizedEl,
+  tweening,
+  resizing,
+} = useShift({ axis: "height", enabled: () => props.open })
 
-// Keyed off `open` rather than the ref: the panel is portalled and remounts on
-// every open, and the teardown has to run on close, when the ref is already gone.
+// reka renders a real element but exposes it as a component instance, so the
+// sized element is handed over through $el once the panel has mounted.
 watch(
-  () => props.open,
-  (isOpen) => {
-    ro?.disconnect()
-    mo?.disconnect()
-    ro = undefined
-    mo = undefined
-    cancelAnimationFrame(raf)
-    clearTimeout(settleTimer)
-    tweening.value = false
-    resizing.value = false
-
-    lastHeight = 0
-    inFlight = false
-
-    const el = panelRef.value?.$el
-    if (!isOpen || !(el instanceof HTMLElement)) return
-
-    lastHeight = el.offsetHeight
-    el.style.height = `${el.offsetHeight}px`
-    // The opening panel must not animate its height in from the pre-content box,
-    // so the transition only arms once that first pin has painted. The pin is
-    // dropped in the same frame: it exists to give the first `retune` something
-    // to start from, and holding it would cap the panel at its opening size.
-    raf = requestAnimationFrame(() => {
-      tweening.value = true
-      el.style.height = ""
-    })
-
-    // Two triggers, since either can move the height alone: the resize observer
-    // catches a child growing in place (an image decoding, a list filling in),
-    // the mutation observer catches one subtree swapped for another, where every
-    // observed box may keep its size. Children are observed, never the panel —
-    // that would feed the pin straight back in.
-    const watchChildren = () => {
-      if (!ro) return
-      ro.disconnect()
-      for (const child of Array.from(el.children)) ro.observe(child)
-    }
-    if (typeof ResizeObserver !== "undefined") {
-      ro = new ResizeObserver(() => retune(el))
-      watchChildren()
-    }
-    if (typeof MutationObserver !== "undefined") {
-      mo = new MutationObserver(() => {
-        watchChildren()
-        retune(el)
-      })
-      mo.observe(el, { childList: true, subtree: true, characterData: true })
-    }
+  () => (props.open ? panelRef.value : null),
+  (panel) => {
+    const el = panel?.$el
+    sizedEl.value = el instanceof HTMLElement ? el : null
   },
   { flush: "post" },
 )
-
-onBeforeUnmount(() => {
-  ro?.disconnect()
-  mo?.disconnect()
-  cancelAnimationFrame(raf)
-  clearTimeout(settleTimer)
-})
 </script>
 
 <template>

package/src/components/LpNotificationBell.vue

@@ -16,6 +16,7 @@ import LpEmptyState from "./LpEmptyState.vue"
 import LpIcon from "./LpIcon.vue"
 import LpPopover from "./LpPopover.vue"
 import LpScrollArea from "./LpScrollArea.vue"
+import LpShift from "./LpShift.vue"
 
 export interface NotificationItem {
   id: string
@@ -225,52 +226,57 @@ function timeAgo(iso?: string): string {
       </button>
     </header>
 
-    <div v-if="loading" class="space-y-1.5 px-2 pb-2">
-      <div v-for="i in 4" :key="i" class="h-12 animate-pulse rounded-control bg-surface-soft" />
-    </div>
+    <!-- Skeleton → empty → feed are three different heights, so the panel
+         jumped as the list loaded and again whenever it emptied. Easing the
+         swap keeps the popover from snapping under the bell. -->
+    <LpShift axis="height">
+      <div v-if="loading" class="space-y-1.5 px-2 pb-2">
+        <div v-for="i in 4" :key="i" class="h-12 animate-pulse rounded-control bg-surface-soft" />
+      </div>
 
-    <LpEmptyState
-      v-else-if="!items.length"
-      icon="lucide:bell-off"
-      :title="l.empty"
-      class="px-3 py-10"
-    />
+      <LpEmptyState
+        v-else-if="!items.length"
+        icon="lucide:bell-off"
+        :title="l.empty"
+        class="px-3 py-10"
+      />
 
-    <!-- The feed sits in a thin gutter; rows are self-contained tiles (rounded,
-         hover-lit) instead of full-width strips with hard dividers — lighter and
-         easier to scan. Each row carries its own right-click action menu. -->
-    <LpScrollArea v-else class="max-h-96" content-class="flex flex-col gap-0.5 px-2 pb-2">
-      <LpContextMenu v-for="item in items" :key="item.id" :items="rowMenu(item)">
-        <component
-          :is="item.link ? 'a' : 'button'"
-          :href="item.link || undefined"
-          :type="item.link ? undefined : 'button'"
-          class="group/notif flex w-full items-start gap-2.5 rounded-control px-2 py-2 text-left outline-none transition-colors hover:bg-white/[0.05] focus-visible:bg-white/[0.05]"
-          :class="item.read ? '' : 'bg-brand-soft/35'"
-          @click="onSelect(item)"
-        >
-          <span
-            class="grid size-7 shrink-0 place-items-center rounded-control"
-            :class="item.read ? 'bg-surface-soft text-muted' : 'bg-brand-soft text-brand'"
+      <!-- The feed sits in a thin gutter; rows are self-contained tiles (rounded,
+           hover-lit) instead of full-width strips with hard dividers — lighter and
+           easier to scan. Each row carries its own right-click action menu. -->
+      <LpScrollArea v-else class="max-h-96" content-class="flex flex-col gap-0.5 px-2 pb-2">
+        <LpContextMenu v-for="item in items" :key="item.id" :items="rowMenu(item)">
+          <component
+            :is="item.link ? 'a' : 'button'"
+            :href="item.link || undefined"
+            :type="item.link ? undefined : 'button'"
+            class="group/notif flex w-full items-start gap-2.5 rounded-control px-2 py-2 text-left outline-none transition-colors hover:bg-white/[0.05] focus-visible:bg-white/[0.05]"
+            :class="item.read ? '' : 'bg-brand-soft/35'"
+            @click="onSelect(item)"
           >
-            <LpIcon :name="item.icon || 'lucide:bell'" :size="15" />
-          </span>
-          <span class="min-w-0 flex-1">
-            <span class="flex items-center gap-1.5">
-              <span class="truncate text-sm font-medium" :class="item.read ? 'text-muted-strong' : 'text-ink'">
-                {{ item.title }}
-              </span>
-              <span v-if="!item.read" class="size-1.5 shrink-0 rounded-full bg-brand" />
+            <span
+              class="grid size-7 shrink-0 place-items-center rounded-control"
+              :class="item.read ? 'bg-surface-soft text-muted' : 'bg-brand-soft text-brand'"
+            >
+              <LpIcon :name="item.icon || 'lucide:bell'" :size="15" />
             </span>
-            <span v-if="item.body" class="mt-0.5 line-clamp-2 block text-xs text-muted">
-              {{ item.body }}
-            </span>
-            <span v-if="item.createdAt" class="mt-0.5 block text-[11px] text-muted/70">
-              {{ timeAgo(item.createdAt) }}
+            <span class="min-w-0 flex-1">
+              <span class="flex items-center gap-1.5">
+                <span class="truncate text-sm font-medium" :class="item.read ? 'text-muted-strong' : 'text-ink'">
+                  {{ item.title }}
+                </span>
+                <span v-if="!item.read" class="size-1.5 shrink-0 rounded-full bg-brand" />
+              </span>
+              <span v-if="item.body" class="mt-0.5 line-clamp-2 block text-xs text-muted">
+                {{ item.body }}
+              </span>
+              <span v-if="item.createdAt" class="mt-0.5 block text-[11px] text-muted/70">
+                {{ timeAgo(item.createdAt) }}
+              </span>
             </span>
-          </span>
-        </component>
-      </LpContextMenu>
-    </LpScrollArea>
+          </component>
+        </LpContextMenu>
+      </LpScrollArea>
+    </LpShift>
   </LpPopover>
 </template>

package/src/components/LpPasswordInput.vue

@@ -9,7 +9,18 @@ import { ref } from "vue"
 import LpIcon from "./LpIcon.vue"
 import LpInput from "./LpInput.vue"
 
-defineProps<{ modelValue?: string; placeholder?: string; invalid?: boolean; disabled?: boolean }>()
+defineProps<{
+  modelValue?: string
+  placeholder?: string
+  invalid?: boolean
+  disabled?: boolean
+  // Field wrapping mirrors LpInput: passing any of these wraps the control in
+  // LpFormField, so a password field labels itself like every other field.
+  label?: string
+  hint?: string
+  error?: string
+  required?: boolean
+}>()
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
 const visible = ref(false)
@@ -29,6 +40,10 @@ defineExpose({
     :placeholder="placeholder"
     :invalid="invalid"
     :disabled="disabled"
+    :label="label"
+    :hint="hint"
+    :error="error"
+    :required="required"
     @update:model-value="(v) => $emit('update:modelValue', v)"
   >
     <template v-if="$slots.leading" #leading><slot name="leading" /></template>

package/src/components/LpShift.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/*
+ * Wraps content whose size is derived from what's inside it, so that everything
+ * around it shifts smoothly instead of jumping.
+ *
+ * Reach for it wherever a change of content changes a box's measurements: a
+ * toolbar that gains or loses a button, a label swapped by a translation, a
+ * placeholder replaced by the loaded thing, a validation message appearing
+ * under a field. Those all resize in a single frame otherwise, and everything
+ * they push jolts with them.
+ *
+ *   <LpShift axis="width">
+ *     <slot name="actions" />
+ *   </LpShift>
+ *
+ * Note it is the NEIGHBOURS that motivate this, not the box: a fixed-height
+ * header never resizes, yet its controls jump whenever one of them changes
+ * width. Easing that one box is what makes the row glide.
+ *
+ * Content is measured through a wrapper that is never itself pinned, so the
+ * slot keeps whatever layout it brings (flex row, grid, plain text). `axis`
+ * picks which dimension is content-derived: pin only the one that actually
+ * moves, so the other stays free to respond to the surrounding layout.
+ *
+ * The mechanism — measure the natural size, pin it in pixels, tween — lives in
+ * `useShift`, and LpModal drives its panel with the same composable.
+ */
+import { computed } from "vue"
+import { useShift, type ShiftAxis } from "../composables/useShift"
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Which dimension eases. `"width"` for a row that gains/loses controls,
+     * `"height"` for a stack whose content grows, `"both"` when either can.
+     */
+    axis?: ShiftAxis
+    /** Tween length in ms. Defaults to the kit's `--duration-fast`. */
+    duration?: number
+    /**
+     * Turn the easing off entirely — the wrapper stays, the box resizes
+     * instantly. For a box that is being driven by something else (a drag, a
+     * canvas), where a tween would fight the thing already animating it.
+     */
+    disabled?: boolean
+  }>(),
+  { axis: "height", disabled: false },
+)
+
+const { el, tweening, resizing } = useShift({
+  axis: () => props.axis,
+  duration: () => props.duration,
+  enabled: () => !props.disabled,
+})
+
+// Only the pinned axis is transitioned: naming the other one would animate a
+// dimension the layout is still free to set, so a flex row settling into place
+// would ease sideways for no reason.
+//
+// Spelled out as whole literals rather than built from `axis`. The consuming
+// app's Tailwind scans this file as TEXT, so a class assembled at runtime is a
+// class it never sees — the utility simply wouldn't be emitted.
+const TRANSITION_CLASS: Record<ShiftAxis, string> = {
+  height: "transition-[height]",
+  width: "transition-[width]",
+  both: "transition-[height,width]",
+}
+const transitionClass = computed(() => TRANSITION_CLASS[props.axis])
+
+defineExpose({ resizing })
+</script>
+
+<template>
+  <!-- `overflow-hidden` only while a tween owns the size: the box is briefly
+       smaller than the content it already holds, and without the clip that
+       content spills past the easing edge. Dropped once settled, so nothing
+       that legitimately overflows — a dropdown, a focus ring — is clipped at
+       rest. -->
+  <div
+    ref="el"
+    :class="[
+      tweening && !disabled
+        ? `${transitionClass} duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none`
+        : '',
+      resizing ? 'overflow-hidden' : '',
+    ]"
+  >
+    <slot :resizing="resizing" />
+  </div>
+</template>

package/src/components/LpTextarea.vue

@@ -11,6 +11,11 @@ const props = defineProps<{
   label?: string
   hint?: string
   error?: string
+  /**
+   * Marks the label with the required indicator; the attribute still reaches
+   * the <textarea> for native validation.
+   */
+  required?: boolean
 }>()
 
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
@@ -24,6 +29,7 @@ const hasField = computed(() => !!props.label || !!props.hint || !!props.error)
     :label="hasField ? label : undefined"
     :hint="hasField ? hint : undefined"
     :error="hasField ? error : undefined"
+    :required="hasField ? required : undefined"
     :class="hasField ? undefined : 'contents'"
   >
     <textarea
@@ -31,6 +37,7 @@ const hasField = computed(() => !!props.label || !!props.hint || !!props.error)
       :placeholder="placeholder"
       :rows="rows ?? 4"
       :disabled="disabled"
+      :required="required || undefined"
       class="w-full resize-y rounded-control border bg-surface-soft px-3 py-2 text-sm text-ink outline-none transition-colors duration-[var(--duration-fast)] placeholder:text-muted focus:border-brand focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-55"
       :class="(invalid || error) ? 'border-danger focus:border-danger focus:ring-danger-soft' : 'border-line'"
       @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"