C20 · Componentes

Sheet

Painel lateral que desliza da direita para fluxos complexos ou detalhes que excedem um modal. Elevação E3. Largura 480–640px em desktop, full-width em mobile.

Quando usar

Caso	Componente
Confirmação simples	Dialog (C10).
Edição com 3–10 campos	Sheet.
Detalhes de item da lista	Sheet.
Fluxo multi-passo (wizard)	Página dedicada.

Estrutura

<aside role="dialog" aria-modal="true"
  aria-labelledby="sheet-title" class="sheet">
  <header>
    <h2 id="sheet-title">Editar drop #042</h2>
    <button aria-label="Fechar">×</button>
  </header>
  <div class="sheet-body">...</div>
  <footer>
    <button class="btn-outline">Cancelar</button>
    <button class="btn-primary">Salvar</button>
  </footer>
</aside>

Diretrizes

Faça

Footer sticky com ações primárias sempre visíveis.
Header sticky com título + botão fechar.
Animação: 360ms slide-in da direita, ease cubic-bezier(0.2,0,0,1).

Não faça

Não aninhe sheets.
Não use sheet para conteúdo de leitura — use página dedicada.
Não esconda o botão de fechar em mobile.