@brumaombra/ui-vintage 0.9.0 → 0.9.2

package/src/components/ui/stepper/Stepper.vue

@@ -8,10 +8,10 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<StepperRootProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>(), {
-    orientation: 'horizontal',
-    linear: true,
+	orientation: 'horizontal',
+	linear: true,
 });
 
 // Emits
@@ -24,7 +24,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <StepperRoot v-slot="slotProps" data-slot="stepper" :aria-label="t('uiVintage.stepper.label')" v-bind="forwarded" :class="cn('flex gap-2 data-[orientation=vertical]:flex-col', props.class)">
-        <slot v-bind="slotProps" />
-    </StepperRoot>
+	<StepperRoot v-slot="slotProps" data-slot="stepper" :aria-label="t('uiVintage.stepper.label')" v-bind="forwarded" :class="cn('flex gap-2 data-[orientation=vertical]:flex-col', props.class)">
+		<slot v-bind="slotProps" />
+	</StepperRoot>
 </template>

package/src/components/ui/stepper/StepperDescription.vue

@@ -7,16 +7,16 @@ import { cn } from '../../../lib/utils';
 
 // Props (rendered as inline text by default: the stepper trigger is a button, which can't hold headings or paragraphs)
 const props = withDefaults(defineProps<StepperDescriptionProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>(), {
-    as: 'span'
+	as: 'span'
 });
 
 const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <StepperDescription data-slot="stepper-description" v-bind="delegatedProps" :class="cn('text-xs text-muted-foreground', props.class)">
-        <slot />
-    </StepperDescription>
+	<StepperDescription data-slot="stepper-description" v-bind="delegatedProps" :class="cn('text-xs text-muted-foreground', props.class)">
+		<slot />
+	</StepperDescription>
 </template>

package/src/components/ui/stepper/StepperIndicator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { StepperIndicatorProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
-import { Tick02Icon } from '@hugeicons/core-free-icons';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { reactiveOmit } from '@vueuse/core';
 import { injectStepperItemContext, StepperIndicator } from 'reka-ui';
@@ -10,7 +10,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<StepperIndicatorProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -21,21 +21,21 @@ const state = computed(() => itemContext.state.value);
 </script>
 
 <template>
-    <StepperIndicator v-slot="{ step }" data-slot="stepper-indicator" :data-state="state" v-bind="delegatedProps" :class="cn(
-        'relative inline-flex size-9 shrink-0 items-center justify-center rounded border border-border bg-card text-xs font-semibold text-muted-foreground tabular-nums',
-        '[transition:color_150ms,background-color_220ms,border-color_220ms,box-shadow_380ms_var(--ease-spring),transform_380ms_var(--ease-spring)]',
-        'group-hover/stepper-trigger:border-border-strong group-active/stepper-trigger:scale-95 group-active/stepper-trigger:duration-75',
-        'data-[state=active]:border-primary data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:group-hover/stepper-trigger:border-primary',
-        'data-[state=completed]:border-primary data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground data-[state=completed]:group-hover/stepper-trigger:border-primary',
-        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-        props.class
-    )">
-        <slot :step="step" :state="state">
-            <!-- Completed check -->
-            <HugeiconsIcon v-if="state === 'completed'" :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
+	<StepperIndicator v-slot="{ step }" data-slot="stepper-indicator" :data-state="state" v-bind="delegatedProps" :class="cn(
+		'relative inline-flex size-9 shrink-0 items-center justify-center rounded border border-border bg-card text-xs font-semibold text-muted-foreground tabular-nums',
+		'[transition:color_150ms,background-color_220ms,border-color_220ms,box-shadow_380ms_var(--ease-spring),transform_380ms_var(--ease-spring)]',
+		'group-hover/stepper-trigger:border-border-strong group-active/stepper-trigger:scale-95 group-active/stepper-trigger:duration-75',
+		'data-[state=active]:border-primary data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:group-hover/stepper-trigger:border-primary',
+		'data-[state=completed]:border-primary data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground data-[state=completed]:group-hover/stepper-trigger:border-primary',
+		'[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+		props.class
+	)">
+		<slot :step="step" :state="state">
+			<!-- Completed check -->
+			<HugeiconsIcon v-if="state === 'completed'" :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
 
-            <!-- Step number -->
-            <span v-else>{{ step }}</span>
-        </slot>
-    </StepperIndicator>
+			<!-- Step number -->
+			<span v-else>{{ step }}</span>
+		</slot>
+	</StepperIndicator>
 </template>

package/src/components/ui/stepper/StepperItem.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<StepperItemProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <StepperItem v-slot="slotProps" data-slot="stepper-item" v-bind="forwardedProps" :class="cn('group/stepper-item relative flex items-center gap-2 data-disabled:pointer-events-none data-disabled:opacity-50', props.class)">
-        <slot v-bind="slotProps" />
-    </StepperItem>
+	<StepperItem v-slot="slotProps" data-slot="stepper-item" v-bind="forwardedProps" :class="cn('group/stepper-item relative flex items-center gap-2 data-disabled:pointer-events-none data-disabled:opacity-50', props.class)">
+		<slot v-bind="slotProps" />
+	</StepperItem>
 </template>

package/src/components/ui/stepper/StepperSeparator.vue

@@ -8,7 +8,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<StepperSeparatorProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -21,14 +21,14 @@ const isCompleted = computed(() => itemContext.state.value === 'completed');
 
 // Fill grows along the track from its start
 const fillClass = computed(() => {
-    if (isVertical.value) return cn('origin-top', isCompleted.value ? 'scale-y-100' : 'scale-y-0');
-    return cn('origin-left rtl:origin-right', isCompleted.value ? 'scale-x-100' : 'scale-x-0');
+	if (isVertical.value) return cn('origin-top', isCompleted.value ? 'scale-y-100' : 'scale-y-0');
+	return cn('origin-left rtl:origin-right', isCompleted.value ? 'scale-x-100' : 'scale-x-0');
 });
 </script>
 
 <template>
-    <StepperSeparator data-slot="stepper-separator" v-bind="delegatedProps" :class="cn('relative shrink-0 overflow-hidden rounded-full bg-border', isVertical ? 'w-0.5' : 'h-0.5', props.class)">
-        <!-- Progress fill -->
-        <span aria-hidden="true" :class="cn('absolute inset-0 rounded-full bg-primary transition-transform duration-500 ease-out-expo', fillClass)" />
-    </StepperSeparator>
+	<StepperSeparator data-slot="stepper-separator" v-bind="delegatedProps" :class="cn('relative shrink-0 overflow-hidden rounded-full bg-border', isVertical ? 'w-0.5' : 'h-0.5', props.class)">
+		<!-- Progress fill -->
+		<span aria-hidden="true" :class="cn('absolute inset-0 rounded-full bg-primary transition-transform duration-500 ease-out-expo', fillClass)" />
+	</StepperSeparator>
 </template>

package/src/components/ui/stepper/StepperTitle.vue

@@ -7,16 +7,16 @@ import { cn } from '../../../lib/utils';
 
 // Props (rendered as inline text by default: the stepper trigger is a button, which can't hold headings or paragraphs)
 const props = withDefaults(defineProps<StepperTitleProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>(), {
-    as: 'span'
+	as: 'span'
 });
 
 const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <StepperTitle data-slot="stepper-title" v-bind="delegatedProps" :class="cn('text-xs font-semibold text-foreground transition-colors duration-150 group-data-[state=inactive]/stepper-item:text-muted-foreground sm:text-sm', props.class)">
-        <slot />
-    </StepperTitle>
+	<StepperTitle data-slot="stepper-title" v-bind="delegatedProps" :class="cn('text-xs font-semibold text-foreground transition-colors duration-150 group-data-[state=inactive]/stepper-item:text-muted-foreground sm:text-sm', props.class)">
+		<slot />
+	</StepperTitle>
 </template>

package/src/components/ui/stepper/StepperTrigger.vue

@@ -7,14 +7,14 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<StepperTriggerProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <StepperTrigger data-slot="stepper-trigger" v-bind="delegatedProps" :class="cn('group/stepper-trigger flex cursor-pointer items-center gap-3 rounded p-1 text-left outline-none transition-colors duration-150 focus-visible:ring-[3px] focus-visible:ring-ring/45 data-disabled:cursor-not-allowed', props.class)">
-        <slot />
-    </StepperTrigger>
+	<StepperTrigger data-slot="stepper-trigger" v-bind="delegatedProps" :class="cn('group/stepper-trigger flex cursor-pointer items-center gap-3 rounded p-1 text-left outline-none transition-colors duration-150 focus-visible:ring-[3px] focus-visible:ring-ring/45 data-disabled:cursor-not-allowed', props.class)">
+		<slot />
+	</StepperTrigger>
 </template>

package/src/components/ui/stepper/index.ts

@@ -11,7 +11,7 @@ export { default as StepperTrigger } from './StepperTrigger.vue';
 
 // Step definition used by SimpleStepper
 export type StepperStep = {
-    title: string;
-    description?: string;
-    icon?: HugeiconsIconDefinition;
+	title: string;
+	description?: string;
+	icon?: HugeiconsIconDefinition;
 };

package/src/components/ui/switch/Switch.vue

@@ -8,7 +8,7 @@ import { useFieldControlId } from '../field/field-context';
 
 // Props
 const props = defineProps<SwitchRootProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -22,18 +22,18 @@ const fieldControlId = useFieldControlId(() => props.id);
 </script>
 
 <template>
-    <SwitchRoot v-slot="slotProps" data-slot="switch" v-bind="forwarded" :id="fieldControlId" :class="cn(
-        'group/switch peer relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded border border-input bg-secondary shadow-elevated-sm outline-none',
-        '[transition:background-color_200ms,border-color_200ms,box-shadow_250ms] hover:border-border-strong focus-visible:ring-[3px] focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-60',
-        'data-[state=checked]:border-primary data-[state=checked]:bg-accent',
-        props.class
-    )">
-        <SwitchThumb data-slot="switch-thumb" :class="cn(
-            'pointer-events-none absolute left-1 top-1/2 flex h-4 w-4 -translate-y-1/2 items-center justify-center rounded-[0.2rem] bg-muted-foreground ring-0',
-            '[transition:translate_380ms_var(--ease-spring),width_220ms_var(--ease-spring),background-color_200ms]',
-            'group-active/switch:w-5 data-[state=checked]:translate-x-6 data-[state=checked]:bg-primary group-active/switch:data-[state=checked]:translate-x-5'
-        )">
-            <slot name="thumb" v-bind="slotProps" />
-        </SwitchThumb>
-    </SwitchRoot>
+	<SwitchRoot v-slot="slotProps" data-slot="switch" v-bind="forwarded" :id="fieldControlId" :class="cn(
+		'group/switch peer relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded border border-input bg-secondary shadow-elevated-sm outline-none',
+		'[transition:background-color_200ms,border-color_200ms,box-shadow_250ms] hover:border-border-strong focus-visible:ring-[3px] focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-60',
+		'data-[state=checked]:border-primary data-[state=checked]:bg-accent',
+		props.class
+	)">
+		<SwitchThumb data-slot="switch-thumb" :class="cn(
+			'pointer-events-none absolute left-1 top-1/2 flex h-4 w-4 -translate-y-1/2 items-center justify-center rounded-[0.2rem] bg-muted-foreground ring-0',
+			'[transition:translate_380ms_var(--ease-spring),width_220ms_var(--ease-spring),background-color_200ms]',
+			'group-active/switch:w-5 data-[state=checked]:translate-x-6 data-[state=checked]:bg-primary group-active/switch:data-[state=checked]:translate-x-5'
+		)">
+			<slot name="thumb" v-bind="slotProps" />
+		</SwitchThumb>
+	</SwitchRoot>
 </template>

package/src/components/ui/table/Table.vue

@@ -4,14 +4,14 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="table-container" class="relative w-full overflow-auto">
-        <table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
-            <slot />
-        </table>
-    </div>
+	<div data-slot="table-container" class="relative w-full overflow-auto">
+		<table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
+			<slot />
+		</table>
+	</div>
 </template>

package/src/components/ui/table/TableBody.vue

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <tbody data-slot="table-body" :class="cn('[&_tr:last-child]:border-0', props.class)">
-        <slot />
-    </tbody>
+	<tbody data-slot="table-body" :class="cn('[&_tr:last-child]:border-0', props.class)">
+		<slot />
+	</tbody>
 </template>

package/src/components/ui/table/TableCaption.vue

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <caption data-slot="table-caption" :class="cn('text-muted-foreground mt-4 text-sm', props.class)">
-        <slot />
-    </caption>
+	<caption data-slot="table-caption" :class="cn('text-muted-foreground mt-4 text-sm', props.class)">
+		<slot />
+	</caption>
 </template>

package/src/components/ui/table/TableCell.vue

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <td data-slot="table-cell" :class="cn(
-        'px-2 py-3 max-w-75 text-xs md:text-sm align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5',
-        props.class
-    )
-        ">
-        <slot />
-    </td>
+	<td data-slot="table-cell" :class="cn(
+		'px-2 py-3 max-w-75 text-xs md:text-sm align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5',
+		props.class
+	)
+		">
+		<slot />
+	</td>
 </template>

package/src/components/ui/table/TableEmpty.vue

@@ -7,25 +7,25 @@ import TableRow from './TableRow.vue';
 
 // Props
 const props = withDefaults(defineProps<{
-    class?: HTMLAttributes['class'];
-    colspan?: number;
+	class?: HTMLAttributes['class'];
+	colspan?: number;
 }>(), {
-    colspan: 1
+	colspan: 1
 });
 
 const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <TableRow>
-        <TableCell :class="cn(
-            'p-4 whitespace-nowrap align-middle text-sm text-foreground',
-            props.class
-        )
-            " v-bind="delegatedProps">
-            <div class="flex items-center justify-center py-10">
-                <slot />
-            </div>
-        </TableCell>
-    </TableRow>
+	<TableRow>
+		<TableCell :class="cn(
+			'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+			props.class
+		)
+			" v-bind="delegatedProps">
+			<div class="flex items-center justify-center py-10">
+				<slot />
+			</div>
+		</TableCell>
+	</TableRow>
 </template>

package/src/components/ui/table/TableFooter.vue

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <tfoot data-slot="table-footer" :class="cn(
-        'bg-muted/50 border-t border-border font-semibold [&>tr]:last:border-b-0',
-        props.class
-    )
-        ">
-        <slot />
-    </tfoot>
+	<tfoot data-slot="table-footer" :class="cn(
+		'bg-muted/50 border-t border-border font-semibold [&>tr]:last:border-b-0',
+		props.class
+	)
+		">
+		<slot />
+	</tfoot>
 </template>

package/src/components/ui/table/TableHead.vue

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <th data-slot="table-head" :class="cn(
-        'text-foreground h-10 px-2 max-w-75 text-left align-middle font-semibold whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5',
-        props.class
-    )
-        ">
-        <slot />
-    </th>
+	<th data-slot="table-head" :class="cn(
+		'text-foreground h-10 px-2 max-w-75 text-left align-middle font-semibold whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5',
+		props.class
+	)
+		">
+		<slot />
+	</th>
 </template>

package/src/components/ui/table/TableHeader.vue

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <thead data-slot="table-header" :class="cn('[&_tr]:border-b [&_tr]:border-border', props.class)">
-        <slot />
-    </thead>
+	<thead data-slot="table-header" :class="cn('[&_tr]:border-b [&_tr]:border-border', props.class)">
+		<slot />
+	</thead>
 </template>

package/src/components/ui/table/TableRow.vue

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <tr data-slot="table-row" :class="cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border transition-colors',
-        props.class
-    )
-        ">
-        <slot />
-    </tr>
+	<tr data-slot="table-row" :class="cn(
+		'hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border transition-colors',
+		props.class
+	)
+		">
+		<slot />
+	</tr>
 </template>

package/src/components/ui/tabs/Tabs.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<TabsRootProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -18,7 +18,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <TabsRoot v-slot="slotProps" data-slot="tabs" v-bind="forwarded" :class="cn('flex flex-col gap-2', props.class)">
-        <slot v-bind="slotProps" />
-    </TabsRoot>
+	<TabsRoot v-slot="slotProps" data-slot="tabs" v-bind="forwarded" :class="cn('flex flex-col gap-2', props.class)">
+		<slot v-bind="slotProps" />
+	</TabsRoot>
 </template>

package/src/components/ui/tabs/TabsContent.vue

@@ -7,14 +7,14 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<TabsContentProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <TabsContent data-slot="tabs-content" :class="cn('flex-1 outline-none data-[state=active]:animate-uv-fade-up', props.class)" v-bind="delegatedProps">
-        <slot />
-    </TabsContent>
+	<TabsContent data-slot="tabs-content" :class="cn('flex-1 outline-none data-[state=active]:animate-uv-fade-up', props.class)" v-bind="delegatedProps">
+		<slot />
+	</TabsContent>
 </template>

package/src/components/ui/tabs/TabsList.vue

@@ -7,26 +7,26 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<TabsListProps & {
-    class?: HTMLAttributes['class'];
-    indicatorClass?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
+	indicatorClass?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class', 'indicatorClass');
 </script>
 
 <template>
-    <TabsList data-slot="tabs-list" v-bind="delegatedProps" :class="cn(
-        'group/tabs-list relative isolate inline-flex h-auto w-fit items-center justify-center gap-1 rounded border border-border bg-card p-1 text-card-foreground shadow-elevated-sm aria-[orientation=vertical]:flex-col aria-[orientation=vertical]:items-stretch',
-        props.class
-    )">
-        <!-- Sliding active indicator -->
-        <TabsIndicator data-slot="tabs-indicator" :class="cn(
-            'absolute -z-10 rounded border border-primary/40 bg-primary/10 transition-[translate,width,height] duration-[380ms] ease-spring',
-            'group-aria-[orientation=horizontal]/tabs-list:inset-y-1 group-aria-[orientation=horizontal]/tabs-list:left-0 group-aria-[orientation=horizontal]/tabs-list:w-(--reka-tabs-indicator-size) group-aria-[orientation=horizontal]/tabs-list:translate-x-(--reka-tabs-indicator-position)',
-            'group-aria-[orientation=vertical]/tabs-list:inset-x-1 group-aria-[orientation=vertical]/tabs-list:top-0 group-aria-[orientation=vertical]/tabs-list:h-(--reka-tabs-indicator-size) group-aria-[orientation=vertical]/tabs-list:translate-y-(--reka-tabs-indicator-position)',
-            props.indicatorClass
-        )" />
+	<TabsList data-slot="tabs-list" v-bind="delegatedProps" :class="cn(
+		'group/tabs-list relative isolate inline-flex h-auto w-fit items-center justify-center gap-1 rounded border border-border bg-card p-1 text-card-foreground shadow-elevated-sm aria-[orientation=vertical]:flex-col aria-[orientation=vertical]:items-stretch',
+		props.class
+	)">
+		<!-- Sliding active indicator -->
+		<TabsIndicator data-slot="tabs-indicator" :class="cn(
+			'absolute -z-10 rounded border border-primary/40 bg-primary/10 transition-[translate,width,height] duration-[380ms] ease-spring',
+			'group-aria-[orientation=horizontal]/tabs-list:inset-y-1 group-aria-[orientation=horizontal]/tabs-list:left-0 group-aria-[orientation=horizontal]/tabs-list:w-(--reka-tabs-indicator-size) group-aria-[orientation=horizontal]/tabs-list:translate-x-(--reka-tabs-indicator-position)',
+			'group-aria-[orientation=vertical]/tabs-list:inset-x-1 group-aria-[orientation=vertical]/tabs-list:top-0 group-aria-[orientation=vertical]/tabs-list:h-(--reka-tabs-indicator-size) group-aria-[orientation=vertical]/tabs-list:translate-y-(--reka-tabs-indicator-position)',
+			props.indicatorClass
+		)" />
 
-        <slot />
-    </TabsList>
+		<slot />
+	</TabsList>
 </template>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<TabsTriggerProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -15,13 +15,13 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <TabsTrigger data-slot="tabs-trigger" :class="cn(
-        'relative inline-flex min-h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded border border-transparent bg-transparent px-4 py-2 text-sm font-semibold whitespace-nowrap text-muted-foreground outline-none select-none',
-        '[transition:color_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:text-foreground active:scale-[0.97] focus-visible:ring-[3px] focus-visible:ring-ring/45 disabled:pointer-events-none disabled:opacity-50',
-        'data-[state=active]:text-primary data-[state=inactive]:hover:bg-accent/60',
-        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-        props.class
-    )" v-bind="forwardedProps">
-        <slot />
-    </TabsTrigger>
+	<TabsTrigger data-slot="tabs-trigger" :class="cn(
+		'relative inline-flex min-h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded border border-transparent bg-transparent px-4 py-2 text-sm font-semibold whitespace-nowrap text-muted-foreground outline-none select-none',
+		'[transition:color_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:text-foreground active:scale-[0.97] focus-visible:ring-[3px] focus-visible:ring-ring/45 disabled:pointer-events-none disabled:opacity-50',
+		'data-[state=active]:text-primary data-[state=inactive]:hover:bg-accent/60',
+		'[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+		props.class
+	)" v-bind="forwardedProps">
+		<slot />
+	</TabsTrigger>
 </template>