diff --git a/test/components/__snapshots__/Avatar.spec.ts.snap b/test/components/__snapshots__/Avatar.spec.ts.snap
index 141849db..403b9164 100644
--- a/test/components/__snapshots__/Avatar.spec.ts.snap
+++ b/test/components/__snapshots__/Avatar.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex it
 
 exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-sm bg-white dark:bg-gray-900"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
 
-exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-8 text-sm"><!--v-if--><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon text-gray-500 dark:text-gray-400 shrink-0 size-4" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"></path></svg></span>"`;
+exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-8 text-sm"><!--v-if--><svg data-v-a55c6d43="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon text-gray-500 dark:text-gray-400 shrink-0 size-4" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"></path></svg></span>"`;
 
 exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-16 text-2xl"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
 
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index 614976e8..9225ed14 100644
--- a/test/components/__snapshots__/Button.spec.ts.snap
+++ b/test/components/__snapshots__/Button.spec.ts.snap
@@ -31,7 +31,7 @@ exports[`Button > renders with disabled correctly 1`] = `
 `;
 
 exports[`Button > renders with icon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-a55c6d43="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
     <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41a60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84a51.39 51.39 0 0 0-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"></path>
   </svg>
   <!--v-if-->
@@ -54,7 +54,7 @@ exports[`Button > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Button > renders with leadingIcon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-a55c6d43="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
     <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
   </svg>
   <!--v-if-->
@@ -63,7 +63,7 @@ exports[`Button > renders with leadingIcon correctly 1`] = `
 `;
 
 exports[`Button > renders with loading correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 20 20">
+"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-a55c6d43="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 20 20">
     <path fill="currentColor" fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138a.75.75 0 0 0-1.449-.39m1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219" clip-rule="evenodd"></path>
   </svg>
   <!--v-if-->
@@ -72,7 +72,7 @@ exports[`Button > renders with loading correctly 1`] = `
 `;
 
 exports[`Button > renders with loadingIcon correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 24 24">
+"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-a55c6d43="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 24 24">
     <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09m8.445-7.188L18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456m-1.365 11.852L16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183l.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394l-1.183.394a2.25 2.25 0 0 0-1.423 1.423"></path>
   </svg>
   <!--v-if-->
@@ -139,7 +139,7 @@ exports[`Button > renders with trailing slot correctly 1`] = `
 exports[`Button > renders with trailingIcon correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">
   <!--v-if-->
-  <!--v-if--><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
+  <!--v-if--><svg data-v-a55c6d43="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
     <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path>
   </svg>
 </button>"
diff --git a/test/components/__snapshots__/Card.spec.ts.snap b/test/components/__snapshots__/Card.spec.ts.snap
index 1c333dff..22007ff6 100644
--- a/test/components/__snapshots__/Card.spec.ts.snap
+++ b/test/components/__snapshots__/Card.spec.ts.snap
@@ -27,7 +27,7 @@ exports[`Card > renders with class correctly 1`] = `
 exports[`Card > renders with default slot correctly 1`] = `
 "<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow">
   <!--v-if-->
-  <div class="px-4 py-5 sm:p-6">Default slot</div>
+  <div class="p-4 sm:p-6">Default slot</div>
   <!--v-if-->
 </div>"
 `;
diff --git a/test/components/__snapshots__/Chip.spec.ts.snap b/test/components/__snapshots__/Chip.spec.ts.snap
index 8d78e996..feee5008 100644
--- a/test/components/__snapshots__/Chip.spec.ts.snap
+++ b/test/components/__snapshots__/Chip.spec.ts.snap
@@ -48,4 +48,4 @@ exports[`Chip > renders with size xl correctly 1`] = `"<div class="relative inli
 
 exports[`Chip > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-1.5 min-w-[0.375rem] text-[6px] p-px top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center font-medium whitespace-nowrap text-gray-500 dark:text-gray-400 bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
diff --git a/test/components/__snapshots__/Tabs.spec.ts.snap b/test/components/__snapshots__/Tabs.spec.ts.snap
index 769b64dd..cde4b8bc 100644
--- a/test/components/__snapshots__/Tabs.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs.spec.ts.snap
@@ -6,12 +6,8 @@ exports[`Tabs > renders basic case correctly 1`] = `
     <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><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">
-    <!---->
-  </div>
-  <div id="radix-vue-tabs-1-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-1-trigger-2" hidden="" tabindex="0" class="focus:outline-none">
-    <!---->
-  </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>
+  <div id="radix-vue-tabs-1-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-1-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
 </div>"
 `;
 
@@ -21,12 +17,8 @@ exports[`Tabs > renders with class correctly 1`] = `
     <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></div><button id="radix-vue-tabs-5-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-5-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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-5-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-5-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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab3</span></button>
   </div>
   <div id="radix-vue-tabs-5-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-5-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-5-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-5-trigger-1" hidden="" tabindex="0" class="focus:outline-none">
-    <!---->
-  </div>
-  <div id="radix-vue-tabs-5-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-5-trigger-2" hidden="" tabindex="0" class="focus:outline-none">
-    <!---->
-  </div>
+  <div id="radix-vue-tabs-5-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-5-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-5-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-5-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
 </div>"
 `;
 
@@ -36,12 +28,8 @@ exports[`Tabs > renders with default slot correctly 1`] = `
     <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0">Default slot</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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0">Default slot</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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0">Default slot</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">
-    <!---->
-  </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">
-    <!---->
-  </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>"
 `;
 
@@ -50,13 +38,9 @@ exports[`Tabs > renders with defaultValue correctly 1`] = `
   <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative w-full flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-800 data-[orientation=horizontal]:h-10 p-1 group" tabindex="0">
     <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></div><button id="radix-vue-tabs-21-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-21-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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-21-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-21-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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab3</span></button>
   </div>
-  <div id="radix-vue-tabs-21-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-21-trigger-0" hidden="" tabindex="0" class="focus:outline-none">
-    <!---->
-  </div>
+  <div id="radix-vue-tabs-21-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-21-trigger-0" hidden="" tabindex="0" class="focus:outline-none">This is the content shown for Tab1</div>
   <div id="radix-vue-tabs-21-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-21-trigger-1" tabindex="0" style="animation-duration: 0s;" 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">
-    <!---->
-  </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>"
 `;
 
@@ -66,12 +50,8 @@ exports[`Tabs > renders with item slot correctly 1`] = `
     <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><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">Item slot</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">
-    <!---->
-  </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">
-    <!---->
-  </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">Item slot</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">Item slot</div>
 </div>"
 `;
 
@@ -80,13 +60,9 @@ exports[`Tabs > renders with modelValue correctly 1`] = `
   <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative w-full flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-800 data-[orientation=horizontal]:h-10 p-1 group" tabindex="0">
     <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></div><button id="radix-vue-tabs-17-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-17-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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-17-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-17-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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab3</span></button>
   </div>
-  <div id="radix-vue-tabs-17-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-17-trigger-0" hidden="" tabindex="0" class="focus:outline-none">
-    <!---->
-  </div>
+  <div id="radix-vue-tabs-17-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-17-trigger-0" hidden="" tabindex="0" class="focus:outline-none">This is the content shown for Tab1</div>
   <div id="radix-vue-tabs-17-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-17-trigger-1" tabindex="0" style="animation-duration: 0s;" 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">
-    <!---->
-  </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>"
 `;
 
@@ -96,12 +72,8 @@ exports[`Tabs > renders with orientation correctly 1`] = `
     <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><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">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">
-    <!---->
-  </div>
-  <div id="radix-vue-tabs-13-content-2" role="tabpanel" data-state="inactive" data-orientation="vertical" aria-labelledby="radix-vue-tabs-13-trigger-2" hidden="" tabindex="0" class="focus:outline-none">
-    <!---->
-  </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">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-13-content-2" role="tabpanel" data-state="inactive" data-orientation="vertical" aria-labelledby="radix-vue-tabs-13-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
 </div>"
 `;
 
@@ -111,11 +83,7 @@ exports[`Tabs > renders with ui correctly 1`] = `
     <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></div><button id="radix-vue-tabs-9-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-9-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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-9-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-9-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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><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 flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab3</span></button>
   </div>
   <div id="radix-vue-tabs-9-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-9-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-9-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-9-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full ring ring-gray-200 dark:ring-gray-800">
-    <!---->
-  </div>
-  <div id="radix-vue-tabs-9-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-9-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full ring ring-gray-200 dark:ring-gray-800">
-    <!---->
-  </div>
+  <div id="radix-vue-tabs-9-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-9-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-9-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-9-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>"
 `;