fokus-styles 2.5.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,104 +0,0 @@
-# Alert
-
-Mensagem contextual persistente para informar, confirmar, orientar ou explicar
-um erro relacionado à região da página. Alert é CSS-only; para feedback
-transitório controlado por JavaScript, use [Toast](toast.md).
-
-## Uso mínimo
-
-```html
-<div class="fs-alert fs-alert-success">Operação concluída com sucesso.</div>
-```
-
-O uso antigo continua válido. Variantes: `.fs-alert-primary`,
-`.fs-alert-secondary`, `.fs-alert-success`, `.fs-alert-warning`,
-`.fs-alert-danger` e `.fs-alert-info`.
-
-## Visão geral
-
-Alert permanece visível no contexto da página até que a aplicação resolva a
-condição ou faça seu fechamento manual. Não é substituto de Toast nem de
-Alert Dialog.
-
-## Anatomia opcional
-
-Os slots abaixo são opcionais. O ícone deve ser decorativo quando o texto já
-comunica o estado.
-
-```html
-<div class="fs-alert fs-alert-danger" role="alert">
-  <span class="fs-alert-icon" aria-hidden="true"><svg class="fs-icon" aria-hidden="true"><!-- ícone --></svg></span>
-  <div class="fs-alert-content">
-    <h3 class="fs-alert-heading">Não foi possível salvar</h3>
-    <p class="fs-alert-text">Verifique os campos destacados e tente novamente.</p>
-    <div class="fs-alert-actions">
-      <button type="button" class="fs-btn fs-btn-danger fs-btn-sm">Tentar novamente</button>
-      <a class="fs-alert-link" href="#detalhes">Ver detalhes</a>
-    </div>
-  </div>
-  <button type="button" class="fs-btn-close fs-alert-close" aria-label="Fechar aviso"></button>
-</div>
-```
-
-Classes: `.fs-alert-icon`, `.fs-alert-content`, `.fs-alert-heading`,
-`.fs-alert-text`, `.fs-alert-actions`, `.fs-alert-link` e `.fs-alert-close`.
-O fechamento é apenas composição visual; a aplicação liga sua própria lógica.
-
-Para mensagens relacionadas, use `.fs-alert-group` no contêiner. A variante
-`.fs-alert-inline` reduz a densidade para mensagens próximas a campos ou
-regiões compactas. Para operações assíncronas, aplique `aria-busy="true"` e
-componha um `.fs-spinner` decorativo; o Alert não desabilita ações nem gerencia
-o término da operação automaticamente.
-
-## Estados
-
-Não há estados JavaScript próprios. Links, botões e o fechamento visual usam
-seus estados nativos de foco, hover e ativação.
-
-## Layout e tokens
-
-O acabamento usa raio médio, borda estrutural neutra e barra semântica em
-`border-inline-start`, funcionando em RTL. Textos longos quebram sem overflow
-e ações usam flex-wrap em telas estreitas.
-
-Tokens locais sobrescrevíveis: `--fs-alert-padding-block`,
-`--fs-alert-padding-inline`, `--fs-alert-gap`, `--fs-alert-radius`,
-`--fs-alert-border-width`, `--fs-alert-accent-width`, `--fs-alert-icon-size`,
-`--fs-alert-heading-gap` e `--fs-alert-actions-gap`.
-
-```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>
-```
-
-## A11y
-
-O framework não injeta ARIA, não cria ícones automaticamente e não move foco.
-Use `role="status"` para atualização não urgente e `role="alert"` somente
-quando a mensagem precisar ser anunciada imediatamente. O significado deve
-continuar compreensível sem cor, ícone ou borda. Ícones decorativos usam
-`aria-hidden="true"`; informação adicional precisa de texto equivalente.
-
-Links e botões mantêm foco visível. Para decisão crítica use [Alert Dialog](alert-dialog.md);
-para mensagem breve use Toast.
-
-Em `forced-colors: active`, a borda semântica usa as cores do sistema e o
-conteúdo continua legível sem depender do fundo tintado.
-
-## API JS
-
-Nenhuma — 100% CSS.
-
-## Tokens
-
-`--fs-alert-{nome}-bg`/`-text` (fundo tintado e texto) e `--fs-color-border`.
-Os tokens locais acima permitem ajuste por instância.
-
-## 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/examples/alerts.html).

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,101 +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).
-- **Acabamento**: usa `--fs-radius-sm` (4px) por padrão, mantendo cantos
-  levemente arredondados sem transformar o badge em uma pílula.
-- **Densidade**: `--fs-badge-padding-inline`,
-  `--fs-badge-padding-block-start` e `--fs-badge-padding-block-end` permitem
-  ajustar o espaço interno localmente sem substituir o componente inteiro.
-- **Padrões**: `.fs-badge-dot` adiciona um indicador circular antes do texto;
-  `.fs-badge-count` estabiliza contagens com algarismos tabulares e
-  `.fs-badge-count-circle` cria um indicador circular para contagens curtas,
-  preferencialmente de um único dígito.
-- **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` (`var(--fs-radius-sm)` por padrão)
-para personalização localizada. A densidade também pode ser ajustada com
-`--fs-badge-padding-inline`, `--fs-badge-padding-block-start` e
-`--fs-badge-padding-block-end`. Split também expõe
-`--fs-badge-split-{label|value}-{bg|color}`, `--fs-badge-split-height` e
-`--fs-badge-split-radius` (`var(--fs-radius-sm)` por padrão), aplicado ao
-contêiner externo que conecta o rótulo e o valor.
-
-## 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>
-<span class="fs-badge fs-badge-count fs-badge-count-circle fs-badge-danger" aria-label="1 notificação não lida">1</span>
-```
-
-## Composição e contraste
-
-Mantenha o badge próximo do título, status ou contagem que ele qualifica e
-não use a cor como única indicação de estado. Para filtros ou ações, use um
-botão ou Tag, não um badge estático. Em temas e marcas customizadas, valide
-as variantes `soft` e `outline` com `npm run contrast:check` e confirme que o
-texto continua legível nos temas claro e escuro.
-
-Mockup: [laboratório do componente](../../mockup/feedback-actions.html#badge).