@leavepulse/ui 0.68.0 → 0.70.0

package/src/components/LpStepper.vue

@@ -7,8 +7,8 @@ export default { inheritAttrs: false }
 
 <script setup lang="ts">
 import { computed } from "vue"
-import LpIcon from "./LpIcon.vue"
-import LpRollingText from "./LpRollingText.vue"
+import LpStepMark from "./LpStepMark.vue"
+import StepConnector from "./StepConnector.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 export interface Step {
@@ -50,7 +50,7 @@ function isCurrent(i: number): boolean {
 
 // The stepper spaces its steps evenly; a compact wizard header needs that spacing under the consumer's control.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "flex items-center gap-2",
+  "@container flex w-full min-w-0 items-center gap-2",
 )
 </script>
 
@@ -61,54 +61,48 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     <li
       v-for="(step, i) in steps"
       :key="step.key ?? i"
-      class="flex flex-1 items-center gap-2 last:flex-none"
+      class="flex min-w-0 flex-1 items-center gap-2 last:flex-none"
       :aria-current="isCurrent(i) ? 'step' : undefined"
     >
-      <div class="flex items-center gap-2">
-        <span
-          class="flex size-7 shrink-0 items-center justify-center rounded-pill border text-xs font-semibold transition-colors duration-[var(--duration-medium)]"
-          :class="isCompleted(step, i)
-            ? 'border-transparent bg-brand text-ink-inverse'
-            : isCurrent(i)
-              ? 'border-brand text-brand'
-              : 'border-line text-muted'"
-        >
-          <!-- The number turns into the tick rather than swapping for it. -->
-          <LpRollingText
-            mode="flip"
-            :duration="260"
-            :value="isCompleted(step, i) ? 'done' : step.icon ? 'icon' : String(i + 1)"
-          >
-            <template #default="{ value }">
-              <LpIcon v-if="value === 'done'" name="lucide:check" :size="14" />
-              <LpIcon v-else-if="value === 'icon' && step.icon" :name="step.icon" :size="14" />
-              <template v-else>{{ value }}</template>
-            </template>
-          </LpRollingText>
-        </span>
+      <div class="flex min-w-0 items-center">
+        <!-- The kit's step mark, as a wizard draws it: the number turns into the
+             tick rather than swapping for it. -->
+        <LpStepMark
+          variant="step"
+          :status="isCompleted(step, i) ? 'success' : isCurrent(i) ? 'current' : 'pending'"
+          :number="i + 1"
+          :icon="step.icon"
+          class="size-7 text-xs"
+        />
+        <!-- Where only the current step has room for its name (a narrow
+             container), the others fold their label to nothing rather than
+             dropping it in one frame: the row slides instead of jumping when
+             the step changes. Folded, the words stay in the reading order. -->
         <span
-          class="text-sm transition-colors duration-[var(--duration-medium)]"
-          :class="isCompleted(step, i) || isCurrent(i) ? 'text-ink' : 'text-muted'"
+          class="grid min-w-0 grid-cols-[1fr] transition-[grid-template-columns,opacity] duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none"
+          :class="!isCurrent(i) && '@max-md:grid-cols-[0fr] @max-md:opacity-0'"
         >
-          {{ step.label }}
-          <!-- Status for screen readers; the colour/check are visual only. -->
-          <span class="sr-only">{{
-            isCompleted(step, i)
-              ? "(completed)"
-              : isCurrent(i)
-                ? "(current step)"
-                : ""
-          }}</span>
+          <span class="min-w-0 overflow-hidden">
+            <span
+              class="block truncate pl-2 text-sm transition-colors duration-[var(--duration-medium)]"
+              :class="isCompleted(step, i) || isCurrent(i) ? 'text-ink' : 'text-muted'"
+            >
+              {{ step.label }}
+              <!-- Status for screen readers; the colour/check are visual only. -->
+              <span class="sr-only">{{
+                isCompleted(step, i)
+                  ? "(completed)"
+                  : isCurrent(i)
+                    ? "(current step)"
+                    : ""
+              }}</span>
+            </span>
+          </span>
         </span>
       </div>
       <!-- The connector fills from the step it leaves towards the next one,
            so finishing a step reads as moving forward. -->
-      <span v-if="i < steps.length - 1" class="relative h-px flex-1 overflow-hidden bg-line">
-        <span
-          class="absolute inset-0 origin-left bg-brand transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none rtl:origin-right"
-          :class="isCompleted(step, i) ? 'scale-x-100' : 'scale-x-0'"
-        />
-      </span>
+      <StepConnector v-if="i < steps.length - 1" :filled="isCompleted(step, i)" class="h-px" />
     </li>
   </ol>
 </template>

package/src/components/LpSwap.vue

@@ -11,7 +11,7 @@
  *   </LpSwap>
  *
  * The outgoing content fades out quickly, the incoming one rises in the way
- * LpTabs panels do (`tab-in`), and the box eases between the two heights
+ * LpTabs panels do (`rise-in`), and the box eases between the two heights
  * through LpShift, so what sits under it glides instead of jolting.
  *
  * `swapKey` is what decides that the content is "another one". Change it per
@@ -33,7 +33,7 @@ defineProps<{
     <Transition
       mode="out-in"
       :css="!disabled"
-      enter-active-class="animate-[tab-in_220ms_var(--ease-emphasized)] motion-reduce:animate-none"
+      enter-active-class="animate-[rise-in_220ms_var(--ease-emphasized)] [--rise:6px] motion-reduce:animate-none"
       leave-active-class="transition-opacity duration-[var(--duration-fast)] ease-out motion-reduce:transition-none"
       leave-to-class="opacity-0"
     >

package/src/components/LpSwitch.vue

@@ -10,7 +10,7 @@ import { computed, useId, useSlots } from "vue"
 import { SwitchRoot, SwitchThumb } from "reka-ui"
 import { useFieldControl } from "../composables/useField"
 import { useOptimisticToggle } from "../composables/useOptimisticToggle"
-import LpIcon from "./LpIcon.vue"
+import LpLoader from "./LpLoader.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
@@ -82,8 +82,8 @@ function onUpdate(value: boolean) {
 </script>
 
 <template>
-  <label v-if="labelled" :class="[rootClass, field.disabled && 'cursor-not-allowed']">
-    <span v-if="labelPosition === 'start'" class="flex min-w-0 flex-col">
+  <component :is="labelled ? 'label' : 'span'" :class="labelled ? [rootClass, field.disabled && 'cursor-not-allowed'] : 'contents'">
+    <span v-if="labelled && labelPosition === 'start'" class="flex min-w-0 flex-col">
       <slot>{{ label }}</slot>
       <span v-if="description" :id="descriptionId" class="text-xs text-muted">{{ description }}</span>
     </span>
@@ -92,33 +92,26 @@ function onUpdate(value: boolean) {
       :id="field.id"
       :model-value="modelValue"
       :disabled="field.disabled"
+      :required="field.required"
       :aria-describedby="describedBy"
       :aria-busy="pending || undefined"
-      :class="TRACK"
+      :class="labelled ? TRACK : rootClass"
       @update:model-value="onUpdate"
     >
       <SwitchThumb :class="[THUMB, 'grid place-items-center']">
-        <LpIcon v-if="pending" name="lucide:loader-circle" class="size-2.5 animate-spin text-ink-inverse group-data-[state=checked]/switch:text-ink motion-reduce:animate-none" />
+        <!-- Hidden from screen readers: the switch itself says aria-busy, and
+             a "Loading…" inside it would become part of its name. -->
+        <LpLoader
+          :active="pending"
+          size="inline"
+          aria-hidden="true"
+          class="text-[10px] text-ink-inverse group-data-[state=checked]/switch:text-ink"
+        />
       </SwitchThumb>
     </SwitchRoot>
-    <span v-if="labelPosition === 'end'" class="flex min-w-0 flex-col">
+    <span v-if="labelled && labelPosition === 'end'" class="flex min-w-0 flex-col">
       <slot>{{ label }}</slot>
       <span v-if="description" :id="descriptionId" class="text-xs text-muted">{{ description }}</span>
     </span>
-  </label>
-  <SwitchRoot
-    v-else
-    v-bind="rest"
-    :id="field.id"
-    :model-value="modelValue"
-    :disabled="field.disabled"
-    :aria-describedby="describedBy"
-    :aria-busy="pending || undefined"
-    :class="rootClass"
-    @update:model-value="onUpdate"
-  >
-    <SwitchThumb :class="[THUMB, 'grid place-items-center']">
-      <LpIcon v-if="pending" name="lucide:loader-circle" class="size-2.5 animate-spin text-ink-inverse group-data-[state=checked]/switch:text-ink motion-reduce:animate-none" />
-    </SwitchThumb>
-  </SwitchRoot>
+  </component>
 </template>

package/src/components/LpTable.vue

@@ -9,6 +9,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useAtt
 import LpCheckbox from "./LpCheckbox.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpEmptyState from "./LpEmptyState.vue"
+import LpBadge from "./LpBadge.vue"
 import LpIcon from "./LpIcon.vue"
 import LpSkeleton from "./LpSkeleton.vue"
 import LpPagination from "./LpPagination.vue"
@@ -19,14 +20,16 @@ import LpShift from "./LpShift.vue"
 import LpTableFilter, { type TableFilterOption } from "./LpTableFilter.vue"
 import { useKitStorage } from "../composables/usePersisted"
 import { useAsyncTask } from "../composables/useAsyncTask"
+import { useTableFacets } from "./tableFacets"
 import { useHotkeys } from "../composables/useHotkeys"
 import { usePaintSelect } from "../composables/usePaintSelect"
 import { useRovingFocus } from "../composables/useRovingFocus"
 import { useLabels } from "../composables/useLpConfig"
+import { useResizeObserver } from "../composables/useResizeObserver"
 import { compareValues } from "./tableSort"
 import LpButton from "./LpButton.vue"
 import { downloadFile, fileStem, toCsv, type CsvOptions } from "./exportData"
-import { countValues, parseTableState, serializeTableState, summarizeShown } from "./tableFilter"
+import { parseTableState, serializeTableState, summarizeShown } from "./tableFilter"
 import { resolveRowMenu, type TableRowMenuResult } from "./tableRowMenu"
 
 export interface TableColumn<Row> {
@@ -492,18 +495,10 @@ const hiddenColumns = ref<Set<string>>(new Set())
 // while the table itself widens with whatever it overflows by.
 const tableEl = ref<HTMLElement | null>(null)
 const tableWidth = ref(Number.POSITIVE_INFINITY)
-let widthObserver: ResizeObserver | undefined
-watch(
-  tableEl,
-  (table) => {
-    widthObserver?.disconnect()
-    const el = table?.closest<HTMLElement>("[data-reka-scroll-area-viewport]") ?? table?.parentElement
-    if (!el || typeof ResizeObserver === "undefined") return
-    widthObserver = new ResizeObserver(() => (tableWidth.value = el.clientWidth))
-    widthObserver.observe(el)
-    tableWidth.value = el.clientWidth
-  },
-  { flush: "post" },
+useResizeObserver(
+  () => tableEl.value?.closest<HTMLElement>("[data-reka-scroll-area-viewport]") ?? tableEl.value?.parentElement,
+  (_, el) => (tableWidth.value = el.clientWidth),
+  { immediate: true },
 )
 
 const visibleColumns = computed(() =>
@@ -512,15 +507,16 @@ const visibleColumns = computed(() =>
   ),
 )
 
-/** The distinct values a filterable column holds, in first-seen order. */
+const facetColumns = computed(() => props.columns.filter((col) => col.filterable).map((col) => col.key))
+const localFacets = useTableFacets({
+  rows: () => props.load ? [] : props.rows,
+  columns: () => facetColumns.value,
+  hidden: () => hiddenValues.value,
+})
+
 function valuesOf(col: TableColumn<T>): unknown[] {
-  if (props.load && facets.value[col.key]) return facets.value[col.key]
-  const seen: unknown[] = []
-  for (const row of sourceRows.value) {
-    const v = row[col.key]
-    if (!seen.includes(v)) seen.push(v)
-  }
-  return seen
+  if (props.load) return facets.value[col.key] ?? [...new Set(sourceRows.value.map((row) => row[col.key]))]
+  return localFacets.distinct(col.key)
 }
 
 function isValueHidden(key: string, value: unknown): boolean {
@@ -555,17 +551,16 @@ function labelOf(col: TableColumn<T>, value: unknown): string {
  * way a faceted search does: with "Status: open" set, the "Owner" filter
  * counts open rows, which is what the user is about to narrow further.
  */
-function filterOptions(col: TableColumn<T>): TableFilterOption[] {
-  let counts: Map<unknown, number> | undefined
-  if (!props.load) {
-    const others = Object.entries(hiddenValues.value).filter(([key, set]) => key !== col.key && set.size)
-    const rows = others.length
-      ? props.rows.filter((row) => others.every(([key, hidden]) => !hidden.has(row[key])))
-      : props.rows
-    counts = countValues(rows, col.key)
-  }
-  return valuesOf(col).map((value) => ({ value, label: labelOf(col, value), count: counts?.get(value) ?? (counts ? 0 : undefined) }))
-}
+const facetOptions = computed(() => new Map(props.columns.filter((col) => col.filterable).map((col) => {
+  return [col.key, computed(() => {
+    const counts = props.load ? undefined : localFacets.counts(col.key)
+    return valuesOf(col).map((value) => ({
+      value,
+      label: labelOf(col, value),
+      count: counts?.get(value) ?? (counts ? 0 : undefined),
+    }))
+  })]
+})))
 
 /** Every column with something hidden, summarised for the chips above the table. */
 const activeFilters = computed(() =>
@@ -791,9 +786,10 @@ function fetchPage(delay = 0) {
   })
 }
 
-// A new sort or filter starts from the first page: page 4 of a different
-// question is a page of nothing in particular.
-watch([activeSort, hiddenValues], () => {
+// A new sort, filter or page size starts from the first page: page 4 of a
+// different question, or of a different cut of the rows, is a page of nothing
+// in particular.
+watch([activeSort, hiddenValues, () => props.pageSize], () => {
   if (!props.load) return
   if (page.value !== 1) page.value = 1
   else fetchPage(props.debounce)
@@ -1061,26 +1057,18 @@ function onRowKeydown(event: KeyboardEvent) {
 // starts below the header. Tracked live (density/content can change it).
 const headEl = ref<HTMLElement | null>(null)
 const headHeight = ref(0)
-let ro: ResizeObserver | undefined
+useResizeObserver(
+  () => (props.stickyHeader ? headEl.value : null),
+  (_, el) => (headHeight.value = (el as HTMLElement).offsetHeight),
+  { immediate: true },
+)
 watch(
-  [headEl, () => props.stickyHeader],
-  ([el, sticky]) => {
-    ro?.disconnect()
-    if (!el || !sticky || typeof ResizeObserver === "undefined") {
-      headHeight.value = 0
-      return
-    }
-    ro = new ResizeObserver(() => {
-      headHeight.value = el.offsetHeight
-    })
-    ro.observe(el)
-    headHeight.value = el.offsetHeight
+  () => props.stickyHeader,
+  (sticky) => {
+    if (!sticky) headHeight.value = 0
   },
-  { immediate: true, flush: "post" },
 )
 onBeforeUnmount(() => {
-  ro?.disconnect()
-  widthObserver?.disconnect()
   if (motionTimer) clearTimeout(motionTimer)
 })
 
@@ -1108,21 +1096,17 @@ const barInsetTop = computed(() =>
   <LpShift class="-mb-3">
     <div v-if="showBar" class="flex min-h-8 items-center gap-x-3 pb-3 text-xs">
       <div v-if="activeFilters.length" class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
-        <span
+        <LpBadge
           v-for="f in activeFilters"
           :key="f.col.key"
-          class="inline-flex max-w-72 animate-[chip-in_var(--duration-fast)_var(--ease-emphasized)] items-center gap-1 rounded-pill bg-brand-soft py-0.5 pr-1 pl-2.5 text-ink motion-reduce:animate-none"
+          tone="brand"
+          removable
+          :remove-label="text.clearFilter.replace('{column}', f.col.label)"
+          class="max-w-72 animate-[chip-in_var(--duration-fast)_var(--ease-emphasized)] font-normal text-ink motion-reduce:animate-none"
+          @remove="showAllValues(f.col.key)"
         >
           <span class="truncate"><span class="text-muted">{{ f.col.label }}:</span> {{ f.text }}</span>
-          <button
-            type="button"
-            class="grid size-4 shrink-0 place-items-center rounded-pill text-muted outline-none transition-colors duration-fast hover:bg-ink/10 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
-            :aria-label="text.clearFilter.replace('{column}', f.col.label)"
-            @click="showAllValues(f.col.key)"
-          >
-            <LpIcon name="lucide:x" :size="12" />
-          </button>
-        </span>
+        </LpBadge>
         <button
           v-if="activeFilters.length > 1"
           type="button"
@@ -1286,7 +1270,7 @@ const barInsetTop = computed(() =>
                 </button>
               </template>
               <LpTableFilter
-                :options="filterOptions(col)"
+                :options="facetOptions.get(col.key)?.value ?? []"
                 :hidden="hiddenValues[col.key] ?? new Set()"
                 :labels="filterLabels()"
                 @update:hidden="(next) => setHidden(col.key, next)"

package/src/components/LpTableFilter.vue

@@ -98,6 +98,7 @@ const action =
       v-model="query"
       size="sm"
       icon="lucide:search"
+      clearable
       :placeholder="labels.search"
       :aria-label="labels.search"
     />

package/src/components/LpTableOfContents.vue

@@ -2,11 +2,11 @@
 /*
  * On-this-page table of contents with scroll-spy. Data-driven: pass the heading
  * tree (id + text, optional nested children) and it renders a rail of anchor
- * links, tracking which section is in view via IntersectionObserver and sliding
+ * links, tracking which section is in view from heading positions and sliding
  * a brand indicator to it (motion-v shared layoutId — same feel as Tabs/Sidebar).
  *
  * The kit convention for a docs/article TOC so apps stop re-implementing the
- * observer + active-link math. Clicking a link smooth-scrolls to the heading and
+ * scroll-spy + active-link math. Clicking a link smooth-scrolls to the heading and
  * marks it active immediately (so the pill doesn't lag the scroll).
  */
 import { Motion } from "motion-v"
@@ -27,7 +27,12 @@ const props = withDefaults(
     links: TocLink[]
     /** Heading shown above the list (defaults to the `title` label). */
     title?: string
-    /** px offset from the top used as the scroll-spy trigger line. */
+    /**
+     * The least distance, px from the top, of the scroll-spy trigger line. The
+     * line sits at a quarter of the view when that is lower: a heading a
+     * couple of lines down already starts what is being read, and a fixed line
+     * near the top kept the previous section lit under it.
+     */
     offset?: number
     labels?: Partial<{ title: string }>
     /**
@@ -70,7 +75,7 @@ function flatIds(links: TocLink[]): string[] {
   return links.flatMap((l) => [l.id, ...(l.children ? flatIds(l.children) : [])])
 }
 
-let observer: IntersectionObserver | null = null
+let stopSpy: (() => void) | null = null
 
 // While a click-driven smooth scroll is in flight, freeze scroll-spy so the bar
 // doesn't skip through every heading the page passes on the way to the target.
@@ -78,34 +83,53 @@ let spySuppressed = false
 let rafId: number | null = null
 let safetyTimer: ReturnType<typeof setTimeout> | null = null
 
+/*
+ * The current section is read from positions on every scroll, not from which
+ * headings cross a thin band: a band misses the moment no heading is in it,
+ * and scrolling back to the top then left the second section lit. The active
+ * heading is the last one whose top has passed the offset line; above the
+ * first, the first; at the very end of the scroll, the last, which a short
+ * final section could otherwise never reach. Works for the window and for a
+ * scroll area the headings live in.
+ */
 function setup() {
-  observer?.disconnect()
+  stopSpy?.()
+  stopSpy = null
   const ids = flatIds(props.links)
   if (!ids.length) return
-
-  // Track the topmost heading whose top has crossed the offset line. We keep a
-  // set of "currently intersecting" and, on every change, pick the first id in
-  // document order that's visible — falling back to the last one scrolled past.
-  const visible = new Set<string>()
-  observer = new IntersectionObserver(
-    (entries) => {
-      for (const e of entries) {
-        if (e.isIntersecting) visible.add(e.target.id)
-        else visible.delete(e.target.id)
-      }
-      if (spySuppressed) return // ignore intermediate sections during a click-scroll
-      const firstVisible = ids.find((id) => visible.has(id))
-      if (firstVisible) activeId.value = firstVisible
-    },
-    { rootMargin: `-${props.offset}px 0px -70% 0px`, threshold: 0 },
-  )
-
-  for (const id of ids) {
-    const el = document.getElementById(id)
-    if (el) observer.observe(el)
+  const first = document.getElementById(ids[0]!)
+  const scroller = first ? scrollParent(first) : null
+  let frame = 0
+
+  const measure = () => {
+    frame = 0
+    if (spySuppressed) return
+    const top = scroller ? scroller.getBoundingClientRect().top : 0
+    const headings = ids.map((id) => document.getElementById(id)).filter((el): el is HTMLElement => !!el)
+    if (!headings.length) return
+    let current = headings[0]!.id
+    const view = scroller ? scroller.clientHeight : window.innerHeight
+    const line = Math.max(props.offset, view / 4)
+    for (const el of headings) if (el.getBoundingClientRect().top - top <= line + 1) current = el.id
+    const scrolled = scroller ? scroller.scrollTop : window.scrollY
+    const end = scroller
+      ? scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2
+      : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2
+    if (scrolled > 0 && end) current = headings[headings.length - 1]!.id
+    activeId.value = current
+  }
+  const onScroll = () => {
+    if (!frame) frame = requestAnimationFrame(measure)
+  }
+  const target: HTMLElement | Window = scroller ?? window
+  target.addEventListener("scroll", onScroll, { passive: true })
+  window.addEventListener("resize", onScroll)
+  measure()
+  stopSpy = () => {
+    target.removeEventListener("scroll", onScroll)
+    window.removeEventListener("resize", onScroll)
+    if (frame) cancelAnimationFrame(frame)
   }
-  // Seed the initial active id (top-most heading) so the bar isn't empty.
-  if (!activeId.value) activeId.value = ids[0] ?? ""
 }
 
 // Suppress scroll-spy until the smooth scroll settles. The unfreeze isn't on a
@@ -157,7 +181,7 @@ function onClick(id: string, ev: MouseEvent) {
 onMounted(setup)
 watch(() => props.links, setup, { deep: true })
 onBeforeUnmount(() => {
-  observer?.disconnect()
+  stopSpy?.()
   unfreeze()
 })
 </script>

package/src/components/LpTabs.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { Motion, useReducedMotion } from "motion-v"
+import { Motion } from "motion-v"
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui"
 import { computed, nextTick, ref, useId, watch } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
+import { prefersReducedMotion } from "../composables/easing"
+import AttentionDot from "./AttentionDot.vue"
 import LpBadge from "./LpBadge.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
@@ -99,7 +101,7 @@ watch(current, () => {
     const end = start + active.offsetWidth
     if (start >= row.scrollLeft && end <= row.scrollLeft + row.clientWidth) return
     const left = start < row.scrollLeft ? start : end - row.clientWidth
-    row.scrollTo({ left, behavior: reduceMotion.value ? "auto" : "smooth" })
+    row.scrollTo({ left, behavior: prefersReducedMotion() ? "auto" : "smooth" })
   })
 })
 
@@ -120,14 +122,9 @@ const hovered = ref<string | null>(null)
 const pillTransition = usePillTransition()
 
 // Panel height spring: when the active #panel differs in height, the wrapper
-// grows/shrinks smoothly instead of snapping. Same feel as the drag layout in
-// LayoutNode; collapses to instant under reduced motion.
-const reduceMotion = useReducedMotion()
-const panelLayoutTransition = computed(() =>
-  reduceMotion.value
-    ? { duration: 0 }
-    : { type: "spring" as const, stiffness: 520, damping: 42, mass: 0.9 },
-)
+// grows/shrinks smoothly instead of snapping. The kit's layout feel, as the
+// drag layout in LayoutNode; collapses to instant under reduced motion.
+const panelLayoutTransition = usePillTransition("layout")
 
 // A bottom bar marks only the active tab: on a phone a tap is the hover, and
 // a bar that chased the mouse across a desktop window would point at a tab
@@ -226,11 +223,7 @@ function releaseFocusAfterPointer(event: PointerEvent) {
         />
         <span v-if="item.icon" class="relative z-10 inline-flex">
           <LpIcon :name="item.icon" :size="bottom ? 22 : 14" />
-          <span
-            v-if="item.dot"
-            aria-hidden="true"
-            class="absolute -right-1 -top-0.5 size-2 rounded-full bg-accent"
-          />
+          <AttentionDot v-if="item.dot" corner />
           <!-- On a bottom bar the count rides on the icon's corner, as phone
                navs draw it: the label under the icon has no room beside it. -->
           <Transition name="lp-tab-badge">
@@ -245,11 +238,7 @@ function releaseFocusAfterPointer(event: PointerEvent) {
           </Transition>
         </span>
         <span class="relative z-10" :class="bottom ? 'max-w-full truncate' : ''">{{ item.label }}</span>
-        <span
-          v-if="item.dot && !item.icon"
-          aria-hidden="true"
-          class="relative z-10 size-1.5 self-start rounded-full bg-accent"
-        />
+        <AttentionDot v-if="item.dot && !item.icon" />
         <!-- The count rolls when it changes, and the chip scales in and out
              rather than popping. -->
         <Transition name="lp-tab-badge">
@@ -288,7 +277,7 @@ function releaseFocusAfterPointer(event: PointerEvent) {
         v-for="item in items"
         :key="item.value"
         :value="item.value"
-        class="outline-none data-[state=active]:animate-[tab-in_200ms_var(--ease-emphasized)]"
+        class="outline-none [--rise:6px] data-[state=active]:animate-[rise-in_200ms_var(--ease-emphasized)]"
       >
         <slot name="panel" :value="item.value" />
       </TabsContent>