P1 · Padrões

Sticky Banner

Alerta no topo da página que persiste durante a rolagem. Quatro níveis de gravidade. ARIA role alterna automaticamente conforme severidade — leitor de tela é interrompido apenas em danger.

Níveis de gravidade

Nível	Cor	ARIA role	Uso
Info	`--sem-info`	`status`	Status do sistema, manutenção agendada.
Success	`--sem-success`	`status`	Confirmação de ação global.
Warning	`--sem-warning`	`status`	Atenção necessária mas não urgente.
Danger	`--sem-danger`	`alert`	Emergência, sistema indisponível.

Anatomia

<aside role="alert" class="sticky-banner danger">
  <svg aria-hidden="true" ... />
  <p>
    <b>Streams indisponíveis.</b> Trabalhando para restaurar.
  </p>
  <a href="/status" class="btn-link inverse">Ver status →</a>
  <button aria-label="Fechar">×</button>
</aside>

Comportamento

Posição: position: sticky ou fixed no topo.
Z-index acima do header da página, abaixo de modais.
Botão de fechar em todas as gravidades exceto danger crítico.
Persistência da escolha de fechar (localStorage) por 24h em info/success.

Diretrizes

Faça

Use no máximo um banner por vez.
Texto curto: ≤ 12 palavras + CTA opcional.
Em mobile, ocupe toda a largura.

Não faça

Não use para promoções de marketing.
Não anime entrada — aparece estático no carregamento.
Não combine 2+ ações; uma única CTA inline.