# StatusOverlay

Feedback en el contenedor muy donde ocurrió la acción: carga, completado o fallido, con el Notice justo encima.

## Playground

```html
<div class="feitio-status-host"><div class="feitio-stack" data-gap="3"><strong>Recordatorio</strong><div class="feitio-field"><label class="feitio-label" for="pg-so">Nombre del recordatorio</label><input class="feitio-input" id="pg-so" value="Regar las plantas"></div><div><button class="feitio-button" type="button" data-variant="primary">Guardar</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>
```

## Cuándo usarlo

-   En cada acción que toma tiempo o cambia un estado: guardar, borrar, enviar.

## Cuándo no usarlo

-   **En toda la pantalla**, para una acción en una parte de ella.
-   **En lugar del Notice:** la animación muestra algo ocurrido; el Notice dice qué.

## Ejemplos

### Guardando un recordatorio

Toca Guardar. Cambia el resultado de la prueba para ver el error.

Mostrar código

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

-   **Carga:** la oscuridad entra y el trazo gira; una segunda envío se ignora.
-   **Funcionó:** el check se dibuja en musgo, la oscuridad sale y el Notice entra por encima.
-   **Falló:** la X en vino, la oscuridad sale y el error Notice entra por encima y toma el foco.
-   **Moción reducida:** el dibujo aparece terminado.

## Anatomía

1.  **Dim:** el contenedor, con papel encima; el contenido sigue ahí, sin recibir toques.
2.  **El dibujo:** el trazo giratorio, la verificación o la X, cada uno hecho con dos trazos.
3.  **La palabra:** breve, para quienes no pueden ver el dibujo.

## Los tres estados

Saving…

Cargando

Saved

Funcionó

Not saved

No funcionó

## Accesibilidad

-   La palabra se sienta en un `role="status"`: los lectores de pantalla anuncian "Guardando…" y luego el resultado.
-   Durante la acción, el contenedor obtiene `aria-busy="true"`.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-status-host"`

en el contenedor

Qué oscurece.

`data-state`

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

Qué dibujo y qué palabra.

`class="feitio-status"`

último hijo

La oscuridad, el dibujo y la palabra.