fix(ui): improve symmetry of buttons/links with icons

app/components/Button/Base.vue

@@ -32,6 +32,10 @@ const props = withDefaults(
 )
 
 const el = useTemplateRef('el')
+const slots = defineSlots<{
+  default?: () => unknown
+}>()
+const iconOnly = computed(() => !!props.classicon && !slots.default)
 
 const keyboardShortcutsEnabled = useKeyboardShortcuts()
 
@@ -48,8 +52,14 @@ defineExpose({
     :class="{
       'inline-flex': !block,
       'flex': block,
-      'text-sm px-4 py-2': size === 'md',
-      'text-xs px-2 py-0.5': size === 'sm',
+      'text-sm py-2': size === 'md' && !iconOnly,
+      'text-sm p-2': size === 'md' && !!iconOnly,
+      'px-4': size === 'md' && !classicon && !iconOnly,
+      'ps-3 pe-4': size === 'md' && !!classicon && !iconOnly,
+      'text-xs py-0.5': size === 'sm' && !iconOnly,
+      'text-xs p-0.5': size === 'sm' && !!iconOnly,
+      'px-2': size === 'sm' && !classicon && !iconOnly,
+      'ps-1.5 pe-2': size === 'sm' && !!classicon && !iconOnly,
       'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'secondary',
       'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':

app/components/Link/Base.vue

@@ -66,6 +66,8 @@ const isLink = computed(() => props.variant === 'link')
 const isButton = computed(() => !isLink.value)
 const isButtonSmall = computed(() => props.size === 'sm' && !isLink.value)
 const isButtonMedium = computed(() => props.size === 'md' && !isLink.value)
+const slots = useSlots()
+const iconOnly = computed(() => !!props.classicon && !slots.default)
 const keyboardShortcutsEnabled = useKeyboardShortcuts()
 </script>
 
@@ -78,13 +80,21 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
       'inline-flex': !block,
       'gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
         isButton,
-      'text-sm px-4 py-2': isButtonMedium,
-      'text-xs px-2 py-0.5': isButtonSmall,
+      'text-sm py-2': isButtonMedium && !iconOnly,
+      'text-sm p-2': isButtonMedium && !!iconOnly,
+      'px-4': isButtonMedium && !classicon && !iconOnly,
+      'ps-3 pe-4': isButtonMedium && !!classicon && !iconOnly,
+      'text-xs py-0.5': isButtonSmall && !iconOnly,
+      'text-xs p-0.5': isButtonSmall && !!iconOnly,
+      'px-2': isButtonSmall && !classicon && !iconOnly,
+      'ps-1.5 pe-2': isButtonSmall && !!classicon && !iconOnly,
       'text-bg bg-fg-muted': variant === 'button-primary',
       'bg-transparent text-fg-muted': variant === 'button-secondary',
     }"
-    ><slot
-  /></span>
+  >
+    <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
+    <slot />
+  </span>
   <NuxtLink
     v-bind="props"
     v-else
@@ -98,8 +108,14 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
         isLink,
       'justify-center font-mono border border-border rounded-md transition-all duration-200':
         isButton,
-      'text-sm px-4 py-2': isButtonMedium,
-      'text-xs px-2 py-0.5': isButtonSmall,
+      'text-sm py-2': isButtonMedium && !iconOnly,
+      'text-sm p-2': isButtonMedium && iconOnly,
+      'px-4': isButtonMedium && !classicon && !iconOnly,
+      'ps-3 pe-4': isButtonMedium && !!classicon && !iconOnly,
+      'text-xs py-0.5': isButtonSmall && !iconOnly,
+      'text-xs p-0.5': isButtonSmall && iconOnly,
+      'px-2': isButtonSmall && !classicon && !iconOnly,
+      'ps-1.5 pe-2': isButtonSmall && !!classicon && !iconOnly,
       'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'button-secondary',
       'text-bg bg-fg hover:(bg-fg/50 text-accent) focus-visible:(bg-fg/50) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':

app/components/Package/Dependencies.vue

@@ -163,24 +163,22 @@ const numberFormatter = useNumberFormatter()
               :to="packageRoute(dep, getVulnerableDepInfo(dep)!.version)"
               class="shrink-0"
               :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
+              :aria-label="$t('package.dependencies.view_vulnerabilities')"
               :title="
                 $t('package.dependencies.vulnerabilities_count', {
                   count: getVulnerableDepInfo(dep)!.counts.total,
                 })
               "
               classicon="i-lucide:shield-check"
-            >
-              <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
-            </LinkBase>
+            />
             <LinkBase
               v-if="getDeprecatedDepInfo(dep)"
               :to="packageRoute(dep, getDeprecatedDepInfo(dep)!.version)"
               class="shrink-0 text-purple-700 dark:text-purple-500"
+              :aria-label="$t('package.deprecated.label')"
               :title="getDeprecatedDepInfo(dep)!.message"
               classicon="i-lucide:octagon-alert"
-            >
-              <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
-            </LinkBase>
+            />
             <LinkBase
               :to="packageRoute(dep, version)"
               class="block truncate"

app/components/Package/Versions.vue

@@ -476,23 +476,21 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
           :to="versionsPageRoute"
           variant="button-secondary"
           class="text-fg-subtle hover:text-fg transition-colors min-w-6 min-h-6 p-1 rounded"
+          :aria-label="$t('package.versions.view_all_versions')"
           :title="$t('package.versions.view_all_versions')"
           classicon="i-lucide:history"
           data-testid="view-all-versions-link"
-        >
-          <span class="sr-only">{{ $t('package.versions.view_all_versions') }}</span>
-        </LinkBase>
+        />
         <LinkBase
           v-if="distributionRoute"
           :to="distributionRoute"
           variant="button-secondary"
           class="text-fg-subtle hover:text-fg transition-colors min-w-6 min-h-6 p-1 rounded"
+          :aria-label="$t('package.downloads.community_distribution')"
           :title="$t('package.downloads.community_distribution')"
           classicon="i-lucide:file-stack"
           data-testid="view-distribution-link"
-        >
-          <span class="sr-only">{{ $t('package.downloads.community_distribution') }}</span>
-        </LinkBase>
+        />
       </div>
     </template>
     <div class="space-y-0.5 min-w-0">

app/components/Package/WeeklyDownloadStats.vue

@@ -343,11 +343,10 @@ const config = computed<VueUiSparklineConfig>(() => {
           variant="button-secondary"
           :to="trendsRoute"
           class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
+          :aria-label="$t('package.trends.title')"
           :title="$t('package.trends.title')"
           classicon="i-lucide:chart-line"
-        >
-          <span class="sr-only">{{ $t('package.trends.title') }}</span>
-        </LinkBase>
+        />
         <span v-else-if="isLoadingWeeklyDownloads" class="min-w-6 min-h-6 -m-1 p-1" />
       </template>
 

app/pages/index.vue

@@ -73,7 +73,7 @@ defineOgImage('Splash.takumi', {}, { alt: () => $t('seo.home.description') })
                 <ButtonBase
                   type="submit"
                   variant="primary"
-                  class="absolute inset-ie-2 border-transparent"
+                  class="absolute inset-ie-2 border-transparent max-sm:p-2"
                   classicon="i-lucide:search"
                 >
                   <span class="sr-only sm:not-sr-only">