Uma linguagem visual.
Muitas possibilidades.

Componentes vivos, exemplos genéricos e contratos de uso. Explore, interaja e confira o padrão antes de levá-lo para qualquer sistema.

O catálogo cobre esta candidata da biblioteca. A migração de todas as telas legadas do Agiliza Fisco ainda é incremental.

Fundamentos

Use tokens por intenção. Sucesso, atenção e erro sempre combinam cor, ícone e texto.

.meu-painel {
  color: var(--su-text);
  background: var(--su-surface);
  padding: var(--su-space-6);
  border-radius: var(--su-radius-surface);
}

Botões e indicadores

Uma ação principal por contexto; rótulos descrevem o resultado.

<button class="primary" type="button">Salvar</button>
Botão só de ícone: fornecer aria-label.
Desabilitado: usar disabled, não apenas uma cor diferente.
Dados não confiáveis: usar textContent, nunca innerHTML.

Formulários

Rótulos persistentes, ajuda contextual e erro próximo ao campo. Envie vazio para testar a validação.

1. Rótulo associado ao campo.
2. aria-invalid="true" e aria-describedby no erro.
3. Foco no primeiro campo inválido; preservar os valores.
4. Sucesso em role="status". Regra de negócio pertence ao consumidor.

Listas e filtros

Filtre com Enter, ordene pelo título da coluna, altere a página e exporte a seleção em CSV.

Diálogos

Foco contido no modal, Escape para cancelar e retorno ao botão de origem.

const resultado = await AgilizaFiscoUI.dialogs.confirm({
  title: "Salvar alteração", question: "Deseja continuar?",
  explanation: "Texto com o efeito da ação.",
  confirmLabel: "Salvar", tertiaryLabel: "Revisar"
});
// true = confirmado; false = cancelado; "tertiary" = alternativa.
// Incluir shared/confirmation_modal.html uma vez por página.

Feedback e estados

Diferencie informação, alerta e erro. Carregamento não significa lista vazia.

Ícones

Sprite local compartilhado. Ícones decorativos ficam ocultos de leitores de tela; a ação recebe um rótulo acessível.

<span data-su-icon="check" aria-hidden="true"></span>
// icons.js monta o SVG automaticamente, inclusive em novos elementos.

Do laboratório ao produto

A biblioteca é dona da aparência e dos contratos de interação; o aplicativo é dono dos dados e das operações.

A herança se aplica aos componentes já adotados. CSS e JavaScript legados permanecem sob migração gradual e revalidação.