From c7126fe12399eb35872ebd526c9623b99f27c8de Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Sat, 28 Feb 2026 11:02:51 -0500
Subject: [PATCH 1/4] feat: add "across all versions" subtitle to weekly
 downloads section

Clarifies that download stats are aggregated at the package level,
not per version. Adds a subtitle prop to CollapsibleSection and
uses it in the downloads sidebar to reduce user confusion.

Closes #1670
---
 app/components/CollapsibleSection.vue             | 15 +++++++++++----
 app/components/Package/WeeklyDownloadStats.vue    |  6 +++++-
 i18n/locales/en.json                              |  3 ++-
 i18n/locales/fr-FR.json                           |  3 ++-
 i18n/schema.json                                  |  3 +++
 lunaria/files/en-GB.json                          |  3 ++-
 lunaria/files/en-US.json                          |  3 ++-
 lunaria/files/fr-FR.json                          |  3 ++-
 .../components/PackageWeeklyDownloadStats.spec.ts |  2 ++
 9 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 48f9d5329f..4e05f2dd07 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -4,6 +4,7 @@ import { LinkBase } from '#components'
 
 interface Props {
   title: string
+  subtitle?: string
   isLoading?: boolean
   headingLevel?: `h${number}`
   id: string
@@ -81,7 +82,8 @@ useHead({
     <div class="flex items-center justify-between mb-3 px-1">
       <component
         :is="headingLevel"
-        class="group text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2"
+        class="group text-xs text-fg-subtle uppercase tracking-wider flex gap-2"
+        :class="subtitle ? 'items-start' : 'items-center'"
       >
         <button
           :id="buttonId"
@@ -101,9 +103,14 @@ useHead({
           />
         </button>
 
-        <LinkBase :to="`#${id}`">
-          {{ title }}
-        </LinkBase>
+        <div>
+          <LinkBase :to="`#${id}`">
+            {{ title }}
+          </LinkBase>
+          <span v-if="subtitle" class="block text-2xs normal-case tracking-normal opacity-70">{{
+            subtitle
+          }}</span>
+        </div>
       </component>
 
       <!-- Actions slot for buttons or other elements -->
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 6f1fa4defb..222fd43fcd 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -281,7 +281,11 @@ const config = computed<VueUiSparklineConfig>(() => {
 
 <template>
   <div class="space-y-8">
-    <CollapsibleSection id="downloads" :title="$t('package.downloads.title')">
+    <CollapsibleSection
+      id="downloads"
+      :title="$t('package.downloads.title')"
+      :subtitle="$t('package.downloads.subtitle')"
+    >
       <template #actions>
         <ButtonBase
           v-if="hasWeeklyDownloads"
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 34d88abaa3..a790949dc3 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -440,7 +440,8 @@
     },
     "downloads": {
       "title": "Weekly Downloads",
-      "community_distribution": "View community adoption distribution"
+      "community_distribution": "View community adoption distribution",
+      "subtitle": "Across all versions"
     },
     "install_scripts": {
       "title": "Install Scripts",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 142067c1f6..00bd8a1ff3 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -415,7 +415,8 @@
     },
     "downloads": {
       "title": "Téléchargements hebdo.",
-      "community_distribution": "Voir la distribution des versions téléchargées par la communauté"
+      "community_distribution": "Voir la distribution des versions téléchargées par la communauté",
+      "subtitle": "Toutes versions confondues"
     },
     "install_scripts": {
       "title": "Scripts d'installation",
diff --git a/i18n/schema.json b/i18n/schema.json
index 36795db2b2..da97755965 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1326,6 +1326,9 @@
             },
             "community_distribution": {
               "type": "string"
+            },
+            "subtitle": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 42611bf9e0..f12dabad46 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -439,7 +439,8 @@
     },
     "downloads": {
       "title": "Weekly Downloads",
-      "community_distribution": "View community adoption distribution"
+      "community_distribution": "View community adoption distribution",
+      "subtitle": "Across all versions"
     },
     "install_scripts": {
       "title": "Install Scripts",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index a63a6cba47..378fa89d18 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -439,7 +439,8 @@
     },
     "downloads": {
       "title": "Weekly Downloads",
-      "community_distribution": "View community adoption distribution"
+      "community_distribution": "View community adoption distribution",
+      "subtitle": "Across all versions"
     },
     "install_scripts": {
       "title": "Install Scripts",
diff --git a/lunaria/files/fr-FR.json b/lunaria/files/fr-FR.json
index 2cf53508e5..c384bfa5ed 100644
--- a/lunaria/files/fr-FR.json
+++ b/lunaria/files/fr-FR.json
@@ -414,7 +414,8 @@
     },
     "downloads": {
       "title": "Téléchargements hebdo.",
-      "community_distribution": "Voir la distribution des versions téléchargées par la communauté"
+      "community_distribution": "Voir la distribution des versions téléchargées par la communauté",
+      "subtitle": "Toutes versions confondues"
     },
     "install_scripts": {
       "title": "Scripts d'installation",
diff --git a/test/nuxt/components/PackageWeeklyDownloadStats.spec.ts b/test/nuxt/components/PackageWeeklyDownloadStats.spec.ts
index a23b4cf65d..735bbd4091 100644
--- a/test/nuxt/components/PackageWeeklyDownloadStats.spec.ts
+++ b/test/nuxt/components/PackageWeeklyDownloadStats.spec.ts
@@ -40,6 +40,7 @@ describe('PackageWeeklyDownloadStats', () => {
     })
 
     expect(component.text()).toContain('Weekly Downloads')
+    expect(component.text()).toContain('Across all versions')
     expect(component.text()).toContain('No data available')
   })
 
@@ -60,6 +61,7 @@ describe('PackageWeeklyDownloadStats', () => {
     })
 
     expect(component.text()).toContain('Weekly Downloads')
+    expect(component.text()).toContain('Across all versions')
     expect(component.text()).not.toContain('No data available')
   })
 })

From 3f68e08614bb257f8e1ae28c458bcc5fd5acc1b6 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Sat, 28 Feb 2026 11:26:46 -0500
Subject: [PATCH 2/4] feat: also add subheading to chart modal

---
 app/components/CollapsibleSection.vue          |  4 ++--
 app/components/Modal.client.vue                | 10 +++++++---
 app/components/Package/ChartModal.vue          |  2 ++
 app/components/Package/WeeklyDownloadStats.vue |  7 +++++++
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 4e05f2dd07..e56228f21f 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -103,14 +103,14 @@ useHead({
           />
         </button>
 
-        <div>
+        <span>
           <LinkBase :to="`#${id}`">
             {{ title }}
           </LinkBase>
           <span v-if="subtitle" class="block text-2xs normal-case tracking-normal opacity-70">{{
             subtitle
           }}</span>
-        </div>
+        </span>
       </component>
 
       <!-- Actions slot for buttons or other elements -->
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 54d97fe5e3..c5d14b8827 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
   modalTitle: string
+  modalSubtitle?: string
 }>()
 
 const dialogRef = useTemplateRef('dialogRef')
@@ -50,9 +51,12 @@ defineExpose({
     >
       <!-- Modal top header section -->
       <div class="flex items-center justify-between mb-6">
-        <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
-          {{ modalTitle }}
-        </h2>
+        <div>
+          <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
+            {{ modalTitle }}
+          </h2>
+          <p v-if="modalSubtitle" class="text-xs text-fg-subtle">{{ modalSubtitle }}</p>
+        </div>
         <ButtonBase
           type="button"
           :aria-label="$t('common.close')"
diff --git a/app/components/Package/ChartModal.vue b/app/components/Package/ChartModal.vue
index 08b4eefea7..598291c894 100644
--- a/app/components/Package/ChartModal.vue
+++ b/app/components/Package/ChartModal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
   modalTitle?: string
+  modalSubtitle?: string
 }>()
 
 const emit = defineEmits<{
@@ -11,6 +12,7 @@ const emit = defineEmits<{
 <template>
   <Modal
     :modalTitle="modalTitle ?? $t('package.trends.title')"
+    :modalSubtitle="modalSubtitle"
     id="chart-modal"
     class="h-full sm:h-min sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90vh] sm:max-w-3xl"
     @transitioned="emit('transitioned')"
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 222fd43fcd..9198dd0e17 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -28,6 +28,12 @@ const modalTitle = computed(() => {
   return $t('package.trends.items.downloads')
 })
 
+const modalSubtitle = computed(() => {
+  const facet = route.query.facet as string | undefined
+  if (facet === 'likes' || facet === 'contributors') return undefined
+  return $t('package.downloads.subtitle')
+})
+
 const isChartModalOpen = shallowRef<boolean>(false)
 
 function handleModalClose() {
@@ -355,6 +361,7 @@ const config = computed<VueUiSparklineConfig>(() => {
   <PackageChartModal
     v-if="isChartModalOpen && hasWeeklyDownloads"
     :modal-title="modalTitle"
+    :modal-subtitle="modalSubtitle"
     @close="handleModalClose"
     @transitioned="handleModalTransitioned"
   >

From 07530bbea1f7efb2697acddf5cfb8df459d948a2 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Sat, 28 Feb 2026 11:35:35 -0500
Subject: [PATCH 3/4] fix: improve subheading contrast

---
 app/components/CollapsibleSection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index e56228f21f..58400f2793 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -107,7 +107,7 @@ useHead({
           <LinkBase :to="`#${id}`">
             {{ title }}
           </LinkBase>
-          <span v-if="subtitle" class="block text-2xs normal-case tracking-normal opacity-70">{{
+          <span v-if="subtitle" class="block text-2xs normal-case tracking-normal">{{
             subtitle
           }}</span>
         </span>

From 5426dd532b5b0a6cd872ad6450d0201015bf814f Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Sat, 28 Feb 2026 11:56:45 -0500
Subject: [PATCH 4/4] fix: add subheading to SR dialog description

---
 app/components/Modal.client.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index c5d14b8827..cf3b64c61a 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -15,6 +15,12 @@ const modalTitleId = computed(() => {
   return id ? `${id}-title` : undefined
 })
 
+const modalSubtitleId = computed(() => {
+  if (!props.modalSubtitle) return undefined
+  const id = getCurrentInstance()?.attrs.id
+  return id ? `${id}-subtitle` : undefined
+})
+
 function handleModalClose() {
   dialogRef.value?.close()
 }
@@ -46,6 +52,7 @@ defineExpose({
       closedby="any"
       class="w-[calc(100%-2rem)] bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg focus-visible:outline focus-visible:outline-accent/70"
       :aria-labelledby="modalTitleId"
+      :aria-describedby="modalSubtitleId"
       v-bind="$attrs"
       @transitionend="onDialogTransitionEnd"
     >
@@ -55,7 +62,9 @@ defineExpose({
           <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
             {{ modalTitle }}
           </h2>
-          <p v-if="modalSubtitle" class="text-xs text-fg-subtle">{{ modalSubtitle }}</p>
+          <p v-if="modalSubtitle" :id="modalSubtitleId" class="text-xs text-fg-subtle">
+            {{ modalSubtitle }}
+          </p>
         </div>
         <ButtonBase
           type="button"