---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 34
titulo: "Tabs — `estável` (v0.36) · TB1–TB8 · Bloco 5/5A · suite `suite-navegacao.mjs` 27/27 ✓ · regressão 318 verdes · gate visual aprovado 2026-08-06"
sequencia: 36 de 98
bytes_do_corpo: 6598
md5_do_corpo: ef740ee89f58f3dbda94595ebae8ec2d
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
---
## 34. Tabs — `estável` (v0.36) · TB1–TB8 · Bloco 5/5A · suite `suite-navegacao.mjs` 27/27 ✓ · regressão 318 verdes · gate visual aprovado 2026-08-06

> **Base (3 rodadas encadeadas, 2026-08-06, ~24 fontes):** R1 — **GOV.UK Tabs (íntegra: usar para usuários frequentes de sistema; NUNCA navegação de página; fragmento na URL guarda a aba e o back funciona; do not disable; sem quebra de linha; heading no painel duplicando o rótulo; matriz tabs×accordion×details)**, **NN/g "Tabs, Used Right"** (alternar vistas do MESMO contexto; 1 linha; rótulos claros; ícone sempre com rótulo), **NN/g "Tabs vs. Accordions"** (tabs = poucas seções longas; accordion = muitas curtas), ONS (nada crítico escondido em aba), Carbon usage+accessibility (rolagem com setas; 2 tab-stops; wrap; line×contained), Spectrum tabs-overflow (não truncar rótulo). R2 — Radix Tabs (`activationMode`; shadcn herda), React Aria (`keyboardActivation`), issue Radix #2915 (espaço em modo manual — bug de campo), comparativo MUI/PrimeReact/Radix/React Aria (anatomia converge no APG). R3 — **APG Tabs Pattern (íntegra: automática recomendada com painéis pré-carregados sem latência; manual quando não — o critério é latência; teclado completo; tabpanel `tabindex=0` sem focável inicial)**, AcceDe Web, a11y-collective (manual quando a troca tem consequência pesada), **Fiori Icon Tab Bar (contador inline "(N)" após o rótulo, nunca acima; aba-filtro exige contador; overflow em menu; title case; cor semântica nunca decorativa)**, Inclusive Components (base do GOV.UK). Consolidado aprovado pelo Rafael em 2026-08-06.

### 34.1 Decisões TB1–TB8

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| TB1 | **Papel e fronteira tríplice — RESOLVE AC5:** tabs alternam vistas do MESMO contexto, mesma hierarquia, sem ordem. Régua: poucas seções longas + troca rápida + 1 por vez = **tabs §34** · muitas seções curtas / leitura em ordem / mais de uma aberta = **accordion §29** · conteúdo a COMPARAR = não esconda · passos sequenciais = **stepper §38** · trocar de página = **shell F6 (link + `aria-current`), nunca tabs** | NN/g vs-accordions; GOV.UK (matriz + "não use como navegação"); subux | Escolha livre do consumidor (o AC5 existia por falta de régua) |
| TB2 | **Anatomia APG integral:** `tablist` nomeado + `tab` button (`aria-selected`, `aria-controls`) + `tabpanel` (`aria-labelledby` recíproco, `tabindex=0` quando não abre com focável). **Deep-link recomendado**: aba corrente no fragmento da URL nas páginas de detalhe do ERP (back/refresh funcionam); mecânica de rota = produto/Lovable | APG; GOV.UK (fragmento + back — dor real de sistema interno) | `role="tab"` em link de navegação (mentira semântica) |
| TB3 | **Dois regimes de ativação com régua objetiva:** **automática** (default) quando o painel está pré-carregado; **manual** OBRIGATÓRIO quando o painel carrega sob demanda (setas movem foco; Enter/Espaço ativa). Painel lazy entra com skeleton (Régua de Espera). O critério é latência, nunca gosto | APG literal; React Aria/Radix expõem exatamente os 2 modos | Regime único; escolha estética por produto |
| TB4 | **Teclado APG:** 1 tab-stop (roving: só a selecionada `tabindex=0`); ←→ com wrap; Home/End; Tab sai para o painel. **Vertical fora do escopo v1** (fronteira: `aria-orientation` + ↑↓ se surgir demanda) | APG + Carbon | Vertical na v1 (sem demanda) |
| TB5 | **Variante única: LINHA** — selecionada com indicador 3px `action-primary` + peso 700 + cor; não-selecionada peso 600 `text-secondary`. Três sinais; grayscale sobrevive por barra+peso | Regra do um; contained do Carbon serve à grade IBM, sem paralelo aqui; escada de mecanismos do B1 | Variante contida (emenda futura com pesquisa própria, se houver demanda); selecionada só por cor |
| TB6 | **Overflow por ROLAGEM** com fade + setas no desktop (visíveis só com overflow; `tabindex=-1` — a navegação primária é pelas setas do teclado no tablist); toque = momentum nativo. **Rótulo nunca trunca nem quebra linha.** Editorial: ≤6 abas | Carbon+Fiori (rolagem); Spectrum (não truncar); GOV.UK/NN/g (multi-linha = complexidade excessiva) | Menu "Mais" do Fiori (esconde abas; rolagem mantém tudo no polegar); truncamento+tooltip do Carbon (rótulo ilegível é falha editorial) |
| TB7 | **Conteúdo:** rótulo 1–2 palavras title case (nunca caixa alta); ícone opcional SEMPRE com rótulo; **contador inline via badge §21 obrigatório em aba-filtro de lista** (decorativo declarado; o total pertence ao conteúdo do painel); **heading no início de cada painel duplicando o rótulo** | Fiori (inline, nunca acima; filtro exige contador; title case); NN/g; GOV.UK (heading no painel) | Contador acima do rótulo; ícone-só |
| TB8 | **PROIBIDO desabilitar aba** — sem estado disabled na spec: remova a aba ou explique a ausência dentro do painel. **Divergência declarada com Carbon** | GOV.UK; coerência com a linha do DS desde B1/B2 (desabilitado esconde o porquê) | disabled à la Carbon (beco sem saída) |

### 34.2 Anatomia, tokens e fronteiras

Aba: `min-height` 44px, padding 10/14, radius 6 no topo; **anel de foco interno (offset -2px — errata: containers com overflow recortam anel externo)**; indicador 3px `action-primary` sobre a borda inferior do tablist (`border-subtle`). Selecionada: `text-primary` 700; repouso: `text-secondary` 600; hover: `list-hover`. Contador: badge §21 neutro em JetBrains Mono. Skeleton: §19. **Nenhum par novo** — indicador tq-600/branco 4.60 (não-textual ≥3:1 ✓) e tq-300/dark-page 9.32; textos ci-900/ci-700/branco e ci-100/ci-300/dark já medidos (§26/§28). Fora do DS: shell de navegação (F6) · roteamento/keep-alive do estado do painel (produto) · abas fecháveis/reordenáveis (sem demanda; se surgir, pesquisa própria — APG aria-actions ainda experimental) · orientação vertical (fronteira TB4).

### 34.3 Os 7 testes

1. Nenhum par novo; herdados medidos ✓. 2. Selecionada = barra+peso+cor (nunca só cor). 3. Grayscale: barra+peso carregam. 4. Automático × manual a 1s (o skeleton denuncia o lazy). 5. Regra do um: uma variante, um indicador, um tab-stop. 6. Estado visível sem interação (indicador + peso). 7. 360px: alvos 44px, rolagem por toque, rótulos íntegros. *(Suite 5A 27/27 ✓, console limpo; regressão total 318 verdes; gate visual do Rafael aprovado em 2026-08-06 — overflow/rolagem, indicador renderizado, grayscale, skeleton, deep-link em browser real.)*

---