# Drawer

Un panel que se desliza desde un borde de la pantalla, sobre el contenido, abierto por un botón. La persona lo usa, lo cierra y regresa a donde estaba.

## Playground

```html
<button class="feitio-button" type="button" popovertarget="pg-drawer">Abrir el panel</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>Cerrar</button></div><div class="drawer-body"><p>Los filtros de la lista.</p></div></div>
```

## Cuándo usarlo

-   Para la navegación del producto en móvil (el AppShell).
-   Para los filtros de una lista en móvil, o los detalles de un elemento sin salir de la lista.

## Cuándo no usarlo

-   **Para confirmar:** Diálogo.
-   **Un formulario largo:** una página.
-   **Un panel que abre otro:** nunca.

## Ejemplos

### Desde cualquier borde

Derecha (por defecto), izquierda, arriba o abajo. El título y el pie de página son opcionales; el pequeño botón de cerrar siempre está presente. Se cierra con Esc o un toque fuera.

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>
```

## Anatomía

1.  **Título:** el título, opcional, y el pequeño botón de cerrar en la esquina.
2.  **Cuerpo:** el contenido; se desliza por sí mismo.
3.  **Pie de página**, opcional: la acción, fuera del desplazamiento.

## Estados

-   **Abrir y cerrar:** se desliza y el fondo se oscurece.
-   **Abrir:** Esc, el botón de cerrar o un toque fuera lo cierran; el foco vuelve al botón de apertura.
-   **Cerrado:** no ocupa espacio ni recibe foco.

## Hacer y no hacer

Do

Filtros en un panel lateral, con la acción indicando el resultado: "Mostrar 12 resultados".

La persona sabe qué va a pasar antes de cerrar.

Don’t

"¿Está seguro de que desea eliminar?" dentro de un panel lateral.

Un panel lateral se cierra con un toque fuera; una decisión no puede ser accidental.

## Accesibilidad

-   El botón apunta al panel (`popovertarget`); el navegador indica si está abierto.
-   El panel tiene un nombre: el título, o `aria-label` sin uno.

## Atributos

Atributo

Valores

Para qué sirve

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

obligatorio

El panel, fuera de la pantalla hasta que se abre.

`data-side`

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

Desde qué borde entra.

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

las partes

Cabecera, cuerpo y pie (opcional).