@brumaombra/ui-vintage 0.9.1 → 0.9.3

package/src/components/ui/calendar/CalendarNextButton.vue

@@ -17,19 +17,19 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CalendarNext
-        data-slot="calendar-next-button"
-        :class="
-            cn(
-                buttonVariants({ variant: 'secondary' }),
-                'size-7 min-h-10 bg-transparent p-0 text-muted-foreground hover:text-foreground',
-                props.class,
-            )
-        "
-        v-bind="forwardedProps"
-    >
-        <slot>
-            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" />
-        </slot>
-    </CalendarNext>
+	<CalendarNext
+		data-slot="calendar-next-button"
+		:class="
+			cn(
+				buttonVariants({ variant: 'secondary' }),
+				'size-7 min-h-10 bg-transparent p-0 text-muted-foreground hover:text-foreground',
+				props.class,
+			)
+		"
+		v-bind="forwardedProps"
+	>
+		<slot>
+			<HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" />
+		</slot>
+	</CalendarNext>
 </template>

package/src/components/ui/calendar/CalendarPrevButton.vue

@@ -17,19 +17,19 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CalendarPrev
-        data-slot="calendar-prev-button"
-        :class="
-            cn(
-                buttonVariants({ variant: 'secondary' }),
-                'size-7 min-h-10 bg-transparent p-0 text-muted-foreground hover:text-foreground',
-                props.class,
-            )
-        "
-        v-bind="forwardedProps"
-    >
-        <slot>
-            <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4" />
-        </slot>
-    </CalendarPrev>
+	<CalendarPrev
+		data-slot="calendar-prev-button"
+		:class="
+			cn(
+				buttonVariants({ variant: 'secondary' }),
+				'size-7 min-h-10 bg-transparent p-0 text-muted-foreground hover:text-foreground',
+				props.class,
+			)
+		"
+		v-bind="forwardedProps"
+	>
+		<slot>
+			<HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4" />
+		</slot>
+	</CalendarPrev>
 </template>

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

@@ -12,7 +12,7 @@ export { default as CalendarNextButton } from './CalendarNextButton.vue';
 export { default as CalendarPrevButton } from './CalendarPrevButton.vue';
 
 export type LayoutTypes =
-    | 'month-and-year'
-    | 'month-only'
-    | 'year-only'
-    | undefined;
+	| 'month-and-year'
+	| 'month-only'
+	| 'year-only'
+	| undefined;

package/src/components/ui/card/Card.vue

@@ -2,8 +2,8 @@
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
 import {
-    getSurfaceToneClasses,
-    type ToneColor,
+	getSurfaceToneClasses,
+	type ToneColor,
 } from '../../../lib/color-tokens';
 import { cn } from '../../../lib/utils';
 
@@ -11,32 +11,32 @@ type CardColor = 'default' | ToneColor;
 
 // Props
 const props = withDefaults(defineProps<{
-    color?: CardColor;
-    interactive?: boolean;
-    class?: HTMLAttributes['class'];
+	color?: CardColor;
+	interactive?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    interactive: false
+	interactive: false
 });
 
 // Get the appropriate classes
 const colorClasses = computed(() => {
-    // If color is not specified or is "default", use the default card styles
-    if (!props.color || props.color === 'default') {
-        return 'border border-border bg-card text-card-foreground shadow-elevated-sm';
-    }
+	// If color is not specified or is "default", use the default card styles
+	if (!props.color || props.color === 'default') {
+		return 'border border-border bg-card text-card-foreground shadow-elevated-sm';
+	}
 
-    // For other colors, use the corresponding surface tone classes
-    return getSurfaceToneClasses(props.color);
+	// For other colors, use the corresponding surface tone classes
+	return getSurfaceToneClasses(props.color);
 });
 </script>
 
 <template>
-    <div data-slot="card" :data-interactive="props.interactive ? '' : undefined" :class="cn(
-        'relative flex flex-col gap-4 sm:gap-6 rounded py-6 transition-[border-color,box-shadow,background-color,translate] duration-300 ease-out-expo',
-        colorClasses,
-        props.interactive && 'cursor-pointer hover:-translate-y-0.5 hover:shadow-elevated-md active:translate-y-0 active:duration-100',
-        props.class,
-    )">
-        <slot />
-    </div>
+	<div data-slot="card" :data-interactive="props.interactive ? '' : undefined" :class="cn(
+		'relative flex flex-col gap-4 sm:gap-6 rounded py-6 transition-[border-color,box-shadow,background-color,translate] duration-300 ease-out-expo',
+		colorClasses,
+		props.interactive && 'cursor-pointer hover:-translate-y-0.5 hover:shadow-elevated-md active:translate-y-0 active:duration-100',
+		props.class,
+	)">
+		<slot />
+	</div>
 </template>

package/src/components/ui/card/CardAction.vue

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="card-action" :class="cn(
-        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
-        props.class,
-    )
-        ">
-        <slot />
-    </div>
+	<div data-slot="card-action" :class="cn(
+		'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+		props.class,
+	)
+		">
+		<slot />
+	</div>
 </template>

package/src/components/ui/card/CardContent.vue

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="card-content" :class="cn('flex flex-col gap-4 px-6', props.class)">
-        <slot />
-    </div>
+	<div data-slot="card-content" :class="cn('flex flex-col gap-4 px-6', props.class)">
+		<slot />
+	</div>
 </template>

package/src/components/ui/card/CardDescription.vue

@@ -4,20 +4,20 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <p
-        data-slot="card-description"
-        :class="
-            cn(
-                'text-muted-foreground text-xs sm:text-sm leading-5',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </p>
+	<p
+		data-slot="card-description"
+		:class="
+			cn(
+				'text-muted-foreground text-xs sm:text-sm leading-5',
+				props.class,
+			)
+		"
+	>
+		<slot />
+	</p>
 </template>

package/src/components/ui/card/CardFooter.vue

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="card-footer" :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)">
-        <slot />
-    </div>
+	<div data-slot="card-footer" :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)">
+		<slot />
+	</div>
 </template>

package/src/components/ui/card/CardHeader.vue

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="card-header" :class="cn(
-        '@container/card-header grid auto-rows-min items-start px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 gap-2',
-        props.class,
-    )
-        ">
-        <slot />
-    </div>
+	<div data-slot="card-header" :class="cn(
+		'@container/card-header grid auto-rows-min items-start px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 gap-2',
+		props.class,
+	)
+		">
+		<slot />
+	</div>
 </template>

package/src/components/ui/card/CardText.vue

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

package/src/components/ui/card/CardTitle.vue

@@ -5,17 +5,17 @@ import type { HeadingLevel } from '../../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    class?: HTMLAttributes['class'];
-    level?: HeadingLevel;
+	class?: HTMLAttributes['class'];
+	level?: HeadingLevel;
 }>(), {
-    level: 3
+	level: 3
 });
 </script>
 
 <template>
-    <component :is="`h${props.level}`"
-        data-slot="card-title"
-        :class="cn('leading-none font-semibold text-sm sm:text-base', props.class)">
-        <slot />
-    </component>
+	<component :is="`h${props.level}`"
+		data-slot="card-title"
+		:class="cn('leading-none font-semibold text-sm sm:text-base', props.class)">
+		<slot />
+	</component>
 </template>

package/src/components/ui/checkbox/Checkbox.vue

@@ -8,7 +8,7 @@ import { useFieldControlId } from '../field/field-context';
 
 // Props
 const props = defineProps<CheckboxRootProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -22,31 +22,31 @@ const fieldControlId = useFieldControlId(() => props.id);
 </script>
 
 <template>
-    <CheckboxRoot v-slot="slotProps" data-slot="checkbox" v-bind="forwarded" :id="fieldControlId" :class="cn(
-        'group/checkbox peer relative inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-input bg-secondary text-primary-foreground shadow-elevated-sm outline-none',
-        '[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),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]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',
-        'disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100 aria-invalid:border-destructive',
-        props.class
-    )">
-        <!-- Indicator (always mounted so the mark can draw in and out) -->
-        <CheckboxIndicator force-mount data-slot="checkbox-indicator" class="pointer-events-none flex size-full items-center justify-center">
-            <slot v-bind="slotProps">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-3.5" aria-hidden="true">
-                    <!-- Check mark: draws itself via stroke-dashoffset -->
-                    <path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1" :class="cn(
-                        'opacity-0 [stroke-dasharray:1_2] [stroke-dashoffset:1] [transition:stroke-dashoffset_120ms_var(--ease-snappy),opacity_90ms_var(--ease-snappy)_30ms]',
-                        'group-data-[state=checked]/checkbox:opacity-100 group-data-[state=checked]/checkbox:[stroke-dashoffset:0] group-data-[state=checked]/checkbox:[transition:stroke-dashoffset_380ms_var(--ease-out-expo)_40ms,opacity_60ms_linear_40ms]'
-                    )" />
+	<CheckboxRoot v-slot="slotProps" data-slot="checkbox" v-bind="forwarded" :id="fieldControlId" :class="cn(
+		'group/checkbox peer relative inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-input bg-secondary text-primary-foreground shadow-elevated-sm outline-none',
+		'[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),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]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',
+		'disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100 aria-invalid:border-destructive',
+		props.class
+	)">
+		<!-- Indicator (always mounted so the mark can draw in and out) -->
+		<CheckboxIndicator force-mount data-slot="checkbox-indicator" class="pointer-events-none flex size-full items-center justify-center">
+			<slot v-bind="slotProps">
+				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-3.5" aria-hidden="true">
+					<!-- Check mark: draws itself via stroke-dashoffset -->
+					<path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1" :class="cn(
+						'opacity-0 [stroke-dasharray:1_2] [stroke-dashoffset:1] [transition:stroke-dashoffset_120ms_var(--ease-snappy),opacity_90ms_var(--ease-snappy)_30ms]',
+						'group-data-[state=checked]/checkbox:opacity-100 group-data-[state=checked]/checkbox:[stroke-dashoffset:0] group-data-[state=checked]/checkbox:[transition:stroke-dashoffset_380ms_var(--ease-out-expo)_40ms,opacity_60ms_linear_40ms]'
+					)" />
 
-                    <!-- Indeterminate dash: sweeps in from the left -->
-                    <path d="M6.5 12h11" pathLength="1" :class="cn(
-                        'opacity-0 [stroke-dasharray:1_2] [stroke-dashoffset:1] [transition:stroke-dashoffset_120ms_var(--ease-snappy),opacity_90ms_var(--ease-snappy)_30ms]',
-                        'group-data-[state=indeterminate]/checkbox:opacity-100 group-data-[state=indeterminate]/checkbox:[stroke-dashoffset:0] group-data-[state=indeterminate]/checkbox:[transition:stroke-dashoffset_320ms_var(--ease-out-expo)_40ms,opacity_60ms_linear_40ms]'
-                    )" />
-                </svg>
-            </slot>
-        </CheckboxIndicator>
-    </CheckboxRoot>
+					<!-- Indeterminate dash: sweeps in from the left -->
+					<path d="M6.5 12h11" pathLength="1" :class="cn(
+						'opacity-0 [stroke-dasharray:1_2] [stroke-dashoffset:1] [transition:stroke-dashoffset_120ms_var(--ease-snappy),opacity_90ms_var(--ease-snappy)_30ms]',
+						'group-data-[state=indeterminate]/checkbox:opacity-100 group-data-[state=indeterminate]/checkbox:[stroke-dashoffset:0] group-data-[state=indeterminate]/checkbox:[transition:stroke-dashoffset_320ms_var(--ease-out-expo)_40ms,opacity_60ms_linear_40ms]'
+					)" />
+				</svg>
+			</slot>
+		</CheckboxIndicator>
+	</CheckboxRoot>
 </template>

package/src/components/ui/collapsible/Collapsible.vue

@@ -16,7 +16,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <CollapsibleRoot v-slot="slotProps" data-slot="collapsible" v-bind="forwarded" :class="cn(props.class)">
-        <slot v-bind="slotProps" />
-    </CollapsibleRoot>
+	<CollapsibleRoot v-slot="slotProps" data-slot="collapsible" v-bind="forwarded" :class="cn(props.class)">
+		<slot v-bind="slotProps" />
+	</CollapsibleRoot>
 </template>

package/src/components/ui/collapsible/CollapsibleContent.vue

@@ -16,7 +16,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <CollapsibleContent data-slot="collapsible-content" v-bind="forwarded" :class="cn('uv-collapsible-motion', props.class)">
-        <slot />
-    </CollapsibleContent>
+	<CollapsibleContent data-slot="collapsible-content" v-bind="forwarded" :class="cn('uv-collapsible-motion', props.class)">
+		<slot />
+	</CollapsibleContent>
 </template>

package/src/components/ui/collapsible/CollapsibleTrigger.vue

@@ -13,7 +13,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CollapsibleTrigger data-slot="collapsible-trigger" v-bind="forwardedProps" :class="cn(props.class)">
-        <slot />
-    </CollapsibleTrigger>
+	<CollapsibleTrigger data-slot="collapsible-trigger" v-bind="forwardedProps" :class="cn(props.class)">
+		<slot />
+	</CollapsibleTrigger>
 </template>

package/src/components/ui/combobox/Combobox.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
-    openOnClick: true
+	openOnClick: true
 });
 
 // Emits
@@ -18,7 +18,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <ComboboxRoot v-slot="slotProps" data-slot="combobox" v-bind="forwarded" :class="cn('relative', props.class)">
-        <slot v-bind="slotProps" />
-    </ComboboxRoot>
+	<ComboboxRoot v-slot="slotProps" data-slot="combobox" v-bind="forwarded" :class="cn('relative', props.class)">
+		<slot v-bind="slotProps" />
+	</ComboboxRoot>
 </template>

package/src/components/ui/combobox/ComboboxAnchor.vue

@@ -7,8 +7,8 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<ComboboxAnchorProps & {
-    class?: HTMLAttributes['class'];
-    size?: 'sm' | 'default';
+	class?: HTMLAttributes['class'];
+	size?: 'sm' | 'default';
 }>(), { size: 'default' });
 
 const delegatedProps = reactiveOmit(props, 'class', 'size');
@@ -18,22 +18,22 @@ const rootContext = injectComboboxRootContext();
 
 // Clicking the empty area of the field focuses the search input and opens the list
 const handleClick = (event: MouseEvent) => {
-    if (rootContext.disabled.value) return;
-    const target = event.target as HTMLElement | null;
-    if (target?.closest('button, input, a')) return;
-    rootContext.inputElement.value?.focus();
-    if (!rootContext.open.value) rootContext.onOpenChange(true);
+	if (rootContext.disabled.value) return;
+	const target = event.target as HTMLElement | null;
+	if (target?.closest('button, input, a')) return;
+	rootContext.inputElement.value?.focus();
+	if (!rootContext.open.value) rootContext.onOpenChange(true);
 };
 </script>
 
 <template>
-    <ComboboxAnchor data-slot="combobox-anchor" :data-size="props.size" :data-state="rootContext.open.value ? 'open' : 'closed'" :data-disabled="rootContext.disabled.value ? '' : undefined" v-bind="forwardedProps" :class="cn(
-        'group/combobox-anchor uv-field flex w-full cursor-text items-center gap-2 rounded border border-input bg-secondary px-4 py-1.5 text-xs font-semibold text-foreground shadow-elevated-sm sm:text-sm',
-        'data-[size=default]:min-h-13 data-[size=sm]:min-h-10 data-disabled:cursor-not-allowed data-disabled:opacity-60',
-        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
-        props.class
-    )
-        " @click="handleClick">
-        <slot />
-    </ComboboxAnchor>
+	<ComboboxAnchor data-slot="combobox-anchor" :data-size="props.size" :data-state="rootContext.open.value ? 'open' : 'closed'" :data-disabled="rootContext.disabled.value ? '' : undefined" v-bind="forwardedProps" :class="cn(
+		'group/combobox-anchor uv-field flex w-full cursor-text items-center gap-2 rounded border border-input bg-secondary px-4 py-1.5 text-xs font-semibold text-foreground shadow-elevated-sm sm:text-sm',
+		'data-[size=default]:min-h-13 data-[size=sm]:min-h-10 data-disabled:cursor-not-allowed data-disabled:opacity-60',
+		'[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
+		props.class
+	)
+		" @click="handleClick">
+		<slot />
+	</ComboboxAnchor>
 </template>

package/src/components/ui/combobox/ComboboxEmpty.vue

@@ -15,7 +15,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <ComboboxEmpty data-slot="combobox-empty" v-bind="delegatedProps" :class="cn('animate-uv-fade-up px-3 py-6 text-center text-xs font-semibold text-muted-foreground sm:text-sm', props.class)">
-        <slot>{{ t('uiVintage.combobox.empty') }}</slot>
-    </ComboboxEmpty>
+	<ComboboxEmpty data-slot="combobox-empty" v-bind="delegatedProps" :class="cn('animate-uv-fade-up px-3 py-6 text-center text-xs font-semibold text-muted-foreground sm:text-sm', props.class)">
+		<slot>{{ t('uiVintage.combobox.empty') }}</slot>
+	</ComboboxEmpty>
 </template>

package/src/components/ui/combobox/ComboboxGroup.vue

@@ -7,20 +7,20 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<ComboboxGroupProps & {
-    class?: HTMLAttributes['class'];
-    heading?: string;
+	class?: HTMLAttributes['class'];
+	heading?: string;
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class', 'heading');
 </script>
 
 <template>
-    <ComboboxGroup data-slot="combobox-group" v-bind="delegatedProps" :class="cn('overflow-hidden', props.class)">
-        <!-- Heading -->
-        <ComboboxLabel v-if="props.heading || $slots.heading" data-slot="combobox-group-heading" class="px-3 pt-2 pb-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground select-none">
-            <slot name="heading">{{ props.heading }}</slot>
-        </ComboboxLabel>
+	<ComboboxGroup data-slot="combobox-group" v-bind="delegatedProps" :class="cn('overflow-hidden', props.class)">
+		<!-- Heading -->
+		<ComboboxLabel v-if="props.heading || $slots.heading" data-slot="combobox-group-heading" class="px-3 pt-2 pb-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground select-none">
+			<slot name="heading">{{ props.heading }}</slot>
+		</ComboboxLabel>
 
-        <slot />
-    </ComboboxGroup>
+		<slot />
+	</ComboboxGroup>
 </template>

package/src/components/ui/combobox/ComboboxInput.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 import { useFieldControlId } from '../field/field-context';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
@@ -24,9 +24,9 @@ const fieldControlId = useFieldControlId();
 </script>
 
 <template>
-    <ComboboxInput :id="fieldControlId" data-slot="combobox-input" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-        'h-9 min-w-16 flex-1 truncate bg-transparent font-semibold text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',
-        props.class
-    )
-        " />
+	<ComboboxInput :id="fieldControlId" data-slot="combobox-input" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+		'h-9 min-w-16 flex-1 truncate bg-transparent font-semibold text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',
+		props.class
+	)
+		" />
 </template>

package/src/components/ui/combobox/ComboboxItem.vue

@@ -18,22 +18,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <ComboboxItem data-slot="combobox-item" v-bind="forwarded" :class="cn(
-        'relative flex w-full cursor-pointer items-center gap-3 rounded py-2 pr-9 pl-3 text-left text-xs font-semibold text-muted-foreground outline-hidden select-none transition-colors duration-150 sm:text-sm',
-        'data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
-        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-        props.class
-    )
-        ">
-        <slot />
+	<ComboboxItem data-slot="combobox-item" v-bind="forwarded" :class="cn(
+		'relative flex w-full cursor-pointer items-center gap-3 rounded py-2 pr-9 pl-3 text-left text-xs font-semibold text-muted-foreground outline-hidden select-none transition-colors duration-150 sm:text-sm',
+		'data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+		'[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+		props.class
+	)
+		">
+		<slot />
 
-        <!-- Trailing check indicator (pops in when selected) -->
-        <span class="pointer-events-none absolute right-3 flex size-4 items-center justify-center text-primary">
-            <ComboboxItemIndicator>
-                <slot name="indicator-icon">
-                    <HugeiconsIcon :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
-                </slot>
-            </ComboboxItemIndicator>
-        </span>
-    </ComboboxItem>
+		<!-- Trailing check indicator (pops in when selected) -->
+		<span class="pointer-events-none absolute right-3 flex size-4 items-center justify-center text-primary">
+			<ComboboxItemIndicator>
+				<slot name="indicator-icon">
+					<HugeiconsIcon :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
+				</slot>
+			</ComboboxItemIndicator>
+		</span>
+	</ComboboxItem>
 </template>