Estados
Vocabulário canônico de estados — interação (hover, foco, selecionado, desabilitado) e dados (carregando, vazio, erro) — e como o ME expressa cada um.
Esta é a referência única dos estados. Cada componente documenta os seus em detalhe — aqui ficam o vocabulário, a regra de como o ME expressa cada estado e o link para onde ele se aplica. Princípio que atravessa tudo: estado é reforço — cor nunca sozinha (combine com ícone/rótulo/posição) e movimento é só apoio.
Estados de interação
Como um elemento responde ao usuário. Valem em qualquer controle (botão, linha, campo, aba, card).
| Estado | O que é | Como o ME expressa | Onde |
|---|---|---|---|
| Default | Repouso, sem interação | Superfície e texto base (Tokens) | qualquer elemento |
| Hover | Cursor sobre o elemento | Leve mudança de superfície (--ui-bg-accented) + cursor; transição ~150 ms (Motion) | linhas, itens, botões |
| Foco | Alcançado por teclado/leitor | Anel de foco visível — nunca remover; é requisito de acessibilidade (Acessibilidade) | todo controle interativo |
| Ativo / Selecionado | Item escolhido / em seleção | Borda/superfície primária (ex.: ring-primary); em lote, badge "N selecionados" na Filter Bar | linhas, abas, cards, Checkbox |
| Desabilitado | Indisponível no contexto | Opacidade reduzida + cursor not-allowed + fora da ordem de foco; explique o porquê quando não for óbvio | botões (Button), campos, CTAs |
Estados de dados (assíncrono)
Como a tela se comporta enquanto/depois de carregar dados. Prioridade de exibição: carregando → erro → vazio → conteúdo. O componente não faz fetch — quem controla esses estados é o squad consumidor.
| Estado | O que é | Como o ME expressa | Onde |
|---|---|---|---|
| Carregando | Aguardando os dados | Skeleton no lugar do conteúdo (respeita as dimensões) ou Spinner sem porcentagem | index, charts, cards |
| Vazio | Sem dados / sem resultados | Empty State: ícone + mensagem contextual + saída clara (CTA primário ou "Limpar filtros") | Views, listas, charts |
| Erro | Falha ao carregar | Alert persistente, com ação de tentar de novo | index, charts, formulários |
Cor nunca sozinha. Selecionado, erro, sucesso etc. sempre combinam cor + ícone/rótulo/posição — quem não distingue a cor (daltonismo, baixo contraste) ainda lê o estado. Foco sempre visível.Reduzir movimento: as transições de estado respeitam
prefers-reduced-motion (Motion).