Catálogo compartilhado · maturidade explícita

Componentes

Encontre cada componente pelo uso e pelo exemplo. Contratos estáveis permanecem separados das extensões em validação.

Explorar componentes Ver padrões candidatos

Catálogo para consulta: os exemplos implementados aparecem por função. Extensões e padrões sem specimen permanecem na matriz de cobertura e avançam somente com validação.

Visão geral visual

Escolha pelo que o componente faz

Abrir matriz de 118 decisões →

Cada grupo começa por uma amostra reconhecível. A matriz exaustiva continua disponível como evidência, sem interromper a consulta dos componentes.

Ações e comandosButtons, icon buttons, grupos e toolbars.Explorar exemplos Entradas e seleçãoCampos, escolhas, busca, upload e picker.Explorar exemplos Navegação e estruturaTabs, menus, painéis e orientação.Explorar exemplos Conteúdo e dadosEntidades, cards, tabelas, mídia e arquivos.Explorar exemplos Feedback e overlaysAlertas, diálogos, progresso e estados.Explorar exemplos Anatomia e qualidadeEstados, medidas, alinhamento e acessibilidade.Explorar exemplos

Visão do grupo

Comandos essenciais

core

Ações textuais, grupos compactos e toolbars compartilham ritmo, foco e iconografia.

<button class="b-button-link" type="button">Ação em linha</button>

Button

estável

Seis variantes, fiéis ao produto: filled (ação neutra — o primário real, quase-preto no claro e invertido no escuro), accent (CTA azul, como o "compartilhar" real) e danger — o vermelho é só perigo/erro/destruição, nunca identidade institucional nem ação genérica. Todas usam o papel squircle; somente chips continuam pill.

Largura intrínseca: Button e indicadores compactos medem conteúdo + padding bilateral. Eles só ocupam 100% com o modificador explícito .b-btn--block; grids não podem esticá-los silenciosamente.

<button class="b-btn b-btn--filled">
  <span class="b-icon ph ph-plus" data-icon="add" aria-hidden="true"></span>   <!-- ícone: elemento próprio -->
  <span class="b-row-label">Criar item</span> <!-- label: text-box no CSS -->
</button>

Icon Button

core

Icon Button é um comando sem label visível. A classificação possui cinco eixos independentes: densidade, ênfase, comportamento, shape e contexto. Squircle continua sendo o padrão; Circle é uma variante contextual governada.

Densidade

Papel	Alvo	Ícone	Uso permitido
`compact`	32 × 32	16	Toolbar ou grupo denso no desktop; nunca isolado em contexto touch.
`default`	40 × 40	20	Ação padrão em header, card, dialog, composer ou área produtiva.
`touch`	44 × 44	24	Ação isolada ou prioritária em contexto coarse/mobile.
`navigation-perimeter`	36 × 36 fine · 44 × 44 coarse	20 Regular	Exclusivo de `.sidebar-collapse-toggle`; usa Sidebar Simple e logo sem fundo em 32px e fallback Fill em 24px no repouso colapsado.

Shape

Shape	Classe	Critério
Squircle	`.b-icon-btn`	Padrão para ações standalone, shell, cards e toolbars.
Circle	`.b-icon-btn--circle`	Action oficial do composer ou filho direto de `.b-icon-btn-context--radial`.

Ênfase

Comportamento

Ação momentânea: executa uma operação e não usa aria-pressed.
Toggle: preserva o mesmo tamanho e usa aria-pressed; Fill pode comunicar seleção.
Tooltip: complementa descoberta, mas aria-label continua obrigatório.
Compound control: células de theme switch e segmented pertencem ao grupo; não são variantes de Icon Button.
Circle: é permitido por contexto, nunca como atalho de ênfase. O composer conversacional é a aplicação promovida de referência.

ClassifiqueEscolha contexto, densidade e shape; depois aplique ênfase sem alterar a geometria entre estados.

Não improviseNão use 28, 34 ou 36px fora do perímetro contextual documentado; não transforme qualquer ação em circle para “destacar”; não reduza o alvo para caber.

<button class="b-icon-btn b-icon-btn--compact" aria-label="Desfazer" type="button">
  <span class="b-icon ph ph-arrow-counter-clockwise" data-icon="undo" aria-hidden="true"></span>
</button>

Abrir contrato normativo de Icon Button →

Chip

estável

Filtros selecionáveis (aria-pressed) e tags de contexto passivas.

contexto.pdf projeto-ativo

<button class="b-chip" aria-pressed="true">
  <span class="b-icon b-icon--sm ph ph-check" data-icon="check" aria-hidden="true"></span>
  <span class="b-row-label">Ativos</span>
</button>

Visão do grupo

Controles de entrada

core

Busca, seleção, faixa e upload usam o mesmo contrato de altura, foco e resposta.

Arraste um arquivo ou selecionePDF, imagem, planilha ou documento

<label class="b-search-field">
  <span class="b-icon b-icon--sm ph ph-magnifying-glass" aria-hidden="true" data-icon="search"></span>
  <input type="search" aria-label="Buscar" />
</label>

Text field

estável

Label sempre visível, hint opcional, erro com aria-invalid. Foco fiel ao produto: a borda "acende" em azul (--accent) — troca de border-color em 120ms, sem anel/glow.

Nome do projeto Visível para toda a equipe.

E-mail Informe um e-mail válido.

Instruções

<div class="b-field">
  <label class="b-field__label" for="nome">Nome do projeto</label>
  <input class="b-input" id="nome" placeholder="Ex.: Atendimento comercial" />
  <span class="b-field__hint">Visível para toda a equipe.</span>
</div>

Switch · Checkbox · Radio

estável

Notificações Memória ativa Modo estrito

Seletores por ícone, checkbox e switch compartilham o mesmo accent, foco e área de interação.

<label class="b-check">
  <span class="b-switch">
    <input type="checkbox" checked />
    <span class="b-switch__track"></span>
    <span class="b-switch__thumb"></span>
  </span>
  Notificações
</label>

Picker

candidato

Seletor de imagem, emoji ou ícone derivado do Mark Selector preservado.

O frame converge para 378px e painel de 320px para manter dez células exatas de 36 × 36px por linha, com Squircle 16px; ícones e emojis usam a mesma caixa de 20px da navegação lateral.

As tabs usam 14px/400/21px e indicador compartilhado de 2px com movimento lateral.

Em larguras menores, a grade preserva dez colunas e rola dentro do componente.

Seleção, teclado, upload por clique/drop e insets simétricos permanecem.

<div class="b-picker">
  <div class="b-picker__cats" role="tablist">…</div>
  <div class="b-picker__panel" role="tabpanel">
    <div class="b-picker__grid" role="listbox">
      <button class="b-picker__cell" role="option"
        aria-selected="false" tabindex="0" type="button">…</button>
    </div>
  </div>
  <input data-picker-value name="representation" type="hidden"/>
  <span data-picker-status class="sr-only" aria-live="polite"></span>
</div>

Abrir contrato de representação e Picker →

Tabs

estável

Tabs usam a mesma tipografia 14px/400/21px dos itens do sidebar.

Os ícones junto ao título permanecem em 16px.

Hover altera somente .b-tab__inner; o indicador governado de 2px se desloca lateralmente entre as tabs e compartilha espessura e movimento com o Picker.

Visão geral do volume.

<div class="b-tabs" role="tablist" aria-label="Conteúdo">
  <button class="b-tab" id="tab-volume" role="tab" aria-selected="true"
    aria-controls="panel-volume" tabindex="0"><span class="b-tab__inner">Volume</span></button>
  <button class="b-tab" id="tab-files" role="tab" aria-selected="false"
    aria-controls="panel-files" tabindex="-1">Arquivos</button>
</div>
<div id="panel-volume" role="tabpanel" aria-labelledby="tab-volume">…</div>

Navegação lateral

core

Finalidade

Componente core para shells com navegação persistente.

Estados e seleção

Hover, foco e item ativo usam a mesma curva squircle; o item ativo usa aria-current e altera somente superfície e conteúdo.

Frame e colapso

O frame mede 260px expandido e 49px colapsado em fine/coarse.

Sua área interna de 48px centraliza superfícies quadradas de 36 × 36px com insets 6px ou 44 × 44px com insets 2px, com Squircle/fallback de 16px.

A referência fornece a geometria de frame, enquanto o papel de navegação preserva a assinatura de shape do Baluarte.

Em ponteiro coarse, a área cresce para 44px e os insets colapsados convergem para 2px sem mover o eixo 24px.

Links e ícones

Todos os links usam o corpo padrão 14px/400/21px, cor `--text` invariável e ícones Phosphor de 20px em default, hover, foco e selecionado; é a mesma caixa usada pelo menu lateral do portal, pelo Menu de ações e pelos marks/emoji de entidade.

Grupos

Grupos usam título em sentence case no corpo padrão 14px/400, papel --nav-section-title de contraste secundário acessível e sem hover visual; blocos irmãos respiram 20px por --b-nav-section-gap, enquanto a caixa de título de 24px mantém exatamente 10px até a primeira superfície por --b-nav-title-content-gap.

Expansão

O chevron Phosphor Bold usa slot 16px/glyph 10px alinhado ao fim do eixo de bloco, o mesmo papel secundário e opacity 100% em default e hover e gira no centro do próprio glyph, mantendo o slot externo 16px centralizado, dimensionalmente estável e sem transform, com o glyph 1px acima por padding de layout nos dois estados, enquanto acompanha expansão, fade e deslocamento na abertura; o Button sincroniza aria-expanded.

Exemplo de rail colapsável

Geometria do rail

Este specimen demonstra o rail aberto de 260px e o colapso de 49px; a área interna de 48px mantém superfícies 36 × 36px/44 × 44px, glyph ou mark perfeitamente centralizado e eixo horizontal invariável em 24px.

Título e timing

A linha intermediária dá lugar ao título “Meus agentes”, que reserva 20px de ruptura antes da nova coleção, usa contraste secundário acessível e mantém fade de 60ms antes do fechamento e retorno de 200ms após 140ms de abertura, sincronizado à referência preservada do produto de origem.

Entity Item

Destinos usam glyphs 20px, iguais aos marks/emoji de entidade; Entity Item mantém 36px, padding 7px, mark 20px, gap 8px, label a 35px e Squircle 16px; no colapso, título, nomes e ações desaparecem enquanto o mark permanece centralizado.

Persistência e foco

No shell persistente, os oito ícones dos destinos primários continuam visíveis e acionáveis mesmo se um grupo estava fechado; âncoras contextuais ficam ocultas, e o estado do grupo é restaurado ao expandir sem flash de label ou perda de foco.

Volume Explorar Biblioteca Analytics

Meus agentes

<div class="b-nav b-nav-frame b-nav-rail" id="product-rail" data-nav-rail>
  <div class="b-nav-rail__body">
    <a class="b-nav__item" aria-current="page" href="#">Visão geral</a>
    <h2 class="b-nav-rail__section-title">Meus agentes</h2>
    <button class="b-entity-item" aria-label="Campanha de inverno">…</button>
  </div>
  <div class="b-nav-rail__footer">
    <button class="b-account" aria-label="Conta de Luiz Torres, Plano Pro">…</button>
  </div>
</div>
<button data-nav-rail-toggle aria-controls="product-rail" aria-expanded="true">Alternar rail</button>
<!-- O shell contextual completo preserva ícones primários de grupos fechados no rail e restaura a preferência ao expandir; consulte governance/PRODUCT-SHELL.md. -->

Conteúdo e dados

core

LTMS+1

Conversas1.284+12% no período

Uso mensal · 68%

relatorio-final.pdf2,4 MB · PDF

const family = "Baluarte";

<article class="b-kpi-card"><span>Conversas</span><strong>1.284</strong></article>

Conta do usuário

candidato

Extensão para o rodapé de uma navegação.

No rail composto, fica fora do corpo rolável, dentro do footer fixo de 60px com separador superior.

Avatar, nome e descrição permanecem legíveis no estado aberto; nome e plano usam line-height 16/15px e gap 2px, um meio-termo entre a versão original e a compactação anterior.

No estado compacto, o botão preserva nome acessível e reduz a superfície para 36 × 36px fine — ou 44 × 44px em coarse —, igual aos itens acima.

Avatar mede 20px, permanece no eixo 24px durante toda a transição e usa `--accent` + `--on-accent` com contraste textual mínimo 4,5:1.

Nome e plano fecham em 60ms e retornam em 200ms após 140ms, sem reaparecer antes da expansão da superfície.

A cor usa papel semântico do sistema, nunca valor cru; a superfície mantém Squircle em hover, active e expanded.

<button class="b-account">
  <span class="b-account__avatar">L</span>
  <span class="b-account__info">
    <span class="b-account__name">Luiz Torres</span>
    <span class="b-account__desc">Plano Pro</span>
  </span>
</button>

Entity item

core

Linha compacta de entidade com representação visual, nome com ellipsis, ação contextual e estado de atividade.

Hover, foco, active e aria-current preservam o mesmo Squircle 16px.

Como filho direto de `.b-nav`, adota a geometria do rail: 36px, padding 7px, mark 20px, gap 8px e início do label em 35px; no colapso, nome, ação contextual e spinner são ocultados sem deslocar o mark.

`aria-current="false"` permanece neutro, disabled não mostra ação auxiliar e o botão mantém nome acessível independente do label visual.

A cor `--text` permanece igual em default e hover; o estado muda pela superfície.

Loading não bloqueante combina `aria-busy="true"`, nome acessível com “carregando” e spinner visível somente no rail aberto; o item permanece habilitado e conserva hover, foco e ativação.

<button class="b-entity-item" aria-current="true">
  <span class="b-entity-item__mark">🤖</span>
  <span class="b-entity-item__name">Campanha de inverno</span>
  <span class="b-entity-item__more b-icon ph ph-dots-three" data-icon="more_horiz" aria-hidden="true"></span>
</button>

Card

estável

Cards neutros permanecem rounded rectangle. Somente .b-card--interactive recebe squircle e estados hover, active e disabled.

Outlined

Borda sutil, o padrão para agrupar conteúdo.

Elevated

Sombra nível 1 para destaque leve.

<article class="b-card"><h3>Título</h3><p>Conteúdo do card.</p></article>

List

estável

Relatório mensal Automático

atualizado há 2 h

ativo

Catálogo premium

atualizado ontem

pausado

<ul class="b-list"><li class="b-list__item"><span class="b-list__content">Item</span></li></ul>

Table

estável

Item	Volume	Satisfação	Status
Relatório mensal Automático	1.284	94%	ativo
Catálogo premium	867	91%	ativo
Nova operação	203	88%	revisão

<div class="table-scroll"><table class="b-table"><thead><tr><th>Nome</th></tr></thead><tbody><tr><td>Item</td></tr></tbody></table></div>

Badge · Avatar

estável

neutro info sucesso alerta erro LT LT LT

<span class="b-badge b-badge--success">ativo</span>
<span class="b-avatar" aria-label="Luiz Torres">LT</span>

Media card

core

Card de mídia para bibliotecas e catálogos — mídia quadrada, hover por elevação sem escurecer a borda, ícone específico do formato e rodapé em bloco alinhado às laterais e à base.

Largura real: grid minmax(220px, 1fr) · gap 16 — use .b-media-grid; o card nunca estreita abaixo de 220px e a mídia é sempre quadrada (1:1).

<button class="b-media-card b-media-card--ppt" type="button"><span class="b-media-card__media"><span class="b-icon ph ph-file-ppt" data-icon="file_ppt" aria-hidden="true"></span></span><span class="b-media-card__body"><strong>Arquivo</strong></span></button>

Core incrementado · v1.5

Feedback e estado

core

Publicado usa ponto azul pulsante para disponibilidade pública.

Live usa ponto verde estático para uma sessão efetivamente em andamento.

Texto permanece obrigatório; cor nunca atua sozinha.

PublicadoLiveAtençãoProcessando

Estado explícitoUse texto + forma + cor. Um ponto verde sozinho não comunica o suficiente.

Estado inventadoNão crie novos spinners, cores de progresso ou animações em cada produto.

<span class="b-status-indicator b-status-indicator--published">Publicado</span>
<span class="b-status-indicator b-status-indicator--live">Live</span>

Abrir contrato de estado Live →

Dialog

estável

Scrim + superfície elevada (nível 4).

Foco preso no diálogo; Esc fecha.

Header, body e footer compartilham perímetro horizontal de 24px; o último botão fica a 25px da direita e da base, incluindo a borda, sem aumentar a altura do diálogo.

Esta ação não pode ser desfeita. O item Relatório mensal será removido permanentemente.

<div class="b-dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title"><h2 id="dialog-title">Confirmar ação</h2></div>

Alert · Toast

estável

Uma nova opção está disponível para a equipe.

Configuração salva com sucesso.

Seu plano está próximo do limite de uso.

Falha ao conectar com o canal do WhatsApp.

Link copiado

<div class="b-alert b-alert--success" role="status">Configuração salva.</div>
<div class="b-toast" role="status">Link copiado.</div>

Progress · Skeleton

estável

Processando…

<div class="b-progress" aria-label="64% concluído"><div class="b-progress__bar"></div></div>
<span class="b-spinner" aria-label="Carregando"></span>

Empty state

estável

Nenhum item ainda

Crie o primeiro item para começar a organizar este espaço.

<div class="b-empty"><span class="b-icon b-icon--xl ph ph-folder" aria-hidden="true" data-icon="folder"></span><strong>Nenhum item</strong></div>

Contrato de comportamento

Matriz de estados por aplicabilidade

core

“Completo” não significa aplicar todos os estados a tudo. Significa que cada família declara quais estados são obrigatórios, opcionais ou não aplicáveis.

Família	Default	Hover	Focus	Active	Disabled	Selected	Loading	Error
Ações	●	●	●	●	●	—	quando assíncrona	via feedback
Seleção	●	●	●	●	●	●	—	—
Campos	●	opcional	●	—	●	—	quando assíncrono	●
Navegação	●	●	●	●	quando controle	`aria-current`	—	—
Cards interativos	●	●	●	●	●	quando seleção	quando assíncrono	via feedback
Feedback	visível	quando ação	quando ação	quando ação	—	—	próprio estado	próprio estado

Regra: loading bloqueante combina aria-busy="true" e disabled; Entity Item pode declarar loading não bloqueante e preservar hover/ativação; disabled nunca responde a hover/active; cor nunca é o único sinal de selected, loading ou error.

Anatomia · Espaçamento

estável

Medidas expostas: roxo = padding do container, azul = conteúdo, laranja = gap.

O eixo vertical aparece ao lado do horizontal.

Inset interno pertence ao componente; margem externa pertence à composição e não precisa repetir o mesmo valor.

Todos os valores vêm da escala --b-space-*.

Botão (h40 · pad-inline 16 · gap 6)

Eixo horizontal padding-inline 16 · ícone 20 · gap 6

Eixo vertical

min-height 40 · caixa 20 · inset óptico 10/10

espaçamento entre botões = var(--b-space-4)=8 (rodapé de dialog)

Campo (h40 · pad-inline 12)

min-height 40 · padding-inline var(--b-space-6)=12 · borda 1px · radius 8

Item de menu (pad 8 · gap 8 · radius 24)

padding var(--b-space-4)=8 · gap var(--b-space-4)=8 · radius var(--b-shape-menu-item-radius)=24

Modos de controle do núcleo

Modo	Altura	Uso	Regra
Compacto	32px	Desktop especializado	Somente com contexto e alternativa de toque
Padrão	40px	Controles gerais	Default do núcleo
Touch	44px	Mobile e baixa precisão	Alvo mínimo recomendado
Específico	documentado	Padrões compostos	Vive como extensão governada, não como implementação privada

Componentes

Escolha pelo que o componente faz

Ações e comandos

Comandos essenciais

Button

Icon Button

Densidade

Shape

Ênfase

Comportamento

Chip

Entradas e seleção

Controles de entrada

Text field

Switch · Checkbox · Radio

Picker

Navegação e estrutura

Navegação e estrutura

Tabs

Navegação lateral

Finalidade

Estados e seleção

Frame e colapso

Links e ícones

Grupos

Expansão

Sistema

Evolução

Exemplo de rail colapsável

Geometria do rail

Título e timing

Entity Item

Persistência e foco

Conta e footer

Meus agentes

Menu

Conteúdo e dados

Conteúdo e dados

Conta do usuário

Entity item

Card

Outlined

Elevated

Interactive

List

Table

Badge · Avatar

Media card

Feedback e overlays

Feedback e estado

Dialog

Excluir item?

Alert · Toast

Tooltip

Progress · Skeleton

Empty state

Anatomia e qualidade

Matriz de estados por aplicabilidade

Anatomia · Espaçamento

Botão (h40 · pad-inline 16 · gap 6)

Campo (h40 · pad-inline 12)

Item de menu (pad 8 · gap 8 · radius 24)

Modos de controle do núcleo