fokus-styles 2.5.0 → 2.6.0

package/docs/components/select.md

@@ -1,89 +0,0 @@
-# Select customizado
-
-Substitui a aparência do `<select>` nativo (impossível de estilizar
-consistentemente entre navegadores) por um [Dropdown](dropdown.md), mantendo
-o `<select>` real por baixo — sincronizado, escondido visualmente.
-
-## Visão geral
-
-```html
-<select class="fs-form-select" data-fs="select" id="pais">
-  <option value="br">Brasil</option>
-  <option value="pt">Portugal</option>
-  <option value="us" disabled>Estados Unidos (indisponível)</option>
-</select>
-```
-
-O JS constrói o dropdown customizado logo depois do `<select>` no DOM e
-esconde o original (`display: none` — continua no DOM, então
-`<select>`/`<option>` do seu HTML/backend seguem sendo a fonte da
-verdade).
-
-## Anatomia
-
-Gerado automaticamente a partir do `<select>`: `.fs-dropdown.fs-form-select-dropdown`
-> `.fs-form-select` (botão-toggle, mesma aparência estática documentada em
-[Input](input.md#anatomia)) + `.fs-dropdown-menu` > um `.fs-dropdown-item`
-por `<option>`.
-
-## Variações
-
-Tamanho: `data-size="sm"`/`"lg"` no `<select>` original — vira
-`.fs-form-select-sm`/`-lg` no toggle gerado.
-
-```html
-<select class="fs-form-select" data-fs="select" data-size="sm">...</select>
-```
-
-## Estados
-
-- `<option disabled>` vira um item com `.is-disabled` no menu (não
-  clicável).
-- `<select disabled>` desabilita o botão-toggle inteiro.
-- Item selecionado (`selectedIndex`) fica com `.is-active` no menu.
-
-## A11y
-
-`aria-haspopup="listbox"` no toggle, `role="listbox"` no menu,
-`role="option"` + `aria-selected` em cada item — aplicados
-automaticamente. Navegação por teclado herdada do
-[Dropdown](dropdown.md) (`ArrowDown`/`ArrowUp` entre opções, `Escape`
-fecha). Selecionar uma opção dispara `change` no `<select>` original —
-formulários/validação que escutam esse evento continuam funcionando sem
-mudança.
-
-## API JS
-
-Auto-init via `data-fs="select"` **no `<select>`**. `Select.getInstance(selectEl)`.
-
-| Método | Descrição |
-|---|---|
-| `show()` / `hide()` / `toggle()` | Delegam pro Dropdown interno. |
-| `dispose()` | Desmonta o dropdown gerado, restaura o `<select>` original visível. |
-
-| Evento (no `<select>` original) | Cancelável | Quando |
-|---|---|---|
-| `change` (nativo) | Não | Ao selecionar uma opção — mesmo evento que um `<select>` comum dispara. |
-| `fs:select:changed` | Não | Mesmo momento, com `event.detail.value` (o novo valor). |
-
-## Tokens
-
-Os mesmos do [Dropdown](dropdown.md) e de
-[`.fs-form-select`](input.md) — sem tokens próprios.
-
-## Exemplo
-
-```html
-<select class="fs-form-select" data-fs="select" id="prioridade">
-  <option value="baixa">Baixa</option>
-  <option value="media" selected>Média</option>
-  <option value="alta">Alta</option>
-</select>
-<script>
-  document.getElementById("prioridade").addEventListener("fs:select:changed", (e) => {
-    console.log("nova prioridade:", e.detail.value);
-  });
-</script>
-```
-
-Mockup: [laboratório do componente](../../mockup/forms.html#select).

package/docs/components/skeleton.md

@@ -1,70 +0,0 @@
-# Skeleton
-
-Placeholder de carregamento — 100% CSS, sem JS (você troca pelo conteúdo
-real quando os dados chegam).
-
-## Visão geral
-
-```html
-<div class="fs-skeleton fs-skeleton-text"></div>
-<div class="fs-skeleton fs-skeleton-text"></div>
-<div class="fs-skeleton fs-skeleton-circle" style="width: 48px; height: 48px;"></div>
-```
-
-## Anatomia
-
-`.fs-skeleton` (base — cor + animação de pulso) combinado com uma forma:
-`.fs-skeleton-text` (linha de texto, 1em de altura; o último de uma
-sequência automaticamente encolhe pra 80% de largura, imitando o fim de um
-parágrafo), `.fs-skeleton-circle` (avatar), `.fs-skeleton-rect` (bloco/
-imagem). Tamanho de circle/rect é livre — defina `width`/`height` via
-`style` inline ou classe própria.
-
-## Variações
-
-`.fs-skeleton-wave` — em vez de pulsar a opacidade inteira, varre um
-brilho da esquerda pra direita (substitui a animação padrão, não combine
-os dois).
-
-```html
-<div class="fs-skeleton fs-skeleton-rect fs-skeleton-wave" style="width: 100%; height: 120px;"></div>
-```
-
-## Estados
-
-Nenhum — é ele mesmo um estado (de carregamento) de outro conteúdo.
-Anima infinitamente enquanto presente no DOM; remova/substitua quando os
-dados reais chegarem.
-
-## A11y
-
-As variantes `.fs-skeleton-card`, `.fs-skeleton-table` e `.fs-skeleton-avatar` são visuais;
-anuncie o carregamento no contêiner com `aria-busy="true"`.
-
-A animação para automaticamente sob `prefers-reduced-motion: reduce`
-(fica estática, sem pulso/varredura). Se o carregamento for anunciado a
-leitores de tela, envolva o conjunto de skeletons num contêiner com
-`aria-busy="true"` (e remova ao trocar pelo conteúdo real) — não aplicado
-automaticamente.
-
-## API JS
-
-Nenhuma — 100% CSS.
-
-## Tokens
-
-`--fs-color-subtle` (cor de base), `--fs-radius-sm`/`-md`.
-
-## Exemplo
-
-```html
-<div class="fs-tile" aria-busy="true">
-  <div class="fs-skeleton fs-skeleton-circle" style="width: 40px; height: 40px;"></div>
-  <div class="fs-tile-body" style="width: 100%;">
-    <div class="fs-skeleton fs-skeleton-text" style="width: 60%;"></div>
-    <div class="fs-skeleton fs-skeleton-text"></div>
-  </div>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/feedback-actions.html#skeleton).

package/docs/components/stepper.md

@@ -1,107 +0,0 @@
-# Stepper
-
-Wizard de múltiplos passos — cabeçalho com indicadores de progresso, painéis
-de conteúdo opcionais, navegação linear ou livre.
-
-## Visão geral
-
-```html
-<div class="fs-stepper" data-fs="stepper">
-  <ol class="fs-stepper-header">
-    <li class="fs-step fs-step-active">
-      <span class="fs-step-indicator">1</span>
-      <span class="fs-step-label">Conta</span>
-    </li>
-    <li class="fs-step">
-      <span class="fs-step-indicator">2</span>
-      <span class="fs-step-label">Perfil</span>
-    </li>
-    <li class="fs-step">
-      <span class="fs-step-indicator">3</span>
-      <span class="fs-step-label">Revisão</span>
-    </li>
-  </ol>
-  <div class="fs-stepper-content">
-    <div class="fs-step-panel is-active">Passo 1: dados da conta.</div>
-    <div class="fs-step-panel">Passo 2: dados do perfil.</div>
-    <div class="fs-step-panel">Passo 3: revise e confirme.</div>
-  </div>
-  <div class="fs-stepper-actions">
-    <button type="button" class="fs-btn" data-stepper="prev">Voltar</button>
-    <button type="button" class="fs-btn fs-btn-primary" data-stepper="next">Avançar</button>
-  </div>
-</div>
-```
-
-## Anatomia
-
-`.fs-stepper` (`data-fs="stepper"`) > `.fs-stepper-header` (`<ol>`) >
-`.fs-step` (um por passo) > `.fs-step-indicator` (número/check) +
-`.fs-step-label` + `.fs-step-description` (opcional) — mais, opcionais:
-`.fs-stepper-content` > `.fs-step-panel` (um por passo, na mesma ordem) e
-`.fs-stepper-actions` com botões `data-stepper="prev"`/`"next"`.
-
-Um `.fs-step` pode apontar pra um painel específico via `data-fs-target`
-(seletor) em vez de depender da ordem posicional.
-
-## Variações
-
-`.fs-stepper-vertical` no `.fs-stepper` — cabeçalho em coluna, cada passo
-com label/descrição ao lado do indicador em vez de embaixo.
-
-## Estados
-
-Cada `.fs-step` recebe uma destas classes, sincronizadas pelo JS:
-
-| Classe | Significado |
-|---|---|
-| (nenhuma) | Pendente — ainda não alcançado. |
-| `.fs-step-active` | Passo atual. |
-| `.fs-step-completed` | Já concluído (indicador vira um check). |
-| `.fs-step-error` | Marcado com erro via `setError()` — não muda automaticamente. |
-| `.fs-step-clickable` | Aplicada automaticamente aos passos navegáveis pelo cabeçalho. |
-
-**Modo linear** (padrão, `data-linear` ausente ou `"true"`): só permite
-voltar clicando em passos já concluídos, não pular pra frente. `data-linear="false"` libera clicar em qualquer passo do cabeçalho a
-qualquer momento.
-
-## A11y
-
-Cada `.fs-step` tem `role="listitem"`, `tabindex` (só os clicáveis
-recebem `0`) e `aria-current="step"` no passo ativo — navegável e ativável
-por teclado (`Enter`/`Space`) quando clicável.
-
-## API JS
-
-Auto-init via `data-fs="stepper"`. `Stepper.getInstance(el)`.
-
-| Método | Descrição |
-|---|---|
-| `next()` | Avança um passo; no último, chama `complete()`. |
-| `prev()` | Volta um passo. |
-| `goTo(index)` | Vai direto pro passo `index` (respeitando o modo linear se disparado pelo cabeçalho — via método, sempre permitido). |
-| `setError(index, hasError = true)` | Marca/desmarca `.fs-step-error` num passo específico. |
-| `complete()` | Marca o wizard como concluído (todos os passos ficam `.fs-step-completed`). |
-| `dispose()` | Remove todos os listeners e desregistra a instância. |
-
-| Evento | Cancelável | Quando |
-|---|---|---|
-| `fs:stepper:beforechange` | Sim | Antes de trocar de passo (ou concluir) — `event.detail` traz `{ from, to }`; `preventDefault()` bloqueia a mudança (útil pra validar o passo atual antes de avançar). |
-| `fs:stepper:changed` | Não | Depois de trocar de passo. |
-| `fs:stepper:completed` | Não | Depois de `complete()`. |
-
-```js
-stepperEl.addEventListener("fs:stepper:beforechange", (event) => {
-  if (!formularioValido()) event.preventDefault();
-});
-```
-
-## Tokens
-
-`--fs-color-border`, `--fs-color-primary` (ativo/concluído),
-`--fs-color-danger` (erro), `--fs-color-muted`, `--fs-color-text`.
-
-## Exemplo
-
-Ver acima (Visão geral) — mockup completo com validação por passo em
-[`mockup/navigation-disclosure.html#stepper`](../../mockup/navigation-disclosure.html#stepper).

package/docs/components/switch.md

@@ -1,97 +0,0 @@
-# Switch
-
-Toggle liga/desliga 100% CSS, sobre um `<input type="checkbox">` nativo —
-semanticamente é um checkbox (representa um estado booleano), só a
-aparência muda. Knob **retangular arredondado**, não circular — decisão de
-design deliberada (nada circular no framework além de radio/spinner).
-
-## Visão geral
-
-```html
-<div class="fs-switch">
-  <input type="checkbox" class="fs-switch-input" id="notif" checked>
-  <label for="notif" class="fs-switch-label">Notificações</label>
-</div>
-```
-
-## Anatomia
-
-`.fs-switch` (wrapper) > `.fs-switch-input` (oculto via clip) +
-`.fs-switch-label` (`<label for="...">`, desenha o trilho via `::before` e
-o knob via `::after`, que desliza com propriedades lógicas e `transition`).
-
-## Variações
-
-Tamanho: `.fs-switch-sm`, `.fs-switch-lg` no wrapper.
-
-## Estados
-
-checked/disabled/foco — mesmo padrão do [Checkbox](checkbox.md). O switch
-também possui hover com halo sutil, active com redução discreta do thumb,
-valid/invalid opcional para uso em formulário, forced colors e redução de
-movimento. O trilho desligado usa superfície neutra e o thumb possui contraste
-e elevação próprios. Não há `indeterminate`.
-
-## A11y
-
-- `<input type="checkbox">` nativo — `Space` alterna, leitor de tela
-  anuncia como checkbox marcado/desmarcado (não há um role "switch" nativo
-  em HTML; usar `type="checkbox"` é a escolha correta e amplamente
-  suportada — um `role="switch"` explícito é opcional, não aplicado pelo
-  framework).
-- Quando não houver texto visível ao lado (ex.: dentro de um
-  [Tile](tile.md), como no exemplo abaixo), use `aria-label` no `<input>`
-  em vez de deixar a `<label>` vazia.
-- O Fokus Styles não injeta `role="switch"`: o contrato oficial continua
-  sendo o checkbox nativo, com `Space` e anúncio de marcado/desmarcado.
-
-```html
-<div class="fs-switch">
-  <input type="checkbox" class="fs-switch-input" id="s1" aria-label="Ativar tema escuro">
-  <label for="s1" class="fs-switch-label"></label>
-</div>
-```
-
-## API JS
-
-Nenhuma — 100% CSS.
-
-## Tokens
-
-| Token | Fallback | Uso |
-|---|---|---|
-| `--fs-switch-track-width` | `40px` | Largura do trilho |
-| `--fs-switch-track-height` | `24px` | Altura do trilho |
-| `--fs-switch-thumb-width` | `18px` | Largura do knob |
-| `--fs-switch-thumb-height` | `18px` | Altura do knob |
-| `--fs-switch-thumb-offset` | `3px` | Posição desligada |
-| `--fs-switch-on-offset` | `19px` | Posição ligada |
-| `--fs-switch-radius` | `--fs-radius-md` | Raio do trilho |
-| `--fs-switch-thumb-radius` | `--fs-radius-sm` | Raio do knob |
-| `--fs-switch-gap` | `--fs-space-2` | Distância até o texto |
-| `--fs-switch-track-bg` | `--fs-color-subtle` | Fundo desligado |
-| `--fs-switch-track-border` | `--fs-color-border-default` | Borda do trilho |
-| `--fs-switch-track-checked-bg` | `--fs-color-primary` | Fundo ligado |
-| `--fs-switch-thumb-bg` | `--fs-color-surface` | Fundo do knob |
-| `--fs-switch-thumb-border` | `--fs-color-border-default` | Borda do knob |
-| `--fs-switch-thumb-shadow` | `--fs-shadow-sm` | Elevação do knob |
-| `--fs-switch-track-shadow` | Sombra interna sutil | Profundidade do trilho desligado |
-| `--fs-switch-hover-ring` | Mistura de primary com transparente | Halo de hover |
-| `--fs-switch-hover-shadow` | Halo baseado em `--fs-switch-hover-ring` | Sombra de hover |
-| `--fs-switch-active-scale` | `0.92` | Escala do knob durante active |
-
-## Exemplo
-
-```html
-<div class="fs-switch">
-  <input type="checkbox" class="fs-switch-input" id="sw1">
-  <label for="sw1" class="fs-switch-label">Desligado</label>
-</div>
-<div class="fs-switch">
-  <input type="checkbox" class="fs-switch-input" id="sw2" checked>
-  <label for="sw2" class="fs-switch-label">Ligado</label>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/forms.html#check-radio-switch).
-Uso combinado com Tile: [laboratório de conteúdo e dados](../../mockup/content-data.html#tile).

package/docs/components/table.md

@@ -1,90 +0,0 @@
-# Table
-
-Tabelas seguem a marcação HTML nativa — classes modificadoras no próprio
-`<table>` ligam/desligam comportamentos visuais.
-
-## Visão geral
-
-```html
-<table class="fs-table fs-table-striped fs-table-hover">
-  <thead>
-    <tr><th>Nome</th><th>Status</th></tr>
-  </thead>
-  <tbody>
-    <tr><td>Ana</td><td>Ativo</td></tr>
-    <tr><td>Bruno</td><td>Inativo</td></tr>
-  </tbody>
-</table>
-```
-
-## Anatomia
-
-`<table class="fs-table">` com `<thead>`/`<tbody>` nativos — nenhuma
-marcação extra obrigatória. `<thead th>` já vem em uppercase, cor muted,
-peso médio.
-
-## Variações
-
-- `.fs-table-striped` — linhas ímpares do corpo com fundo diferente (zebra).
-- `.fs-table-hover` — destaca a linha sob o cursor.
-- `.fs-table-bordered` — bordas em todas as células.
-- `.fs-table-borderless` — remove todas as bordas internas.
-- `.fs-table-sm` — reduz o padding das células.
-- `.fs-table-{primary|secondary|success|warning|danger|info}` — tinge
-  fundo/texto da tabela inteira com uma cor de estado (mesmos tokens dos
-  alerts).
-- `.fs-table-responsive` — aplique num `<div>` **envolvendo** a
-  `<table>` (não na tabela em si), para rolagem horizontal em telas
-  estreitas:
-
-```html
-<div class="fs-table-responsive">
-  <table class="fs-table">...</table>
-</div>
-```
-
-Combináveis entre si (ex.: `fs-table-striped fs-table-bordered fs-table-sm`).
-
-## Estados
-
-Nenhum — tabela é conteúdo estático. Se precisar de ordenação/filtro/
-paginação client-side, veja o [DataTable](datatable.md), a camada JS
-opcional que reusa `.fs-table`.
-
-## A11y
-
-Use `.fs-table-responsive` para rolagem horizontal, `.fs-table-caption` para legenda e
-`.fs-table-empty` para estados sem dados. `.fs-table-priority` preserva colunas essenciais.
-
-- Use `<th scope="col">`/`<th scope="row">` conforme o cabeçalho for de
-  coluna ou linha — não é aplicado automaticamente.
-- Para tabelas grandes/complexas, considere `<caption>` descrevendo o
-  conteúdo.
-
-## API JS
-
-Nenhuma — 100% CSS. Para ordenação/filtro/paginação, use o
-[DataTable](datatable.md).
-
-## Tokens
-
-`--fs-color-border`, `--fs-color-text`, `--fs-color-muted` (cabeçalho),
-`--fs-color-subtle` (striped/hover), `--fs-alert-{nome}-bg`/`-text`
-(variante de cor de estado).
-
-## Exemplo
-
-```html
-<div class="fs-table-responsive">
-  <table class="fs-table fs-table-striped fs-table-bordered fs-table-sm">
-    <thead>
-      <tr><th scope="col">Nome</th><th scope="col">E-mail</th><th scope="col">Status</th></tr>
-    </thead>
-    <tbody>
-      <tr><td>Ana</td><td>ana@exemplo.com</td><td>Ativo</td></tr>
-    </tbody>
-  </table>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/content-data.html#table).

package/docs/components/tabs.md

@@ -1,104 +0,0 @@
-# Tabs
-
-Alterna painéis de conteúdo por clique/teclado. Reusa `.fs-nav-link`
-([Navbar](navbar.md)) como item — o HTML e a navegação por teclado são os
-mesmos em qualquer um dos 3 estilos visuais.
-
-## Visão geral
-
-```html
-<div class="fs-tabs" data-fs="tabs">
-  <a href="#" class="fs-nav-link is-active" data-fs-target="#perfil">Perfil</a>
-  <a href="#" class="fs-nav-link" data-fs-target="#seguranca">Segurança</a>
-</div>
-<div class="fs-tab-content">
-  <div class="fs-tab-pane is-active" id="perfil">Conteúdo Perfil.</div>
-  <div class="fs-tab-pane" id="seguranca">Conteúdo Segurança.</div>
-</div>
-```
-
-## Anatomia
-
-`.fs-tabs` (`data-fs="tabs"`) > `.fs-nav-link` (um por aba, `data-fs-target`
-apontando pro painel) + `.fs-tab-content` > `.fs-tab-pane` (um por aba,
-`id` batendo com o `data-fs-target` correspondente).
-
-## Variações
-
-- **Estilo**: linha (padrão, sublinhado na aba ativa), `.fs-tabs-pill`
-  (chip com fundo sólido na aba ativa, sem linha), `.fs-tabs-depth` (aba
-  ativa "sobe" com fundo igual ao conteúdo, sobre um backdrop neutro — como
-  aba de pasta).
-- **Alinhamento**: `.fs-tabs-center`, `.fs-tabs-right`; sem sufixo =
-  esquerda (padrão). `.fs-tabs-fill` distribui os itens em largura igual.
-- **Tamanho**: `.fs-tabs-sm`, `.fs-tabs-lg`; sem sufixo = padrão.
-
-```html
-<div class="fs-tabs fs-tabs-pill fs-tabs-center" data-fs="tabs">...</div>
-<div class="fs-tabs fs-tabs-depth fs-tabs-fill fs-tabs-lg" data-fs="tabs">...</div>
-```
-
-## Estados
-
-- `.is-active` na aba e no painel correspondente — controlado pelo JS ao
-  trocar, ou definido no HTML inicial (exatamente uma aba/painel deve
-  começar ativo).
-- `.is-disabled` na aba — não recebe clique nem entra na navegação por
-  seta.
-
-## A11y
-
-O JS aplica automaticamente ao inicializar: `role="tablist"` no `.fs-tabs`,
-`role="tab"` + `aria-selected` + `tabindex` (roving: só a aba ativa tem
-`tabindex="0"`) em cada `.fs-nav-link`, e `role="tabpanel"` +
-`aria-labelledby` no painel correspondente. Nenhum desses atributos precisa
-ser escrito manualmente no HTML.
-
-Teclado (com foco numa aba): `ArrowLeft`/`ArrowRight` move e ativa a
-aba anterior/próxima (pulando desabilitadas), `Home`/`End` vai pra
-primeira/última.
-
-Para separar navegação e ativação, use `data-tabs-activation="manual"` no
-grupo. Nesse modo as setas apenas movem o foco; `Enter` ou `Espaço` ativa a
-aba focada.
-
-## API JS
-
-Auto-init via `data-fs="tabs"`. `Tabs.getInstance(el)`.
-
-| Método | Descrição |
-|---|---|
-| `show(tabEl)` | Ativa a aba `tabEl` (deve ser uma das `.fs-nav-link` do grupo) e o painel correspondente; desativa as demais. Não faz nada se `tabEl` já é a ativa. |
-| `dispose()` | Remove os listeners de clique/teclado e desregistra a instância. |
-
-| Evento | Cancelável | Quando |
-|---|---|---|
-| `fs:tab:changed` | Não | Depois de trocar de aba — `event.detail.target` traz o seletor (`data-fs-target`) da aba ativa. |
-
-```js
-const tabs = FokusStyles.Tabs.getInstance(document.getElementById("minhas-tabs"));
-tabs.show(document.querySelector('[data-fs-target="#seguranca"]'));
-```
-
-## Tokens
-
-Usa `--fs-color-border`, `--fs-color-primary` (linha/pill ativos),
-`--fs-color-bg-subtle` (depth), `--fs-color-surface` (depth ativo),
-`--fs-radius-sm`.
-
-## Exemplo
-
-```html
-<div class="fs-tabs" data-fs="tabs">
-  <a href="#" class="fs-nav-link is-active" data-fs-target="#tab-perfil">Perfil</a>
-  <a href="#" class="fs-nav-link" data-fs-target="#tab-seguranca">Segurança</a>
-  <a href="#" class="fs-nav-link is-disabled" data-fs-target="#tab-notif">Notificações</a>
-</div>
-<div class="fs-tab-content">
-  <div class="fs-tab-pane is-active" id="tab-perfil">Conteúdo da aba Perfil.</div>
-  <div class="fs-tab-pane" id="tab-seguranca">Conteúdo da aba Segurança.</div>
-  <div class="fs-tab-pane" id="tab-notif">Conteúdo da aba Notificações (desabilitada).</div>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/navigation-disclosure.html#tabs).