SEED DS v2 — Bloco 3 · Bloco 3 completo preview v0.23c

Alerta (§15) · Banner (§16) · Toast (§17). Taxonomia T1–T5: informação · sucesso · atenção · erro. Status: rascunho — validação executada aprovada; aguardando validação visual do Rafael.

§16 Banner — dois níveis (P2 revisado)

Nível sistema (full-bleed, barra superior, empurra o conteúdo)

P1: um por vez — dispare os dois e só o de maior severidade fica.

Nível página (largura do conteúdo, pré-h1) — pós-redirect com foco (P4)

GOV.UK: role="alert" + foco movido via JS no load (tabindex="-1"). Título padronizado (T5-b).

§15 Alerta — 4 severidades (estático, no fluxo, sem role — O4)

Informação

A tarifa da Cemig foi atualizada em 01/08. Os cálculos novos já usam o valor vigente.

Sucesso

Diagnóstico 360° concluído para a UC 300482-1.

Atenção

3 UCs sem fatura anexada. Anexe para calcular o rateio.

Erro

A integração com o Omie falhou. Os lançamentos de hoje não foram sincronizados.

Alerta injetado após ação (O4 + nota 1.13-b + T5)

Slot com role já existente no DOM; conteúdo entra populado. Atenção → role="status"; erro → role="alert" (valor explícito, §2.6).

§17 Toast — região landmark, fila máx. 3, durações Q3

Região role="region" aria-label="Notificações" viva desde o load · F6 foca a região · pausa em hover/foco/página oculta · erro persiste · máx. 3 visíveis + fila com contador.

§18 Spinner — a Régua de Espera em ação

R3-b/R3-c — regimes que COMPÕEM: ação = ack imediato no controle · carga inicial = skeleton imediato (§19) · refresh por ação = ack imediato no botão + indicador de região só após 1s (nunca há vácuo). aria-busy na região + live region pré-existente anuncia início/fim.

Lista de propostas (conteúdo da região).

Inline (sm): sm 16px — o mesmo do loading do botão (§1).

§19 Skeleton — fidelidade estrutural + timeout

Espelha o layout REAL (mesmo nº de colunas/linhas do conteúdo). Blocos aria-hidden; shimmer onda E→D 1.8s; timeout → erro no slot role="alert".

Tabela de UCs — clique para carregar.

§20 Progress — marcos, handoff e toast de processo

ARIA25: o role="progressbar" não anuncia sozinho — o canal separado (visually-hidden, role="status") fala nos marcos 25/50/75/100 e nomeia o objeto na conclusão. O valor nunca regride.

Enviando faturas ao Omie 0%

§21 Badge — separação tripla (nunca clica)

Status (T1–T5 + neutro) · numérico (contador, "99+") · dot. Cor+texto sempre; ícone obrigatório em atenção/erro; texto oculto contextual para AT.

Paga — fatura paga Atípica — consumo atípico, revisar Vencida — fatura vencida Em análise Rascunho 3 99+

§22 Chip — filtro e entrada (grid de teclado, W5)

Filtro: toggle com checkmark (W3). Entrada: X com aria-label nomeando o valor (W4), setas navegam, Delete remove, foco vai ao seguinte, live region do grupo anuncia (regime 1.13-b).

Filtro — modalidade tarifária

Entrada — destinatários do relatório

§23 Tooltip — rótulo × descrição, 1.4.13, decisão touch

Hover/focus com delay 500ms (adjacentes aquecem) · corredor de hover · Esc fecha sem mover o foco · SEM timer de auto-hide. No touch, o ⓘ vira toggletip (§24).

← passe o mouse (ou Tab) Rateio da UC

§24 Popover — clique, light-dismiss, foco entra e volta · toggletip · "+N" (W7)

Um por vez · Esc/clique fora fecha e devolve o foco ao gatilho · toggletip anuncia APÓS o clique via live region (nunca describedby) · <640px o denso vira tray.

Grupo denso (W7 "+N"):

§25 Empty state — 5 tipos + encadeamentos (fecha o Bloco 3)

Título ≤5 palavras sem ponto · até 2 ações · zero-resultados SEM CTA de criação · erro recebe o timeout do S5 · sem live region própria (Z6).

Crie sua primeira proposta

Monte o orçamento a partir do Diagnóstico 360° e envie ao cliente em poucos passos.

Nada com "trafo 500kVA"

Edite sua busca e tente de novo, ou limpe os filtros ativos.

Não foi possível carregar

Verifique a conexão e tente de novo. Se persistir, fale com o suporte.

Sem acesso a esta área

Seu perfil não inclui o financeiro. Peça acesso ao administrador da SEED.

Encadeamento S5→Z: o "Simular falha" do §19 já desagua no alerta de erro; aqui o "Tentar novamente" religa o fluxo.

Prova grayscale — ícone + barra carregam sem cor

Atenção

Triângulo + barra lateral distinguem sem matiz.

Erro

Círculo-x + persistência distinguem do sucesso.

Prova 360px — teste do polegar (§1.12)

SucessoProposta #482 enviada para o cliente.
Proposta #482 enviada.
⌨️ teclado virtual simulado — o toast real fica ACIMA (visualViewport, Q7)