0. Fundamentos de componente

Em uma frase: Toda cor vem de token semântico; todo componente interativo tem os seis estados, foco visível e alvo de 44 px.

Vocabulário desta seção: os seis estados · focus-visible

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. Nos campos, o nome acessível (<label for>) e a ordem em que erro e ajuda são anunciados vêm do form-field (§2.9).
4. Alvo de toque ≥44×44px no tamanho padrão. ⚠ Este número é regra da SEED, mais rígida que a norma — não o cite como exigência dela. O piso normativo é menor: o critério SC 2.5.8 Target Size (Minimum), de nível AA na WCAG 2.2 e na ABNT NBR 17225:2025, pede 24×24 px; os 44×44 são o SC 2.5.5 (Enhanced), de nível AAA, e a recomendação das plataformas móveis. A casa adota os 44 porque o material dela é operado em campo, no celular, muitas vezes com luva. (Corrigido em 2026-09-10, PB-P8: esta linha dizia "(WCAG 2.2 / mobile)" e fazia o leitor atribuir os 44 à norma — o mesmo número com o rótulo errado, contradizendo o seed-praticas.md §12 e §18, que já registravam os 24×24.) 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.

---