---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 00
titulo: "Fundamentos de componente (valem para todos os blocos)"
sequencia: 2 de 98
bytes_do_corpo: 2917
md5_do_corpo: 9a87a77f3312b5f8396356fc7cfa90fd
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 0. Fundamentos de componente (valem para todos os blocos)

1. **Toda cor via token semântico** (`--seed-action-primary`), nunca primitivo, nunca hex. Dark mode vem de graça.
2. **Estados obrigatórios em todo componente interativo:** default · hover · active/pressed · focus-visible · disabled · loading (quando houver operação assíncrona). Componente sem os 6 documentados não é "pronto".
3. **Foco sempre visível:** `box-shadow: var(--seed-focus-ring)` — nunca `outline: none` sem substituto.
4. **Alvo de toque ≥44×44px** no tamanho padrão (WCAG 2.2 / mobile). Tamanhos densos (sm) são para interfaces desktop de alta densidade.
5. **Motion produtivo:** transições de estado usam `--seed-dur-productive-fast` (100ms) com `--seed-ease-productive`. Nada de animação expressiva em micro-interação.
   - ⭐ **`--seed-ease-out` = `cubic-bezier(.2,.8,.4,1)`** — FIXADO em 2026-08-26, por medição. Esta spec o usava **quatro vezes** (thumb do switch 120 ms · toast 160 ms · barra de progresso 200 ms · modal/drawer) e **nunca dizia o valor**, então o acervo tinha dois: `.2,.8,.4,1` em 3 artefatos e `.2,.7,.3,1` em 2.
   - ⚠ **A medição mostrou que os dois são a mesma curva.** Resolvendo o bézier em 21 instantes de um movimento de 120 ms, a diferença máxima é **1,5% do percurso** e, em tempo, **0,3 ms**. A 60 Hz um quadro dura 16,7 ms — **0,3 ms é 1/56 de um quadro.** *Não existe monitor onde essa diferença apareça.* Escolheu-se a de maior uso, que também é a que faz o conserto ser de 2 arquivos e não de 3.
   - ⭐⭐ **E o mesmo teste respondeu a pergunta que ninguém tinha feito: `--seed-ease-out` deve existir, ou era apelido de `--seed-ease-productive`?** Contra o `productive`, a diferença é **36,8% do percurso e 24,9 ms** — quase um quadro e meio, **83 vezes maior** que a diferença entre as duas candidatas. *São curvas diferentes de verdade, então o token merece existir.* Sem o número, essa pergunta se responderia por gosto.
6. **Status de maturidade** por componente: `rascunho` → `estável` → `depreciado`.
7. **Microcopy é parte do componente** — cada spec define as regras de texto no tom SEED (direto, acolhedor, sem floreio).
8. **Responsivo por padrão (v0.7 — diretriz de paridade mobile/app, 2026-08-02).** Todo componente especifica seu comportamento em superfície de toque: o que empilha, o que vira full-width, o que muda de tamanho. Largura sempre fluida dentro do layout (breakpoints oficiais nos tokens v1.2 §2.9; pior caso de teste: 360px). **Hover é progressivo, nunca portador único de informação** — não existe hover no toque; toda informação apresentada em hover precisa de equivalente acessível por toque/foco. Campos usam `--seed-fs-field-touch` (16px) em `pointer: coarse`. Motivo: apps serão produzidos e o uso mobile supera o desktop; nenhum bloco nasce desktop-first.

---