Subheader

Bloco EletroDS — Subheader, usado no código como <MeSubheader>. No Figma, use o bloco da Library; é a casca canônica do topo de uma tela. Não remonte CTA + ações + busca à mão.

O Subheader é a faixa de controle logo abaixo do header global. Ele monta numa peça só o que antes seriam vários elementos soltos: o toggle de sidebar, a ação primária ("Novo X", split com menu), a ButtonBar ao centro, a busca, o toggle de gráfico e o view switcher. É o ponto onde mora a hierarquia de ações de uma index.

Uso em tela

Três regiões — esquerda · centro · direita. A esquerda traz o toggle de sidebar e a ação primária; o centro, a ButtonBar; a direita, busca, gráfico e a troca de visualização. Como tudo vem do bloco, a posição e o espaçamento já saem padronizados — você passa props, não recria layout.

A ação primária ("Novo X") fica sempre à esquerda e usa o split quando há mais de um tipo a criar (ex.: "Nova transação ▾"). As ações secundárias vão na ButtonBar; as de tela (busca, gráfico, view) ficam à direita.

Aplicação

A variante muda conforme a tela:

Tela	Variante	O que mostra
Index (listagem)	`primary`	toggle sidebar · split "Novo X" · ButtonBar · busca · gráfico · view switcher
Documento / formulário	`secondary`	ButtonBar ao centro · Voltar e Confirmar à direita
Toolbar embutida (dentro de um bloco)	`tertiary`	só a ButtonBar — ignora CTA/busca/etc.

Variantes

Quero…	Use
Topo de uma index	`variant="primary"`
Topo de um documento/edição com Voltar + Confirmar	`variant="secondary"` (props `back`, `confirm`)
Só uma fileira de ações, sem CTA	`variant="tertiary"`

Regiões (variante primary)

Região	Prop	O que é
Toggle de sidebar	`toggleSidebar`	hambúrguer que abre/fecha a sidebar
Ação primária	`createActions`	botão "Novo X" + menu de tipos (split)
Ações de suporte	`buttonBar`	a ButtonBar central
Busca	`search`	campo de busca da listagem
Gráfico	`toggleChart`	alterna a visão de gráfico (com chip de notificação)
View switcher	`gridMode`	troca Tabela · Lista · Cards · Preview

Subheader de documento

No documento o subheader tem regiões fixas: à esquerda, as ações do status (até 3 aparentes + "Mais ações" no overflow); à direita, "Opções" (configurações da tela). As ações mudam conforme o status/fase — ver Ações por status. Quando o documento aparece em preview (master-detail da index), surge um ícone "abrir em outra janela" à direita de "Opções" — atalho para a página única.

Responsividade

Segue a régua geral em Foundations › Breakpoints; o que é próprio do subheader:

Largura	Comportamento
Desktop · ≥ 1024px	Layout completo — título, todas as CTAs e ações secundárias visíveis.
Tablet · 640–1024px	Título + CTA primária + no máximo 1 secundária; as demais recolhem em "Mais ações".
Mobile · < 640px	No mobile o subheader perde o hambúrguer (vai pro header), o "Novo X" (vira FAB) e a busca (vai pro header) — sobram só as ações em massa + gráfico/view. As secundárias colapsam em "Mais ações" (nunca rolam na horizontal nem quebram em linhas).

Overflow das ações (ResizeObserver)

O MeSubheader observa a largura da ButtonBar (ResizeObserver): as ações que não cabem colapsam progressivamente num "Mais ações" (ícone + label + chevron). Nunca scroll horizontal, nunca quebra de linha. Ordene por frequência de uso; separe a ação destrutiva por um divisor. Não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.

Gotchas de montagem (verificados na index real)

Altura 56px (h-14). O MeSubheader é flush → dê w-full h-full + wrapper items-stretch, senão o gap vira linha dupla na borda inferior.
inheritAttrs: false: a class/style que você passa vão pro inner, não pro root — para esticar o root, estilize o wrapper.
Busca é gatilho: abre o painel de busca, não busca inline no campo.