Componentes
22. Chip
seed-componentes.md v1.43 · §22seção 24 de 9822-chip-estavel-validado-pelo-rafael-em-2026-08-04.md · MD5 430ec816Título completo no canon: 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#
- 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.)
Também cita o §22: banco-dataviz-dg, banco-escolha, tela-detalhe, tela-gantt, tela-quadro, tela-referencia.