@brumaombra/ui-vintage 0.9.0 → 0.9.2

package/src/components/theme-selector/theme-transition.ts

@@ -1,98 +1,98 @@
 export type ThemeMode = 'light' | 'dark' | 'auto';
 
 export interface ThemeTransitionOrigin {
-    x: number;
-    y: number;
+	x: number;
+	y: number;
 }
 
 const THEME_STORAGE_KEY = 'theme';
 
 type DocumentWithViewTransition = Document & {
-    startViewTransition?: (callback: () => void) => {
-        ready: Promise<void>;
-        finished: Promise<void>;
-    };
+	startViewTransition?: (callback: () => void) => {
+		ready: Promise<void>;
+		finished: Promise<void>;
+	};
 };
 
 // Check if the system prefers dark mode
 const isSystemDarkPreferred = () => {
-    return typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+	return typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches;
 };
 
 // Resolve whether a theme mode ends up dark
 export const isDarkTheme = (theme: ThemeMode) => {
-    return theme === 'dark' || (theme === 'auto' && isSystemDarkPreferred());
+	return theme === 'dark' || (theme === 'auto' && isSystemDarkPreferred());
 };
 
 // Read the persisted theme mode
 export const getStoredTheme = (): ThemeMode => {
-    if (typeof localStorage === 'undefined') return 'auto';
+	if (typeof localStorage === 'undefined') return 'auto';
 
-    // Storage can throw when the browser blocks it (privacy settings, sandboxed frames)
-    try {
-        const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
-        return storedTheme === 'light' || storedTheme === 'dark' ? storedTheme : 'auto';
-    } catch {
-        return 'auto';
-    }
+	// Storage can throw when the browser blocks it (privacy settings, sandboxed frames)
+	try {
+		const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+		return storedTheme === 'light' || storedTheme === 'dark' ? storedTheme : 'auto';
+	} catch {
+		return 'auto';
+	}
 };
 
 // Apply the selected theme to the document and persist it
 export const applyTheme = (theme: ThemeMode) => {
-    if (typeof document === 'undefined') return;
-    const root = document.documentElement;
-    root.classList.remove('light', 'dark');
-    root.classList.add(isDarkTheme(theme) ? 'dark' : 'light');
+	if (typeof document === 'undefined') return;
+	const root = document.documentElement;
+	root.classList.remove('light', 'dark');
+	root.classList.add(isDarkTheme(theme) ? 'dark' : 'light');
 
-    // Persisting is best effort: the theme still applies when storage is blocked
-    try {
-        localStorage.setItem(THEME_STORAGE_KEY, theme);
-    } catch {
-        // Ignore storage errors
-    }
+	// Persisting is best effort: the theme still applies when storage is blocked
+	try {
+		localStorage.setItem(THEME_STORAGE_KEY, theme);
+	} catch {
+		// Ignore storage errors
+	}
 };
 
 // Apply a theme with a circular reveal that grows from the origin point (View Transitions API)
 export const applyThemeWithTransition = async (theme: ThemeMode, origin?: ThemeTransitionOrigin | Element | null) => {
-    const doc = document as DocumentWithViewTransition;
-    const root = document.documentElement;
-    const willChange = root.classList.contains('dark') !== isDarkTheme(theme);
-    const prefersReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+	const doc = document as DocumentWithViewTransition;
+	const root = document.documentElement;
+	const willChange = root.classList.contains('dark') !== isDarkTheme(theme);
+	const prefersReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
 
-    // Fall back to an instant switch when the transition is unsupported or pointless
-    if (!doc.startViewTransition || !willChange || prefersReducedMotion) {
-        applyTheme(theme);
-        return;
-    }
+	// Fall back to an instant switch when the transition is unsupported or pointless
+	if (!doc.startViewTransition || !willChange || prefersReducedMotion) {
+		applyTheme(theme);
+		return;
+	}
 
-    // Resolve the reveal origin (defaults to the top-right corner)
-    let x = window.innerWidth;
-    let y = 0;
-    if (origin instanceof Element) {
-        const rect = origin.getBoundingClientRect();
-        x = rect.left + rect.width / 2;
-        y = rect.top + rect.height / 2;
-    } else if (origin) {
-        x = origin.x;
-        y = origin.y;
-    }
-    const radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
+	// Resolve the reveal origin (defaults to the top-right corner)
+	let x = window.innerWidth;
+	let y = 0;
+	if (origin instanceof Element) {
+		const rect = origin.getBoundingClientRect();
+		x = rect.left + rect.width / 2;
+		y = rect.top + rect.height / 2;
+	} else if (origin) {
+		x = origin.x;
+		y = origin.y;
+	}
+	const radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
 
-    // Freeze CSS transitions so the snapshots capture the final colors
-    root.classList.add('uv-theme-switching');
-    const transition = doc.startViewTransition(() => applyTheme(theme));
+	// Freeze CSS transitions so the snapshots capture the final colors
+	root.classList.add('uv-theme-switching');
+	const transition = doc.startViewTransition(() => applyTheme(theme));
 
-    try {
-        await transition.ready;
-        root.animate({
-            clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`]
-        }, {
-            duration: 620,
-            easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
-            pseudoElement: '::view-transition-new(root)'
-        });
-        await transition.finished;
-    } finally {
-        root.classList.remove('uv-theme-switching');
-    }
+	try {
+		await transition.ready;
+		root.animate({
+			clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`]
+		}, {
+			duration: 620,
+			easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+			pseudoElement: '::view-transition-new(root)'
+		});
+		await transition.finished;
+	} finally {
+		root.classList.remove('uv-theme-switching');
+	}
 };

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import { computed, ref, useId } from 'vue';
-import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import ArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card } from '../card';
 import { cn } from '../../../lib/utils';
@@ -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>