fokus-styles 2.5.0 → 2.6.1
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.
- package/README.md +20 -2
- package/package.json +19 -16
- package/packages/fokus-cli/README.md +5 -0
- package/packages/fokus-icons/README.md +5 -0
- package/packages/fokus-react/README.md +5 -0
- package/CHANGELOG.md +0 -940
- package/dist/css/components.css.map +0 -1
- package/dist/css/components.min.css.map +0 -1
- package/dist/css/fokus-components.css.map +0 -1
- package/dist/css/fokus-components.min.css.map +0 -1
- package/dist/css/fokus-core.css.map +0 -1
- package/dist/css/fokus-core.min.css.map +0 -1
- package/dist/css/fokus-dark.css.map +0 -1
- package/dist/css/fokus-dark.min.css.map +0 -1
- package/dist/css/fokus-rtl.css.map +0 -1
- package/dist/css/fokus-rtl.min.css.map +0 -1
- package/dist/css/fokus-utilities.css.map +0 -1
- package/dist/css/fokus-utilities.min.css.map +0 -1
- package/dist/css/fokus.css.map +0 -1
- package/dist/css/fokus.min.css.map +0 -1
- package/dist/css/fonts.css.map +0 -1
- package/dist/css/fonts.min.css.map +0 -1
- package/dist/css/forms.css.map +0 -1
- package/dist/css/forms.min.css.map +0 -1
- package/dist/css/helpers.css.map +0 -1
- package/dist/css/helpers.min.css.map +0 -1
- package/dist/css/layout.css.map +0 -1
- package/dist/css/layout.min.css.map +0 -1
- package/dist/js/fokus.js.map +0 -7
- package/dist/js/fokus.min.js.map +0 -7
- package/docs/README.md +0 -86
- package/docs/comparison.md +0 -124
- package/docs/components/accordion.md +0 -104
- package/docs/components/alert-dialog.md +0 -99
- package/docs/components/alert.md +0 -104
- package/docs/components/avatar.md +0 -13
- package/docs/components/badge.md +0 -101
- package/docs/components/breadcrumb.md +0 -93
- package/docs/components/button-group.md +0 -13
- package/docs/components/button.md +0 -98
- package/docs/components/card.md +0 -111
- package/docs/components/carousel.md +0 -167
- package/docs/components/checkbox.md +0 -110
- package/docs/components/close-button.md +0 -13
- package/docs/components/code.md +0 -13
- package/docs/components/collapse.md +0 -78
- package/docs/components/combobox.md +0 -123
- package/docs/components/command-palette.md +0 -131
- package/docs/components/datatable.md +0 -173
- package/docs/components/datepicker.md +0 -137
- package/docs/components/divider.md +0 -57
- package/docs/components/dropdown.md +0 -103
- package/docs/components/empty-state.md +0 -65
- package/docs/components/file-upload-advanced.md +0 -116
- package/docs/components/file-upload.md +0 -93
- package/docs/components/icon-link.md +0 -13
- package/docs/components/input-group.md +0 -73
- package/docs/components/input.md +0 -90
- package/docs/components/list-group.md +0 -13
- package/docs/components/modal.md +0 -120
- package/docs/components/navbar.md +0 -74
- package/docs/components/nested-menu.md +0 -90
- package/docs/components/notification-center.md +0 -116
- package/docs/components/offcanvas.md +0 -102
- package/docs/components/pagination.md +0 -145
- package/docs/components/placeholder.md +0 -13
- package/docs/components/popover.md +0 -118
- package/docs/components/progress.md +0 -126
- package/docs/components/radio.md +0 -80
- package/docs/components/range.md +0 -83
- package/docs/components/rating.md +0 -91
- package/docs/components/ratio.md +0 -13
- package/docs/components/responsive.md +0 -19
- package/docs/components/scrollspy.md +0 -13
- package/docs/components/segmented-control.md +0 -82
- package/docs/components/select.md +0 -89
- package/docs/components/skeleton.md +0 -70
- package/docs/components/stepper.md +0 -107
- package/docs/components/switch.md +0 -97
- package/docs/components/table.md +0 -90
- package/docs/components/tabs.md +0 -104
- package/docs/components/tag.md +0 -144
- package/docs/components/tile.md +0 -112
- package/docs/components/timeline.md +0 -78
- package/docs/components/toast.md +0 -108
- package/docs/components/tooltip.md +0 -113
- package/docs/components/tree-view.md +0 -118
- package/docs/contributing/contributing.md +0 -18
- package/docs/getting-started/installation.md +0 -70
- package/docs/getting-started/usage.md +0 -105
- package/docs/guides/accessibility.md +0 -109
- package/docs/guides/charts.md +0 -73
- package/docs/guides/dark-mode.md +0 -90
- package/docs/guides/icons.md +0 -99
- package/docs/guides/javascript-api.md +0 -9
- package/docs/guides/layout-advanced.md +0 -118
- package/docs/guides/migration-clarus-to-fokus.md +0 -48
- package/docs/guides/migration-external.md +0 -123
- package/docs/guides/migration-v1.md +0 -63
- package/docs/guides/print.md +0 -30
- package/docs/guides/rtl-and-system-preferences.md +0 -28
- package/docs/guides/theming.md +0 -140
- package/docs/guides/utility-api.md +0 -9
- package/docs/prompts/prompt-plan.md +0 -45
- package/docs/reference/accessibility-matrix.md +0 -77
- package/docs/reference/browser-support.md +0 -75
- package/docs/reference/contrast-report.md +0 -54
- package/docs/reference/definitions.md +0 -868
- package/docs/reference/design-tokens.md +0 -208
- package/docs/reference/scss-architecture.md +0 -227
- package/docs/reference/size-baseline.json +0 -34
- package/docs/reference/stability.md +0 -89
- package/docs/showcase.md +0 -25
- package/mockup/README.md +0 -41
- package/mockup/assets/carousel-planning.png +0 -0
- package/mockup/assets/carousel-workspace.png +0 -0
- package/mockup/assets/example-theme.css +0 -19
- package/mockup/assets/example-theme.js +0 -11
- package/mockup/assets/showcase-contracts.js +0 -84
- package/mockup/assets/showcase.css +0 -91
- package/mockup/assets/showcase.js +0 -724
- package/mockup/content-data.html +0 -9
- package/mockup/examples/accordion-tabs-toast.html +0 -149
- package/mockup/examples/alert-dialog.html +0 -84
- package/mockup/examples/alerts.html +0 -115
- package/mockup/examples/badges-alerts.html +0 -109
- package/mockup/examples/buttons.html +0 -58
- package/mockup/examples/cards.html +0 -132
- package/mockup/examples/carousel.html +0 -126
- package/mockup/examples/charts.html +0 -102
- package/mockup/examples/check-radio-switch.html +0 -620
- package/mockup/examples/collapse.html +0 -69
- package/mockup/examples/combobox.html +0 -60
- package/mockup/examples/command-palette.html +0 -64
- package/mockup/examples/datatable.html +0 -113
- package/mockup/examples/datepicker.html +0 -62
- package/mockup/examples/divider.html +0 -45
- package/mockup/examples/dropdown-tooltip.html +0 -77
- package/mockup/examples/empty-state.html +0 -56
- package/mockup/examples/file-drop.html +0 -74
- package/mockup/examples/file-upload-advanced.html +0 -68
- package/mockup/examples/forms-advanced.html +0 -77
- package/mockup/examples/hover-card.html +0 -86
- package/mockup/examples/icons.html +0 -157
- package/mockup/examples/input-group.html +0 -74
- package/mockup/examples/js-foundation.html +0 -215
- package/mockup/examples/layout.html +0 -134
- package/mockup/examples/modal-select.html +0 -127
- package/mockup/examples/nested-menu.html +0 -73
- package/mockup/examples/notification-center.html +0 -86
- package/mockup/examples/offcanvas-popover.html +0 -133
- package/mockup/examples/pagination-breadcrumbs.html +0 -92
- package/mockup/examples/popover.html +0 -81
- package/mockup/examples/range.html +0 -69
- package/mockup/examples/rating.html +0 -103
- package/mockup/examples/segmented-control.html +0 -96
- package/mockup/examples/skeletons.html +0 -82
- package/mockup/examples/spinner-progress.html +0 -130
- package/mockup/examples/stepper.html +0 -119
- package/mockup/examples/tables-navbar.html +0 -89
- package/mockup/examples/tag.html +0 -115
- package/mockup/examples/theming.html +0 -68
- package/mockup/examples/tile.html +0 -107
- package/mockup/examples/timeline.html +0 -108
- package/mockup/examples/toast.html +0 -113
- package/mockup/examples/tooltip.html +0 -68
- package/mockup/examples/tree-view.html +0 -68
- package/mockup/feedback-actions.html +0 -9
- package/mockup/forms.html +0 -13
- package/mockup/foundations.html +0 -7
- package/mockup/kitchen-sink.html +0 -696
- package/mockup/navigation-disclosure.html +0 -11
- package/mockup/overlays-commands.html +0 -12
- package/mockup/templates/README.md +0 -20
- package/mockup/templates/admin.html +0 -334
- package/mockup/templates/auth.html +0 -234
- package/mockup/templates/dashboard.html +0 -442
- package/mockup/templates/landing.html +0 -397
- package/packages/fokus-icons/package.json +0 -46
- package/scripts/migrate-fokus-map.json +0 -1366
- package/scripts/migrate-fokus.mjs +0 -97
|
@@ -1,620 +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 — Check, Radio e Switch</title>
|
|
7
|
-
|
|
8
|
-
<link rel="stylesheet" href="../../dist/css/fonts.css">
|
|
9
|
-
<link rel="stylesheet" href="../../dist/css/components.css">
|
|
10
|
-
<link rel="stylesheet" href="../../dist/css/forms.css">
|
|
11
|
-
<link rel="stylesheet" href="../../dist/css/helpers.css">
|
|
12
|
-
<link rel="stylesheet" href="../assets/example-theme.css">
|
|
13
|
-
<script src="../assets/example-theme.js"></script>
|
|
14
|
-
|
|
15
|
-
<style>
|
|
16
|
-
:root {
|
|
17
|
-
--demo-max-width: 1080px;
|
|
18
|
-
--demo-panel-bg: var(--fs-color-surface);
|
|
19
|
-
--demo-soft-bg: var(--fs-color-subtle);
|
|
20
|
-
--demo-panel-border: var(--fs-color-border);
|
|
21
|
-
--demo-accent: var(--fs-color-primary);
|
|
22
|
-
--demo-code-bg: var(--fs-color-bg-subtle);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
* { box-sizing: border-box; }
|
|
26
|
-
|
|
27
|
-
body {
|
|
28
|
-
min-block-size: 100vh;
|
|
29
|
-
margin: 0;
|
|
30
|
-
color: var(--fs-color-text);
|
|
31
|
-
background: var(--fs-color-bg-subtle);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.demo-page {
|
|
35
|
-
max-inline-size: var(--demo-max-width);
|
|
36
|
-
margin-inline: auto;
|
|
37
|
-
padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 40px) 64px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.demo-hero {
|
|
41
|
-
display: grid;
|
|
42
|
-
grid-template-columns: minmax(0, 1fr) auto;
|
|
43
|
-
align-items: end;
|
|
44
|
-
gap: 24px;
|
|
45
|
-
margin-block-end: 32px;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.demo-eyebrow {
|
|
49
|
-
margin: 0 0 8px;
|
|
50
|
-
color: var(--demo-accent);
|
|
51
|
-
font-size: 0.75rem;
|
|
52
|
-
font-weight: 700;
|
|
53
|
-
letter-spacing: 0.08em;
|
|
54
|
-
text-transform: uppercase;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
html[data-fs-theme="dark"] .demo-eyebrow {
|
|
58
|
-
color: var(--fs-color-text);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.demo-title {
|
|
62
|
-
max-inline-size: 760px;
|
|
63
|
-
margin: 0;
|
|
64
|
-
font-size: clamp(2rem, 4vw, 3.5rem);
|
|
65
|
-
line-height: 1.05;
|
|
66
|
-
letter-spacing: -0.04em;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.demo-lead {
|
|
70
|
-
max-inline-size: 720px;
|
|
71
|
-
margin: 16px 0 0;
|
|
72
|
-
color: var(--fs-color-muted);
|
|
73
|
-
font-size: 1.05rem;
|
|
74
|
-
line-height: 1.6;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.demo-badge-row,
|
|
78
|
-
.demo-action-row,
|
|
79
|
-
.demo-chip-row {
|
|
80
|
-
display: flex;
|
|
81
|
-
flex-wrap: wrap;
|
|
82
|
-
align-items: center;
|
|
83
|
-
gap: 8px;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.demo-badge-row { margin-block-start: 20px; }
|
|
87
|
-
|
|
88
|
-
.demo-toolbar {
|
|
89
|
-
display: flex;
|
|
90
|
-
flex-wrap: wrap;
|
|
91
|
-
justify-content: space-between;
|
|
92
|
-
gap: 12px;
|
|
93
|
-
margin-block: 24px;
|
|
94
|
-
padding: 12px;
|
|
95
|
-
border: var(--fs-border-width) solid var(--demo-panel-border);
|
|
96
|
-
border-radius: var(--fs-radius-md);
|
|
97
|
-
background: var(--demo-panel-bg);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.demo-section { margin-block-start: 32px; }
|
|
101
|
-
|
|
102
|
-
.demo-section-heading {
|
|
103
|
-
display: flex;
|
|
104
|
-
flex-wrap: wrap;
|
|
105
|
-
align-items: end;
|
|
106
|
-
justify-content: space-between;
|
|
107
|
-
gap: 12px;
|
|
108
|
-
margin-block-end: 14px;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.demo-section-heading h2,
|
|
112
|
-
.demo-card h3 { margin: 0; }
|
|
113
|
-
|
|
114
|
-
.demo-section-heading p,
|
|
115
|
-
.demo-card p { color: var(--fs-color-muted); }
|
|
116
|
-
|
|
117
|
-
.demo-section-heading p {
|
|
118
|
-
max-inline-size: 620px;
|
|
119
|
-
margin: 0;
|
|
120
|
-
font-size: 0.9rem;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.demo-grid {
|
|
124
|
-
display: grid;
|
|
125
|
-
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
126
|
-
gap: 16px;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.demo-card,
|
|
130
|
-
.demo-playground,
|
|
131
|
-
.demo-reference {
|
|
132
|
-
border: var(--fs-border-width) solid var(--demo-panel-border);
|
|
133
|
-
border-radius: var(--fs-radius-md);
|
|
134
|
-
background: var(--demo-panel-bg);
|
|
135
|
-
box-shadow: var(--fs-shadow-sm);
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.demo-card {
|
|
139
|
-
display: flex;
|
|
140
|
-
flex-direction: column;
|
|
141
|
-
gap: 12px;
|
|
142
|
-
min-block-size: 170px;
|
|
143
|
-
padding: 20px;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.demo-card p {
|
|
147
|
-
margin: 0;
|
|
148
|
-
font-size: 0.9rem;
|
|
149
|
-
line-height: 1.55;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.demo-card-icon {
|
|
153
|
-
display: grid;
|
|
154
|
-
place-items: center;
|
|
155
|
-
inline-size: 36px;
|
|
156
|
-
block-size: 36px;
|
|
157
|
-
border-radius: 50%;
|
|
158
|
-
color: var(--fs-color-on-primary);
|
|
159
|
-
background: var(--demo-accent);
|
|
160
|
-
font-size: 0.8rem;
|
|
161
|
-
font-weight: 700;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
.demo-playground { padding: clamp(18px, 3vw, 32px); }
|
|
165
|
-
|
|
166
|
-
.demo-playground-grid {
|
|
167
|
-
display: grid;
|
|
168
|
-
grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
|
|
169
|
-
gap: 28px;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.demo-demo-area { display: grid; gap: 22px; }
|
|
173
|
-
|
|
174
|
-
.demo-demo-group {
|
|
175
|
-
display: grid;
|
|
176
|
-
gap: 10px;
|
|
177
|
-
padding-block-end: 20px;
|
|
178
|
-
border-block-end: var(--fs-border-width) solid var(--demo-panel-border);
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.demo-demo-group:last-child {
|
|
182
|
-
padding-block-end: 0;
|
|
183
|
-
border-block-end: 0;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.demo-demo-group h3 { margin: 0; font-size: 0.95rem; }
|
|
187
|
-
|
|
188
|
-
.demo-demo-group > p {
|
|
189
|
-
margin: -4px 0 2px;
|
|
190
|
-
color: var(--fs-color-muted);
|
|
191
|
-
font-size: 0.82rem;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.demo-control-grid {
|
|
195
|
-
display: grid;
|
|
196
|
-
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
197
|
-
gap: 12px 20px;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
.demo-control-grid .fs-check,
|
|
201
|
-
.demo-control-grid .fs-radio,
|
|
202
|
-
.demo-control-grid .fs-switch { min-inline-size: 0; }
|
|
203
|
-
|
|
204
|
-
.demo-fieldset { display: grid; gap: 10px; }
|
|
205
|
-
|
|
206
|
-
.demo-fieldset .fs-form-text,
|
|
207
|
-
.demo-fieldset .fs-invalid-feedback { margin: 0; }
|
|
208
|
-
|
|
209
|
-
.demo-status {
|
|
210
|
-
display: grid;
|
|
211
|
-
align-content: start;
|
|
212
|
-
gap: 16px;
|
|
213
|
-
padding: 20px;
|
|
214
|
-
border-radius: var(--fs-radius-md);
|
|
215
|
-
background: var(--demo-soft-bg);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.demo-status h3 { margin: 0; font-size: 1rem; }
|
|
219
|
-
|
|
220
|
-
.demo-status p {
|
|
221
|
-
margin: 0;
|
|
222
|
-
color: var(--fs-color-muted);
|
|
223
|
-
font-size: 0.85rem;
|
|
224
|
-
line-height: 1.5;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
.demo-status .demo-status-output {
|
|
228
|
-
min-block-size: 48px;
|
|
229
|
-
padding: 12px;
|
|
230
|
-
border-inline-start: 3px solid var(--demo-accent);
|
|
231
|
-
color: var(--fs-color-text);
|
|
232
|
-
background: var(--demo-panel-bg);
|
|
233
|
-
font-size: 0.85rem;
|
|
234
|
-
line-height: 1.45;
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
.demo-code {
|
|
238
|
-
overflow-x: auto;
|
|
239
|
-
margin: 0;
|
|
240
|
-
padding: 16px;
|
|
241
|
-
border: var(--fs-border-width) solid var(--demo-panel-border);
|
|
242
|
-
border-radius: var(--fs-radius-sm);
|
|
243
|
-
color: var(--fs-color-text);
|
|
244
|
-
background: var(--demo-code-bg);
|
|
245
|
-
font-size: 0.78rem;
|
|
246
|
-
line-height: 1.6;
|
|
247
|
-
tab-size: 2;
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
.demo-reference {
|
|
251
|
-
display: grid;
|
|
252
|
-
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
253
|
-
gap: 24px;
|
|
254
|
-
padding: clamp(18px, 3vw, 28px);
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.demo-reference h2 { margin: 0 0 10px; font-size: 1.1rem; }
|
|
258
|
-
|
|
259
|
-
.demo-reference ul {
|
|
260
|
-
display: grid;
|
|
261
|
-
gap: 8px;
|
|
262
|
-
margin: 0;
|
|
263
|
-
padding-inline-start: 20px;
|
|
264
|
-
color: var(--fs-color-muted);
|
|
265
|
-
font-size: 0.88rem;
|
|
266
|
-
line-height: 1.5;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
.demo-note {
|
|
270
|
-
margin-block-start: 12px;
|
|
271
|
-
padding: 12px 14px;
|
|
272
|
-
border-radius: var(--fs-radius-sm);
|
|
273
|
-
color: var(--fs-alert-info-text);
|
|
274
|
-
background: var(--fs-alert-info-bg);
|
|
275
|
-
font-size: 0.84rem;
|
|
276
|
-
line-height: 1.5;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
.demo-touch-area {
|
|
280
|
-
display: inline-flex;
|
|
281
|
-
align-items: center;
|
|
282
|
-
min-block-size: 44px;
|
|
283
|
-
padding: 6px 10px;
|
|
284
|
-
border: var(--fs-border-width) dashed var(--demo-panel-border);
|
|
285
|
-
border-radius: var(--fs-radius-sm);
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
.demo-switch-sample {
|
|
289
|
-
display: grid;
|
|
290
|
-
gap: 8px;
|
|
291
|
-
padding: 16px;
|
|
292
|
-
border: var(--fs-border-width) solid var(--demo-panel-border);
|
|
293
|
-
border-radius: var(--fs-radius-sm);
|
|
294
|
-
background: var(--demo-soft-bg);
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
.demo-switch-sample > p {
|
|
298
|
-
margin: 0;
|
|
299
|
-
color: var(--fs-color-muted);
|
|
300
|
-
font-size: 0.8rem;
|
|
301
|
-
line-height: 1.45;
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
.demo-switch-sample .fs-switch {
|
|
305
|
-
align-items: flex-start;
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
.demo-visible-feedback {
|
|
309
|
-
display: block;
|
|
310
|
-
min-block-size: auto;
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
@media (max-width: 760px) {
|
|
314
|
-
.demo-hero,
|
|
315
|
-
.demo-playground-grid,
|
|
316
|
-
.demo-reference { grid-template-columns: 1fr; }
|
|
317
|
-
|
|
318
|
-
.demo-hero { align-items: start; }
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
@media (max-width: 480px) {
|
|
322
|
-
.demo-page { padding-inline: 12px; }
|
|
323
|
-
.demo-control-grid,
|
|
324
|
-
.demo-grid { grid-template-columns: 1fr; }
|
|
325
|
-
.demo-toolbar .fs-btn { flex: 1 1 100%; }
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
@media (prefers-reduced-motion: reduce) {
|
|
329
|
-
*, *::before, *::after { scroll-behavior: auto; }
|
|
330
|
-
}
|
|
331
|
-
</style>
|
|
332
|
-
</head>
|
|
333
|
-
<body>
|
|
334
|
-
<main class="demo-page">
|
|
335
|
-
<header class="demo-hero">
|
|
336
|
-
<div>
|
|
337
|
-
<p class="demo-eyebrow">Fokus Styles · controles nativos</p>
|
|
338
|
-
<h1 class="demo-title">Check, Radio e Switch</h1>
|
|
339
|
-
<p class="demo-lead">Uma página de demonstração para explorar estados, tamanhos, validação e acessibilidade dos controles de seleção — com o comportamento nativo do navegador preservado.</p>
|
|
340
|
-
<div class="demo-badge-row" aria-label="Características demonstradas">
|
|
341
|
-
<span class="fs-badge fs-badge-soft-primary">CSS-only</span>
|
|
342
|
-
<span class="fs-badge fs-badge-soft-success">Acessível</span>
|
|
343
|
-
<span class="fs-badge fs-badge-outline-primary">Responsivo</span>
|
|
344
|
-
</div>
|
|
345
|
-
</div>
|
|
346
|
-
<div class="demo-chip-row" aria-label="Escopos disponíveis">
|
|
347
|
-
<span class="fs-badge fs-badge-dot fs-badge-soft-success">Pronto para uso</span>
|
|
348
|
-
</div>
|
|
349
|
-
</header>
|
|
350
|
-
|
|
351
|
-
<div class="demo-toolbar" aria-label="Ferramentas da demonstração">
|
|
352
|
-
<div class="demo-action-row">
|
|
353
|
-
<button class="fs-btn fs-btn-primary fs-btn-sm" type="button" id="reset-demo">Restaurar demonstração</button>
|
|
354
|
-
<button class="fs-btn fs-btn-outline-primary fs-btn-sm" type="button" id="toggle-direction" aria-pressed="false">Testar RTL</button>
|
|
355
|
-
</div>
|
|
356
|
-
<span class="fs-form-text">Use Tab, Espaço e as setas para testar a interação.</span>
|
|
357
|
-
</div>
|
|
358
|
-
|
|
359
|
-
<section class="demo-section" aria-labelledby="why-title">
|
|
360
|
-
<div class="demo-section-heading">
|
|
361
|
-
<div>
|
|
362
|
-
<h2 id="why-title">Escolha o controle certo</h2>
|
|
363
|
-
<p>A aparência muda conforme o estado, mas o HTML continua simples, previsível e compatível com teclado e tecnologias assistivas.</p>
|
|
364
|
-
</div>
|
|
365
|
-
</div>
|
|
366
|
-
<div class="demo-grid">
|
|
367
|
-
<article class="demo-card">
|
|
368
|
-
<span class="demo-card-icon" aria-hidden="true">✓</span>
|
|
369
|
-
<h3>Checkbox</h3>
|
|
370
|
-
<p>Para opções independentes, como aceitar termos ou selecionar vários filtros.</p>
|
|
371
|
-
<span class="fs-badge fs-badge-soft-primary">múltipla escolha</span>
|
|
372
|
-
</article>
|
|
373
|
-
<article class="demo-card">
|
|
374
|
-
<span class="demo-card-icon" aria-hidden="true">○</span>
|
|
375
|
-
<h3>Radio</h3>
|
|
376
|
-
<p>Para escolher uma única alternativa dentro de um grupo nomeado.</p>
|
|
377
|
-
<span class="fs-badge fs-badge-soft-primary">escolha única</span>
|
|
378
|
-
</article>
|
|
379
|
-
<article class="demo-card">
|
|
380
|
-
<span class="demo-card-icon" aria-hidden="true">—</span>
|
|
381
|
-
<h3>Switch</h3>
|
|
382
|
-
<p>Para preferências que podem ser ligadas ou desligadas imediatamente.</p>
|
|
383
|
-
<span class="fs-badge fs-badge-soft-primary">estado imediato</span>
|
|
384
|
-
</article>
|
|
385
|
-
</div>
|
|
386
|
-
</section>
|
|
387
|
-
|
|
388
|
-
<section class="demo-section" aria-labelledby="playground-title">
|
|
389
|
-
<div class="demo-section-heading">
|
|
390
|
-
<div>
|
|
391
|
-
<h2 id="playground-title">Laboratório interativo</h2>
|
|
392
|
-
<p>Altere os controles e observe os estados aplicados sem JavaScript para o comportamento de seleção.</p>
|
|
393
|
-
</div>
|
|
394
|
-
<span class="fs-badge fs-badge-outline-success">ao vivo</span>
|
|
395
|
-
</div>
|
|
396
|
-
|
|
397
|
-
<div class="demo-playground">
|
|
398
|
-
<div class="demo-playground-grid">
|
|
399
|
-
<div class="demo-demo-area">
|
|
400
|
-
<div class="demo-demo-group">
|
|
401
|
-
<h3>Checkbox · seleção e validação</h3>
|
|
402
|
-
<p>O terceiro item começa indeterminado; o último demonstra uma mensagem associada.</p>
|
|
403
|
-
<div class="demo-control-grid">
|
|
404
|
-
<div class="fs-check">
|
|
405
|
-
<input type="checkbox" class="fs-check-input" id="demo-check-unchecked">
|
|
406
|
-
<label for="demo-check-unchecked" class="fs-check-label">Não marcado</label>
|
|
407
|
-
</div>
|
|
408
|
-
<div class="fs-check">
|
|
409
|
-
<input type="checkbox" class="fs-check-input" id="demo-check-checked" checked>
|
|
410
|
-
<label for="demo-check-checked" class="fs-check-label">Marcado</label>
|
|
411
|
-
</div>
|
|
412
|
-
<div class="fs-check">
|
|
413
|
-
<input type="checkbox" class="fs-check-input" id="demo-check-indeterminate">
|
|
414
|
-
<label for="demo-check-indeterminate" class="fs-check-label">Indeterminado</label>
|
|
415
|
-
</div>
|
|
416
|
-
<div class="fs-check">
|
|
417
|
-
<input type="checkbox" class="fs-check-input" id="demo-check-disabled" disabled>
|
|
418
|
-
<label for="demo-check-disabled" class="fs-check-label">Desabilitado</label>
|
|
419
|
-
</div>
|
|
420
|
-
<div class="fs-check fs-check-invalid-demo">
|
|
421
|
-
<input type="checkbox" class="fs-check-input is-invalid" id="demo-check-invalid" aria-invalid="true" aria-describedby="demo-check-error">
|
|
422
|
-
<label for="demo-check-invalid" class="fs-check-label">Com erro</label>
|
|
423
|
-
<div class="fs-invalid-feedback" id="demo-check-error">Escolha uma opção para continuar.</div>
|
|
424
|
-
</div>
|
|
425
|
-
</div>
|
|
426
|
-
</div>
|
|
427
|
-
|
|
428
|
-
<div class="demo-demo-group">
|
|
429
|
-
<h3>Radio · grupo semântico</h3>
|
|
430
|
-
<fieldset class="fs-form-fieldset demo-fieldset" id="demo-radio-fieldset">
|
|
431
|
-
<legend class="fs-form-label">Formato de entrega</legend>
|
|
432
|
-
<p class="fs-form-text" id="demo-radio-help">Escolha uma opção. Use as setas quando o grupo estiver focado.</p>
|
|
433
|
-
<div class="fs-radio">
|
|
434
|
-
<input type="radio" name="demo-delivery" class="fs-radio-input" id="demo-radio-email" value="email" aria-describedby="demo-radio-help" checked>
|
|
435
|
-
<label for="demo-radio-email" class="fs-radio-label">E-mail — envio imediato</label>
|
|
436
|
-
</div>
|
|
437
|
-
<div class="fs-radio">
|
|
438
|
-
<input type="radio" name="demo-delivery" class="fs-radio-input" id="demo-radio-download" value="download" aria-describedby="demo-radio-help">
|
|
439
|
-
<label for="demo-radio-download" class="fs-radio-label">Download — arquivo compactado</label>
|
|
440
|
-
</div>
|
|
441
|
-
<div class="fs-radio">
|
|
442
|
-
<input type="radio" name="demo-delivery" class="fs-radio-input" id="demo-radio-disabled" disabled>
|
|
443
|
-
<label for="demo-radio-disabled" class="fs-radio-label">Correio — temporariamente indisponível</label>
|
|
444
|
-
</div>
|
|
445
|
-
</fieldset>
|
|
446
|
-
</div>
|
|
447
|
-
|
|
448
|
-
<div class="demo-demo-group">
|
|
449
|
-
<h3>Switch · preferências imediatas</h3>
|
|
450
|
-
<p>O controle permanece um checkbox nativo; não é necessário adicionar <code>role="switch"</code>.</p>
|
|
451
|
-
<div class="demo-control-grid">
|
|
452
|
-
<div class="fs-switch">
|
|
453
|
-
<input type="checkbox" class="fs-switch-input" id="demo-switch-off">
|
|
454
|
-
<label for="demo-switch-off" class="fs-switch-label">Notificações desligadas</label>
|
|
455
|
-
</div>
|
|
456
|
-
<div class="fs-switch">
|
|
457
|
-
<input type="checkbox" class="fs-switch-input" id="demo-switch-on" checked>
|
|
458
|
-
<label for="demo-switch-on" class="fs-switch-label">Modo compacto ligado</label>
|
|
459
|
-
</div>
|
|
460
|
-
<div class="fs-switch">
|
|
461
|
-
<input type="checkbox" class="fs-switch-input" id="demo-switch-disabled" disabled checked>
|
|
462
|
-
<label for="demo-switch-disabled" class="fs-switch-label">Sincronização bloqueada</label>
|
|
463
|
-
</div>
|
|
464
|
-
<div class="fs-switch">
|
|
465
|
-
<input type="checkbox" class="fs-switch-input" id="demo-switch-no-label" aria-label="Ativar modo silencioso">
|
|
466
|
-
<label for="demo-switch-no-label" class="fs-switch-label"></label>
|
|
467
|
-
</div>
|
|
468
|
-
</div>
|
|
469
|
-
</div>
|
|
470
|
-
</div>
|
|
471
|
-
|
|
472
|
-
<aside class="demo-status" aria-labelledby="status-title">
|
|
473
|
-
<div>
|
|
474
|
-
<h3 id="status-title">Status da interação</h3>
|
|
475
|
-
<p>Este painel é atualizado quando um controle é alterado. A mensagem usa uma região live para comunicar a mudança.</p>
|
|
476
|
-
</div>
|
|
477
|
-
<p class="demo-status-output" id="demo-status" role="status" aria-live="polite">Nenhuma alteração ainda.</p>
|
|
478
|
-
<div class="demo-touch-area">
|
|
479
|
-
<div class="fs-check">
|
|
480
|
-
<input type="checkbox" class="fs-check-input" id="demo-touch-check">
|
|
481
|
-
<label for="demo-touch-check" class="fs-check-label">Área de toque confortável</label>
|
|
482
|
-
</div>
|
|
483
|
-
</div>
|
|
484
|
-
<pre class="demo-code"><code>class="fs-check"
|
|
485
|
-
class="fs-radio"
|
|
486
|
-
class="fs-switch"
|
|
487
|
-
|
|
488
|
-
/* tokens locais */
|
|
489
|
-
--fs-check-size
|
|
490
|
-
--fs-radio-size
|
|
491
|
-
--fs-switch-track-width</code></pre>
|
|
492
|
-
</aside>
|
|
493
|
-
</div>
|
|
494
|
-
</div>
|
|
495
|
-
</section>
|
|
496
|
-
|
|
497
|
-
<section class="demo-section" aria-labelledby="sizes-title">
|
|
498
|
-
<div class="demo-section-heading">
|
|
499
|
-
<div>
|
|
500
|
-
<h2 id="sizes-title">Tamanhos e temas</h2>
|
|
501
|
-
<p>As variantes alteram a escala do controle sem trocar a marcação ou a semântica.</p>
|
|
502
|
-
</div>
|
|
503
|
-
</div>
|
|
504
|
-
<div class="demo-reference">
|
|
505
|
-
<div>
|
|
506
|
-
<h2>Escala visual</h2>
|
|
507
|
-
<div class="demo-chip-row">
|
|
508
|
-
<div class="fs-check fs-check-sm">
|
|
509
|
-
<input type="checkbox" class="fs-check-input" id="size-check-sm" checked>
|
|
510
|
-
<label for="size-check-sm" class="fs-check-label">Small</label>
|
|
511
|
-
</div>
|
|
512
|
-
<div class="fs-check">
|
|
513
|
-
<input type="checkbox" class="fs-check-input" id="size-check-md" checked>
|
|
514
|
-
<label for="size-check-md" class="fs-check-label">Default</label>
|
|
515
|
-
</div>
|
|
516
|
-
<div class="fs-check fs-check-lg">
|
|
517
|
-
<input type="checkbox" class="fs-check-input" id="size-check-lg" checked>
|
|
518
|
-
<label for="size-check-lg" class="fs-check-label">Large</label>
|
|
519
|
-
</div>
|
|
520
|
-
</div>
|
|
521
|
-
<p class="demo-note">Passe o foco pelo teclado para visualizar o anel de foco. Em telas estreitas, os labels podem ocupar mais de uma linha.</p>
|
|
522
|
-
</div>
|
|
523
|
-
<div>
|
|
524
|
-
<h2>Contratos preservados</h2>
|
|
525
|
-
<ul>
|
|
526
|
-
<li>Checkbox e switch alternam com <strong>Espaço</strong>.</li>
|
|
527
|
-
<li>Radio mantém a navegação nativa por setas.</li>
|
|
528
|
-
<li>Labels continuam associados por <code>for</code> e <code>id</code>.</li>
|
|
529
|
-
<li>RTL usa propriedades lógicas sem duplicar estilos.</li>
|
|
530
|
-
<li>Movimento reduzido remove transições dos estados.</li>
|
|
531
|
-
</ul>
|
|
532
|
-
</div>
|
|
533
|
-
</div>
|
|
534
|
-
</section>
|
|
535
|
-
|
|
536
|
-
<section class="demo-section" aria-labelledby="proposal-title">
|
|
537
|
-
<div class="demo-section-heading">
|
|
538
|
-
<div>
|
|
539
|
-
<h2 id="proposal-title">Switch refinado</h2>
|
|
540
|
-
<p>Trilho mais definido, thumb elevado e estados de interação consistentes com o restante do sistema.</p>
|
|
541
|
-
</div>
|
|
542
|
-
<span class="fs-badge fs-badge-success">componente oficial</span>
|
|
543
|
-
</div>
|
|
544
|
-
|
|
545
|
-
<div class="demo-reference">
|
|
546
|
-
<div>
|
|
547
|
-
<h2>Estados principais</h2>
|
|
548
|
-
<div class="demo-switch-sample">
|
|
549
|
-
<div class="fs-switch">
|
|
550
|
-
<input type="checkbox" class="fs-switch-input" id="proposal-switch-off">
|
|
551
|
-
<label for="proposal-switch-off" class="fs-switch-label">Desligado · trilho neutro</label>
|
|
552
|
-
</div>
|
|
553
|
-
<p>O trilho usa superfície sutil e o thumb ganha contraste próprio.</p>
|
|
554
|
-
</div>
|
|
555
|
-
<div class="demo-switch-sample">
|
|
556
|
-
<div class="fs-switch">
|
|
557
|
-
<input type="checkbox" class="fs-switch-input" id="proposal-switch-on" checked>
|
|
558
|
-
<label for="proposal-switch-on" class="fs-switch-label">Ligado · estado primário</label>
|
|
559
|
-
</div>
|
|
560
|
-
<p>O estado ligado fica evidente sem inserir texto ou ícone dentro do controle.</p>
|
|
561
|
-
</div>
|
|
562
|
-
</div>
|
|
563
|
-
<div>
|
|
564
|
-
<h2>Estados de sistema</h2>
|
|
565
|
-
<div class="demo-switch-sample">
|
|
566
|
-
<div class="fs-switch">
|
|
567
|
-
<input type="checkbox" class="fs-switch-input is-invalid" id="proposal-switch-invalid" aria-invalid="true">
|
|
568
|
-
<label for="proposal-switch-invalid" class="fs-switch-label">Inválido · com mensagem externa</label>
|
|
569
|
-
</div>
|
|
570
|
-
<div class="fs-invalid-feedback demo-visible-feedback">Ative esta preferência para continuar.</div>
|
|
571
|
-
</div>
|
|
572
|
-
<div class="demo-switch-sample">
|
|
573
|
-
<div class="fs-switch">
|
|
574
|
-
<input type="checkbox" class="fs-switch-input" id="proposal-switch-disabled" disabled checked>
|
|
575
|
-
<label for="proposal-switch-disabled" class="fs-switch-label">Desabilitado · preserva o estado</label>
|
|
576
|
-
</div>
|
|
577
|
-
<p>O controle fica indisponível, mas continua comunicando se está ligado.</p>
|
|
578
|
-
</div>
|
|
579
|
-
</div>
|
|
580
|
-
</div>
|
|
581
|
-
</section>
|
|
582
|
-
</main>
|
|
583
|
-
|
|
584
|
-
<script src="../../dist/js/fokus.js"></script>
|
|
585
|
-
<script>
|
|
586
|
-
const indeterminate = document.getElementById("demo-check-indeterminate");
|
|
587
|
-
const status = document.getElementById("demo-status");
|
|
588
|
-
const resetButton = document.getElementById("reset-demo");
|
|
589
|
-
const directionButton = document.getElementById("toggle-direction");
|
|
590
|
-
const page = document.querySelector(".demo-page");
|
|
591
|
-
const defaults = new Map([...document.querySelectorAll("input")].map((input) => [input.id, input.checked]));
|
|
592
|
-
|
|
593
|
-
indeterminate.indeterminate = true;
|
|
594
|
-
|
|
595
|
-
document.querySelectorAll("input:not(:disabled)").forEach((input) => {
|
|
596
|
-
input.addEventListener("change", () => {
|
|
597
|
-
const state = input.checked ? "marcado" : "desmarcado";
|
|
598
|
-
status.textContent = `${input.id}: ${state}.`;
|
|
599
|
-
});
|
|
600
|
-
});
|
|
601
|
-
|
|
602
|
-
resetButton.addEventListener("click", () => {
|
|
603
|
-
defaults.forEach((checked, id) => {
|
|
604
|
-
const input = document.getElementById(id);
|
|
605
|
-
input.checked = checked;
|
|
606
|
-
});
|
|
607
|
-
indeterminate.indeterminate = true;
|
|
608
|
-
status.textContent = "Demonstração restaurada.";
|
|
609
|
-
});
|
|
610
|
-
|
|
611
|
-
directionButton.addEventListener("click", () => {
|
|
612
|
-
const rtl = page.getAttribute("dir") !== "rtl";
|
|
613
|
-
page.setAttribute("dir", rtl ? "rtl" : "ltr");
|
|
614
|
-
directionButton.setAttribute("aria-pressed", String(rtl));
|
|
615
|
-
directionButton.textContent = rtl ? "Voltar para LTR" : "Testar RTL";
|
|
616
|
-
status.textContent = rtl ? "Direção RTL ativada." : "Direção LTR ativada.";
|
|
617
|
-
});
|
|
618
|
-
</script>
|
|
619
|
-
</body>
|
|
620
|
-
</html>
|