@brumaombra/ui-vintage 0.9.1 → 0.9.3

package/src/components/ui/sidebar/SidebarMenuSub.vue

@@ -4,17 +4,17 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <ul data-slot="sidebar-menu-sub" data-sidebar="menu-badge" :class="cn(
-        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-        'group-data-[collapsible=icon]:hidden',
-        props.class
-    )
-        ">
-        <slot />
-    </ul>
+	<ul data-slot="sidebar-menu-sub" data-sidebar="menu-badge" :class="cn(
+		'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+		'group-data-[collapsible=icon]:hidden',
+		props.class
+	)
+		">
+		<slot />
+	</ul>
 </template>

package/src/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -6,26 +6,26 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<PrimitiveProps & {
-    size?: 'sm' | 'md';
-    isActive?: boolean;
-    class?: HTMLAttributes['class'];
+	size?: 'sm' | 'md';
+	isActive?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    as: 'a',
-    size: 'md'
+	as: 'a',
+	size: 'md'
 });
 </script>
 
 <template>
-    <Primitive data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" :as="as" :as-child="asChild" :data-size="size" :data-active="isActive" :class="cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex min-h-7 min-w-0 -translate-x-px items-center gap-2 rounded px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[compact=true]/sidebar-wrapper:min-h-6 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:px-1.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0',
-        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-        size === 'sm' && 'text-xs',
-        size === 'md' &&
-        'text-sm group-data-[compact=true]/sidebar-wrapper:text-xs',
-        'group-data-[collapsible=icon]:hidden',
-        props.class
-    )
-        ">
-        <slot />
-    </Primitive>
+	<Primitive data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" :as="as" :as-child="asChild" :data-size="size" :data-active="isActive" :class="cn(
+		'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex min-h-7 min-w-0 -translate-x-px items-center gap-2 rounded px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[compact=true]/sidebar-wrapper:min-h-6 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:px-1.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0',
+		'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+		size === 'sm' && 'text-xs',
+		size === 'md' &&
+		'text-sm group-data-[compact=true]/sidebar-wrapper:text-xs',
+		'group-data-[collapsible=icon]:hidden',
+		props.class
+	)
+		">
+		<slot />
+	</Primitive>
 </template>

package/src/components/ui/sidebar/SidebarMenuSubItem.vue

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" :class="cn('group/menu-sub-item relative', props.class)">
-        <slot />
-    </li>
+	<li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" :class="cn('group/menu-sub-item relative', props.class)">
+		<slot />
+	</li>
 </template>

package/src/components/ui/sidebar/SidebarProvider.vue

@@ -9,26 +9,26 @@ import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SID
 
 // Props
 const props = withDefaults(defineProps<{
-    defaultOpen?: boolean;
-    open?: boolean;
-    compact?: boolean;
-    class?: HTMLAttributes['class'];
+	defaultOpen?: boolean;
+	open?: boolean;
+	compact?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    defaultOpen: undefined,
-    open: undefined,
-    compact: false
+	defaultOpen: undefined,
+	open: undefined,
+	compact: false
 });
 
 // Emits
 const emits = defineEmits<{
-    'update:open': [open: boolean];
+	'update:open': [open: boolean];
 }>();
 
 // Remembered open state, read per instance on both server and client so the first render matches
 const sidebarCookie = useCookie<boolean | null>(SIDEBAR_COOKIE_NAME, {
-    default: () => null,
-    maxAge: SIDEBAR_COOKIE_MAX_AGE,
-    path: '/'
+	default: () => null,
+	maxAge: SIDEBAR_COOKIE_MAX_AGE,
+	path: '/'
 });
 
 // The mobile layout only exists in the browser: render the desktop markup until hydration is done
@@ -38,63 +38,63 @@ const isMobile = computed(() => isMounted.value && matchesMobile.value);
 const openMobile = ref(false);
 
 const open = useVModel(props, 'open', emits, {
-    defaultValue: props.defaultOpen ?? sidebarCookie.value !== false,
-    passive: (props.open === undefined) as false
+	defaultValue: props.defaultOpen ?? sidebarCookie.value !== false,
+	passive: (props.open === undefined) as false
 }) as Ref<boolean>;
 
 function setOpen(value: boolean) {
-    open.value = value; // emits('update:open', value)
+	open.value = value; // emits('update:open', value)
 
-    // Keep the sidebar state for the next visit
-    sidebarCookie.value = value;
+	// Keep the sidebar state for the next visit
+	sidebarCookie.value = value;
 }
 
 function setOpenMobile(value: boolean) {
-    openMobile.value = value;
+	openMobile.value = value;
 }
 
 // Helper to toggle the sidebar.
 function toggleSidebar() {
-    return isMobile.value
-        ? setOpenMobile(!openMobile.value)
-        : setOpen(!open.value);
+	return isMobile.value
+		? setOpenMobile(!openMobile.value)
+		: setOpen(!open.value);
 }
 
 useEventListener('keydown', (event: KeyboardEvent) => {
-    if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-    ) {
-        event.preventDefault();
-        toggleSidebar();
-    }
+	if (
+		event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+		(event.metaKey || event.ctrlKey)
+	) {
+		event.preventDefault();
+		toggleSidebar();
+	}
 });
 
 // We add a state so that we can do data-state="expanded" or "collapsed"
 const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
 
 provideSidebarContext({
-    state,
-    open,
-    setOpen,
-    isMobile,
-    openMobile,
-    setOpenMobile,
-    toggleSidebar
+	state,
+	open,
+	setOpen,
+	isMobile,
+	openMobile,
+	setOpenMobile,
+	toggleSidebar
 });
 </script>
 
 <template>
-    <TooltipProvider :delay-duration="0">
-        <div data-slot="sidebar-wrapper" :style="{
-            '--sidebar-width': SIDEBAR_WIDTH,
-            '--sidebar-width-icon': SIDEBAR_WIDTH_ICON
-        }" :data-compact="props.compact ? 'true' : 'false'" :class="cn(
-            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
-            props.class
-        )
-            " v-bind="$attrs">
-            <slot />
-        </div>
-    </TooltipProvider>
+	<TooltipProvider :delay-duration="0">
+		<div data-slot="sidebar-wrapper" :style="{
+			'--sidebar-width': SIDEBAR_WIDTH,
+			'--sidebar-width-icon': SIDEBAR_WIDTH_ICON
+		}" :data-compact="props.compact ? 'true' : 'false'" :class="cn(
+			'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+			props.class
+		)
+			" v-bind="$attrs">
+			<slot />
+		</div>
+	</TooltipProvider>
 </template>

package/src/components/ui/sidebar/SidebarRail.vue

@@ -6,7 +6,7 @@ import { useSidebar } from './utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const { t } = useI18n();
@@ -14,16 +14,16 @@ const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
-    <button data-sidebar="rail" data-slot="sidebar-rail" :aria-label="t('uiVintage.sidebar.toggle')" :tabindex="-1" :title="t('uiVintage.sidebar.toggle')" :class="cn(
-        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',
-        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-        props.class
-    )
-        " @click="toggleSidebar">
-        <slot />
-    </button>
+	<button data-sidebar="rail" data-slot="sidebar-rail" :aria-label="t('uiVintage.sidebar.toggle')" :tabindex="-1" :title="t('uiVintage.sidebar.toggle')" :class="cn(
+		'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',
+		'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+		'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+		'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+		'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+		'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+		props.class
+	)
+		" @click="toggleSidebar">
+		<slot />
+	</button>
 </template>

package/src/components/ui/sidebar/SidebarSeparator.vue

@@ -5,12 +5,12 @@ import { Separator } from '../separator';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <Separator data-slot="sidebar-separator" data-sidebar="separator" :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
-        <slot />
-    </Separator>
+	<Separator data-slot="sidebar-separator" data-sidebar="separator" :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
+		<slot />
+	</Separator>
 </template>

package/src/components/ui/sidebar/SidebarTrigger.vue

@@ -9,7 +9,7 @@ import { useSidebar } from './utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const { t } = useI18n();
@@ -17,8 +17,8 @@ const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
-    <Button data-sidebar="trigger" data-slot="sidebar-trigger" variant="secondary" size="icon" :class="cn(props.class)" @click="toggleSidebar">
-        <HugeiconsIcon :icon="PanelLeftIcon" />
-        <span class="sr-only">{{ t('uiVintage.sidebar.toggle') }}</span>
-    </Button>
+	<Button data-sidebar="trigger" data-slot="sidebar-trigger" variant="secondary" size="icon" :class="cn(props.class)" @click="toggleSidebar">
+		<HugeiconsIcon :icon="PanelLeftIcon" />
+		<span class="sr-only">{{ t('uiVintage.sidebar.toggle') }}</span>
+	</Button>
 </template>

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

@@ -29,40 +29,40 @@ export { default as SidebarTrigger } from './SidebarTrigger.vue';
 export { useSidebar } from './utils';
 
 export interface SidebarProps {
-    side?: 'left' | 'right';
-    variant?: 'sidebar' | 'floating' | 'inset';
-    collapsible?: 'offcanvas' | 'icon' | 'none';
-    compact?: boolean;
-    class?: HTMLAttributes['class'];
+	side?: 'left' | 'right';
+	variant?: 'sidebar' | 'floating' | 'inset';
+	collapsible?: 'offcanvas' | 'icon' | 'none';
+	compact?: boolean;
+	class?: HTMLAttributes['class'];
 }
 
 export type SidebarMenuButtonVariants = {
-    variant?: 'default' | 'outline' | null | undefined;
-    size?: 'default' | 'sm' | 'lg' | null | undefined;
+	variant?: 'default' | 'outline' | null | undefined;
+	size?: 'default' | 'sm' | 'lg' | null | undefined;
 };
 
 export const sidebarMenuButtonVariants: (
-    props?: SidebarMenuButtonVariants & ClassProp
+	props?: SidebarMenuButtonVariants & ClassProp
 ) => string = cva(
-    'peer/menu-button flex w-full items-center gap-2 rounded p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,min-height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:p-2.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0',
-    {
-        variants: {
-            variant: {
-                default:
-                    'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-                outline:
-                    'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]'
-            },
-            size: {
-                default:
-                    'min-h-8 text-sm group-data-[compact=true]/sidebar-wrapper:min-h-7 group-data-[compact=true]/sidebar-wrapper:text-xs group-data-[compact=true]/sidebar-wrapper:py-3',
-                sm: 'min-h-7 text-xs group-data-[compact=true]/sidebar-wrapper:min-h-6 group-data-[compact=true]/sidebar-wrapper:py-2.5',
-                lg: 'min-h-12 text-sm group-data-[compact=true]/sidebar-wrapper:min-h-10 group-data-[collapsible=icon]:p-0!'
-            }
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default'
-        }
-    }
+	'peer/menu-button flex w-full items-center gap-2 rounded p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,min-height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:p-2.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0',
+	{
+		variants: {
+			variant: {
+				default:
+					'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+				outline:
+					'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]'
+			},
+			size: {
+				default:
+					'min-h-8 text-sm group-data-[compact=true]/sidebar-wrapper:min-h-7 group-data-[compact=true]/sidebar-wrapper:text-xs group-data-[compact=true]/sidebar-wrapper:py-3',
+				sm: 'min-h-7 text-xs group-data-[compact=true]/sidebar-wrapper:min-h-6 group-data-[compact=true]/sidebar-wrapper:py-2.5',
+				lg: 'min-h-12 text-sm group-data-[compact=true]/sidebar-wrapper:min-h-10 group-data-[collapsible=icon]:p-0!'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	}
 );

package/src/components/ui/sidebar/utils.ts

@@ -9,11 +9,11 @@ export const SIDEBAR_WIDTH_ICON = '3rem';
 export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
 export const [useSidebar, provideSidebarContext] = createContext<{
-    state: ComputedRef<'expanded' | 'collapsed'>;
-    open: Ref<boolean>;
-    setOpen: (value: boolean) => void;
-    isMobile: Readonly<Ref<boolean>>;
-    openMobile: Ref<boolean>;
-    setOpenMobile: (value: boolean) => void;
-    toggleSidebar: () => void;
+	state: ComputedRef<'expanded' | 'collapsed'>;
+	open: Ref<boolean>;
+	setOpen: (value: boolean) => void;
+	isMobile: Readonly<Ref<boolean>>;
+	openMobile: Ref<boolean>;
+	setOpenMobile: (value: boolean) => void;
+	toggleSidebar: () => void;
 }>('Sidebar');

package/src/components/ui/skeleton/Skeleton.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="skeleton" :class="cn(
-        'relative overflow-hidden rounded border border-border bg-surface',
-        'after:absolute after:inset-0 after:animate-uv-shimmer after:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)]',
-        props.class
-    )" />
+	<div data-slot="skeleton" :class="cn(
+		'relative overflow-hidden rounded border border-border bg-surface',
+		'after:absolute after:inset-0 after:animate-uv-shimmer after:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)]',
+		props.class
+	)" />
 </template>

package/src/components/ui/slider/Slider.vue

@@ -7,8 +7,8 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<SliderRootProps & {
-    thumbLabel?: string;
-    class?: HTMLAttributes['class'];
+	thumbLabel?: string;
+	class?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -19,17 +19,17 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <SliderRoot v-slot="{ modelValue }" data-slot="slider" :class="cn(
-        'group/slider relative flex w-full cursor-pointer touch-none items-center py-2 select-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[orientation=vertical]:px-2 data-[orientation=vertical]:py-0',
-        props.class
-    )" v-bind="forwarded">
-        <!-- Track -->
-        <SliderTrack data-slot="slider-track" class="relative grow overflow-hidden rounded bg-muted data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2">
-            <!-- Filled range -->
-            <SliderRange data-slot="slider-range" class="absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
-        </SliderTrack>
+	<SliderRoot v-slot="{ modelValue }" data-slot="slider" :class="cn(
+		'group/slider relative flex w-full cursor-pointer touch-none items-center py-2 select-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[orientation=vertical]:px-2 data-[orientation=vertical]:py-0',
+		props.class
+	)" v-bind="forwarded">
+		<!-- Track -->
+		<SliderTrack data-slot="slider-track" class="relative grow overflow-hidden rounded bg-muted data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2">
+			<!-- Filled range -->
+			<SliderRange data-slot="slider-range" class="absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
+		</SliderTrack>
 
-        <!-- Thumbs -->
-        <SliderThumb v-for="(_, key) in modelValue" :key="key" data-slot="slider-thumb" :aria-label="props.thumbLabel" class="block size-5 shrink-0 cursor-grab rounded border-2 border-primary bg-card shadow-elevated-sm outline-none transition-[background-color,box-shadow] duration-150 hover:bg-[color-mix(in_oklab,var(--primary)_10%,var(--card))] focus-visible:ring-[3px] focus-visible:ring-ring/45 active:cursor-grabbing active:bg-[color-mix(in_oklab,var(--primary)_15%,var(--card))] disabled:pointer-events-none disabled:opacity-50" />
-    </SliderRoot>
+		<!-- Thumbs -->
+		<SliderThumb v-for="(_, key) in modelValue" :key="key" data-slot="slider-thumb" :aria-label="props.thumbLabel" class="block size-5 shrink-0 cursor-grab rounded border-2 border-primary bg-card shadow-elevated-sm outline-none transition-[background-color,box-shadow] duration-150 hover:bg-[color-mix(in_oklab,var(--primary)_10%,var(--card))] focus-visible:ring-[3px] focus-visible:ring-ring/45 active:cursor-grabbing active:bg-[color-mix(in_oklab,var(--primary)_15%,var(--card))] disabled:pointer-events-none disabled:opacity-50" />
+	</SliderRoot>
 </template>

package/src/components/ui/spinner/Spinner.vue

@@ -6,12 +6,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<{
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    label?: string;
-    class?: HTMLAttributes['class'];
+	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	label?: string;
+	class?: HTMLAttributes['class'];
 }>(), {
-    size: 'md',
-    label: ''
+	size: 'md',
+	label: ''
 });
 
 const message = useUiVintageMessage();
@@ -19,30 +19,30 @@ const resolvedLabel = computed(() => props.label || message('uiVintage.buttons.l
 
 // Size classes
 const sizeClasses: Record<NonNullable<typeof props.size>, string> = {
-    xs: 'size-3',
-    sm: 'size-4',
-    md: 'size-5',
-    lg: 'size-8',
-    xl: 'size-12'
+	xs: 'size-3',
+	sm: 'size-4',
+	md: 'size-5',
+	lg: 'size-8',
+	xl: 'size-12'
 };
 </script>
 
 <template>
-    <span data-slot="spinner" role="status" :aria-label="resolvedLabel" :class="cn('relative inline-flex shrink-0 text-current', sizeClasses[props.size], props.class)">
-        <svg viewBox="0 0 24 24" fill="none" class="size-full animate-[spin_0.7s_linear_infinite]" aria-hidden="true">
-            <!-- Track -->
-            <circle cx="12" cy="12" r="9.5" stroke="currentColor" stroke-width="2.5" class="opacity-20" />
+	<span data-slot="spinner" role="status" :aria-label="resolvedLabel" :class="cn('relative inline-flex shrink-0 text-current', sizeClasses[props.size], props.class)">
+		<svg viewBox="0 0 24 24" fill="none" class="size-full animate-[spin_0.7s_linear_infinite]" aria-hidden="true">
+			<!-- Track -->
+			<circle cx="12" cy="12" r="9.5" stroke="currentColor" stroke-width="2.5" class="opacity-20" />
 
-            <!-- Arc -->
-            <circle cx="12" cy="12" r="9.5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="60" class="origin-center animate-[uv-spinner-dash_1.4s_ease-in-out_infinite]" />
-        </svg>
-    </span>
+			<!-- Arc -->
+			<circle cx="12" cy="12" r="9.5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="60" class="origin-center animate-[uv-spinner-dash_1.4s_ease-in-out_infinite]" />
+		</svg>
+	</span>
 </template>
 
 <style>
 @keyframes uv-spinner-dash {
-    0% { stroke-dashoffset: 56; }
-    50% { stroke-dashoffset: 16; transform: rotate(135deg); }
-    100% { stroke-dashoffset: 56; transform: rotate(450deg); }
+	0% { stroke-dashoffset: 56; }
+	50% { stroke-dashoffset: 16; transform: rotate(135deg); }
+	100% { stroke-dashoffset: 56; transform: rotate(450deg); }
 }
 </style>

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

@@ -15,13 +15,13 @@ import StepperTrigger from './StepperTrigger.vue';
 
 // Props
 const props = withDefaults(defineProps<{
-    steps: StepperStep[];
-    orientation?: 'horizontal' | 'vertical';
-    linear?: boolean;
-    class?: HTMLAttributes['class'];
+	steps: StepperStep[];
+	orientation?: 'horizontal' | 'vertical';
+	linear?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    orientation: 'horizontal',
-    linear: true,
+	orientation: 'horizontal',
+	linear: true,
 });
 
 // Active step (1-based, v-model)
@@ -31,26 +31,26 @@ const isVertical = computed(() => props.orientation === 'vertical');
 </script>
 
 <template>
-    <Stepper v-model="modelValue" :orientation="props.orientation" :linear="props.linear" :class="cn('w-full', isVertical ? 'gap-0' : 'items-start gap-2', props.class)">
-        <StepperItem v-for="(step, index) in props.steps" :key="index" :step="index + 1" :class="isVertical ? 'items-start gap-0 pb-8 last:pb-0' : 'flex-1 flex-col items-center gap-0'">
-            <!-- Step trigger -->
-            <StepperTrigger :class="isVertical ? 'items-start gap-4' : 'flex-col gap-2 text-center'">
-                <StepperIndicator v-slot="{ step: stepNumber, state }">
-                    <!-- Custom icon until the step is completed -->
-                    <HugeiconsIcon v-if="state !== 'completed' && step.icon" :icon="step.icon" class="size-4" />
-                    <span v-else-if="state !== 'completed'">{{ stepNumber }}</span>
-                    <HugeiconsIcon v-else :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
-                </StepperIndicator>
+	<Stepper v-model="modelValue" :orientation="props.orientation" :linear="props.linear" :class="cn('w-full', isVertical ? 'gap-0' : 'items-start gap-2', props.class)">
+		<StepperItem v-for="(step, index) in props.steps" :key="index" :step="index + 1" :class="isVertical ? 'items-start gap-0 pb-8 last:pb-0' : 'flex-1 flex-col items-center gap-0'">
+			<!-- Step trigger -->
+			<StepperTrigger :class="isVertical ? 'items-start gap-4' : 'flex-col gap-2 text-center'">
+				<StepperIndicator v-slot="{ step: stepNumber, state }">
+					<!-- Custom icon until the step is completed -->
+					<HugeiconsIcon v-if="state !== 'completed' && step.icon" :icon="step.icon" class="size-4" />
+					<span v-else-if="state !== 'completed'">{{ stepNumber }}</span>
+					<HugeiconsIcon v-else :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
+				</StepperIndicator>
 
-                <!-- Step text -->
-                <div :class="cn('flex flex-col gap-0.5', isVertical ? 'pt-2' : 'items-center px-1')">
-                    <StepperTitle>{{ step.title }}</StepperTitle>
-                    <StepperDescription v-if="step.description">{{ step.description }}</StepperDescription>
-                </div>
-            </StepperTrigger>
+				<!-- Step text -->
+				<div :class="cn('flex flex-col gap-0.5', isVertical ? 'pt-2' : 'items-center px-1')">
+					<StepperTitle>{{ step.title }}</StepperTitle>
+					<StepperDescription v-if="step.description">{{ step.description }}</StepperDescription>
+				</div>
+			</StepperTrigger>
 
-            <!-- Connector to the next step -->
-            <StepperSeparator v-if="index < props.steps.length - 1" :class="isVertical ? 'absolute top-12 bottom-1 left-[21px]' : 'absolute top-[21px] right-[calc(-50%+18px)] left-[calc(50%+26px)]'" />
-        </StepperItem>
-    </Stepper>
+			<!-- Connector to the next step -->
+			<StepperSeparator v-if="index < props.steps.length - 1" :class="isVertical ? 'absolute top-12 bottom-1 left-[21px]' : 'absolute top-[21px] right-[calc(-50%+18px)] left-[calc(50%+26px)]'" />
+		</StepperItem>
+	</Stepper>
 </template>

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>