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/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>