@vsn-ux/gaia-styles 0.6.0 → 0.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/dist/docs/Avatar.md +52 -0
- package/dist/docs/Badge.md +60 -0
- package/dist/docs/Button.md +60 -0
- package/dist/docs/Calendar.md +468 -0
- package/dist/docs/Card.md +57 -0
- package/dist/docs/Checkbox.md +112 -0
- package/dist/docs/Container.md +62 -0
- package/dist/docs/Datepicker.md +107 -0
- package/dist/docs/Dropdown.md +152 -0
- package/dist/docs/FormField.md +101 -0
- package/dist/docs/Input.md +84 -0
- package/dist/docs/Link.md +109 -0
- package/dist/docs/Menu.md +316 -0
- package/dist/docs/Modal.md +337 -0
- package/dist/docs/Notification.md +341 -0
- package/dist/docs/ProgressBar.md +87 -0
- package/dist/docs/ProgressIndicator.md +217 -0
- package/dist/docs/QuickFilterButton.md +74 -0
- package/dist/docs/Radio.md +106 -0
- package/dist/docs/SegmentedControl.md +69 -0
- package/dist/docs/Select.md +411 -0
- package/dist/docs/Switch.md +97 -0
- package/dist/docs/Tabs.md +129 -0
- package/dist/docs/Tag.md +154 -0
- package/dist/docs/TextArea.md +51 -0
- package/dist/docs/TextSize.md +63 -0
- package/dist/docs/Tooltip.md +95 -0
- package/package.json +3 -1
|
@@ -0,0 +1,411 @@
|
|
|
1
|
+
# Select
|
|
2
|
+
|
|
3
|
+
## Visual Structure
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
ga-select [--empty|--expanded|--invalid|--disabled|--multi|--label-hidden]
|
|
7
|
+
├── ga-select__main-area
|
|
8
|
+
│ ├── ga-select__placeholder (when no value)
|
|
9
|
+
│ ├── ga-select__value (when value(s) selected)
|
|
10
|
+
│ └── ga-select__input (for searchable variant)
|
|
11
|
+
└── ga-select__suffix
|
|
12
|
+
└── ga-select__action-icon
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Elements Hierarchy
|
|
16
|
+
|
|
17
|
+
### Core Block
|
|
18
|
+
|
|
19
|
+
- `ga-select` - Main container for the select component
|
|
20
|
+
|
|
21
|
+
### Mandatory Elements
|
|
22
|
+
|
|
23
|
+
- `ga-select__main-area` - Container for the value, placeholder, and input
|
|
24
|
+
|
|
25
|
+
### Optional Elements
|
|
26
|
+
|
|
27
|
+
- `ga-select__placeholder` - Shown when no value is selected
|
|
28
|
+
- `ga-select__value` - Shown when a value (single) or tags (multi) are selected
|
|
29
|
+
- `ga-select__input` - Input field for searchable variant
|
|
30
|
+
- `ga-select__suffix` - Container for icons (chevron, clear, etc.)
|
|
31
|
+
- `ga-select__action-icon` - Icon indicating dropdown or clear action
|
|
32
|
+
- `ga-tag` - Tag element for each selected value in multi-select
|
|
33
|
+
|
|
34
|
+
### Modifiers
|
|
35
|
+
|
|
36
|
+
- `ga-select--empty` - No value selected
|
|
37
|
+
- `ga-select--expanded` - Dropdown is open
|
|
38
|
+
- `ga-select--invalid` - Validation error
|
|
39
|
+
- `ga-select--disabled` - Disabled state
|
|
40
|
+
- `ga-select--multi` - Multi-select mode
|
|
41
|
+
- `ga-select--label-hidden` - Placeholder remains visible when values are selected (multi-select only)
|
|
42
|
+
|
|
43
|
+
## Examples
|
|
44
|
+
|
|
45
|
+
### Single Select
|
|
46
|
+
|
|
47
|
+
#### Empty
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<div class="ga-select ga-select--empty">
|
|
51
|
+
<div class="ga-select__main-area">
|
|
52
|
+
<div class="ga-select__placeholder">Placeholder</div>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="ga-select__suffix">
|
|
55
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
#### Selected
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<div class="ga-select">
|
|
64
|
+
<div class="ga-select__main-area">
|
|
65
|
+
<div class="ga-select__value">Mercedes</div>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="ga-select__suffix">
|
|
68
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
#### Expanded
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<div class="ga-select ga-select--expanded">
|
|
77
|
+
<div class="ga-select__main-area">
|
|
78
|
+
<div class="ga-select__value">Mercedes</div>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="ga-select__suffix">
|
|
81
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
#### Invalid Empty
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<div class="ga-select ga-select--invalid ga-select--empty">
|
|
90
|
+
<div class="ga-select__main-area">
|
|
91
|
+
<div class="ga-select__placeholder">Placeholder</div>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="ga-select__suffix">
|
|
94
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
#### Invalid Selected
|
|
100
|
+
|
|
101
|
+
```html
|
|
102
|
+
<div class="ga-select ga-select--invalid">
|
|
103
|
+
<div class="ga-select__main-area">
|
|
104
|
+
<div class="ga-select__value">Mercedes</div>
|
|
105
|
+
</div>
|
|
106
|
+
<div class="ga-select__suffix">
|
|
107
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
#### Disabled
|
|
113
|
+
|
|
114
|
+
```html
|
|
115
|
+
<div class="ga-select ga-select--disabled">
|
|
116
|
+
<div class="ga-select__main-area">
|
|
117
|
+
<div class="ga-select__value">Mercedes</div>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="ga-select__suffix">
|
|
120
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
#### Clearable
|
|
126
|
+
|
|
127
|
+
```html
|
|
128
|
+
<div class="ga-select">
|
|
129
|
+
<div class="ga-select__main-area">
|
|
130
|
+
<div class="ga-select__value">Mercedes</div>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="ga-select__suffix">
|
|
133
|
+
<!-- icon: circle-x, size=16, class="ga-icon" -->
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
#### Searchable Empty
|
|
139
|
+
|
|
140
|
+
```html
|
|
141
|
+
<div class="ga-select ga-select--empty ga-select--expanded">
|
|
142
|
+
<div class="ga-select__main-area">
|
|
143
|
+
<input type="text" class="ga-select__input" placeholder="Placeholder" />
|
|
144
|
+
</div>
|
|
145
|
+
<div class="ga-select__suffix">
|
|
146
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
#### Searchable Selected
|
|
152
|
+
|
|
153
|
+
```html
|
|
154
|
+
<div class="ga-select ga-select--expanded">
|
|
155
|
+
<div class="ga-select__main-area">
|
|
156
|
+
<input type="text" class="ga-select__input" placeholder="" />
|
|
157
|
+
<div class="ga-select__value">Mercedes</div>
|
|
158
|
+
</div>
|
|
159
|
+
<div class="ga-select__suffix">
|
|
160
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### Multi Select
|
|
166
|
+
|
|
167
|
+
#### Empty
|
|
168
|
+
|
|
169
|
+
```html
|
|
170
|
+
<div class="ga-select ga-select--multi ga-select--empty w-60">
|
|
171
|
+
<div class="ga-select__main-area">
|
|
172
|
+
<div class="ga-select__placeholder">Placeholder</div>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="ga-select__suffix">
|
|
175
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
#### Selected
|
|
181
|
+
|
|
182
|
+
```html
|
|
183
|
+
<div class="ga-select ga-select--multi w-60">
|
|
184
|
+
<div class="ga-select__main-area">
|
|
185
|
+
<div class="ga-select__value">
|
|
186
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
187
|
+
<span class="ga-tag__label">Mercedes</span>
|
|
188
|
+
<div class="ga-tag__separator"></div>
|
|
189
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
190
|
+
</div>
|
|
191
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
192
|
+
<span class="ga-tag__label">BMW</span>
|
|
193
|
+
<div class="ga-tag__separator"></div>
|
|
194
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
195
|
+
</div>
|
|
196
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
197
|
+
<span class="ga-tag__label">Audi</span>
|
|
198
|
+
<div class="ga-tag__separator"></div>
|
|
199
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
200
|
+
</div>
|
|
201
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
202
|
+
<span class="ga-tag__label">Toyota</span>
|
|
203
|
+
<div class="ga-tag__separator"></div>
|
|
204
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
205
|
+
</div>
|
|
206
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
207
|
+
<span class="ga-tag__label">Peugeot</span>
|
|
208
|
+
<div class="ga-tag__separator"></div>
|
|
209
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
210
|
+
</div>
|
|
211
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
212
|
+
<span class="ga-tag__label">Porsche</span>
|
|
213
|
+
<div class="ga-tag__separator"></div>
|
|
214
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
<div class="ga-select__suffix">
|
|
219
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
#### Disabled
|
|
225
|
+
|
|
226
|
+
```html
|
|
227
|
+
<div class="ga-select ga-select--multi ga-select--disabled w-60">
|
|
228
|
+
<div class="ga-select__main-area">
|
|
229
|
+
<div class="ga-select__value">
|
|
230
|
+
<div class="ga-tag ga-tag--interactive-selected-disabled">
|
|
231
|
+
<span class="ga-tag__label">Mercedes</span>
|
|
232
|
+
</div>
|
|
233
|
+
<div class="ga-tag ga-tag--interactive-selected-disabled">
|
|
234
|
+
<span class="ga-tag__label">BMW</span>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="ga-tag ga-tag--interactive-selected-disabled">
|
|
237
|
+
<span class="ga-tag__label">Audi</span>
|
|
238
|
+
</div>
|
|
239
|
+
<div class="ga-tag ga-tag--interactive-selected-disabled">
|
|
240
|
+
<span class="ga-tag__label">Toyota</span>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="ga-tag ga-tag--interactive-selected-disabled">
|
|
243
|
+
<span class="ga-tag__label">Peugeot</span>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="ga-tag ga-tag--interactive-selected-disabled">
|
|
246
|
+
<span class="ga-tag__label">Porsche</span>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
<div class="ga-select__suffix">
|
|
251
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
#### Clearable
|
|
257
|
+
|
|
258
|
+
```html
|
|
259
|
+
<div class="ga-select ga-select--multi ga-select--expanded w-60">
|
|
260
|
+
<div class="ga-select__main-area">
|
|
261
|
+
<div class="ga-select__value">
|
|
262
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
263
|
+
<span class="ga-tag__label">Mercedes</span>
|
|
264
|
+
<div class="ga-tag__separator"></div>
|
|
265
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
266
|
+
</div>
|
|
267
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
268
|
+
<span class="ga-tag__label">BMW</span>
|
|
269
|
+
<div class="ga-tag__separator"></div>
|
|
270
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
271
|
+
</div>
|
|
272
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
273
|
+
<span class="ga-tag__label">Audi</span>
|
|
274
|
+
<div class="ga-tag__separator"></div>
|
|
275
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
276
|
+
</div>
|
|
277
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
278
|
+
<span class="ga-tag__label">Toyota</span>
|
|
279
|
+
<div class="ga-tag__separator"></div>
|
|
280
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
281
|
+
</div>
|
|
282
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
283
|
+
<span class="ga-tag__label">Peugeot</span>
|
|
284
|
+
<div class="ga-tag__separator"></div>
|
|
285
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
286
|
+
</div>
|
|
287
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
288
|
+
<span class="ga-tag__label">Porsche</span>
|
|
289
|
+
<div class="ga-tag__separator"></div>
|
|
290
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
294
|
+
<div class="ga-select__suffix">
|
|
295
|
+
<!-- icon: circle-x, size=16, class="ga-select__action-icon" -->
|
|
296
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
#### Searchable Empty
|
|
302
|
+
|
|
303
|
+
```html
|
|
304
|
+
<div
|
|
305
|
+
class="ga-select ga-select--multi ga-select--empty ga-select--expanded w-60"
|
|
306
|
+
>
|
|
307
|
+
<div class="ga-select__main-area">
|
|
308
|
+
<input type="text" class="ga-select__input" placeholder="Placeholder" />
|
|
309
|
+
</div>
|
|
310
|
+
<div class="ga-select__suffix">
|
|
311
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
312
|
+
</div>
|
|
313
|
+
</div>
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
#### Searchable Selected
|
|
317
|
+
|
|
318
|
+
```html
|
|
319
|
+
<div class="ga-select ga-select--multi ga-select--expanded w-60">
|
|
320
|
+
<div class="ga-select__main-area">
|
|
321
|
+
<div class="ga-select__value">
|
|
322
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
323
|
+
<span class="ga-tag__label">Mercedes</span>
|
|
324
|
+
<div class="ga-tag__separator"></div>
|
|
325
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
326
|
+
</div>
|
|
327
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
328
|
+
<span class="ga-tag__label">BMW</span>
|
|
329
|
+
<div class="ga-tag__separator"></div>
|
|
330
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
331
|
+
</div>
|
|
332
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
333
|
+
<span class="ga-tag__label">Audi</span>
|
|
334
|
+
<div class="ga-tag__separator"></div>
|
|
335
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
336
|
+
</div>
|
|
337
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
338
|
+
<span class="ga-tag__label">Toyota</span>
|
|
339
|
+
<div class="ga-tag__separator"></div>
|
|
340
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
341
|
+
</div>
|
|
342
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
343
|
+
<span class="ga-tag__label">Peugeot</span>
|
|
344
|
+
<div class="ga-tag__separator"></div>
|
|
345
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
346
|
+
</div>
|
|
347
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
348
|
+
<span class="ga-tag__label">Porsche</span>
|
|
349
|
+
<div class="ga-tag__separator"></div>
|
|
350
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
<input type="text" class="ga-select__input" />
|
|
354
|
+
</div>
|
|
355
|
+
<div class="ga-select__suffix">
|
|
356
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
```
|
|
360
|
+
|
|
361
|
+
#### Label Hidden Selected
|
|
362
|
+
|
|
363
|
+
```html
|
|
364
|
+
<div class="ga-select ga-select--multi ga-select--label-hidden w-60">
|
|
365
|
+
<div class="ga-select__main-area">
|
|
366
|
+
<div class="ga-select__value">
|
|
367
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
368
|
+
<span class="ga-tag__label">Mercedes</span>
|
|
369
|
+
<div class="ga-tag__separator"></div>
|
|
370
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
371
|
+
</div>
|
|
372
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
373
|
+
<span class="ga-tag__label">BMW</span>
|
|
374
|
+
<div class="ga-tag__separator"></div>
|
|
375
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
<div class="ga-select__placeholder">Placeholder</div>
|
|
379
|
+
</div>
|
|
380
|
+
<div class="ga-select__suffix">
|
|
381
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
```
|
|
385
|
+
|
|
386
|
+
#### Label Hidden Searchable Selected
|
|
387
|
+
|
|
388
|
+
```html
|
|
389
|
+
<div
|
|
390
|
+
class="ga-select ga-select--multi ga-select--label-hidden ga-select--expanded w-60"
|
|
391
|
+
>
|
|
392
|
+
<div class="ga-select__main-area">
|
|
393
|
+
<div class="ga-select__value">
|
|
394
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
395
|
+
<span class="ga-tag__label">Mercedes</span>
|
|
396
|
+
<div class="ga-tag__separator"></div>
|
|
397
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
398
|
+
</div>
|
|
399
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
400
|
+
<span class="ga-tag__label">BMW</span>
|
|
401
|
+
<div class="ga-tag__separator"></div>
|
|
402
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
<input type="text" class="ga-select__input" placeholder="Placeholder" />
|
|
406
|
+
</div>
|
|
407
|
+
<div class="ga-select__suffix">
|
|
408
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
409
|
+
</div>
|
|
410
|
+
</div>
|
|
411
|
+
```
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# Switch
|
|
2
|
+
|
|
3
|
+
## Visual Structure
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
ga-switch [--invalid]
|
|
7
|
+
├── input[type="checkbox"]
|
|
8
|
+
├── ga-switch__marker
|
|
9
|
+
│ ├── ga-switch__check-icon
|
|
10
|
+
│ └── ga-switch__slider
|
|
11
|
+
└── ga-switch__label (optional)
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Elements Hierarchy
|
|
15
|
+
|
|
16
|
+
### Core Block
|
|
17
|
+
|
|
18
|
+
- `ga-switch` - Main container for the switch component
|
|
19
|
+
|
|
20
|
+
### Mandatory Elements
|
|
21
|
+
|
|
22
|
+
- `input` - Native HTML input element (type="checkbox")
|
|
23
|
+
- `ga-switch__marker` - Visual container for the switch's visual elements
|
|
24
|
+
- `ga-switch__check-icon` - Icon shown when switch is in the "on" state (use `CheckIcon` from Lucide icons)
|
|
25
|
+
- `ga-switch__slider` - The sliding element of the switch
|
|
26
|
+
|
|
27
|
+
### Optional Elements
|
|
28
|
+
|
|
29
|
+
- `ga-switch__label` - Text label for the switch component
|
|
30
|
+
|
|
31
|
+
### Modifiers
|
|
32
|
+
|
|
33
|
+
- `ga-switch--invalid` - Styles the switch to indicate an invalid/error state
|
|
34
|
+
|
|
35
|
+
## Examples
|
|
36
|
+
|
|
37
|
+
### Default
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<div class="ga-switch">
|
|
41
|
+
<input type="checkbox" />
|
|
42
|
+
<div class="ga-switch__marker">
|
|
43
|
+
<!-- icon: check, size=16, class="ga-switch__check-icon" -->
|
|
44
|
+
<span class="ga-switch__slider"></span>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Disabled (Off)
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
<div class="ga-switch">
|
|
53
|
+
<input type="checkbox" disabled="" />
|
|
54
|
+
<div class="ga-switch__marker">
|
|
55
|
+
<!-- icon: check, size=16, class="ga-switch__check-icon" -->
|
|
56
|
+
<span class="ga-switch__slider"></span>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Disabled (On)
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<div class="ga-switch">
|
|
65
|
+
<input type="checkbox" disabled="" checked="" />
|
|
66
|
+
<div class="ga-switch__marker">
|
|
67
|
+
<!-- icon: check, size=16, class="ga-switch__check-icon" -->
|
|
68
|
+
<span class="ga-switch__slider"></span>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### With Label
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<label class="ga-switch">
|
|
77
|
+
<input type="checkbox" />
|
|
78
|
+
<div class="ga-switch__marker">
|
|
79
|
+
<!-- icon: check, size=16, class="ga-switch__check-icon" -->
|
|
80
|
+
<span class="ga-switch__slider"></span>
|
|
81
|
+
</div>
|
|
82
|
+
<span class="ga-switch__label">Label</span>
|
|
83
|
+
</label>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Invalid
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<label class="ga-switch ga-switch--invalid">
|
|
90
|
+
<input type="checkbox" />
|
|
91
|
+
<div class="ga-switch__marker">
|
|
92
|
+
<!-- icon: check, size=16, class="ga-switch__check-icon" -->
|
|
93
|
+
<span class="ga-switch__slider"></span>
|
|
94
|
+
</div>
|
|
95
|
+
<span class="ga-switch__label">Label</span>
|
|
96
|
+
</label>
|
|
97
|
+
```
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
# Tabs
|
|
2
|
+
|
|
3
|
+
## Visual Structure
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
ga-tabs [--horizontal|--vertical] [--keyline]
|
|
7
|
+
├── ga-tabs__tab [--selected|--disabled|--focused]
|
|
8
|
+
│ ├── text
|
|
9
|
+
│ └── ga-tabs__tab-icon (optional)
|
|
10
|
+
├── ga-tabs__tab
|
|
11
|
+
└── ...
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Elements Hierarchy
|
|
15
|
+
|
|
16
|
+
### Core Block
|
|
17
|
+
|
|
18
|
+
- `ga-tabs` – Main container for the tabs group
|
|
19
|
+
|
|
20
|
+
### Mandatory Elements
|
|
21
|
+
|
|
22
|
+
- `ga-tabs__tab` – Individual tab item
|
|
23
|
+
|
|
24
|
+
### Optional Elements
|
|
25
|
+
|
|
26
|
+
- `ga-tabs__tab-icon` – Icon inside a tab (e.g., close or dropdown icon)
|
|
27
|
+
|
|
28
|
+
### Modifiers
|
|
29
|
+
|
|
30
|
+
- `ga-tabs--horizontal` – Arranges tabs in a horizontal row
|
|
31
|
+
- `ga-tabs--vertical` – Arranges tabs in a vertical column
|
|
32
|
+
- `ga-tabs--keyline` – Adds a keyline (underline) to the tabs container
|
|
33
|
+
- `ga-tabs__tab--selected` – Styles the tab as selected
|
|
34
|
+
- `ga-tabs__tab--disabled` – Styles the tab as disabled
|
|
35
|
+
- `ga-tabs__tab--focused` – Styles the tab as focused
|
|
36
|
+
|
|
37
|
+
## Horizontal Examples
|
|
38
|
+
|
|
39
|
+
### Default
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<ul class="ga-tabs ga-tabs--horizontal">
|
|
43
|
+
<li class="ga-tabs__tab ga-tabs__tab--selected" tabindex="0">All</li>
|
|
44
|
+
<li class="ga-tabs__tab" tabindex="0">Recent</li>
|
|
45
|
+
<li class="ga-tabs__tab" tabindex="0">Favourites</li>
|
|
46
|
+
<li class="ga-tabs__tab ga-tabs__tab--disabled">Settings</li>
|
|
47
|
+
</ul>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### With keyline
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<ul class="ga-tabs ga-tabs--horizontal ga-tabs--keyline">
|
|
54
|
+
<li class="ga-tabs__tab ga-tabs__tab--selected" tabindex="0">All</li>
|
|
55
|
+
<li class="ga-tabs__tab" tabindex="0">Recent</li>
|
|
56
|
+
<li class="ga-tabs__tab" tabindex="0">Favourites</li>
|
|
57
|
+
<li class="ga-tabs__tab ga-tabs__tab--disabled">Settings</li>
|
|
58
|
+
</ul>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### With icon
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<ul class="ga-tabs ga-tabs--horizontal">
|
|
65
|
+
<li class="ga-tabs__tab ga-tabs__tab--selected" tabindex="0">
|
|
66
|
+
All
|
|
67
|
+
<!-- icon: x, size=16, class="ga-tabs__tab-icon" -->
|
|
68
|
+
</li>
|
|
69
|
+
<li class="ga-tabs__tab ga-tabs__tab--disabled">
|
|
70
|
+
Recent
|
|
71
|
+
<!-- icon: x, size=16, class="ga-tabs__tab-icon" -->
|
|
72
|
+
</li>
|
|
73
|
+
<li class="ga-tabs__tab" tabindex="0">
|
|
74
|
+
Favourites
|
|
75
|
+
<!-- icon: x, size=16, class="ga-tabs__tab-icon" -->
|
|
76
|
+
</li>
|
|
77
|
+
<li class="ga-tabs__tab" tabindex="0">
|
|
78
|
+
More
|
|
79
|
+
<!-- icon: chevron-down, size=16, class="ga-tabs__tab-icon" -->
|
|
80
|
+
</li>
|
|
81
|
+
</ul>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## Vertical Examples
|
|
85
|
+
|
|
86
|
+
### Default
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<ul class="ga-tabs ga-tabs--vertical">
|
|
90
|
+
<li class="ga-tabs__tab ga-tabs__tab--selected" tabindex="0">All</li>
|
|
91
|
+
<li class="ga-tabs__tab" tabindex="0">Recent</li>
|
|
92
|
+
<li class="ga-tabs__tab" tabindex="0">Favourites</li>
|
|
93
|
+
<li class="ga-tabs__tab ga-tabs__tab--disabled">Settings</li>
|
|
94
|
+
</ul>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### With keyline
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<ul class="ga-tabs ga-tabs--vertical ga-tabs--keyline">
|
|
101
|
+
<li class="ga-tabs__tab ga-tabs__tab--selected" tabindex="0">All</li>
|
|
102
|
+
<li class="ga-tabs__tab" tabindex="0">Recent</li>
|
|
103
|
+
<li class="ga-tabs__tab" tabindex="0">Favourites</li>
|
|
104
|
+
<li class="ga-tabs__tab ga-tabs__tab--disabled">Settings</li>
|
|
105
|
+
</ul>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### With icon
|
|
109
|
+
|
|
110
|
+
```html
|
|
111
|
+
<ul class="ga-tabs ga-tabs--vertical">
|
|
112
|
+
<li class="ga-tabs__tab ga-tabs__tab--selected" tabindex="0">
|
|
113
|
+
All
|
|
114
|
+
<!-- icon: x, size=16, class="ga-tabs__tab-icon" -->
|
|
115
|
+
</li>
|
|
116
|
+
<li class="ga-tabs__tab ga-tabs__tab--disabled">
|
|
117
|
+
Recent
|
|
118
|
+
<!-- icon: x, size=16, class="ga-tabs__tab-icon" -->
|
|
119
|
+
</li>
|
|
120
|
+
<li class="ga-tabs__tab" tabindex="0">
|
|
121
|
+
Favourites
|
|
122
|
+
<!-- icon: x, size=16, class="ga-tabs__tab-icon" -->
|
|
123
|
+
</li>
|
|
124
|
+
<li class="ga-tabs__tab" tabindex="0">
|
|
125
|
+
More
|
|
126
|
+
<!-- icon: chevron-down, size=16, class="ga-tabs__tab-icon" -->
|
|
127
|
+
</li>
|
|
128
|
+
</ul>
|
|
129
|
+
```
|