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/layout.html DELETED
@@ -1,134 +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 - Layout</title>
7
-
8
- <!-- STYLES IMPORT -->
9
- <link rel="stylesheet" href="../../dist/css/fonts.css">
10
- <link rel="stylesheet" href="../../dist/css/layout.css">
11
- <link rel="stylesheet" href="../../dist/css/forms.css">
12
- <link rel="stylesheet" href="../../dist/css/helpers.css">
13
- <link rel="stylesheet" href="../assets/example-theme.css">
14
- <script src="../assets/example-theme.js"></script>
15
- </head>
16
- <body>
17
-
18
- <div class="fs-container fs-u-p-2">
19
- <!-- Grid numerada de 12 colunas, com gutter via .g-3 -->
20
- <div class="fs-row fs-u-g-3">
21
- <div class="fs-col-md-8 fs-u-p-2">col-md-8</div>
22
- <div class="fs-col-md-4 fs-u-p-2">col-md-4</div>
23
- </div>
24
- <div class="fs-row fs-u-g-3 fs-u-mt-3">
25
- <div class="fs-col-4 fs-u-p-2">col-4</div>
26
- <div class="fs-col-4 fs-u-p-2">col-4</div>
27
- <div class="fs-col-4 fs-u-p-2">col-4</div>
28
- </div>
29
-
30
- <!-- Colunas de largura igual automática -->
31
- <div class="fs-row fs-u-gx-2 fs-u-mt-3">
32
- <div class="fs-col-sm fs-u-p-2">col 1</div>
33
- <div class="fs-col-md fs-u-p-2">col 2</div>
34
- <div class="fs-col fs-u-p-2">col 3</div>
35
- </div>
36
- <div class="fs-row fs-row-fluid fs-u-justify-content-start fs-u-mt-3">
37
- <div class="fs-col fs-col-fluid fs-u-p-2">col 1</div>
38
- </div>
39
- </div>
40
-
41
- <div class="fs-container-fluid fs-u-p-2">
42
- <div class="fs-form-row fs-u-mt-3 fs-u-gap-x-2">
43
- <div class="fs-form-col">
44
- <label for="input-text" class="fs-form-label fs-form-size-md">Nome completo</label>
45
- <input type="text" class="fs-form-control fs-form-size-xxl" id="input-text" placeholder="Enter text" value="Jorge Reis">
46
- <span class="fs-form-text fs-form-size-xxl info">This is a valid text input field.</span>
47
- </div>
48
- </div>
49
- <div class="fs-form-row fs-u-mt-3 fs-u-gap-x-2">
50
- <div class="fs-form-col">
51
- <label for="input-readonly" class="fs-form-label fs-form-size-md">Somente leitura</label>
52
- <input type="text" class="fs-form-control fs-form-size-xxl" id="input-readonly" value="Valor fixo" readonly>
53
- </div>
54
- </div>
55
- </div>
56
-
57
- <div class="fs-container-fluid fs-u-p-2 fs-u-mt-3">
58
- <!-- Utilitários de tipografia -->
59
- <p class="fs-u-text-center fs-u-fw-medium fs-u-fs-lg">Texto centralizado, peso medium, fonte lg</p>
60
- <p class="fs-u-text-uppercase fs-u-fs-sm">texto em uppercase, fonte sm</p>
61
- <p class="fs-u-text-truncate" style="max-width: 200px;">Texto longo o suficiente para ser truncado com reticências</p>
62
- <p class="fs-u-font-mono fs-u-fs-md">Texto em fonte monoespaçada</p>
63
- </div>
64
-
65
- <div class="fs-container-fluid fs-u-p-2 fs-u-mt-3">
66
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Stack — empilhamento vertical com gap consistente</p>
67
- <div class="fs-stack" style="max-width: 320px; background-color: var(--fs-color-subtle); padding: 12px;">
68
- <div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">Item 1</div>
69
- <div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">Item 2</div>
70
- <div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">Item 3</div>
71
- </div>
72
- <div class="fs-stack fs-stack-gap-1 fs-u-mt-2" style="max-width: 320px; background-color: var(--fs-color-subtle); padding: 12px;">
73
- <div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">Gap menor (fs-stack-gap-1)</div>
74
- <div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">Item 2</div>
75
- </div>
76
- </div>
77
-
78
- <div class="fs-container-fluid fs-u-p-2 fs-u-mt-3">
79
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Cluster — grupo horizontal com quebra automática</p>
80
- <div class="fs-cluster" style="background-color: var(--fs-color-subtle); padding: 12px;">
81
- <span class="fs-u-p-2" style="background-color: var(--fs-color-surface); border-radius: var(--fs-radius-sm);">Frontend</span>
82
- <span class="fs-u-p-2" style="background-color: var(--fs-color-surface); border-radius: var(--fs-radius-sm);">Design System</span>
83
- <span class="fs-u-p-2" style="background-color: var(--fs-color-surface); border-radius: var(--fs-radius-sm);">Acessibilidade</span>
84
- <span class="fs-u-p-2" style="background-color: var(--fs-color-surface); border-radius: var(--fs-radius-sm);">Performance</span>
85
- <span class="fs-u-p-2" style="background-color: var(--fs-color-surface); border-radius: var(--fs-radius-sm);">CSS</span>
86
- </div>
87
- </div>
88
-
89
- <div class="fs-container-fluid fs-u-p-2 fs-u-mt-3">
90
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Sidebar — aside com largura fixa + conteúdo flexível</p>
91
- <div class="fs-sidebar fs-sidebar-width-sm" style="background-color: var(--fs-color-subtle); padding: 12px;">
92
- <div class="fs-sidebar-aside fs-u-p-2" style="background-color: var(--fs-color-surface);">Aside (largura fixa)</div>
93
- <div class="fs-sidebar-content fs-u-p-2" style="background-color: var(--fs-color-surface);">Conteúdo (preenche o espaço restante e quebra pra baixo da aside quando o container fica estreito demais)</div>
94
- </div>
95
- <div class="fs-sidebar fs-sidebar-width-sm fs-sidebar-reverse fs-u-mt-2" style="background-color: var(--fs-color-subtle); padding: 12px;">
96
- <div class="fs-sidebar-aside fs-u-p-2" style="background-color: var(--fs-color-surface);">Aside (reverse — à direita)</div>
97
- <div class="fs-sidebar-content fs-u-p-2" style="background-color: var(--fs-color-surface);">Conteúdo</div>
98
- </div>
99
- </div>
100
-
101
- <div class="fs-container-fluid fs-u-p-2 fs-u-mt-3">
102
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Sticky — permanece fixo ao rolar o container</p>
103
- <div tabindex="0" style="max-height: 120px; overflow-y: auto; border: 1px solid var(--fs-color-border);">
104
- <div class="fs-u-sticky-top fs-u-p-2" style="background-color: var(--fs-color-subtle);">Cabeçalho fixo (fs-u-sticky-top)</div>
105
- <div class="fs-u-p-2">Linha 1</div>
106
- <div class="fs-u-p-2">Linha 2</div>
107
- <div class="fs-u-p-2">Linha 3</div>
108
- <div class="fs-u-p-2">Linha 4</div>
109
- <div class="fs-u-p-2">Linha 5</div>
110
- </div>
111
- </div>
112
-
113
- <div class="fs-container-fluid fs-u-p-2 fs-u-mt-3">
114
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Container queries — reage à largura do container, não da viewport</p>
115
- <div class="fs-u-cq" style="width: 600px; max-width: 100%; background-color: var(--fs-color-subtle); padding: 12px;">
116
- <p class="fs-u-fs-sm fs-u-mb-1">Container largo (≥ 480px): itens em linha</p>
117
- <div class="fs-u-cq-md-d-flex fs-u-gap-2">
118
- <div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">A</div>
119
- <div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">B</div>
120
- <div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">C</div>
121
- </div>
122
- </div>
123
- <div class="fs-u-cq fs-u-mt-2" style="width: 300px; max-width: 100%; background-color: var(--fs-color-subtle); padding: 12px;">
124
- <p class="fs-u-fs-sm fs-u-mb-1">Container estreito (&lt; 480px): sem o d-flex do breakpoint md, itens empilham</p>
125
- <div class="fs-u-cq-md-d-flex fs-u-gap-2">
126
- <div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">A</div>
127
- <div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">B</div>
128
- <div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">C</div>
129
- </div>
130
- </div>
131
- </div>
132
-
133
- </body>
134
- </html>
package/mockup/examples/modal-select.html DELETED
@@ -1,127 +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 - Modal &amp; Select</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
- margin-bottom: 24px;
25
- }
26
-
27
- .fs-form-select-dropdown {
28
- width: 220px;
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
- <section>
38
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Modal — auto-init via data-fs, focus trap, Escape, clique fora, scroll bloqueado</p>
39
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="modal" data-fs-target="#modal-claro">Abrir modal</button>
40
- <button type="button" class="fs-btn fs-u-mr-2" data-fs="modal" data-fs-target="#modal-claro-sm">Modal pequeno</button>
41
- <button type="button" class="fs-btn" data-fs="modal" data-fs-target="#modal-claro-static">Backdrop estático</button>
42
-
43
- <div class="fs-modal" id="modal-claro">
44
- <div class="fs-modal-dialog">
45
- <div class="fs-modal-content">
46
- <div class="fs-modal-header">
47
- <h3 class="fs-modal-title">Confirmar ação</h3>
48
- <button type="button" class="fs-btn-close" data-fs-dismiss="modal" aria-label="Fechar"></button>
49
- </div>
50
- <div class="fs-modal-body">
51
- <p>Este modal reaproveita a infraestrutura da Fase 7: focus trap (Tab/Shift+Tab), fecha com Escape ou clique fora, e bloqueia o scroll da página enquanto aberto.</p>
52
- </div>
53
- <div class="fs-modal-footer">
54
- <button type="button" class="fs-btn" data-fs-dismiss="modal">Cancelar</button>
55
- <button type="button" class="fs-btn fs-btn-primary" data-fs-dismiss="modal">Confirmar</button>
56
- </div>
57
- </div>
58
- </div>
59
- </div>
60
-
61
- <div class="fs-modal" id="modal-claro-sm">
62
- <div class="fs-modal-dialog fs-modal-sm">
63
- <div class="fs-modal-content">
64
- <div class="fs-modal-header">
65
- <h3 class="fs-modal-title">Modal pequeno</h3>
66
- <button type="button" class="fs-btn-close" data-fs-dismiss="modal" aria-label="Fechar"></button>
67
- </div>
68
- <div class="fs-modal-body">
69
- <p>Variante <code class="fs-u-font-mono">.modal-sm</code>.</p>
70
- </div>
71
- </div>
72
- </div>
73
- </div>
74
-
75
- <div class="fs-modal" id="modal-claro-static" data-backdrop="static">
76
- <div class="fs-modal-dialog">
77
- <div class="fs-modal-content">
78
- <div class="fs-modal-header">
79
- <h3 class="fs-modal-title">Backdrop estático</h3>
80
- <button type="button" class="fs-btn-close" data-fs-dismiss="modal" aria-label="Fechar"></button>
81
- </div>
82
- <div class="fs-modal-body">
83
- <p>Com <code class="fs-u-font-mono">data-backdrop="static"</code>, Escape e clique fora não fecham — só o botão de fechar ou dismiss.</p>
84
- </div>
85
- </div>
86
- </div>
87
- </div>
88
- </section>
89
-
90
- <section>
91
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Select customizado — auto-init via data-fs, reaproveita o Dropdown (Fase 8)</p>
92
- <div class="fs-form-row fs-u-gap-x-2">
93
- <div class="fs-form-col">
94
- <label for="select-claro" class="fs-form-label fs-form-size-md">Padrão</label>
95
- <select class="fs-form-select-dropdown" id="select-claro" data-fs="select">
96
- <option>Selecione um estado</option>
97
- <option>São Paulo</option>
98
- <option>Rio de Janeiro</option>
99
- <option disabled>Minas Gerais (indisponível)</option>
100
- <option>Bahia</option>
101
- </select>
102
- </div>
103
- <div class="fs-form-col">
104
- <label for="select-claro-sm" class="fs-form-label fs-form-size-md">Small</label>
105
- <select class="fs-form-select-dropdown" id="select-claro-sm" data-fs="select" data-size="sm">
106
- <option>Pequeno</option>
107
- <option>Médio</option>
108
- <option>Grande</option>
109
- </select>
110
- </div>
111
- <div class="fs-form-col">
112
- <label for="select-claro-disabled" class="fs-form-label fs-form-size-md">Desabilitado</label>
113
- <select class="fs-form-select-dropdown" id="select-claro-disabled" data-fs="select" disabled>
114
- <option>Indisponível</option>
115
- </select>
116
- </div>
117
- </div>
118
- </section>
119
- </div>
120
-
121
-
122
-
123
- <!-- SCRIPTS IMPORT -->
124
- <script src="../../dist/js/fokus.js"></script>
125
-
126
- </body>
127
- </html>
package/mockup/examples/nested-menu.html DELETED
@@ -1,73 +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 - Nested Menu</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
- min-height: 240px;
19
- padding: 24px;
20
- }
21
-
22
- html[data-theme="dark"] .theme-panel {
23
- color: var(--fs-color-text);
24
- background-color: var(--fs-color-surface);
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
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Submenus recursivos — hover, clique ou setas (→ abre, ← fecha)</p>
34
-
35
- <button type="button" class="fs-btn fs-dropdown-toggle" data-fs="nested-menu" data-fs-target="#menu-claro">Ações</button>
36
- <div class="fs-dropdown-menu" id="menu-claro">
37
- <a href="#" class="fs-dropdown-item">Novo arquivo</a>
38
- <a href="#" class="fs-dropdown-item">Abrir…</a>
39
- <div class="fs-dropdown-submenu">
40
- <button type="button" class="fs-dropdown-item fs-dropdown-item-submenu">Compartilhar</button>
41
- <div class="fs-dropdown-menu">
42
- <a href="#" class="fs-dropdown-item">Copiar link</a>
43
- <a href="#" class="fs-dropdown-item">E-mail</a>
44
- <div class="fs-dropdown-submenu">
45
- <button type="button" class="fs-dropdown-item fs-dropdown-item-submenu">Redes sociais</button>
46
- <div class="fs-dropdown-menu">
47
- <a href="#" class="fs-dropdown-item">Twitter / X</a>
48
- <a href="#" class="fs-dropdown-item">LinkedIn</a>
49
- <a href="#" class="fs-dropdown-item">Facebook</a>
50
- </div>
51
- </div>
52
- </div>
53
- </div>
54
- <div class="fs-dropdown-submenu">
55
- <button type="button" class="fs-dropdown-item fs-dropdown-item-submenu">Exportar como</button>
56
- <div class="fs-dropdown-menu">
57
- <a href="#" class="fs-dropdown-item">PDF</a>
58
- <a href="#" class="fs-dropdown-item">PNG</a>
59
- <a href="#" class="fs-dropdown-item is-disabled">SVG (em breve)</a>
60
- </div>
61
- </div>
62
- <hr class="fs-dropdown-divider">
63
- <a href="#" class="fs-dropdown-item">Excluir</a>
64
- </div>
65
- </div>
66
-
67
-
68
-
69
- <!-- SCRIPTS IMPORT -->
70
- <script src="../../dist/js/fokus.js"></script>
71
-
72
- </body>
73
- </html>
package/mockup/examples/notification-center.html DELETED
@@ -1,86 +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 - Notification Center</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: 16px;
18
- min-height: 260px;
19
- padding: 24px;
20
- }
21
-
22
- html[data-theme="dark"] .theme-panel {
23
- color: var(--fs-color-text);
24
- background-color: var(--fs-color-surface);
25
- }
26
-
27
- .push-row {
28
- display: flex;
29
- flex-wrap: wrap;
30
- gap: 8px;
31
- }
32
- </style>
33
- <link rel="stylesheet" href="../assets/example-theme.css">
34
- <script src="../assets/example-theme.js"></script>
35
- </head>
36
- <body>
37
-
38
- <div class="theme-panel">
39
- <button type="button" class="fs-btn" data-fs="notification-center" data-fs-target="#panel-claro" id="bell-claro">
40
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>
41
- Notificações
42
- <span class="fs-notification-badge" hidden>0</span>
43
- </button>
44
-
45
- <div class="fs-notification-center" id="panel-claro">
46
- <div class="fs-notification-center-header">
47
- <span class="fs-notification-center-title">Notificações</span>
48
- <button type="button" class="fs-btn-close" data-notification="clear" aria-label="Limpar todas"></button>
49
- </div>
50
- <ul class="fs-notification-list"></ul>
51
- <div class="fs-notification-empty" hidden>Nenhuma notificação.</div>
52
- </div>
53
-
54
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Disparar (empilha um toast + entra no histórico)</p>
55
- <div class="push-row">
56
- <button type="button" class="fs-btn fs-btn-success fs-btn-sm" data-push="claro" data-variant="success">Sucesso</button>
57
- <button type="button" class="fs-btn fs-btn-danger fs-btn-sm" data-push="claro" data-variant="danger">Erro</button>
58
- <button type="button" class="fs-btn fs-btn-info fs-btn-sm" data-push="claro" data-variant="info">Info</button>
59
- </div>
60
- </div>
61
-
62
-
63
-
64
- <div class="fs-toast-container"></div>
65
-
66
- <!-- SCRIPTS IMPORT -->
67
- <script src="../../dist/js/fokus.js"></script>
68
- <script>
69
- const messages = {
70
- success: { title: "Backup concluído", body: "Seus arquivos foram salvos." },
71
- danger: { title: "Falha no upload", body: "Tente novamente em instantes." },
72
- info: { title: "Nova versão disponível", body: "Recarregue para atualizar." },
73
- };
74
-
75
- document.querySelectorAll("[data-push]").forEach((button) => {
76
- button.addEventListener("click", () => {
77
- const bell = document.getElementById(`bell-${button.dataset.push}`);
78
- const center = FokusStyles.NotificationCenter.getInstance(bell);
79
- const variant = button.dataset.variant;
80
- center.push({ ...messages[variant], variant });
81
- });
82
- });
83
- </script>
84
-
85
- </body>
86
- </html>
package/mockup/examples/offcanvas-popover.html DELETED
@@ -1,133 +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 - Offcanvas &amp; Popover</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
- margin-bottom: 24px;
24
- }
25
- </style>
26
- <link rel="stylesheet" href="../assets/example-theme.css">
27
- <script src="../assets/example-theme.js"></script>
28
- </head>
29
- <body>
30
-
31
- <div class="theme-panel">
32
- <section>
33
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Offcanvas — posições, backdrop e backdrop-less</p>
34
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="offcanvas" data-fs-target="#offcanvas-start-claro">Left (start)</button>
35
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="offcanvas" data-fs-target="#offcanvas-end-claro">Right (end)</button>
36
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="offcanvas" data-fs-target="#offcanvas-top-claro">Top</button>
37
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="offcanvas" data-fs-target="#offcanvas-bottom-claro">Bottom</button>
38
- <button type="button" class="fs-btn fs-u-mr-2" data-fs="offcanvas" data-fs-target="#offcanvas-nobackdrop-claro">Sem backdrop</button>
39
- <button type="button" class="fs-btn" data-fs="offcanvas" data-fs-target="#offcanvas-static-claro">Backdrop estático</button>
40
-
41
- <div class="fs-offcanvas fs-offcanvas-start" id="offcanvas-start-claro">
42
- <div class="fs-offcanvas-header">
43
- <h3 class="fs-offcanvas-title">Menu</h3>
44
- <button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
45
- </div>
46
- <div class="fs-offcanvas-body">Conteúdo do offcanvas à esquerda.</div>
47
- </div>
48
-
49
- <div class="fs-offcanvas fs-offcanvas-end" id="offcanvas-end-claro">
50
- <div class="fs-offcanvas-header">
51
- <h3 class="fs-offcanvas-title">Filtros</h3>
52
- <button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
53
- </div>
54
- <div class="fs-offcanvas-body">Conteúdo do offcanvas à direita.</div>
55
- </div>
56
-
57
- <div class="fs-offcanvas fs-offcanvas-top" id="offcanvas-top-claro">
58
- <div class="fs-offcanvas-header">
59
- <h3 class="fs-offcanvas-title">Notificações</h3>
60
- <button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
61
- </div>
62
- <div class="fs-offcanvas-body">Conteúdo do offcanvas no topo.</div>
63
- </div>
64
-
65
- <div class="fs-offcanvas fs-offcanvas-bottom" id="offcanvas-bottom-claro">
66
- <div class="fs-offcanvas-header">
67
- <h3 class="fs-offcanvas-title">Ações rápidas</h3>
68
- <button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
69
- </div>
70
- <div class="fs-offcanvas-body">Conteúdo do offcanvas embaixo.</div>
71
- </div>
72
-
73
- <div class="fs-offcanvas fs-offcanvas-start" id="offcanvas-nobackdrop-claro" data-backdrop="false">
74
- <div class="fs-offcanvas-header">
75
- <h3 class="fs-offcanvas-title">Sem backdrop</h3>
76
- <button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
77
- </div>
78
- <div class="fs-offcanvas-body">Fecha com Escape ou clique fora, sem escurecer a página.</div>
79
- </div>
80
-
81
- <div class="fs-offcanvas fs-offcanvas-start" id="offcanvas-static-claro" data-backdrop="static">
82
- <div class="fs-offcanvas-header">
83
- <h3 class="fs-offcanvas-title">Backdrop estático</h3>
84
- <button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
85
- </div>
86
- <div class="fs-offcanvas-body">Só fecha pelo botão — Escape e clique fora desativados.</div>
87
- </div>
88
- </section>
89
-
90
- <section>
91
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Popover — data-trigger: click (padrão), hover, focus, manual</p>
92
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="popover" data-fs-target="#pop-click-claro">Click</button>
93
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="popover" data-trigger="hover" data-fs-target="#pop-hover-claro">Hover</button>
94
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="popover" data-trigger="focus" data-fs-target="#pop-focus-claro">Focus</button>
95
- <button type="button" class="fs-btn" data-fs="popover" data-trigger="manual" id="pop-manual-trigger-claro" data-fs-target="#pop-manual-claro">Manual</button>
96
-
97
- <div class="fs-popover" id="pop-click-claro">
98
- <div class="fs-popover-arrow"></div>
99
- <div class="fs-popover-header">Confirmar ação</div>
100
- <div class="fs-popover-body">Este popover tem conteúdo interativo — clicar aqui dentro não fecha.</div>
101
- <div class="fs-popover-footer">
102
- <button type="button" class="fs-btn fs-btn-sm" data-fs-dismiss="popover">Cancelar</button>
103
- <button type="button" class="fs-btn fs-btn-primary fs-btn-sm" data-fs-dismiss="popover">Confirmar</button>
104
- </div>
105
- </div>
106
-
107
- <div class="fs-popover" id="pop-hover-claro">
108
- <div class="fs-popover-arrow"></div>
109
- <div class="fs-popover-body">Aparece no hover do gatilho ou do próprio popover.</div>
110
- </div>
111
-
112
- <div class="fs-popover" id="pop-focus-claro">
113
- <div class="fs-popover-arrow"></div>
114
- <div class="fs-popover-body">Aparece ao focar o gatilho (Tab), some ao sair do foco.</div>
115
- </div>
116
-
117
- <div class="fs-popover" id="pop-manual-claro">
118
- <div class="fs-popover-arrow"></div>
119
- <div class="fs-popover-body">Só abre/fecha via FokusStyles.Popover.getInstance().toggle().</div>
120
- </div>
121
- </section>
122
- </div>
123
-
124
-
125
-
126
- <script src="../../dist/js/fokus.js"></script>
127
- <script>
128
- document.getElementById("pop-manual-trigger-claro").addEventListener("click", () => {
129
- FokusStyles.Popover.getInstance(document.getElementById("pop-manual-trigger-claro")).toggle();
130
- });
131
- </script>
132
- </body>
133
- </html>