15. Alerta

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

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#

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#

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

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

---