Number Flow

---
/**
 * NumberFlow — digits roll to a new value. Every digit is a column of 0–9
 * translated to the right row; the value lives in one custom property
 * (--ma-nf-value) and each column derives its own digit from it with round()
 * and mod(), so writing that property from your code rolls every column to
 * its new digit on the preset spring, and leading columns collapse when the
 * number gets shorter. No script of its own. The server also renders the
 * value as text, which is what browsers without CSS math show.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';

interface Props extends HTMLAttributes<'span'> {
  /** Initial value, ≥ 0. Later values come from `--ma-nf-value` on the element or any ancestor. */
  value: number;
  /** Element to render. */
  as?: HTMLTag;
  /** Integer columns to keep room for; leading zeros collapse, so this is headroom, not padding. */
  digits?: number;
  /** Decimal places, 0–4. */
  decimals?: number;
  /** Thousands separator. */
  separator?: string;
  /** Decimal mark. */
  decimal?: string;
  /** Text before the number. */
  prefix?: string;
  /** Text after the number. */
  suffix?: string;
  /** Roll duration in ms. Unset: the preset's --ma-duration. */
  duration?: number;
}

const { value, as: Tag = 'span', digits = 1, decimals = 0, separator = ',', decimal = '.', prefix = '', suffix = '', duration, class: className, style, ...rest } = Astro.props;
const places = Math.max(0, Math.min(decimals, 4));
const abs = Math.max(0, value);
const fixed = abs.toFixed(places);
const [intPart, fracPart] = fixed.split('.');
const intCols = Math.max(1, digits, intPart!.length);
const label = `${prefix}${intPart!.replace(/\B(?=(\d{3})+(?!\d))/g, separator)}${fracPart ? decimal + fracPart : ''}${suffix}`;
// column k shows the digit at 10^k of the value scaled to an integer (value × 10^decimals); highest first
const cols = Array.from({ length: intCols + places }, (_, i) => intCols + places - 1 - i);
const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const vars = [`--ma-nf-init:${abs}`, `--ma-nf-scale:${10 ** places}`, duration !== undefined && `--ma-nf-dur:${duration}ms`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<Tag class:list={['ma-nf', className]} data-value={abs} style={vars} {...rest}>
  <span class="ma-nf__static">{label}</span>
  <span class="ma-nf__digits" aria-hidden="true">
    {prefix}
    {cols.map((k) => {
      const p = k - places;
      return (
        <>
          {p === -1 && <span class="ma-nf__mark">{decimal}</span>}
          <span class="ma-nf__col" data-lead={p > 0 ? '' : undefined} style={`--ma-nf-k:${10 ** k}`}>
            <b class="ma-nf__strip">{DIGITS.map((d) => <i>{d}</i>)}</b>
          </span>
          {p > 0 && p % 3 === 0 && <span class="ma-nf__mark" data-lead style={`--ma-nf-k:${10 ** k}`}>{separator}</span>}
        </>
      );
    })}
    {suffix}
  </span>
</Tag>

<style is:global>
  @layer components {
    :where(.ma-nf) {
      display: inline-block;
      font-variant-numeric: tabular-nums;
      /* the live value: --ma-nf-value from your code or an ancestor, else the server's */
      --ma-nf-v: var(--ma-nf-value, var(--ma-nf-init, 0));
      --ma-nf-int: round(nearest, var(--ma-nf-v) * var(--ma-nf-scale, 1), 1);
    }
    /* the columns are presentation: not selectable, so a copy takes the value text instead of ten digits per column;
       and a number reads left to right on a right-to-left page too, where the flex row put its columns back to front */
    :where(.ma-nf__digits) {
      display: none;
      direction: ltr;
      -webkit-user-select: none;
      user-select: none;
    }
    /* the columns need round() and mod(); elsewhere the static text stays */
    @supports (translate: calc(mod(round(down, 7, 1), 10) * 1em)) {
      /* still the text a screen reader reads (and a copy copies): hidden from the eye only */
      :where(.ma-nf__static) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }
      :where(.ma-nf__digits) {
        display: inline-flex;
        align-items: baseline;
      }
    }
    :where(.ma-nf__col),
    :where(.ma-nf__mark) {
      --ma-nf-hi: round(down, var(--ma-nf-int) / var(--ma-nf-k, 1), 1);
    }
    :where(.ma-nf__col) {
      display: inline-block;
      height: 1em;
      line-height: 1;
      clip-path: inset(0);
      --ma-nf-d: mod(var(--ma-nf-hi), 10);
    }
    :where(.ma-nf__strip) {
      display: grid;
      font-weight: inherit;
      translate: 0 calc(var(--ma-nf-d) * -1em);
      transition: translate var(--ma-nf-dur, var(--ma-duration)) var(--ma-ease);
    }
    :where(.ma-nf__strip > i) {
      display: block;
      height: 1em;
      line-height: 1;
      font-style: normal;
    }
    /* leading columns (and the separator after them) collapse while the number is shorter */
    :where(.ma-nf__col[data-lead]),
    :where(.ma-nf__mark[data-lead]) {
      max-width: calc(min(1, var(--ma-nf-hi)) * 2ch);
      overflow: clip;
      transition: max-width var(--ma-nf-dur, var(--ma-duration)) var(--ma-ease);
    }
    :where(.ma-nf__col[data-lead]) {
      transition:
        max-width var(--ma-nf-dur, var(--ma-duration)) var(--ma-ease),
        translate var(--ma-nf-dur, var(--ma-duration)) var(--ma-ease);
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-nf__strip),
      :where(.ma-nf__col[data-lead]),
      :where(.ma-nf__mark[data-lead]) {
        transition: none;
      }
    }
  }
</style>