fokus-styles 2.5.0 → 2.6.1

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 (181) hide show
  1. package/README.md +20 -2
  2. package/package.json +19 -16
  3. package/packages/fokus-cli/README.md +5 -0
  4. package/packages/fokus-icons/README.md +5 -0
  5. package/packages/fokus-react/README.md +5 -0
  6. package/CHANGELOG.md +0 -940
  7. package/dist/css/components.css.map +0 -1
  8. package/dist/css/components.min.css.map +0 -1
  9. package/dist/css/fokus-components.css.map +0 -1
  10. package/dist/css/fokus-components.min.css.map +0 -1
  11. package/dist/css/fokus-core.css.map +0 -1
  12. package/dist/css/fokus-core.min.css.map +0 -1
  13. package/dist/css/fokus-dark.css.map +0 -1
  14. package/dist/css/fokus-dark.min.css.map +0 -1
  15. package/dist/css/fokus-rtl.css.map +0 -1
  16. package/dist/css/fokus-rtl.min.css.map +0 -1
  17. package/dist/css/fokus-utilities.css.map +0 -1
  18. package/dist/css/fokus-utilities.min.css.map +0 -1
  19. package/dist/css/fokus.css.map +0 -1
  20. package/dist/css/fokus.min.css.map +0 -1
  21. package/dist/css/fonts.css.map +0 -1
  22. package/dist/css/fonts.min.css.map +0 -1
  23. package/dist/css/forms.css.map +0 -1
  24. package/dist/css/forms.min.css.map +0 -1
  25. package/dist/css/helpers.css.map +0 -1
  26. package/dist/css/helpers.min.css.map +0 -1
  27. package/dist/css/layout.css.map +0 -1
  28. package/dist/css/layout.min.css.map +0 -1
  29. package/dist/js/fokus.js.map +0 -7
  30. package/dist/js/fokus.min.js.map +0 -7
  31. package/docs/README.md +0 -86
  32. package/docs/comparison.md +0 -124
  33. package/docs/components/accordion.md +0 -104
  34. package/docs/components/alert-dialog.md +0 -99
  35. package/docs/components/alert.md +0 -104
  36. package/docs/components/avatar.md +0 -13
  37. package/docs/components/badge.md +0 -101
  38. package/docs/components/breadcrumb.md +0 -93
  39. package/docs/components/button-group.md +0 -13
  40. package/docs/components/button.md +0 -98
  41. package/docs/components/card.md +0 -111
  42. package/docs/components/carousel.md +0 -167
  43. package/docs/components/checkbox.md +0 -110
  44. package/docs/components/close-button.md +0 -13
  45. package/docs/components/code.md +0 -13
  46. package/docs/components/collapse.md +0 -78
  47. package/docs/components/combobox.md +0 -123
  48. package/docs/components/command-palette.md +0 -131
  49. package/docs/components/datatable.md +0 -173
  50. package/docs/components/datepicker.md +0 -137
  51. package/docs/components/divider.md +0 -57
  52. package/docs/components/dropdown.md +0 -103
  53. package/docs/components/empty-state.md +0 -65
  54. package/docs/components/file-upload-advanced.md +0 -116
  55. package/docs/components/file-upload.md +0 -93
  56. package/docs/components/icon-link.md +0 -13
  57. package/docs/components/input-group.md +0 -73
  58. package/docs/components/input.md +0 -90
  59. package/docs/components/list-group.md +0 -13
  60. package/docs/components/modal.md +0 -120
  61. package/docs/components/navbar.md +0 -74
  62. package/docs/components/nested-menu.md +0 -90
  63. package/docs/components/notification-center.md +0 -116
  64. package/docs/components/offcanvas.md +0 -102
  65. package/docs/components/pagination.md +0 -145
  66. package/docs/components/placeholder.md +0 -13
  67. package/docs/components/popover.md +0 -118
  68. package/docs/components/progress.md +0 -126
  69. package/docs/components/radio.md +0 -80
  70. package/docs/components/range.md +0 -83
  71. package/docs/components/rating.md +0 -91
  72. package/docs/components/ratio.md +0 -13
  73. package/docs/components/responsive.md +0 -19
  74. package/docs/components/scrollspy.md +0 -13
  75. package/docs/components/segmented-control.md +0 -82
  76. package/docs/components/select.md +0 -89
  77. package/docs/components/skeleton.md +0 -70
  78. package/docs/components/stepper.md +0 -107
  79. package/docs/components/switch.md +0 -97
  80. package/docs/components/table.md +0 -90
  81. package/docs/components/tabs.md +0 -104
  82. package/docs/components/tag.md +0 -144
  83. package/docs/components/tile.md +0 -112
  84. package/docs/components/timeline.md +0 -78
  85. package/docs/components/toast.md +0 -108
  86. package/docs/components/tooltip.md +0 -113
  87. package/docs/components/tree-view.md +0 -118
  88. package/docs/contributing/contributing.md +0 -18
  89. package/docs/getting-started/installation.md +0 -70
  90. package/docs/getting-started/usage.md +0 -105
  91. package/docs/guides/accessibility.md +0 -109
  92. package/docs/guides/charts.md +0 -73
  93. package/docs/guides/dark-mode.md +0 -90
  94. package/docs/guides/icons.md +0 -99
  95. package/docs/guides/javascript-api.md +0 -9
  96. package/docs/guides/layout-advanced.md +0 -118
  97. package/docs/guides/migration-clarus-to-fokus.md +0 -48
  98. package/docs/guides/migration-external.md +0 -123
  99. package/docs/guides/migration-v1.md +0 -63
  100. package/docs/guides/print.md +0 -30
  101. package/docs/guides/rtl-and-system-preferences.md +0 -28
  102. package/docs/guides/theming.md +0 -140
  103. package/docs/guides/utility-api.md +0 -9
  104. package/docs/prompts/prompt-plan.md +0 -45
  105. package/docs/reference/accessibility-matrix.md +0 -77
  106. package/docs/reference/browser-support.md +0 -75
  107. package/docs/reference/contrast-report.md +0 -54
  108. package/docs/reference/definitions.md +0 -868
  109. package/docs/reference/design-tokens.md +0 -208
  110. package/docs/reference/scss-architecture.md +0 -227
  111. package/docs/reference/size-baseline.json +0 -34
  112. package/docs/reference/stability.md +0 -89
  113. package/docs/showcase.md +0 -25
  114. package/mockup/README.md +0 -41
  115. package/mockup/assets/carousel-planning.png +0 -0
  116. package/mockup/assets/carousel-workspace.png +0 -0
  117. package/mockup/assets/example-theme.css +0 -19
  118. package/mockup/assets/example-theme.js +0 -11
  119. package/mockup/assets/showcase-contracts.js +0 -84
  120. package/mockup/assets/showcase.css +0 -91
  121. package/mockup/assets/showcase.js +0 -724
  122. package/mockup/content-data.html +0 -9
  123. package/mockup/examples/accordion-tabs-toast.html +0 -149
  124. package/mockup/examples/alert-dialog.html +0 -84
  125. package/mockup/examples/alerts.html +0 -115
  126. package/mockup/examples/badges-alerts.html +0 -109
  127. package/mockup/examples/buttons.html +0 -58
  128. package/mockup/examples/cards.html +0 -132
  129. package/mockup/examples/carousel.html +0 -126
  130. package/mockup/examples/charts.html +0 -102
  131. package/mockup/examples/check-radio-switch.html +0 -620
  132. package/mockup/examples/collapse.html +0 -69
  133. package/mockup/examples/combobox.html +0 -60
  134. package/mockup/examples/command-palette.html +0 -64
  135. package/mockup/examples/datatable.html +0 -113
  136. package/mockup/examples/datepicker.html +0 -62
  137. package/mockup/examples/divider.html +0 -45
  138. package/mockup/examples/dropdown-tooltip.html +0 -77
  139. package/mockup/examples/empty-state.html +0 -56
  140. package/mockup/examples/file-drop.html +0 -74
  141. package/mockup/examples/file-upload-advanced.html +0 -68
  142. package/mockup/examples/forms-advanced.html +0 -77
  143. package/mockup/examples/hover-card.html +0 -86
  144. package/mockup/examples/icons.html +0 -157
  145. package/mockup/examples/input-group.html +0 -74
  146. package/mockup/examples/js-foundation.html +0 -215
  147. package/mockup/examples/layout.html +0 -134
  148. package/mockup/examples/modal-select.html +0 -127
  149. package/mockup/examples/nested-menu.html +0 -73
  150. package/mockup/examples/notification-center.html +0 -86
  151. package/mockup/examples/offcanvas-popover.html +0 -133
  152. package/mockup/examples/pagination-breadcrumbs.html +0 -92
  153. package/mockup/examples/popover.html +0 -81
  154. package/mockup/examples/range.html +0 -69
  155. package/mockup/examples/rating.html +0 -103
  156. package/mockup/examples/segmented-control.html +0 -96
  157. package/mockup/examples/skeletons.html +0 -82
  158. package/mockup/examples/spinner-progress.html +0 -130
  159. package/mockup/examples/stepper.html +0 -119
  160. package/mockup/examples/tables-navbar.html +0 -89
  161. package/mockup/examples/tag.html +0 -115
  162. package/mockup/examples/theming.html +0 -68
  163. package/mockup/examples/tile.html +0 -107
  164. package/mockup/examples/timeline.html +0 -108
  165. package/mockup/examples/toast.html +0 -113
  166. package/mockup/examples/tooltip.html +0 -68
  167. package/mockup/examples/tree-view.html +0 -68
  168. package/mockup/feedback-actions.html +0 -9
  169. package/mockup/forms.html +0 -13
  170. package/mockup/foundations.html +0 -7
  171. package/mockup/kitchen-sink.html +0 -696
  172. package/mockup/navigation-disclosure.html +0 -11
  173. package/mockup/overlays-commands.html +0 -12
  174. package/mockup/templates/README.md +0 -20
  175. package/mockup/templates/admin.html +0 -334
  176. package/mockup/templates/auth.html +0 -234
  177. package/mockup/templates/dashboard.html +0 -442
  178. package/mockup/templates/landing.html +0 -397
  179. package/packages/fokus-icons/package.json +0 -46
  180. package/scripts/migrate-fokus-map.json +0 -1366
  181. package/scripts/migrate-fokus.mjs +0 -97
package/mockup/templates/auth.html DELETED
@@ -1,234 +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>Template - Autenticação | Fokus Styles</title>
7
-
8
- <!-- STYLES IMPORT -->
9
- <link rel="stylesheet" href="../../dist/css/fonts.css">
10
- <link rel="stylesheet" href="../../dist/css/forms.css">
11
- <link rel="stylesheet" href="../../dist/css/components.css">
12
- <link rel="stylesheet" href="../../dist/css/helpers.css">
13
- <style>
14
- body {
15
- margin: 0;
16
- }
17
-
18
- .auth-shell {
19
- display: flex;
20
- min-height: 100vh;
21
- }
22
-
23
- .auth-brand-panel {
24
- flex: 1;
25
- display: flex;
26
- flex-direction: column;
27
- justify-content: center;
28
- gap: 24px;
29
- padding: 48px;
30
- color: #fff;
31
- background-color: var(--fs-color-primary);
32
- background: linear-gradient(160deg, var(--fs-color-primary), color-mix(in oklch, var(--fs-color-primary), black 30%));
33
- }
34
-
35
- @media (max-width: 767px) {
36
- .auth-brand-panel {
37
- display: none;
38
- }
39
- }
40
-
41
- .auth-brand-feature {
42
- display: flex;
43
- align-items: center;
44
- gap: 12px;
45
- }
46
-
47
- .auth-form-panel {
48
- flex: 1;
49
- display: flex;
50
- align-items: center;
51
- justify-content: center;
52
- padding: 24px;
53
- position: relative;
54
- }
55
-
56
- .auth-form-panel-inner {
57
- width: 100%;
58
- max-width: 380px;
59
- }
60
-
61
- .auth-theme-toggle {
62
- position: absolute;
63
- top: 20px;
64
- right: 20px;
65
- }
66
-
67
- .password-toggle-icon-open {
68
- display: inline;
69
- }
70
-
71
- .password-toggle-icon-closed {
72
- display: none;
73
- }
74
-
75
- [data-password-visible="true"] .password-toggle-icon-open {
76
- display: none;
77
- }
78
-
79
- [data-password-visible="true"] .password-toggle-icon-closed {
80
- display: inline;
81
- }
82
- </style>
83
- </head>
84
- <body>
85
-
86
- <!--
87
- Template "Autenticação" — login/cadastro num painel dividido, com Tabs
88
- (data-fs="tabs") pra alternar entre os dois formulários e um toggle de
89
- visibilidade de senha via .fs-input-group + botão. Ver
90
- docs/README.md#templates-prontos.
91
- -->
92
-
93
- <div class="auth-shell">
94
- <div class="auth-brand-panel">
95
- <div class="fs-u-d-flex fs-u-align-items-center" style="gap: 10px;">
96
- <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
97
- <span class="fs-u-fs-xl fs-u-fw-medium">FokusStyles</span>
98
- </div>
99
- <h1 class="fs-u-fs-h2 fs-u-fw-medium fs-u-mb-0">Construa interfaces consistentes, mais rápido.</h1>
100
- <p class="fs-u-fs-md fs-u-mb-0" style="opacity: 0.85;">Componentes acessíveis, tema escuro nativo e zero dependências — tudo pronto pra usar.</p>
101
-
102
- <div class="fs-stack fs-u-mt-3">
103
- <div class="auth-brand-feature">
104
- <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/></svg>
105
- <span>WCAG 2.1 AA por padrão, em todos os componentes</span>
106
- </div>
107
- <div class="auth-brand-feature">
108
- <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/></svg>
109
- <span>Tema escuro nativo via <code>data-theme</code></span>
110
- </div>
111
- <div class="auth-brand-feature">
112
- <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/></svg>
113
- <span>Zero dependências de runtime</span>
114
- </div>
115
- </div>
116
- </div>
117
-
118
- <div class="auth-form-panel">
119
- <button type="button" class="fs-btn auth-theme-toggle" id="theme-toggle" aria-label="Alternar tema escuro">
120
- <svg class="fs-icon" id="theme-toggle-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"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
121
- </button>
122
-
123
- <div class="auth-form-panel-inner">
124
- <div class="fs-tabs fs-tabs-pill fs-u-mb-3" data-fs="tabs" id="auth-tabs">
125
- <a href="#" class="fs-nav-link is-active" data-fs-target="#tab-login">Entrar</a>
126
- <a href="#" class="fs-nav-link" data-fs-target="#tab-cadastro">Criar conta</a>
127
- </div>
128
-
129
- <div class="fs-tab-content">
130
- <div class="fs-tab-pane is-active" id="tab-login">
131
- <form>
132
- <div class="fs-form-row fs-u-mb-2">
133
- <div class="fs-form-col">
134
- <label for="login-email" class="fs-form-label">E-mail</label>
135
- <input type="email" class="fs-form-control" id="login-email" placeholder="voce@empresa.com" required>
136
- </div>
137
- </div>
138
- <div class="fs-form-row fs-u-mb-2">
139
- <div class="fs-form-col">
140
- <label for="login-password" class="fs-form-label">Senha</label>
141
- <div class="fs-input-group" data-password-visible="false" id="login-password-group">
142
- <input type="password" class="fs-form-control" id="login-password" placeholder="••••••••" required>
143
- <button type="button" class="fs-btn" data-password-toggle="login-password" data-password-group="login-password-group" aria-label="Mostrar senha">
144
- <svg class="fs-icon password-toggle-icon-open" 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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
145
- <svg class="fs-icon password-toggle-icon-closed" 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.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>
146
- </button>
147
- </div>
148
- </div>
149
- </div>
150
- <div class="fs-u-d-flex fs-u-justify-content-between fs-u-align-items-center fs-u-mb-3">
151
- <div class="fs-check">
152
- <input type="checkbox" class="fs-check-input" id="login-remember">
153
- <label for="login-remember" class="fs-check-label fs-form-size-md">Lembrar de mim</label>
154
- </div>
155
- <a href="#" class="fs-u-fs-sm">Esqueceu a senha?</a>
156
- </div>
157
- <button type="submit" class="fs-btn fs-btn-primary" style="width: 100%;">Entrar</button>
158
- </form>
159
- </div>
160
-
161
- <div class="fs-tab-pane" id="tab-cadastro">
162
- <form>
163
- <div class="fs-form-row fs-u-mb-2">
164
- <div class="fs-form-col">
165
- <label for="signup-name" class="fs-form-label">Nome completo</label>
166
- <input type="text" class="fs-form-control" id="signup-name" placeholder="Seu nome" required>
167
- </div>
168
- </div>
169
- <div class="fs-form-row fs-u-mb-2">
170
- <div class="fs-form-col">
171
- <label for="signup-email" class="fs-form-label">E-mail</label>
172
- <input type="email" class="fs-form-control" id="signup-email" placeholder="voce@empresa.com" required>
173
- </div>
174
- </div>
175
- <div class="fs-form-row fs-u-mb-2">
176
- <div class="fs-form-col">
177
- <label for="signup-password" class="fs-form-label">Senha</label>
178
- <input type="password" class="fs-form-control" id="signup-password" placeholder="Mínimo 8 caracteres" required>
179
- </div>
180
- </div>
181
- <div class="fs-u-mb-3">
182
- <div class="fs-check">
183
- <input type="checkbox" class="fs-check-input" id="signup-terms" required>
184
- <label for="signup-terms" class="fs-check-label fs-form-size-md">Aceito os termos de uso e a política de privacidade</label>
185
- </div>
186
- </div>
187
- <button type="submit" class="fs-btn fs-btn-primary" style="width: 100%;">Criar conta</button>
188
- </form>
189
- </div>
190
- </div>
191
- </div>
192
- </div>
193
- </div>
194
-
195
- <!-- SCRIPTS IMPORT -->
196
- <script src="../../dist/js/fokus.js"></script>
197
- <script>
198
- // Alternância de tema — mesmo mecanismo de docs/guides/dark-mode.md.
199
- const sunIcon = '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>';
200
- const moonIcon = '<path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/>';
201
-
202
- const toggle = document.getElementById("theme-toggle");
203
- const icon = document.getElementById("theme-toggle-icon");
204
-
205
- function applyTheme(theme) {
206
- document.documentElement.setAttribute("data-theme", theme);
207
- icon.innerHTML = theme === "dark" ? moonIcon : sunIcon;
208
- }
209
-
210
- const stored = localStorage.getItem("theme") ||
211
- (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
212
- applyTheme(stored);
213
-
214
- toggle.addEventListener("click", () => {
215
- const next = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark";
216
- applyTheme(next);
217
- localStorage.setItem("theme", next);
218
- });
219
-
220
- // Mostrar/ocultar senha — alterna o type do input e o ícone do botão.
221
- document.querySelectorAll("[data-password-toggle]").forEach((btn) => {
222
- btn.addEventListener("click", () => {
223
- const input = document.getElementById(btn.dataset.passwordToggle);
224
- const group = document.getElementById(btn.dataset.passwordGroup);
225
- const visible = group.dataset.passwordVisible === "true";
226
- input.type = visible ? "password" : "text";
227
- group.dataset.passwordVisible = String(!visible);
228
- btn.setAttribute("aria-label", visible ? "Mostrar senha" : "Ocultar senha");
229
- });
230
- });
231
- </script>
232
-
233
- </body>
234
- </html>