Componentes

34. Tabs

estávelseed-componentes.md v1.43 · §34seção 36 de 9834-tabs-estavel-v0-36-tb1-tb8-bloco-5-5a-suite.md · MD5 ef740ee8

Título completo no canon: 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#

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

BancadaSEED DS v2 — Bloco 5 Navegação — preview v0.40c (5A tabs · 5B menu · 5C breadcrumb+paginação · 5D stepper · 5E ⌘K)abrir em página própria ↗

Também cita o §34: banco-escolha, tela-configuracoes.