# Componentes do unslop/ui

Marcação conferida contra `ds/components.js`, `ds/components.css` e `ds/ai.js`. Prefixo `u-`, estado por ARIA.
Exemplos completos: `ds/blocks/wall-*.html` e `ds/blocks/ai-*.html` (`sh -s add <nome>`).

## Superfícies

```html
<article class="u-card">            <!-- casca: --card, borda --line, raio 28 -->
  <div class="u-panel">             <!-- miolo: --panel, raio 16, recuo 12 -->
    <div class="u-head">
      <div><div class="u-label">Deploys</div><div class="u-big">148 <small>nesta semana</small></div></div>
    </div>
    <div class="u-tile">...</div>   <!-- azulejo: --tile, raio 14 -->
  </div>
  <h3 class="u-card__title">Título fora do panel</h3>
  <p class="u-card__desc">Uma ou duas linhas.</p>
</article>
```

## Botão, campo, selo

```html
<button type="button" class="u-btn u-btn--primary">Salvar</button>     <!-- primary | secondary | ghost | accent -->
<button type="button" class="u-btn u-btn--ghost u-btn--icon u-btn--sm" aria-label="Fechar">...</button>
<!-- tamanhos: u-btn--sm, u-btn--lg; ícone: u-btn--icon (sempre com aria-label) -->
<label class="u-field">Nome<input class="u-input" placeholder="Maria Souza"></label>
<label class="u-search"><svg class="u-i" ...></svg><input type="search" aria-label="Busca"><kbd class="u-kbd">⌘K</kbd></label>
<span class="u-badge u-badge--ok">Concluído</span>      <!-- ok | warn | err | info | pill -->
<span class="u-badge u-badge--delta">+6,1%</span>        <!-- data-dir="down" para queda -->
<span class="u-avatar u-avatar--sm">A</span>
```
Ícone inline: `<svg class="u-i" viewBox="0 0 24 24" aria-hidden="true">` com traço, tamanhos `u-i--sm`, `u-i--lg`.

## Controles de formulário

```html
<label class="u-check"><input type="checkbox" checked><span class="u-check__box"><svg viewBox="0 0 16 16"><path class="u-tick" d="m3.5 8.4 3 3 6-6.8"/><path class="u-dash" d="M4 8h8"/></svg></span>Notificar</label>
<label class="u-switch"><input type="checkbox" role="switch" checked><span class="u-switch__track"></span>Ligado</label>
<label class="u-radio"><input type="radio" name="g" value="a"><span class="u-radio__dot"></span></label>
```
Checkbox parcial: `<label class="u-check" data-u="indeterminate">`.

## Componentes com JS (`data-u`)

| `data-u` | Marcação mínima | Props (`data-u-props`) |
|---|---|---|
| `select` | `<div data-u="select" data-u-props='{...}'></div>` | `options` (strings ou `{v,l,tone}`), `value`, `label`. Classe `u-select--sm` no host para tamanho pequeno. |
| `period` | `<div data-u="period"></div>` | `mode:"month"` (12 meses) ou padrão (14 semanas), `items` (lista própria), `index`, `label`. Setas anterior/próximo. |
| `segmented` | `<div data-u="segmented" aria-label="Granularidade"><button type="button">Dia</button><button type="button" aria-checked="true">Semana</button></div>` | sem props. O JS põe `role="radiogroup"` e o indicador deslizante. `u-seg--flat` para versão chapada. |
| `slider` | `<div data-u="slider" data-u-props='{...}'></div>` | `min`, `max`, `step`, `value`, `label`, `left`, `right`, `texts` (um por valor). Emite `u:change`. |
| `tasks` | `.u-tasks` > `ul.u-tasks__list` > `li.u-task[data-state="done|doing|todo"]` com `.u-task__mark` e `.u-task__text`; contador em `[data-count]` | `auto:true` anima o avanço das etapas |
| `nav` | `<nav class="u-side" data-u="nav" aria-label="Navegação principal">` com `button.u-side__item` (`aria-current="page"` no ativo), `.u-side__nav`, `.u-side__spacer` | sem props |
| `models` | `.u-models[data-u="models" role="radiogroup"]` com `label.u-models__opt` + `.u-radio` e um `slider` com `[data-effort]` ao lado | sem props |
| `bars` | `<div data-u="bars" data-u-props='{...}'></div>` | `labels`, `series` (array de arrays) ou `values`, `max`, `color`. Soma em `[data-bars-total]` no card, se existir. |
| `ring` | `<div data-u="ring" data-u-props='{...}'></div>` | `segments:[{v,color}]` com `color:"var(--c1)"`, `value`, `gap`. Legenda em `.u-legend__row[data-seg]`. |
| `calendar` | `<div data-u="calendar" data-u-props='{...}'></div>` | `year`, `month` (0 = janeiro), `start:[a,m,d]`, `end:[a,m,d]` |
| `datatable` | `<div data-u="datatable" data-u-props='{"pageSize":5,"count":48}'></div>` | `pageSize`, `count`. Gera linhas fictícias: é demo de tabela com filtro, ordenação e paginação, não ligada a seus dados. |

Para tabela de dados reais, monte com `u-dt__table`/`u-dt__row` (veja `wall-table.html` e `ds/components.css`) ou use HTML semântico `<table>` com os tokens.

Depois de injetar HTML novo: `Unslop.init(container)`. Para forçar montar sem esperar rolagem: `data-u-eager`.

## Componentes de IA (`ds/ai.css`, `ds/ai.js`)

Importante: `ai-*` são demos animadas de interface de agente (linha do tempo que toca uma vez, ~3 ciclos, pausa
no hover, estado final com `prefers-reduced-motion`). A marcação e as classes servem de base visual; para um
chat real, copie o HTML do bloco e ligue o seu estado, sem depender do `data-u="ai-*"` para a lógica.

Casca: `.u-ai-card` > `.u-ai-card__panel` (recebe o `data-u`, `role="group"` e `aria-label`) > `.u-ai-tile`; texto em `.u-ai-card__text` (`.u-ai-card__title`, `.u-ai-card__desc`).

| `data-u` | Mostra | Peças principais |
|---|---|---|
| `ai-chat` | pergunta, resposta em streaming, ações | `.u-ai-ask`, `.u-ai-reply` (`__av`, `__body`, `__text`, `__typing`), `.u-ai-acts` com `button.u-ai-act[data-act="copy|redo|like"]` (`like` usa `aria-pressed`) |
| `ai-thinking` | raciocínio que se recolhe | `.u-ai-think` com `button.u-ai-think__head[aria-expanded]`, `.u-ai-think__time`, `.u-ai-think__body[data-open]` > `.u-ai-think__inner` > `.u-ai-think__text` |
| `ai-tool` | chamada de ferramenta com passos | `.u-ai-tool` (`__head`, `__name`), `.u-ai-badge[data-state="running|done"]`, `ul.u-ai-steps` > `li.u-ai-step[data-state="running|done"]` (sem estado = pendente) |
| `ai-search` | pesquisas na web e fontes | `.u-ai-search` (`__head`, `__qs` > `__q`, `__srcs` > `.u-ai-src`, `__status[data-state]`) |
| `ai-context` | janela de contexto e limites de uso | `.u-ai-ctx` (`__bar` > `__seg` com `width` em %, `__legend`), `.u-ai-limit` (`__name`, `__pct`, `__track`, `__fill[data-pct]`) |
| `ai-composer` | campo de mensagem com anexos | `.u-ai-composer__ctx`, `.u-ai-composer__box`, `.u-ai-file` (`--img`, `__name`, `__x`) |

Copie sempre do `ds/blocks/ai-*.html` correspondente: a marcação tem muitos detalhes (ícones, estados) que a tabela não repete.