Padrões

Filtros

Filtros são chips no canvas. Ativo vira papel com anel azul; as opções abrem em popover de vidro.

Na prática#

Conta	Método	Valor
Farmácia Norte	Boleto	R$ 10.300

Chips por dimensão, vazio com saída

Regras#

01Um FilterChip por dimensão. O rótulo diz a dimensão; o valor aparece ao lado quando ativo.
02Mais de 8 opções: searchable.
03Dimensão exclusiva (período, ordenação): single.
04Chip ativo tem X para limpar sem abrir o popover.
05Resultado vazio por filtro mostra EmptyState com "Limpar filtros".

Evite#

Select nativo numa barra de filtros.
Filtro que some quando não há resultado.
Cor de estado no chip (o chip não é status).

Peças usadas#

Input

Papel com anel fino. Foco vira azul com halo de 4px. Erro diz o que fazer, com ícone e aria.

FilterChip

Chip de filtro: rótulo + valor, popover de vidro. Ativo vira papel com anel azul e ganha X para limpar.

DataTable

Tabela de trabalho em papel. Linha de 48 (36 no denso), cabeçalho de máquina que ordena, número à direita em Sora tabular. O link da linha é o alvo do teclado.

EmptyState

Vazio: a coruja vigia até ter o que mostrar. Sem ilustração genérica. Sempre que puder, um próximo passo. É o StatusView no tom neutro.