Merge branch 'main' into jg/test-i-see-colours

Author: danielroe

.github/workflows/autofix.yml

@@ -14,6 +14,7 @@ permissions:
 
 jobs:
   code:
+    name: 🤖 Autofix code
     runs-on: ubuntu-latest
 
     steps:
@@ -24,7 +25,7 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         with:
           cache: true
 

.github/workflows/ci.yml

@@ -21,6 +21,7 @@ permissions:
 
 jobs:
   lint:
+    name: 🔠 Lint project
     runs-on: ubuntu-latest
 
     steps:
@@ -31,13 +32,58 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         # pnpm cache skipped deliberately as the project is not actually installed here
 
       - name: 🔠 Lint project
         run: node scripts/lint.ts
 
+  types:
+    name: 💪 Type check
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version: lts/*
+
+      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+        name: 🟧 Install pnpm
+        with:
+          cache: true
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      - name: 💪 Type check
+        run: pnpm test:types
+
+  unit:
+    name: 🧪 Unit tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version: lts/*
+
+      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+        name: 🟧 Install pnpm
+        with:
+          cache: true
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      - name: 🧪 Unit tests
+        run: pnpm test:unit --project unit run --coverage
+
   test:
+    name: 🧪 Component tests
     runs-on: ubuntu-latest
 
     steps:
@@ -48,7 +94,7 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         with:
           cache: true
 
@@ -58,18 +104,16 @@ jobs:
       - name: 🌐 Install browser
         run: pnpm playwright install chromium-headless-shell
 
-      - name: 💪 Type check
-        run: pnpm test:types
-
-      - name: 🧪 Unit and component tests
-        run: pnpm vite test run --coverage
+      - name: 🧪 Component tests
+        run: pnpm vite test --project nuxt run --coverage
 
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5
         env:
           CODECOV_TOKEN: 17b4bed9-d407-4ce2-9c10-2ccd4328a1d9
 
   browser:
+    name: 🖥️ Browser tests
     runs-on: ubuntu-latest
     container:
       image: mcr.microsoft.com/playwright:v1.58.0-noble
@@ -82,7 +126,7 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         with:
           cache: true
 
@@ -96,6 +140,7 @@ jobs:
         run: pnpm test:browser:prebuilt
 
   a11y:
+    name: ♿ Accessibility audit
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -109,7 +154,7 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         with:
           cache: true
 
@@ -126,6 +171,7 @@ jobs:
           LIGHTHOUSE_COLOR_MODE: ${{ matrix.mode }}
 
   knip:
+    name: 🧹 Unused code check
     runs-on: ubuntu-latest
 
     steps:
@@ -136,12 +182,12 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         with:
           cache: true
 
       - name: 📦 Install dependencies
         run: pnpm install
 
-      - name: 🔍 Check for unused code
+      - name: 🧹 Check for unused code
         run: pnpm knip

.github/workflows/lunaria.yml

@@ -17,7 +17,7 @@ permissions:
 
 jobs:
   lunaria-overview:
-    name: Generate Lunaria Overview
+    name: 🌝 Generate Lunaria Overview
     runs-on: ubuntu-latest
 
     steps:
@@ -33,7 +33,7 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         with:
           cache: true
 

.github/workflows/provenance.yml

@@ -20,6 +20,7 @@ permissions:
 
 jobs:
   check-provenance:
+    name: 🔒 Check provenance downgrades
     runs-on: ubuntu-slim
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

.github/workflows/semantic-pull-requests.yml

@@ -17,7 +17,7 @@ jobs:
       statuses: write # for amannn/action-semantic-pull-request to mark status of analyzed PR
     if: github.repository == 'npmx-dev/npmx.dev'
     runs-on: ubuntu-slim
-    name: semantic-pr
+    name: 🏷️ Validate PR title
     steps:
       - name: Validate PR title
         uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1

app/components/Filter/Panel.vue

@@ -243,17 +243,16 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             role="radiogroup"
             :aria-label="$t('filters.weekly_downloads')"
           >
-            <TagClickable
+            <TagRadioButton
               v-for="range in DOWNLOAD_RANGES"
               :key="range.value"
-              type="button"
-              role="radio"
-              :aria-checked="filters.downloadRange === range.value"
-              :status="filters.downloadRange === range.value ? 'active' : 'default'"
-              @click="emit('update:downloadRange', range.value)"
+              :model-value="filters.downloadRange"
+              :value="range.value"
+              @update:modelValue="emit('update:downloadRange', $event as DownloadRange)"
+              name="range"
             >
               {{ $t(getDownloadRangeLabelKey(range.value)) }}
-            </TagClickable>
+            </TagRadioButton>
           </div>
         </fieldset>
 
@@ -267,17 +266,16 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             role="radiogroup"
             :aria-label="$t('filters.updated_within')"
           >
-            <TagClickable
+            <TagRadioButton
               v-for="option in UPDATED_WITHIN_OPTIONS"
               :key="option.value"
-              type="button"
-              role="radio"
-              :aria-checked="filters.updatedWithin === option.value"
-              :status="filters.updatedWithin === option.value ? 'active' : 'default'"
-              @click="emit('update:updatedWithin', option.value)"
+              :model-value="filters.updatedWithin"
+              :value="option.value"
+              name="updatedWithin"
+              @update:modelValue="emit('update:updatedWithin', $event as UpdatedWithin)"
             >
               {{ $t(getUpdatedWithinLabelKey(option.value)) }}
-            </TagClickable>
+            </TagRadioButton>
           </div>
         </fieldset>
 
@@ -290,17 +288,16 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             </span>
           </legend>
           <div class="flex flex-wrap gap-2" role="radiogroup" :aria-label="$t('filters.security')">
-            <TagClickable
+            <TagRadioButton
               v-for="security in SECURITY_FILTER_VALUES"
               :key="security"
-              type="button"
-              role="radio"
               disabled
-              :aria-checked="filters.security === security"
-              :status="filters.security === security ? 'active' : 'default'"
+              :model-value="filters.security"
+              :value="security"
+              name="security"
             >
               {{ $t(getSecurityLabelKey(security)) }}
-            </TagClickable>
+            </TagRadioButton>
           </div>
         </fieldset>
 
@@ -310,16 +307,14 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             {{ $t('filters.keywords') }}
           </legend>
           <div class="flex flex-wrap gap-1.5" role="group" :aria-label="$t('filters.keywords')">
-            <TagClickable
+            <TagButton
               v-for="keyword in displayedKeywords"
               :key="keyword"
-              type="button"
-              :aria-pressed="filters.keywords.includes(keyword)"
-              :status="filters.keywords.includes(keyword) ? 'active' : 'default'"
+              :pressed="filters.keywords.includes(keyword)"
               @click="emit('toggleKeyword', keyword)"
             >
               {{ keyword }}
-            </TagClickable>
+            </TagButton>
             <button
               v-if="hasMoreKeywords"
               type="button"

app/components/Package/Card.vue

@@ -162,17 +162,16 @@ const pkgDescription = useMarkdown(() => ({
       :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"
     >
-      <TagClickable
+      <TagButton
         v-for="keyword in result.package.keywords.slice(0, 5)"
-        :key="keyword"
-        type="button"
         class="pointer-events-auto"
-        :status="props.filters?.keywords.includes(keyword) ? 'active' : 'default'"
+        :key="keyword"
+        :pressed="props.filters?.keywords.includes(keyword)"
         :title="`Filter by ${keyword}`"
         @click.stop="emit('clickKeyword', keyword)"
       >
         {{ keyword }}
-      </TagClickable>
+      </TagButton>
       <span
         v-if="result.package.keywords.length > 5"
         class="text-fg-subtle text-xs pointer-events-auto"

app/components/Package/Keywords.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { NuxtLink } from '#components'
-
 defineProps<{
   keywords?: string[]
 }>()
@@ -9,9 +7,9 @@ defineProps<{
   <CollapsibleSection v-if="keywords?.length" :title="$t('package.keywords_title')" id="keywords">
     <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
       <li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
-        <TagClickable :as="NuxtLink" :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
+        <TagLink :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
           {{ keyword }}
-        </TagClickable>
+        </TagLink>
       </li>
     </ul>
   </CollapsibleSection>

app/components/Package/TableRow.vue

@@ -126,17 +126,16 @@ const allMaintainersText = computed(() => {
         class="flex flex-wrap gap-1 justify-end"
         :aria-label="$t('package.card.keywords')"
       >
-        <TagClickable
+        <TagButton
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
-          type="button"
-          :status="props.filters?.keywords.includes(keyword) ? 'active' : 'default'"
+          :pressed="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
           :class="{ 'group-hover:bg-bg-elevated': !props.filters?.keywords.includes(keyword) }"
         >
           {{ keyword }}
-        </TagClickable>
+        </TagButton>
         <span
           v-if="pkg.keywords.length > 3"
           class="text-fg-subtle text-xs"

app/components/Tag/Button.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps<{
+  disabled?: boolean
+  /**
+   * type should never be used, because this will always be a button.
+   *
+   * If you want a link use `TagLink` instead.
+   *  */
+  type?: never
+  pressed?: boolean
+}>()
+</script>
+
+<template>
+  <button
+    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+    :class="[
+      pressed
+        ? 'bg-fg text-bg border-fg hover:(text-text-bg/50)'
+        : 'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)',
+      {
+        'opacity-50 cursor-not-allowed': disabled,
+      },
+    ]"
+    type="button"
+    :disabled="disabled ? true : undefined"
+    :aria-pressed="pressed"
+  >
+    <slot />
+  </button>
+</template>