diff --git a/src/theme/tabs.ts b/src/theme/tabs.ts
index 11114217..51e36d53 100644
--- a/src/theme/tabs.ts
+++ b/src/theme/tabs.ts
@@ -3,8 +3,8 @@ export default (config: { colors: string[] }) => ({
root: 'flex items-center gap-2',
list: 'relative flex p-1 group',
indicator: 'absolute transition-[translate,width] duration-200',
- trigger: 'relative inline-flex items-center justify-center gap-1.5 shrink-0 flex-1 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none',
- content: 'focus:outline-none',
+ trigger: 'relative inline-flex items-center justify-center gap-1.5 shrink-0 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none',
+ content: 'focus:outline-none w-full',
leadingIcon: 'shrink-0 size-5',
leadingAvatar: 'shrink-0',
label: 'truncate'
@@ -18,6 +18,7 @@ export default (config: { colors: string[] }) => ({
variant: {
pill: {
list: 'bg-gray-50 dark:bg-gray-800 rounded-lg',
+ trigger: 'flex-1',
indicator: 'rounded-md shadow-sm'
},
link: {
@@ -33,8 +34,7 @@ export default (config: { colors: string[] }) => ({
},
vertical: {
list: 'flex-col items-center',
- indicator: 'top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]',
- content: 'flex-1'
+ indicator: 'top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]'
}
}
},
diff --git a/test/components/__snapshots__/Tabs.spec.ts.snap b/test/components/__snapshots__/Tabs.spec.ts.snap
index 93e30125..f7e04cc1 100644
--- a/test/components/__snapshots__/Tabs.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs.spec.ts.snap
@@ -3,172 +3,172 @@
exports[`Tabs > renders with class correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with color black correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with color green correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with color primary correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with color red correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with color white correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with content slot correctly 1`] = `
"
-
+
-
Content slot
-
Content slot
-
Finally, this is the content for Tab3
+
Content slot
+
Content slot
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with custom slot correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Custom slot
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Custom slot
"
`;
exports[`Tabs > renders with default slot correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with defaultValue correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with items correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with leading slot correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with modelValue correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with orientation vertical correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with trailing slot correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with ui correctly 1`] = `
"
-
+
This is the content shown for Tab1
And, this is the content for Tab2
@@ -179,29 +179,29 @@ exports[`Tabs > renders with ui correctly 1`] = `
exports[`Tabs > renders with variant link correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders with variant pill correctly 1`] = `
"
-
+
-
This is the content shown for Tab1
-
And, this is the content for Tab2
-
Finally, this is the content for Tab3
+
This is the content shown for Tab1
+
And, this is the content for Tab2
+
Finally, this is the content for Tab3
"
`;
exports[`Tabs > renders without content correctly 1`] = `
"
-
+
"