Tooltip Fade

Un menú flotante aparece con un fundido y una ligera escala desde el punto donde está su disparador.

Añade una animación de menú desplegable ("Popover / Dropdown Open", también llamada menu pop o dropdown scale-fade) en [dónde].
El menú debe aparecer con un fundido mientras crece ligeramente desde la esquina junto a su disparador, rápido y nítido, y desaparecer un poco más rápido al cerrarse.
Mantenlo anclado al disparador, ciérralo con Escape o con un clic fuera y expón el estado abierto en el disparador para los lectores de pantalla.

Al pasar el cursor, aparece un pequeño triángulo de bocadillo en un lado del elemento.

Añade un efecto hover "Speech Bubble" (también llamado bubble) en [dónde].
Una pequeña cola triangular debe deslizarse desde detrás de un lado del elemento, convirtiéndolo en un bocadillo, y volver a ocultarse cuando el cursor sale: rápido y suave.
Mantén la cola del mismo color que el elemento para que se lean como una sola forma y muestra el mismo efecto con el foco del teclado.

Un mensaje breve se desliza o aparece en un borde de la pantalla, espera y luego se va; los toasts apilados se desplazan para hacer sitio.

Añade un "Toast Slide-In" (también llamado snackbar o toast notification) en [dónde].
Cada mensaje debe subir desde el borde de la pantalla y aparecer con un fundido, desacelerando con suavidad; cuando llegue un toast nuevo, los que ya se muestran deben desplazarse con suavidad para hacerle sitio.
Anuncia el mensaje a los lectores de pantalla sin robar el foco, déjalo visible el tiempo suficiente para leerlo y pausa el cierre automático al pasar el ratón o al enfocarlo.

Un panel de contenido crece con suavidad hasta su altura completa o se reduce a cero al alternar su encabezado.

Añade un acordeón ("Accordion Expand-Collapse", también llamado collapse o disclosure) en [dónde].
Al pulsar un encabezado, su panel debe crecer con suavidad hasta la altura completa de su contenido y volver a cerrarse del todo con la siguiente pulsación, con la flecha del encabezado girando a la vez: rápido y suave, sin rebote.
Anima hasta la altura real del contenido en lugar de una altura fija estimada, haz que el encabezado sea un botón real que indique si está expandido y que funcione con el teclado.

Una capa oscura translúcida aparece detrás de una superposición para oscurecer la página.

Añade un "Backdrop Scrim Fade" (también llamado overlay fade o scrim) en [dónde].
Cuando se abra la superposición, una capa oscura translúcida debe aparecer suavemente sobre la página de detrás, un poco más despacio que la propia superposición, y desvanecerse de nuevo al cerrarse.
Mantén el scrim oscuro tanto en el tema claro como en el oscuro, y evita que la página de detrás se desplace o reciba clics mientras se muestra.

Un panel sube desde el borde inferior, a menudo arrastrable y con alturas de anclaje.

Añade un "Bottom Sheet Slide-Up" (también llamado bottom drawer o sheet) en [dónde].
El panel debe subir desde el borde inferior mientras la página de detrás se oscurece, frenando con suavidad hasta su sitio y sin rebote.
Reprodúcelo una vez cada vez que se abra el panel, bájalo de nuevo al cerrarlo y mantén el foco del teclado dentro del panel mientras esté abierto.