Bottom Sheet Slide-Up

Um painel lateral desliza a partir da borda esquerda, direita ou superior, empurrando ou cobrindo o conteúdo.

Adicione um menu lateral ("Drawer Slide", também chamado off-canvas ou side sheet) em [onde].
O painel deve deslizar a partir da borda lateral sobre o conteúdo enquanto a página de trás escurece, rápido e desacelerando suavemente, e sair do mesmo jeito ao fechar.
Mantenha o foco do teclado dentro do menu aberto, feche com Escape ou com um clique na área escurecida, e devolva o foco ao botão que o abriu.

O elemento desliza de fora da borda do contêiner até a posição de repouso, sem esmaecer.

Adicione uma animação de entrada "Slide In" (também chamada slide in left, slide in right, slide in up ou slide in down) em [onde].
O elemento deve deslizar de fora da borda do contêiner até o lugar, totalmente opaco o tempo todo: rápido, desacelerando suavemente e sem quique.
Corte-o na borda do contêiner para que não sobreponha os vizinhos nem gere barras de rolagem enquanto está fora e mostre-o no lugar se o usuário preferir movimento reduzido (prefers-reduced-motion).

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.

Arrastar uma lista para baixo revela um indicador de carregamento e recarrega o conteúdo ao soltar.

Adicione uma interação de puxar para atualizar (Pull to Refresh) (também chamada swipe to refresh) em [onde].
Ao puxar a lista para baixo a partir do topo, ela deve seguir o dedo com certa resistência e revelar um indicador de carregamento que gira enquanto é puxado; ao soltar, ele continua girando enquanto o conteúdo recarrega, e então a lista sobe suavemente de volta.
Só ative quando a lista já estiver no topo, e ofereça também um botão de atualizar comum para usuários de teclado e leitor de tela.

Os slides ficam no lugar e se dissolvem um no outro em vez de deslizar.

Adicione um carrossel com fade ("Carousel Crossfade", também chamado fade slideshow ou carousel fade) em [onde].
Os slides devem ficar no lugar e se dissolver devagar um no outro, o antigo sumindo enquanto o próximo aparece ao mesmo tempo, e ficar parados alguns segundos antes da próxima troca.
Volte ao primeiro slide sem cortes, pause ao passar o mouse ou ao receber foco, e não avance sozinho se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os slides passam na horizontal por uma área visível, encaixando um item de cada vez.

Adicione um carrossel ("Carousel Slide", também chamado slider ou swipe carousel) em [onde].
Cada passo deve deslizar a fileira para o lado para que o próximo slide se encaixe no centro, suave e desacelerando, com os vizinhos aparecendo nas bordas e os pontos de posição acompanhando.
Avance um slide por vez, aceite deslizar no toque além de botões e setas do teclado, e coloque rótulos nos controles para leitores de tela.

Um card cresce até virar uma tela de detalhes completa, mantendo um único contêiner visível que muda de forma e revela o novo conteúdo.

Adicione uma transição "Container Transform" (também chamada card expand to detail ou expandable card) em [onde].
Ao abrir o card, o mesmo contêiner deve crescer suavemente até a tela de detalhes completa, com o conteúdo antigo sumindo rápido e o novo aparecendo quando o crescimento estiver quase no fim; ao fechar, toca ao contrário.
Mantenha um único contêiner contínuo em vez de um fade entre duas caixas separadas, e mova o foco para a tela de detalhes quando ela abrir.