@nuxtseo/design-system 0.0.0-stage → 0.1.0

package/app/components/data/UiLineChart.vue

@@ -0,0 +1,431 @@
+<script lang="ts">
+export interface LineTooltipRow {
+  color: string
+  label: string
+  value: string
+}
+
+export function sharedLineDomain(
+  data: Array<Record<string, unknown>>,
+  seriesKeys: string[],
+  minDomainMaximum = 1,
+): [number, number] {
+  const values = data.flatMap(row => seriesKeys.map((key) => {
+    const raw = row[key]
+    const value = typeof raw === 'number' ? raw : Number(raw)
+    return Number.isFinite(value) ? value : 0
+  }))
+  // Non-negative data keeps its zero baseline. A signed series (a
+  // desktop-minus-mobile gap) follows its values below zero; clipped to the
+  // floor, "mobile leads" drew the same line as "no gap".
+  const lower = Math.min(0, ...values)
+  const upper = Math.max(0, minDomainMaximum, ...values)
+  return [lower * 1.1, (lower === upper ? 1 : upper) * 1.1]
+}
+
+export function lineTickIndices(length: number, width: number): number[] {
+  if (length <= 1)
+    return [0]
+  const widthBudget = width > 0 ? Math.max(2, Math.floor(width / 96)) : 6
+  const count = Math.min(6, widthBudget, length)
+  const step = (length - 1) / (count - 1)
+  return Array.from({ length: count }, (_, i) => Math.round(i * step))
+}
+
+export function escapeChartTooltipHtml(value: unknown): string {
+  return String(value)
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll('\'', '&#39;')
+}
+
+export function renderLineTooltip(header: string, rows: LineTooltipRow[]): string {
+  const renderedRows = rows.map(row => `
+    <div style="display:flex;gap:12px;justify-content:space-between;align-items:center">
+      <span style="display:flex;align-items:center;gap:6px;color:var(--ui-text-muted)">
+        <span style="width:8px;height:8px;border-radius:9999px;background:${escapeChartTooltipHtml(row.color)}"></span>${escapeChartTooltipHtml(row.label)}
+      </span>
+      <span style="font-variant-numeric:tabular-nums;color:var(--ui-text-highlighted)">${escapeChartTooltipHtml(row.value)}</span>
+    </div>`).join('')
+  return `<div style="display:flex;flex-direction:column;gap:4px;min-width:140px">
+    <div style="font-size:14px;color:var(--ui-text-muted);margin-bottom:2px">${escapeChartTooltipHtml(header)}</div>${renderedRows}
+  </div>`
+}
+</script>
+
+<script lang="ts" setup generic="T extends Record<string, unknown>">
+import type { ChartAnnotation, ChartAnnotationOptions } from '../../utils/chartAnnotations'
+import { TextAlign } from '@unovis/ts'
+import { VisArea, VisAxis, VisCrosshair, VisLine, VisScatter, VisTooltip, VisXYContainer } from '@unovis/vue'
+import { useElementSize } from '@vueuse/core'
+import { computed, ref, useTemplateRef } from 'vue'
+import { ClientOnly, UiChartAnnotations, UiChartDataReveal } from '#components'
+import { formatGroupedNumber } from '../../composables/formatting'
+import { indexAnnotationsByDay } from '../../utils/chartAnnotations'
+
+// Generic interactive line chart. Every series shares one zero-based y scale:
+// callers may compare same-unit series here, while different units belong in
+// separate charts. Crosshair + tooltip make the exact rows available on hover.
+
+interface LineSeries {
+  /** Row key holding this series' numeric value. */
+  key: string
+  /** Legend/tooltip label. Defaults to `key`. */
+  label?: string
+  /** Stroke colour (any CSS colour). Defaults to a rotating palette. */
+  color?: string
+  /** Draw a translucent area under the line. Default true. */
+  area?: boolean
+}
+
+const {
+  data,
+  xKey,
+  series,
+  height = 220,
+  selectedX,
+  settledThrough,
+  xFormat,
+  yFormat,
+  minDomainMaximum = 1,
+  annotations,
+  annotationOptions,
+} = defineProps<{
+  data: T[]
+  /** Row key for the x dimension (e.g. a date column). */
+  xKey: keyof T & string
+  series: LineSeries[]
+  height?: number | string
+  /** Highlight one x value, for example the selected crawl generation. */
+  selectedX?: T[keyof T] | null
+  /**
+   * The last x value whose data is FINAL. Everything after it is still
+   * settling — a partial sum that will keep rising — and renders dashed with
+   * no area fill instead of as a finished point.
+   *
+   * Search Console lands two to three days behind, so without this every
+   * clicks chart ends in a cliff that reads as a traffic collapse. Omit when
+   * the whole window is settled.
+   */
+  settledThrough?: T[keyof T] | null
+  /** Format an x value for axis ticks + the tooltip header. */
+  xFormat?: (raw: T[keyof T]) => string
+  /** Format a y value for the tooltip, per series key. */
+  yFormat?: (value: number, seriesKey: string) => string
+  /**
+   * The lowest top the y scale may have. The default 1 keeps a count chart of
+   * zeros from collapsing. Pass 0 for a small rate (a CTR of 0.02), which the
+   * default would flatten against the floor.
+   */
+  minDomainMaximum?: number
+  /**
+   * Day-anchored event annotations (thin marker line + dot). Re-anchored onto
+   * this chart's index x-scale by matching each annotation's day against the
+   * row's `xKey` value — rows whose x isn't a date simply match nothing, so
+   * non-date charts stay marker-free without opting out.
+   */
+  annotations?: ChartAnnotation[]
+  /** Marker presentation shared by single and stacked annotation popovers. */
+  annotationOptions?: ChartAnnotationOptions
+}>()
+
+const emit = defineEmits<{
+  annotationEdit: [annotation: ChartAnnotation]
+}>()
+
+const annotationInteracting = ref(false)
+
+// Semantic chart colours keep default series theme-aware. Callers can still
+// provide a more specific colour when the metric has an established meaning.
+const PALETTE = [
+  'var(--ui-color-primary-500)',
+  'var(--ui-color-success-500)',
+  'var(--ui-color-warning-500)',
+  'var(--ui-color-error-500)',
+  'var(--ui-color-info-500)',
+]
+
+const resolvedSeries = computed(() => series.map((s, i) => ({
+  key: s.key,
+  label: s.label ?? s.key,
+  color: s.color ?? PALETTE[i % PALETTE.length]!,
+  area: s.area ?? true,
+})))
+
+// No horizontal inset — the line bleeds edge-to-edge (matches ProGraphGsc).
+// Edge tick labels (tickIndices always includes the first and last point) are
+// kept inside via the text-anchor overrides in <style> below.
+const margin = { left: 0, right: 0, top: 8, bottom: 28 }
+const chartHeight = computed(() => Number(height) || 220)
+const chartRoot = useTemplateRef<HTMLElement>('chartRoot')
+const { width: containerWidth } = useElementSize(chartRoot)
+// Unovis measures its parent once when `width` is omitted. Feed the observed
+// container width back as a prop so desktop-to-mobile resizes re-render every
+// point and the selected trailing crawl cannot remain clipped off-canvas.
+const measuredWidth = computed(() => Math.max(0, Math.floor(containerWidth.value)))
+
+// A missing point (null, undefined, or not a number) is `undefined`, never 0:
+// Unovis leaves a gap for it, and the tooltip and the table print a dash. Read
+// as 0, a sparse series drew a dip to zero and announced "0" for that day.
+function num(v: unknown): number | undefined {
+  if (v == null || v === '')
+    return undefined
+  const n = typeof v === 'number' ? v : Number(v)
+  return Number.isFinite(n) ? n : undefined
+}
+
+// x accessor is the row index — keeps spacing even regardless of x type (dates, labels, …).
+const x = (_d: T, i: number) => i
+// Crosshair can render before its container inherits the line accessors.
+// Give it the complete series so snapping also works during data changes.
+const crosshairY = computed(() => resolvedSeries.value.map(s => (d: T) => num(d[s.key])))
+
+const yDomain = computed<[number, number]>(() => {
+  return sharedLineDomain(data, resolvedSeries.value.map(series => series.key), minDomainMaximum)
+})
+
+function selectedSize(d: T): number {
+  return selectedX != null && Object.is(d[xKey], selectedX) ? 8 : 0
+}
+
+// Index of the last settled row. `null` (the default, and an x value that
+// isn't in `data`) means the whole window is final and the chart draws exactly
+// as it did before this prop existed.
+const settledIndex = computed<number | null>(() => {
+  if (settledThrough == null)
+    return null
+  const i = data.findIndex(row => Object.is(row[xKey], settledThrough))
+  return i === -1 ? null : i
+})
+
+// The two spans overlap by one point on purpose: the dashed run starts at the
+// last settled row so the line stays visually continuous across the boundary.
+function settledY(d: T, i: number, key: string): number | undefined {
+  const cut = settledIndex.value
+  return cut != null && i > cut ? undefined : num(d[key])
+}
+function provisionalY(d: T, i: number, key: string): number | undefined {
+  const cut = settledIndex.value
+  return cut == null || i < cut ? undefined : num(d[key])
+}
+
+// Evenly-spaced tick indices (~6), formatted from the row at that index. Index-based rather
+// than calendar-aware so non-date x values work too.
+const tickIndices = computed(() => {
+  return lineTickIndices(data.length, measuredWidth.value)
+})
+function tickFormat(i: number): string {
+  const row = data[i]
+  if (!row)
+    return ''
+  return xFormat ? xFormat(row[xKey]) : String(row[xKey])
+}
+
+// Day-anchored annotations onto the index x-scale (unmatched days drop out).
+const anchoredAnnotations = computed(() =>
+  indexAnnotationsByDay(annotations, data.map(row => String(row[xKey]))))
+const annotationXDomain = computed<[number, number] | undefined>(() =>
+  data.length > 1 ? [0, data.length - 1] : undefined)
+
+// Force a remount when the dataset identity changes so unovis recomputes scales cleanly.
+const chartKey = computed(() => `${data.length}-${String(data[0]?.[xKey] ?? '')}-${String(data.at(-1)?.[xKey] ?? '')}`)
+
+function fmtY(value: number | undefined, key: string): string {
+  if (value === undefined)
+    return '—'
+  return yFormat ? yFormat(value, key) : formatGroupedNumber(value)
+}
+
+// The drawn lines encode data by position only, so the SVG layers are hidden
+// from assistive tech; a visually-hidden table below carries the same series
+// values as text (mirrors UiScatterPlot). Rendered server-side too (no client
+// deps), so the data is present before hydration.
+const ariaLabel = computed(() => `Line chart of ${resolvedSeries.value.map(s => s.label).join(', ')}`)
+function fmtX(row: T): string {
+  return xFormat ? xFormat(row[xKey]) : String(row[xKey])
+}
+
+// Crosshair tooltip: x header + one row per series. Portaled to body, so it leans on inherited
+// CSS custom properties for theming rather than scoped classes.
+function tooltipTemplate(d: T): string {
+  return renderLineTooltip(
+    String(xFormat ? xFormat(d[xKey]) : d[xKey]),
+    resolvedSeries.value.map(s => ({
+      color: s.color,
+      label: s.label,
+      value: fmtY(num(d[s.key]), s.key),
+    })),
+  )
+}
+</script>
+
+<template>
+  <div
+    ref="chartRoot"
+    data-ui="UiLineChart"
+    class="ui-line-chart"
+    :style="{ height: `${chartHeight}px` }"
+  >
+    <div v-if="data.length < 2" class="flex items-center justify-center h-full text-sm text-muted">
+      Not enough data to chart.
+    </div>
+
+    <ClientOnly v-else>
+      <VisXYContainer
+        :key="chartKey"
+        :width="measuredWidth || undefined"
+        :height="chartHeight"
+        :data="data"
+        :margin="margin"
+        :auto-margin="false"
+        :y-domain="yDomain"
+        aria-hidden="true"
+        class="chart-layer chart-layer--interactive"
+      >
+        <template v-for="s in resolvedSeries" :key="s.key">
+          <!-- Area stops at the settled boundary — filling under a partial sum
+               overstates it more than the line alone does. -->
+          <VisArea
+            v-if="s.area"
+            curve-type="monotoneX"
+            :x="x"
+            :y="(d: T, i: number) => settledY(d, i, s.key)"
+            :color="s.color"
+            :opacity="0.12"
+          />
+          <VisLine
+            curve-type="monotoneX"
+            :x="x"
+            :y="(d: T, i: number) => settledY(d, i, s.key)"
+            :color="s.color"
+            :line-width="2"
+          />
+          <VisLine
+            v-if="settledIndex != null"
+            curve-type="monotoneX"
+            :x="x"
+            :y="(d: T, i: number) => provisionalY(d, i, s.key)"
+            :color="s.color"
+            :line-width="2"
+            :line-dash-array="[4, 3]"
+          />
+        </template>
+        <VisScatter
+          v-if="selectedX != null && resolvedSeries[0]"
+          :x="x"
+          :y="(d: T) => num(d[resolvedSeries[0]!.key])"
+          :size="selectedSize"
+          :color="resolvedSeries[0].color"
+          stroke-color="var(--ui-bg)"
+          :stroke-width="2"
+        />
+        <VisAxis
+          type="x"
+          :tick-line="false"
+          :grid-line="false"
+          :domain-line="false"
+          :tick-values="tickIndices"
+          :tick-format="tickFormat"
+          :tick-text-align="TextAlign.Center"
+          tick-text-font-size="14px"
+          tick-text-color="var(--ui-text-muted)"
+        />
+        <!-- A vertical guide plus the tooltip carries the multi-series read;
+             the selected crawl marker remains the only persistent point. -->
+        <VisCrosshair v-if="!annotationInteracting" :x="x" :y="crosshairY" color="none" :template="tooltipTemplate" />
+        <VisTooltip v-if="!annotationInteracting" />
+      </VisXYContainer>
+
+      <!-- Day-anchored annotation markers (shared overlay; root is position:relative). -->
+      <UiChartAnnotations
+        :annotations="anchoredAnnotations"
+        :x-domain="annotationXDomain"
+        :options="annotationOptions"
+        @edit="emit('annotationEdit', $event)"
+        @interaction-change="annotationInteracting = $event"
+      />
+    </ClientOnly>
+
+    <!-- Screen-reader equivalent of the position-encoded lines, and the
+         keyboard path to the hover readout: UiChartDataReveal keeps it hidden
+         until a keyboard user asks for it. -->
+    <UiChartDataReveal v-if="data.length >= 2">
+      <table>
+        <caption>{{ ariaLabel }}</caption>
+        <thead>
+          <tr>
+            <th scope="col">
+              {{ xKey }}
+            </th>
+            <th v-for="s in resolvedSeries" :key="s.key" scope="col">
+              {{ s.label }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, i) in data" :key="i">
+            <th scope="row">
+              {{ fmtX(row) }}
+            </th>
+            <td v-for="s in resolvedSeries" :key="s.key">
+              {{ fmtY(num(row[s.key]), s.key) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </UiChartDataReveal>
+  </div>
+</template>
+
+<style scoped>
+.ui-line-chart {
+  display: grid;
+  /* minmax(0, …): a bare 1fr track floors at the stacked SVGs' width, so the
+     chart grew with the window but never shrank back and pushed the page into
+     a horizontal scroll. */
+  grid-template-columns: minmax(0, 1fr);
+  position: relative;
+}
+
+.ui-line-chart .chart-layer {
+  grid-column-start: 1;
+  grid-row-start: 1;
+}
+
+/* Visual series layers don't capture pointer events; only the crosshair layer does. */
+.ui-line-chart .chart-layer {
+  pointer-events: none;
+}
+
+.ui-line-chart .chart-layer--interactive {
+  pointer-events: auto;
+  --vis-crosshair-line-stroke-color: var(--ui-border-accented);
+  --vis-crosshair-line-stroke-opacity: 0.6;
+}
+
+.ui-line-chart :deep(.unovis-area-group path) {
+  stroke: none;
+}
+
+/* Drop the crosshair snap circle entirely. The persistent selected marker and
+   vertical guide carry the read without adding a floating point that appears
+   to belong to only one series. The crosshair group's class is hashed by
+   unovis; the `crosshair-component` suffix is stable. */
+.ui-line-chart :deep([class*="crosshair-component"] circle) {
+  display: none;
+}
+
+/* Zero horizontal margin: anchor edge tick labels inward so they don't clip at
+   the svg boundary. Unovis sets text-anchor as an SVG attribute, which CSS
+   outranks; d3-axis keeps tick <g>s DOM-ordered by value, so first/last-of-type
+   are the leftmost/rightmost ticks. */
+.ui-line-chart :deep(g.tick:first-of-type > text) {
+  text-anchor: start;
+}
+
+.ui-line-chart :deep(g.tick:last-of-type > text) {
+  text-anchor: end;
+}
+</style>

package/app/components/data/UiMetricBarPopover.vue

@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+/**
+ * The bar-filled metric cell with a hover popover, shared across every overview
+ * "By site" table (Search Console, Indexing, Analytics, DataForSEO, CWV). The
+ * trigger is a {@link UiBarCell} carrying the headline value (a `#value` slot,
+ * so each tab keeps full control of formatting / threshold colors / share %) and
+ * a compact sparkline; the popover panel shows a wide sparkline plus an optional
+ * list of `label → value | trend` rows.
+ *
+ * Replaces the ~60-line block that used to be copy-pasted per metric per tab.
+ */
+import { ref, useId } from 'vue'
+import { UiPopover, UiSparkline, UiTrend } from '#components'
+import UiBarCell from './UiBarCell.vue'
+
+export interface MetricPanelRow {
+  label: string
+  /** Plain value (mono). Ignored when `trend` is set. */
+  value?: string
+  /** Extra classes for the value (e.g. a threshold color). */
+  valueClass?: string
+  /** Render a UiTrend instead of a plain value. */
+  trend?: number
+  trendInverted?: boolean
+  trendFormat?: 'percent' | 'points'
+  /** Draw a hairline divider above this row (section break). */
+  divider?: boolean
+}
+
+const {
+  sparkline = [],
+  panelRows = [],
+} = defineProps<{
+  /** Bar fill 0–100. */
+  percent: number
+  /** Tailwind bg class for the bar fill. */
+  barClass?: string
+  /** Trend/sparkline series. Rendered only when length > 1. */
+  sparkline?: number[]
+  /** Sparkline color (named viz color or rgb()). */
+  sparklineColor?: string
+  /** Popover heading + body. */
+  title: string
+  description: string
+  /** Detail rows under the panel sparkline. */
+  panelRows?: MetricPanelRow[]
+}>()
+
+const panelId = useId()
+// Reka's HoverCard ignores touch, so a tap opens the panel through the model.
+// Outside tap and Escape still dismiss it.
+const open = ref(false)
+</script>
+
+<template>
+  <UiPopover v-model:open="open" mode="hover" role="tooltip" :panel-id="panelId" :content="{ side: 'bottom' }">
+    <!-- Focusable trigger so the hover panel is also reachable by keyboard
+         (reka HoverCard opens on focus) and by tap (the click opens it). The
+         headline value stays inline for everyone, so the panel breakdown is a
+         true enhancement. The accessible name starts with that visible value
+         (WCAG 2.5.3), so voice users can say what they see. -->
+    <button
+      type="button"
+      class="block w-full text-left rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+      :aria-describedby="panelId"
+      @click="open = true"
+    >
+      <UiBarCell :percent="percent" :bar-class="barClass">
+        <slot name="value" />
+        <span class="sr-only">{{ title }}, show breakdown</span>
+        <UiSparkline
+          v-if="sparkline.length > 1"
+          :data="sparkline"
+          :width="56"
+          :height="18"
+          :color="sparklineColor"
+          class="shrink-0 relative"
+          aria-hidden="true"
+        />
+        <slot name="trailing" />
+      </UiBarCell>
+    </button>
+    <template #panel>
+      <div class="p-3 text-xs space-y-2.5 min-w-[220px] max-w-[250px]">
+        <div class="font-semibold text-default">
+          {{ title }}
+        </div>
+        <p class="text-muted leading-relaxed">
+          {{ description }}
+        </p>
+        <UiSparkline
+          v-if="sparkline.length > 1"
+          :data="sparkline"
+          :color="sparklineColor"
+          :width="230"
+          :height="32"
+        />
+        <div v-if="panelRows.length" class="border-t border-default pt-2 space-y-1.5">
+          <div
+            v-for="row in panelRows"
+            :key="row.label"
+            class="flex justify-between items-center gap-4"
+            :class="row.divider ? 'pt-1 border-t border-default' : ''"
+          >
+            <span class="text-muted">{{ row.label }}</span>
+            <UiTrend
+              v-if="row.trend != null"
+              :value="row.trend"
+              :inverted="row.trendInverted"
+              colored
+              :format="row.trendFormat ?? 'percent'"
+              size="xs"
+            />
+            <span v-else class="font-mono font-medium tabular-nums" :class="row.valueClass ?? 'text-default'">{{ row.value }}</span>
+          </div>
+        </div>
+        <slot name="panel-extra" />
+      </div>
+    </template>
+  </UiPopover>
+</template>

package/app/components/data/UiMetricLabel.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+const { size = 'xs', tone = 'dimmed' } = defineProps<{
+  label?: string
+  /** xs = dense table/metric labels, sm = popover/list section labels */
+  size?: 'xs' | 'sm'
+  tone?: 'default' | 'muted' | 'dimmed' | 'success' | 'warning' | 'error'
+}>()
+
+// xs = the dense .text-label tier (10px); sm = a 12px label for popover/list
+// section headings. (Both were 10px before — the sm tier was a dead no-op.)
+const sizeClass = {
+  xs: 'text-label',
+  sm: 'text-xs uppercase tracking-wider font-semibold',
+} as const
+
+const toneClass = {
+  default: 'text-default',
+  muted: 'text-muted',
+  dimmed: 'text-dimmed',
+  success: 'text-success',
+  warning: 'text-warning',
+  error: 'text-error',
+} as const
+</script>
+
+<template>
+  <span :class="[sizeClass[size], toneClass[tone]]">
+    <slot>{{ label }}</slot>
+  </span>
+</template>

package/app/components/data/UiMetricStat.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { SlotTextOptions } from '../../utils/slot-text'
+import { computed } from 'vue'
+import { UiIcon, UiSlotText, UiTrend } from '#components'
+/**
+ * Compact direct-label stat for the card-grid chart area: an optional metric
+ * icon, the value, an optional unit label, and a trend delta. Used to label each
+ * overview card's chart inline (e.g. "⌖ 16.4K clicks +40%") instead of a
+ * separate legend. Shared across every overview tab.
+ */
+const {
+  icon,
+  value,
+  label,
+  trend,
+  trendInverted,
+  trendFormat = 'percent',
+  animatedValue = true,
+} = defineProps<{
+  /** Lucide/registry icon name for the metric. */
+  icon?: string
+  /** Formatted value (e.g. "16.4K", "94%"). Omit to show only the label + trend
+   * (e.g. when the value is already displayed elsewhere, like a chart readout). */
+  value?: string
+  /** Rolls compact numeric values when they change. */
+  animatedValue?: boolean | SlotTextOptions
+  /** Unit/metric label (e.g. "clicks"). */
+  label?: string
+  /** Trend delta; rendered as a UiTrend when non-null. */
+  trend?: number | null
+  /** Invert trend coloring (lower is better — position, errors, CWV). */
+  trendInverted?: boolean
+  trendFormat?: 'percent' | 'points'
+}>()
+
+const animatedValueOptions = computed<SlotTextOptions | null>(() => {
+  if (!value || animatedValue === false)
+    return null
+
+  const compactMetricValue = /^[+\-$€£¥]?\s*[\d,.]+(?:\s?[kmbt])?(?:\.\d+)?%?$/i.test(value)
+  if (typeof animatedValue === 'object')
+    return animatedValue
+
+  return compactMetricValue && value.length <= 14
+    ? { direction: 'up', duration: 300, stagger: 22 }
+    : null
+})
+</script>
+
+<template>
+  <span class="inline-flex items-baseline gap-1.5 min-w-0">
+    <UiIcon v-if="icon" :name="icon" class="size-3.5 text-dimmed shrink-0 self-center" aria-hidden="true" />
+    <span v-if="value" class="text-sm font-semibold tabular-nums text-default">
+      <UiSlotText
+        v-if="animatedValueOptions"
+        :text="value"
+        :options="animatedValueOptions"
+      />
+      <template v-else>
+        {{ value }}
+      </template>
+    </span>
+    <span v-if="label" class="text-xs text-muted truncate" :class="{ 'font-medium text-default': !value }">{{ label }}</span>
+    <UiTrend
+      v-if="trend != null"
+      :value="trend"
+      :inverted="trendInverted"
+      colored
+      :format="trendFormat"
+      size="2xs"
+    />
+  </span>
+</template>