---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 24
titulo: "Popover — `estável` · validado pelo Rafael em 2026-08-04 (suite v0.21) · fecha a variante '+N' do W7"
sequencia: 26 de 98
bytes_do_corpo: 3320
md5_do_corpo: 163061b64bdaa0cb9c627f28432d7672
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
---
## 24. 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

1. 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.)*

---