@leavepulse/ui 0.44.0 → 0.45.0

package/src/components/LpTableFilter.vue

@@ -0,0 +1,175 @@
+<script lang="ts">
+export interface TableFilterOption {
+  value: unknown
+  label: string
+  /** Rows holding the value; omitted when unknown (a server-backed table). */
+  count?: number
+}
+
+export interface TableFilterLabels {
+  search: string
+  all: string
+  none: string
+  invert: string
+  only: string
+  onlyShown: string
+  addShown: string
+  noValues: string
+}
+</script>
+
+<script setup lang="ts">
+/*
+ * The value filter of one LpTable column, opened from the funnel in its
+ * header. Built for columns with many values: a search narrows the LIST
+ * without touching what is ticked, "Only" next to a value shows just that one
+ * in a click, and after a search the matches can be taken as a whole.
+ */
+import { computed, ref } from "vue"
+import LpCheckbox from "./LpCheckbox.vue"
+import LpInput from "./LpInput.vue"
+import LpShift from "./LpShift.vue"
+import { usePaintSelect } from "../composables/usePaintSelect"
+import { hideAllValues, invertHidden, matchesQuery, onlyValues, unhideValues } from "./tableFilter"
+
+const props = defineProps<{
+  options: TableFilterOption[]
+  hidden: ReadonlySet<unknown>
+  labels: TableFilterLabels
+}>()
+
+const emit = defineEmits<{ (e: "update:hidden", value: Set<unknown>): void }>()
+
+/** Past this many values a list is easier searched than scanned. */
+const SEARCH_FROM = 8
+
+const query = ref("")
+const values = computed(() => props.options.map((o) => o.value))
+const shown = computed(() => props.options.filter((o) => matchesQuery(o.label, query.value)))
+
+function set(next: Set<unknown>) {
+  emit("update:hidden", next)
+}
+
+function toggle(value: unknown) {
+  const next = new Set(props.hidden)
+  if (next.has(value)) next.delete(value)
+  else next.add(value)
+  set(next)
+}
+
+const list = ref<HTMLElement | null>(null)
+
+/*
+ * Press a value's tick and sweep down the list to tick or clear the run, the
+ * same way rows of the table are painted. The selection here is the values
+ * shown, so painting writes back the complement as the hidden set.
+ */
+const byKey = computed(() => new Map(props.options.map((o) => [String(o.value), o.value])))
+const paint = usePaintSelect<unknown>({
+  root: list,
+  selection: () => values.value.filter((v) => !props.hidden.has(v)),
+  set: (shownValues) => {
+    const keep = new Set(shownValues)
+    set(new Set(values.value.filter((v) => !keep.has(v))))
+  },
+  resolve: (raw) => (byKey.value.has(raw) ? byKey.value.get(raw) : undefined),
+})
+
+/* Up and down walk the ticks, so a long list is not a long run of Tab. */
+function onListKeydown(event: KeyboardEvent) {
+  if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return
+  const boxes = [...(list.value?.querySelectorAll<HTMLElement>("[role=checkbox]") ?? [])]
+  const at = boxes.indexOf(document.activeElement as HTMLElement)
+  const next = boxes[at + (event.key === "ArrowDown" ? 1 : -1)]
+  if (!next) return
+  event.preventDefault()
+  next.focus()
+}
+
+const action =
+  "rounded-control px-1.5 py-0.5 text-xs font-medium text-muted outline-none transition-colors duration-fast hover:bg-surface-soft hover:text-ink focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <LpInput
+      v-if="options.length >= SEARCH_FROM"
+      v-model="query"
+      size="sm"
+      icon="lucide:search"
+      :placeholder="labels.search"
+      :aria-label="labels.search"
+    />
+
+    <div class="flex flex-wrap items-center gap-1">
+      <template v-if="query">
+        <button
+          type="button"
+          :class="action"
+          :disabled="!shown.length"
+          @click="set(onlyValues(values, shown.map((o) => o.value)))"
+        >
+          {{ labels.onlyShown.replace("{count}", String(shown.length)) }}
+        </button>
+        <button
+          type="button"
+          :class="action"
+          :disabled="!shown.length"
+          @click="set(unhideValues(hidden, shown.map((o) => o.value)))"
+        >
+          {{ labels.addShown.replace("{count}", String(shown.length)) }}
+        </button>
+      </template>
+      <template v-else>
+        <button type="button" :class="action" :disabled="!hidden.size" @click="set(new Set())">
+          {{ labels.all }}
+        </button>
+        <button
+          type="button"
+          :class="action"
+          :disabled="hidden.size === options.length"
+          @click="set(hideAllValues(values))"
+        >
+          {{ labels.none }}
+        </button>
+        <button type="button" :class="action" @click="set(invertHidden(values, hidden))">
+          {{ labels.invert }}
+        </button>
+      </template>
+    </div>
+
+    <LpShift>
+      <div
+        ref="list"
+        class="-mx-1 flex max-h-64 flex-col overflow-y-auto overscroll-contain"
+        @keydown="onListKeydown"
+      >
+        <div
+          v-for="option in shown"
+          :key="String(option.value)"
+          class="group/opt flex items-center gap-2 rounded-control px-1.5 py-1 transition-colors duration-fast select-none hover:bg-surface-soft"
+          :data-paint-key="String(option.value)"
+        >
+          <LpCheckbox
+            :model-value="!hidden.has(option.value)"
+            class="min-w-0 flex-1"
+            @pointerdown="paint.onPointerDown($event, option.value)"
+            @update:model-value="toggle(option.value)"
+          >
+            <span class="truncate">{{ option.label }}</span>
+          </LpCheckbox>
+          <span v-if="option.count !== undefined" class="text-xs text-muted tabular-nums">{{ option.count }}</span>
+          <button
+            type="button"
+            class="rounded-control px-1.5 py-0.5 text-xs font-medium text-brand opacity-0 outline-none transition-opacity duration-fast group-hover/opt:opacity-100 hover:bg-brand-soft focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
+            @click="set(onlyValues(values, [option.value]))"
+          >
+            {{ labels.only }}
+          </button>
+        </div>
+        <p v-if="!shown.length" class="px-1.5 py-2 text-xs text-muted">{{ labels.noValues }}</p>
+      </div>
+    </LpShift>
+  </div>
+</template>

package/src/components/LpTagsInput.vue

@@ -0,0 +1,364 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+
+export type TagsInputLabels = {
+  remove: string
+  duplicate: string
+  max: string
+  added: string
+  removed: string
+}
+</script>
+
+<script setup lang="ts">
+/*
+ * Free-form list of short values: emails, labels, hostnames. Typing a
+ * delimiter or Enter turns the text into a tag, a paste is split into many,
+ * Backspace in an empty field selects the last tag and removes it on the next
+ * press, and the arrow keys walk the tags (reka TagsInput).
+ *
+ * Adding is the kit's own (see tags.ts) rather than reka's, so a tag that
+ * fails `validate`, the limit or the duplicate policy stays in the field for
+ * fixing instead of vanishing. The reason floats under the field
+ * (LpFieldNotice) rather than taking a line, so a refused paste never moves
+ * the form, and a repeat makes the tag it repeats pulse.
+ */
+import {
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText,
+  TagsInputRoot,
+} from "reka-ui"
+import { computed, ref, useAttrs, useId } from "vue"
+import { fieldMessageId, useField, useFieldControl } from "../composables/useField"
+import { prefersReducedMotion } from "../composables/easing"
+import { useFieldNotice, type FieldNoticeOptions } from "../composables/useFieldNotice"
+import { useShift } from "../composables/useShift"
+import { useLabels } from "../composables/useLpConfig"
+import { mergeClass } from "../composables/useMergedClass"
+import LpFieldNotice from "./LpFieldNotice.vue"
+import LpFormField from "./LpFormField.vue"
+import LpIcon from "./LpIcon.vue"
+import { addTags, splitTags, type TagDuplicates, type TagRejection, type TagValidator } from "./tags"
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string[]
+    placeholder?: string
+    /** Characters (or a RegExp) that end a tag while typing and split a paste. */
+    delimiter?: string | readonly string[] | RegExp
+    /** At most this many tags. */
+    max?: number
+    /**
+     * "reject" keeps a repeat typed with a note, "ignore" drops it with a passing
+     * note, "allow" keeps it. Either way the tag it repeats pulses.
+     */
+    duplicates?: TagDuplicates
+    /** Return an error message to refuse a tag. */
+    validate?: TagValidator
+    /** Applied to each tag before it is checked and stored (trim is always applied). */
+    normalize?: (tag: string) => string
+    /** Turn leftover text into a tag when the field loses focus. */
+    addOnBlur?: boolean
+    disabled?: boolean
+    invalid?: boolean
+    required?: boolean
+    label?: string
+    hint?: string
+    error?: string
+    labels?: Partial<TagsInputLabels>
+  }>(),
+  { modelValue: () => [], delimiter: () => [",", "\n", "\t"], duplicates: "reject", addOnBlur: true },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string[]): void
+  (e: "reject", rejected: TagRejection[]): void
+  (e: "blur", event: FocusEvent): void
+}>()
+
+const text = useLabels<TagsInputLabels>(
+  "tagsInput",
+  {
+    remove: "Remove {tag}",
+    duplicate: "{tag} is already added",
+    max: "Up to {max} items",
+    added: "{tag} added",
+    removed: "{tag} removed",
+  },
+  () => props.labels,
+)
+
+const attrs = useAttrs()
+const hasField = computed(() => !!props.label || !!props.hint || !!props.error)
+/*
+ * Notes go to the field that frames the control, which fades its own hint out
+ * under them: this component's own LpFormField when it has a label or hint,
+ * the one around it otherwise, and a notice of its own only when it stands
+ * alone.
+ */
+const notice = useFieldNotice()
+const outerField = useField()
+type FieldHandle = { notify: (text: string, options?: FieldNoticeOptions) => void; clearNotice: () => void }
+const ownField = ref<FieldHandle | null>(null)
+function bindField(c: unknown): void {
+  ownField.value = hasField.value && c ? (c as FieldHandle) : null
+}
+const standalone = computed(() => !hasField.value && !outerField?.value.notify)
+function say(message: string, options?: FieldNoticeOptions): void {
+  if (hasField.value) ownField.value?.notify(message, options)
+  else if (outerField?.value.notify) outerField.value.notify(message, options)
+  else notice.show(message, options)
+}
+function unsay(): void {
+  if (hasField.value) ownField.value?.clearNotice()
+  else if (outerField?.value.clearNotice) outerField.value.clearNotice()
+  else notice.clear()
+}
+/** A refusal the user still has to act on: the text stays typed and the field reads invalid. */
+const stuck = ref(false)
+const announcement = ref("")
+const noticeId = `${useId()}-notice`
+
+const field = useFieldControl(() => ({
+  wrapped: hasField.value,
+  hasMessage: !!props.error || !!props.hint,
+  id: typeof attrs.id === "string" ? attrs.id : undefined,
+  invalid: props.invalid || !!props.error || stuck.value,
+  required: props.required,
+  disabled: props.disabled,
+}))
+
+const describedBy = computed(
+  () =>
+    [
+      field.value.describedBy,
+      hasField.value && field.value.id ? `${field.value.id}-notice` : undefined,
+      standalone.value && notice.message.value ? noticeId : undefined,
+    ]
+      .filter(Boolean)
+      .join(" ") || undefined,
+)
+
+const rootAttrs = computed(() => {
+  const { class: _c, style: _s, id: _i, ...rest } = attrs
+  return rest
+})
+
+function explain(rejected: TagRejection): string {
+  if (rejected.reason === "invalid") return rejected.message ?? ""
+  if (rejected.reason === "max") return text.value.max.replace("{max}", String(props.max))
+  return text.value.duplicate.replace("{tag}", rejected.value)
+}
+
+const inputEl = ref<HTMLInputElement | null>(null)
+
+/*
+ * The box grows a row at a time as tags wrap, and shrinks back when they go:
+ * eased rather than snapped, so the fields below glide instead of jumping.
+ */
+const { el: boxEl, tweening, resizing } = useShift({ axis: "height" })
+
+/*
+ * Keys follow the tag, not its position: keyed by index, removing the first
+ * tag re-keyed every later one and they all replayed their entry. A repeated
+ * tag (duplicates "allow") is told apart by which occurrence it is.
+ */
+const keyed = computed(() => {
+  const seen = new Map<string, number>()
+  return props.modelValue.map((tag) => {
+    const n = seen.get(tag) ?? 0
+    seen.set(tag, n + 1)
+    return { tag, key: `${n}:${tag}` }
+  })
+})
+
+/** Draw the eye to a tag that was just typed again. */
+function pulse(tag: string): void {
+  if (prefersReducedMotion()) return
+  const chip = boxEl.value?.querySelector<HTMLElement>(`[data-tag-key="${CSS.escape(`0:${tag}`)}"]`)
+  chip?.animate(
+    [
+      { transform: "scale(1)", boxShadow: "0 0 0 0 transparent" },
+      { transform: "scale(1.08)", boxShadow: "0 0 0 2px var(--color-ring)" },
+      { transform: "scale(1)", boxShadow: "0 0 0 0 transparent" },
+    ],
+    { duration: 420, easing: "ease-out" },
+  )
+}
+
+/** Add whatever `raw` splits into; returns the text that should stay typed. */
+function add(raw: string): string {
+  const parts = splitTags(raw, props.delimiter)
+  if (!parts.length) return ""
+  const { tags, rejected, ignored } = addTags(props.modelValue, parts, {
+    max: props.max,
+    duplicates: props.duplicates,
+    validate: props.validate,
+    normalize: props.normalize,
+  })
+  if (tags.length !== props.modelValue.length) {
+    const added = tags.slice(props.modelValue.length)
+    announcement.value = added.map((t) => text.value.added.replace("{tag}", t)).join(", ")
+    emit("update:modelValue", tags)
+  }
+  stuck.value = rejected.length > 0
+  const first = rejected[0]
+  if (first) {
+    say(explain(first), { tone: first.reason === "invalid" ? "danger" : "info", duration: 0 })
+    emit("reject", rejected)
+  } else if (ignored.length) {
+    say(text.value.duplicate.replace("{tag}", ignored[0]!))
+  } else {
+    unsay()
+  }
+  for (const r of rejected) if (r.reason === "duplicate") pulse(props.normalize ? props.normalize(r.value) : r.value)
+  for (const tag of ignored) pulse(tag)
+  return rejected.map((r) => r.value).join(joiner.value)
+}
+
+// Rejected parts go back into the field joined by a delimiter, so committing
+// them again splits them the same way.
+const joiner = computed(() => {
+  const d = props.delimiter
+  const visible = d instanceof RegExp ? undefined : (typeof d === "string" ? [d] : d).find((x) => x.trim())
+  return visible ? `${visible} ` : " "
+})
+
+function commit(el: HTMLInputElement): void {
+  el.value = add(el.value)
+}
+
+function isDelimiter(data: string): boolean {
+  const d = props.delimiter
+  if (d instanceof RegExp) return new RegExp(d.source, d.flags.replace(/[gy]/g, "")).test(data)
+  return (typeof d === "string" ? [d] : d).includes(data)
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (event.isComposing || !(event.target instanceof HTMLInputElement)) return
+  if (event.key === "Enter" && event.target.value.trim()) {
+    event.preventDefault()
+    commit(event.target)
+  }
+}
+
+function onBeforeInput(event: InputEvent): void {
+  if (event.isComposing || !(event.target instanceof HTMLInputElement)) return
+  if (event.inputType === "insertText" && event.data && isDelimiter(event.data)) {
+    event.preventDefault()
+    commit(event.target)
+  }
+}
+
+function onInput(): void {
+  if (!stuck.value) return
+  stuck.value = false
+  unsay()
+}
+
+function onPaste(event: ClipboardEvent): void {
+  const pasted = event.clipboardData?.getData("text") ?? ""
+  if (!(event.target instanceof HTMLInputElement) || !pasted) return
+  if (splitTags(pasted, props.delimiter).length < 2) return
+  event.preventDefault()
+  const el = event.target
+  const typed = el.value.slice(0, el.selectionStart ?? el.value.length) + pasted + el.value.slice(el.selectionEnd ?? el.value.length)
+  el.value = add(typed)
+}
+
+function onBlur(event: FocusEvent): void {
+  emit("blur", event)
+  if (props.addOnBlur && event.target instanceof HTMLInputElement && event.target.value.trim()) commit(event.target)
+}
+
+function onModel(value: (string | Record<string, unknown>)[] | null): void {
+  const next = (value ?? []).map(String)
+  const removed = props.modelValue.filter((t) => !next.includes(t))
+  if (removed.length) announcement.value = removed.map((t) => text.value.removed.replace("{tag}", t)).join(", ")
+  stuck.value = false
+  unsay()
+  emit("update:modelValue", next)
+}
+
+defineExpose({ focus: () => inputEl.value?.focus(), add: (value: string) => add(value) })
+</script>
+
+<template>
+  <component
+    :is="hasField ? LpFormField : 'div'"
+    :ref="bindField"
+    :label="hasField ? label : undefined"
+    :hint="hasField ? hint : undefined"
+    :error="hasField ? error : undefined"
+    :required="hasField ? required : undefined"
+    :id="hasField ? field.id : undefined"
+    :class="hasField ? attrs.class : 'contents'"
+    :style="hasField ? attrs.style : undefined"
+  >
+    <div class="relative">
+      <TagsInputRoot
+        v-bind="rootAttrs"
+        :model-value="modelValue"
+        :disabled="field.disabled"
+        :required="field.required"
+        :id="field.id"
+        :delimiter="/(?!)/"
+        data-lp-ring-owner
+        :ref="(c) => (boxEl = (c as { $el?: HTMLElement } | null)?.$el ?? null)"
+        :class="
+          mergeClass(
+            'flex min-h-(--size-control-md) w-full flex-wrap items-center gap-1.5 rounded-control border border-line bg-surface-soft px-2 py-1.5 text-sm text-ink transition-colors duration-[var(--duration-fast)] focus-within:border-brand focus-within:ring-2 focus-within:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-55',
+            field.invalid ? 'border-danger focus-within:border-danger focus-within:ring-danger-soft' : '',
+            hasField ? '' : (attrs.class as string),
+            tweening
+              ? 'transition-[height,border-color,box-shadow] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none'
+              : '',
+            resizing ? 'overflow-hidden' : '',
+          )
+        "
+        :style="hasField ? undefined : attrs.style"
+        @update:model-value="onModel"
+      >
+        <!-- Tags grow in when added and shrink out when removed; the ones
+             already there on mount stay still (no `appear`). -->
+        <TransitionGroup
+          enter-active-class="animate-[chip-in_var(--duration-fast)_var(--ease-emphasized)] motion-reduce:animate-none"
+          leave-active-class="animate-[chip-out_var(--duration-fast)_ease] motion-reduce:animate-none"
+        >
+        <TagsInputItem
+          v-for="{ tag, key } in keyed"
+          :key="key"
+          :data-tag-key="key"
+          :value="tag"
+          class="inline-flex max-w-full items-center gap-1 rounded-pill bg-surface-raised py-0.5 pr-1 pl-2.5 text-xs font-medium text-ink outline-none data-[state=active]:ring-2 data-[state=active]:ring-ring"
+        >
+          <TagsInputItemText class="truncate" />
+          <TagsInputItemDelete
+            :aria-labelledby="undefined"
+            :aria-label="text.remove.replace('{tag}', tag)"
+            class="grid size-4 shrink-0 place-items-center rounded-pill text-muted transition-colors hover:bg-ink/10 hover:text-ink"
+          >
+            <LpIcon name="lucide:x" :size="12" />
+          </TagsInputItemDelete>
+        </TagsInputItem>
+        </TransitionGroup>
+        <TagsInputInput
+          :ref="(c) => (inputEl = (c as { $el?: HTMLInputElement } | null)?.$el ?? null)"
+          :placeholder="modelValue.length ? undefined : placeholder"
+          :aria-invalid="field.invalid || undefined"
+          :aria-describedby="describedBy"
+          class="min-w-24 flex-1 bg-transparent px-1 outline-none placeholder:text-muted"
+          @keydown="onKeydown"
+          @beforeinput="onBeforeInput"
+          @input="onInput"
+          @paste="onPaste"
+          @blur="onBlur"
+        />
+      </TagsInputRoot>
+      <LpFieldNotice v-if="standalone" :notice="notice" :id="noticeId" />
+    </div>
+    <span class="sr-only" aria-live="polite">{{ announcement }}</span>
+  </component>
+</template>

package/src/components/LpThemeSwitcher.vue

@@ -34,9 +34,9 @@ const props = withDefaults(
     cycleThemes?: (string | TokenSet)[]
     /**
      * Trigger style:
-     *  - "swatch" (default): a square showing the active theme's brand colour.
+     *  - "swatch" (default): a round chip previewing the theme's surface and brand.
      *  - "icon": a sun/moon icon following the active theme's mode.
-     *  - "pill": swatch + the theme name in a pill (always shows the label).
+     *  - "pill": the chip and the theme name in a rounded pill.
      */
     variant?: "swatch" | "icon" | "pill"
     /** Show the active theme's name next to the trigger (forced on for "pill"). */
@@ -104,14 +104,12 @@ onMounted(() => {
 })
 
 const SIZES = { sm: "size-7", md: "size-8", lg: "size-9" } as const
+const HEIGHTS = { sm: "h-7", md: "h-8", lg: "h-9" } as const
 const ICON_SIZE = { sm: 15, md: 16, lg: 18 } as const
+const CHIP = { sm: "size-3.5", md: "size-4", lg: "size-[18px]" } as const
 
 const wantsLabel = computed(() => props.showLabel || props.variant === "pill")
 
-// Labelless icon variant renders as a plain square icon button (no border/fill),
-// so it sits inline with other toolbar icon buttons. Other variants stay framed.
-const bareIcon = computed(() => props.variant === "icon" && !wantsLabel.value)
-
 // Apply a theme through the kit's self-managed setter (it persists + updates
 // the shared `current`), then notify. The reveal animates from the click point.
 function applyTheme(t: TokenSet, ev?: MouseEvent) {
@@ -228,30 +226,28 @@ const triggerLabel = computed(
       type="button"
       :aria-label="triggerLabel"
       :title="triggerLabel"
-      class="inline-flex items-center justify-center gap-2 rounded-control outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+      class="inline-flex shrink-0 items-center justify-center gap-2 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
       :class="
-        bareIcon
-          ? [SIZES[size], 'text-muted hover:bg-surface-soft hover:text-ink']
-          : [
-              'border border-line bg-surface-raised px-1.5 text-ink hover:border-line-strong',
-              wantsLabel ? 'py-1 pr-2.5' : '',
+        wantsLabel
+          ? [
+              HEIGHTS[size],
+              'rounded-full border border-line bg-surface-raised pl-2 pr-3 text-ink hover:border-line-strong hover:bg-surface-soft',
             ]
+          : [SIZES[size], 'rounded-control text-muted hover:bg-surface-soft hover:text-ink']
       "
       @click="cycle"
     >
-      <!-- swatch: brand over surface, read from the applied variables rather
-           than the theme object, so the server's render (painted from the
-           cookie) and the client's agree without a hydration patch -->
+      <!-- A preview of the applied theme: its surface and brand halves. Read from
+           the applied variables rather than the theme object, so the server's
+           render (painted from the cookie) and the client's agree. -->
       <span
         v-if="variant !== 'icon'"
-        class="grid shrink-0 place-items-center rounded-control border border-line/60"
-        :class="SIZES[size]"
-        style="background: var(--color-surface)"
-      >
-        <span class="size-3 rounded-full" style="background: var(--color-brand)" />
-      </span>
-      <!-- icon: sun/moon by mode, chosen by CSS from the applied theme's mode -->
-      <span v-else class="grid shrink-0 place-items-center" :class="SIZES[size]">
+        class="shrink-0 rounded-full shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--color-ink)_22%,transparent)]"
+        :class="CHIP[size]"
+        style="background: linear-gradient(135deg, var(--color-surface) 50%, var(--color-brand) 50%)"
+      />
+      <!-- sun/moon by mode, chosen by CSS from the applied theme's mode -->
+      <span v-else class="grid shrink-0 place-items-center">
         <LpIcon
           name="lucide:moon"
           :size="ICON_SIZE[size]"

package/src/components/LpToaster.vue

@@ -11,7 +11,8 @@ import {
   ToastTitle,
   ToastViewport,
 } from "reka-ui"
-import { onBeforeUnmount, ref, watch } from "vue"
+import { nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
 import { useLabels } from "../composables/useLpConfig"
 import { useToast, type ToastItem } from "../composables/useToast"
 import { CLOSE_ICON } from "./dropdown"
@@ -22,6 +23,52 @@ const text = useLabels("toast", { dismiss: "Dismiss" }, () => props.labels)
 
 const { queue, dismiss } = useToast()
 
+/*
+ * The stack slides rather than jumps. A new toast lands at the bottom and the
+ * ones above used to leap up by its height in a single frame; one leaving let
+ * the rest drop the same way. Each toast's layout position (offsetTop, which
+ * ignores transforms) is remembered, and when the list changes every toast
+ * that moved is played from where it was to where it is (FLIP). The observer
+ * fires after the DOM changes and before the frame is painted, so the jump is
+ * never seen. Toasts render through reka's portal into the viewport, which is
+ * why this watches the DOM rather than a TransitionGroup.
+ */
+let observer: MutationObserver | undefined
+const tops = new WeakMap<Element, number>()
+
+function toastsIn(root: Element): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>("li[data-state]")]
+}
+
+function slide(root: Element) {
+  const reduce = prefersReducedMotion()
+  const height = (root as HTMLElement).offsetHeight
+  for (const el of toastsIn(root)) {
+    const before = tops.get(el)
+    const now = el.offsetTop - height
+    tops.set(el, now)
+    if (before === undefined || before === now || reduce || el.hasAttribute("data-swipe")) continue
+    el.animate([{ translate: `0 ${before - now}px` }, { translate: "0 0" }], {
+      duration: 220,
+      easing: "cubic-bezier(0.2, 0, 0, 1)",
+    })
+  }
+}
+
+// The viewport's component root is a wrapper fragment, not the list, so the
+// list is found by a mark of its own once it is teleported into place.
+const viewportId = useId()
+onMounted(() =>
+  nextTick(() => {
+    const root = document.querySelector(`[data-lp-toasts="${viewportId}"]`)
+    if (!root || typeof MutationObserver === "undefined") return
+    for (const el of toastsIn(root)) tops.set(el, el.offsetTop - (root as HTMLElement).offsetHeight)
+    observer = new MutationObserver(() => slide(root))
+    observer.observe(root, { childList: true, subtree: true })
+  }),
+)
+onBeforeUnmount(() => observer?.disconnect())
+
 // A toast replaced through its `key` keeps its id and gets a new revision, so
 // everything tied to one rendered toast goes by both.
 const tag = (t: ToastItem) => `${t.id}:${t.rev}`
@@ -256,6 +303,7 @@ function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[numbe
          --z-toast (200) > --z-modal (110) wins as intended. -->
     <Teleport to="body">
       <ToastViewport
+        :data-lp-toasts="viewportId"
         class="fixed bottom-0 right-0 z-(--z-toast) flex w-[min(92vw,22rem)] flex-col gap-2 p-4 outline-none"
       />
     </Teleport>