@dnanpm/ui-components 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/components/Accordion/Accordion.css +6 -3
  2. package/dist/components/AccordionItem/AccordionItem.css +6 -3
  3. package/dist/components/Breadcrumb/Breadcrumb.css +6 -3
  4. package/dist/components/Button/Button.css +2 -3
  5. package/dist/components/ButtonCard/ButtonCard.css +2 -3
  6. package/dist/components/ContentCard/ContentCard.cjs +96 -0
  7. package/dist/components/ContentCard/ContentCard.cjs.map +1 -0
  8. package/dist/components/ContentCard/ContentCard.css +249 -0
  9. package/dist/components/ContentCard/ContentCard.d.ts +3 -0
  10. package/dist/components/ContentCard/ContentCard.d.ts.map +1 -0
  11. package/dist/components/ContentCard/ContentCard.js +96 -0
  12. package/dist/components/ContentCard/ContentCard.js.map +1 -0
  13. package/dist/components/ContentCard/ContentCard.module.css.cjs +24 -0
  14. package/dist/components/ContentCard/ContentCard.module.css.cjs.map +1 -0
  15. package/dist/components/ContentCard/ContentCard.module.css.js +25 -0
  16. package/dist/components/ContentCard/ContentCard.module.css.js.map +1 -0
  17. package/dist/components/ContentCard/ContentCard.types.d.ts +99 -0
  18. package/dist/components/ContentCard/ContentCard.types.d.ts.map +1 -0
  19. package/dist/components/ContentCard/index.d.ts +3 -0
  20. package/dist/components/ContentCard/index.d.ts.map +1 -0
  21. package/dist/components/Drawer/Drawer.css +2 -3
  22. package/dist/components/Footer/Footer.css +6 -3
  23. package/dist/components/FunctionButton/FunctionButton.css +2 -3
  24. package/dist/components/Hero/Hero.cjs +24 -26
  25. package/dist/components/Hero/Hero.cjs.map +1 -1
  26. package/dist/components/Hero/Hero.css +81 -74
  27. package/dist/components/Hero/Hero.js +24 -26
  28. package/dist/components/Hero/Hero.js.map +1 -1
  29. package/dist/components/Hero/Hero.module.css.cjs +20 -17
  30. package/dist/components/Hero/Hero.module.css.cjs.map +1 -1
  31. package/dist/components/Hero/Hero.module.css.js +20 -17
  32. package/dist/components/Hero/Hero.module.css.js.map +1 -1
  33. package/dist/components/IconButton/IconButton.css +2 -3
  34. package/dist/components/Label/Label.css +2 -3
  35. package/dist/components/MainNavigation/MainNavigation.cjs +407 -96
  36. package/dist/components/MainNavigation/MainNavigation.cjs.map +1 -1
  37. package/dist/components/MainNavigation/MainNavigation.css +255 -151
  38. package/dist/components/MainNavigation/MainNavigation.d.ts +1 -1
  39. package/dist/components/MainNavigation/MainNavigation.d.ts.map +1 -1
  40. package/dist/components/MainNavigation/MainNavigation.js +409 -98
  41. package/dist/components/MainNavigation/MainNavigation.js.map +1 -1
  42. package/dist/components/MainNavigation/MainNavigation.module.css.cjs +78 -68
  43. package/dist/components/MainNavigation/MainNavigation.module.css.cjs.map +1 -1
  44. package/dist/components/MainNavigation/MainNavigation.module.css.js +78 -68
  45. package/dist/components/MainNavigation/MainNavigation.module.css.js.map +1 -1
  46. package/dist/components/MainNavigation/MainNavigation.types.d.ts +64 -17
  47. package/dist/components/MainNavigation/MainNavigation.types.d.ts.map +1 -1
  48. package/dist/components/MainNavigation/MainNavigation.utils.cjs +20 -0
  49. package/dist/components/MainNavigation/MainNavigation.utils.cjs.map +1 -1
  50. package/dist/components/MainNavigation/MainNavigation.utils.d.ts +10 -1
  51. package/dist/components/MainNavigation/MainNavigation.utils.d.ts.map +1 -1
  52. package/dist/components/MainNavigation/MainNavigation.utils.js +20 -0
  53. package/dist/components/MainNavigation/MainNavigation.utils.js.map +1 -1
  54. package/dist/components/MainNavigation/index.d.ts +1 -1
  55. package/dist/components/MainNavigation/index.d.ts.map +1 -1
  56. package/dist/components/Modal/Modal.css +2 -3
  57. package/dist/components/Notification/Notification.css +6 -3
  58. package/dist/components/Pictograph/Pictograph.css +6 -3
  59. package/dist/components/Pictograph/PictographItem.css +6 -3
  60. package/dist/components/Quote/Quote.css +2 -3
  61. package/dist/components/Spinner/Spinner.css +6 -3
  62. package/dist/index.cjs +2 -0
  63. package/dist/index.cjs.map +1 -1
  64. package/dist/index.d.ts +3 -1
  65. package/dist/index.d.ts.map +1 -1
  66. package/dist/index.js +2 -0
  67. package/dist/index.js.map +1 -1
  68. package/dist/styles/utils/elevation.css +2 -3
  69. package/dist/styles/utils/focus.css +25 -22
  70. package/dist/styles/utils/focus.module.css.cjs +3 -3
  71. package/dist/styles/utils/focus.module.css.js +3 -3
  72. package/dist/styles/utils/overlay.css +2 -3
  73. package/dist/styles/utils/text-decoration.css +2 -3
  74. package/dist/styles.css +17 -7
  75. package/package.json +1 -1
@@ -1,5 +1,7 @@
1
- @layer dds-components {/* Root navigation container */
2
- ._main-navigation_1h5w0_2 {
1
+ @layer dds-base, dds-components;
2
+ @layer dds-components { @layer fallback, components; }
3
+ @layer dds-components.components{/* Root navigation container */
4
+ ._main-navigation_1n84f_2 {
3
5
  --_main-navigation-organization-strip-height: calc(30px + (2 * var(--spacing-space-4)));
4
6
  --_main-navigation-space-5: calc(var(--spacing-space-20) / 4);
5
7
  --_main-navigation-space-6: calc((3 * var(--spacing-space-8)) / 4);
@@ -33,7 +35,7 @@
33
35
  }
34
36
 
35
37
  @media (min-width: 1024px) {
36
- ._main-navigation_1h5w0_2 {
38
+ ._main-navigation_1n84f_2 {
37
39
  --_main-navigation-organization-strip-height: calc(32px + (2 * var(--spacing-space-8)));
38
40
  --_main-navigation-height: calc(
39
41
  var(--_main-navigation-organization-strip-height) +
@@ -42,16 +44,16 @@
42
44
  }
43
45
  }
44
46
 
45
- ._main-navigation--open_1h5w0_45 {
47
+ ._main-navigation--open_1n84f_45 {
46
48
  top: 0 !important;
47
49
  }
48
50
 
49
- ._main-navigation--overlay_1h5w0_49::before {
51
+ ._main-navigation--overlay_1n84f_49::before {
50
52
  z-index: var(--_main-navigation-z-overlay);
51
53
  }
52
54
 
53
55
  /* Organization strip (top bar) */
54
- ._main-navigation__organization-strip_1h5w0_54 {
56
+ ._main-navigation__organization-strip_1n84f_54 {
55
57
  position: relative;
56
58
  z-index: var(--_main-navigation-z-organization-strip);
57
59
  display: flex;
@@ -64,7 +66,7 @@
64
66
  }
65
67
 
66
68
  /* Organization links */
67
- ._main-navigation__organization-list_1h5w0_67 {
69
+ ._main-navigation__organization-list_1n84f_67 {
68
70
  display: flex;
69
71
  align-items: center;
70
72
  gap: var(--spacing-space-12);
@@ -73,7 +75,7 @@
73
75
  list-style: none;
74
76
  }
75
77
 
76
- ._main-navigation__organization-link_1h5w0_76 {
78
+ ._main-navigation__organization-link_1n84f_76 {
77
79
  display: inline-flex;
78
80
  min-width: 0;
79
81
  height: 20px;
@@ -104,7 +106,7 @@
104
106
  }
105
107
  }
106
108
 
107
- ._main-navigation__organization-link--current_1h5w0_107 {
109
+ ._main-navigation__organization-link--current_1n84f_107 {
108
110
  background: var(--color-semantic-surface-base);
109
111
  color: var(--color-semantic-foreground-default);
110
112
  font: var(--typography-body-sm-medium);
@@ -118,22 +120,22 @@
118
120
  }
119
121
 
120
122
  @container main-navigation (max-width: 320px) {
121
- ._main-navigation__organization-link_1h5w0_76,
122
- ._main-navigation__organization-link--current_1h5w0_107 {
123
+ ._main-navigation__organization-link_1n84f_76,
124
+ ._main-navigation__organization-link--current_1n84f_107 {
123
125
  font: var(--typography-body-xs);
124
126
  }
125
127
  }
126
128
 
127
129
  @container main-navigation (max-width: 1023px) {
128
130
  /* Keep short organization labels (e.g. DNA OYJ) on a single line. */
129
- ._main-navigation__organization-link_1h5w0_76,
130
- ._main-navigation__organization-link--current_1h5w0_107 {
131
+ ._main-navigation__organization-link_1n84f_76,
132
+ ._main-navigation__organization-link--current_1n84f_107 {
131
133
  white-space: nowrap;
132
134
  }
133
135
  }
134
136
 
135
137
  /* Main navbar */
136
- ._main-navigation__navbar_1h5w0_136 {
138
+ ._main-navigation__navbar_1n84f_136 {
137
139
  box-sizing: border-box;
138
140
  position: relative;
139
141
  z-index: var(--_main-navigation-z-navbar);
@@ -148,7 +150,7 @@
148
150
  }
149
151
 
150
152
  /* Logo area */
151
- ._main-navigation__logo_1h5w0_151 {
153
+ ._main-navigation__logo_1n84f_151 {
152
154
  position: relative;
153
155
  width: 60px;
154
156
  height: 60px;
@@ -156,17 +158,17 @@
156
158
  background: var(--color-semantic-surface-base);
157
159
  }
158
160
 
159
- ._main-navigation__logo_1h5w0_151 img {
161
+ ._main-navigation__logo_1n84f_151 img {
160
162
  width: 60px;
161
163
  height: 60px;
162
164
  }
163
165
 
164
- ._main-navigation__logo-mark_1h5w0_164 {
166
+ ._main-navigation__logo-mark_1n84f_164 {
165
167
  font: var(--typography-label-lg-bold);
166
168
  }
167
169
 
168
170
  /* Primary navigation */
169
- ._main-navigation__primary_1h5w0_169 {
171
+ ._main-navigation__primary_1n84f_169 {
170
172
  position: absolute;
171
173
  top: 100%;
172
174
  right: 0;
@@ -187,12 +189,12 @@
187
189
  visibility 0s linear 0.2s;
188
190
  }
189
191
 
190
- ._main-navigation_1h5w0_2:not(._main-navigation--menu-open_1h5w0_190):not(._main-navigation--menu-closing_1h5w0_190)
191
- ._main-navigation__primary_1h5w0_169 {
192
+ ._main-navigation_1n84f_2:not(._main-navigation--menu-open_1n84f_190):not(._main-navigation--menu-closing_1n84f_190)
193
+ ._main-navigation__primary_1n84f_169 {
192
194
  transition: none;
193
195
  }
194
196
 
195
- ._main-navigation__primary-list_1h5w0_195 {
197
+ ._main-navigation__primary-list_1n84f_195 {
196
198
  display: flex;
197
199
  align-items: stretch;
198
200
  flex-direction: column;
@@ -203,14 +205,14 @@
203
205
  }
204
206
 
205
207
  /* Primary navigation item states */
206
- ._main-navigation__item_1h5w0_206 {
208
+ ._main-navigation__item_1n84f_206 {
207
209
  min-width: 0;
208
210
  margin: 0;
209
211
  border-bottom: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-mid);
210
212
  }
211
213
 
212
- ._main-navigation__item-link_1h5w0_212,
213
- ._main-navigation__item-toggle_1h5w0_213 {
214
+ ._main-navigation__item-link_1n84f_212,
215
+ ._main-navigation__item-toggle_1n84f_213 {
214
216
  display: flex;
215
217
  width: 100%;
216
218
  height: auto;
@@ -236,8 +238,8 @@
236
238
  }
237
239
  }
238
240
 
239
- ._main-navigation__item-icon_1h5w0_239,
240
- ._main-navigation__top-level-toggle-icon_1h5w0_240 {
241
+ ._main-navigation__item-icon_1n84f_239,
242
+ ._main-navigation__top-level-toggle-icon_1n84f_240 {
241
243
  width: 24px;
242
244
  height: 24px;
243
245
  flex: 0 0 24px;
@@ -246,21 +248,21 @@
246
248
  transition: transform 0.2s ease-in-out;
247
249
  }
248
250
 
249
- ._main-navigation__item-toggle--open_1h5w0_249 {
250
- ._main-navigation__item-icon_1h5w0_239,
251
- ._main-navigation__top-level-toggle-icon_1h5w0_240 {
251
+ ._main-navigation__item-toggle--open_1n84f_249 {
252
+ ._main-navigation__item-icon_1n84f_239,
253
+ ._main-navigation__top-level-toggle-icon_1n84f_240 {
252
254
  transform: rotate(0deg);
253
255
  }
254
256
  }
255
257
 
256
- ._main-navigation__item-label_1h5w0_256 {
258
+ ._main-navigation__item-label_1n84f_256 {
257
259
  position: relative;
258
260
  display: inline-flex;
259
261
  align-items: center;
260
262
  align-self: stretch;
261
263
  }
262
264
 
263
- ._main-navigation__item-link--current_1h5w0_263 {
265
+ ._main-navigation__item-link--current_1n84f_263 {
264
266
  color: var(--color-semantic-interactive-primary-active);
265
267
  border-bottom-color: transparent;
266
268
 
@@ -268,7 +270,7 @@
268
270
  color: var(--color-semantic-interactive-primary-hover);
269
271
  }
270
272
 
271
- ._main-navigation__item-label_1h5w0_256::after {
273
+ ._main-navigation__item-label_1n84f_256::after {
272
274
  content: '';
273
275
  position: absolute;
274
276
  right: 0;
@@ -280,7 +282,7 @@
280
282
  }
281
283
 
282
284
  /* Utility icon navigation */
283
- ._main-navigation__icon-nav_1h5w0_283 {
285
+ ._main-navigation__icon-nav_1n84f_283 {
284
286
  display: flex;
285
287
  align-items: center;
286
288
  gap: var(--_main-navigation-space-10);
@@ -289,7 +291,7 @@
289
291
  height: 60px;
290
292
  }
291
293
 
292
- ._main-navigation__icon-nav-item_1h5w0_292 {
294
+ ._main-navigation__icon-nav-item_1n84f_292 {
293
295
  position: relative;
294
296
  display: inline-flex;
295
297
  flex-direction: column;
@@ -314,11 +316,15 @@
314
316
  }
315
317
  }
316
318
 
317
- ._main-navigation__icon-nav-label_1h5w0_317 {
319
+ ._main-navigation__icon-nav-item--active_1n84f_317 {
320
+ color: var(--color-semantic-foreground-primary-strong);
321
+ }
322
+
323
+ ._main-navigation__icon-nav-label_1n84f_321 {
318
324
  display: none;
319
325
  }
320
326
 
321
- ._main-navigation__icon-nav-item--counter_1h5w0_321 {
327
+ ._main-navigation__icon-nav-item--counter_1n84f_325 {
322
328
  position: absolute;
323
329
  top: var(--_main-navigation-space-6);
324
330
  right: 0;
@@ -338,23 +344,122 @@
338
344
  line-height: 14px;
339
345
  }
340
346
 
347
+ /* Utility control dropdowns (search, language, login) */
348
+ ._main-navigation__utility_1n84f_346 {
349
+ position: relative;
350
+ display: inline-flex;
351
+ align-items: center;
352
+ height: 100%;
353
+ }
354
+
355
+ ._main-navigation__dropdown-caret_1n84f_353 {
356
+ position: absolute;
357
+ top: 100%;
358
+ left: 50%;
359
+ z-index: calc(var(--_main-navigation-z-desktop-panel) + 1);
360
+ width: 12px;
361
+ height: 12px;
362
+ margin-top: -6px;
363
+ background: var(--color-semantic-surface-base);
364
+ border-top: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
365
+ border-left: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
366
+ transform: translateX(-50%) rotate(45deg);
367
+ pointer-events: none;
368
+ }
369
+
370
+ ._main-navigation__dropdown_1n84f_353 {
371
+ position: absolute;
372
+ top: 100%;
373
+ z-index: var(--_main-navigation-z-desktop-panel);
374
+ padding: var(--spacing-space-16) var(--spacing-space-32);
375
+ border: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
376
+ border-radius: 0 0 var(--radius-semantic-md) var(--radius-semantic-md);
377
+ background: var(--color-semantic-surface-base);
378
+ animation: _show-main-navigation-dropdown_1n84f_1 0.2s forwards;
379
+ }
380
+
381
+ ._main-navigation__dropdown--language_1n84f_379 {
382
+ left: 50%;
383
+ right: auto;
384
+ max-width: calc(100vw - var(--spacing-space-16));
385
+ transform: translateX(-50%);
386
+ }
387
+
388
+ ._main-navigation__dropdown--login_1n84f_386 {
389
+ right: 0;
390
+ width: 320px;
391
+ padding: var(--spacing-space-32);
392
+ max-width: calc(100vw - var(--spacing-space-16));
393
+ }
394
+
395
+ ._main-navigation__dropdown--search_1n84f_393 {
396
+ left: 0;
397
+ right: 0;
398
+ border-top: none;
399
+ }
400
+
401
+ ._main-navigation__language-list_1n84f_399 {
402
+ margin: 0;
403
+ padding: 0;
404
+ list-style: none;
405
+ display: grid;
406
+ gap: var(--spacing-space-8);
407
+ }
408
+
409
+ ._main-navigation__language-list-item_1n84f_407 {
410
+ margin: 0;
411
+ }
412
+
413
+ ._main-navigation__language-link_1n84f_411 {
414
+ display: block;
415
+ color: var(--color-semantic-foreground-default);
416
+ font: var(--typography-body-sm-medium);
417
+ text-decoration: none;
418
+
419
+ &:hover,
420
+ &:focus-visible {
421
+ color: var(--color-semantic-interactive-primary-hover);
422
+ }
423
+ }
424
+
425
+ @media (max-width: 479px) {
426
+ ._main-navigation__dropdown--login_1n84f_386 {
427
+ position: fixed;
428
+ top: var(--_main-navigation-height);
429
+ left: 0;
430
+ right: 0;
431
+ width: auto;
432
+ max-width: none;
433
+ }
434
+ }
435
+
436
+ @keyframes _show-main-navigation-dropdown_1n84f_1 {
437
+ from {
438
+ opacity: 0.8;
439
+ }
440
+
441
+ to {
442
+ opacity: 1;
443
+ }
444
+ }
445
+
341
446
  /* Navigation panels and columns */
342
- ._main-navigation__panel_1h5w0_342 {
447
+ ._main-navigation__panel_1n84f_445 {
343
448
  border-bottom: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
344
449
  background: var(--color-semantic-surface-base);
345
450
  }
346
451
 
347
- ._main-navigation__panel-content_1h5w0_347 {
452
+ ._main-navigation__panel-content_1n84f_450 {
348
453
  display: grid;
349
454
  grid-template-columns: 1fr;
350
455
  }
351
456
 
352
- ._main-navigation__panel-main_1h5w0_352 {
457
+ ._main-navigation__panel-main_1n84f_455 {
353
458
  min-width: 0;
354
459
  }
355
460
 
356
- ._main-navigation__mobile-panel-content_1h5w0_356,
357
- ._main-navigation__mobile-level-2-content_1h5w0_357 {
461
+ ._main-navigation__mobile-panel-content_1n84f_459,
462
+ ._main-navigation__mobile-level-2-content_1n84f_460 {
358
463
  position: relative;
359
464
  isolation: isolate;
360
465
  display: flex;
@@ -365,7 +470,7 @@
365
470
  background: var(--color-semantic-surface-neutral-soft);
366
471
  }
367
472
 
368
- ._main-navigation__mobile-back-item_1h5w0_368 {
473
+ ._main-navigation__mobile-back-item_1n84f_471 {
369
474
  display: inline-flex;
370
475
  width: 100%;
371
476
  align-items: center;
@@ -378,43 +483,43 @@
378
483
  text-align: left;
379
484
  }
380
485
 
381
- ._main-navigation__mobile-back-icon_1h5w0_381 {
486
+ ._main-navigation__mobile-back-icon_1n84f_484 {
382
487
  transform: rotate(180deg);
383
488
  color: var(--color-semantic-foreground-primary-strong);
384
489
  flex: 0 0 24px;
385
490
  }
386
491
 
387
- ._main-navigation__mobile-back-label_1h5w0_387 {
492
+ ._main-navigation__mobile-back-label_1n84f_490 {
388
493
  font: var(--typography-body-md-bold);
389
494
  color: var(--color-semantic-foreground-primary-strong);
390
495
  }
391
496
 
392
- ._main-navigation__mobile-feature-links_1h5w0_392,
393
- ._main-navigation__mobile-level-2-feature-links_1h5w0_393 {
497
+ ._main-navigation__mobile-feature-links_1n84f_495,
498
+ ._main-navigation__mobile-level-2-feature-links_1n84f_496 {
394
499
  background: var(--color-semantic-surface-neutral-mid);
395
500
  padding-block: var(--spacing-space-8);
396
501
  }
397
502
 
398
- ._main-navigation__mobile-feature-list_1h5w0_398,
399
- ._main-navigation__mobile-level-2-feature-list_1h5w0_399 {
503
+ ._main-navigation__mobile-feature-list_1n84f_501,
504
+ ._main-navigation__mobile-level-2-feature-list_1n84f_502 {
400
505
  margin: 0;
401
506
  padding: 0;
402
507
  list-style: none;
403
508
  display: grid;
404
509
  grid-template-columns: repeat(2, minmax(0, 1fr));
405
510
 
406
- ._main-navigation__panel-list-item_1h5w0_406 {
511
+ ._main-navigation__panel-list-item_1n84f_509 {
407
512
  padding: var(--spacing-space-8) var(--spacing-space-20);
408
513
  }
409
514
  }
410
515
 
411
- ._main-navigation__mobile-level-2-feature-list_1h5w0_399 {
412
- ._main-navigation__mobile-level-2-feature-list-item_1h5w0_412 {
516
+ ._main-navigation__mobile-level-2-feature-list_1n84f_502 {
517
+ ._main-navigation__mobile-level-2-feature-list-item_1n84f_515 {
413
518
  padding: var(--spacing-space-8) var(--spacing-space-20);
414
519
  }
415
520
  }
416
521
 
417
- ._main-navigation__mobile-feature-link_1h5w0_392 {
522
+ ._main-navigation__mobile-feature-link_1n84f_495 {
418
523
  text-decoration: none;
419
524
 
420
525
  &:hover,
@@ -432,20 +537,20 @@
432
537
  }
433
538
  }
434
539
 
435
- ._main-navigation__mobile-category-list_1h5w0_435,
436
- ._main-navigation__mobile-level-2-category-list_1h5w0_436 {
540
+ ._main-navigation__mobile-category-list_1n84f_538,
541
+ ._main-navigation__mobile-level-2-category-list_1n84f_539 {
437
542
  margin: 0;
438
543
  padding: 0;
439
544
  list-style: none;
440
545
  }
441
546
 
442
- ._main-navigation__mobile-category-item_1h5w0_442,
443
- ._main-navigation__mobile-level-2-category-item_1h5w0_443 {
547
+ ._main-navigation__mobile-category-item_1n84f_545,
548
+ ._main-navigation__mobile-level-2-category-item_1n84f_546 {
444
549
  margin: 0;
445
550
  }
446
551
 
447
- ._main-navigation__mobile-category-button_1h5w0_447,
448
- ._main-navigation__mobile-level-2-category-button_1h5w0_448 {
552
+ ._main-navigation__mobile-category-button_1n84f_550,
553
+ ._main-navigation__mobile-level-2-category-button_1n84f_551 {
449
554
  display: inline-flex;
450
555
  width: 100%;
451
556
  align-items: center;
@@ -460,13 +565,13 @@
460
565
  text-align: left;
461
566
  }
462
567
 
463
- ._main-navigation__mobile-category-button_1h5w0_447 > svg,
464
- ._main-navigation__mobile-level-2-category-button_1h5w0_448 > svg {
568
+ ._main-navigation__mobile-category-button_1n84f_550 > svg,
569
+ ._main-navigation__mobile-level-2-category-button_1n84f_551 > svg {
465
570
  color: var(--color-semantic-foreground-primary-strong);
466
571
  }
467
572
 
468
- ._main-navigation__mobile-third-panel_1h5w0_468,
469
- ._main-navigation__mobile-level-3-panel_1h5w0_469 {
573
+ ._main-navigation__mobile-third-panel_1n84f_571,
574
+ ._main-navigation__mobile-level-3-panel_1n84f_572 {
470
575
  position: absolute;
471
576
  inset: 0;
472
577
  z-index: calc(var(--_main-navigation-z-mobile-panel) + 1);
@@ -481,34 +586,34 @@
481
586
  transition: transform 0.2s ease-in-out;
482
587
  }
483
588
 
484
- ._main-navigation__mobile-third-panel--open_1h5w0_484,
485
- ._main-navigation__mobile-level-3-panel--open_1h5w0_485 {
589
+ ._main-navigation__mobile-third-panel--open_1n84f_587,
590
+ ._main-navigation__mobile-level-3-panel--open_1n84f_588 {
486
591
  transform: translate3d(0, 0, 0);
487
592
  visibility: visible;
488
593
  pointer-events: auto;
489
594
  }
490
595
 
491
- ._main-navigation__mobile-third-panel--closing_1h5w0_491,
492
- ._main-navigation__mobile-level-3-panel--is-closing_1h5w0_492 {
596
+ ._main-navigation__mobile-third-panel--closing_1n84f_594,
597
+ ._main-navigation__mobile-level-3-panel--is-closing_1n84f_595 {
493
598
  pointer-events: none;
494
599
  transform: translate3d(100%, 0, 0);
495
600
  visibility: visible;
496
601
  }
497
602
 
498
- ._main-navigation__mobile-third-list_1h5w0_498,
499
- ._main-navigation__mobile-level-3-list_1h5w0_499 {
603
+ ._main-navigation__mobile-third-list_1n84f_601,
604
+ ._main-navigation__mobile-level-3-list_1n84f_602 {
500
605
  margin: 0;
501
606
  padding: 0;
502
607
  list-style: none;
503
608
  }
504
609
 
505
- ._main-navigation__mobile-third-item_1h5w0_505,
506
- ._main-navigation__mobile-level-3-item_1h5w0_506 {
610
+ ._main-navigation__mobile-third-item_1n84f_608,
611
+ ._main-navigation__mobile-level-3-item_1n84f_609 {
507
612
  margin: 0;
508
613
  }
509
614
 
510
- ._main-navigation__mobile-third-link_1h5w0_510,
511
- ._main-navigation__mobile-level-3-link_1h5w0_511 {
615
+ ._main-navigation__mobile-third-link_1n84f_613,
616
+ ._main-navigation__mobile-level-3-link_1n84f_614 {
512
617
  display: inline-flex;
513
618
  width: 100%;
514
619
  align-items: center;
@@ -519,16 +624,16 @@
519
624
  text-decoration: none;
520
625
  }
521
626
 
522
- ._main-navigation__panel-columns_1h5w0_522 {
627
+ ._main-navigation__panel-columns_1n84f_625 {
523
628
  display: grid;
524
629
  grid-template-columns: 1fr;
525
630
  }
526
631
 
527
- ._main-navigation__panel-columns_1h5w0_522 > * {
632
+ ._main-navigation__panel-columns_1n84f_625 > * {
528
633
  min-width: 0;
529
634
  }
530
635
 
531
- ._main-navigation__panel-column_1h5w0_522 {
636
+ ._main-navigation__panel-column_1n84f_625 {
532
637
  display: flex;
533
638
  flex-direction: column;
534
639
  gap: var(--spacing-space-8);
@@ -538,26 +643,26 @@
538
643
  min-width: 0;
539
644
  }
540
645
 
541
- ._main-navigation__panel-column--highlighted_1h5w0_541 {
646
+ ._main-navigation__panel-column--highlighted_1n84f_644 {
542
647
  background: var(--color-semantic-surface-neutral-mid);
543
648
  }
544
649
 
545
- ._main-navigation__panel-column--mobile-only_1h5w0_545 {
650
+ ._main-navigation__panel-column--mobile-only_1n84f_648 {
546
651
  display: flex;
547
652
  }
548
653
 
549
- ._main-navigation__panel-column--desktop-only_1h5w0_549 {
654
+ ._main-navigation__panel-column--desktop-only_1n84f_652 {
550
655
  display: none;
551
656
  }
552
657
 
553
- ._main-navigation__panel-heading_1h5w0_553 {
658
+ ._main-navigation__panel-heading_1n84f_656 {
554
659
  font: var(--typography-heading-xs);
555
660
  padding-inline: var(--spacing-space-20);
556
661
  margin: 0;
557
662
  color: var(--color-semantic-foreground-default);
558
663
  }
559
664
 
560
- ._main-navigation__panel-list_1h5w0_406 {
665
+ ._main-navigation__panel-list_1n84f_509 {
561
666
  margin: 0;
562
667
  padding: 0;
563
668
  list-style: none;
@@ -565,17 +670,17 @@
565
670
  gap: var(--spacing-space-8);
566
671
  }
567
672
 
568
- ._main-navigation__panel-list-item_1h5w0_406 {
673
+ ._main-navigation__panel-list-item_1n84f_509 {
569
674
  margin: 0;
570
675
  display: flex;
571
676
  }
572
677
 
573
- ._main-navigation__mobile-level-2-feature-list-item_1h5w0_412 {
678
+ ._main-navigation__mobile-level-2-feature-list-item_1n84f_515 {
574
679
  margin: 0;
575
680
  display: flex;
576
681
  }
577
682
 
578
- ._main-navigation__panel-link_1h5w0_578 {
683
+ ._main-navigation__panel-link_1n84f_681 {
579
684
  width: 100%;
580
685
  display: inline-flex;
581
686
  align-items: center;
@@ -592,23 +697,23 @@
592
697
  }
593
698
  }
594
699
 
595
- ._main-navigation__panel-link--current_1h5w0_595 {
700
+ ._main-navigation__panel-link--current_1n84f_698 {
596
701
  color: var(--color-semantic-foreground-link);
597
702
  font: var(--typography-body-md-bold);
598
703
  }
599
704
 
600
705
  /* Feature links block inside panel */
601
- ._main-navigation__feature-links_1h5w0_601 {
706
+ ._main-navigation__feature-links_1n84f_704 {
602
707
  padding-block: var(--spacing-space-16);
603
708
  padding-inline: 0;
604
709
  background: var(--color-semantic-surface-neutral-soft);
605
710
  }
606
711
 
607
- ._main-navigation__feature-links--empty_1h5w0_607 {
712
+ ._main-navigation__feature-links--empty_1n84f_710 {
608
713
  display: none;
609
714
  }
610
715
 
611
- ._main-navigation__feature-list_1h5w0_611 {
716
+ ._main-navigation__feature-list_1n84f_714 {
612
717
  margin: 0;
613
718
  padding: 0;
614
719
  list-style: none;
@@ -616,17 +721,17 @@
616
721
  grid-template-columns: repeat(2, minmax(0, 1fr));
617
722
  gap: var(--spacing-space-8);
618
723
 
619
- ._main-navigation__panel-list-item_1h5w0_406 {
724
+ ._main-navigation__panel-list-item_1n84f_509 {
620
725
  justify-content: flex-start;
621
726
  }
622
727
 
623
- ._main-navigation__feature-link_1h5w0_601 {
728
+ ._main-navigation__feature-link_1n84f_704 {
624
729
  justify-content: flex-start;
625
730
  text-align: left;
626
731
  }
627
732
  }
628
733
 
629
- ._main-navigation__feature-link_1h5w0_601 {
734
+ ._main-navigation__feature-link_1n84f_704 {
630
735
  display: inline-flex;
631
736
  align-items: center;
632
737
  justify-content: flex-start;
@@ -642,16 +747,16 @@
642
747
  }
643
748
  }
644
749
 
645
- ._main-navigation__feature-link-icon_1h5w0_645 {
750
+ ._main-navigation__feature-link-icon_1n84f_748 {
646
751
  flex: 0 0 24px;
647
752
  color: var(--color-semantic-foreground-primary-strong);
648
753
  }
649
754
 
650
- ._main-navigation__feature-link-label_1h5w0_650 {
755
+ ._main-navigation__feature-link-label_1n84f_753 {
651
756
  min-width: 0;
652
757
  }
653
758
 
654
- ._main-navigation__sr-only_1h5w0_654 {
759
+ ._main-navigation__sr-only_1n84f_757 {
655
760
  position: absolute;
656
761
  width: 1px;
657
762
  height: 1px;
@@ -664,7 +769,7 @@
664
769
  }
665
770
 
666
771
  /* Mobile menu toggle and open states */
667
- ._main-navigation__menu-toggle_1h5w0_667 {
772
+ ._main-navigation__menu-toggle_1n84f_770 {
668
773
  display: inline-flex;
669
774
  flex: 0 0 auto;
670
775
  align-items: center;
@@ -677,12 +782,12 @@
677
782
  cursor: pointer;
678
783
  }
679
784
 
680
- ._main-navigation__menu-toggle--open_1h5w0_680 {
785
+ ._main-navigation__menu-toggle--open_1n84f_783 {
681
786
  color: var(--color-semantic-foreground-primary-strong);
682
787
  }
683
788
 
684
- ._main-navigation__panel--modal_1h5w0_684,
685
- ._main-navigation__panel--mobile_1h5w0_685 {
789
+ ._main-navigation__panel--modal_1n84f_787,
790
+ ._main-navigation__panel--mobile_1n84f_788 {
686
791
  display: grid;
687
792
  grid-template-columns: 1fr;
688
793
  border-bottom: none;
@@ -697,32 +802,32 @@
697
802
  )
698
803
  );
699
804
  overflow: hidden;
700
- animation: _show-mobile-navigation-section_1h5w0_1 0.2s forwards;
805
+ animation: _show-mobile-navigation-section_1n84f_1 0.2s forwards;
701
806
  }
702
807
 
703
- ._main-navigation__panel--modal-closing_1h5w0_703,
704
- ._main-navigation__panel--is-closing_1h5w0_704 {
808
+ ._main-navigation__panel--modal-closing_1n84f_806,
809
+ ._main-navigation__panel--is-closing_1n84f_807 {
705
810
  pointer-events: none;
706
- animation: _hide-mobile-navigation-section_1h5w0_1 0.2s forwards;
811
+ animation: _hide-mobile-navigation-section_1n84f_1 0.2s forwards;
707
812
  }
708
813
 
709
- ._main-navigation__panel--desktop_1h5w0_709 {
814
+ ._main-navigation__panel--desktop_1n84f_812 {
710
815
  display: none;
711
816
  }
712
817
 
713
- ._main-navigation__primary--open_1h5w0_713 {
818
+ ._main-navigation__primary--open_1n84f_816 {
714
819
  pointer-events: auto;
715
820
  transform: translateX(0);
716
821
  visibility: visible;
717
822
  transition: transform 0.2s ease-in-out;
718
823
  }
719
824
 
720
- ._main-navigation--menu-closing_1h5w0_190 ._main-navigation__primary_1h5w0_169 {
825
+ ._main-navigation--menu-closing_1n84f_190 ._main-navigation__primary_1n84f_169 {
721
826
  pointer-events: none;
722
827
  visibility: visible;
723
828
  }
724
829
 
725
- @keyframes _show-mobile-navigation-section_1h5w0_1 {
830
+ @keyframes _show-mobile-navigation-section_1n84f_1 {
726
831
  0% {
727
832
  transform: translate3d(100%, 0, 0);
728
833
  }
@@ -732,7 +837,7 @@
732
837
  }
733
838
  }
734
839
 
735
- @keyframes _hide-mobile-navigation-section_1h5w0_1 {
840
+ @keyframes _hide-mobile-navigation-section_1n84f_1 {
736
841
  0% {
737
842
  transform: translate3d(0, 0, 0);
738
843
  }
@@ -742,7 +847,7 @@
742
847
  }
743
848
  }
744
849
 
745
- @keyframes _show-megamenu_1h5w0_1 {
850
+ @keyframes _show-megamenu_1n84f_1 {
746
851
  0% {
747
852
  opacity: 0.8;
748
853
  transform: translateY(-3px);
@@ -756,16 +861,16 @@
756
861
 
757
862
  /* Desktop layout overrides */
758
863
  @container main-navigation (min-width: 1024px) {
759
- ._main-navigation__organization-strip_1h5w0_54 {
864
+ ._main-navigation__organization-strip_1n84f_54 {
760
865
  height: 32px;
761
866
  padding: var(--spacing-space-8) var(--spacing-space-16);
762
867
  }
763
868
 
764
- ._main-navigation__menu-toggle_1h5w0_667 {
869
+ ._main-navigation__menu-toggle_1n84f_770 {
765
870
  display: none;
766
871
  }
767
872
 
768
- ._main-navigation__primary_1h5w0_169 {
873
+ ._main-navigation__primary_1n84f_169 {
769
874
  position: static;
770
875
  display: block;
771
876
  flex: 1 1 auto;
@@ -782,26 +887,26 @@
782
887
  transition: none;
783
888
  }
784
889
 
785
- ._main-navigation__navbar_1h5w0_136 {
890
+ ._main-navigation__navbar_1n84f_136 {
786
891
  gap: var(--spacing-space-16);
787
892
  }
788
893
 
789
- ._main-navigation__primary--open_1h5w0_713 {
894
+ ._main-navigation__primary--open_1n84f_816 {
790
895
  z-index: auto;
791
896
  }
792
897
 
793
- ._main-navigation__primary-list_1h5w0_195 {
898
+ ._main-navigation__primary-list_1n84f_195 {
794
899
  align-items: center;
795
900
  flex-direction: row;
796
901
  gap: var(--spacing-space-16);
797
902
  }
798
903
 
799
- ._main-navigation__item_1h5w0_206 {
904
+ ._main-navigation__item_1n84f_206 {
800
905
  border-bottom: none;
801
906
  }
802
907
 
803
- ._main-navigation__item-link_1h5w0_212,
804
- ._main-navigation__item-toggle_1h5w0_213 {
908
+ ._main-navigation__item-link_1n84f_212,
909
+ ._main-navigation__item-toggle_1n84f_213 {
805
910
  width: auto;
806
911
  height: 60px;
807
912
  justify-content: flex-start;
@@ -810,8 +915,8 @@
810
915
  background: transparent;
811
916
  }
812
917
 
813
- ._main-navigation__item-icon_1h5w0_239,
814
- ._main-navigation__top-level-toggle-icon_1h5w0_240 {
918
+ ._main-navigation__item-icon_1n84f_239,
919
+ ._main-navigation__top-level-toggle-icon_1n84f_240 {
815
920
  width: 12px;
816
921
  height: 12px;
817
922
  flex: 0 0 12px;
@@ -819,18 +924,18 @@
819
924
  transform: rotate(90deg);
820
925
  }
821
926
 
822
- ._main-navigation__item-toggle--open_1h5w0_249 {
823
- ._main-navigation__item-icon_1h5w0_239,
824
- ._main-navigation__top-level-toggle-icon_1h5w0_240 {
927
+ ._main-navigation__item-toggle--open_1n84f_249 {
928
+ ._main-navigation__item-icon_1n84f_239,
929
+ ._main-navigation__top-level-toggle-icon_1n84f_240 {
825
930
  transform: rotate(-90deg);
826
931
  }
827
932
  }
828
933
 
829
- ._main-navigation__item-toggle--current_1h5w0_829 {
934
+ ._main-navigation__item-toggle--current_1n84f_932 {
830
935
  color: var(--color-semantic-interactive-primary-active);
831
936
  border-bottom-color: transparent;
832
937
 
833
- ._main-navigation__item-label_1h5w0_256::after {
938
+ ._main-navigation__item-label_1n84f_256::after {
834
939
  content: '';
835
940
  position: absolute;
836
941
  right: 0;
@@ -841,7 +946,7 @@
841
946
  }
842
947
  }
843
948
 
844
- ._main-navigation__panel--desktop_1h5w0_709 {
949
+ ._main-navigation__panel--desktop_1n84f_812 {
845
950
  display: block;
846
951
  position: absolute;
847
952
  top: 100%;
@@ -850,75 +955,75 @@
850
955
  z-index: var(--_main-navigation-z-desktop-panel);
851
956
  max-height: calc(100dvh - var(--_main-navigation-height) - var(--spacing-space-40));
852
957
  overflow: hidden auto;
853
- animation: _show-megamenu_1h5w0_1 0.2s forwards;
958
+ animation: _show-megamenu_1n84f_1 0.2s forwards;
854
959
  }
855
960
 
856
- ._main-navigation__panel--modal_1h5w0_684,
857
- ._main-navigation__panel--mobile_1h5w0_685 {
961
+ ._main-navigation__panel--modal_1n84f_787,
962
+ ._main-navigation__panel--mobile_1n84f_788 {
858
963
  display: none;
859
964
  }
860
965
 
861
- ._main-navigation__panel-columns_1h5w0_522 {
966
+ ._main-navigation__panel-columns_1n84f_625 {
862
967
  grid-template-columns: repeat(3, minmax(0, 1fr));
863
968
  }
864
969
 
865
- ._main-navigation__icon-nav-label_1h5w0_317 {
970
+ ._main-navigation__icon-nav-label_1n84f_321 {
866
971
  display: inline;
867
972
  }
868
973
 
869
- ._main-navigation__icon-nav-item_1h5w0_292 {
974
+ ._main-navigation__icon-nav-item_1n84f_292 {
870
975
  width: 60px;
871
976
  height: 60px;
872
977
  }
873
978
 
874
- ._main-navigation__icon-nav-item--counter_1h5w0_321 {
979
+ ._main-navigation__icon-nav-item--counter_1n84f_325 {
875
980
  right: var(--_main-navigation-space-6);
876
981
  }
877
982
 
878
- ._main-navigation__icon-nav_1h5w0_283 {
983
+ ._main-navigation__icon-nav_1n84f_283 {
879
984
  gap: var(--spacing-space-20);
880
985
  padding-inline: var(--spacing-space-16);
881
986
  }
882
987
 
883
- ._main-navigation__panel-column_1h5w0_522 {
988
+ ._main-navigation__panel-column_1n84f_625 {
884
989
  padding: var(--spacing-space-20) 0;
885
990
  border-right: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
886
991
  border-bottom: none;
887
992
  }
888
993
 
889
- ._main-navigation__panel-columns_1h5w0_522 > ._main-navigation__panel-column_1h5w0_522:nth-child(3n) {
994
+ ._main-navigation__panel-columns_1n84f_625 > ._main-navigation__panel-column_1n84f_625:nth-child(3n) {
890
995
  border-right: none;
891
996
  }
892
997
 
893
- ._main-navigation__panel-content_1h5w0_347 {
998
+ ._main-navigation__panel-content_1n84f_450 {
894
999
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
895
1000
  }
896
1001
 
897
- ._main-navigation__panel-column--mobile-only_1h5w0_545 {
1002
+ ._main-navigation__panel-column--mobile-only_1n84f_648 {
898
1003
  display: none;
899
1004
  }
900
1005
 
901
- ._main-navigation__panel-column--desktop-only_1h5w0_549 {
1006
+ ._main-navigation__panel-column--desktop-only_1n84f_652 {
902
1007
  display: flex;
903
1008
  }
904
1009
 
905
- ._main-navigation__feature-links_1h5w0_601 {
1010
+ ._main-navigation__feature-links_1n84f_704 {
906
1011
  padding-block: var(--spacing-space-8);
907
1012
  padding-inline: 0;
908
1013
  border-radius: 0;
909
1014
  }
910
1015
 
911
- ._main-navigation__feature-links--empty_1h5w0_607 {
1016
+ ._main-navigation__feature-links--empty_1n84f_710 {
912
1017
  display: flex;
913
1018
  }
914
1019
 
915
- ._main-navigation__feature-links_1h5w0_601._main-navigation__panel-column--last_1h5w0_915 {
1020
+ ._main-navigation__feature-links_1n84f_704._main-navigation__panel-column--last_1n84f_1018 {
916
1021
  border-radius: 0;
917
1022
  border-bottom: none;
918
1023
  border-top: none;
919
1024
  }
920
1025
 
921
- ._main-navigation__feature-list_1h5w0_611 {
1026
+ ._main-navigation__feature-list_1n84f_714 {
922
1027
  grid-template-columns: 1fr;
923
1028
  gap: var(--spacing-space-16);
924
1029
  padding: var(--spacing-space-20) var(--spacing-space-20) var(--spacing-space-20)
@@ -927,7 +1032,7 @@
927
1032
  }
928
1033
 
929
1034
  @container main-navigation (min-width: 1024px) and (max-width: 1279px) {
930
- ._main-navigation__item-label_1h5w0_256 {
1035
+ ._main-navigation__item-label_1n84f_256 {
931
1036
  font: var(--typography-body-sm-medium);
932
1037
  white-space: nowrap;
933
1038
  }
@@ -935,14 +1040,13 @@
935
1040
 
936
1041
  /* High contrast / forced colors support */
937
1042
  @media (forced-colors: active) {
938
- ._main-navigation__organization-link_1h5w0_76,
939
- ._main-navigation__item-link_1h5w0_212,
940
- ._main-navigation__item-toggle_1h5w0_213,
941
- ._main-navigation__icon-nav-item_1h5w0_292,
942
- ._main-navigation__panel-link_1h5w0_578,
943
- ._main-navigation__feature-link_1h5w0_601,
944
- ._main-navigation__menu-toggle_1h5w0_667 {
1043
+ ._main-navigation__organization-link_1n84f_76,
1044
+ ._main-navigation__item-link_1n84f_212,
1045
+ ._main-navigation__item-toggle_1n84f_213,
1046
+ ._main-navigation__icon-nav-item_1n84f_292,
1047
+ ._main-navigation__panel-link_1n84f_681,
1048
+ ._main-navigation__feature-link_1n84f_704,
1049
+ ._main-navigation__menu-toggle_1n84f_770 {
945
1050
  border: 1px solid transparent;
946
1051
  }
947
- }
948
- }
1052
+ } }