# Drawer

Um painel que entra por uma borda da tela, por cima do conteúdo, aberto por um botão. A pessoa usa, fecha, e volta para onde estava.

## Playground

```html
<button class="feitio-button" type="button" popovertarget="pg-drawer">Abrir o painel</button><div class="feitio-drawer" id="pg-drawer" popover role="dialog" aria-label="Filtros"><div class="drawer-header"><h2>Filtros</h2><button type="button" class="feitio-button close" data-size="small" popovertarget="pg-drawer" popovertargetaction="hide"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Fechar</button></div><div class="drawer-body"><p>Os filtros da lista.</p></div></div>
```

## Quando usar

-   Para a navegação do produto no mobile (o AppShell).
-   Para filtros de uma lista no mobile, ou os detalhes de um item sem sair da lista.

## Quando não usar

-   **Para confirmar:** Dialog.
-   **Formulário longo:** uma página.
-   **Uma gaveta abrindo outra:** nunca.

## Exemplos

### Por qualquer borda

Direita (o padrão), esquerda, cima ou baixo. Título e rodapé são opcionais; o Fechar, pequeno, está sempre lá. Fecha com Esc ou um toque fora.

Mostrar código

```html
<button type="button" class="feitio-button" popovertarget="filtros">…Filtros</button>
<div class="feitio-drawer" id="filtros" popover role="dialog" aria-labelledby="filtros-t">
  <div class="drawer-header">
    <h2 id="filtros-t">Filtros</h2>                       <!-- opcional -->
    <button type="button" class="feitio-button close" data-size="small" popovertarget="filtros" popovertargetaction="hide">…Fechar</button>
  </div>
  <div class="drawer-body">…</div>
  <div class="drawer-footer">…</div>                      <!-- opcional -->
</div>
```

## Anatomia

1.  **Cabeçalho:** o título, opcional, e o Fechar, pequeno, no canto.
2.  **Corpo:** o conteúdo; rola sozinho.
3.  **Rodapé**, opcional: a ação, fora da rolagem.

## Estados

-   **Abrindo e fechando:** desliza, e o fundo escurece.
-   **Aberta:** Esc, Fechar ou um toque fora fecham; o foco volta para o botão que abriu.
-   **Fechada:** não ocupa lugar nem recebe foco.

## Bons e maus padrões

Faça assim

Filtros numa gaveta, com a ação dizendo o resultado: "Mostrar 12 resultados".

A pessoa sabe o que acontece antes de fechar.

Não faça

"Tem certeza que quer apagar?" dentro de uma gaveta.

A gaveta fecha com um toque fora; uma decisão não pode ser por acidente.

## Acessibilidade

-   O botão aponta para a gaveta (`popovertarget`); o navegador diz se ela está aberta.
-   A gaveta tem nome: o título, ou `aria-label` sem título.

## Atributos

Atributo

Valores

Para quê

`class="feitio-drawer"` + `popover`

obrigatório

A gaveta, fora da tela até abrir.

`data-side`

`"end"`, `"start"`, `"top"`, `"bottom"`

Por qual borda ela entra.

`class="drawer-header"`, `"drawer-body"`, `"drawer-footer"`

as partes

Cabeçalho, corpo e rodapé (opcional).