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/stepper.html DELETED
@@ -1,119 +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 - Stepper</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
- .fs-stepper {
23
- max-width: 600px;
24
- }
25
-
26
- .fs-step-panel {
27
- padding: 16px;
28
- border: 1px solid var(--fs-color-border);
29
- border-radius: var(--fs-radius-md);
30
- }
31
- </style>
32
- <link rel="stylesheet" href="../assets/example-theme.css">
33
- <script src="../assets/example-theme.js"></script>
34
- </head>
35
- <body>
36
-
37
- <div class="theme-panel">
38
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Wizard horizontal — navegação next/prev, painéis e evento de validação</p>
39
- <div class="fs-stepper" data-fs="stepper" id="stepper-wizard">
40
- <ol class="fs-stepper-header">
41
- <li class="fs-step fs-step-active">
42
- <span class="fs-step-indicator">1</span>
43
- <span class="fs-step-label">Conta</span>
44
- </li>
45
- <li class="fs-step">
46
- <span class="fs-step-indicator">2</span>
47
- <span class="fs-step-label">Perfil</span>
48
- </li>
49
- <li class="fs-step">
50
- <span class="fs-step-indicator">3</span>
51
- <span class="fs-step-label">Confirmação</span>
52
- </li>
53
- </ol>
54
- <div class="fs-stepper-content">
55
- <div class="fs-step-panel is-active">Passo 1 — dados da conta (e-mail e senha).</div>
56
- <div class="fs-step-panel">Passo 2 — dados do perfil (nome e avatar).</div>
57
- <div class="fs-step-panel">Passo 3 — revise e confirme os dados.</div>
58
- </div>
59
- <div class="fs-stepper-actions">
60
- <button class="fs-btn" type="button" data-stepper="prev">Anterior</button>
61
- <button class="fs-btn fs-btn-primary" type="button" data-stepper="next">Próximo</button>
62
- </div>
63
- </div>
64
-
65
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-4 fs-u-mb-2">Estados (estático): concluído, ativo, erro e pendente</p>
66
- <div class="fs-stepper" id="stepper-states-claro">
67
- <ol class="fs-stepper-header">
68
- <li class="fs-step fs-step-completed">
69
- <span class="fs-step-indicator">1</span>
70
- <span class="fs-step-label">Concluído</span>
71
- </li>
72
- <li class="fs-step fs-step-active">
73
- <span class="fs-step-indicator">2</span>
74
- <span class="fs-step-label">Ativo</span>
75
- </li>
76
- <li class="fs-step fs-step-error">
77
- <span class="fs-step-indicator">3</span>
78
- <span class="fs-step-label">Erro</span>
79
- </li>
80
- <li class="fs-step">
81
- <span class="fs-step-indicator">4</span>
82
- <span class="fs-step-label">Pendente</span>
83
- </li>
84
- </ol>
85
- </div>
86
-
87
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-4 fs-u-mb-2">Vertical</p>
88
- <div class="fs-stepper fs-stepper-vertical" id="stepper-vertical-claro">
89
- <ol class="fs-stepper-header">
90
- <li class="fs-step fs-step-completed">
91
- <span class="fs-step-indicator">1</span>
92
- <span class="fs-step-content">
93
- <span class="fs-step-label">Pedido recebido</span>
94
- <span class="fs-step-description">Confirmado às 09:12</span>
95
- </span>
96
- </li>
97
- <li class="fs-step fs-step-active">
98
- <span class="fs-step-indicator">2</span>
99
- <span class="fs-step-content">
100
- <span class="fs-step-label">Em separação</span>
101
- <span class="fs-step-description">Preparando os itens</span>
102
- </span>
103
- </li>
104
- <li class="fs-step">
105
- <span class="fs-step-indicator">3</span>
106
- <span class="fs-step-content">
107
- <span class="fs-step-label">Enviado</span>
108
- <span class="fs-step-description">Aguardando transportadora</span>
109
- </span>
110
- </li>
111
- </ol>
112
- </div>
113
- </div>
114
-
115
-
116
-
117
- <script src="../../dist/js/fokus.js"></script>
118
- </body>
119
- </html>
package/mockup/examples/tables-navbar.html DELETED
@@ -1,89 +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 - Tables & Navbar</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
- background-color: var(--fs-color-subtle);
16
- }
17
-
18
- html[data-theme="dark"] .theme-panel,
19
- html[data-fs-theme="dark"] .theme-panel {
20
- color: var(--fs-color-text);
21
- background-color: var(--fs-color-surface);
22
- }
23
- </style>
24
- <link rel="stylesheet" href="../assets/example-theme.css">
25
- <script src="../assets/example-theme.js"></script>
26
- </head>
27
- <body>
28
- <div class="theme-panel">
29
- <nav class="fs-navbar fs-u-mb-3" data-fs="navbar" aria-label="Navegação principal">
30
- <a href="#" class="fs-navbar-brand">FokusStyles</a>
31
- <button type="button" class="fs-navbar-toggler" data-fs-toggle="navbar" data-fs-target="#demo-navbar-menu" aria-controls="demo-navbar-menu" aria-expanded="false">Menu</button>
32
- <div class="fs-navbar-collapse" id="demo-navbar-menu" hidden>
33
- <ul class="fs-navbar-nav">
34
- <li><a href="#" class="fs-nav-link is-active" aria-current="page">Início</a></li>
35
- <li><a href="#" class="fs-nav-link">Projetos <span class="fs-badge fs-badge-primary fs-badge-sm">3</span></a></li>
36
- <li><a href="#" class="fs-nav-link is-disabled">Configurações</a></li>
37
- </ul>
38
- <button type="button" class="fs-btn fs-btn-primary fs-btn-sm">Entrar</button>
39
- </div>
40
- </nav>
41
-
42
- <div class="fs-table-responsive">
43
- <table class="fs-table fs-table-striped fs-table-hover">
44
- <thead>
45
- <tr>
46
- <th>Projeto</th>
47
- <th>Responsável</th>
48
- <th>Status</th>
49
- </tr>
50
- </thead>
51
- <tbody>
52
- <tr>
53
- <td>Landing page</td>
54
- <td>Jorge</td>
55
- <td>Em andamento</td>
56
- </tr>
57
- <tr class="fs-table-success">
58
- <td>API de pagamentos</td>
59
- <td>Equipe backend</td>
60
- <td>Concluído</td>
61
- </tr>
62
- <tr class="fs-table-danger">
63
- <td>Migração de banco</td>
64
- <td>Equipe infra</td>
65
- <td>Bloqueado</td>
66
- </tr>
67
- </tbody>
68
- </table>
69
- </div>
70
-
71
- <table class="fs-table fs-table-sm fs-table-bordered fs-u-mt-3">
72
- <thead>
73
- <tr>
74
- <th>Item</th>
75
- <th>Qtd.</th>
76
- </tr>
77
- </thead>
78
- <tbody>
79
- <tr>
80
- <td>table-sm + table-bordered</td>
81
- <td>1</td>
82
- </tr>
83
- </tbody>
84
- </table>
85
- </div>
86
-
87
-
88
- </body>
89
- </html>
package/mockup/examples/tag.html DELETED
@@ -1,105 +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 - Tag / Badge Dismissível</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
- 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
- .tag-row {
27
- display: flex;
28
- flex-wrap: wrap;
29
- gap: 8px;
30
- }
31
- </style>
32
- <link rel="stylesheet" href="../assets/example-theme.css">
33
- <script src="../assets/example-theme.js"></script>
34
- </head>
35
- <body>
36
- <div class="theme-panel">
37
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Tags removíveis (clique no "x")</p>
38
- <div class="tag-row" id="tags-claro">
39
- <span class="fs-badge fs-tag" data-fs="tag">
40
- Frontend
41
- <button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Frontend"></button>
42
- </span>
43
- <span class="fs-badge fs-badge-primary fs-tag" data-fs="tag">
44
- Urgente
45
- <button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Urgente"></button>
46
- </span>
47
- <span class="fs-badge fs-badge-success fs-tag" data-fs="tag">
48
- Aprovado
49
- <button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Aprovado"></button>
50
- </span>
51
- <span class="fs-badge fs-badge-danger fs-tag" data-fs="tag">
52
- Bloqueado
53
- <button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Bloqueado"></button>
54
- </span>
55
- </div>
56
-
57
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-0">Agrupamento (.fs-tag-group)</p>
58
- <div class="fs-tag-group">
59
- <span class="fs-badge fs-tag" data-fs="tag">Design<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover"></button></span>
60
- <span class="fs-badge fs-tag" data-fs="tag">Frontend<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover"></button></span>
61
- <span class="fs-badge fs-tag" data-fs="tag">Backend<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover"></button></span>
62
- <span class="fs-badge fs-tag" data-fs="tag">DevOps<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover"></button></span>
63
- <span class="fs-badge fs-tag" data-fs="tag">QA<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover"></button></span>
64
- </div>
65
-
66
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-0">Ícone, texto longo e operação pendente</p>
67
- <div class="tag-row">
68
- <span class="fs-badge fs-badge-soft-primary fs-tag" data-fs="tag">
69
- <span class="fs-tag-icon" aria-hidden="true"><svg class="fs-icon" 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="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg></span>
70
- <span class="fs-tag-label">Documento</span>
71
- <button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Documento"></button>
72
- </span>
73
- <span class="fs-badge fs-tag fs-tag-truncate" data-fs="tag" style="--fs-tag-max-inline-size: 190px;" title="Revisão de acessibilidade e compatibilidade entre navegadores">
74
- <span class="fs-tag-label">Revisão de acessibilidade e compatibilidade entre navegadores</span>
75
- <button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Revisão de acessibilidade e compatibilidade entre navegadores"></button>
76
- </span>
77
- <span class="fs-badge fs-badge-warning fs-tag is-loading" data-fs="tag" aria-busy="true">
78
- <span class="fs-tag-label">Salvando</span>
79
- <span class="fs-spinner" aria-hidden="true"></span>
80
- <button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Salvando" disabled></button>
81
- </span>
82
- </div>
83
-
84
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-0">Overflow de agrupamento</p>
85
- <div class="fs-tag-group" aria-label="Tags do projeto">
86
- <span class="fs-badge fs-tag" data-fs="tag">Design<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Design"></button></span>
87
- <span class="fs-badge fs-tag" data-fs="tag">Frontend<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Frontend"></button></span>
88
- <button type="button" class="fs-badge fs-tag fs-tag-overflow" aria-label="Mostrar mais 3 tags" aria-expanded="false"><svg class="fs-icon" 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" aria-hidden="true"><path d="M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z"/><path d="M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"/><circle cx="10.5" cy="6.5" r=".5" fill="currentColor"/></svg></button>
89
- </div>
90
-
91
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Tag protegida (não removível)</p>
92
- <div class="tag-row">
93
- <span class="fs-badge fs-badge-warning fs-tag fs-tag-protected" aria-disabled="true">
94
- <span class="fs-tag-label">Protegida</span>
95
- <span class="fs-tag-lock" aria-hidden="true">
96
- <svg class="fs-icon" 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="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>
97
- </span>
98
- </span>
99
- </div>
100
- </div>
101
-
102
-
103
- <script src="../../dist/js/fokus.js"></script>
104
- </body>
105
- </html>
package/mockup/examples/theming.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 - Theming (dark mode + multi-brand)</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
- gap: 8px;
17
- padding: 24px;
18
- }
19
-
20
- html[data-theme="dark"] .theme-panel,
21
- html[data-fs-theme="dark"] .theme-panel {
22
- color: var(--fs-color-text);
23
- background-color: var(--fs-color-surface);
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
- <h2 class="fs-u-fs-lg fs-u-fw-medium" style="padding: 24px 24px 0;">Marca padrão</h2>
32
- <div class="theme-panel">
33
- <div>
34
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2">Primary</button>
35
- <span class="fs-badge fs-badge-primary">Primary</span>
36
- </div>
37
- <div class="fs-alert fs-alert-primary">Alerta primary com a cor de ação da marca padrão.</div>
38
- </div>
39
-
40
- <h2 class="fs-u-fs-lg fs-u-fw-medium" style="padding: 24px 24px 0;">data-fs-brand="violet"</h2>
41
- <div class="theme-panel" data-fs-brand="violet">
42
- <div>
43
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2">Primary</button>
44
- <span class="fs-badge fs-badge-primary">Primary</span>
45
- </div>
46
- <div class="fs-alert fs-alert-primary">Mesmo HTML, mesmo CSS — só o atributo <code>data-fs-brand="violet"</code> muda a cor de ação primária, em runtime, sem recompilar.</div>
47
- </div>
48
-
49
- <h2 class="fs-u-fs-lg fs-u-fw-medium" style="padding: 24px 24px 0;">data-fs-brand="corporate"</h2>
50
- <div class="theme-panel" data-fs-brand="corporate">
51
- <div>
52
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2">Primary</button>
53
- <span class="fs-badge fs-badge-primary">Primary</span>
54
- </div>
55
- <div class="fs-alert fs-alert-primary">Preset "corporate" — azul-marinho sóbrio, para aplicações internas/B2B.</div>
56
- </div>
57
-
58
- <h2 class="fs-u-fs-lg fs-u-fw-medium" style="padding: 24px 24px 0;">data-fs-brand="vibrant"</h2>
59
- <div class="theme-panel" data-fs-brand="vibrant">
60
- <div>
61
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2">Primary</button>
62
- <span class="fs-badge fs-badge-primary">Primary</span>
63
- </div>
64
- <div class="fs-alert fs-alert-primary">Preset "vibrant" — laranja energético, para produtos de consumo/marketing.</div>
65
- </div>
66
-
67
- </body>
68
- </html>
package/mockup/examples/tile.html DELETED
@@ -1,107 +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 - Tile</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
- gap: 12px;
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
- .tile-col {
27
- display: flex;
28
- flex-direction: column;
29
- gap: 10px;
30
- max-width: 420px;
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
- <div class="theme-panel">
38
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Padrão (ações à direita)</p>
39
- <div class="tile-col">
40
- <div class="fs-tile">
41
- <div class="fs-tile-icon" aria-hidden="true"><svg class="fs-icon" 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="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg></div>
42
- <div class="fs-tile-body">
43
- <p class="fs-tile-title">Relatório mensal.pdf</p>
44
- <p class="fs-tile-subtitle">2.4 MB · Atualizado há 2h</p>
45
- </div>
46
- <div class="fs-tile-actions">
47
- <button type="button" class="fs-btn fs-btn-sm">Abrir</button>
48
- </div>
49
- </div>
50
- <div class="fs-tile">
51
- <div class="fs-tile-icon" aria-hidden="true"><svg class="fs-icon" 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="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/></svg></div>
52
- <div class="fs-tile-body">
53
- <p class="fs-tile-title">Tema escuro</p>
54
- <p class="fs-tile-subtitle">Alterna a aparência da interface</p>
55
- </div>
56
- <div class="fs-tile-actions">
57
- <div class="fs-switch">
58
- <input type="checkbox" class="fs-switch-input" id="tile-switch" checked aria-label="Ativar tema escuro">
59
- <label for="tile-switch" class="fs-switch-label"></label>
60
- </div>
61
- </div>
62
- </div>
63
- </div>
64
-
65
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-0">Ações embaixo</p>
66
- <div class="tile-col">
67
- <div class="fs-tile fs-tile-actions-bottom">
68
- <div class="fs-tile-icon" aria-hidden="true"><svg class="fs-icon" 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="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></div>
69
- <div class="fs-tile-body">
70
- <p class="fs-tile-title">Plano expira em 3 dias</p>
71
- <p class="fs-tile-subtitle">Renove para manter acesso aos recursos pagos.</p>
72
- </div>
73
- <div class="fs-tile-actions">
74
- <button type="button" class="fs-btn fs-btn-outline-secondary fs-btn-sm">Depois</button>
75
- <button type="button" class="fs-btn fs-btn-primary fs-btn-sm">Renovar</button>
76
- </div>
77
- </div>
78
- </div>
79
-
80
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-0">Clicável (stretched-link) e tamanhos (sm / padrão / lg)</p>
81
- <div class="tile-col">
82
- <div class="fs-tile fs-tile-clickable">
83
- <div class="fs-tile-icon" aria-hidden="true"><svg class="fs-icon" 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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
84
- <div class="fs-tile-body">
85
- <p class="fs-tile-title"><a href="#" class="fs-stretched-link">Jorge Reis</a></p>
86
- <p class="fs-tile-subtitle">Ver perfil</p>
87
- </div>
88
- </div>
89
- <div class="fs-tile fs-tile-sm">
90
- <div class="fs-tile-icon" aria-hidden="true"><svg class="fs-icon" 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></div>
91
- <div class="fs-tile-body">
92
- <p class="fs-tile-title">sm</p>
93
- </div>
94
- </div>
95
- <div class="fs-tile fs-tile-lg">
96
- <div class="fs-tile-icon" aria-hidden="true"><svg class="fs-icon" 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></div>
97
- <div class="fs-tile-body">
98
- <p class="fs-tile-title">lg</p>
99
- <p class="fs-tile-subtitle">Notificações push</p>
100
- </div>
101
- </div>
102
- </div>
103
- </div>
104
-
105
-
106
- </body>
107
- </html>
package/mockup/examples/timeline.html DELETED
@@ -1,108 +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 - Timeline</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: 32px;
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
- .timeline-col {
27
- width: 280px;
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="timeline-col">
36
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Vertical</p>
37
- <ul class="fs-timeline">
38
- <li class="fs-timeline-item fs-timeline-completed">
39
- <div class="fs-timeline-marker"></div>
40
- <div class="fs-timeline-content">
41
- <p class="fs-timeline-title">Pedido recebido</p>
42
- <span class="fs-timeline-time">09:12</span>
43
- </div>
44
- </li>
45
- <li class="fs-timeline-item fs-timeline-completed">
46
- <div class="fs-timeline-marker"></div>
47
- <div class="fs-timeline-content">
48
- <p class="fs-timeline-title">Pagamento confirmado</p>
49
- <span class="fs-timeline-time">09:15</span>
50
- </div>
51
- </li>
52
- <li class="fs-timeline-item fs-timeline-active">
53
- <div class="fs-timeline-marker"></div>
54
- <div class="fs-timeline-content">
55
- <p class="fs-timeline-title">Em separação</p>
56
- <p class="fs-timeline-text">Aguardando despacho do centro de distribuição.</p>
57
- </div>
58
- </li>
59
- <li class="fs-timeline-item">
60
- <div class="fs-timeline-marker"></div>
61
- <div class="fs-timeline-content">
62
- <p class="fs-timeline-title">Envio</p>
63
- </div>
64
- </li>
65
- <li class="fs-timeline-item fs-timeline-failed">
66
- <div class="fs-timeline-marker"></div>
67
- <div class="fs-timeline-content">
68
- <p class="fs-timeline-title">Entrega</p>
69
- <p class="fs-timeline-text">Tentativa de entrega falhou.</p>
70
- </div>
71
- </li>
72
- </ul>
73
- </div>
74
-
75
- <div style="flex: 1;">
76
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Horizontal</p>
77
- <ul class="fs-timeline fs-timeline-horizontal">
78
- <li class="fs-timeline-item fs-timeline-completed">
79
- <div class="fs-timeline-marker"></div>
80
- <div class="fs-timeline-content">
81
- <p class="fs-timeline-title">Recebido</p>
82
- </div>
83
- </li>
84
- <li class="fs-timeline-item fs-timeline-completed">
85
- <div class="fs-timeline-marker"></div>
86
- <div class="fs-timeline-content">
87
- <p class="fs-timeline-title">Pago</p>
88
- </div>
89
- </li>
90
- <li class="fs-timeline-item fs-timeline-active">
91
- <div class="fs-timeline-marker"></div>
92
- <div class="fs-timeline-content">
93
- <p class="fs-timeline-title">Separação</p>
94
- </div>
95
- </li>
96
- <li class="fs-timeline-item">
97
- <div class="fs-timeline-marker"></div>
98
- <div class="fs-timeline-content">
99
- <p class="fs-timeline-title">Entrega</p>
100
- </div>
101
- </li>
102
- </ul>
103
- </div>
104
- </div>
105
-
106
-
107
- </body>
108
- </html>