{#snippet preview()} {/snippet} {#snippet lede()} La fila de cifras que respalda lo que la página acaba de afirmar. Compone el Metrics del canon para la semántica de KPI y CountUp para la cifra que se cuenta sola al entrar en pantalla — lo único de este tier que ninguna referencia puede shipear, porque todas entregan markup estático. {/snippet} {#snippet controls()} columnas (columns = Number(v[0] ?? columns))} aria-label="columnas" > fluido {#each [2, 3, 4] as value (value)} {value} {/each} count-up (withCount = (v[0] ?? 'sí') === 'sí')} aria-label="contar las cifras" > sí no dir (dir = (v[0] ?? dir) as typeof dir)} aria-label="dirección (solo la vista previa)" > ltr rtl {/snippet} {#snippet composition()} El block coloca y escalona; la semántica de KPI es del Metrics del canon y el conteo, del CountUp. Cifras y palabras son de la app. <section> + Section + Container + AutoGrid con data-stagger: fluido por minChildWidth o con columns fijas. Motion trigger="viewport" envolviendo un Metrics. ES el reveal, así que debe seguir siendo hijo directo de la banda para recibir su índice estructural. Metrics.Value; con count compone CountUp. El formato es locale-aware y reduced-motion salta al valor final — ambas cosas del CountUp, no del block. Metrics.Label. Las palabras, de la app. {/snippet} {#snippet api()} containerSize (def. lg) · sectionSize (def. lg) · columns o minChildWidth (def. 12rem) · gap (def. 8). Todo lo de Metrics: align (def. center — una banda son cifras centradas, no tarjetas de panel), sectionSize (def. lg), live… count (number, opt-in) + countOptions (todo lo de CountUp menos to). Sin count, la cifra la pone la app por children. {/snippet} {#snippet a11y()} El conteo respeta prefers-reduced-motion: salta directo al valor final, sin animar. Lo resuelve el CountUp, no el block. El formato numérico sale de uix.format (separadores por idioma), así que la cifra se lee correcta en cada locale sin que la app la reescriba. Sin encabezados: una banda son datos, no una sección con título. Si la página necesita uno, lo pone alrededor. {/snippet} {#snippet gaps()} Diferido — la banda junto a una foto: otra disposición (2 columnas), que recurre en las refs. Entra como layout o hermano cuando una demo lo pida. Diferido — el Timeline del canon existe; es otra sección, no una banda. App-land — Metrics.Delta se compone dentro del .Stat hoy; re-exponerlo solo añadiría superficie. {/snippet} {#snippet notes()} Una cifra que se anima sin que el lector lo pida es ruido, y algunas no son contables («99,98 %»). Por eso count se pide explícitamente. Ni una palabra ni un separador decimal salen de aquí: las palabras por children, el formato por uix.format dentro del CountUp. {/snippet}