@brumaombra/ui-vintage 0.9.0 → 0.9.2

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>

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

@@ -7,60 +7,60 @@ import { avatarShapeClasses, avatarSizeClasses, avatarTextClasses } from '.';
 
 // Props
 const props = withDefaults(defineProps<{
-    max?: number;
-    size?: AvatarSize;
-    shape?: AvatarShape;
-    class?: HTMLAttributes['class'];
+	max?: number;
+	size?: AvatarSize;
+	shape?: AvatarShape;
+	class?: HTMLAttributes['class'];
 }>(), {
-    size: 'md',
-    shape: 'circle',
+	size: 'md',
+	shape: 'circle',
 });
 
 const slots = useSlots();
 
 // Flatten slot vnodes (v-for fragments) and drop comments / whitespace text
 function flatten(nodes: VNode[]): VNode[] {
-    const result: VNode[] = [];
-    for (const node of nodes) {
-        if (node.type === Comment) continue;
-        if (node.type === Text && typeof node.children === 'string' && !node.children.trim()) continue;
-        if (node.type === Fragment && Array.isArray(node.children)) {
-            result.push(...flatten(node.children as VNode[]));
-            continue;
-        }
-        result.push(node);
-    }
-    return result;
+	const result: VNode[] = [];
+	for (const node of nodes) {
+		if (node.type === Comment) continue;
+		if (node.type === Text && typeof node.children === 'string' && !node.children.trim()) continue;
+		if (node.type === Fragment && Array.isArray(node.children)) {
+			result.push(...flatten(node.children as VNode[]));
+			continue;
+		}
+		result.push(node);
+	}
+	return result;
 }
 
 // Children are read at render time so slot changes are always reflected
 function getChildren() {
-    return flatten(slots.default?.() ?? []);
+	return flatten(slots.default?.() ?? []);
 }
 
 // Overlap per size, kept clear of the initials so stacked fallbacks stay readable
 const overlapClasses: Record<AvatarSize, string> = {
-    xs: '-space-x-1',
-    sm: '-space-x-1.5',
-    md: '-space-x-2',
-    lg: '-space-x-2.5',
-    xl: '-space-x-3'
+	xs: '-space-x-1',
+	sm: '-space-x-1.5',
+	md: '-space-x-2',
+	lg: '-space-x-2.5',
+	xl: '-space-x-3'
 };
 
 // Whether a max limit applies
 function hasMax() {
-    return props.max !== undefined && props.max >= 0;
+	return props.max !== undefined && props.max >= 0;
 }
 
 // Avatars that fit within max
 function getVisible() {
-    const children = getChildren();
-    return hasMax() ? children.slice(0, props.max) : children;
+	const children = getChildren();
+	return hasMax() ? children.slice(0, props.max) : children;
 }
 
 // Number of avatars hidden behind the +N bubble
 function getOverflow() {
-    return hasMax() ? Math.max(0, getChildren().length - (props.max ?? 0)) : 0;
+	return hasMax() ? Math.max(0, getChildren().length - (props.max ?? 0)) : 0;
 }
 
 // Renders a vnode as-is
@@ -68,18 +68,18 @@ const VNodeRenderer = (renderProps: { node: VNode }) => renderProps.node;
 </script>
 
 <template>
-    <div data-slot="avatar-group" :class="cn(
-        'flex items-center',
-        overlapClasses[props.size],
-        '*:ring-2 *:ring-background',
-        props.class
-    )">
-        <!-- Visible avatars -->
-        <VNodeRenderer v-for="(node, index) in getVisible()" :key="node.key ?? index" :node="node" />
+	<div data-slot="avatar-group" :class="cn(
+		'flex items-center',
+		overlapClasses[props.size],
+		'*:ring-2 *:ring-background',
+		props.class
+	)">
+		<!-- Visible avatars -->
+		<VNodeRenderer v-for="(node, index) in getVisible()" :key="node.key ?? index" :node="node" />
 
-        <!-- Overflow bubble -->
-        <span v-if="getOverflow() > 0" data-slot="avatar-group-overflow" :class="cn('relative inline-flex shrink-0 select-none items-center justify-center bg-surface font-semibold text-muted-foreground', avatarSizeClasses[props.size], avatarShapeClasses[props.shape], avatarTextClasses[props.size])">
-            +{{ getOverflow() }}
-        </span>
-    </div>
+		<!-- Overflow bubble -->
+		<span v-if="getOverflow() > 0" data-slot="avatar-group-overflow" :class="cn('relative inline-flex shrink-0 select-none items-center justify-center bg-surface font-semibold text-muted-foreground', avatarSizeClasses[props.size], avatarShapeClasses[props.shape], avatarTextClasses[props.size])">
+			+{{ getOverflow() }}
+		</span>
+	</div>
 </template>

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

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<AvatarImageProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -18,6 +18,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <!-- Reka reveals the image only once loaded, which plays the zoom-in entrance -->
-    <AvatarImage data-slot="avatar-image" v-bind="forwarded" :class="cn('aspect-square size-full object-cover animate-[uv-float-in_420ms_var(--ease-out-expo)_both]', props.class)" />
+	<!-- Reka reveals the image only once loaded, which plays the zoom-in entrance -->
+	<AvatarImage data-slot="avatar-image" v-bind="forwarded" :class="cn('aspect-square size-full object-cover animate-[uv-float-in_420ms_var(--ease-out-expo)_both]', props.class)" />
 </template>

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

@@ -11,26 +11,26 @@ export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
 
 // Box size per avatar size (24/32/40/48/64px)
 export const avatarSizeClasses: Record<AvatarSize, string> = {
-    xs: 'size-6',
-    sm: 'size-8',
-    md: 'size-10',
-    lg: 'size-12',
-    xl: 'size-16',
+	xs: 'size-6',
+	sm: 'size-8',
+	md: 'size-10',
+	lg: 'size-12',
+	xl: 'size-16',
 };
 
 // Initials text size per avatar size
 export const avatarTextClasses: Record<AvatarSize, string> = {
-    xs: 'text-[10px]',
-    sm: 'text-xs',
-    md: 'text-sm',
-    lg: 'text-base',
-    xl: 'text-lg',
+	xs: 'text-[10px]',
+	sm: 'text-xs',
+	md: 'text-sm',
+	lg: 'text-base',
+	xl: 'text-lg',
 };
 
 // Corner radius per avatar shape
 export const avatarShapeClasses: Record<AvatarShape, string> = {
-    circle: 'rounded-full',
-    square: 'rounded',
+	circle: 'rounded-full',
+	square: 'rounded',
 };
 
 // Context shared by an avatar with its image and fallback
@@ -38,10 +38,10 @@ export const avatarContextKey: InjectionKey<{ size: Ref<AvatarSize>; shape: Ref<
 
 // Compute up to 2 initials from a full name
 export function getInitials(name: string | null | undefined): string {
-    const words = (name ?? '').trim().split(/\s+/).filter(Boolean);
-    if (words.length === 0) return '';
+	const words = (name ?? '').trim().split(/\s+/).filter(Boolean);
+	if (words.length === 0) return '';
 
-    // Single word: first two characters, otherwise first letter of the first and last word
-    if (words.length === 1) return Array.from(words[0]!).slice(0, 2).join('').toUpperCase();
-    return (Array.from(words[0]!)[0]! + Array.from(words[words.length - 1]!)[0]!).toUpperCase();
+	// Single word: first two characters, otherwise first letter of the first and last word
+	if (words.length === 1) return Array.from(words[0]!).slice(0, 2).join('').toUpperCase();
+	return (Array.from(words[0]!)[0]! + Array.from(words[words.length - 1]!)[0]!).toUpperCase();
 }

package/src/components/ui/badge/Badge.vue

@@ -7,30 +7,30 @@ import type { HugeiconsIconDefinition } from '../../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    text: string;
-    icon?: HugeiconsIconDefinition | null;
-    color?: ToneColor;
-    dot?: boolean;
-    pulse?: boolean;
-    class?: HTMLAttributes['class'];
+	text: string;
+	icon?: HugeiconsIconDefinition | null;
+	color?: ToneColor;
+	dot?: boolean;
+	pulse?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    icon: null,
-    color: 'gray',
-    dot: false,
-    pulse: false
+	icon: null,
+	color: 'gray',
+	dot: false,
+	pulse: false
 });
 </script>
 
 <template>
-    <span data-slot="badge" :class="cn('inline-flex w-fit items-center justify-center gap-1.5 whitespace-nowrap rounded border px-2 py-0.5 text-xs font-semibold transition-colors duration-150', getSurfaceToneClasses(props.color), props.class)">
-        <!-- Status dot -->
-        <span v-if="props.dot || props.pulse" class="relative flex size-1.5 shrink-0">
-            <span v-if="props.pulse" class="absolute inset-0 animate-uv-ping-soft rounded-full bg-current" />
-            <span class="relative size-1.5 rounded-full bg-current" />
-        </span>
+	<span data-slot="badge" :class="cn('inline-flex w-fit items-center justify-center gap-1.5 whitespace-nowrap rounded border px-2 py-0.5 text-xs font-semibold transition-colors duration-150', getSurfaceToneClasses(props.color), props.class)">
+		<!-- Status dot -->
+		<span v-if="props.dot || props.pulse" class="relative flex size-1.5 shrink-0">
+			<span v-if="props.pulse" class="absolute inset-0 animate-uv-ping-soft rounded-full bg-current" />
+			<span class="relative size-1.5 rounded-full bg-current" />
+		</span>
 
-        <!-- Icon -->
-        <HugeiconsIcon v-if="props.icon" :icon="props.icon" class="size-3.5 shrink-0" :stroke-width="1.8" />
-        {{ props.text }}
-    </span>
+		<!-- Icon -->
+		<HugeiconsIcon v-if="props.icon" :icon="props.icon" class="size-3.5 shrink-0" :stroke-width="1.8" />
+		{{ props.text }}
+	</span>
 </template>

package/src/components/ui/breadcrumb/Breadcrumb.vue

@@ -4,14 +4,14 @@ import { useI18n } from 'vue-i18n';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const { t } = useI18n();
 </script>
 
 <template>
-    <nav :aria-label="t('uiVintage.common.breadcrumb')" data-slot="breadcrumb" :class="props.class">
-        <slot />
-    </nav>
+	<nav :aria-label="t('uiVintage.common.breadcrumb')" data-slot="breadcrumb" :class="props.class">
+		<slot />
+	</nav>
 </template>

package/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { MoreHorizontalIcon } from '@hugeicons/core-free-icons';
+import MoreHorizontalIcon from '@hugeicons/core-free-icons/MoreHorizontalIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const { t } = useI18n();
 </script>
 
 <template>
-    <span data-slot="breadcrumb-ellipsis" role="presentation" :class="cn('flex size-6 items-center justify-center rounded-sm transition-colors duration-150 hover:bg-accent hover:text-primary', props.class)">
-        <!-- Default slot content -->
-        <slot>
-            <HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" aria-hidden="true" />
-        </slot>
+	<span data-slot="breadcrumb-ellipsis" role="presentation" :class="cn('flex size-6 items-center justify-center rounded-sm transition-colors duration-150 hover:bg-accent hover:text-primary', props.class)">
+		<!-- Default slot content -->
+		<slot>
+			<HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" aria-hidden="true" />
+		</slot>
 
-        <!-- Screen reader text for accessibility -->
-        <span class="sr-only">{{ t('uiVintage.common.more') }}</span>
-    </span>
+		<!-- Screen reader text for accessibility -->
+		<span class="sr-only">{{ t('uiVintage.common.more') }}</span>
+	</span>
 </template>

package/src/components/ui/breadcrumb/BreadcrumbItem.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="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
-        <slot />
-    </li>
+	<li data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
+		<slot />
+	</li>
 </template>

package/src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -6,12 +6,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
-    as: 'a'
+	as: 'a'
 });
 </script>
 
 <template>
-    <Primitive data-slot="breadcrumb-link" :as="as" :as-child="asChild" :class="cn('rounded-sm bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground outline-none transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary focus-visible:ring-[3px] focus-visible:ring-ring/45', props.class)">
-        <slot />
-    </Primitive>
+	<Primitive data-slot="breadcrumb-link" :as="as" :as-child="asChild" :class="cn('rounded-sm bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground outline-none transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary focus-visible:ring-[3px] focus-visible:ring-ring/45', props.class)">
+		<slot />
+	</Primitive>
 </template>

package/src/components/ui/breadcrumb/BreadcrumbList.vue

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <ol data-slot="breadcrumb-list" :class="cn('flex w-fit max-w-full flex-wrap items-center gap-1.5 rounded border border-border bg-card px-3 py-1.5 text-xs wrap-break-word text-muted-foreground shadow-elevated-sm sm:gap-2 sm:text-sm', props.class)">
-        <slot />
-    </ol>
+	<ol data-slot="breadcrumb-list" :class="cn('flex w-fit max-w-full flex-wrap items-center gap-1.5 rounded border border-border bg-card px-3 py-1.5 text-xs wrap-break-word text-muted-foreground shadow-elevated-sm sm:gap-2 sm:text-sm', props.class)">
+		<slot />
+	</ol>
 </template>

package/src/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" :class="cn('min-w-0 font-semibold text-foreground', props.class)">
-        <slot />
-    </span>
+	<span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" :class="cn('min-w-0 font-semibold text-foreground', props.class)">
+		<slot />
+	</span>
 </template>

package/src/components/ui/breadcrumb/BreadcrumbSeparator.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="breadcrumb-separator" role="presentation" aria-hidden="true" :class="cn('font-semibold text-primary/50 select-none [&>svg]:size-3.5', props.class)">
-        <slot>/</slot>
-    </li>
+	<li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" :class="cn('font-semibold text-primary/50 select-none [&>svg]:size-3.5', props.class)">
+		<slot>/</slot>
+	</li>
 </template>

package/src/components/ui/busy/Busy.vue

@@ -6,12 +6,12 @@ import { Spinner } from '../spinner';
 
 // Props
 const props = withDefaults(defineProps<{
-    show?: boolean;
-    label?: string;
-    class?: HTMLAttributes['class'];
-    overlayClass?: HTMLAttributes['class'];
+	show?: boolean;
+	label?: string;
+	class?: HTMLAttributes['class'];
+	overlayClass?: HTMLAttributes['class'];
 }>(), {
-    show: false
+	show: false
 });
 
 const message = useUiVintageMessage();
@@ -19,57 +19,57 @@ const resolvedLabel = computed(() => props.label || message('uiVintage.common.lo
 </script>
 
 <template>
-    <Transition name="uv-busy">
-        <div v-if="props.show" data-slot="busy-overlay" :class="cn(
-            'fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[3px] dark:bg-black/60',
-            props.overlayClass,
-        )">
-            <div data-slot="busy-content" role="status" aria-live="polite" aria-busy="true" :class="cn(
-                'uv-busy-card bg-card text-card-foreground flex w-72 flex-col items-center justify-center gap-4 rounded border border-border px-8 py-7 text-center shadow-elevated-xl',
-                props.class,
-            )">
-                <slot>
-                    <!-- Spinner (decorative: the container already announces the label) -->
-                    <Spinner data-slot="busy-spinner" size="xl" aria-hidden="true" class="text-primary" />
+	<Transition name="uv-busy">
+		<div v-if="props.show" data-slot="busy-overlay" :class="cn(
+			'fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[3px] dark:bg-black/60',
+			props.overlayClass,
+		)">
+			<div data-slot="busy-content" role="status" aria-live="polite" aria-busy="true" :class="cn(
+				'uv-busy-card bg-card text-card-foreground flex w-72 flex-col items-center justify-center gap-4 rounded border border-border px-8 py-7 text-center shadow-elevated-xl',
+				props.class,
+			)">
+				<slot>
+					<!-- Spinner (decorative: the container already announces the label) -->
+					<Spinner data-slot="busy-spinner" size="xl" aria-hidden="true" class="text-primary" />
 
-                    <!-- Label -->
-                    <span v-if="resolvedLabel" data-slot="busy-label" class="text-xs font-semibold text-foreground sm:text-sm">
-                        {{ resolvedLabel }}
-                    </span>
-                </slot>
-            </div>
-        </div>
-    </Transition>
+					<!-- Label -->
+					<span v-if="resolvedLabel" data-slot="busy-label" class="text-xs font-semibold text-foreground sm:text-sm">
+						{{ resolvedLabel }}
+					</span>
+				</slot>
+			</div>
+		</div>
+	</Transition>
 </template>
 
 <style scoped>
 .uv-busy-enter-active {
-    transition: opacity 0.25s var(--ease-out-expo);
+	transition: opacity 0.25s var(--ease-out-expo);
 }
 
 .uv-busy-leave-active {
-    transition: opacity 0.18s var(--ease-snappy);
+	transition: opacity 0.18s var(--ease-snappy);
 }
 
 .uv-busy-enter-from,
 .uv-busy-leave-to {
-    opacity: 0;
+	opacity: 0;
 }
 
 .uv-busy-enter-active .uv-busy-card {
-    transition: transform 0.45s var(--ease-spring), filter 0.3s var(--ease-out-expo);
+	transition: transform 0.45s var(--ease-spring), filter 0.3s var(--ease-out-expo);
 }
 
 .uv-busy-leave-active .uv-busy-card {
-    transition: transform 0.18s var(--ease-snappy);
+	transition: transform 0.18s var(--ease-snappy);
 }
 
 .uv-busy-enter-from .uv-busy-card {
-    transform: translateY(10px) scale(0.92);
-    filter: blur(4px);
+	transform: translateY(10px) scale(0.92);
+	filter: blur(4px);
 }
 
 .uv-busy-leave-to .uv-busy-card {
-    transform: scale(0.96);
+	transform: scale(0.96);
 }
 </style>