@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.
Files changed (28) hide show
  1. package/dist/docs/Avatar.md +52 -0
  2. package/dist/docs/Badge.md +60 -0
  3. package/dist/docs/Button.md +60 -0
  4. package/dist/docs/Calendar.md +468 -0
  5. package/dist/docs/Card.md +57 -0
  6. package/dist/docs/Checkbox.md +112 -0
  7. package/dist/docs/Container.md +62 -0
  8. package/dist/docs/Datepicker.md +107 -0
  9. package/dist/docs/Dropdown.md +152 -0
  10. package/dist/docs/FormField.md +101 -0
  11. package/dist/docs/Input.md +84 -0
  12. package/dist/docs/Link.md +109 -0
  13. package/dist/docs/Menu.md +316 -0
  14. package/dist/docs/Modal.md +337 -0
  15. package/dist/docs/Notification.md +341 -0
  16. package/dist/docs/ProgressBar.md +87 -0
  17. package/dist/docs/ProgressIndicator.md +217 -0
  18. package/dist/docs/QuickFilterButton.md +74 -0
  19. package/dist/docs/Radio.md +106 -0
  20. package/dist/docs/SegmentedControl.md +69 -0
  21. package/dist/docs/Select.md +411 -0
  22. package/dist/docs/Switch.md +97 -0
  23. package/dist/docs/Tabs.md +129 -0
  24. package/dist/docs/Tag.md +154 -0
  25. package/dist/docs/TextArea.md +51 -0
  26. package/dist/docs/TextSize.md +63 -0
  27. package/dist/docs/Tooltip.md +95 -0
  28. package/package.json +3 -1
package/dist/docs/Avatar.md ADDED
@@ -0,0 +1,52 @@
1
+ # Avatar
2
+
3
+ ## Visual Structure
4
+
5
+ ```
6
+ ga-avatar [--small|--large]
7
+ ```
8
+
9
+ ## Elements Hierarchy
10
+
11
+ ### Core Block
12
+
13
+ - `ga-avatar` - Main container for the entire avatar component (default size 40px × 40px)
14
+
15
+ ### Modifiers
16
+
17
+ - `ga-avatar--small` - Smaller sized avatar (24px × 24px)
18
+ - `ga-avatar--large` - Larger sized avatar (64px × 64px)
19
+
20
+ ## Examples
21
+
22
+ ### Text
23
+
24
+ ```html
25
+ <span class="ga-avatar ga-avatar--small">RB</span>
26
+ <span class="ga-avatar">RB</span>
27
+ <span class="ga-avatar ga-avatar--large">RB</span>
28
+ ```
29
+
30
+ ### Icon
31
+
32
+ ```html
33
+ <span class="ga-avatar ga-avatar--small">
34
+ <!-- icon: user-round, size=16 -->
35
+ </span>
36
+ <span class="ga-avatar"><!-- icon: user-round, size=30 --></span>
37
+ <span class="ga-avatar ga-avatar--large">
38
+ <!-- icon: user-round, size=44 -->
39
+ </span>
40
+ ```
41
+
42
+ ### Image
43
+
44
+ ```html
45
+ <span class="ga-avatar ga-avatar--small">
46
+ <img src="https://i.pravatar.cc/64?img=70" />
47
+ </span>
48
+ <span class="ga-avatar"><img src="https://i.pravatar.cc/64?img=70" /></span>
49
+ <span class="ga-avatar ga-avatar--large">
50
+ <img src="https://i.pravatar.cc/64?img=70" />
51
+ </span>
52
+ ```
package/dist/docs/Badge.md ADDED
@@ -0,0 +1,60 @@
1
+ # Badge
2
+
3
+ ## Visual Structure
4
+
5
+ ```
6
+ ga-badge [--text|--dot] [--default|--default-inverted|--information|--error|--warning|--success|--muted|--disabled]
7
+ ```
8
+
9
+ ## Elements Hierarchy
10
+
11
+ ### Core Block
12
+
13
+ - `ga-badge` - Main container for the badge component that displays status indicators or counts
14
+
15
+ ### Display Variants
16
+
17
+ - `ga-badge--text` - Text badge variant
18
+ - `ga-badge--dot` - Dot badge variant
19
+
20
+ ### Status Modifiers
21
+
22
+ - `ga-badge--default` - Default style with action surface color
23
+ - `ga-badge--default-inverted` - Inverted default style
24
+ - `ga-badge--muted` - Muted style
25
+ - `ga-badge--information` - Information style
26
+ - `ga-badge--error` - Error style
27
+ - `ga-badge--warning` - Warning style
28
+ - `ga-badge--success` - Success style
29
+ - `ga-badge--disabled` - Disabled style
30
+ - `ga-badge--disabled-inverted` - Disabled inverted style
31
+
32
+ ## Examples
33
+
34
+ ### Text
35
+
36
+ ```html
37
+ <span class="ga-badge ga-badge--text ga-badge--default">25</span>
38
+ <span class="ga-badge ga-badge--text ga-badge--default-inverted">99</span>
39
+ <span class="ga-badge ga-badge--text ga-badge--muted">9</span>
40
+ <span class="ga-badge ga-badge--text ga-badge--information">7</span>
41
+ <span class="ga-badge ga-badge--text ga-badge--error">-237%</span>
42
+ <span class="ga-badge ga-badge--text ga-badge--warning">9</span>
43
+ <span class="ga-badge ga-badge--text ga-badge--success">+25K</span>
44
+ <span class="ga-badge ga-badge--text ga-badge--disabled">0</span>
45
+ <span class="ga-badge ga-badge--text ga-badge--disabled-inverted">0</span>
46
+ ```
47
+
48
+ ### Dot
49
+
50
+ ```html
51
+ <span class="ga-badge ga-badge--dot ga-badge--default"></span>
52
+ <span class="ga-badge ga-badge--dot ga-badge--default-inverted"></span>
53
+ <span class="ga-badge ga-badge--dot ga-badge--muted"></span>
54
+ <span class="ga-badge ga-badge--dot ga-badge--information"></span>
55
+ <span class="ga-badge ga-badge--dot ga-badge--error"></span>
56
+ <span class="ga-badge ga-badge--dot ga-badge--warning"></span>
57
+ <span class="ga-badge ga-badge--dot ga-badge--success"></span>
58
+ <span class="ga-badge ga-badge--dot ga-badge--disabled"></span>
59
+ <span class="ga-badge ga-badge--dot ga-badge--disabled-inverted"></span>
60
+ ```
package/dist/docs/Button.md ADDED
@@ -0,0 +1,60 @@
1
+ # Button
2
+
3
+ ## Visual Structure
4
+
5
+ ```
6
+ ga-button [--primary|--secondary|--ghost|--transparent] [--icon-only]
7
+ ```
8
+
9
+ ## Elements Hierarchy
10
+
11
+ ### Core Block
12
+
13
+ - `ga-button` - Main container for the button component
14
+
15
+ ### Modifiers
16
+
17
+ #### Variant modifiers
18
+
19
+ - `ga-button--primary` - Primary button
20
+ - `ga-button--secondary` - Secondary button
21
+ - `ga-button--ghost` - Transparent button with no border
22
+ - `ga-button--transparent` - Transparent button with border
23
+
24
+ #### Type modifiers
25
+
26
+ - `ga-button--icon-only` - Button variant optimized for displaying only an icon (different paddings)
27
+
28
+ ## Examples
29
+
30
+ ### Text (with optional icon) Button
31
+
32
+ ```html
33
+ <button class="ga-button ga-button--primary">Button</button>
34
+ <button class="ga-button ga-button--secondary">Button</button>
35
+ <button class="ga-button ga-button--ghost">Button</button>
36
+ <button class="ga-button ga-button--transparent">Button</button>
37
+ ```
38
+
39
+ ```html
40
+ <button class="ga-button ga-button--primary">
41
+ <UserRoundPlusIcon class="ga-icon" /> Button
42
+ </button>
43
+ <button class="ga-button ga-button--secondary">
44
+ <UserRoundPlusIcon class="ga-icon" /> Button
45
+ </button>
46
+ <button class="ga-button ga-button--ghost">
47
+ <UserRoundPlusIcon class="ga-icon" /> Button
48
+ </button>
49
+ <button class="ga-button ga-button--transparent">
50
+ <UserRoundPlusIcon class="ga-icon" /> Button
51
+ </button>
52
+ ```
53
+
54
+ ### Icon (only) Button
55
+
56
+ ```html
57
+ <button class="ga-button ga-button--primary ga-button--icon-only">
58
+ <DownloadIcon class="ga-icon" />
59
+ </button>
60
+ ```
package/dist/docs/Calendar.md ADDED
@@ -0,0 +1,468 @@
1
+ # Calendar
2
+
3
+ ## Visual Structure
4
+
5
+ ```
6
+ ga-calendar
7
+ ├── ga-calendar__header
8
+ │ ├── ga-calendar__month-year
9
+ │ │ └── ga-calendar__month-year-button
10
+ │ └── ga-calendar__navigation
11
+ │ └── ga-calendar__navigation-button
12
+ ├── ga-calendar__weekdays
13
+ │ └── ga-calendar__weekday
14
+ └── ga-calendar__selection [--day|--month|--year]
15
+ ├── ga-calendar__day [--selected|--current|--special|--disabled|--weekend|--selected-range-*]
16
+ ├── ga-calendar__month [--selected|--disabled]
17
+ └── ga-calendar__year [--selected|--disabled]
18
+ ```
19
+
20
+ ## Elements Hierarchy
21
+
22
+ ### Core Block
23
+
24
+ - `ga-calendar` - Calendar component
25
+
26
+ ### Heading Elements
27
+
28
+ - `ga-calendar__header` - Header section containing month/year selectors and navigation
29
+ - `ga-calendar__month-year` - Container for month and year selection buttons
30
+ - `ga-calendar__month-year-button` - Interactive buttons for selecting month or year
31
+ - `ga-calendar__navigation` - Container for calendar navigation controls
32
+ - `ga-calendar__navigation-button` - Previous/next navigation buttons
33
+
34
+ ### Weekdays Elements
35
+
36
+ - `ga-calendar__weekdays` - Container for weekday headers (only in day selection mode)
37
+ - `ga-calendar__weekday` - Individual weekday label (Mo, Tu, We, etc.)
38
+
39
+ ### Selection Elements
40
+
41
+ - `ga-calendar__selection` - Main selection area for days, months, or years
42
+ - `ga-calendar__selection--day` - Day selection mode
43
+ - `ga-calendar__selection--month` - Month selection mode
44
+ - `ga-calendar__selection--year` - Year selection mode
45
+ - `ga-calendar__day` - Individual day cell in day selection mode
46
+ - `ga-calendar__day--selected` - Currently selected day
47
+ - `ga-calendar__day--current` - Today's date
48
+ - `ga-calendar__day--special` - Days with special significance (events, holidays)
49
+ - `ga-calendar__day--disabled` - Non-selectable days
50
+ - `ga-calendar__day--weekend` - Weekend days
51
+ - `ga-calendar__day--selected-range-start` - Start of a selected date range
52
+ - `ga-calendar__day--selected-range-middle` - Middle days in a selected range
53
+ - `ga-calendar__day--selected-range-end` - End of a selected date range
54
+ - `ga-calendar__day--selected-range-middle-hover` - Middle days in hover state during range selection
55
+ - `ga-calendar__day--selected-range-end-hover` - End day in hover state during range selection
56
+ - `ga-calendar__month` - Individual month cell in month selection mode
57
+ - `ga-calendar__month--selected` - Currently selected month
58
+ - `ga-calendar__month--disabled` - Non-selectable months
59
+ - `ga-calendar__year` - Individual year cell in year selection mode
60
+ - `ga-calendar__year--selected` - Currently selected year
61
+ - `ga-calendar__year--disabled` - Non-selectable years
62
+
63
+ ## Examples
64
+
65
+ ### Day Selection
66
+
67
+ ```html
68
+ <div class="ga-calendar">
69
+ <div class="ga-calendar__header">
70
+ <div class="ga-calendar__month-year">
71
+ <button type="button" class="ga-calendar__month-year-button">
72
+ Sep
73
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
74
+ </button>
75
+ <button type="button" class="ga-calendar__month-year-button">
76
+ 2025
77
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
78
+ </button>
79
+ </div>
80
+ <div class="ga-calendar__navigation">
81
+ <button type="button" class="ga-calendar__navigation-button">
82
+ <!-- icon: chevron-left, size=24, class="ga-icon" -->
83
+ </button>
84
+ <button type="button" class="ga-calendar__navigation-button">
85
+ <!-- icon: chevron-right, size=24, class="ga-icon" -->
86
+ </button>
87
+ </div>
88
+ </div>
89
+ <div class="ga-calendar__weekdays">
90
+ <div class="ga-calendar__weekday">Mo</div>
91
+ <div class="ga-calendar__weekday">Tu</div>
92
+ <div class="ga-calendar__weekday">We</div>
93
+ <div class="ga-calendar__weekday">Th</div>
94
+ <div class="ga-calendar__weekday">Fr</div>
95
+ <div class="ga-calendar__weekday">Sa</div>
96
+ <div class="ga-calendar__weekday">Su</div>
97
+ </div>
98
+ <div class="ga-calendar__selection ga-calendar__selection--day">
99
+ <div class="ga-calendar__day">1</div>
100
+ <div class="ga-calendar__day">2</div>
101
+ <div class="ga-calendar__day">3</div>
102
+ <div class="ga-calendar__day">4</div>
103
+ <div class="ga-calendar__day">5</div>
104
+ <div class="ga-calendar__day ga-calendar__day--weekend">6</div>
105
+ <div class="ga-calendar__day ga-calendar__day--weekend">7</div>
106
+ <div class="ga-calendar__day">8</div>
107
+ <div class="ga-calendar__day">9</div>
108
+ <div class="ga-calendar__day ga-calendar__day--special">10</div>
109
+ <div class="ga-calendar__day">11</div>
110
+ <div class="ga-calendar__day">12</div>
111
+ <div class="ga-calendar__day ga-calendar__day--weekend">13</div>
112
+ <div class="ga-calendar__day ga-calendar__day--weekend">14</div>
113
+ <div class="ga-calendar__day ga-calendar__day--current">15</div>
114
+ <div class="ga-calendar__day">16</div>
115
+ <div class="ga-calendar__day">17</div>
116
+ <div class="ga-calendar__day">18</div>
117
+ <div class="ga-calendar__day">19</div>
118
+ <div
119
+ class="ga-calendar__day ga-calendar__day--selected ga-calendar__day--weekend"
120
+ >
121
+ 20
122
+ </div>
123
+ <div class="ga-calendar__day ga-calendar__day--weekend">21</div>
124
+ <div class="ga-calendar__day">22</div>
125
+ <div class="ga-calendar__day">23</div>
126
+ <div class="ga-calendar__day">24</div>
127
+ <div class="ga-calendar__day">25</div>
128
+ <div class="ga-calendar__day">26</div>
129
+ <div class="ga-calendar__day ga-calendar__day--weekend">27</div>
130
+ <div class="ga-calendar__day ga-calendar__day--weekend">28</div>
131
+ <div class="ga-calendar__day">29</div>
132
+ <div class="ga-calendar__day">30</div>
133
+ </div>
134
+ </div>
135
+ ```
136
+
137
+ ### Month Selection
138
+
139
+ ```html
140
+ <div class="ga-calendar">
141
+ <div class="ga-calendar__header">
142
+ <div class="ga-calendar__month-year">
143
+ <button type="button" class="ga-calendar__month-year-button">
144
+ Sep
145
+ <!-- icon: chevron-up, size=16, class="ga-icon" -->
146
+ </button>
147
+ <button type="button" class="ga-calendar__month-year-button">
148
+ 2025
149
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
150
+ </button>
151
+ </div>
152
+ </div>
153
+ <div class="ga-calendar__selection ga-calendar__selection--month">
154
+ <div class="ga-calendar__month ga-calendar__month--disabled">Jan</div>
155
+ <div class="ga-calendar__month ga-calendar__month--disabled">Feb</div>
156
+ <div class="ga-calendar__month">Mar</div>
157
+ <div class="ga-calendar__month">Apr</div>
158
+ <div class="ga-calendar__month">May</div>
159
+ <div class="ga-calendar__month">Jun</div>
160
+ <div class="ga-calendar__month">Jul</div>
161
+ <div class="ga-calendar__month">Aug</div>
162
+ <div class="ga-calendar__month ga-calendar__month--selected">Sep</div>
163
+ <div class="ga-calendar__month">Oct</div>
164
+ <div class="ga-calendar__month">Nov</div>
165
+ <div class="ga-calendar__month">Dec</div>
166
+ </div>
167
+ </div>
168
+ ```
169
+
170
+ ### Year Selection
171
+
172
+ ```html
173
+ <div class="ga-calendar">
174
+ <div class="ga-calendar__header">
175
+ <div class="ga-calendar__month-year">
176
+ <button type="button" class="ga-calendar__month-year-button">
177
+ Sep
178
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
179
+ </button>
180
+ <button type="button" class="ga-calendar__month-year-button">
181
+ 2025
182
+ <!-- icon: chevron-up, size=16, class="ga-icon" -->
183
+ </button>
184
+ </div>
185
+ <div class="ga-calendar__navigation">
186
+ <button type="button" class="ga-calendar__navigation-button">
187
+ <!-- icon: chevron-left, size=24, class="ga-icon" -->
188
+ </button>
189
+ <button type="button" class="ga-calendar__navigation-button">
190
+ <!-- icon: chevron-right, size=24, class="ga-icon" -->
191
+ </button>
192
+ </div>
193
+ </div>
194
+ <div class="ga-calendar__selection ga-calendar__selection--year">
195
+ <div class="ga-calendar__year ga-calendar__year--disabled">2006</div>
196
+ <div class="ga-calendar__year ga-calendar__year--disabled">2007</div>
197
+ <div class="ga-calendar__year ga-calendar__year--disabled">2008</div>
198
+ <div class="ga-calendar__year">2009</div>
199
+ <div class="ga-calendar__year">2010</div>
200
+ <div class="ga-calendar__year">2011</div>
201
+ <div class="ga-calendar__year">2012</div>
202
+ <div class="ga-calendar__year">2013</div>
203
+ <div class="ga-calendar__year">2014</div>
204
+ <div class="ga-calendar__year">2015</div>
205
+ <div class="ga-calendar__year">2016</div>
206
+ <div class="ga-calendar__year">2017</div>
207
+ <div class="ga-calendar__year">2018</div>
208
+ <div class="ga-calendar__year">2019</div>
209
+ <div class="ga-calendar__year">2020</div>
210
+ <div class="ga-calendar__year">2021</div>
211
+ <div class="ga-calendar__year">2022</div>
212
+ <div class="ga-calendar__year">2023</div>
213
+ <div class="ga-calendar__year">2024</div>
214
+ <div class="ga-calendar__year ga-calendar__year--selected">2025</div>
215
+ <div class="ga-calendar__year">2026</div>
216
+ <div class="ga-calendar__year">2027</div>
217
+ <div class="ga-calendar__year">2028</div>
218
+ <div class="ga-calendar__year">2029</div>
219
+ <div class="ga-calendar__year">2030</div>
220
+ </div>
221
+ </div>
222
+ ```
223
+
224
+ ### Range Selection
225
+
226
+ ```html
227
+ <div class="ga-calendar">
228
+ <div class="ga-calendar__header">
229
+ <div class="ga-calendar__month-year">
230
+ <button type="button" class="ga-calendar__month-year-button">
231
+ Sep
232
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
233
+ </button>
234
+ <button type="button" class="ga-calendar__month-year-button">
235
+ 2025
236
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
237
+ </button>
238
+ </div>
239
+ <div class="ga-calendar__navigation">
240
+ <button type="button" class="ga-calendar__navigation-button">
241
+ <!-- icon: chevron-left, size=24, class="ga-icon" -->
242
+ </button>
243
+ <button type="button" class="ga-calendar__navigation-button">
244
+ <!-- icon: chevron-right, size=24, class="ga-icon" -->
245
+ </button>
246
+ </div>
247
+ </div>
248
+ <div class="ga-calendar__weekdays">
249
+ <div class="ga-calendar__weekday">Mo</div>
250
+ <div class="ga-calendar__weekday">Tu</div>
251
+ <div class="ga-calendar__weekday">We</div>
252
+ <div class="ga-calendar__weekday">Th</div>
253
+ <div class="ga-calendar__weekday">Fr</div>
254
+ <div class="ga-calendar__weekday">Sa</div>
255
+ <div class="ga-calendar__weekday">Su</div>
256
+ </div>
257
+ <div class="ga-calendar__selection ga-calendar__selection--day">
258
+ <div class="ga-calendar__day">1</div>
259
+ <div class="ga-calendar__day ga-calendar__day--selected-range-start">2</div>
260
+ <div
261
+ class="ga-calendar__day ga-calendar__day--selected-range-middle ga-calendar__day--special"
262
+ >
263
+ 3
264
+ </div>
265
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
266
+ 4
267
+ </div>
268
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
269
+ 5
270
+ </div>
271
+ <div
272
+ class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-middle"
273
+ >
274
+ 6
275
+ </div>
276
+ <div
277
+ class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-middle"
278
+ >
279
+ 7
280
+ </div>
281
+ <div
282
+ class="ga-calendar__day ga-calendar__day--selected-range-middle ga-calendar__day--current"
283
+ >
284
+ 8
285
+ </div>
286
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
287
+ 9
288
+ </div>
289
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
290
+ 10
291
+ </div>
292
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
293
+ 11
294
+ </div>
295
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
296
+ 12
297
+ </div>
298
+ <div
299
+ class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-end"
300
+ >
301
+ 13
302
+ </div>
303
+ <div class="ga-calendar__day ga-calendar__day--weekend">14</div>
304
+ <div class="ga-calendar__day">15</div>
305
+ <div class="ga-calendar__day ga-calendar__day--selected-range-start">
306
+ 16
307
+ </div>
308
+ <div
309
+ class="ga-calendar__day ga-calendar__day--selected-range-middle-hover ga-calendar__day--special"
310
+ >
311
+ 17
312
+ </div>
313
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
314
+ 18
315
+ </div>
316
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
317
+ 19
318
+ </div>
319
+ <div
320
+ class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-middle-hover"
321
+ >
322
+ 20
323
+ </div>
324
+ <div
325
+ class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-middle-hover"
326
+ >
327
+ 21
328
+ </div>
329
+ <div
330
+ class="ga-calendar__day ga-calendar__day--selected-range-middle-hover ga-calendar__day--current"
331
+ >
332
+ 22
333
+ </div>
334
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
335
+ 23
336
+ </div>
337
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
338
+ 24
339
+ </div>
340
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
341
+ 25
342
+ </div>
343
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
344
+ 26
345
+ </div>
346
+ <div
347
+ class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-end-hover"
348
+ >
349
+ 27
350
+ </div>
351
+ <div class="ga-calendar__day ga-calendar__day--weekend">28</div>
352
+ <div class="ga-calendar__day">29</div>
353
+ <div class="ga-calendar__day">30</div>
354
+ </div>
355
+ </div>
356
+ ```
357
+
358
+ ### Day States
359
+
360
+ ```html
361
+ <div class="ga-calendar">
362
+ <div class="ga-calendar__header">
363
+ <div class="ga-calendar__month-year">
364
+ <button type="button" class="ga-calendar__month-year-button">
365
+ Sep
366
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
367
+ </button>
368
+ <button type="button" class="ga-calendar__month-year-button">
369
+ 2025
370
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
371
+ </button>
372
+ </div>
373
+ <div class="ga-calendar__navigation">
374
+ <button type="button" class="ga-calendar__navigation-button">
375
+ <!-- icon: chevron-left, size=24, class="ga-icon" -->
376
+ </button>
377
+ <button type="button" class="ga-calendar__navigation-button">
378
+ <!-- icon: chevron-right, size=24, class="ga-icon" -->
379
+ </button>
380
+ </div>
381
+ </div>
382
+ <div class="ga-calendar__weekdays">
383
+ <div class="ga-calendar__weekday">Mo</div>
384
+ <div class="ga-calendar__weekday">Tu</div>
385
+ <div class="ga-calendar__weekday">We</div>
386
+ <div class="ga-calendar__weekday">Th</div>
387
+ <div class="ga-calendar__weekday">Fr</div>
388
+ <div class="ga-calendar__weekday">Sa</div>
389
+ <div class="ga-calendar__weekday">Su</div>
390
+ </div>
391
+ <div class="ga-calendar__selection ga-calendar__selection--day">
392
+ <div class="ga-calendar__day">1</div>
393
+ <div class="ga-calendar__day ga-calendar__day--selected">2</div>
394
+ <div class="ga-calendar__day ga-calendar__day--disabled">3</div>
395
+ <div
396
+ class="ga-calendar__day ga-calendar__day--selected ga-calendar__day--disabled"
397
+ >
398
+ 4
399
+ </div>
400
+ <div class="ga-calendar__day">5</div>
401
+ <div class="ga-calendar__day ga-calendar__day--weekend">6</div>
402
+ <div class="ga-calendar__day ga-calendar__day--weekend">7</div>
403
+ <div class="ga-calendar__day ga-calendar__day--special">8</div>
404
+ <div
405
+ class="ga-calendar__day ga-calendar__day--special ga-calendar__day--selected"
406
+ >
407
+ 9
408
+ </div>
409
+ <div
410
+ class="ga-calendar__day ga-calendar__day--special ga-calendar__day--disabled"
411
+ >
412
+ 10
413
+ </div>
414
+ <div
415
+ class="ga-calendar__day ga-calendar__day--special ga-calendar__day--selected ga-calendar__day--disabled"
416
+ >
417
+ 11
418
+ </div>
419
+ <div class="ga-calendar__day">12</div>
420
+ <div
421
+ class="ga-calendar__day ga-calendar__day--special ga-calendar__day--weekend"
422
+ >
423
+ 13
424
+ </div>
425
+ <div
426
+ class="ga-calendar__day ga-calendar__day--special ga-calendar__day--weekend"
427
+ >
428
+ 14
429
+ </div>
430
+ <div class="ga-calendar__day ga-calendar__day--current">15</div>
431
+ <div
432
+ class="ga-calendar__day ga-calendar__day--current ga-calendar__day--selected"
433
+ >
434
+ 16
435
+ </div>
436
+ <div
437
+ class="ga-calendar__day ga-calendar__day--current ga-calendar__day--disabled"
438
+ >
439
+ 17
440
+ </div>
441
+ <div
442
+ class="ga-calendar__day ga-calendar__day--current ga-calendar__day--selected ga-calendar__day--disabled"
443
+ >
444
+ 18
445
+ </div>
446
+ <div class="ga-calendar__day">19</div>
447
+ <div
448
+ class="ga-calendar__day ga-calendar__day--current ga-calendar__day--weekend"
449
+ >
450
+ 20
451
+ </div>
452
+ <div
453
+ class="ga-calendar__day ga-calendar__day--current ga-calendar__day--weekend"
454
+ >
455
+ 21
456
+ </div>
457
+ <div class="ga-calendar__day">22</div>
458
+ <div class="ga-calendar__day">23</div>
459
+ <div class="ga-calendar__day">24</div>
460
+ <div class="ga-calendar__day">25</div>
461
+ <div class="ga-calendar__day">26</div>
462
+ <div class="ga-calendar__day">27</div>
463
+ <div class="ga-calendar__day">28</div>
464
+ <div class="ga-calendar__day">29</div>
465
+ <div class="ga-calendar__day">30</div>
466
+ </div>
467
+ </div>
468
+ ```