---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 16
titulo: "Banner — `estável` · validado pelo Rafael em 2026-08-04 (preview v0.15 + suite; P2 em dois níveis, corrigido na verificação primária)"
sequencia: 18 de 98
bytes_do_corpo: 4167
md5_do_corpo: f8f2db8ee94cfde0b8bdb9faafe7c02c
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
---
## 16. Banner — `estável` · validado pelo Rafael em 2026-08-04 (preview v0.15 + suite; P2 em dois níveis, corrigido na verificação primária)

> **Base:** a mesma do §15, com peso em GOV.UK notification banner (primária: posicionamento pré-h1, largura de conteúdo, mecânica de foco type=success), USWDS site alert (cor em emergência), Atlassian banner (system-level, empurra conteúdo), NN/g banner blindness (via GOV.UK/NHS).

### 16.1 Papel — DOIS níveis, nunca misturados (P2 revisado)

A verificação primária expôs que "banner" no mercado são dois componentes: o GOV.UK notification banner tem **largura do conteúdo da página e vive imediatamente antes do h1**; o banner Atlassian/USWDS site alert é **full-width no topo da viewport**. A SEED formaliza os dois níveis num componente só com variante estrutural:

- **Banner de sistema** (`--nivel-sistema`): full-width, topo da viewport, EMPURRA o conteúdo (nunca sobrepõe — cobriria header/nav do ERP). Só para condição do sistema/serviço inteiro: indisponibilidade, manutenção, emergência. Raro por definição.
- **Banner de página** (`--nivel-pagina`): largura do conteúdo, imediatamente antes do h1. Para notícia relevante à página inteira ou **desfecho pós-redirect** ("proposta enviada" → volta pra listagem) quando não cabe página de confirmação.

Descartado: banner de página como variante do alerta (§15) — a mecânica ARIA é diferente (P4) e a posição é fixa (pré-h1), não contextual.

### 16.2 Decisões P1–P5

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| P1 | UM banner por vez, por nível; se concorrem, exibe só o de maior severidade (erro > atenção > informação > sucesso); mensagens combináveis combinam antes | GOV.UK primária: evitar mais de um — combinar ou mostrar só a maior prioridade; NN/g banner blindness: uso excessivo agrava a cegueira | Empilhar banners (mata a atenção) |
| P2 | Dois níveis (§16.1); nível de sistema nunca sobrepõe conteúdo | GOV.UK (página) + Atlassian/USWDS (sistema) — ver §16.1 | Full-width único para tudo (era o P2 original, corrigido) |
| P3 | Banner é landmark: `role="region"` + `aria-labelledby` no título — navegável por leitores de tela; persiste até resolução/dispensa; dispensa não reaparece na sessão | GOV.UK primária (markup exato); USWDS: aria-label(ledby) coloca o banner no menu de landmarks | Live region permanente (banner não é anúncio contínuo) |
| P4 | **Banner de página pós-redirect (sucesso/erro de ação): `role="alert"` + foco movido ao banner via JS no load** (`tabindex="-1"` + `focus()`), com opção de desligar; banner informativo: `role="region"`, sem foco. Remover o banner de sucesso ao navegar | GOV.UK primária: type=success → role="alert" + JS move o foco no load (existe `disableAutoFocus`); garante que AT perceba o desfecho | Foco em todo banner (rouba o início da leitura); autofocus HTML (dispara antes do AT montar) |
| P5 | Cor: mesmo emergência NÃO usa vermelho massivo full-width — a posição já carrega o peso; severidades T1; segue 70/20/10 da marca | USWDS: vermelho/laranja pesado em emergência produz medo/pânico; posição no topo já dá peso suficiente; vermelho é interface-only e nunca massa (tokens v1.2) | Banner vermelho sólido |

### 16.3 Anatomia e tokens

Mesma pele do alerta (§15.3: fundo -bg, borda, barra 4px, ícone, título T5-b) com as diferenças estruturais: nível sistema é full-bleed (barra lateral vira **barra superior 4px**, padding lateral acompanha o gutter do layout + `--seed-safe-*` em app); nível página respeita a largura da coluna de conteúdo (GOV.UK: se o conteúdo ocupa dois terços, o banner ocupa dois terços). Fechar 44×44 quando dismissível (P3).

### 16.4 Os 7 testes

1. Borda/contraste medidos. 2. 3 sinais. 3. Grayscale: barra + ícone. 4. Sistema × página distinguíveis a 1s (full-bleed × coluna). 5. Um por nível (P1). 6. Visível sem interação. 7. 360px: os dois níveis convergem visualmente (a coluna É a tela), texto quebra sem truncar. *(Verificado: suite v0.15, aprovado.)*

---