feat(Tabs): handle color and variant props

Resolves #116

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' } } }],

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>"