Tooltip Fade

Um menu flutuante aparece com fade e cresce a partir do ponto onde fica o seu gatilho.

Adicione uma animação "Popover / Dropdown Open" (também chamada menu pop ou dropdown scale-fade) em [onde].
O menu deve aparecer com fade enquanto cresce levemente a partir do canto ao lado do seu gatilho, rápido e preciso, e sumir um pouco mais rápido ao fechar.
Mantenha-o ancorado ao gatilho, feche com Escape ou com um clique fora e exponha o estado aberto no gatilho para leitores de tela.

Ao passar o ponteiro, um pequeno triângulo de balão de fala aparece em um lado do elemento.

Adicione um efeito de hover de balão de fala (Speech Bubble) em [onde], também chamado bubble.
Uma pequena ponta triangular deve deslizar de trás de um lado do elemento, transformando-o em um balão de fala, e recolher quando o ponteiro sair: rápido e suave.
Mantenha a ponta da mesma cor do elemento para que pareçam uma só forma e mostre o mesmo efeito no foco do teclado.

Uma mensagem breve desliza ou aparece com fade na borda da tela, espera e depois sai; os toasts empilhados se deslocam para abrir espaço.

Adicione um "Toast Slide-In" (também chamado snackbar ou toast notification) em [onde].
Cada mensagem deve subir a partir da borda da tela e aparecer com fade, desacelerando suavemente; quando um novo toast chegar, os que já estão na tela devem se deslocar suavemente para abrir espaço.
Anuncie a mensagem para leitores de tela sem roubar o foco, deixe-a visível tempo suficiente para ser lida e pause o fechamento automático ao passar o mouse ou ao focar.

Um painel de conteúdo cresce suavemente até a altura total ou encolhe até zero quando o cabeçalho é alternado.

Adicione uma sanfona (Accordion Expand-Collapse, também chamada collapse ou disclosure) em [onde].
Ao tocar em um cabeçalho, o painel dele deve crescer suavemente até a altura total do conteúdo e fechar por completo no toque seguinte, com a seta do cabeçalho girando junto: rápido e suave, sem quique.
Anime até a altura real do conteúdo em vez de um valor fixo chutado, faça do cabeçalho um botão de verdade que informe se está expandido, e garanta que funcione pelo teclado.

Uma camada escura translúcida aparece atrás de uma sobreposição para escurecer a página.

Adicione um "Backdrop Scrim Fade" (também chamado overlay fade ou scrim) em [onde].
Quando a sobreposição abrir, uma camada escura translúcida deve aparecer suavemente sobre a página de trás, um pouco mais devagar que a própria sobreposição, e sumir de novo ao fechar.
Mantenha o scrim escuro tanto no tema claro quanto no escuro, e impeça que a página de trás role ou receba cliques enquanto ele estiver visível.

Um painel sobe a partir da borda inferior, muitas vezes arrastável e com alturas de encaixe.

Adicione um "Bottom Sheet Slide-Up" (também chamado bottom drawer ou sheet) em [onde].
O painel deve subir a partir da borda inferior enquanto a página de trás escurece, desacelerando suavemente até o lugar, sem quique.
Reproduza uma vez sempre que o painel abrir, faça-o descer de novo ao fechar, e mantenha o foco do teclado dentro do painel enquanto estiver aberto.