fokus-styles 2.4.0 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (212) hide show
  1. package/dist/css/components.css +561 -83
  2. package/dist/css/components.min.css +1 -1
  3. package/dist/css/fokus-components.css +561 -83
  4. package/dist/css/fokus-components.min.css +1 -1
  5. package/dist/css/fokus-rtl.css +697 -83
  6. package/dist/css/fokus-rtl.min.css +1 -1
  7. package/dist/css/fokus-utilities.css +136 -0
  8. package/dist/css/fokus-utilities.min.css +1 -1
  9. package/dist/css/fokus.css +996 -258
  10. package/dist/css/fokus.min.css +1 -1
  11. package/dist/css/forms.css +300 -176
  12. package/dist/css/forms.min.css +1 -1
  13. package/dist/css/helpers.css +136 -0
  14. package/dist/css/helpers.min.css +1 -1
  15. package/dist/js/fokus.js +270 -25
  16. package/dist/js/fokus.min.js +18 -18
  17. package/package.json +17 -15
  18. package/packages/fokus-components/scss/components/_alerts.scss +128 -6
  19. package/packages/fokus-components/scss/components/_badges.scss +26 -10
  20. package/packages/fokus-components/scss/components/_index.scss +1 -0
  21. package/packages/fokus-components/scss/components/_popover.scss +131 -21
  22. package/packages/fokus-components/scss/components/_responsive.scss +23 -0
  23. package/packages/fokus-components/scss/components/_tag.scss +37 -14
  24. package/packages/fokus-components/scss/components/_toasts.scss +156 -11
  25. package/packages/fokus-components/scss/components/_tooltips.scss +70 -18
  26. package/packages/fokus-components/scss/forms/_check-radio-switch.scss +313 -215
  27. package/packages/fokus-components/scss/forms/_forms.scss +16 -0
  28. package/packages/fokus-js/js/carousel.d.ts +4 -0
  29. package/packages/fokus-js/js/carousel.js +8 -0
  30. package/packages/fokus-js/js/core/positioning.js +18 -9
  31. package/packages/fokus-js/js/dropdown.d.ts +4 -0
  32. package/packages/fokus-js/js/dropdown.js +7 -0
  33. package/packages/fokus-js/js/popover.js +26 -1
  34. package/packages/fokus-js/js/tabs.d.ts +3 -0
  35. package/packages/fokus-js/js/tabs.js +5 -0
  36. package/packages/fokus-js/js/tag.js +17 -0
  37. package/packages/fokus-js/js/toast.js +77 -3
  38. package/packages/fokus-js/js/tooltip.d.ts +8 -1
  39. package/packages/fokus-js/js/tooltip.js +106 -13
  40. package/packages/fokus-utilities/scss/utilities/_api.scss +48 -0
  41. package/CHANGELOG.md +0 -910
  42. package/dist/css/components.css.map +0 -1
  43. package/dist/css/components.min.css.map +0 -1
  44. package/dist/css/fokus-components.css.map +0 -1
  45. package/dist/css/fokus-components.min.css.map +0 -1
  46. package/dist/css/fokus-core.css.map +0 -1
  47. package/dist/css/fokus-core.min.css.map +0 -1
  48. package/dist/css/fokus-dark.css.map +0 -1
  49. package/dist/css/fokus-dark.min.css.map +0 -1
  50. package/dist/css/fokus-rtl.css.map +0 -1
  51. package/dist/css/fokus-rtl.min.css.map +0 -1
  52. package/dist/css/fokus-utilities.css.map +0 -1
  53. package/dist/css/fokus-utilities.min.css.map +0 -1
  54. package/dist/css/fokus.css.map +0 -1
  55. package/dist/css/fokus.min.css.map +0 -1
  56. package/dist/css/fonts.css.map +0 -1
  57. package/dist/css/fonts.min.css.map +0 -1
  58. package/dist/css/forms.css.map +0 -1
  59. package/dist/css/forms.min.css.map +0 -1
  60. package/dist/css/helpers.css.map +0 -1
  61. package/dist/css/helpers.min.css.map +0 -1
  62. package/dist/css/layout.css.map +0 -1
  63. package/dist/css/layout.min.css.map +0 -1
  64. package/dist/js/fokus.js.map +0 -7
  65. package/dist/js/fokus.min.js.map +0 -7
  66. package/docs/README.md +0 -86
  67. package/docs/comparison.md +0 -124
  68. package/docs/components/accordion.md +0 -104
  69. package/docs/components/alert-dialog.md +0 -99
  70. package/docs/components/alert.md +0 -59
  71. package/docs/components/avatar.md +0 -13
  72. package/docs/components/badge.md +0 -82
  73. package/docs/components/breadcrumb.md +0 -93
  74. package/docs/components/button-group.md +0 -13
  75. package/docs/components/button.md +0 -98
  76. package/docs/components/card.md +0 -111
  77. package/docs/components/carousel.md +0 -167
  78. package/docs/components/checkbox.md +0 -97
  79. package/docs/components/close-button.md +0 -13
  80. package/docs/components/code.md +0 -13
  81. package/docs/components/collapse.md +0 -78
  82. package/docs/components/combobox.md +0 -123
  83. package/docs/components/command-palette.md +0 -131
  84. package/docs/components/datatable.md +0 -173
  85. package/docs/components/datepicker.md +0 -137
  86. package/docs/components/divider.md +0 -57
  87. package/docs/components/dropdown.md +0 -103
  88. package/docs/components/empty-state.md +0 -65
  89. package/docs/components/file-upload-advanced.md +0 -116
  90. package/docs/components/file-upload.md +0 -93
  91. package/docs/components/icon-link.md +0 -13
  92. package/docs/components/input-group.md +0 -73
  93. package/docs/components/input.md +0 -90
  94. package/docs/components/list-group.md +0 -13
  95. package/docs/components/modal.md +0 -120
  96. package/docs/components/navbar.md +0 -74
  97. package/docs/components/nested-menu.md +0 -90
  98. package/docs/components/notification-center.md +0 -116
  99. package/docs/components/offcanvas.md +0 -102
  100. package/docs/components/pagination.md +0 -145
  101. package/docs/components/placeholder.md +0 -13
  102. package/docs/components/popover.md +0 -105
  103. package/docs/components/progress.md +0 -126
  104. package/docs/components/radio.md +0 -70
  105. package/docs/components/range.md +0 -83
  106. package/docs/components/rating.md +0 -91
  107. package/docs/components/ratio.md +0 -13
  108. package/docs/components/scrollspy.md +0 -13
  109. package/docs/components/segmented-control.md +0 -82
  110. package/docs/components/select.md +0 -89
  111. package/docs/components/skeleton.md +0 -70
  112. package/docs/components/stepper.md +0 -107
  113. package/docs/components/switch.md +0 -75
  114. package/docs/components/table.md +0 -90
  115. package/docs/components/tabs.md +0 -104
  116. package/docs/components/tag.md +0 -129
  117. package/docs/components/tile.md +0 -112
  118. package/docs/components/timeline.md +0 -78
  119. package/docs/components/toast.md +0 -95
  120. package/docs/components/tooltip.md +0 -77
  121. package/docs/components/tree-view.md +0 -118
  122. package/docs/contributing/contributing.md +0 -18
  123. package/docs/getting-started/installation.md +0 -70
  124. package/docs/getting-started/usage.md +0 -105
  125. package/docs/guides/accessibility.md +0 -102
  126. package/docs/guides/charts.md +0 -73
  127. package/docs/guides/dark-mode.md +0 -90
  128. package/docs/guides/icons.md +0 -99
  129. package/docs/guides/javascript-api.md +0 -9
  130. package/docs/guides/layout-advanced.md +0 -118
  131. package/docs/guides/migration-clarus-to-fokus.md +0 -48
  132. package/docs/guides/migration-external.md +0 -123
  133. package/docs/guides/migration-v1.md +0 -63
  134. package/docs/guides/print.md +0 -30
  135. package/docs/guides/rtl-and-system-preferences.md +0 -28
  136. package/docs/guides/theming.md +0 -140
  137. package/docs/guides/utility-api.md +0 -9
  138. package/docs/prompts/prompt-plan.md +0 -45
  139. package/docs/reference/accessibility-matrix.md +0 -77
  140. package/docs/reference/browser-support.md +0 -75
  141. package/docs/reference/contrast-report.md +0 -50
  142. package/docs/reference/definitions.md +0 -864
  143. package/docs/reference/design-tokens.md +0 -194
  144. package/docs/reference/scss-architecture.md +0 -227
  145. package/docs/reference/size-baseline.json +0 -34
  146. package/docs/reference/stability.md +0 -89
  147. package/docs/showcase.md +0 -25
  148. package/mockup/README.md +0 -41
  149. package/mockup/assets/carousel-planning.png +0 -0
  150. package/mockup/assets/carousel-workspace.png +0 -0
  151. package/mockup/assets/example-theme.css +0 -8
  152. package/mockup/assets/example-theme.js +0 -11
  153. package/mockup/assets/showcase-contracts.js +0 -84
  154. package/mockup/assets/showcase.css +0 -91
  155. package/mockup/assets/showcase.js +0 -724
  156. package/mockup/content-data.html +0 -9
  157. package/mockup/examples/accordion-tabs-toast.html +0 -149
  158. package/mockup/examples/alert-dialog.html +0 -84
  159. package/mockup/examples/alerts.html +0 -41
  160. package/mockup/examples/badges-alerts.html +0 -77
  161. package/mockup/examples/buttons.html +0 -58
  162. package/mockup/examples/cards.html +0 -132
  163. package/mockup/examples/carousel.html +0 -126
  164. package/mockup/examples/charts.html +0 -102
  165. package/mockup/examples/check-radio-switch.html +0 -144
  166. package/mockup/examples/collapse.html +0 -69
  167. package/mockup/examples/combobox.html +0 -60
  168. package/mockup/examples/command-palette.html +0 -64
  169. package/mockup/examples/datatable.html +0 -113
  170. package/mockup/examples/datepicker.html +0 -62
  171. package/mockup/examples/divider.html +0 -45
  172. package/mockup/examples/dropdown-tooltip.html +0 -77
  173. package/mockup/examples/empty-state.html +0 -56
  174. package/mockup/examples/file-drop.html +0 -74
  175. package/mockup/examples/file-upload-advanced.html +0 -68
  176. package/mockup/examples/forms-advanced.html +0 -77
  177. package/mockup/examples/hover-card.html +0 -86
  178. package/mockup/examples/icons.html +0 -157
  179. package/mockup/examples/input-group.html +0 -74
  180. package/mockup/examples/js-foundation.html +0 -215
  181. package/mockup/examples/layout.html +0 -134
  182. package/mockup/examples/modal-select.html +0 -127
  183. package/mockup/examples/nested-menu.html +0 -73
  184. package/mockup/examples/notification-center.html +0 -86
  185. package/mockup/examples/offcanvas-popover.html +0 -133
  186. package/mockup/examples/pagination-breadcrumbs.html +0 -92
  187. package/mockup/examples/range.html +0 -69
  188. package/mockup/examples/rating.html +0 -103
  189. package/mockup/examples/segmented-control.html +0 -96
  190. package/mockup/examples/skeletons.html +0 -82
  191. package/mockup/examples/spinner-progress.html +0 -130
  192. package/mockup/examples/stepper.html +0 -119
  193. package/mockup/examples/tables-navbar.html +0 -89
  194. package/mockup/examples/tag.html +0 -105
  195. package/mockup/examples/theming.html +0 -68
  196. package/mockup/examples/tile.html +0 -107
  197. package/mockup/examples/timeline.html +0 -108
  198. package/mockup/examples/tree-view.html +0 -68
  199. package/mockup/feedback-actions.html +0 -9
  200. package/mockup/forms.html +0 -13
  201. package/mockup/foundations.html +0 -7
  202. package/mockup/kitchen-sink.html +0 -696
  203. package/mockup/navigation-disclosure.html +0 -11
  204. package/mockup/overlays-commands.html +0 -12
  205. package/mockup/templates/README.md +0 -20
  206. package/mockup/templates/admin.html +0 -334
  207. package/mockup/templates/auth.html +0 -234
  208. package/mockup/templates/dashboard.html +0 -442
  209. package/mockup/templates/landing.html +0 -397
  210. package/packages/fokus-icons/package.json +0 -46
  211. package/scripts/migrate-fokus-map.json +0 -1366
  212. package/scripts/migrate-fokus.mjs +0 -97
package/docs/components/dropdown.md DELETED
@@ -1,103 +0,0 @@
1
- # Dropdown
2
-
3
- Menu suspenso posicionado relativo a um gatilho — reposicionamento
4
- automático (flip perto das bordas), navegação por teclado, fecha ao
5
- clicar fora ou `Escape`.
6
-
7
- ## Visão geral
8
-
9
- ```html
10
- <div class="fs-dropdown">
11
- <button type="button" class="fs-btn fs-dropdown-toggle" data-fs="dropdown" data-fs-target="#meu-menu">
12
- Opções
13
- </button>
14
- <div class="fs-dropdown-menu" id="meu-menu">
15
- <a href="#" class="fs-dropdown-item">Editar</a>
16
- <a href="#" class="fs-dropdown-item">Duplicar</a>
17
- <div class="fs-dropdown-divider"></div>
18
- <a href="#" class="fs-dropdown-item">Excluir</a>
19
- </div>
20
- </div>
21
- ```
22
-
23
- Sem `data-fs-target`, o menu é o próximo irmão do gatilho no HTML — usar
24
- `data-fs-target` é mais explícito e não exige ordem específica no DOM (o
25
- JS move o menu pra `<body>` na inicialização, pra escapar de
26
- `overflow: hidden` de containers ancestrais).
27
-
28
- ## Anatomia
29
-
30
- `.fs-dropdown` (posicionamento relativo, opcional — só necessário se você
31
- não usa `data-fs-target`) > gatilho (`.fs-dropdown-toggle`, qualquer
32
- elemento clicável) + `.fs-dropdown-menu` > `.fs-dropdown-item` (link ou
33
- botão), `.fs-dropdown-divider` (separador), `.fs-dropdown-header` (rótulo
34
- de grupo, sem interação).
35
-
36
- ## Variações
37
-
38
- - **Posicionamento**: `data-placement` (`top`/`bottom`/`left`/`right`,
39
- padrão `bottom`) e `data-align` (`start`/`end`, padrão `start`) no
40
- gatilho — reposiciona automaticamente (flip) se não couber na direção
41
- pedida.
42
-
43
- ```html
44
- <button class="fs-btn fs-dropdown-toggle" data-fs="dropdown" data-fs-target="#menu2" data-placement="top" data-align="end">
45
- Opções
46
- </button>
47
- ```
48
-
49
- ## Estados
50
-
51
- `.fs-dropdown-item.is-active` (fundo primário), `.fs-dropdown-item.is-disabled`
52
- (opacidade reduzida, sem interação/fora da navegação por seta).
53
-
54
- ## A11y
55
-
56
- O JS aplica automaticamente: `aria-haspopup="menu"` + `aria-expanded` no
57
- gatilho, `role="menu"` no menu. Dentro do menu aberto: `ArrowDown`/
58
- `ArrowUp` navegam entre itens (pulando desabilitados); o primeiro item
59
- recebe foco ao abrir. `Escape` fecha e devolve o foco ao gatilho; clicar
60
- num item fecha e devolve o foco ao gatilho também.
61
-
62
- ## API JS
63
-
64
- Auto-init via `data-fs="dropdown"`. `Dropdown.getInstance(el)` (`el` é o
65
- **gatilho**, não o menu).
66
-
67
- | Método | Descrição |
68
- |---|---|
69
- | `show()` | Abre o menu, posiciona, foca o primeiro item, ativa fechamento por clique fora. |
70
- | `hide()` | Fecha o menu. |
71
- | `toggle()` | Alterna entre `show()`/`hide()`. |
72
- | `dispose()` | Fecha se aberto, remove todos os listeners e desregistra a instância. |
73
-
74
- | Evento (no gatilho) | Cancelável | Quando |
75
- |---|---|---|
76
- | `fs:dropdown:shown` | Não | Depois de abrir. |
77
- | `fs:dropdown:hidden` | Não | Depois de fechar. |
78
-
79
- ## Tokens
80
-
81
- `--fs-color-border`, `--fs-color-surface`, `--fs-color-text`,
82
- `--fs-color-subtle` (hover), `--fs-color-primary` (item ativo),
83
- `--fs-color-muted` (header/desabilitado), `--fs-radius-md`,
84
- `--fs-shadow-md`.
85
-
86
- ## Exemplo
87
-
88
- ```html
89
- <div class="fs-dropdown">
90
- <button type="button" class="fs-btn fs-btn-outline-secondary fs-dropdown-toggle" data-fs="dropdown" data-fs-target="#acoes">
91
- Ações
92
- </button>
93
- <div class="fs-dropdown-menu" id="acoes">
94
- <div class="fs-dropdown-header">Conta</div>
95
- <a href="#" class="fs-dropdown-item">Perfil</a>
96
- <a href="#" class="fs-dropdown-item is-disabled">Configurações (em breve)</a>
97
- <div class="fs-dropdown-divider"></div>
98
- <a href="#" class="fs-dropdown-item">Sair</a>
99
- </div>
100
- </div>
101
- ```
102
-
103
- Mockup: [laboratório do componente](../../mockup/overlays-commands.html#dropdown).
package/docs/components/empty-state.md DELETED
@@ -1,65 +0,0 @@
1
- # Empty State
2
-
3
- Bloco padrão para listas/telas vazias ("nenhum resultado", "nada aqui
4
- ainda") — 100% CSS.
5
-
6
- ## Visão geral
7
-
8
- ```html
9
- <div class="fs-empty-state">
10
- <div class="fs-empty-state-icon" aria-hidden="true">
11
- <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"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
12
- </div>
13
- <h3 class="fs-empty-state-title">Nenhum resultado encontrado</h3>
14
- <p class="fs-empty-state-text">Tente ajustar os filtros ou buscar por outro termo.</p>
15
- <button type="button" class="fs-btn fs-btn-primary">Limpar filtros</button>
16
- </div>
17
- ```
18
-
19
- ## Anatomia
20
-
21
- `.fs-empty-state` (contêiner centralizado em coluna) > `.fs-empty-state-icon`
22
- (slot vazio — ícone SVG, [`fokus-styles/icons`](../guides/icons.md) recomendado,
23
- ou imagem/ilustração própria, sem variantes fixas de estado)
24
- + `.fs-empty-state-title` + `.fs-empty-state-text` (opcional) + ação
25
- opcional (reusa [Button](button.md), não é parte do componente).
26
-
27
- ## Variações
28
-
29
- Nenhuma — o componente é deliberadamente sem modificadores; a variação vem
30
- do conteúdo que você põe dentro do slot de ícone.
31
-
32
- ## Estados
33
-
34
- Nenhum — elemento estático.
35
-
36
- ## A11y
37
-
38
- Se o Empty State substitui uma lista que normalmente teria itens (ex.:
39
- resultado de busca), considere `aria-live="polite"` no contêiner pai se ele
40
- aparece dinamicamente após uma ação do usuário (busca, filtro), para
41
- leitores de tela anunciarem a mudança.
42
-
43
- ## API JS
44
-
45
- Nenhuma — 100% CSS.
46
-
47
- ## Tokens
48
-
49
- `--fs-color-subtle`/`--fs-color-muted` (ícone), `--fs-color-text` (título),
50
- `--fs-color-muted` (texto).
51
-
52
- ## Exemplo
53
-
54
- ```html
55
- <div class="fs-empty-state">
56
- <div class="fs-empty-state-icon" aria-hidden="true">
57
- <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 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
58
- </div>
59
- <h3 class="fs-empty-state-title">Nada por aqui ainda</h3>
60
- <p class="fs-empty-state-text">Quando você criar seu primeiro projeto, ele aparece nesta lista.</p>
61
- <button type="button" class="fs-btn fs-btn-primary">Criar projeto</button>
62
- </div>
63
- ```
64
-
65
- Mockup: [laboratório do componente](../../mockup/feedback-actions.html#empty-state).
package/docs/components/file-upload-advanced.md DELETED
@@ -1,116 +0,0 @@
1
- # Upload avançado
2
-
3
- Evolução do [File Upload](file-upload.md) simples: múltiplos arquivos,
4
- preview por arquivo (thumbnail de imagem, nome, tamanho), progresso
5
- individual e remoção por item. Reaproveita a mesma dropzone/botão
6
- (`.fs-file-upload`/`.fs-file-input`/`.fs-file-label`) como gatilho — só
7
- adiciona a lista de itens selecionados, gerada pelo JS.
8
-
9
- **Agnóstico de backend**: o componente não faz upload de verdade (não
10
- sabe nada sobre XHR/fetch/protocolo) — só mantém a lista de arquivos
11
- selecionados e expõe uma API pra seu código atualizar o progresso/erro de
12
- cada item conforme o upload de fato acontece.
13
-
14
- ## Visão geral
15
-
16
- ```html
17
- <div class="fs-file-upload" data-fs="file-upload-advanced">
18
- <input type="file" class="fs-file-input" id="anexos" multiple>
19
- <label for="anexos" class="fs-file-label fs-file-label-dropzone">
20
- Arraste arquivos ou clique para escolher
21
- <span class="fs-file-dropzone-hint">Vários arquivos, até 5MB cada</span>
22
- </label>
23
- </div>
24
- ```
25
-
26
- A lista (`<ul class="fs-file-upload-list">`) é criada automaticamente
27
- dentro do wrapper se não existir uma — cada arquivo selecionado vira um
28
- `<li class="fs-file-upload-item">` com thumbnail, nome, tamanho, barra de
29
- progresso e botão de remover.
30
-
31
- ## Arrastar e soltar
32
-
33
- Combine com `data-fs="file-drop"` na mesma `<label>` (ver
34
- [File Upload](file-upload.md#api-js)) pra ganhar drag-and-drop de graça — o `FileDrop` atribui `inputEl.files` e dispara
35
- `change`, que é o mesmo evento que o `FileUploadAdvanced` escuta:
36
-
37
- ```html
38
- <div class="fs-file-upload" data-fs="file-upload-advanced">
39
- <input type="file" class="fs-file-input" id="anexos" multiple>
40
- <label for="anexos" class="fs-file-label fs-file-label-dropzone" data-fs="file-drop">
41
- Arraste arquivos ou clique para escolher
42
- </label>
43
- </div>
44
- ```
45
-
46
- ## Fazendo o upload de verdade
47
-
48
- O componente dispara `fs:file-upload:added` com o `id` de cada item novo
49
- — use esse `id` pra chamar `setProgress`/`setError` a partir do seu
50
- próprio código de upload:
51
-
52
- ```js
53
- const rootEl = document.querySelector('[data-fs="file-upload-advanced"]');
54
- const upload = FokusStyles.FileUploadAdvanced.getInstance(rootEl);
55
-
56
- rootEl.addEventListener("fs:file-upload:added", (event) => {
57
- for (const { id, file } of event.detail.items) {
58
- const xhr = new XMLHttpRequest();
59
- xhr.upload.addEventListener("progress", (e) => {
60
- if (e.lengthComputable) upload.setProgress(id, (e.loaded / e.total) * 100);
61
- });
62
- xhr.addEventListener("error", () => upload.setError(id, "Falha no upload"));
63
- xhr.open("POST", "/upload");
64
- const formData = new FormData();
65
- formData.append("file", file);
66
- xhr.send(formData);
67
- }
68
- });
69
- ```
70
-
71
- ## Estados
72
-
73
- - Progresso: barra `.fs-progress`/`.fs-progress-bar` (mesmo componente de
74
- [Spinner & Progress](progress.md)), atualizada por `setProgress(id, %)`.
75
- - Erro: `setError(id, mensagem)` marca o item com `.is-error` e troca o
76
- texto de tamanho pela mensagem.
77
- - Remoção: botão `.fs-file-upload-remove` (`.fs-btn-close`) em cada item —
78
- clique remove da lista, de `getFiles()` e dispara
79
- `fs:file-upload:removed`.
80
-
81
- ## A11y
82
-
83
- Cada barra de progresso tem `role="progressbar"` com
84
- `aria-valuenow`/`aria-valuemin`/`aria-valuemax` e `aria-label` incluindo o
85
- nome do arquivo. O botão de remover tem `aria-label` dinâmico ("Remover
86
- nome-do-arquivo.png").
87
-
88
- ## Tokens
89
-
90
- Reaproveita os tokens do File Upload simples (`--fs-color-border`,
91
- `--fs-color-subtle`, `--fs-color-primary`, `--fs-radius-sm`) mais os do
92
- [Spinner & Progress](progress.md) pra barra.
93
-
94
- ## API JS
95
-
96
- - `data-fs="file-upload-advanced"` — auto-init no wrapper
97
- `.fs-file-upload`.
98
-
99
- | Método | Descrição |
100
- |---|---|
101
- | `FileUploadAdvanced.getInstance(el)` | Retorna a instância associada ao wrapper (ou `undefined`). |
102
- | `getFiles()` | Retorna um array com os `File` atualmente na lista. |
103
- | `setProgress(id, percent)` | Atualiza a barra de progresso do item (0–100). |
104
- | `setError(id, message)` | Marca o item com erro e mostra `message` no lugar do tamanho. |
105
- | `remove(id)` | Remove um item da lista programaticamente. |
106
- | `dispose()` | Remove os listeners e libera as URLs de thumbnail (`URL.revokeObjectURL`). |
107
-
108
- | Evento | Quando dispara |
109
- |---|---|
110
- | `fs:file-upload:added` | Após novos arquivos serem selecionados — `detail.items` é `{ id, file }[]`. |
111
- | `fs:file-upload:removed` | Após um item ser removido — `detail` é `{ id, file }`. |
112
-
113
- ## Exemplo
114
-
115
- Mockup completo em
116
- [laboratório do componente](../../mockup/forms.html#file-upload).
package/docs/components/file-upload.md DELETED
@@ -1,93 +0,0 @@
1
- # File Upload
2
-
3
- Botão de seleção de arquivo estilizado (o `<input type="file">` nativo não
4
- é estilizável) — CSS-only na base, com arrastar-e-soltar opcional via JS.
5
-
6
- ## Visão geral
7
-
8
- ```html
9
- <div class="fs-file-upload">
10
- <input type="file" class="fs-file-input" id="arquivo">
11
- <label for="arquivo" class="fs-file-label">Escolher arquivo</label>
12
- </div>
13
- ```
14
-
15
- Mesma técnica de input oculto + label irmã dos outros controles
16
- CSS-only — `for`/`id` é o que faz o clique na label abrir o seletor de
17
- arquivo nativo.
18
-
19
- ## Anatomia
20
-
21
- `.fs-file-upload` (wrapper) > `.fs-file-input` (`<input type="file">`,
22
- oculto via clip) + `.fs-file-label` (`<label for="...">`, o botão
23
- visível).
24
-
25
- ## Variações
26
-
27
- - **Tamanho**: `.fs-file-label-sm`, `.fs-file-label-lg`; sem sufixo =
28
- padrão.
29
- - **Dropzone**: `.fs-file-label-dropzone` — versão maior, borda tracejada,
30
- layout em coluna, pra uma área de soltar mais generosa que o botão
31
- padrão. Combine com `.fs-file-dropzone-hint` pra um texto de apoio
32
- discreto dentro.
33
-
34
- ```html
35
- <div class="fs-file-upload" style="width: 100%;">
36
- <input type="file" class="fs-file-input" id="arquivo2" data-fs="file-drop">
37
- <label for="arquivo2" class="fs-file-label fs-file-label-dropzone">
38
- Arraste um arquivo ou clique para escolher
39
- <span class="fs-file-dropzone-hint">PNG, JPG até 5MB</span>
40
- </label>
41
- </div>
42
- ```
43
-
44
- ## Estados
45
-
46
- - `:disabled` no input — opacidade reduzida, sem interação.
47
- - `:focus` no input — anel de foco na label.
48
- - `.is-dragover` na label — aplicada pelo JS de drag-and-drop enquanto um
49
- arquivo é arrastado por cima (ver API JS).
50
-
51
- ## A11y
52
-
53
- `<input type="file">` nativo — totalmente operável por teclado (`Tab`
54
- foca, `Enter`/`Space` abre o seletor do sistema) sem nenhum JS. O
55
- drag-and-drop é um **complemento**, não uma alternativa obrigatória — quem
56
- usa teclado sempre tem o clique na label como caminho.
57
-
58
- ## API JS
59
-
60
- Drag-and-drop é opcional, via `data-fs="file-drop"` **na `<label>`** (não
61
- no input). `FileDrop.getInstance(labelEl)`.
62
-
63
- | Método | Descrição |
64
- |---|---|
65
- | `dispose()` | Remove os listeners de drag/drop e desregistra a instância. |
66
-
67
- Sem eventos customizados — ao soltar um arquivo, o JS atribui
68
- `inputEl.files` e dispara o evento nativo `change` no input (mesmo evento
69
- de uma seleção manual, então seu código de validação/upload não precisa
70
- saber a diferença).
71
-
72
- ```js
73
- document.getElementById("arquivo2").addEventListener("change", (event) => {
74
- console.log(event.target.files);
75
- });
76
- ```
77
-
78
- ## Tokens
79
-
80
- `--fs-color-border`, `--fs-color-subtle`, `--fs-color-text`,
81
- `--fs-color-muted` (hint), `--fs-color-primary` (borda durante drag-over),
82
- `--fs-radius-sm`.
83
-
84
- ## Exemplo
85
-
86
- Ver acima (Visão geral e Variações) — mockup completo em
87
- [`mockup/forms.html#file-upload`](../../mockup/forms.html#file-upload).
88
-
89
- ## Variante avançada (múltiplos arquivos)
90
-
91
- Pra upload de múltiplos arquivos com preview, progresso e remoção por
92
- item, veja [Upload avançado](file-upload-advanced.md) — evolução deste
93
- componente, reaproveitando a mesma dropzone/botão como gatilho.
package/docs/components/icon-link.md DELETED
@@ -1,13 +0,0 @@
1
- # Icon link
2
-
3
- ## Visão geral
4
-
5
- `.fs-icon-link` alinha um ícone a um link textual.
6
-
7
- ## Estados
8
-
9
- O ícone acompanha o hover do link e respeita redução de movimento.
10
-
11
- ## A11y
12
-
13
- O texto do link deve continuar presente; o ícone decorativo deve usar `aria-hidden="true"`.
package/docs/components/input-group.md DELETED
@@ -1,73 +0,0 @@
1
- # Input Group
2
-
3
- Funde um [Input](input.md) (ou Select, ou Button) com "addons" de texto/
4
- ícone de prefixo/sufixo — 100% CSS, reaproveita os tokens visuais do
5
- próprio `.fs-form-control` (borda, cor, raio).
6
-
7
- ## Visão geral
8
-
9
- ```html
10
- <div class="fs-input-group">
11
- <span class="fs-input-group-text">R$</span>
12
- <input type="number" class="fs-form-control">
13
- </div>
14
- ```
15
-
16
- ## Anatomia
17
-
18
- `.fs-input-group` (flex, `align-items: stretch` — a altura do addon
19
- acompanha a do controle automaticamente) > qualquer combinação de
20
- `.fs-form-control`/`.fs-form-select`/`.fs-btn` + `.fs-input-group-text`
21
- (addon de texto/ícone estático). As bordas dos itens adjacentes se fundem
22
- (sem borda dupla), com o item focado subindo por cima (`z-index`) pra sua
23
- borda de foco não ficar parcialmente escondida atrás do vizinho.
24
-
25
- ## Variações
26
-
27
- Tamanho: `.fs-input-group-sm`, `.fs-input-group-lg` no
28
- `.fs-input-group` — redimensiona **todos** os filhos de uma vez (controle
29
- + addons), não precisa repetir `-sm`/`-lg` em cada um.
30
-
31
- ```html
32
- <div class="fs-input-group fs-input-group-sm">
33
- <span class="fs-input-group-text">@</span>
34
- <input type="text" class="fs-form-control">
35
- </div>
36
- ```
37
-
38
- ## Estados
39
-
40
- Nenhum próprio — herda os estados do `.fs-form-control`/`.fs-form-select`
41
- interno (foco, disabled, validação).
42
-
43
- ## A11y
44
-
45
- O addon (`.fs-input-group-text`) é só visual — se o texto dele for
46
- essencial pra entender o campo (não decorativo), associe ao input via
47
- `aria-describedby` com um `id` no addon, igual a um texto de apoio comum.
48
-
49
- ## API JS
50
-
51
- Nenhuma — 100% CSS.
52
-
53
- ## Tokens
54
-
55
- Os mesmos de [Input](input.md) — `--fs-color-border`,
56
- `--fs-color-surface`, `--fs-color-subtle` (addon), `--fs-color-muted`
57
- (texto do addon), `--fs-radius-sm`.
58
-
59
- ## Exemplo
60
-
61
- ```html
62
- <div class="fs-input-group">
63
- <span class="fs-input-group-text" id="addon-url">https://</span>
64
- <input type="text" class="fs-form-control" aria-describedby="addon-url" placeholder="seusite.com">
65
- </div>
66
-
67
- <div class="fs-input-group">
68
- <input type="text" class="fs-form-control" placeholder="Buscar...">
69
- <button type="button" class="fs-btn">Buscar</button>
70
- </div>
71
- ```
72
-
73
- Mockup: [laboratório do componente](../../mockup/forms.html#input-group).
package/docs/components/input.md DELETED
@@ -1,90 +0,0 @@
1
- # Input
2
-
3
- Campos de formulário de texto — 100% CSS, sobre elementos nativos
4
- (`<input>`, `<textarea>`, `<select>`). Ver também
5
- [Checkbox](checkbox.md)/[Radio](radio.md)/[Switch](switch.md) para
6
- controles booleanos, e [Select customizado](select.md) para um `<select>`
7
- com dropdown estilizado.
8
-
9
- ## Visão geral
10
-
11
- ```html
12
- <div class="fs-form-col">
13
- <label for="nome" class="fs-form-label">Nome completo</label>
14
- <input type="text" class="fs-form-control" id="nome" placeholder="Seu nome">
15
- </div>
16
- ```
17
-
18
- ## Anatomia
19
-
20
- - `.fs-form-control` — em `<input>`/`<textarea>`.
21
- - `.fs-form-select` — versão estática (sem JS) de um `<select>`
22
- estilizado apenas visualmente com uma seta; para dropdown customizado
23
- completo, ver [Select](select.md).
24
- - `.fs-form-label` — rótulo (associe via `for`/`id`).
25
- - `.fs-form-text` — texto de apoio, sempre visível.
26
- - `.fs-valid-feedback`/`.fs-invalid-feedback` — texto de apoio que só
27
- aparece quando o input tem `.is-valid`/`.is-invalid` (via combinador de
28
- irmãos gerais `~` — precisam estar depois do input no DOM).
29
- - `.fs-form-row`/`.fs-form-col` — helpers de layout (linha/coluna) pra
30
- organizar label + campo + texto de apoio.
31
-
32
- ```html
33
- <div class="fs-form-col">
34
- <label for="email" class="fs-form-label">E-mail</label>
35
- <input type="email" class="fs-form-control is-invalid" id="email">
36
- <div class="fs-invalid-feedback">E-mail inválido.</div>
37
- </div>
38
- ```
39
-
40
- ## Variações
41
-
42
- - **Tamanho**: `.fs-form-control-sm`, `.fs-form-control-lg` (idem para
43
- `.fs-form-select`); sem sufixo = 38px de altura.
44
- - **Largura**: `.fs-form-size-{sm|md|lg|xl|xxl}` — larguras fixas
45
- (120px–360px) pra campos que não devem esticar 100%.
46
-
47
- ```html
48
- <input type="text" class="fs-form-control fs-form-control-sm fs-form-size-sm">
49
- ```
50
-
51
- ## Estados
52
-
53
- - `:focus` — anel de foco (mixin `focus-ring`).
54
- - `:disabled` — cor muted, fundo sutil, opacidade reduzida.
55
- - `:read-only` — fundo sutil, cursor padrão (não indica edição).
56
- - `.is-valid`/`.is-invalid` — borda verde/vermelha + ativa o
57
- `.fs-valid-feedback`/`.fs-invalid-feedback` correspondente.
58
-
59
- ## A11y
60
-
61
- - Sempre associe `.fs-form-label` ao campo via `for`/`id`.
62
- - Associe o texto de apoio (`.fs-form-text`, `.fs-valid-feedback`) ao
63
- campo via `aria-describedby` — não é automático (o `id` do texto de
64
- apoio é definido por você).
65
- - `.fs-form-select` estático não tem teclado/ARIA customizados — é a
66
- aparência de um `<select>` nativo real, herda tudo do navegador.
67
-
68
- ## API JS
69
-
70
- Nenhuma — 100% CSS. Para o `<select>` com dropdown customizado (JS), ver
71
- [Select](select.md).
72
-
73
- ## Tokens
74
-
75
- `--fs-color-border`, `--fs-color-surface`, `--fs-color-text`,
76
- `--fs-color-muted`, `--fs-color-subtle` (disabled/read-only),
77
- `--fs-color-success`/`--fs-color-danger` (validação), `--fs-radius-sm`.
78
-
79
- ## Exemplo
80
-
81
- ```html
82
- <div class="fs-form-col">
83
- <label for="senha" class="fs-form-label">Senha</label>
84
- <input type="password" class="fs-form-control is-valid" id="senha" aria-describedby="senha-ok">
85
- <div class="fs-valid-feedback" id="senha-ok">Senha forte.</div>
86
- </div>
87
- ```
88
-
89
- Mockups: [`mockup/forms.html#input`](../../mockup/forms.html#input),
90
- [`mockup/foundations.html#layout`](../../mockup/forms.html#input).
package/docs/components/list-group.md DELETED
@@ -1,13 +0,0 @@
1
- # List group
2
-
3
- ## Visão geral
4
-
5
- `.fs-list-group` e `.fs-list-group-item` compõem listas de navegação ou seleção.
6
-
7
- ## Estados
8
-
9
- Use `.is-active` para o item atual e elementos `a` ou `button` para itens interativos.
10
-
11
- ## A11y
12
-
13
- Escolha uma lista semântica e forneça nome ao grupo quando ele representar uma região.