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/examples/tree-view.html DELETED
@@ -1,68 +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 - Tree View</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/forms.css">
12
- <link rel="stylesheet" href="../../dist/css/helpers.css">
13
- <style>
14
- .theme-panel {
15
- padding: 24px;
16
- }
17
-
18
- html[data-theme="dark"] .theme-panel {
19
- color: var(--fs-color-text);
20
- background-color: var(--fs-color-surface);
21
- }
22
-
23
- section {
24
- max-width: 320px;
25
- margin-bottom: 24px;
26
- }
27
- </style>
28
- <link rel="stylesheet" href="../assets/example-theme.css">
29
- <script src="../assets/example-theme.js"></script>
30
- </head>
31
- <body>
32
-
33
- <div class="theme-panel">
34
- <section>
35
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Tree View — navegue com as setas, Home/End, Enter/Espaço</p>
36
- <ul class="fs-tree" data-fs="tree-view" aria-label="Arquivos do projeto">
37
- <li aria-expanded="true">
38
- <span class="fs-tree-label">src</span>
39
- <ul>
40
- <li><span class="fs-tree-label">index.js</span></li>
41
- <li>
42
- <span class="fs-tree-label">components</span>
43
- <ul>
44
- <li><span class="fs-tree-label">Button.js</span></li>
45
- <li><span class="fs-tree-label">Modal.js</span></li>
46
- </ul>
47
- </li>
48
- </ul>
49
- </li>
50
- <li>
51
- <span class="fs-tree-label">docs</span>
52
- <ul>
53
- <li><span class="fs-tree-label">guia.md</span></li>
54
- </ul>
55
- </li>
56
- <li><span class="fs-tree-label">README.md</span></li>
57
- <li><span class="fs-tree-label">package.json</span></li>
58
- </ul>
59
- </section>
60
- </div>
61
-
62
-
63
-
64
- <!-- SCRIPTS IMPORT -->
65
- <script src="../../dist/js/fokus.js"></script>
66
-
67
- </body>
68
- </html>
package/mockup/feedback-actions.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 — Ações e feedback</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">Ações e feedback</h1><p class="showcase-lead">Controles de ação, mensagens de estado e indicadores de carregamento. Avalie sempre o resultado visual e o comportamento por teclado.</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":"button","title":"Button","description":"Ações principais, secundárias, destrutivas e de confirmação em uma interface.","use":"Use para iniciar uma ação; prefira link para navegação.","api":".fs-btn, variantes semânticas, outline, tamanhos e disabled.","a11y":"Use button para ações e aria-disabled em links inativos.","states":"Hover, focus-visible, disabled, tamanhos e variantes.","source":"examples/buttons.html","height":820},
3
- {"id":"badge","title":"Badge","description":"Rótulos compactos para status, contagens e classificação.","use":"Complemente informação breve; não comunique estado crítico somente por cor.","api":".fs-badge e variantes semânticas.","a11y":"Inclua contexto textual quando a cor for significativa.","states":"Cores semânticas, contagem e combinação com alert.","source":"examples/badges-alerts.html","height":780},
4
- {"id":"alert","title":"Alert","description":"Mensagens persistentes de informação, sucesso, atenção ou erro.","use":"Use para feedback contextual próximo ao conteúdo afetado.","api":".fs-alert e modificadores de variante.","a11y":"Use role=alert apenas para mensagens urgentes e não excessivas.","states":"Variantes semânticas, ícone e ação de fechamento.","source":"examples/alerts.html","height":720},
5
- {"id":"tag","title":"Tag","description":"Etiquetas removíveis ou informativas para filtros, categorias e seleções.","use":"Represente itens discretos, não uma ação primária.","api":".fs-tag, variantes e controle de remoção.","a11y":"O botão de remover precisa de nome acessível com o rótulo da tag.","states":"Cores, tamanhos, removível e estado desabilitado.","source":"examples/tag.html","height":800},
6
- {"id":"empty-state","title":"Empty state","description":"Orientação quando uma região não possui conteúdo para exibir.","use":"Explique a causa e ofereça uma ação útil quando existir.","api":".fs-empty-state e seus elementos internos.","a11y":"Mantenha título e ação compreensíveis fora do contexto visual.","states":"Sem dados, busca sem resultado e primeira utilização.","source":"examples/empty-state.html","height":620},
7
- {"id":"skeleton","title":"Skeleton","description":"Espaço reservado durante carregamento, evitando saltos de layout.","use":"Use em conteúdo previsível e temporário; prefira feedback textual em esperas longas.","api":".fs-skeleton e modificadores de forma.","a11y":"Oculte decoração de leitores de tela e anuncie carregamento na região.","states":"Texto, avatar, card e movimento reduzido.","source":"examples/skeletons.html","height":650},
8
- {"id":"progress","title":"Spinner e progress","description":"Indicadores para operação em andamento e progresso mensurável.","use":"Spinner para espera indeterminada; progress para avanço conhecido.","api":".fs-spinner, .fs-progress e atributos ARIA de progresso.","a11y":"Use aria-valuenow/min/max e texto de status quando necessário.","states":"Tamanhos, variantes, indeterminado e concluído.","source":"examples/spinner-progress.html","height":1900}
9
- ]</script><script src="../dist/js/fokus.js"></script><script src="assets/showcase-contracts.js"></script><script src="assets/showcase.js"></script></body></html>
package/mockup/forms.html DELETED
@@ -1,13 +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 — Formulários</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">Formulários e seleção</h1><p class="showcase-lead">Campos, escolhas, entrada avançada e uploads. Os exemplos incluem estados de validação e a associação correta de labels, ajuda e mensagens.</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":"input","title":"Input","description":"Campos de texto, e-mail, senha e textarea com ajuda e validação.","use":"Colete uma informação por campo com label persistente.","api":".fs-form-control, .is-valid, .is-invalid e texto de ajuda.","a11y":"Associe label, descrição e erro por for/id e aria-describedby.","states":"Foco, disabled, readonly, sucesso e erro.","source":"examples/forms-advanced.html","height":900},
3
- {"id":"select","title":"Select","description":"Seleção nativa estilizada para opções conhecidas e limitadas.","use":"Use quando a lista é curta; use combobox para busca.","api":".fs-select, option e atributos nativos.","a11y":"Mantenha label explícito e não simule select nativo sem necessidade.","states":"Placeholder, disabled, erro e integração em modal.","source":"examples/modal-select.html","height":820},
4
- {"id":"input-group","title":"Input group","description":"Campo combinado com prefixos, sufixos e ações relacionadas.","use":"Agrupe somente controles que fazem parte da mesma entrada.","api":".fs-input-group e seus addons.","a11y":"Não esconda a finalidade do campo atrás de ícone sem rótulo.","states":"Prefixo, sufixo, botão e validação.","source":"examples/input-group.html","height":700},
5
- {"id":"check-radio-switch","title":"Checkbox, radio e switch","description":"Controles de escolha múltipla, única e alternância de preferência.","use":"Checkbox para escolhas independentes, radio para exclusivas e switch para estado imediato.","api":".fs-check, .fs-radio e .fs-switch.","a11y":"Agrupe opções em fieldset/legend e mantenha controles operáveis por teclado.","states":"Marcado, indeterminado, disabled e erro.","source":"examples/check-radio-switch.html","height":980},
6
- {"id":"range","title":"Range","description":"Entrada numérica contínua com limites conhecidos.","use":"Use quando a aproximação visual é mais útil que digitação precisa.","api":"input[type=range] e classes FokusStyles associadas.","a11y":"Forneça label, mínimo, máximo e valor atual compreensível.","states":"Valores, disabled e marcas de referência.","source":"examples/range.html","height":700},
7
- {"id":"segmented-control","title":"Segmented control","description":"Alternância rápida entre poucas opções relacionadas.","use":"Use para modos mutuamente exclusivos de uma mesma visão.","api":".fs-segmented-control e controles internos.","a11y":"Use radio/tab conforme a semântica; mantenha estado selecionado anunciado.","states":"Selecionado, foco, disabled e ícones.","source":"examples/segmented-control.html","height":760},
8
- {"id":"rating","title":"Rating","description":"Avaliação ordinal com estrelas ou equivalentes.","use":"Use para uma escala pequena e familiar; exponha também o valor textual.","api":".fs-rating e controles internos.","a11y":"Disponibilize valor e instrução para teclado e leitor de tela.","states":"Leitura, edição, meio valor e disabled.","source":"examples/rating.html","height":1100},
9
- {"id":"datepicker","title":"Date e time","description":"Entradas nativas de data e horário com acabamento do FokusStyles.","use":"Use o controle nativo para preservar suporte de plataforma.","api":"input[type=date], input[type=time] e .fs-form-control.","a11y":"Não substitua o teclado nativo; identifique formato esperado quando necessário.","states":"Data, hora, mínimo/máximo, erro e disabled.","source":"examples/datepicker.html","height":720},
10
- {"id":"combobox","title":"Combobox","description":"Seleção pesquisável para conjuntos maiores de opções.","use":"Use quando filtrar opções reduz esforço sem perder escolha explícita.","api":".fs-combobox, data-* e API JavaScript do componente.","a11y":"Preserve roles, aria-expanded, active descendant e navegação por setas.","states":"Aberto, filtrado, vazio, teclado e disabled.","source":"examples/combobox.html","height":800},
11
- {"id":"file-upload","title":"File upload","description":"Upload básico, área de arrastar e fluxo avançado de arquivos.","use":"Use o input nativo como base e complemente com feedback de arquivo selecionado.","api":".fs-file-drop, .fs-file-upload e atributos accept/multiple.","a11y":"Mantenha input alcançável e anuncie progresso, erro e remoção.","states":"Clique, drag and drop, múltiplos, carregando e erro.","source":"examples/file-upload-advanced.html","height":900}
12
- ,{"id":"file-drop","title":"File drop básico","description":"Área simples para selecionar ou arrastar um arquivo, apropriada a formulários curtos.","use":"Use quando o fluxo não requer fila, progresso ou edição de arquivos.","api":".fs-file-drop, input[type=file] e accept.","a11y":"A área visual complementa, mas não substitui, o input de arquivo alcançável.","states":"Clique, arrastar, arquivo selecionado e erro de formato.","source":"examples/file-drop.html","height":680}
13
- ]</script><script src="../dist/js/fokus.js"></script><script src="assets/showcase-contracts.js"></script><script src="assets/showcase.js"></script></body></html>
package/mockup/foundations.html DELETED
@@ -1,7 +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 — Fundamentos</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">Fundamentos e infraestrutura</h1><p class="showcase-lead">Tokens, layout, temas, ícones e utilitários JavaScript que sustentam os componentes. Cada preview é executável; o código mostrado é extraído do próprio exemplo.</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":"layout","title":"Layout","description":"Estruturas de página, grid, containers e comportamento responsivo para compor interfaces previsíveis.","use":"Use como base de páginas e regiões; não use utilitários para substituir semântica HTML.","api":".fs-container, .fs-row, .fs-col-* e utilitários fs-u-*.","a11y":"Mantenha landmarks, ordem lógica de leitura e títulos hierárquicos.","states":"Breakpoints, densidade e regiões de conteúdo.","source":"examples/layout.html","height":900},
3
- {"id":"theming","title":"Temas e marcas","description":"Alternância de data-fs-theme, compatibilidade data-theme e data-fs-brand sobre os tokens semânticos do FokusStyles.","use":"Use para personalizar a aparência sem alterar markup de componentes.","api":"data-fs-theme=light|dark|auto, data-theme e data-fs-brand; tokens --fs-*.","a11y":"Verifique contraste após qualquer marca personalizada.","states":"Claro, escuro, automático e marcas alternativas.","source":"examples/theming.html","height":650},
4
- {"id":"icons","title":"Ícones","description":"Catálogo e uso de ícones com rótulos acessíveis e alinhamento consistente.","use":"Use ícones para reforçar ações conhecidas; mantenha texto quando houver ambiguidade.","api":"Classes de ícone e utilitários de tamanho publicados.","a11y":"Ícones decorativos são ocultos; botões somente com ícone recebem nome acessível.","states":"Tamanhos, cores e ícones em controles.","source":"examples/icons.html","height":1200},
5
- {"id":"divider","title":"Divider","description":"Separadores visuais para organizar grupos relacionados sem substituir hierarquia de conteúdo.","use":"Separe blocos próximos em listas, painéis e formulários.","api":".fs-divider e modificadores de orientação.","a11y":"Não use o separador como único indicador de mudança de assunto.","states":"Horizontal, vertical e espaçamentos adjacentes.","source":"examples/divider.html","height":520},
6
- {"id":"js-foundation","title":"Infraestrutura JavaScript","description":"Posicionamento, foco, overlays, temas, validação e transições reutilizados pelos componentes interativos.","use":"Use as APIs públicas apenas quando montar comportamento avançado fora dos componentes prontos.","api":"FokusStyles.core, Theme.set(), FormValidation, eventos fs:* e data-fs-toggle.","a11y":"Preserve foco, Escape, bloqueio de scroll, aria-invalid e preferência por movimento reduzido.","states":"Flip de posicionamento, focus trap, tema, validação, clique externo e transições.","source":"examples/js-foundation.html","height":1500}
7
- ]</script><script src="../dist/js/fokus.js"></script><script src="assets/showcase-contracts.js"></script><script src="assets/showcase.js"></script></body></html>