# Contador animado (`contador`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Números grandes com rótulo que sobem até o valor quando aparecem na tela. Formato brasileiro, prefixo, sufixo e casas decimais.

- **Categoria:** Interativos
- **Equivalente no Elementor:** Contador (Counter)
- **Arquivos:** `contador.html`, `contador.css`, `contador.js`
- **Precisa de JavaScript:** sim (inicia por `data-ds-contador`, `data-ds-pronto`)

## Quando usar
- Provas em número: alunos, clientes, anos, nota média, resultado medido

## Quando não usar
- Número que não é real ou não pode ser comprovado
- Número pequeno que não impressiona (mostre outra prova)

## Variações
- **Prefixo e sufixo:** data-ds-prefixo="+" e data-ds-sufixo="%"
- **Decimal:** data-ds-casas="1"
- **Duração:** data-ds-duracao="milissegundos" (padrão 1600)
- **Grade:** 2 colunas no celular, 4 no computador

## Conteúdo esperado
- 2 a 4 números reais do projeto
- Rótulo curto de cada número
- No HTML, o valor final já formatado

## Acessibilidade
- Lista de definição (<dl>): rótulo e número ficam ligados
- aria-label com o valor final: leitor de tela não ouve a contagem
- Sem animação com prefers-reduced-motion
- Sem JS mostra o valor final

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/contador/contador.css">
<script src="componentes/contador/contador.js" defer></script>
```

Tokens do contrato usados: `--ds-altura-linha-titulo`, `--ds-borda-largura-forte`, `--ds-cor-acento`, `--ds-cor-texto-suave`, `--ds-cor-titulo`, `--ds-espaco-1`, `--ds-espaco-4`, `--ds-espaco-6`, `--ds-fonte-impacto`, `--ds-tamanho-h2`, `--ds-tamanho-numero`, `--ds-tamanho-pequeno`.

## Notas

Regra dos projetos: só números do próprio projeto, com fonte.