@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/src/components/ui/pagination/PaginationPrevious.vue

@@ -12,10 +12,10 @@ import { buttonVariants } from '../button';
 
 // Props
 const props = withDefaults(defineProps<PaginationPrevProps & {
-    size?: ButtonVariants['size'];
-    class?: HTMLAttributes['class'];
+	size?: ButtonVariants['size'];
+	class?: HTMLAttributes['class'];
 }>(), {
-    size: 'icon-sm',
+	size: 'icon-sm',
 });
 
 const delegatedProps = reactiveOmit(props, 'class', 'size');
@@ -24,9 +24,9 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <PaginationPrev data-slot="pagination-previous" :aria-label="t('uiVintage.pagination.previous')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
-        <slot>
-            <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:-translate-x-0.5" aria-hidden="true" />
-        </slot>
-    </PaginationPrev>
+	<PaginationPrev data-slot="pagination-previous" :aria-label="t('uiVintage.pagination.previous')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
+		<slot>
+			<HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:-translate-x-0.5" aria-hidden="true" />
+		</slot>
+	</PaginationPrev>
 </template>

package/src/components/ui/pagination/SimplePagination.vue

@@ -11,17 +11,17 @@ import PaginationPrevious from './PaginationPrevious.vue';
 
 // Props
 const props = withDefaults(defineProps<{
-    total: number;
-    itemsPerPage?: number;
-    siblingCount?: number;
-    showEdges?: boolean;
-    disabled?: boolean;
-    class?: HTMLAttributes['class'];
+	total: number;
+	itemsPerPage?: number;
+	siblingCount?: number;
+	showEdges?: boolean;
+	disabled?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    itemsPerPage: 10,
-    siblingCount: 1,
-    showEdges: true,
-    disabled: false,
+	itemsPerPage: 10,
+	siblingCount: 1,
+	showEdges: true,
+	disabled: false,
 });
 
 // Current page (1-based, v-model:page)
@@ -29,21 +29,21 @@ const page = defineModel<number>('page', { default: 1 });
 </script>
 
 <template>
-    <Pagination v-model:page="page" :total="props.total" :items-per-page="props.itemsPerPage" :sibling-count="props.siblingCount" :show-edges="props.showEdges" :disabled="props.disabled" :class="props.class">
-        <PaginationContent v-slot="{ items }">
-            <!-- Jump to start / previous -->
-            <PaginationFirst class="hidden sm:inline-flex" />
-            <PaginationPrevious />
+	<Pagination v-model:page="page" :total="props.total" :items-per-page="props.itemsPerPage" :sibling-count="props.siblingCount" :show-edges="props.showEdges" :disabled="props.disabled" :class="props.class">
+		<PaginationContent v-slot="{ items }">
+			<!-- Jump to start / previous -->
+			<PaginationFirst class="hidden sm:inline-flex" />
+			<PaginationPrevious />
 
-            <!-- Page numbers and gaps -->
-            <template v-for="(item, index) in items" :key="item.type === 'page' ? `page-${item.value}` : `ellipsis-${index}`">
-                <PaginationItem v-if="item.type === 'page'" :value="item.value" />
-                <PaginationEllipsis v-else />
-            </template>
+			<!-- Page numbers and gaps -->
+			<template v-for="(item, index) in items" :key="item.type === 'page' ? `page-${item.value}` : `ellipsis-${index}`">
+				<PaginationItem v-if="item.type === 'page'" :value="item.value" />
+				<PaginationEllipsis v-else />
+			</template>
 
-            <!-- Next / jump to end -->
-            <PaginationNext />
-            <PaginationLast class="hidden sm:inline-flex" />
-        </PaginationContent>
-    </Pagination>
+			<!-- Next / jump to end -->
+			<PaginationNext />
+			<PaginationLast class="hidden sm:inline-flex" />
+		</PaginationContent>
+	</Pagination>
 </template>

package/src/components/ui/pin-input/PinInput.vue

@@ -10,11 +10,11 @@ import PinInputInput from './PinInputInput.vue';
 
 // Props
 const props = defineProps<PinInputRootProps<Type> & {
-    length?: number;
-    invalid?: boolean;
-    separatorAfter?: number;
-    class?: HTMLAttributes['class'];
-    inputClass?: HTMLAttributes['class'];
+	length?: number;
+	invalid?: boolean;
+	separatorAfter?: number;
+	class?: HTMLAttributes['class'];
+	inputClass?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -25,24 +25,24 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 // Share the invalid state with the cells (also when they are passed through the slot)
 provide(pinInputContextKey, {
-    invalid: computed(() => !!props.invalid)
+	invalid: computed(() => !!props.invalid)
 });
 </script>
 
 <template>
-    <PinInputRoot v-slot="slotProps" data-slot="pin-input" v-bind="forwarded" :aria-invalid="props.invalid || undefined" :class="cn(
-        'flex items-center gap-2 has-disabled:opacity-60',
-        props.invalid && 'animate-uv-shake',
-        props.class
-    )">
-        <slot v-bind="slotProps">
-            <!-- Auto-rendered cells -->
-            <template v-for="index in props.length ?? 0" :key="index">
-                <PinInputInput :index="index - 1" :class="props.inputClass" />
+	<PinInputRoot v-slot="slotProps" data-slot="pin-input" v-bind="forwarded" :aria-invalid="props.invalid || undefined" :class="cn(
+		'flex items-center gap-2 has-disabled:opacity-60',
+		props.invalid && 'animate-uv-shake',
+		props.class
+	)">
+		<slot v-bind="slotProps">
+			<!-- Auto-rendered cells -->
+			<template v-for="index in props.length ?? 0" :key="index">
+				<PinInputInput :index="index - 1" :class="props.inputClass" />
 
-                <!-- Separator -->
-                <span v-if="props.separatorAfter === index - 1 && index < (props.length ?? 0)" data-slot="pin-input-separator" aria-hidden="true" class="mx-0.5 h-0.5 w-3 shrink-0 rounded-full bg-border-strong" />
-            </template>
-        </slot>
-    </PinInputRoot>
+				<!-- Separator -->
+				<span v-if="props.separatorAfter === index - 1 && index < (props.length ?? 0)" data-slot="pin-input-separator" aria-hidden="true" class="mx-0.5 h-0.5 w-3 shrink-0 rounded-full bg-border-strong" />
+			</template>
+		</slot>
+	</PinInputRoot>
 </template>

package/src/components/ui/pin-input/PinInputInput.vue

@@ -11,7 +11,7 @@ defineOptions({ inheritAttrs: false });
 
 // Props
 const props = defineProps<PinInputInputProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -22,8 +22,8 @@ const pinInputContext = inject(pinInputContextKey, null);
 
 // Current character of this cell
 const cellValue = computed(() => {
-    const value = rootContext.currentModelValue.value[props.index];
-    return value === undefined || value === null ? '' : String(value);
+	const value = rootContext.currentModelValue.value[props.index];
+	return value === undefined || value === null ? '' : String(value);
 });
 const isFilled = computed(() => cellValue.value !== '');
 const displayValue = computed(() => (rootContext.mask.value ? '•' : cellValue.value));
@@ -31,19 +31,19 @@ const isInvalid = computed(() => pinInputContext?.invalid.value || undefined);
 </script>
 
 <template>
-    <span data-slot="pin-input-cell" class="relative inline-flex shrink-0">
-        <!-- Native input (text is transparent, the overlay below renders the character) -->
-        <PinInputInput data-slot="pin-input-input" v-bind="{ ...$attrs, ...forwardedProps }" :aria-invalid="isInvalid" :data-filled="isFilled ? '' : undefined" :class="cn(
-            'uv-field size-12 rounded border border-input bg-secondary text-center text-lg font-semibold text-transparent caret-primary shadow-elevated-sm outline-none sm:size-13',
-            'placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary/25',
-            'data-filled:border-primary/60 data-filled:bg-primary/5',
-            'disabled:cursor-not-allowed disabled:opacity-60',
-            props.class
-        )" />
+	<span data-slot="pin-input-cell" class="relative inline-flex shrink-0">
+		<!-- Native input (text is transparent, the overlay below renders the character) -->
+		<PinInputInput data-slot="pin-input-input" v-bind="{ ...$attrs, ...forwardedProps }" :aria-invalid="isInvalid" :data-filled="isFilled ? '' : undefined" :class="cn(
+			'uv-field size-12 rounded border border-input bg-secondary text-center text-lg font-semibold text-transparent caret-primary shadow-elevated-sm outline-none sm:size-13',
+			'placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary/25',
+			'data-filled:border-primary/60 data-filled:bg-primary/5',
+			'disabled:cursor-not-allowed disabled:opacity-60',
+			props.class
+		)" />
 
-        <!-- Animated character (re-keyed on every value so it pops) -->
-        <span v-if="isFilled" :key="cellValue" aria-hidden="true" class="pointer-events-none absolute inset-0 flex animate-uv-pop items-center justify-center text-lg font-semibold text-foreground">
-            {{ displayValue }}
-        </span>
-    </span>
+		<!-- Animated character (re-keyed on every value so it pops) -->
+		<span v-if="isFilled" :key="cellValue" aria-hidden="true" class="pointer-events-none absolute inset-0 flex animate-uv-pop items-center justify-center text-lg font-semibold text-foreground">
+			{{ displayValue }}
+		</span>
+	</span>
 </template>

package/src/components/ui/pin-input/context.ts

@@ -2,7 +2,7 @@ import type { ComputedRef, InjectionKey } from 'vue';
 
 // Shared state provided by PinInput to its cells
 export interface PinInputContext {
-    invalid: ComputedRef<boolean>;
+	invalid: ComputedRef<boolean>;
 }
 
 export const pinInputContextKey: InjectionKey<PinInputContext> = Symbol('uvPinInput');

package/src/components/ui/popover/Popover.vue

@@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-    <PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
-        <slot v-bind="slotProps" />
-    </PopoverRoot>
+	<PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</PopoverRoot>
 </template>

package/src/components/ui/popover/PopoverAnchor.vue

@@ -7,7 +7,7 @@ const props = defineProps<PopoverAnchorProps>();
 </script>
 
 <template>
-    <PopoverAnchor data-slot="popover-anchor" v-bind="props">
-        <slot />
-    </PopoverAnchor>
+	<PopoverAnchor data-slot="popover-anchor" v-bind="props">
+		<slot />
+	</PopoverAnchor>
 </template>

package/src/components/ui/popover/PopoverContent.vue

@@ -6,13 +6,13 @@ import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '../../../lib/utils';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(), {
-    align: 'center',
-    sideOffset: 4
+	align: 'center',
+	sideOffset: 4
 });
 
 // Emits
@@ -24,13 +24,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <PopoverPortal>
-        <PopoverContent data-slot="popover-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-            'uv-floating-motion bg-popover text-popover-foreground z-50 w-72 rounded border border-border p-4 shadow-elevated-lg outline-hidden',
-            props.class
-        )
-            ">
-            <slot />
-        </PopoverContent>
-    </PopoverPortal>
+	<PopoverPortal>
+		<PopoverContent data-slot="popover-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+			'uv-floating-motion bg-popover text-popover-foreground z-50 w-72 rounded border border-border p-4 shadow-elevated-lg outline-hidden',
+			props.class
+		)
+			">
+			<slot />
+		</PopoverContent>
+	</PopoverPortal>
 </template>

package/src/components/ui/popover/PopoverTrigger.vue

@@ -7,7 +7,7 @@ const props = defineProps<PopoverTriggerProps>();
 </script>
 
 <template>
-    <PopoverTrigger data-slot="popover-trigger" v-bind="props">
-        <slot />
-    </PopoverTrigger>
+	<PopoverTrigger data-slot="popover-trigger" v-bind="props">
+		<slot />
+	</PopoverTrigger>
 </template>

package/src/components/ui/progress/Progress.vue

@@ -8,32 +8,32 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<ProgressRootProps & {
-    indeterminate?: boolean;
-    class?: HTMLAttributes['class'];
+	indeterminate?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    modelValue: 0,
-    indeterminate: false
+	modelValue: 0,
+	indeterminate: false
 });
 
 const delegatedProps = reactiveOmit(props, 'class', 'indeterminate');
 
 // Resolve the fill percentage against the configured max
 const percentage = computed(() => {
-    const max = props.max ?? 100;
-    if (!max) return 0;
-    return Math.min(100, Math.max(0, ((props.modelValue ?? 0) / max) * 100));
+	const max = props.max ?? 100;
+	if (!max) return 0;
+	return Math.min(100, Math.max(0, ((props.modelValue ?? 0) / max) * 100));
 });
 </script>
 
 <template>
-    <ProgressRoot data-slot="progress" v-bind="delegatedProps" :model-value="props.indeterminate ? null : props.modelValue" :class="cn(
-        'relative h-2 w-full overflow-hidden rounded-sm bg-muted',
-        props.class
-    )">
-        <!-- Indeterminate bar -->
-        <div v-if="props.indeterminate" data-slot="progress-indicator" class="absolute inset-y-0 left-0 w-full origin-left animate-uv-indeterminate rounded-sm bg-primary" />
+	<ProgressRoot data-slot="progress" v-bind="delegatedProps" :model-value="props.indeterminate ? null : props.modelValue" :class="cn(
+		'relative h-2 w-full overflow-hidden rounded-sm bg-muted',
+		props.class
+	)">
+		<!-- Indeterminate bar -->
+		<div v-if="props.indeterminate" data-slot="progress-indicator" class="absolute inset-y-0 left-0 w-full origin-left animate-uv-indeterminate rounded-sm bg-primary" />
 
-        <!-- Determinate bar -->
-        <ProgressIndicator v-else data-slot="progress-indicator" class="relative h-full w-full flex-1 overflow-hidden rounded-sm bg-primary transition-transform duration-700 ease-out-expo" :style="`transform: translateX(-${100 - percentage}%);`" />
-    </ProgressRoot>
+		<!-- Determinate bar -->
+		<ProgressIndicator v-else data-slot="progress-indicator" class="relative h-full w-full flex-1 overflow-hidden rounded-sm bg-primary transition-transform duration-700 ease-out-expo" :style="`transform: translateX(-${100 - percentage}%);`" />
+	</ProgressRoot>
 </template>

package/src/components/ui/radio-group/RadioGroup.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<RadioGroupRootProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -18,10 +18,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <RadioGroupRoot v-slot="slotProps" data-slot="radio-group" v-bind="forwarded" :class="cn(
-        'grid gap-3 aria-[orientation=horizontal]:flex aria-[orientation=horizontal]:flex-wrap aria-[orientation=horizontal]:items-center aria-[orientation=horizontal]:gap-x-5',
-        props.class
-    )">
-        <slot v-bind="slotProps" />
-    </RadioGroupRoot>
+	<RadioGroupRoot v-slot="slotProps" data-slot="radio-group" v-bind="forwarded" :class="cn(
+		'grid gap-3 aria-[orientation=horizontal]:flex aria-[orientation=horizontal]:flex-wrap aria-[orientation=horizontal]:items-center aria-[orientation=horizontal]:gap-x-5',
+		props.class
+	)">
+		<slot v-bind="slotProps" />
+	</RadioGroupRoot>
 </template>

package/src/components/ui/radio-group/RadioGroupCard.vue

@@ -8,49 +8,49 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    value: AcceptableValue;
-    label: string;
-    description?: string;
-    icon?: HugeiconsIconDefinition;
-    disabled?: boolean;
-    id?: string;
-    class?: HTMLAttributes['class'];
+	value: AcceptableValue;
+	label: string;
+	description?: string;
+	icon?: HugeiconsIconDefinition;
+	disabled?: boolean;
+	id?: string;
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <RadioGroupItem :id="props.id" :value="props.value" :disabled="props.disabled" data-slot="radio-group-card" :class="cn(
-        'group/radio-card relative flex w-full cursor-pointer items-center gap-3 rounded border border-border bg-card px-4 py-3 text-left shadow-elevated-sm outline-none',
-        '[transition:scale_320ms_var(--ease-spring),border-color_150ms_var(--ease-snappy),background-color_150ms_var(--ease-snappy),box-shadow_200ms_var(--ease-snappy)]',
-        'hover:border-border-strong active:scale-[0.985] focus-visible:ring-[3px] focus-visible:ring-ring/45',
-        'data-[state=checked]:border-primary data-[state=checked]:bg-primary/5 data-[state=checked]:hover:border-primary',
-        'disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100',
-        props.class
-    )">
-        <!-- Icon -->
-        <span v-if="props.icon" class="flex size-9 shrink-0 items-center justify-center rounded border border-border bg-surface text-muted-foreground transition-colors duration-150 group-data-[state=checked]/radio-card:border-primary/40 group-data-[state=checked]/radio-card:bg-primary/10 group-data-[state=checked]/radio-card:text-primary">
-            <HugeiconsIcon :icon="props.icon" class="size-4.5" />
-        </span>
+	<RadioGroupItem :id="props.id" :value="props.value" :disabled="props.disabled" data-slot="radio-group-card" :class="cn(
+		'group/radio-card relative flex w-full cursor-pointer items-center gap-3 rounded border border-border bg-card px-4 py-3 text-left shadow-elevated-sm outline-none',
+		'[transition:scale_320ms_var(--ease-spring),border-color_150ms_var(--ease-snappy),background-color_150ms_var(--ease-snappy),box-shadow_200ms_var(--ease-snappy)]',
+		'hover:border-border-strong active:scale-[0.985] focus-visible:ring-[3px] focus-visible:ring-ring/45',
+		'data-[state=checked]:border-primary data-[state=checked]:bg-primary/5 data-[state=checked]:hover:border-primary',
+		'disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100',
+		props.class
+	)">
+		<!-- Icon -->
+		<span v-if="props.icon" class="flex size-9 shrink-0 items-center justify-center rounded border border-border bg-surface text-muted-foreground transition-colors duration-150 group-data-[state=checked]/radio-card:border-primary/40 group-data-[state=checked]/radio-card:bg-primary/10 group-data-[state=checked]/radio-card:text-primary">
+			<HugeiconsIcon :icon="props.icon" class="size-4.5" />
+		</span>
 
-        <!-- Label and description -->
-        <span class="flex min-w-0 flex-1 flex-col gap-0.5">
-            <span class="text-xs font-semibold text-foreground sm:text-sm">
-                <slot name="label">{{ props.label }}</slot>
-            </span>
-            <span v-if="props.description || $slots.description" class="text-xs text-muted-foreground">
-                <slot name="description">{{ props.description }}</slot>
-            </span>
-        </span>
+		<!-- Label and description -->
+		<span class="flex min-w-0 flex-1 flex-col gap-0.5">
+			<span class="text-xs font-semibold text-foreground sm:text-sm">
+				<slot name="label">{{ props.label }}</slot>
+			</span>
+			<span v-if="props.description || $slots.description" class="text-xs text-muted-foreground">
+				<slot name="description">{{ props.description }}</slot>
+			</span>
+		</span>
 
-        <!-- Radio circle -->
-        <span aria-hidden="true" class="flex size-5 shrink-0 items-center justify-center rounded-full border border-input bg-secondary shadow-elevated-sm transition-colors duration-150 group-data-[state=checked]/radio-card:border-primary">
-            <RadioGroupIndicator force-mount data-slot="radio-group-indicator" :class="cn(
-                'pointer-events-none flex items-center justify-center opacity-0 scale-0',
-                '[transition:scale_140ms_var(--ease-snappy),opacity_100ms_var(--ease-snappy)]',
-                'data-[state=checked]:opacity-100 data-[state=checked]:scale-100 data-[state=checked]:[transition:scale_420ms_var(--ease-bounce),opacity_80ms_linear]'
-            )">
-                <span class="size-2.5 rounded-full bg-primary" />
-            </RadioGroupIndicator>
-        </span>
-    </RadioGroupItem>
+		<!-- Radio circle -->
+		<span aria-hidden="true" class="flex size-5 shrink-0 items-center justify-center rounded-full border border-input bg-secondary shadow-elevated-sm transition-colors duration-150 group-data-[state=checked]/radio-card:border-primary">
+			<RadioGroupIndicator force-mount data-slot="radio-group-indicator" :class="cn(
+				'pointer-events-none flex items-center justify-center opacity-0 scale-0',
+				'[transition:scale_140ms_var(--ease-snappy),opacity_100ms_var(--ease-snappy)]',
+				'data-[state=checked]:opacity-100 data-[state=checked]:scale-100 data-[state=checked]:[transition:scale_420ms_var(--ease-bounce),opacity_80ms_linear]'
+			)">
+				<span class="size-2.5 rounded-full bg-primary" />
+			</RadioGroupIndicator>
+		</span>
+	</RadioGroupItem>
 </template>

package/src/components/ui/radio-group/RadioGroupItem.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<RadioGroupItemProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -18,23 +18,23 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <RadioGroupItem v-slot="slotProps" data-slot="radio-group-item" v-bind="forwarded" :class="cn(
-        'peer relative inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full border border-input bg-secondary text-primary shadow-elevated-sm outline-none',
-        '[transition:scale_320ms_var(--ease-spring),border-color_150ms_var(--ease-snappy),box-shadow_150ms_var(--ease-snappy)]',
-        'hover:border-border-strong active:scale-[0.86] focus-visible:ring-[3px] focus-visible:ring-ring/45',
-        'data-[state=checked]:border-primary data-[state=checked]:hover:border-primary',
-        'disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100 aria-invalid:border-destructive',
-        props.class
-    )">
-        <!-- Indicator (always mounted so the dot can pop in and shrink out) -->
-        <RadioGroupIndicator force-mount data-slot="radio-group-indicator" :class="cn(
-            'pointer-events-none flex items-center justify-center opacity-0 scale-0',
-            '[transition:scale_140ms_var(--ease-snappy),opacity_100ms_var(--ease-snappy)]',
-            'data-[state=checked]:opacity-100 data-[state=checked]:scale-100 data-[state=checked]:[transition:scale_420ms_var(--ease-bounce),opacity_80ms_linear]'
-        )">
-            <slot v-bind="slotProps">
-                <span class="size-2.5 rounded-full bg-primary" />
-            </slot>
-        </RadioGroupIndicator>
-    </RadioGroupItem>
+	<RadioGroupItem v-slot="slotProps" data-slot="radio-group-item" v-bind="forwarded" :class="cn(
+		'peer relative inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full border border-input bg-secondary text-primary shadow-elevated-sm outline-none',
+		'[transition:scale_320ms_var(--ease-spring),border-color_150ms_var(--ease-snappy),box-shadow_150ms_var(--ease-snappy)]',
+		'hover:border-border-strong active:scale-[0.86] focus-visible:ring-[3px] focus-visible:ring-ring/45',
+		'data-[state=checked]:border-primary data-[state=checked]:hover:border-primary',
+		'disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100 aria-invalid:border-destructive',
+		props.class
+	)">
+		<!-- Indicator (always mounted so the dot can pop in and shrink out) -->
+		<RadioGroupIndicator force-mount data-slot="radio-group-indicator" :class="cn(
+			'pointer-events-none flex items-center justify-center opacity-0 scale-0',
+			'[transition:scale_140ms_var(--ease-snappy),opacity_100ms_var(--ease-snappy)]',
+			'data-[state=checked]:opacity-100 data-[state=checked]:scale-100 data-[state=checked]:[transition:scale_420ms_var(--ease-bounce),opacity_80ms_linear]'
+		)">
+			<slot v-bind="slotProps">
+				<span class="size-2.5 rounded-full bg-primary" />
+			</slot>
+		</RadioGroupIndicator>
+	</RadioGroupItem>
 </template>

package/src/components/ui/scroll-area/ScrollArea.vue

@@ -13,18 +13,18 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <ScrollAreaRoot
-        data-slot="scroll-area"
-        v-bind="delegatedProps"
-        :class="cn('relative', props.class)"
-    >
-        <ScrollAreaViewport
-            data-slot="scroll-area-viewport"
-            class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-        >
-            <slot />
-        </ScrollAreaViewport>
-        <ScrollBar />
-        <ScrollAreaCorner />
-    </ScrollAreaRoot>
+	<ScrollAreaRoot
+		data-slot="scroll-area"
+		v-bind="delegatedProps"
+		:class="cn('relative', props.class)"
+	>
+		<ScrollAreaViewport
+			data-slot="scroll-area-viewport"
+			class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+		>
+			<slot />
+		</ScrollAreaViewport>
+		<ScrollBar />
+		<ScrollAreaCorner />
+	</ScrollAreaRoot>
 </template>

package/src/components/ui/scroll-area/ScrollBar.vue

@@ -7,22 +7,22 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
-    orientation: 'vertical'
+	orientation: 'vertical'
 });
 
 const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <ScrollAreaScrollbar data-slot="scroll-area-scrollbar" v-bind="delegatedProps" :class="cn(
-        'flex touch-none p-px transition-colors select-none',
-        orientation === 'vertical' &&
-        'h-full w-2.5 border-l border-l-transparent',
-        orientation === 'horizontal' &&
-        'h-2.5 flex-col border-t border-t-transparent',
-        props.class
-    )
-        ">
-        <ScrollAreaThumb data-slot="scroll-area-thumb" class="bg-border relative flex-1 rounded-full" />
-    </ScrollAreaScrollbar>
+	<ScrollAreaScrollbar data-slot="scroll-area-scrollbar" v-bind="delegatedProps" :class="cn(
+		'flex touch-none p-px transition-colors select-none',
+		orientation === 'vertical' &&
+		'h-full w-2.5 border-l border-l-transparent',
+		orientation === 'horizontal' &&
+		'h-2.5 flex-col border-t border-t-transparent',
+		props.class
+	)
+		">
+		<ScrollAreaThumb data-slot="scroll-area-thumb" class="bg-border relative flex-1 rounded-full" />
+	</ScrollAreaScrollbar>
 </template>

package/src/components/ui/select/Select.vue

@@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-    <SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
-        <slot v-bind="slotProps" />
-    </SelectRoot>
+	<SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</SelectRoot>
 </template>