fokus-styles 2.4.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 (212) hide show
  1. package/dist/css/components.css +561 -83
  2. package/dist/css/components.min.css +1 -1
  3. package/dist/css/fokus-components.css +561 -83
  4. package/dist/css/fokus-components.min.css +1 -1
  5. package/dist/css/fokus-rtl.css +697 -83
  6. package/dist/css/fokus-rtl.min.css +1 -1
  7. package/dist/css/fokus-utilities.css +136 -0
  8. package/dist/css/fokus-utilities.min.css +1 -1
  9. package/dist/css/fokus.css +996 -258
  10. package/dist/css/fokus.min.css +1 -1
  11. package/dist/css/forms.css +300 -176
  12. package/dist/css/forms.min.css +1 -1
  13. package/dist/css/helpers.css +136 -0
  14. package/dist/css/helpers.min.css +1 -1
  15. package/dist/js/fokus.js +270 -25
  16. package/dist/js/fokus.min.js +18 -18
  17. package/package.json +17 -15
  18. package/packages/fokus-components/scss/components/_alerts.scss +128 -6
  19. package/packages/fokus-components/scss/components/_badges.scss +26 -10
  20. package/packages/fokus-components/scss/components/_index.scss +1 -0
  21. package/packages/fokus-components/scss/components/_popover.scss +131 -21
  22. package/packages/fokus-components/scss/components/_responsive.scss +23 -0
  23. package/packages/fokus-components/scss/components/_tag.scss +37 -14
  24. package/packages/fokus-components/scss/components/_toasts.scss +156 -11
  25. package/packages/fokus-components/scss/components/_tooltips.scss +70 -18
  26. package/packages/fokus-components/scss/forms/_check-radio-switch.scss +313 -215
  27. package/packages/fokus-components/scss/forms/_forms.scss +16 -0
  28. package/packages/fokus-js/js/carousel.d.ts +4 -0
  29. package/packages/fokus-js/js/carousel.js +8 -0
  30. package/packages/fokus-js/js/core/positioning.js +18 -9
  31. package/packages/fokus-js/js/dropdown.d.ts +4 -0
  32. package/packages/fokus-js/js/dropdown.js +7 -0
  33. package/packages/fokus-js/js/popover.js +26 -1
  34. package/packages/fokus-js/js/tabs.d.ts +3 -0
  35. package/packages/fokus-js/js/tabs.js +5 -0
  36. package/packages/fokus-js/js/tag.js +17 -0
  37. package/packages/fokus-js/js/toast.js +77 -3
  38. package/packages/fokus-js/js/tooltip.d.ts +8 -1
  39. package/packages/fokus-js/js/tooltip.js +106 -13
  40. package/packages/fokus-utilities/scss/utilities/_api.scss +48 -0
  41. package/CHANGELOG.md +0 -910
  42. package/dist/css/components.css.map +0 -1
  43. package/dist/css/components.min.css.map +0 -1
  44. package/dist/css/fokus-components.css.map +0 -1
  45. package/dist/css/fokus-components.min.css.map +0 -1
  46. package/dist/css/fokus-core.css.map +0 -1
  47. package/dist/css/fokus-core.min.css.map +0 -1
  48. package/dist/css/fokus-dark.css.map +0 -1
  49. package/dist/css/fokus-dark.min.css.map +0 -1
  50. package/dist/css/fokus-rtl.css.map +0 -1
  51. package/dist/css/fokus-rtl.min.css.map +0 -1
  52. package/dist/css/fokus-utilities.css.map +0 -1
  53. package/dist/css/fokus-utilities.min.css.map +0 -1
  54. package/dist/css/fokus.css.map +0 -1
  55. package/dist/css/fokus.min.css.map +0 -1
  56. package/dist/css/fonts.css.map +0 -1
  57. package/dist/css/fonts.min.css.map +0 -1
  58. package/dist/css/forms.css.map +0 -1
  59. package/dist/css/forms.min.css.map +0 -1
  60. package/dist/css/helpers.css.map +0 -1
  61. package/dist/css/helpers.min.css.map +0 -1
  62. package/dist/css/layout.css.map +0 -1
  63. package/dist/css/layout.min.css.map +0 -1
  64. package/dist/js/fokus.js.map +0 -7
  65. package/dist/js/fokus.min.js.map +0 -7
  66. package/docs/README.md +0 -86
  67. package/docs/comparison.md +0 -124
  68. package/docs/components/accordion.md +0 -104
  69. package/docs/components/alert-dialog.md +0 -99
  70. package/docs/components/alert.md +0 -59
  71. package/docs/components/avatar.md +0 -13
  72. package/docs/components/badge.md +0 -82
  73. package/docs/components/breadcrumb.md +0 -93
  74. package/docs/components/button-group.md +0 -13
  75. package/docs/components/button.md +0 -98
  76. package/docs/components/card.md +0 -111
  77. package/docs/components/carousel.md +0 -167
  78. package/docs/components/checkbox.md +0 -97
  79. package/docs/components/close-button.md +0 -13
  80. package/docs/components/code.md +0 -13
  81. package/docs/components/collapse.md +0 -78
  82. package/docs/components/combobox.md +0 -123
  83. package/docs/components/command-palette.md +0 -131
  84. package/docs/components/datatable.md +0 -173
  85. package/docs/components/datepicker.md +0 -137
  86. package/docs/components/divider.md +0 -57
  87. package/docs/components/dropdown.md +0 -103
  88. package/docs/components/empty-state.md +0 -65
  89. package/docs/components/file-upload-advanced.md +0 -116
  90. package/docs/components/file-upload.md +0 -93
  91. package/docs/components/icon-link.md +0 -13
  92. package/docs/components/input-group.md +0 -73
  93. package/docs/components/input.md +0 -90
  94. package/docs/components/list-group.md +0 -13
  95. package/docs/components/modal.md +0 -120
  96. package/docs/components/navbar.md +0 -74
  97. package/docs/components/nested-menu.md +0 -90
  98. package/docs/components/notification-center.md +0 -116
  99. package/docs/components/offcanvas.md +0 -102
  100. package/docs/components/pagination.md +0 -145
  101. package/docs/components/placeholder.md +0 -13
  102. package/docs/components/popover.md +0 -105
  103. package/docs/components/progress.md +0 -126
  104. package/docs/components/radio.md +0 -70
  105. package/docs/components/range.md +0 -83
  106. package/docs/components/rating.md +0 -91
  107. package/docs/components/ratio.md +0 -13
  108. package/docs/components/scrollspy.md +0 -13
  109. package/docs/components/segmented-control.md +0 -82
  110. package/docs/components/select.md +0 -89
  111. package/docs/components/skeleton.md +0 -70
  112. package/docs/components/stepper.md +0 -107
  113. package/docs/components/switch.md +0 -75
  114. package/docs/components/table.md +0 -90
  115. package/docs/components/tabs.md +0 -104
  116. package/docs/components/tag.md +0 -129
  117. package/docs/components/tile.md +0 -112
  118. package/docs/components/timeline.md +0 -78
  119. package/docs/components/toast.md +0 -95
  120. package/docs/components/tooltip.md +0 -77
  121. package/docs/components/tree-view.md +0 -118
  122. package/docs/contributing/contributing.md +0 -18
  123. package/docs/getting-started/installation.md +0 -70
  124. package/docs/getting-started/usage.md +0 -105
  125. package/docs/guides/accessibility.md +0 -102
  126. package/docs/guides/charts.md +0 -73
  127. package/docs/guides/dark-mode.md +0 -90
  128. package/docs/guides/icons.md +0 -99
  129. package/docs/guides/javascript-api.md +0 -9
  130. package/docs/guides/layout-advanced.md +0 -118
  131. package/docs/guides/migration-clarus-to-fokus.md +0 -48
  132. package/docs/guides/migration-external.md +0 -123
  133. package/docs/guides/migration-v1.md +0 -63
  134. package/docs/guides/print.md +0 -30
  135. package/docs/guides/rtl-and-system-preferences.md +0 -28
  136. package/docs/guides/theming.md +0 -140
  137. package/docs/guides/utility-api.md +0 -9
  138. package/docs/prompts/prompt-plan.md +0 -45
  139. package/docs/reference/accessibility-matrix.md +0 -77
  140. package/docs/reference/browser-support.md +0 -75
  141. package/docs/reference/contrast-report.md +0 -50
  142. package/docs/reference/definitions.md +0 -864
  143. package/docs/reference/design-tokens.md +0 -194
  144. package/docs/reference/scss-architecture.md +0 -227
  145. package/docs/reference/size-baseline.json +0 -34
  146. package/docs/reference/stability.md +0 -89
  147. package/docs/showcase.md +0 -25
  148. package/mockup/README.md +0 -41
  149. package/mockup/assets/carousel-planning.png +0 -0
  150. package/mockup/assets/carousel-workspace.png +0 -0
  151. package/mockup/assets/example-theme.css +0 -8
  152. package/mockup/assets/example-theme.js +0 -11
  153. package/mockup/assets/showcase-contracts.js +0 -84
  154. package/mockup/assets/showcase.css +0 -91
  155. package/mockup/assets/showcase.js +0 -724
  156. package/mockup/content-data.html +0 -9
  157. package/mockup/examples/accordion-tabs-toast.html +0 -149
  158. package/mockup/examples/alert-dialog.html +0 -84
  159. package/mockup/examples/alerts.html +0 -41
  160. package/mockup/examples/badges-alerts.html +0 -77
  161. package/mockup/examples/buttons.html +0 -58
  162. package/mockup/examples/cards.html +0 -132
  163. package/mockup/examples/carousel.html +0 -126
  164. package/mockup/examples/charts.html +0 -102
  165. package/mockup/examples/check-radio-switch.html +0 -144
  166. package/mockup/examples/collapse.html +0 -69
  167. package/mockup/examples/combobox.html +0 -60
  168. package/mockup/examples/command-palette.html +0 -64
  169. package/mockup/examples/datatable.html +0 -113
  170. package/mockup/examples/datepicker.html +0 -62
  171. package/mockup/examples/divider.html +0 -45
  172. package/mockup/examples/dropdown-tooltip.html +0 -77
  173. package/mockup/examples/empty-state.html +0 -56
  174. package/mockup/examples/file-drop.html +0 -74
  175. package/mockup/examples/file-upload-advanced.html +0 -68
  176. package/mockup/examples/forms-advanced.html +0 -77
  177. package/mockup/examples/hover-card.html +0 -86
  178. package/mockup/examples/icons.html +0 -157
  179. package/mockup/examples/input-group.html +0 -74
  180. package/mockup/examples/js-foundation.html +0 -215
  181. package/mockup/examples/layout.html +0 -134
  182. package/mockup/examples/modal-select.html +0 -127
  183. package/mockup/examples/nested-menu.html +0 -73
  184. package/mockup/examples/notification-center.html +0 -86
  185. package/mockup/examples/offcanvas-popover.html +0 -133
  186. package/mockup/examples/pagination-breadcrumbs.html +0 -92
  187. package/mockup/examples/range.html +0 -69
  188. package/mockup/examples/rating.html +0 -103
  189. package/mockup/examples/segmented-control.html +0 -96
  190. package/mockup/examples/skeletons.html +0 -82
  191. package/mockup/examples/spinner-progress.html +0 -130
  192. package/mockup/examples/stepper.html +0 -119
  193. package/mockup/examples/tables-navbar.html +0 -89
  194. package/mockup/examples/tag.html +0 -105
  195. package/mockup/examples/theming.html +0 -68
  196. package/mockup/examples/tile.html +0 -107
  197. package/mockup/examples/timeline.html +0 -108
  198. package/mockup/examples/tree-view.html +0 -68
  199. package/mockup/feedback-actions.html +0 -9
  200. package/mockup/forms.html +0 -13
  201. package/mockup/foundations.html +0 -7
  202. package/mockup/kitchen-sink.html +0 -696
  203. package/mockup/navigation-disclosure.html +0 -11
  204. package/mockup/overlays-commands.html +0 -12
  205. package/mockup/templates/README.md +0 -20
  206. package/mockup/templates/admin.html +0 -334
  207. package/mockup/templates/auth.html +0 -234
  208. package/mockup/templates/dashboard.html +0 -442
  209. package/mockup/templates/landing.html +0 -397
  210. package/packages/fokus-icons/package.json +0 -46
  211. package/scripts/migrate-fokus-map.json +0 -1366
  212. 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,41 +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>Mockup - 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
- <style>
11
- .theme-panel { padding: 24px; }
12
-
13
- html[data-theme="dark"] .theme-panel {
14
- color: var(--fs-color-text);
15
- background-color: var(--fs-color-surface);
16
- }
17
-
18
- .fs-alert { max-width: 480px; }
19
- </style>
20
- <link rel="stylesheet" href="../assets/example-theme.css">
21
- <script src="../assets/example-theme.js"></script>
22
- </head>
23
- <body>
24
- <main class="theme-panel">
25
- <h1 class="fs-u-fs-lg fs-u-fw-medium">Alertas</h1>
26
- <p class="fs-u-fs-sm fs-u-mt-1 fs-u-mb-3">Mensagens persistentes com bordas semânticas vivas e cantos retos.</p>
27
-
28
- <div class="fs-alert fs-u-mb-2">Alerta neutro: mensagem informativa padrão sem cor de estado.</div>
29
- <div class="fs-alert fs-alert-primary fs-u-mb-2">Alerta primary: ação recomendada ou destaque neutro de marca.</div>
30
- <div class="fs-alert fs-alert-success fs-u-mb-2">Alerta success: operação concluída com sucesso.</div>
31
- <div class="fs-alert fs-alert-warning fs-u-mb-2">Alerta warning: atenção, revise antes de continuar.</div>
32
- <div class="fs-alert fs-alert-danger fs-u-mb-2">Alerta danger: falha ao processar a solicitação.</div>
33
- <div class="fs-alert fs-alert-info">Alerta info: informação adicional relevante para o usuário.</div>
34
- </main>
35
- <script>
36
- if (new URLSearchParams(window.location.search).get("theme") === "dark") {
37
- document.documentElement.setAttribute("data-theme", "dark");
38
- }
39
- </script>
40
- </body>
41
- </html>
package/mockup/examples/badges-alerts.html DELETED
@@ -1,77 +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 - Badges & Alerts</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
- </style>
23
- <link rel="stylesheet" href="../assets/example-theme.css">
24
- <script src="../assets/example-theme.js"></script>
25
- </head>
26
- <body>
27
-
28
- <div class="theme-panel">
29
- <h2 class="fs-u-fs-lg fs-u-fw-medium">Badges e alertas</h2>
30
-
31
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Badges — neutro e sólidos</p>
32
- <span class="fs-badge fs-u-mr-2">Badge</span>
33
- <span class="fs-badge fs-badge-primary fs-u-mr-2">Primary</span>
34
- <span class="fs-badge fs-badge-success fs-u-mr-2">Success</span>
35
- <span class="fs-badge fs-badge-warning fs-u-mr-2">Warning</span>
36
- <span class="fs-badge fs-badge-danger fs-u-mr-2">Danger</span>
37
- <span class="fs-badge fs-badge-info">Info</span>
38
-
39
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Badges — soft e outline</p>
40
- <span class="fs-badge fs-badge-soft-primary fs-u-mr-2">Em revisão</span>
41
- <span class="fs-badge fs-badge-soft-success fs-badge-dot fs-u-mr-2">Disponível</span>
42
- <span class="fs-badge fs-badge-outline-warning fs-u-mr-2">Beta</span>
43
- <span class="fs-badge fs-badge-outline-danger">Restrito</span>
44
-
45
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Badges — status e contagem</p>
46
- <span class="fs-badge fs-badge-soft-info fs-badge-dot fs-u-mr-2">Sincronizando</span>
47
- <span class="fs-badge fs-badge-count fs-badge-danger fs-u-mr-2" aria-label="12 notificações não lidas">12</span>
48
- <span class="fs-badge fs-badge-count fs-badge-primary">99+</span>
49
-
50
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Badges — rótulo e valor</p>
51
- <span class="fs-badge-split fs-badge-split-primary fs-u-mr-2">
52
- <span class="fs-badge-split-label">New</span>
53
- <span class="fs-badge-split-value">0.7.1</span>
54
- </span>
55
- <span class="fs-badge-split fs-badge-split-success fs-u-mr-2">
56
- <span class="fs-badge-split-label">Deploy</span>
57
- <span class="fs-badge-split-value">Pronto</span>
58
- </span>
59
- <span class="fs-badge-split fs-badge-split-warning fs-badge-sm">
60
- <span class="fs-badge-split-label">API</span>
61
- <span class="fs-badge-split-value">Beta</span>
62
- </span>
63
-
64
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Badges - tamanhos</p>
65
- <span class="fs-badge fs-badge-primary fs-badge-sm fs-u-mr-2">Small</span>
66
- <span class="fs-badge fs-badge-primary fs-u-mr-2">Default</span>
67
- <span class="fs-badge fs-badge-primary fs-badge-lg">Large</span>
68
-
69
- </div>
70
-
71
- <script>
72
- if (new URLSearchParams(window.location.search).get("theme") === "dark") {
73
- document.documentElement.setAttribute("data-theme", "dark");
74
- }
75
- </script>
76
- </body>
77
- </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>
package/mockup/examples/cards.html DELETED
@@ -1,132 +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 - Cards</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-wrap: wrap;
16
- gap: 16px;
17
- padding: 24px;
18
- background-color: var(--fs-color-subtle);
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
- .fs-card {
27
- width: 260px;
28
- }
29
- </style>
30
- <link rel="stylesheet" href="../assets/example-theme.css">
31
- <script src="../assets/example-theme.js"></script>
32
- </head>
33
- <body>
34
- <div class="theme-panel">
35
- <div class="fs-card">
36
- <div class="fs-card-header">
37
- <span class="fs-badge fs-badge-primary">Novo</span>
38
- </div>
39
- <div class="fs-card-body">
40
- <h3 class="fs-card-title">Título do card</h3>
41
- <p class="fs-card-subtitle">Subtítulo de apoio</p>
42
- <p class="fs-card-text">Texto de exemplo demonstrando a composição de header, body e footer do componente.</p>
43
- </div>
44
- <div class="fs-card-footer">
45
- <button type="button" class="fs-btn fs-btn-primary fs-btn-sm fs-u-mr-2">Confirmar</button>
46
- <button type="button" class="fs-btn fs-btn-outline-primary fs-btn-sm">Cancelar</button>
47
- </div>
48
- </div>
49
-
50
- <div class="fs-card">
51
- <div class="fs-card-header">
52
- <h3 class="fs-card-title">Card fechável</h3>
53
- <button type="button" class="fs-btn-close" aria-label="Fechar"></button>
54
- </div>
55
- <div class="fs-card-body">
56
- <p class="fs-card-text">card-header com título e botão de fechar alinhados nas pontas.</p>
57
- </div>
58
- </div>
59
-
60
- <div class="fs-card">
61
- <div class="fs-card-body">
62
- <h3 class="fs-card-title">Só body</h3>
63
- <p class="fs-card-text">Card sem header/footer, para conferir o raio nos quatro cantos.</p>
64
- </div>
65
- </div>
66
-
67
- <div class="fs-card fs-card-sm">
68
- <div class="fs-card-header">
69
- <span class="fs-badge fs-badge-sm fs-badge-success">Small</span>
70
- </div>
71
- <div class="fs-card-body">
72
- <p class="fs-card-text">card-sm: padding reduzido.</p>
73
- </div>
74
- <div class="fs-card-footer">
75
- <button type="button" class="fs-btn fs-btn-sm">OK</button>
76
- </div>
77
- </div>
78
-
79
- <div class="fs-card fs-card-lg">
80
- <div class="fs-card-header">
81
- <span class="fs-badge fs-badge-lg fs-badge-warning">Large</span>
82
- </div>
83
- <div class="fs-card-body">
84
- <p class="fs-card-text">card-lg: padding ampliado.</p>
85
- </div>
86
- <div class="fs-card-footer">
87
- <button type="button" class="fs-btn fs-btn-lg">OK</button>
88
- </div>
89
- </div>
90
-
91
- <div class="fs-card fs-u-shadow-sm">
92
- <div class="fs-card-body">
93
- <h3 class="fs-card-title">shadow-sm</h3>
94
- <p class="fs-card-text">Card + utilitário .shadow-sm, mantendo a borda.</p>
95
- </div>
96
- </div>
97
-
98
- <div class="fs-card fs-u-shadow">
99
- <div class="fs-card-body">
100
- <h3 class="fs-card-title">shadow</h3>
101
- <p class="fs-card-text">Utilitário .shadow (elevação média).</p>
102
- </div>
103
- </div>
104
-
105
- <div class="fs-card fs-u-shadow-lg">
106
- <div class="fs-card-body">
107
- <h3 class="fs-card-title">shadow-lg</h3>
108
- <p class="fs-card-text">Utilitário .shadow-lg (elevação alta, para overlays futuros).</p>
109
- </div>
110
- </div>
111
-
112
- <div class="fs-card fs-card-clickable">
113
- <div class="fs-card-body">
114
- <h3 class="fs-card-title"><a href="#" class="fs-stretched-link">Card clicável</a></h3>
115
- <p class="fs-card-text">card-clickable + .stretched-link: o card inteiro é a área de clique/foco, sem aninhar elementos interativos.</p>
116
- </div>
117
- </div>
118
-
119
- <div class="fs-card fs-card-horizontal" style="width: 360px;">
120
- <div class="fs-card-header">
121
- <span class="fs-badge fs-badge-info">Tag</span>
122
- </div>
123
- <div class="fs-card-body">
124
- <h3 class="fs-card-title">Card horizontal</h3>
125
- <p class="fs-card-text">card-horizontal: header vira coluna lateral, com raio e borda ajustados.</p>
126
- </div>
127
- </div>
128
- </div>
129
-
130
-
131
- </body>
132
- </html>