From 82ffc1ed574d741be03c43dfa300fefca0d042e0 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 5 Jun 2024 14:55:17 +0200
Subject: [PATCH] feat(Tabs): handle `color` and `variant` props

Resolves #116
---
 playground/pages/tabs.vue                     |  32 ++-
 src/runtime/components/Tabs.vue               |  12 +-
 src/theme/tabs.ts                             |  95 ++++++++-
 test/components/Tabs.spec.ts                  |   6 +
 .../__snapshots__/Tabs.spec.ts.snap           | 193 ++++++++++++------
 5 files changed, 263 insertions(+), 75 deletions(-)

diff --git a/playground/pages/tabs.vue b/playground/pages/tabs.vue
index 8c4e13be..d0f3708d 100644
--- a/playground/pages/tabs.vue
+++ b/playground/pages/tabs.vue
@@ -1,4 +1,14 @@
 <script setup lang="ts">
+import theme from '#build/ui/tabs'
+
+const colors = Object.keys(theme.variants.color)
+const variants = Object.keys(theme.variants.variant)
+const orientations = Object.keys(theme.variants.orientation)
+
+const color = ref(theme.defaultVariants.color)
+const variant = ref(theme.defaultVariants.variant)
+const orientation = ref('horizontal' as const)
+
 const items = [{
   label: 'Tab1',
   avatar: {
@@ -18,15 +28,21 @@ const items = [{
 </script>
 
 <template>
-  <div class="flex gap-4">
-    <UTabs :items="[{ label: 'Monthly' }, { label: 'Yearly' }]" :content="false" />
+  <div class="flex flex-col items-center gap-12">
+    <div class="flex items-center gap-2">
+      <USelect v-model="color" :items="colors" placeholder="Color" />
+      <USelect v-model="variant" :items="variants" placeholder="Variant" />
+      <USelect v-model="orientation" :items="orientations" placeholder="Orientation" />
+    </div>
 
-    <UTabs :items="items" class="w-96">
-      <template #custom="{ item }">
-        <span class="text-gray-500 dark:text-gray-400">Custom: {{ item.content }}</span>
-      </template>
-    </UTabs>
+    <div class="flex gap-4">
+      <UTabs :color="color" :variant="variant" :orientation="orientation" :items="[{ label: 'Monthly' }, { label: 'Yearly' }]" :content="false" />
 
-    <UTabs :items="items" orientation="vertical" />
+      <UTabs :color="color" :variant="variant" :orientation="orientation" :items="items" class="w-96">
+        <template #custom="{ item }">
+          <span class="text-gray-500 dark:text-gray-400">Custom: {{ item.content }}</span>
+        </template>
+      </UTabs>
+    </div>
   </div>
 </template>
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 00f1fe9a..02e3f3b0 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { tv } from 'tailwind-variants'
+import { tv, type VariantProps } from 'tailwind-variants'
 import type { TabsRootProps, TabsRootEmits, TabsContentProps, TabsTriggerProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
@@ -19,8 +19,12 @@ export interface TabsItem extends Partial<Pick<TabsTriggerProps, 'disabled' | 'v
   content?: string
 }
 
+type TabsVariants = VariantProps<typeof tabs>
+
 export interface TabsProps<T> extends Omit<TabsRootProps, 'asChild'> {
   items?: T[]
+  color?: TabsVariants['color']
+  variant?: TabsVariants['variant']
   content?: boolean | Omit<TabsContentProps, 'asChild' | 'value'>
   class?: any
   ui?: Partial<typeof tabs.slots>
@@ -55,7 +59,11 @@ const slots = defineSlots<TabsSlots<T>>()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'orientation', 'activationMode', 'modelValue'), emits)
 const contentProps = toRef(() => defu(props.content || {}, { forceMount: true }) as TabsContentProps)
 
-const ui = computed(() => tv({ extend: tabs, slots: props.ui })({ orientation: props.orientation }))
+const ui = computed(() => tv({ extend: tabs, slots: props.ui })({
+  color: props.color,
+  variant: props.variant,
+  orientation: props.orientation
+}))
 </script>
 
 <template>
diff --git a/src/theme/tabs.ts b/src/theme/tabs.ts
index 598017aa..11114217 100644
--- a/src/theme/tabs.ts
+++ b/src/theme/tabs.ts
@@ -1,26 +1,107 @@
-export default {
+export default (config: { colors: string[] }) => ({
   slots: {
     root: 'flex items-center gap-2',
-    list: 'relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group',
-    indicator: 'absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm',
-    trigger: 'relative inline-flex items-center justify-center gap-1.5 shrink-0 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none',
+    list: 'relative flex p-1 group',
+    indicator: 'absolute transition-[translate,width] duration-200',
+    trigger: 'relative inline-flex items-center justify-center gap-1.5 shrink-0 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none',
     content: 'focus:outline-none',
     leadingIcon: 'shrink-0 size-5',
     leadingAvatar: 'shrink-0',
     label: 'truncate'
   },
   variants: {
+    color: {
+      ...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
+      white: '',
+      black: ''
+    },
+    variant: {
+      pill: {
+        list: 'bg-gray-50 dark:bg-gray-800 rounded-lg',
+        indicator: 'rounded-md shadow-sm'
+      },
+      link: {
+        list: 'border-gray-200 dark:border-gray-800',
+        indicator: 'rounded-full'
+      }
+    },
     orientation: {
       horizontal: {
         root: 'flex-col',
         list: 'w-full',
-        indicator: 'left-0 inset-y-1 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]'
+        indicator: 'left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]'
       },
       vertical: {
         list: 'flex-col items-center',
-        indicator: 'top-0 inset-x-1 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]',
+        indicator: 'top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]',
         content: 'flex-1'
       }
     }
+  },
+  compoundVariants: [{
+    orientation: 'horizontal',
+    variant: 'pill',
+    class: {
+      indicator: 'inset-y-1'
+    }
+  }, {
+    orientation: 'horizontal',
+    variant: 'link',
+    class: {
+      list: 'border-b',
+      indicator: '-bottom-px h-px'
+    }
+  }, {
+    orientation: 'vertical',
+    variant: 'pill',
+    class: {
+      indicator: 'inset-x-1'
+    }
+  }, {
+    orientation: 'vertical',
+    variant: 'link',
+    class: {
+      list: 'border-l',
+      indicator: '-left-px w-px'
+    }
+  }, ...config.colors.map((color: string) => ({
+    color,
+    variant: 'pill',
+    class: {
+      indicator: `bg-${color}-500 dark:bg-${color}-400`,
+      trigger: 'data-[state=active]:text-white'
+    }
+  })), {
+    color: 'white',
+    variant: 'pill',
+    class: {
+      indicator: 'bg-white dark:bg-gray-900',
+      trigger: 'data-[state=active]:text-gray-900 dark:data-[state=active]:text-white'
+    }
+  }, {
+    color: 'black',
+    variant: 'pill',
+    class: {
+      indicator: 'bg-gray-900 dark:bg-white',
+      trigger: 'data-[state=active]:text-white dark:data-[state=active]:text-gray-900'
+    }
+  }, ...config.colors.map((color: string) => ({
+    color,
+    variant: 'link',
+    class: {
+      indicator: `bg-${color}-500 dark:bg-${color}-400`,
+      trigger: `data-[state=active]:text-${color}-500 dark:data-[state=active]:text-${color}-400`
+    }
+  })), {
+    color: ['white', 'black'],
+    variant: 'link',
+    class: {
+      indicator: 'bg-gray-900 dark:bg-white',
+      trigger: 'data-[state=active]:text-gray-900 dark:data-[state=active]:text-white'
+    }
+  }],
+  defaultVariants: {
+    color: 'white',
+    variant: 'pill'
   }
-}
+})
diff --git a/test/components/Tabs.spec.ts b/test/components/Tabs.spec.ts
index f8aa94d1..82e53899 100644
--- a/test/components/Tabs.spec.ts
+++ b/test/components/Tabs.spec.ts
@@ -1,8 +1,12 @@
 import { describe, it, expect } from 'vitest'
 import Tabs, { type TabsProps, type TabsSlots } from '../../src/runtime/components/Tabs.vue'
 import ComponentRender from '../component-render'
+import theme from '#build/ui/tabs'
 
 describe('Tabs', () => {
+  const colors = Object.keys(theme.variants.color) as any
+  const variants = Object.keys(theme.variants.variant) as any
+
   const items = [{
     label: 'Tab1',
     avatar: {
@@ -28,6 +32,8 @@ describe('Tabs', () => {
     ['with modelValue', { props: { ...props, modelValue: '1' } }],
     ['with defaultValue', { props: { ...props, defaultValue: '1' } }],
     ['with orientation vertical', { props: { ...props, orientation: 'vertical' as const } }],
+    ...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
+    ...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]),
     ['without content', { props: { ...props, content: false } }],
     ['with class', { props: { ...props, class: 'w-96' } }],
     ['with ui', { props: { ...props, ui: { content: 'w-full ring ring-gray-200 dark:ring-gray-800' } } }],
diff --git a/test/components/__snapshots__/Tabs.spec.ts.snap b/test/components/__snapshots__/Tabs.spec.ts.snap
index 34033735..93e30125 100644
--- a/test/components/__snapshots__/Tabs.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs.spec.ts.snap
@@ -2,41 +2,19 @@
 
 exports[`Tabs > renders with class correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col w-96">
-  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm left-0 inset-y-1 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]"></div><button id="radix-vue-tabs-21-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-21-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-21-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-21-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-21-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-21-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-49-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-49-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-49-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-49-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-49-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-49-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
-  <div id="radix-vue-tabs-21-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-21-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
-  <div id="radix-vue-tabs-21-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-21-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
-  <div id="radix-vue-tabs-21-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-21-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
+  <div id="radix-vue-tabs-49-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-49-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
+  <div id="radix-vue-tabs-49-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-49-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-49-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-49-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
 </div>"
 `;
 
-exports[`Tabs > renders with content slot correctly 1`] = `
+exports[`Tabs > renders with color black correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm left-0 inset-y-1 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]"></div><button id="radix-vue-tabs-41-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-41-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-41-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-41-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-41-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-41-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
-  </div>
-  <div id="radix-vue-tabs-41-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-41-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">Content slot</div>
-  <div id="radix-vue-tabs-41-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-41-trigger-1" hidden="" tabindex="0" class="focus:outline-none">Content slot</div>
-  <div id="radix-vue-tabs-41-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-41-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
-</div>"
-`;
-
-exports[`Tabs > renders with custom slot correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm left-0 inset-y-1 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]"></div><button id="radix-vue-tabs-45-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-45-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-45-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-45-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-45-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-45-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
-  </div>
-  <div id="radix-vue-tabs-45-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-45-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
-  <div id="radix-vue-tabs-45-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-45-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
-  <div id="radix-vue-tabs-45-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-45-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Custom slot</div>
-</div>"
-`;
-
-exports[`Tabs > renders with default slot correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm left-0 inset-y-1 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]"></div><button id="radix-vue-tabs-33-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-33-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Default slot</span></button><button id="radix-vue-tabs-33-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-33-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default slot</span></button><button id="radix-vue-tabs-33-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-33-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default slot</span></button>
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-gray-900 dark:bg-white"></div><button id="radix-vue-tabs-33-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-33-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-white dark:data-[state=active]:text-gray-900"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-33-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-33-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-white dark:data-[state=active]:text-gray-900"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-33-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-33-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-white dark:data-[state=active]:text-gray-900"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="radix-vue-tabs-33-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-33-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
   <div id="radix-vue-tabs-33-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-33-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
@@ -44,10 +22,87 @@ exports[`Tabs > renders with default slot correctly 1`] = `
 </div>"
 `;
 
+exports[`Tabs > renders with color green correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-green-500 dark:bg-green-400"></div><button id="radix-vue-tabs-21-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-21-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-21-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-21-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-21-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-21-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  </div>
+  <div id="radix-vue-tabs-21-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-21-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
+  <div id="radix-vue-tabs-21-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-21-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-21-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-21-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
+</div>"
+`;
+
+exports[`Tabs > renders with color primary correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-primary-500 dark:bg-primary-400"></div><button id="radix-vue-tabs-17-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-17-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-17-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-17-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-17-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-17-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  </div>
+  <div id="radix-vue-tabs-17-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-17-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
+  <div id="radix-vue-tabs-17-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-17-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-17-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-17-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
+</div>"
+`;
+
+exports[`Tabs > renders with color red correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-red-500 dark:bg-red-400"></div><button id="radix-vue-tabs-25-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-25-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-25-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-25-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-25-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-25-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  </div>
+  <div id="radix-vue-tabs-25-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-25-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
+  <div id="radix-vue-tabs-25-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-25-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-25-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-25-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
+</div>"
+`;
+
+exports[`Tabs > renders with color white correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-29-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-29-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-29-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-29-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-29-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-29-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  </div>
+  <div id="radix-vue-tabs-29-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-29-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
+  <div id="radix-vue-tabs-29-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-29-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-29-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-29-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
+</div>"
+`;
+
+exports[`Tabs > renders with content slot correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-69-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-69-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-69-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-69-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-69-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-69-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  </div>
+  <div id="radix-vue-tabs-69-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-69-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">Content slot</div>
+  <div id="radix-vue-tabs-69-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-69-trigger-1" hidden="" tabindex="0" class="focus:outline-none">Content slot</div>
+  <div id="radix-vue-tabs-69-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-69-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
+</div>"
+`;
+
+exports[`Tabs > renders with custom slot correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-73-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-73-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-73-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-73-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-73-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-73-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  </div>
+  <div id="radix-vue-tabs-73-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-73-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
+  <div id="radix-vue-tabs-73-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-73-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-73-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-73-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Custom slot</div>
+</div>"
+`;
+
+exports[`Tabs > renders with default slot correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-61-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-61-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Default slot</span></button><button id="radix-vue-tabs-61-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-61-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default slot</span></button><button id="radix-vue-tabs-61-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-61-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default slot</span></button>
+  </div>
+  <div id="radix-vue-tabs-61-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-61-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
+  <div id="radix-vue-tabs-61-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-61-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-61-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-61-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
+</div>"
+`;
+
 exports[`Tabs > renders with defaultValue correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm left-0 inset-y-1 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]"></div><button id="radix-vue-tabs-9-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-9-content-0" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-9-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-9-content-1" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-9-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-9-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-9-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-9-content-0" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-9-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-9-content-1" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-9-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-9-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="radix-vue-tabs-9-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-9-trigger-0" hidden="" tabindex="0" class="focus:outline-none">This is the content shown for Tab1</div>
   <div id="radix-vue-tabs-9-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-9-trigger-1" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">And, this is the content for Tab2</div>
@@ -57,8 +112,8 @@ exports[`Tabs > renders with defaultValue correctly 1`] = `
 
 exports[`Tabs > renders with items correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm left-0 inset-y-1 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]"></div><button id="radix-vue-tabs-1-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-1-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-1-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-1-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-1-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-1-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-1-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-1-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-1-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-1-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-1-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-1-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="radix-vue-tabs-1-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-1-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
   <div id="radix-vue-tabs-1-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-1-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
@@ -68,19 +123,19 @@ exports[`Tabs > renders with items correctly 1`] = `
 
 exports[`Tabs > renders with leading slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm left-0 inset-y-1 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]"></div><button id="radix-vue-tabs-29-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-29-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none">Leading slot<span class="truncate">Tab1</span></button><button id="radix-vue-tabs-29-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-29-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none">Leading slot<span class="truncate">Tab2</span></button><button id="radix-vue-tabs-29-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-29-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none">Leading slot<span class="truncate">Tab3</span></button>
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-57-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-57-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white">Leading slot<span class="truncate">Tab1</span></button><button id="radix-vue-tabs-57-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-57-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white">Leading slot<span class="truncate">Tab2</span></button><button id="radix-vue-tabs-57-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-57-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white">Leading slot<span class="truncate">Tab3</span></button>
   </div>
-  <div id="radix-vue-tabs-29-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-29-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
-  <div id="radix-vue-tabs-29-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-29-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
-  <div id="radix-vue-tabs-29-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-29-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
+  <div id="radix-vue-tabs-57-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-57-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
+  <div id="radix-vue-tabs-57-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-57-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-57-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-57-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
 </div>"
 `;
 
 exports[`Tabs > renders with modelValue correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm left-0 inset-y-1 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]"></div><button id="radix-vue-tabs-5-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-5-content-0" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-5-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-5-content-1" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-5-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-5-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-5-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-5-content-0" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-5-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-5-content-1" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-5-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-5-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="radix-vue-tabs-5-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-5-trigger-0" hidden="" tabindex="0" class="focus:outline-none">This is the content shown for Tab1</div>
   <div id="radix-vue-tabs-5-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-5-trigger-1" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">And, this is the content for Tab2</div>
@@ -90,8 +145,8 @@ exports[`Tabs > renders with modelValue correctly 1`] = `
 
 exports[`Tabs > renders with orientation vertical correctly 1`] = `
 "<div dir="ltr" data-orientation="vertical" class="flex items-center gap-2">
-  <div role="tablist" aria-orientation="vertical" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group flex-col items-center" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm top-0 inset-x-1 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]"></div><button id="radix-vue-tabs-13-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-13-content-0" data-state="active" data-orientation="vertical" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-13-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-13-content-1" data-state="inactive" data-orientation="vertical" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-13-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-13-content-2" data-state="inactive" data-orientation="vertical" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  <div role="tablist" aria-orientation="vertical" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg flex-col items-center" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position] inset-x-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-13-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-13-content-0" data-state="active" data-orientation="vertical" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-13-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-13-content-1" data-state="inactive" data-orientation="vertical" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-13-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-13-content-2" data-state="inactive" data-orientation="vertical" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="radix-vue-tabs-13-content-0" role="tabpanel" data-state="active" data-orientation="vertical" aria-labelledby="radix-vue-tabs-13-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none flex-1">This is the content shown for Tab1</div>
   <div id="radix-vue-tabs-13-content-1" role="tabpanel" data-state="inactive" data-orientation="vertical" aria-labelledby="radix-vue-tabs-13-trigger-1" hidden="" tabindex="0" class="focus:outline-none flex-1">And, this is the content for Tab2</div>
@@ -101,8 +156,41 @@ exports[`Tabs > renders with orientation vertical correctly 1`] = `
 
 exports[`Tabs > renders with trailing slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm left-0 inset-y-1 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]"></div><button id="radix-vue-tabs-37-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-37-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span>Trailing slot</button><button id="radix-vue-tabs-37-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-37-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>Trailing slot</button><button id="radix-vue-tabs-37-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-37-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span>Trailing slot</button>
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-65-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-65-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span>Trailing slot</button><button id="radix-vue-tabs-65-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-65-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>Trailing slot</button><button id="radix-vue-tabs-65-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-65-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span>Trailing slot</button>
+  </div>
+  <div id="radix-vue-tabs-65-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-65-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
+  <div id="radix-vue-tabs-65-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-65-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-65-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-65-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
+</div>"
+`;
+
+exports[`Tabs > renders with ui correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-53-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-53-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-53-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-53-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-53-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-53-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  </div>
+  <div id="radix-vue-tabs-53-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-53-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full ring ring-gray-200 dark:ring-gray-800">This is the content shown for Tab1</div>
+  <div id="radix-vue-tabs-53-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-53-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full ring ring-gray-200 dark:ring-gray-800">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-53-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-53-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full ring ring-gray-200 dark:ring-gray-800">Finally, this is the content for Tab3</div>
+</div>"
+`;
+
+exports[`Tabs > renders with variant link correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-gray-200 dark:border-gray-800 w-full border-b" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] -bottom-px h-px bg-gray-900 dark:bg-white"></div><button id="radix-vue-tabs-41-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-41-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-41-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-41-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-41-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-41-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  </div>
+  <div id="radix-vue-tabs-41-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-41-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
+  <div id="radix-vue-tabs-41-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-41-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-41-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-41-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
+</div>"
+`;
+
+exports[`Tabs > renders with variant pill correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-37-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-37-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-37-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-37-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-37-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-37-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="radix-vue-tabs-37-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-37-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
   <div id="radix-vue-tabs-37-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-37-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
@@ -110,21 +198,10 @@ exports[`Tabs > renders with trailing slot correctly 1`] = `
 </div>"
 `;
 
-exports[`Tabs > renders with ui correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm left-0 inset-y-1 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]"></div><button id="radix-vue-tabs-25-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-25-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-25-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-25-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-25-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-25-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
-  </div>
-  <div id="radix-vue-tabs-25-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-25-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full ring ring-gray-200 dark:ring-gray-800">This is the content shown for Tab1</div>
-  <div id="radix-vue-tabs-25-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-25-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full ring ring-gray-200 dark:ring-gray-800">And, this is the content for Tab2</div>
-  <div id="radix-vue-tabs-25-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-25-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full ring ring-gray-200 dark:ring-gray-800">Finally, this is the content for Tab3</div>
-</div>"
-`;
-
 exports[`Tabs > renders without content correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm left-0 inset-y-1 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]"></div><button id="radix-vue-tabs-17-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-17-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-17-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-17-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-17-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-17-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-white dark:bg-gray-900"></div><button id="radix-vue-tabs-45-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-45-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-45-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-45-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-45-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-45-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <!--v-if-->
 </div>"