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/navigation-disclosure.html DELETED
@@ -1,11 +0,0 @@
1
- <!doctype html><html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>FokusStyles — Navegação</title><link rel="stylesheet" href="../dist/css/fonts.css"><link rel="stylesheet" href="../dist/css/components.css"><link rel="stylesheet" href="../dist/css/forms.css"><link rel="stylesheet" href="../dist/css/helpers.css"><link rel="stylesheet" href="assets/showcase.css"></head><body><main class="showcase-shell"><header class="showcase-hero"><p class="showcase-eyebrow">Fokus Styles · laboratório</p><h1 class="showcase-title">Navegação e revelação de conteúdo</h1><p class="showcase-lead">Padrões para localizar conteúdo, alternar contexto e revelar detalhes sem comprometer orientação ou navegação por teclado.</p></header><div class="showcase-toolbar"><button class="fs-btn fs-btn-primary" type="button" data-showcase-theme>Usar tema escuro</button><a class="fs-btn" href="README.md">Índice dos laboratórios</a></div><nav class="showcase-nav" aria-label="Componentes desta página" data-showcase-navigation></nav><div data-showcase-sections></div></main><script id="showcase-catalog" type="application/json">[
2
- {"id":"navbar","title":"Navbar","description":"Navegação principal responsiva para áreas globais da aplicação.","use":"Use uma navbar por contexto principal e destaque a rota atual.","api":".fs-navbar, links de navegação e modificadores responsivos.","a11y":"Use nav com label, links semânticos e foco sempre visível.","states":"Ativo, compacto e tema escuro.","source":"examples/tables-navbar.html","height":750},
3
- {"id":"breadcrumb","title":"Breadcrumb","description":"Caminho hierárquico até a página atual.","use":"Use quando a estrutura possui mais de um nível navegável.","api":".fs-breadcrumb e item ativo.","a11y":"Use nav aria-label=Breadcrumb e marque a página atual.","states":"Itens longos, truncamento e separadores.","source":"examples/pagination-breadcrumbs.html","height":880},
4
- {"id":"pagination","title":"Pagination","description":"Navegação entre páginas de uma coleção paginada.","use":"Use somente quando a coleção não cabe em uma visão contínua.","api":".fs-pagination, item ativo, anterior e próximo.","a11y":"Use links nomeados e aria-current=page para a página atual.","states":"Ativo, disabled, compacto e muitos resultados.","source":"examples/pagination-breadcrumbs.html","height":880},
5
- {"id":"accordion","title":"Accordion","description":"Revela painéis relacionados mantendo uma lista compacta.","use":"Use quando títulos permitem escolher o detalhe a abrir.","api":".fs-accordion, button, panel e atributos aria-expanded/controls.","a11y":"Botões controlam painéis identificados e funcionam por teclado.","states":"Exclusivo, múltiplo, aberto e fechado.","source":"examples/accordion-tabs-toast.html","height":980},
6
- {"id":"tabs","title":"Tabs","description":"Alterna painéis pares no mesmo contexto de conteúdo.","use":"Use para categorias equivalentes; não esconda sequência obrigatória.","api":".fs-tabs, .fs-nav-link, tabpanel e ARIA correspondente.","a11y":"Suporte setas, Home/End, aria-selected e relação tab/panel.","states":"Ativa, foco, disabled e painéis.","source":"examples/accordion-tabs-toast.html","height":980},
7
- {"id":"collapse","title":"Collapse","description":"Expansão simples de um único trecho de conteúdo.","use":"Use para detalhes opcionais relacionados a um gatilho claro.","api":"FokusStyles.Collapse, data-fs-target e aria-expanded.","a11y":"O gatilho anuncia estado e controla um elemento identificado.","states":"Inicial aberto, fechado e movimento reduzido.","source":"examples/collapse.html","height":680},
8
- {"id":"stepper","title":"Stepper","description":"Mostra progresso em fluxo dividido em etapas.","use":"Use em processos sequenciais com etapas reconhecíveis.","api":".fs-stepper, .fs-step e controles data-stepper.","a11y":"Informe etapa atual, concluídas e bloqueadas; preserve ordem de foco.","states":"Ativa, concluída, próxima, anterior e navegação permitida.","source":"examples/stepper.html","height":920},
9
- {"id":"nested-menu","title":"Nested menu","description":"Menu hierárquico para navegação de múltiplos níveis.","use":"Use apenas quando a hierarquia real exigir níveis adicionais.","api":".fs-nested-menu e itens controladores.","a11y":"Use setas, Escape, aria-expanded e foco previsível.","states":"Aberto, fechado, item ativo e teclado.","source":"examples/nested-menu.html","height":780},
10
- {"id":"tree-view","title":"Tree view","description":"Estrutura expansível para dados ou navegação estritamente hierárquica.","use":"Use para relações pai-filho densas; prefira lista simples quando possível.","api":".fs-tree-view, treeitem e grupos internos.","a11y":"Siga roles tree/treeitem e controles de expansão por teclado.","states":"Expandido, recolhido, selecionado e níveis.","source":"examples/tree-view.html","height":760}
11
- ]</script><script src="../dist/js/fokus.js"></script><script src="assets/showcase-contracts.js"></script><script src="assets/showcase.js"></script></body></html>
package/mockup/overlays-commands.html DELETED
@@ -1,12 +0,0 @@
1
- <!doctype html><html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>FokusStyles — Overlays</title><link rel="stylesheet" href="../dist/css/fonts.css"><link rel="stylesheet" href="../dist/css/components.css"><link rel="stylesheet" href="../dist/css/forms.css"><link rel="stylesheet" href="../dist/css/helpers.css"><link rel="stylesheet" href="assets/showcase.css"></head><body><main class="showcase-shell"><header class="showcase-hero"><p class="showcase-eyebrow">Fokus Styles · laboratório</p><h1 class="showcase-title">Overlays, comandos e notificações</h1><p class="showcase-lead">Componentes que sobrepõem conteúdo ou respondem a uma ação imediata. O foco, Escape e clique externo fazem parte do contrato de cada exemplo.</p></header><div class="showcase-toolbar"><button class="fs-btn fs-btn-primary" type="button" data-showcase-theme>Usar tema escuro</button><a class="fs-btn" href="README.md">Índice dos laboratórios</a></div><nav class="showcase-nav" aria-label="Componentes desta página" data-showcase-navigation></nav><div data-showcase-sections></div></main><script id="showcase-catalog" type="application/json">[
2
- {"id":"dropdown","title":"Dropdown","description":"Menu contextual acionado por botão ou controle equivalente.","use":"Use para ações secundárias e compactas relacionadas a um mesmo gatilho.","api":".fs-dropdown, toggle, menu, data-align e item.","a11y":"Gerencie aria-expanded, foco inicial, setas e Escape.","states":"Alinhamento, aberto, item disabled e clique externo.","source":"examples/dropdown-tooltip.html","height":880},
3
- {"id":"tooltip","title":"Tooltip","description":"Ajuda curta e complementar mostrada ao foco ou hover.","use":"Explique ícones ou termos sem esconder informação essencial.","api":".fs-tooltip, data-placement, data-align e offset.","a11y":"Disponibilize no foco e não dependa só de hover.","states":"Posições, alinhamentos, offset, hover, foco, delay, RTL e fallback.","source":"examples/tooltip.html","height":1450},
4
- {"id":"hover-card","title":"Hover card","description":"Prévia rica de informação associada a um gatilho.","use":"Use como complemento opcional; conteúdo essencial deve permanecer acessível sem hover.","api":".fs-hover-card e gatilho associado.","a11y":"Mantenha foco, fechamento previsível e conteúdo alcançável.","states":"Hover, foco, posicionamento e saída do ponteiro.","source":"examples/hover-card.html","height":720},
5
- {"id":"popover","title":"Popover","description":"Painel contextual acionado por clique ou hover.","use":"Use para conteúdo curto que depende de um elemento próximo.","api":".fs-popover, data-fs-target e modos de acionamento.","a11y":"Controle foco e fechamento por Escape/clique externo quando aplicável.","states":"Clique, hover, manual, foco, RTL e alinhamento responsivo.","source":"examples/popover.html","height":1180},
6
- {"id":"offcanvas","title":"Offcanvas","description":"Painel lateral para navegação ou tarefas auxiliares.","use":"Use para contexto complementar sem trocar de página.","api":".fs-offcanvas, data-fs-target, dismiss e data-backdrop.","a11y":"Prenda foco, bloqueie scroll e devolva foco ao gatilho.","states":"Lados, aberto, backdrop estático, Escape e dismiss.","source":"examples/offcanvas-popover.html","height":1080},
7
- {"id":"modal","title":"Modal","description":"Diálogo para decisão ou tarefa que exige atenção temporária.","use":"Use com parcimônia; não esconda fluxo longo em modal.","api":".fs-modal, data-fs-target, dismiss e data-backdrop=static.","a11y":"Use diálogo nomeado, focus trap, Escape e foco de retorno.","states":"Tamanhos, aberto, backdrop estático e confirmação.","source":"examples/modal-select.html","height":900},
8
- {"id":"alert-dialog","title":"Alert dialog","description":"Confirmação de ação crítica com escolhas explícitas.","use":"Use para consequências relevantes, como exclusão ou perda de dados.","api":"FokusStyles.confirm() e estrutura .fs-alert-dialog.","a11y":"Destaque consequência, foco inicial seguro e retorno ao gatilho.","states":"Confirmação, cancelamento, destrutivo e teclado.","source":"examples/alert-dialog.html","height":650},
9
- {"id":"command-palette","title":"Command palette","description":"Acesso rápido pesquisável a comandos e destinos.","use":"Use como atalho para usuários frequentes, nunca como única navegação.","api":".fs-command-palette e API JavaScript correspondente.","a11y":"Gerencie diálogo, input rotulado, resultados e foco.","states":"Aberta, busca, vazio, atalho e Escape.","source":"examples/command-palette.html","height":800},
10
- {"id":"toast","title":"Toast","description":"Mensagem temporária após uma ação não bloqueante.","use":"Use para confirmar operações assíncronas sem interromper o fluxo.","api":".fs-toast, gatilho e configuração de duração.","a11y":"Use região viva apropriada e evite mensagens que desaparecem rápido demais.","states":"Variantes, empilhamento, fechamento e auto-dismiss.","source":"examples/accordion-tabs-toast.html","height":980},
11
- {"id":"notification-center","title":"Notification center","description":"Lista persistente de notificações e ações relacionadas.","use":"Use quando o histórico precisa permanecer consultável.","api":".fs-notification-center e itens de notificação.","a11y":"Organize como lista e identifique estado lido/não lido textualmente.","states":"Lida, não lida, vazia e ações em lote.","source":"examples/notification-center.html","height":850}
12
- ]</script><script src="../dist/js/fokus.js"></script><script src="assets/showcase-contracts.js"></script><script src="assets/showcase.js"></script></body></html>
package/mockup/templates/README.md DELETED
@@ -1,20 +0,0 @@
1
- # Templates prontos
2
-
3
- 4 páginas completas, prontas para copiar como ponto de partida de um
4
- projeto real — diferente dos [laboratórios de `mockup/`](../README.md), que
5
- documentam componentes e suas configurações, cada arquivo aqui monta vários
6
- componentes juntos numa página só, exatamente como ela apareceria em produção.
7
-
8
- Todos usam só CSS/JS já publicado (`../../dist/`) — sem build, sem
9
- dependência nova — e têm tema escuro funcional (botão no topo, mesmo
10
- mecanismo de [`docs/guides/dark-mode.md`](../../docs/guides/dark-mode.md)).
11
-
12
- | Arquivo | O que mostra |
13
- |---|---|
14
- | [`dashboard.html`](dashboard.html) | Navegação lateral, KPIs, gráfico (tokens `--fs-chart-*`) e DataTable. |
15
- | [`auth.html`](auth.html) | Login/cadastro com Tabs, painel dividido e toggle de visibilidade de senha. |
16
- | [`landing.html`](landing.html) | Página de marketing: hero, recursos, preços (com toggle mensal/anual) e CTA. Marca "Orbit" é fictícia, só para ilustrar o conteúdo. |
17
- | [`admin.html`](admin.html) | Gestão (CRUD) de usuários: DataTable com ações por linha, Modal de criação e Tabs de configurações. |
18
-
19
- Nenhum usa classe que não exista no framework publicado — se algo aqui não
20
- funcionar copiado para o seu projeto, é bug, não "mágica do mockup".
package/mockup/templates/admin.html DELETED
@@ -1,334 +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 - Painel administrativo | Fokus Styles</title>
7
-
8
- <!-- STYLES IMPORT -->
9
- <link rel="stylesheet" href="../../dist/css/fonts.css">
10
- <link rel="stylesheet" href="../../dist/css/layout.css">
11
- <link rel="stylesheet" href="../../dist/css/forms.css">
12
- <link rel="stylesheet" href="../../dist/css/components.css">
13
- <link rel="stylesheet" href="../../dist/css/helpers.css">
14
- <style>
15
- body {
16
- margin: 0;
17
- background-color: var(--fs-color-subtle);
18
- }
19
-
20
- .app-shell {
21
- min-height: 100vh;
22
- align-items: stretch;
23
- }
24
-
25
- .app-nav {
26
- background-color: var(--fs-color-surface);
27
- border-right: 1px solid var(--fs-color-border);
28
- display: flex;
29
- flex-direction: column;
30
- padding: 20px 16px;
31
- }
32
-
33
- @media (min-width: 768px) {
34
- .app-nav {
35
- position: sticky;
36
- top: 0;
37
- height: 100vh;
38
- overflow-y: auto;
39
- }
40
- }
41
-
42
- .app-brand {
43
- display: flex;
44
- align-items: center;
45
- gap: 10px;
46
- padding: 4px 12px 20px;
47
- color: var(--fs-color-text);
48
- text-decoration: none;
49
- }
50
-
51
- .app-nav-footer {
52
- margin-top: auto;
53
- padding-top: 16px;
54
- }
55
-
56
- .app-topbar {
57
- position: sticky;
58
- top: 0;
59
- z-index: 10;
60
- display: flex;
61
- align-items: center;
62
- gap: 16px;
63
- padding: 12px 24px;
64
- background-color: var(--fs-color-surface);
65
- border-bottom: 1px solid var(--fs-color-border);
66
- }
67
-
68
- .app-main {
69
- padding: 24px;
70
- max-width: 1200px;
71
- }
72
-
73
- .row-actions {
74
- display: flex;
75
- gap: 4px;
76
- justify-content: flex-end;
77
- }
78
-
79
- .row-actions .fs-btn {
80
- padding: 0 8px;
81
- }
82
- </style>
83
- </head>
84
- <body>
85
-
86
- <!--
87
- Template "Painel administrativo" — tela de gestão (CRUD) de usuários:
88
- DataTable com ações por linha, Modal de criação e Tabs de configurações
89
- da conta. Mesma casca de navegação do template "Dashboard", só o
90
- conteúdo muda. Montado só com componentes já publicados. Ver
91
- docs/README.md#templates-prontos.
92
- -->
93
-
94
- <div class="fs-sidebar fs-sidebar-gap-0 fs-sidebar-width-sm app-shell">
95
- <aside class="fs-sidebar-aside app-nav">
96
- <a href="#" class="app-brand">
97
- <svg class="fs-icon fs-icon-lg" 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"><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>
98
- <span class="fs-u-fs-lg fs-u-fw-medium">FokusStyles Admin</span>
99
- </a>
100
-
101
- <nav class="fs-stack fs-stack-gap-1" aria-label="Navegação principal">
102
- <a href="#" class="fs-nav-link">
103
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
104
- Dashboard
105
- </a>
106
- <a href="#" class="fs-nav-link is-active">
107
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M16 3.128a4 4 0 0 1 0 7.744"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><circle cx="9" cy="7" r="4"/></svg>
108
- Usuários
109
- </a>
110
- <a href="#" class="fs-nav-link">
111
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>
112
- Pedidos
113
- </a>
114
- <a href="#" class="fs-nav-link">
115
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 21v-6"/><path d="M12 21V9"/><path d="M19 21V3"/></svg>
116
- Relatórios
117
- </a>
118
- <div class="fs-divider fs-u-my-2"></div>
119
- <a href="#" class="fs-nav-link">
120
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>
121
- Configurações
122
- </a>
123
- </nav>
124
-
125
- <div class="app-nav-footer">
126
- <div class="fs-dropdown">
127
- <button type="button" class="fs-btn fs-dropdown-toggle" style="width: 100%; justify-content: flex-start;" data-fs="dropdown" data-fs-target="#user-menu">
128
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
129
- Jorge Reis
130
- </button>
131
- <div class="fs-dropdown-menu" id="user-menu">
132
- <a href="#" class="fs-dropdown-item">Perfil</a>
133
- <a href="#" class="fs-dropdown-item">Configurações</a>
134
- <div class="fs-dropdown-divider"></div>
135
- <button type="button" class="fs-dropdown-item">Sair</button>
136
- </div>
137
- </div>
138
- </div>
139
- </aside>
140
-
141
- <div class="fs-sidebar-content">
142
- <header class="app-topbar">
143
- <ol class="fs-breadcrumb fs-u-mb-0">
144
- <li class="fs-breadcrumb-item"><a href="#">Início</a></li>
145
- <li class="fs-breadcrumb-item is-active">Usuários</li>
146
- </ol>
147
- <div style="margin-left: auto;">
148
- <button type="button" class="fs-btn" id="theme-toggle" aria-label="Alternar tema escuro">
149
- <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>
150
- </button>
151
- </div>
152
- </header>
153
-
154
- <main class="app-main">
155
- <div class="fs-u-d-flex fs-u-justify-content-between fs-u-align-items-center fs-u-mb-3">
156
- <div>
157
- <h1 class="fs-u-fs-h3 fs-u-fw-medium fs-u-mb-0">Usuários</h1>
158
- <p class="fs-card-subtitle fs-u-mb-0">Gerencie quem tem acesso à sua conta</p>
159
- </div>
160
- <button type="button" class="fs-btn fs-btn-primary" data-fs="modal" data-fs-target="#modal-new-user">
161
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
162
- Novo usuário
163
- </button>
164
- </div>
165
-
166
- <div class="fs-card fs-u-mb-3">
167
- <div class="fs-card-body">
168
- <div class="fs-datatable" id="users-table" data-fs="datatable" data-fs-page-size="5">
169
- <div class="fs-datatable-toolbar">
170
- <input type="search" class="fs-form-control" data-fs-datatable-filter placeholder="Filtrar por nome ou e-mail…" style="flex: 1;">
171
- <select class="fs-form-select" data-fs="select" style="width: 160px;" aria-label="Filtrar por função">
172
- <option value="">Todas as funções</option>
173
- <option value="admin">Administrador</option>
174
- <option value="editor">Editor</option>
175
- <option value="viewer">Leitor</option>
176
- </select>
177
- </div>
178
- <div class="fs-table-responsive">
179
- <table class="fs-table fs-table-striped fs-table-hover">
180
- <thead>
181
- <tr>
182
- <th scope="col" data-fs-sort="name">Nome</th>
183
- <th scope="col" data-fs-sort="email">E-mail</th>
184
- <th scope="col" data-fs-sort="role">Função</th>
185
- <th scope="col" data-fs-sort="status">Status</th>
186
- <th scope="col" style="width: 96px;">Ações</th>
187
- </tr>
188
- </thead>
189
- <tbody>
190
- <tr><td>Ana Beatriz</td><td>ana.beatriz@empresa.com</td><td>Administrador</td><td><span class="fs-badge fs-badge-success fs-badge-sm">Ativo</span></td><td><div class="row-actions"><button type="button" class="fs-btn fs-btn-sm" aria-label="Editar Ana Beatriz"><svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg></button><button type="button" class="fs-btn fs-btn-sm" aria-label="Remover Ana Beatriz"><svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button></div></td></tr>
191
- <tr><td>Bruno Costa</td><td>bruno.costa@empresa.com</td><td>Editor</td><td><span class="fs-badge fs-badge-success fs-badge-sm">Ativo</span></td><td><div class="row-actions"><button type="button" class="fs-btn fs-btn-sm" aria-label="Editar Bruno Costa"><svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg></button><button type="button" class="fs-btn fs-btn-sm" aria-label="Remover Bruno Costa"><svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button></div></td></tr>
192
- <tr><td>Carla Dias</td><td>carla.dias@empresa.com</td><td>Leitor</td><td><span class="fs-badge fs-badge-sm">Convidado</span></td><td><div class="row-actions"><button type="button" class="fs-btn fs-btn-sm" aria-label="Editar Carla Dias"><svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg></button><button type="button" class="fs-btn fs-btn-sm" aria-label="Remover Carla Dias"><svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button></div></td></tr>
193
- <tr><td>Diego Alves</td><td>diego.alves@empresa.com</td><td>Editor</td><td><span class="fs-badge fs-badge-danger fs-badge-sm">Suspenso</span></td><td><div class="row-actions"><button type="button" class="fs-btn fs-btn-sm" aria-label="Editar Diego Alves"><svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg></button><button type="button" class="fs-btn fs-btn-sm" aria-label="Remover Diego Alves"><svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button></div></td></tr>
194
- <tr><td>Elisa Nunes</td><td>elisa.nunes@empresa.com</td><td>Administrador</td><td><span class="fs-badge fs-badge-success fs-badge-sm">Ativo</span></td><td><div class="row-actions"><button type="button" class="fs-btn fs-btn-sm" aria-label="Editar Elisa Nunes"><svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg></button><button type="button" class="fs-btn fs-btn-sm" aria-label="Remover Elisa Nunes"><svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button></div></td></tr>
195
- <tr><td>Fábio Souza</td><td>fabio.souza@empresa.com</td><td>Leitor</td><td><span class="fs-badge fs-badge-success fs-badge-sm">Ativo</span></td><td><div class="row-actions"><button type="button" class="fs-btn fs-btn-sm" aria-label="Editar Fábio Souza"><svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg></button><button type="button" class="fs-btn fs-btn-sm" aria-label="Remover Fábio Souza"><svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button></div></td></tr>
196
- </tbody>
197
- </table>
198
- </div>
199
- <div class="fs-empty-state" data-fs-datatable-empty hidden>
200
- <p class="fs-empty-state-title">Nenhum usuário encontrado.</p>
201
- </div>
202
- </div>
203
- </div>
204
- </div>
205
-
206
- <div class="fs-card">
207
- <div class="fs-card-header">
208
- <h3 class="fs-card-title">Preferências da conta</h3>
209
- </div>
210
- <div class="fs-card-body">
211
- <div class="fs-tabs" data-fs="tabs" id="settings-tabs">
212
- <a href="#" class="fs-nav-link is-active" data-fs-target="#tab-profile">Perfil</a>
213
- <a href="#" class="fs-nav-link" data-fs-target="#tab-security">Segurança</a>
214
- <a href="#" class="fs-nav-link" data-fs-target="#tab-notifications">Notificações</a>
215
- </div>
216
- <div class="fs-tab-content fs-u-p-3">
217
- <div class="fs-tab-pane is-active" id="tab-profile">
218
- <div class="fs-form-row fs-u-gap-x-2">
219
- <div class="fs-form-col">
220
- <label for="profile-name" class="fs-form-label">Nome completo</label>
221
- <input type="text" class="fs-form-control" id="profile-name" value="Jorge Reis">
222
- </div>
223
- <div class="fs-form-col">
224
- <label for="profile-email" class="fs-form-label">E-mail</label>
225
- <input type="email" class="fs-form-control" id="profile-email" value="jorge@empresa.com">
226
- </div>
227
- </div>
228
- <button type="button" class="fs-btn fs-btn-primary fs-u-mt-3">Salvar alterações</button>
229
- </div>
230
- <div class="fs-tab-pane" id="tab-security">
231
- <div class="fs-form-row fs-u-gap-x-2">
232
- <div class="fs-form-col">
233
- <label for="security-current" class="fs-form-label">Senha atual</label>
234
- <input type="password" class="fs-form-control" id="security-current">
235
- </div>
236
- <div class="fs-form-col">
237
- <label for="security-new" class="fs-form-label">Nova senha</label>
238
- <input type="password" class="fs-form-control" id="security-new">
239
- </div>
240
- </div>
241
- <button type="button" class="fs-btn fs-btn-primary fs-u-mt-3">Atualizar senha</button>
242
- </div>
243
- <div class="fs-tab-pane" id="tab-notifications">
244
- <div class="fs-stack">
245
- <div class="fs-switch">
246
- <input type="checkbox" class="fs-switch-input" id="notif-email" checked>
247
- <label for="notif-email" class="fs-switch-label">Notificações por e-mail</label>
248
- </div>
249
- <div class="fs-switch">
250
- <input type="checkbox" class="fs-switch-input" id="notif-push">
251
- <label for="notif-push" class="fs-switch-label">Notificações push</label>
252
- </div>
253
- <div class="fs-switch">
254
- <input type="checkbox" class="fs-switch-input" id="notif-weekly" checked>
255
- <label for="notif-weekly" class="fs-switch-label">Resumo semanal por e-mail</label>
256
- </div>
257
- </div>
258
- </div>
259
- </div>
260
- </div>
261
- </div>
262
- </main>
263
- </div>
264
- </div>
265
-
266
- <div class="fs-modal" id="modal-new-user">
267
- <div class="fs-modal-dialog">
268
- <div class="fs-modal-content">
269
- <div class="fs-modal-header">
270
- <h3 class="fs-modal-title">Novo usuário</h3>
271
- <button type="button" class="fs-btn-close" data-fs-dismiss="modal" aria-label="Fechar"></button>
272
- </div>
273
- <div class="fs-modal-body">
274
- <form>
275
- <div class="fs-form-row fs-u-mb-2">
276
- <div class="fs-form-col">
277
- <label for="new-user-name" class="fs-form-label">Nome completo</label>
278
- <input type="text" class="fs-form-control" id="new-user-name" placeholder="Nome do usuário" required>
279
- </div>
280
- </div>
281
- <div class="fs-form-row fs-u-mb-2">
282
- <div class="fs-form-col">
283
- <label for="new-user-email" class="fs-form-label">E-mail</label>
284
- <input type="email" class="fs-form-control" id="new-user-email" placeholder="usuario@empresa.com" required>
285
- </div>
286
- </div>
287
- <div class="fs-form-row">
288
- <div class="fs-form-col">
289
- <label for="new-user-role" class="fs-form-label">Função</label>
290
- <select class="fs-form-select" data-fs="select" id="new-user-role">
291
- <option value="admin">Administrador</option>
292
- <option value="editor">Editor</option>
293
- <option value="viewer">Leitor</option>
294
- </select>
295
- </div>
296
- </div>
297
- </form>
298
- </div>
299
- <div class="fs-modal-footer">
300
- <button type="button" class="fs-btn" data-fs-dismiss="modal">Cancelar</button>
301
- <button type="button" class="fs-btn fs-btn-primary" data-fs-dismiss="modal">Criar usuário</button>
302
- </div>
303
- </div>
304
- </div>
305
- </div>
306
-
307
- <!-- SCRIPTS IMPORT -->
308
- <script src="../../dist/js/fokus.js"></script>
309
- <script>
310
- // Alternância de tema — mesmo mecanismo de docs/guides/dark-mode.md.
311
- 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"/>';
312
- 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"/>';
313
-
314
- const toggle = document.getElementById("theme-toggle");
315
- const icon = document.getElementById("theme-toggle-icon");
316
-
317
- function applyTheme(theme) {
318
- document.documentElement.setAttribute("data-theme", theme);
319
- icon.innerHTML = theme === "dark" ? moonIcon : sunIcon;
320
- }
321
-
322
- const stored = localStorage.getItem("theme") ||
323
- (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
324
- applyTheme(stored);
325
-
326
- toggle.addEventListener("click", () => {
327
- const next = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark";
328
- applyTheme(next);
329
- localStorage.setItem("theme", next);
330
- });
331
- </script>
332
-
333
- </body>
334
- </html>