diff --git a/.changeset/bright-peas-pull.md b/.changeset/bright-peas-pull.md
new file mode 100644
index 00000000..30c26dce
--- /dev/null
+++ b/.changeset/bright-peas-pull.md
@@ -0,0 +1,8 @@
+---
+'number-flow': patch
+'@number-flow/svelte': patch
+'@number-flow/react': patch
+'@number-flow/vue': patch
+---
+
+Expose parts for styling support
diff --git a/packages/number-flow/package.json b/packages/number-flow/package.json
index ce1e3d1e..8d7019d0 100644
--- a/packages/number-flow/package.json
+++ b/packages/number-flow/package.json
@@ -55,9 +55,13 @@
 		"magic-string": "^0.30.11",
 		"parse-literals": "^1.2.1",
 		"playwright": "^1.48.0",
+		"rollup-plugin-minify-html-literals-v3": "^1.3.4",
 		"tslib": "^2.7.0",
 		"typescript": "^5.6.2",
 		"vite": "^5.4.3",
 		"vitest": "^2.1.2"
+	},
+	"dependencies": {
+		"esm-env": "^1.1.4"
 	}
 }
diff --git a/packages/number-flow/src/index.ts b/packages/number-flow/src/index.ts
index 09e76cfe..8c66df79 100644
--- a/packages/number-flow/src/index.ts
+++ b/packages/number-flow/src/index.ts
@@ -22,7 +22,7 @@ import { max } from './util/math'
 export { define } from './util/dom'
 
 export { prefersReducedMotion } from './styles'
-export { render, type RenderProps } from './ssr'
+export { renderInnerHTML } from './ssr'
 export * from './formatter'
 
 export const canAnimate = supportsMod && supportsLinear && supportsAtProperty
@@ -125,6 +125,7 @@ export class NumberFlowLite extends ServerSafeHTMLElement implements Props {
 		if (!this.#created) {
 			this.#data = data
 
+			// This will overwrite the DSD if any:
 			this.attachShadow({ mode: 'open' })
 
 			// Add stylesheet
@@ -140,25 +141,18 @@ export class NumberFlowLite extends ServerSafeHTMLElement implements Props {
 				this.shadowRoot!.appendChild(style)
 			}
 
-			this.shadowRoot!.appendChild(createElement('slot'))
-
 			this.#pre = new SymbolSection(this, pre, {
-				inert: true,
-				ariaHidden: 'true',
-				justify: 'right'
+				justify: 'right',
+				part: 'left'
 			})
 			this.shadowRoot!.appendChild(this.#pre.el)
 
-			this.#num = new Num(this, integer, fraction, {
-				inert: true,
-				ariaHidden: 'true'
-			})
+			this.#num = new Num(this, integer, fraction)
 			this.shadowRoot!.appendChild(this.#num.el)
 
 			this.#post = new SymbolSection(this, post, {
-				inert: true,
-				ariaHidden: 'true',
-				justify: 'left'
+				justify: 'left',
+				part: 'right'
 			})
 			this.shadowRoot!.appendChild(this.#post.el)
 		} else {
@@ -260,10 +254,12 @@ class Num {
 		{ className, ...props }: HTMLProps<'span'> = {}
 	) {
 		this.#integer = new NumberSection(flow, integer, {
-			justify: 'right'
+			justify: 'right',
+			part: 'integer'
 		})
 		this.#fraction = new NumberSection(flow, fraction, {
-			justify: 'left'
+			justify: 'left',
+			part: 'fraction'
 		})
 
 		this.#inner = createElement(
@@ -277,6 +273,7 @@ class Num {
 			'span',
 			{
 				...props,
+				part: 'number',
 				className: `number ${className ?? ''}`
 			},
 			[this.#inner]
@@ -384,12 +381,14 @@ abstract class Section {
 
 	protected unpop(char: Char) {
 		char.el.classList.remove('section__exiting')
+		char.el.style.top = ''
 		char.el.style[this.justify] = ''
 	}
 
 	protected pop(chars: Map<any, Char>) {
 		// Calculate offsets for removed before popping, to avoid layout thrashing:
 		chars.forEach((char) => {
+			char.el.style.top = `${char.el.offsetTop}px`
 			char.el.style[this.justify] = `${offset(char.el, this.justify)}px`
 		})
 		chars.forEach((char) => {
@@ -609,7 +608,7 @@ class Digit extends Char<KeyedDigitPart> {
 
 	constructor(
 		section: Section,
-		_: KeyedDigitPart['type'],
+		type: KeyedDigitPart['type'],
 		value: KeyedDigitPart['value'],
 		readonly place: number,
 		props?: CharProps
@@ -626,6 +625,7 @@ class Digit extends Char<KeyedDigitPart> {
 		const el = createElement(
 			'span',
 			{
+				part: `digit ${type}-digit`,
 				className: `digit`
 			},
 			numbers
@@ -736,6 +736,7 @@ class Sym extends Char<KeyedSymbolPart> {
 			createElement(
 				'span',
 				{
+					part: type,
 					className: `symbol`
 				},
 				[val]
diff --git a/packages/number-flow/src/ssr.ts b/packages/number-flow/src/ssr.ts
index 2692ea7e..6fa604eb 100644
--- a/packages/number-flow/src/ssr.ts
+++ b/packages/number-flow/src/ssr.ts
@@ -1,14 +1,53 @@
-import type { Data } from './formatter'
-import { charHeight, maskHeight, SlottedTag } from './styles'
-import { BROWSER } from './util/env'
+import type { Data, KeyedNumberPart } from './formatter'
+import { css, html } from './util/string'
+import { charHeight, halfMaskHeight, maskHeight } from './styles'
+import { BROWSER } from 'esm-env'
 
 export const ServerSafeHTMLElement = BROWSER
 	? HTMLElement
 	: (class {} as unknown as typeof HTMLElement) // for types
 
-export type RenderProps = Pick<Data, 'valueAsString'> & { willChange?: boolean }
+const styles = css`
+	:host {
+		display: inline-block;
+		direction: ltr;
+		white-space: nowrap;
+		line-height: ${charHeight} !important;
+	}
 
-// Could eventually use DSD e.g.
-// `<template shadowroot="open" shadowrootmode="open">
-export const render = ({ valueAsString, willChange }: RenderProps) =>
-	`<${SlottedTag} style="font-kerning: none; display: inline-block; line-height: ${charHeight}; padding: ${maskHeight} 0;${willChange ? 'will-change: transform' : ''}">${valueAsString}</${SlottedTag}>`
+	span {
+		display: inline-block;
+	}
+
+	:host([data-will-change]) span {
+		will-change: transform;
+	}
+
+	.number,
+	.digit {
+		padding: ${halfMaskHeight} 0;
+	}
+
+	.symbol {
+		white-space: pre; /* some symbols are spaces or thin spaces */
+	}
+`
+
+const renderPart = (part: KeyedNumberPart) =>
+	`<span class="${part.type === 'integer' || part.type === 'fraction' ? 'digit' : 'symbol'}" part="${part.type === 'integer' || part.type === 'fraction' ? `digit ${part.type}-digit` : part.type}">${part.value}</span>`
+
+const renderSection = (section: KeyedNumberPart[], part: string) =>
+	`<span part="${part}">${section.reduce((str, p) => str + renderPart(p), '')}</span>`
+
+export const renderInnerHTML = (data: Data) =>
+	// shadowroot="open" non-standard attribute for old Chrome:
+	html`<template shadowroot="open" shadowrootmode="open"
+			><style>
+				${styles}</style
+			>${renderSection(data.pre, 'left')}<span part="number" class="number"
+				>${renderSection(data.integer, 'integer')}${renderSection(data.fraction, 'fraction')}</span
+			>${renderSection(data.post, 'right')}</template
+		><span
+			style="font-kerning: none; display: inline-block; line-height: ${charHeight} !important; padding: ${maskHeight} 0;"
+			>${data.valueAsString}</span
+		>` // ^ fallback for browsers that don't support DSD
diff --git a/packages/number-flow/src/styles.ts b/packages/number-flow/src/styles.ts
index 3e002711..94136d5e 100644
--- a/packages/number-flow/src/styles.ts
+++ b/packages/number-flow/src/styles.ts
@@ -1,5 +1,5 @@
-import { BROWSER } from './util/env'
-import { css } from './util/css'
+import { BROWSER } from 'esm-env'
+import { css } from './util/string'
 
 export const supportsLinear =
 	BROWSER &&
@@ -11,7 +11,9 @@ export const supportsMod =
 	BROWSER && typeof CSS !== 'undefined' && CSS.supports && CSS.supports('line-height', 'mod(1,1)')
 
 export const prefersReducedMotion =
-	BROWSER && matchMedia ? matchMedia('(prefers-reduced-motion: reduce)') : null
+	BROWSER && typeof matchMedia !== 'undefined'
+		? matchMedia('(prefers-reduced-motion: reduce)')
+		: null
 
 // Register animated vars:
 export const opacityDeltaVar = '--_number-flow-d-opacity'
@@ -60,7 +62,7 @@ export const charHeight = 'var(--number-flow-char-height, 1em)'
 // Mask technique taken from:
 // https://expensive.toys/blog/blur-vignette
 export const maskHeight = 'var(--number-flow-mask-height, 0.25em)'
-const halfMaskHeight = `calc(${maskHeight} / 2)`
+export const halfMaskHeight = `calc(${maskHeight} / 2)`
 const maskWidth = 'var(--number-flow-mask-width, 0.5em)'
 const scaledMaskWidth = `calc(${maskWidth} / var(--scale-x))`
 
@@ -70,40 +72,20 @@ export const SlottedTag = 'span'
 
 const styles = css`
 	:host {
-		display: inline-flex; /* seems better at matching baselines with other inline elements */
-		align-items: baseline; /* ^ */
+		display: inline-block;
 		direction: ltr;
 		white-space: nowrap;
-		/* for invisible slotted label used for screen readers and selecting: */
-		position: relative;
 		line-height: ${charHeight} !important;
-		isolation: isolate;
-	}
-
-	::slotted(${SlottedTag}) {
-		position: absolute;
-		left: 0;
-		top: 0;
-		color: transparent !important;
-		will-change: unset !important;
-		z-index: -5;
-	}
-
-	:host > .number,
-	:host > .section {
-		pointer-events: none;
-		user-select: none;
+		isolation: isolate; /* for .number z-index */
 	}
 
 	.number,
 	.number__inner {
-		display: inline-flex;
-		align-items: baseline;
+		display: inline-block;
 		transform-origin: left top;
 	}
 
-	:host([data-will-change]) .number,
-	:host([data-will-change]) .number__inner {
+	:host([data-will-change]) :is(.number, .number__inner, .section, .digit, .digit__num, .symbol) {
 		will-change: transform;
 	}
 
@@ -115,7 +97,7 @@ const styles = css`
 		position: relative; /* for z-index */
 		z-index: -1; /* display underneath other sections */
 
-		overflow: clip; /* important so it doesn't affect page layout */
+		/* overflow: clip; /* helpful to not affect page layout, but breaks baseline alignment in Safari :/ */
 		/* -webkit- prefixed properties have better support than unprefixed ones: */
 		-webkit-mask-image:
 			/* Horizontal: */
@@ -156,16 +138,13 @@ const styles = css`
 	}
 
 	.number__inner {
-		padding: 0 ${maskWidth};
+		padding: ${halfMaskHeight} ${maskWidth};
 		/* invert parent's: */
 		transform: scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${dxVar})));
 	}
 
 	.section {
-		display: inline-flex;
-		align-items: baseline;
-		padding-bottom: ${halfMaskHeight};
-		padding-top: ${halfMaskHeight};
+		display: inline-block;
 		/* for .section__exiting: */
 		position: relative;
 		isolation: isolate;
@@ -173,18 +152,14 @@ const styles = css`
 
 	.section::after {
 		/*
-		 * We seem to need some type of character to ensure align-items: baseline continues working
+		 * We seem to need some type of character to ensure baseline alignment continues working
 		 * even when empty
 		 */
 		content: '\200b'; /* zero-width space */
-		display: block;
+		display: inline-block;
 		padding: ${halfMaskHeight} 0;
 	}
 
-	:host([data-will-change]) .section {
-		will-change: transform;
-	}
-
 	.section--justify-left {
 		transform-origin: center left;
 	}
@@ -193,25 +168,21 @@ const styles = css`
 		transform-origin: center right;
 	}
 
-	.section__exiting {
+	.section__exiting,
+	.symbol__exiting {
+		margin: 0 !important;
 		position: absolute !important;
 		z-index: -1;
-		/* top: 0; this seemed to backfire */
 	}
 
 	.digit {
-		display: block;
+		display: inline-block;
 		position: relative;
 		--c: var(--current) + var(${deltaVar});
 	}
 
-	:host([data-will-change]) .digit,
-	:host([data-will-change]) .digit__num {
-		will-change: transform;
-	}
-
 	.digit__num {
-		display: block;
+		display: inline-block;
 		padding: ${halfMaskHeight} 0;
 		/* Claude + https://buildui.com/recipes/animated-counter */
 		--offset-raw: mod(10 + var(--n) - mod(var(--c), 10), 10);
@@ -233,28 +204,17 @@ const styles = css`
 	}
 
 	.symbol {
-		display: inline-flex;
-		align-items: baseline;
+		display: inline-block;
 		position: relative;
 		isolation: isolate; /* helpful for z-index and mix-blend-mode */
-		padding: ${halfMaskHeight} 0;
-	}
-
-	:host([data-will-change]) .symbol {
-		will-change: transform;
 	}
 
 	.symbol__value {
-		display: block;
+		display: inline-block;
 		mix-blend-mode: plus-lighter; /* better crossfades e.g. + <-> - */
 		white-space: pre; /* some symbols are spaces or thin spaces */
 	}
 
-	.symbol__exiting {
-		position: absolute;
-		z-index: -1;
-	}
-
 	.section--justify-left .symbol__exiting {
 		left: 0;
 	}
diff --git a/packages/number-flow/src/util/css.ts b/packages/number-flow/src/util/css.ts
deleted file mode 100644
index bdb442c3..00000000
--- a/packages/number-flow/src/util/css.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const css = String.raw
diff --git a/packages/number-flow/src/util/dom.ts b/packages/number-flow/src/util/dom.ts
index 3bd61039..f0a4555c 100644
--- a/packages/number-flow/src/util/dom.ts
+++ b/packages/number-flow/src/util/dom.ts
@@ -1,4 +1,4 @@
-import { BROWSER } from './env'
+import { BROWSER } from 'esm-env'
 
 type ExcludeReadonly<T> = {
 	-readonly [K in keyof T as T[K] extends Readonly<any> ? never : K]: T[K]
diff --git a/packages/number-flow/src/util/env.ts b/packages/number-flow/src/util/env.ts
deleted file mode 100644
index 084fabf2..00000000
--- a/packages/number-flow/src/util/env.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const BROWSER = typeof window !== 'undefined'
diff --git a/packages/number-flow/src/util/string.ts b/packages/number-flow/src/util/string.ts
new file mode 100644
index 00000000..f4bcd40a
--- /dev/null
+++ b/packages/number-flow/src/util/string.ts
@@ -0,0 +1,2 @@
+export const html = String.raw
+export const css = String.raw
diff --git a/packages/number-flow/vite.config.mjs b/packages/number-flow/vite.config.mjs
index 626313fc..470728cc 100644
--- a/packages/number-flow/vite.config.mjs
+++ b/packages/number-flow/vite.config.mjs
@@ -1,14 +1,14 @@
 import { resolve } from 'path'
 import { defineConfig, createFilter } from 'vite'
 import typescript from '@rollup/plugin-typescript'
-import { minifyRaw } from 'babel-plugin-styled-components/lib/minify'
+// import minifyLiterals from 'rollup-plugin-minify-html-literals-v3'
+import { minifyRaw as minifyCSS } from 'babel-plugin-styled-components/lib/minify'
 import MagicString from 'magic-string'
 import * as pl from 'parse-literals'
 
 const outDir = resolve(__dirname, 'dist')
 
 export default defineConfig(({ mode }) => ({
-	plugins: [minifyCSSLiterals()],
 	build: {
 		outDir,
 		lib: {
@@ -17,8 +17,16 @@ export default defineConfig(({ mode }) => ({
 			fileName: 'index'
 		},
 		rollupOptions: {
-			external: [],
+			external: ['esm-env'],
 			plugins: [
+				// Caused issues with CSS:
+				// minifyLiterals({
+				// 	// Couldn't get the plugin to work with css``, so disable it and handle it separately:
+				// 	minifyOptions: {
+				// 		minifyCSS: false
+				// 	}
+				// }),
+				minifyCSSLiterals(),
 				typescript({
 					tsconfig: resolve(__dirname, `./tsconfig${mode === 'production' ? '.build' : ''}.json`)
 				})
@@ -46,7 +54,7 @@ function minifyCSSLiterals() {
 				if (template.tag !== 'css') return
 				template.parts.forEach((part) => {
 					if (part.start < part.end) {
-						const [mini] = minifyRaw(part.text)
+						const [mini] = minifyCSS(part.text)
 						ms.overwrite(part.start, part.end, mini)
 					}
 				})
diff --git a/packages/react/package.json b/packages/react/package.json
index 95ae3cfd..400f5d8d 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -53,6 +53,7 @@
 		"test": "pnpm -r --workspace-concurrency 1 --filter=\"./test/apps/*\" test"
 	},
 	"dependencies": {
+		"esm-env": "^1.1.4",
 		"number-flow": "workspace:*"
 	},
 	"devDependencies": {
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
index c48f8185..c6a25f3d 100644
--- a/packages/react/src/index.tsx
+++ b/packages/react/src/index.tsx
@@ -5,7 +5,7 @@ import {
 	type Value,
 	type Format,
 	type Props,
-	render,
+	renderInnerHTML,
 	formatToData,
 	type Data,
 	NumberFlowLite,
@@ -13,6 +13,7 @@ import {
 	canAnimate as _canAnimate,
 	define
 } from 'number-flow'
+import { BROWSER } from 'esm-env'
 export type { Value, Format, Trend, NumberPartType } from 'number-flow'
 
 const REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]!)
@@ -152,7 +153,19 @@ class NumberFlowImpl extends React.Component<
 	}
 
 	override render() {
-		const [_, { innerRef, className, data, willChange, isolate, ...rest }] = splitProps(this.props)
+		const [
+			_,
+			{
+				innerRef,
+				className,
+				data,
+				willChange,
+				isolate,
+				onAnimationsStart,
+				onAnimationsFinish,
+				...rest
+			}
+		] = splitProps(this.props)
 
 		return (
 			// @ts-expect-error missing types
@@ -161,10 +174,11 @@ class NumberFlowImpl extends React.Component<
 				data-will-change={willChange ? '' : undefined}
 				// Have to rename this:
 				class={className}
+				aria-label={data.valueAsString}
 				{...rest}
-				dangerouslySetInnerHTML={{
-					__html: render({ valueAsString: data.valueAsString, willChange })
-				}}
+				role="img"
+				dangerouslySetInnerHTML={{ __html: BROWSER ? '' : renderInnerHTML(data) }}
+				suppressHydrationWarning
 				// Make sure data is set last, everything else is updated:
 				data={serializeData(data)}
 			/>
diff --git a/packages/react/test/apps/react-18/app/page.tsx b/packages/react/test/apps/react-18/app/page.tsx
index 43620dfc..e30e50aa 100644
--- a/packages/react/test/apps/react-18/app/page.tsx
+++ b/packages/react/test/apps/react-18/app/page.tsx
@@ -15,10 +15,11 @@ export default function Page() {
 					ref={ref}
 					value={value}
 					format={{ style: 'currency', currency: 'USD' }}
-					locales="fr-FR"
+					locales="zh-CN"
 					trend="increasing"
 					prefix=":"
 					suffix="/mo"
+					data-testid="flow"
 					continuous
 					onAnimationsStart={() => console.log('start')}
 					onAnimationsFinish={() => console.log('finish')}
diff --git a/packages/react/test/apps/react-19/app/page.tsx b/packages/react/test/apps/react-19/app/page.tsx
index 43620dfc..e30e50aa 100644
--- a/packages/react/test/apps/react-19/app/page.tsx
+++ b/packages/react/test/apps/react-19/app/page.tsx
@@ -15,10 +15,11 @@ export default function Page() {
 					ref={ref}
 					value={value}
 					format={{ style: 'currency', currency: 'USD' }}
-					locales="fr-FR"
+					locales="zh-CN"
 					trend="increasing"
 					prefix=":"
 					suffix="/mo"
+					data-testid="flow"
 					continuous
 					onAnimationsStart={() => console.log('start')}
 					onAnimationsFinish={() => console.log('finish')}
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 4813c9a5..cf35ae2b 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -53,6 +53,7 @@
 		}
 	},
 	"dependencies": {
+		"esm-env": "^1.1.4",
 		"number-flow": "workspace:*"
 	},
 	"peerDependencies": {
diff --git a/packages/svelte/src/lib/NumberFlow.svelte b/packages/svelte/src/lib/NumberFlow.svelte
index fb3ff73c..b2517fd4 100644
--- a/packages/svelte/src/lib/NumberFlow.svelte
+++ b/packages/svelte/src/lib/NumberFlow.svelte
@@ -26,13 +26,14 @@
 	import {
 		type Value,
 		type Format,
-		render as renderFlow,
+		renderInnerHTML,
 		formatToData,
 		type Props as NumberFlowProps
 	} from 'number-flow'
 	import type { HTMLAttributes } from 'svelte/elements'
 	import { writable } from 'svelte/store'
 	import { getGroupContext } from './group.js'
+	import { BROWSER } from 'esm-env'
 
 	export let locales: Intl.LocalesArgument = undefined
 	export let format: Format | undefined = undefined
@@ -84,7 +85,9 @@
 
 <number-flow-svelte
 	bind:this={el}
+	aria-label={data.valueAsString}
 	{...$$restProps}
+	role="img"
 	data-will-change={willChange ? '' : undefined}
 	on:animationsstart
 	on:animationsfinish
@@ -98,5 +101,5 @@
 	__svelte_continuous={continuous}
 	{data}
 >
-	{@html renderFlow({ valueAsString: data.valueAsString, willChange })}
+	{@html BROWSER ? undefined : renderInnerHTML(data)}
 </number-flow-svelte>
diff --git a/packages/svelte/src/routes/+page.svelte b/packages/svelte/src/routes/+page.svelte
index da13993c..ed4c343b 100644
--- a/packages/svelte/src/routes/+page.svelte
+++ b/packages/svelte/src/routes/+page.svelte
@@ -23,10 +23,11 @@
 		bind:el
 		{value}
 		format={{ style: 'currency', currency: 'USD' }}
-		locales="fr-FR"
+		locales="zh-CN"
 		trend="increasing"
 		prefix=":"
 		suffix="/mo"
+		data-testid="flow"
 		continuous
 		on:animationsstart={() => console.log('start')}
 		on:animationsfinish={() => console.log('finish')}
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 92563411..c0bf2068 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -48,6 +48,7 @@
 		"test": "pnpm -r --workspace-concurrency 1 --filter=\"./test/apps/*\" test"
 	},
 	"dependencies": {
+		"esm-env": "^1.1.4",
 		"number-flow": "workspace:*"
 	},
 	"devDependencies": {
diff --git a/packages/vue/src/index.vue b/packages/vue/src/index.vue
index 8eeaefc2..de4291aa 100644
--- a/packages/vue/src/index.vue
+++ b/packages/vue/src/index.vue
@@ -2,13 +2,14 @@
 import {
 	type Value,
 	type Format,
-	render,
+	renderInnerHTML,
 	formatToData,
 	NumberFlowLite,
 	type Props as NumberFlowProps
 } from 'number-flow'
 import { computed, inject, ref, watch } from 'vue'
 import { key as groupKey } from './group'
+import { BROWSER } from 'esm-env'
 
 type Props = Partial<NumberFlowProps> & {
 	locales?: Intl.LocalesArgument
@@ -62,10 +63,12 @@ const register = inject(groupKey, undefined)
 register?.(el, data)
 </script>
 <template>
-	<!-- Make sure parts is set last: -->
+	<!-- Make sure data is set last: -->
 	<number-flow-vue
 		ref="el"
+		:aria-label="data.valueAsString"
 		v-bind="$attrs"
+		role="img"
 		:manual="Boolean(register)"
 		:trend
 		:continuous
@@ -75,7 +78,8 @@ register?.(el, data)
 		:opacityTiming
 		:respectMotionPreference
 		:data-will-change="willChange ? '' : undefined"
-		v-html="render({ valueAsString: data.valueAsString, willChange })"
+		v-html="BROWSER ? undefined : renderInnerHTML(data)"
+		data-allow-mismatch
 		@animationsstart="emit('animationsstart')"
 		@animationsfinish="emit('animationsfinish')"
 		:data
diff --git a/packages/vue/test/apps/nuxt3/src/app.vue b/packages/vue/test/apps/nuxt3/src/app.vue
index ca0925e0..c618adf2 100644
--- a/packages/vue/test/apps/nuxt3/src/app.vue
+++ b/packages/vue/test/apps/nuxt3/src/app.vue
@@ -25,10 +25,11 @@ const handleFinish = () => console.log('finish')
 			ref="flow"
 			:value
 			:format="{ style: 'currency', currency: 'USD' }"
+			locales="zh-CN"
+			trend="increasing"
 			prefix=":"
 			suffix="/mo"
-			locales="fr-FR"
-			trend="increasing"
+			data-testid="flow"
 			continuous
 			@animationsstart="handleStart"
 			@animationsfinish="handleFinish"
diff --git a/packages/vue/vite.config.mjs b/packages/vue/vite.config.mjs
index e497cced..412b4b45 100644
--- a/packages/vue/vite.config.mjs
+++ b/packages/vue/vite.config.mjs
@@ -28,7 +28,7 @@ export default defineConfig(({ mode }) => ({
 			fileName: 'index'
 		},
 		rollupOptions: {
-			external: ['vue', 'number-flow'],
+			external: ['vue', 'number-flow', 'esm-env'],
 			output: {
 				globals: {
 					vue: 'Vue'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c4b4f4bd..868fdae4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,6 +37,10 @@ importers:
         version: 5.6.2
 
   packages/number-flow:
+    dependencies:
+      esm-env:
+        specifier: ^1.1.4
+        version: 1.1.4
     devDependencies:
       '@rollup/plugin-typescript':
         specifier: ^12.1.0
@@ -59,6 +63,9 @@ importers:
       playwright:
         specifier: ^1.48.0
         version: 1.48.0
+      rollup-plugin-minify-html-literals-v3:
+        specifier: ^1.3.4
+        version: 1.3.4
       tslib:
         specifier: ^2.7.0
         version: 2.7.0
@@ -74,6 +81,9 @@ importers:
 
   packages/react:
     dependencies:
+      esm-env:
+        specifier: ^1.1.4
+        version: 1.1.4
       number-flow:
         specifier: workspace:*
         version: link:../number-flow
@@ -98,7 +108,7 @@ importers:
         version: 18.3.1(react@18.3.1)
       tsup:
         specifier: ^8.2.4
-        version: 8.2.4(@microsoft/api-extractor@7.47.11(@types/node@22.7.9))(@swc/core@1.7.3(@swc/helpers@0.5.13))(jiti@2.3.3)(postcss@8.4.47)(typescript@5.6.3)(yaml@2.5.0)
+        version: 8.2.4(@microsoft/api-extractor@7.47.11(@types/node@22.7.9))(@swc/core@1.7.3(@swc/helpers@0.5.13))(jiti@2.3.3)(postcss@8.4.49)(typescript@5.6.3)(yaml@2.5.0)
 
   packages/react/test/apps/react-18:
     dependencies:
@@ -179,6 +189,9 @@ importers:
 
   packages/svelte:
     dependencies:
+      esm-env:
+        specifier: ^1.1.4
+        version: 1.1.4
       number-flow:
         specifier: workspace:*
         version: link:../number-flow
@@ -200,7 +213,7 @@ importers:
         version: 3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))
       autoprefixer:
         specifier: ^10.4.20
-        version: 10.4.20(postcss@8.4.47)
+        version: 10.4.20(postcss@8.4.45)
       publint:
         specifier: ^0.2.0
         version: 0.2.12
@@ -222,6 +235,9 @@ importers:
 
   packages/vue:
     dependencies:
+      esm-env:
+        specifier: ^1.1.4
+        version: 1.1.4
       number-flow:
         specifier: workspace:*
         version: link:../number-flow
@@ -261,10 +277,10 @@ importers:
         version: 3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.9)(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))
       vue:
         specifier: latest
-        version: 3.5.12(typescript@5.6.3)
+        version: 3.5.13(typescript@5.6.3)
       vue-router:
         specifier: latest
-        version: 4.4.5(vue@3.5.12(typescript@5.6.3))
+        version: 4.4.5(vue@3.5.13(typescript@5.6.3))
     devDependencies:
       '@nuxtjs/tailwindcss':
         specifier: ^6.12.2
@@ -2732,6 +2748,9 @@ packages:
   '@types/babel__traverse@7.20.6':
     resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
 
+  '@types/clean-css@4.2.11':
+    resolution: {integrity: sha512-Y8n81lQVTAfP2TOdtJJEsCoYl1AnOkqDqMvXb9/7pfgZZ7r8YrEyurrAvAoAjHOGXKRybay+5CsExqIH6liccw==}
+
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
@@ -2747,6 +2766,9 @@ packages:
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
+  '@types/html-minifier@3.5.3':
+    resolution: {integrity: sha512-j1P/4PcWVVCPEy5lofcHnQ6BtXz9tHGiFPWzqm7TtGuWZEfCHEP446HlkSNc9fQgNJaJZ6ewPtp2aaFla/Uerg==}
+
   '@types/http-proxy@1.17.15':
     resolution: {integrity: sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==}
 
@@ -2789,6 +2811,9 @@ packages:
   '@types/react@18.3.3':
     resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}
 
+  '@types/relateurl@0.2.33':
+    resolution: {integrity: sha512-bTQCKsVbIdzLqZhLkF5fcJQreE4y1ro4DIyVrlDNSCJRRwHhB8Z+4zXXa8jN6eDvc2HbRsEYgbvrnGvi54EpSw==}
+
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
@@ -2801,6 +2826,9 @@ packages:
   '@types/tough-cookie@4.0.5':
     resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
 
+  '@types/uglify-js@3.17.5':
+    resolution: {integrity: sha512-TU+fZFBTBcXj/GpDpDaBmgWk/gn96kMZ+uocaFUlV2f8a6WdMzzI44QBCmGcCiYR0Y6ZlNRiyUyKKt5nl/lbzQ==}
+
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -2976,15 +3004,27 @@ packages:
   '@vue/compiler-core@3.5.12':
     resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==}
 
+  '@vue/compiler-core@3.5.13':
+    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
+
   '@vue/compiler-dom@3.5.12':
     resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==}
 
+  '@vue/compiler-dom@3.5.13':
+    resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
+
   '@vue/compiler-sfc@3.5.12':
     resolution: {integrity: sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==}
 
+  '@vue/compiler-sfc@3.5.13':
+    resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
+
   '@vue/compiler-ssr@3.5.12':
     resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==}
 
+  '@vue/compiler-ssr@3.5.13':
+    resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
+
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 
@@ -3021,20 +3061,37 @@ packages:
   '@vue/reactivity@3.5.12':
     resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==}
 
+  '@vue/reactivity@3.5.13':
+    resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
+
   '@vue/runtime-core@3.5.12':
     resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==}
 
+  '@vue/runtime-core@3.5.13':
+    resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
+
   '@vue/runtime-dom@3.5.12':
     resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==}
 
+  '@vue/runtime-dom@3.5.13':
+    resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
+
   '@vue/server-renderer@3.5.12':
     resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==}
     peerDependencies:
       vue: 3.5.12
 
+  '@vue/server-renderer@3.5.13':
+    resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==}
+    peerDependencies:
+      vue: 3.5.13
+
   '@vue/shared@3.5.12':
     resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==}
 
+  '@vue/shared@3.5.13':
+    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
+
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
@@ -3351,6 +3408,9 @@ packages:
     resolution: {integrity: sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==}
     engines: {node: '>= 6.0.0'}
 
+  camel-case@3.0.0:
+    resolution: {integrity: sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==}
+
   camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
@@ -3435,6 +3495,10 @@ packages:
   citty@0.1.6:
     resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
 
+  clean-css@4.2.4:
+    resolution: {integrity: sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==}
+    engines: {node: '>= 4.0'}
+
   clear@0.1.0:
     resolution: {integrity: sha512-qMjRnoL+JDPJHeLePZJuao6+8orzHMGP04A8CdwCNsKhRbOnKRjefxONR7bwILT3MHecxKBjHkKL/tkZ8r4Uzw==}
 
@@ -3994,8 +4058,8 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
-  esm-env@1.0.0:
-    resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
+  esm-env@1.1.4:
+    resolution: {integrity: sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==}
 
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
@@ -4390,6 +4454,11 @@ packages:
   html-escaper@3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
 
+  html-minifier@4.0.0:
+    resolution: {integrity: sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   html-tags@3.3.1:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
@@ -4866,6 +4935,9 @@ packages:
   loupe@3.1.2:
     resolution: {integrity: sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==}
 
+  lower-case@1.1.4:
+    resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
+
   lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
 
@@ -4912,6 +4984,9 @@ packages:
     resolution: {integrity: sha512-oN3Bcd7ZVt+0VGEs7402qR/tjgjbM7kPlH/z7ufJnzTLVBzXJITRHOJiwMmmYMgZfdoWQsfQcY+iKlxiBppnMA==}
     engines: {node: '>=16.14.0'}
 
+  magic-string@0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+
   magic-string@0.30.11:
     resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
 
@@ -5159,6 +5234,9 @@ packages:
     resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
     engines: {node: '>=18'}
 
+  minify-html-literals@1.3.5:
+    resolution: {integrity: sha512-p8T8ryePRR8FVfJZLVFmM53WY25FL0moCCTycUDuAu6rf9GMLwy0gNjXBGNin3Yun7Y+tIWd28axOf0t2EpAlQ==}
+
   minimatch@10.0.1:
     resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
     engines: {node: 20 || >=22}
@@ -5325,6 +5403,9 @@ packages:
   nlcst-to-string@4.0.0:
     resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==}
 
+  no-case@2.3.2:
+    resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
+
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
@@ -5528,6 +5609,9 @@ packages:
   pako@0.2.9:
     resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
 
+  param-case@2.1.1:
+    resolution: {integrity: sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==}
+
   parse-entities@4.0.1:
     resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==}
 
@@ -5919,6 +6003,10 @@ packages:
     resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.4.49:
+    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
+    engines: {node: ^10 || ^12 || >=14}
+
   preferred-pm@4.0.0:
     resolution: {integrity: sha512-gYBeFTZLu055D8Vv3cSPox/0iTPtkzxpLroSYYA7WXgRi31WCJ51Uyl8ZiPeUUjyvs2MBzK+S8v9JVUgHU/Sqw==}
     engines: {node: '>=18.12'}
@@ -6150,6 +6238,10 @@ packages:
   rehype@13.0.1:
     resolution: {integrity: sha512-AcSLS2mItY+0fYu9xKxOu1LhUZeBZZBx8//5HKzF+0XP+eP8+6a5MXn2+DW2kfXR6Dtp1FEXMVrjyKAcvcU8vg==}
 
+  relateurl@0.2.7:
+    resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
+    engines: {node: '>= 0.10'}
+
   remark-gfm@4.0.0:
     resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==}
 
@@ -6234,6 +6326,9 @@ packages:
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
+  rollup-plugin-minify-html-literals-v3@1.3.4:
+    resolution: {integrity: sha512-wPHvQrm31Di7Bi5Fc/R+jogxNQYgxVojSmRVSn6gp29DTgyRlfrtaw10A29nX8g1I0JDqkQbtk2cIBweqtOCLA==}
+
   rollup-plugin-visualizer@5.12.0:
     resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
     engines: {node: '>=14'}
@@ -6436,6 +6531,10 @@ packages:
     resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
     engines: {node: '>= 8'}
 
+  sourcemap-codec@1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    deprecated: Please use @jridgewell/sourcemap-codec instead
+
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
@@ -6880,6 +6979,11 @@ packages:
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
+  uglify-js@3.19.3:
+    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+
   ultrahtml@1.5.3:
     resolution: {integrity: sha512-GykOvZwgDWZlTQMtp5jrD4BVL+gNn2NVlVafjcFUJ7taY20tqYdwdoWBFy6GBJsNTZe1GkGPkSl5knQAjtgceg==}
 
@@ -7041,6 +7145,9 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  upper-case@1.1.3:
+    resolution: {integrity: sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==}
+
   uqr@0.1.2:
     resolution: {integrity: sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==}
 
@@ -7398,6 +7505,14 @@ packages:
       typescript:
         optional: true
 
+  vue@3.5.13:
+    resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
@@ -9143,13 +9258,13 @@ snapshots:
       rc9: 2.1.2
       semver: 7.6.3
 
-  '@nuxt/devtools@1.6.0(rollup@4.21.0)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@nuxt/devtools@1.6.0(rollup@4.21.0)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@antfu/utils': 0.7.10
       '@nuxt/devtools-kit': 1.6.0(magicast@0.3.5)(rollup@4.21.0)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))
       '@nuxt/devtools-wizard': 1.6.0
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.0)
-      '@vue/devtools-core': 7.4.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+      '@vue/devtools-core': 7.4.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
       '@vue/devtools-kit': 7.4.4
       birpc: 0.2.19
       consola: 3.2.3
@@ -9307,12 +9422,12 @@ snapshots:
       - supports-color
       - webpack-sources
 
-  '@nuxt/vite-builder@3.13.2(@types/node@22.7.9)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))':
+  '@nuxt/vite-builder@3.13.2(@types/node@22.7.9)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.0)
       '@rollup/plugin-replace': 5.0.7(rollup@4.21.0)
-      '@vitejs/plugin-vue': 5.1.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
-      '@vitejs/plugin-vue-jsx': 4.0.1(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+      '@vitejs/plugin-vue': 5.1.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
+      '@vitejs/plugin-vue-jsx': 4.0.1(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
       autoprefixer: 10.4.20(postcss@8.4.47)
       clear: 0.1.0
       consola: 3.2.3
@@ -9341,7 +9456,7 @@ snapshots:
       vite: 5.4.10(@types/node@22.7.9)(terser@5.36.0)
       vite-node: 2.1.2(@types/node@22.7.9)(terser@5.36.0)
       vite-plugin-checker: 0.8.0(typescript@5.6.3)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
       - '@biomejs/biome'
@@ -9870,7 +9985,7 @@ snapshots:
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
-      esm-env: 1.0.0
+      esm-env: 1.1.4
       import-meta-resolve: 4.1.0
       kleur: 4.1.5
       magic-string: 0.30.12
@@ -10081,6 +10196,11 @@ snapshots:
     dependencies:
       '@babel/types': 7.25.2
 
+  '@types/clean-css@4.2.11':
+    dependencies:
+      '@types/node': 22.7.9
+      source-map: 0.6.1
+
   '@types/cookie@0.6.0': {}
 
   '@types/debug@4.1.12':
@@ -10097,6 +10217,12 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
+  '@types/html-minifier@3.5.3':
+    dependencies:
+      '@types/clean-css': 4.2.11
+      '@types/relateurl': 0.2.33
+      '@types/uglify-js': 3.17.5
+
   '@types/http-proxy@1.17.15':
     dependencies:
       '@types/node': 22.7.9
@@ -10144,6 +10270,8 @@ snapshots:
       '@types/prop-types': 15.7.12
       csstype: 3.1.3
 
+  '@types/relateurl@0.2.33': {}
+
   '@types/resolve@1.20.2': {}
 
   '@types/statuses@2.0.5': {}
@@ -10152,6 +10280,10 @@ snapshots:
 
   '@types/tough-cookie@4.0.5': {}
 
+  '@types/uglify-js@3.17.5':
+    dependencies:
+      source-map: 0.6.1
+
   '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
@@ -10181,14 +10313,14 @@ snapshots:
       '@unhead/schema': 1.11.10
       '@unhead/shared': 1.11.10
 
-  '@unhead/vue@1.11.10(vue@3.5.12(typescript@5.6.3))':
+  '@unhead/vue@1.11.10(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@unhead/schema': 1.11.10
       '@unhead/shared': 1.11.10
       defu: 6.1.4
       hookable: 5.5.3
       unhead: 1.11.10
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
 
   '@vercel/analytics@1.3.1(next@14.2.15(@babel/core@7.25.2)(@playwright/test@1.48.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
     dependencies:
@@ -10246,13 +10378,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.25.2)
       '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.2)
       vite: 5.4.10(@types/node@22.7.9)(terser@5.36.0)
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
     transitivePeerDependencies:
       - supports-color
 
@@ -10266,10 +10398,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.1.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vitejs/plugin-vue@5.1.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       vite: 5.4.10(@types/node@22.7.9)(terser@5.36.0)
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
 
   '@vitejs/plugin-vue@5.1.4(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2))':
     dependencies:
@@ -10393,7 +10525,7 @@ snapshots:
 
   '@vscode/l10n@0.0.18': {}
 
-  '@vue-macros/common@1.15.0(rollup@4.21.0)(vue@3.5.12(typescript@5.6.3))':
+  '@vue-macros/common@1.15.0(rollup@4.21.0)(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@babel/types': 7.25.9
       '@rollup/pluginutils': 5.1.3(rollup@4.21.0)
@@ -10402,7 +10534,7 @@ snapshots:
       local-pkg: 0.5.0
       magic-string-ast: 0.6.2
     optionalDependencies:
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
     transitivePeerDependencies:
       - rollup
 
@@ -10431,7 +10563,7 @@ snapshots:
       '@babel/core': 7.25.2
       '@babel/helper-module-imports': 7.24.7
       '@babel/helper-plugin-utils': 7.24.8
-      '@babel/parser': 7.25.6
+      '@babel/parser': 7.26.0
       '@vue/compiler-sfc': 3.5.12
     transitivePeerDependencies:
       - supports-color
@@ -10444,11 +10576,24 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
+  '@vue/compiler-core@3.5.13':
+    dependencies:
+      '@babel/parser': 7.26.0
+      '@vue/shared': 3.5.13
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
   '@vue/compiler-dom@3.5.12':
     dependencies:
       '@vue/compiler-core': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/compiler-dom@3.5.13':
+    dependencies:
+      '@vue/compiler-core': 3.5.13
+      '@vue/shared': 3.5.13
+
   '@vue/compiler-sfc@3.5.12':
     dependencies:
       '@babel/parser': 7.25.6
@@ -10461,11 +10606,28 @@ snapshots:
       postcss: 8.4.47
       source-map-js: 1.2.0
 
+  '@vue/compiler-sfc@3.5.13':
+    dependencies:
+      '@babel/parser': 7.26.0
+      '@vue/compiler-core': 3.5.13
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      estree-walker: 2.0.2
+      magic-string: 0.30.12
+      postcss: 8.4.49
+      source-map-js: 1.2.1
+
   '@vue/compiler-ssr@3.5.12':
     dependencies:
       '@vue/compiler-dom': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/compiler-ssr@3.5.13':
+    dependencies:
+      '@vue/compiler-dom': 3.5.13
+      '@vue/shared': 3.5.13
+
   '@vue/compiler-vue2@2.7.16':
     dependencies:
       de-indent: 1.0.2
@@ -10473,7 +10635,7 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-core@7.4.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vue/devtools-core@7.4.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@vue/devtools-kit': 7.5.3
       '@vue/devtools-shared': 7.5.3
@@ -10481,7 +10643,7 @@ snapshots:
       nanoid: 3.3.7
       pathe: 1.1.2
       vite-hot-client: 0.2.3(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
     transitivePeerDependencies:
       - vite
 
@@ -10538,11 +10700,20 @@ snapshots:
     dependencies:
       '@vue/shared': 3.5.12
 
+  '@vue/reactivity@3.5.13':
+    dependencies:
+      '@vue/shared': 3.5.13
+
   '@vue/runtime-core@3.5.12':
     dependencies:
       '@vue/reactivity': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/runtime-core@3.5.13':
+    dependencies:
+      '@vue/reactivity': 3.5.13
+      '@vue/shared': 3.5.13
+
   '@vue/runtime-dom@3.5.12':
     dependencies:
       '@vue/reactivity': 3.5.12
@@ -10550,6 +10721,13 @@ snapshots:
       '@vue/shared': 3.5.12
       csstype: 3.1.3
 
+  '@vue/runtime-dom@3.5.13':
+    dependencies:
+      '@vue/reactivity': 3.5.13
+      '@vue/runtime-core': 3.5.13
+      '@vue/shared': 3.5.13
+      csstype: 3.1.3
+
   '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       '@vue/compiler-ssr': 3.5.12
@@ -10562,8 +10740,16 @@ snapshots:
       '@vue/shared': 3.5.12
       vue: 3.5.12(typescript@5.6.3)
 
+  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.6.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      vue: 3.5.13(typescript@5.6.3)
+
   '@vue/shared@3.5.12': {}
 
+  '@vue/shared@3.5.13': {}
+
   '@vueuse/core@10.11.1(vue@3.5.12(typescript@5.6.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -10833,6 +11019,16 @@ snapshots:
 
   at-least-node@1.0.0: {}
 
+  autoprefixer@10.4.20(postcss@8.4.45):
+    dependencies:
+      browserslist: 4.24.2
+      caniuse-lite: 1.0.30001669
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.4.45
+      postcss-value-parser: 4.2.0
+
   autoprefixer@10.4.20(postcss@8.4.47):
     dependencies:
       browserslist: 4.24.2
@@ -10979,6 +11175,11 @@ snapshots:
       mime-types: 2.1.35
       ylru: 1.4.0
 
+  camel-case@3.0.0:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
   camelcase-css@2.0.1: {}
 
   camelcase@7.0.1: {}
@@ -11059,6 +11260,10 @@ snapshots:
     dependencies:
       consola: 3.2.3
 
+  clean-css@4.2.4:
+    dependencies:
+      source-map: 0.6.1
+
   clear@0.1.0: {}
 
   cli-boxes@3.0.0: {}
@@ -11602,7 +11807,7 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  esm-env@1.0.0: {}
+  esm-env@1.1.4: {}
 
   esprima@4.0.1: {}
 
@@ -12162,6 +12367,16 @@ snapshots:
 
   html-escaper@3.0.3: {}
 
+  html-minifier@4.0.0:
+    dependencies:
+      camel-case: 3.0.0
+      clean-css: 4.2.4
+      commander: 2.20.3
+      he: 1.2.0
+      param-case: 2.1.1
+      relateurl: 0.2.7
+      uglify-js: 3.19.3
+
   html-tags@3.3.1: {}
 
   html-void-elements@3.0.0: {}
@@ -12626,6 +12841,8 @@ snapshots:
 
   loupe@3.1.2: {}
 
+  lower-case@1.1.4: {}
+
   lower-case@2.0.2:
     dependencies:
       tslib: 2.7.0
@@ -12677,6 +12894,10 @@ snapshots:
     dependencies:
       magic-string: 0.30.12
 
+  magic-string@0.25.9:
+    dependencies:
+      sourcemap-codec: 1.4.8
+
   magic-string@0.30.11:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -13176,6 +13397,14 @@ snapshots:
 
   mimic-function@5.0.1: {}
 
+  minify-html-literals@1.3.5:
+    dependencies:
+      '@types/html-minifier': 3.5.3
+      clean-css: 4.2.4
+      html-minifier: 4.0.0
+      magic-string: 0.25.9
+      parse-literals: 1.2.1
+
   minimatch@10.0.1:
     dependencies:
       brace-expansion: 2.0.1
@@ -13426,6 +13655,10 @@ snapshots:
     dependencies:
       '@types/nlcst': 2.0.3
 
+  no-case@2.3.2:
+    dependencies:
+      lower-case: 1.1.4
+
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
@@ -13490,15 +13723,15 @@ snapshots:
   nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.9)(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)):
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.6.0(rollup@4.21.0)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+      '@nuxt/devtools': 1.6.0(rollup@4.21.0)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.0)
       '@nuxt/schema': 3.13.2(rollup@4.21.0)
       '@nuxt/telemetry': 2.6.0(magicast@0.3.5)(rollup@4.21.0)
-      '@nuxt/vite-builder': 3.13.2(@types/node@22.7.9)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))
+      '@nuxt/vite-builder': 3.13.2(@types/node@22.7.9)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))
       '@unhead/dom': 1.11.10
       '@unhead/shared': 1.11.10
       '@unhead/ssr': 1.11.10
-      '@unhead/vue': 1.11.10(vue@3.5.12(typescript@5.6.3))
+      '@unhead/vue': 1.11.10(vue@3.5.13(typescript@5.6.3))
       '@vue/shared': 3.5.12
       acorn: 8.12.1
       c12: 1.11.2(magicast@0.3.5)
@@ -13546,13 +13779,13 @@ snapshots:
       unhead: 1.11.10
       unimport: 3.13.1(rollup@4.21.0)
       unplugin: 1.14.1
-      unplugin-vue-router: 0.10.8(rollup@4.21.0)(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
+      unplugin-vue-router: 0.10.8(rollup@4.21.0)(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
       unstorage: 1.12.0(ioredis@5.4.1)
       untyped: 1.5.1
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
       vue-bundle-renderer: 2.1.1
       vue-devtools-stub: 0.1.0
-      vue-router: 4.4.5(vue@3.5.12(typescript@5.6.3))
+      vue-router: 4.4.5(vue@3.5.13(typescript@5.6.3))
     optionalDependencies:
       '@parcel/watcher': 2.4.1
       '@types/node': 22.7.9
@@ -13725,6 +13958,10 @@ snapshots:
 
   pako@0.2.9: {}
 
+  param-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
   parse-entities@4.0.1:
     dependencies:
       '@types/unist': 2.0.11
@@ -13918,12 +14155,12 @@ snapshots:
     optionalDependencies:
       postcss: 8.4.45
 
-  postcss-load-config@6.0.1(jiti@2.3.3)(postcss@8.4.47)(yaml@2.5.0):
+  postcss-load-config@6.0.1(jiti@2.3.3)(postcss@8.4.49)(yaml@2.5.0):
     dependencies:
       lilconfig: 3.1.2
     optionalDependencies:
       jiti: 2.3.3
-      postcss: 8.4.47
+      postcss: 8.4.49
       yaml: 2.5.0
 
   postcss-merge-longhand@7.0.4(postcss@8.4.47):
@@ -14098,6 +14335,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.4.49:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   preferred-pm@4.0.0:
     dependencies:
       find-up-simple: 1.0.0
@@ -14300,6 +14543,8 @@ snapshots:
       rehype-stringify: 10.0.0
       unified: 11.0.5
 
+  relateurl@0.2.7: {}
+
   remark-gfm@4.0.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -14417,6 +14662,14 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
+  rollup-plugin-minify-html-literals-v3@1.3.4:
+    dependencies:
+      '@rollup/pluginutils': 5.1.3(rollup@4.21.0)
+      minify-html-literals: 1.3.5
+      rollup: 4.21.0
+      tslib: 2.7.0
+      typescript: 5.6.3
+
   rollup-plugin-visualizer@5.12.0(rollup@4.21.0):
     dependencies:
       open: 8.4.2
@@ -14684,6 +14937,8 @@ snapshots:
     dependencies:
       whatwg-url: 7.1.0
 
+  sourcemap-codec@1.4.8: {}
+
   space-separated-tokens@2.0.2: {}
 
   spawndamnit@2.0.0:
@@ -14910,7 +15165,7 @@ snapshots:
       acorn-typescript: 1.4.13(acorn@8.12.1)
       aria-query: 5.3.2
       axobject-query: 4.1.0
-      esm-env: 1.0.0
+      esm-env: 1.1.4
       esrap: 1.2.2
       is-reference: 3.0.2
       locate-character: 3.0.0
@@ -15088,7 +15343,7 @@ snapshots:
 
   tsscmp@1.0.6: {}
 
-  tsup@8.2.4(@microsoft/api-extractor@7.47.11(@types/node@22.7.9))(@swc/core@1.7.3(@swc/helpers@0.5.13))(jiti@2.3.3)(postcss@8.4.47)(typescript@5.6.3)(yaml@2.5.0):
+  tsup@8.2.4(@microsoft/api-extractor@7.47.11(@types/node@22.7.9))(@swc/core@1.7.3(@swc/helpers@0.5.13))(jiti@2.3.3)(postcss@8.4.49)(typescript@5.6.3)(yaml@2.5.0):
     dependencies:
       bundle-require: 5.0.0(esbuild@0.23.1)
       cac: 6.7.14
@@ -15100,7 +15355,7 @@ snapshots:
       globby: 11.1.0
       joycon: 3.1.1
       picocolors: 1.0.1
-      postcss-load-config: 6.0.1(jiti@2.3.3)(postcss@8.4.47)(yaml@2.5.0)
+      postcss-load-config: 6.0.1(jiti@2.3.3)(postcss@8.4.49)(yaml@2.5.0)
       resolve-from: 5.0.0
       rollup: 4.21.0
       source-map: 0.8.0-beta.0
@@ -15109,7 +15364,7 @@ snapshots:
     optionalDependencies:
       '@microsoft/api-extractor': 7.47.11(@types/node@22.7.9)
       '@swc/core': 1.7.3(@swc/helpers@0.5.13)
-      postcss: 8.4.47
+      postcss: 8.4.49
       typescript: 5.6.3
     transitivePeerDependencies:
       - jiti
@@ -15154,6 +15409,8 @@ snapshots:
 
   ufo@1.5.4: {}
 
+  uglify-js@3.19.3: {}
+
   ultrahtml@1.5.3: {}
 
   uncrypto@0.1.3: {}
@@ -15286,11 +15543,11 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unplugin-vue-router@0.10.8(rollup@4.21.0)(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)):
+  unplugin-vue-router@0.10.8(rollup@4.21.0)(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)):
     dependencies:
       '@babel/types': 7.25.9
       '@rollup/pluginutils': 5.1.0(rollup@4.21.0)
-      '@vue-macros/common': 1.15.0(rollup@4.21.0)(vue@3.5.12(typescript@5.6.3))
+      '@vue-macros/common': 1.15.0(rollup@4.21.0)(vue@3.5.13(typescript@5.6.3))
       ast-walker-scope: 0.6.2
       chokidar: 3.6.0
       fast-glob: 3.3.2
@@ -15303,7 +15560,7 @@ snapshots:
       unplugin: 1.14.1
       yaml: 2.5.0
     optionalDependencies:
-      vue-router: 4.4.5(vue@3.5.12(typescript@5.6.3))
+      vue-router: 4.4.5(vue@3.5.13(typescript@5.6.3))
     transitivePeerDependencies:
       - rollup
       - vue
@@ -15364,6 +15621,8 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  upper-case@1.1.3: {}
+
   uqr@0.1.2: {}
 
   uri-js@4.4.1:
@@ -15741,10 +16000,10 @@ snapshots:
 
   vue-devtools-stub@0.1.0: {}
 
-  vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)):
+  vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
 
   vue@3.5.12(typescript@5.6.2):
     dependencies:
@@ -15766,6 +16025,16 @@ snapshots:
     optionalDependencies:
       typescript: 5.6.3
 
+  vue@3.5.13(typescript@5.6.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-sfc': 3.5.13
+      '@vue/runtime-dom': 3.5.13
+      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.6.3))
+      '@vue/shared': 3.5.13
+    optionalDependencies:
+      typescript: 5.6.3
+
   web-namespaces@2.0.1: {}
 
   web-vitals@3.5.2: {}
diff --git a/site/src/components/Note.astro b/site/src/components/Note.astro
new file mode 100644
index 00000000..2d9c3c25
--- /dev/null
+++ b/site/src/components/Note.astro
@@ -0,0 +1,24 @@
+---
+import { Info } from 'lucide-react'
+import type { HTMLAttributes } from 'astro/types'
+
+export type Props = HTMLAttributes<'div'>
+
+const { class: cls, ...props } = Astro.props
+---
+
+<!-- <p class="bg-accent/10 border-accent/30 dark:border-accent/10 rounded-lg border p-5"> -->
+<div
+	{...props}
+	class:list={[
+		cls,
+		'border-faint py-4.5 flex gap-3 rounded-lg border bg-zinc-50 px-5 text-sm dark:bg-zinc-900'
+	]}
+>
+	<Info className="mt-1 size-4 shrink-0" />
+	<div class="flex-1 overflow-hidden">
+		<div class="prose-zinc prose-sm prose dark:prose-invert">
+			<slot />
+		</div>
+	</div>
+</div>
diff --git a/site/src/layouts/Layout.astro b/site/src/layouts/Layout.astro
index c1698539..1ff038e3 100644
--- a/site/src/layouts/Layout.astro
+++ b/site/src/layouts/Layout.astro
@@ -86,6 +86,13 @@ const app = {
 		<meta name="description" content={description} />
 		<meta property="og:description" content={description} />
 		<meta name="twitter:description" content={description} />
+		<script is:inline>
+			if (
+				HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode') ||
+				HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot')
+			)
+				document.documentElement.setAttribute('data-supports-dsd', '')
+		</script>
 		<script type="application/ld+json" is:inline set:html={JSON.stringify(app)} />
 
 		<ViewTransitions />
diff --git a/site/src/pages/[...framework]/_demos/Styling.tsx b/site/src/pages/[...framework]/_demos/Styling.tsx
new file mode 100644
index 00000000..6f47cab5
--- /dev/null
+++ b/site/src/pages/[...framework]/_demos/Styling.tsx
@@ -0,0 +1,25 @@
+import Demo, { type DemoProps } from '@/components/Demo'
+import type { Rename } from '@/lib/types'
+import NumberFlow, { type Value } from '@number-flow/react'
+import useCycle from '@/hooks/useCycle'
+
+const NUMBERS: Value[] = [3, 25, 50]
+
+export default function DemoHOC({
+	children,
+	...rest
+}: Rename<Omit<DemoProps, 'children'>, 'code', 'children'>) {
+	const [value, cycleValue] = useCycle(NUMBERS)
+
+	return (
+		<Demo {...rest} code={children} onClick={cycleValue}>
+			<NumberFlow
+				value={value}
+				format={{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }}
+				suffix="/mo"
+				className="~text-xl/4xl part-[suffix]:font-normal part-[suffix]:text-muted part-[suffix]:text-[0.75em] part-[suffix]:ml-[0.0625em] font-semibold"
+				style={{ '--number-flow-char-height': '0.85em' }}
+			/>
+		</Demo>
+	)
+}
diff --git a/site/src/pages/[...framework]/index.mdx b/site/src/pages/[...framework]/index.mdx
index 89b9fc84..a087f100 100644
--- a/site/src/pages/[...framework]/index.mdx
+++ b/site/src/pages/[...framework]/index.mdx
@@ -10,12 +10,14 @@ import IsolateDemo from './_demos/Isolate'
 import ContinuousDemo from './_demos/Continuous'
 import SuffixDemo from './_demos/Suffix'
 import TrendDemo from './_demos/Trend'
+import StylingDemo from './_demos/Styling'
 import Match from '@/components/Match.astro'
 import Meta from '@/components/Meta.astro'
 import Type from '@/components/Type.astro'
 import Heading from '@/components/Heading.astro'
 import Union from '@/components/Union.astro'
 import Link from '@/components/Link.astro'
+import Note from '@/components/Note.astro'
 import Group from './examples/_Group/index.astro'
 export { getStaticPaths } from '@/lib/framework'
 export const components = {a: Link, pre: Pre}
@@ -283,7 +285,117 @@ Triggered when update animations finish.
 <Heading value="Styling" />
 </Match>
 
-There's some CSS properties you can use to style the component:
+NumberFlow uses a [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) under the hood, and exposes [parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)
+for styling purposes:
+
+<StylingDemo client:visible>
+<Match react>
+```css
+number-flow-react::part(suffix) {
+	margin-left: .0625em;
+	font-weight: normal;
+	font-size: 0.75em;
+	color: var(--muted);
+}
+```
+</Match>
+<Match vue>
+```css
+number-flow-vue::part(suffix) {
+	margin-left: .0625em;
+	font-weight: normal;
+	font-size: 0.75em;
+	color: var(--muted);
+}
+```
+</Match>
+<Match svelte>
+```css
+number-flow-svelte::part(suffix) {
+	margin-left: .0625em;
+	font-weight: normal;
+	font-size: 0.75em;
+	color: var(--muted);
+}
+```
+</Match>
+</StylingDemo>
+
+You can use your browser's inspector to see which [`part` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part)
+are available to style. Note that changing the `font-size` of digits is difficult
+due to the CSS techniques NumberFlow uses.
+
+<Note class="mb-[2.7em]">
+`::part` styles may cause a flash of unstyled content in [old browsers](https://caniuse.com/declarative-shadow-dom).
+<details>
+<summary>See workaround</summary>
+You can use feature detection
+to apply `::part` styles only to browsers that support [Declarative Shadow DOM](https://web.dev/articles/declarative-shadow-dom) (DSD). Add the following snippet to your `<head>`:
+
+```html
+<script>
+	if (
+		HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode') ||
+		HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot') // old Chrome/Edge
+	)
+		document.documentElement.setAttribute('data-supports-dsd', '')
+</script>
+```
+
+Then ensure your `::part` styles use it:
+
+<Match react>
+```css
+:root[data-supports-dsd] number-flow-react::part(suffix) {
+}
+```
+</Match>
+<Match vue>
+```css
+:root[data-supports-dsd] number-flow-vue::part(suffix) {
+}
+```
+</Match>
+<Match svelte>
+```css
+:root[data-supports-dsd] number-flow-svelte::part(suffix) {
+}
+```
+</Match>
+If you're using Tailwind, you can do this with a custom variant:
+```js
+// tailwind.config.js
+import plugin from 'tailwindcss/plugin'
+
+export default {
+	// ...
+	plugins: [
+		plugin(({ matchVariant }) => {
+			matchVariant('part', (p) => `:root[data-supports-dsd] &::part(${p})`)
+		})
+	]
+}
+```
+
+<Match react>
+```tsx
+<NumberFlow className="part-[suffix]:text-muted" />
+```
+</Match>
+<Match vue>
+```vue
+<NumberFlow class="part-[suffix]:text-muted" />
+```
+</Match>
+<Match svelte>
+```svelte
+<NumberFlow class="part-[suffix]:text-muted" />
+```
+</Match>
+</details>
+</Note>
+
+There's also some CSS properties you can use to style the component:
 
 <h3>
 	<code>{'--'}number-flow-mask-[height|width]<Type>: {'<length>'}</Type></code>
@@ -298,8 +410,8 @@ These adjust the height and width of the gradient fade-out masks at the edges of
 	<Meta>Default: `1em`</Meta>
 </h3>
 
-Sets the height of each character. This can be used to adjust the vertical 
-spacing between numbers.
+Sets the height of each character. This can be used to adjust the spacing between
+digits during spin animations.
 
 ### <code>font-variant-numeric<span className="text-muted">:</span> tabular-nums</code>
 
@@ -346,6 +458,5 @@ and (optionally) the user is [okay with motion](https://developer.mozilla.org/en
 </Match>
 
 * [Scientific](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#scientific) and [engineering](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#engineering) notations aren't supported.
-* Selected text inside the number will not respect color changes from `::selection`, if any.
 * Backgrounds and borders on `<NumberFlow>` won't scale smoothly during transitions.
 <Match react>I'd recommend using Framer Motion for these, as it's more composable than any built-in solution could be. See the Framer Motion layout animations [example](/examples#framer-motion).</Match>
diff --git a/site/tailwind.config.ts b/site/tailwind.config.ts
index 5f78e0a6..a71c64a6 100644
--- a/site/tailwind.config.ts
+++ b/site/tailwind.config.ts
@@ -100,6 +100,10 @@ export default {
 							content: 'none'
 						},
 
+						summary: {
+							'@apply font-medium text-[--tw-prose-links] cursor-pointer': {}
+						},
+
 						'code::after': {
 							content: 'none'
 						},
@@ -167,7 +171,7 @@ export default {
 		spring,
 		fluid,
 		typography,
-		plugin(({ matchUtilities, addUtilities, addVariant, theme }) => {
+		plugin(({ matchUtilities, addUtilities, addVariant, matchVariant, theme }) => {
 			matchUtilities(
 				{
 					vt: (_, { modifier }) => ({
@@ -177,6 +181,8 @@ export default {
 				{ values: { DEFAULT: '' }, modifiers: 'any' }
 			)
 
+			matchVariant('part', (p) => `:root[data-supports-dsd] &::part(${p})`)
+
 			matchUtilities(
 				{
 					fluid: (val) => ({
diff --git a/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-chromium-darwin.png b/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-chromium-darwin.png
index eb0b49b2..1719f344 100644
Binary files a/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-chromium-darwin.png and b/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-chromium-darwin.png differ
diff --git a/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-chromium-no-js-darwin.png b/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-chromium-no-js-darwin.png
index eb0b49b2..1719f344 100644
Binary files a/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-chromium-no-js-darwin.png and b/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-chromium-no-js-darwin.png differ
diff --git a/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-firefox-darwin.png b/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-firefox-darwin.png
index 02e26f8d..b31d4ec0 100644
Binary files a/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-firefox-darwin.png and b/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-firefox-darwin.png differ
diff --git a/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-webkit-darwin.png b/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-webkit-darwin.png
index 9a918dff..e9dea3c2 100644
Binary files a/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-webkit-darwin.png and b/test-suites/wrapper/__screenshots__/render.test.ts/renders-correctly-1-webkit-darwin.png differ
diff --git a/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-1-chromium-darwin.png b/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-1-chromium-darwin.png
index e8545f29..f6221752 100644
Binary files a/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-1-chromium-darwin.png and b/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-1-chromium-darwin.png differ
diff --git a/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-1-firefox-darwin.png b/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-1-firefox-darwin.png
index cbba254c..9c39c734 100644
Binary files a/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-1-firefox-darwin.png and b/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-1-firefox-darwin.png differ
diff --git a/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-1-webkit-darwin.png b/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-1-webkit-darwin.png
index 9c1f7506..e6e45c20 100644
Binary files a/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-1-webkit-darwin.png and b/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-1-webkit-darwin.png differ
diff --git a/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-2-chromium-darwin.png b/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-2-chromium-darwin.png
index d3276e17..e835ae7f 100644
Binary files a/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-2-chromium-darwin.png and b/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-2-chromium-darwin.png differ
diff --git a/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-2-firefox-darwin.png b/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-2-firefox-darwin.png
index 671867d4..cb003ea2 100644
Binary files a/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-2-firefox-darwin.png and b/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-2-firefox-darwin.png differ
diff --git a/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-2-webkit-darwin.png b/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-2-webkit-darwin.png
index a353b025..d777b9e9 100644
Binary files a/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-2-webkit-darwin.png and b/test-suites/wrapper/__screenshots__/update.test.ts/updates-correctly-2-webkit-darwin.png differ
diff --git a/test-suites/wrapper/render.test.ts b/test-suites/wrapper/render.test.ts
index 534e2e20..0dda4c7c 100644
--- a/test-suites/wrapper/render.test.ts
+++ b/test-suites/wrapper/render.test.ts
@@ -3,4 +3,20 @@ import { test, expect } from '@playwright/test'
 test('renders correctly', async ({ page }) => {
 	await page.goto('/')
 	await expect(page).toHaveScreenshot()
+
+	const flow = await page.getByTestId('flow')
+	expect(await flow.getAttribute('role')).toBe('img')
+	expect(await flow.getAttribute('aria-label')).toBe(':US$42.00/mo')
+
+	// Check for parts
+	await expect(page.locator('[part~=left]')).toBeAttached()
+	await expect(page.locator('[part~=currency]')).toBeAttached()
+	await expect(page.locator('[part~=number]')).toBeAttached()
+	await expect(page.locator('[part~=integer]')).toBeAttached()
+	await expect(page.locator('[part~=fraction]')).toBeAttached()
+	await expect(page.locator('[part~=integer-digit]')).toHaveCount(2)
+	await expect(page.locator('[part~=fraction-digit]')).toHaveCount(2)
+	await expect(page.locator('[part~=digit]')).toHaveCount(4)
+	await expect(page.locator('[part~=suffix]')).toBeAttached()
+	await expect(page.locator('[part~=right]')).toBeAttached()
 })
diff --git a/test-suites/wrapper/update.test.ts b/test-suites/wrapper/update.test.ts
index 7d19c0f9..43db92e2 100644
--- a/test-suites/wrapper/update.test.ts
+++ b/test-suites/wrapper/update.test.ts
@@ -11,9 +11,12 @@ test('updates correctly', async ({ page }) => {
 	page.on('console', (msg) => logs.push(msg.text()))
 
 	await page.getByRole('button', { name: 'Change and pause' }).click()
-	await page.getByText('152,00 $US').waitFor()
 	await expect(page).toHaveScreenshot({ animations: 'allow' })
 
+	const flow = await page.getByTestId('flow')
+	expect(await flow.getAttribute('role')).toBe('img')
+	expect(await flow.getAttribute('aria-label')).toBe(':US$152.00/mo')
+
 	await page.getByRole('button', { name: 'Resume' }).click()
 	await expect(page).toHaveScreenshot({ animations: 'allow' })