fokus-styles 2.4.0 → 2.6.0

package/docs/components/button.md

@@ -1,98 +0,0 @@
-# Button
-
-Botão de ação, base visual (cor de contraste automática, tamanhos) para
-badges, alertas, tags e tabelas.
-
-## Visão geral
-
-```html
-<button type="button" class="fs-btn">Padrão</button>
-<button type="button" class="fs-btn fs-btn-primary">Primary</button>
-<button type="button" class="fs-btn fs-btn-outline-primary">Outline</button>
-```
-
-Funciona em `<button>`, `<a>` ou qualquer elemento — a classe é puramente
-visual, sem exigir uma tag específica.
-
-## Anatomia
-
-Um único elemento (`.fs-btn`); nenhuma marcação interna obrigatória. O
-botão de fechar (`.fs-btn-close`, usado por Card/Modal/Toast/Tag) é uma
-variante separada, sem texto, desenhada só com `::before`/`::after`:
-
-```html
-<button type="button" class="fs-btn-close" aria-label="Fechar"></button>
-```
-
-## Variações
-
-- **Cor sólida**: `.fs-btn-primary`, `-secondary`, `-success`, `-warning`,
-  `-danger`, `-info` — fundo colorido, texto com contraste calculado
-  automaticamente (`color-contrast()`, garante AA).
-- **Cor outline**: `.fs-btn-outline-{cor}` — borda e texto coloridos, fundo
-  transparente; hover/active preenchem com a cor sólida.
-- **Tamanho**: `.fs-btn-sm` (30px), `.fs-btn-lg` (46px); sem sufixo = 38px
-  (padrão).
-
-```html
-<button type="button" class="fs-btn fs-btn-danger fs-btn-sm">Excluir</button>
-<button type="button" class="fs-btn fs-btn-outline-success fs-btn-lg">Aprovar</button>
-```
-
-## Estados
-
-- **Hover/active**: `filter: brightness()` (escurece), sem redeclarar cor.
-- **Foco**: anel via `:focus` (mixin `focus-ring`).
-- **Desabilitado**: atributo `disabled` (em `<button>`) ou classe
-  `.is-disabled` (funciona em qualquer elemento, inclusive `<a>`, que não
-  aceita `disabled` nativamente).
-
-```html
-<button type="button" class="fs-btn fs-btn-primary" disabled>Desabilitado</button>
-<a href="#" class="fs-btn is-disabled">Link desabilitado</a>
-```
-
-## A11y
-
-- `<button>` é a tag recomendada para ações (não navegação); use `<a
-  href="...">` só quando o clique navega para outra URL.
-- Botões só-ícone (sem texto visível) precisam de `aria-label` — o
-  framework não injeta um automaticamente.
-- Foco visível por padrão; não remova o anel sem substituir por outro
-  indicador com contraste equivalente.
-
-## API JS
-
-Nenhuma — 100% CSS.
-
-## Tokens
-
-Componente (`--fs-btn-*`, com fallback pro semântico correspondente —
-sobrescrevível por instância sem `!important`):
-
-| Token | Fallback |
-|---|---|
-| `--fs-btn-bg` | `--fs-color-bg-subtle` |
-| `--fs-btn-color` | `--fs-color-text-primary` |
-| `--fs-btn-border-color` | `--fs-color-border-default` |
-
-As variantes de cor (`.fs-btn-primary` etc.) sobrescrevem esses três tokens
-diretamente, não `background-color`/`color`/`border-color` — ver
-[`docs/reference/scss-architecture.md`](../reference/scss-architecture.md#tokens)
-para o padrão. Raio: `--fs-radius-sm`.
-
-## Exemplo
-
-```html
-<button type="button" class="fs-btn">Padrão</button>
-<button type="button" class="fs-btn fs-btn-primary">Primary</button>
-<button type="button" class="fs-btn fs-btn-outline-danger fs-btn-sm">Cancelar</button>
-<button type="button" class="fs-btn fs-btn-success fs-btn-lg">Confirmar</button>
-
-<style>
-  .meu-botao { --fs-btn-bg: #6d28d9; --fs-btn-color: #fff; --fs-btn-border-color: #6d28d9; }
-</style>
-<button type="button" class="fs-btn meu-botao">Cor custom por instância</button>
-```
-
-Mockup: [laboratório do componente](../../mockup/feedback-actions.html#button).

package/docs/components/card.md

@@ -1,111 +0,0 @@
-# Card
-
-Contêiner de conteúdo genérico — a peça que mais combina outros
-componentes (botões, badges, tipografia) dentro de si.
-
-## Visão geral
-
-```html
-<div class="fs-card">
-  <div class="fs-card-header">
-    <h3 class="fs-card-title">Título do card</h3>
-    <button type="button" class="fs-btn-close" aria-label="Fechar"></button>
-  </div>
-  <div class="fs-card-body">
-    <p class="fs-card-text">Corpo de texto do card.</p>
-    <button type="button" class="fs-btn fs-btn-primary">Ação</button>
-  </div>
-  <div class="fs-card-footer">
-    <span class="fs-badge fs-badge-success">Ativo</span>
-  </div>
-</div>
-```
-
-## Anatomia
-
-`.fs-card` > até três seções empilhadas, todas opcionais: `.fs-card-header`
-(fundo sutil, borda inferior — quando tem `.fs-card-title` + botão, o
-layout já vem com `justify-content: space-between`), `.fs-card-body`,
-`.fs-card-footer` (fundo sutil, borda superior).
-
-Dentro de `.fs-card-body`: `.fs-card-title` (destaque), `.fs-card-subtitle`
-(secundário, cor muted), `.fs-card-text` (parágrafo de corpo — o último de
-um card não tem margem inferior).
-
-## Variações
-
-- **Horizontal**: `.fs-card-horizontal` — eixo principal de coluna pra
-  linha ("imagem à esquerda, texto à direita"); raios de header/footer se
-  ajustam pra lateral em vez de topo/base.
-- **Tamanho**: `.fs-card-sm` (5px de padding interno), `.fs-card-lg`
-  (15px); sem sufixo = 10px (padrão) — não muda a largura do card, só a
-  densidade.
-- **Clicável**: `.fs-card-clickable` + `.fs-stretched-link` — ver abaixo.
-
-```html
-<div class="fs-card fs-card-horizontal">
-  <div class="fs-card-header">Lateral</div>
-  <div class="fs-card-body">Conteúdo ao lado.</div>
-</div>
-```
-
-### `.fs-card-clickable`
-
-Torna o card inteiro clicável/focável sem aninhar um `<a>` ao redor de todo
-o conteúdo (o que quebraria a semântica havendo outros elementos
-interativos dentro). Coloque `.fs-stretched-link` no link que deve capturar
-o clique — ele se expande via `::after` pra cobrir o card inteiro:
-
-```html
-<div class="fs-card fs-card-clickable">
-  <div class="fs-card-body">
-    <h4 class="fs-card-title">
-      <a href="/detalhes" class="fs-stretched-link">Ver detalhes</a>
-    </h4>
-    <p class="fs-card-text">O card inteiro é clicável, não só o link.</p>
-  </div>
-</div>
-```
-
-## Estados
-
-`.fs-card-clickable:hover`/`:focus-within` — borda muda pra cor primária +
-sombra (`:focus-within` em vez de `:focus` pra destacar tanto no hover
-quanto ao navegar por teclado até o link interno).
-
-## A11y
-
-- `.fs-stretched-link` deve estar num elemento nativamente focável (`<a
-  href="...">`), nunca num `<div>` — é o link real que recebe o foco/clique
-  do teclado, o `::after` só expande a área clicável do mouse.
-- Se o card tiver múltiplos links/botões, só o `.fs-stretched-link`
-  expande; os demais continuam clicáveis normalmente por cima dele
-  (`z-index` do `::after` é `1`, mas elementos com `position: relative` e
-  `z-index` maior no conteúdo ficam acima).
-
-## API JS
-
-Nenhuma — 100% CSS.
-
-## Tokens
-
-`--fs-color-border`, `--fs-color-surface`, `--fs-color-subtle`
-(header/footer), `--fs-radius-lg`, `--fs-shadow-sm` (hover clicável),
-`--fs-color-primary` (borda hover clicável).
-
-## Exemplo
-
-```html
-<div class="fs-card fs-card-clickable" style="max-width: 320px;">
-  <div class="fs-card-body">
-    <h4 class="fs-card-title"><a href="#" class="fs-stretched-link">Relatório Q3</a></h4>
-    <p class="fs-card-subtitle">Atualizado há 2 dias</p>
-    <p class="fs-card-text">Resumo financeiro do terceiro trimestre.</p>
-  </div>
-  <div class="fs-card-footer">
-    <span class="fs-badge fs-badge-success">Publicado</span>
-  </div>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/content-data.html#card).

package/docs/components/carousel.md

@@ -1,167 +0,0 @@
-# Carousel
-
-Carrossel de painéis ou mídias relacionadas, com navegação por setas,
-indicadores, teclado, arraste e autoplay opcional. Use-o para conteúdo
-complementar; informação essencial deve continuar disponível fora dos slides.
-
-## Visão geral
-
-```html
-<div class="fs-carousel" data-fs="carousel" aria-label="Destaques de produto">
-  <div class="fs-carousel-inner">
-    <div class="fs-carousel-item is-active">
-      <img src="slide1.jpg" alt="Equipe colaborando em um painel">
-      <div class="fs-carousel-caption">
-        <h2>Fluxos mais claros</h2>
-        <p>Centralize tarefas recorrentes em uma experiência previsível.</p>
-      </div>
-    </div>
-    <div class="fs-carousel-item"><img src="slide2.jpg" alt="Resumo de resultados"></div>
-  </div>
-  <button type="button" class="fs-carousel-control-prev" aria-label="Slide anterior"></button>
-  <button type="button" class="fs-carousel-control-next" aria-label="Próximo slide"></button>
-</div>
-```
-
-## Anatomia
-
-`.fs-carousel` (`data-fs="carousel"`, rótulo acessível e recorte) >
-`.fs-carousel-inner` (trilha flex deslocada por `translate3d`) >
-`.fs-carousel-item` (um por slide; exatamente um inicia com `.is-active`).
-
-Use `.fs-carousel-media` com `background-image` para uma fotografia de fundo;
-como a imagem é decorativa nesse padrão, deixe-a com `aria-hidden="true"` e
-forneça o contexto na legenda. Para imagem semântica, prefira `<img alt>`.
-
-Filhos opcionais do contêiner são `.fs-carousel-control-prev`,
-`.fs-carousel-control-next`, `.fs-carousel-control-toggle`,
-`.fs-carousel-indicators` (lista de botões) e `.fs-carousel-caption` dentro
-de cada item. A legenda recebe um gradiente de leitura, título, texto e CTA
-opcional.
-
-## Variações
-
-- **Fade**: `.fs-carousel-fade` troca os slides por opacidade.
-- **Controles no hover**: `.fs-carousel-hover-controls` revela setas e toggle
-  ao passar o mouse ou ao focar um controle.
-- **Legenda lateral**: `.fs-carousel-caption-side` posiciona a legenda à
-  direita em telas largas e volta ao overlay padrão em telas pequenas. Adicione
-  `.fs-carousel-caption-start` à legenda de um slide para alinhá-la à esquerda
-  quando isso preservar melhor o assunto da imagem. Em telas pequenas, a
-  legenda ocupa a largura disponível, mas mantém o alinhamento visual: à
-  direita por padrão e à esquerda com `.fs-carousel-caption-start`.
-- **Legenda empilhada**: `.fs-carousel-caption-stacked` posiciona a legenda e
-  os indicadores abaixo da mídia, sem qualquer sobreposição.
-- **Sem mídia**: `.fs-carousel-no-media` cria painéis de superfície para
-  conteúdo informativo ou interativo.
-- **Autoplay controlável**: use `data-autoplay="true"` e inclua o botão
-  `[data-fs-carousel-toggle]` para oferecer pausa e reprodução explícitas.
-
-```html
-<div class="fs-carousel fs-carousel-fade fs-carousel-hover-controls"
-     data-fs="carousel" data-autoplay="true" data-interval="4000"
-     aria-label="Atualizações automáticas">
-  <!-- .fs-carousel-inner e itens -->
-  <button type="button" class="fs-carousel-control-toggle" data-fs-carousel-toggle></button>
-</div>
-```
-
-## Estados
-
-`.fs-carousel-item.is-active` e `.fs-carousel-indicators button.is-active`
-são sincronizados pelo JavaScript. O botão de reprodução recebe
-`aria-pressed="true"` enquanto o autoplay está habilitado e troca seu nome
-acessível entre pausar e reproduzir.
-
-`data-autoplay="true"` avança a cada `data-interval` ms (padrão `5000`). O
-timer pausa temporariamente no hover, foco, arraste e quando a aba fica
-oculta. `pause()` ou o toggle impedem sua retomada até `play()` ser chamado.
-
-Com zero ou um slide, o componente recebe `.is-static`; controles e
-indicadores são ocultados e não é criado um tab stop de navegação.
-
-As áreas superior e inferior ficam reservadas pelos tokens
-`--fs-carousel-top-safe-area` e `--fs-carousel-bottom-safe-area`: legendas
-padrão nunca ocupam a barra de controles nem os indicadores. Para um
-carrossel de dois slides, `.fs-carousel-hide-indicators-two` oculta os dots.
-`[data-fs-carousel-counter]` recebe automaticamente o texto `1 de 3`, e
-`[data-fs-carousel-progress]` anima o progresso do autoplay. Use
-`data-drag="false"` quando o conteúdo do slide for altamente interativo.
-
-Na variação `.fs-carousel-caption-side`, a mesma reserva é aplicada no modo
-compacto: a legenda não invade a barra superior ou os indicadores, o excesso
-de conteúdo é recortado sem criar barra de rolagem e o gradiente de leitura
-ocupa toda a área da mídia.
-
-## A11y
-
-O contêiner recebe `role="group"` e `aria-roledescription="carousel"`; forneça
-sempre um `aria-label` que descreva seu conteúdo. Slides inativos recebem
-`aria-hidden`; indicadores recebem `aria-current`; e a trilha é `aria-live`
-`off` durante autoplay ativo e `polite` quando manual ou pausado.
-
-Com foco no próprio carrossel, `ArrowLeft`/`ArrowRight` trocam o slide e
-`Home`/`End` vão ao primeiro/último. Os botões mantêm foco nativo e não têm
-suas teclas capturadas pelo contêiner. O arraste por mouse, toque ou caneta
-segue o movimento horizontal, preserva rolagem vertical e ignora gestos que
-começam em controles ou conteúdo interativo. Transições respeitam
-`prefers-reduced-motion: reduce`.
-
-## API JS
-
-Auto-init via `data-fs="carousel"`. `Carousel.getInstance(el)` recupera a
-instância criada.
-
-| Método | Descrição |
-|---|---|
-| `next()` / `prev()` | Avança/volta um slide, circularmente. |
-| `goTo(index)` | Vai diretamente ao índice informado. |
-| `pause()` | Pausa o autoplay configurado até uma chamada a `play()`. |
-| `play()` | Retoma o autoplay configurado, se o carrossel for navegável e a página estiver visível. |
-| `dispose()` | Para o timer, remove listeners e desregistra a instância. |
-
-| Evento | Cancelável | Quando |
-|---|---|---|
-| `fs:carousel:slid` | Não | Após trocar de slide; `detail` contém `{ from, to }`. |
-
-## Tokens
-
-O componente expõe tokens locais com fallback para tokens globais:
-`--fs-carousel-radius`, `--fs-carousel-transition-duration`,
-`--fs-carousel-transition-easing`, `--fs-carousel-control-size`,
-`--fs-carousel-control-inset`, `--fs-carousel-control-color`,
-`--fs-carousel-control-bg`, `--fs-carousel-control-bg-hover`,
-`--fs-carousel-focus-color`, `--fs-carousel-indicator-size`,
-`--fs-carousel-indicator-active-width`, `--fs-carousel-indicator-color`,
-`--fs-carousel-indicator-active-color`, `--fs-carousel-caption-scrim`,
-`--fs-carousel-top-safe-area`, `--fs-carousel-bottom-safe-area` e
-`--fs-carousel-progress-height`.
-
-## Exemplo
-
-```html
-<div class="fs-carousel" data-fs="carousel" data-autoplay="true"
-     aria-label="Destaques do produto">
-  <div class="fs-carousel-inner">
-    <div class="fs-carousel-item is-active"><img src="a.jpg" alt="Produto em uso"></div>
-    <div class="fs-carousel-item"><img src="b.jpg" alt="Equipe em reunião"></div>
-    <div class="fs-carousel-item"><img src="c.jpg" alt="Painel de resultados"></div>
-  </div>
-  <button type="button" class="fs-carousel-control-prev" aria-label="Slide anterior"></button>
-  <button type="button" class="fs-carousel-control-next" aria-label="Próximo slide"></button>
-  <button type="button" class="fs-carousel-control-toggle" data-fs-carousel-toggle></button>
-  <ul class="fs-carousel-indicators">
-    <li><button type="button" class="is-active" aria-label="Ir para o slide 1"></button></li>
-    <li><button type="button" aria-label="Ir para o slide 2"></button></li>
-    <li><button type="button" aria-label="Ir para o slide 3"></button></li>
-  </ul>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/content-data.html#carousel).
-
-## Limitações
-
-O Carousel mostra um item por vez e não inclui thumbnails, vídeo, zoom,
-lightbox ou múltiplos slides visíveis. Prefira compor recursos existentes para
-esses casos antes de propor uma expansão deste componente avançado.

package/docs/components/checkbox.md

@@ -1,97 +0,0 @@
-# Checkbox
-
-Checkbox 100% CSS, desenhado sobre um `<input type="checkbox">` nativo —
-teclado, foco e semântica são os do navegador; o framework só estiliza.
-
-## Visão geral
-
-```html
-<div class="fs-check">
-  <input type="checkbox" class="fs-check-input" id="aceite">
-  <label for="aceite" class="fs-check-label">Aceito os termos</label>
-</div>
-```
-
-## Anatomia
-
-`.fs-check` (wrapper) > `.fs-check-input` (`<input>`, visualmente oculto
-via clip — continua focável/anunciado por leitor de tela) + `.fs-check-label`
-(`<label for="...">`, desenha a caixa via `::before` e a marca via
-`::after`). Input e label são **irmãos**, não aninhados — a associação é só
-por `for`/`id` (mesma técnica de [Segmented Control](segmented-control.md)
-e [Rating](rating.md)).
-
-O `for`/`id` é obrigatório: sem ele, clicar no texto não alterna o
-checkbox, e leitores de tela não anunciam o rótulo.
-
-## Variações
-
-Tamanho: `.fs-check-sm`, `.fs-check-lg` no wrapper (sem sufixo = padrão).
-O checkbox é quadrado (`border-radius: 0`): desmarcado tem borda `primary`,
-marcado usa preenchimento `primary` e check branco.
-No hover desmarcado, o fundo recebe um tom sutil de `primary`; em `:active`,
-o preenchimento fica mais intenso para confirmar o clique.
-
-```html
-<div class="fs-check fs-check-sm">...</div>
-<div class="fs-check fs-check-lg">...</div>
-```
-
-## Estados
-
-- **checked**: atributo `checked` no `<input>`.
-- **indeterminate**: só via JavaScript (`input.indeterminate = true` — não
-  existe atributo HTML equivalente; o framework estiliza `:indeterminate`,
-  com borda tracejada `primary` e traço horizontal).
-- **disabled**: atributo `disabled` no `<input>`.
-- **Validação**: use `.is-invalid` no `<input>` quando houver erro. O
-  inválido usa preenchimento `danger` com um X branco, inclusive quando não
-  está marcado; não há estado visual separado para “válido”.
-- **Disabled**: desmarcado usa trilho e borda neutros; marcado mantém uma
-  versão atenuada de `primary`, em vez de reduzir a opacidade do controle todo.
-- **Foco**: `:focus-visible` no input desenha o anel sobre a caixa
-  (`::before` da label), não sobre o texto.
-
-```html
-<input type="checkbox" class="fs-check-input is-invalid" id="c1">
-<label for="c1" class="fs-check-label">Campo obrigatório</label>
-```
-
-```js
-document.getElementById("c2").indeterminate = true;
-```
-
-## A11y
-
-- `<input type="checkbox">` nativo — `Space` alterna, `Tab` foca, leitor de
-  tela anuncia estado (marcado/desmarcado/indeterminado) automaticamente.
-  Nenhum ARIA extra é necessário.
-- Sempre associe `label` via `for`/`id` — não use só `aria-label` no input
-  se houver texto visível ao lado (duplica a leitura ou some com o clique
-  no texto).
-
-## API JS
-
-Nenhuma — 100% CSS. `indeterminate` é uma propriedade do DOM nativo do
-`<input>`, não uma API do FokusStyles.
-
-## Tokens
-
-Sem tokens de componente próprios — usa `--fs-color-primary` (caixa
-marcada), `--fs-color-border`/`--fs-color-surface` (caixa vazia),
-`--fs-color-success`/`--fs-color-danger` (validação), `--fs-radius-sm`.
-
-## Exemplo
-
-```html
-<div class="fs-check">
-  <input type="checkbox" class="fs-check-input" id="c1" checked>
-  <label for="c1" class="fs-check-label">Marcado</label>
-</div>
-<div class="fs-check">
-  <input type="checkbox" class="fs-check-input" id="c2" disabled>
-  <label for="c2" class="fs-check-label">Desabilitado</label>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/forms.html#check-radio-switch).

package/docs/components/close-button.md

@@ -1,13 +0,0 @@
-# Close button
-
-## Visão geral
-
-`.fs-close` fornece um controle compacto para fechar painéis, diálogos e toasts.
-
-## Estados
-
-O estado hover e o focus-visible são fornecidos pelo componente.
-
-## A11y
-
-Sempre informe `aria-label="Fechar"` e associe o controle ao conteúdo que ele fecha.

package/docs/components/code.md

@@ -1,13 +0,0 @@
-# Code
-
-## Visão geral
-
-`.fs-code` estiliza código inline e `.fs-pre` apresenta blocos pré-formatados.
-
-## Estados
-
-O bloco mantém rolagem horizontal para preservar linhas longas.
-
-## A11y
-
-Use `code` para trechos curtos e `pre` para blocos; não transmita informação somente por cor.

package/docs/components/collapse.md

@@ -1,78 +0,0 @@
-# Collapse
-
-Expande/recolhe um painel com transição de altura animada — primitivo
-usado internamente por [Accordion](accordion.md); use direto quando quiser
-só um "mostrar mais" sem a semântica de grupo do Accordion.
-
-## Visão geral
-
-```html
-<button type="button" class="fs-btn" data-fs="collapse" data-fs-target="#detalhes">
-  Ver detalhes
-</button>
-<div class="fs-collapse" id="detalhes">
-  Conteúdo que expande/recolhe.
-</div>
-```
-
-## Anatomia
-
-Gatilho (`data-fs="collapse"` + `data-fs-target`) + `.fs-collapse`
-(precisa de `overflow: hidden`, já incluso na classe — não remova via CSS
-próprio, quebra a animação de altura).
-
-## Variações
-
-Nenhuma — sem tamanho/cor; é um comportamento, não um estilo visual
-próprio (o conteúdo interno usa suas próprias classes).
-
-## Estados
-
-Estado inicial definido por `aria-expanded` no gatilho: `"true"` começa
-aberto, ausente ou `"false"` começa fechado.
-
-```html
-<button type="button" class="fs-btn" data-fs="collapse" data-fs-target="#painel" aria-expanded="true">
-  Recolher
-</button>
-```
-
-## A11y
-
-`aria-controls`/`aria-expanded` no gatilho são sincronizados
-automaticamente pelo JS a cada `show()`/`hide()`.
-[`prefers-reduced-motion: reduce`](../guides/accessibility.md#prefers-reduced-motion)
-pula a animação e aplica o estado final direto.
-
-## API JS
-
-Auto-init via `data-fs="collapse"` **no gatilho**. `Collapse.getInstance(triggerEl)`.
-
-| Método | Descrição |
-|---|---|
-| `show()` | Expande com animação de altura. |
-| `hide()` | Recolhe com animação de altura. |
-| `toggle()` | Alterna (é o que o clique no gatilho já faz). |
-| `dispose()` | Remove o listener de clique e desregistra a instância. |
-
-| Evento (no gatilho) | Cancelável | Quando |
-|---|---|---|
-| `fs:collapse:shown` | Não | Depois que a animação de expandir termina. |
-| `fs:collapse:hidden` | Não | Depois que a animação de recolher termina. |
-
-## Tokens
-
-Nenhum próprio — o conteúdo interno usa suas próprias cores/espaçamento.
-
-## Exemplo
-
-```html
-<button type="button" class="fs-btn fs-btn-outline-secondary" data-fs="collapse" data-fs-target="#mais-info">
-  Mais informações
-</button>
-<div class="fs-collapse" id="mais-info">
-  <p class="fs-u-mt-2">Texto adicional que só aparece quando expandido.</p>
-</div>
-```
-
-Mockup: [laboratório do componente](../../mockup/navigation-disclosure.html#collapse).