Sheet

Fecha a folha de dentro dela. Use render para emprestar o comportamento ao botão que já existe no rodapé, em vez de somar mais um.

O painel, com a tarja de fundo e o portal por dentro.

Monta em portal no container do RivoProvider, então o tema vale ali dentro. Não recebe side: o lado mora na raiz, porque o gesto de fechar tem que concordar com a direção de onde a folha entrou.

A tarja é irmã do painel dentro do portal, então nem className nem variante de descendente alcançam ela. Para vestir as duas, use classNames com as partes backdrop e viewport.

A linha de contexto embaixo do título, ligada ao painel por aria-describedby.

A barrinha de pegar, só na folha de baixo.

É o único aviso de que dá para arrastar. Sem ela o gesto continua existindo e ninguém descobre, e aí a única saída visível é o clique fora, que na folha de baixo fica no meio do conteúdo que a pessoa veio ler.

Sai escondida do leitor de tela: quem navega por teclado fecha com Esc, e uma barra decorativa anunciada só atrapalha.

O título da folha, e o nome dela para o leitor de tela.

Folha sem título é um painel que se abre sem dizer o que é: quem usa leitor de tela ouve só "diálogo". Quando o desenho não comporta título visível, o aria-label no SheetContent faz o papel.

O que abre a folha. Use render para emprestar o gatilho a um Button, em vez de aninhar um botão dentro de outro.