# StatusOverlay

Retour d'information sur le conteneur principal où l'action s'est produite : chargement, terminé ou échec, avec la Notice juste au-dessus.

## Playground

```html
<div class="feitio-status-host"><div class="feitio-stack" data-gap="3"><strong>Rappel</strong><div class="feitio-field"><label class="feitio-label" for="pg-so">Nom du rappel</label><input class="feitio-input" id="pg-so" value="Arroser les plantes"></div><div><button class="feitio-button" type="button" data-variant="primary">Enregistrer</button></div></div><div class="feitio-status" role="status"><svg viewBox="0 0 48 48" aria-hidden="true"><g class="loading"><path pathLength="1" d="M24 7 C34 6.5 41.5 14 41 24 C40.6 33 33 41 24 41.2"></path><path pathLength="1" d="M25.5 41 C14.5 41.6 6.8 33.5 7.2 23.6 C7.6 14 14.6 7.4 23 6.4"></path></g><g class="ok"><path pathLength="1" d="M13 25 L21 33.5"></path><path pathLength="1" d="M19.5 34 L36 14.5"></path></g><g class="error"><path pathLength="1" d="M15 15 L33.5 33"></path><path pathLength="1" d="M33 14.5 L15.5 33.5"></path></g></svg><span class="label"></span></div></div>
```

## Quand l'utiliser

-   Pour toute action qui prend du temps ou modifie un état : sauvegarder, supprimer, envoyer.

## Quand ne pas l'utiliser

-   **Sur tout l'écran**, pour une action sur une partie de celui-ci.
-   **Au lieu de la Notice :** l'animation montre qu'un événement s'est produit ; la Notice précise quoi.

## Exemples

### Enregistrement d'un rappel

Appuyez sur Enregistrer. Changez le résultat du test pour voir l'erreur.

Afficher le code

```html
<div class="notice-slot" aria-live="polite"></div>
<form class="feitio-status-host" data-state="loading" aria-busy="true">
  …
  <div class="feitio-status" role="status">
    <svg viewBox="0 0 48 48" aria-hidden="true">…</svg>
    <span class="label">Salvando…</span>
  </div>
</form>
```

## La séquence

-   **Loading:** l'obscurité arrive et le trait tourne ; une seconde soumission est ignorée.
-   **It worked:** la vérification est tracée en mousse, l'obscurité part, et le Notice arrive au-dessus.
-   **It failed:** le X en vin, l'obscurité part, et le message d'erreur Notice arrive au-dessus et prend le focus.
-   **Reduced motion:** le dessin apparaît terminé.

## Anatomie

1.  **Dim :** le conteneur, avec du papier par-dessus ; le contenu est toujours là, ne captant aucun clic.
2.  **L'esquisse :** la ligne tournante, la coche ou le X, chacune formée de deux traits.
3.  **Le mot :** court, pour ceux qui ne peuvent pas voir l'esquisse.

## Les trois états

Saving…

Chargement

Saved

C'est réussi

Not saved

C'est échoué

## Accessibilité

-   Le mot se trouve dans un `role="status"` : les lecteurs d'écran annoncent "Enregistrement…" puis le résultat.
-   Pendant l'action, le conteneur obtient `aria-busy="true"`.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-status-host"`

sur le conteneur

Ce qui assombrit.

`data-state`

`"loading"`, `"ok"`, `"error"`

Lequel dessin et quel mot.

`class="feitio-status"`

dernier enfant

L'obscurité, le dessin et le mot.