# Ficha — Drawer (seed-componentes.md §31, v2.00)

> Gerada por `06-validacao/geradores/gen-vitrine.py` a partir do canon. Esta é a ficha INTEIRA: todas as linhas, com o texto completo de cada célula (a página mostra uma versão de uma tela, encurtada). Onde a seção não tem o item em subseção própria, a ficha diz "ver a seção" e não inventa. Seção completa: https://ds.seed.eng.br/canon/seed-componentes/31-drawer-estavel-v0-30-dw1-dw4-validacao/ · fatia em Markdown: https://ds.seed.eng.br/10-publicacao/ia/seed-componentes/31-drawer-estavel-v0-30-dw1-dw4-validacao.md

## Anatomia e partes

A seção não traz este item em subseção própria — ver a seção §31 (https://ds.seed.eng.br/canon/seed-componentes/31-drawer-estavel-v0-30-dw1-dw4-validacao/).

## Propriedades e variantes

A seção não traz este item em subseção própria — ver a seção §31 (https://ds.seed.eng.br/canon/seed-componentes/31-drawer-estavel-v0-30-dw1-dw4-validacao/).

## Estados

A seção não traz este item em subseção própria — ver a seção §31 (https://ds.seed.eng.br/canon/seed-componentes/31-drawer-estavel-v0-30-dw1-dw4-validacao/). A regra geral dos estados de todo componente interativo é a do §0, item 2 (https://ds.seed.eng.br/canon/seed-componentes/00-fundamentos-de-componente-valem-para-todos-os/).

## Acessibilidade

A seção não traz este item em subseção própria — ver a seção §31 (https://ds.seed.eng.br/canon/seed-componentes/31-drawer-estavel-v0-30-dw1-dw4-validacao/).

## Faça · não faça

As decisões do canon (faça) e a alternativa que cada uma descartou (não faça) — todas as 13, na ordem do canon.

| faça (decisão) | não faça (descartado) |
|---|---|
| DW1 — Drawer = superfície lateral p/ contexto/tarefa SEM perder o estado da página, em 2 regimes: modal-drawer (default: backdrop+trap) e standard (não-modal: página interativa). CN consome drawer; o regime dela é decisão da spec da CN (F6) | Regime único |
| DW2 — Direita default; larguras sm/md; teto ~50% da viewport desktop; <640px vira painel de largura TOTAL deslizando da direita (continuidade espacial; safe-area) | Bottom sheet como forma mobile do drawer (criaria 2 destinos verticais concorrentes p/ o polegar: tray × drawer) |
| DW3 — Implementação: o mesmo `<dialog>` posicionado — modal=`showModal()`; standard=`show()` (corretamente sem trap/backdrop; Esc fecha com foco dentro); scroll lock só no modal. React: Radix Sheet | Biblioteca própria de posicionamento |
| DW4 — Estrutura herda MD5 (3 zonas) e os empréstimos dos Blocos 1–3; form longo prefere drawer a modal (EUI) | Anatomia própria |
| PL1 — W é a largura que o CONTEÚDO tem com o painel fechado (da borda esquerda do conteúdo à borda direita da região que o painel divide), medida ao vivo — não a da janela. A coluna de menu e a lista da mensageria ficam fora de W; quando elas abrem ou fecham, a regra se reavalia sozinha | Limiar por media query de janela (o defeito de dois números que o CP27/CP28 já separou) |
| PL2 — O modo, por uma função só: W < piso (640) → tela cheia (o painel ocupa a região; a 390 px, de uma vez) · W < piso + mínimo (320) + vão → sobrepõe de cara (o conteúdo não encolhe) · painel + vão ≤ W − piso → empurra (conteúdo = W − painel − vão, nunca < 640) · senão → sobrepõe com o conteúdo parado no piso | Dois limiares independentes (`SH62b` = a); só sobrepor (o CH3 antigo); só empurrar (a lista de 310 px da `SH-P63`) |
| PL3 — Largura: abre com 420; se 420 deixaria o conteúdo abaixo do piso, abre com a largura que ainda cabe sem cobrir (W − 640 − vão), nunca abaixo de 320. O teto do arraste é W − 48 (`--seed-sp-12`): sempre sobra uma faixa do conteúdo à vista | Abrir sempre com 420 |
| PL4 — Empurrar = reserva no CONTEÚDO (`margin-right`), com o painel posicionado na borda direita da região; sobrepor = o painel por cima do conteúdo parado | `padding-right` na região |
| PL5 — A borda esquerda do painel é `role="separator"` focável (WAI-ARIA APG, Window Splitter): ←/↑ alarga 16 px (`--seed-sp-4`), →/↓ estreita, Shift multiplica por 48 px (`--seed-sp-12`), Home = mínimo, End = máximo, Enter alterna padrão ↔ máximo; duplo clique volta ao padrão. Alvo de 24 px (44 px com ponteiro grosso). `aria-valuenow/min/max` em px e `aria-valuetext` em português com o modo ("410 px de painel do detalhe; conteúdo com 640 px; o painel empurra o conteúdo") — desvio declarado do APG (que usa %), porque o máximo muda com W e px é o que a pessoa entende | Valor em % (o APG puro) |
| PL6 — Alternativa sem arraste: botão Ampliar/Reduzir no cabeçalho do painel (`aria-pressed`, rótulo e ícone acompanhando — os glifos do PD17), padrão ↔ máximo; some em tela cheia | Só a borda |
| PL7 — O conteúdo NUNCA fica inerte com o painel aberto (`SH62c` = b): continua interativo, inclusive a parte coberta. A troca de modo é anunciada na região `role="status"` da tela ("O painel do assistente agora sobrepõe o conteúdo."). Foco: o que cada tela já tinha, sem armadilha de Tab — na mensageria abrir pelo ⓘ leva o foco para dentro e Esc com o foco dentro fecha e devolve o foco ao ⓘ (SH-P59); no chat o painel fecha pelo `»` (CH2) e não há Esc (não implementado, já era assim); no detalhe em regime painel também não há Esc que feche o painel (o Esc nativo é do modal, PD14) (o Esc do chat e do detalhe foi superado na leva 49, `SH-P76`: o Esc com o foco dentro do painel aberto fecha o painel e devolve o foco ao gatilho nas três telas; ver «Esc: uma camada por vez» abaixo da tabela) | `inert` enquanto sobrepõe (recomendação a da folha) |
| PL8 — Tela cheia (W < 640): o painel toma a região inteira. Onde o conteúdo é uma lista ou tabela (chat, detalhe) o conteúdo sai do fluxo enquanto o painel está aberto ("substitui", o que o detalhe já fazia a 390 px); na mensageria o painel cobre a casca abaixo do cabeçalho da conversa (PL9) e o resto da conversa sai da vista e do Tab | Empilhar abaixo (o chat antigo a 390 px: o painel ficava a 697 px do topo, fora da primeira tela) |
| PL9 — O painel que cobre nasce abaixo do cabeçalho do conteúdo quando o botão que o abre mora nesse cabeçalho (`SH60` = a): na mensageria, com o painel sobrepondo ou em tela cheia, ele começa a 64 px (MS10) e o ⓘ ligado continua visível e clicável. Parâmetro `topo_cobrindo` do módulo | O painel sobre o cabeçalho (o estado anterior: o ⓘ coberto nas 3 larguras, medido) |

No canon: [§31.1 Decisões DW1–DW4](https://ds.seed.eng.br/canon/seed-componentes/31-drawer-estavel-v0-30-dw1-dw4-validacao/#sec-31-1-decisoes-dw1-dw4) · [§31.4 Painel lateral à direita — empurra até o piso, depois sobrepõe (PL1–PL9) — `SH-P62`, folha 11](https://ds.seed.eng.br/canon/seed-componentes/31-drawer-estavel-v0-30-dw1-dw4-validacao/#sec-31-4-painel-lateral-a-direita-empurra-ate-o-piso-depois)

## Relacionados

Todas as seções do componentes citadas no texto desta seção (7), da mais citada para a menos:

- §30 [Modal](https://ds.seed.eng.br/canon/seed-componentes/30-modal-estavel-v0-30-md1-md5-validacao-executada/) — 2×
- §24 [Popover](https://ds.seed.eng.br/canon/seed-componentes/24-popover-estavel-validado-pelo-rafael-em-2026-08/) — 1×
- §39 [Command Palette ⌘K](https://ds.seed.eng.br/canon/seed-componentes/39-command-palette-k-estavel-v0-41-cp1-cp6-bloco-5/) — 1×
- §49 [Detalhe de registro — painel e modal](https://ds.seed.eng.br/canon/seed-componentes/49-detalhe-de-registro-painel-e-modal-estavel-f7-3/) — 1×
- §51 [Personalização de colunas](https://ds.seed.eng.br/canon/seed-componentes/51-personalizacao-de-colunas-estavel-f7-2-2026-08/) — 1×
- §55 [Chat](https://ds.seed.eng.br/canon/seed-componentes/55-chat-estavel-f7-3-2026-08-15-ch1-ch14-arquetipo/) — 1×
- §94 [Mensageria de atendimento](https://ds.seed.eng.br/canon/seed-componentes/94-mensageria-de-atendimento-estavel-decidida-em-9/) — 1×