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/docs/components/divider.md DELETED
@@ -1,57 +0,0 @@
1
- # Divider
2
-
3
- Linha divisória, 100% CSS — traço simples ou com rótulo centralizado.
4
-
5
- ## Visão geral
6
-
7
- ```html
8
- <hr class="fs-divider">
9
-
10
- <div class="fs-divider"><span class="fs-divider-label">ou</span></div>
11
- ```
12
-
13
- ## Anatomia
14
-
15
- Duas formas, conforme o elemento:
16
-
17
- - `<hr class="fs-divider">` — traço simples, uma linha (`<hr>` não aceita
18
- filhos).
19
- - `<div class="fs-divider">` com `.fs-divider-label` dentro — texto
20
- centralizado, flanqueado por duas linhas desenhadas via
21
- `::before`/`::after` (precisa ser `<div>`, não `<hr>`, por causa do
22
- filho).
23
-
24
- ## Variações
25
-
26
- Nenhuma — sem cor, tamanho ou orientação alternativa.
27
-
28
- ## Estados
29
-
30
- Nenhum — elemento estático.
31
-
32
- ## A11y
33
-
34
- `<hr>` já tem `role="separator"` implícito. Na variante com `<div>`, se a
35
- separação for só visual (não estrutural), não precisa de role extra; se
36
- divide seções de conteúdo distintas, considere `role="separator"`
37
- explícito.
38
-
39
- ## API JS
40
-
41
- Nenhuma — 100% CSS.
42
-
43
- ## Tokens
44
-
45
- `--fs-color-border`, `--fs-color-muted` (texto do label).
46
-
47
- ## Exemplo
48
-
49
- ```html
50
- <p>Conteúdo acima.</p>
51
- <hr class="fs-divider">
52
- <p>Conteúdo abaixo.</p>
53
-
54
- <div class="fs-divider"><span class="fs-divider-label">ou entre com</span></div>
55
- ```
56
-
57
- Mockup: [laboratório do componente](../../mockup/foundations.html#divider).
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.