@brumaombra/ui-vintage 0.9.1 → 0.9.3

package/src/components/ui/accordion/Accordion.vue

@@ -9,20 +9,20 @@ import type { HugeiconsIconDefinition } from '../../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    title: string;
-    initiallyExpanded?: boolean;
-    open?: boolean;
-    icon?: HugeiconsIconDefinition | null;
-    iconClass?: HTMLAttributes['class'];
-    class?: HTMLAttributes['class'];
+	title: string;
+	initiallyExpanded?: boolean;
+	open?: boolean;
+	icon?: HugeiconsIconDefinition | null;
+	iconClass?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>(), {
-    initiallyExpanded: false,
-    open: undefined
+	initiallyExpanded: false,
+	open: undefined
 });
 
 // Emits
 const emits = defineEmits<{
-    'update:open': [value: boolean];
+	'update:open': [value: boolean];
 }>();
 
 const contentId = useId();
@@ -34,40 +34,40 @@ const expanded = computed(() => props.open ?? internalExpanded.value);
 
 // Toggle expanded state
 const toggleExpanded = () => {
-    const nextValue = !expanded.value;
-    internalExpanded.value = nextValue;
-    emits('update:open', nextValue);
+	const nextValue = !expanded.value;
+	internalExpanded.value = nextValue;
+	emits('update:open', nextValue);
 };
 </script>
 
 <template>
-    <Card :data-state="expanded ? 'open' : 'closed'" :class="cn('group/accordion gap-0! overflow-hidden p-0!', props.class)">
-        <!-- Header -->
-        <button :id="triggerId" type="button" :aria-expanded="expanded" :aria-controls="contentId" class="group/trigger flex w-full cursor-pointer items-center gap-3 px-5 py-3.5 text-left outline-none focus-visible:bg-surface focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/40" @click="toggleExpanded">
-            <!-- Icon -->
-            <span v-if="props.icon" class="flex size-7 shrink-0 items-center justify-center rounded border border-primary/30 text-primary">
-                <HugeiconsIcon :icon="props.icon" :class="cn('size-3.5', props.iconClass)" />
-            </span>
+	<Card :data-state="expanded ? 'open' : 'closed'" :class="cn('group/accordion gap-0! overflow-hidden p-0!', props.class)">
+		<!-- Header -->
+		<button :id="triggerId" type="button" :aria-expanded="expanded" :aria-controls="contentId" class="group/trigger flex w-full cursor-pointer items-center gap-3 px-5 py-3.5 text-left outline-none focus-visible:bg-surface focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/40" @click="toggleExpanded">
+			<!-- Icon -->
+			<span v-if="props.icon" class="flex size-7 shrink-0 items-center justify-center rounded border border-primary/30 text-primary">
+				<HugeiconsIcon :icon="props.icon" :class="cn('size-3.5', props.iconClass)" />
+			</span>
 
-            <!-- Title -->
-            <span class="min-w-0 flex-1 text-sm font-semibold text-foreground">
-                {{ props.title }}
-            </span>
+			<!-- Title -->
+			<span class="min-w-0 flex-1 text-sm font-semibold text-foreground">
+				{{ props.title }}
+			</span>
 
-            <!-- Optional content before the toggle icon -->
-            <slot name="trailing" />
+			<!-- Optional content before the toggle icon -->
+			<slot name="trailing" />
 
-            <!-- Toggle icon -->
-            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 shrink-0 text-muted-foreground transition-[rotate,color] duration-[420ms] ease-spring group-hover/trigger:text-primary group-data-[state=open]/accordion:rotate-180 group-data-[state=open]/accordion:text-primary" />
-        </button>
+			<!-- Toggle icon -->
+			<HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 shrink-0 text-muted-foreground transition-[rotate,color] duration-[420ms] ease-spring group-hover/trigger:text-primary group-data-[state=open]/accordion:rotate-180 group-data-[state=open]/accordion:text-primary" />
+		</button>
 
-        <!-- Content -->
-        <div :id="contentId" role="region" :aria-labelledby="triggerId" :aria-hidden="!expanded" :inert="!expanded || undefined" :class="['grid transition-[grid-template-rows,opacity] duration-[380ms] ease-out-expo', expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0']">
-            <div class="overflow-hidden">
-                <div :class="['border-t border-border px-5 py-4 transition-[translate,filter] duration-[420ms] ease-spring', expanded ? 'translate-y-0 blur-none' : '-translate-y-2 blur-[2px]']">
-                    <slot />
-                </div>
-            </div>
-        </div>
-    </Card>
-</template>
+		<!-- Content -->
+		<div :id="contentId" role="region" :aria-labelledby="triggerId" :aria-hidden="!expanded" :inert="!expanded || undefined" :class="['grid transition-[grid-template-rows,opacity] duration-[380ms] ease-out-expo', expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0']">
+			<div class="overflow-hidden">
+				<div :class="['border-t border-border px-5 py-4 transition-[translate,filter] duration-[420ms] ease-spring', expanded ? 'translate-y-0 blur-none' : '-translate-y-2 blur-[2px]']">
+					<slot />
+				</div>
+			</div>
+		</div>
+	</Card>
+</template>

package/src/components/ui/alert/Alert.vue

@@ -6,13 +6,13 @@ import { alertClasses, type AlertColors } from '.';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-    color?: AlertColors['color'];
+	class?: HTMLAttributes['class'];
+	color?: AlertColors['color'];
 }>();
 </script>
 
 <template>
-    <div data-slot="alert" role="alert" :class="cn(alertClasses(), getSurfaceToneClasses(props.color ?? 'gray'), props.class)">
-        <slot />
-    </div>
+	<div data-slot="alert" role="alert" :class="cn(alertClasses(), getSurfaceToneClasses(props.color ?? 'gray'), props.class)">
+		<slot />
+	</div>
 </template>

package/src/components/ui/alert/AlertDescription.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="alert-description" :class="cn('col-start-2 grid justify-items-start gap-1 [&_p]:leading-relaxed', props.class)">
-        <slot />
-    </div>
+	<div data-slot="alert-description" :class="cn('col-start-2 grid justify-items-start gap-1 [&_p]:leading-relaxed', props.class)">
+		<slot />
+	</div>
 </template>

package/src/components/ui/alert/AlertTitle.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="alert-title" :class="cn('col-start-2 line-clamp-1 min-h-4 font-semibold tracking-tight text-current', props.class)">
-        <slot />
-    </div>
+	<div data-slot="alert-title" :class="cn('col-start-2 line-clamp-1 min-h-4 font-semibold tracking-tight text-current', props.class)">
+		<slot />
+	</div>
 </template>

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

@@ -7,9 +7,9 @@ export { default as AlertDescription } from './AlertDescription.vue';
 export { default as AlertTitle } from './AlertTitle.vue';
 
 export type AlertColors = {
-    color?: ToneColor | null | undefined;
+	color?: ToneColor | null | undefined;
 };
 
 export const alertClasses: (props?: ClassProp) => string = cva(
-    'relative w-full rounded px-3 py-2 text-xs transition-colors duration-300 ease-in-out grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 content-start items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current sm:px-4 sm:py-3 sm:text-sm',
+	'relative w-full rounded px-3 py-2 text-xs transition-colors duration-300 ease-in-out grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 content-start items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current sm:px-4 sm:py-3 sm:text-sm',
 );

package/src/components/ui/alert-dialog/AlertDialog.vue

@@ -13,7 +13,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-    <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
-        <slot v-bind="slotProps" />
-    </AlertDialogRoot>
+	<AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</AlertDialogRoot>
 </template>

package/src/components/ui/alert-dialog/AlertDialogAction.vue

@@ -14,7 +14,7 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
-        <slot />
-    </AlertDialogAction>
+	<AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+		<slot />
+	</AlertDialogAction>
 </template>

package/src/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -14,7 +14,7 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary' }), 'mt-2 sm:mt-0', props.class)">
-        <slot />
-    </AlertDialogCancel>
+	<AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary' }), 'mt-2 sm:mt-0', props.class)">
+		<slot />
+	</AlertDialogCancel>
 </template>

package/src/components/ui/alert-dialog/AlertDialogContent.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 
 // Keep attrs on the dialog content element
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
@@ -24,10 +24,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <AlertDialogPortal>
-        <AlertDialogOverlay data-slot="alert-dialog-overlay" class="uv-overlay-motion fixed inset-0 z-50 bg-black/40 backdrop-blur-[3px] dark:bg-black/60" />
-        <AlertDialogContent data-slot="alert-dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn('uv-modal-motion bg-card text-card-foreground fixed top-[50%] left-[50%] z-50 grid w-[95%] max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 overflow-hidden rounded border border-border shadow-elevated-xl sm:max-w-lg', props.class)">
-            <slot />
-        </AlertDialogContent>
-    </AlertDialogPortal>
+	<AlertDialogPortal>
+		<AlertDialogOverlay data-slot="alert-dialog-overlay" class="uv-overlay-motion fixed inset-0 z-50 bg-black/40 backdrop-blur-[3px] dark:bg-black/60" />
+		<AlertDialogContent data-slot="alert-dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn('uv-modal-motion bg-card text-card-foreground fixed top-[50%] left-[50%] z-50 grid w-[95%] max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 overflow-hidden rounded border border-border shadow-elevated-xl sm:max-w-lg', props.class)">
+			<slot />
+		</AlertDialogContent>
+	</AlertDialogPortal>
 </template>

package/src/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -13,7 +13,7 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <AlertDialogDescription data-slot="alert-dialog-description" v-bind="delegatedProps" :class="cn('text-xs leading-6 text-muted-foreground sm:text-sm', props.class)">
-        <slot />
-    </AlertDialogDescription>
+	<AlertDialogDescription data-slot="alert-dialog-description" v-bind="delegatedProps" :class="cn('text-xs leading-6 text-muted-foreground sm:text-sm', props.class)">
+		<slot />
+	</AlertDialogDescription>
 </template>

package/src/components/ui/alert-dialog/AlertDialogFooter.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="alert-dialog-footer" :class="cn('flex flex-col-reverse gap-3 border-t border-border bg-surface/60 px-5 py-4 sm:flex-row-reverse sm:px-6', props.class)">
-        <slot />
-    </div>
+	<div data-slot="alert-dialog-footer" :class="cn('flex flex-col-reverse gap-3 border-t border-border bg-surface/60 px-5 py-4 sm:flex-row-reverse sm:px-6', props.class)">
+		<slot />
+	</div>
 </template>

package/src/components/ui/alert-dialog/AlertDialogHeader.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="alert-dialog-header" :class="cn('flex flex-col gap-1.5 text-center sm:text-left', props.class)">
-        <slot />
-    </div>
+	<div data-slot="alert-dialog-header" :class="cn('flex flex-col gap-1.5 text-center sm:text-left', props.class)">
+		<slot />
+	</div>
 </template>

package/src/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -13,7 +13,7 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <AlertDialogTitle data-slot="alert-dialog-title" v-bind="delegatedProps" :class="cn('text-base font-semibold', props.class)">
-        <slot />
-    </AlertDialogTitle>
+	<AlertDialogTitle data-slot="alert-dialog-title" v-bind="delegatedProps" :class="cn('text-base font-semibold', props.class)">
+		<slot />
+	</AlertDialogTitle>
 </template>

package/src/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -7,7 +7,7 @@ const props = defineProps<AlertDialogTriggerProps>();
 </script>
 
 <template>
-    <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
-        <slot />
-    </AlertDialogTrigger>
+	<AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+		<slot />
+	</AlertDialogTrigger>
 </template>

package/src/components/ui/animated-number/AnimatedNumber.vue

@@ -5,21 +5,21 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<{
-    value: number;
-    duration?: number;
-    locale?: string;
-    formatOptions?: Intl.NumberFormatOptions;
-    prefix?: string;
-    suffix?: string;
-    animateOnMount?: boolean;
-    class?: HTMLAttributes['class'];
+	value: number;
+	duration?: number;
+	locale?: string;
+	formatOptions?: Intl.NumberFormatOptions;
+	prefix?: string;
+	suffix?: string;
+	animateOnMount?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    duration: 900,
-    locale: undefined,
-    formatOptions: undefined,
-    prefix: '',
-    suffix: '',
-    animateOnMount: true
+	duration: 900,
+	locale: undefined,
+	formatOptions: undefined,
+	prefix: '',
+	suffix: '',
+	animateOnMount: true
 });
 
 // The server always renders the final value (search engines, link previews and the first paint never see a 0), the count-up only runs for components created in the browser
@@ -32,9 +32,9 @@ let frame: number | null = null;
 
 // Format the displayed value
 const formatter = computed(() => {
-    // Default to the precision of the target so intermediate frames never show stray decimals
-    const decimals = (String(props.value).split('.')[1] ?? '').length;
-    return new Intl.NumberFormat(props.locale, props.formatOptions ?? { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+	// Default to the precision of the target so intermediate frames never show stray decimals
+	const decimals = (String(props.value).split('.')[1] ?? '').length;
+	return new Intl.NumberFormat(props.locale, props.formatOptions ?? { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
 });
 const formattedValue = computed(() => `${props.prefix}${formatter.value.format(displayValue.value)}${props.suffix}`);
 
@@ -46,32 +46,32 @@ const easeOutExpo = (progress: number) => progress === 1 ? 1 : 1 - Math.pow(2, -
 
 // Tween from the current displayed value to the target value
 const animateTo = (target: number) => {
-    if (frame !== null) cancelAnimationFrame(frame);
+	if (frame !== null) cancelAnimationFrame(frame);
 
-    // Jump straight to the value when motion is reduced or unavailable
-    const prefersReducedMotion = typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-    if (typeof requestAnimationFrame === 'undefined' || prefersReducedMotion || props.duration <= 0) {
-        displayValue.value = target;
-        return;
-    }
+	// Jump straight to the value when motion is reduced or unavailable
+	const prefersReducedMotion = typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+	if (typeof requestAnimationFrame === 'undefined' || prefersReducedMotion || props.duration <= 0) {
+		displayValue.value = target;
+		return;
+	}
 
-    const from = displayValue.value;
-    const start = performance.now();
-    direction.value = target >= from ? 'up' : 'down';
+	const from = displayValue.value;
+	const start = performance.now();
+	direction.value = target >= from ? 'up' : 'down';
 
-    // Advance one frame of the tween
-    const step = (now: number) => {
-        const progress = Math.min(1, (now - start) / props.duration);
-        displayValue.value = from + (target - from) * easeOutExpo(progress);
-        if (progress < 1) {
-            frame = requestAnimationFrame(step);
-        } else {
-            displayValue.value = target;
-            direction.value = null;
-            frame = null;
-        }
-    };
-    frame = requestAnimationFrame(step);
+	// Advance one frame of the tween
+	const step = (now: number) => {
+		const progress = Math.min(1, (now - start) / props.duration);
+		displayValue.value = from + (target - from) * easeOutExpo(progress);
+		if (progress < 1) {
+			frame = requestAnimationFrame(step);
+		} else {
+			displayValue.value = target;
+			direction.value = null;
+			frame = null;
+		}
+	};
+	frame = requestAnimationFrame(step);
 };
 
 // Re-animate whenever the value changes
@@ -79,24 +79,25 @@ watch(() => props.value, value => animateTo(value));
 
 // When hydrating server HTML (the element already exists before the first render), keep the final value the server rendered, so there is no mismatch and no flash to 0
 onBeforeMount(() => {
-    isHydrated = !!instance?.vnode.el;
-    if (isHydrated) displayValue.value = props.value;
+	isHydrated = !!instance?.vnode.el;
+	if (isHydrated) displayValue.value = props.value;
 });
 
 // Count up on mount (only for components created in the browser, server-rendered ones already show the final value)
 onMounted(() => {
-    if (props.animateOnMount && !isHydrated) animateTo(props.value);
+	if (props.animateOnMount && !isHydrated) animateTo(props.value);
 });
 
 // Stop any pending frame
 onBeforeUnmount(() => {
-    if (frame !== null) cancelAnimationFrame(frame);
+	if (frame !== null) cancelAnimationFrame(frame);
 });
 </script>
 
 <template>
-    <span data-slot="animated-number" :data-direction="direction ?? undefined" :class="cn('inline-block tabular-nums', props.class)">
-        <span aria-hidden="true">{{ formattedValue }}</span>
-        <span class="sr-only">{{ accessibleValue }}</span>
-    </span>
+	<!-- The server and the browser can format the same number differently (e.g. Node writes "1000" and Chrome "1.000" in Italian, their locale data differ), so a text mismatch is expected and the browser's formatting wins -->
+	<span data-slot="animated-number" :data-direction="direction ?? undefined" :class="cn('inline-block tabular-nums', props.class)">
+		<span aria-hidden="true" data-allow-mismatch="text">{{ formattedValue }}</span>
+		<span class="sr-only" data-allow-mismatch="text">{{ accessibleValue }}</span>
+	</span>
 </template>

package/src/components/ui/avatar/Avatar.vue

@@ -11,13 +11,13 @@ import { avatarContextKey, avatarShapeClasses, avatarSizeClasses } from '.';
 
 // Props
 const props = withDefaults(defineProps<AvatarRootProps & {
-    size?: AvatarSize;
-    shape?: AvatarShape;
-    status?: AvatarStatus;
-    class?: HTMLAttributes['class'];
+	size?: AvatarSize;
+	shape?: AvatarShape;
+	status?: AvatarStatus;
+	class?: HTMLAttributes['class'];
 }>(), {
-    size: 'md',
-    shape: 'circle',
+	size: 'md',
+	shape: 'circle',
 });
 
 const delegatedProps = reactiveOmit(props, 'class', 'size', 'shape', 'status');
@@ -29,19 +29,19 @@ provide(avatarContextKey, { size: toRef(props, 'size'), shape: toRef(props, 'sha
 
 // Status dot size scales with the avatar
 const statusSizeClasses: Record<AvatarSize, string> = {
-    xs: 'size-2',
-    sm: 'size-2.5',
-    md: 'size-3',
-    lg: 'size-3.5',
-    xl: 'size-4',
+	xs: 'size-2',
+	sm: 'size-2.5',
+	md: 'size-3',
+	lg: 'size-3.5',
+	xl: 'size-4',
 };
 
 // Status dot color
 const statusColorClasses: Record<AvatarStatus, string> = {
-    online: 'bg-success',
-    offline: 'bg-muted-foreground',
-    busy: 'bg-destructive',
-    away: 'bg-warning',
+	online: 'bg-success',
+	offline: 'bg-muted-foreground',
+	busy: 'bg-destructive',
+	away: 'bg-warning',
 };
 
 // Square avatars tuck the dot slightly outside the corner
@@ -49,18 +49,18 @@ const statusPositionClass = computed(() => props.shape === 'square' ? '-right-0.
 </script>
 
 <template>
-    <span data-slot="avatar" :data-size="props.size" :data-shape="props.shape" :data-status="props.status" :class="cn('relative inline-flex shrink-0 select-none align-middle', avatarSizeClasses[props.size], avatarShapeClasses[props.shape], props.class)">
-        <!-- Avatar surface -->
-        <AvatarRoot v-bind="delegatedProps" :class="cn('relative flex size-full items-center justify-center overflow-hidden bg-surface', avatarShapeClasses[props.shape])">
-            <slot />
-        </AvatarRoot>
+	<span data-slot="avatar" :data-size="props.size" :data-shape="props.shape" :data-status="props.status" :class="cn('relative inline-flex shrink-0 select-none align-middle', avatarSizeClasses[props.size], avatarShapeClasses[props.shape], props.class)">
+		<!-- Avatar surface -->
+		<AvatarRoot v-bind="delegatedProps" :class="cn('relative flex size-full items-center justify-center overflow-hidden bg-surface', avatarShapeClasses[props.shape])">
+			<slot />
+		</AvatarRoot>
 
-        <!-- Status dot -->
-        <span v-if="props.status" data-slot="avatar-status" :class="cn('absolute rounded-full ring-2 ring-background', statusSizeClasses[props.size], statusPositionClass)">
-            <!-- Soft halo for online presence -->
-            <span v-if="props.status === 'online'" aria-hidden="true" :class="cn('absolute inset-0 rounded-full animate-uv-ping-soft', statusColorClasses[props.status])" />
-            <span aria-hidden="true" :class="cn('relative block size-full rounded-full animate-uv-pop', statusColorClasses[props.status])" />
-            <span class="sr-only">{{ t(`uiVintage.avatar.status.${props.status}`) }}</span>
-        </span>
-    </span>
+		<!-- Status dot -->
+		<span v-if="props.status" data-slot="avatar-status" :class="cn('absolute rounded-full ring-2 ring-background', statusSizeClasses[props.size], statusPositionClass)">
+			<!-- Soft halo for online presence -->
+			<span v-if="props.status === 'online'" aria-hidden="true" :class="cn('absolute inset-0 rounded-full animate-uv-ping-soft', statusColorClasses[props.status])" />
+			<span aria-hidden="true" :class="cn('relative block size-full rounded-full animate-uv-pop', statusColorClasses[props.status])" />
+			<span class="sr-only">{{ t(`uiVintage.avatar.status.${props.status}`) }}</span>
+		</span>
+	</span>
 </template>

package/src/components/ui/avatar/AvatarFallback.vue

@@ -9,8 +9,8 @@ import { avatarContextKey, avatarShapeClasses, avatarTextClasses, getInitials }
 
 // Props
 const props = defineProps<AvatarFallbackProps & {
-    name?: string;
-    class?: HTMLAttributes['class'];
+	name?: string;
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class', 'name');
@@ -25,8 +25,8 @@ const initials = computed(() => getInitials(props.name));
 </script>
 
 <template>
-    <!-- With a name the initials act as an image of the person, so screen readers announce the name instead of the letters -->
-    <AvatarFallback data-slot="avatar-fallback" v-bind="delegatedProps" :role="props.name ? 'img' : undefined" :aria-label="props.name || undefined" :class="cn('flex size-full items-center justify-center bg-surface font-semibold uppercase text-muted-foreground', textClass, shapeClass, props.class)">
-        <slot>{{ initials }}</slot>
-    </AvatarFallback>
+	<!-- With a name the initials act as an image of the person, so screen readers announce the name instead of the letters -->
+	<AvatarFallback data-slot="avatar-fallback" v-bind="delegatedProps" :role="props.name ? 'img' : undefined" :aria-label="props.name || undefined" :class="cn('flex size-full items-center justify-center bg-surface font-semibold uppercase text-muted-foreground', textClass, shapeClass, props.class)">
+		<slot>{{ initials }}</slot>
+	</AvatarFallback>
 </template>