diff --git a/app/components/Chart/SplitSparkline.vue b/app/components/Chart/SplitSparkline.vue
new file mode 100644
index 0000000000..f3c5537e8e
--- /dev/null
+++ b/app/components/Chart/SplitSparkline.vue
@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
+import { useCssVariables } from '~/composables/useColors'
+import {
+  type VueUiSparklineConfig,
+  type VueUiSparklineDatasetItem,
+  type VueUiXyDatasetItem,
+} from 'vue-data-ui'
+import { getPalette, lightenColor } from 'vue-data-ui/utils'
+
+import('vue-data-ui/style.css')
+
+const props = defineProps<{
+  dataset?: Array<
+    VueUiXyDatasetItem & {
+      color?: string
+      series: number[]
+      dashIndices?: number[]
+    }
+  >
+  dates: number[]
+  datetimeFormatterOptions: {
+    year: string
+    month: string
+    day: string
+  }
+  showLastDatapointEstimation: boolean
+}>()
+
+const { locale } = useI18n()
+const colorMode = useColorMode()
+const resolvedMode = shallowRef<'light' | 'dark'>('light')
+const rootEl = shallowRef<HTMLElement | null>(null)
+const palette = getPalette('')
+
+const step = ref(0)
+
+onMounted(() => {
+  rootEl.value = document.documentElement
+})
+
+watch(
+  () => colorMode.value,
+  value => {
+    resolvedMode.value = value === 'dark' ? 'dark' : 'light'
+  },
+  { flush: 'sync', immediate: true },
+)
+
+const { colors } = useCssVariables(
+  [
+    '--bg',
+    '--fg',
+    '--bg-subtle',
+    '--bg-elevated',
+    '--border-hover',
+    '--fg-subtle',
+    '--border',
+    '--border-subtle',
+  ],
+  {
+    element: rootEl,
+    watchHtmlAttributes: true,
+    watchResize: false, // set to true only if a var changes color on resize
+  },
+)
+
+const isDarkMode = computed(() => resolvedMode.value === 'dark')
+
+const datasets = computed<VueUiSparklineDatasetItem[][]>(() => {
+  return (props.dataset ?? []).map(unit => {
+    return props.dates.map((period, i) => {
+      return {
+        period,
+        value: unit.series[i] ?? 0,
+      }
+    })
+  })
+})
+
+const selectedIndex = ref<number | undefined | null>(null)
+
+function hoverIndex({ index }: { index: number | undefined | null }) {
+  if (typeof index === 'number') {
+    selectedIndex.value = index
+  }
+}
+
+function resetHover() {
+  selectedIndex.value = null
+  step.value += 1 // required to reset all chart instances
+}
+
+const configs = computed(() => {
+  return (props.dataset || []).map<VueUiSparklineConfig>((unit, i) => {
+    const lastIndex = unit.series.length - 1
+    const dashIndices = props.showLastDatapointEstimation
+      ? Array.from(new Set([...(unit.dashIndices ?? []), lastIndex]))
+      : unit.dashIndices
+
+    // Ensure we loop through available palette colours when the series count is higher than the avalable palette
+    const fallbackColor = palette[i] ?? palette[i % palette.length] ?? palette[0]!
+    const seriesColor = unit.color ?? fallbackColor
+    const lightenedSeriesColor: string = unit.color
+      ? (lightenOklch(unit.color, 0.5) ?? seriesColor)
+      : (lightenColor(seriesColor, 0.5) ?? seriesColor) // palette uses hex colours
+
+    return {
+      a11y: {
+        translations: {
+          keyboardNavigation: $t(
+            'package.trends.chart_assistive_text.keyboard_navigation_horizontal',
+          ),
+          tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+          tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+        },
+      },
+      theme: isDarkMode.value ? 'dark' : '',
+      temperatureColors: {
+        show: isDarkMode.value,
+        colors: [lightenedSeriesColor, seriesColor],
+      },
+      skeletonConfig: {
+        style: {
+          backgroundColor: 'transparent',
+          dataLabel: {
+            show: true,
+            color: 'transparent',
+          },
+          area: {
+            color: colors.value.borderHover,
+            useGradient: false,
+            opacity: 10,
+          },
+          line: {
+            color: colors.value.borderHover,
+          },
+        },
+      },
+      skeletonDataset: Array.from({ length: unit.series.length }, () => 0),
+      style: {
+        backgroundColor: 'transparent',
+        animation: { show: false },
+        area: {
+          color: colors.value.borderHover,
+          useGradient: false,
+          opacity: 10,
+        },
+        dataLabel: {
+          offsetX: -12,
+          fontSize: 24,
+          bold: false,
+          color: colors.value.fg,
+          datetimeFormatter: {
+            enable: true,
+            locale: locale.value,
+            useUTC: true,
+            options: props.datetimeFormatterOptions,
+          },
+        },
+        line: {
+          color: seriesColor,
+          dashIndices,
+          dashArray: 3,
+        },
+        plot: {
+          radius: 6,
+          stroke: isDarkMode.value ? 'oklch(0.985 0 0)' : 'oklch(0.145 0 0)',
+        },
+        title: {
+          fontSize: 12,
+          color: colors.value.fgSubtle,
+          bold: false,
+        },
+
+        verticalIndicator: {
+          strokeDasharray: 0,
+          color: colors.value.fgSubtle,
+        },
+        padding: {
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+        },
+      },
+    }
+  })
+})
+</script>
+
+<template>
+  <div class="grid gap-8 sm:grid-cols-2">
+    <ClientOnly v-for="(config, i) in configs" :key="`config_${i}`">
+      <div @mouseleave="resetHover" @keydown.esc="resetHover" class="w-full max-w-[400px] mx-auto">
+        <div class="flex gap-2 place-items-center">
+          <div class="h-3 w-3">
+            <svg viewBox="0 0 2 2" class="w-full">
+              <rect
+                x="0"
+                y="0"
+                width="2"
+                height="2"
+                rx="0.3"
+                :fill="dataset?.[i]?.color ?? palette[i]"
+              />
+            </svg>
+          </div>
+          {{ applyEllipsis(dataset?.[i]?.name ?? '', 28) }}
+        </div>
+        <VueUiSparkline
+          :key="`${i}_${step}`"
+          :config
+          :dataset="datasets?.[i]"
+          :selectedIndex
+          @hoverIndex="hoverIndex"
+        >
+          <!-- Keyboard navigation hint -->
+          <template #hint="{ isVisible }">
+            <p v-if="isVisible" class="text-accent text-xs text-center mt-2" aria-hidden="true">
+              {{ $t('package.downloads.sparkline_nav_hint') }}
+            </p>
+          </template>
+
+          <template #skeleton>
+            <!-- This empty div overrides the default built-in scanning animation on load -->
+            <div />
+          </template>
+        </VueUiSparkline>
+      </div>
+
+      <template #fallback>
+        <!-- Skeleton matching VueUiSparkline layout (title 24px + SVG aspect 500:80) -->
+        <div class="max-w-xs">
+          <!-- Title row: fontSize * 2 = 24px -->
+          <div class="h-6 flex items-center ps-3">
+            <SkeletonInline class="h-3 w-36" />
+          </div>
+          <!-- Chart area: matches SVG viewBox 500:80 -->
+          <div class="aspect-[500/80] flex items-center">
+            <!-- Data label (covers ~42% width, matching dataLabel.offsetX) -->
+            <div class="w-[42%] flex items-center ps-0.5">
+              <SkeletonInline class="h-7 w-24" />
+            </div>
+            <!-- Sparkline line placeholder -->
+            <div class="flex-1 flex items-end pe-3">
+              <SkeletonInline class="h-px w-full" />
+            </div>
+          </div>
+        </div>
+      </template>
+    </ClientOnly>
+  </div>
+</template>
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 21bddcf2f7..005583283e 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1622,6 +1622,15 @@ watch(selectedMetric, value => {
   if (!isMounted.value) return
   loadMetric(value)
 })
+
+// Sparkline charts (a11y alternative display for multi series)
+const chartLayout = usePermalink<'combined' | 'split'>('layout', 'combined')
+const isSparklineLayout = computed({
+  get: () => chartLayout.value === 'split',
+  set: (v: boolean) => {
+    chartLayout.value = v ? 'split' : 'combined'
+  },
+})
 </script>
 
 <template>
@@ -1630,6 +1639,26 @@ watch(selectedMetric, value => {
     id="trends-chart"
     :aria-busy="activeMetricState.pending ? 'true' : 'false'"
   >
+    <TabRoot
+      v-if="isMultiPackageMode"
+      v-model="chartLayout"
+      id-prefix="chart-layout"
+      class="mt-4 mb-8"
+    >
+      <TabList :ariaLabel="$t('package.trends.chart_view_toggle')">
+        <TabItem value="combined" tab-id="combined-chart-layout-tab" icon="i-lucide:chart-line">
+          {{ $t('package.trends.chart_view_combined') }}
+        </TabItem>
+        <TabItem
+          value="split"
+          tab-id="split-chart-layout-tab"
+          icon="i-lucide:square-split-horizontal"
+        >
+          {{ $t('package.trends.chart_view_split') }}
+        </TabItem>
+      </TabList>
+    </TabRoot>
+
     <div class="w-full mb-4 flex flex-col gap-3">
       <div class="grid grid-cols-2 sm:flex sm:flex-row gap-3 sm:gap-2 sm:items-end">
         <SelectField
@@ -1875,7 +1904,28 @@ watch(selectedMetric, value => {
       "
     >
       <ClientOnly v-if="chartData.dataset">
-        <div :data-pending="pending" :data-minimap-visible="maxDatapoints > 6">
+        <div
+          v-if="isSparklineLayout"
+          id="split-chart-layout-panel"
+          :role="isMultiPackageMode ? 'tabpanel' : undefined"
+          :aria-labelledby="isMultiPackageMode ? 'split-chart-layout-tab' : undefined"
+        >
+          <ChartSplitSparkline
+            :dataset="normalisedDataset"
+            :dates="chartData.dates"
+            :datetimeFormatterOptions
+            :showLastDatapointEstimation="shouldRenderEstimationOverlay && !isEndDateOnPeriodEnd"
+          />
+        </div>
+
+        <div
+          :data-pending="pending"
+          :data-minimap-visible="maxDatapoints > 6"
+          v-else
+          id="combined-chart-layout-panel"
+          :role="isMultiPackageMode ? 'tabpanel' : undefined"
+          :aria-labelledby="isMultiPackageMode ? 'combined-chart-layout-tab' : undefined"
+        >
           <VueUiXy
             :dataset="normalisedDataset"
             :config="chartConfig"
diff --git a/app/components/Tab/Item.vue b/app/components/Tab/Item.vue
new file mode 100644
index 0000000000..6b0f4c3aff
--- /dev/null
+++ b/app/components/Tab/Item.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { IconClass } from '~/types'
+
+defineOptions({ name: 'TabItem', inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    value: string
+    icon?: IconClass
+    tabId?: string
+    variant?: 'primary' | 'secondary'
+    size?: 'sm' | 'md'
+  }>(),
+  {
+    variant: 'secondary',
+    size: 'md',
+  },
+)
+
+const attrs = useAttrs()
+
+const selected = inject<WritableComputedRef<string>>('tabs-selected')
+const getTabId = inject<(value: string) => string>('tabs-tab-id')
+const getPanelId = inject<(value: string) => string>('tabs-panel-id')
+if (!selected || !getTabId || !getPanelId) {
+  throw new Error('TabItem must be used inside a TabRoot component')
+}
+const isSelected = computed(() => selected.value === props.value)
+const resolvedTabId = computed(() => props.tabId ?? getTabId(props.value))
+const resolvedPanelId = computed(() => getPanelId(props.value))
+const select = () => {
+  selected.value = props.value
+}
+</script>
+
+<template>
+  <ButtonBase
+    :id="resolvedTabId"
+    role="tab"
+    :aria-selected="isSelected ? 'true' : 'false'"
+    :aria-controls="resolvedPanelId"
+    :tabindex="isSelected ? -1 : 0"
+    :data-selected="isSelected ? '' : undefined"
+    :variant
+    :size
+    class="tab-item"
+    v-bind="attrs"
+    @click="select"
+  >
+    <span v-if="icon" :class="icon" class="size-[1em]" aria-hidden="true" />
+    <slot />
+  </ButtonBase>
+</template>
+
+<style scoped>
+.tab-item {
+  border-radius: var(--radius, 0.375rem);
+  border-style: solid;
+  border-color: transparent;
+  color: var(--fg-subtle);
+  transition:
+    color 150ms,
+    background-color 150ms,
+    border-color 150ms;
+}
+
+.tab-item:hover {
+  color: var(--fg);
+}
+
+.tab-item[data-selected] {
+  background-color: var(--bg);
+  border-color: var(--border);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+  color: var(--fg);
+}
+</style>
diff --git a/app/components/Tab/List.vue b/app/components/Tab/List.vue
new file mode 100644
index 0000000000..f121ea94d2
--- /dev/null
+++ b/app/components/Tab/List.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+defineOptions({ name: 'TabList' })
+
+defineProps<{
+  ariaLabel: string
+}>()
+
+const listRef = useTemplateRef<HTMLElement>('list')
+
+function onKeydown(event: KeyboardEvent) {
+  const el = listRef.value
+  if (!el) return
+
+  const tabs = Array.from(el.querySelectorAll<HTMLElement>('[role="tab"]'))
+  const current = tabs.indexOf(document.activeElement as HTMLElement)
+  if (current === -1) return
+
+  let next = -1
+
+  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+    next = (current + 1) % tabs.length
+  } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+    next = (current - 1 + tabs.length) % tabs.length
+  } else if (event.key === 'Home') {
+    next = 0
+  } else if (event.key === 'End') {
+    next = tabs.length - 1
+  }
+
+  if (next !== -1) {
+    event.preventDefault()
+    tabs[next]?.focus()
+    tabs[next]?.click()
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="list"
+    role="tablist"
+    :aria-label
+    class="inline-flex items-center gap-1 rounded-md border border-border-subtle bg-bg-subtle p-0.5"
+    @keydown="onKeydown"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/Tab/Panel.vue b/app/components/Tab/Panel.vue
new file mode 100644
index 0000000000..af38532099
--- /dev/null
+++ b/app/components/Tab/Panel.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineOptions({ name: 'TabPanel' })
+
+const props = defineProps<{
+  value: string
+  panelId?: string
+}>()
+
+const selected = inject<WritableComputedRef<string>>('tabs-selected')
+const getTabId = inject<(value: string) => string>('tabs-tab-id')
+const getPanelId = inject<(value: string) => string>('tabs-panel-id')
+
+if (!selected || !getTabId || !getPanelId) {
+  throw new Error('TabPanel must be used inside a TabRoot component')
+}
+
+const isSelected = computed(() => selected.value === props.value)
+const resolvedPanelId = computed(() => props.panelId ?? getPanelId(props.value))
+const resolvedTabId = computed(() => getTabId(props.value))
+</script>
+
+<template>
+  <div
+    v-show="isSelected"
+    :id="resolvedPanelId"
+    role="tabpanel"
+    :aria-labelledby="resolvedTabId"
+    :data-selected="isSelected ? '' : undefined"
+    :tabindex="0"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/Tab/Root.vue b/app/components/Tab/Root.vue
new file mode 100644
index 0000000000..e6fbba2915
--- /dev/null
+++ b/app/components/Tab/Root.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineOptions({ name: 'TabRoot' })
+
+const props = withDefaults(
+  defineProps<{
+    idPrefix?: string
+  }>(),
+  {
+    idPrefix: 'tab',
+  },
+)
+const selectedValue = defineModel<string>()
+
+function tabId(value: string): string {
+  return `${props.idPrefix}-${value}`
+}
+
+function panelId(value: string): string {
+  return `${props.idPrefix}-panel-${value}`
+}
+
+provide('tabs-selected', selectedValue)
+provide('tabs-tab-id', tabId)
+provide('tabs-panel-id', panelId)
+</script>
+
+<template>
+  <div class="tab-root">
+    <slot />
+  </div>
+</template>
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index db383e0e03..4d37296971 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -77,7 +77,7 @@ const columnLoading = computed(() => packages.value.map((_, i) => isColumnLoadin
 // Check if we have enough packages to compare
 const canCompare = computed(() => packages.value.length >= 2)
 
-const comparisonView = ref<'table' | 'charts'>('table')
+const comparisonView = usePermalink<'table' | 'charts'>('view', 'table')
 
 // Extract headers from columns for facet rows
 const gridHeaders = computed(() =>
@@ -274,57 +274,50 @@ useSeoMeta({
 
         <div v-else-if="packagesData && packagesData.some(p => p !== null)">
           <!-- View tabs -->
-          <div
-            v-if="selectedFacets.some(facet => facet.chartable)"
-            class="inline-flex items-center gap-1 rounded-md border border-border-subtle bg-bg-subtle p-0.5 mt-4"
-            role="tablist"
-            :aria-label="$t('compare.packages.section_comparison')"
+          <TabRoot
+            v-model="comparisonView"
+            default-value="table"
+            id-prefix="comparison"
+            class="mt-4"
           >
-            <button
-              id="comparison-tab-table"
-              type="button"
-              role="tab"
-              :aria-selected="comparisonView === 'table' ? 'true' : 'false'"
-              aria-controls="comparison-panel-table"
-              :tabindex="comparisonView === 'table' ? -1 : 0"
-              class="flex items-center justify-center gap-x-2 rounded px-3 py-2 font-mono text-sm border border-solid transition-colors duration-150 focus-visible:outline-accent/70"
-              :class="
-                comparisonView === 'table'
-                  ? 'bg-bg border-border shadow-sm text-fg'
-                  : 'border-transparent text-fg-subtle hover:text-fg'
-              "
-              @click="comparisonView = 'table'"
-            >
-              <span class="i-lucide:table size-[1em]" aria-hidden="true" />
-              <span>{{ $t('compare.packages.table_view') }}</span>
-            </button>
-
-            <button
-              id="comparison-tab-charts"
-              type="button"
-              role="tab"
-              :aria-selected="comparisonView === 'charts' ? 'true' : 'false'"
-              aria-controls="comparison-panel-charts"
-              :tabindex="comparisonView === 'charts' ? -1 : 0"
-              class="flex items-center justify-center gap-x-2 rounded px-3 py-2 font-mono text-sm border border-solid transition-colors duration-150 focus-visible:outline-accent/70"
-              :class="
-                comparisonView === 'charts'
-                  ? 'bg-bg border-border shadow-sm text-fg'
-                  : 'border-transparent text-fg-subtle hover:text-fg'
-              "
-              @click="comparisonView = 'charts'"
-            >
-              <span class="i-lucide:chart-bar-decreasing size-[1em]" aria-hidden="true" />
-              <span>{{ $t('compare.packages.charts_view') }}</span>
-            </button>
-          </div>
-
-          <!-- Data table -->
-          <div v-show="comparisonView === 'table'" role="tabpanel">
-            <!-- Desktop: Grid layout -->
-            <div class="hidden md:block overflow-x-auto">
-              <CompareComparisonGrid :columns="gridColumns" :show-no-dependency="showNoDependency">
-                <CompareFacetRow
+            <TabList :ariaLabel="$t('compare.packages.section_comparison')">
+              <TabItem value="table" tab-id="comparison-tab-table" icon="i-lucide:table">
+                {{ $t('compare.packages.table_view') }}
+              </TabItem>
+              <TabItem
+                value="charts"
+                tab-id="comparison-tab-charts"
+                icon="i-lucide:chart-bar-decreasing"
+              >
+                {{ $t('compare.packages.charts_view') }}
+              </TabItem>
+            </TabList>
+
+            <!-- Data table -->
+            <TabPanel value="table" panel-id="comparison-panel-table">
+              <!-- Desktop: Grid layout -->
+              <div class="hidden md:block overflow-x-auto">
+                <CompareComparisonGrid
+                  :columns="gridColumns"
+                  :show-no-dependency="showNoDependency"
+                >
+                  <CompareFacetRow
+                    v-for="facet in selectedFacets"
+                    :key="facet.id"
+                    :label="facet.label"
+                    :description="facet.description"
+                    :values="getFacetValues(facet.id)"
+                    :facet-loading="isFacetLoading(facet.id)"
+                    :column-loading="columnLoading"
+                    :bar="facet.id !== 'lastUpdated'"
+                    :headers="gridHeaders"
+                  />
+                </CompareComparisonGrid>
+              </div>
+
+              <!-- Mobile: Card-based layout -->
+              <div class="md:hidden space-y-3">
+                <CompareFacetCard
                   v-for="facet in selectedFacets"
                   :key="facet.id"
                   :label="facet.label"
@@ -335,43 +328,34 @@ useSeoMeta({
                   :bar="facet.id !== 'lastUpdated'"
                   :headers="gridHeaders"
                 />
-              </CompareComparisonGrid>
-            </div>
-
-            <!-- Mobile: Card-based layout -->
-            <div class="md:hidden space-y-3">
-              <CompareFacetCard
-                v-for="facet in selectedFacets"
-                :key="facet.id"
-                :label="facet.label"
-                :description="facet.description"
-                :values="getFacetValues(facet.id)"
-                :facet-loading="isFacetLoading(facet.id)"
-                :column-loading="columnLoading"
-                :bar="facet.id !== 'lastUpdated'"
-                :headers="gridHeaders"
-              />
-            </div>
-          </div>
-
-          <!-- bar charts -->
-          <div v-if="comparisonView === 'charts'" role="tabpanel">
-            <div class="sm:grid grid-cols-2 gap-x-4">
+              </div>
+            </TabPanel>
+
+            <!-- bar charts -->
+            <TabPanel value="charts" panel-id="comparison-panel-charts">
               <div
-                v-for="facet in selectedFacets.filter(facet => facet.chartable)"
-                :key="facet.id"
-                class="my-6"
+                v-if="selectedFacets.some(facet => facet.chartable)"
+                class="sm:grid grid-cols-2 gap-x-4"
               >
-                <FacetBarChart
-                  :values="getFacetValues(facet.id)"
-                  :packages="packages.filter(p => p !== NO_DEPENDENCY_ID)"
-                  :label="facet.label"
-                  :description="facet.description"
-                  :facet-loading="isFacetLoading(facet.id)"
-                />
+                <div
+                  v-for="facet in selectedFacets.filter(facet => facet.chartable)"
+                  :key="facet.id"
+                  class="my-6"
+                >
+                  <FacetBarChart
+                    :values="getFacetValues(facet.id)"
+                    :packages="packages.filter(p => p !== NO_DEPENDENCY_ID)"
+                    :label="facet.label"
+                    :description="facet.description"
+                    :facet-loading="isFacetLoading(facet.id)"
+                  />
+                </div>
               </div>
-            </div>
-          </div>
+              <p v-else class="py-12 text-center text-fg-subtle">
+                {{ $t('compare.packages.no_chartable_data') }}
+              </p>
+            </TabPanel>
+          </TabRoot>
 
           <h2
             id="trends-comparison-heading"
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index f5d11b5186..0dd3ea035e 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -489,6 +489,9 @@
         "table_available": "A data table for this chart is available below.",
         "table_caption": "Chart data table"
       },
+      "chart_view_toggle": "Toggle view",
+      "chart_view_combined": "Combined view",
+      "chart_view_split": "Split view",
       "granularity": "Granularity",
       "granularity_daily": "Daily",
       "granularity_weekly": "Weekly",
@@ -1106,6 +1109,7 @@
       "empty_description": "Search and add at least 2 packages above to see a side-by-side comparison of their metrics.",
       "table_view": "Table",
       "charts_view": "Charts",
+      "no_chartable_data": "No chartable data available for the selected facets.",
       "bar_chart_nav_hint": "Use ↑ ↓",
       "line_chart_nav_hint": "Use ← →"
     },
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index e5d6b02331..9bf5bb4b26 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -486,6 +486,9 @@
         "table_available": "Un tableau de données pour ce graphique est disponible ci-dessous.",
         "table_caption": "Tableau de données du graphique"
       },
+      "chart_view_toggle": "Changer de vue",
+      "chart_view_combined": "Vue groupée",
+      "chart_view_split": "Vue séparée",
       "granularity": "Granularité",
       "granularity_daily": "Par Jour",
       "granularity_weekly": "Par Semaine",
diff --git a/i18n/schema.json b/i18n/schema.json
index 77bce0c10f..9c831eccde 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1471,6 +1471,15 @@
               },
               "additionalProperties": false
             },
+            "chart_view_toggle": {
+              "type": "string"
+            },
+            "chart_view_combined": {
+              "type": "string"
+            },
+            "chart_view_split": {
+              "type": "string"
+            },
             "granularity": {
               "type": "string"
             },
@@ -3322,6 +3331,9 @@
             "charts_view": {
               "type": "string"
             },
+            "no_chartable_data": {
+              "type": "string"
+            },
             "bar_chart_nav_hint": {
               "type": "string"
             },
diff --git a/package.json b/package.json
index f4a56a00d3..6ca8f7dabb 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.1.12",
     "vue": "3.5.30",
-    "vue-data-ui": "3.16.1"
+    "vue-data-ui": "3.16.5"
   },
   "devDependencies": {
     "@e18e/eslint-plugin": "0.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 18a15c1e39..9e91751be7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -235,8 +235,8 @@ importers:
         specifier: 3.5.30
         version: 3.5.30(typescript@6.0.2)
       vue-data-ui:
-        specifier: 3.16.1
-        version: 3.16.1(vue@3.5.30(typescript@6.0.2))
+        specifier: 3.16.5
+        version: 3.16.5(vue@3.5.30(typescript@6.0.2))
     devDependencies:
       '@e18e/eslint-plugin':
         specifier: 0.3.0
@@ -10721,8 +10721,8 @@ packages:
   vue-component-type-helpers@3.2.6:
     resolution: {integrity: sha512-O02tnvIfOQVmnvoWwuSydwRoHjZVt8UEBR+2p4rT35p8GAy5VTlWP8o5qXfJR/GWCN0nVZoYWsVUvx2jwgdBmQ==}
 
-  vue-data-ui@3.16.1:
-    resolution: {integrity: sha512-abJC3lSyikfD2y7sY61ZqKE2x5gPDtfsu/89oVndyVbk0ZaFQ4L6SCgPVlCPpFrNdfLRYM7KIYP+rseU5LHbYA==}
+  vue-data-ui@3.16.5:
+    resolution: {integrity: sha512-m6q7vy/DWKZpiR1TOYbqNEYYTH1FEFkT0VgzZK3EZvJX7k+q3UMKMEO57lR5S6l9ETy+PDuJoR/7hg9SOcDJAw==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: '>=3.3.0'
@@ -23600,7 +23600,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.6: {}
 
-  vue-data-ui@3.16.1(vue@3.5.30(typescript@6.0.2)):
+  vue-data-ui@3.16.5(vue@3.5.30(typescript@6.0.2)):
     dependencies:
       vue: 3.5.30(typescript@6.0.2)
 
diff --git a/server/utils/readme.ts b/server/utils/readme.ts
index 67345a65cd..b5befe67b7 100644
--- a/server/utils/readme.ts
+++ b/server/utils/readme.ts
@@ -458,6 +458,17 @@ function renderFrontmatterTable(data: Record<string, unknown>): string {
   return `<table><thead><tr><th>Key</th><th>Value</th></tr></thead><tbody>\n${rows}\n</tbody></table>\n`
 }
 
+// Extract and preserve allowed attributes from HTML heading tags
+function extractHeadingAttrs(attrsString: string): string {
+  if (!attrsString) return ''
+  const preserved: string[] = []
+  const alignMatch = /\balign=(["']?)([^"'\s>]+)\1/i.exec(attrsString)
+  if (alignMatch?.[2]) {
+    preserved.push(`align="${alignMatch[2]}"`)
+  }
+  return preserved.length > 0 ? ` ${preserved.join(' ')}` : ''
+}
+
 export async function renderReadmeHtml(
   content: string,
   packageName: string,
@@ -530,17 +541,6 @@ export async function renderReadmeHtml(
     return processHeading(depth, displayHtml, plainText, slugSource)
   }
 
-  // Extract and preserve allowed attributes from HTML heading tags
-  function extractHeadingAttrs(attrsString: string): string {
-    if (!attrsString) return ''
-    const preserved: string[] = []
-    const alignMatch = /\balign=(["']?)([^"'\s>]+)\1/i.exec(attrsString)
-    if (alignMatch?.[2]) {
-      preserved.push(`align="${alignMatch[2]}"`)
-    }
-    return preserved.length > 0 ? ` ${preserved.join(' ')}` : ''
-  }
-
   // Intercept HTML headings so they get id, TOC entry, and correct semantic level.
   // Also intercept raw HTML <a> tags so playground links are collected in the same pass.
   const htmlHeadingRe = /<h([1-6])(\s[^>]*)?>([\s\S]*?)<\/h\1>/gi
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 35df44b805..36ee338d8b 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -233,6 +233,11 @@ import {
   PackageSelectionView,
   PackageSelectionCheckbox,
   PackageExternalLinks,
+  ChartSplitSparkline,
+  TabRoot,
+  TabList,
+  TabItem,
+  TabPanel,
 } from '#components'
 
 // Server variant components must be imported directly to test the server-side render
@@ -246,6 +251,7 @@ import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
 import PackageLikeCard from '~/components/Package/LikeCard.vue'
 import SizeIncrease from '~/components/Package/SizeIncrease.vue'
 import Likes from '~/components/Package/Likes.vue'
+import type { VueUiXyDatasetItem } from 'vue-data-ui'
 
 describe('component accessibility audits', () => {
   describe('DateTime', () => {
@@ -941,6 +947,93 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('ChartSplitSparkline', () => {
+    const dataset = [
+      {
+        color: 'oklch(0.7025 0.132 160.37)',
+        name: 'vue',
+        series: [100_000, 200_000, 150_000],
+        type: 'line',
+        dashIndices: [],
+      },
+      {
+        color: 'oklch(0.6917 0.1865 35.04)',
+        name: 'svelte',
+        series: [100_000, 200_000, 150_000],
+        type: 'line',
+        dashIndices: [],
+      },
+    ] as Array<
+      VueUiXyDatasetItem & {
+        color?: string
+        series: number[]
+        dashIndices?: number[]
+      }
+    >
+    const dates = [1743465600000, 1744070400000, 1744675200000]
+    const datetimeFormatterOptions = {
+      year: 'yyyy-MM-dd',
+      month: 'yyyy-MM-dd',
+      day: 'yyyy-MM-dd',
+    }
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(ChartSplitSparkline, {
+        props: {
+          dataset,
+          dates,
+          datetimeFormatterOptions,
+          showLastDatapointEstimation: false,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when empty', async () => {
+      const component = await mountSuspended(ChartSplitSparkline, {
+        props: {
+          dataset: [],
+          dates: [],
+          datetimeFormatterOptions,
+          showLastDatapointEstimation: false,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('TabRoot + TabList + TabItem + TabPanel', () => {
+    function createTabsFixture(modelValue: string, idPrefix: string) {
+      return defineComponent({
+        setup() {
+          return () =>
+            h(TabRoot, { modelValue, idPrefix }, () => [
+              h(TabList, { ariaLabel: 'Test tabs' }, () => [
+                h(TabItem, { value: 'first' }, () => 'First'),
+                h(TabItem, { value: 'second' }, () => 'Second'),
+              ]),
+              h(TabPanel, { value: 'first' }, () => 'First content'),
+              h(TabPanel, { value: 'second' }, () => 'Second content'),
+            ])
+        },
+      })
+    }
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(createTabsFixture('first', 'a11y-test'))
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with second tab selected', async () => {
+      const component = await mountSuspended(createTabsFixture('second', 'a11y-test2'))
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('PackagePlaygrounds', () => {
     it('should have no accessibility violations with single link', async () => {
       const links = [
diff --git a/test/nuxt/components/Tab.spec.ts b/test/nuxt/components/Tab.spec.ts
new file mode 100644
index 0000000000..3af2882735
--- /dev/null
+++ b/test/nuxt/components/Tab.spec.ts
@@ -0,0 +1,171 @@
+import { describe, it, expect } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { defineComponent, h } from 'vue'
+import { TabRoot, TabList, TabItem, TabPanel } from '#components'
+
+function createTabsWrapper(props: { modelValue: string; idPrefix?: string }) {
+  return defineComponent({
+    components: { TabRoot, TabList, TabItem, TabPanel },
+    setup() {
+      return () =>
+        h(
+          TabRoot,
+          {
+            'modelValue': props.modelValue,
+            'idPrefix': props.idPrefix ?? 'test',
+            'onUpdate:modelValue': () => {},
+          },
+          () => [
+            h(TabList, { ariaLabel: 'Test tabs' }, () => [
+              h(TabItem, { value: 'one' }, () => 'One'),
+              h(TabItem, { value: 'two' }, () => 'Two'),
+              h(TabItem, { value: 'three' }, () => 'Three'),
+            ]),
+            h(TabPanel, { value: 'one' }, () => 'Content one'),
+            h(TabPanel, { value: 'two' }, () => 'Content two'),
+            h(TabPanel, { value: 'three' }, () => 'Content three'),
+          ],
+        )
+    },
+  })
+}
+
+async function mountTabs({ modelValue = 'one', idPrefix = 'test' } = {}) {
+  const Wrapper = createTabsWrapper({ modelValue, idPrefix })
+  return mountSuspended(Wrapper, { attachTo: document.body })
+}
+
+describe('Tab components', () => {
+  describe('TabRoot', () => {
+    it('renders tablist', async () => {
+      const wrapper = await mountTabs()
+      expect(wrapper.find('[role="tablist"]').exists()).toBe(true)
+      wrapper.unmount()
+    })
+
+    it('provides selected value to children', async () => {
+      const wrapper = await mountTabs({ modelValue: 'two' })
+      const tabs = wrapper.findAll('[role="tab"]')
+      const selected = tabs.find(t => t.attributes('aria-selected') === 'true')
+      expect(selected?.text()).toBe('Two')
+      wrapper.unmount()
+    })
+  })
+
+  describe('TabList', () => {
+    it('has tablist role and aria-label', async () => {
+      const wrapper = await mountTabs()
+      const tablist = wrapper.find('[role="tablist"]')
+      expect(tablist.exists()).toBe(true)
+      expect(tablist.attributes('aria-label')).toBe('Test tabs')
+      wrapper.unmount()
+    })
+
+    it('supports arrow key navigation', async () => {
+      const wrapper = await mountTabs()
+      const tablist = wrapper.find('[role="tablist"]')
+      const tabs = wrapper.findAll('[role="tab"]')
+
+      ;(tabs[0]!.element as HTMLElement).focus()
+      expect(document.activeElement).toBe(tabs[0]!.element)
+
+      await tablist.trigger('keydown', { key: 'ArrowRight' })
+      expect(document.activeElement).toBe(tabs[1]!.element)
+
+      // Wraps around
+      await tablist.trigger('keydown', { key: 'ArrowRight' })
+      await tablist.trigger('keydown', { key: 'ArrowRight' })
+      expect(document.activeElement).toBe(tabs[0]!.element)
+
+      // ArrowLeft wraps backwards
+      await tablist.trigger('keydown', { key: 'ArrowLeft' })
+      expect(document.activeElement).toBe(tabs[2]!.element)
+
+      wrapper.unmount()
+    })
+
+    it('supports Home and End keys', async () => {
+      const wrapper = await mountTabs()
+      const tablist = wrapper.find('[role="tablist"]')
+      const tabs = wrapper.findAll('[role="tab"]')
+
+      ;(tabs[1]!.element as HTMLElement).focus()
+
+      await tablist.trigger('keydown', { key: 'Home' })
+      expect(document.activeElement).toBe(tabs[0]!.element)
+
+      await tablist.trigger('keydown', { key: 'End' })
+      expect(document.activeElement).toBe(tabs[2]!.element)
+
+      wrapper.unmount()
+    })
+  })
+
+  describe('TabItem', () => {
+    it('has correct ARIA attributes when selected', async () => {
+      const wrapper = await mountTabs({ modelValue: 'one' })
+      const tabs = wrapper.findAll('[role="tab"]')
+      const first = tabs[0]!
+      const second = tabs[1]!
+
+      expect(first.attributes('aria-selected')).toBe('true')
+      expect(first.attributes('tabindex')).toBe('-1')
+      expect(first.attributes('data-selected')).toBeDefined()
+
+      expect(second.attributes('aria-selected')).toBe('false')
+      expect(second.attributes('tabindex')).toBe('0')
+      expect(second.attributes('data-selected')).toBeUndefined()
+
+      wrapper.unmount()
+    })
+
+    it('emits update:modelValue on click', async () => {
+      const wrapper = await mountTabs({ modelValue: 'one' })
+      const tabs = wrapper.findAll('[role="tab"]')
+
+      await tabs[1]!.trigger('click')
+      const root = wrapper.findComponent(TabRoot)
+      expect(root.emitted('update:modelValue')?.[0]).toEqual(['two'])
+
+      wrapper.unmount()
+    })
+
+    it('generates aria-controls pointing to panel id', async () => {
+      const wrapper = await mountTabs({ idPrefix: 'my-tabs' })
+      const tab = wrapper.findAll('[role="tab"]')[0]!
+      expect(tab.attributes('aria-controls')).toBe('my-tabs-panel-one')
+      wrapper.unmount()
+    })
+  })
+
+  describe('TabPanel', () => {
+    it('shows panel matching selected value', async () => {
+      const wrapper = await mountTabs({ modelValue: 'one' })
+      const panels = wrapper.findAll('[role="tabpanel"]')
+
+      const visible = panels.filter(p => (p.element as HTMLElement).style.display !== 'none')
+      expect(visible).toHaveLength(1)
+      expect(visible[0]!.text()).toBe('Content one')
+
+      wrapper.unmount()
+    })
+
+    it('hides panels not matching selected value', async () => {
+      const wrapper = await mountTabs({ modelValue: 'two' })
+      const panels = wrapper.findAll('[role="tabpanel"]')
+
+      const visible = panels.filter(p => (p.element as HTMLElement).style.display !== 'none')
+      expect(visible).toHaveLength(1)
+      expect(visible[0]!.text()).toBe('Content two')
+
+      wrapper.unmount()
+    })
+
+    it('has aria-labelledby pointing to tab id', async () => {
+      const wrapper = await mountTabs({ idPrefix: 'demo' })
+      const panel = wrapper.findAll('[role="tabpanel"]')[0]!
+      expect(panel.attributes('aria-labelledby')).toBe('demo-one')
+      wrapper.unmount()
+    })
+  })
+})
diff --git a/test/unit/app/utils/versions.spec.ts b/test/unit/app/utils/versions.spec.ts
index 2108d4f265..47abe40825 100644
--- a/test/unit/app/utils/versions.spec.ts
+++ b/test/unit/app/utils/versions.spec.ts
@@ -425,11 +425,11 @@ describe('isSameVersionGroup', () => {
   })
 })
 
-describe('compareTagRows', () => {
-  function row(version: string, tags: string[]) {
-    return { id: `version:${version}`, primaryTag: tags[0]!, tags, version }
-  }
+function row(version: string, tags: string[]) {
+  return { id: `version:${version}`, primaryTag: tags[0]!, tags, version }
+}
 
+describe('compareTagRows', () => {
   it('sorts by tag priority ascending (rc before beta)', () => {
     const rc = row('2.0.0-rc.1', ['rc'])
     const beta = row('2.0.0-beta.1', ['beta'])