---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 22
titulo: "Chip — `estável` · validado pelo Rafael em 2026-08-04 (preview v0.19; suite C)"
sequencia: 24 de 98
bytes_do_corpo: 4781
md5_do_corpo: 430ec816788a925dc060ded02f9d4abb
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
---
## 22. Chip — `estável` · validado pelo Rafael em 2026-08-04 (preview v0.19; suite C)

> **Base:** R1 — Carbon tag (read-only/dismissible/selectable/operational; borda sinaliza interatividade; nunca link; nunca multifunção), M3 chips com página de a11y primária (4 tipos; indicador secundário de interatividade; 2 focusables no máximo; reflow vs menu; Delete no teclado físico), Angular Material (setas+Delete; checkmark não se esconde; nunca aninhar interativos). R2 — React Aria TagGroup (padrão GRID ARIA: setas/home/end, remoção por botão ou Backspace, gestão de foco, anúncios em live region — extensivamente testado em AT), shadcn/stack. R3 — WCAG 2.5.8 (alvo mínimo 24×24 AA), gov.br tag (PT-BR), BC Design System (tag = React Aria TagGroup estilizado).

### 22.1 Decisões W1–W8

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| W1 | 3 tipos SEED: **filtro** (selecionável, alternativa a grupo de checkbox/switch), **entrada** (dismissível, valor inserido pelo usuário — o multi-select do combobox §11 consumirá este) e **ação contextual** (raro; ação primária/recorrente = botão §1). "Suggestion" do M3 DESCARTADO (predição/chat sem caso no ERP; o tipo ação cobre se surgir) | M3 (tipos e critérios); chips aparecem dinamicamente em grupo, botões aparecem consistentemente | Os 4 tipos do M3 |
| W2 | Interatividade VISÍVEL: chip tem borda + cursor + hover/pressed que o badge NUNCA tem | Carbon (borda no container sinaliza interatividade de relance); M3 (indicador secundário exigido para baixa visão/cognitivo) | Chip com cara de badge |
| W3 | Filtro selecionado = **checkmark visível** + mudança de cor — nunca só cor | Angular Material: esconder o checkmark degrada a identificação visual do selecionado | Seleção só por preenchimento |
| W4 | Remoção: X com `aria-label="Remover {valor}"`; alvo do X ≥**24×24** (WCAG 2.5.8) no desktop denso; em superfície touch, hitbox estendida ≥44px INVISÍVEL (pseudo-elemento) — visual compacto, alvo generoso | ODG (aria-label nomeando o valor; remoção anunciada); WCAG 2.5.8 | X 16px sem hitbox; chip de 44px de altura (mata a densidade) |
| W5 | Teclado = padrão GRID (React Aria): grupo ROTULADO; setas navegam (roving tabindex); Delete/Backspace remove o focado; após remover, foco → chip SEGUINTE (anterior se era o último; grupo/campo se esvaziou); live region ÚNICA do grupo anuncia ("Filtro Coelba removido") — regime discreto 1.13-b | React Aria TagGroup; Angular | Cada chip como tab-stop (Tab-maratona); foco morto pós-remoção |
| W6 | Touch: X SEMPRE visível — **divergência declarada do M3** (que dispensa o X quando remover é a única ação, via tecla Delete — pressupõe teclado físico; no toque não existe Delete: sem X, sem caminho) | M3 lido contra o contexto (ERP mobile = dedo) | M3 literal (beco sem saída no touch) |
| W7 | Overflow: default **reflow** (todos visíveis, empurrando conteúdo — filtro ativo nunca se esconde); variante densa "+N" abre a lista em popover — ESBOÇADA, spec final espera o §popover (sub-bloco D; ponta declarada) | M3 (reflow vs menu; exibir todos sem rolagem) | Rolagem horizontal de chips (esconde filtros ativos — mortal em ERP) |
| W8 | Proibições: chip nunca é LINK para outra página; nunca multifunção (máx.: corpo selecionável + X = 2 focusables); nunca aninhar controles dentro | Carbon; M3 (2 focusables); Angular (não aninhar) | Chip-canivete |

### 22.2 Anatomia e tokens

Altura 28px (denso) / 32px (confortável), radius 999, borda 1px em **cinza-600** (token de componente `chip-border`; par light 4.74 e dark 3.60, ambos ≥3:1 — o `border-default` cinza-300 REPROVOU com 1.91 na medição e foi descartado: a borda é o sinal de interatividade do W2, não decoração), texto `--seed-text-primary`, fundo `--seed-surface-page`; hover: fundo `--seed-surface-subtle`; selecionado (filtro): fundo `--seed-action-primary-bg`, texto `--seed-action-primary-text`, checkmark 14px; X: ícone 14px em botão de 24×24 com hitbox touch estendida; focus ring padrão. Grupo: flex com wrap (reflow W7), gap 8px, rótulo visível ou aria-label.

### 22.3 Os 7 testes

1. Borda do chip: cinza-600 medido — 4.74 light / 3.60 dark ✓ (cinza-300 reprovado com 1.91); selecionado branco/tq-600 4.60 ✓; numérico branco/ve-500 4.30 ✓ (não-textual/negrito 12px); neutro ci-700/ci-100 5.43 ✓. 2. Seleção por checkmark+cor; remoção por X+anúncio. 3. Grayscale: checkmark e borda carregam. 4. Filtro × entrada a 1s (checkmark × X). 5. Uma live region por grupo. 6. Selecionado visível sem interação. 7. 360px: reflow empilha; X com hitbox 44 tocável de polegar. *(Verificado: suite v0.19, aprovado.)*

---