Merge branch 'main' into fix-color-contrast

# Conflicts:
#	app/components/DependencyPathPopup.vue

Author: userquin

app/assets/main.css

@@ -236,11 +236,6 @@ dd {
   margin: 0;
 }
 
-/* Reset button styles */
-button {
-  cursor: pointer;
-}
-
 /* Selection */
 ::selection {
   background-color: var(--fg-muted);

app/components/ColumnPicker.vue

@@ -102,11 +102,7 @@ function handleReset() {
               v-for="column in toggleableColumns"
               :key="column.id"
               class="flex gap-2 items-center px-3 py-2 transition-colors duration-200"
-              :class="
-                column.disabled
-                  ? 'opacity-50 cursor-not-allowed'
-                  : 'hover:bg-bg-muted cursor-pointer'
-              "
+              :class="column.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-bg-muted'"
             >
               <input
                 type="checkbox"

app/components/DependencyPathPopup.vue

@@ -68,7 +68,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
     <!-- Path badge button -->
     <button
       type="button"
-      class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-800 dark:text-amber-400 cursor-pointer transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
+      class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-800 dark:text-amber-400 transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
       :aria-expanded="isOpen"
       @click.stop="togglePopup"
     >

app/components/Header/AuthModal.client.vue

@@ -105,7 +105,7 @@ watch(handleInput, newHandleInput => {
 
         <details class="text-sm">
           <summary
-            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200 focus-visible:(outline-2 outline-accent/70)"
+            class="text-fg-subtle hover:text-fg-muted transition-colors duration-200 focus-visible:(outline-2 outline-accent/70)"
           >
             {{ $t('auth.modal.what_is_atmosphere') }}
           </summary>

app/components/Header/ConnectorModal.vue

@@ -173,9 +173,7 @@ function handleDisconnect() {
         </div>
 
         <details class="text-sm">
-          <summary
-            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
-          >
+          <summary class="text-fg-subtle hover:text-fg-muted transition-colors duration-200">
             {{ $t('connector.modal.advanced') }}
           </summary>
           <div class="mt-3">

app/components/Org/OperationsQueue.vue

@@ -292,7 +292,7 @@ watch(isExecuting, executing => {
     <!-- Completed operations log (collapsed by default) -->
     <details v-if="hasCompletedOperations" class="mt-4 border-t border-border pt-4">
       <summary
-        class="flex items-center gap-2 font-mono text-xs text-fg-muted cursor-pointer hover:text-fg transition-colors duration-200 select-none"
+        class="flex items-center gap-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 select-none"
       >
         <span
           class="i-carbon:chevron-right rtl-flip w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"

app/components/Package/ClaimPackageModal.vue

@@ -344,7 +344,7 @@ const previewPackageJson = computed(() => {
           <!-- Expandable package.json preview -->
           <details class="border border-border rounded-md overflow-hidden">
             <summary
-              class="px-3 py-2 text-sm text-fg-muted bg-bg-subtle cursor-pointer hover:text-fg transition-colors select-none"
+              class="px-3 py-2 text-sm text-fg-muted bg-bg-subtle hover:text-fg transition-colors select-none"
             >
               {{ $t('claim.modal.preview_json') }}
             </summary>

app/components/Package/DownloadAnalytics.vue

@@ -895,10 +895,10 @@ function buildExportFilename(extension: string): string {
 }
 
 const granularityLabels = computed(() => ({
-  daily: $t('package.downloads.granularity_daily'),
-  weekly: $t('package.downloads.granularity_weekly'),
-  monthly: $t('package.downloads.granularity_monthly'),
-  yearly: $t('package.downloads.granularity_yearly'),
+  daily: $t('package.trends.granularity_daily'),
+  weekly: $t('package.trends.granularity_weekly'),
+  monthly: $t('package.trends.granularity_monthly'),
+  yearly: $t('package.trends.granularity_yearly'),
 }))
 
 function getGranularityLabel(granularity: ChartTimeGranularity) {
@@ -1321,18 +1321,18 @@ const chartConfig = computed(() => {
       userOptions: {
         buttons: { pdf: false, labels: false, fullscreen: false, table: false, tooltip: false },
         buttonTitles: {
-          csv: $t('package.downloads.download_file', { fileType: 'CSV' }),
-          img: $t('package.downloads.download_file', { fileType: 'PNG' }),
-          svg: $t('package.downloads.download_file', { fileType: 'SVG' }),
-          annotator: $t('package.downloads.toggle_annotator'),
+          csv: $t('package.trends.download_file', { fileType: 'CSV' }),
+          img: $t('package.trends.download_file', { fileType: 'PNG' }),
+          svg: $t('package.trends.download_file', { fileType: 'SVG' }),
+          annotator: $t('package.trends.toggle_annotator'),
         },
         callbacks: {
           img: ({ imageUri }: { imageUri: string }) => {
             loadFile(imageUri, buildExportFilename('png'))
           },
           csv: (csvStr: string) => {
             const PLACEHOLDER_CHAR = '\0'
-            const multilineDateTemplate = $t('package.downloads.date_range_multiline', {
+            const multilineDateTemplate = $t('package.trends.date_range_multiline', {
               start: PLACEHOLDER_CHAR,
               end: PLACEHOLDER_CHAR,
             })
@@ -1360,8 +1360,9 @@ const chartConfig = computed(() => {
           fontSize: isMobile.value ? 24 : 16,
           color: pending.value ? colors.value.border : colors.value.fgSubtle,
           axis: {
-            yLabel: $t('package.downloads.y_axis_label', {
+            yLabel: $t('package.trends.y_axis_label', {
               granularity: getGranularityLabel(selectedGranularity.value),
+              facet: $t('package.trends.items.downloads'),
             }),
             xLabel: isMultiPackageMode.value ? '' : xAxisLabel.value, // for multiple series, names are displayed in the chart's legend
             yLabelOffsetX: 12,
@@ -1478,7 +1479,7 @@ const chartConfig = computed(() => {
             for="granularity"
             class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
           >
-            {{ $t('package.downloads.granularity') }}
+            {{ $t('package.trends.granularity') }}
           </label>
 
           <div
@@ -1490,10 +1491,18 @@ const chartConfig = computed(() => {
               :disabled="pending"
               class="w-full px-2.5 py-1.75 bg-bg-subtle font-mono text-sm text-fg outline-none appearance-none focus-visible:outline-accent/70"
             >
-              <option value="daily">{{ $t('package.downloads.granularity_daily') }}</option>
-              <option value="weekly">{{ $t('package.downloads.granularity_weekly') }}</option>
-              <option value="monthly">{{ $t('package.downloads.granularity_monthly') }}</option>
-              <option value="yearly">{{ $t('package.downloads.granularity_yearly') }}</option>
+              <option value="daily">
+                {{ $t('package.trends.granularity_daily') }}
+              </option>
+              <option value="weekly">
+                {{ $t('package.trends.granularity_weekly') }}
+              </option>
+              <option value="monthly">
+                {{ $t('package.trends.granularity_monthly') }}
+              </option>
+              <option value="yearly">
+                {{ $t('package.trends.granularity_yearly') }}
+              </option>
             </select>
           </div>
         </div>
@@ -1504,7 +1513,7 @@ const chartConfig = computed(() => {
               for="startDate"
               class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
             >
-              {{ $t('package.downloads.start_date') }}
+              {{ $t('package.trends.start_date') }}
             </label>
             <div
               class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
@@ -1522,7 +1531,7 @@ const chartConfig = computed(() => {
 
           <div class="flex flex-col gap-1">
             <label for="endDate" class="text-3xs font-mono text-fg-subtle tracking-wide uppercase">
-              {{ $t('package.downloads.end_date') }}
+              {{ $t('package.trends.end_date') }}
             </label>
             <div
               class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
@@ -1656,9 +1665,7 @@ const chartConfig = computed(() => {
                       stroke-linecap="round"
                     />
                   </svg>
-                  <span class="text-fg-subtle">{{
-                    $t('package.downloads.legend_estimation')
-                  }}</span>
+                  <span class="text-fg-subtle">{{ $t('package.trends.legend_estimation') }}</span>
                 </div>
               </div>
             </template>
@@ -1747,7 +1754,11 @@ const chartConfig = computed(() => {
       v-if="!chartData.dataset && !pending"
       class="min-h-[260px] flex items-center justify-center text-fg-subtle font-mono text-sm"
     >
-      {{ $t('package.downloads.no_data') }}
+      {{
+        $t('package.trends.no_data', {
+          facet: $t('package.trends.items.downloads'),
+        })
+      }}
     </div>
 
     <div
@@ -1756,7 +1767,7 @@ const chartConfig = computed(() => {
       aria-live="polite"
       class="absolute top-1/2 inset-is-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-fg-subtle font-mono bg-bg/70 backdrop-blur px-3 py-2 rounded-md border border-border"
     >
-      {{ $t('package.downloads.loading') }}
+      {{ $t('package.trends.loading') }}
     </div>
   </div>
 </template>

app/components/Package/ListControls.vue

@@ -78,7 +78,7 @@ const showFilteredCount = computed(() => {
         <select
           id="package-sort"
           v-model="sortValue"
-          class="appearance-none bg-bg-subtle border border-border rounded-lg ps-3 pe-8 py-2 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
+          class="appearance-none bg-bg-subtle border border-border rounded-lg ps-3 pe-8 py-2 font-mono text-sm text-fg transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
         >
           <option v-for="option in sortOptions" :key="option.value" :value="option.value">
             {{ option.label }}

app/components/Package/ListToolbar.vue

@@ -162,7 +162,7 @@ function getSortKeyLabelKey(key: SortKey): string {
             <select
               id="sort-select"
               :value="currentSort.key"
-              class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover"
+              class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg transition-colors duration-200 hover:border-border-hover"
               @change="handleSortKeyChange"
             >
               <option