fokus-styles 2.5.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 (177) hide show
  1. package/package.json +17 -15
  2. package/CHANGELOG.md +0 -940
  3. package/dist/css/components.css.map +0 -1
  4. package/dist/css/components.min.css.map +0 -1
  5. package/dist/css/fokus-components.css.map +0 -1
  6. package/dist/css/fokus-components.min.css.map +0 -1
  7. package/dist/css/fokus-core.css.map +0 -1
  8. package/dist/css/fokus-core.min.css.map +0 -1
  9. package/dist/css/fokus-dark.css.map +0 -1
  10. package/dist/css/fokus-dark.min.css.map +0 -1
  11. package/dist/css/fokus-rtl.css.map +0 -1
  12. package/dist/css/fokus-rtl.min.css.map +0 -1
  13. package/dist/css/fokus-utilities.css.map +0 -1
  14. package/dist/css/fokus-utilities.min.css.map +0 -1
  15. package/dist/css/fokus.css.map +0 -1
  16. package/dist/css/fokus.min.css.map +0 -1
  17. package/dist/css/fonts.css.map +0 -1
  18. package/dist/css/fonts.min.css.map +0 -1
  19. package/dist/css/forms.css.map +0 -1
  20. package/dist/css/forms.min.css.map +0 -1
  21. package/dist/css/helpers.css.map +0 -1
  22. package/dist/css/helpers.min.css.map +0 -1
  23. package/dist/css/layout.css.map +0 -1
  24. package/dist/css/layout.min.css.map +0 -1
  25. package/dist/js/fokus.js.map +0 -7
  26. package/dist/js/fokus.min.js.map +0 -7
  27. package/docs/README.md +0 -86
  28. package/docs/comparison.md +0 -124
  29. package/docs/components/accordion.md +0 -104
  30. package/docs/components/alert-dialog.md +0 -99
  31. package/docs/components/alert.md +0 -104
  32. package/docs/components/avatar.md +0 -13
  33. package/docs/components/badge.md +0 -101
  34. package/docs/components/breadcrumb.md +0 -93
  35. package/docs/components/button-group.md +0 -13
  36. package/docs/components/button.md +0 -98
  37. package/docs/components/card.md +0 -111
  38. package/docs/components/carousel.md +0 -167
  39. package/docs/components/checkbox.md +0 -110
  40. package/docs/components/close-button.md +0 -13
  41. package/docs/components/code.md +0 -13
  42. package/docs/components/collapse.md +0 -78
  43. package/docs/components/combobox.md +0 -123
  44. package/docs/components/command-palette.md +0 -131
  45. package/docs/components/datatable.md +0 -173
  46. package/docs/components/datepicker.md +0 -137
  47. package/docs/components/divider.md +0 -57
  48. package/docs/components/dropdown.md +0 -103
  49. package/docs/components/empty-state.md +0 -65
  50. package/docs/components/file-upload-advanced.md +0 -116
  51. package/docs/components/file-upload.md +0 -93
  52. package/docs/components/icon-link.md +0 -13
  53. package/docs/components/input-group.md +0 -73
  54. package/docs/components/input.md +0 -90
  55. package/docs/components/list-group.md +0 -13
  56. package/docs/components/modal.md +0 -120
  57. package/docs/components/navbar.md +0 -74
  58. package/docs/components/nested-menu.md +0 -90
  59. package/docs/components/notification-center.md +0 -116
  60. package/docs/components/offcanvas.md +0 -102
  61. package/docs/components/pagination.md +0 -145
  62. package/docs/components/placeholder.md +0 -13
  63. package/docs/components/popover.md +0 -118
  64. package/docs/components/progress.md +0 -126
  65. package/docs/components/radio.md +0 -80
  66. package/docs/components/range.md +0 -83
  67. package/docs/components/rating.md +0 -91
  68. package/docs/components/ratio.md +0 -13
  69. package/docs/components/responsive.md +0 -19
  70. package/docs/components/scrollspy.md +0 -13
  71. package/docs/components/segmented-control.md +0 -82
  72. package/docs/components/select.md +0 -89
  73. package/docs/components/skeleton.md +0 -70
  74. package/docs/components/stepper.md +0 -107
  75. package/docs/components/switch.md +0 -97
  76. package/docs/components/table.md +0 -90
  77. package/docs/components/tabs.md +0 -104
  78. package/docs/components/tag.md +0 -144
  79. package/docs/components/tile.md +0 -112
  80. package/docs/components/timeline.md +0 -78
  81. package/docs/components/toast.md +0 -108
  82. package/docs/components/tooltip.md +0 -113
  83. package/docs/components/tree-view.md +0 -118
  84. package/docs/contributing/contributing.md +0 -18
  85. package/docs/getting-started/installation.md +0 -70
  86. package/docs/getting-started/usage.md +0 -105
  87. package/docs/guides/accessibility.md +0 -109
  88. package/docs/guides/charts.md +0 -73
  89. package/docs/guides/dark-mode.md +0 -90
  90. package/docs/guides/icons.md +0 -99
  91. package/docs/guides/javascript-api.md +0 -9
  92. package/docs/guides/layout-advanced.md +0 -118
  93. package/docs/guides/migration-clarus-to-fokus.md +0 -48
  94. package/docs/guides/migration-external.md +0 -123
  95. package/docs/guides/migration-v1.md +0 -63
  96. package/docs/guides/print.md +0 -30
  97. package/docs/guides/rtl-and-system-preferences.md +0 -28
  98. package/docs/guides/theming.md +0 -140
  99. package/docs/guides/utility-api.md +0 -9
  100. package/docs/prompts/prompt-plan.md +0 -45
  101. package/docs/reference/accessibility-matrix.md +0 -77
  102. package/docs/reference/browser-support.md +0 -75
  103. package/docs/reference/contrast-report.md +0 -54
  104. package/docs/reference/definitions.md +0 -868
  105. package/docs/reference/design-tokens.md +0 -208
  106. package/docs/reference/scss-architecture.md +0 -227
  107. package/docs/reference/size-baseline.json +0 -34
  108. package/docs/reference/stability.md +0 -89
  109. package/docs/showcase.md +0 -25
  110. package/mockup/README.md +0 -41
  111. package/mockup/assets/carousel-planning.png +0 -0
  112. package/mockup/assets/carousel-workspace.png +0 -0
  113. package/mockup/assets/example-theme.css +0 -19
  114. package/mockup/assets/example-theme.js +0 -11
  115. package/mockup/assets/showcase-contracts.js +0 -84
  116. package/mockup/assets/showcase.css +0 -91
  117. package/mockup/assets/showcase.js +0 -724
  118. package/mockup/content-data.html +0 -9
  119. package/mockup/examples/accordion-tabs-toast.html +0 -149
  120. package/mockup/examples/alert-dialog.html +0 -84
  121. package/mockup/examples/alerts.html +0 -115
  122. package/mockup/examples/badges-alerts.html +0 -109
  123. package/mockup/examples/buttons.html +0 -58
  124. package/mockup/examples/cards.html +0 -132
  125. package/mockup/examples/carousel.html +0 -126
  126. package/mockup/examples/charts.html +0 -102
  127. package/mockup/examples/check-radio-switch.html +0 -620
  128. package/mockup/examples/collapse.html +0 -69
  129. package/mockup/examples/combobox.html +0 -60
  130. package/mockup/examples/command-palette.html +0 -64
  131. package/mockup/examples/datatable.html +0 -113
  132. package/mockup/examples/datepicker.html +0 -62
  133. package/mockup/examples/divider.html +0 -45
  134. package/mockup/examples/dropdown-tooltip.html +0 -77
  135. package/mockup/examples/empty-state.html +0 -56
  136. package/mockup/examples/file-drop.html +0 -74
  137. package/mockup/examples/file-upload-advanced.html +0 -68
  138. package/mockup/examples/forms-advanced.html +0 -77
  139. package/mockup/examples/hover-card.html +0 -86
  140. package/mockup/examples/icons.html +0 -157
  141. package/mockup/examples/input-group.html +0 -74
  142. package/mockup/examples/js-foundation.html +0 -215
  143. package/mockup/examples/layout.html +0 -134
  144. package/mockup/examples/modal-select.html +0 -127
  145. package/mockup/examples/nested-menu.html +0 -73
  146. package/mockup/examples/notification-center.html +0 -86
  147. package/mockup/examples/offcanvas-popover.html +0 -133
  148. package/mockup/examples/pagination-breadcrumbs.html +0 -92
  149. package/mockup/examples/popover.html +0 -81
  150. package/mockup/examples/range.html +0 -69
  151. package/mockup/examples/rating.html +0 -103
  152. package/mockup/examples/segmented-control.html +0 -96
  153. package/mockup/examples/skeletons.html +0 -82
  154. package/mockup/examples/spinner-progress.html +0 -130
  155. package/mockup/examples/stepper.html +0 -119
  156. package/mockup/examples/tables-navbar.html +0 -89
  157. package/mockup/examples/tag.html +0 -115
  158. package/mockup/examples/theming.html +0 -68
  159. package/mockup/examples/tile.html +0 -107
  160. package/mockup/examples/timeline.html +0 -108
  161. package/mockup/examples/toast.html +0 -113
  162. package/mockup/examples/tooltip.html +0 -68
  163. package/mockup/examples/tree-view.html +0 -68
  164. package/mockup/feedback-actions.html +0 -9
  165. package/mockup/forms.html +0 -13
  166. package/mockup/foundations.html +0 -7
  167. package/mockup/kitchen-sink.html +0 -696
  168. package/mockup/navigation-disclosure.html +0 -11
  169. package/mockup/overlays-commands.html +0 -12
  170. package/mockup/templates/README.md +0 -20
  171. package/mockup/templates/admin.html +0 -334
  172. package/mockup/templates/auth.html +0 -234
  173. package/mockup/templates/dashboard.html +0 -442
  174. package/mockup/templates/landing.html +0 -397
  175. package/packages/fokus-icons/package.json +0 -46
  176. package/scripts/migrate-fokus-map.json +0 -1366
  177. 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>