Modal

Candidate

Modal concentre l’attention sur une decision ou une tache courte. Elle interrompt temporairement la page courante et doit rester reservee aux contenus qui necessitent une reponse immediate.

Preview

Anatomy

Icone optionnelle : renforce le contexte sans remplacer le titre.
Titre : nomme la decision ou la tache.
Sous-titre optionnel : precise la consequence immediate.
Fermeture : ferme une Modal dismissible et restitue le focus.
Body : contient le message, le formulaire ou les choix.
Footer optionnel : regroupe les actions, avec l’action principale en dernier.

Sizes

Size	Largeur placeholder	Usage
`small`	`24rem`	Confirmation courte ou choix simple
`medium`	`40rem`	Taille par defaut pour formulaire court
`large`	`56rem`	Contenu structure ou comparaison limitee

Les largeurs restent fluides sur mobile et conservent une marge avec le viewport.

Variants

Variante	Usage
Standard	Information ou tache courte
Confirmation	Decision sensible avec actions explicites
Form	Edition limitee a quelques champs
Non-dismissible	Etape bloquante exceptionnelle, sans croix ni fermeture backdrop

Astro

---
import Button from '../components/ui/Button.astro';
import Modal from '../components/ui/Modal.astro';
---

<Button data-modal-open="delete-segment-modal">Supprimer le segment</Button>

<Modal
  id="delete-segment-modal"
  title="Supprimer Premium shoppers"
  subtitle="Cette action est definitive."
  icon="warning"
  size="small"
>
  <p>Le segment sera retire de toutes les destinations connectees.</p>

  <Button slot="footer" variant="secondary" data-modal-close>Annuler</Button>
  <Button slot="footer" variant="danger" data-modal-close>Supprimer</Button>
</Modal>

Un element portant data-modal-open="id-de-la-modal" ouvre le dialogue. Tout controle portant data-modal-close le ferme.

Behaviour

Escape ferme une Modal dismissible.
Un clic sur le backdrop ferme la Modal lorsque closeOnBackdrop vaut true.
Le focus reste dans le <dialog> natif pendant l’ouverture.
A la fermeture, le focus revient au controle ayant ouvert la Modal.
L’evenement pixel-modal-close expose la valeur de retour dans event.detail.returnValue.
Le body devient scrollable lorsque le contenu depasse la hauteur disponible.

Tokens

--modal-bg, --modal-border, --modal-title, --modal-subtitle, --modal-text, --modal-icon, --modal-close-*, --modal-width-*, --modal-padding-*, --modal-radius, --modal-shadow, --modal-backdrop.

Do / Don’t

Do	Don’t
Utiliser un titre qui decrit l’action ou la decision.	Utiliser un titre generique comme « Confirmation ».
Limiter le contenu a une tache courte.	Reproduire une page complete dans une Modal.
Placer l’action principale en dernier.	Multiplier les actions concurrentes dans le footer.
Conserver une sortie claire pour une action non bloquante.	Supprimer la croix pour forcer artificiellement une decision.
Preferer une page pour un workflow long.	Empiler plusieurs Modals.

Accessibility

Modal utilise <dialog> et showModal(), qui fournissent la semantique, le focus trap et le comportement Escape. Le titre est relie avec aria-labelledby et le sous-titre avec aria-describedby. Une Modal non-dismissible doit etre reservee a une situation reellement bloquante et fournir une action permettant d’en sortir.

Status

Candidate. Structure, tailles, slots, backdrop et gestion du focus sont disponibles. Les workflows complexes et Modals imbriquees ne sont pas supportes.