Componentes
31. Drawer
seed-componentes.md v1.43 · §31seção 33 de 9831-drawer-estavel-v0-30-dw1-dw4-validacao.md · MD5 7a491e2cTítulo completo no canon: 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";
ownFocusespelha os dois regimes; header/body/footer pinned), M3 side sheets (standard × modal), Radix Sheet (=Dialog comside), 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.)
Também cita o §31: banco-cn.