# StatusOverlay

O retorno no próprio container onde a ação aconteceu: carregando, deu certo ou deu errado, com o Notice logo acima.

## Playground

```html
<div class="feitio-status-host"><div class="feitio-stack" data-gap="3"><strong>Lembrete</strong><div class="feitio-field"><label class="feitio-label" for="pg-so">Nome do lembrete</label><input class="feitio-input" id="pg-so" value="Regar as plantas"></div><div><button class="feitio-button" type="button" data-variant="primary">Salvar</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>
```

## Quando usar

-   Em toda ação que leva tempo ou muda um estado: salvar, apagar, enviar.

## Quando não usar

-   **Na tela inteira**, para uma ação de um pedaço dela.
-   **No lugar do Notice:** a animação mostra que algo aconteceu; o Notice diz o quê.

## Exemplos

### Salvar um lembrete

Toque em Salvar. Troque o resultado do teste para ver o erro.

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

## A sequência

-   **Carregando:** o esmaecido entra e o traço gira; um segundo envio é ignorado.
-   **Deu certo:** o certo é desenhado em musgo, o esmaecido sai, e o Notice entra acima.
-   **Deu errado:** o X em vinho, o esmaecido sai, e o Notice de erro entra acima e recebe o foco.
-   **Movimento reduzido:** o desenho aparece pronto.

## Anatomia

1.  **Esmaecido:** o container, com o papel por cima; o conteúdo continua lá, sem receber toque.
2.  **O desenho:** o traço girando, o certo ou o X, cada um feito de dois traços.
3.  **A palavra:** curta, para quem não vê o desenho.

## Os três estados

Salvando…

Carregando

Salvo

Deu certo

Não salvou

Deu errado

## Acessibilidade

-   A palavra fica num `role="status"`: o leitor de tela anuncia "Salvando…" e depois o resultado.
-   Durante a ação, o container leva `aria-busy="true"`.

## Atributos

Atributo

Valores

Para quê

`class="feitio-status-host"`

no container

O que esmaece.

`data-state`

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

Qual desenho e qual palavra.

`class="feitio-status"`

último filho

O esmaecido, o desenho e a palavra.