Merge branch 'main' into serhalp/security-audit

Author: serhalp

app/components/BackButton.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const router = useRouter()
+const canGoBack = useCanGoBack()
+</script>
+
+<template>
+  <button
+    v-if="canGoBack"
+    type="button"
+    class="inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+    @click="router.back()"
+  >
+    <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+    <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
+  </button>
+</template>

app/components/Button/Base.vue

@@ -15,8 +15,8 @@ const props = withDefaults(
     type?: 'button' | 'submit'
     /** @default "secondary" */
     variant?: 'primary' | 'secondary'
-    /** @default "medium" */
-    size?: 'small' | 'medium'
+    /** @default "md" */
+    size?: 'sm' | 'md'
     /** Keyboard shortcut hint */
     ariaKeyshortcuts?: string
     /** Forces the button to occupy the entire width of its container. */
@@ -27,7 +27,7 @@ const props = withDefaults(
   {
     type: 'button',
     variant: 'secondary',
-    size: 'medium',
+    size: 'md',
   },
 )
 
@@ -48,8 +48,8 @@ defineExpose({
     :class="{
       'inline-flex': !block,
       'flex': block,
-      'text-sm px-4 py-2': size === 'medium',
-      'text-xs px-2 py-0.5': size === 'small',
+      'text-sm px-4 py-2': size === 'md',
+      'text-xs px-2 py-0.5': size === 'sm',
       '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/Button/ButtonBase.stories.ts

@@ -52,7 +52,7 @@ export const Secondary: Story = {
 
 export const Small: Story = {
   args: {
-    size: 'small',
+    size: 'sm',
   },
   render: args => ({
     components: { ButtonBase },

app/components/Compare/FacetSelector.vue

@@ -40,7 +40,7 @@ function isCategoryNoneSelected(category: string): boolean {
           :aria-pressed="isCategoryAllSelected(category)"
           :disabled="isCategoryAllSelected(category)"
           @click="selectCategory(category)"
-          size="small"
+          size="sm"
         >
           {{ $t('compare.facets.all') }}
         </ButtonBase>
@@ -52,7 +52,7 @@ function isCategoryNoneSelected(category: string): boolean {
           :aria-pressed="isCategoryNoneSelected(category)"
           :disabled="isCategoryNoneSelected(category)"
           @click="deselectCategory(category)"
-          size="small"
+          size="sm"
         >
           {{ $t('compare.facets.none') }}
         </ButtonBase>
@@ -64,7 +64,7 @@ function isCategoryNoneSelected(category: string): boolean {
         <ButtonBase
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
-          size="small"
+          size="sm"
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
           :disabled="facet.comingSoon"
           :aria-pressed="isFacetSelected(facet.id)"

app/components/Compare/PackageSelector.vue

@@ -213,7 +213,7 @@ onClickOutside(containerRef, () => {
           {{ pkg }}
         </LinkBase>
         <ButtonBase
-          size="small"
+          size="sm"
           :aria-label="
             $t('compare.selector.remove_package', {
               package: pkg === NO_DEPENDENCY_ID ? $t('compare.no_dependency.label') : pkg,
@@ -246,7 +246,6 @@ onClickOutside(containerRef, () => {
               : $t('compare.selector.search_add')
           "
           no-correct
-          size="medium"
           class="w-full min-w-25 ps-7"
           aria-autocomplete="list"
           ref="inputRef"

app/components/Compare/ReplacementSuggestion.vue

@@ -65,15 +65,15 @@ const docUrl = computed(() => {
     <!-- No dependency action button -->
     <ButtonBase
       v-if="variant === 'nodep' && showAction !== false"
-      size="small"
+      size="sm"
       :aria-label="$t('compare.no_dependency.add_column')"
       @click="emit('addNoDep')"
     >
       {{ $t('package.replacement.consider_no_dep') }}
     </ButtonBase>
 
     <!-- Info link -->
-    <LinkBase v-else-if="docUrl" :to="docUrl" variant="button-secondary" size="small">
+    <LinkBase v-else-if="docUrl" :to="docUrl" variant="button-secondary" size="sm">
       {{ $t('package.replacement.learn_more') }}
     </LinkBase>
   </div>