Índice da vitrine

Início

Visão geral

Ações

Formulários

Navegação

Autenticação

Retorno

Retorno

Conteúdo

Retorno

Alerts em oito tons, modais nativos e os dois jeitos de dizer que algo está a caminho.

Alerts

Avisos em oito tons, a mesma paleta das intenções: os quatro semânticos de status e os quatro tonais, nomeados.

InformaçãoUm aviso neutro, para contexto ou novidade que não pede ação.

SucessoA operação terminou como esperado; nada mais a fazer.

AtençãoAlgo pede a sua revisão antes de continuar.

ErroA operação falhou; verifique os dados e tente de novo.

CautelaO amarelo de atenção, um degrau abaixo do laranja: leia antes de seguir.

Azul-açoO azul-aço do MIV como tom nomeado, para nota institucional sem urgência.

Azul-marinhoO campo profundo do grupo como aviso; o acento clareia no tema escuro para não sumir.

EscuroO neutro escuro, para o aviso que não pede cor nenhuma.

Fecháveis e temporizados

closeable põe o botão de fechar; timeout fecha o aviso sozinho, com a contagem correndo na borda de baixo. Mouse em cima ou foco dentro pausam o tempo: um aviso que some no meio da leitura falha justamente com quem parou para ler.

Pode fecharUm aviso que a pessoa dispensa quando já leu.

Some em 8 segundosA barra embaixo conta o tempo; passe o mouse para pausar.

Temporizado e fechávelSai sozinho em 12 segundos, ou antes, se a pessoa fechar.

Modais

O dialog nativo em superfície opaca do tema: foco preso, Esc fecha, a página atrás trava e o fundo fica embaçado, ilegível, para o foco ser só o modal; clique fora não fecha. O modal aceita as mesmas intenções dos botões: a cunha da borda, como nos alerts, e a ação primária seguem o tom.

.es-dialog

.es-dialog--sm … .es-dialog--xxl

.es-dialog + .es-i--*

Bloqueio e esqueletos

Os dois jeitos de dizer que algo está a caminho: o véu que cobre a região pronta e a mancha que ocupa o lugar do que ainda não chegou.

<echo-block>

Clique no botão para ver a região ser coberta. Enquanto o véu está no ar, o conteúdo fica inerte: o Tab não entra nele.

.es-skeleton

<echo-loader>

O véu da página inteira: cobre a área de trabalho com a marca no meio enquanto a leitura da API não volta. No painel, poupa o menu lateral e a barra do topo.

Toasts

O aviso que flutua sobre a página, empilhado por um composable global. A região de anúncio fica montada sempre, mesmo vazia: uma que só aparece junto com a mensagem costuma não ser lida.

useToast().push()

position + align

A posição mora no estado global, então qualquer lugar da aplicação pode pedir onde o aviso aparece.

timeout: 0

Com timeout zero o aviso fica até alguém fechar; o padrão some em 4,5 segundos.

Rodízios

Sempre aria-hidden: quem anuncia que algo carrega é o aria-busy da região, e um rodízio anunciado sozinho não diz o que está acontecendo.

.es-spinner

.es-spinner + .es-i--*

Animações de entrada

Sete entradas no espírito do animate.style, escritas sobre os tokens deste sistema em vez de trazidas como dependência.

uma animação de entrada roda uma vez; quem chega no meio da página não a vê

.es-anim-fade

.es-anim-fade-up

.es-anim-fade-down

.es-anim-fade-start

.es-anim-fade-end

.es-anim-zoom

.es-anim-pop

A biblioteca inteira são 90 animações e cerca de 70 kB, e um site do grupo usa quatro ou cinco, sempre as mesmas. Pior que o peso: elas trazem durações e curvas próprias, e uma entrada de 1s ao lado de um menu que abre em 0,16s não lê como o mesmo produto. As classes de atraso (es-anim-delay-1 a 5) escalonam uma lista sem uma linha de script. Com movimento reduzido ligado, o elemento nasce no estado final: a informação continua, o movimento não.

<article class="es-card es-anim-fade-up es-anim-delay-2">…</article>

Para agentes de IA

Especificação desta página

Um arquivo Markdown com as tags, props, eventos e trechos desta família, copiáveis ipsis litteris, mais as regras que valem antes de qualquer linha. Entregue-o ao agente junto com a tarefa.

Baixar: Retorno Baixar o guia completo Ler no navegador

/agents/feedback.md