fokus-styles 2.4.0 → 2.6.0

package/docs/components/modal.md

@@ -1,120 +0,0 @@
-# Modal
-
-Diálogo sobreposto à página inteira, com focus trap, `Escape` e clique
-fora pra fechar. Base do [Alert Dialog](alert-dialog.md).
-
-## Visão geral
-
-```html
-<button type="button" class="fs-btn fs-btn-primary" data-fs="modal" data-fs-target="#meuModal">
-  Abrir modal
-</button>
-
-<div class="fs-modal" id="meuModal">
-  <div class="fs-modal-dialog">
-    <div class="fs-modal-content">
-      <div class="fs-modal-header">
-        <h3 class="fs-modal-title">Título</h3>
-        <button type="button" class="fs-btn-close" data-fs-dismiss="modal" aria-label="Fechar"></button>
-      </div>
-      <div class="fs-modal-body">Conteúdo do modal.</div>
-      <div class="fs-modal-footer">
-        <button type="button" class="fs-btn" data-fs-dismiss="modal">Cancelar</button>
-        <button type="button" class="fs-btn fs-btn-primary">Confirmar</button>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-`data-fs` vai no **gatilho** (o botão que abre), não no `.fs-modal` — ao
-contrário da maioria dos outros componentes.
-
-## Anatomia
-
-Gatilho (`data-fs="modal"` + `data-fs-target`) + `.fs-modal` (overlay de
-tela cheia, centraliza o conteúdo) > `.fs-modal-dialog` (limita a largura)
-> `.fs-modal-content` (card visual) > `.fs-modal-header` (título +
-`.fs-btn-close`, opcional) + `.fs-modal-body` (rola internamente se o
-conteúdo for maior que a viewport) + `.fs-modal-footer` (ações, opcional).
-
-## Variações
-
-Tamanho do diálogo: `.fs-modal-sm` (320px), `.fs-modal-lg` (720px) em
-`.fs-modal-dialog`; sem sufixo = 480px (padrão).
-
-```html
-<div class="fs-modal-dialog fs-modal-lg">...</div>
-```
-
-## Estados
-
-`.is-open` no `.fs-modal` — controlado pelo JS.
-
-**Backdrop estático** (`data-backdrop="static"` no `.fs-modal`): desativa
-fechamento por `Escape` e clique fora — só um `data-fs-dismiss="modal"`
-explícito fecha. Use para fluxos que exigem uma decisão explícita.
-
-```html
-<div class="fs-modal" id="modalCritico" data-backdrop="static">...</div>
-```
-
-## A11y
-
-Use `.fs-modal-sm`, `.fs-modal-lg`, `.fs-modal-xl`, `.fs-modal-fullscreen` e
-`.fs-modal-scrollable` conforme o fluxo. Em telas menores o diálogo respeita safe areas.
-
-Ao inicializar, o componente controla `aria-hidden` e, quando encontra
-`.fs-modal-title`, cria automaticamente o vínculo `aria-labelledby`. Um
-`id` existente no título é preservado.
-
-`role="dialog"` + `aria-modal="true"` aplicados automaticamente. Ao abrir:
-foco preso dentro do `.fs-modal-dialog` (`Tab`/`Shift+Tab` ciclam só entre
-os elementos focáveis internos), primeiro elemento focável recebe foco,
-scroll da página é bloqueado. Ao fechar: foco volta pro gatilho que abriu.
-
-## API JS
-
-Auto-init via `data-fs="modal"` **no gatilho**. `Modal.getInstance(triggerEl)`.
-
-| Método | Descrição |
-|---|---|
-| `show()` | Abre, trava o scroll, ativa o focus trap. |
-| `hide()` | Fecha, libera o scroll, devolve o foco ao gatilho. |
-| `toggle()` | Alterna. |
-| `dispose()` | Fecha se aberto, remove listeners, desregistra a instância. |
-
-| Evento (no gatilho) | Cancelável | Quando |
-|---|---|---|
-| `fs:modal:shown` | Não | Depois de abrir. |
-| `fs:modal:hidden` | Não | Depois de fechar (inclusive via Escape/clique fora). |
-
-## Tokens
-
-`--fs-color-surface`, `--fs-color-text`, `--fs-color-border`,
-`--fs-radius-md`, `--fs-shadow-lg`.
-
-## Exemplo
-
-```html
-<button type="button" class="fs-btn fs-btn-danger" data-fs="modal" data-fs-target="#confirmarExclusao">
-  Excluir
-</button>
-<div class="fs-modal" id="confirmarExclusao">
-  <div class="fs-modal-dialog fs-modal-sm">
-    <div class="fs-modal-content">
-      <div class="fs-modal-body">
-        <h3 class="fs-modal-title">Excluir item?</h3>
-        <p>Essa ação não pode ser desfeita.</p>
-      </div>
-      <div class="fs-modal-footer">
-        <button type="button" class="fs-btn" data-fs-dismiss="modal">Cancelar</button>
-        <button type="button" class="fs-btn fs-btn-danger">Excluir</button>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-Para o mesmo padrão sem escrever HTML, ver [Alert Dialog](alert-dialog.md)
-(`FokusStyles.confirm()`). Mockup: [laboratório do componente](../../mockup/overlays-commands.html#modal).

package/docs/components/navbar.md

@@ -1,74 +0,0 @@
-# Navbar
-
-Barra de navegação horizontal estática — marca de um lado, links do outro.
-Versão "crua": sem collapse/hambúrguer próprio para mobile e sem dropdown
-embutido; para um menu suspenso dentro da navbar, combine com
-[Dropdown](dropdown.md).
-
-## Visão geral
-
-```html
-<nav class="fs-navbar">
-  <a href="#" class="fs-navbar-brand">Minha Marca</a>
-  <ul class="fs-navbar-nav">
-    <li><a href="#" class="fs-nav-link is-active">Início</a></li>
-    <li><a href="#" class="fs-nav-link">Produtos</a></li>
-    <li><a href="#" class="fs-nav-link is-disabled">Em breve</a></li>
-  </ul>
-</nav>
-```
-
-## Anatomia
-
-`.fs-navbar` (flex, `justify-content: space-between`, quebra linha se não
-houver espaço) > `.fs-navbar-brand` (nome/logo) + `.fs-navbar-nav`
-(`<ul>` sem marcadores) > `<li>` > `.fs-nav-link`.
-
-`.fs-nav-link` é compartilhado com [Tabs](tabs.md) — o mesmo estilo de
-link de navegação serve pros dois contextos.
-
-## Variações
-
-Nenhuma variação de cor/tamanho — a navbar é sempre o mesmo visual; a
-composição (o que vai dentro) que muda.
-
-## Estados
-
-- `.fs-nav-link.is-active` — destaque de cor primária + peso de fonte
-  maior.
-- `.fs-nav-link.is-disabled` — cor muted, não clicável.
-
-## A11y
-
-O padrão responsivo usa `.fs-navbar-toggler`, `.fs-navbar-collapse` e `data-fs-target`.
-Mantenha `aria-expanded` e um nome acessível no botão.
-
-- Use `<nav>` como elemento raiz (já no exemplo) — landmark de navegação
-  pra leitores de tela.
-- Se houver mais de uma navbar na página, diferencie com
-  `aria-label="Navegação principal"` (ou similar) em cada `<nav>`.
-
-## API JS
-
-Nenhuma — 100% CSS.
-
-## Tokens
-
-`--fs-color-border` (borda inferior), `--fs-color-surface` (fundo),
-`--fs-color-text`, `--fs-color-primary` (ativo), `--fs-color-muted`
-(desabilitado), `--fs-radius-sm` (hover do link).
-
-## Exemplo
-
-```html
-<nav class="fs-navbar" aria-label="Navegação principal">
-  <a href="#" class="fs-navbar-brand">FokusStyles</a>
-  <ul class="fs-navbar-nav">
-    <li><a href="#" class="fs-nav-link is-active">Dashboard</a></li>
-    <li><a href="#" class="fs-nav-link">Relatórios</a></li>
-    <li><a href="#" class="fs-nav-link">Configurações</a></li>
-  </ul>
-</nav>
-```
-
-Mockup: [laboratório do componente](../../mockup/navigation-disclosure.html#navbar).

package/docs/components/nested-menu.md

@@ -1,90 +0,0 @@
-# Nested Menu
-
-[Dropdown](dropdown.md) com submenus recursivos, quantos níveis quiser.
-Reusa `.fs-dropdown-menu`/`.fs-dropdown-item` sem reestilizar — só adiciona
-o posicionamento em cascata e a navegação por nível. Componente próprio
-(não é o Dropdown com opção extra) porque a navegação por teclado é por
-nível, não linear sobre todos os itens.
-
-## Visão geral
-
-```html
-<button type="button" class="fs-btn fs-dropdown-toggle" data-fs="nested-menu" data-fs-target="#menu">
-  Arquivo
-</button>
-<div class="fs-dropdown-menu" id="menu">
-  <a href="#" class="fs-dropdown-item">Novo</a>
-  <div class="fs-dropdown-submenu">
-    <a href="#" class="fs-dropdown-item fs-dropdown-item-submenu">Exportar</a>
-    <div class="fs-dropdown-menu">
-      <a href="#" class="fs-dropdown-item">PDF</a>
-      <a href="#" class="fs-dropdown-item">CSV</a>
-    </div>
-  </div>
-  <a href="#" class="fs-dropdown-item">Fechar</a>
-</div>
-```
-
-## Anatomia
-
-Gatilho + `.fs-dropdown-menu` (raiz) — cada submenu é
-`.fs-dropdown-submenu` (âncora de posicionamento) envolvendo um
-`.fs-dropdown-item.fs-dropdown-item-submenu` (o item que abre, com seta
-lateral) seguido de outro `.fs-dropdown-menu` (o submenu em si, mesmo
-padrão recursivamente).
-
-## Variações
-
-Mesmas de [Dropdown](dropdown.md) no gatilho raiz (`data-placement`,
-`data-align`). Submenus não têm variação própria — abrem sempre à direita
-do item pai, com flip automático para a esquerda se não couber (a classe
-`.fs-dropdown-submenu-left` é aplicada/removida pelo JS, não escreva
-manualmente).
-
-## Estados
-
-`.is-open` em cada `.fs-dropdown-menu` (raiz e submenus, independentes).
-Só um submenu por nível fica aberto por vez — abrir um fecha os irmãos do
-mesmo nível.
-
-Abertura por **hover** é 100% CSS (`:hover` no `.fs-dropdown-submenu`);
-por **clique/teclado** é controlada pelo JS, coexistindo sem conflito
-(passar o mouse fecha ramos abertos por teclado que não estão no caminho
-do hover).
-
-## A11y
-
-`role="menu"` em todo nível, `aria-haspopup="menu"` + `aria-expanded` em
-todo item que abre submenu (sincronizados automaticamente). Teclado (com
-foco num item do menu): `ArrowDown`/`ArrowUp` navegam no nível atual,
-`ArrowRight` abre o submenu do item focado e move o foco pro primeiro item
-dele, `ArrowLeft` fecha o submenu atual e devolve o foco ao item pai,
-`Escape` fecha só o nível atual (se estiver num submenu) ou o menu inteiro
-(se estiver na raiz), `Enter`/`Space` num item com submenu alterna
-abrir/fechar.
-
-## API JS
-
-Auto-init via `data-fs="nested-menu"`. `NestedMenu.getInstance(el)` (`el`
-é o gatilho).
-
-| Método | Descrição |
-|---|---|
-| `show()` | Abre o menu raiz, posiciona, foca o primeiro item. |
-| `hide()` | Fecha o menu raiz e todos os submenus abertos. |
-| `toggle()` | Alterna. |
-| `dispose()` | Fecha se aberto, remove todos os listeners, desregistra a instância. |
-
-| Evento (no gatilho) | Cancelável | Quando |
-|---|---|---|
-| `fs:nested-menu:shown` | Não | Depois de abrir o menu raiz. |
-| `fs:nested-menu:hidden` | Não | Depois de fechar o menu raiz (fecha todos os submenus junto). |
-
-## Tokens
-
-Mesmos do [Dropdown](dropdown.md) — sem tokens próprios.
-
-## Exemplo
-
-Ver acima (Visão geral) — mockup com múltiplos níveis em
-[laboratório do componente](../../mockup/navigation-disclosure.html#nested-menu).

package/docs/components/notification-center.md

@@ -1,116 +0,0 @@
-# Notification Center
-
-Orquestra múltiplas instâncias de [Toast](toast.md) e mantém um histórico
-com painel de notificações e contador de não-lidas — não introduz um
-elemento visual novo, compõe o que já existe.
-
-## Visão geral
-
-```html
-<button type="button" class="fs-btn" data-fs="notification-center" data-fs-target="#painel-notif" aria-label="Notificações">
-  <svg class="fs-icon" aria-hidden="true" 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="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>
-  <span class="fs-notification-badge" hidden>0</span>
-</button>
-
-<div class="fs-notification-center" id="painel-notif">
-  <div class="fs-notification-center-header">
-    <span class="fs-notification-center-title">Notificações</span>
-    <button type="button" class="fs-btn fs-btn-sm" data-notification="clear">Limpar tudo</button>
-  </div>
-  <ul class="fs-notification-list"></ul>
-  <p class="fs-notification-empty">Nenhuma notificação.</p>
-</div>
-```
-
-```js
-const center = FokusStyles.NotificationCenter.getInstance(document.querySelector('[data-fs="notification-center"]'));
-center.push({ title: "Sucesso", body: "Arquivo salvo.", variant: "success" });
-```
-
-## Anatomia
-
-Gatilho (`data-fs="notification-center"` + `data-fs-target`, com
-`.fs-notification-badge` opcional dentro) + `.fs-notification-center`
-(painel) > `.fs-notification-center-header` (título + botão "limpar tudo",
-via `data-notification="clear"`) + `.fs-notification-list` (`<ul>`,
-preenchida dinamicamente) + `.fs-notification-empty` (mostrado/escondido
-automaticamente conforme o histórico). O `.fs-toast-container` é criado
-automaticamente se não existir um na página (ou aponte pra um existente
-com `data-toast-container="#seletor"`).
-
-## Variações
-
-Cor por item de notificação: `.fs-notification-item-{nome}` (borda
-esquerda colorida) — aplicada automaticamente a partir do `variant`
-passado em `push()`.
-
-## Estados
-
-- `.fs-notification-item-unread` — aplicada automaticamente aos itens
-  ainda não lidos (some ao abrir o painel — abrir marca tudo como lido).
-- Persistência: `data-storage="local"` + `data-storage-key="..."` no
-  gatilho grava o histórico em `localStorage` (sobrevive a reload); padrão
-  é `"memory"` (perde ao recarregar a página).
-
-```html
-<button data-fs="notification-center" data-fs-target="#painel" data-storage="local" data-storage-key="minhas-notificacoes" aria-label="Notificações">
-  <svg class="fs-icon" aria-hidden="true" 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="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>
-</button>
-```
-
-## A11y
-
-`aria-haspopup="dialog"` + `aria-expanded` no gatilho, `role="region"` +
-`aria-label="Notificações"` no painel (aplicados automaticamente, a menos
-que você já tenha definido `aria-label` próprio). `Escape` fecha e devolve
-foco ao gatilho; clique fora fecha.
-
-## API JS
-
-Auto-init via `data-fs="notification-center"` **no gatilho**.
-`NotificationCenter.getInstance(triggerEl)`.
-
-| Método | Descrição |
-|---|---|
-| `push({ title, body, variant, autohide, delay })` | Empilha um toast na hora e registra a notificação no histórico. Retorna o `id` do registro. |
-| `remove(id)` | Remove uma notificação específica do histórico. |
-| `clear()` | Remove todo o histórico. |
-| `getAll()` | Retorna uma cópia do histórico atual (array de registros). |
-| `open()` / `close()` / `toggle()` | Abrem/fecham o painel (abrir marca tudo como lido). |
-| `dispose()` | Fecha se aberto, remove listeners, desregistra a instância. |
-
-| Evento (no gatilho) | Cancelável | Quando |
-|---|---|---|
-| `fs:notification:pushed` | Não | Depois de `push()` — `event.detail.record` traz o registro criado. |
-| `fs:notification:opened` / `-closed` | Não | Depois de abrir/fechar o painel. |
-| `fs:notification:cleared` | Não | Depois de `clear()`. |
-
-## Tokens
-
-`--fs-color-border`, `--fs-color-surface`, `--fs-color-subtle` (item não
-lido), `--fs-color-danger` (badge de contagem), `--fs-color-{nome}` (borda
-por variante), `--fs-radius-md`, `--fs-shadow-md`.
-
-## Exemplo
-
-```html
-<button type="button" class="fs-btn" data-fs="notification-center" data-fs-target="#nc" id="nc-trigger" aria-label="Notificações">
-  <svg class="fs-icon" aria-hidden="true" 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="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>
-  <span class="fs-notification-badge" hidden>0</span>
-</button>
-<div class="fs-notification-center" id="nc">
-  <div class="fs-notification-center-header">
-    <span class="fs-notification-center-title">Notificações</span>
-    <button type="button" class="fs-btn fs-btn-sm" data-notification="clear">Limpar tudo</button>
-  </div>
-  <ul class="fs-notification-list"></ul>
-  <p class="fs-notification-empty">Nenhuma notificação.</p>
-</div>
-<script>
-  document.getElementById("nc-trigger").addEventListener("fs:notification:pushed", (e) => {
-    console.log("nova notificação:", e.detail.record);
-  });
-</script>
-```
-
-Mockup: [laboratório do componente](../../mockup/overlays-commands.html#notification-center).

package/docs/components/offcanvas.md

@@ -1,102 +0,0 @@
-# Offcanvas
-
-Painel deslizante de qualquer borda da tela (menu lateral mobile, carrinho,
-filtros) — mesmo focus trap/`Escape`/clique-fora do [Modal](modal.md), mas
-não cobre a tela inteira.
-
-## Visão geral
-
-```html
-<button type="button" class="fs-btn" data-fs="offcanvas" data-fs-target="#meuPainel">
-  Abrir menu
-</button>
-
-<div class="fs-offcanvas fs-offcanvas-start" id="meuPainel">
-  <div class="fs-offcanvas-header">
-    <h3 class="fs-offcanvas-title">Menu</h3>
-    <button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
-  </div>
-  <div class="fs-offcanvas-body">Conteúdo do painel.</div>
-</div>
-```
-
-`data-fs` vai no gatilho, como no Modal.
-
-## Anatomia
-
-Gatilho + `.fs-offcanvas` (painel, `position: fixed`, fora da viewport até
-abrir) > `.fs-offcanvas-header` (título + `.fs-btn-close`, opcional) +
-`.fs-offcanvas-body` (rola internamente) + `.fs-offcanvas-footer`
-(opcional). Um `.fs-offcanvas-backdrop` é criado/removido dinamicamente
-pelo JS a cada abertura (não escreva no HTML).
-
-## Variações
-
-Borda de entrada — obrigatório escolher uma:
-
-- `.fs-offcanvas-start` — esquerda, 320px de largura.
-- `.fs-offcanvas-end` — direita, 320px de largura.
-- `.fs-offcanvas-top` — topo, 40vh de altura.
-- `.fs-offcanvas-bottom` — base, 40vh de altura.
-
-## Estados
-
-`.is-open` — controlado pelo JS, anima via `transform`/`transition`
-(desativada automaticamente sob `prefers-reduced-motion: reduce`).
-
-**Backdrop**: `data-backdrop="false"` no `.fs-offcanvas` remove o
-backdrop (painel some, mas o resto da página continua interativa por
-baixo); `data-backdrop="static"` mantém o backdrop mas desativa
-`Escape`/clique-fora (só `data-fs-dismiss="offcanvas"` fecha) — mesma
-semântica do Modal.
-
-## A11y
-
-Ao inicializar, o componente controla `aria-hidden` e, quando encontra
-`.fs-offcanvas-title`, cria automaticamente o vínculo `aria-labelledby`. Um
-`id` existente no título é preservado.
-
-`role="dialog"` + `aria-modal="true"` aplicados automaticamente. Foco
-preso dentro do painel enquanto aberto, movido pro primeiro elemento
-focável (com um pequeno atraso técnico pra garantir que a transição de
-`visibility` já rodou — o painel usa `visibility: hidden` em vez de
-`display: none` pra poder animar). Ao fechar, foco volta pro gatilho.
-
-## API JS
-
-Auto-init via `data-fs="offcanvas"` **no gatilho**. `Offcanvas.getInstance(triggerEl)`.
-
-| Método | Descrição |
-|---|---|
-| `show()` | Abre, cria o backdrop (se aplicável), trava scroll, ativa focus trap. |
-| `hide()` | Fecha, remove o backdrop, libera scroll, devolve foco ao gatilho. |
-| `toggle()` | Alterna. |
-| `dispose()` | Fecha se aberto, remove listeners, desregistra a instância. |
-
-| Evento (no gatilho) | Cancelável | Quando |
-|---|---|---|
-| `fs:offcanvas:shown` | Não | Depois de abrir. |
-| `fs:offcanvas:hidden` | Não | Depois de fechar. |
-
-## Tokens
-
-`--fs-color-surface`, `--fs-color-text`, `--fs-color-border`,
-`--fs-shadow-lg`.
-
-## Exemplo
-
-```html
-<button type="button" class="fs-btn" data-fs="offcanvas" data-fs-target="#filtros">Filtros</button>
-<div class="fs-offcanvas fs-offcanvas-end" id="filtros" data-backdrop="static">
-  <div class="fs-offcanvas-header">
-    <h3 class="fs-offcanvas-title">Filtros</h3>
-    <button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
-  </div>
-  <div class="fs-offcanvas-body">...</div>
-  <div class="fs-offcanvas-footer">
-    <button type="button" class="fs-btn fs-btn-primary" data-fs-dismiss="offcanvas">Aplicar</button>
-  </div>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/overlays-commands.html#offcanvas).

package/docs/components/pagination.md

@@ -1,145 +0,0 @@
-# Pagination
-
-Navegação entre páginas de uma listagem — sem JavaScript próprio; qual
-página está ativa/desabilitada é responsabilidade da sua aplicação (você
-adiciona/remove `.is-active`/`.is-disabled` conforme o estado atual). Os
-ícones de anterior/próxima/reticências usam o pacote
-[`fokus-styles/icons`](../guides/icons.md) (Lucide) — veja lá se quiser trocar
-por outro conjunto.
-
-## Visão geral
-
-```html
-<ul class="fs-pagination">
-  <li class="fs-page-item is-disabled">
-    <a href="#" class="fs-page-link" aria-label="Anterior">
-      <svg class="fs-icon" aria-hidden="true" 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="m15 18-6-6 6-6"/></svg>
-    </a>
-  </li>
-  <li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
-  <li class="fs-page-item is-active"><a href="#" class="fs-page-link">2</a></li>
-  <li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
-  <li class="fs-page-item">
-    <a href="#" class="fs-page-link" aria-label="Próxima">
-      <svg class="fs-icon" aria-hidden="true" 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="m9 18 6-6-6-6"/></svg>
-    </a>
-  </li>
-</ul>
-```
-
-## Anatomia
-
-`<ul class="fs-pagination">` > `<li class="fs-page-item">` >
-`<a class="fs-page-link">` — marcação de lista nativa, `<ul>`/`<li>`. Nos
-itens de anterior/próxima só com ícone (sem texto visível), o `<a>` precisa
-de `aria-label` (`"Anterior"`/`"Próxima"`) já que o SVG é `aria-hidden`.
-
-## Variações
-
-- **Bordered**: `.fs-pagination-bordered` — itens colados (sem gap), borda
-  fundida entre eles (técnica de margin negativo do
-  [Input Group](input-group.md)), cantos arredondados só nas pontas.
-- **Tamanho**: `.fs-pagination-sm`, `.fs-pagination-lg`; sem sufixo =
-  padrão (32px).
-- **Prev/next descritivo**: `.fs-page-link-text` no item de anterior/
-  próxima, pra ícone + texto (`"Anterior"`/`"Próxima"`) em vez de só o
-  ícone — só ajusta o `gap`/padding, o `.fs-page-link` já acomoda largura
-  variável. Com texto visível, dispensa o `aria-label` (o link já tem
-  nome acessível pelo próprio texto).
-- **Reticências** (intervalo de páginas omitido, ex. `1 2 3 … 8 9 10`):
-  `.fs-page-item.is-disabled` com um `<span>` (não `<a>` — não é uma ação)
-  contendo o ícone `ellipsis`, `aria-hidden="true"` no item inteiro
-  (não comunica nada de acionável a leitores de tela).
-
-```html
-<ul class="fs-pagination fs-pagination-bordered fs-pagination-sm">
-  <li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
-  <li class="fs-page-item is-active"><a href="#" class="fs-page-link">2</a></li>
-</ul>
-
-<ul class="fs-pagination">
-  <li class="fs-page-item">
-    <a href="#" class="fs-page-link fs-page-link-text">
-      <svg class="fs-icon" aria-hidden="true" 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="m15 18-6-6 6-6"/></svg>
-      Anterior
-    </a>
-  </li>
-  <li class="fs-page-item">
-    <a href="#" class="fs-page-link fs-page-link-text">
-      Próxima
-      <svg class="fs-icon" aria-hidden="true" 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="m9 18 6-6-6-6"/></svg>
-    </a>
-  </li>
-</ul>
-
-<ul class="fs-pagination">
-  <li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
-  <li class="fs-page-item"><a href="#" class="fs-page-link">2</a></li>
-  <li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
-  <li class="fs-page-item is-disabled" aria-hidden="true">
-    <span class="fs-page-link">
-      <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
-    </span>
-  </li>
-  <li class="fs-page-item"><a href="#" class="fs-page-link">8</a></li>
-  <li class="fs-page-item"><a href="#" class="fs-page-link">9</a></li>
-  <li class="fs-page-item"><a href="#" class="fs-page-link">10</a></li>
-</ul>
-```
-
-## Estados
-
-- `.fs-page-item.is-active .fs-page-link` — fundo/borda na cor primária.
-- `.fs-page-item.is-disabled .fs-page-link` — opacidade reduzida,
-  `pointer-events: none` (não clicável, não focável por mouse; ainda é
-  focável por teclado como um link comum — considere `aria-disabled="true"`
-  e remover do fluxo de tab se precisar bloquear totalmente). No item de
-  reticências (sem `<a>`), isso não se aplica — ele nunca é focável.
-
-## A11y
-
-Envolva a paginação em `.fs-pagination-scroll` quando houver muitos itens. Use `nav`
-nomeado, `aria-current="page"` e desabilite controles sem destino real.
-
-- Envolva a lista num `<nav aria-label="Paginação">` — o elemento `<nav>`
-  não é gerado pelo framework, adicione no seu HTML.
-- Marque a página atual com `aria-current="page"` no link ativo, além de
-  `.is-active` (a classe é só visual).
-- Ícone sozinho (sem texto) precisa de `aria-label` no `<a>` pai; ícone +
-  texto visível não precisa (o texto já nomeia o link) — só marque o SVG
-  como `aria-hidden="true"` nos dois casos, pra não duplicar o nome
-  acessível.
-
-## API JS
-
-Nenhuma — 100% CSS. Ativar/desativar itens é feito pela sua aplicação.
-
-## Tokens
-
-Usa `--fs-color-border`, `--fs-color-surface`, `--fs-color-subtle`
-(hover), `--fs-color-primary` (ativo), `--fs-color-muted` (desabilitado),
-`--fs-radius-sm`.
-
-## Exemplo
-
-```html
-<nav aria-label="Paginação">
-  <ul class="fs-pagination fs-pagination-bordered">
-    <li class="fs-page-item is-disabled">
-      <a href="#" class="fs-page-link" aria-label="Anterior">
-        <svg class="fs-icon" aria-hidden="true" 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="m15 18-6-6 6-6"/></svg>
-      </a>
-    </li>
-    <li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
-    <li class="fs-page-item is-active"><a href="#" class="fs-page-link" aria-current="page">2</a></li>
-    <li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
-    <li class="fs-page-item">
-      <a href="#" class="fs-page-link" aria-label="Próxima">
-        <svg class="fs-icon" aria-hidden="true" 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="m9 18 6-6-6-6"/></svg>
-      </a>
-    </li>
-  </ul>
-</nav>
-```
-
-Mockup: [laboratório do componente](../../mockup/navigation-disclosure.html#pagination).

package/docs/components/placeholder.md

@@ -1,13 +0,0 @@
-# Placeholder
-
-## Visão geral
-
-`.fs-placeholder` representa conteúdo ainda carregando e é visualmente distinto de Skeleton.
-
-## Estados
-
-Use `.fs-placeholder-glow`, `.fs-placeholder-wave` ou `.fs-placeholder-btn` conforme o formato.
-
-## A11y
-
-Anuncie carregamento com `aria-busy="true"` no contêiner e uma região live quando necessário.