refactor: remove class shortcuts (#604)

Co-authored-by: Daniel Roe <[e-mail]>

app/components/BaseCard.vue

···
+<script setup lang="ts">
+defineProps<{
+  /** Whether this is an exact match for the query */
+  isExactMatch?: boolean
+}>()
+</script>
+
+<template>
+  <article
+    class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
+    :class="{
+      'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
+    }"
+  >
+    <!-- Glow effect for exact matches -->
+    <div
+      v-if="isExactMatch"
+      class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/20 to-accent/0 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
+      aria-hidden="true"
+    />
+    <slot />
+  </article>
+</template>

app/components/Filter/Panel.vue

···
             :value="filters.text"
             :placeholder="searchPlaceholder"
             autocomplete="off"
-            class="input-base"
+            class="w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-200 focus:(border-fg/40 outline-none ring-1 ring-fg/10)"
             @input="handleTextInput"
           />
         </div>

app/components/Package/Card.vue

···
 </script>
 
 <template>
-  <article
-    class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
-    :class="{
-      'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
-    }"
-  >
-    <!-- Glow effect for exact matches -->
-    <div
-      v-if="isExactMatch"
-      class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/20 to-accent/0 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
-      aria-hidden="true"
-    />
+  <BaseCard :isExactMatch="isExactMatch">
     <div class="mb-2 flex items-baseline justify-start gap-2">
       <component
         :is="headingLevel ?? 'h3'"
···
         {{ keyword }}
       </li>
     </ul>
-  </article>
+  </BaseCard>
 </template>

app/components/Package/Skeleton.vue

···
         <div class="flex-1 min-w-0">
           <!-- Package name: h1 font-mono text-2xl sm:text-3xl font-medium mb-2 -->
           <h1 class="font-mono text-2xl sm:text-3xl font-medium mb-2">
-            <span class="skeleton inline-block h-9 w-48" />
+            <SkeletonInline class="h-9 w-48" />
           </h1>
           <!-- Description: fixed height container matching min-h-[4.5rem] (72px) to prevent CLS -->
           <div class="relative max-w-2xl min-h-[4.5rem]">
             <div class="space-y-2">
-              <span class="skeleton block h-5 w-full" />
-              <span class="skeleton block h-5 w-4/5" />
-              <span class="skeleton block h-5 w-3/5" />
+              <SkeletonBlock class="h-5 w-full" />
+              <SkeletonBlock class="h-5 w-4/5" />
+              <SkeletonBlock class="h-5 w-3/5" />
             </div>
           </div>
         </div>
 
         <!-- Version badge: shrink-0 px-3 py-1 font-mono text-sm bg-bg-muted border border-border rounded-md -->
-        <span class="skeleton shrink-0 h-8 w-20 rounded-md" />
+        <SkeletonInline class="shrink-0 h-8 w-20 rounded-md" />
       </div>
 
       <!-- Stats grid: grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 mt-6 -->
···
             {{ $t('package.skeleton.license') }}
           </dt>
           <dd class="font-mono text-sm">
-            <span class="skeleton inline-block h-5 w-12" />
+            <SkeletonInline class="h-5 w-12" />
           </dd>
         </div>
 
···
             {{ $t('package.skeleton.weekly') }}
           </dt>
           <dd class="font-mono text-sm">
-            <span class="skeleton inline-block h-5 w-20" />
+            <SkeletonInline class="h-5 w-20" />
           </dd>
         </div>
 
···
             {{ $t('package.skeleton.size') }}
           </dt>
           <dd class="font-mono text-sm">
-            <span class="skeleton inline-block h-5 w-16" />
+            <SkeletonInline class="h-5 w-16" />
           </dd>
         </div>
 
···
             {{ $t('package.skeleton.deps') }}
           </dt>
           <dd class="font-mono text-sm">
-            <span class="skeleton inline-block h-5 w-8" />
+            <SkeletonInline class="h-5 w-8" />
           </dd>
         </div>
 
···
             {{ $t('package.skeleton.published') }}
           </dt>
           <dd class="font-mono text-sm">
-            <span class="skeleton inline-block h-5 w-28" />
+            <SkeletonInline class="h-5 w-28" />
           </dd>
         </div>
       </dl>
···
       <nav aria-label="Package links" class="mt-6">
         <ul class="flex flex-wrap items-center gap-4 list-none m-0 p-0">
           <li>
-            <span class="skeleton inline-block h-5 w-14" />
+            <SkeletonInline class="h-5 w-14" />
           </li>
           <li>
-            <span class="skeleton inline-block h-5 w-20" />
+            <SkeletonInline class="h-5 w-20" />
           </li>
           <li>
-            <span class="skeleton inline-block h-5 w-16" />
+            <SkeletonInline class="h-5 w-16" />
           </li>
           <li>
-            <span class="skeleton inline-block h-5 w-12" />
+            <SkeletonInline class="h-5 w-12" />
           </li>
         </ul>
       </nav>
···
       </h2>
       <!-- code-block with relative positioning for copy button -->
       <div class="relative">
-        <div class="code-block pe-16">
-          <span class="skeleton inline-block h-5 w-52" />
+        <div
+          class="bg-bg-muted border border-border rounded-md p-4 font-mono text-sm overflow-x-auto pe-16"
+        >
+          <SkeletonInline class="h-5 w-52" />
         </div>
-        <span class="skeleton absolute top-3 inset-ie-3 h-6 w-12 rounded" />
+        <SkeletonInline class="absolute top-3 inset-ie-3 h-6 w-12 rounded" />
       </div>
     </section>
 
···
           <!-- Simulated README content -->
           <div class="space-y-4">
             <!-- Heading -->
-            <span class="skeleton block h-7 w-2/3" />
+            <SkeletonBlock class="h-7 w-2/3" />
             <!-- Paragraphs -->
-            <span class="skeleton block h-4 w-full" />
-            <span class="skeleton block h-4 w-full" />
-            <span class="skeleton block h-4 w-4/5" />
+            <SkeletonBlock class="h-4 w-full" />
+            <SkeletonBlock class="h-4 w-full" />
+            <SkeletonBlock class="h-4 w-4/5" />
             <!-- Gap for section break -->
-            <span class="skeleton block h-6 w-1/2 mt-6" />
-            <span class="skeleton block h-4 w-full" />
-            <span class="skeleton block h-4 w-full" />
-            <span class="skeleton block h-4 w-3/4" />
+            <SkeletonBlock class="h-6 w-1/2 mt-6" />
+            <SkeletonBlock class="h-4 w-full" />
+            <SkeletonBlock class="h-4 w-full" />
+            <SkeletonBlock class="h-4 w-3/4" />
             <!-- Code block placeholder -->
-            <div class="skeleton h-24 w-full rounded-lg mt-4" />
-            <span class="skeleton block h-4 w-full" />
-            <span class="skeleton block h-4 w-5/6" />
+            <SkeletonBlock class="h-24 w-full rounded-lg mt-4" />
+            <SkeletonBlock class="h-4 w-full" />
+            <SkeletonBlock class="h-4 w-5/6" />
           </div>
         </section>
       </div>
···
           </h2>
           <ul class="space-y-2 list-none m-0 p-0">
             <li>
-              <span class="skeleton inline-block h-5 w-28" />
+              <SkeletonInline class="h-5 w-28" />
             </li>
             <li>
-              <span class="skeleton inline-block h-5 w-24" />
+              <SkeletonInline class="h-5 w-24" />
             </li>
           </ul>
         </section>
···
           </h2>
           <!-- flex flex-wrap gap-1.5 -->
           <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
-            <li><span class="skeleton inline-block h-6 w-16 rounded" /></li>
-            <li><span class="skeleton inline-block h-6 w-12 rounded" /></li>
-            <li><span class="skeleton inline-block h-6 w-20 rounded" /></li>
-            <li><span class="skeleton inline-block h-6 w-14 rounded" /></li>
-            <li><span class="skeleton inline-block h-6 w-18 rounded" /></li>
-            <li><span class="skeleton inline-block h-6 w-10 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-16 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-12 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-20 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-14 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-18 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-10 rounded" /></li>
           </ul>
         </section>
 
···
           <!-- space-y-1, each row: flex items-center justify-between py-1.5 text-sm -->
           <div class="space-y-1">
             <div class="flex items-center justify-between py-1.5 text-sm">
-              <span class="skeleton inline-block h-4 w-16" />
-              <span class="skeleton inline-block h-4 w-24" />
+              <SkeletonInline class="h-4 w-16" />
+              <SkeletonInline class="h-4 w-24" />
             </div>
             <div class="flex items-center justify-between py-1.5 text-sm">
-              <span class="skeleton inline-block h-4 w-14" />
-              <span class="skeleton inline-block h-4 w-24" />
+              <SkeletonInline class="h-4 w-14" />
+              <SkeletonInline class="h-4 w-24" />
             </div>
             <div class="flex items-center justify-between py-1.5 text-sm">
-              <span class="skeleton inline-block h-4 w-18" />
-              <span class="skeleton inline-block h-4 w-24" />
+              <SkeletonInline class="h-4 w-18" />
+              <SkeletonInline class="h-4 w-24" />
             </div>
             <div class="flex items-center justify-between py-1.5 text-sm">
-              <span class="skeleton inline-block h-4 w-14" />
-              <span class="skeleton inline-block h-4 w-24" />
+              <SkeletonInline class="h-4 w-14" />
+              <SkeletonInline class="h-4 w-24" />
             </div>
             <div class="flex items-center justify-between py-1.5 text-sm">
-              <span class="skeleton inline-block h-4 w-16" />
-              <span class="skeleton inline-block h-4 w-24" />
+              <SkeletonInline class="h-4 w-16" />
+              <SkeletonInline class="h-4 w-24" />
             </div>
           </div>
         </section>
···
           <!-- space-y-1, each: flex items-center justify-between py-1 text-sm -->
           <ul class="space-y-1 list-none m-0 p-0">
             <li class="flex items-center justify-between py-1 text-sm">
-              <span class="skeleton inline-block h-4 w-24" />
-              <span class="skeleton inline-block h-4 w-12" />
+              <SkeletonInline class="h-4 w-24" />
+              <SkeletonInline class="h-4 w-12" />
             </li>
             <li class="flex items-center justify-between py-1 text-sm">
-              <span class="skeleton inline-block h-4 w-32" />
-              <span class="skeleton inline-block h-4 w-10" />
+              <SkeletonInline class="h-4 w-32" />
+              <SkeletonInline class="h-4 w-10" />
             </li>
             <li class="flex items-center justify-between py-1 text-sm">
-              <span class="skeleton inline-block h-4 w-20" />
-              <span class="skeleton inline-block h-4 w-14" />
+              <SkeletonInline class="h-4 w-20" />
+              <SkeletonInline class="h-4 w-14" />
             </li>
             <li class="flex items-center justify-between py-1 text-sm">
-              <span class="skeleton inline-block h-4 w-28" />
-              <span class="skeleton inline-block h-4 w-12" />
+              <SkeletonInline class="h-4 w-28" />
+              <SkeletonInline class="h-4 w-12" />
             </li>
           </ul>
         </section>

app/components/Package/WeeklyDownloadStats.vue

···
             <div class="min-h-[75.195px]">
               <!-- Title row: date range (24px height) -->
               <div class="h-6 flex items-center ps-3">
-                <span class="skeleton h-3 w-36" />
+                <SkeletonInline class="h-3 w-36" />
               </div>
               <!-- Chart area: data label left, sparkline right -->
               <div class="aspect-[500/80] flex items-center">
                 <!-- Data label (covers ~42% width) -->
                 <div class="w-[42%] flex items-center ps-0.5">
-                  <span class="skeleton h-7 w-24" />
+                  <SkeletonInline class="h-7 w-24" />
                 </div>
                 <!-- Sparkline area (~58% width) -->
                 <div class="flex-1 flex items-end gap-0.5 h-4/5 pe-3">
-                  <span
+                  <SkeletonInline
                     v-for="i in 16"
                     :key="i"
-                    class="skeleton flex-1 rounded-sm"
+                    class="flex-1 rounded-sm"
                     :style="{ height: `${25 + ((i * 7) % 50)}%` }"
                   />
                 </div>

app/components/SearchSuggestionCard.vue

···
 </script>
 
 <template>
-  <article
-    class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
-    :class="{
-      'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
-    }"
-  >
-    <!-- Glow effect for exact matches -->
-    <div
-      v-if="isExactMatch"
-      class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/20 to-accent/0 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
-      aria-hidden="true"
-    />
+  <BaseCard :isExactMatch="isExactMatch">
     <NuxtLink
       :to="type === 'user' ? `/~${name}` : `/@${name}`"
       :data-suggestion-index="index"
···
         aria-hidden="true"
       />
     </NuxtLink>
-  </article>
+  </BaseCard>
 </template>

app/components/Settings/Toggle.server.vue

···
     <span v-if="label" class="text-sm text-fg font-medium text-start">
       {{ label }}
     </span>
-    <span class="skeleton block h-6 w-11 shrink-0 rounded-full" />
+    <SkeletonBlock class="h-6 w-11 shrink-0 rounded-full" />
   </div>
   <p v-if="description" class="text-sm text-fg-muted">
     {{ description }}

app/components/SkeletonBlock.vue

···
+<template>
+  <div class="bg-bg-elevated rounded animate-skeleton-pulse" />
+</template>

app/components/SkeletonInline.vue

···
+<template>
+  <span class="inline-block bg-bg-elevated rounded animate-skeleton-pulse" />
+</template>

app/pages/package-code/[...path].vue

···
           <!-- Fake line numbers column -->
           <div class="shrink-0 bg-bg-subtle border-ie border-border w-14 py-0">
             <div v-for="n in 20" :key="n" class="px-3 h-6 flex items-center justify-end">
-              <span class="skeleton w-4 h-3 rounded-sm" />
+              <SkeletonInline class="w-4 h-3 rounded-sm" />
             </div>
           </div>
           <!-- Fake code content -->
           <div class="flex-1 p-4 space-y-1.5">
-            <div class="skeleton h-4 w-32 rounded-sm" />
-            <div class="skeleton h-4 w-48 rounded-sm" />
-            <div class="skeleton h-4 w-24 rounded-sm" />
+            <SkeletonBlock class="h-4 w-32 rounded-sm" />
+            <SkeletonBlock class="h-4 w-48 rounded-sm" />
+            <SkeletonBlock class="h-4 w-24 rounded-sm" />
             <div class="h-4" />
-            <div class="skeleton h-4 w-64 rounded-sm" />
-            <div class="skeleton h-4 w-56 rounded-sm" />
-            <div class="skeleton h-4 w-40 rounded-sm" />
-            <div class="skeleton h-4 w-72 rounded-sm" />
+            <SkeletonBlock class="h-4 w-64 rounded-sm" />
+            <SkeletonBlock class="h-4 w-56 rounded-sm" />
+            <SkeletonBlock class="h-4 w-40 rounded-sm" />
+            <SkeletonBlock class="h-4 w-72 rounded-sm" />
             <div class="h-4" />
-            <div class="skeleton h-4 w-36 rounded-sm" />
-            <div class="skeleton h-4 w-52 rounded-sm" />
-            <div class="skeleton h-4 w-44 rounded-sm" />
-            <div class="skeleton h-4 w-28 rounded-sm" />
+            <SkeletonBlock class="h-4 w-36 rounded-sm" />
+            <SkeletonBlock class="h-4 w-52 rounded-sm" />
+            <SkeletonBlock class="h-4 w-44 rounded-sm" />
+            <SkeletonBlock class="h-4 w-28 rounded-sm" />
             <div class="h-4" />
-            <div class="skeleton h-4 w-60 rounded-sm" />
-            <div class="skeleton h-4 w-48 rounded-sm" />
-            <div class="skeleton h-4 w-32 rounded-sm" />
-            <div class="skeleton h-4 w-56 rounded-sm" />
-            <div class="skeleton h-4 w-40 rounded-sm" />
-            <div class="skeleton h-4 w-24 rounded-sm" />
+            <SkeletonBlock class="h-4 w-60 rounded-sm" />
+            <SkeletonBlock class="h-4 w-48 rounded-sm" />
+            <SkeletonBlock class="h-4 w-32 rounded-sm" />
+            <SkeletonBlock class="h-4 w-56 rounded-sm" />
+            <SkeletonBlock class="h-4 w-40 rounded-sm" />
+            <SkeletonBlock class="h-4 w-24 rounded-sm" />
           </div>
         </div>
 

app/pages/package-docs/[...path].vue

···
       <!-- Main content -->
       <main class="flex-1 min-w-0">
         <div v-if="showLoading" class="p-6 sm:p-8 lg:p-12 space-y-4">
-          <div class="skeleton h-8 w-64 rounded" />
-          <div class="skeleton h-4 w-full max-w-2xl rounded" />
-          <div class="skeleton h-4 w-5/6 max-w-2xl rounded" />
-          <div class="skeleton h-4 w-3/4 max-w-2xl rounded" />
+          <SkeletonBlock class="h-8 w-64 rounded" />
+          <SkeletonBlock class="h-4 w-full max-w-2xl rounded" />
+          <SkeletonBlock class="h-4 w-5/6 max-w-2xl rounded" />
+          <SkeletonBlock class="h-4 w-3/4 max-w-2xl rounded" />
         </div>
 
         <div v-else-if="showEmptyState" class="p-6 sm:p-8 lg:p-12">

app/pages/package/[...package].vue

···
               class="self-baseline ms-1 sm:ms-2"
             />
             <template #fallback>
-              <ul class="flex items-center gap-1.5 self-baseline ms-1 sm:ms-2">
-                <li class="skeleton w-8 h-5 rounded" />
-                <li class="skeleton w-12 h-5 rounded" />
-              </ul>
+              <div class="flex items-center gap-1.5 self-baseline ms-1 sm:ms-2">
+                <SkeletonBlock class="w-8 h-5 rounded" />
+                <SkeletonBlock class="w-12 h-5 rounded" />
+              </div>
             </template>
           </ClientOnly>
 

app/pages/~[username]/orgs.vue

···
                   >
                     {{ org.role }}
                   </span>
-                  <span
-                    v-else-if="org.isLoadingDetails"
-                    class="skeleton inline-block mt-1 h-5 w-16 rounded"
-                  />
+                  <SkeletonInline v-else-if="org.isLoadingDetails" class="mt-1 h-5 w-16 rounded" />
                 </div>
               </div>
 
···
                       )
                     }}
                   </span>
-                  <span v-else-if="org.isLoadingDetails" class="skeleton inline-block h-4 w-20" />
+                  <SkeletonInline v-else-if="org.isLoadingDetails" class="h-4 w-20" />
                   <span v-else class="text-fg-subtle">—</span>
                 </div>
               </div>

test/nuxt/a11y.spec.ts

···
 import {
   AppFooter,
   AppHeader,
+  BaseCard,
   UserAvatar,
   BuildEnvironment,
   CallToAction,
···
   describe('AppFooter', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(AppFooter)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('BaseCard', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(BaseCard, {
+        slots: { default: '<p>Card content</p>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with exact match highlight', async () => {
+      const component = await mountSuspended(BaseCard, {
+        props: { isExactMatch: true },
+        slots: { default: '<p>Exact match content</p>' },
+      })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })

test/unit/a11y-component-coverage.spec.ts

···
   'Package/WeeklyDownloadStats.vue':
     'Uses vue-data-ui VueUiSparkline - has DOM measurement issues in test environment',
   'UserCombobox.vue': 'Unused component - intended for future admin features',
+  'SkeletonBlock.vue': 'Already covered indirectly via other component tests',
+  'SkeletonInline.vue': 'Already covered indirectly via other component tests',
 }
 
 /**

uno.config.ts

···
     ],
     ['link-subtle', 'text-fg-muted hover:text-fg transition-colors duration-200 focus-ring'],
 
-    // Cards
-    [
-      'card',
-      'bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200',
-    ],
-    ['card-interactive', 'card hover:(border-border-hover bg-bg-muted) cursor-pointer'],
-
-    // Form elements
-    [
-      'input-base',
-      'w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-200 focus:(border-fg/40 outline-none ring-1 ring-fg/10)',
-    ],
-
     // Tags/badges
     [
       'tag',
···
     ['badge-purple', 'bg-badge-purple/10 text-badge-purple'],
     ['badge-pink', 'bg-badge-pink/10 text-badge-pink'],
     ['badge-subtle', 'bg-bg-subtle text-fg-subtle'],
-
-    // Code blocks
-    [
-      'code-block',
-      'bg-bg-muted border border-border rounded-md p-4 font-mono text-sm overflow-x-auto',
-    ],
-
-    // Skeleton loading
-    ['skeleton', 'bg-bg-elevated rounded animate-skeleton-pulse'],
-
-    // Subtle divider
-    ['divider', 'border-t border-border'],
-
-    // Section spacing
-    ['section', 'py-8 sm:py-12'],
   ],
   rules: [
     // Custom scale for active states