fokus-styles 2.4.0 → 2.6.0

package/docs/components/popover.md

@@ -1,105 +0,0 @@
-# Popover
-
-Painel flutuante com conteúdo rico (header/body/footer, pode conter
-elementos interativos) — mesmo posicionamento do [Tooltip](tooltip.md),
-aparência de card de superfície em vez do chip escuro.
-
-## Visão geral
-
-```html
-<button type="button" class="fs-btn" data-fs="popover" data-fs-target="#meu-popover">
-  Mais informações
-</button>
-<div class="fs-popover" id="meu-popover">
-  <div class="fs-popover-header">Título</div>
-  <div class="fs-popover-body">Conteúdo detalhado aqui.</div>
-</div>
-```
-
-## Anatomia
-
-Gatilho (qualquer elemento) + `.fs-popover` > `.fs-popover-header`
-(opcional) + `.fs-popover-body` + `.fs-popover-footer` (opcional, ações
-alinhadas à direita). A seta (`.fs-popover-arrow`) é gerada
-automaticamente.
-
-## Variações
-
-- **Posicionamento**: `data-placement`/`data-align` no gatilho — mesma
-  convenção do [Dropdown](dropdown.md).
-- **Gatilho**: `data-trigger` no elemento gatilho —
-  `click` (padrão), `hover` (com pequeno atraso ao sair, pra dar tempo de
-  mover o mouse até o popover), `focus` (mostra ao focar, some ao perder
-  foco pra fora do trigger+popover), `manual` (você chama `show()`/`hide()`
-  vocẽ mesmo, sem listener automático).
-- **Hover Card**: `.fs-popover-hover-card` — não é um componente
-  separado, é este mesmo Popover com `data-trigger="hover"` e um
-  modificador visual (mais largo, corpo em linha) pra conteúdo tipo
-  avatar + bio.
-
-```html
-<a href="#" data-fs="popover" data-fs-target="#hc-1" data-trigger="hover">@jorgewreis</a>
-<div class="fs-popover fs-popover-hover-card" id="hc-1">
-  <div class="fs-popover-body">
-    <img src="avatar.jpg" alt="" width="40" height="40">
-    <div>
-      <strong>Jorge Reis</strong>
-      <p>Mantenedor do Fokus Styles.</p>
-    </div>
-  </div>
-</div>
-```
-
-## Estados
-
-`.is-open` — controlado pelo JS.
-
-## A11y
-
-`role="dialog"` + `aria-modal="false"` no popover, `aria-controls`/
-`aria-expanded` no gatilho (JS aplica automaticamente). Com
-`data-trigger="click"` (padrão): `Escape` fecha e devolve foco ao gatilho;
-clique fora fecha. Um elemento dentro do popover com
-`data-fs-dismiss="popover"` fecha ao ser clicado (útil pra um botão "OK"
-no footer).
-
-## API JS
-
-Auto-init via `data-fs="popover"`. `Popover.getInstance(el)` (`el` é o
-**gatilho**).
-
-| Método | Descrição |
-|---|---|
-| `show()` | Abre, posiciona, ativa fechamento por clique fora (só no trigger `click`). |
-| `hide()` | Fecha. |
-| `toggle()` | Alterna. |
-| `dispose()` | Fecha se aberto, remove todos os listeners, remove o elemento do popover do DOM. |
-
-| Evento (no gatilho) | Cancelável | Quando |
-|---|---|---|
-| `fs:popover:shown` | Não | Depois de abrir. |
-| `fs:popover:hidden` | Não | Depois de fechar. |
-
-## Tokens
-
-`--fs-color-border`, `--fs-color-surface`, `--fs-color-subtle` (header),
-`--fs-color-text`, `--fs-radius-md`, `--fs-shadow-md`.
-
-## Exemplo
-
-```html
-<button type="button" class="fs-btn" data-fs="popover" data-fs-target="#confirmar-envio">
-  Enviar
-</button>
-<div class="fs-popover" id="confirmar-envio">
-  <div class="fs-popover-header">Confirmar envio?</div>
-  <div class="fs-popover-body">Não será possível editar depois de enviado.</div>
-  <div class="fs-popover-footer">
-    <button type="button" class="fs-btn fs-btn-sm" data-fs-dismiss="popover">Cancelar</button>
-    <button type="button" class="fs-btn fs-btn-primary fs-btn-sm">Confirmar</button>
-  </div>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/overlays-commands.html#popover),
-[`mockup/overlays-commands.html#hover-card`](../../mockup/overlays-commands.html#popover).

package/docs/components/progress.md

@@ -1,126 +0,0 @@
-# Spinner & Progress
-
-Dois indicadores de carregamento, 100% CSS: Spinner (indeterminado, giratório)
-e Progress (determinado, barra linear).
-
-## Visão geral
-
-```html
-<div class="fs-spinner" role="status" aria-label="Carregando"></div>
-
-<div class="fs-progress">
-  <div class="fs-progress-bar" style="--fs-progress-value: 60;"></div>
-</div>
-```
-
-## Anatomia
-
-**Spinner**: um único elemento, `.fs-spinner` — um anel com trilho sutil e
-segmento ativo, girando; sem marcação interna.
-
-**Progress**: `.fs-progress` (trilho) > `.fs-progress-bar` (preenchimento
-— a largura é controlada pela custom property `--fs-progress-value`, de
-`0` a `100`, ou diretamente por `style="width: 60%"`).
-
-## Variações
-
-**Spinner**:
-- Tamanho: `.fs-spinner-sm` (14px), `.fs-spinner-lg` (32px); sem sufixo =
-  20px.
-- Cor: `.fs-spinner-{primary|secondary|success|warning|danger|info}` — o
-  spinner herda `currentColor` por padrão, então também responde a
-  qualquer utilitário de cor de texto (`.fs-u-text-*`) se você não usar essas
-  classes.
-
-**Progress**:
-- Altura: `.fs-progress-sm` (4px), `.fs-progress-lg` (16px); sem sufixo =
-  8px.
-- Cor da barra: `.fs-progress-bar-{cor}` — mesmas 6 cores de tema.
-- `.fs-progress-bar-striped` — faixas diagonais; some com
-  `.fs-progress-bar-animated` pra elas se moverem continuamente.
-- Valor visual: use texto dentro de `.fs-progress-bar` apenas em
-  `.fs-progress-lg`; nas barras compactas, exponha o valor por `aria-valuenow`
-  e por um rótulo externo quando ele precisar ser visível.
-- Rótulo externo: `.fs-progress-meta` contém o nome da operação e
-  `.fs-progress-value` para percentual, contagem ou duração.
-- Indeterminado: `.fs-progress-indeterminate` mostra deslocamento contínuo;
-  omita `aria-valuenow` e use `aria-valuetext="Progresso indeterminado"`.
-- Finalização: `.fs-progress-complete` aplica `success`; `.fs-progress-error`
-  aplica `danger`. Use `.fs-progress-status` para uma confirmação ou ação de
-  recuperação fora da barra.
-- Meta: adicione `.fs-progress-marker` dentro do trilho e defina
-  `--fs-progress-marker-value` (0–100). Explique a meta em texto externo.
-- Início perceptível: `.fs-progress-minimum` preserva ao menos 4px visíveis
-  para valores reais acima de zero; `aria-valuenow` continua sendo a fonte de
-  verdade.
-- Fluxo por etapas: componha [Stepper](stepper.md) para comunicar a etapa
-  atual e uma `.fs-progress` para representar o avanço global. Não duplique
-  ambos para o mesmo significado.
-
-```html
-<div class="fs-spinner fs-spinner-lg fs-spinner-primary"></div>
-
-<div class="fs-progress fs-progress-lg">
-  <div class="fs-progress-bar fs-progress-bar-success fs-progress-bar-striped fs-progress-bar-animated" style="--fs-progress-value: 40;"></div>
-</div>
-```
-
-## Estados
-
-Nenhum — ambos refletem o valor/presença que você controla (spinner:
-presente = carregando; progress: `--fs-progress-value` = progresso atual).
-
-## A11y
-
-- Spinner: adicione `role="status"` + `aria-label` (ou um texto
-  visualmente oculto dentro) — não é automático, o elemento é puramente
-  visual por padrão.
-- Progress: para expor o valor a leitores de tela, adicione
-  `role="progressbar"` + `aria-valuenow`/`aria-valuemin="0"`/
-  `aria-valuemax="100"` **e um nome acessível** (`aria-label="Progresso: 60%"`
-  ou `aria-labelledby` apontando pro rótulo visível) no `.fs-progress`
-  (mantidos em sincronia com `--fs-progress-value` pela sua aplicação — o
-  framework não injeta automaticamente). Sem nome acessível, o
-  `role="progressbar"` é rejeitado por leitores de tela (gate `axe` no CI:
-  regra `aria-progressbar-name`).
-- A animação de listras (`.fs-progress-bar-animated`), a barra indeterminada
-  e a rotação do spinner desaceleram em `prefers-reduced-motion: reduce`, mas
-  não param completamente para não parecerem travadas.
-- Para o indeterminado, não informe um valor numérico inexistente. O movimento
-  reduz a velocidade em `prefers-reduced-motion`, mas continua ativo para não
-  parecer uma interface travada.
-
-## API JS
-
-Nenhuma — 100% CSS. Atualizar `--fs-progress-value` é responsabilidade da
-sua aplicação (ex.: `barEl.style.setProperty("--fs-progress-value", "75")`).
-
-## Tokens
-
-Spinner: `--fs-color-{nome}` (variantes de cor). Progress:
-`--fs-color-subtle` (trilho), `--fs-color-primary`/`--fs-color-{nome}`
-(preenchimento), `--fs-progress-height`, `--fs-progress-track`,
-`--fs-progress-bar-bg` e `--fs-progress-radius`. O Spinner também expõe
-`--fs-spinner-size`, `--fs-spinner-stroke` e `--fs-spinner-duration` para
-ajustes locais.
-
-## Exemplo
-
-```html
-<div class="fs-spinner" role="status" aria-label="Carregando"></div>
-
-<div class="fs-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
-  <div class="fs-progress-bar" style="--fs-progress-value: 60;">60%</div>
-</div>
-
-<div class="fs-progress-meta"><span>Upload de anexos</span><span class="fs-progress-value">3 de 8 arquivos</span></div>
-<div class="fs-progress" role="progressbar" aria-label="Upload de anexos" aria-valuetext="3 de 8 arquivos enviados" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
-  <div class="fs-progress-bar" style="--fs-progress-value: 38"></div>
-</div>
-
-<div class="fs-progress fs-progress-indeterminate" role="progressbar" aria-label="Processando pagamento" aria-valuetext="Progresso indeterminado" aria-busy="true">
-  <div class="fs-progress-bar"></div>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/feedback-actions.html#progress).

package/docs/components/radio.md

@@ -1,70 +0,0 @@
-# Radio
-
-Radio button 100% CSS, mesma técnica do [Checkbox](checkbox.md) — sobre um
-`<input type="radio">` nativo. É a única exceção circular do framework
-além do [Spinner](progress.md), por decisão de design (anti-circular no
-resto de tudo).
-
-## Visão geral
-
-```html
-<div class="fs-radio">
-  <input type="radio" name="periodo" class="fs-radio-input" id="dia" checked>
-  <label for="dia" class="fs-radio-label">Dia</label>
-</div>
-<div class="fs-radio">
-  <input type="radio" name="periodo" class="fs-radio-input" id="semana">
-  <label for="semana" class="fs-radio-label">Semana</label>
-</div>
-```
-
-Radios do mesmo grupo compartilham `name` — seleção exclusiva é
-comportamento nativo do `<input type="radio">`, sem JS.
-
-## Anatomia
-
-`.fs-radio` (wrapper) > `.fs-radio-input` (oculto via clip) +
-`.fs-radio-label` (`<label for="...">`, desenha o círculo via `::before` e
-o ponto interno via `::after`).
-
-## Variações
-
-Tamanho: `.fs-radio-sm`, `.fs-radio-lg` no wrapper.
-
-## Estados
-
-- **checked**, **disabled**, validação (`.is-valid`/`.is-invalid`) e foco —
-  mesmo padrão do [Checkbox](checkbox.md). Não existe `indeterminate` para
-  radio.
-
-## A11y
-
-- `<input type="radio">` nativo com `name` compartilhado — `ArrowUp`/
-  `ArrowDown`/`ArrowLeft`/`ArrowRight` movem a seleção **dentro do grupo**
-  automaticamente (comportamento do navegador, não do framework).
-  `Tab`/`Shift+Tab` entram/saem do grupo de uma vez (o item selecionado, ou
-  o primeiro se nenhum estiver selecionado, é o único no fluxo de tab).
-- Sempre associe `label` via `for`/`id`.
-
-## API JS
-
-Nenhuma — 100% CSS.
-
-## Tokens
-
-Mesmos do [Checkbox](checkbox.md) — sem tokens próprios.
-
-## Exemplo
-
-```html
-<div class="fs-radio">
-  <input type="radio" name="plano" class="fs-radio-input" id="p1" checked>
-  <label for="p1" class="fs-radio-label">Mensal</label>
-</div>
-<div class="fs-radio">
-  <input type="radio" name="plano" class="fs-radio-input" id="p2">
-  <label for="p2" class="fs-radio-label">Anual</label>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/forms.html#check-radio-switch).

package/docs/components/range.md

@@ -1,83 +0,0 @@
-# Range / Slider
-
-`<input type="range">` estilizado — trilha preenchida até o valor atual e
-thumb customizados via pseudo-elementos (`::-webkit-slider-thumb`/
-`::-moz-range-thumb`, sem padrão unificado entre navegadores). Teclado
-(setas, `Home`/`End`, `PageUp`/`PageDown`) e ARIA (`role="slider"` implícito,
-`aria-valuenow`/`aria-valuemin`/`aria-valuemax` automáticos) já vêm do
-elemento nativo, sem nenhum JS.
-
-## Visão geral
-
-```html
-<label for="volume" class="fs-form-label">Volume</label>
-<input type="range" class="fs-form-range" id="volume" min="0" max="100" value="40">
-```
-
-## Valor visível (API JS opcional)
-
-Um `<output>` associado via `data-fs-target` mostra o valor atual em texto
-— útil pra quem não percebe a posição do thumb só visualmente. Auto-init
-com `data-fs="range"` no próprio `<input>`:
-
-```html
-<input type="range" class="fs-form-range" id="volume" min="0" max="100" value="40"
-  data-fs="range" data-fs-target="#volume-output">
-<output class="fs-range-output" id="volume-output" for="volume">40</output>
-```
-
-O JS também é responsável por pintar a trilha preenchida
-(`--fs-range-percent`, ver token abaixo) — sem ele, a trilha renderiza sem
-preenchimento (só a cor de fundo neutra), porque só o Firefox suporta
-`::-moz-range-progress`; Chrome/Safari não têm equivalente em CSS puro.
-
-## Marcações (`<datalist>`)
-
-Marcações na trilha são nativas via `list` + `<datalist>` (sem JS,
-suporte no Chrome/Edge; degrada para nenhuma marcação visível nos
-navegadores sem suporte, sem quebrar a funcionalidade):
-
-```html
-<input type="range" class="fs-form-range" min="0" max="100" step="25" list="marcas">
-<datalist id="marcas">
-  <option value="0"></option>
-  <option value="25"></option>
-  <option value="50"></option>
-  <option value="75"></option>
-  <option value="100"></option>
-</datalist>
-```
-
-## Tokens
-
-| Token | Uso |
-|---|---|
-| `--fs-range-track-height` | Altura da trilha. |
-| `--fs-range-track-color` | Cor da trilha não preenchida. |
-| `--fs-range-fill-color` | Cor da trilha preenchida (até o valor atual). |
-| `--fs-range-thumb-size` | Diâmetro do thumb. |
-| `--fs-range-thumb-color` | Cor de fundo do thumb. |
-| `--fs-range-thumb-border-color` | Cor da borda do thumb. |
-| `--fs-range-percent` | Percentual preenchido da trilha — escrito pelo JS (`RangeSlider`), não pensado pra edição manual. |
-
-## Estados
-
-- `:disabled` — opacidade reduzida, cursor `not-allowed`, sem interação.
-- `:focus-visible` — anel de foco no thumb (mesma técnica de
-  `focus-ring()` dos demais controles).
-
-## A11y
-
-Nativo — `<input type="range">` já expõe `role="slider"` e os valores
-`aria-value*` automaticamente. Sempre associe um `<label>` (via `for`), e
-use `aria-label`/`aria-labelledby` quando não houver label visível.
-
-## API JS
-
-- `data-fs="range"` — auto-init.
-- `data-fs-target="#id"` — `<output>` que recebe o valor atual em texto.
-
-| Método | Descrição |
-|---|---|
-| `RangeSlider.getInstance(el)` | Retorna a instância associada ao `<input>` (ou `undefined`). |
-| `dispose()` | Remove o listener de `input`. |

package/docs/components/rating.md

@@ -1,91 +0,0 @@
-# Rating
-
-Avaliação por estrelas, 100% CSS — mesma técnica de input oculto + label
-irmã do [Checkbox](checkbox.md)/[Segmented Control](segmented-control.md),
-usando `<input type="radio">` (seleção exclusiva nativa). A estrela é o
-ícone `star` do [`fokus-styles/icons`](../guides/icons.md) — contorno vazio por
-padrão, preenchido (`fill: currentcolor`) quando selecionada ou em hover.
-
-## Visão geral
-
-```html
-<div class="fs-rating">
-  <input type="radio" name="nota" class="fs-rating-input" id="nota-5" value="5">
-  <label for="nota-5" class="fs-rating-star" aria-label="5 estrelas">
-    <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>
-  </label>
-  <input type="radio" name="nota" class="fs-rating-input" id="nota-4" value="4">
-  <label for="nota-4" class="fs-rating-star" aria-label="4 estrelas">
-    <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>
-  </label>
-  <!-- ... 3, 2, 1, mesmo padrão ... -->
-</div>
-```
-
-**A ordem no HTML é decrescente** (5, 4, 3, 2, 1) — truque clássico de CSS
-puro: o contêiner usa `row-reverse` (visualmente reordena pra crescente,
-esquerda→direita) e o destaque "estrela clicada + todas à esquerda dela"
-usa só o combinador de irmãos gerais (`~`, que só enxerga o que vem
-**depois** no DOM) — depende da ordem decrescente pra funcionar.
-
-## Anatomia
-
-`.fs-rating` (contêiner, `row-reverse`) > pares `.fs-rating-input`
-(`<input type="radio">`, mesmo `name`, oculto via clip) +
-`.fs-rating-star` (`<label for="...">` com `aria-label` + o ícone `star`
-dentro, `aria-hidden`), um par por nota possível, em ordem decrescente de
-`value`.
-
-## Variações
-
-Tamanho: `.fs-rating-sm` (16px), `.fs-rating-lg` (32px); sem sufixo = 24px
-(padrão) — controla o `font-size` do `<label>`, e o ícone (`.fs-icon`,
-`1em` × `1em`) acompanha.
-
-## Estados
-
-- Nota selecionada e todas as anteriores (maior valor) ficam na cor de
-  aviso (`--fs-color-warning`) e com a estrela preenchida — via
-  `:checked ~ .fs-rating-star`.
-- **Hover** prévia a mesma seleção antes de confirmar o clique
-  (`:hover`/`:hover ~`).
-- `disabled` no input — opacidade reduzida, sem interação.
-
-## A11y
-
-`<input type="radio">` nativo — `Tab` foca o grupo, `ArrowLeft`/
-`ArrowRight` (ou `Up`/`Down`) movem a seleção entre notas, `Space`
-confirma. Como a estrela é um ícone (`aria-hidden="true"`, sem texto
-visível), o `<label>` **precisa** de `aria-label` (`"5 estrelas"`,
-`"1 estrela"` etc.) — sem isso o link não tem nome acessível nenhum.
-
-## API JS
-
-Nenhuma — 100% CSS. O valor selecionado é lido como qualquer grupo de
-radio nativo (`document.querySelector('input[name="nota"]:checked').value`).
-
-## Tokens
-
-`--fs-color-border` (estrela vazia), `--fs-color-warning` (selecionada/
-hover), `--fs-color-primary` (anel de foco).
-
-## Exemplo
-
-```html
-<fieldset>
-  <legend>Avalie sua experiência</legend>
-  <div class="fs-rating">
-    <input type="radio" name="exp" class="fs-rating-input" id="exp-5" value="5" checked>
-    <label for="exp-5" class="fs-rating-star" aria-label="5 estrelas">
-      <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>
-    </label>
-    <input type="radio" name="exp" class="fs-rating-input" id="exp-4" value="4">
-    <label for="exp-4" class="fs-rating-star" aria-label="4 estrelas">
-      <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>
-    </label>
-    <!-- ... 3, mesmo padrão ... -->
-  </div>
-</fieldset>
-```
-
-Mockup: [laboratório do componente](../../mockup/forms.html#rating).

package/docs/components/ratio.md

@@ -1,13 +0,0 @@
-# Ratio
-
-## Visão geral
-
-`.fs-ratio` cria frames de mídia responsivos sem depender da altura do viewport.
-
-## Estados
-
-Escolha `.fs-ratio-1x1`, `.fs-ratio-4x3`, `.fs-ratio-16x9` ou `.fs-ratio-21x9`.
-
-## A11y
-
-Mantenha texto alternativo em imagens e legendas ou título acessível em mídia incorporada.

package/docs/components/scrollspy.md

@@ -1,13 +0,0 @@
-# Scrollspy
-
-## Visão geral
-
-`data-fs-scrollspy` destaca o link da seção atualmente visível e pode ser usado em navegação lateral.
-
-## Estados
-
-O módulo JS aplica `.is-active` e emite `fs:scrollspy:activate`.
-
-## A11y
-
-Use uma navegação nomeada, mantenha foco visível e não remova a indicação textual do destino.

package/docs/components/segmented-control.md

@@ -1,82 +0,0 @@
-# Segmented Control
-
-Grupo de botões com estado selecionado — alternativa compacta a radio
-buttons/tabs para poucas opções mutuamente exclusivas (ou não). 100% CSS,
-mesma técnica de input oculto + label irmã.
-
-## Visão geral
-
-```html
-<div class="fs-segmented-control">
-  <div class="fs-segmented-item">
-    <input type="radio" name="periodo" class="fs-segmented-input" id="p-dia" checked>
-    <label for="p-dia" class="fs-segmented-label">Dia</label>
-  </div>
-  <div class="fs-segmented-item">
-    <input type="radio" name="periodo" class="fs-segmented-input" id="p-semana">
-    <label for="p-semana" class="fs-segmented-label">Semana</label>
-  </div>
-  <div class="fs-segmented-item">
-    <input type="radio" name="periodo" class="fs-segmented-input" id="p-mes">
-    <label for="p-mes" class="fs-segmented-label">Mês</label>
-  </div>
-</div>
-```
-
-## Anatomia
-
-`.fs-segmented-control` (contêiner, borda externa única) >
-`.fs-segmented-item` (um por opção) > `.fs-segmented-input`
-(`<input>`, oculto via clip) + `.fs-segmented-label` (`<label for="...">`).
-
-## Variações
-
-- **Exclusivo vs. inclusivo**: use `<input type="radio">` com o mesmo
-  `name` (só uma opção selecionada por vez — como no exemplo) ou
-  `<input type="checkbox">` (cada item seleciona/deseleciona
-  independentemente).
-- **Tamanho**: `.fs-segmented-control-sm`, `.fs-segmented-control-lg`; sem
-  sufixo = padrão (38px de altura).
-
-```html
-<div class="fs-segmented-control fs-segmented-control-sm">...</div>
-```
-
-## Estados
-
-- **checked**: item selecionado ganha fundo/texto na cor primária.
-- **disabled**: no input — opacidade reduzida, sem interação.
-- **Foco**: anel sobre o item focado (`z-index` elevado pra não ficar
-  parcialmente escondido pela borda do vizinho).
-
-## A11y
-
-`<input>` nativo (radio ou checkbox) — toda a semântica de grupo (seleção
-exclusiva com radio, navegação por seta entre itens do mesmo `name`) vem
-do navegador, sem JS. Sempre associe `label` via `for`/`id`.
-
-## API JS
-
-Nenhuma — 100% CSS.
-
-## Tokens
-
-`--fs-color-border`, `--fs-color-surface`, `--fs-color-subtle` (hover),
-`--fs-color-primary` (selecionado), `--fs-radius-sm`.
-
-## Exemplo
-
-```html
-<div class="fs-segmented-control">
-  <div class="fs-segmented-item">
-    <input type="checkbox" class="fs-segmented-input" id="f-ativo" checked>
-    <label for="f-ativo" class="fs-segmented-label">Ativos</label>
-  </div>
-  <div class="fs-segmented-item">
-    <input type="checkbox" class="fs-segmented-input" id="f-arquivado">
-    <label for="f-arquivado" class="fs-segmented-label">Arquivados</label>
-  </div>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/forms.html#segmented-control).

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).