fokus-styles 2.4.0 → 2.6.0

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,75 +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 `left` + `transition`).
-
-## Variações
-
-Tamanho: `.fs-switch-sm`, `.fs-switch-lg` no wrapper.
-
-## Estados
-
-checked/disabled/foco — mesmo padrão do [Checkbox](checkbox.md). Sem
-`indeterminate` nem validação (switch não é um campo de formulário
-validável, é um controle de preferência/estado).
-
-## 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.
-
-```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
-
-Sem tokens de componente próprios — usa `--fs-color-primary` (trilho
-ligado), `--fs-color-border` (knob desligado), `--fs-radius-md` (trilho),
-`--fs-radius-sm` (knob).
-
-## 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/content-data.html#tile).
-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).

package/docs/components/tag.md

@@ -1,129 +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.
-- **Ícone inicial**: envolva um SVG de `fokus-styles/icons` em `.fs-tag-icon` antes
-  de `.fs-tag-label`. O ícone é decorativo (`aria-hidden="true"`) quando o
-  texto já descreve a tag.
-- **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.
-
-```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.
-- 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). Sem tokens de componente próprios.
-
-## 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).