Sobreposições
O que abre por cima da página. Diálogos são <dialog> nativos: foco preso, Esc e camada de cima vêm do navegador. Popover, menu e dica usam o atributo popover, ancorados no botão que os abre.
Modal
O gatilho é um link para uma âncora real (href="#contato") com data-abre: sem JS, a pessoa segue para o contato. O foco vai ao título e volta para quem abriu. Clique no véu ou Esc fecham.
Escolha de serviço
.rq-modal · .rq-dialogo__corpo · __topo · __conteudo · __acoes · data-abre · data-fecha- Quando usar
- Uma decisão curta que não merece página: a escolha de serviço, uma confirmação, um formulário pequeno. Nunca para conteúdo que a pessoa vai querer ler depois.
- Acessibilidade
aria-labelledbyno título. Com<form method="dialog">, cada botão fecha com o própriovalueemreturnValue.- Variantes
--g(840 px) e--tela(tela cheia abaixo de 600 px).
Gaveta e folha inferior
A gaveta entra pela lateral e serve a filtros e detalhes no painel. A folha sobe do pé da tela, pensada para o celular; arraste a alça para baixo para fechar.
Gaveta de filtros
.rq-gaveta · --inicioFolha inferior
.rq-folha · __alcaPopover e menu
Os dois fecham ao clicar fora e com Esc, de graça, pelo atributo popover. A posição usa ancoragem CSS quando o navegador tem; sem ela, o módulo mede e vira de lado se faltar espaço.
Popover
.rq-popover · popover · popovertarget · data-rq="popover"Fale com a Chesslab
Menu suspenso
.rq-menu · __lista · __item · __separador · data-rq="menu"Teclado do padrão ARIA: Enter, Espaço e setas abrem; setas circulam; Home e End; uma letra pula para o item; Esc fecha e devolve o foco.
Dica
Texto curto no hover (ponteiro fino, 400 ms) e no foco do teclado. Não aparece no toque: o que importa precisa estar visível. Se repete o aria-label, não vira descrição.
Toasts
Avisos que somem sozinhos, no canto (no centro, no celular). No máximo três; pausam no hover e no foco; com ação, ficam o dobro do tempo. Perigo é anunciado na hora. Pelo JS, avisar({…}); pela marcação, data-rq="toasts".
Tipos
.rq-toasts · .rq-toast · data-aviso-titulo · data-aviso-tipo · avisar()Confirmação
Antes de algo que não se desfaz. O foco começa em "Cancelar"; Esc cancela. Pelo JS, await confirmar({…}) devolve true ou false.