@leavepulse/ui 0.69.0 → 0.70.0

package/src/components/LpActivityLine.vue

@@ -0,0 +1,186 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own rather than appended to
+// it, so opt out of the automatic pass-through that would add it unmerged.
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * A hairline along the edge of a card, table or page that says "something is
+ * happening here": a sweep while the length of the work is unknown, a fill once
+ * it is, a quick run to the end and a fade when it is done.
+ *
+ * Not LpProgress. LpProgress is a reading the user looks AT: it has a track,
+ * a caption, a value that persists. This is ambient: it has no track, lies over
+ * the edge of something else without taking space, is absent while idle, waits
+ * a beat before appearing so a fast load never flashes it, and on completion
+ * finishes its run before fading, so "done" is seen rather than the line just
+ * vanishing mid-way.
+ */
+import { computed, onBeforeUnmount, ref, watch } from "vue"
+import { durationToken, prefersReducedMotion } from "../composables/easing"
+import { useLoadingGate } from "../composables/useLoadingGate"
+import { useLabels } from "../composables/useLpConfig"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { meterFraction, TONE_COLOR, type MeterTone } from "./meter"
+
+const props = withDefaults(
+  defineProps<{
+    /** Work is in flight. Going false finishes the line and fades it out. */
+    active?: boolean
+    /** Known progress. Unset or null: the length of the work is unknown, and the line sweeps. */
+    value?: number | null
+    max?: number
+    tone?: MeterTone
+    /**
+     * Where it lies. `top` and `bottom` are absolute, over the edge of the
+     * nearest positioned ancestor (give the card `relative`), so showing it
+     * moves nothing; `inline` takes its own line in the flow.
+     */
+    placement?: "top" | "bottom" | "inline"
+    /** Thickness in px. */
+    height?: number
+    /**
+     * Ms to wait before showing. Work that finishes within it never shows the
+     * line at all: a flash of activity for a 90 ms request is noise.
+     */
+    delay?: number
+    labels?: Partial<{ busy: string }>
+  }>(),
+  { active: true, value: null, max: 100, tone: "brand", placement: "top", height: 2, delay: 150 },
+)
+
+const text = useLabels("activityLine", { busy: "Loading" }, () => props.labels)
+
+/*
+ * Whether it is up at all is the same question LpLoader answers, so it is
+ * answered the same way (useLoadingGate): wait `delay` before appearing, and
+ * once up stay long enough to be read as a state rather than a blink.
+ *
+ * On top of that the line has an exit of its own:
+ * idle → running → (gate closes) → finishing → idle. `finishing` is the run to
+ * the end and the fade after it; then the element is gone.
+ */
+const gated = useLoadingGate(() => props.active, {
+  delay: () => (prefersReducedMotion() ? 0 : props.delay),
+  minVisible: 300,
+})
+const phase = ref<"idle" | "running" | "finishing">("idle")
+let doneTimer: ReturnType<typeof setTimeout> | undefined
+
+watch(
+  gated,
+  (on) => {
+    clearTimeout(doneTimer)
+    if (on) {
+      phase.value = "running"
+      return
+    }
+    if (phase.value === "idle") return
+    phase.value = "finishing"
+    // The run to the end (slow), then the fade (medium), then gone.
+    const hold = prefersReducedMotion() ? 0 : durationToken("duration-medium") * 3
+    doneTimer = setTimeout(() => (phase.value = "idle"), hold)
+  },
+  { immediate: true },
+)
+onBeforeUnmount(() => clearTimeout(doneTimer))
+
+const determinate = computed(() => props.value != null)
+const fraction = computed(() =>
+  phase.value === "finishing" ? 1 : determinate.value ? meterFraction(props.value as number, 0, props.max) : 0,
+)
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  [
+    "pointer-events-none overflow-hidden",
+    props.placement === "inline" ? "relative block w-full" : "z-[2]",
+    "transition-opacity duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none",
+  ].join(" "),
+)
+
+/*
+ * Edge placement goes inline, not through `absolute top-0` classes: a card's
+ * skin (`.lp-skin-panel > *`) makes every direct child `position: relative`
+ * with a more specific selector than a utility class, which collapsed the line
+ * to zero width exactly where it is meant to be used, as a card's first child.
+ */
+const edge = computed(() =>
+  props.placement === "inline"
+    ? {}
+    : { position: "absolute" as const, left: 0, right: 0, [props.placement]: 0 },
+)
+
+// The fade starts once the run to the end is over, not with it.
+const opacity = computed(() => (phase.value === "running" ? 1 : 0))
+const fadeDelay = computed(() => (phase.value === "finishing" ? "var(--duration-slow)" : "0ms"))
+</script>
+
+<template>
+  <span
+    v-if="phase !== 'idle' || placement === 'inline'"
+    role="progressbar"
+    :aria-label="text.busy"
+    :aria-hidden="phase === 'idle' ? 'true' : undefined"
+    :aria-busy="phase === 'running' ? 'true' : undefined"
+    :aria-valuenow="determinate && phase !== 'idle' ? (value as number) : undefined"
+    :aria-valuemin="determinate ? 0 : undefined"
+    :aria-valuemax="determinate ? max : undefined"
+    :class="rootClass"
+    :style="{ ...edge, height: `${height}px`, opacity, transitionDelay: fadeDelay, '--lp-al-color': TONE_COLOR[tone] }"
+    v-bind="rest"
+  >
+    <!-- The sweep: a short bright segment crossing the edge. Faded rather than
+         cut when the work turns determinate or ends. -->
+    <span
+      class="lp-sweep lp-activity-sweep absolute inset-y-0 left-0 w-2/5 rounded-pill transition-opacity duration-(--duration-medium)"
+      :class="determinate || phase === 'finishing' ? 'opacity-0' : 'opacity-100'"
+    />
+    <!-- The fill, scaled rather than sized, so it eases on the compositor. A
+         shimmer runs along it while it is still filling. -->
+    <span
+      class="absolute inset-0 origin-left rounded-pill transition-transform duration-(--duration-slow) ease-(--ease-emphasized) motion-reduce:transition-none"
+      :style="{ transform: `scaleX(${fraction})`, backgroundColor: 'var(--lp-al-color)' }"
+    >
+      <span v-if="determinate && phase === 'running'" class="lp-activity-shimmer absolute inset-0" />
+    </span>
+  </span>
+</template>
+
+<style>
+/*
+ * Unscoped and namespaced, like the other kit animations: the keyframes are
+ * shared by every line on the page. The sweep's travel is the kit's own
+ * (.lp-sweep in tokens.css); this paints it, soft at both ends.
+ */
+.lp-activity-sweep {
+  background: linear-gradient(90deg, transparent, var(--lp-al-color) 35%, var(--lp-al-color) 65%, transparent);
+}
+
+.lp-activity-shimmer {
+  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-surface) 45%, transparent), transparent);
+  background-size: 40% 100%;
+  background-repeat: no-repeat;
+  animation: lp-activity-shimmer 1.6s linear infinite;
+}
+
+@keyframes lp-activity-shimmer {
+  0% {
+    background-position: -40% 0;
+  }
+  100% {
+    background-position: 140% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* The sweep lies still across the line (tokens.css); a solid tint rather than its soft ends. */
+  .lp-activity-sweep {
+    background: var(--lp-al-color);
+  }
+  .lp-activity-shimmer {
+    animation: none;
+    display: none;
+  }
+}
+</style>

package/src/components/LpAlert.vue

@@ -7,18 +7,29 @@ export default { inheritAttrs: false }
 
 <script setup lang="ts">
 import { tv, type VariantProps } from "tailwind-variants"
-import { computed, ref, watch } from "vue"
+import { computed, ref, useSlots, watch } from "vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import LpIcon from "./LpIcon.vue"
+import LpLoader from "./LpLoader.vue"
+import LpSwap from "./LpSwap.vue"
+import { slotText } from "./slotText"
+import { TONES, toneLook } from "./tone"
 
 const alert = tv({
-  base: "flex gap-3 rounded-card border p-4 text-sm",
+  /*
+   * An alert changes while it is read (saving → saved → failed), so the change
+   * shows as one: the tint eases between variants, the icon turns over, and
+   * the message is swapped by LpSwap, its box easing to the new height.
+   */
+  base: "flex gap-3 rounded-card border p-4 text-sm transition-[background-color,border-color,color] duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none",
   variants: {
+    // The tint is the tone's quiet panel (tone.ts); an info alert is a plain
+    // neutral panel whose meaning is carried by its brand-coloured icon alone.
     variant: {
-      info: "border-line bg-surface-soft text-ink",
-      success: "border-action/30 bg-action/10 text-ink",
-      warning: "border-accent/30 bg-accent/10 text-ink",
-      danger: "border-danger/30 bg-danger/10 text-ink",
+      info: `${TONES.neutral.panel} text-ink`,
+      success: `${TONES.success.panel} text-ink`,
+      warning: `${TONES.warning.panel} text-ink`,
+      danger: `${TONES.danger.panel} text-ink`,
     },
   },
   defaultVariants: { variant: "info" },
@@ -33,13 +44,6 @@ const ICONS: Record<NonNullable<AlertVariants["variant"]>, string> = {
   danger: "lucide:octagon-alert",
 }
 
-const ICON_TONE: Record<NonNullable<AlertVariants["variant"]>, string> = {
-  info: "text-brand",
-  success: "text-action",
-  warning: "text-accent",
-  danger: "text-danger",
-}
-
 const props = withDefaults(
   defineProps<{
     variant?: AlertVariants["variant"]
@@ -54,7 +58,7 @@ const props = withDefaults(
      */
     live?: "assertive" | "polite" | false
     /**
-     * Work is under way: the icon becomes a spinning loader (unless `icon` is
+     * Work is under way: the icon becomes LpLoader's spinner (unless `icon` is
      * given, which then spins instead) and the alert is announced politely.
      * A loader drawn as a still icon read as a frozen page.
      */
@@ -78,23 +82,49 @@ const role = computed(() => {
 
 // `p-3` or a different border must beat the variant's own, not race it.
 const { class: rootClass, attrs: rest } = useMergedAttrs(() => alert({ variant: props.variant }))
-const resolvedIcon = computed(() => props.icon ?? (props.busy ? "lucide:loader-circle" : ICONS[props.variant ?? "info"]))
-const iconTone = computed(() => ICON_TONE[props.variant ?? "info"])
+const spinning = computed(() => props.busy && !props.icon)
+const resolvedIcon = computed(() => props.icon ?? ICONS[props.variant ?? "info"])
+const iconTone = computed(() => toneLook(props.variant ?? "info").text)
+
+// What counts as another message: the variant, the title and the slot's words
+// when it is plain text. Rich content keeps its key and only eases its height.
+const slots = useSlots()
+const messageKey = () => [props.variant, props.title ?? "", slotText(slots.default) ?? ""].join("\u0000")
 </script>
 
 <template>
   <div :class="rootClass" :role="role" :aria-busy="busy || undefined" v-bind="rest">
-    <LpIcon
-      :name="resolvedIcon"
-      :size="18"
-      :class="['mt-0.5 shrink-0', iconTone, busy ? 'animate-spin motion-reduce:animate-none' : '']"
-      aria-hidden="true"
-    />
-    <div class="min-w-0">
+    <!-- The busy loader shows at once, since it replaces the icon, and stays
+         silent: the alert's own role and aria-busy already announce the work. -->
+    <span class="relative mt-0.5 grid size-[18px] shrink-0 place-items-center" aria-hidden="true">
+      <Transition
+        enter-from-class="scale-50 opacity-0"
+        leave-to-class="scale-50 opacity-0"
+        enter-active-class="transition-[scale,opacity] duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none"
+        leave-active-class="absolute transition-[scale,opacity] duration-(--duration-fast) ease-out motion-reduce:transition-none"
+      >
+        <LpLoader
+          v-if="spinning"
+          key="busy"
+          size="inline"
+          :delay="0"
+          class="text-[18px] transition-colors duration-(--duration-medium)"
+          :class="iconTone"
+        />
+        <LpIcon
+          v-else
+          :key="resolvedIcon"
+          :name="resolvedIcon"
+          :size="18"
+          :class="[iconTone, 'transition-colors duration-(--duration-medium)', busy ? 'animate-spin motion-reduce:animate-none' : '']"
+        />
+      </Transition>
+    </span>
+    <LpSwap :swap-key="messageKey()" class="min-w-0 flex-1">
       <p v-if="title" class="font-semibold text-ink">{{ title }}</p>
       <div :class="['text-muted-strong', title ? 'mt-0.5' : '']">
         <slot />
       </div>
-    </div>
+    </LpSwap>
   </div>
 </template>

package/src/components/LpAppShell.vue

@@ -66,8 +66,6 @@ const props = withDefaults(
     isActive?: (item: SidebarItem) => boolean
     /** Override the header title. Falls back to the active item's label. */
     title?: string
-    /** Mobile drawer open state (v-model:open). */
-    open?: boolean
     /** Tailwind breakpoint below which the rail becomes a drawer. */
     mobileBreakpoint?: "sm" | "md" | "lg" | "xl"
     /** Show the brand/header divider in the rail. */
@@ -94,7 +92,6 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (e: "update:modelValue", id: string): void
-  (e: "update:open", value: boolean): void
   (e: "update:collapsed", keys: string[]): void
   (e: "select", item: SidebarItem): void
 }>()
@@ -139,10 +136,9 @@ const pageTitle = computed(() => {
 
 // Mobile drawer: also close it on every path change, so href/select navigation
 // from a nav item dismisses it.
-const drawerOpen = computed({
-  get: () => props.open ?? false,
-  set: (v) => emit("update:open", v),
-})
+// Its own state when the app does not bind it: the shell's burger must open
+// the drawer either way. v-model:open still controls it from outside.
+const drawerOpen = defineModel<boolean>("open", { default: false })
 const text = useLabels(
   "appShell",
   { openMenu: "Open menu", skipToContent: "Skip to content" },
@@ -165,7 +161,7 @@ function skipToMain() {
 watch(
   () => props.path,
   () => {
-    if (drawerOpen.value) emit("update:open", false)
+    if (drawerOpen.value) drawerOpen.value = false
     scrollArea.value?.viewportEl?.scrollTo({ top: 0, left: 0, behavior: "instant" })
   },
 )
@@ -186,7 +182,7 @@ const burgerHidden: Record<NonNullable<typeof props.mobileBreakpoint>, string> =
 const burgerClass = computed(() => burgerHidden[props.mobileBreakpoint])
 
 // Expose the burger trigger so a host can omit its own header entirely.
-const _openDrawer = () => emit("update:open", true)
+const _openDrawer = () => (drawerOpen.value = true)
 defineExpose({ openDrawer: _openDrawer })
 
 // The shell claims the full viewport height, which is wrong when it is embedded in a page that already has a header of its own.
@@ -221,7 +217,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       :auto-collapse-after="autoCollapseAfter"
       class="shrink-0"
       @update:model-value="onModel"
-      @update:open="(v) => emit('update:open', v)"
+      @update:open="(v) => (drawerOpen = v)"
       @update:collapsed="(v) => emit('update:collapsed', v)"
       @select="onSelect"
     >
@@ -256,7 +252,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           size="sm"
           square
           :aria-label="text.openMenu"
-          @click="emit('update:open', true)"
+          @click="drawerOpen = true"
         >
           <LpIcon name="lucide:menu" :size="18" />
         </LpButton>

package/src/components/LpAutocomplete.vue

@@ -36,9 +36,11 @@ import { computed, nextTick, ref, useAttrs, useId, 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 { CLOSE_ICON, OPTION_ITEM, optionStagger, POPOVER_PANEL } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
+import OptionContent from "./OptionContent.vue"
 import type { LpOptionBase, OptionSelection } from "./options"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
 export type AutocompleteOption = LpOptionBase<string>
 
@@ -256,11 +258,18 @@ function choose(opt: AutocompleteOption) {
 }
 
 function clear() {
+  if (field.value.disabled) return
   typing.value = false
   draft.value = null
   emit("update:modelValue", "")
   open.value = false
 }
+
+// Overlays open in the window this component renders in (an LpFrame's, inside one).
+const portalTo = usePortalTarget()
+// What happens in another document (the page around a frame, or a frame in
+// the page) is not "outside" for this layer.
+const guardOutside = useOutsideGuard()
 </script>
 
 <template>
@@ -360,7 +369,7 @@ function clear() {
         </Transition>
       </div>
       <button
-        v-if="clearable && hasValue"
+        v-if="clearable && hasValue && !field.disabled"
         type="button"
         class="group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
         :aria-label="labels.clear"
@@ -375,8 +384,10 @@ function clear() {
       </button>
     </ComboboxAnchor>
 
-    <ComboboxPortal>
+    <ComboboxPortal :to="portalTo">
       <ComboboxContent
+        @interact-outside="guardOutside"
+        @escape-key-down="guardOutside"
         :collision-padding="8"
         position="popper"
         :side-offset="6"
@@ -396,20 +407,11 @@ function clear() {
             :key="opt.value"
             :value="opt.value"
             :disabled="opt.disabled"
-            :style="{ animationDelay: `${Math.min(i, 12) * 22}ms` }"
+            :style="optionStagger(i)"
             :class="[OPTION_ITEM, 'justify-between data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50']"
             @select.prevent="choose(opt)"
           >
-            <span class="flex min-w-0 items-center gap-2.5">
-              <img v-if="opt.image" :src="opt.image" alt="" class="size-6 shrink-0 rounded-full object-cover" />
-              <LpIcon v-else-if="opt.icon" :name="opt.icon" :size="16" class="shrink-0 text-muted" />
-              <span class="flex min-w-0 flex-col">
-                <span class="truncate">{{ opt.label ?? opt.value }}</span>
-                <span v-if="opt.description" class="truncate text-xs text-muted">
-                  {{ opt.description }}
-                </span>
-              </span>
-            </span>
+            <OptionContent :option="opt" />
           </ComboboxItem>
         </ComboboxViewport>
       </ComboboxContent>

package/src/components/LpAvatar.vue

@@ -11,6 +11,7 @@ import { computed, onMounted, ref } from "vue"
 import type { ContextMenuItemDef } from "./LpContextMenu.vue"
 import { MenuWhen } from "./menuWhen"
 import LpIcon from "./LpIcon.vue"
+import LpIdenticon from "./LpIdenticon.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 const avatar = tv({
@@ -48,6 +49,14 @@ const props = withDefaults(
      * letters read as noise. `fallback` text still wins when both are given.
      */
     icon?: string
+    /**
+     * Draw an identicon while there is no picture, instead of initials: a
+     * pattern and colour derived from a string, so accounts that never set an
+     * avatar still look different from each other. `true` derives it from
+     * `alt`; a string is the seed itself (an id outlives a rename). `fallback`
+     * text and `icon` still win when given.
+     */
+    identicon?: boolean | string
     size?: AvatarVariants["size"]
     /** Explicit pixel size, wins over `size` — for avatars keyed to a layout. */
     pixelSize?: number
@@ -111,6 +120,11 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
 // <ClientOnly>.
 const mounted = ref(false)
 
+const identiconSeed = computed(() => {
+  if (!props.identicon || props.fallback || props.icon) return ""
+  return props.identicon === true ? (props.alt ?? "").trim() : props.identicon
+})
+
 const menuHeading = computed(() => props.menuTitle ?? props.alt)
 onMounted(() => {
   mounted.value = true
@@ -129,8 +143,9 @@ onMounted(() => {
   >
     <AvatarRoot :class="rootClass" :style="sizeStyle" v-bind="rest">
       <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover animate-[fade-in_var(--duration-medium)_ease] motion-reduce:animate-none" />
-      <AvatarFallback>
-        <LpIcon v-if="icon && !fallback" :name="icon" :size="iconSize" />
+      <AvatarFallback :class="identiconSeed ? 'size-full' : undefined">
+        <LpIdenticon v-if="identiconSeed" :seed="identiconSeed" :padding="shape === 'circle' ? 0.24 : 0.14" />
+        <LpIcon v-else-if="icon && !fallback" :name="icon" :size="iconSize" />
         <template v-else>{{ initials }}</template>
       </AvatarFallback>
     </AvatarRoot>

package/src/components/LpBadge.vue

@@ -6,7 +6,15 @@ export default { inheritAttrs: false }
 
 <script setup lang="ts">
 import { tv, type VariantProps } from "tailwind-variants"
+import { useSlots } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import { useMergedClass } from "../composables/useMergedClass"
+import { BADGE_REMOVE } from "./badge"
+import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
+import LpShift from "./LpShift.vue"
+import { slotText } from "./slotText"
+import { TONES } from "./tone"
 
 const badge = tv({
   /*
@@ -17,7 +25,14 @@ const badge = tv({
    * the moment it gained a status. The badge now occupies the height it says it
    * does and leaves the line it sits on alone.
    */
-  base: "inline-flex shrink-0 items-center gap-1.5 rounded-pill align-middle font-medium leading-[1.2]",
+  /*
+   * A status changes while it is watched, so the change shows as one: the
+   * colours ease between tones, the width eases (LpShift) and plain text rolls
+   * to the new word (LpRollingText). The outline tone draws its edge as an
+   * inset ring rather than a border, so switching to it neither adds a pixel
+   * nor snaps: the ring is there in every tone, transparent.
+   */
+  base: "inline-flex shrink-0 items-center rounded-pill align-middle font-medium leading-[1.2] ring-1 ring-transparent ring-inset transition-[color,background-color,box-shadow] duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none",
   variants: {
     size: {
       // Fits inside a text-sm line without growing it — for a badge beside a
@@ -26,16 +41,30 @@ const badge = tv({
       md: "px-2.5 py-0.5 text-xs",
       lg: "px-3 py-1 text-sm",
     },
+    /*
+     * The kit's tones (tone.ts) under every name they go by, so a badge and a
+     * tinted row in one tone are one colour. `warning` is partial trouble,
+     * which every status surface eventually needs: without it a half-failed
+     * thing has to render as either fine or broken.
+     */
     tone: {
-      neutral: "bg-surface-soft text-muted-strong",
-      brand: "bg-brand-soft text-brand",
-      action: "bg-action/15 text-action",
-      success: "bg-action/15 text-action",
-      // Partial trouble, which every status surface eventually needs: without
-      // it a half-failed thing has to render as either fine or broken.
-      warning: "bg-accent/15 text-accent",
-      danger: "bg-danger-soft text-danger",
-      outline: "border border-line text-ink",
+      neutral: TONES.neutral.chip,
+      muted: TONES.neutral.chip,
+      brand: TONES.brand.chip,
+      info: TONES.brand.chip,
+      action: TONES.success.chip,
+      success: TONES.success.chip,
+      ok: TONES.success.chip,
+      warning: TONES.warning.chip,
+      accent: TONES.warning.chip,
+      danger: TONES.danger.chip,
+      error: TONES.danger.chip,
+      outline: "text-ink ring-line",
+    },
+    // A chip that can be taken away (a tag, a filter in force): the ✕ sits
+    // tight to the trailing edge, so that side keeps only a hair of padding.
+    removable: {
+      true: "gap-1 pr-1",
     },
   },
   defaultVariants: { tone: "neutral", size: "md" },
@@ -48,14 +77,49 @@ const props = defineProps<{
   /** `sm` is the one that does not disturb a text-sm line it sits on. */
   size?: BadgeVariants["size"]
   dot?: boolean
+  /** A ✕ after the content that emits `remove`: a tag, a filter chip. */
+  removable?: boolean
+  /** Accessible name of the ✕, e.g. "Remove tag alpha". */
+  removeLabel?: string
+}>()
+
+const emit = defineEmits<{
+  /** The ✕ was pressed. */
+  (e: "remove"): void
 }>()
 
-const classes = useMergedClass(() => badge({ tone: props.tone, size: props.size }))
+defineSlots<{
+  default?: () => unknown
+  /** Replaces the ✕ (with `removable`), for a chip whose remove control is another primitive's. */
+  remove?: () => unknown
+}>()
+
+const text = useLabels("badge", { remove: "Remove" })
+
+const classes = useMergedClass(() => badge({ tone: props.tone, size: props.size, removable: props.removable }))
+
+// Plain words roll to the new ones; richer content only eases its width.
+const slots = useSlots()
+const plainText = () => slotText(slots.default)
 </script>
 
 <template>
   <span v-bind="$attrs" :class="classes">
-    <span v-if="dot" class="size-1.5 rounded-full bg-current" />
-    <slot />
+    <!-- min-w-0 / max-w-full: a chip given a max width truncates its words
+         instead of spilling them past its edge. -->
+    <LpShift axis="width" class="min-w-0">
+      <span class="inline-flex max-w-full items-center gap-1.5 whitespace-nowrap">
+        <span v-if="dot" class="size-1.5 shrink-0 rounded-full bg-current" />
+        <LpRollingText v-if="plainText() !== null" :value="plainText()!" align="start" />
+        <slot v-else />
+      </span>
+    </LpShift>
+    <template v-if="removable">
+      <slot name="remove">
+        <button type="button" :class="BADGE_REMOVE" :aria-label="removeLabel ?? text.remove" @click="emit('remove')">
+          <LpIcon name="lucide:x" :size="12" />
+        </button>
+      </slot>
+    </template>
   </span>
 </template>