@vsn-ux/gaia-styles 0.6.2 → 0.6.3

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 (10) hide show
  1. package/dist/all-10pt.css +715 -0
  2. package/dist/all-no-reset-10pt.css +715 -0
  3. package/dist/all-no-reset.css +715 -0
  4. package/dist/all.css +715 -0
  5. package/dist/components/side-navigation.css +842 -0
  6. package/dist/components.css +715 -0
  7. package/dist/docs/SideNavigation.md +524 -0
  8. package/package.json +1 -1
  9. package/src/styles/components/side-navigation.css +351 -0
  10. package/src/styles/components.css +1 -0
package/dist/docs/SideNavigation.md ADDED
@@ -0,0 +1,524 @@
1
+ # Side Navigation
2
+
3
+ A persistent sidebar navigation component with three sections: header (module switcher), scrollable body (tree menu), and footer (user context).
4
+
5
+ ## Visual Structure
6
+
7
+ ```
8
+ ga-side-navigation
9
+ ├── ga-side-navigation__header
10
+ │ ├── ga-side-navigation__switcher [--active]
11
+ │ │ ├── ga-side-navigation__switcher-title
12
+ │ │ └── ga-side-navigation__switcher-action
13
+ │ ├── ga-side-navigation__switcher-dropdown (optional, shown when switcher is active)
14
+ │ │ ├── ga-side-navigation__switcher-dropdown-header (optional)
15
+ │ │ └── ga-side-navigation__switcher-dropdown-item
16
+ │ │ ├── ga-side-navigation__switcher-dropdown-title
17
+ │ │ └── ga-side-navigation__switcher-dropdown-external (optional)
18
+ │ └── ga-input.ga-side-navigation__search (optional, uses ga-input with custom overrides)
19
+ │ └── ga-side-navigation__search-shortcut (optional, keyboard shortcut badge)
20
+ ├── ga-side-navigation__body
21
+ │ ├── ga-side-navigation__item [--active|--disabled|--level-2|--level-3|--level-4]
22
+ │ │ ├── ga-side-navigation__item-icon (optional, expand/collapse chevron for parents or decorative icon)
23
+ │ │ ├── ga-side-navigation__item-content
24
+ │ │ │ ├── ga-side-navigation__item-label
25
+ │ │ │ └── ga-side-navigation__item-description (optional)
26
+ │ │ └── ga-side-navigation__item-external (optional)
27
+ │ ├── ga-side-navigation__recent-title (optional)
28
+ │ ├── ga-side-navigation__recent-item
29
+ │ │ ├── ga-side-navigation__recent-item-icon (optional)
30
+ │ │ └── ga-side-navigation__recent-item-content
31
+ │ │ ├── ga-side-navigation__recent-item-label
32
+ │ │ └── ga-side-navigation__recent-item-description (optional)
33
+ │ ├── ga-side-navigation__search-results-title (optional)
34
+ │ └── ga-side-navigation__search-results-item
35
+ │ ├── ga-side-navigation__search-results-item-content
36
+ │ │ ├── ga-side-navigation__search-results-item-label
37
+ │ │ └── ga-side-navigation__search-results-item-description (optional)
38
+ │ └── ga-side-navigation__search-results-item-external (optional)
39
+ └── ga-side-navigation__footer
40
+ ├── ga-side-navigation__footer-dropdown (optional, shown when user is active)
41
+ │ └── ga-side-navigation__footer-dropdown-item [--disabled]
42
+ │ ├── ga-side-navigation__footer-dropdown-icon (optional)
43
+ │ └── ga-side-navigation__footer-dropdown-title
44
+ └── ga-side-navigation__user [--active]
45
+ ├── ga-side-navigation__user-avatar
46
+ ├── ga-side-navigation__user-name
47
+ └── ga-side-navigation__user-action
48
+ ```
49
+
50
+ ## Elements Hierarchy
51
+
52
+ ### Core Block
53
+
54
+ - `ga-side-navigation` - Main container, full-height sidebar layout
55
+
56
+ ### Header
57
+
58
+ - `ga-side-navigation__header` - Top section, vertical stack for switcher and other elements (e.g., search)
59
+ - `ga-side-navigation__switcher` - Module switcher row
60
+ - `ga-side-navigation__switcher-title` - Module name
61
+ - `ga-side-navigation__switcher-action` - Chevron icon indicating the switcher can be toggled
62
+ - `ga-side-navigation__switcher-dropdown` - Dropdown container, absolutely positioned below the switcher
63
+ - `ga-side-navigation__switcher-dropdown-header` - Dropdown heading (e.g., "Choose a service")
64
+ - `ga-side-navigation__switcher-dropdown-item` - Individual module option
65
+ - `ga-side-navigation__switcher-dropdown-title` - Module name
66
+ - `ga-side-navigation__switcher-dropdown-external` - External link icon (optional)
67
+ - `ga-side-navigation__search` - Modifier applied alongside `ga-input` to override styles. Uses standard `ga-input` structure internally.
68
+ - `ga-side-navigation__search-shortcut` - Keyboard shortcut badge inside the search input
69
+
70
+ ### Body - Navigation Items
71
+
72
+ - `ga-side-navigation__body` - Scrollable content area for navigation items
73
+ - `ga-side-navigation__item` - Individual navigation item
74
+ - `ga-side-navigation__item-icon` - Icon for the item (expand/collapse chevron for parents, or decorative icon; not both)
75
+ - `ga-side-navigation__item-content` - Wrapper for text content
76
+ - `ga-side-navigation__item-label` - Primary text
77
+ - `ga-side-navigation__item-description` - Secondary text
78
+ - `ga-side-navigation__item-external` - External link icon, positioned far right (optional)
79
+
80
+ ### Body - Recently Viewed
81
+
82
+ - `ga-side-navigation__recent-title` - Section heading (e.g., "Recently viewed")
83
+ - `ga-side-navigation__recent-item` - Individual recently viewed item
84
+ - `ga-side-navigation__recent-item-icon` - Icon for the item
85
+ - `ga-side-navigation__recent-item-content` - Wrapper for text content
86
+ - `ga-side-navigation__recent-item-label` - Primary text
87
+ - `ga-side-navigation__recent-item-description` - Secondary text (e.g., breadcrumb path)
88
+
89
+ ### Body - Search Results
90
+
91
+ - `ga-side-navigation__search-results-title` - Section heading (e.g., "Search results")
92
+ - `ga-side-navigation__search-results-item` - Individual search result item
93
+ - `ga-side-navigation__search-results-item-content` - Wrapper for text content
94
+ - `ga-side-navigation__search-results-item-label` - Primary text
95
+ - `ga-side-navigation__search-results-item-description` - Secondary text (e.g., breadcrumb path)
96
+ - `ga-side-navigation__search-results-item-external` - External link icon, positioned far right (optional)
97
+
98
+ ### Footer
99
+
100
+ - `ga-side-navigation__footer` - Positioning container for user row and its dropdown
101
+ - `ga-side-navigation__user` - User context row, tabbable and hoverable
102
+ - `ga-side-navigation__user-avatar` - User avatar image
103
+ - `ga-side-navigation__user-name` - User display name
104
+ - `ga-side-navigation__user-action` - Chevron icon
105
+ - `ga-side-navigation__footer-dropdown` - Dropdown container, positioned upward above the footer
106
+ - `ga-side-navigation__footer-dropdown-item` - Individual dropdown option
107
+ - `ga-side-navigation__footer-dropdown-icon` - Item icon (optional)
108
+ - `ga-side-navigation__footer-dropdown-title` - Option label
109
+
110
+ ### Modifiers
111
+
112
+ - `ga-side-navigation__item--active` - Currently selected navigation item
113
+ - `ga-side-navigation__item--expanded` - Expanded parent item (shows children)
114
+ - `ga-side-navigation__item--disabled` - Non-interactive item
115
+ - `ga-side-navigation__item--level-2` - Second-level tree item
116
+ - `ga-side-navigation__item--level-3` - Third-level tree item
117
+ - `ga-side-navigation__item--level-4` - Fourth-level tree item
118
+
119
+ ## Examples
120
+
121
+ ### Default
122
+
123
+ ```html
124
+ <div class="ga-side-navigation" style="height: 600px">
125
+ <div class="ga-side-navigation__header">
126
+ <div tabindex="0" class="ga-side-navigation__switcher">
127
+ <span class="ga-side-navigation__switcher-title">Dashboard</span>
128
+ <span class="ga-side-navigation__switcher-action">
129
+ <!-- icon: chevrons-up-down, size=16 -->
130
+ </span>
131
+ </div>
132
+ <div class="ga-input ga-side-navigation__search">
133
+ <!-- icon: search, size=16 -->
134
+ <input type="search" placeholder="Search" />
135
+ <kbd class="ga-side-navigation__search-shortcut">⌘ K</kbd>
136
+ </div>
137
+ </div>
138
+ <div class="ga-side-navigation__body">
139
+ <div class="ga-side-navigation__item ga-side-navigation__item--active">
140
+ <!-- icon: layout-grid, size=16, class="ga-side-navigation__item-icon" -->
141
+ <div class="ga-side-navigation__item-content">
142
+ <div class="ga-side-navigation__item-label">My overview</div>
143
+ </div>
144
+ </div>
145
+ <div class="ga-side-navigation__recent-title">Recently viewed</div>
146
+ <div class="ga-side-navigation__recent-item">
147
+ <!-- icon: history, size=16, class="ga-side-navigation__recent-item-icon" -->
148
+ <div class="ga-side-navigation__recent-item-content">
149
+ <div class="ga-side-navigation__recent-item-label">Insights</div>
150
+ <div class="ga-side-navigation__recent-item-description">
151
+ Business Intelligence › Analytics
152
+ </div>
153
+ </div>
154
+ </div>
155
+ <div class="ga-side-navigation__recent-item">
156
+ <!-- icon: history, size=16, class="ga-side-navigation__recent-item-icon" -->
157
+ <div class="ga-side-navigation__recent-item-content">
158
+ <div class="ga-side-navigation__recent-item-label">
159
+ Voucher registration
160
+ </div>
161
+ <div class="ga-side-navigation__recent-item-description">
162
+ Finance › Accounts
163
+ </div>
164
+ </div>
165
+ </div>
166
+ <div class="ga-side-navigation__recent-item">
167
+ <!-- icon: history, size=16, class="ga-side-navigation__recent-item-icon" -->
168
+ <div class="ga-side-navigation__recent-item-content">
169
+ <div class="ga-side-navigation__recent-item-label">Stock count</div>
170
+ <div class="ga-side-navigation__recent-item-description">
171
+ Warehouse › Inventory management › St...
172
+ </div>
173
+ </div>
174
+ </div>
175
+ <div class="ga-side-navigation__recent-item">
176
+ <!-- icon: history, size=16, class="ga-side-navigation__recent-item-icon" -->
177
+ <div class="ga-side-navigation__recent-item-content">
178
+ <div class="ga-side-navigation__recent-item-label">My approvals</div>
179
+ <div class="ga-side-navigation__recent-item-description">
180
+ Approval › My tasks
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ <div class="ga-side-navigation__footer">
186
+ <div tabindex="0" class="ga-side-navigation__user">
187
+ <img
188
+ class="ga-side-navigation__user-avatar"
189
+ src="https://i.pravatar.cc/40?img=49"
190
+ alt="Avatar"
191
+ />
192
+ <span class="ga-side-navigation__user-name">Anna Andersson</span>
193
+ <span class="ga-side-navigation__user-action">
194
+ <!-- icon: chevrons-up-down, size=16 -->
195
+ </span>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ ```
200
+
201
+ ### Search Results
202
+
203
+ ```html
204
+ <div class="ga-side-navigation" style="height: 600px">
205
+ <div class="ga-side-navigation__header">
206
+ <div tabindex="0" class="ga-side-navigation__switcher">
207
+ <span class="ga-side-navigation__switcher-title">Dashboard</span>
208
+ <span class="ga-side-navigation__switcher-action">
209
+ <!-- icon: chevrons-up-down, size=16 -->
210
+ </span>
211
+ </div>
212
+ <div class="ga-input ga-side-navigation__search">
213
+ <!-- icon: search, size=16 -->
214
+ <input type="search" placeholder="Search" value="voucher" />
215
+ <kbd class="ga-side-navigation__search-shortcut">⌘ K</kbd>
216
+ </div>
217
+ </div>
218
+ <div class="ga-side-navigation__body">
219
+ <div class="ga-side-navigation__search-results-title">3 results</div>
220
+ <div tabindex="0" class="ga-side-navigation__search-results-item">
221
+ <div class="ga-side-navigation__search-results-item-content">
222
+ <div class="ga-side-navigation__search-results-item-label">
223
+ <strong>Voucher</strong>
224
+ registration
225
+ </div>
226
+ <div class="ga-side-navigation__search-results-item-description">
227
+ Finance › Accounts
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <div tabindex="0" class="ga-side-navigation__search-results-item">
232
+ <div class="ga-side-navigation__search-results-item-content">
233
+ <div class="ga-side-navigation__search-results-item-label">
234
+ <strong>Voucher</strong>
235
+ overview
236
+ </div>
237
+ <div class="ga-side-navigation__search-results-item-description">
238
+ Finance › Reports
239
+ </div>
240
+ </div>
241
+ </div>
242
+ <div tabindex="0" class="ga-side-navigation__search-results-item">
243
+ <div class="ga-side-navigation__search-results-item-content">
244
+ <div class="ga-side-navigation__search-results-item-label">
245
+ Templates for
246
+ <strong>Voucher</strong>
247
+ </div>
248
+ <div class="ga-side-navigation__search-results-item-description">
249
+ Finance › Settings
250
+ </div>
251
+ </div>
252
+ <!-- icon: external-link, size=16, class="ga-side-navigation__search-results-item-external" -->
253
+ </div>
254
+ </div>
255
+ <div class="ga-side-navigation__footer">
256
+ <div tabindex="0" class="ga-side-navigation__user">
257
+ <img
258
+ class="ga-side-navigation__user-avatar"
259
+ src="https://i.pravatar.cc/40?img=49"
260
+ alt="Avatar"
261
+ />
262
+ <span class="ga-side-navigation__user-name">Anna Andersson</span>
263
+ <span class="ga-side-navigation__user-action">
264
+ <!-- icon: chevrons-up-down, size=16 -->
265
+ </span>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ ```
270
+
271
+ ### Minimal
272
+
273
+ ```html
274
+ <div class="ga-side-navigation" style="height: 400px">
275
+ <div class="ga-side-navigation__header">
276
+ <div tabindex="0" class="ga-side-navigation__switcher">
277
+ <span class="ga-side-navigation__switcher-title">App</span>
278
+ <span class="ga-side-navigation__switcher-action">
279
+ <!-- icon: chevrons-up-down, size=16 -->
280
+ </span>
281
+ </div>
282
+ </div>
283
+ <div class="ga-side-navigation__body">
284
+ <div class="ga-side-navigation__item ga-side-navigation__item--active">
285
+ <span class="ga-side-navigation__item-icon"></span>
286
+ <div class="ga-side-navigation__item-content">
287
+ <div class="ga-side-navigation__item-label">Home</div>
288
+ </div>
289
+ </div>
290
+ <div class="ga-side-navigation__item">
291
+ <span class="ga-side-navigation__item-icon"></span>
292
+ <div class="ga-side-navigation__item-content">
293
+ <div class="ga-side-navigation__item-label">Settings</div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ <div class="ga-side-navigation__footer">
298
+ <div tabindex="0" class="ga-side-navigation__user">
299
+ <img
300
+ class="ga-side-navigation__user-avatar"
301
+ src="https://i.pravatar.cc/40?img=49"
302
+ alt="Avatar"
303
+ />
304
+ <span class="ga-side-navigation__user-name">Anna Andersson</span>
305
+ <span class="ga-side-navigation__user-action">
306
+ <!-- icon: chevrons-up-down, size=16 -->
307
+ </span>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ ```
312
+
313
+ ### With Tree Menu
314
+
315
+ ```html
316
+ <div class="ga-side-navigation" style="height: 450px">
317
+ <div class="ga-side-navigation__header">
318
+ <div tabindex="0" class="ga-side-navigation__switcher">
319
+ <span class="ga-side-navigation__switcher-title">Finance</span>
320
+ <span class="ga-side-navigation__switcher-action">
321
+ <!-- icon: chevrons-up-down, size=16 -->
322
+ </span>
323
+ </div>
324
+ </div>
325
+ <div class="ga-side-navigation__body">
326
+ <div class="ga-side-navigation__item ga-side-navigation__item--expanded">
327
+ <span class="ga-side-navigation__item-icon">
328
+ <!-- icon: chevron-down, size=16 -->
329
+ </span>
330
+ <div class="ga-side-navigation__item-content">
331
+ <div class="ga-side-navigation__item-label">Accounts</div>
332
+ </div>
333
+ </div>
334
+ <div
335
+ class="ga-side-navigation__item ga-side-navigation__item--level-2 ga-side-navigation__item--expanded"
336
+ >
337
+ <span class="ga-side-navigation__item-icon">
338
+ <!-- icon: chevron-down, size=16 -->
339
+ </span>
340
+ <div class="ga-side-navigation__item-content">
341
+ <div class="ga-side-navigation__item-label">General ledger</div>
342
+ </div>
343
+ </div>
344
+ <div
345
+ class="ga-side-navigation__item ga-side-navigation__item--level-3 ga-side-navigation__item--active"
346
+ >
347
+ <span class="ga-side-navigation__item-icon"></span>
348
+ <div class="ga-side-navigation__item-content">
349
+ <div class="ga-side-navigation__item-label">Journal entries</div>
350
+ </div>
351
+ </div>
352
+ <div class="ga-side-navigation__item ga-side-navigation__item--level-3">
353
+ <span class="ga-side-navigation__item-icon"></span>
354
+ <div class="ga-side-navigation__item-content">
355
+ <div class="ga-side-navigation__item-label">Account balances</div>
356
+ </div>
357
+ </div>
358
+ <div class="ga-side-navigation__item ga-side-navigation__item--level-2">
359
+ <span class="ga-side-navigation__item-icon">
360
+ <!-- icon: chevron-right, size=16 -->
361
+ </span>
362
+ <div class="ga-side-navigation__item-content">
363
+ <div class="ga-side-navigation__item-label">Accounts payable</div>
364
+ </div>
365
+ </div>
366
+ <div class="ga-side-navigation__item">
367
+ <span class="ga-side-navigation__item-icon"></span>
368
+ <div class="ga-side-navigation__item-content">
369
+ <div class="ga-side-navigation__item-label">Reporting</div>
370
+ </div>
371
+ <!-- icon: external-link, size=16, class="ga-side-navigation__item-external" -->
372
+ </div>
373
+ <div class="ga-side-navigation__item">
374
+ <span class="ga-side-navigation__item-icon"></span>
375
+ <div class="ga-side-navigation__item-content">
376
+ <div class="ga-side-navigation__item-label">Settings</div>
377
+ </div>
378
+ </div>
379
+ <div class="ga-side-navigation__item ga-side-navigation__item--disabled">
380
+ <span class="ga-side-navigation__item-icon"></span>
381
+ <div class="ga-side-navigation__item-content">
382
+ <div class="ga-side-navigation__item-label">Archive</div>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ <div class="ga-side-navigation__footer">
387
+ <div tabindex="0" class="ga-side-navigation__user">
388
+ <img
389
+ class="ga-side-navigation__user-avatar"
390
+ src="https://i.pravatar.cc/40?img=49"
391
+ alt="Avatar"
392
+ />
393
+ <span class="ga-side-navigation__user-name">Anna Andersson</span>
394
+ <span class="ga-side-navigation__user-action">
395
+ <!-- icon: chevrons-up-down, size=16 -->
396
+ </span>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ ```
401
+
402
+ ### Switcher Open
403
+
404
+ ```html
405
+ <div class="ga-side-navigation" style="height: 400px">
406
+ <div class="ga-side-navigation__header">
407
+ <div
408
+ tabindex="0"
409
+ class="ga-side-navigation__switcher ga-side-navigation__switcher--active"
410
+ >
411
+ <span class="ga-side-navigation__switcher-title">Dashboard</span>
412
+ <span class="ga-side-navigation__switcher-action">
413
+ <!-- icon: chevron-down, size=16 -->
414
+ </span>
415
+ </div>
416
+ <div class="ga-side-navigation__switcher-dropdown">
417
+ <div class="ga-side-navigation__switcher-dropdown-header">
418
+ Choose a service
419
+ </div>
420
+ <div tabindex="0" class="ga-side-navigation__switcher-dropdown-item">
421
+ <span class="ga-side-navigation__switcher-dropdown-title">Finance</span>
422
+ </div>
423
+ <div tabindex="0" class="ga-side-navigation__switcher-dropdown-item">
424
+ <span class="ga-side-navigation__switcher-dropdown-title">
425
+ Analytics
426
+ </span>
427
+ </div>
428
+ <div tabindex="0" class="ga-side-navigation__switcher-dropdown-item">
429
+ <span class="ga-side-navigation__switcher-dropdown-title">HR</span>
430
+ <!-- icon: external-link, size=16, class="ga-side-navigation__switcher-dropdown-external" -->
431
+ </div>
432
+ </div>
433
+ </div>
434
+ <div class="ga-side-navigation__body">
435
+ <div class="ga-side-navigation__item ga-side-navigation__item--active">
436
+ <span class="ga-side-navigation__item-icon"></span>
437
+ <div class="ga-side-navigation__item-content">
438
+ <div class="ga-side-navigation__item-label">Home</div>
439
+ </div>
440
+ </div>
441
+ <div class="ga-side-navigation__item">
442
+ <span class="ga-side-navigation__item-icon"></span>
443
+ <div class="ga-side-navigation__item-content">
444
+ <div class="ga-side-navigation__item-label">Settings</div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ <div class="ga-side-navigation__footer">
449
+ <div tabindex="0" class="ga-side-navigation__user">
450
+ <img
451
+ class="ga-side-navigation__user-avatar"
452
+ src="https://i.pravatar.cc/40?img=49"
453
+ alt="Avatar"
454
+ />
455
+ <span class="ga-side-navigation__user-name">Anna Andersson</span>
456
+ <span class="ga-side-navigation__user-action">
457
+ <!-- icon: chevrons-up-down, size=16 -->
458
+ </span>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ ```
463
+
464
+ ### Footer Open
465
+
466
+ ```html
467
+ <div class="ga-side-navigation" style="height: 400px">
468
+ <div class="ga-side-navigation__header">
469
+ <div tabindex="0" class="ga-side-navigation__switcher">
470
+ <span class="ga-side-navigation__switcher-title">Dashboard</span>
471
+ <span class="ga-side-navigation__switcher-action">
472
+ <!-- icon: chevrons-up-down, size=16 -->
473
+ </span>
474
+ </div>
475
+ </div>
476
+ <div class="ga-side-navigation__body">
477
+ <div class="ga-side-navigation__item ga-side-navigation__item--active">
478
+ <span class="ga-side-navigation__item-icon"></span>
479
+ <div class="ga-side-navigation__item-content">
480
+ <div class="ga-side-navigation__item-label">Home</div>
481
+ </div>
482
+ </div>
483
+ <div class="ga-side-navigation__item">
484
+ <span class="ga-side-navigation__item-icon"></span>
485
+ <div class="ga-side-navigation__item-content">
486
+ <div class="ga-side-navigation__item-label">Settings</div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ <div class="ga-side-navigation__footer">
491
+ <div class="ga-side-navigation__footer-dropdown">
492
+ <div tabindex="0" class="ga-side-navigation__footer-dropdown-item">
493
+ <!-- icon: user, size=16, class="ga-side-navigation__footer-dropdown-icon" -->
494
+ <span class="ga-side-navigation__footer-dropdown-title">Profile</span>
495
+ </div>
496
+ <div tabindex="0" class="ga-side-navigation__footer-dropdown-item">
497
+ <!-- icon: settings, size=16, class="ga-side-navigation__footer-dropdown-icon" -->
498
+ <span class="ga-side-navigation__footer-dropdown-title">Settings</span>
499
+ </div>
500
+ <div
501
+ tabindex="0"
502
+ class="ga-side-navigation__footer-dropdown-item ga-side-navigation__footer-dropdown-item--disabled"
503
+ >
504
+ <!-- icon: log-out, size=16, class="ga-side-navigation__footer-dropdown-icon" -->
505
+ <span class="ga-side-navigation__footer-dropdown-title">Log out</span>
506
+ </div>
507
+ </div>
508
+ <div
509
+ tabindex="0"
510
+ class="ga-side-navigation__user ga-side-navigation__user--active"
511
+ >
512
+ <img
513
+ class="ga-side-navigation__user-avatar"
514
+ src="https://i.pravatar.cc/40?img=49"
515
+ alt="Avatar"
516
+ />
517
+ <span class="ga-side-navigation__user-name">Anna Andersson</span>
518
+ <span class="ga-side-navigation__user-action">
519
+ <!-- icon: chevron-up, size=16 -->
520
+ </span>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vsn-ux/gaia-styles",
3
- "version": "0.6.2",
3
+ "version": "0.6.3",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "scripts": {