fokus-styles 2.4.0 → 2.6.0

package/docs/README.md

@@ -1,86 +0,0 @@
-# Documentação do Fokus Styles
-
-Esta documentação acompanha o Fokus Styles do primeiro uso à referência técnica.
-Comece pelo caminho recomendado, consulte um guia quando precisar adaptar o
-sistema e use as páginas de componentes como contratos de HTML, CSS, JavaScript
-e acessibilidade.
-
-## Caminho recomendado
-
-1. [Instalação](getting-started/installation.md) — pacotes, CDN, bundles,
-   fontes e importação via Sass.
-2. [Formas de uso](getting-started/usage.md) — nomenclatura, auto-init,
-   eventos e API comum dos componentes interativos.
-3. [Theming](guides/theming.md) — tokens, marcas, Sass e customização em
-   runtime.
-4. [Acessibilidade](guides/accessibility.md) — foco, teclado, ARIA, contraste
-   e movimento reduzido.
-5. [Estabilidade e roadmap](reference/stability.md) — maturidade e escopo de
-   cada grupo de recursos.
-
-## Guias
-
-- [Dark mode](guides/dark-mode.md)
-- [Layout avançado](guides/layout-advanced.md)
-- [Ícones](guides/icons.md)
-- [Gráficos](guides/charts.md)
-- [Utilitários de impressão](guides/print.md)
-- [Migração para v1](guides/migration-v1.md)
-- [Migração de outro framework](guides/migration-external.md)
-
-## Componentes
-
-### Núcleo essencial
-
-[Button](components/button.md) · [Card](components/card.md) · [Alert](components/alert.md) ·
-[Badge](components/badge.md) · [Table](components/table.md) · [Input](components/input.md) ·
-[Select](components/select.md) · [Checkbox](components/checkbox.md) · [Radio](components/radio.md) ·
-[Switch](components/switch.md) · [Navbar](components/navbar.md) · [Dropdown](components/dropdown.md) ·
-[Tabs](components/tabs.md) · [Accordion](components/accordion.md) · [Modal](components/modal.md) ·
-[Toast](components/toast.md) · [Pagination](components/pagination.md) · [Breadcrumb](components/breadcrumb.md)
-
-### Extensões de interface
-
-[Collapse](components/collapse.md) · [Offcanvas](components/offcanvas.md) · [Tooltip](components/tooltip.md) ·
-[Popover](components/popover.md) · [Stepper](components/stepper.md) · [Tag](components/tag.md) ·
-[Rating](components/rating.md) · [Segmented Control](components/segmented-control.md) ·
-[Empty State](components/empty-state.md) · [Skeleton](components/skeleton.md) ·
-[Spinner & Progress](components/progress.md) · [Tile](components/tile.md)
-
-### Recursos avançados
-
-[Combobox](components/combobox.md) · [Datepicker](components/datepicker.md) · [DataTable](components/datatable.md) ·
-[Tree View](components/tree-view.md) · [Nested Menu](components/nested-menu.md) ·
-[Command Palette](components/command-palette.md) · [Carousel](components/carousel.md) ·
-[File Upload](components/file-upload.md) · [Upload avançado](components/file-upload-advanced.md) ·
-[Timeline](components/timeline.md)
-
-Cada página de componente segue o contrato editorial: visão geral, anatomia,
-variações, estados, acessibilidade, API JS quando aplicável, tokens, exemplo e
-limitações. Os exemplos funcionais ficam nos [laboratórios de
-`mockup/`](../mockup/README.md); o [`kitchen-sink.html`](../mockup/kitchen-sink.html)
-é um smoke test visual e não substitui a referência detalhada de cada seção.
-
-## Referência técnica
-
-- [Design tokens](reference/design-tokens.md)
-- [Arquitetura SCSS](reference/scss-architecture.md)
-- [Suporte a navegadores](reference/browser-support.md)
-- [Matriz de acessibilidade](reference/accessibility-matrix.md)
-- [Relatório de contraste](reference/contrast-report.md)
-- [Baseline de tamanho](reference/size-baseline.json)
-- [Definições do projeto](reference/definitions.md)
-- [Estabilidade e roadmap](reference/stability.md)
-
-## Ecossistema, templates e contribuição
-
-Os recursos opcionais do mesmo pacote estão documentados nos guias de
-[ícones](guides/icons.md), [theming](guides/theming.md) e
-[migração para Fokus Styles](guides/migration-clarus-to-fokus.md). Os templates em [`mockup/templates/`](../mockup/templates)
-mostram combinações completas para landing page, autenticação, dashboard e
-administração.
-
-Leia o [guia de contribuição](contributing/contributing.md) antes de alterar
-SCSS, JavaScript, documentação ou snapshots. Uma mudança pública deve manter
-implementação, exemplo, documentação e testes alinhados; `npm run docs:check`
-verifica parte desse contrato automaticamente.

package/docs/comparison.md

@@ -1,124 +0,0 @@
-# Fokus Styles vs Bootstrap vs Tailwind CSS
-
-Esta página existe para ajudar quem está avaliando o FokusStyles a decidir com
-dados, não com marketing. Os três frameworks resolvem o mesmo problema
-(estilizar uma interface web) com filosofias diferentes — nenhum dos três é
-estritamente "melhor", e o objetivo aqui é deixar os trade-offs explícitos
-para você decidir qual encaixa no seu projeto.
-
-> **Metodologia.** Todo número abaixo é público e reproduzível: versões
-> fixadas, arquivos publicados oficialmente (npm/CDN), medidos com o mesmo
-> método usado no próprio CI do FokusStyles (`gzip`, nível de compressão 9 —
-> ver `scripts/size.mjs`). Onde um dado não pôde ser medido de forma
-> justa (caso do Tailwind, explicado abaixo), isso é declarado
-> explicitamente em vez de omitido ou estimado. Fontes ao final da página.
-
-## Filosofia e arquitetura
-
-| | Fokus Styles | Bootstrap | Tailwind CSS |
-|---|---|---|---|
-| Paradigma | Componentes prontos (`.fs-btn`, `.fs-card`...) **+** utilitários atômicos (`.fs-u-*`) | Componentes prontos (`.btn`, `.card`...) + utilitários auxiliares | Utilitários atômicos puros — sem componentes visuais prontos |
-| Passo de build obrigatório | Não — CSS/JS prontos via `<link>`/`<script>`, Sass é opcional | Não — CSS/JS prontos via CDN, Sass é opcional | **Sim** — motor JIT precisa escanear seu HTML/JS em build time (CLI ou PostCSS) para gerar as classes usadas |
-| JS de componentes incluso | Sim — vanilla JS próprio (dropdown, modal, datepicker, datatable...) | Sim — vanilla JS próprio desde a v5 (antes exigia jQuery) | **Não** — é um framework de CSS puro; qualquer interatividade (abrir modal, dropdown) é responsabilidade do seu próprio JS |
-| Motor de cor | Tokens semânticos em OKLCH (`color-mix()`) | Sass `map` + variáveis CSS (sRGB) | Paleta de utilitários fixa (sRGB), customizável via config |
-| Tema escuro | Nativo desde o dia 1 — ver seção dedicada abaixo | Nativo desde a 5.3 (2023) | Requer variante `dark:` por utilidade — ver seção dedicada abaixo |
-| Alvo de navegador | Moderno (piso Safari/iOS 16.4) — [detalhes](reference/browser-support.md) | Amplo (inclui navegadores mais antigos) | Depende do CSS gerado; suporte amplo por padrão |
-
-## Tamanho de bundle (gzip)
-
-Medido localmente a partir dos arquivos **publicados oficialmente** de
-cada projeto (nível de compressão gzip 9, igual ao gate de CI do FokusStyles).
-
-| Distribuição | Arquivo medido | Bruto | Gzip |
-|---|---|---:|---:|
-| **Fokus Styles** — bundle completo (todos os componentes) | `fokus.min.css` (medido em 2026-07-08) | 115.045 B | **18.607 B** (~18,2 KB) |
-| **FokusStyles JS** — bundle completo (todos os componentes) | `fokus.min.js` (medido em 2026-07-08) | 89.458 B | **18.996 B** (~18,6 KB) |
-| **Bootstrap CSS** — bundle completo | `bootstrap.min.css@5.3.8` (jsDelivr) | 232.111 B | **30.786 B** (~30,1 KB) |
-| **Bootstrap JS** — bundle completo (inclui Popper) | `bootstrap.bundle.min.js@5.3.8` (jsDelivr) | 80.496 B | **23.707 B** (~23,2 KB) |
-| **Tailwind CSS** — bundle "completo" | Não existe mais desde a v3 (ver nota) | — | ver nota |
-
-**Nota sobre o Tailwind:** desde a v3 o Tailwind não publica um bundle CSS
-fixo — o motor JIT gera só as classes efetivamente usadas no seu projeto, então
-"o tamanho do Tailwind" não é uma pergunta com resposta única do jeito que
-é para FokusStyles/Bootstrap (comparar um número fixo contra o deles seria
-enganoso). Os dois números públicos que o próprio time do Tailwind
-divulga, para contexto:
-
-- **Catálogo completo sem purge** (todas as utilidades geradas, cenário
-  que não existe em produção): 3.645,2 KB descomprimido / **294,2 KB**
-  gzip / 72,8 KB brotli — número da própria documentação da v2 (a v3+ não
-  publica mais esse número porque não gera mais um build "completo" por
-  padrão).
-- **Build de produção típico, já purgado**: "menos de 10 KB, mesmo em
-  projetos grandes", segundo a documentação oficial — com o exemplo do
-  Netflix Top 10 citado em **6,5 KB**.
-
-Ou seja: o Tailwind tende a ficar **menor** que FokusStyles/Bootstrap em produção
-(porque só embarca o que você de fato usa), mas ao custo de exigir um passo
-de build por projeto — o número final depende do seu HTML, não é uma
-constante do framework.
-
-## Dependências
-
-| | Fokus Styles | Bootstrap | Tailwind CSS |
-|---|---|---|---|
-| Dependência de runtime | Nenhuma | Nenhuma no CSS; JS de dropdown/tooltip/popover depende do **Popper** (já embarcado em `bootstrap.bundle.js`) | Nenhuma (não há JS de componente) |
-| Ferramenta de build necessária | Nenhuma (Sass só se você quiser customizar tokens) | Nenhuma (Sass só se você quiser customizar) | **Sim** — CLI própria ou plugin PostCSS, sempre |
-| jQuery | Nunca precisou | Não precisa desde a v5 (precisava até a v4) | Não se aplica (sem JS de componente) |
-
-## Tema escuro nativo
-
-| | Fokus Styles | Bootstrap | Tailwind CSS |
-|---|---|---|---|
-| Mecanismo | Atributo `data-theme="dark"`, redefine tokens semânticos uma vez — todo componente já herda via `var()` | Atributo `data-bs-theme="dark"` (desde a 5.3), mesmo princípio de redefinição de tokens | Variante `dark:` aplicada **individualmente em cada classe utilitária** (`bg-white dark:bg-gray-800`); por padrão segue `prefers-color-scheme`, alternância manual exige configurar um seletor customizado |
-| Custo de adoção | Um atributo, zero JS obrigatório | Um atributo, zero JS obrigatório | Precisa duplicar `dark:*` em cada utilidade tocada pelo tema — sem redefinição central de tokens |
-| Toggle pronto | Não fornece um widget de toggle — [guia com o snippet de ~10 linhas](guides/dark-mode.md) | Não fornece um widget de toggle | Não fornece um widget de toggle |
-
-## Suporte a navegadores e features modernas
-
-O FokusStyles mira um alvo deliberadamente mais moderno que o Bootstrap (que
-mantém compatibilidade mais ampla). Isso é uma troca real — ver a matriz
-completa de feature × navegador mínimo × fallback em
-[`reference/browser-support.md`](reference/browser-support.md) em vez de
-repetir a tabela aqui.
-
-## Migrando de um para o outro
-
-Já decidiu migrar? [`guides/migration-external.md`](guides/migration-external.md)
-tem a tabela de equivalência de classes/componentes e o que não migra 1:1
-(API JS, escala de espaçamento, grid flexbox vs. CSS Grid).
-
-## Benchmarks de performance ao vivo
-
-> ⏳ **Pendente de metodologia.** Esta página não inclui benchmarks de
-> performance em runtime (tempo de parse/render, Core Web Vitals em uma
-> página real, etc.) — não por esquecimento, mas porque um benchmark
-> justo desse tipo depende de metodologia controlada (mesmo hardware,
-> mesma página de teste, mesma versão de cada framework, sem viés de
-> quem escreve o teste) que ainda não foi definida. Preferimos deixar
-> isso marcado como pendente a publicar números que pareçam rigorosos
-> sem ser.
-
-## Quando cada um costuma encaixar melhor
-
-- **Fokus Styles**: você quer componentes prontos (não só utilitários) e
-  dark mode nativo, sem passo de build obrigatório, mirando navegadores
-  modernos, e o pacote publicado ligeiramente maior que um Tailwind
-  purgado é aceitável em troca de zero configuração.
-- **Bootstrap**: você precisa de suporte a navegadores mais antigos que
-  o piso do FokusStyles, ou já tem um ecossistema/time acostumado ao
-  Bootstrap.
-- **Tailwind CSS**: você quer o menor CSS possível em produção e não se
-  importa em escrever/ler classes utilitárias longas por elemento, tem
-  um passo de build no fluxo do projeto, e prefere montar seus próprios
-  componentes (ou usar uma lib de componentes por cima, tipo shadcn/ui).
-
-## Fontes
-
-- [Bootstrap — Introdução (dependência do Popper)](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
-- [Bootstrap — Color modes (`data-bs-theme`)](https://getbootstrap.com/docs/5.3/customize/color-modes/)
-- `bootstrap@5.3.8` — `dist/css/bootstrap.min.css` e `dist/js/bootstrap.bundle.min.js`, via jsDelivr (medido em 2026-07-08)
-- [Tailwind CSS v3 — Optimizing for Production (build típico &lt;10 KB, exemplo Netflix)](https://v3.tailwindcss.com/docs/optimizing-for-production)
-- [Tailwind CSS v2 — Optimizing for Production (build completo sem purge)](https://v2.tailwindcss.com/docs/optimizing-for-production)
-- [Tailwind CSS — Dark Mode (variante `dark:`)](https://tailwindcss.com/docs/dark-mode)
-- [`docs/reference/size-baseline.json`](reference/size-baseline.json) — baseline de tamanho do FokusStyles (medido em 2026-07-07)

package/docs/components/accordion.md

@@ -1,104 +0,0 @@
-# Accordion
-
-Grupo de painéis expansíveis, com controle de exclusividade (só um aberto
-por vez, ou vários) — construído sobre a mesma animação de altura do
-[Collapse](collapse.md).
-
-## Visão geral
-
-```html
-<div class="fs-accordion" data-fs="accordion">
-  <div class="fs-accordion-item">
-    <h3 class="fs-accordion-header">
-      <button type="button" class="fs-accordion-button" aria-expanded="true">Pergunta 1</button>
-    </h3>
-    <div class="fs-accordion-collapse">
-      <div class="fs-accordion-body">Resposta 1.</div>
-    </div>
-  </div>
-  <div class="fs-accordion-item">
-    <h3 class="fs-accordion-header">
-      <button type="button" class="fs-accordion-button" aria-expanded="false">Pergunta 2</button>
-    </h3>
-    <div class="fs-accordion-collapse">
-      <div class="fs-accordion-body">Resposta 2.</div>
-    </div>
-  </div>
-</div>
-```
-
-`data-fs="accordion"` vai no contêiner do grupo (não em cada item) — os
-botões internos são descobertos automaticamente.
-
-## Anatomia
-
-`.fs-accordion` > `.fs-accordion-item` (um por painel) > `.fs-accordion-header`
-(`<h3>`, envolve o botão — nível de heading ajustável conforme a hierarquia
-da sua página) > `.fs-accordion-button` (seta gerada via `::after`,
-rotaciona ao abrir) + `.fs-accordion-collapse` > `.fs-accordion-body`.
-
-## Variações
-
-`data-multiple="true"` no `.fs-accordion` permite vários painéis abertos
-simultaneamente; sem o atributo (padrão), abrir um fecha os demais do
-grupo.
-
-```html
-<div class="fs-accordion" data-fs="accordion" data-multiple="true">...</div>
-```
-
-## Estados
-
-`aria-expanded="true"/"false"` no botão define o estado inicial de cada
-item (exatamente como no HTML — o JS lê e sincroniza a partir daí, não
-força todos fechados).
-
-## A11y
-
-Use `.fs-accordion-flush` para remover bordas externas. Com `data-fs-always-open="true"`,
-um painel aberto não pode ser fechado isoladamente.
-
-`aria-controls`/`aria-expanded` (botão) e `role="region"`/
-`aria-labelledby` (painel) aplicados automaticamente. Cada botão é um
-`<button>` nativo dentro de um heading (`<h3>`) — navegável por `Tab` e
-ativável por `Enter`/`Space` sem JS extra. Respeita
-`prefers-reduced-motion` (herdado do Collapse).
-
-## API JS
-
-Auto-init via `data-fs="accordion"` **no contêiner do grupo**.
-`Accordion.getInstance(el)`.
-
-| Método | Descrição |
-|---|---|
-| `dispose()` | Remove os listeners de todos os botões do grupo e desregistra a instância. |
-
-Não há `show()`/`hide()` no grupo — a interação é sempre pelo clique no
-botão de cada item (ou disparando o evento de clique programaticamente).
-
-| Evento (no botão do item) | Cancelável | Quando |
-|---|---|---|
-| `fs:accordion:shown` | Não | Depois que o painel termina de expandir. |
-| `fs:accordion:hidden` | Não | Depois que o painel termina de recolher. |
-
-## Tokens
-
-`--fs-color-border`, `--fs-color-surface`, `--fs-color-subtle` (hover),
-`--fs-color-text`, `--fs-radius-md`.
-
-## Exemplo
-
-```html
-<div class="fs-accordion" data-fs="accordion">
-  <div class="fs-accordion-item">
-    <h3 class="fs-accordion-header">
-      <button type="button" class="fs-accordion-button" aria-expanded="true">O que é o Fokus Styles?</button>
-    </h3>
-    <div class="fs-accordion-collapse">
-      <div class="fs-accordion-body">Um framework CSS open source, HTML/CSS/JS nativo, zero dependências.</div>
-    </div>
-  </div>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/navigation-disclosure.html#accordion).

package/docs/components/alert-dialog.md

@@ -1,99 +0,0 @@
-# Alert Dialog (Confirm)
-
-Diálogo de confirmação, 100% programático — ao contrário de todo outro
-componente interativo (auto-init declarativo via `data-fs`), este é
-montado na hora por `FokusStyles.confirm()`, sem marcação pré-declarada na
-página. Reaproveita [Modal](modal.md) internamente (foco/teclado/overlay
-já prontos).
-
-## Visão geral
-
-```js
-const confirmado = await FokusStyles.confirm({
-  title: "Excluir item?",
-  message: "Essa ação não pode ser desfeita.",
-  confirmText: "Excluir",
-  cancelText: "Cancelar",
-  variant: "danger",
-});
-
-if (confirmado) {
-  // ação
-}
-```
-
-`FokusStyles.confirm()` retorna uma `Promise<boolean>` — `true` se confirmado,
-`false` se cancelado (botão Cancelar, `Escape`, ou clique fora).
-
-## Anatomia
-
-Gerada internamente: `.fs-modal.fs-alert-dialog` >
-`.fs-modal-dialog.fs-modal-sm` > `.fs-modal-content` > `.fs-modal-body`
-(título + `.fs-alert-dialog-message`, se `message` foi passado) +
-`.fs-modal-footer` (botão Cancelar + botão de ação, na cor de `variant`).
-Não há HTML pra escrever — só a chamada JS.
-
-## Variações
-
-`variant` aceita qualquer cor de tema (`primary`, `secondary`, `success`,
-`warning`, `danger` — padrão, `info`) — vira `.fs-btn-{variant}` no botão
-de confirmação.
-
-```js
-await FokusStyles.confirm({ title: "Sair sem salvar?", variant: "warning" });
-```
-
-## Estados
-
-Nenhum estado próprio — é um fluxo de uma chamada só (abre já com foco
-preso, resolve e desmonta ao confirmar/cancelar).
-
-## A11y
-
-Herda focus trap, `Escape` e clique-fora do [Modal](modal.md). Ao resolver
-(confirmar ou cancelar), o foco volta automaticamente pro elemento que
-tinha foco antes de `FokusStyles.confirm()` ser chamado (normalmente o botão
-que disparou a ação).
-
-## API JS
-
-| Função | Retorno |
-|---|---|
-| `FokusStyles.confirm(options)` | `Promise<boolean>` |
-
-| Opção | Padrão | Descrição |
-|---|---|---|
-| `title` | `"Tem certeza?"` | Título do diálogo. |
-| `message` | `""` | Texto de apoio abaixo do título (omitido se vazio). |
-| `confirmText` | `"Confirmar"` | Texto do botão de ação. |
-| `cancelText` | `"Cancelar"` | Texto do botão de cancelar. |
-| `variant` | `"danger"` | Cor do botão de ação (qualquer cor de tema). |
-
-Sem `getInstance()`/`dispose()` — cada chamada cria e desmonta seu próprio
-diálogo; não há instância persistente pra gerenciar.
-
-## Tokens
-
-Os mesmos do [Modal](modal.md) — sem tokens próprios além de
-`--fs-alert-dialog-message` usar `--fs-color-muted`/`$font-size-sm`.
-
-## Exemplo
-
-```html
-<button type="button" class="fs-btn fs-btn-danger" id="btn-excluir">Excluir conta</button>
-<script>
-  document.getElementById("btn-excluir").addEventListener("click", async () => {
-    const ok = await FokusStyles.confirm({
-      title: "Excluir conta?",
-      message: "Todos os seus dados serão apagados permanentemente.",
-      confirmText: "Excluir conta",
-      variant: "danger",
-    });
-    if (ok) {
-      // prosseguir com a exclusão
-    }
-  });
-</script>
-```
-
-Mockup: [laboratório do componente](../../mockup/overlays-commands.html#alert-dialog).

package/docs/components/alert.md

@@ -1,59 +0,0 @@
-# Alert
-
-Mensagem de estado (sucesso, erro, aviso, informação) com destaque visual —
-fundo tintado, texto com contraste garantido, barra lateral colorida.
-
-## Visão geral
-
-```html
-<div class="fs-alert">Alerta neutro, sem cor de estado.</div>
-<div class="fs-alert fs-alert-success">Operação concluída com sucesso.</div>
-```
-
-## Anatomia
-
-Um único elemento, `.fs-alert` — sem marcação interna obrigatória.
-
-## Variações
-
-Cor: `.fs-alert-{primary|secondary|success|warning|danger|info}`. Sem
-modificador, usa borda/texto neutros. Sem tamanhos (`-sm`/`-lg`) — Alert é
-sempre o mesmo `padding`.
-
-```html
-<div class="fs-alert fs-alert-danger">Ocorreu um erro ao processar a solicitação.</div>
-<div class="fs-alert fs-alert-warning">Atenção: essa ação não pode ser desfeita.</div>
-```
-
-## Estados
-
-Nenhum — elemento estático. Para um alerta dispensável, monte você mesmo
-com um `.fs-btn-close` (ver [Toast](toast.md) para o padrão de dispensa com
-JS, caso precise).
-
-## A11y
-
-Para alertas que aparecem dinamicamente (não já presentes no HTML da
-carga), adicione `role="alert"` (ou `role="status"` para os menos urgentes)
-no elemento, pra leitores de tela anunciarem automaticamente — o framework
-não injeta esse atributo.
-
-## API JS
-
-Nenhuma — 100% CSS.
-
-## Tokens
-
-`--fs-alert-{nome}-bg`/`-text` (fundo tintado e texto, calculados por
-`tint-color()`/`shade-color()` a partir do primitivo — ver
-[`docs/reference/design-tokens.md`](../reference/design-tokens.md)),
-`--fs-color-border`. Alerts usam `border-radius: 0`.
-
-## Exemplo
-
-```html
-<div class="fs-alert fs-alert-success" role="status">Operação concluída com sucesso.</div>
-<div class="fs-alert fs-alert-danger" role="alert">Erro ao salvar as alterações.</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/feedback-actions.html#alert).

package/docs/components/avatar.md

@@ -1,13 +0,0 @@
-# Avatar
-
-## Visão geral
-
-Use `.fs-avatar` para representar uma pessoa, equipe ou entidade com imagem ou iniciais.
-
-## Estados
-
-Combine `.fs-avatar-sm`, `.fs-avatar-lg` e `.fs-avatar-square` conforme o contexto.
-
-## A11y
-
-Imagens devem ter `alt` descritivo; iniciais devem ter um nome acessível com `aria-label`.

package/docs/components/badge.md

@@ -1,82 +0,0 @@
-# Badge
-
-Rótulo pequeno de destaque — contagem, status — usado sozinho ou embutido
-em cards, navbar, tabelas. Para a variante removível, ver
-[Tag](tag.md).
-
-## Visão geral
-
-```html
-<span class="fs-badge">Padrão</span>
-<span class="fs-badge fs-badge-primary">Primary</span>
-```
-
-## Anatomia
-
-Um único elemento, `.fs-badge` — sem marcação interna obrigatória.
-
-## Variações
-
-- **Cor**: `.fs-badge-{primary|secondary|success|warning|danger|info}` —
-  fundo sólido, texto com contraste calculado automaticamente. Sem
-  modificador, usa cores neutras (`--fs-color-subtle`/`--fs-color-text`).
-- **Peso visual**: `.fs-badge-soft-{nome}` cria fundo translúcido com borda
-  sutil, recomendado para status recorrentes em tabelas e cards;
-  `.fs-badge-outline-{nome}` mantém apenas contorno e texto, útil para
-  metadados e filtros. As variantes sólidas permanecem para destaque alto.
-- **Tamanho**: `.fs-badge-sm` (18px), `.fs-badge-lg` (26px); sem sufixo =
-  22px (padrão).
-- **Padrões**: `.fs-badge-dot` adiciona um indicador circular antes do texto;
-  `.fs-badge-count` estabiliza contagens com algarismos tabulares.
-- **Split**: `.fs-badge-split` reúne um rótulo e um valor em segmentos
-  conectados. Use `.fs-badge-split-{nome}` para colorir o valor; os elementos
-  internos obrigatórios são `.fs-badge-split-label` e
-  `.fs-badge-split-value`.
-
-```html
-<span class="fs-badge fs-badge-success fs-badge-sm">Ativo</span>
-<span class="fs-badge fs-badge-danger fs-badge-lg">Crítico</span>
-<span class="fs-badge fs-badge-soft-success fs-badge-dot">Disponível</span>
-<span class="fs-badge fs-badge-outline-primary">Beta</span>
-<span class="fs-badge-split fs-badge-split-primary">
-  <span class="fs-badge-split-label">New</span>
-  <span class="fs-badge-split-value">0.7.1</span>
-</span>
-```
-
-## Estados
-
-Nenhum — elemento estático, sem interação.
-
-## A11y
-
-Badge é decorativo/informativo, não interativo — se o conteúdo for
-significativo pra quem usa leitor de tela (ex.: contador de notificações
-não lidas), garanta que o texto ao redor já comunique o contexto (não
-dependa só da cor).
-
-## API JS
-
-Nenhuma — 100% CSS.
-
-## Tokens
-
-Usa os tokens de cor de tema (`--fs-color-{nome}`, ver
-[`docs/reference/design-tokens.md`](../reference/design-tokens.md)) e expõe
-`--fs-badge-color`, `--fs-badge-bg`, `--fs-badge-border`,
-`--fs-badge-height` e `--fs-badge-radius` (0 por padrão) para
-personalização localizada. Split também expõe
-`--fs-badge-split-{label|value}-{bg|color}`, `--fs-badge-split-height` e
-`--fs-badge-split-radius`.
-
-## Exemplo
-
-```html
-<span class="fs-badge">12</span>
-<span class="fs-badge fs-badge-primary">Novo</span>
-<span class="fs-badge fs-badge-warning fs-badge-sm">Pendente</span>
-<span class="fs-badge fs-badge-soft-success fs-badge-dot">Online</span>
-<span class="fs-badge fs-badge-count fs-badge-danger">12</span>
-```
-
-Mockup: [laboratório do componente](../../mockup/feedback-actions.html#badge).

package/docs/components/breadcrumb.md

@@ -1,93 +0,0 @@
-# Breadcrumb
-
-Trilha de navegação hierárquica ("você está aqui"). O uso básico é 100%
-CSS; auto-init opcional (`data-fs="breadcrumb"`) adiciona truncamento com
-tooltip e colapso em telas pequenas.
-
-## Visão geral
-
-```html
-<nav aria-label="breadcrumb">
-  <ol class="fs-breadcrumb">
-    <li class="fs-breadcrumb-item"><a href="#">Início</a></li>
-    <li class="fs-breadcrumb-item"><a href="#">Categoria</a></li>
-    <li class="fs-breadcrumb-item is-active">Página atual</li>
-  </ol>
-</nav>
-```
-
-## Anatomia
-
-`<ol class="fs-breadcrumb">` > `<li class="fs-breadcrumb-item">` (com
-`<a>` interno, exceto o último). O separador `/` entre itens é desenhado
-via `::before` — não insira manualmente.
-
-## Variações
-
-Nenhuma variação visual (cor/tamanho); a variação é comportamental (ver
-Avançado abaixo).
-
-## Estados
-
-`.fs-breadcrumb-item.is-active` — marca o item atual, sem link, cor de
-texto normal (os demais usam `--fs-color-muted`).
-
-## Avançado: truncamento + colapso (JS opcional)
-
-Com `data-fs="breadcrumb"`, cada label longo trunca com reticências (CSS)
-e ganha um tooltip com o texto completo **só se realmente transbordar**
-(medido após as fontes carregarem, pra não errar o corte com a métrica do
-fallback). Abaixo de 640px de largura de viewport, os níveis
-intermediários (mantendo sempre o primeiro e o último visíveis) colapsam
-num único item "…" que abre um dropdown com os links ocultos.
-
-```html
-<ol class="fs-breadcrumb" data-fs="breadcrumb" data-max-items="3">
-  <li class="fs-breadcrumb-item"><a href="#">Início</a></li>
-  <li class="fs-breadcrumb-item"><a href="#">Categoria de produtos muito específica</a></li>
-  <li class="fs-breadcrumb-item"><a href="#">Subcategoria</a></li>
-  <li class="fs-breadcrumb-item"><a href="#">Marca</a></li>
-  <li class="fs-breadcrumb-item is-active">Produto atual com nome bem longo</li>
-</ol>
-```
-
-`data-max-items` (padrão `4`) define quantos itens cabem antes do colapso
-entrar em ação (só é avaliado abaixo do breakpoint `sm`, 640px).
-
-## A11y
-
-- Envolva a lista num `<nav aria-label="breadcrumb">` (ou "trilha de
-  navegação") — não gerado automaticamente.
-- O item "…" do colapso tem `aria-label="Mostrar níveis ocultos"` e abre um
-  [Dropdown](dropdown.md) padrão, com toda a navegação por teclado dele.
-
-## API JS
-
-Auto-init via `data-fs="breadcrumb"` (só necessário para truncamento/
-colapso — a trilha básica não precisa de JS). `Breadcrumb.getInstance(el)`.
-
-| Método | Descrição |
-|---|---|
-| `dispose()` | Remove o listener de media query, restaura os itens colapsados e desregistra a instância. |
-
-Sem eventos customizados.
-
-## Tokens
-
-`--fs-color-muted`, `--fs-color-primary` (links), `--fs-color-text`
-(item ativo). O dropdown do colapso usa os tokens de
-[Dropdown](dropdown.md).
-
-## Exemplo
-
-```html
-<nav aria-label="breadcrumb">
-  <ol class="fs-breadcrumb">
-    <li class="fs-breadcrumb-item"><a href="#">Início</a></li>
-    <li class="fs-breadcrumb-item"><a href="#">Categoria</a></li>
-    <li class="fs-breadcrumb-item is-active">Produto atual</li>
-  </ol>
-</nav>
-```
-
-Mockup: [laboratório do componente](../../mockup/navigation-disclosure.html#breadcrumb).

package/docs/components/button-group.md

@@ -1,13 +0,0 @@
-# Button group
-
-## Visão geral
-
-`.fs-button-group` agrupa ações relacionadas em uma unidade visual.
-
-## Estados
-
-Use `.fs-button-group-vertical` em barras verticais e mantenha apenas uma ação primária.
-
-## A11y
-
-Use `role="group"` e `aria-label` quando o agrupamento não tiver um título visível.