Surcouches

Chaque surcouche suit un seul contrat (ADR-0108), donc un menu dans une boîte de dialogue et une notification au-dessus d’un tiroir se comportent partout de la même façon.

Niveaux et tailles

Les niveaux viennent de tokens, pas de l’ordre du DOM. Les boîtes de dialogue font 440, 560 et 720 px, plein écran sous 640 px. Les tiroirs font 340, 480 et 640 px, depuis la fin de la ligne (en miroir de droite à gauche).

Token	Variable CSS	Valeur

Token	Variable CSS	Valeur

Profondeur de pile

Deux au maximum. Une boîte de dialogue peut s’ouvrir sur un tiroir ; une boîte d’alerte peut s’ouvrir sur l’un ou l’autre pour une suppression ou un abandon ; jamais un troisième niveau. Une notification n’ouvre jamais de modale. Une infobulle ne vit jamais dans le piège de focus d’une modale.

Fermeture

Surcouche	Échap	Clic à l’extérieur	Bouton de fermeture
Dialogue informatif, popover, menu	oui	oui	oui
Dialogue avec champs	oui, protégé	non	oui, protégé
Boîte d’alerte	oui (annule)	non	facultatif
Tiroir et feuille	oui	oui, sauf formulaire modifié	oui

Un formulaire modifié empêche la fermeture et demande « Abandonner les modifications ? », avec « Continuer à modifier » au focus.

Focus

Le focus initial va au premier élément atteignable, au titre pour un contenu long, et au bouton le moins destructeur pour une action irréversible. Le focus revient au déclencheur à la fermeture. Une modale montre toujours un contrôle de fermeture ; l’anneau de focus fait 2 px.

Mouvement

L’infobulle utilise micro ; le menu, le popover et la notification utilisent standard ; la boîte de dialogue, le tiroir et la feuille utilisent panel. Les sorties durent 0,8 fois l’entrée. Le mouvement réduit ne garde qu’un fondu.