Componentes
24. Popover
estável
seed-componentes.md v2.00 · §24seção 49 de 18424-popover-estavel-validado-pelo-rafael-em-2026-08.md · MD5 1bf185eaTítulo completo no canon: Popover — estável · validado pelo Rafael em 2026-08-04 (suite v0.21) · fecha a variante "+N" do W7
Em uma frase: Popover é conteúdo ancorado que abre por CLIQUE, com caret, fechamento por clique fora, e vira diálogo no celular.
Vocabulário desta seção: light-dismiss
(decisão registrada — ver Histórico da seção)
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.