Componentes-Chave

Botões (.mds-btn)

Tamanho	Altura	Raio	Fonte do botão
xxs	12px	--mds-radius-xxs	— (sem botão nesse tamanho)
xs	24px	--mds-radius-xs	12px
sm	32px	--mds-radius-sm	12px
md	48px	--mds-radius-sm	14px
lg	56px	--mds-radius-sm	16px

• Peso de texto sempre semibold (600), independente do tamanho (fonte: components/_button.scss:18).
• Variantes de cor: control/default (neutro, cinza), primary, secondary, danger, warning, success, info, transparent/link (sem fundo, ação de baixa prioridade). Regra de produto: no máximo 1 botão primary por tela/formulário/diálogo.
• Modificadores: outline (contorno, sem fundo sólido), rounded (pill), loading (loader substitui o conteúdo, botão inerte), disabled.
• Botão só-ícone precisa de aria-label/tooltip — nunca um botão mudo visualmente.

Inputs / Campos de formulário

• Raio padrão igual ao de botões e cards (8px) — não é mais arredondado que o resto do sistema.
• Estado padrão: fundo branco (surface), borda 1px na cor de borda padrão.
• Foco/ativo: borda sobe para a cor primary; erro: borda + sombra em danger; obrigatório pendente: destaque em warning; válido: borda secondary-dark.
• Rótulo acima do campo (não usa placeholder como rótulo); texto de ajuda abaixo, cor muted.

Cards

• Fundo surface, raio 8px, elevação 1 em repouso, sobe ao hover/seleção.
• Cabeçalho (mdsCardHeader) arredonda só o topo; corpo e rodapé (mdsCardFooter) seguem o mesmo raio do card.
• Notificação/atualização: badge sólido no canto; seleção em lote: checkbox + anel de destaque (box-shadow: 0 0 0 2px na cor do estado).

Modais e Drawers (mds-float-panel)

• Modal (--modal): raio 8px, elevação alta, backdrop escuro translúcido. Diálogo central, para interrupção/confirmação/detalhe que exige foco total.
• Drawer (--drawer): painel lateral sem raio (encosta na borda), para fluxos de formulário que devem manter contexto da tela por trás.
• Tela cheia (--fullscreen): raio zerado explicitamente.
• Ações sempre no rodapé, fixas; título curto; fechamento por “×” ou clique no backdrop.

Navegação (Topbar / Menu / Tabs)

• Topbar: altura fixa 64px. Menu lateral: 256px expandido, 64px compacto (só ícones), altura de item 64px.
• Item ativo com fundo item-active-background (tom claro de primary) e borda/texto primary-dark.
• Abas (nav-tabs): item ativo com peso bold e indicador em primary; nunca mais de 2 níveis de profundidade em menus/dropdowns.

Ícones

• Sistema Lucide (SVG), consumido por alias semântico em português no Angular (ex.: icon="excluir") — nunca pelo nome literal do ícone Lucide.
• Tamanhos alinhados à escala de fonte (sm/md/lg/xl), herdam a cor do texto/ícone do contexto (currentColor).

---