Componentes
32. Avatar
seed-componentes.md v1.43 · §32seção 34 de 9832-avatar-estavel-v0-32-av1-av5-validacao.md · MD5 fb59f9f7Título completo no canon: Avatar — estável (v0.32) · AV1–AV5 · validação executada 246/246 + visual aprovada em 2026-08-05 (1 ciclo de crítica) · Bloco 4 fechado 7/7
Base (3 rodadas, 2026-08-05): R1 — Atlassian/AUI (avatar de pessoa E entidade — "projetos, repositórios, espaços"; badge sobreposto exige descrição textual; "quando agrupado com texto que o descreve, é efetivamente decorativo"), Polaris (escala de tamanhos; formatos de alt: nome da pessoa/empresa;
alt=""com nome adjacente), Zuora (forma consistente por produto). R2 — Radix Avatar (Image só renderiza carregada; Fallback comdelayMsanti-flash ~600ms), shadcn (AvatarGroup/AvatarGroupCount; "parseie nomes direito: John Smith → JS, não JO"), Radix Themes (ícone como fallback final). R3 — W3C WAI decorative images (primária: alt repetindo nome adjacente = "ruído audível"), eBay evo (informativorole="img"+aria-label× decorativo sem role/label;imginterno semprealt=""; avatar nunca focável por si), EUI (iniciais inteligentes máx. 2;typeuser×space; contraste gerenciado).
32.1 Decisões AV1–AV5#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| AV1 | Fallback em cadeia: imagem → iniciais → ícone genérico. Imagem só renderiza carregada; fallback com atraso ~600ms anti-flash. Iniciais PT-BR: 1ª do primeiro + 1ª do ÚLTIMO nome, máx. 2, maiúsculas, ignorando partículas (da, de, do, dos, das, e) — "João da Silva"→JS. Ícone só sem nome | Radix/shadcn; regra de partículas é nossa (sem equivalente no canon — PT-BR first) | 2 primeiras letras do primeiro nome |
| AV2 | Cor: NEUTRO ÚNICO (fundo cinza de superfície + iniciais em texto), sem hash de cor por nome. Pares MEDIDOS: iniciais 5.43 AA light (ci-700/ci-100) · 8.07 AAA dark (ci-100/#38464F); ícone 3.93/8.07 ✓ | T1–T5 reservou cores p/ severidade — avatar vermelho ao lado de badge §21 real fabricaria falsa leitura de status no ERP denso; grayscale nasce ✓ | Hash de cor (EUI dataviz); cores de severidade; turquesa de fundo (70/20/10) |
| AV3 | Forma distingue o quê: círculo = pessoa · quadrado arredondado (radius 8) = entidade (UC, empresa, projeto), consistente por produto. Tamanhos: sm 24 · md 32 (= slot leading da lista, LS2) · lg 40 · xl 64 | Atlassian/EUI (user×space); Zuora (consistência); pessoa×UC é informação real de varredura no ERP | Forma única |
| AV4 | Nunca focável nem interativo por si; decorativo é o caso dominante: nome adjacente (lista/comentário/header) → img alt="", sem role/label (o texto carrega). Informativo só quando sozinho → role="img"+aria-label com o NOME. Badge sobreposto exige descrição textual do estado. Interação pertence ao pai (linha/botão) |
W3C WAI (primária); eBay evo; Polaris; AUI | alt genérico ("avatar do usuário" — pior que vazio); avatar-link |
| AV5 | Grupo/stack: anel da superfície (decorativo), máx. 3 visíveis + contador "+N" REAL — botão com rótulo ("mais N pessoas") + aria-expanded, herdando o padrão de overflow do W7 (§22): abre popover §24 com lista §28 contendo TODOS os nomes do grupo (não só os ocultos) e com light-dismiss integral (clique-fora e Esc, com retorno de foco ao +N); os empilhados ficam aria-hidden porque os nomes vivem na lista — o que EXIGE lista completa. Emenda do gate visual (2026-08-05, crítica do Rafael): a 1ª versão listava só os ocultos, quebrando a própria racional da decisão (leitor de tela nunca receberia os 3 primeiros nomes — WAI: experiência equivalente = os nomes) e omitia o clique-fora que o §24 já exige; rótulo do +N corrigido para "Ver todas as N pessoas" |
shadcn AvatarGroup/Count; composição pura W7→§24→§28 — nada novo nasce | Stack infinito; +N texto morto; lista só dos ocultos (emenda) |
32.2 Anatomia e tokens#
Fundo --seed-cinza-100 / dark #38464F (o mesmo par de superfície neutra do skeleton §19) · texto ci-700 / ci-100 (pares acima) · pessoa border-radius:50% · entidade radius 8 · tamanhos 24/32/40/64 com fonte 10/12/14/22 · anel do stack = 2px da superfície do card (decorativo declarado — a contagem real está no +N) · sobreposição −8px · ícone genérico 60% do container. Fora do DS: upload/crop → produto · skeleton circle → §19. Presença/status online é DENTRO do DS desde 2026-08-14 (SUP-2, dispositivo C2 do confronto): o mecanismo é declarado em atributo (data-estado), consome os tokens de feedback existentes e obedece à regra do ouro (sem fill em elemento colorido pequeno e isolado) — anel obrigatório. Registro honesto: uma fronteira estável deste § foi cruzada por artefato (MANIFESTO v6.4) sem supersede escrito; este texto corrige o registro, não muda a decisão. Alternativa descartada: reverter o C2 — o mecanismo já está implementado, medido, e presença sem contrato produziria uma bolinha verde diferente em cada produto da SEED.
32.3 Os 7 testes#
- 4 pares medidos ✓ (5.43/8.07 texto; 3.93/8.07 ícone). 2. Pessoa×entidade por FORMA, não cor. 3. Grayscale: neutro nasce ✓. 4. Pessoa × entidade × contador a 1s (círculo × quadrado × borda+mono). 5. Regra do um: máx. 3 no stack, resto no +N. 6. n/a (não-interativo; +N tem estados de botão §1). 7. 360px: md 32 no slot da lista; +N é alvo de 32 com hitbox herdada — único interativo do conjunto. (Validação executada 246/246 + visual aprovada em 2026-08-05, com emenda AV5 originada no gate visual.)
Também cita o §32: tela-referencia.