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/tag.html DELETED
@@ -1,115 +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.0">
6
- <title>Fokus Styles — Tags</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
- :root { --demo-max-width: 1080px; --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); }
14
- * { box-sizing: border-box; }
15
- body { min-block-size: 100vh; margin: 0; color: var(--fs-color-text); background: var(--fs-color-bg-subtle); }
16
- .demo-page { max-inline-size: var(--demo-max-width); margin-inline: auto; padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 40px) 64px; }
17
- .demo-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-block-end: 32px; }
18
- .demo-eyebrow { margin: 0 0 8px; color: var(--demo-accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
19
- html[data-fs-theme="dark"] .demo-eyebrow { color: var(--fs-color-text); }
20
- .demo-title { max-inline-size: 760px; margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.04em; }
21
- .demo-lead { max-inline-size: 720px; margin: 16px 0 0; color: var(--fs-color-muted); font-size: 1.05rem; line-height: 1.6; }
22
- .demo-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); }
23
- .demo-actions, .demo-tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
24
- .demo-section { margin-block-start: 32px; }
25
- .demo-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-block-end: 14px; }
26
- .demo-heading h2, .demo-card h3, .demo-reference h2 { margin: 0; }
27
- .demo-heading p, .demo-card p, .demo-reference p, .demo-status p { color: var(--fs-color-muted); }
28
- .demo-heading p { max-inline-size: 650px; margin: 0; font-size: .9rem; }
29
- .demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
30
- .demo-card, .demo-playground, .demo-reference { 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); }
31
- .demo-card { min-block-size: 180px; padding: 20px; }
32
- .demo-card p { margin: 10px 0 20px; line-height: 1.55; }
33
- .demo-icon { display: grid; inline-size: 36px; block-size: 36px; place-items: center; margin-block-end: 16px; border-radius: var(--fs-radius-sm); color: var(--fs-color-primary); background: var(--demo-soft-bg); font-weight: 700; }
34
- .demo-playground { padding: clamp(18px, 3vw, 28px); }
35
- .demo-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 28px; }
36
- .demo-group + .demo-group { margin-block-start: 28px; }
37
- .demo-group h3 { margin: 0; font-size: 1rem; }
38
- .demo-group > p { margin: 6px 0 14px; color: var(--fs-color-muted); font-size: .9rem; }
39
- .demo-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-sm); background: var(--demo-soft-bg); }
40
- .demo-sample + .demo-sample { margin-block-start: 10px; }
41
- .demo-label { flex: 1 1 150px; color: var(--fs-color-muted); font-size: .82rem; }
42
- .demo-status { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--fs-radius-sm); background: var(--demo-soft-bg); }
43
- .demo-status h3 { margin: 0; }
44
- .demo-status p { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; }
45
- .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; }
46
- .demo-code { margin: 0; padding: 14px; overflow: auto; border-radius: var(--fs-radius-sm); color: var(--fs-color-text); background: var(--demo-panel-bg); font: .76rem/1.6 var(--fs-font-mono, ui-monospace, monospace); white-space: pre-wrap; }
47
- .demo-reference { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: clamp(18px, 3vw, 28px); }
48
- .demo-reference p { margin: 8px 0 16px; line-height: 1.5; }
49
- .demo-reference ul { margin: 0; padding-inline-start: 20px; color: var(--fs-color-muted); line-height: 1.8; }
50
- .demo-reference code { color: var(--fs-color-primary); }
51
- @media (max-width: 760px) { .demo-hero, .demo-columns, .demo-reference { grid-template-columns: 1fr; } .demo-grid { grid-template-columns: 1fr; } }
52
- </style>
53
- </head>
54
- <body>
55
- <main class="demo-page">
56
- <header class="demo-hero">
57
- <div>
58
- <p class="demo-eyebrow">Fokus Styles · extensão do Badge</p>
59
- <h1 class="demo-title">Tags para filtros, categorias e seleções removíveis.</h1>
60
- <p class="demo-lead">Tag mantém o visual compacto do Badge, mas adiciona uma ação explícita de remoção. Ícones ajudam a orientar a leitura; o texto continua sendo a fonte principal do significado.</p>
61
- <div class="demo-tag-row" aria-label="Exemplos rápidos">
62
- <span class="fs-badge fs-tag fs-badge-soft-primary" data-fs="tag">Frontend<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Frontend"></button></span>
63
- <span class="fs-badge fs-tag fs-badge-success" data-fs="tag"><span class="fs-tag-icon" aria-hidden="true"><svg class="fs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg></span><span class="fs-tag-label">Aprovado</span><button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Aprovado"></button></span>
64
- </div>
65
- </div>
66
- <span class="fs-badge fs-badge-outline-primary">Badge + dismiss</span>
67
- </header>
68
-
69
- <nav class="demo-toolbar" aria-label="Controles da demonstração">
70
- <div class="demo-actions"><button class="fs-btn fs-btn-primary fs-btn-sm" type="button" id="reset-demo">Restaurar demonstração</button><button class="fs-btn fs-btn-outline-primary fs-btn-sm" type="button" id="toggle-direction" aria-pressed="false">Testar RTL</button></div>
71
- <span class="fs-form-text">Remova tags com o botão de fechar ou use Tab e Enter.</span>
72
- </nav>
73
-
74
- <section class="demo-section" aria-labelledby="why-title">
75
- <div class="demo-heading"><div><h2 id="why-title">Badge, Tag ou Alert?</h2><p>Escolha pelo papel da informação: ler, gerenciar uma seleção ou compreender uma mensagem.</p></div></div>
76
- <div class="demo-grid">
77
- <article class="demo-card"><span class="demo-icon" aria-hidden="true">#</span><h3>Badge informa</h3><p>Status e classificação são estáticos e complementam um item que já tem contexto.</p><span class="fs-badge fs-badge-success">Ativo</span></article>
78
- <article class="demo-card"><span class="demo-icon" aria-hidden="true">×</span><h3>Tag remove</h3><p>Filtros e categorias selecionadas podem ser gerenciados pelo botão de fechar.</p><span class="fs-badge fs-tag fs-badge-primary" data-fs="tag">Urgente<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Urgente"></button></span></article>
79
- <article class="demo-card"><span class="demo-icon" aria-hidden="true">!</span><h3>Alert explica</h3><p>Quando existe contexto, consequência ou próxima ação, use uma mensagem persistente.</p><div class="fs-alert fs-alert-warning" role="status">Revise os filtros antes de continuar.</div></article>
80
- </div>
81
- </section>
82
-
83
- <section class="demo-section" aria-labelledby="playground-title">
84
- <div class="demo-heading"><div><h2 id="playground-title">Laboratório de Tags</h2><p>Os exemplos abaixo demonstram ícones, estados, grupos e truncamento sem transformar a Tag inteira em botão.</p></div><span class="fs-badge fs-badge-outline-success">interativo</span></div>
85
- <div class="demo-playground"><div class="demo-columns"><div>
86
- <div class="demo-group"><h3>Ícones e estados</h3><p>Use ícones decorativos quando o texto já comunica o significado. O botão de fechar permanece a única ação.</p><div class="demo-sample"><span class="demo-label">Ícone inicial</span><span class="fs-badge fs-tag fs-badge-soft-primary" data-fs="tag"><span class="fs-tag-icon" aria-hidden="true"><svg class="fs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7"/><path d="M16 2v4M8 2v4M4 10h16"/><path d="m16 16 2 2 4-4"/></svg></span><span class="fs-tag-label">Documento</span><button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Documento"></button></span></div><div class="demo-sample"><span class="demo-label">Ícone final</span><span class="fs-badge fs-tag fs-badge-soft-success" data-fs="tag"><span class="fs-tag-label">Sincronizado</span><span class="fs-tag-icon fs-tag-icon-end" aria-hidden="true"><svg class="fs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg></span><button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Sincronizado"></button></span></div><div class="demo-sample"><span class="demo-label">Loading</span><span class="fs-badge fs-tag fs-badge-warning is-loading" data-fs="tag" aria-busy="true"><span class="fs-tag-label">Salvando</span><span class="fs-spinner" aria-hidden="true"></span><button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Salvando" disabled></button></span></div></div>
87
- <div class="demo-group"><h3>Grupo, truncamento e overflow</h3><p>Em grupos densos, o foco revela a Tag ativa e o overflow representa itens que não cabem.</p><div class="demo-sample"><span class="demo-label">Grupo</span><div class="fs-tag-group" aria-label="Filtros selecionados"><span class="fs-badge fs-tag" data-fs="tag">Design<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Design"></button></span><span class="fs-badge fs-tag" data-fs="tag">Frontend<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Frontend"></button></span><span class="fs-badge fs-tag" data-fs="tag">Backend<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Backend"></button></span><button type="button" class="fs-badge fs-tag fs-tag-overflow" aria-label="Mostrar mais 3 tags" aria-expanded="false">+3</button></div></div><div class="demo-sample"><span class="demo-label">Truncada</span><span class="fs-badge fs-tag fs-tag-truncate fs-badge-soft-primary" data-fs="tag" style="--fs-tag-max-inline-size: 230px;" title="Revisão de acessibilidade e compatibilidade entre navegadores"><span class="fs-tag-icon" aria-hidden="true">◆</span><span class="fs-tag-label">Revisão de acessibilidade e compatibilidade entre navegadores</span><button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Revisão de acessibilidade e compatibilidade entre navegadores"></button></span></div></div>
88
- <div class="demo-group"><h3>Protegida</h3><p>Quando a seleção não pode ser removida, não renderize um botão desabilitado: comunique a proteção.</p><div class="demo-sample"><span class="demo-label">Somente leitura</span><span class="fs-badge fs-tag fs-badge-warning fs-tag-protected" aria-disabled="true"><span class="fs-tag-label">Obrigatória</span><span class="fs-tag-lock" aria-hidden="true"><svg class="fs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span></span></div></div>
89
- </div><aside class="demo-status" aria-labelledby="status-title"><div><h3 id="status-title">Contrato da Tag</h3><p>A Tag herda a aparência do Badge, mas somente o botão de fechar remove o elemento.</p></div><p class="demo-status-output" id="demo-status" role="status" aria-live="polite">Demonstração pronta.</p><pre class="demo-code"><code>.fs-badge.fs-tag
90
- .fs-tag-icon
91
- .fs-tag-icon-end
92
- .fs-tag-label
93
- .fs-btn-close
94
- .fs-tag-truncate
95
- .fs-tag-group
96
-
97
- /* tokens locais */
98
- --fs-tag-icon-size
99
- --fs-tag-icon-gap
100
- --fs-tag-close-size</code></pre></aside></div></div>
101
- </section>
102
-
103
- <section class="demo-section" aria-labelledby="a11y-title"><div class="demo-heading"><div><h2 id="a11y-title">Contratos preservados</h2><p>Ícones são apoio visual: estados importantes continuam escritos e o nome da remoção fica no botão.</p></div></div><div class="demo-reference"><div><h2>Uso acessível</h2><ul><li>Use <code>aria-hidden="true"</code> quando o ícone for decorativo.</li><li>Inclua o nome da Tag no <code>aria-label</code> do fechamento.</li><li>Não use Tag somente com ícone como padrão.</li><li>O texto completo continua no DOM quando houver truncamento.</li></ul></div><div><h2>Interação</h2><ul><li>Tab chega ao botão de remoção, não à Tag inteira.</li><li>Após remover com foco, a próxima Tag recebe foco.</li><li>Loading usa <code>aria-busy</code> e bloqueia remoção.</li><li>RTL usa propriedades lógicas e mantém a ordem visual.</li></ul></div></div></section>
104
- </main>
105
- <script src="../../dist/js/fokus.js"></script>
106
- <script>
107
- const page = document.querySelector(".demo-page");
108
- const status = document.getElementById("demo-status");
109
- const directionButton = document.getElementById("toggle-direction");
110
- document.querySelectorAll('[data-fs-dismiss="tag"]').forEach((button) => button.addEventListener("click", () => { status.textContent = "Tag removida da demonstração."; }));
111
- document.getElementById("reset-demo").addEventListener("click", () => { page.setAttribute("dir", "ltr"); directionButton.setAttribute("aria-pressed", "false"); directionButton.textContent = "Testar RTL"; status.textContent = "Demonstração restaurada em LTR."; });
112
- directionButton.addEventListener("click", () => { const rtl = page.getAttribute("dir") !== "rtl"; page.setAttribute("dir", rtl ? "rtl" : "ltr"); directionButton.setAttribute("aria-pressed", String(rtl)); directionButton.textContent = rtl ? "Voltar para LTR" : "Testar RTL"; status.textContent = rtl ? "Direção RTL ativada." : "Direção LTR ativada."; });
113
- </script>
114
- </body>
115
- </html>
package/mockup/examples/theming.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 - Theming (dark mode + multi-brand)</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/helpers.css">
12
- <style>
13
- .theme-panel {
14
- display: flex;
15
- flex-direction: column;
16
- gap: 8px;
17
- padding: 24px;
18
- }
19
-
20
- html[data-theme="dark"] .theme-panel,
21
- html[data-fs-theme="dark"] .theme-panel {
22
- color: var(--fs-color-text);
23
- background-color: var(--fs-color-surface);
24
- }
25
- </style>
26
- <link rel="stylesheet" href="../assets/example-theme.css">
27
- <script src="../assets/example-theme.js"></script>
28
- </head>
29
- <body>
30
-
31
- <h2 class="fs-u-fs-lg fs-u-fw-medium" style="padding: 24px 24px 0;">Marca padrão</h2>
32
- <div class="theme-panel">
33
- <div>
34
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2">Primary</button>
35
- <span class="fs-badge fs-badge-primary">Primary</span>
36
- </div>
37
- <div class="fs-alert fs-alert-primary">Alerta primary com a cor de ação da marca padrão.</div>
38
- </div>
39
-
40
- <h2 class="fs-u-fs-lg fs-u-fw-medium" style="padding: 24px 24px 0;">data-fs-brand="violet"</h2>
41
- <div class="theme-panel" data-fs-brand="violet">
42
- <div>
43
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2">Primary</button>
44
- <span class="fs-badge fs-badge-primary">Primary</span>
45
- </div>
46
- <div class="fs-alert fs-alert-primary">Mesmo HTML, mesmo CSS — só o atributo <code>data-fs-brand="violet"</code> muda a cor de ação primária, em runtime, sem recompilar.</div>
47
- </div>
48
-
49
- <h2 class="fs-u-fs-lg fs-u-fw-medium" style="padding: 24px 24px 0;">data-fs-brand="corporate"</h2>
50
- <div class="theme-panel" data-fs-brand="corporate">
51
- <div>
52
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2">Primary</button>
53
- <span class="fs-badge fs-badge-primary">Primary</span>
54
- </div>
55
- <div class="fs-alert fs-alert-primary">Preset "corporate" — azul-marinho sóbrio, para aplicações internas/B2B.</div>
56
- </div>
57
-
58
- <h2 class="fs-u-fs-lg fs-u-fw-medium" style="padding: 24px 24px 0;">data-fs-brand="vibrant"</h2>
59
- <div class="theme-panel" data-fs-brand="vibrant">
60
- <div>
61
- <button type="button" class="fs-btn fs-btn-primary fs-u-mr-2">Primary</button>
62
- <span class="fs-badge fs-badge-primary">Primary</span>
63
- </div>
64
- <div class="fs-alert fs-alert-primary">Preset "vibrant" — laranja energético, para produtos de consumo/marketing.</div>
65
- </div>
66
-
67
- </body>
68
- </html>
package/mockup/examples/tile.html DELETED
@@ -1,107 +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 - Tile</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/helpers.css">
12
- <style>
13
- .theme-panel {
14
- display: flex;
15
- flex-direction: column;
16
- gap: 12px;
17
- padding: 24px;
18
- background-color: var(--fs-color-subtle);
19
- }
20
-
21
- html[data-theme="dark"] .theme-panel {
22
- color: var(--fs-color-text);
23
- background-color: var(--fs-color-surface);
24
- }
25
-
26
- .tile-col {
27
- display: flex;
28
- flex-direction: column;
29
- gap: 10px;
30
- max-width: 420px;
31
- }
32
- </style>
33
- <link rel="stylesheet" href="../assets/example-theme.css">
34
- <script src="../assets/example-theme.js"></script>
35
- </head>
36
- <body>
37
- <div class="theme-panel">
38
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Padrão (ações à direita)</p>
39
- <div class="tile-col">
40
- <div class="fs-tile">
41
- <div class="fs-tile-icon" aria-hidden="true"><svg class="fs-icon" 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="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg></div>
42
- <div class="fs-tile-body">
43
- <p class="fs-tile-title">Relatório mensal.pdf</p>
44
- <p class="fs-tile-subtitle">2.4 MB · Atualizado há 2h</p>
45
- </div>
46
- <div class="fs-tile-actions">
47
- <button type="button" class="fs-btn fs-btn-sm">Abrir</button>
48
- </div>
49
- </div>
50
- <div class="fs-tile">
51
- <div class="fs-tile-icon" aria-hidden="true"><svg class="fs-icon" 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="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/></svg></div>
52
- <div class="fs-tile-body">
53
- <p class="fs-tile-title">Tema escuro</p>
54
- <p class="fs-tile-subtitle">Alterna a aparência da interface</p>
55
- </div>
56
- <div class="fs-tile-actions">
57
- <div class="fs-switch">
58
- <input type="checkbox" class="fs-switch-input" id="tile-switch" checked aria-label="Ativar tema escuro">
59
- <label for="tile-switch" class="fs-switch-label"></label>
60
- </div>
61
- </div>
62
- </div>
63
- </div>
64
-
65
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-0">Ações embaixo</p>
66
- <div class="tile-col">
67
- <div class="fs-tile fs-tile-actions-bottom">
68
- <div class="fs-tile-icon" aria-hidden="true"><svg class="fs-icon" 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.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></div>
69
- <div class="fs-tile-body">
70
- <p class="fs-tile-title">Plano expira em 3 dias</p>
71
- <p class="fs-tile-subtitle">Renove para manter acesso aos recursos pagos.</p>
72
- </div>
73
- <div class="fs-tile-actions">
74
- <button type="button" class="fs-btn fs-btn-outline-secondary fs-btn-sm">Depois</button>
75
- <button type="button" class="fs-btn fs-btn-primary fs-btn-sm">Renovar</button>
76
- </div>
77
- </div>
78
- </div>
79
-
80
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-0">Clicável (stretched-link) e tamanhos (sm / padrão / lg)</p>
81
- <div class="tile-col">
82
- <div class="fs-tile fs-tile-clickable">
83
- <div class="fs-tile-icon" aria-hidden="true"><svg class="fs-icon" 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></div>
84
- <div class="fs-tile-body">
85
- <p class="fs-tile-title"><a href="#" class="fs-stretched-link">Jorge Reis</a></p>
86
- <p class="fs-tile-subtitle">Ver perfil</p>
87
- </div>
88
- </div>
89
- <div class="fs-tile fs-tile-sm">
90
- <div class="fs-tile-icon" aria-hidden="true"><svg class="fs-icon" 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.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg></div>
91
- <div class="fs-tile-body">
92
- <p class="fs-tile-title">sm</p>
93
- </div>
94
- </div>
95
- <div class="fs-tile fs-tile-lg">
96
- <div class="fs-tile-icon" aria-hidden="true"><svg class="fs-icon" 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.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg></div>
97
- <div class="fs-tile-body">
98
- <p class="fs-tile-title">lg</p>
99
- <p class="fs-tile-subtitle">Notificações push</p>
100
- </div>
101
- </div>
102
- </div>
103
- </div>
104
-
105
-
106
- </body>
107
- </html>
package/mockup/examples/timeline.html DELETED
@@ -1,108 +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 - Timeline</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/helpers.css">
12
- <style>
13
- .theme-panel {
14
- display: flex;
15
- flex-wrap: wrap;
16
- gap: 32px;
17
- padding: 24px;
18
- background-color: var(--fs-color-subtle);
19
- }
20
-
21
- html[data-theme="dark"] .theme-panel {
22
- color: var(--fs-color-text);
23
- background-color: var(--fs-color-surface);
24
- }
25
-
26
- .timeline-col {
27
- width: 280px;
28
- }
29
- </style>
30
- <link rel="stylesheet" href="../assets/example-theme.css">
31
- <script src="../assets/example-theme.js"></script>
32
- </head>
33
- <body>
34
- <div class="theme-panel">
35
- <div class="timeline-col">
36
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Vertical</p>
37
- <ul class="fs-timeline">
38
- <li class="fs-timeline-item fs-timeline-completed">
39
- <div class="fs-timeline-marker"></div>
40
- <div class="fs-timeline-content">
41
- <p class="fs-timeline-title">Pedido recebido</p>
42
- <span class="fs-timeline-time">09:12</span>
43
- </div>
44
- </li>
45
- <li class="fs-timeline-item fs-timeline-completed">
46
- <div class="fs-timeline-marker"></div>
47
- <div class="fs-timeline-content">
48
- <p class="fs-timeline-title">Pagamento confirmado</p>
49
- <span class="fs-timeline-time">09:15</span>
50
- </div>
51
- </li>
52
- <li class="fs-timeline-item fs-timeline-active">
53
- <div class="fs-timeline-marker"></div>
54
- <div class="fs-timeline-content">
55
- <p class="fs-timeline-title">Em separação</p>
56
- <p class="fs-timeline-text">Aguardando despacho do centro de distribuição.</p>
57
- </div>
58
- </li>
59
- <li class="fs-timeline-item">
60
- <div class="fs-timeline-marker"></div>
61
- <div class="fs-timeline-content">
62
- <p class="fs-timeline-title">Envio</p>
63
- </div>
64
- </li>
65
- <li class="fs-timeline-item fs-timeline-failed">
66
- <div class="fs-timeline-marker"></div>
67
- <div class="fs-timeline-content">
68
- <p class="fs-timeline-title">Entrega</p>
69
- <p class="fs-timeline-text">Tentativa de entrega falhou.</p>
70
- </div>
71
- </li>
72
- </ul>
73
- </div>
74
-
75
- <div style="flex: 1;">
76
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Horizontal</p>
77
- <ul class="fs-timeline fs-timeline-horizontal">
78
- <li class="fs-timeline-item fs-timeline-completed">
79
- <div class="fs-timeline-marker"></div>
80
- <div class="fs-timeline-content">
81
- <p class="fs-timeline-title">Recebido</p>
82
- </div>
83
- </li>
84
- <li class="fs-timeline-item fs-timeline-completed">
85
- <div class="fs-timeline-marker"></div>
86
- <div class="fs-timeline-content">
87
- <p class="fs-timeline-title">Pago</p>
88
- </div>
89
- </li>
90
- <li class="fs-timeline-item fs-timeline-active">
91
- <div class="fs-timeline-marker"></div>
92
- <div class="fs-timeline-content">
93
- <p class="fs-timeline-title">Separação</p>
94
- </div>
95
- </li>
96
- <li class="fs-timeline-item">
97
- <div class="fs-timeline-marker"></div>
98
- <div class="fs-timeline-content">
99
- <p class="fs-timeline-title">Entrega</p>
100
- </div>
101
- </li>
102
- </ul>
103
- </div>
104
- </div>
105
-
106
-
107
- </body>
108
- </html>
package/mockup/examples/toast.html DELETED
@@ -1,113 +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.0">
6
- <title>Fokus Styles — Toasts</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
- :root { --demo-max-width: 1080px; --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); }
14
- * { box-sizing: border-box; }
15
- body { min-block-size: 100vh; margin: 0; color: var(--fs-color-text); background: var(--fs-color-bg-subtle); }
16
- .demo-page { max-inline-size: var(--demo-max-width); margin-inline: auto; padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 40px) 64px; }
17
- .demo-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-block-end: 32px; }
18
- .demo-eyebrow { margin: 0 0 8px; color: var(--demo-accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
19
- html[data-fs-theme="dark"] .demo-eyebrow { color: var(--fs-color-text); }
20
- .demo-title { max-inline-size: 760px; margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.04em; }
21
- .demo-lead { max-inline-size: 720px; margin: 16px 0 0; color: var(--fs-color-muted); font-size: 1.05rem; line-height: 1.6; }
22
- .demo-toast-row, .demo-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
23
- .demo-toast-row { margin-block-start: 20px; }
24
- .demo-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); }
25
- .demo-section { margin-block-start: 32px; }
26
- .demo-section-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-block-end: 14px; }
27
- .demo-section-heading h2, .demo-card h3, .demo-reference h2, .demo-playground h3 { margin: 0; }
28
- .demo-section-heading p, .demo-card p, .demo-reference p, .demo-status p { color: var(--fs-color-muted); }
29
- .demo-section-heading p { max-inline-size: 620px; margin: 0; font-size: .9rem; }
30
- .demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
31
- .demo-card, .demo-playground, .demo-reference { 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); }
32
- .demo-card { min-block-size: 190px; padding: 20px; }
33
- .demo-card p { margin: 10px 0 20px; line-height: 1.55; }
34
- .demo-card-icon { display: grid; inline-size: 36px; block-size: 36px; place-items: center; margin-block-end: 16px; border-radius: var(--fs-radius-sm); color: var(--fs-color-primary); background: var(--demo-soft-bg); font-size: 1.2rem; font-weight: 700; }
35
- .demo-playground { padding: clamp(18px, 3vw, 28px); }
36
- .demo-playground-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 28px; }
37
- .demo-demo-group + .demo-demo-group { margin-block-start: 28px; }
38
- .demo-demo-group h3 { font-size: 1rem; }
39
- .demo-demo-group > p { margin: 6px 0 14px; color: var(--fs-color-muted); font-size: .9rem; }
40
- .demo-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-sm); background: var(--demo-soft-bg); }
41
- .demo-sample + .demo-sample { margin-block-start: 10px; }
42
- .demo-sample-label { flex: 1 1 150px; color: var(--fs-color-muted); font-size: .82rem; }
43
- .demo-status { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--fs-radius-sm); background: var(--demo-soft-bg); }
44
- .demo-status h3 { margin: 0; }
45
- .demo-status p { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; }
46
- .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; }
47
- .demo-code { margin: 0; padding: 14px; overflow: auto; border-radius: var(--fs-radius-sm); color: var(--fs-color-text); background: var(--demo-panel-bg); font: .76rem/1.6 var(--fs-font-mono, ui-monospace, monospace); white-space: pre-wrap; }
48
- .demo-reference { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: clamp(18px, 3vw, 28px); }
49
- .demo-reference ul { margin: 0; padding-inline-start: 20px; color: var(--fs-color-muted); line-height: 1.8; }
50
- .demo-reference code { color: var(--fs-color-primary); }
51
- @media (max-width: 760px) { .demo-hero, .demo-playground-grid, .demo-reference { grid-template-columns: 1fr; } .demo-hero { align-items: start; } .demo-grid { grid-template-columns: 1fr; } }
52
- </style>
53
- </head>
54
- <body>
55
- <main class="demo-page">
56
- <header class="demo-hero"><div><p class="demo-eyebrow">Fokus Styles · feedback flutuante</p><h1 class="demo-title">Toasts que confirmam ações sem interromper o fluxo.</h1><p class="demo-lead">Toast é temporário, empilhado e acionado por JavaScript. Use-o para confirmações breves; para mensagens persistentes, prefira Alert.</p><div class="demo-toast-row" aria-label="Características"><span class="fs-badge fs-badge-soft-info">Flutuante</span><span class="fs-badge fs-badge-soft-success">Auto-dismiss</span><span class="fs-badge fs-badge-outline-primary">CSS + JS</span></div></div><span class="fs-badge fs-badge-outline-primary">role=status</span></header>
57
- <nav class="demo-toolbar" aria-label="Controles da demonstração"><div class="demo-action-row"><button class="fs-btn fs-btn-primary fs-btn-sm" type="button" id="reset-demo">Restaurar demonstração</button><button class="fs-btn fs-btn-outline-primary fs-btn-sm" type="button" id="toggle-direction" aria-pressed="false">Testar RTL</button></div><span class="fs-form-text">Passe o mouse ou use Tab sobre o Toast para pausar o timer.</span></nav>
58
- <section class="demo-section" aria-labelledby="why-title"><div class="demo-section-heading"><div><h2 id="why-title">Toast, Alert ou Notification Center?</h2><p>Escolha pela duração e pelo contexto da mensagem, sem transformar uma confirmação breve em uma interrupção.</p></div></div><div class="demo-grid"><article class="demo-card"><span class="demo-card-icon" aria-hidden="true">✓</span><h3>Toast confirma</h3><p>Feedback breve após uma ação não bloqueante, com auto-dismiss e pausa durante interação.</p><button class="fs-btn fs-btn-success fs-btn-sm" type="button" data-show-toast="success">Mostrar Toast</button></article><article class="demo-card"><span class="demo-card-icon" aria-hidden="true">!</span><h3>Alert permanece</h3><p>Mensagem contextual que precisa continuar visível na região afetada.</p><span class="fs-badge fs-btn-sm fs-badge-warning">Persistente</span></article><article class="demo-card"><span class="demo-card-icon" aria-hidden="true">≡</span><h3>Notification Center guarda</h3><p>Histórico para notificações que precisam ser revisitadas ou marcadas como lidas.</p><span class="fs-badge fs-btn-sm fs-badge-outline-info">Histórico</span></article></div></section>
59
- <section class="demo-section" aria-labelledby="playground-title"><div class="demo-section-heading"><div><h2 id="playground-title">Laboratório de Toasts</h2><p>Compare variantes, slots, tempo, ações, empilhamento e comportamento em telas estreitas.</p></div><span class="fs-badge fs-badge-outline-success">interativo</span></div><div class="demo-playground"><div class="demo-playground-grid"><div><div class="demo-demo-group"><h3>Variantes e composição</h3><p>Ícones são apoio visual; títulos, corpo e ações permanecem compreensíveis sem depender da cor.</p><div class="demo-sample"><span class="demo-sample-label">Variantes</span><button class="fs-btn fs-btn-outline-success fs-btn-sm" type="button" data-show-toast="success">Sucesso</button><button class="fs-btn fs-btn-outline-warning fs-btn-sm" type="button" data-show-toast="warning">Atenção</button><button class="fs-btn fs-btn-outline-danger fs-btn-sm" type="button" data-show-toast="danger">Erro persistente</button></div><div class="demo-sample"><span class="demo-sample-label">Progresso</span><button class="fs-btn fs-btn-primary fs-btn-sm" type="button" data-show-toast="progress">Mostrar com progresso</button><button class="fs-btn fs-btn-secondary fs-btn-sm" type="button" data-show-toast="action">Mostrar com ação</button></div></div><div class="demo-demo-group"><h3>Empilhamento e responsividade</h3><p>Toasts usam uma única região fixa, preservam a largura em 320px e permanecem acima do conteúdo.</p><div class="demo-sample"><span class="demo-sample-label">Empilhar</span><button class="fs-btn fs-btn-outline-primary fs-btn-sm" type="button" id="stack-toast">Adicionar três Toasts</button></div><div class="demo-sample"><span class="demo-sample-label">Persistente</span><button class="fs-btn fs-btn-outline-danger fs-btn-sm" type="button" data-show-toast="persistent">Sem auto-dismiss</button></div></div><div class="demo-demo-group"><h3>Contratos de pausa</h3><p>Hover e foco pausam o timer; o fechamento manual não move o foco para outro Toast.</p><div class="demo-sample"><span class="demo-sample-label">Teclado</span><button class="fs-btn fs-btn-outline-secondary fs-btn-sm" type="button" data-show-toast="keyboard">Mostrar e navegar com Tab</button></div></div></div><aside class="demo-status" aria-labelledby="status-title"><div><h3 id="status-title">Contrato do Toast</h3><p>A API atual continua pública: `show`, `hide`, `toggle`, `dispose`, `data-delay` e `data-autohide`.</p></div><p class="demo-status-output" id="demo-status" role="status" aria-live="polite">Demonstração pronta.</p><pre class="demo-code"><code>.fs-toast-container
60
- .fs-toast
61
- .fs-toast-header
62
- .fs-toast-body
63
- .fs-toast-icon
64
- .fs-toast-actions
65
- .fs-toast-progress
66
-
67
- data-toast-progress="true"
68
- data-delay="4000"
69
- data-autohide="false"</code></pre></aside></div></div></section>
70
- <section class="demo-section" aria-labelledby="a11y-title"><div class="demo-section-heading"><div><h2 id="a11y-title">Contratos preservados</h2><p>O Toast anuncia sem interromper, não rouba foco e oferece tempo para leitura e interação.</p></div></div><div class="demo-reference"><div><h2>Acessibilidade</h2><ul><li><code>role="status"</code> e <code>aria-live="polite"</code> são aplicados pelo JS.</li><li>O Toast não recebe foco automaticamente.</li><li>Hover e foco pausam o auto-dismiss.</li><li>Ícones decorativos usam <code>aria-hidden="true"</code>.</li></ul></div><div><h2>Limites</h2><ul><li>Use Alert para mensagens persistentes.</li><li>Use <code>data-autohide="false"</code> para erros que exigem ação.</li><li>Não comunique somente por cor ou ícone.</li><li>RTL, dark mode, reduced motion e forced colors são considerados.</li></ul></div></div></section>
71
- </main>
72
- <div class="fs-toast-container"><div class="fs-toast fs-toast-success" data-fs="toast" id="toast-success" data-delay="4000"><div class="fs-toast-header"><span class="fs-toast-icon" aria-hidden="true">✓</span><div class="fs-toast-heading"><strong class="fs-toast-title">Operação concluída</strong><span class="fs-toast-meta">Agora</span></div><button class="fs-btn-close fs-toast-close" type="button" data-fs-dismiss="toast" aria-label="Fechar operação concluída"></button></div><div class="fs-toast-body">O arquivo foi salvo com sucesso.</div></div><div class="fs-toast fs-toast-warning" data-fs="toast" id="toast-progress" data-delay="6000" data-toast-progress="true"><div class="fs-toast-header"><span class="fs-toast-icon" aria-hidden="true">!</span><div class="fs-toast-heading"><strong class="fs-toast-title">Atenção</strong><span class="fs-toast-meta" data-toast-countdown>6 segundos</span></div><button class="fs-btn-close fs-toast-close" type="button" data-fs-dismiss="toast" aria-label="Fechar atenção"></button></div><div class="fs-toast-body">Este Toast demonstra a barra de tempo restante.</div><div class="fs-toast-progress" aria-hidden="true"></div></div><div class="fs-toast fs-toast-danger" data-fs="toast" id="toast-persistent" data-autohide="false"><div class="fs-toast-header"><span class="fs-toast-icon" aria-hidden="true">!</span><div class="fs-toast-heading"><strong class="fs-toast-title">Falha ao sincronizar</strong></div><button class="fs-btn-close fs-toast-close" type="button" data-fs-dismiss="toast" aria-label="Fechar falha ao sincronizar"></button></div><div class="fs-toast-body">Tente novamente ou consulte os detalhes da operação.</div><div class="fs-toast-actions"><button type="button" class="fs-btn fs-btn-danger fs-btn-sm">Tentar novamente</button><a href="#detalhes" class="fs-toast-link">Ver detalhes</a></div></div></div>
73
- <script src="../../dist/js/fokus.js"></script><script>
74
- const page = document.querySelector(".demo-page");
75
- const status = document.getElementById("demo-status");
76
- const directionButton = document.getElementById("toggle-direction");
77
- const countdownTimers = new Map();
78
- const updateCountdown = (toast) => {
79
- const label = toast.querySelector("[data-toast-countdown]");
80
- if (!label) return;
81
- const delay = Number(toast.dataset.delay) || 4000;
82
- const state = countdownTimers.get(toast) || { remaining: delay, last: performance.now() };
83
- if (!toast.classList.contains("is-paused") && getComputedStyle(toast).display !== "none") {
84
- const now = performance.now();
85
- state.remaining = Math.max(0, state.remaining - (now - state.last));
86
- state.last = now;
87
- } else {
88
- state.last = performance.now();
89
- }
90
- label.textContent = `${Math.ceil(state.remaining / 1000)} segundos`;
91
- countdownTimers.set(toast, state);
92
- };
93
- const show = (id) => {
94
- const toast = document.getElementById(id);
95
- const instance = FokusStyles.Toast.getInstance(toast);
96
- const delay = Number(toast.dataset.delay) || 4000;
97
- countdownTimers.set(toast, { remaining: delay, last: performance.now() });
98
- instance.show();
99
- updateCountdown(toast);
100
- status.textContent = `Toast ${toast.className.match(/fs-toast-(\\w+)/)?.[1] || ""} exibido.`;
101
- };
102
- setInterval(() => document.querySelectorAll("[data-toast-countdown]").forEach((label) => updateCountdown(label.closest(".fs-toast"))), 100);
103
- document.querySelectorAll("[data-show-toast]").forEach((button) => button.addEventListener("click", () => {
104
- const type = button.dataset.showToast;
105
- show(type === "progress" ? "toast-progress" : type === "warning" ? "toast-progress" : type === "danger" || type === "persistent" ? "toast-persistent" : "toast-success");
106
- }));
107
- document.getElementById("stack-toast").addEventListener("click", () => { show("toast-success"); setTimeout(() => show("toast-progress"), 80); setTimeout(() => show("toast-persistent"), 160); });
108
- document.getElementById("reset-demo").addEventListener("click", () => location.reload());
109
- directionButton.addEventListener("click", () => { const rtl = page.getAttribute("dir") !== "rtl"; page.setAttribute("dir", rtl ? "rtl" : "ltr"); directionButton.setAttribute("aria-pressed", String(rtl)); directionButton.textContent = rtl ? "Voltar para LTR" : "Testar RTL"; status.textContent = rtl ? "Direção RTL ativada." : "Direção LTR ativada."; });
110
- document.querySelectorAll(".fs-toast").forEach((toast) => toast.addEventListener("fs:toast:hidden", () => { status.textContent = "Toast ocultado."; }));
111
- </script>
112
- </body>
113
- </html>