Componentes
24. Popover
seed-componentes.md v1.43 · §24seção 26 de 9824-popover-estavel-validado-pelo-rafael-em-2026-08.md · MD5 163061b6Título completo no canon: Popover — estável · validado pelo Rafael em 2026-08-04 (suite v0.21) · fecha a variante "+N" do W7
Base: R1 — Carbon (caret; toggletip usa o popover flexível + disclosure), Fiori (sap.m.ResponsivePopover: DIALOG no smartphone com X, popover em tablet/desktop; não-responsivo só com pouquíssimo conteúdo). R2 — HTML Popover API (Chrome 114/Firefox 125/Safari 18.3 — baseline jan/2025: top layer, light-dismiss, popover="auto" fecha os demais, Esc restaura o foco ao invoker), React Aria usePopover (foco entra no mount, restaurado no unmount; fora fica oculto de AT), Floating UI (modal × não-modal), Spectrum (menu vira TRAY no mobile). R3 — Hidde (popover é não-modal; backdrop = provável dialog), Heydon (toggletip anuncia APÓS o clique via live region — describedby não serve), OpenUI explainer (notificação/manual não recebe foco imediato).
24.1 Decisões Y1–Y6#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| Y1 | Papel: sobreposição NÃO-modal por CLIQUE com interativos leves (mini-filtros, ações rápidas, o "+N" do W7, toggletip); light-dismiss (Esc/clique fora); UM por vez | Popover API: light-dismiss nativo; auto fecha os demais autos | Popovers empilhados |
| Y2 | Fronteira: decisão obrigatória/form longo/backdrop/foco preso → dialog (Bloco 4) | Hidde; Heydon (régua §23.1) | Popover-que-queria-ser-modal |
| Y3 | Foco: entra no popover ao abrir; VOLTA ao gatilho ao fechar (Esc, fora, ação) | React Aria; MDN (Esc restaura ao invoker) | Foco morto atrás do popover |
| Y4 | Mobile: popover pequeno ancorado se mantém; conteúdo denso (lista rolável, várias ações, >~40% da viewport) converte em tray/bottom-sheet no breakpoint touch (<640px): sobe da base, alça + X, --seed-safe-bottom, MESMO conteúdo |
Fiori ResponsivePopover (dialog com X no smartphone); Spectrum (menu → tray no mobile) | Popover de 500px espremido; sheet para tudo |
| Y5 | Implementação: HTML Popover API (popover="auto") como base, com fallback manual de semântica idêntica onde a API faltar; toggletip = popover de texto anunciado via live region APÓS o clique (regime 1.13-b) — NUNCA aria-describedby no toggletip |
Baseline jan/2025; Heydon: com describedby o leitor teria a informação ANTES do clique e o botão pareceria não fazer nada | Reimplementar top layer na mão; toggletip com describedby |
| Y6 | Visual: pele de overlay do §17.4 (surface-overlay + sombra; dark = borda separa), caret opcional, largura máx. 320px ancorado; pares herdados (medidos) | Consistência de sobreposição; economia de medição | Terceira linguagem visual |
24.2 "+N" dos chips (fecha a ponta do W7)#
O grupo denso de chips com excedente mostra +N como GATILHO de popover listando os chips ocultos (removíveis lá dentro com a mesma mecânica W5, live region do grupo original anunciando). No touch/tray, os alvos crescem para o padrão sheet.
24.3 Os 7 testes#
- Pares herdados ✓. 2. Abertura por clique + caret ancorando. 3. Grayscale: borda+sombra. 4. Popover × tooltip × modal a 1s (régua §23.1). 5. Um por vez. 6. Foco visível dentro; retorno visível ao fechar. 7. 360px: conversão em tray com alça, X 44px e safe-area. (Verificado: suite v0.21, aprovado.)
Também cita o §24: banco-cn, banco-navegacao, banco-superficies.