Animated Number

AnimatedNumber renders as an inline span with numeric typography. It is not a heading and must not replace semantic structure provided by parent components such as MetricCard. The NumberFlow visual custom element and the static non-finite visual string are hidden from assistive technology; the formatted screen-reader layer is the single semantic source.

When the user prefers reduced motion, values snap to the target with no NumberFlow transition. Do not bypass this by forcing non-zero durations in product code.

Locale or format-option changes also snap to the newly formatted target on that render. Digits must not spin from a stale display value through the new format.

Delta magnitudes on MetricCard must not use polite live; direction semantics belong in the delta label exposed to assistive technology.

NumberFlow applies a persistent parent-edge alpha mask during digit motion. Settled glyphs remain fully visible; moving digits fade at the edges. The mask does not replace contrast requirements for settled punctuation or static glyphs.

AnimatedNumber is not interactive. Clickable KPI tiles use MetricCard with a native action target instead of wrapping the animated value.