fokus-styles 2.5.0 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (177) hide show
  1. package/package.json +17 -15
  2. package/CHANGELOG.md +0 -940
  3. package/dist/css/components.css.map +0 -1
  4. package/dist/css/components.min.css.map +0 -1
  5. package/dist/css/fokus-components.css.map +0 -1
  6. package/dist/css/fokus-components.min.css.map +0 -1
  7. package/dist/css/fokus-core.css.map +0 -1
  8. package/dist/css/fokus-core.min.css.map +0 -1
  9. package/dist/css/fokus-dark.css.map +0 -1
  10. package/dist/css/fokus-dark.min.css.map +0 -1
  11. package/dist/css/fokus-rtl.css.map +0 -1
  12. package/dist/css/fokus-rtl.min.css.map +0 -1
  13. package/dist/css/fokus-utilities.css.map +0 -1
  14. package/dist/css/fokus-utilities.min.css.map +0 -1
  15. package/dist/css/fokus.css.map +0 -1
  16. package/dist/css/fokus.min.css.map +0 -1
  17. package/dist/css/fonts.css.map +0 -1
  18. package/dist/css/fonts.min.css.map +0 -1
  19. package/dist/css/forms.css.map +0 -1
  20. package/dist/css/forms.min.css.map +0 -1
  21. package/dist/css/helpers.css.map +0 -1
  22. package/dist/css/helpers.min.css.map +0 -1
  23. package/dist/css/layout.css.map +0 -1
  24. package/dist/css/layout.min.css.map +0 -1
  25. package/dist/js/fokus.js.map +0 -7
  26. package/dist/js/fokus.min.js.map +0 -7
  27. package/docs/README.md +0 -86
  28. package/docs/comparison.md +0 -124
  29. package/docs/components/accordion.md +0 -104
  30. package/docs/components/alert-dialog.md +0 -99
  31. package/docs/components/alert.md +0 -104
  32. package/docs/components/avatar.md +0 -13
  33. package/docs/components/badge.md +0 -101
  34. package/docs/components/breadcrumb.md +0 -93
  35. package/docs/components/button-group.md +0 -13
  36. package/docs/components/button.md +0 -98
  37. package/docs/components/card.md +0 -111
  38. package/docs/components/carousel.md +0 -167
  39. package/docs/components/checkbox.md +0 -110
  40. package/docs/components/close-button.md +0 -13
  41. package/docs/components/code.md +0 -13
  42. package/docs/components/collapse.md +0 -78
  43. package/docs/components/combobox.md +0 -123
  44. package/docs/components/command-palette.md +0 -131
  45. package/docs/components/datatable.md +0 -173
  46. package/docs/components/datepicker.md +0 -137
  47. package/docs/components/divider.md +0 -57
  48. package/docs/components/dropdown.md +0 -103
  49. package/docs/components/empty-state.md +0 -65
  50. package/docs/components/file-upload-advanced.md +0 -116
  51. package/docs/components/file-upload.md +0 -93
  52. package/docs/components/icon-link.md +0 -13
  53. package/docs/components/input-group.md +0 -73
  54. package/docs/components/input.md +0 -90
  55. package/docs/components/list-group.md +0 -13
  56. package/docs/components/modal.md +0 -120
  57. package/docs/components/navbar.md +0 -74
  58. package/docs/components/nested-menu.md +0 -90
  59. package/docs/components/notification-center.md +0 -116
  60. package/docs/components/offcanvas.md +0 -102
  61. package/docs/components/pagination.md +0 -145
  62. package/docs/components/placeholder.md +0 -13
  63. package/docs/components/popover.md +0 -118
  64. package/docs/components/progress.md +0 -126
  65. package/docs/components/radio.md +0 -80
  66. package/docs/components/range.md +0 -83
  67. package/docs/components/rating.md +0 -91
  68. package/docs/components/ratio.md +0 -13
  69. package/docs/components/responsive.md +0 -19
  70. package/docs/components/scrollspy.md +0 -13
  71. package/docs/components/segmented-control.md +0 -82
  72. package/docs/components/select.md +0 -89
  73. package/docs/components/skeleton.md +0 -70
  74. package/docs/components/stepper.md +0 -107
  75. package/docs/components/switch.md +0 -97
  76. package/docs/components/table.md +0 -90
  77. package/docs/components/tabs.md +0 -104
  78. package/docs/components/tag.md +0 -144
  79. package/docs/components/tile.md +0 -112
  80. package/docs/components/timeline.md +0 -78
  81. package/docs/components/toast.md +0 -108
  82. package/docs/components/tooltip.md +0 -113
  83. package/docs/components/tree-view.md +0 -118
  84. package/docs/contributing/contributing.md +0 -18
  85. package/docs/getting-started/installation.md +0 -70
  86. package/docs/getting-started/usage.md +0 -105
  87. package/docs/guides/accessibility.md +0 -109
  88. package/docs/guides/charts.md +0 -73
  89. package/docs/guides/dark-mode.md +0 -90
  90. package/docs/guides/icons.md +0 -99
  91. package/docs/guides/javascript-api.md +0 -9
  92. package/docs/guides/layout-advanced.md +0 -118
  93. package/docs/guides/migration-clarus-to-fokus.md +0 -48
  94. package/docs/guides/migration-external.md +0 -123
  95. package/docs/guides/migration-v1.md +0 -63
  96. package/docs/guides/print.md +0 -30
  97. package/docs/guides/rtl-and-system-preferences.md +0 -28
  98. package/docs/guides/theming.md +0 -140
  99. package/docs/guides/utility-api.md +0 -9
  100. package/docs/prompts/prompt-plan.md +0 -45
  101. package/docs/reference/accessibility-matrix.md +0 -77
  102. package/docs/reference/browser-support.md +0 -75
  103. package/docs/reference/contrast-report.md +0 -54
  104. package/docs/reference/definitions.md +0 -868
  105. package/docs/reference/design-tokens.md +0 -208
  106. package/docs/reference/scss-architecture.md +0 -227
  107. package/docs/reference/size-baseline.json +0 -34
  108. package/docs/reference/stability.md +0 -89
  109. package/docs/showcase.md +0 -25
  110. package/mockup/README.md +0 -41
  111. package/mockup/assets/carousel-planning.png +0 -0
  112. package/mockup/assets/carousel-workspace.png +0 -0
  113. package/mockup/assets/example-theme.css +0 -19
  114. package/mockup/assets/example-theme.js +0 -11
  115. package/mockup/assets/showcase-contracts.js +0 -84
  116. package/mockup/assets/showcase.css +0 -91
  117. package/mockup/assets/showcase.js +0 -724
  118. package/mockup/content-data.html +0 -9
  119. package/mockup/examples/accordion-tabs-toast.html +0 -149
  120. package/mockup/examples/alert-dialog.html +0 -84
  121. package/mockup/examples/alerts.html +0 -115
  122. package/mockup/examples/badges-alerts.html +0 -109
  123. package/mockup/examples/buttons.html +0 -58
  124. package/mockup/examples/cards.html +0 -132
  125. package/mockup/examples/carousel.html +0 -126
  126. package/mockup/examples/charts.html +0 -102
  127. package/mockup/examples/check-radio-switch.html +0 -620
  128. package/mockup/examples/collapse.html +0 -69
  129. package/mockup/examples/combobox.html +0 -60
  130. package/mockup/examples/command-palette.html +0 -64
  131. package/mockup/examples/datatable.html +0 -113
  132. package/mockup/examples/datepicker.html +0 -62
  133. package/mockup/examples/divider.html +0 -45
  134. package/mockup/examples/dropdown-tooltip.html +0 -77
  135. package/mockup/examples/empty-state.html +0 -56
  136. package/mockup/examples/file-drop.html +0 -74
  137. package/mockup/examples/file-upload-advanced.html +0 -68
  138. package/mockup/examples/forms-advanced.html +0 -77
  139. package/mockup/examples/hover-card.html +0 -86
  140. package/mockup/examples/icons.html +0 -157
  141. package/mockup/examples/input-group.html +0 -74
  142. package/mockup/examples/js-foundation.html +0 -215
  143. package/mockup/examples/layout.html +0 -134
  144. package/mockup/examples/modal-select.html +0 -127
  145. package/mockup/examples/nested-menu.html +0 -73
  146. package/mockup/examples/notification-center.html +0 -86
  147. package/mockup/examples/offcanvas-popover.html +0 -133
  148. package/mockup/examples/pagination-breadcrumbs.html +0 -92
  149. package/mockup/examples/popover.html +0 -81
  150. package/mockup/examples/range.html +0 -69
  151. package/mockup/examples/rating.html +0 -103
  152. package/mockup/examples/segmented-control.html +0 -96
  153. package/mockup/examples/skeletons.html +0 -82
  154. package/mockup/examples/spinner-progress.html +0 -130
  155. package/mockup/examples/stepper.html +0 -119
  156. package/mockup/examples/tables-navbar.html +0 -89
  157. package/mockup/examples/tag.html +0 -115
  158. package/mockup/examples/theming.html +0 -68
  159. package/mockup/examples/tile.html +0 -107
  160. package/mockup/examples/timeline.html +0 -108
  161. package/mockup/examples/toast.html +0 -113
  162. package/mockup/examples/tooltip.html +0 -68
  163. package/mockup/examples/tree-view.html +0 -68
  164. package/mockup/feedback-actions.html +0 -9
  165. package/mockup/forms.html +0 -13
  166. package/mockup/foundations.html +0 -7
  167. package/mockup/kitchen-sink.html +0 -696
  168. package/mockup/navigation-disclosure.html +0 -11
  169. package/mockup/overlays-commands.html +0 -12
  170. package/mockup/templates/README.md +0 -20
  171. package/mockup/templates/admin.html +0 -334
  172. package/mockup/templates/auth.html +0 -234
  173. package/mockup/templates/dashboard.html +0 -442
  174. package/mockup/templates/landing.html +0 -397
  175. package/packages/fokus-icons/package.json +0 -46
  176. package/scripts/migrate-fokus-map.json +0 -1366
  177. package/scripts/migrate-fokus.mjs +0 -97
package/mockup/content-data.html DELETED
@@ -1,9 +0,0 @@
1
- <!doctype html><html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>FokusStyles — Conteúdo e dados</title><link rel="stylesheet" href="../dist/css/fonts.css"><link rel="stylesheet" href="../dist/css/components.css"><link rel="stylesheet" href="../dist/css/forms.css"><link rel="stylesheet" href="../dist/css/helpers.css"><link rel="stylesheet" href="assets/showcase.css"></head><body><main class="showcase-shell"><header class="showcase-hero"><p class="showcase-eyebrow">Fokus Styles · laboratório</p><h1 class="showcase-title">Conteúdo, coleções e dados</h1><p class="showcase-lead">Contêineres de conteúdo, visualizações sequenciais e componentes tabulares para dados densos. Cada exemplo demonstra o componente em contexto realista.</p></header><div class="showcase-toolbar"><button class="fs-btn fs-btn-primary" type="button" data-showcase-theme>Usar tema escuro</button><a class="fs-btn" href="README.md">Índice dos laboratórios</a></div><nav class="showcase-nav" aria-label="Componentes desta página" data-showcase-navigation></nav><div data-showcase-sections></div></main><script id="showcase-catalog" type="application/json">[
2
- {"id":"card","title":"Card","description":"Superfície para apresentar uma unidade de conteúdo completa — por exemplo, um produto, documento, pessoa, resumo de pedido ou resultado de busca — com informação e ações relacionadas.","use":[{"label":"Coleções comparáveis","text":"cards de produto, artigos, planos ou projetos quando cada item precisa de título, metadados e uma ação."},{"label":"Resumo independente","text":"painéis de dashboard, prévias de relatório ou blocos de configuração que continuam compreensíveis fora da grade."},{"label":"Evite para","text":"listas densas e repetitivas: Tile ou Table costumam facilitar a varredura visual."}],"api":[{"label":".fs-card","code":true,"text":"cria a superfície, borda e espaçamento-base."},{"label":".fs-card-header / .fs-card-body / .fs-card-footer","code":true,"text":"seções opcionais para cabeçalho, conteúdo e ações/metadados finais."},{"label":".fs-card-horizontal","code":true,"text":"organiza as seções lado a lado; útil para imagem ou resumo curto."},{"label":".fs-card-clickable + .fs-stretched-link","code":true,"text":"expande um link real para toda a área sem aninhar controles."}],"a11y":[{"label":"Link real","text":"na versão clicável, use um <a href> com .fs-stretched-link; ele recebe foco e acionamento por teclado."},{"label":"Ações concorrentes","text":"se houver botões ou links adicionais, mantenha-os acima da área expandida e com nomes claros."},{"label":"Hierarquia","text":"use um título que explique o destino ou o conteúdo do card mesmo quando lido isoladamente."}],"states":[{"label":"Clicável","text":"hover e focus-within elevam o card e destacam a borda; valide ambos no laboratório."},{"label":"Densidade","text":".fs-card-sm e .fs-card-lg alteram apenas o espaçamento interno."},{"label":"Composição","text":"experimente cabeçalho, rodapé, imagem e ação sem transformar o card inteiro em um botão semântico."}],"source":"examples/cards.html","height":1100},
3
- {"id":"tile","title":"Tile","description":"Linha compacta para uma escolha, arquivo, preferência, pessoa ou métrica curta. Prioriza escaneamento: ícone, duas linhas de texto e uma ação adjacente.","use":[{"label":"Listas operacionais","text":"arquivos recentes, membros, integrações, métodos de pagamento ou preferências em uma tela de configurações."},{"label":"Escolhas rápidas","text":"opções de plano, tema ou destino quando a leitura precisa ser curta e comparável."},{"label":"Evite para","text":"descrições longas ou múltiplas ações principais; um Card oferece espaço e hierarquia melhores."}],"api":[{"label":".fs-tile","code":true,"text":"define a linha compacta com alinhamento entre ícone, conteúdo e ações."},{"label":".fs-tile-icon / .fs-tile-body","code":true,"text":"reservam o ícone e o bloco com título e subtítulo."},{"label":".fs-tile-actions-bottom","code":true,"text":"move ações para uma segunda linha quando não couberem à direita."},{"label":".fs-tile-clickable + .fs-stretched-link","code":true,"text":"faz do link interno o destino de toda a superfície."}],"a11y":[{"label":"Truncamento","text":"título e subtítulo podem usar reticências; mantenha o texto completo no DOM e use title quando a perda visual for crítica."},{"label":"Ícones","text":"ícones puramente decorativos devem usar aria-hidden; se transmitirem estado, inclua texto equivalente."},{"label":"Ação","text":"um tile navegável precisa de link real; switch, checkbox e botões mantêm sua semântica própria."}],"states":[{"label":"Ação e seleção","text":"confira hover, focus-visible, selecionado e disabled nos controles inseridos."},{"label":"Responsividade","text":"use ações abaixo quando a largura não comportar conteúdo e botões na mesma linha."},{"label":"Tamanho","text":".fs-tile-sm e .fs-tile-lg ajustam a densidade para listas mais compactas ou mais confortáveis."}],"source":"examples/tile.html","height":900},
4
- {"id":"carousel","title":"Carousel","description":"Sequência navegável de painéis, conteúdo ou mídias. O laboratório compara um painel editorial, um painel sem mídia, uma transição fade e imagens de fundo com legendas laterais.","use":[{"label":"Destaques complementares","text":"campanhas, recursos do produto, histórias de clientes ou galerias curtas em que cada slide acrescenta contexto."},{"label":"Painéis em espaço limitado","text":"resumos de onboarding ou anúncios relacionados quando o usuário pode navegar no próprio ritmo."},{"label":"Evite para","text":"instruções, preços, avisos ou CTA essenciais: informação prioritária não deve depender da troca de slide."}],"api":[{"label":".fs-carousel + data-fs=\"carousel\"","code":true,"text":"contêiner obrigatório; inicializa trilha, navegação, teclado e arraste. Informe também aria-label=\"…\" para nomeá-lo."},{"label":".fs-carousel-inner","code":true,"text":"trilha obrigatória que envolve todos os slides; o JavaScript move esta camada."},{"label":".fs-carousel-item + .is-active","code":true,"text":"cada slide usa .fs-carousel-item; adicione is-active somente ao slide inicial. O JavaScript atualiza esse estado depois."},{"label":".fs-carousel-control-prev / .fs-carousel-control-next","code":true,"text":"botões opcionais de anterior e próximo. Inseridos como filhos do contêiner, formam a barra superior ao lado do toggle."},{"label":".fs-carousel-control-toggle + data-fs-carousel-toggle","code":true,"text":"botão opcional de pausa/reprodução. Use ambos no mesmo botão; o JavaScript gerencia ícone, aria-label e aria-pressed."},{"label":".fs-carousel-indicators > li > button","code":true,"text":"lista opcional de indicadores; inclua um botão por slide com aria-label=\"Ir para o slide N\". is-active e aria-current são geridos pelo JavaScript."},{"label":"[data-fs-carousel-counter]","code":true,"text":"elemento opcional que recebe automaticamente o texto \"1 de N\". Use aria-hidden=\"true\" se for apenas reforço visual."},{"label":".fs-carousel-progress[data-fs-carousel-progress] > span","code":true,"text":"barra opcional do autoplay; o atributo liga a animação ao intervalo e o span interno é obrigatório."},{"label":".fs-carousel-caption","code":true,"text":"legenda opcional dentro de cada slide, com título, texto e CTA. Respeita automaticamente as áreas seguras dos controles e indicadores."},{"label":".fs-carousel-media / .fs-carousel-media-placeholder","code":true,"text":"media cria área de fundo com background-image; placeholder cria painel de conteúdo sem imagem. Para fundo decorativo, use aria-hidden=\"true\"."},{"label":"data-autoplay=\"true\"","code":true,"text":"único valor que liga o avanço automático. Omita o atributo ou use \"false\" para navegação manual."},{"label":"data-interval=\"5000\"","code":true,"text":"tempo entre slides em milissegundos; use inteiro positivo, sem parênteses. Ausente, não numérico ou 0 usa 5000 ms."},{"label":"data-drag=\"false\"","code":true,"text":"desliga arraste; omita ou use qualquer outro valor para mantê-lo ativo. Indicado para slides muito interativos."},{"label":".fs-carousel-fade / .fs-carousel-no-media","code":true,"text":"fade troca slides por opacidade; no-media aplica painéis de superfície e funciona com placeholder."},{"label":".fs-carousel-caption-side / -start / -stacked","code":true,"text":"side posiciona a legenda lateral, start a leva à esquerda e stacked a coloca abaixo da mídia."},{"label":".fs-carousel-hide-indicators-two","code":true,"text":"oculta indicadores somente quando há exatamente dois slides."},{"label":".is-static / .is-two-slides / .is-autoplay-paused / .is-dragging","code":true,"text":"estados internos aplicados pelo JavaScript; não os adicione manualmente."}],"a11y":[{"label":"Nome obrigatório","text":"forneça aria-label descritivo no contêiner e aria-label em cada botão somente de ícone."},{"label":"Movimento controlável","text":"o toggle chama pause()/play(); hover, foco e aba oculta suspendem temporariamente o autoplay."},{"label":"Teclado e gesto","text":"setas, Home e End funcionam no contêiner; o arraste preserva rolagem vertical e ignora links e controles."}],"states":[{"label":"Áreas seguras","text":"legenda não invade barra superior ou indicadores; no compacto, o gradiente cobre a mídia sem criar rolagem interna."},{"label":"Variações","text":"fade, sem mídia, legenda empilhada, lateral e slide único estático devem ser testados em claro e escuro."},{"label":"Interação","text":"valide hover, focus-visible, ativo, pausa, arraste concluído/cancelado e prefers-reduced-motion."}],"source":"examples/carousel.html","height":1500},
5
- {"id":"timeline","title":"Timeline","description":"Sequência cronológica de eventos com estado visual por etapa. Funciona tanto para histórico concluído quanto para progresso que ainda está em andamento.","use":[{"label":"Histórico auditável","text":"atualizações de pedido, atividades de conta, ocorrências de suporte ou alterações de status."},{"label":"Progresso de processo","text":"entrega, aprovação, implantação ou etapas de uma solicitação já iniciada."},{"label":"Evite para","text":"uma tarefa que exige navegação e validação passo a passo; nesse caso, use Stepper."}],"api":[{"label":"ol.fs-timeline","code":true,"text":"mantém a lista de eventos em ordem semântica e visual."},{"label":".fs-timeline-item","code":true,"text":"representa um evento com marcador, conteúdo, título, texto e horário opcionais."},{"label":".fs-timeline-horizontal","code":true,"text":"muda o eixo para colunas; prefira apenas quando houver poucos eventos e espaço suficiente."},{"label":".fs-timeline-active / -completed / -failed","code":true,"text":"expressam em andamento, concluído e falha; sem classe, o evento fica pendente."}],"a11y":[{"label":"Ordem real","text":"use <ol> e mantenha no DOM a mesma ordem cronológica apresentada visualmente."},{"label":"Data legível","text":"inclua data/hora em texto; cor e ícone não podem ser a única forma de comunicar o estado."},{"label":"Interação adicional","text":"a Timeline é CSS puro; se um item abrir detalhes, forneça um link ou botão com comportamento e foco próprios."}],"states":[{"label":"Progresso","text":"completed colore o marcador e o conector seguinte; active indica a etapa em curso."},{"label":"Falha","text":"failed destaca o evento crítico, mas deve ser acompanhado por texto explicativo."},{"label":"Eixo","text":"compare a leitura vertical e horizontal em telas pequenas antes de escolher a variação."}],"source":"examples/timeline.html","height":820},
6
- {"id":"charts","title":"Charts","description":"Tokens de cor e contraste para conectar uma biblioteca de gráficos ao tema FokusStyles. O framework não inclui nem impõe uma biblioteca de visualização.","use":[{"label":"Séries temáticas","text":"gráficos de barras, linhas, área, pizza ou dispersão feitos com Chart.js, ECharts, D3 ou outra biblioteca."},{"label":"Troca de tema/marca","text":"dashboards que precisam manter séries, grade e tooltip coerentes em claro, escuro ou multi-brand."},{"label":"Antes de desenhar","text":"defina a pergunta: comparação, evolução, distribuição ou composição; não escolha o gráfico só pela aparência."}],"api":[{"label":"--fs-chart-series-1 … -6","code":true,"text":"cores categóricas para séries ou categorias."},{"label":"--fs-chart-grid / --fs-chart-axis","code":true,"text":"cores de grade, rótulos e eixos."},{"label":"--fs-chart-tooltip-bg / -text","code":true,"text":"superfície e texto do tooltip da biblioteca."},{"label":"getComputedStyle","code":true,"text":"leia os tokens ao montar a configuração e releia-os após trocar tema ou marca."}],"a11y":[{"label":"Alternativa equivalente","text":"ofereça tabela, resumo textual ou dados acessíveis que respondam à mesma pergunta do gráfico."},{"label":"Não dependa de cor","text":"use rótulos, padrões, marcadores ou legenda quando uma série precisar ser distinguida."},{"label":"Tooltip","text":"informação exclusiva do hover deve ter alternativa por foco, texto próximo ou tabela."}],"states":[{"label":"Tema","text":"tokens seguem data-theme e data-fs-brand, mas a biblioteca pode exigir atualização ou recriação do gráfico."},{"label":"Dados","text":"projete explicitamente estados vazio, carregando e erro fora da área do gráfico."},{"label":"Paleta","text":"há seis séries; para escala sequencial, divergente ou mais categorias, sobrescreva tokens de forma intencional."}],"source":"examples/charts.html","height":800},
7
- {"id":"table","title":"Table","description":"Tabela HTML semântica para relações reais entre linhas e colunas; as classes FokusStyles alteram apresentação, não a estrutura dos dados.","use":[{"label":"Comparação precisa","text":"planos, pedidos, permissões, resultados de busca ou métricas em que o usuário cruza linhas e colunas."},{"label":"Dados verificáveis","text":"situações em que valores exatos são mais importantes que uma visualização resumida."},{"label":"Evite para","text":"layout de página, cartões de conteúdo ou listas estreitas; use Grid, Card ou Tile conforme o caso."}],"api":[{"label":".fs-table","code":true,"text":"aplica a aparência base à tabela nativa."},{"label":".fs-table-striped / .fs-table-hover","code":true,"text":"melhoram a leitura de linhas longas e o acompanhamento pelo cursor."},{"label":".fs-table-bordered / .fs-table-borderless / .fs-table-sm","code":true,"text":"ajustam bordas e densidade sem mudar a semântica."},{"label":".fs-table-responsive","code":true,"text":"fica no div envolvente e habilita rolagem horizontal em telas estreitas."}],"a11y":[{"label":"Cabeçalhos","text":"use th com scope=\"col\" ou scope=\"row\" conforme a relação da célula."},{"label":"Contexto","text":"adicione caption em tabelas complexas ou quando o título próximo não bastar."},{"label":"Rolagem","text":"a variante responsiva preserva a tabela inteira; confira se colunas-chave e cabeçalhos continuam identificáveis."}],"states":[{"label":"Visual","text":"combine listras, hover, bordas e tamanho compacto apenas quando aumentarem legibilidade."},{"label":"Responsividade","text":"teste a rolagem horizontal, em vez de esconder dados ou quebrar células sem critério."},{"label":"Comportamento","text":"Table é estática; para filtro, ordenação ou paginação, use DataTable."}],"source":"examples/tables-navbar.html","height":750},
8
- {"id":"datatable","title":"DataTable","description":"Camada JavaScript sobre uma Table semântica para filtrar, ordenar e paginar uma coleção no cliente, incluindo estados de vazio, carregamento e erro.","use":[{"label":"Coleções operáveis","text":"usuários, pedidos, arquivos ou transações quando a pessoa precisa encontrar, ordenar e percorrer muitos registros."},{"label":"Dados já carregados","text":"cenários client-side em que as linhas podem ser lidas e manipuladas no navegador."},{"label":"Evite para","text":"volumes que exigem paginação/filtragem no servidor ou uma grade altamente customizada; o componente não substitui um data grid completo."}],"api":[{"label":"<div class=\"fs-datatable\" data-fs=\"datatable\">","code":true,"text":"envolve toolbar, tabela, mensagens e paginação; data-fs não vai no table."},{"label":"data-fs-page-size=\"25\"","code":true,"text":"aceita número inteiro de linhas por página; se ausente, inválido ou 0, usa 10."},{"label":"data-fs-sort=\"name\"","code":true,"text":"vai no th e cria ordenação para a chave informada. Combine com data-fs-sort-type=\"text\", \"number\", \"currency\" ou \"date\"."},{"label":"data-fs-sort-value=\"2026-07-14\"","code":true,"text":"vai no td quando o valor de ordenação difere do texto formatado exibido."},{"label":"data-fs-datatable-filter","code":true,"text":"adicione ao input de busca dentro do contêiner; o filtro procura texto em qualquer célula."},{"label":"data-fs-datatable-empty / -loading / -error","code":true,"text":"marcam blocos opcionais para cada estado; refresh(), setLoading() e setError() atualizam a instância."}],"a11y":[{"label":"Ordenação anunciada","text":"o componente atualiza aria-sort no th e usa botão interno focável para ativar a ordenação."},{"label":"Navegação em grade","text":"células visíveis usam roving tabindex; setas movem o foco e Home/End percorrem a linha ou tabela."},{"label":"Estado compreensível","text":"mensagens de vazio, carregando e erro precisam explicar o que ocorreu e a próxima ação quando houver."}],"states":[{"label":"Dados","text":"valide vazio por filtro, carregando e erro antes de publicar; tabela e paginação são ocultadas nesses estados."},{"label":"Ordenação","text":"cada coluna alterna ascendente, descendente e sem ordenação; use data-fs-sort-value para valores formatados."},{"label":"Paginação","text":"o nav aparece apenas com mais de uma página; confirme filtro, contagem e retorno à página correta."}],"source":"examples/datatable.html","height":1150}
9
- ]</script><script src="../dist/js/fokus.js"></script><script src="assets/showcase.js"></script></body></html>
package/mockup/examples/accordion-tabs-toast.html DELETED
@@ -1,149 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mockup - Accordion, Tabs &amp; Toast</title>
7
-
8
- <!-- STYLES IMPORT -->
9
- <link rel="stylesheet" href="../../dist/css/fonts.css">
10
- <link rel="stylesheet" href="../../dist/css/components.css">
11
- <link rel="stylesheet" href="../../dist/css/helpers.css">
12
- <style>
13
- .theme-panel {
14
- padding: 24px;
15
- }
16
-
17
- html[data-theme="dark"] .theme-panel {
18
- color: var(--fs-color-text);
19
- background-color: var(--fs-color-surface);
20
- }
21
-
22
- section {
23
- max-width: 480px;
24
- margin-bottom: 24px;
25
- }
26
- </style>
27
- <link rel="stylesheet" href="../assets/example-theme.css">
28
- <script src="../assets/example-theme.js"></script>
29
- </head>
30
- <body>
31
-
32
- <div class="theme-panel">
33
- <section>
34
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Accordion — auto-init via data-fs, só um painel aberto por vez (data-multiple="true" permite vários)</p>
35
- <div class="fs-accordion" data-fs="accordion" id="accordion-claro">
36
- <div class="fs-accordion-item">
37
- <h3 class="fs-accordion-header">
38
- <button type="button" class="fs-accordion-button" aria-expanded="true">O que é o Fokus Styles?</button>
39
- </h3>
40
- <div class="fs-accordion-collapse">
41
- <div class="fs-accordion-body">Um framework CSS open source, próximo ao Bootstrap, com HTML/CSS/JS nativo e zero dependências.</div>
42
- </div>
43
- </div>
44
- <div class="fs-accordion-item">
45
- <h3 class="fs-accordion-header">
46
- <button type="button" class="fs-accordion-button" aria-expanded="false">Como funciona o dark mode?</button>
47
- </h3>
48
- <div class="fs-accordion-collapse">
49
- <div class="fs-accordion-body">Via CSS Custom Properties, alternando com o atributo <code class="fs-u-font-mono">data-theme="dark"</code>.</div>
50
- </div>
51
- </div>
52
- <div class="fs-accordion-item">
53
- <h3 class="fs-accordion-header">
54
- <button type="button" class="fs-accordion-button" aria-expanded="false">Reaproveita a infraestrutura da Fase 7?</button>
55
- </h3>
56
- <div class="fs-accordion-collapse">
57
- <div class="fs-accordion-body">Sim — <code class="fs-u-font-mono">collapse()</code>/<code class="fs-u-font-mono">expand()</code> de <code class="fs-u-font-mono">FokusStyles.core</code> animam a altura de cada painel.</div>
58
- </div>
59
- </div>
60
- </div>
61
- </section>
62
-
63
- <section>
64
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Tabs — auto-init via data-fs, navegação por ArrowLeft/ArrowRight/Home/End</p>
65
- <div class="fs-tabs" data-fs="tabs" id="tabs-claro">
66
- <a href="#" class="fs-nav-link is-active" data-fs-target="#tab-perfil-claro">Perfil</a>
67
- <a href="#" class="fs-nav-link" data-fs-target="#tab-seguranca-claro">Segurança</a>
68
- <a href="#" class="fs-nav-link is-disabled" data-fs-target="#tab-notificacoes-claro">Notificações</a>
69
- </div>
70
- <div class="fs-tab-content fs-u-p-3">
71
- <div class="fs-tab-pane is-active" id="tab-perfil-claro">Conteúdo da aba Perfil.</div>
72
- <div class="fs-tab-pane" id="tab-seguranca-claro">Conteúdo da aba Segurança.</div>
73
- <div class="fs-tab-pane" id="tab-notificacoes-claro">Conteúdo da aba Notificações (desabilitada).</div>
74
- </div>
75
- </section>
76
-
77
- <section>
78
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Tabs — estilo pill, alinhado ao centro</p>
79
- <div class="fs-tabs fs-tabs-pill fs-tabs-center" data-fs="tabs" id="tabs-pill-claro">
80
- <a href="#" class="fs-nav-link is-active" data-fs-target="#tab-pill-perfil-claro">Perfil</a>
81
- <a href="#" class="fs-nav-link" data-fs-target="#tab-pill-seguranca-claro">Segurança</a>
82
- <a href="#" class="fs-nav-link" data-fs-target="#tab-pill-notificacoes-claro">Notificações</a>
83
- </div>
84
- <div class="fs-tab-content fs-u-p-3">
85
- <div class="fs-tab-pane is-active" id="tab-pill-perfil-claro">Conteúdo da aba Perfil.</div>
86
- <div class="fs-tab-pane" id="tab-pill-seguranca-claro">Conteúdo da aba Segurança.</div>
87
- <div class="fs-tab-pane" id="tab-pill-notificacoes-claro">Conteúdo da aba Notificações.</div>
88
- </div>
89
- </section>
90
-
91
- <section>
92
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Tabs — estilo depth, fill, tamanho lg</p>
93
- <div class="fs-tabs fs-tabs-depth fs-tabs-fill fs-tabs-lg" data-fs="tabs" id="tabs-depth-claro">
94
- <a href="#" class="fs-nav-link is-active" data-fs-target="#tab-depth-perfil-claro">Perfil</a>
95
- <a href="#" class="fs-nav-link" data-fs-target="#tab-depth-seguranca-claro">Segurança</a>
96
- <a href="#" class="fs-nav-link" data-fs-target="#tab-depth-notificacoes-claro">Notificações</a>
97
- </div>
98
- <div class="fs-tab-content fs-u-p-3">
99
- <div class="fs-tab-pane is-active" id="tab-depth-perfil-claro">Conteúdo da aba Perfil.</div>
100
- <div class="fs-tab-pane" id="tab-depth-seguranca-claro">Conteúdo da aba Segurança.</div>
101
- <div class="fs-tab-pane" id="tab-depth-notificacoes-claro">Conteúdo da aba Notificações.</div>
102
- </div>
103
- </section>
104
-
105
- <section>
106
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Tabs — linha, alinhado à direita, tamanho sm</p>
107
- <div class="fs-tabs fs-tabs-right fs-tabs-sm" data-fs="tabs" id="tabs-right-claro">
108
- <a href="#" class="fs-nav-link is-active" data-fs-target="#tab-right-perfil-claro">Perfil</a>
109
- <a href="#" class="fs-nav-link" data-fs-target="#tab-right-seguranca-claro">Segurança</a>
110
- <a href="#" class="fs-nav-link" data-fs-target="#tab-right-notificacoes-claro">Notificações</a>
111
- </div>
112
- <div class="fs-tab-content fs-u-p-3">
113
- <div class="fs-tab-pane is-active" id="tab-right-perfil-claro">Conteúdo da aba Perfil.</div>
114
- <div class="fs-tab-pane" id="tab-right-seguranca-claro">Conteúdo da aba Segurança.</div>
115
- <div class="fs-tab-pane" id="tab-right-notificacoes-claro">Conteúdo da aba Notificações.</div>
116
- </div>
117
- </section>
118
-
119
- <section>
120
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Toast — auto-init via data-fs, mostrado sob demanda com FokusStyles.Toast.getInstance().show(), auto-dismiss</p>
121
- <button type="button" class="fs-btn fs-btn-primary" id="toast-trigger-claro">Mostrar toast</button>
122
- </section>
123
-
124
- <div class="fs-toast-container">
125
- <div class="fs-toast fs-toast-success" data-fs="toast" id="toast-claro" data-delay="4000">
126
- <div class="fs-toast-header">
127
- <span>Sucesso</span>
128
- <button type="button" class="fs-btn-close" data-fs-dismiss="toast" aria-label="Fechar"></button>
129
- </div>
130
- <div class="fs-toast-body">Operação concluída com sucesso.</div>
131
- </div>
132
- </div>
133
- </div>
134
-
135
-
136
-
137
- <!-- SCRIPTS IMPORT -->
138
- <script src="../../dist/js/fokus.js"></script>
139
- <script>
140
- document.getElementById("toast-trigger-claro").addEventListener("click", () => {
141
- FokusStyles.Toast.getInstance(document.getElementById("toast-claro")).show();
142
- });
143
- document.getElementById("toast-trigger-escuro")?.addEventListener("click", () => {
144
- FokusStyles.Toast.getInstance(document.getElementById("toast-escuro")).show();
145
- });
146
- </script>
147
-
148
- </body>
149
- </html>
package/mockup/examples/alert-dialog.html DELETED
@@ -1,84 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mockup - Alert Dialog / Confirm</title>
7
-
8
- <!-- STYLES IMPORT -->
9
- <link rel="stylesheet" href="../../dist/css/fonts.css">
10
- <link rel="stylesheet" href="../../dist/css/components.css">
11
- <link rel="stylesheet" href="../../dist/css/helpers.css">
12
- <style>
13
- .theme-panel {
14
- display: flex;
15
- flex-direction: column;
16
- align-items: flex-start;
17
- gap: 12px;
18
- padding: 24px;
19
- }
20
-
21
- html[data-theme="dark"] .theme-panel {
22
- color: var(--fs-color-text);
23
- background-color: var(--fs-color-surface);
24
- }
25
-
26
- #resultado {
27
- font-size: 0.85rem;
28
- color: var(--fs-color-muted);
29
- }
30
- </style>
31
- <link rel="stylesheet" href="../assets/example-theme.css">
32
- <script src="../assets/example-theme.js"></script>
33
- </head>
34
- <body>
35
-
36
- <div class="theme-panel">
37
- <button type="button" class="fs-btn fs-btn-danger" id="btn-excluir">Excluir item</button>
38
- <button type="button" class="fs-btn fs-btn-primary" id="btn-sair">Sair sem salvar</button>
39
- <button type="button" class="fs-btn fs-btn-success" id="btn-publicar">Publicar</button>
40
- <p id="resultado">Clique num botão para abrir o Alert Dialog.</p>
41
- </div>
42
-
43
-
44
-
45
- <script src="../../dist/js/fokus.js"></script>
46
- <script>
47
- const resultado = document.getElementById("resultado");
48
-
49
- document.getElementById("btn-excluir").addEventListener("click", async () => {
50
- const confirmed = await FokusStyles.confirm({
51
- title: "Excluir item?",
52
- message: "Essa ação não pode ser desfeita.",
53
- confirmText: "Excluir",
54
- cancelText: "Cancelar",
55
- variant: "danger",
56
- });
57
- resultado.textContent = confirmed ? "Confirmado: item excluído." : "Cancelado.";
58
- });
59
-
60
- document.getElementById("btn-sair").addEventListener("click", async () => {
61
- const confirmed = await FokusStyles.confirm({
62
- title: "Sair sem salvar?",
63
- message: "Suas alterações serão perdidas.",
64
- confirmText: "Sair",
65
- variant: "primary",
66
- });
67
- resultado.textContent = confirmed ? "Confirmado: saiu sem salvar." : "Cancelado.";
68
- });
69
-
70
- document.getElementById("btn-publicar").addEventListener("click", async () => {
71
- const confirmed = await FokusStyles.confirm({
72
- title: "Publicar agora?",
73
- confirmText: "Publicar",
74
- variant: "success",
75
- });
76
- resultado.textContent = confirmed ? "Confirmado: publicado." : "Cancelado.";
77
- });
78
-
79
- document.getElementById("btn-excluir-dark")?.addEventListener("click", () => {
80
- FokusStyles.confirm({ title: "Excluir item?", variant: "danger", confirmText: "Excluir" });
81
- });
82
- </script>
83
- </body>
84
- </html>
package/mockup/examples/alerts.html DELETED
@@ -1,115 +0,0 @@
1
- <!doctype html>
2
- <html lang="pt-BR">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Fokus Styles — Alerts</title>
7
- <link rel="stylesheet" href="../../dist/css/fonts.css">
8
- <link rel="stylesheet" href="../../dist/css/components.css">
9
- <link rel="stylesheet" href="../../dist/css/helpers.css">
10
- <link rel="stylesheet" href="../assets/example-theme.css">
11
- <script src="../assets/example-theme.js"></script>
12
- <style>
13
- :root { --demo-max-width: 1080px; --demo-panel-bg: var(--fs-color-surface); --demo-soft-bg: var(--fs-color-subtle); --demo-panel-border: var(--fs-color-border); --demo-accent: var(--fs-color-primary); }
14
- * { box-sizing: border-box; }
15
- body { min-block-size: 100vh; margin: 0; color: var(--fs-color-text); background: var(--fs-color-bg-subtle); }
16
- .demo-page { max-inline-size: var(--demo-max-width); margin-inline: auto; padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 40px) 64px; }
17
- .demo-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-block-end: 32px; }
18
- .demo-eyebrow { margin: 0 0 8px; color: var(--demo-accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
19
- html[data-fs-theme="dark"] .demo-eyebrow { color: var(--fs-color-text); }
20
- .demo-title { max-inline-size: 760px; margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.04em; }
21
- .demo-lead { max-inline-size: 720px; margin: 16px 0 0; color: var(--fs-color-muted); font-size: 1.05rem; line-height: 1.6; }
22
- .demo-alert-row, .demo-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
23
- .demo-alert-row { margin-block-start: 20px; }
24
- .demo-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-block: 24px; padding: 12px; border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-md); background: var(--demo-panel-bg); }
25
- .demo-section { margin-block-start: 32px; }
26
- .demo-section-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-block-end: 14px; }
27
- .demo-section-heading h2, .demo-card h3, .demo-reference h2, .demo-playground h3 { margin: 0; }
28
- .demo-section-heading p, .demo-card p, .demo-reference p, .demo-status p { color: var(--fs-color-muted); }
29
- .demo-section-heading p { max-inline-size: 620px; margin: 0; font-size: .9rem; }
30
- .demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
31
- .demo-card, .demo-playground, .demo-reference { border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-md); background: var(--demo-panel-bg); box-shadow: var(--fs-shadow-sm); }
32
- .demo-card { min-block-size: 190px; padding: 20px; }
33
- .demo-card p { margin: 10px 0 20px; line-height: 1.55; }
34
- .demo-card-icon { display: grid; inline-size: 36px; block-size: 36px; place-items: center; margin-block-end: 16px; border-radius: var(--fs-radius-sm); color: var(--fs-color-primary); background: var(--demo-soft-bg); font-size: 1.2rem; font-weight: 700; }
35
- .demo-playground { padding: clamp(18px, 3vw, 28px); }
36
- .demo-playground-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 28px; }
37
- .demo-demo-group + .demo-demo-group { margin-block-start: 28px; }
38
- .demo-demo-group h3 { font-size: 1rem; }
39
- .demo-demo-group > p { margin: 6px 0 14px; color: var(--fs-color-muted); font-size: .9rem; }
40
- .demo-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-sm); background: var(--demo-soft-bg); }
41
- .demo-sample + .demo-sample { margin-block-start: 10px; }
42
- .demo-sample-label { flex: 1 1 150px; color: var(--fs-color-muted); font-size: .82rem; }
43
- .demo-status { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--fs-radius-sm); background: var(--demo-soft-bg); }
44
- .demo-status h3 { margin: 0; }
45
- .demo-status p { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; }
46
- .demo-status-output { margin: 0; padding: 12px; border-inline-start: 3px solid var(--demo-accent); color: var(--fs-color-text) !important; background: var(--demo-panel-bg); font-size: .85rem !important; }
47
- .demo-code { margin: 0; padding: 14px; overflow: auto; border-radius: var(--fs-radius-sm); color: var(--fs-color-text); background: var(--demo-panel-bg); font: .76rem/1.6 var(--fs-font-mono, ui-monospace, monospace); white-space: pre-wrap; }
48
- .demo-reference { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: clamp(18px, 3vw, 28px); }
49
- .demo-reference p { margin: 8px 0 16px; line-height: 1.5; }
50
- .demo-reference ul { margin: 0; padding-inline-start: 20px; color: var(--fs-color-muted); line-height: 1.8; }
51
- .demo-reference code { color: var(--fs-color-primary); }
52
- .demo-note { margin-block-start: 14px !important; font-size: .85rem; }
53
- html[data-demo-forced-colors] .demo-page { --demo-panel-bg: Canvas; --demo-soft-bg: Canvas; --demo-panel-border: CanvasText; color: CanvasText; background: Canvas; }
54
- @media (max-width: 760px) { .demo-hero, .demo-playground-grid, .demo-reference { grid-template-columns: 1fr; } .demo-hero { align-items: start; } .demo-grid { grid-template-columns: 1fr; } }
55
- </style>
56
- </head>
57
- <body>
58
- <main class="demo-page">
59
- <header class="demo-hero">
60
- <div>
61
- <p class="demo-eyebrow">Fokus Styles · mensagem persistente</p>
62
- <h1 class="demo-title">Alertas que explicam estados e orientam próximas ações.</h1>
63
- <p class="demo-lead">Use Alert para feedback contextual que precisa permanecer visível. Ícones, títulos e ações são opcionais; o texto continua sendo a fonte principal do significado.</p>
64
- <div class="demo-alert-row" aria-label="Exemplos rápidos"><span class="fs-badge fs-badge-soft-info">Informação</span><span class="fs-badge fs-badge-soft-success">Sucesso</span><span class="fs-badge fs-badge-soft-warning">Atenção</span><span class="fs-badge fs-badge-soft-danger">Erro</span></div>
65
- </div>
66
- <span class="fs-badge fs-badge-outline-primary">CSS-only</span>
67
- </header>
68
-
69
- <nav class="demo-toolbar" aria-label="Controles da demonstração"><div class="demo-action-row"><button class="fs-btn fs-btn-primary fs-btn-sm" type="button" id="reset-demo">Restaurar demonstração</button><button class="fs-btn fs-btn-outline-primary fs-btn-sm" type="button" id="toggle-direction" aria-pressed="false">Testar RTL</button><button class="fs-btn fs-btn-outline-secondary fs-btn-sm" type="button" id="toggle-forced-colors" aria-pressed="false">Testar alto contraste</button></div><span class="fs-form-text">Compare variantes, composições e estados sem depender apenas de cor.</span></nav>
70
-
71
- <section class="demo-section" aria-labelledby="why-title">
72
- <div class="demo-section-heading"><div><h2 id="why-title">Escolha o padrão certo</h2><p>Badge resume, Tag gerencia uma seleção, Alert explica contexto e Toast comunica algo transitório.</p></div></div>
73
- <div class="demo-grid">
74
- <article class="demo-card"><span class="demo-card-icon" aria-hidden="true">#</span><h3>Badge informa</h3><p>Status e classificação são curtos e complementam um item que já tem contexto.</p><span class="fs-badge fs-badge-success">Ativo</span></article>
75
- <article class="demo-card"><span class="demo-card-icon" aria-hidden="true">!</span><h3>Alert explica</h3><p>Quando existe consequência, instrução ou próxima ação, use uma mensagem persistente.</p><div class="fs-alert fs-alert-warning" role="status">Revise o cadastro antes de publicar.</div></article>
76
- <article class="demo-card"><span class="demo-card-icon" aria-hidden="true">↗</span><h3>Toast avisa</h3><p>Para confirmação breve que não exige leitura prolongada, prefira uma mensagem transitória.</p><span class="fs-badge fs-badge-outline-info">Temporário</span></article>
77
- </div>
78
- </section>
79
-
80
- <section class="demo-section" aria-labelledby="playground-title">
81
- <div class="demo-section-heading"><div><h2 id="playground-title">Laboratório de Alertas</h2><p>Compare variantes, anatomia, ações, fechamento manual, grupos, inline, loading e mensagens longas.</p></div><span class="fs-badge fs-badge-outline-success">ao vivo</span></div>
82
- <div class="demo-playground"><div class="demo-playground-grid"><div>
83
- <div class="demo-demo-group"><h3>Variantes semânticas</h3><p>O texto comunica a intenção; a barra lateral reforça a hierarquia visual.</p><div class="demo-sample"><span class="demo-sample-label">Neutro e informação</span><div class="fs-alert">Informação neutra para o contexto atual.</div><div class="fs-alert fs-alert-info" role="status">Há uma nova versão pronta para revisão.</div></div><div class="demo-sample"><span class="demo-sample-label">Sucesso, atenção e erro</span><div class="fs-alert fs-alert-success" role="status">Operação concluída com sucesso.</div><div class="fs-alert fs-alert-warning" role="status">Revise antes de continuar.</div><div class="fs-alert fs-alert-danger" role="alert">Não foi possível salvar.</div></div></div>
84
- <div class="demo-demo-group"><h3>Anatomia e ações</h3><p>Ícone, título, descrição, link, botão e fechamento são slots opcionais e composicionais.</p><div class="demo-sample"><span class="demo-sample-label">Mensagem rica</span><div class="fs-alert fs-alert-warning" role="status"><span class="fs-alert-icon" aria-hidden="true"><svg class="fs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m12 3 9 17H3L12 3Z"/><path d="M12 9v4m0 3h.01"/></svg></span><div class="fs-alert-content"><h3 class="fs-alert-heading">Sessão expirando</h3><p class="fs-alert-text">Salve seu trabalho para não perder alterações.</p><div class="fs-alert-actions"><button class="fs-btn fs-btn-warning fs-btn-sm" type="button">Continuar sessão</button><a class="fs-alert-link" href="#ajuda">Saiba mais</a></div></div></div></div><div class="demo-sample"><span class="demo-sample-label">Fechamento manual</span><div class="fs-alert fs-alert-success"><div class="fs-alert-content"><h3 class="fs-alert-heading">Convite enviado</h3><p class="fs-alert-text">A pessoa receberá um e-mail para entrar no projeto.</p></div><button class="fs-btn-close fs-alert-close" type="button" aria-label="Fechar aviso de convite enviado"></button></div></div></div>
85
- <div class="demo-demo-group"><h3>Densidade, grupos e loading</h3><p>Use a variante inline perto de campos e aria-busy durante operações assíncronas.</p><div class="demo-sample"><span class="demo-sample-label">Inline</span><div class="fs-alert fs-alert-inline fs-alert-warning" role="status"><span class="fs-alert-icon" aria-hidden="true">!</span><div class="fs-alert-content"><p class="fs-alert-text">Campo obrigatório.</p></div></div></div><div class="demo-sample"><span class="demo-sample-label">Grupo</span><div class="fs-alert-group" aria-label="Mensagens do projeto"><div class="fs-alert fs-alert-info">A sincronização será iniciada em instantes.</div><div class="fs-alert fs-alert-success">Última sincronização concluída.</div></div></div><div class="demo-sample"><span class="demo-sample-label">Loading</span><div class="fs-alert fs-alert-info" role="status" aria-busy="true"><span class="fs-spinner fs-spinner-sm" aria-hidden="true"></span><div class="fs-alert-content"><p class="fs-alert-text">Atualizando dados…</p></div></div></div></div>
86
- <div class="demo-demo-group"><h3>Mensagem longa e responsiva</h3><p>Conteúdo, links e ações quebram sem causar overflow horizontal em telas estreitas.</p><div class="demo-sample"><span class="demo-sample-label">Responsivo</span><div class="fs-alert fs-alert-primary" role="status"><div class="fs-alert-content"><h3 class="fs-alert-heading">Mensagem com várias linhas</h3><p class="fs-alert-text">Alertas preservam a leitura em telas estreitas e permitem que títulos, descrições e links quebrem livremente.</p><div class="fs-alert-actions"><a class="fs-alert-link" href="#documentacao">Abrir documentação com endereço longo</a></div></div></div></div></div>
87
- </div><aside class="demo-status" aria-labelledby="status-title"><div><h3 id="status-title">Contrato do Alert</h3><p>Alert permanece no contexto, não move foco e não fecha sozinho. O fechamento visual depende da lógica da aplicação.</p></div><p class="demo-status-output" id="demo-status" role="status" aria-live="polite">Demonstração pronta.</p><pre class="demo-code"><code>.fs-alert
88
- .fs-alert-{color}
89
- .fs-alert-icon
90
- .fs-alert-content
91
- .fs-alert-actions
92
- .fs-alert-close
93
- .fs-alert-group
94
- .fs-alert-inline
95
-
96
- /* tokens locais */
97
- --fs-alert-radius
98
- --fs-alert-gap
99
- --fs-alert-icon-size</code></pre></aside></div></div>
100
- </section>
101
-
102
- <section class="demo-section" aria-labelledby="a11y-title"><div class="demo-section-heading"><div><h2 id="a11y-title">Contratos preservados</h2><p>O significado permanece disponível sem depender de cor, ícone, foco automático ou desaparecimento temporizado.</p></div></div><div class="demo-reference"><div><h2>Uso acessível</h2><ul><li>Use <code>role="status"</code> para atualização calma e <code>role="alert"</code> somente para urgência.</li><li>Ícones decorativos usam <code>aria-hidden="true"</code>.</li><li>Botões e links mantêm nomes e foco visível.</li><li>Loading usa <code>aria-busy="true"</code> e texto compreensível.</li></ul></div><div><h2>Limites do componente</h2><ul><li>Alert não injeta ARIA nem move foco.</li><li>Não use Alert para decisões críticas; prefira Alert Dialog.</li><li>Não use Alert para feedback temporário; prefira Toast.</li><li>RTL, dark mode e forced colors preservam a leitura.</li></ul></div></div></section>
103
- </main>
104
- <script>
105
- const page = document.querySelector(".demo-page");
106
- const status = document.getElementById("demo-status");
107
- const directionButton = document.getElementById("toggle-direction");
108
- const forcedColorsButton = document.getElementById("toggle-forced-colors");
109
- document.querySelectorAll(".fs-alert-close").forEach((button) => button.addEventListener("click", () => { button.closest(".fs-alert")?.remove(); status.textContent = "Alert removido manualmente da demonstração."; }));
110
- document.getElementById("reset-demo").addEventListener("click", () => { location.reload(); });
111
- directionButton.addEventListener("click", () => { const rtl = page.getAttribute("dir") !== "rtl"; page.setAttribute("dir", rtl ? "rtl" : "ltr"); directionButton.setAttribute("aria-pressed", String(rtl)); directionButton.textContent = rtl ? "Voltar para LTR" : "Testar RTL"; status.textContent = rtl ? "Direção RTL ativada." : "Direção LTR ativada."; });
112
- forcedColorsButton.addEventListener("click", () => { const active = forcedColorsButton.getAttribute("aria-pressed") !== "true"; forcedColorsButton.setAttribute("aria-pressed", String(active)); forcedColorsButton.textContent = active ? "Voltar ao tema" : "Testar alto contraste"; document.documentElement.toggleAttribute("data-demo-forced-colors", active); status.textContent = active ? "Modo de alto contraste demonstrativo ativado." : "Modo de alto contraste demonstrativo desativado."; });
113
- </script>
114
- </body>
115
- </html>
package/mockup/examples/badges-alerts.html DELETED
@@ -1,109 +0,0 @@
1
- <!doctype html>
2
- <html lang="pt-BR">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Fokus Styles — Badges</title>
7
- <link rel="stylesheet" href="../../dist/css/fonts.css">
8
- <link rel="stylesheet" href="../../dist/css/components.css">
9
- <link rel="stylesheet" href="../../dist/css/helpers.css">
10
- <link rel="stylesheet" href="../assets/example-theme.css">
11
- <script src="../assets/example-theme.js"></script>
12
- <style>
13
- :root { --demo-max-width: 1080px; --demo-panel-bg: var(--fs-color-surface); --demo-soft-bg: var(--fs-color-subtle); --demo-panel-border: var(--fs-color-border); --demo-accent: var(--fs-color-primary); }
14
- * { box-sizing: border-box; }
15
- body { min-block-size: 100vh; margin: 0; color: var(--fs-color-text); background: var(--fs-color-bg-subtle); }
16
- .demo-page { max-inline-size: var(--demo-max-width); margin-inline: auto; padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 40px) 64px; }
17
- .demo-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-block-end: 32px; }
18
- .demo-eyebrow { margin: 0 0 8px; color: var(--demo-accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
19
- html[data-fs-theme="dark"] .demo-eyebrow { color: var(--fs-color-text); }
20
- .demo-title { max-inline-size: 760px; margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.04em; }
21
- .demo-lead { max-inline-size: 720px; margin: 16px 0 0; color: var(--fs-color-muted); font-size: 1.05rem; line-height: 1.6; }
22
- .demo-badge-row, .demo-action-row, .demo-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
23
- .demo-badge-row { margin-block-start: 20px; }
24
- .demo-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-block: 24px; padding: 12px; border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-md); background: var(--demo-panel-bg); }
25
- .demo-section { margin-block-start: 32px; }
26
- .demo-section-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-block-end: 14px; }
27
- .demo-section-heading h2, .demo-card h3, .demo-reference h2, .demo-playground h3 { margin: 0; }
28
- .demo-section-heading p, .demo-card p, .demo-reference p, .demo-status p { color: var(--fs-color-muted); }
29
- .demo-section-heading p { max-inline-size: 620px; margin: 0; font-size: .9rem; }
30
- .demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
31
- .demo-card, .demo-playground, .demo-reference { border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-md); background: var(--demo-panel-bg); box-shadow: var(--fs-shadow-sm); }
32
- .demo-card { min-block-size: 190px; padding: 20px; }
33
- .demo-card p { margin: 10px 0 20px; line-height: 1.55; }
34
- .demo-card-icon { display: grid; inline-size: 36px; block-size: 36px; place-items: center; margin-block-end: 16px; border-radius: var(--fs-radius-sm); color: var(--fs-color-primary); background: var(--demo-soft-bg); font-size: 1.2rem; font-weight: 700; }
35
- .demo-playground { padding: clamp(18px, 3vw, 28px); }
36
- .demo-playground-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 28px; }
37
- .demo-demo-group + .demo-demo-group { margin-block-start: 28px; }
38
- .demo-demo-group h3 { font-size: 1rem; }
39
- .demo-demo-group > p { margin: 6px 0 14px; color: var(--fs-color-muted); font-size: .9rem; }
40
- .demo-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-sm); background: var(--demo-soft-bg); }
41
- .demo-sample + .demo-sample { margin-block-start: 10px; }
42
- .demo-sample-label { flex: 1 1 150px; color: var(--fs-color-muted); font-size: .82rem; }
43
- .demo-status { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--fs-radius-sm); background: var(--demo-soft-bg); }
44
- .demo-status h3 { margin: 0; }
45
- .demo-status p { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; }
46
- .demo-status-output { margin: 0; padding: 12px; border-inline-start: 3px solid var(--demo-accent); color: var(--fs-color-text) !important; background: var(--demo-panel-bg); font-size: .85rem !important; }
47
- .demo-code { margin: 0; padding: 14px; overflow: auto; border-radius: var(--fs-radius-sm); color: var(--fs-color-text); background: var(--demo-panel-bg); font: .76rem/1.6 var(--fs-font-mono, ui-monospace, monospace); white-space: pre-wrap; }
48
- .demo-reference { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: clamp(18px, 3vw, 28px); }
49
- .demo-reference p { margin: 8px 0 16px; line-height: 1.5; }
50
- .demo-reference ul { margin: 0; padding-inline-start: 20px; color: var(--fs-color-muted); line-height: 1.8; }
51
- .demo-reference code { color: var(--fs-color-primary); }
52
- .demo-note { margin-block-start: 14px !important; font-size: .85rem; }
53
- @media (max-width: 760px) { .demo-hero, .demo-playground-grid, .demo-reference { grid-template-columns: 1fr; } .demo-hero { align-items: start; } .demo-grid { grid-template-columns: 1fr; } }
54
- </style>
55
- </head>
56
- <body>
57
- <main class="demo-page">
58
- <header class="demo-hero">
59
- <div>
60
- <p class="demo-eyebrow">Fokus Styles · componente essencial</p>
61
- <h1 class="demo-title">Badges que comunicam estados breves com clareza.</h1>
62
- <p class="demo-lead">Use rótulos compactos para status, contagens e classificações. Esta página demonstra variantes visuais, tokens de densidade e composição com alertas sem depender apenas de cor.</p>
63
- <div class="demo-badge-row" aria-label="Exemplos rápidos"><span class="fs-badge fs-badge-primary">Em análise</span><span class="fs-badge fs-badge-soft-success fs-badge-dot">Disponível</span><span class="fs-badge fs-badge-count fs-badge-danger" aria-label="3 notificações não lidas">3</span></div>
64
- </div>
65
- <span class="fs-badge fs-badge-outline-primary">CSS-only</span>
66
- </header>
67
- <nav class="demo-toolbar" aria-label="Controles da demonstração"><div class="demo-action-row"><button class="fs-btn fs-btn-primary fs-btn-sm" type="button" id="reset-demo">Restaurar demonstração</button><button class="fs-btn fs-btn-outline-primary fs-btn-sm" type="button" id="toggle-direction" aria-pressed="false">Testar RTL</button></div><span class="fs-form-text">Use as seções abaixo para comparar variantes, tamanhos e combinações.</span></nav>
68
-
69
- <section class="demo-section" aria-labelledby="why-title">
70
- <div class="demo-section-heading"><div><h2 id="why-title">Escolha o padrão certo</h2><p>Badge informa algo curto que já tem contexto na tela; Alert permanece para mensagens que precisam ser lidas e compreendidas.</p></div></div>
71
- <div class="demo-grid">
72
- <article class="demo-card"><span class="demo-card-icon" aria-hidden="true">#</span><h3>Status e classificação</h3><p>Use uma variante semântica ao lado do item que ela qualifica, como pedido, plano ou usuário.</p><span class="fs-badge fs-badge-success">Aprovado</span></article>
73
- <article class="demo-card"><span class="demo-card-icon" aria-hidden="true">1</span><h3>Contagem compacta</h3><p>Para números curtos, use contagem tabular; a forma circular é opcional e indicada para um único dígito.</p><span class="fs-badge fs-badge-count fs-badge-danger fs-u-mr-2" aria-label="12 notificações não lidas">12</span><span class="fs-badge fs-badge-count fs-badge-count-circle fs-badge-primary" aria-label="1 tarefa pendente">1</span></article>
74
- <article class="demo-card"><span class="demo-card-icon" aria-hidden="true">!</span><h3>Mensagem contextual</h3><p>Quando há explicação ou próxima ação, complemente o badge com um Alert.</p><div class="fs-alert fs-alert-warning" role="status">Atenção: revise o cadastro antes de publicar.</div></article>
75
- </div>
76
- </section>
77
-
78
- <section class="demo-section" aria-labelledby="playground-title">
79
- <div class="demo-section-heading"><div><h2 id="playground-title">Laboratório de variantes</h2><p>Compare cor, peso visual, indicador, contagem, split e tamanho usando a mesma marcação pública documentada.</p></div><span class="fs-badge fs-badge-outline-success">ao vivo</span></div>
80
- <div class="demo-playground"><div class="demo-playground-grid"><div>
81
- <div class="demo-demo-group"><h3>Pesos visuais</h3><p>Variantes sólidas destacam; soft e outline reduzem o peso para metadados e estados recorrentes.</p><div class="demo-sample"><span class="demo-sample-label">Neutro e sólido</span><span class="fs-badge">Padrão</span><span class="fs-badge fs-badge-primary">Primary</span><span class="fs-badge fs-badge-success">Success</span><span class="fs-badge fs-badge-warning">Warning</span><span class="fs-badge fs-badge-danger">Danger</span><span class="fs-badge fs-badge-info">Info</span></div><div class="demo-sample"><span class="demo-sample-label">Soft e outline</span><span class="fs-badge fs-badge-soft-primary">Em revisão</span><span class="fs-badge fs-badge-soft-success fs-badge-dot">Disponível</span><span class="fs-badge fs-badge-outline-warning">Beta</span><span class="fs-badge fs-badge-outline-danger">Restrito</span></div></div>
82
- <div class="demo-demo-group"><h3>Contagem e indicadores</h3><p>O texto continua carregando o significado; a forma circular é apenas uma compactação visual.</p><div class="demo-sample"><span class="demo-sample-label">Status e contagem</span><span class="fs-badge fs-badge-soft-info fs-badge-dot">Sincronizando</span><span class="fs-badge fs-badge-count fs-badge-danger" aria-label="12 notificações não lidas">12</span><span class="fs-badge fs-badge-count fs-badge-primary">99+</span><span class="fs-badge fs-badge-count fs-badge-count-circle fs-badge-success" aria-label="1 notificação não lida">1</span></div></div>
83
- <div class="demo-demo-group"><h3>Rótulo e valor</h3><p>O split mantém os segmentos conectados e aceita o mesmo raio pequeno do sistema.</p><div class="demo-sample"><span class="demo-sample-label">Split</span><span class="fs-badge-split fs-badge-split-primary"><span class="fs-badge-split-label">New</span><span class="fs-badge-split-value">0.7.1</span></span><span class="fs-badge-split fs-badge-split-success"><span class="fs-badge-split-label">Deploy</span><span class="fs-badge-split-value">Pronto</span></span><span class="fs-badge-split fs-badge-split-warning fs-badge-sm"><span class="fs-badge-split-label">API</span><span class="fs-badge-split-value">Beta</span></span></div></div>
84
- </div><aside class="demo-status" aria-labelledby="status-title"><div><h3 id="status-title">Contrato do componente</h3><p>Badge é estático, não entra no Tab e não substitui botão, filtro ou mensagem de erro.</p></div><p class="demo-status-output" id="demo-status" role="status" aria-live="polite">Demonstração pronta.</p><pre class="demo-code"><code>.fs-badge
85
- .fs-badge-{color}
86
- .fs-badge-soft-{color}
87
- .fs-badge-outline-{color}
88
- .fs-badge-dot
89
- .fs-badge-count
90
- .fs-badge-count-circle
91
- .fs-badge-split
92
-
93
- /* tokens locais */
94
- --fs-badge-radius
95
- --fs-badge-padding-inline</code></pre></aside></div></div>
96
- </section>
97
-
98
- <section class="demo-section" aria-labelledby="sizes-title"><div class="demo-section-heading"><div><h2 id="sizes-title">Tamanhos, tokens e temas</h2><p>As classes de tamanho preservam a mesma semântica; os tokens locais permitem ajustes pontuais sem CSS paralelo.</p></div></div><div class="demo-reference"><div><h2>Escala visual</h2><p>Use o tamanho pequeno em tabelas e o grande apenas quando o badge precisar acompanhar uma hierarquia maior.</p><div class="demo-chip-row"><span class="fs-badge fs-badge-primary fs-badge-sm">Small</span><span class="fs-badge fs-badge-primary">Default</span><span class="fs-badge fs-badge-primary fs-badge-lg">Large</span></div><p class="demo-note">O raio padrão usa <code>--fs-radius-sm</code>; o count circular é opt-in para valores curtos.</p></div><div><h2>Contratos preservados</h2><ul><li>Texto e contexto não dependem apenas de cor.</li><li>Badges estáticos não recebem foco de teclado.</li><li>Contagens significativas podem receber <code>aria-label</code>.</li><li>Soft e outline devem ser conferidos em claro e escuro.</li><li>RTL usa propriedades lógicas sem duplicar estilos.</li></ul></div></div></section>
99
- </main>
100
- <script>
101
- const resetButton = document.getElementById("reset-demo");
102
- const directionButton = document.getElementById("toggle-direction");
103
- const page = document.querySelector(".demo-page");
104
- const status = document.getElementById("demo-status");
105
- resetButton.addEventListener("click", () => { page.setAttribute("dir", "ltr"); directionButton.setAttribute("aria-pressed", "false"); directionButton.textContent = "Testar RTL"; status.textContent = "Demonstração restaurada em LTR."; });
106
- directionButton.addEventListener("click", () => { const rtl = page.getAttribute("dir") !== "rtl"; page.setAttribute("dir", rtl ? "rtl" : "ltr"); directionButton.setAttribute("aria-pressed", String(rtl)); directionButton.textContent = rtl ? "Voltar para LTR" : "Testar RTL"; status.textContent = rtl ? "Direção RTL ativada." : "Direção LTR ativada."; });
107
- </script>
108
- </body>
109
- </html>
package/mockup/examples/buttons.html DELETED
@@ -1,58 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mockup - Buttons</title>
7
-
8
- <!-- STYLES IMPORT -->
9
- <link rel="stylesheet" href="../../dist/css/fonts.css">
10
- <link rel="stylesheet" href="../../dist/css/components.css">
11
- <link rel="stylesheet" href="../../dist/css/helpers.css">
12
- <style>
13
- .theme-panel {
14
- padding: 24px;
15
- }
16
-
17
- html[data-theme="dark"] .theme-panel {
18
- color: var(--fs-color-text);
19
- background-color: var(--fs-color-surface);
20
- }
21
- </style>
22
- <link rel="stylesheet" href="../assets/example-theme.css">
23
- <script src="../assets/example-theme.js"></script>
24
- </head>
25
- <body>
26
-
27
- <div class="theme-panel">
28
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Neutro</p>
29
- <button type="button" class="fs-btn">Botão</button>
30
-
31
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Sólidos</p>
32
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2">Primary</button>
33
- <button type="button" class="fs-btn fs-btn-success fs-u-mr-2">Success</button>
34
- <button type="button" class="fs-btn fs-btn-warning fs-u-mr-2">Warning</button>
35
- <button type="button" class="fs-btn fs-btn-danger fs-u-mr-2">Danger</button>
36
- <button type="button" class="fs-btn fs-btn-info">Info</button>
37
-
38
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Outline</p>
39
- <button type="button" class="fs-btn fs-btn-outline-primary fs-u-mr-2">Primary</button>
40
- <button type="button" class="fs-btn fs-btn-outline-success fs-u-mr-2">Success</button>
41
- <button type="button" class="fs-btn fs-btn-outline-warning fs-u-mr-2">Warning</button>
42
- <button type="button" class="fs-btn fs-btn-outline-danger fs-u-mr-2">Danger</button>
43
- <button type="button" class="fs-btn fs-btn-outline-info">Info</button>
44
-
45
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Tamanhos</p>
46
- <button type="button" class="fs-btn fs-btn-primary fs-btn-sm fs-u-mr-2">Small</button>
47
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2">Default</button>
48
- <button type="button" class="fs-btn fs-btn-primary fs-btn-lg">Large</button>
49
-
50
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Desabilitado</p>
51
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" disabled>Button disabled</button>
52
- <a href="#" class="fs-btn fs-btn-primary is-disabled" aria-disabled="true">Link disabled</a>
53
- </div>
54
-
55
-
56
-
57
- </body>
58
- </html>