# Composants de superposition

Les composants de superposition flottent au-dessus de la page : dialogues de confirmation, tiroirs latéraux, popovers, info-bulles, toasts et espaces réservés d'état de chargement. Les composants flottants (popover, tooltip, hover-card) partagent le positionnement `floatingSide`/`floatingAlign`, et les composants de la famille dialog s'ouvrent depuis un `trigger` et piègent le focus tant qu'ils sont ouverts. Tous acceptent l'ensemble partagé `props` ainsi que les modules `visibility` et `responsive`.

```yaml
components:
  - type: dialog
    title: Confirm
    trigger: { type: button, content: 'Open' }
    children:
      - { type: text, content: 'Are you sure?' }
```

## `dialog`

Un dialogue modal ouvert depuis un déclencheur. Cliquer sur l'arrière-plan ou appuyer sur Échap le ferme ; le focus est piégé dans le dialogue tant qu'il est ouvert.

| Propriété     | Description                                                             |
| ------------- | ----------------------------------------------------------------------- |
| `title`       | Titre du dialogue.                                                      |
| `description` | Texte de support sous le titre.                                         |
| `trigger`     | L'élément qui ouvre le dialogue au clic.                                |
| `children`    | Composants rendus à l'intérieur du panneau du dialogue.                 |
| `props`       | Attributs HTML (p. ex. `className` pour le dimensionnement du panneau). |

## `alert-dialog`

Un dialogue de confirmation pour les actions destructives, avec des boutons de confirmation/annulation explicites.

| Propriété      | Description                                                          |
| -------------- | -------------------------------------------------------------------- |
| `content`      | Le message de confirmation.                                          |
| `confirmLabel` | Libellé du bouton de confirmation.                                   |
| `cancelLabel`  | Libellé du bouton d'annulation.                                      |
| `trigger`      | L'élément qui ouvre le dialogue d'alerte.                            |
| `action`       | L'action invoquée à la confirmation (p. ex. une suppression `crud`). |

## `drawer`

Un panneau qui glisse depuis un bord de l'écran.

| Propriété    | Description                                                             |
| ------------ | ----------------------------------------------------------------------- |
| `drawerSide` | Bord depuis lequel le tiroir glisse : `left`, `right`, `top`, `bottom`. |
| `drawerSize` | Préréglage de taille : `sm`, `md`, `lg`, `full`.                        |
| `trigger`    | L'élément qui ouvre le tiroir.                                          |
| `children`   | Composants rendus à l'intérieur du panneau du tiroir.                   |

## `popover`

Un panneau flottant ancré à un déclencheur, ouvert au clic.

| Propriété       | Description                                                                 |
| --------------- | --------------------------------------------------------------------------- |
| `trigger`       | L'élément qui ouvre le popover.                                             |
| `floatingSide`  | Côté préféré par rapport au déclencheur (`top`, `right`, `bottom`, `left`). |
| `floatingAlign` | Alignement le long de ce côté (`start`, `center`, `end`).                   |
| `children`      | Composants rendus à l'intérieur du popover.                                 |

## `tooltip`

Un petit indice au survol ancré à un déclencheur.

| Propriété        | Description                                    |
| ---------------- | ---------------------------------------------- |
| `tooltipContent` | Le texte de l'indice.                          |
| `tooltipDelay`   | Délai avant l'apparition de l'info-bulle (ms). |
| `floatingSide`   | Côté préféré par rapport au déclencheur.       |
| `floatingAlign`  | Alignement le long de ce côté.                 |

## `hover-card`

Un popover plus riche qui s'ouvre au survol (p. ex. un aperçu de profil).

| Propriété       | Description                                                |
| --------------- | ---------------------------------------------------------- |
| `trigger`       | L'élément qui révèle la carte au survol.                   |
| `floatingSide`  | Côté préféré par rapport au déclencheur.                   |
| `floatingAlign` | Alignement le long de ce côté.                             |
| `openDelay`     | Délai avant l'ouverture au survol (ms).                    |
| `closeDelay`    | Délai avant la fermeture après le départ du pointeur (ms). |
| `children`      | Composants rendus à l'intérieur de la carte.               |

## `toast`

Une notification transitoire. Les toasts sont généralement émis depuis le gestionnaire `onSuccess`/`onError` d'une action plutôt que placés directement dans l'arbre ; le placement au niveau de la page se configure via [`page.toasts`](/fr/docs/pages-overview#propriétés-de-page).

| Propriété     | Description                                                                    |
| ------------- | ------------------------------------------------------------------------------ |
| `variant`     | Style : `success`, `error`, `warning`, `info` (aussi `default`/`destructive`). |
| `message`     | Texte du toast (prend en charge les références `$variable`).                   |
| `duration`    | Durée de masquage automatique en millisecondes (défaut : 5000).                |
| `actionLabel` | Libellé optionnel de bouton d'action.                                          |
| `actionUrl`   | URL optionnelle vers laquelle le bouton d'action navigue.                      |

Plusieurs toasts s'empilent sans se chevaucher ; la position se configure par page (p. ex. `top-right`, `bottom-center`).

## `progress`

Une barre de progression ou un indicateur circulaire affichant l'achèvement.

| Propriété               | Description                                                                                              |
| ----------------------- | -------------------------------------------------------------------------------------------------------- |
| `progressValue`         | Valeur courante.                                                                                         |
| `progressMax`           | Valeur maximale.                                                                                         |
| `props.showLabel`       | Afficher le texte de pourcentage à côté de la barre.                                                     |
| `props.size`            | Préréglage de taille (p. ex. `sm` pour une barre plus fine).                                             |
| `props.progressVariant` | Définir sur `circle` pour un indicateur de progression circulaire avec le pourcentage affiché au centre. |

## `skeleton`

Un espace réservé de chargement affiché pendant que le contenu se charge.

| Propriété         | Description                                     |
| ----------------- | ----------------------------------------------- |
| `skeletonVariant` | Forme : `text`, `circular`, ou `rectangular`.   |
| `skeletonWidth`   | Largeur de l'espace réservé.                    |
| `skeletonHeight`  | Hauteur de l'espace réservé.                    |
| `props.animate`   | Définir sur `true` pour une animation pulsante. |

## Pages connexes

- [Présentation des pages](/fr/docs/pages-overview) — actions, gestionnaires `onSuccess`/`onError`, toasts de page.
- [Composants de mise en page](/fr/docs/layout-components) — le composant de mise en page `modal`.
- [Contrôles de formulaire](/fr/docs/form-controls) — entrées couramment hébergées dans les dialogues et tiroirs.
- [Composants de retour d'information](/fr/docs/feedback-components) — progress, spinner, skeleton.
- [Composants de données](/fr/docs/data-components) — tiroirs de détail d'enregistrement déclenchés depuis une data-table.