---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 15
titulo: "Alerta — `estável` · validado pelo Rafael em 2026-08-04 (preview v0.15 + suite de 55 testes)"
sequencia: 17 de 98
bytes_do_corpo: 8491
md5_do_corpo: a5ce10e6765a3e16269b95964a229bf0
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
---
## 15. Alerta — `estável` · validado pelo Rafael em 2026-08-04 (preview v0.15 + suite de 55 testes)

> **Base (3 rodadas + verificação primária, 2026-08-04):** R1 — GOV.UK notification banner (fonte primária lida na íntegra), NHS, Carbon notification/callout, USWDS alert (+ testes de acessibilidade publicados), Polaris banner, Atlassian section message/designing messages, Spectrum in-line alert, NN/g (indicators/validations/notifications · error-message guidelines · scoring rubric), APG alert/alertdialog. R2 — shadcn/Radix, GitLab Pajamas, Fluent 2 MessageBar. R3 — WCAG 4.1.3 Status Messages, SAP Fiori message strip/message handling, gov.br DS Message (vocabulário PT-BR), Baymard (confirmação de ação em teste com usuários). Decisões T1–T5 e O1–O5 conferidas pelo Rafael no consolidado de 2026-08-04.

### 15.0 Decisões transversais T1–T5 — taxonomia de severidade (governam §15–§17 e, adiante, badge/chip)

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| T1 | **4 severidades** com os pares já medidos nos tokens v1.2: **informação** (azul: azul-800/azul-50 = 5.79 AA — errata: o tokens v1.2 rotula este par como azul-700; a medição da validação executada mostra que 5.79 pertence ao azul-800) · **sucesso** (turquesa/verde: êxito É verde da marca, decisão v1.1) · **atenção** (dourado: dourado-800/dourado-50 = 9.05 AAA) · **erro** (vermelho interface-only: vermelho-700/vermelho-50 = 6.57 AA). Tokens semânticos: `feedback-{info\|success\|warning\|danger}-{bg\|text\|border\|solid}` | gov.br DS define exatamente estes 4 estados; nenhum sistema pesquisado usa menos | 5ª severidade "neutra" (Spectrum) — o cinza neutro vive como variante da informação, sem token novo |
| T2 | **Vocabulário PT-BR: warning = "atenção"** (informação · sucesso · atenção · erro). Componente = *alerta*; severidade nunca se chama "alerta" | gov.br chama o warning de "Alerta" — colisão direta com o nome do componente ("alerta de tipo alerta" contaminaria spec, código e conversa com cliente). "Atenção" preserva a semântica do C5 | Seguir gov.br literal (colisão); "aviso" (ambíguo entre info e warning) |
| T3 | **Ícone por severidade obrigatório** (2º dos 3 sinais §1.5.1), alinhado ao gov.br: check-circle (sucesso) · exclamation-triangle (atenção) · times-circle (erro) · info-circle (informação). Mesmo mapa valerá para badge/chip | gov.br DS; USWDS testa explicitamente que cor sozinha não carrega significado; rubrica NN/g exige ≥3 indicadores redundantes | Ícone opcional nas variantes semânticas |
| T4 | **Nota 1.13-b** (ver §1.13): mensagens discretas usam o próprio nó visível como live region; container com role existe ANTES do conteúdo | Ver nota; sem ela a suite reprovaria o padrão universal correto | Canal separado também para discretas |
| T5 | **Mapa polite/assertive:** `role="status"` para informação, sucesso e atenção; `role="alert"` SÓ para erro | Leitura canônica do WCAG 4.1.3 (polite para não-urgente, alert para crítico); atenção por definição não bloqueia (C5), então não justifica interromper | Fluent 2 (assertive em tudo exceto info — a própria doc admite que interrompe demais) |
| T5-b | **Títulos de severidade padronizados no serviço inteiro:** "Sucesso", "Atenção", "Erro" — sempre os mesmos, nunca variações criativas | GOV.UK: mesmo heading em todos os banners verdes = WCAG 3.2.4 (identificação consistente) + 1.4.1 (título carrega o significado sem depender de cor) | Título livre por tela |

### 15.1 Papel e fronteiras

Mensagem **contextual e persistente em página**, ligada a uma seção, objeto ou formulário (equivale a inline notification/Carbon, section message/Atlassian, message strip/Fiori, in-line alert/Spectrum). Não é sobreposição (toast §17) nem condição de sistema (banner §16). **Fronteira dura com o B4:** alerta NUNCA substitui o error summary de formulário, nem coexiste com ele (GOV.UK: nunca banner + error summary na mesma página — só o error summary).

### 15.2 Decisões O1–O5

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| O1 | Anatomia: ícone semântico + título opcional (T5-b) + corpo ≤2 linhas (mais que isso → link "ver detalhes") + até 1 ação (botão ghost/link §1) + fechar opcional. Largura fluida do container pai | Carbon: ação ghost, mensagem longa vira "View more"; largura acompanha o container | Alerta-card flutuante (confunde com toast) |
| O2 | Posição: imediatamente ACIMA da seção/objeto a que se refere. Nunca alerta órfão no topo para problema local | Atlassian: section message acima da área afetada; Fiori: message strip na área do objeto; NN/g: visibilidade = perto da fonte do problema | Tudo no topo da página (banner disfarçado) |
| O3 | Dismissível: informação e sucesso SIM; atenção e erro SÓ se a condição não exigir resolução | Polaris: default sempre dismissível; não dismissível quando contém informação crítica ou passo necessário. (GOV.UK declara pesquisa em aberto sobre dismissibilidade — esta é decisão de projeto, documentada como tal) | Tudo dismissível (fechar erro que continua existindo) |
| O4 | ARIA: presente no carregamento = SEM role dinâmico (conteúdo estático no fluxo de leitura). INJETADO após ação = T5. Nunca esconder/mostrar via CSS — remover do DOM | USWDS: não esconder visualmente para exibir depois (AT antigas percebem o oculto); nota 1.13-b para o injetado | `role="alert"` em tudo (spam assertivo) |
| O5 | Severidade dimensionada pelo impacto: alerta para o que NÃO bloqueia o fluxo; erro que exige decisão/resolução imediata → modal (Bloco 4), nunca alerta | NN/g error guidelines: toast/banner para interação mínima, modal reservado a erro severo; atenção nunca usa estilo de erro (C5 + rubrica NN/g) | Alerta vermelho para tudo ("wall of red" dessensibiliza) |

### 15.3 Anatomia e tokens

Container: fundo `--seed-feedback-{sev}-bg` (stop 50) + borda 1px `--seed-feedback-{sev}-border` + **barra lateral esquerda 4px** na cor sólida (`-solid`, stop 600/500) — 3º sinal de forma além de cor+ícone, e o que sobrevive em grayscale junto do ícone; radius 8; padding 12/16. Ícone 20px na cor `-text`. Texto `-text` (sucesso/erro = stop 700, atenção/informação = stop 800 — pares medidos na T1 e re-medidos na validação executada; a barra `-solid` da informação usa o stop 700, não o 600: 600 sobre azul-50 dá 2.99 e reprova o 3:1 por um centésimo). Dark: fundo vira o stop 900 da rampa com texto no stop 200 (pares medidos no preview). Fechar: 44×44 de alvo, ícone times, `aria-label="Fechar"`.

### 15.4 Microcopy

Título curto padronizado (T5-b) + corpo que diz O QUE e O QUE FAZER: "Atenção — 3 UCs sem fatura anexada. Anexe para calcular o rateio." Tom SEED: direto, sem culpar o usuário (NN/g), sem "sucesso!" exclamativo.

### 15.5 Código — essência

```html
<div class="seed-alert seed-alert--warning" data-severity="warning">
  <svg class="seed-alert__icon" aria-hidden="true"><!-- exclamation-triangle --></svg>
  <div class="seed-alert__body">
    <strong class="seed-alert__title">Atenção</strong>
    <p>3 UCs sem fatura anexada. Anexe para calcular o rateio.</p>
  </div>
  <button class="seed-alert__close" aria-label="Fechar">×</button>
</div>
```
```css
.seed-alert{display:flex;gap:12px;padding:12px 16px;border-radius:8px;border:1px solid;border-left-width:4px}
.seed-alert--info{background:var(--seed-feedback-info-bg);border-color:var(--seed-feedback-info-border);border-left-color:var(--seed-feedback-info-solid);color:var(--seed-feedback-info-text)}
/* success/warning/danger idem, trocando o grupo */
```
Injeção dinâmica (nota 1.13-b): o container-slot com `role="status"` (ou `role="alert"` para erro, valor SEMPRE explícito — regra do §2.6) já existe no DOM; o JS insere o markup DENTRO dele.

### 15.6 Os 7 testes

1. Borda do container sobre a página ≥3:1 (medir no preview). 2. Severidade por cor + ícone + título (3 sinais). 3. Grayscale: ícone + barra lateral 4px carregam sozinhos. 4. Par atenção × erro distinguível a 1s (triângulo × círculo-x, dourado × vermelho). 5. Um alerta por seção; mensagens combinam antes de multiplicar. 6. Estado visível sem interação. 7. 360px: empilha ícone/texto sem truncar; fechar 44px. *(Verificado: suite v0.15, aprovado.)*

---