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/examples/tooltip.html DELETED
@@ -1,68 +0,0 @@
1
- <!doctype html>
2
- <html lang="pt-BR">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Fokus Styles — Tooltip</title>
7
- <link rel="stylesheet" href="../../dist/css/fonts.css">
8
- <link rel="stylesheet" href="../../dist/css/components.css">
9
- <link rel="stylesheet" href="../../dist/css/helpers.css">
10
- <link rel="stylesheet" href="../assets/example-theme.css">
11
- <script src="../assets/example-theme.js"></script>
12
- <style>
13
- .tooltip-stage { display: grid; min-block-size: 240px; place-items: center; padding: 32px; border: 1px dashed var(--fs-color-border); border-radius: var(--fs-radius-md); background: var(--fs-color-subtle); }
14
- .tooltip-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
15
- .tooltip-truncated { max-inline-size: 220px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
16
- .tooltip-contract code { display: block; padding: 12px; border-radius: var(--fs-radius-sm); background: var(--fs-color-subtle); font-size: .8rem; line-height: 1.7; }
17
- :root { --demo-panel-bg: var(--fs-color-surface); --demo-soft-bg: var(--fs-color-subtle); --demo-panel-border: var(--fs-color-border); --demo-accent: var(--fs-color-primary); }
18
- * { box-sizing: border-box; }
19
- body { min-block-size: 100vh; margin: 0; color: var(--fs-color-text); background: var(--fs-color-bg-subtle); }
20
- .demo-page { max-inline-size: 1080px; margin-inline: auto; padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 40px) 64px; }
21
- .showcase-hero { margin-block-end: 32px; }
22
- .showcase-eyebrow { margin: 0 0 8px; color: var(--demo-accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
23
- .showcase-title { max-inline-size: 760px; margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.04em; }
24
- .showcase-lead { max-inline-size: 720px; margin: 16px 0 0; color: var(--fs-color-muted); font-size: 1.05rem; line-height: 1.6; }
25
- .demo-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 20px; }
26
- .showcase-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-block: 24px; padding: 12px; border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-md); background: var(--demo-panel-bg); }
27
- .demo-section { margin-block-start: 32px; }
28
- .demo-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-block-end: 14px; }
29
- .demo-heading h2, .demo-card h3, .demo-status h3 { margin: 0; }
30
- .demo-heading p, .demo-card p, .demo-status p { color: var(--fs-color-muted); }
31
- .demo-heading p { max-inline-size: 650px; margin: 0; font-size: .9rem; }
32
- .demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
33
- .demo-card, .demo-playground, .demo-status { border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-md); background: var(--demo-panel-bg); box-shadow: var(--fs-shadow-sm); }
34
- .demo-card { min-block-size: 180px; padding: 20px; }
35
- .demo-card p { margin: 10px 0 20px; line-height: 1.55; }
36
- .demo-card-kicker { display: block; margin-block-end: 8px; color: var(--fs-color-muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
37
- .demo-playground { padding: clamp(18px, 3vw, 28px); }
38
- .demo-playground > .demo-grid { margin-block-start: 24px; }
39
- .demo-status { display: flex; flex-direction: column; gap: 16px; margin-block-start: 24px; padding: 20px; background: var(--demo-soft-bg); }
40
- .demo-status-output { margin: 0; padding: 12px; border-inline-start: 3px solid var(--demo-accent); color: var(--fs-color-text) !important; background: var(--demo-panel-bg); font-size: .85rem !important; }
41
- @media (max-width: 760px) { .demo-grid { grid-template-columns: 1fr; } .showcase-toolbar { justify-content: flex-start; } }
42
- </style>
43
- </head>
44
- <body>
45
- <main class="showcase-shell demo-page">
46
- <header class="showcase-hero">
47
- <p class="showcase-eyebrow">Fokus Styles · extensão de interface</p>
48
- <h1 class="showcase-title">Tooltip</h1>
49
- <p class="showcase-lead">Dicas curtas para complementar um controle existente, com foco, hover, posicionamento adaptável e suporte aos temas do sistema.</p>
50
- <div class="demo-badges" aria-label="Características do componente"><span class="fs-badge fs-badge-outline-primary">não interativo</span><span class="fs-badge fs-badge-outline-success">acessível por foco</span><span class="fs-badge fs-badge-outline-secondary">role=tooltip</span></div>
51
- </header>
52
- <div class="showcase-toolbar" aria-label="Controles da demonstração"><button class="fs-btn fs-btn-primary" type="button" data-showcase-theme>Usar tema escuro</button><button class="fs-btn" type="button" id="toggle-direction" aria-pressed="false">Testar RTL</button><button class="fs-btn" type="button" id="reset-demo">Resetar</button></div>
53
- <section class="demo-section" aria-labelledby="compare-title"><div class="demo-heading"><div><h2 id="compare-title">Escolha o padrão certo</h2><p>Use cada componente conforme a quantidade e a importância do conteúdo.</p></div></div><div class="demo-grid"><article class="demo-card"><span class="demo-card-kicker">breve</span><h3>Tooltip</h3><p>Explica rapidamente um ícone, termo ou controle já nomeado.</p><span class="fs-badge fs-badge-outline-info">não interativo</span></article><article class="demo-card"><span class="demo-card-kicker">contextual</span><h3>Popover</h3><p>Oferece contexto mais rico, descrição, links ou ações.</p><span class="fs-badge fs-badge-outline-warning">conteúdo rico</span></article><article class="demo-card"><span class="demo-card-kicker">essencial</span><h3>Texto visível</h3><p>Instruções, erros e informações importantes não devem ficar ocultos.</p><span class="fs-badge fs-badge-outline-success">sempre disponível</span></article></div></section>
54
- <section class="demo-section" aria-labelledby="playground-title"><div class="demo-heading"><div><h2 id="playground-title">Laboratório de Tooltip</h2><p>Experimente posições, delays, foco, fallback de viewport e truncamento.</p></div><span class="fs-badge fs-badge-outline-success">interativo</span></div><div class="demo-playground"><div class="tooltip-stage" aria-label="Controles de posicionamento"><div class="tooltip-actions"><button class="fs-btn fs-btn-outline-primary" type="button" data-fs="tooltip" data-placement="top" title="Tooltip acima do controle">Top</button><button class="fs-btn fs-btn-outline-primary" type="button" data-fs="tooltip" data-placement="bottom" title="Tooltip abaixo do controle">Bottom</button><button class="fs-btn fs-btn-outline-primary" type="button" data-fs="tooltip" data-placement="left" title="Tooltip à esquerda">Left</button><button class="fs-btn fs-btn-outline-primary" type="button" data-fs="tooltip" data-placement="right" title="Tooltip à direita">Right</button><button class="fs-btn fs-btn-outline-warning" type="button" data-fs="tooltip" data-show-delay="400" data-hide-delay="150" title="Aparece após um pequeno atraso">Com delay</button><button class="fs-btn-close" type="button" aria-label="Ajuda sobre configurações" data-fs="tooltip" title="Ajuda sobre configurações"></button></div></div><div class="demo-grid"><article class="demo-card"><span class="demo-card-kicker">conteúdo</span><h3>Truncamento e fallback</h3><p class="tooltip-truncated" data-fs="tooltip" data-title="Este é o texto completo preservado para o usuário">Este texto foi truncado visualmente</p><button class="fs-btn fs-btn-outline-danger fs-btn-sm" type="button" data-fs="tooltip" data-placement="bottom" title="Uma mensagem longa quebra em várias linhas sem causar overflow horizontal">Mensagem longa</button></article><article class="demo-card"><span class="demo-card-kicker">teclado</span><h3>Foco e Escape</h3><p>Use Tab para entrar no controle, leia a dica e pressione Escape para fechar.</p><button class="fs-btn fs-btn-success fs-btn-sm" type="button" data-fs="tooltip" title="A dica também aparece quando o controle recebe foco">Focar com teclado</button></article></div><aside class="demo-status tooltip-contract" aria-labelledby="contract-title"><div><h3 id="contract-title">Contrato do componente</h3><p>O Tooltip complementa o gatilho e nunca contém ações próprias.</p></div><p id="demo-status" class="demo-status-output" role="status" aria-live="polite">Demonstração pronta.</p><code>data-fs="tooltip" · title / data-title · data-placement · data-show-delay / data-hide-delay</code></aside></div></section>
55
- <section class="demo-section" aria-labelledby="a11y-title"><div class="demo-heading"><div><h2 id="a11y-title">Acessibilidade e limites</h2><p>O conteúdo essencial continua visível e o Tooltip não assume o papel de Popover.</p></div></div><div class="demo-grid"><article class="demo-card"><h3>Foco</h3><p>O foco permanece no elemento de referência. Escape fecha a dica sem criar um novo foco.</p></article><article class="demo-card"><h3>Sem interação</h3><p>Não coloque links, botões ou controles dentro de um Tooltip. Use Popover quando necessário.</p></article><article class="demo-card"><h3>Sem dependência de cor</h3><p>Ícones, hover e cor apenas complementam uma mensagem que já deve ser compreensível.</p></article></div></section>
56
- <section class="demo-section" aria-labelledby="alignment-title"><div class="demo-heading"><div><h2 id="alignment-title">Alinhamento e offset</h2><p>A API aceita combinações como <code>top-start</code> e preserva o alinhamento durante o fallback.</p></div></div><div class="demo-grid"><article class="demo-card"><h3>Superior</h3><div class="tooltip-actions"><button class="fs-btn fs-btn-sm fs-btn-outline-primary" data-fs="tooltip" data-placement="top-start" title="Superior à esquerda">start</button><button class="fs-btn fs-btn-sm fs-btn-outline-primary" data-fs="tooltip" data-placement="top-end" title="Superior à direita">end</button></div></article><article class="demo-card"><h3>Inferior</h3><div class="tooltip-actions"><button class="fs-btn fs-btn-sm fs-btn-outline-primary" data-fs="tooltip" data-placement="bottom-start" title="Inferior à esquerda">start</button><button class="fs-btn fs-btn-sm fs-btn-outline-primary" data-fs="tooltip" data-placement="bottom-end" title="Inferior à direita">end</button></div></article><article class="demo-card"><h3>Distância</h3><button class="fs-btn fs-btn-sm fs-btn-outline-warning" data-fs="tooltip" data-offset="16" title="Este Tooltip usa um offset de 16 pixels">Offset 16px</button></article></div></section>
57
- </main>
58
- <script src="../../dist/js/fokus.js"></script>
59
- <script>
60
- const page = document.querySelector(".demo-page");
61
- const status = document.getElementById("demo-status");
62
- const direction = document.getElementById("toggle-direction");
63
- direction.addEventListener("click", () => { const rtl = page.getAttribute("dir") !== "rtl"; page.setAttribute("dir", rtl ? "rtl" : "ltr"); direction.setAttribute("aria-pressed", String(rtl)); direction.textContent = rtl ? "Voltar para LTR" : "Testar RTL"; status.textContent = rtl ? "Direção RTL ativada." : "Direção LTR ativada."; });
64
- document.getElementById("reset-demo").addEventListener("click", () => location.reload());
65
- document.querySelectorAll('[data-fs="tooltip"]').forEach((element) => { element.addEventListener("fs:tooltip:shown", () => { const open = document.querySelector(".fs-tooltip.is-open"); status.textContent = `Tooltip aberto · placement efetivo: ${open?.dataset.placement ?? "auto"}.`; }); element.addEventListener("fs:tooltip:hidden", () => { status.textContent = "Tooltip fechado."; }); });
66
- </script>
67
- </body>
68
- </html>
package/mockup/examples/tree-view.html DELETED
@@ -1,68 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mockup - Tree View</title>
7
-
8
- <!-- STYLES IMPORT -->
9
- <link rel="stylesheet" href="../../dist/css/fonts.css">
10
- <link rel="stylesheet" href="../../dist/css/components.css">
11
- <link rel="stylesheet" href="../../dist/css/forms.css">
12
- <link rel="stylesheet" href="../../dist/css/helpers.css">
13
- <style>
14
- .theme-panel {
15
- padding: 24px;
16
- }
17
-
18
- html[data-theme="dark"] .theme-panel {
19
- color: var(--fs-color-text);
20
- background-color: var(--fs-color-surface);
21
- }
22
-
23
- section {
24
- max-width: 320px;
25
- margin-bottom: 24px;
26
- }
27
- </style>
28
- <link rel="stylesheet" href="../assets/example-theme.css">
29
- <script src="../assets/example-theme.js"></script>
30
- </head>
31
- <body>
32
-
33
- <div class="theme-panel">
34
- <section>
35
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Tree View — navegue com as setas, Home/End, Enter/Espaço</p>
36
- <ul class="fs-tree" data-fs="tree-view" aria-label="Arquivos do projeto">
37
- <li aria-expanded="true">
38
- <span class="fs-tree-label">src</span>
39
- <ul>
40
- <li><span class="fs-tree-label">index.js</span></li>
41
- <li>
42
- <span class="fs-tree-label">components</span>
43
- <ul>
44
- <li><span class="fs-tree-label">Button.js</span></li>
45
- <li><span class="fs-tree-label">Modal.js</span></li>
46
- </ul>
47
- </li>
48
- </ul>
49
- </li>
50
- <li>
51
- <span class="fs-tree-label">docs</span>
52
- <ul>
53
- <li><span class="fs-tree-label">guia.md</span></li>
54
- </ul>
55
- </li>
56
- <li><span class="fs-tree-label">README.md</span></li>
57
- <li><span class="fs-tree-label">package.json</span></li>
58
- </ul>
59
- </section>
60
- </div>
61
-
62
-
63
-
64
- <!-- SCRIPTS IMPORT -->
65
- <script src="../../dist/js/fokus.js"></script>
66
-
67
- </body>
68
- </html>
package/mockup/feedback-actions.html DELETED
@@ -1,9 +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 — Ações e feedback</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">Ações e feedback</h1><p class="showcase-lead">Controles de ação, mensagens de estado e indicadores de carregamento. Avalie sempre o resultado visual e o comportamento 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":"button","title":"Button","description":"Ações principais, secundárias, destrutivas e de confirmação em uma interface.","use":"Use para iniciar uma ação; prefira link para navegação.","api":".fs-btn, variantes semânticas, outline, tamanhos e disabled.","a11y":"Use button para ações e aria-disabled em links inativos.","states":"Hover, focus-visible, disabled, tamanhos e variantes.","source":"examples/buttons.html","height":820},
3
- {"id":"badge","title":"Badge","description":"Rótulos compactos para status, contagens e classificação.","use":"Complemente informação breve; não comunique estado crítico somente por cor.","api":".fs-badge e variantes semânticas.","a11y":"Inclua contexto textual quando a cor for significativa.","states":"Cores semânticas, contagem e combinação com alert.","source":"examples/badges-alerts.html","height":780},
4
- {"id":"alert","title":"Alert","description":"Mensagens persistentes de informação, sucesso, atenção ou erro.","use":"Use para feedback contextual próximo ao conteúdo afetado.","api":".fs-alert e modificadores de variante.","a11y":"Use role=alert apenas para mensagens urgentes e não excessivas.","states":"Variantes semânticas, ícone e ação de fechamento.","source":"examples/alerts.html","height":720},
5
- {"id":"tag","title":"Tag","description":"Etiquetas removíveis ou informativas para filtros, categorias e seleções.","use":"Represente itens discretos, não uma ação primária.","api":".fs-tag, variantes e controle de remoção.","a11y":"O botão de remover precisa de nome acessível com o rótulo da tag.","states":"Cores, tamanhos, removível e estado desabilitado.","source":"examples/tag.html","height":800},
6
- {"id":"empty-state","title":"Empty state","description":"Orientação quando uma região não possui conteúdo para exibir.","use":"Explique a causa e ofereça uma ação útil quando existir.","api":".fs-empty-state e seus elementos internos.","a11y":"Mantenha título e ação compreensíveis fora do contexto visual.","states":"Sem dados, busca sem resultado e primeira utilização.","source":"examples/empty-state.html","height":620},
7
- {"id":"skeleton","title":"Skeleton","description":"Espaço reservado durante carregamento, evitando saltos de layout.","use":"Use em conteúdo previsível e temporário; prefira feedback textual em esperas longas.","api":".fs-skeleton e modificadores de forma.","a11y":"Oculte decoração de leitores de tela e anuncie carregamento na região.","states":"Texto, avatar, card e movimento reduzido.","source":"examples/skeletons.html","height":650},
8
- {"id":"progress","title":"Spinner e progress","description":"Indicadores para operação em andamento e progresso mensurável.","use":"Spinner para espera indeterminada; progress para avanço conhecido.","api":".fs-spinner, .fs-progress e atributos ARIA de progresso.","a11y":"Use aria-valuenow/min/max e texto de status quando necessário.","states":"Tamanhos, variantes, indeterminado e concluído.","source":"examples/spinner-progress.html","height":1900}
9
- ]</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/forms.html DELETED
@@ -1,13 +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 — Formulários</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">Formulários e seleção</h1><p class="showcase-lead">Campos, escolhas, entrada avançada e uploads. Os exemplos incluem estados de validação e a associação correta de labels, ajuda e mensagens.</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":"input","title":"Input","description":"Campos de texto, e-mail, senha e textarea com ajuda e validação.","use":"Colete uma informação por campo com label persistente.","api":".fs-form-control, .is-valid, .is-invalid e texto de ajuda.","a11y":"Associe label, descrição e erro por for/id e aria-describedby.","states":"Foco, disabled, readonly, sucesso e erro.","source":"examples/forms-advanced.html","height":900},
3
- {"id":"select","title":"Select","description":"Seleção nativa estilizada para opções conhecidas e limitadas.","use":"Use quando a lista é curta; use combobox para busca.","api":".fs-select, option e atributos nativos.","a11y":"Mantenha label explícito e não simule select nativo sem necessidade.","states":"Placeholder, disabled, erro e integração em modal.","source":"examples/modal-select.html","height":820},
4
- {"id":"input-group","title":"Input group","description":"Campo combinado com prefixos, sufixos e ações relacionadas.","use":"Agrupe somente controles que fazem parte da mesma entrada.","api":".fs-input-group e seus addons.","a11y":"Não esconda a finalidade do campo atrás de ícone sem rótulo.","states":"Prefixo, sufixo, botão e validação.","source":"examples/input-group.html","height":700},
5
- {"id":"check-radio-switch","title":"Checkbox, radio e switch","description":"Controles nativos refinados para escolha múltipla, escolha única e alternância de preferência.","use":"Checkbox para escolhas independentes, radio para exclusivas e switch para estado imediato.","api":".fs-check, .fs-radio, .fs-switch e tokens locais.","a11y":"Use fieldset/legend para grupos, aria-describedby para ajuda/erro e nome acessível em switch sem texto.","states":"Hover, active, marcado, indeterminado, valid, invalid, disabled, RTL e foco.","source":"examples/check-radio-switch.html","height":1120},
6
- {"id":"range","title":"Range","description":"Entrada numérica contínua com limites conhecidos.","use":"Use quando a aproximação visual é mais útil que digitação precisa.","api":"input[type=range] e classes FokusStyles associadas.","a11y":"Forneça label, mínimo, máximo e valor atual compreensível.","states":"Valores, disabled e marcas de referência.","source":"examples/range.html","height":700},
7
- {"id":"segmented-control","title":"Segmented control","description":"Alternância rápida entre poucas opções relacionadas.","use":"Use para modos mutuamente exclusivos de uma mesma visão.","api":".fs-segmented-control e controles internos.","a11y":"Use radio/tab conforme a semântica; mantenha estado selecionado anunciado.","states":"Selecionado, foco, disabled e ícones.","source":"examples/segmented-control.html","height":760},
8
- {"id":"rating","title":"Rating","description":"Avaliação ordinal com estrelas ou equivalentes.","use":"Use para uma escala pequena e familiar; exponha também o valor textual.","api":".fs-rating e controles internos.","a11y":"Disponibilize valor e instrução para teclado e leitor de tela.","states":"Leitura, edição, meio valor e disabled.","source":"examples/rating.html","height":1100},
9
- {"id":"datepicker","title":"Date e time","description":"Entradas nativas de data e horário com acabamento do FokusStyles.","use":"Use o controle nativo para preservar suporte de plataforma.","api":"input[type=date], input[type=time] e .fs-form-control.","a11y":"Não substitua o teclado nativo; identifique formato esperado quando necessário.","states":"Data, hora, mínimo/máximo, erro e disabled.","source":"examples/datepicker.html","height":720},
10
- {"id":"combobox","title":"Combobox","description":"Seleção pesquisável para conjuntos maiores de opções.","use":"Use quando filtrar opções reduz esforço sem perder escolha explícita.","api":".fs-combobox, data-* e API JavaScript do componente.","a11y":"Preserve roles, aria-expanded, active descendant e navegação por setas.","states":"Aberto, filtrado, vazio, teclado e disabled.","source":"examples/combobox.html","height":800},
11
- {"id":"file-upload","title":"File upload","description":"Upload básico, área de arrastar e fluxo avançado de arquivos.","use":"Use o input nativo como base e complemente com feedback de arquivo selecionado.","api":".fs-file-drop, .fs-file-upload e atributos accept/multiple.","a11y":"Mantenha input alcançável e anuncie progresso, erro e remoção.","states":"Clique, drag and drop, múltiplos, carregando e erro.","source":"examples/file-upload-advanced.html","height":900}
12
- ,{"id":"file-drop","title":"File drop básico","description":"Área simples para selecionar ou arrastar um arquivo, apropriada a formulários curtos.","use":"Use quando o fluxo não requer fila, progresso ou edição de arquivos.","api":".fs-file-drop, input[type=file] e accept.","a11y":"A área visual complementa, mas não substitui, o input de arquivo alcançável.","states":"Clique, arrastar, arquivo selecionado e erro de formato.","source":"examples/file-drop.html","height":680}
13
- ]</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/foundations.html DELETED
@@ -1,7 +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 — Fundamentos</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">Fundamentos e infraestrutura</h1><p class="showcase-lead">Tokens, layout, temas, ícones e utilitários JavaScript que sustentam os componentes. Cada preview é executável; o código mostrado é extraído do próprio 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":"layout","title":"Layout","description":"Estruturas de página, grid, containers e comportamento responsivo para compor interfaces previsíveis.","use":"Use como base de páginas e regiões; não use utilitários para substituir semântica HTML.","api":".fs-container, .fs-row, .fs-col-* e utilitários fs-u-*.","a11y":"Mantenha landmarks, ordem lógica de leitura e títulos hierárquicos.","states":"Breakpoints, densidade e regiões de conteúdo.","source":"examples/layout.html","height":900},
3
- {"id":"theming","title":"Temas e marcas","description":"Alternância de data-fs-theme, compatibilidade data-theme e data-fs-brand sobre os tokens semânticos do FokusStyles.","use":"Use para personalizar a aparência sem alterar markup de componentes.","api":"data-fs-theme=light|dark|auto, data-theme e data-fs-brand; tokens --fs-*.","a11y":"Verifique contraste após qualquer marca personalizada.","states":"Claro, escuro, automático e marcas alternativas.","source":"examples/theming.html","height":650},
4
- {"id":"icons","title":"Ícones","description":"Catálogo e uso de ícones com rótulos acessíveis e alinhamento consistente.","use":"Use ícones para reforçar ações conhecidas; mantenha texto quando houver ambiguidade.","api":"Classes de ícone e utilitários de tamanho publicados.","a11y":"Ícones decorativos são ocultos; botões somente com ícone recebem nome acessível.","states":"Tamanhos, cores e ícones em controles.","source":"examples/icons.html","height":1200},
5
- {"id":"divider","title":"Divider","description":"Separadores visuais para organizar grupos relacionados sem substituir hierarquia de conteúdo.","use":"Separe blocos próximos em listas, painéis e formulários.","api":".fs-divider e modificadores de orientação.","a11y":"Não use o separador como único indicador de mudança de assunto.","states":"Horizontal, vertical e espaçamentos adjacentes.","source":"examples/divider.html","height":520},
6
- {"id":"js-foundation","title":"Infraestrutura JavaScript","description":"Posicionamento, foco, overlays, temas, validação e transições reutilizados pelos componentes interativos.","use":"Use as APIs públicas apenas quando montar comportamento avançado fora dos componentes prontos.","api":"FokusStyles.core, Theme.set(), FormValidation, eventos fs:* e data-fs-toggle.","a11y":"Preserve foco, Escape, bloqueio de scroll, aria-invalid e preferência por movimento reduzido.","states":"Flip de posicionamento, focus trap, tema, validação, clique externo e transições.","source":"examples/js-foundation.html","height":1500}
7
- ]</script><script src="../dist/js/fokus.js"></script><script src="assets/showcase-contracts.js"></script><script src="assets/showcase.js"></script></body></html>