Toast Slide-In

El elemento se desliza desde fuera del borde de su contenedor hasta su posición de reposo, sin desvanecerse.

Añade una animación de entrada "Slide In" (también llamada slide in left, slide in right, slide in up o slide in down) en [dónde].
El elemento debe deslizarse desde más allá del borde de su contenedor hasta su sitio, totalmente opaco todo el tiempo: rápido, frenando con suavidad y sin rebote.
Recórtalo en el borde del contenedor para que no se superponga a los elementos vecinos ni genere barras de desplazamiento mientras está fuera, y muéstralo en su sitio si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una pequeña etiqueta aparece con un fundido y se acomoda junto a un elemento tras una breve espera al pasar el ratón.

Añade un "Tooltip Fade" (también llamado tooltip reveal) en [dónde].
Tras una breve espera al pasar el ratón, la etiqueta debe aparecer con un fundido acomodándose ligeramente junto al elemento, y desaparecer rápido y sin espera cuando el puntero se aleje.
Muéstralo también con el foco del teclado, deja que Escape lo cierre y vincúlalo al elemento para que los lectores de pantalla lo lean.

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.

El elemento aparece mientras se desplaza una distancia corta desde un lado hasta su posición final.

Añade una animación de entrada "Fade In Directional" (también llamada fade in left, fade in right o fade in down) en [dónde].
El elemento debe aparecer mientras se desplaza una distancia corta desde un lado hasta su posición final: rápido y fluido, frenando al llegar, sin rebote.
Reprodúcela una sola vez y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

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.