---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 32
titulo: "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"
sequencia: 34 de 98
bytes_do_corpo: 5585
md5_do_corpo: fb59f9f7b8a730fa9e454be41b28b2d0
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
---
## 32. 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 com `delayMs` anti-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 (informativo `role="img"`+`aria-label` × decorativo sem role/label; `img` interno sempre `alt=""`; avatar nunca focável por si), EUI (iniciais inteligentes máx. 2; `type` user×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

1. 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.)*

---