---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 31
titulo: "Drawer — `estável` (v0.30) · DW1–DW4 · validação executada + visual aprovada em 2026-08-05 · destrava a central de notificações (F6)"
sequencia: 33 de 98
bytes_do_corpo: 3397
md5_do_corpo: 7a491e2c8561ee503991cd37baea85b2
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 31. Drawer — `estável` (v0.30) · DW1–DW4 · validação executada + visual aprovada em 2026-08-05 · destrava a central de notificações (F6)

> **Base:** R1/R2 — **EUI flyout (referência ERP: "alternativa a modal quando a ação não é transiente; forms complexos sem perder o estado"; `ownFocus` espelha os dois regimes; header/body/footer pinned)**, M3 side sheets (standard × modal), Radix Sheet (=Dialog com `side`), Vaul. R3 — M2 bottom sheets (descartado como forma mobile do drawer), MDN show()/showModal().

### 31.1 Decisões DW1–DW4

| # | Decisão | Porquê | 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) | EUI ownFocus; M3 standard×modal side sheets; caso central: detalhe de registro do ERP e comparação lado-a-lado | 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) | Não colide com o tray §24 (degrau do popover p/ conteúdo curto) | 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 | MDN (show × showModal é exatamente a distinção modal×não-modal) | 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) | EUI | Anatomia própria |

### 31.2 Tokens

Herda §30 integralmente (superfície/sombra/backdrop decorativo declarado); largura sm 400 / md 560; slide 200ms ease-out com reduced-motion; `--seed-safe-bottom` no rodapé mobile. **Nenhum par novo.**

**Escala de sobreposição (emenda do gate visual, 2026-08-05):** `z-index` explícito **65** em modal e drawer, consolidando a escala do sistema: toolbar/app-chrome 60 < **modal/drawer 65** < toast 70 (feedback de ação permanece visível sobre a superfície) < popover 75 (pode abrir de dentro de modal/drawer) < tooltip 80. O 65 governa o regime standard (`show()` fica FORA do top layer) e qualquer chrome fixo da página; no browser, `showModal()` vive no top layer nativo, acima de tudo — e toasts disparados com modal aberto gravam na central de notificações (decisão do marco v1.0). **Origem: bug real pego na validação visual do Rafael** — drawer standard sem z-index era atravessado por conteúdo da página e tinha o X encoberto pelo chrome fixo; a suite não cobre empilhamento (jsdom sem layout), reconfirmando a lição do marco v1.0.

### 31.3 Os 7 testes

1–2. Idem §30 ✓. 3. Grayscale ✓. 4. Modal-drawer × standard a 1s (backdrop presente × página viva). 5. Um drawer por vez; drawer e modal não empilham (a exceção MD4 é só confirmação de descarte). 6. Regime evidente sem interação. 7. 360px: largura total, X 44px, footer no polegar com safe-area. *(Validação executada + visual aprovada em 2026-08-05, com emenda de empilhamento originada no gate visual.)*

---