From 999a0f84671fad20fa3dc50c6774af2e0200b32e Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 7 May 2025 21:20:36 +0200
Subject: [PATCH] fix(Tabs): set `focus:outline-none` with `link` variant

---
 src/theme/tabs.ts                                   | 3 ++-
 test/components/__snapshots__/Tabs-vue.spec.ts.snap | 4 ++--
 test/components/__snapshots__/Tabs.spec.ts.snap     | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/theme/tabs.ts b/src/theme/tabs.ts
index 372c6fbd..1bff5b47 100644
--- a/src/theme/tabs.ts
+++ b/src/theme/tabs.ts
@@ -25,7 +25,8 @@ export default (options: Required<ModuleOptions>) => ({
       },
       link: {
         list: 'border-default',
-        indicator: 'rounded-full'
+        indicator: 'rounded-full',
+        trigger: 'focus:outline-none'
       }
     },
     orientation: {
diff --git a/test/components/__snapshots__/Tabs-vue.spec.ts.snap b/test/components/__snapshots__/Tabs-vue.spec.ts.snap
index 148ae5a8..0e010958 100644
--- a/test/components/__snapshots__/Tabs-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs-vue.spec.ts.snap
@@ -155,7 +155,7 @@ exports[`Tabs > renders with modelValue correctly 1`] = `
 exports[`Tabs > renders with neutral variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-default w-full border-b -mb-px">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-inverted"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-inverted"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -200,7 +200,7 @@ exports[`Tabs > renders with orientation vertical correctly 1`] = `
 exports[`Tabs > renders with primary variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-default w-full border-b -mb-px">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-primary"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-primary"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
diff --git a/test/components/__snapshots__/Tabs.spec.ts.snap b/test/components/__snapshots__/Tabs.spec.ts.snap
index 68409c67..661d358a 100644
--- a/test/components/__snapshots__/Tabs.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs.spec.ts.snap
@@ -155,7 +155,7 @@ exports[`Tabs > renders with modelValue correctly 1`] = `
 exports[`Tabs > renders with neutral variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-default w-full border-b -mb-px">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-inverted"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-inverted"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -200,7 +200,7 @@ exports[`Tabs > renders with orientation vertical correctly 1`] = `
 exports[`Tabs > renders with primary variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-default w-full border-b -mb-px">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-primary"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-primary"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">