fokus-styles 2.5.0 → 2.6.0

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.

package/docs/guides/accessibility.md

@@ -1,109 +0,0 @@
-# Acessibilidade
-
-Acessibilidade não é um retrofit no Fokus Styles — foco, teclado e ARIA fazem
-parte da API de todo componente interativo desde a primeira versão. Este
-guia documenta os padrões **compartilhados** entre componentes; o
-comportamento específico de cada um está na sua página em
-[Componentes](../README.md#componentes), seção "A11y".
-
-## Foco visível
-
-Todo elemento interativo (botões, links, inputs, itens de menu) usa
-`:focus-visible` (não `:focus`) para o anel de destaque — aparece só na
-navegação por teclado, não em cliques de mouse, evitando o "flash" de foco
-indesejado ao clicar. O mixin `focus-ring` (`packages/fokus-core/scss/tools/_mixins.scss`)
-centraliza esse estilo; todo componente novo deve reusá-lo em vez de
-desenhar um anel de foco próprio.
-
-## Focus trap (modal, offcanvas)
-
-Componentes que sobrepõem a página inteira (Modal, Offcanvas) prendem o
-foco dentro de si enquanto abertos — `Tab` no último elemento focável volta
-pro primeiro, `Shift+Tab` no primeiro vai pro último
-(`packages/fokus-js/js/core/focus.js`, `createFocusTrap()`). Ao abrir, o
-foco vai para o primeiro elemento focável do painel; ao fechar, volta para o
-elemento que abriu (o gatilho).
-
-## Escape e clique fora
-
-Overlays (Modal, Offcanvas, Dropdown, Popover, Nested Menu) fecham com
-`Escape` e com clique fora do painel, por padrão. Componentes com um modo
-"preso" (`data-backdrop="static"` no Modal/Offcanvas) desativam essas duas
-saídas deliberadamente — para fluxos que exigem uma decisão explícita
-(confirmar/cancelar) antes de sair.
-
-## Navegação por teclado em grupos (Tabs, Accordion, Nested Menu)
-
-Grupos de itens relacionados seguem o padrão de "roving tabindex" do
-[WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/): só o item
-ativo tem `tabindex="0"`, os demais `tabindex="-1"` — `Tab` entra/sai do
-grupo de uma vez, e as setas navegam **dentro** dele:
-
-- **Tabs**: `ArrowLeft`/`ArrowRight` move entre abas, `Home`/`End` vai pra
-  primeira/última.
-- **Nested Menu**: `ArrowDown`/`ArrowUp` navegam no nível atual,
-  `ArrowRight` abre um submenu, `ArrowLeft`/`Escape` fecham.
-
-## ARIA injetado automaticamente
-
-Alguns atributos ARIA são calculados e aplicados pelo próprio JS na
-inicialização (não precisam ser escritos manualmente no HTML) — por
-exemplo, Tabs aplica `role="tablist"`/`role="tab"`/`aria-selected`/
-`aria-controls` aos elementos com `data-fs="tabs"`. Onde isso acontece, a
-página do componente avisa explicitamente; o resto (`aria-label` em botões
-sem texto visível, `alt` em imagens, etc.) é responsabilidade de quem
-escreve o HTML — o framework não adivinha texto alternativo.
-
-## `prefers-reduced-motion`
-
-Toda transição de altura acionada por JS (Collapse, Accordion, Toast via
-`packages/fokus-js/js/core/transition.js`) verifica
-`window.matchMedia("(prefers-reduced-motion: reduce)")` e pula direto para
-o estado final — sem animação — quando o usuário pediu menos movimento no
-sistema operacional. A camada base do CSS também reduz automaticamente
-transições e animações declaradas pelo framework quando essa preferência está
-ativa. Se você adicionar uma animação própria, preserve o estado final e
-teste o comportamento com `prefers-reduced-motion: reduce`.
-
-## Contraste de cor
-
-Botões/badges/alerts sólidos calculam a cor de texto automaticamente
-(`color-contrast()`) para garantir contraste AA (≥ 4.5:1 texto normal, ≥
-3:1 texto grande/UI) contra a cor de fundo escolhida — nunca é preciso
-escolher manualmente entre texto branco ou preto. O relatório
-`npm run contrast` (ver [`docs/reference/contrast-report.md`](../reference/contrast-report.md))
-audita os pares texto/fundo de tokens nos temas claro e escuro; rode-o
-depois de qualquer mudança de cor de token.
-
-## Formulários
-
-Inputs de validação (`.is-valid`/`.is-invalid`) e os textos de apoio
-(`.fs-valid-feedback`/`.fs-invalid-feedback`, `.fs-form-text`) são
-elementos visuais — associe-os ao input via `aria-describedby` no seu HTML
-para que leitores de tela anunciem a mensagem ao focar o campo. O
-framework não injeta esse atributo automaticamente, porque o `id` do texto
-de apoio é definido por você.
-
-Para Checkbox, Radio e Switch, mantenha o input nativo e associe o texto com
-`for`/`id`. Opções relacionadas devem ficar em `fieldset` com `legend`.
-Mensagens de ajuda e erro devem ser referenciadas por `aria-describedby`, e
-um campo inválido pode usar `aria-invalid="true"` junto de `.is-invalid`.
-Switch não recebe `role="switch"` automaticamente; a semântica oficial é a
-do checkbox nativo, inclusive para a tecla `Space`.
-
-## Testes automatizados
-
-A regressão visual (`npm run test:visual`, Playwright) cobre
-carregamento/interação sem erros de console, mas não é um gate de
-acessibilidade. `npm run test:a11y` roda o axe-core (regras WCAG 2.1 A/AA)
- contra cada laboratório em `mockup/*.html` (claro e escuro) e contra as
- fontes executáveis em `mockup/examples/*.html`; o build falha ao encontrar
-violações (nome acessível ausente, contraste insuficiente, papel ARIA
-inválido etc.) — roda no CI a cada PR. Veja a cobertura por componente na
-[matriz de acessibilidade](../reference/accessibility-matrix.md).
-
-Mesmo com o gate automatizado, valide manualmente com um leitor de tela e
-navegação só por teclado antes de considerar um componente pronto — axe
-cobre um subconjunto de regras verificáveis por máquina (contraste, nomes,
-papéis), não a experiência real de uso (ordem de leitura, clareza dos
-anúncios, foco percebido).

package/docs/guides/charts.md

@@ -1,73 +0,0 @@
-# Gráficos (tokens agnósticos de biblioteca)
-
-O FokusStyles **não inclui um wrapper de nenhuma biblioteca de gráficos** — em
-vez disso, expõe um conjunto pequeno de tokens (`--fs-chart-*`) que
-qualquer lib (Chart.js, ECharts, Recharts, D3, Highcharts…) pode consumir
-via `getComputedStyle`. Zero dependência nova, zero manutenção atrelada à
-API de uma lib de terceiro que muda com o tempo, e o gráfico acompanha
-`data-theme`/`data-fs-brand` automaticamente porque os tokens são aliases da
-camada semântica já existente (mesma técnica de `tokens/_semantic.scss`).
-
-## Tokens
-
-| Token | Uso sugerido |
-|---|---|
-| `--fs-chart-series-1` … `--fs-chart-series-6` | Cor de cada série/categoria de dados. |
-| `--fs-chart-grid` | Linhas de grade do plano cartesiano. |
-| `--fs-chart-axis` | Rótulos e linhas dos eixos. |
-| `--fs-chart-tooltip-bg` / `--fs-chart-tooltip-text` | Fundo/texto do tooltip do gráfico. |
-
-As 6 séries reaproveitam as cores de tema (`primary`/`success`/`warning`/
-`danger`/`info`/`secondary`) — uma paleta categórica coerente com o resto
-da interface, sem introduzir cor nova. Se seu gráfico precisar de mais de
-6 séries ou de uma paleta com propósito diferente (sequencial/divergente),
-sobrescreva os tokens que precisar; eles são só `var()`, então qualquer
-CSS depois do import do FokusStyles vence.
-
-## Uso
-
-Leia os tokens em runtime com `getComputedStyle` e passe pra sua lib de
-gráficos na hora de montar a configuração:
-
-```js
-const styles = getComputedStyle(document.documentElement);
-const chartColors = {
-  series: [1, 2, 3, 4, 5, 6].map((n) => styles.getPropertyValue(`--fs-chart-series-${n}`).trim()),
-  grid: styles.getPropertyValue("--fs-chart-grid").trim(),
-  axis: styles.getPropertyValue("--fs-chart-axis").trim(),
-  tooltipBg: styles.getPropertyValue("--fs-chart-tooltip-bg").trim(),
-  tooltipText: styles.getPropertyValue("--fs-chart-tooltip-text").trim(),
-};
-```
-
-Exemplo com Chart.js:
-
-```js
-new Chart(ctx, {
-  type: "bar",
-  data: {
-    labels: ["Jan", "Fev", "Mar"],
-    datasets: [{ data: [12, 19, 7], backgroundColor: chartColors.series[0] }],
-  },
-  options: {
-    scales: {
-      x: { grid: { color: chartColors.grid }, ticks: { color: chartColors.axis } },
-      y: { grid: { color: chartColors.grid }, ticks: { color: chartColors.axis } },
-    },
-  },
-});
-```
-
-## Tema escuro e multi-brand
-
-Como os tokens de série são aliases de `--fs-color-*`, eles já respondem a
-`data-theme="dark"` e `data-fs-brand="x"` (ver [Theming](theming.md)) sem
-nenhum código adicional — só é preciso reler `getComputedStyle` (ou
-recriar o gráfico) depois de uma troca de tema/marca em runtime, porque a
-maioria das libs de gráfico não observa mudanças de CSS custom properties
-sozinha.
-
-## Próximo passo
-
-[Theming](theming.md) — as 3 camadas de tokens que os tokens de gráfico
-reaproveitam.

package/docs/guides/dark-mode.md

@@ -1,90 +0,0 @@
-# Dark mode
-
-O tema escuro é nativo desde a primeira versão do framework — não é um
-plugin nem exige JavaScript.
-
-## Ativação
-
-Um único atributo no `<html>` (ou em qualquer contêiner — o tema se aplica
-por escopo, não só global):
-
-```html
-<html data-theme="dark">
-```
-
-```html
-<!-- Escopo local: só este painel fica escuro -->
-<div data-theme="dark">
-  <div class="fs-card">...</div>
-</div>
-```
-
-Não há classe `.dark`/`.fs-dark` — é sempre o atributo `data-theme="dark"`.
-Remover o atributo (ou trocar pra qualquer outro valor) volta ao tema claro.
-
-## Como funciona
-
-`packages/fokus-core/scss/themes/_dark.scss` redefine os tokens semânticos
-de cor (`--fs-color-text`, `--fs-color-surface`, `--fs-color-{primary,
-success,...}`, `--fs-alert-*-bg/-text`, `--fs-feedback-*-bg`) sob o seletor
-`[data-theme="dark"]`. Como todo componente já consome esses tokens via
-`var()`, nenhum CSS extra por componente é necessário — trocar o atributo já
-propaga a cor nova para tudo.
-
-As cores do tema escuro não são um segundo conjunto arbitrário: primary/
-secondary/success/warning/danger/info são misturados (`color.mix()`, espaço
-OKLCH) a partir do mesmo primitivo do tema claro, clareando em direção ao
-branco — mantém a identidade de cor entre os dois temas. Os pesos de mistura
-foram calibrados para manter contraste WCAG AA (ver
-[`docs/reference/contrast-report.md`](../reference/contrast-report.md) e
-`npm run contrast`).
-
-## JavaScript para alternar (opcional)
-
-O framework não fornece um componente de "toggle de tema" pronto — é
-deliberadamente simples de implementar com o que você já tem
-(`.fs-switch`, ver [`../components/switch.md`](../components/switch.md)):
-
-```html
-<div class="fs-switch">
-  <input type="checkbox" class="fs-switch-input" id="theme-toggle">
-  <label for="theme-toggle" class="fs-switch-label">Tema escuro</label>
-</div>
-```
-
-```js
-const toggle = document.getElementById("theme-toggle");
-const stored = localStorage.getItem("theme");
-
-if (stored === "dark") {
-  document.documentElement.setAttribute("data-theme", "dark");
-  toggle.checked = true;
-}
-
-toggle.addEventListener("change", () => {
-  const theme = toggle.checked ? "dark" : "light";
-  document.documentElement.setAttribute("data-theme", theme);
-  localStorage.setItem("theme", theme);
-});
-```
-
-Para respeitar a preferência do sistema operacional por padrão (antes de
-qualquer escolha manual salva), combine com
-`window.matchMedia("(prefers-color-scheme: dark)").matches` na primeira
-carga.
-
-## Customizando o tema escuro
-
-Como qualquer outro token, redefina sob `[data-theme="dark"]` no seu
-próprio CSS — carregado **depois** do CSS do FokusStyles, para vencer a cascata:
-
-```css
-[data-theme="dark"] {
-  --fs-color-surface: #14151a;
-}
-```
-
-## Próximo passo
-
-[Acessibilidade](accessibility.md) — teclado, ARIA e contraste por
-componente.

package/docs/guides/icons.md

@@ -1,99 +0,0 @@
-# Ícones
-
-O Fokus Styles inclui ícones como subpath opcional — ícone é conteúdo, não
-estilo, e o bundle principal não importa nenhum deles. Use
-`fokus-styles/icons`, com 1994 ícones SVG do conjunto
-[Lucide](https://lucide.dev) (licença ISC), mais uma classe utilitária
-`.fs-icon` no `fokus-styles` (sempre disponível, custo desprezível) pro
-dimensionamento.
-
-## Instalação
-
-```bash
-npm install fokus-styles
-```
-
-Zero dependências em runtime — o subpath contém apenas arquivos `.svg` e módulos
-`.js` gerados; `lucide-static` é usado apenas para gerar o pacote, nunca é
-instalado por quem consome o `fokus-styles`.
-
-## Uso — SVG puro (zero JS)
-
-Cada ícone pode ser resolvido como `fokus-styles/svg/<nome>.svg`, já
-com `class="fs-icon"` aplicada. Copie o conteúdo direto no seu HTML:
-
-```html
-<button type="button" class="fs-btn fs-btn-primary">
-  <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="M20 6 9 17l-5-5"/></svg>
-  Salvar
-</button>
-```
-
-Essa é a forma recomendada: nenhuma dependência de build, o SVG já nasce
-otimizado (sem comentários, sem atributos redundantes).
-
-## Uso — módulo JS (tree-shakeable)
-
-Se seu projeto já usa um bundler (Vite, esbuild, Rollup, webpack), importe
-só os ícones que usa — cada um é um módulo próprio, então o restante dos
-1994 nunca entra no seu bundle final:
-
-```js
-import check from "fokus-styles/icons/check.js";
-
-document.querySelector("#status-icon").innerHTML = check;
-```
-
-Ou pelo barrel, com nomes em camelCase (`arrow-right` → `arrowRight`):
-
-```js
-import { arrowRight, check } from "fokus-styles/icons";
-```
-
-O pacote é publicado com `"sideEffects": false`, então bundlers modernos
-eliminam os ícones não usados mesmo importando do barrel — mas prefira o
-caminho direto (`fokus-styles/icons/check.js`) se seu bundler não fizer
-tree-shaking de barrels corretamente.
-
-## Dimensionamento e cor — `.fs-icon`
-
-```html
-<svg class="fs-icon fs-icon-lg" ...>...</svg>
-```
-
-| Classe | Tamanho |
-|---|---|
-| `.fs-icon` (padrão) | `1em` × `1em` — acompanha o `font-size` do elemento ao redor |
-| `.fs-icon-xs` | 12px |
-| `.fs-icon-sm` | 16px |
-| `.fs-icon-lg` | 32px |
-| `.fs-icon-xl` | 48px |
-
-Cor: os ícones usam `stroke="currentColor"` — herdam a cor do texto
-automaticamente. Para uma cor diferente do texto ao redor, aplique `color`
-no elemento (ou num ancestral) como faria com qualquer texto.
-
-## Ícones em componentes com JS
-
-Componentes como [Combobox](../components/combobox.md) ou
-[Command Palette](../components/command-palette.md) não têm nenhuma
-integração especial com `fokus-styles/icons` — você cola o SVG (ou injeta via
-módulo JS) dentro da marcação normal do componente, exatamente como faria
-com qualquer outro conteúdo:
-
-```html
-<li class="fs-dropdown-item" data-value="download">
-  <svg class="fs-icon" ...>...</svg>
-  Baixar arquivo
-</li>
-```
-
-## Licença
-
-O código de geração do pacote é MIT (mesma licença do FokusStyles). Os ícones
-em si são do projeto Lucide, licença ISC — parte deles derivada do
-projeto Feather (MIT). Ambos os avisos de copyright são distribuídos junto
-do pacote (`LICENSE`/`LICENSE-LUCIDE.txt` em `node_modules/fokus-styles/packages/fokus-icons/`
-depois de instalado).
-
-Mockup: [`mockup/foundations.html#icons`](../../mockup/foundations.html#icons).

package/docs/guides/javascript-api.md

@@ -1,9 +0,0 @@
-# API JavaScript
-
-Os módulos vanilla são SSR-safe quando importados e expõem instâncias idempotentes por
-`getOrCreateInstance`. Modal, Theme, Navbar, Scrollspy e FormValidation também oferecem
-destruição explícita com `dispose()`.
-
-Os eventos comuns são `fs:show`, `fs:shown`, `fs:hide` e `fs:hidden`. Atributos declarativos
-usam `data-fs-toggle`, `data-fs-target`, `data-fs-dismiss`, `data-fs-placement` e
-`data-fs-theme`.