# Drawer

Un panneau qui glisse depuis un bord de l'écran, au-dessus du contenu, ouvert par un bouton. La personne l'utilise, le ferme, et revient là où elle était.

## Playground

```html
<button class="feitio-button" type="button" popovertarget="pg-drawer">Ouvrir le panneau</button><div class="feitio-drawer" id="pg-drawer" popover role="dialog" aria-label="Filtres"><div class="drawer-header"><h2>Filtres</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>Fermer</button></div><div class="drawer-body"><p>Les filtres de la liste.</p></div></div>
```

## Quand l'utiliser

-   Pour la navigation produit sur mobile (l'AppShell).
-   Pour les filtres d'une liste sur mobile, ou les détails d'un élément sans quitter la liste.

## Quand ne pas l'utiliser

-   **À confirmer :** Dialogue.
-   **Un formulaire long :** une page.
-   **Un tiroir ouvrant un autre :** jamais.

## Exemples

### Du n'importe quel bord

Droite (par défaut), gauche, en haut ou en bas. Le titre et le pied de page sont optionnels ; la petite croix est toujours présente. Elle se ferme avec Esc ou un clic en dehors.

Afficher le code

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

## Anatomie

1.  **En-tête :** le titre, optionnel, et la petite croix dans le coin.
2.  **Corps :** le contenu ; il défile de lui-même.
3.  **Pied de page**, optionnel : l'action, hors du défilement.

## États

-   **Ouverture et fermeture :** elle glisse, et l'arrière-plan s'assombrit.
-   **Ouvert :** Esc, la petite croix ou un clic en dehors la ferment ; le focus revient sur le bouton d'ouverture.
-   **Fermé :** ne prend pas de place ni de focus.

## Faire et ne pas faire

Do

Filtres dans un panneau latéral, avec l'action indiquant le résultat : « Afficher 12 résultats ».

La personne sait ce qui se passe avant la fermeture.

Don’t

« Voulez-vous vraiment supprimer ? » à l'intérieur d'un panneau latéral.

Un tiroir se ferme avec un clic à l'extérieur ; une décision ne doit pas être accidentelle.

## Accessibilité

-   Le bouton pointe vers le tiroir (`popovertarget`) ; le navigateur indique s'il est ouvert.
-   Le tiroir a un nom : le titre, ou `aria-label` sans l'un.

## Attributs

Attribut

Valeurs

Pour quoi

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

obligatoire

Le tiroir, hors écran jusqu'à ce qu'il soit ouvert.

`data-side`

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

D'ailleurs il entre de quel côté.

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

les parties

En-tête, corps et pied de page (optionnel).