fokus-styles 2.5.0 → 2.6.0

package/docs/components/tag.md

@@ -1,144 +0,0 @@
-# Tag
-
-Badge dismissível — reusa [Badge](badge.md) e `.fs-btn-close`
-([Button](button.md)) mais o JS mínimo pra remover do DOM ao clicar no "x".
-
-## Visão geral
-
-```html
-<span class="fs-badge fs-tag" data-fs="tag">
-  Frontend
-  <button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Frontend"></button>
-</span>
-```
-
-## Anatomia
-
-`.fs-badge.fs-tag` (mesmo elemento, duas classes — Tag é um refinamento de
-Badge, não um componente separado) contendo texto + `.fs-btn-close` com
-`data-fs-dismiss="tag"`.
-
-## Variações
-
-- **Cor**: as mesmas de [Badge](badge.md) (`.fs-badge-{cor}`).
-- **Tamanho**: apenas o tamanho padrão. Tags são controles compactos de
-  remoção; usar uma única densidade evita variações de alvo e de texto em
-  filtros e formulários.
-- **Ícones**: envolva um SVG de `fokus-styles/icons` em `.fs-tag-icon` antes
-  de `.fs-tag-label` para ícone inicial ou use `.fs-tag-icon-end` depois do
-  texto para indicar um estado. O contêiner do ícone usa a mesma dimensão
-  visual do botão de fechamento; `--fs-tag-icon-size`,
-  `--fs-tag-icon-glyph-size`, `--fs-tag-icon-gap` e `--fs-tag-icon-color`
-  permitem ajustes locais. O
-  ícone é decorativo (`aria-hidden="true"`) quando o texto já descreve a tag;
-  nunca use uma Tag somente com ícone como padrão.
-- **Texto longo**: use `.fs-tag-truncate` na tag e `.fs-tag-label` no texto.
-  Defina `--fs-tag-max-inline-size` conforme o contexto; o texto integral
-  continua no DOM e pode ser exposto em `title` como apoio visual.
-- **Agrupamento**: `.fs-tag-group` (flex + wrap) no contêiner pai,
-  une tags lado a lado com separadores translúcidos; o botão de remoção só é
-  revelado em hover ou foco, evitando ruído visual. A reserva simétrica de
-  espaço para o botão mantém o texto visualmente centralizado; o fundo da tag
-  inteira sinaliza o hover.
-- **Protegida**: `.fs-tag-protected` desativa interação com `pointer-events:
-  none`; substitua o botão por `.fs-tag-lock` e o ícone `shield-check` de
-  `fokus-styles/icons` quando a tag não puder ser removida.
-- **Overflow**: `.fs-tag-overflow` é um `<button>` compacto e transparente,
-  sem borda, com o ícone `tags` em `primary` centralizado; ele representa tags
-  não exibidas.
-  Conecte-o a um popover ou a uma lista expandida e mantenha `aria-expanded`
-  sincronizado com essa interface.
-
-O botão de fechamento usa `--fs-tag-close-size` e `--fs-tag-close-gap`, herda
-o raio do Badge e é a única ação de remoção. A Tag inteira não é um botão.
-
-```html
-<div class="fs-tag-group">
-  <span class="fs-badge fs-tag" data-fs="tag">Design<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover"></button></span>
-  <span class="fs-badge fs-tag" data-fs="tag">Frontend<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover"></button></span>
-</div>
-```
-
-## Estados
-
-Botão de dispensa é transparente no repouso; tem hover (fundo sutil) e
-`:active` (leve "afundar", feedback tátil antes da remoção assíncrona). Ao
-receber foco pelo teclado, a tag inteira também recebe um anel de foco para
-ficar distinguível em agrupamentos densos.
-
-Para uma operação assíncrona, aplique `aria-busy="true"` e `.is-loading`, ou
-use `Tag.setLoading(true)`. Inclua um `.fs-spinner` depois de `.fs-tag-label`:
-o estado pendente usa fundo `warning`, texto e spinner pretos. O botão de
-remoção é desabilitado até que o estado seja removido.
-
-## A11y
-
-- `.fs-btn-close` **precisa** de `aria-label` descritivo (ex.: "Remover tag
-  Frontend", não só "Remover") — é um botão só-ícone.
-- A remoção só acontece ao clicar no botão de fechar, nunca ao clicar na
-  tag inteira — evita remoção acidental.
-- Se o botão de fechar estiver focado quando a Tag for removida, o foco vai
-  para a próxima Tag do mesmo grupo; se não houver, vai para a anterior.
-  Remoções programáticas sem foco no botão não movem o foco.
-- Ícones com significado próprio precisam ser acompanhados por texto ou
-  descrição acessível; não dependa apenas do desenho ou da cor.
-- Para tags truncadas, mantenha a string completa dentro de `.fs-tag-label`;
-  ela continua disponível para tecnologias assistivas. `title` é apenas uma
-  ajuda adicional para ponteiro.
-- O botão `.fs-tag-overflow` requer um nome acessível descritivo, como
-  `aria-label="Mostrar mais 3 tags"`.
-
-## API JS
-
-Auto-init via `data-fs="tag"`. `Tag.getInstance(el)`.
-
-| Método | Descrição |
-|---|---|
-| `dismiss()` | Dispara `fs:tag:dismissed` (cancelável); se não cancelado, remove o elemento do DOM e retorna `true`. Retorna `false` se estiver carregando ou se o evento for cancelado. |
-| `setLoading(loading)` | Alterna `.is-loading`, `aria-busy` e o estado desabilitado do botão de remoção. |
-| `dispose()` | Remove o listener de clique e desregistra a instância (não remove o elemento). |
-
-| Evento | Cancelável | Quando |
-|---|---|---|
-| `fs:tag:dismissed` | Sim | Antes de remover — `event.preventDefault()` cancela a remoção. |
-
-## Tokens
-
-Usa os tokens de [Badge](badge.md) e expõe tokens locais para composição:
-`--fs-tag-icon-size`, `--fs-tag-icon-glyph-size`, `--fs-tag-icon-gap`, `--fs-tag-icon-color`,
-`--fs-tag-close-size` e `--fs-tag-close-gap`.
-
-## Exemplo
-
-```html
-<div class="fs-tag-group">
-  <span class="fs-badge fs-badge-primary fs-tag" data-fs="tag">
-    Urgente
-    <button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Urgente"></button>
-  </span>
-  <span class="fs-badge fs-badge-danger fs-tag" data-fs="tag">
-    Bloqueado
-    <button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Bloqueado"></button>
-  </span>
-</div>
-```
-
-```html
-<span class="fs-badge fs-tag fs-tag-truncate" style="--fs-tag-max-inline-size: 20rem;" data-fs="tag">
-  <span class="fs-tag-icon" aria-hidden="true"><!-- SVG de fokus-styles/icons --></span>
-  <span class="fs-tag-label">Revisão de acessibilidade e compatibilidade entre navegadores</span>
-  <button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Revisão de acessibilidade e compatibilidade entre navegadores"></button>
-</span>
-
-<button type="button" class="fs-badge fs-tag fs-tag-overflow" aria-label="Mostrar mais 3 tags" aria-expanded="false">
-  <svg class="fs-icon" aria-hidden="true"><!-- SVG tags de fokus-styles/icons --></svg>
-</button>
-
-<span class="fs-badge fs-tag is-loading" data-fs="tag" aria-busy="true">
-  <span class="fs-tag-label">Salvando</span>
-  <span class="fs-spinner" aria-hidden="true"></span>
-  <button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Salvando" disabled></button>
-</span>
-```
-
-Mockup: [laboratório do componente](../../mockup/feedback-actions.html#tag).

package/docs/components/tile.md

@@ -1,112 +0,0 @@
-# Tile
-
-Linha compacta ícone + título/subtítulo + ações, para listas de
-opções/configurações/itens (sinergia visual com
-[Notification Center](notification-center.md) e [Empty State](empty-state.md)).
-
-## Visão geral
-
-```html
-<div class="fs-tile">
-  <div class="fs-tile-icon" aria-hidden="true">
-    <svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>
-  </div>
-  <div class="fs-tile-body">
-    <p class="fs-tile-title">Relatório mensal.pdf</p>
-    <p class="fs-tile-subtitle">2.4 MB · Atualizado há 2h</p>
-  </div>
-  <div class="fs-tile-actions">
-    <button type="button" class="fs-btn fs-btn-sm">Abrir</button>
-  </div>
-</div>
-```
-
-## Anatomia
-
-`.fs-tile` > `.fs-tile-icon` (ícone SVG — [`fokus-styles/icons`](../guides/icons.md)
-recomendado — ou imagem, largura fixa) +
-`.fs-tile-body` (`.fs-tile-title` + `.fs-tile-subtitle`, opcional, ambos
-truncam com reticências se não couberem) + `.fs-tile-actions` (opcional —
-botões, switch, badge).
-
-## Variações
-
-- **Ações à direita** (padrão) ou **embaixo**: adicione
-  `.fs-tile-actions-bottom` no `.fs-tile` para `.fs-tile-actions` quebrar
-  para uma segunda linha, alinhada à direita.
-- **Clicável**: `.fs-tile-clickable` + [`.fs-stretched-link`](card.md#fs-card-clickable)
-  num link dentro do `.fs-tile-body` — o tile inteiro fica clicável/focável
-  sem aninhar um `<a>` ao redor de tudo.
-- **Tamanho**: `.fs-tile-sm`, `.fs-tile-lg`; sem sufixo = padrão.
-
-```html
-<div class="fs-tile fs-tile-actions-bottom">
-  <div class="fs-tile-icon" aria-hidden="true">
-    <svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
-  </div>
-  <div class="fs-tile-body">
-    <p class="fs-tile-title">Plano expira em 3 dias</p>
-  </div>
-  <div class="fs-tile-actions">
-    <button type="button" class="fs-btn fs-btn-outline-secondary fs-btn-sm">Depois</button>
-    <button type="button" class="fs-btn fs-btn-primary fs-btn-sm">Renovar</button>
-  </div>
-</div>
-
-<div class="fs-tile fs-tile-clickable">
-  <div class="fs-tile-icon" aria-hidden="true">
-    <svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
-  </div>
-  <div class="fs-tile-body">
-    <p class="fs-tile-title"><a href="/perfil" class="fs-stretched-link">Jorge Reis</a></p>
-    <p class="fs-tile-subtitle">Ver perfil</p>
-  </div>
-</div>
-```
-
-## Estados
-
-Nenhum próprio — hover/focus da variante clicável reusa o mesmo padrão do
-[Card clicável](card.md#fs-card-clickable) (`:hover`/`:focus-within`, borda
-+ sombra).
-
-## A11y
-
-- Título/subtítulo truncados (`text-overflow: ellipsis`) escondem texto
-  visualmente, mas o conteúdo continua no DOM/acessível — se o truncamento
-  for crítico, considere `title="..."` no elemento pra tooltip nativo.
-- Na variante clicável, o link dentro de `.fs-tile-body` é o elemento
-  focável real — o `::after` do stretched-link só expande a área de
-  clique, não tira o foco do link.
-
-## API JS
-
-Nenhuma — 100% CSS.
-
-## Tokens
-
-Sem tokens de componente próprios — usa `--fs-color-border`,
-`--fs-color-surface`, `--fs-color-bg-subtle` (ícone), `--fs-color-text`,
-`--fs-color-muted`, `--fs-radius-md`, `--fs-shadow-sm` (hover clicável).
-
-## Exemplo
-
-```html
-<div class="fs-tile">
-  <div class="fs-tile-icon" aria-hidden="true">
-    <svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/></svg>
-  </div>
-  <div class="fs-tile-body">
-    <p class="fs-tile-title">Tema escuro</p>
-    <p class="fs-tile-subtitle">Alterna a aparência da interface</p>
-  </div>
-  <div class="fs-tile-actions">
-    <div class="fs-switch">
-      <input type="checkbox" class="fs-switch-input" id="tile-theme" checked aria-label="Ativar tema escuro">
-      <label for="tile-theme" class="fs-switch-label"></label>
-    </div>
-  </div>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/content-data.html#tile).

package/docs/components/timeline.md

@@ -1,78 +0,0 @@
-# Timeline
-
-Linha do tempo de eventos — 100% CSS, com marcadores conectados e estados
-por item (pendente/ativo/concluído/falhou).
-
-## Visão geral
-
-```html
-<ol class="fs-timeline">
-  <li class="fs-timeline-item fs-timeline-completed">
-    <div class="fs-timeline-marker"></div>
-    <div class="fs-timeline-content">
-      <p class="fs-timeline-title">Pedido criado</p>
-      <p class="fs-timeline-text">Seu pedido foi registrado.</p>
-      <span class="fs-timeline-time">10:32</span>
-    </div>
-  </li>
-  <li class="fs-timeline-item fs-timeline-active">
-    <div class="fs-timeline-marker"></div>
-    <div class="fs-timeline-content">
-      <p class="fs-timeline-title">Em preparação</p>
-    </div>
-  </li>
-  <li class="fs-timeline-item">
-    <div class="fs-timeline-marker"></div>
-    <div class="fs-timeline-content">
-      <p class="fs-timeline-title">Enviado</p>
-    </div>
-  </li>
-</ol>
-```
-
-## Anatomia
-
-`<ol class="fs-timeline">` > `.fs-timeline-item` (um por evento) >
-`.fs-timeline-marker` (círculo) + `.fs-timeline-content` >
-`.fs-timeline-title` + `.fs-timeline-text` (opcional) +
-`.fs-timeline-time` (opcional). O conector entre marcadores é desenhado
-via `::before` — não insira manualmente.
-
-## Variações
-
-`.fs-timeline-horizontal` no `<ol>` — inverte o eixo (itens em colunas,
-marcador no topo, conector na horizontal).
-
-## Estados
-
-Cada `.fs-timeline-item` aceita uma destas classes (mesma lógica visual do
-[Stepper](stepper.md) — controle manual, sem JS):
-
-| Classe | Efeito |
-|---|---|
-| (nenhuma) | Pendente — marcador vazio, conector cinza. |
-| `.fs-timeline-active` | Em andamento — marcador preenchido na cor primária. |
-| `.fs-timeline-completed` | Concluído — marcador com check verde; o conector seguinte também fica verde (indica progresso). |
-| `.fs-timeline-failed` | Falhou — marcador e título em vermelho. |
-
-## A11y
-
-Use `<ol>` (ordem cronológica importa) — já no exemplo. Sem JS, sem
-interação por teclado própria; se os itens forem clicáveis (ex.: expandir
-detalhes), essa interação é sua responsabilidade.
-
-## API JS
-
-Nenhuma — 100% CSS. Estados são classes que você controla pela sua
-aplicação.
-
-## Tokens
-
-`--fs-color-border` (conector/marcador padrão), `--fs-color-primary`
-(ativo), `--fs-color-success` (concluído), `--fs-color-danger` (falhou),
-`--fs-color-text`, `--fs-color-muted`.
-
-## Exemplo
-
-Ver acima (Visão geral) — mockup completo com as duas orientações em
-[`mockup/content-data.html#timeline`](../../mockup/content-data.html#timeline).

package/docs/components/toast.md

@@ -1,108 +0,0 @@
-# Toast
-
-Notificação flutuante e temporária para confirmar uma ação não bloqueante.
-Para mensagens persistentes no contexto da página use [Alert](alert.md); para
-histórico e revisão posterior use [Notification Center](notification-center.md).
-
-## Visão geral
-
-```html
-<div class="fs-toast-container">
-  <div class="fs-toast fs-toast-success" data-fs="toast" data-delay="4000">
-    <div class="fs-toast-header">
-      <span>Sucesso</span>
-      <button type="button" class="fs-btn-close" data-fs-dismiss="toast" aria-label="Fechar"></button>
-    </div>
-    <div class="fs-toast-body">Operação concluída com sucesso.</div>
-  </div>
-</div>
-```
-
-O Toast é inicializado pelo atributo `data-fs="toast"`, mas só aparece quando
-`.show()` é chamado. O container é fixo, empilha mensagens e usa propriedades
-lógicas para funcionar em RTL e respeitar áreas seguras móveis.
-
-## Anatomia
-
-`.fs-toast-container` contém um ou mais `.fs-toast`. Dentro dele, os slots
-opcionais são `.fs-toast-header`, `.fs-toast-icon`, `.fs-toast-heading`,
-`.fs-toast-title`, `.fs-toast-meta`, `.fs-toast-body`, `.fs-toast-actions`,
-`.fs-toast-link`, `.fs-toast-close` e `.fs-toast-progress`.
-
-```html
-<div class="fs-toast fs-toast-success" data-fs="toast" data-delay="5000" data-toast-progress="true">
-  <div class="fs-toast-header">
-    <span class="fs-toast-icon" aria-hidden="true">✓</span>
-    <div class="fs-toast-heading">
-      <strong class="fs-toast-title">Arquivo salvo</strong>
-      <span class="fs-toast-meta">Agora</span>
-    </div>
-    <button type="button" class="fs-btn-close fs-toast-close" data-fs-dismiss="toast" aria-label="Fechar aviso de arquivo salvo"></button>
-  </div>
-  <div class="fs-toast-body">O documento foi salvo com sucesso.</div>
-  <div class="fs-toast-actions">
-    <button type="button" class="fs-btn fs-btn-sm fs-btn-success">Desfazer</button>
-    <a href="#detalhes" class="fs-toast-link">Ver detalhes</a>
-  </div>
-  <div class="fs-toast-progress" aria-hidden="true"></div>
-</div>
-```
-
-O ícone é fornecido pelo consumidor e deve ser decorativo quando o texto já
-explicar o estado. Ações usam Button; o fechamento continua sendo o único
-controle obrigatório da dispensa.
-
-## Variações e estados
-
-Variantes: `.fs-toast-primary`, `.fs-toast-secondary`, `.fs-toast-success`,
-`.fs-toast-warning`, `.fs-toast-danger` e `.fs-toast-info`.
-
-- `data-delay="4000"` define o tempo de auto-dismiss em milissegundos;
-- `data-autohide="false"` mantém o Toast aberto;
-- `data-toast-progress="true"` exibe a barra de tempo quando o auto-dismiss está ativo;
-- hover, foco e interação pausam o timer e a barra de progresso;
-- `prefers-reduced-motion` elimina a animação contínua do progresso.
-
-## Estados
-
-O Toast começa oculto, entra em `.is-open` durante a exibição e pode ser
-pausado por hover ou foco. `hide()` e auto-dismiss cancelam o timer e ocultam
-o elemento sem transferir foco.
-
-## A11y
-
-O JavaScript aplica `role="status"` e `aria-live="polite"`. O Toast não move
-foco automaticamente e não deve usar `aria-live="assertive"` por padrão.
-Botões de fechamento precisam de `aria-label` específico; links e ações devem
-ter nomes compreensíveis. Ícones decorativos usam `aria-hidden="true"` e não
-substituem texto.
-
-Use `data-autohide="false"` para erros que exigem ação. Não use Toast para
-decisões críticas, conteúdo extenso ou mensagens que precisam permanecer no
-contexto da região afetada.
-
-## API JS
-
-```js
-const toast = FokusStyles.Toast.getInstance(document.querySelector(".fs-toast"));
-toast.show();
-toast.hide();
-toast.toggle();
-toast.dispose();
-```
-
-Eventos preservados: `fs:toast:shown` e `fs:toast:hidden`. O componente pausa
-o auto-dismiss durante hover e foco, sem transferir foco para outro Toast.
-
-## Tokens
-
-Container: `--fs-toast-offset`, `--fs-toast-gap`, `--fs-toast-width` e
-`--fs-toast-max-width`. Instância: `--fs-toast-padding-block`,
-`--fs-toast-padding-inline`, `--fs-toast-gap`, `--fs-toast-radius`,
-`--fs-toast-shadow`, `--fs-toast-icon-size`, `--fs-toast-title-gap`,
-`--fs-toast-actions-gap`, `--fs-toast-border-width` e
-`--fs-toast-progress-height`.
-
-## Mockup
-
-[Laboratório independente do Toast](../../mockup/examples/toast.html).

package/docs/components/tooltip.md

@@ -1,113 +0,0 @@
-# Tooltip
-
-Rótulo curto que aparece ao passar o mouse ou focar um elemento —
-substitui o `title` nativo do navegador (lento, sem estilo, inacessível a
-teclado em alguns navegadores).
-
-## Visão geral
-
-```html
-<button type="button" class="fs-btn" data-fs="tooltip" title="Copiar para a área de transferência">
-  Copiar
-</button>
-```
-
-O texto vem do atributo `title` (ou `data-title`) — o JS o remove do DOM
-na inicialização (pra não duplicar com o tooltip nativo do navegador) e o
-recria como conteúdo do tooltip.
-
-## Anatomia
-
-Gerado inteiramente pelo JS: `.fs-tooltip` (`role="tooltip"`) >
-`.fs-tooltip-arrow` + `.fs-tooltip-inner` (texto). Não escreva essa
-marcação manualmente — só o elemento de referência com `title`/`data-fs="tooltip"`.
-
-## Variações
-
-`data-placement` (`top` — padrão, `bottom`, `left`, `right`) no elemento
-de referência. Reposiciona automaticamente se não couber. A posição efetiva
-fica em `data-placement` no Tooltip gerado.
-
-Também são aceitos alinhamentos compostos, como `top-start`, `top-end`,
-`bottom-start`, `bottom-end`, `left-start` e `right-end`. A forma manual
-equivalente é `{ placement: "top", align: "start" }`. Use `data-offset` ou
-`offset` para controlar a distância entre o gatilho e a dica.
-
-```html
-<button class="fs-btn" data-fs="tooltip" data-placement="right" title="Mais opções">⋮</button>
-```
-
-## Estados
-
-`.is-open` — controlado pelo JS ao mostrar/esconder; não defina
-manualmente.
-
-### Delays e touch
-
-Use `data-show-delay` e `data-hide-delay` para evitar abertura acidental:
-
-```html
-<button data-fs="tooltip" data-show-delay="300" data-hide-delay="100"
-  title="Ajuda complementar">Ajuda</button>
-```
-
-O Tooltip também responde a foco e ponteiro. Em touch, toque fora fecha a dica.
-Escape fecha sem mover o foco. Tooltips concorrentes são fechados quando uma
-nova dica é aberta.
-
-Sem configuração, a abertura é imediata; use `data-show-delay` para evitar
-aberturas acidentais em interações com ponteiro. O foco de teclado abre
-imediatamente. Elementos `disabled` não
-recebem foco nem eventos nativos: envolva-os em um elemento focável quando
-precisar explicar seu estado.
-
-## A11y
-
-O JS aplica `aria-describedby` no elemento de referência, apontando pro
-`id` do tooltip — leitor de tela anuncia o conteúdo ao focar o elemento.
-Mostra em `mouseenter`/`focus`, esconde em `mouseleave`/`blur`/`Escape` —
-funciona por mouse e por teclado igualmente (ao contrário do `title`
-nativo, que só mostra no hover).
-
-## API JS
-
-Auto-init via `data-fs="tooltip"` **ou** instanciação manual
-(`new FokusStyles.Tooltip(el, { title, placement })` — útil quando o texto vem
-de outro lugar, não de um atributo estático; é assim que
-[Breadcrumb](breadcrumb.md) anexa tooltips a labels truncados).
-`Tooltip.getInstance(el)`.
-
-| Método | Descrição |
-|---|---|
-| `show()` | Mostra o tooltip, posicionado relativo à referência. |
-| `hide()` | Esconde. |
-| `toggle()` | Alterna. |
-| `dispose()` | Remove listeners, `aria-describedby` e o elemento do tooltip do DOM; desregistra a instância. |
-
-| Evento (no elemento de referência) | Cancelável | Quando |
-|---|---|---|
-| `fs:tooltip:shown` | Não | Depois de mostrar. |
-| `fs:tooltip:hidden` | Não | Depois de esconder. |
-
-## Tokens
-
-`--fs-tooltip-bg`, `--fs-tooltip-text`, `--fs-radius-sm`.
-
-O componente também expõe tokens locais como `--fs-tooltip-max-width`,
-`--fs-tooltip-padding-block`, `--fs-tooltip-padding-inline`,
-`--fs-tooltip-radius`, `--fs-tooltip-shadow` e `--fs-tooltip-arrow-size`.
-Eles podem ser sobrescritos por instância sem alterar tokens globais.
-
-## Exemplo
-
-```html
-<button type="button" class="fs-btn-close" data-fs="tooltip" title="Fechar" aria-label="Fechar"></button>
-```
-
-O Tooltip não deve conter links ou botões e não substitui label, texto de erro
-ou instrução essencial; nesses casos use conteúdo visível ou Popover.
-
-Quando o gatilho já possui `aria-describedby`, o Tooltip acrescenta somente o
-próprio ID e restaura a lista original ao executar `dispose()`.
-
-Mockup: [laboratório independente do componente](../../mockup/examples/tooltip.html).

package/docs/components/tree-view.md

@@ -1,118 +0,0 @@
-# Tree View
-
-Lista hierárquica navegável (arquivos, categorias, organogramas), seguindo
-o padrão [WAI-ARIA Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
-Marcação nativa `<ul>`/`<li>` aninhada — o JS só adiciona os papéis ARIA,
-o botão de expandir/colapsar e a navegação por teclado.
-
-## Visão geral
-
-```html
-<ul class="fs-tree" data-fs="tree-view">
-  <li>
-    <span class="fs-tree-label">src</span>
-    <ul>
-      <li><span class="fs-tree-label">index.js</span></li>
-      <li>
-        <span class="fs-tree-label">components</span>
-        <ul>
-          <li><span class="fs-tree-label">Button.js</span></li>
-        </ul>
-      </li>
-    </ul>
-  </li>
-  <li><span class="fs-tree-label">README.md</span></li>
-</ul>
-```
-
-Cada `<li>` precisa de um `<span class="fs-tree-label">` como filho direto
-(o texto do nó) — nós com filhos somam um `<ul>`/`<ol>` aninhado logo
-depois do label. O JS injeta automaticamente o `.fs-tree-toggle` (a seta)
-dentro do label de cada nó que tiver filhos; nós-folha não recebem seta.
-
-## Anatomia
-
-`ul.fs-tree[role="tree"]` > `li[role="treeitem"]` (recursivo) >
-`span.fs-tree-label` (com `.fs-tree-toggle` auto-injetado se houver
-filhos) + opcionalmente `ul[role="group"]` (o próximo nível).
-
-## Variações
-
-- `data-value` num `<li>` define o valor "de verdade" reportado em
-  `fs:tree:selected` (`event.detail.value`); sem ele, o valor é o texto
-  visível do nó.
-- `aria-expanded="true"` pré-existente num `<li>` com filhos abre esse
-  ramo já expandido na renderização inicial (por padrão, todo ramo nasce
-  colapsado).
-
-## Estados
-
-- Colapsado (padrão) / expandido (`aria-expanded="true"` no `<li>`,
-  `hidden` removido do `<ul>` filho) — alternado por clique na
-  label/seta ou por teclado.
-- Selecionado: `aria-selected="true"` (só no nó mais recente; os demais
-  voltam a `"false"`) — clicar num nó com filhos expande/colapsa **e**
-  seleciona ao mesmo tempo (como um explorador de arquivos).
-
-## A11y
-
-`role="tree"` na raiz, `role="treeitem"` em cada `<li>`, `role="group"` no
-`<ul>`/`<ol>` aninhado, `aria-expanded` nos nós com filhos. Roving
-`tabindex`: só o nó tabulável atual tem `tabindex="0"`; os demais (visíveis)
-ficam em `"-1"` — nós dentro de um ramo colapsado não são alcançáveis por
-Tab. `aria-selected` reflete a seleção atual.
-
-Teclado (com foco num nó da árvore):
-- `ArrowDown`/`ArrowUp`: move o foco pro próximo/anterior nó **visível**
-  (não desce em ramos colapsados).
-- `ArrowRight`: nó fechado → expande (foco não se move); nó já aberto →
-  move o foco pro primeiro filho; folha → sem efeito.
-- `ArrowLeft`: nó aberto → colapsa; nó fechado ou folha → move o foco pro
-  nó pai.
-- `Home`/`End`: primeiro/último nó visível da árvore inteira.
-- `Enter`/`Espaço`: alterna expansão (se houver filhos) e seleciona o nó.
-
-## API JS
-
-Auto-init via `data-fs="tree-view"` na raiz (`<ul>`/`<ol>`).
-`TreeView.getInstance(rootEl)`.
-
-| Método | Descrição |
-|---|---|
-| `expand(item)` | Expande o `<li>` informado (sem efeito se já expandido ou sem filhos). |
-| `collapse(item)` | Colapsa o `<li>` informado. |
-| `toggle(item)` | Alterna expandido/colapsado. |
-| `select(item)` | Marca `aria-selected="true"` no `<li>` informado (e `"false"` nos demais), dispara `fs:tree:selected`. |
-| `dispose()` | Remove listeners e desregistra a instância. |
-
-| Evento (na raiz) | Cancelável | Quando |
-|---|---|---|
-| `fs:tree:expanded` | Não | Após expandir um nó, com `event.detail.item`. |
-| `fs:tree:collapsed` | Não | Após colapsar um nó, com `event.detail.item`. |
-| `fs:tree:selected` | Não | Após selecionar um nó, com `event.detail.value`/`event.detail.item`. |
-
-## Tokens
-
-`--fs-color-text`, `--fs-color-subtle` (hover da label),
-`--fs-color-primary` (nó selecionado, com `color-contrast()` pro texto),
-`--fs-radius-sm`.
-
-## Exemplo
-
-```html
-<ul class="fs-tree" data-fs="tree-view" aria-label="Arquivos do projeto">
-  <li>
-    <span class="fs-tree-label">src</span>
-    <ul>
-      <li><span class="fs-tree-label">index.js</span></li>
-    </ul>
-  </li>
-</ul>
-<script>
-  document.querySelector(".fs-tree").addEventListener("fs:tree:selected", (e) => {
-    console.log("selecionado:", e.detail.value);
-  });
-</script>
-```
-
-Mockup: [laboratório do componente](../../mockup/navigation-disclosure.html#tree-view).