@leavepulse/ui 0.43.4 → 0.45.0

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/LpTextarea.vue

@@ -1,5 +1,11 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, useAttrs } from "vue"
+import { useFieldControl } from "../composables/useField"
+import { mergeClass } from "../composables/useMergedClass"
 import LpFormField from "./LpFormField.vue"
 
 const props = defineProps<{
@@ -21,25 +27,57 @@ const props = defineProps<{
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
 const hasField = computed(() => !!props.label || !!props.hint || !!props.error)
+
+// class/style lay out the field when there is one, and style the <textarea>
+// when it stands alone; every other attr (name, maxlength, autofocus, @blur…)
+// belongs to the <textarea> itself.
+const attrs = useAttrs()
+const textareaAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs
+  return rest
+})
+
+const field = useFieldControl(() => ({
+  wrapped: hasField.value,
+  hasMessage: !!props.error || !!props.hint,
+  id: typeof attrs.id === "string" ? attrs.id : undefined,
+  invalid: props.invalid || !!props.error,
+  required: props.required,
+  disabled: props.disabled,
+}))
+
+const textareaClass = computed(() =>
+  mergeClass(
+    "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",
+    field.value.invalid ? "border-danger focus:border-danger focus:ring-danger-soft" : "border-line",
+    hasField.value ? "" : (attrs.class as string),
+  ),
+)
 </script>
 
 <template>
   <component
     :is="hasField ? LpFormField : 'div'"
+    :id="hasField ? field.id : undefined"
     :label="hasField ? label : undefined"
     :hint="hasField ? hint : undefined"
     :error="hasField ? error : undefined"
     :required="hasField ? required : undefined"
-    :class="hasField ? undefined : 'contents'"
+    :class="hasField ? attrs.class : 'contents'"
+    :style="hasField ? attrs.style : undefined"
   >
     <textarea
+      v-bind="textareaAttrs"
+      :id="field.id"
       :value="modelValue"
       :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'"
+      :disabled="field.disabled"
+      :required="field.required || undefined"
+      :aria-invalid="field.invalid || undefined"
+      :aria-describedby="field.describedBy"
+      :class="textareaClass"
+      :style="hasField ? undefined : (attrs.style as never)"
       @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
     />
   </component>

package/src/components/LpThemeProvider.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * Applies a theme to a subtree instead of the whole page: a dark sidebar in a
+ * light app, a live preview of a theme being edited, an embedded widget that
+ * keeps its own look. Every token is declared on this element, derived ones
+ * included, so kit components inside re-skin while the page around them keeps
+ * the global theme. Nothing is persisted; this is presentation only.
+ */
+import { computed, type Component } from "vue"
+import type { TokenSet } from "../theme/tokens"
+import { themeEntries } from "../theme/useTheme"
+import { useMergedAttrs } from "../composables/useMergedClass"
+
+const props = withDefaults(
+  defineProps<{
+    theme: TokenSet
+    /** Root element. A wrapper that should not affect layout can use `class="contents"`. */
+    as?: string | Component
+  }>(),
+  { as: "div" },
+)
+
+// Paints its own surface and text so the scoped theme reads as one; a class
+// like `bg-transparent` overrides that.
+const { class: rootClass, attrs: rest } = useMergedAttrs("bg-surface text-ink")
+
+const style = computed(() => ({
+  ...Object.fromEntries(themeEntries(props.theme)),
+  colorScheme: props.theme.mode,
+}))
+</script>
+
+<template>
+  <component :is="as" :style="style" :data-theme-mode="theme.mode" :class="rootClass" v-bind="rest">
+    <slot />
+  </component>
+</template>

package/src/components/LpThemeSwitcher.vue

@@ -12,6 +12,7 @@
  * fetches; it just drives the theme engine.
  */
 import { computed, onMounted, ref } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import { presets } from "../theme/presets"
 import type { TokenSet } from "../theme/tokens"
 import { useTheme } from "../theme/useTheme"
@@ -33,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"). */
@@ -51,6 +52,13 @@ const props = withDefaults(
     transition?: boolean
     size?: "sm" | "md" | "lg"
     "aria-label"?: string
+    /**
+     * Offer a "System" entry in the menu that follows the OS colour scheme,
+     * switching between these two themes (names from `themes`, or TokenSets).
+     */
+    system?: { light: string | TokenSet; dark: string | TokenSet }
+    /** Text overrides. `trigger` may contain `{name}`. */
+    labels?: Partial<{ trigger: string; system: string }>
   }>(),
   {
     variant: "swatch",
@@ -66,6 +74,12 @@ const emit = defineEmits<{
 
 const theme = useTheme()
 
+const text = useLabels(
+  "themeSwitcher",
+  { trigger: "Theme: {name}. Click to switch, right-click to choose.", system: "System" },
+  () => props.labels,
+)
+
 const list = computed<TokenSet[]>(() =>
   props.themes && props.themes.length ? props.themes : Object.values(presets),
 )
@@ -75,9 +89,6 @@ const list = computed<TokenSet[]>(() =>
 const activeName = computed(
   () => props.modelValue ?? (theme.currentName.value || list.value[0]?.name || ""),
 )
-const active = computed<TokenSet | undefined>(
-  () => list.value.find((t) => t.name === activeName.value) ?? list.value[0],
-)
 
 // Apply the consumer's default on mount when nothing is cached yet. init()
 // hydrates from the cache first (a saved choice wins), so this only takes effect
@@ -93,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) {
@@ -140,18 +149,49 @@ function cycle(ev: MouseEvent) {
 // Right-click menu: every theme, the active one checked. A circular-reveal from
 // the (saved) click point isn't available here, so the menu picks reveal from
 // the trigger centre via applyWithTransition's default origin.
-const menu = computed<ContextMenuItemDef[]>(() =>
-  list.value.map((t) => ({
+function resolve(t: string | TokenSet): TokenSet | undefined {
+  return typeof t === "string" ? list.value.find((x) => x.name === t) : t
+}
+
+const systemPair = computed(() => {
+  if (!props.system) return null
+  const light = resolve(props.system.light)
+  const dark = resolve(props.system.dark)
+  return light && dark ? { light, dark } : null
+})
+
+function followSystem() {
+  const pair = systemPair.value
+  if (!pair) return
+  theme.setSystem(pair)
+  const next = theme.current.value as TokenSet | null
+  if (next) {
+    emit("update:modelValue", next.name)
+    emit("change", next)
+  }
+}
+
+const menu = computed<ContextMenuItemDef[]>(() => {
+  const following = theme.system.value
+  const items: ContextMenuItemDef[] = list.value.map((t) => ({
     label: t.name,
     icon:
-      t.name === activeName.value
+      !following && t.name === activeName.value
         ? "lucide:check"
         : t.mode === "dark"
           ? "lucide:moon"
           : "lucide:sun",
     onSelect: () => applyTheme(t),
-  })),
-)
+  }))
+  if (systemPair.value) {
+    items.unshift({
+      label: text.value.system,
+      icon: following ? "lucide:check" : "lucide:monitor",
+      onSelect: followSystem,
+    })
+  }
+  return items
+})
 
 /*
  * The theme the SERVER rendered is not necessarily the one the client restores:
@@ -176,7 +216,7 @@ const labelName = computed(() =>
 )
 
 const triggerLabel = computed(
-  () => props["aria-label"] ?? `Theme: ${labelName.value}. Click to switch, right-click to choose.`,
+  () => props["aria-label"] ?? text.value.trigger.replace("{name}", labelName.value),
 )
 </script>
 
@@ -186,34 +226,37 @@ 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, hinting the theme at a glance -->
+      <!-- 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: active?.colors.surface }"
-      >
-        <span
-          class="size-3 rounded-full"
-          :style="{ background: active?.colors.brand }"
+        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]"
+          class="in-data-[theme-mode=light]:hidden"
         />
-      </span>
-      <!-- icon: sun/moon by mode -->
-      <span v-else class="grid shrink-0 place-items-center" :class="SIZES[size]">
         <LpIcon
-          :name="active?.mode === 'dark' ? 'lucide:moon' : 'lucide:sun'"
+          name="lucide:sun"
           :size="ICON_SIZE[size]"
+          class="hidden in-data-[theme-mode=light]:block"
         />
       </span>