Add pink border to VSearchButton on group hover

src/components/VHeader/VSearchBar/VSearchButton.vue

@@ -4,7 +4,7 @@
     :aria-label="$t('search.search')"
     size="disabled"
     :variant="isIcon ? 'plain' : 'primary'"
-    class="transition-none inline-block rounded-s-none font-semibold text-2xl hover:text-white group-hover:text-white hover:bg-pink group-hover:bg-pink focus-visible:ring focus-visible:ring-pink"
+    class="transition-none inline-block rounded-s-none font-semibold text-2xl hover:text-white group-hover:text-white group-hover:border-pink hover:bg-pink group-hover:bg-pink focus-visible:ring focus-visible:ring-pink"
     :class="[
       isIcon
         ? 'search-button focus-visible:bg-pink focus-visible:text-white p-[0.5px] ps-[1.5px]'

test/playwright/visual-regression/header-searchbar.spec.ts

@@ -0,0 +1,76 @@
+import { test } from '@playwright/test'
+
+import breakpoints from '~~/test/playwright/utils/breakpoints'
+import { hideInputCursors } from '~~/test/playwright/utils/page'
+
+test.describe('header search bar snapshots', () => {
+  test.describe('ltr', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/search/?q=birds')
+    })
+
+    test.describe('search input', () => {
+      breakpoints.describeEvery(({ expectSnapshot }) => {
+        test('unfocused', async ({ page }) => {
+          await expectSnapshot(
+            'unfocused-search-ltr',
+            page.locator('form:has(input)')
+          )
+        })
+
+        test('focused', async ({ page }) => {
+          await page.focus('input')
+          await hideInputCursors(page)
+          await expectSnapshot(
+            'focused-search-ltr',
+            page.locator('form:has(input)')
+          )
+        })
+
+        test('hovered', async ({ page }) => {
+          await page.hover('input')
+          await hideInputCursors(page)
+          await expectSnapshot(
+            'hovered-search-ltr',
+            page.locator('form:has(input)')
+          )
+        })
+      })
+    })
+  })
+
+  test.describe('rtl', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/ar/search/?q=birds')
+    })
+
+    test.describe('search input', () => {
+      breakpoints.describeEvery(({ expectSnapshot }) => {
+        test('unfocused', async ({ page }) => {
+          await expectSnapshot(
+            'unfocused-search-rtl',
+            page.locator('form:has(input)')
+          )
+        })
+
+        test('focused', async ({ page }) => {
+          await page.focus('input')
+          await hideInputCursors(page)
+          await expectSnapshot(
+            'focused-search-rtl',
+            page.locator('form:has(input)')
+          )
+        })
+
+        test('hovered', async ({ page }) => {
+          await page.hover('input')
+          await hideInputCursors(page)
+          await expectSnapshot(
+            'hovered-search-rtl',
+            page.locator('form:has(input)')
+          )
+        })
+      })
+    })
+  })
+})