few more rings

Author: jellydeck

app/components/Package/DownloadAnalytics.vue

@@ -620,13 +620,11 @@ const config = computed(() => {
             {{ $t('package.downloads.granularity') }}
           </label>
 
-          <div
-            class="flex items-center px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
-          >
+          <div class="flex items-center bg-bg-subtle border border-border rounded-md">
             <select
               id="granularity"
               v-model="selectedGranularity"
-              class="w-full bg-bg-subtle font-mono text-sm text-fg outline-none appearance-none"
+              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>

app/components/Package/MetricsBadges.vue

@@ -60,7 +60,7 @@ const typesHref = computed(() => {
           :is="typesHref ? NuxtLink : 'span'"
           :to="typesHref"
           :tabindex="!typesHref ? 0 : undefined"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
           :class="[
             hasTypes
               ? 'text-fg-muted bg-bg-muted border border-border'
@@ -85,7 +85,7 @@ const typesHref = computed(() => {
       <TooltipApp :text="hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')">
         <span
           tabindex="0"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
           :class="
             hasEsm
               ? 'text-fg-muted bg-bg-muted border border-border'
@@ -107,7 +107,7 @@ const typesHref = computed(() => {
       <TooltipApp :text="$t('package.metrics.cjs')">
         <span
           tabindex="0"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
         >
           <span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
           CJS