@nuxtseo/design-system 0.0.0-stage → 0.1.1

package/app/components/data/UiDataList.vue

@@ -0,0 +1,276 @@
+<script setup lang="ts" generic="T extends object">
+import type { UiIcon as UiIconName } from '../../shared/ui-icons'
+import type { ViewState } from '../../shared/view-state'
+import { computed, onMounted, ref } from 'vue'
+import { NuxtLink, UiButton, UiHelpLabel, UiIcon, UiNavIcon, UiSkeleton } from '#components'
+import { widgetFailureCopy } from '../../shared/widget-failure'
+import { getIconColor } from '../../utils/icon-color'
+
+type UiDataListRouteTarget = string | Record<string, unknown>
+interface UiDataListKeyFields {
+  id?: string | number
+  key?: string | number
+  path?: string
+  url?: string
+}
+
+const {
+  title,
+  icon,
+  iconColor,
+  tooltip,
+  metricLabel,
+  state,
+  items,
+  loading,
+  error,
+  onRetry,
+  loadingCount = 5,
+  viewMoreTo,
+  viewMoreLabel = 'View all',
+  emptyIcon,
+  emptyText = 'No data available',
+  barValue,
+  barTotal,
+  barColor = 'bg-pro',
+  itemTo,
+  subtle = false,
+} = defineProps<{
+  title?: string
+  icon?: UiIconName
+  iconColor?: string
+  /** Render the title as a quieter sub-tier (smaller + muted) for nested lists. */
+  subtle?: boolean
+  tooltip?: string
+  metricLabel?: string
+  /**
+   * The read behind the list, built with `listViewState`. When set, it decides
+   * every branch and `items`, `loading` and `error` are ignored. The list
+   * shows its empty copy only for `empty`, so a failed read or a read still in
+   * flight can never say "No data".
+   */
+  state?: ViewState<readonly T[]>
+  items?: T[]
+  loading?: boolean
+  /**
+   * The caught value of the read behind `items`, for classification only (see
+   * UiWidgetState). With no rows, the list shows the failure instead of the
+   * empty copy, so a failed read never says "No data". With rows, a failure
+   * notice sits above the rows still in hand.
+   */
+  error?: unknown
+  /** Run the read again. Bind with `@retry`; shown when a retry can fix the failure. */
+  onRetry?: () => void
+  loadingCount?: number
+  viewMoreTo?: UiDataListRouteTarget
+  viewMoreLabel?: string
+  emptyIcon?: UiIconName
+  emptyText?: string
+  /** Accessor fn to get bar value from item. When set, renders a % fill bar behind each row. */
+  barValue?: (item: T) => number
+  /**
+   * Denominator for the bar fill. Omit it (the default) and the bars are
+   * max-relative: the largest row fills 100% and every other row is drawn in
+   * proportion to it, so the list reads as magnitude. Pass an explicit value to
+   * mean something else — `100` for rows that already hold percentages, or the
+   * sum of a wider set when the bar must read as share-of-total.
+   */
+  barTotal?: number
+  /** Bar color class (default: 'bg-pro') */
+  barColor?: string
+  /** Accessor fn for row link target. When set, each row becomes a NuxtLink with a trailing chevron. */
+  itemTo?: (item: T) => UiDataListRouteTarget | undefined | null
+}>()
+
+defineSlots<{
+  'default'?: (props: { item: T, index: number }) => unknown
+  /**
+   * The list's identity mark, in place of `icon`. A list that reads through
+   * one Source passes its `UiSourceLogos` here, so the header names where the
+   * rows came from instead of decorating the title.
+   */
+  'mark'?: () => unknown
+  'header-trailing'?: () => unknown
+  'empty'?: () => unknown
+  'footer'?: () => unknown
+}>()
+
+// Treat SSR as loading to avoid hydration mismatch when data arrives client-side
+const hydrated = ref(false)
+onMounted(() => { hydrated.value = true })
+
+// One state decides every branch. A `state` prop wins. The loose props map
+// onto the same union, so both paths share one template and the empty copy
+// can only follow a read that answered with no rows.
+const view = computed<ViewState<readonly T[]>>(() => {
+  if (state)
+    return state
+  if (loading || (!hydrated.value && !items?.length))
+    return { _tag: 'loading' }
+  if (!items?.length)
+    return error == null ? { _tag: 'empty' } : { _tag: 'error', error }
+  return { _tag: 'data', data: items, refreshError: error ?? null }
+})
+const isLoading = computed(() => view.value._tag === 'loading')
+const rows = computed<readonly T[]>(() => view.value._tag === 'data' ? view.value.data : [])
+const failure = computed(() => {
+  if (view.value._tag === 'error')
+    return widgetFailureCopy(view.value.error)
+  if (view.value._tag === 'data' && view.value.refreshError != null)
+    return widgetFailureCopy(view.value.refreshError)
+  return null
+})
+
+// Default denominator is the LARGEST row, not the sum: dividing by the sum
+// squashes even a dominant row into a third of the track (4.8K of 14K = 34%)
+// and renders the tail as slivers, so the bars carry no magnitude. Max-relative
+// puts the top row at 100% and scales the rest against it. An explicit
+// `barTotal` still wins — that's the share-of-total / already-a-percentage case.
+const computedBarTotal = computed(() => {
+  if (barTotal != null)
+    return barTotal
+  if (!barValue || !rows.value.length)
+    return 0
+  return rows.value.reduce((max, item) => Math.max(max, barValue!(item)), 0)
+})
+
+function barPct(item: T): number {
+  if (!barValue)
+    return 0
+  const total = computedBarTotal.value
+  return total > 0 ? (barValue(item) / total) * 100 : 0
+}
+
+const hasSemanticColor = computed(() => !!iconColor)
+const iconClasses = computed(() => hasSemanticColor.value ? getIconColor(iconColor!) : null)
+const titleClass = computed(() => subtle ? 'text-xs font-medium text-muted' : 'text-sm font-medium')
+
+function itemKey(item: T, index: number): string | number {
+  const row = item as UiDataListKeyFields
+  return row.id ?? row.key ?? row.path ?? row.url ?? index
+}
+</script>
+
+<template>
+  <div class="flex flex-col" :aria-busy="isLoading">
+    <!-- Header -->
+    <div v-if="title || icon || $slots.mark || $slots['header-trailing']" class="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 px-1 pb-2.5">
+      <div v-if="title || icon || $slots.mark" class="flex items-center gap-2">
+        <slot name="mark">
+          <div v-if="icon && hasSemanticColor" class="p-1 rounded-md" :class="iconClasses!.bg">
+            <UiIcon :name="icon" class="size-3.5" :class="iconClasses!.text" />
+          </div>
+          <UiNavIcon v-else-if="icon" :icon="icon" />
+        </slot>
+        <!-- UiHelpLabel renders its text through UiTooltip, whose root is a
+             reka TooltipProvider with no DOM node — a fallthrough `class` would
+             be dropped. Wrap it in a real span so the title size/tone lands. -->
+        <span v-if="title && tooltip" :class="titleClass">
+          <UiHelpLabel :text="title" :tooltip="tooltip" />
+        </span>
+        <span v-else-if="title" :class="titleClass">{{ title }}</span>
+      </div>
+      <div class="flex items-center justify-between gap-3">
+        <slot name="header-trailing">
+          <span v-if="metricLabel" class="text-sm text-muted">{{ metricLabel }}</span>
+        </slot>
+        <NuxtLink
+          v-if="viewMoreTo"
+          :to="viewMoreTo"
+          class="inline-flex min-h-11 items-center gap-1 text-xs text-muted hover:text-default transition-colors group/link"
+        >
+          {{ viewMoreLabel }}
+          <UiIcon name="next" class="size-3 transition-transform group-hover/link:translate-x-0.5" aria-hidden="true" />
+        </NuxtLink>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-default bg-elevated/50 flex flex-col flex-1 overflow-hidden">
+      <!-- Loading -->
+      <div v-if="isLoading" class="px-3 py-3 space-y-1">
+        <UiSkeleton :lines="loadingCount" :base="180" :range="80" />
+      </div>
+
+      <!-- Failed with nothing in hand: never the empty copy. -->
+      <div
+        v-else-if="view._tag === 'error' && failure"
+        role="alert"
+        data-ui="UiDataList-error"
+        class="flex flex-1 items-start gap-2.5 px-3 py-3"
+      >
+        <UiIcon name="caution" class="mt-0.5 size-4 shrink-0 text-error" aria-hidden="true" />
+        <div class="min-w-0 flex-1">
+          <p class="text-sm font-medium text-default">
+            {{ failure.title }}
+          </p>
+          <p class="text-sm text-muted">
+            {{ failure.body }}
+          </p>
+          <UiButton v-if="onRetry && failure.retryable" purpose="secondary" size="xs" icon="refresh" class="mt-2" @click="onRetry()">
+            Retry
+          </UiButton>
+        </div>
+      </div>
+
+      <!-- Empty: only a read that answered with no rows reaches this branch. -->
+      <div v-else-if="view._tag === 'empty'" class="px-4 py-6 text-center flex-1 flex flex-col items-center justify-center">
+        <UiIcon v-if="emptyIcon" :name="emptyIcon" class="size-6 text-muted/40 mb-2" aria-hidden="true" />
+        <p class="text-sm text-dimmed">
+          <slot name="empty">
+            {{ emptyText }}
+          </slot>
+        </p>
+      </div>
+
+      <!-- Items — condensed by default. `min-h-11` keeps the 44px touch target
+           on coarse pointers; from `sm` up a row floors at 32px, so a 5-row
+           list costs ~60px less height for the same signal. Rows with two-line
+           or badge content still grow past the floor on their own. -->
+      <!-- A failed refresh keeps the rows in hand and says so above them. -->
+      <div
+        v-if="view._tag === 'data' && failure"
+        role="alert"
+        data-ui="UiDataList-error"
+        class="flex items-start gap-2.5 border-b border-default px-3 py-2"
+      >
+        <UiIcon name="caution" class="mt-0.5 size-4 shrink-0 text-error" aria-hidden="true" />
+        <p class="min-w-0 flex-1 text-sm text-muted">
+          <span class="font-medium text-default">{{ failure.title }}.</span> {{ failure.body }}
+        </p>
+        <UiButton v-if="onRetry && failure.retryable" purpose="secondary" size="xs" icon="refresh" @click="onRetry()">
+          Retry
+        </UiButton>
+      </div>
+      <div v-if="view._tag === 'data'" class="flex-1 p-1 space-y-0.5">
+        <component
+          :is="itemTo && itemTo(item) ? NuxtLink : 'div'"
+          v-for="(item, index) in rows"
+          :key="itemKey(item, index)"
+          :to="itemTo ? itemTo(item) || undefined : undefined"
+          class="relative flex min-h-11 sm:min-h-8 items-center gap-2 py-1 px-2.5 rounded-lg group hover:bg-accented transition-colors"
+        >
+          <div
+            v-if="barValue"
+            class="absolute inset-y-0 left-0 rounded-lg opacity-[0.05] dark:opacity-[0.07] pointer-events-none"
+            :class="barColor"
+            :style="{ width: `${barPct(item)}%` }"
+          />
+          <div class="relative flex-1 min-w-0 flex items-center justify-between gap-2">
+            <slot :item="item" :index="index" />
+          </div>
+          <UiIcon
+            v-if="itemTo && itemTo(item)"
+            name="chevron-right"
+            class="size-3.5 text-dimmed shrink-0"
+            aria-hidden="true"
+          />
+        </component>
+      </div>
+
+      <!-- Footer -->
+      <div v-if="$slots.footer && view._tag === 'data'" class="px-4 pb-3 pt-2">
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/data/UiDataTableSection.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import type { RowSelectionState, SortingState } from '@tanstack/vue-table'
+import type { UiTableColumn, UiTableRowId } from '../../shared/table'
+import type { UiIcon as UiIconName } from '../../shared/ui-icons'
+import { refDebounced } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { UiButton, UiIcon, UInput, UiTable, UiTablePagination } from '#components'
+import { formatGroupedNumber } from '../../composables/formatting'
+
+const {
+  pending = false,
+  rows,
+  total,
+  columns,
+  error,
+  pageSize = 12,
+  searchable = true,
+  searchPlaceholder = 'Search…',
+  emptyIcon = 'search',
+  emptyTitle = 'No results found',
+  emptyDescription = '',
+  itemLabel = 'items',
+  manualPagination = true,
+  manualSorting = false,
+  rowHover = true,
+  rowClickable = false,
+  rowId,
+  label,
+  filtersActive = false,
+  formatTotal,
+} = defineProps<{
+  pending?: boolean
+  rows: T[]
+  total: number
+  columns: UiTableColumn<T>[]
+  error?: unknown
+  pageSize?: number
+  searchable?: boolean
+  searchPlaceholder?: string
+  emptyIcon?: UiIconName
+  emptyTitle?: string
+  emptyDescription?: string
+  itemLabel?: string
+  manualPagination?: boolean
+  manualSorting?: boolean
+  rowHover?: boolean
+  rowClickable?: boolean
+  rowId?: UiTableRowId<T>
+  /** Accessible name for the table (passed through to <caption>). */
+  label?: string
+  /** Whether any non-search filter is currently active. Drives empty-state copy. */
+  filtersActive?: boolean
+  /** Caller-supplied number formatter for the pagination "X items total" caption. Defaults to `formatGroupedNumber`. */
+  formatTotal?: (n: number) => string
+}>()
+
+const emit = defineEmits<{
+  retry: []
+  sortColumn: [column: string]
+  rowClick: [row: T]
+}>()
+
+const totalDisplay = computed(() => formatTotal ? formatTotal(total) : formatGroupedNumber(total))
+
+const search = defineModel<string>('search', { default: '' })
+const page = defineModel<number>('page', { default: 1 })
+const sorting = defineModel<SortingState>('sorting', { default: () => [] })
+const rowSelection = defineModel<RowSelectionState>('rowSelection')
+const rowSelectionEnabled = computed(() => rowSelection.value !== undefined)
+const searchDraft = ref(search.value)
+const debouncedSearch = refDebounced(searchDraft, 300)
+
+const showEmpty = computed(() => !pending && !error && rows.length === 0)
+const showTable = computed(() => !error && (pending || rows.length > 0))
+const showPagination = computed(() => !pending && rows.length > 0 && total > pageSize)
+
+watch(search, (value) => {
+  if (value !== searchDraft.value)
+    searchDraft.value = value
+})
+
+watch(debouncedSearch, (value) => {
+  if (value !== search.value)
+    search.value = value
+})
+
+function commitSearch(value = searchDraft.value) {
+  searchDraft.value = value
+  if (search.value !== value)
+    search.value = value
+}
+
+function errorText(value: unknown): string {
+  if (typeof value === 'string')
+    return value
+  if (value && typeof value === 'object' && 'message' in value && typeof value.message === 'string')
+    return value.message
+  return 'Failed to load'
+}
+</script>
+
+<template>
+  <div data-ui="UiDataTableSection" class="flex flex-col gap-4">
+    <slot name="stats" />
+
+    <!-- Filter row -->
+    <div v-if="searchable || $slots['filters-leading'] || $slots['filters-trailing']" class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
+      <div class="flex items-center gap-1.5 flex-wrap">
+        <slot name="filters-leading" />
+      </div>
+      <div class="flex w-full items-center gap-3 sm:w-auto">
+        <slot name="filters-trailing" />
+        <UInput
+          v-if="searchable"
+          v-model="searchDraft"
+          type="search"
+          class="w-full sm:w-56"
+          :placeholder="searchPlaceholder"
+          icon="search"
+          autocomplete="off"
+          size="sm"
+          :ui="{ base: 'min-h-11 transition-[width] duration-200 focus-within:w-72 sm:min-h-0' }"
+          aria-label="Filter rows"
+          data-inp-target="data-table-search"
+          @keydown.enter="commitSearch()"
+        >
+          <template #trailing>
+            <UiButton
+              v-if="searchDraft !== ''"
+              purpose="quiet"
+              icon="close"
+              size="xs"
+              class="min-h-11 min-w-11 rounded-lg sm:min-h-0 sm:min-w-0"
+              aria-label="Clear search"
+              @click="commitSearch('')"
+            />
+          </template>
+        </UInput>
+      </div>
+    </div>
+
+    <slot name="notices" />
+
+    <!-- Error -->
+    <div v-if="error" role="alert" aria-live="assertive" class="rounded-xl border border-dashed border-default bg-[var(--ui-bg-elevated)]/5">
+      <slot name="error" :error="error">
+        <div class="py-10 text-center">
+          <p class="text-sm text-error mb-3">
+            {{ errorText(error) }}
+          </p>
+          <UiButton size="sm" purpose="secondary" @click="emit('retry')">
+            Retry
+          </UiButton>
+        </div>
+      </slot>
+    </div>
+
+    <!-- Empty -->
+    <div v-else-if="showEmpty" role="status" data-testid="table-empty-state" class="rounded-xl border border-dashed border-default bg-[var(--ui-bg-elevated)]/5 py-16">
+      <slot name="empty">
+        <div class="text-center max-w-sm mx-auto">
+          <UiIcon :name="emptyIcon" class="size-7 text-dimmed mb-3 inline-block" aria-hidden="true" />
+          <h3 class="text-sm font-semibold text-default mb-1">
+            {{ emptyTitle }}
+          </h3>
+          <p v-if="searchDraft || filtersActive || emptyDescription" class="text-sm text-muted mb-4">
+            <template v-if="searchDraft">
+              No {{ itemLabel }} match “<span class="font-medium text-default">{{ searchDraft }}</span>”
+            </template>
+            <template v-else-if="filtersActive">
+              No {{ itemLabel }} match the selected filter
+            </template>
+            <template v-else>
+              {{ emptyDescription }}
+            </template>
+          </p>
+          <slot name="empty-actions">
+            <UiButton
+              v-if="searchDraft"
+              size="sm"
+              purpose="secondary"
+              @click="commitSearch('')"
+            >
+              Clear search
+            </UiButton>
+          </slot>
+        </div>
+      </slot>
+    </div>
+
+    <!-- Body: defaults to the table; pass #body to render an alternate view
+         (e.g. a card grid) while keeping the search / empty / pagination chrome. -->
+    <template v-else-if="showTable">
+      <slot name="body" :rows="rows" :pending="pending">
+        <UiTable
+          v-model:sorting="sorting"
+          v-model:selected="rowSelection"
+          :data="rows"
+          :columns="columns"
+          :page-size="pageSize"
+          :row-hover="rowHover"
+          :row-clickable="rowClickable"
+          :manual-pagination="manualPagination"
+          :manual-sorting="manualSorting"
+          :enable-sorting="manualSorting"
+          :total="total"
+          :row-id="rowId"
+          :label="label ?? itemLabel"
+          :loading="pending"
+          :controlled-selection="rowSelectionEnabled"
+          bordered
+          disable-pagination
+          @sort-column="(c: string) => emit('sortColumn', c)"
+          @row-click="(r: T) => emit('rowClick', r)"
+        />
+      </slot>
+    </template>
+
+    <!-- Pagination (sibling: applies to the table and any #body view) -->
+    <UiTablePagination
+      v-if="showPagination"
+      v-model:page="page"
+      :page-size="pageSize"
+      :total="total"
+    >
+      <slot name="pagination-leading">
+        <span class="font-medium text-default">{{ totalDisplay }}</span> {{ itemLabel }} total
+      </slot>
+    </UiTablePagination>
+
+    <slot name="footer" />
+  </div>
+</template>

package/app/components/data/UiDistributionBars.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { SemanticStatus } from '../../composables/semanticColors'
+import { motion, stagger, useReducedMotion } from 'motion-v'
+import { computed } from 'vue'
+import { semanticColors } from '../../composables/semanticColors'
+
+// One column per CATEGORY, not per period — the categorical sibling of
+// UiSparkline, meant as an ambient background for a KPI tile the same way
+// UiCwvSparkline is. Each column occupies the full height as a faint track and
+// fills the share its value holds of the largest category, so the reader sees a
+// shape ("one type dominates" vs "evenly spread") without needing axis labels.
+//
+// The scale is ZERO-BASED against the max on purpose. UiSparkline's min–max
+// projection is right for a trend, where the interesting part is the movement,
+// and wrong here: it would paint the smallest category at zero height and read
+// as "none of these", which for a distribution is a different claim entirely.
+
+interface Slice {
+  label: string
+  value: number
+  /**
+   * Semantic tone for this column. Omit it for the non-event — the colour
+   * budget says only the exceptional value takes a hue, so a caller that tones
+   * EVERY slice has already lost the signal it was reaching for.
+   */
+  tone?: SemanticStatus
+}
+
+interface Props {
+  /** Categories in the order they should be drawn. Caller decides the sort. */
+  data: Slice[]
+  /** Columns to draw; the remainder is dropped, never silently merged. */
+  limit?: number
+  width?: number | string
+  height?: number | string
+  /** SVG preserveAspectRatio — "none" stretches to fill a container. */
+  preserveAspectRatio?: string
+  /** Bar fill opacity. Moderate, so an enclosing card's value stays dominant. */
+  opacity?: number
+  /** Hover state, fed from a parent (e.g. the enclosing UiStat card). */
+  hovered?: boolean
+  /** What the bars count, read before the values: "Issue types by open count". */
+  label?: string
+}
+
+const {
+  data,
+  limit = 14,
+  width = '100%',
+  height = '100%',
+  preserveAspectRatio = 'none',
+  opacity = 0.55,
+  hovered = false,
+  label = 'Categories by count',
+} = defineProps<Props>()
+
+const reduced = useReducedMotion()
+
+const container = {
+  rest: {},
+  hover: { transition: { delayChildren: stagger(0.04, { ease: 'easeInOut' }) } },
+}
+const barVariants = {
+  rest: { scaleY: 0.82, opacity: 0.85 },
+  hover: {
+    scaleY: 1,
+    opacity: 1,
+    transition: { type: 'spring' as const, stiffness: 190, damping: 16, mass: 0.8 },
+  },
+}
+
+const vbW = 120
+const vbH = 40
+
+// `color` may be a CSS custom property (the neutral reads `--ui-viz-neutral`),
+// so mix it instead of parsing hex. Mixing with `transparent` in srgb keeps the
+// channels and sets the alpha, the same paint as `rgba(r, g, b, a)`.
+function withAlpha(color: string, a: number): string {
+  return `color-mix(in srgb, ${color} ${Math.round(a * 10000) / 100}%, transparent)`
+}
+
+const shown = computed(() => data.filter(slice => Number.isFinite(slice.value)).slice(0, limit))
+
+interface Column { x: number, w: number, y: number, h: number, fill: string }
+
+const columns = computed<Column[]>(() => {
+  const slices = shown.value
+  if (!slices.length)
+    return []
+  const max = Math.max(...slices.map(slice => slice.value))
+  const gap = 0.3
+  const slot = vbW / slices.length
+  const w = Math.max(0.5, slot * (1 - gap))
+  return slices.map((slice, i) => {
+    // A zero max would make every share NaN; draw the floor instead.
+    const share = max > 0 ? Math.max(0, slice.value) / max : 0
+    const h = Math.max(1, share * vbH)
+    // Hue carries the severity; it stays under the neutral opacity so the mix
+    // reads as a tint on the card, never as a stack of status chips.
+    const tone = slice.tone ?? 'neutral'
+    return {
+      x: i * slot + (slot - w) / 2,
+      w,
+      y: vbH - h,
+      h,
+      // A saturated hue at the neutral's opacity shouts; hold the tinted columns
+      // well under it so severity reads as a wash, not as a row of alerts.
+      fill: withAlpha(semanticColors[tone].hex, tone === 'neutral' ? opacity : opacity * 0.55),
+    }
+  })
+})
+const trackFill = computed(() => withAlpha(semanticColors.neutral.hex, opacity * 0.18))
+
+// The caller names the data. A generic primitive announced every chart as
+// "Issue types by open count".
+const accessibleName = computed(() => shown.value.length
+  ? `${label}: ${shown.value.map(slice => `${slice.label} ${slice.value}`).join(', ')}`
+  : `${label}: none`)
+</script>
+
+<template>
+  <svg
+    data-ui="UiDistributionBars"
+    :width="width"
+    :height="height"
+    :viewBox="`0 0 ${vbW} ${vbH}`"
+    :preserveAspectRatio="preserveAspectRatio"
+    role="img"
+    :aria-label="accessibleName"
+  >
+    <!-- Full-height tracks: they are what makes a short bar read as a small
+         share rather than as a missing category. -->
+    <rect
+      v-for="(col, i) in columns"
+      :key="`track-${i}`"
+      :x="col.x"
+      :y="0"
+      :width="col.w"
+      :height="vbH"
+      :fill="trackFill"
+    />
+    <!-- tabindex -1: motion-v binds focus listeners, and Chromium makes any
+         SVG element with one a Tab stop. The svg label already names the data. -->
+    <motion.g
+      :variants="container"
+      initial="rest"
+      :animate="hovered && !reduced ? 'hover' : 'rest'"
+      tabindex="-1"
+    >
+      <motion.rect
+        v-for="(col, i) in columns"
+        :key="i"
+        tabindex="-1"
+        :variants="barVariants"
+        :x="col.x"
+        :y="col.y"
+        :width="col.w"
+        :height="col.h"
+        :fill="col.fill"
+        :style="{ transformBox: 'fill-box', transformOrigin: 'bottom' }"
+      />
+    </motion.g>
+  </svg>
+</template>