ci: switch to arm64 runners

From my experience, this gives ~20% performance boost, while being 17% cheaper.

Author: wojtekmaj

.github/workflows/autofix.yml

@@ -15,7 +15,7 @@ permissions:
 jobs:
   code:
     name: 🤖 Autofix code
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ permissions:
 jobs:
   lint:
     name: 🔠 Lint project
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
@@ -40,7 +40,7 @@ jobs:
 
   types:
     name: 💪 Type check
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
@@ -62,7 +62,7 @@ jobs:
 
   unit:
     name: 🧪 Unit tests
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
@@ -84,7 +84,7 @@ jobs:
 
   test:
     name: 🧪 Component tests
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
@@ -114,7 +114,7 @@ jobs:
 
   browser:
     name: 🖥️ Browser tests
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
     container:
       image: mcr.microsoft.com/playwright:v1.58.0-noble
 
@@ -141,7 +141,7 @@ jobs:
 
   a11y:
     name: ♿ Accessibility audit
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-latest # See https://github.com/GoogleChrome/lighthouse/discussions/16834
     strategy:
       matrix:
         mode: [dark, light]
@@ -172,7 +172,7 @@ jobs:
 
   knip:
     name: 🧹 Unused code check
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

.github/workflows/lunaria.yml

@@ -18,7 +18,7 @@ permissions:
 jobs:
   lunaria-overview:
     name: 🌝 Generate Lunaria Overview
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - name: Checkout

app/components/Package/Card.vue

@@ -48,6 +48,7 @@ const pkgDescription = useMarkdown(() => ({
           :prefetch-on="prefetch ? 'visibility' : 'interaction'"
           class="decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"
           :data-result-index="index"
+          aria-hidden="true"
           >{{ result.package.name }}</NuxtLink
         >
         <span
@@ -160,18 +161,19 @@ const pkgDescription = useMarkdown(() => ({
     <div
       v-if="result.package.keywords?.length"
       :aria-label="$t('package.card.keywords')"
-      class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none items-center"
+      class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none"
     >
-      <TagButton
+      <TagClickable
         v-for="keyword in result.package.keywords.slice(0, 5)"
-        class="pointer-events-auto"
         :key="keyword"
-        :pressed="props.filters?.keywords.includes(keyword)"
+        type="button"
+        class="pointer-events-auto"
+        :status="props.filters?.keywords.includes(keyword) ? 'active' : 'default'"
         :title="`Filter by ${keyword}`"
         @click.stop="emit('clickKeyword', keyword)"
       >
         {{ keyword }}
-      </TagButton>
+      </TagClickable>
       <span
         v-if="result.package.keywords.length > 5"
         class="text-fg-subtle text-xs pointer-events-auto"

app/components/VersionSelector.vue

@@ -9,7 +9,7 @@ import {
   getVersionGroupLabel,
   isSameVersionGroup,
 } from '~/utils/versions'
-import { fetchAllPackageVersions } from '~/utils/npm/api'
+import { fetchAllPackageVersions } from '~/composables/useNpmRegistry'
 
 const props = defineProps<{
   packageName: string
@@ -546,7 +546,7 @@ watch(
               <span
                 v-else
                 class="w-3 h-3 transition-transform duration-200 rtl-flip"
-                :class="group.isExpanded ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
+                :class="group.isExpanded ? 'i:carbon:chevron-down' : 'i-carbon:chevron-right'"
                 aria-hidden="true"
               />
             </button>