Acordeão
Padrão de UI: lista de seções recolhíveis que expandem ao clique. Mostra bastante informação sem lotar a tela. Mais comum em FAQ, navegação lateral, páginas de configuração.
HTML nativo: <details><summary> (acordeão pronto do navegador, sem JS). Implementações customizadas: React Bootstrap, Mantine Accordion, Radix UI Accordion (headless), shadcn/ui. Acessibilidade: ARIA aria-expanded, aria-controls. Debate de UX: acordeões reduzem a densidade de informação mas melhoram o foco — use para "escanear vs. ler". Pegadinha clássica: animar height quebra em navegadores modernos (height: auto não é animável) — use interpolate-size: allow-keywords (CSS 2024) ou @starting-style.