fokus-styles 2.4.0 → 2.6.0

package/docs/components/tile.md

@@ -1,112 +0,0 @@
-# Tile
-
-Linha compacta ícone + título/subtítulo + ações, para listas de
-opções/configurações/itens (sinergia visual com
-[Notification Center](notification-center.md) e [Empty State](empty-state.md)).
-
-## Visão geral
-
-```html
-<div class="fs-tile">
-  <div class="fs-tile-icon" aria-hidden="true">
-    <svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>
-  </div>
-  <div class="fs-tile-body">
-    <p class="fs-tile-title">Relatório mensal.pdf</p>
-    <p class="fs-tile-subtitle">2.4 MB · Atualizado há 2h</p>
-  </div>
-  <div class="fs-tile-actions">
-    <button type="button" class="fs-btn fs-btn-sm">Abrir</button>
-  </div>
-</div>
-```
-
-## Anatomia
-
-`.fs-tile` > `.fs-tile-icon` (ícone SVG — [`fokus-styles/icons`](../guides/icons.md)
-recomendado — ou imagem, largura fixa) +
-`.fs-tile-body` (`.fs-tile-title` + `.fs-tile-subtitle`, opcional, ambos
-truncam com reticências se não couberem) + `.fs-tile-actions` (opcional —
-botões, switch, badge).
-
-## Variações
-
-- **Ações à direita** (padrão) ou **embaixo**: adicione
-  `.fs-tile-actions-bottom` no `.fs-tile` para `.fs-tile-actions` quebrar
-  para uma segunda linha, alinhada à direita.
-- **Clicável**: `.fs-tile-clickable` + [`.fs-stretched-link`](card.md#fs-card-clickable)
-  num link dentro do `.fs-tile-body` — o tile inteiro fica clicável/focável
-  sem aninhar um `<a>` ao redor de tudo.
-- **Tamanho**: `.fs-tile-sm`, `.fs-tile-lg`; sem sufixo = padrão.
-
-```html
-<div class="fs-tile fs-tile-actions-bottom">
-  <div class="fs-tile-icon" aria-hidden="true">
-    <svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
-  </div>
-  <div class="fs-tile-body">
-    <p class="fs-tile-title">Plano expira em 3 dias</p>
-  </div>
-  <div class="fs-tile-actions">
-    <button type="button" class="fs-btn fs-btn-outline-secondary fs-btn-sm">Depois</button>
-    <button type="button" class="fs-btn fs-btn-primary fs-btn-sm">Renovar</button>
-  </div>
-</div>
-
-<div class="fs-tile fs-tile-clickable">
-  <div class="fs-tile-icon" aria-hidden="true">
-    <svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
-  </div>
-  <div class="fs-tile-body">
-    <p class="fs-tile-title"><a href="/perfil" class="fs-stretched-link">Jorge Reis</a></p>
-    <p class="fs-tile-subtitle">Ver perfil</p>
-  </div>
-</div>
-```
-
-## Estados
-
-Nenhum próprio — hover/focus da variante clicável reusa o mesmo padrão do
-[Card clicável](card.md#fs-card-clickable) (`:hover`/`:focus-within`, borda
-+ sombra).
-
-## A11y
-
-- Título/subtítulo truncados (`text-overflow: ellipsis`) escondem texto
-  visualmente, mas o conteúdo continua no DOM/acessível — se o truncamento
-  for crítico, considere `title="..."` no elemento pra tooltip nativo.
-- Na variante clicável, o link dentro de `.fs-tile-body` é o elemento
-  focável real — o `::after` do stretched-link só expande a área de
-  clique, não tira o foco do link.
-
-## API JS
-
-Nenhuma — 100% CSS.
-
-## Tokens
-
-Sem tokens de componente próprios — usa `--fs-color-border`,
-`--fs-color-surface`, `--fs-color-bg-subtle` (ícone), `--fs-color-text`,
-`--fs-color-muted`, `--fs-radius-md`, `--fs-shadow-sm` (hover clicável).
-
-## Exemplo
-
-```html
-<div class="fs-tile">
-  <div class="fs-tile-icon" aria-hidden="true">
-    <svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/></svg>
-  </div>
-  <div class="fs-tile-body">
-    <p class="fs-tile-title">Tema escuro</p>
-    <p class="fs-tile-subtitle">Alterna a aparência da interface</p>
-  </div>
-  <div class="fs-tile-actions">
-    <div class="fs-switch">
-      <input type="checkbox" class="fs-switch-input" id="tile-theme" checked aria-label="Ativar tema escuro">
-      <label for="tile-theme" class="fs-switch-label"></label>
-    </div>
-  </div>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/content-data.html#tile).

package/docs/components/timeline.md

@@ -1,78 +0,0 @@
-# Timeline
-
-Linha do tempo de eventos — 100% CSS, com marcadores conectados e estados
-por item (pendente/ativo/concluído/falhou).
-
-## Visão geral
-
-```html
-<ol class="fs-timeline">
-  <li class="fs-timeline-item fs-timeline-completed">
-    <div class="fs-timeline-marker"></div>
-    <div class="fs-timeline-content">
-      <p class="fs-timeline-title">Pedido criado</p>
-      <p class="fs-timeline-text">Seu pedido foi registrado.</p>
-      <span class="fs-timeline-time">10:32</span>
-    </div>
-  </li>
-  <li class="fs-timeline-item fs-timeline-active">
-    <div class="fs-timeline-marker"></div>
-    <div class="fs-timeline-content">
-      <p class="fs-timeline-title">Em preparação</p>
-    </div>
-  </li>
-  <li class="fs-timeline-item">
-    <div class="fs-timeline-marker"></div>
-    <div class="fs-timeline-content">
-      <p class="fs-timeline-title">Enviado</p>
-    </div>
-  </li>
-</ol>
-```
-
-## Anatomia
-
-`<ol class="fs-timeline">` > `.fs-timeline-item` (um por evento) >
-`.fs-timeline-marker` (círculo) + `.fs-timeline-content` >
-`.fs-timeline-title` + `.fs-timeline-text` (opcional) +
-`.fs-timeline-time` (opcional). O conector entre marcadores é desenhado
-via `::before` — não insira manualmente.
-
-## Variações
-
-`.fs-timeline-horizontal` no `<ol>` — inverte o eixo (itens em colunas,
-marcador no topo, conector na horizontal).
-
-## Estados
-
-Cada `.fs-timeline-item` aceita uma destas classes (mesma lógica visual do
-[Stepper](stepper.md) — controle manual, sem JS):
-
-| Classe | Efeito |
-|---|---|
-| (nenhuma) | Pendente — marcador vazio, conector cinza. |
-| `.fs-timeline-active` | Em andamento — marcador preenchido na cor primária. |
-| `.fs-timeline-completed` | Concluído — marcador com check verde; o conector seguinte também fica verde (indica progresso). |
-| `.fs-timeline-failed` | Falhou — marcador e título em vermelho. |
-
-## A11y
-
-Use `<ol>` (ordem cronológica importa) — já no exemplo. Sem JS, sem
-interação por teclado própria; se os itens forem clicáveis (ex.: expandir
-detalhes), essa interação é sua responsabilidade.
-
-## API JS
-
-Nenhuma — 100% CSS. Estados são classes que você controla pela sua
-aplicação.
-
-## Tokens
-
-`--fs-color-border` (conector/marcador padrão), `--fs-color-primary`
-(ativo), `--fs-color-success` (concluído), `--fs-color-danger` (falhou),
-`--fs-color-text`, `--fs-color-muted`.
-
-## Exemplo
-
-Ver acima (Visão geral) — mockup completo com as duas orientações em
-[`mockup/content-data.html#timeline`](../../mockup/content-data.html#timeline).

package/docs/components/toast.md

@@ -1,95 +0,0 @@
-# Toast
-
-Notificação temporária, empilhada num canto da tela, com dispensa manual
-ou automática por tempo. Base do [Notification Center](notification-center.md).
-
-## Visão geral
-
-```html
-<button type="button" class="fs-btn fs-btn-primary" id="btn-toast">Mostrar toast</button>
-
-<div class="fs-toast-container">
-  <div class="fs-toast fs-toast-success" data-fs="toast" id="meuToast" data-delay="4000">
-    <div class="fs-toast-header">
-      <span>Sucesso</span>
-      <button type="button" class="fs-btn-close" data-fs-dismiss="toast" aria-label="Fechar"></button>
-    </div>
-    <div class="fs-toast-body">Operação concluída com sucesso.</div>
-  </div>
-</div>
-```
-
-```js
-document.getElementById("btn-toast").addEventListener("click", () => {
-  FokusStyles.Toast.getInstance(document.getElementById("meuToast")).show();
-});
-```
-
-Ao contrário de Modal/Offcanvas, o Toast **não** abre sozinho ao clicar num
-gatilho com `data-fs-target` — ele é mostrado programaticamente via
-`.show()`, porque geralmente é disparado por um evento da sua aplicação
-(sucesso de uma requisição, etc.), não diretamente por um clique.
-
-## Anatomia
-
-`.fs-toast-container` (posição fixa num canto — um só por página,
-compartilhado por todos os toasts) > `.fs-toast` (`data-fs="toast"`) >
-`.fs-toast-header` (título + `.fs-btn-close`) + `.fs-toast-body`.
-
-## Variações
-
-Cor: `.fs-toast-{primary|secondary|success|warning|danger|info}` no
-`.fs-toast` — tinge só o header.
-
-## Estados
-
-`.is-open` — controlado pelo JS (o toast começa com `display: none`
-inline até a primeira `show()`).
-
-- `data-delay` (ms, padrão `4000`) — tempo até auto-esconder.
-- `data-autohide="false"` — desativa o auto-esconder; só fecha pelo
-  `.fs-btn-close` ou `.hide()` programático.
-
-## A11y
-
-`role="status"` + `aria-live="polite"` aplicados automaticamente — leitor
-de tela anuncia o conteúdo ao aparecer, sem interromper o que está sendo
-lido (diferente de `aria-live="assertive"`, que interromperia).
-
-## API JS
-
-Auto-init via `data-fs="toast"` (registra a instância, mas **não** mostra
-automaticamente). `Toast.getInstance(el)`.
-
-| Método | Descrição |
-|---|---|
-| `show()` | Mostra (anima expansão), inicia o temporizador de auto-esconder se `autohide` estiver ativo. |
-| `hide()` | Esconde (anima recolhimento), cancela o temporizador. |
-| `toggle()` | Alterna. |
-| `dispose()` | Cancela o temporizador, remove listeners, desregistra a instância. |
-
-| Evento | Cancelável | Quando |
-|---|---|---|
-| `fs:toast:shown` | Não | Depois que a animação de mostrar termina. |
-| `fs:toast:hidden` | Não | Depois que a animação de esconder termina (inclusive auto-hide). |
-
-## Tokens
-
-`--fs-color-border`, `--fs-color-surface`, `--fs-alert-{nome}-bg`/`-text`
-(header colorido), `--fs-radius-md`, `--fs-shadow-md`.
-
-## Exemplo
-
-```html
-<div class="fs-toast-container">
-  <div class="fs-toast fs-toast-danger" data-fs="toast" id="erroToast" data-autohide="false">
-    <div class="fs-toast-header">
-      <span>Erro</span>
-      <button type="button" class="fs-btn-close" data-fs-dismiss="toast" aria-label="Fechar"></button>
-    </div>
-    <div class="fs-toast-body">Falha ao salvar. Tente novamente.</div>
-  </div>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/overlays-commands.html#toast).

package/docs/components/tooltip.md

@@ -1,77 +0,0 @@
-# Tooltip
-
-Rótulo curto que aparece ao passar o mouse ou focar um elemento —
-substitui o `title` nativo do navegador (lento, sem estilo, inacessível a
-teclado em alguns navegadores).
-
-## Visão geral
-
-```html
-<button type="button" class="fs-btn" data-fs="tooltip" title="Copiar para a área de transferência">
-  Copiar
-</button>
-```
-
-O texto vem do atributo `title` (ou `data-title`) — o JS o remove do DOM
-na inicialização (pra não duplicar com o tooltip nativo do navegador) e o
-recria como conteúdo do tooltip.
-
-## Anatomia
-
-Gerado inteiramente pelo JS: `.fs-tooltip` (`role="tooltip"`) >
-`.fs-tooltip-arrow` + `.fs-tooltip-inner` (texto). Não escreva essa
-marcação manualmente — só o elemento de referência com `title`/`data-fs="tooltip"`.
-
-## Variações
-
-`data-placement` (`top` — padrão, `bottom`, `left`, `right`) no elemento
-de referência. Reposiciona automaticamente se não couber.
-
-```html
-<button class="fs-btn" data-fs="tooltip" data-placement="right" title="Mais opções">⋮</button>
-```
-
-## Estados
-
-`.is-open` — controlado pelo JS ao mostrar/esconder; não defina
-manualmente.
-
-## A11y
-
-O JS aplica `aria-describedby` no elemento de referência, apontando pro
-`id` do tooltip — leitor de tela anuncia o conteúdo ao focar o elemento.
-Mostra em `mouseenter`/`focus`, esconde em `mouseleave`/`blur`/`Escape` —
-funciona por mouse e por teclado igualmente (ao contrário do `title`
-nativo, que só mostra no hover).
-
-## API JS
-
-Auto-init via `data-fs="tooltip"` **ou** instanciação manual
-(`new FokusStyles.Tooltip(el, { title, placement })` — útil quando o texto vem
-de outro lugar, não de um atributo estático; é assim que
-[Breadcrumb](breadcrumb.md) anexa tooltips a labels truncados).
-`Tooltip.getInstance(el)`.
-
-| Método | Descrição |
-|---|---|
-| `show()` | Mostra o tooltip, posicionado relativo à referência. |
-| `hide()` | Esconde. |
-| `toggle()` | Alterna. |
-| `dispose()` | Remove listeners, `aria-describedby` e o elemento do tooltip do DOM; desregistra a instância. |
-
-| Evento (no elemento de referência) | Cancelável | Quando |
-|---|---|---|
-| `fs:tooltip:shown` | Não | Depois de mostrar. |
-| `fs:tooltip:hidden` | Não | Depois de esconder. |
-
-## Tokens
-
-`--fs-tooltip-bg`, `--fs-tooltip-text`, `--fs-radius-sm`.
-
-## Exemplo
-
-```html
-<button type="button" class="fs-btn-close" data-fs="tooltip" title="Fechar" aria-label="Fechar"></button>
-```
-
-Mockup: [laboratório do componente](../../mockup/overlays-commands.html#tooltip).

package/docs/components/tree-view.md

@@ -1,118 +0,0 @@
-# Tree View
-
-Lista hierárquica navegável (arquivos, categorias, organogramas), seguindo
-o padrão [WAI-ARIA Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
-Marcação nativa `<ul>`/`<li>` aninhada — o JS só adiciona os papéis ARIA,
-o botão de expandir/colapsar e a navegação por teclado.
-
-## Visão geral
-
-```html
-<ul class="fs-tree" data-fs="tree-view">
-  <li>
-    <span class="fs-tree-label">src</span>
-    <ul>
-      <li><span class="fs-tree-label">index.js</span></li>
-      <li>
-        <span class="fs-tree-label">components</span>
-        <ul>
-          <li><span class="fs-tree-label">Button.js</span></li>
-        </ul>
-      </li>
-    </ul>
-  </li>
-  <li><span class="fs-tree-label">README.md</span></li>
-</ul>
-```
-
-Cada `<li>` precisa de um `<span class="fs-tree-label">` como filho direto
-(o texto do nó) — nós com filhos somam um `<ul>`/`<ol>` aninhado logo
-depois do label. O JS injeta automaticamente o `.fs-tree-toggle` (a seta)
-dentro do label de cada nó que tiver filhos; nós-folha não recebem seta.
-
-## Anatomia
-
-`ul.fs-tree[role="tree"]` > `li[role="treeitem"]` (recursivo) >
-`span.fs-tree-label` (com `.fs-tree-toggle` auto-injetado se houver
-filhos) + opcionalmente `ul[role="group"]` (o próximo nível).
-
-## Variações
-
-- `data-value` num `<li>` define o valor "de verdade" reportado em
-  `fs:tree:selected` (`event.detail.value`); sem ele, o valor é o texto
-  visível do nó.
-- `aria-expanded="true"` pré-existente num `<li>` com filhos abre esse
-  ramo já expandido na renderização inicial (por padrão, todo ramo nasce
-  colapsado).
-
-## Estados
-
-- Colapsado (padrão) / expandido (`aria-expanded="true"` no `<li>`,
-  `hidden` removido do `<ul>` filho) — alternado por clique na
-  label/seta ou por teclado.
-- Selecionado: `aria-selected="true"` (só no nó mais recente; os demais
-  voltam a `"false"`) — clicar num nó com filhos expande/colapsa **e**
-  seleciona ao mesmo tempo (como um explorador de arquivos).
-
-## A11y
-
-`role="tree"` na raiz, `role="treeitem"` em cada `<li>`, `role="group"` no
-`<ul>`/`<ol>` aninhado, `aria-expanded` nos nós com filhos. Roving
-`tabindex`: só o nó tabulável atual tem `tabindex="0"`; os demais (visíveis)
-ficam em `"-1"` — nós dentro de um ramo colapsado não são alcançáveis por
-Tab. `aria-selected` reflete a seleção atual.
-
-Teclado (com foco num nó da árvore):
-- `ArrowDown`/`ArrowUp`: move o foco pro próximo/anterior nó **visível**
-  (não desce em ramos colapsados).
-- `ArrowRight`: nó fechado → expande (foco não se move); nó já aberto →
-  move o foco pro primeiro filho; folha → sem efeito.
-- `ArrowLeft`: nó aberto → colapsa; nó fechado ou folha → move o foco pro
-  nó pai.
-- `Home`/`End`: primeiro/último nó visível da árvore inteira.
-- `Enter`/`Espaço`: alterna expansão (se houver filhos) e seleciona o nó.
-
-## API JS
-
-Auto-init via `data-fs="tree-view"` na raiz (`<ul>`/`<ol>`).
-`TreeView.getInstance(rootEl)`.
-
-| Método | Descrição |
-|---|---|
-| `expand(item)` | Expande o `<li>` informado (sem efeito se já expandido ou sem filhos). |
-| `collapse(item)` | Colapsa o `<li>` informado. |
-| `toggle(item)` | Alterna expandido/colapsado. |
-| `select(item)` | Marca `aria-selected="true"` no `<li>` informado (e `"false"` nos demais), dispara `fs:tree:selected`. |
-| `dispose()` | Remove listeners e desregistra a instância. |
-
-| Evento (na raiz) | Cancelável | Quando |
-|---|---|---|
-| `fs:tree:expanded` | Não | Após expandir um nó, com `event.detail.item`. |
-| `fs:tree:collapsed` | Não | Após colapsar um nó, com `event.detail.item`. |
-| `fs:tree:selected` | Não | Após selecionar um nó, com `event.detail.value`/`event.detail.item`. |
-
-## Tokens
-
-`--fs-color-text`, `--fs-color-subtle` (hover da label),
-`--fs-color-primary` (nó selecionado, com `color-contrast()` pro texto),
-`--fs-radius-sm`.
-
-## Exemplo
-
-```html
-<ul class="fs-tree" data-fs="tree-view" aria-label="Arquivos do projeto">
-  <li>
-    <span class="fs-tree-label">src</span>
-    <ul>
-      <li><span class="fs-tree-label">index.js</span></li>
-    </ul>
-  </li>
-</ul>
-<script>
-  document.querySelector(".fs-tree").addEventListener("fs:tree:selected", (e) => {
-    console.log("selecionado:", e.detail.value);
-  });
-</script>
-```
-
-Mockup: [laboratório do componente](../../mockup/navigation-disclosure.html#tree-view).

package/docs/contributing/contributing.md

@@ -1,18 +0,0 @@
-# Contribuindo
-
-O guia de contribuição vive na raiz do repositório —
-[`CONTRIBUTING.md`](../../CONTRIBUTING.md) — para o GitHub linkar
-automaticamente em issues/PRs. Cobre:
-
-- Pré-requisitos e setup local.
-- Scripts (`build`, `lint`, `test`, `test:visual`, `test:a11y`, `contrast`,
-  `size`, `docs:check`).
-- Convenções de SCSS e o fluxo pra criar um componente novo.
-- Contrato editorial: cada componente precisa manter implementação, exemplo,
-  documentação, testes e acessibilidade alinhados.
-- Semver e política de depreciação.
-- Checklist de Pull Request.
-
-Ver também: [Código de Conduta](../../CODE_OF_CONDUCT.md),
-[templates de issue](../../.github/ISSUE_TEMPLATE/) e o
-[template de Pull Request](../../.github/PULL_REQUEST_TEMPLATE.md).

package/docs/getting-started/installation.md

@@ -1,70 +0,0 @@
-# Instalação
-
-## Via npm
-
-```bash
-npm install fokus-styles
-```
-
-## Via CDN
-
-Sem instalar nada, direto do jsDelivr ou unpkg:
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fokus-styles/dist/css/fokus.css">
-<script src="https://cdn.jsdelivr.net/npm/fokus-styles/dist/js/fokus.js"></script>
-```
-
-Troque `fokus.css`/`fokus.js` por `fokus.min.css`/`fokus.min.js` para as
-versões minificadas em produção.
-
-## Fontes self-hosted
-
-Plus Jakarta Sans (sans) e Source Code Pro (mono) são distribuídas à parte,
-em `fonts.css`, para não forçar o download das fontes em quem prefere usar
-as próprias. Inclua **antes** do CSS principal:
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fokus-styles/dist/css/fonts.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fokus-styles/dist/css/fokus.css">
-```
-
-Sem `fonts.css`, a tipografia cai no fallback `sans-serif`/`monospace` do
-sistema — nada quebra, só muda a fonte.
-
-## Distribuições disponíveis
-
-O pacote publica o bundle completo (`fokus.css`) e distribuições granulares,
-para quem não precisa do framework inteiro:
-
-| Arquivo | Conteúdo |
-|---|---|
-| `dist/css/fokus.css` | Bundle completo: tokens, reset, layout, forms, components, utilities, tema escuro. |
-| `dist/css/layout.css` | Só grid/containers (+ tokens/reset/tema). |
-| `dist/css/forms.css` | Só formulários (+ tokens/reset/tema). |
-| `dist/css/components.css` | Só componentes prontos (+ tokens/reset/tema). |
-| `dist/css/helpers.css` | Só utilitários atômicos (+ tokens/reset/tema). |
-| `dist/css/fonts.css` | Só os `@font-face` self-hosted (opcional, ver acima). |
-| `dist/js/fokus.js` | Todo o JavaScript dos componentes interativos, IIFE global `FokusStyles`. |
-
-Cada distribuição CSS granular já inclui tokens, reset e tema escuro
-completos — pode ser usada isoladamente sem quebrar variáveis ou dark mode.
-
-## Import via Sass
-
-Para compilar com suas próprias variáveis Sass (sobrescrever antes de
-compilar, em vez de sobrescrever CSS Custom Properties depois):
-
-```scss
-@use "fokus-styles/scss/fokus" with (
-  $radius-md: 10px
-);
-```
-
-Ver [`docs/reference/scss-architecture.md`](../reference/scss-architecture.md)
-para a lista completa de variáveis e a organização dos módulos.
-
-## Próximo passo
-
-[Formas de uso](usage.md) — como inicializar componentes interativos e a
-convenção de nomenclatura de classes.

package/docs/getting-started/usage.md

@@ -1,105 +0,0 @@
-# Formas de uso
-
-## Convenção de nomenclatura
-
-| Prefixo | Papel | Exemplo |
-|---|---|---|
-| `.fs-*` | Componente (estrutura/aparência) | `.fs-btn`, `.fs-card`, `.fs-modal` |
-| `.fs-u-*` | Utilitário atômico | `.fs-u-d-flex`, `.fs-u-mt-3`, `.fs-u-gx-2` |
-| `.is-*` | Estado, controlado por você ou por JS | `.is-active`, `.is-disabled`, `.is-open` |
-| `--fs-*` | Token CSS (Custom Property) | `--fs-color-primary`, `--fs-radius-md` |
-| `data-fs` | Auto-init de componente interativo | `data-fs="modal"` |
-| `data-fs-target`/`data-fs-dismiss` | Alvo/dispensa de componente interativo | `data-fs-target="#meuModal"` |
-| `fs:*` | Evento DOM customizado disparado por um componente | `fs:modal:shown` |
-
-Essa separação existe para o framework nunca colidir com classes de outras
-bibliotecas/CSS na mesma página — ver
-[`docs/reference/scss-architecture.md`](../reference/scss-architecture.md#cascade-layers-layer)
-para como isso se reflete em cascade layers.
-
-## Auto-init de componentes interativos
-
-Todo componente que precisa de JavaScript se inicializa sozinho ao carregar
-a página, a partir do atributo `data-fs="<nome>"` no elemento raiz — não é
-preciso chamar `new FokusStyles.Algo(...)` manualmente:
-
-```html
-<button type="button" class="fs-btn" data-fs-target="#meuModal">Abrir</button>
-
-<div class="fs-modal" data-fs="modal" id="meuModal">
-  <div class="fs-modal-dialog">
-    <div class="fs-modal-content">
-      <div class="fs-modal-body">Conteúdo.</div>
-    </div>
-  </div>
-</div>
-
-<script src="dist/js/fokus.js"></script>
-```
-
-O auto-init roda em `DOMContentLoaded` (ou imediatamente, se o script for
-carregado depois que o DOM já terminou) e é idempotente — chamar de novo não
-cria uma segunda instância no mesmo elemento.
-
-## API comum aos componentes interativos
-
-A maioria segue a mesma forma, acessível via `getInstance()`:
-
-```js
-const modal = FokusStyles.Modal.getInstance(document.getElementById("meuModal"));
-modal.show();
-modal.hide();
-modal.toggle();
-modal.dispose(); // remove listeners e o registro da instância
-```
-
-- `getInstance(el)` — retorna a instância já criada para aquele elemento
-  (`undefined` se não houver, ou se `data-fs` nunca esteve presente e você
-  precisa instanciar manualmente com `new FokusStyles.Nome(el)`).
-- `show()`/`hide()`/`toggle()` — nem todo componente tem os três (ex.:
-  Tabs usa `show(tabEl)` para trocar a aba ativa; Tag só tem `dismiss()`).
-  Ver a página de cada componente em [Componentes](../README.md#componentes)
-  para a API exata.
-- `dispose()` — remove os listeners e desregistra a instância; o elemento
-  em si não é removido do DOM (exceto onde a própria natureza do componente
-  implica remoção, como `Tag.dismiss()`).
-
-Uma exceção à regra: **Alert Dialog** não usa `data-fs`/`getInstance()` — é
-100% programático, via `FokusStyles.confirm({ title, message, ... })`, que
-retorna uma Promise. Ver
-[`../components/alert-dialog.md`](../components/alert-dialog.md).
-
-## Eventos
-
-Componentes disparam eventos DOM customizados, no padrão
-`fs:<componente>:<ação>` (particípio: `shown`/`hidden`/`changed`...),
-sempre com `bubbles: true` — escute no documento ou em qualquer ancestral:
-
-```js
-document.addEventListener("fs:modal:shown", (event) => {
-  console.log("modal aberto:", event.target);
-});
-```
-
-Alguns eventos são **canceláveis** (`cancelable: true`) — chamar
-`event.preventDefault()` no handler impede a ação (ex.: `fs:tag:dismissed`
-cancela a remoção da tag). A documentação de cada componente lista quais
-eventos existem e se são canceláveis.
-
-## Import via ES modules
-
-Além do bundle IIFE (`dist/js/fokus.js`, global `FokusStyles`), os módulos
-individuais são importáveis via `fokus-styles/js/*`:
-
-```js
-import { Modal } from "fokus-styles/js/modal.js";
-```
-
-Útil para bundlers que fazem tree-shaking — importar só o que usa em vez do
-JS inteiro.
-
-## Próximo passo
-
-[Componentes](../README.md#componentes) — catálogo completo, ou
-[Theming](../guides/theming.md) para customizar cores/tipografia/raio sem
-fork.