Clique numa linha para abrir o painel lateral (SH13). Os dados são
ilustrativos.
Propostas em análise
Proposta
Cliente
Solução
Valor
PRP-4721
Fazenda Boa Vista
Fotovoltaico
R$ 486.200
PRP-4718
Metalúrgica Andrade
Subestação MT
R$ 312.000
PRP-4715
Hospital Santa Rita
Grupo gerador
R$ 198.400
PRP-4709
Agroindústria Vale Verde
Fotovoltaico
R$ 1.240.000
PRP-4702
Condomínio Alto da Serra
Projeto elétrico
R$ 74.900
Tema
Barra lateral
Preview do §46 — pattern de composição, não componente.
Esta tela liga as cinco regiões ao mesmo tempo para exercer o contrato de
cada uma; o contrato é normativo, a composição não (SH1).
Um produto pode ligar só topbar e conteúdo, ou só sidebar e conteúdo.
O rail troca o contexto da sidebar — é o SH14 em ação: rail
é destino de topo, sidebar é contexto, e nenhuma faz o trabalho da outra.
Os três tipos de destino (SH-P34, aprovado em 2026-09-26): passe o mouse numa área
(Comercial, Obras…) e a PRÉVIA da coluna aparece no lugar dela; clique na área e a prévia
vira a coluna; clique num grupo da prévia e a coluna carrega só aquele grupo. Início
é destino direto; Mais abre um balão de opções que nunca carrega a coluna.
Clicar num item da sidebar troca a tela, move o foco para o
conteúdo e anuncia na live region (SH7). Abaixo de 860px
rail e sidebar viram um único drawer modal (SH12).
Dados ilustrativos. As áreas do rail e os itens da árvore são
exemplo: que menus existem é decisão do projeto do SIGA, não
do Design System.
Esta tela é o REGIME SEM TOPBAR do mesmo shell (a irmã com topbar é a
tela-shell.html, emitida do MESMO molde). O SH1 declara obrigatórias só duas
regiões — conteúdo e ao menos uma navegação —, e o SH21
(§46.6) legisla o caso: sem topbar, o avatar da conta vive na BASE DO RAIL,
logo acima do botão de recolher do SH19, e abre o mesmo menu (Perfil · Tema · Sair).
Saem com a topbar, porque moravam nela e o SH1 não as exige: o seletor de contexto (SH11),
a busca fixa (SH9) e o sino (§33) — o atalho Ctrl K continua abrindo a paleta §39.
E o ☰ do SH12, que o canon põe na zona esquerda da topbar, passa a ser o
primeiro elemento da coluna de conteúdo: sem ele, abaixo de 860 px não haveria porta
nenhuma para o drawer (rail e sidebar somem e nada os traz de volta).
Qual regime o produto usa é decisão dele, não do DS: o SIGA tem topbar; o
SEED Chat, não.
Esta tela é o REGIME COM BARRA DE ABAS do mesmo shell (§95, AB1–AB11; botão flutuante §1.14,
FB1–FB8). Ela existe para exercer o que o canon decidiu em 2026-10-10: o produto tem 4 destinos de
produto + "Mais" (AB2: de 3 a 5, o rótulo mais largo cabe a 360 px, sem sidebar nem escopo), por isso
abaixo de 860 px de contêiner o rail some e a barra de abas aparece (e acima, o inverso — AB3). A barra é a
última faixa da coluna, em fluxo, nunca por cima do conteúdo (AB4). "Mais" abre uma folha modal com a conta (AB11: Perfil · Trocar de conta · Tema · Sair).
O destino "Compras" é de tipo balão (SH22): na barra abre a MESMA folha modal, com as opções em lista, e a opção
escolhida deixa a aba ativa; acima de 860 px o balão volta a abrir ao lado do rail.
O botão flutuante é a forma estreita do botão primário "Nova proposta": acima de 860 px a mesma ação
volta ao cabeçalho do conteúdo (FB1). Ao descer a lista ele encolhe para o "+" (FB7); nunca some.