@inera/ids-design 5.1.2 → 5.2.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 (105) hide show
  1. package/components/alert/alert-lit.js +1 -1
  2. package/components/alert/alert.css +45 -43
  3. package/components/alert-global/alert-global-lit.js +1 -1
  4. package/components/alert-global/alert-global.css +14 -6
  5. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  6. package/components/breadcrumbs/breadcrumbs.css +9 -5
  7. package/components/card/card.css +0 -8
  8. package/components/data-table/data-table-lit.js +1 -1
  9. package/components/data-table/data-table.css +76 -321
  10. package/components/dialog/dialog-lit.js +1 -1
  11. package/components/dialog/dialog.css +44 -38
  12. package/components/expandable/expandable-lit.js +1 -1
  13. package/components/expandable/expandable.css +16 -13
  14. package/components/footer/footer-lit.js +1 -1
  15. package/components/footer/footer.css +49 -53
  16. package/components/footer-1177/footer-1177-lit.js +1 -1
  17. package/components/footer-1177/footer-1177.css +46 -50
  18. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  19. package/components/footer-1177-admin/footer-1177-admin.css +46 -50
  20. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  21. package/components/footer-1177-pro/footer-1177-pro.css +38 -41
  22. package/components/footer-inera/footer-inera-lit.js +1 -1
  23. package/components/footer-inera/footer-inera.css +46 -50
  24. package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
  25. package/components/footer-inera-admin/footer-inera-admin.css +46 -50
  26. package/components/form/group/group-lit.js +1 -1
  27. package/components/form/group/group.css +26 -8
  28. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  29. package/components/form/select-multiple/select-multiple.css +90 -115
  30. package/components/grid/column/column.css +1 -1
  31. package/components/header-1177/composite-header-1177.css +40 -112
  32. package/components/header-1177/header-1177-avatar.css +0 -8
  33. package/components/header-1177/header-1177-item.css +7 -3
  34. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  35. package/components/header-1177/header-1177-nav-item-mobile.css +12 -8
  36. package/components/header-1177/header-1177-nav-item.css +35 -15
  37. package/components/header-1177/header-1177.css +7 -3
  38. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +7 -3
  39. package/components/header-1177-admin/header-1177-admin-avatar.css +11 -7
  40. package/components/header-1177-admin/header-1177-admin-item.css +7 -3
  41. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  42. package/components/header-1177-admin/header-1177-admin-nav-item.css +67 -27
  43. package/components/header-1177-admin/header-1177-admin.css +8 -4
  44. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +7 -3
  45. package/components/header-1177-pro/header-1177-pro-avatar.css +11 -7
  46. package/components/header-1177-pro/header-1177-pro-item.css +7 -3
  47. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  48. package/components/header-1177-pro/header-1177-pro-nav-item.css +11 -7
  49. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +1 -1
  50. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +15 -11
  51. package/components/header-1177-pro/header-1177-pro-region-picker.css +11 -7
  52. package/components/header-1177-pro/header-1177-pro.css +7 -3
  53. package/components/header-inera/header-inera-item-lit.js +1 -1
  54. package/components/header-inera/header-inera-item.css +7 -17
  55. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  56. package/components/header-inera/header-inera-nav-item.css +14 -10
  57. package/components/header-inera/header-inera-nav-mobile.css +0 -8
  58. package/components/header-inera/header-inera-nav.css +0 -8
  59. package/components/header-inera/header-inera.css +7 -3
  60. package/components/header-inera-admin/composite-header-inera-admin.css +21 -138
  61. package/components/header-inera-admin/header-inera-admin-avatar-mobile.css +0 -8
  62. package/components/header-inera-admin/header-inera-admin-avatar.css +0 -8
  63. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  64. package/components/header-inera-admin/header-inera-admin-item.css +12 -21
  65. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  66. package/components/header-inera-admin/header-inera-admin-nav-item.css +14 -10
  67. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +0 -8
  68. package/components/header-inera-admin/header-inera-admin-nav.css +0 -8
  69. package/components/header-inera-admin/header-inera-admin.css +7 -3
  70. package/components/list/list-lit.js +1 -1
  71. package/components/list/list.css +10 -18
  72. package/components/mobile-menu/mobile-menu.css +7 -3
  73. package/components/pagination/data-pagination/data-pagination.css +0 -8
  74. package/components/pagination/list-pagination/list-pagination.css +7 -3
  75. package/components/popover/popover-content-lit.js +1 -1
  76. package/components/popover/popover-content.css +47 -25
  77. package/components/popover/popover-lit.js +1 -1
  78. package/components/popover/popover.css +1 -8
  79. package/components/side-panel/side-panel-lit.js +7 -0
  80. package/components/side-panel/side-panel.css +198 -0
  81. package/components/stepper/stepper.css +7 -3
  82. package/components/table/table.css +14 -12
  83. package/components/tabs/tab-panel.css +0 -8
  84. package/components/tabs/tab.css +7 -3
  85. package/components/tabs/tabs-lit.js +3 -5
  86. package/components/tabs/tabs.css +0 -8
  87. package/components/tag/tag.css +7 -3
  88. package/components/tooltip/tooltip-lit.js +1 -1
  89. package/components/tooltip/tooltip.css +4 -32
  90. package/global/_partials.css +8 -4
  91. package/global/global.css +767 -453
  92. package/global/util/util.css +4 -0
  93. package/package.json +1 -1
  94. package/themes/1177/1177.css +965 -765
  95. package/themes/1177-pro/1177-pro.css +973 -781
  96. package/themes/inera/inera-tokens.css +1 -0
  97. package/themes/inera/inera.css +973 -758
  98. package/themes/inera-admin/inera-admin.css +975 -762
  99. package/themes/reset.css +1 -1
  100. package/components/description-list/description-list-lit.js +0 -7
  101. package/components/description-list/description-list.css +0 -98
  102. package/components/form/toggle/toggle-lit.d.ts +0 -2
  103. package/components/form/toggle/toggle-lit.js +0 -7
  104. package/components/form/toggle/toggle.css +0 -154
  105. /package/components/{description-list/description-list-lit.d.ts → side-panel/side-panel-lit.d.ts} +0 -0
package/components/header-1177-admin/header-1177-admin-nav-item.css CHANGED
@@ -1,11 +1,15 @@
1
- /* 1177 Typography - no margins */
1
+ /*******
2
+ * BUTTONS
3
+ ********/
4
+ /*******
5
+ * SCROLLBAR
6
+ ********/
2
7
  /*******
3
8
  * FORM
4
9
  ********/
5
10
  /*******
6
- * Accessibility
11
+ * A11Y
7
12
  ********/
8
- /* headings */
9
13
  @media (max-width: 1023px) {
10
14
  .ids-desktop {
11
15
  display: none !important;
@@ -22,7 +26,7 @@
22
26
  .ids-header-1177-admin--unresponsive .ids-header-1177-admin__nav-item ::slotted(a) {
23
27
  display: flex;
24
28
  align-items: center;
25
- padding: 8px 16px;
29
+ padding: 8px 10px;
26
30
  position: relative;
27
31
  text-decoration: none;
28
32
  cursor: pointer;
@@ -90,23 +94,32 @@
90
94
  left: 0;
91
95
  min-height: 173px;
92
96
  padding: 40px 0px 50px;
97
+ box-sizing: border-box;
93
98
  position: absolute;
94
99
  width: 100%;
95
100
  top: 100%;
96
- z-index: -1;
97
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
101
+ box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
102
+ }
103
+ .ids-header-1177-admin--unresponsive .ids-header-1177-admin__nav-item .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items-box-shadow {
104
+ height: 20px;
105
+ width: 100%;
106
+ box-shadow: inset 0 3px 5px -1px rgba(0, 0, 0, 0.2);
107
+ position: absolute;
108
+ top: 0;
109
+ left: 0;
110
+ right: 0;
98
111
  }
99
112
  .ids-header-1177-admin--unresponsive .ids-header-1177-admin__nav-item .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content {
100
113
  max-width: var(--IDS_MAX-WIDTH);
101
114
  display: grid;
102
115
  grid-template-columns: 1fr 1fr 1fr 1fr;
103
- padding: 0px 10px;
116
+ padding: 0 10px;
104
117
  margin-left: auto;
105
118
  margin-right: auto;
106
119
  }
107
120
  .ids-header-1177-admin--unresponsive .ids-header-1177-admin__nav-item .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content .ids-header-1177-admin__items__item-dropdown__content-item a {
108
- margin-bottom: 10px;
109
- display: block;
121
+ margin-bottom: 10px !important;
122
+ display: block !important;
110
123
  }
111
124
  .ids-header-1177-admin--unresponsive .ids-header-1177-admin__nav-item .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content .ids-header-1177-admin__items__item-dropdown__content-item,
112
125
  .ids-header-1177-admin--unresponsive .ids-header-1177-admin__nav-item .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content ::slotted(*) {
@@ -123,7 +136,7 @@
123
136
  .ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__nav-item ::slotted(a) {
124
137
  display: flex;
125
138
  align-items: center;
126
- padding: 8px 16px;
139
+ padding: 8px 10px;
127
140
  position: relative;
128
141
  text-decoration: none;
129
142
  cursor: pointer;
@@ -191,23 +204,32 @@
191
204
  left: 0;
192
205
  min-height: 173px;
193
206
  padding: 40px 0px 50px;
207
+ box-sizing: border-box;
194
208
  position: absolute;
195
209
  width: 100%;
196
210
  top: 100%;
197
- z-index: -1;
198
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
211
+ box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
212
+ }
213
+ .ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__nav-item .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items-box-shadow {
214
+ height: 20px;
215
+ width: 100%;
216
+ box-shadow: inset 0 3px 5px -1px rgba(0, 0, 0, 0.2);
217
+ position: absolute;
218
+ top: 0;
219
+ left: 0;
220
+ right: 0;
199
221
  }
200
222
  .ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__nav-item .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content {
201
223
  max-width: var(--IDS_MAX-WIDTH);
202
224
  display: grid;
203
225
  grid-template-columns: 1fr 1fr 1fr 1fr;
204
- padding: 0px 10px;
226
+ padding: 0 10px;
205
227
  margin-left: auto;
206
228
  margin-right: auto;
207
229
  }
208
230
  .ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__nav-item .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content .ids-header-1177-admin__items__item-dropdown__content-item a {
209
- margin-bottom: 10px;
210
- display: block;
231
+ margin-bottom: 10px !important;
232
+ display: block !important;
211
233
  }
212
234
  .ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__nav-item .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content .ids-header-1177-admin__items__item-dropdown__content-item,
213
235
  .ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__nav-item .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content ::slotted(*) {
@@ -233,7 +255,7 @@
233
255
  :host .ids-header-1177-admin__nav-item:not(.ids-header-1177-admin__nav-item--unresponsive) ::slotted(a) {
234
256
  display: flex;
235
257
  align-items: center;
236
- padding: 8px 16px;
258
+ padding: 8px 10px;
237
259
  position: relative;
238
260
  text-decoration: none;
239
261
  cursor: pointer;
@@ -301,23 +323,32 @@
301
323
  left: 0;
302
324
  min-height: 173px;
303
325
  padding: 40px 0px 50px;
326
+ box-sizing: border-box;
304
327
  position: absolute;
305
328
  width: 100%;
306
329
  top: 100%;
307
- z-index: -1;
308
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
330
+ box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
331
+ }
332
+ :host .ids-header-1177-admin__nav-item:not(.ids-header-1177-admin__nav-item--unresponsive) .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items-box-shadow {
333
+ height: 20px;
334
+ width: 100%;
335
+ box-shadow: inset 0 3px 5px -1px rgba(0, 0, 0, 0.2);
336
+ position: absolute;
337
+ top: 0;
338
+ left: 0;
339
+ right: 0;
309
340
  }
310
341
  :host .ids-header-1177-admin__nav-item:not(.ids-header-1177-admin__nav-item--unresponsive) .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content {
311
342
  max-width: var(--IDS_MAX-WIDTH);
312
343
  display: grid;
313
344
  grid-template-columns: 1fr 1fr 1fr 1fr;
314
- padding: 0px 10px;
345
+ padding: 0 10px;
315
346
  margin-left: auto;
316
347
  margin-right: auto;
317
348
  }
318
349
  :host .ids-header-1177-admin__nav-item:not(.ids-header-1177-admin__nav-item--unresponsive) .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content .ids-header-1177-admin__items__item-dropdown__content-item a {
319
- margin-bottom: 10px;
320
- display: block;
350
+ margin-bottom: 10px !important;
351
+ display: block !important;
321
352
  }
322
353
  :host .ids-header-1177-admin__nav-item:not(.ids-header-1177-admin__nav-item--unresponsive) .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content .ids-header-1177-admin__items__item-dropdown__content-item,
323
354
  :host .ids-header-1177-admin__nav-item:not(.ids-header-1177-admin__nav-item--unresponsive) .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content ::slotted(*) {
@@ -338,7 +369,7 @@
338
369
  :host .ids-header-1177-admin__nav-item.ids-header-1177-admin__nav-item--unresponsive ::slotted(a) {
339
370
  display: flex;
340
371
  align-items: center;
341
- padding: 8px 16px;
372
+ padding: 8px 10px;
342
373
  position: relative;
343
374
  text-decoration: none;
344
375
  cursor: pointer;
@@ -406,23 +437,32 @@
406
437
  left: 0;
407
438
  min-height: 173px;
408
439
  padding: 40px 0px 50px;
440
+ box-sizing: border-box;
409
441
  position: absolute;
410
442
  width: 100%;
411
443
  top: 100%;
412
- z-index: -1;
413
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
444
+ box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
445
+ }
446
+ :host .ids-header-1177-admin__nav-item.ids-header-1177-admin__nav-item--unresponsive .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items-box-shadow {
447
+ height: 20px;
448
+ width: 100%;
449
+ box-shadow: inset 0 3px 5px -1px rgba(0, 0, 0, 0.2);
450
+ position: absolute;
451
+ top: 0;
452
+ left: 0;
453
+ right: 0;
414
454
  }
415
455
  :host .ids-header-1177-admin__nav-item.ids-header-1177-admin__nav-item--unresponsive .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content {
416
456
  max-width: var(--IDS_MAX-WIDTH);
417
457
  display: grid;
418
458
  grid-template-columns: 1fr 1fr 1fr 1fr;
419
- padding: 0px 10px;
459
+ padding: 0 10px;
420
460
  margin-left: auto;
421
461
  margin-right: auto;
422
462
  }
423
463
  :host .ids-header-1177-admin__nav-item.ids-header-1177-admin__nav-item--unresponsive .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content .ids-header-1177-admin__items__item-dropdown__content-item a {
424
- margin-bottom: 10px;
425
- display: block;
464
+ margin-bottom: 10px !important;
465
+ display: block !important;
426
466
  }
427
467
  :host .ids-header-1177-admin__nav-item.ids-header-1177-admin__nav-item--unresponsive .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content .ids-header-1177-admin__items__item-dropdown__content-item,
428
468
  :host .ids-header-1177-admin__nav-item.ids-header-1177-admin__nav-item--unresponsive .ids-header-1177-admin__items__item-dropdown .ids-header-1177-admin__items__item-dropdown__content ::slotted(*) {
package/components/header-1177-admin/header-1177-admin.css CHANGED
@@ -1,11 +1,15 @@
1
- /* 1177 Typography - no margins */
1
+ /*******
2
+ * BUTTONS
3
+ ********/
4
+ /*******
5
+ * SCROLLBAR
6
+ ********/
2
7
  /*******
3
8
  * FORM
4
9
  ********/
5
10
  /*******
6
- * Accessibility
11
+ * A11Y
7
12
  ********/
8
- /* headings */
9
13
  @media (max-width: 1023px) {
10
14
  .ids-desktop {
11
15
  display: none !important;
@@ -32,7 +36,7 @@
32
36
  background: none;
33
37
  color: inherit;
34
38
  border: none;
35
- padding: 0px;
39
+ padding: 0;
36
40
  font: inherit;
37
41
  cursor: pointer;
38
42
  outline: inherit;
package/components/header-1177-pro/header-1177-pro-avatar-mobile.css CHANGED
@@ -1,11 +1,15 @@
1
- /* 1177 Typography - no margins */
1
+ /*******
2
+ * BUTTONS
3
+ ********/
4
+ /*******
5
+ * SCROLLBAR
6
+ ********/
2
7
  /*******
3
8
  * FORM
4
9
  ********/
5
10
  /*******
6
- * Accessibility
11
+ * A11Y
7
12
  ********/
8
- /* headings */
9
13
  :host .ids-header-1177-pro__avatar-mobile ::slotted([slot=logout]), :host .ids-header-1177-pro__avatar-mobile .ids-header-1177-pro__avatar-mobile__text, .ids-header-1177-pro__avatar-mobile a.ids-header-1177-pro__avatar-mobile__login {
10
14
  font-family: var(--IDS-LINK--FONT-FAMILY);
11
15
  color: var(--link-colorpreset-1_color);
package/components/header-1177-pro/header-1177-pro-avatar.css CHANGED
@@ -10,14 +10,18 @@
10
10
  }
11
11
  }
12
12
 
13
- /* 1177 Typography - no margins */
13
+ /*******
14
+ * BUTTONS
15
+ ********/
16
+ /*******
17
+ * SCROLLBAR
18
+ ********/
14
19
  /*******
15
20
  * FORM
16
21
  ********/
17
22
  /*******
18
- * Accessibility
23
+ * A11Y
19
24
  ********/
20
- /* headings */
21
25
  :host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit, :host .ids-header-1177-pro__avatar.ids-header-1177-pro__avatar--unresponsive .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__name, :host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit, :host .ids-header-1177-pro__avatar:not(.ids-header-1177-pro__avatar--unresponsive) .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__name, .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit, .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__name, .ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__unit, .ids-header-1177-pro--unresponsive .ids-header-1177-pro__avatar .ids-header-1177-pro__avatar-box .ids-header-1177-pro__avatar-content .ids-header-1177-pro__avatar-content__name {
22
26
  text-align: start;
23
27
  max-width: 15.625rem;
@@ -45,7 +49,7 @@
45
49
  background: none;
46
50
  color: inherit;
47
51
  border: none;
48
- padding: 0px;
52
+ padding: 0;
49
53
  font: inherit;
50
54
  cursor: pointer;
51
55
  outline: inherit;
@@ -120,7 +124,7 @@
120
124
  background: none;
121
125
  color: inherit;
122
126
  border: none;
123
- padding: 0px;
127
+ padding: 0;
124
128
  font: inherit;
125
129
  cursor: pointer;
126
130
  outline: inherit;
@@ -195,7 +199,7 @@
195
199
  background: none;
196
200
  color: inherit;
197
201
  border: none;
198
- padding: 0px;
202
+ padding: 0;
199
203
  font: inherit;
200
204
  cursor: pointer;
201
205
  outline: inherit;
@@ -264,7 +268,7 @@
264
268
  background: none;
265
269
  color: inherit;
266
270
  border: none;
267
- padding: 0px;
271
+ padding: 0;
268
272
  font: inherit;
269
273
  cursor: pointer;
270
274
  outline: inherit;
package/components/header-1177-pro/header-1177-pro-item.css CHANGED
@@ -10,14 +10,18 @@
10
10
  }
11
11
  }
12
12
 
13
- /* 1177 Typography - no margins */
13
+ /*******
14
+ * BUTTONS
15
+ ********/
16
+ /*******
17
+ * SCROLLBAR
18
+ ********/
14
19
  /*******
15
20
  * FORM
16
21
  ********/
17
22
  /*******
18
- * Accessibility
23
+ * A11Y
19
24
  ********/
20
- /* headings */
21
25
  .ids-header-1177-pro--unresponsive .ids-header-1177-pro__items__item {
22
26
  display: flex;
23
27
  align-items: center;
package/components/header-1177-pro/header-1177-pro-nav-item-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item ::slotted(a),.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>a,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>button{align-items:center;background-color:transparent!important;border:none;border-radius:0;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font-family:var(--font-family_2);font-size:1rem!important;font-weight:700!important;height:100%;letter-spacing:-.5px;min-height:40px;padding:8px 16px;position:relative;text-decoration:none}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>a:focus,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>a:focus:after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>a:hover:after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>button:focus:after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>button:hover:after{right:0;width:auto}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>a:after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>button:after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item ::slotted(a):after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item ::slotted(a:focus){outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item ::slotted(a:focus):after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item ::slotted(a:hover):after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--active ::slotted(a):after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--active button:after{right:0;width:auto}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown{background-color:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.2);left:0;min-height:173px;padding:40px 0 50px;position:absolute;top:100%;width:100%;z-index:-1}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;margin-left:auto;margin-right:auto;max-width:var(--IDS_MAX-WIDTH);padding:0 10px}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content ::slotted(*),.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content a{border-bottom:1px solid var(--IDS-COLOR-ACCENT-90);display:block;font-size:1rem;line-height:24px;margin-bottom:10px;margin-right:40px;padding-bottom:10px}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item ::slotted(a),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>a,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>button{align-items:center;background-color:transparent!important;border:none;border-radius:0;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font-family:var(--font-family_2);font-size:1rem!important;font-weight:700!important;height:100%;letter-spacing:-.5px;min-height:40px;padding:8px 16px;position:relative;text-decoration:none}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>a:focus,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>a:focus:after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>a:hover:after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>button:focus:after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>button:hover:after{right:0;width:auto}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>a:after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>button:after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item ::slotted(a):after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item ::slotted(a:focus){outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item ::slotted(a:focus):after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item ::slotted(a:hover):after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--active ::slotted(a):after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--active button:after{right:0;width:auto}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown{background-color:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.2);left:0;min-height:173px;padding:40px 0 50px;position:absolute;top:100%;width:100%;z-index:-1}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;margin-left:auto;margin-right:auto;max-width:var(--IDS_MAX-WIDTH);padding:0 10px}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content ::slotted(*),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content a{border-bottom:1px solid var(--IDS-COLOR-ACCENT-90);display:block;font-size:1rem;line-height:24px;margin-bottom:10px;margin-right:40px;padding-bottom:10px}@media (max-width:1024px){.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item{display:none}}.ids-header-1177-pro--fluid .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content{max-width:100%!important}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) ::slotted(a),:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>a,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>button{align-items:center;background-color:transparent!important;border:none;border-radius:0;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font-family:var(--font-family_2);font-size:1rem!important;font-weight:700!important;height:100%;letter-spacing:-.5px;min-height:40px;padding:8px 16px;position:relative;text-decoration:none}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>a:focus,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>a:focus:after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>a:hover:after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>button:focus:after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>button:hover:after{right:0;width:auto}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>a:after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>button:after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) ::slotted(a):after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) ::slotted(a:focus){outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) ::slotted(a:focus):after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) ::slotted(a:hover):after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive).ids-header-1177-pro__nav-item--active ::slotted(a):after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive).ids-header-1177-pro__nav-item--active button:after{right:0;width:auto}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) .ids-header-1177-pro__items__item-dropdown{background-color:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.2);left:0;min-height:173px;padding:40px 0 50px;position:absolute;top:100%;width:100%;z-index:-1}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;margin-left:auto;margin-right:auto;max-width:var(--IDS_MAX-WIDTH);padding:0 10px}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content ::slotted(*),:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content a{border-bottom:1px solid var(--IDS-COLOR-ACCENT-90);display:block;font-size:1rem;line-height:24px;margin-bottom:10px;margin-right:40px;padding-bottom:10px}@media (max-width:1024px){:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive){display:none}}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive ::slotted(a),:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>a,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>button{align-items:center;background-color:transparent!important;border:none;border-radius:0;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font-family:var(--font-family_2);font-size:1rem!important;font-weight:700!important;height:100%;letter-spacing:-.5px;min-height:40px;padding:8px 16px;position:relative;text-decoration:none}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>a:focus,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>a:focus:after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>a:hover:after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>button:focus:after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>button:hover:after{right:0;width:auto}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>a:after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>button:after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive ::slotted(a):after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive ::slotted(a:focus){outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive ::slotted(a:focus):after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive ::slotted(a:hover):after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive.ids-header-1177-pro__nav-item--active ::slotted(a):after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive.ids-header-1177-pro__nav-item--active button:after{right:0;width:auto}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive .ids-header-1177-pro__items__item-dropdown{background-color:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.2);left:0;min-height:173px;padding:40px 0 50px;position:absolute;top:100%;width:100%;z-index:-1}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;margin-left:auto;margin-right:auto;max-width:var(--IDS_MAX-WIDTH);padding:0 10px}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content ::slotted(*),:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content a{border-bottom:1px solid var(--IDS-COLOR-ACCENT-90);display:block;font-size:1rem;line-height:24px;margin-bottom:10px;margin-right:40px;padding-bottom:10px}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--fluid .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content{max-width:100%!important}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item ::slotted(a),.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>a,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>button{align-items:center;background-color:transparent!important;border:none;border-radius:0;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font-family:var(--font-family_2);font-size:1rem!important;font-weight:700!important;height:100%;letter-spacing:-.5px;min-height:40px;padding:8px 10px;position:relative;text-decoration:none}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>a:focus,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>a:focus:after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>a:hover:after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>button:focus:after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>button:hover:after{right:0;width:auto}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>a:after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item>button:after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item ::slotted(a):after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item ::slotted(a:focus){outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item ::slotted(a:focus):after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item ::slotted(a:hover):after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--active ::slotted(a):after,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--active button:after{right:0;width:auto}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown{background-color:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.2);left:0;min-height:173px;padding:40px 0 50px;position:absolute;top:100%;width:100%;z-index:-1}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;margin-left:auto;margin-right:auto;max-width:var(--IDS_MAX-WIDTH);padding:0 10px}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content ::slotted(*),.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content a{border-bottom:1px solid var(--IDS-COLOR-ACCENT-90);display:block;font-size:1rem;line-height:24px;margin-bottom:10px;margin-right:40px;padding-bottom:10px}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item ::slotted(a),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>a,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>button{align-items:center;background-color:transparent!important;border:none;border-radius:0;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font-family:var(--font-family_2);font-size:1rem!important;font-weight:700!important;height:100%;letter-spacing:-.5px;min-height:40px;padding:8px 10px;position:relative;text-decoration:none}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>a:focus,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>a:focus:after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>a:hover:after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>button:focus:after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>button:hover:after{right:0;width:auto}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>a:after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item>button:after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item ::slotted(a):after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item ::slotted(a:focus){outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item ::slotted(a:focus):after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item ::slotted(a:hover):after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--active ::slotted(a):after,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--active button:after{right:0;width:auto}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown{background-color:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.2);left:0;min-height:173px;padding:40px 0 50px;position:absolute;top:100%;width:100%;z-index:-1}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;margin-left:auto;margin-right:auto;max-width:var(--IDS_MAX-WIDTH);padding:0 10px}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content ::slotted(*),.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content a{border-bottom:1px solid var(--IDS-COLOR-ACCENT-90);display:block;font-size:1rem;line-height:24px;margin-bottom:10px;margin-right:40px;padding-bottom:10px}@media (max-width:1024px){.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item{display:none}}.ids-header-1177-pro--fluid .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content{max-width:100%!important}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) ::slotted(a),:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>a,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>button{align-items:center;background-color:transparent!important;border:none;border-radius:0;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font-family:var(--font-family_2);font-size:1rem!important;font-weight:700!important;height:100%;letter-spacing:-.5px;min-height:40px;padding:8px 10px;position:relative;text-decoration:none}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>a:focus,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>a:focus:after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>a:hover:after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>button:focus:after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>button:hover:after{right:0;width:auto}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>a:after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive)>button:after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) ::slotted(a):after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) ::slotted(a:focus){outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) ::slotted(a:focus):after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) ::slotted(a:hover):after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive).ids-header-1177-pro__nav-item--active ::slotted(a):after,:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive).ids-header-1177-pro__nav-item--active button:after{right:0;width:auto}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) .ids-header-1177-pro__items__item-dropdown{background-color:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.2);left:0;min-height:173px;padding:40px 0 50px;position:absolute;top:100%;width:100%;z-index:-1}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;margin-left:auto;margin-right:auto;max-width:var(--IDS_MAX-WIDTH);padding:0 10px}:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content ::slotted(*),:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content a{border-bottom:1px solid var(--IDS-COLOR-ACCENT-90);display:block;font-size:1rem;line-height:24px;margin-bottom:10px;margin-right:40px;padding-bottom:10px}@media (max-width:1024px){:host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive){display:none}}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive ::slotted(a),:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>a,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>button{align-items:center;background-color:transparent!important;border:none;border-radius:0;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font-family:var(--font-family_2);font-size:1rem!important;font-weight:700!important;height:100%;letter-spacing:-.5px;min-height:40px;padding:8px 10px;position:relative;text-decoration:none}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>a:focus,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>a:focus:after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>a:hover:after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>button:focus:after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>button:hover:after{right:0;width:auto}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>a:after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive>button:after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive ::slotted(a):after{background:var(--IDS-COLOR-ACCENT-40);bottom:0;content:\"\";display:block;height:5px;left:0;margin-left:8px;margin-right:8px;position:absolute;right:100%;transition:all .3s ease 0s;width:0}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive ::slotted(a:focus){outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-2px!important}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive ::slotted(a:focus):after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive ::slotted(a:hover):after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive.ids-header-1177-pro__nav-item--active ::slotted(a):after,:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive.ids-header-1177-pro__nav-item--active button:after{right:0;width:auto}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive .ids-header-1177-pro__items__item-dropdown{background-color:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.2);left:0;min-height:173px;padding:40px 0 50px;position:absolute;top:100%;width:100%;z-index:-1}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;margin-left:auto;margin-right:auto;max-width:var(--IDS_MAX-WIDTH);padding:0 10px}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content ::slotted(*),:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content a{border-bottom:1px solid var(--IDS-COLOR-ACCENT-90);display:block;font-size:1rem;line-height:24px;margin-bottom:10px;margin-right:40px;padding-bottom:10px}:host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--fluid .ids-header-1177-pro__items__item-dropdown .ids-header-1177-pro__items__item-dropdown__content{max-width:100%!important}";
4
4
 
5
5
  var header1177ProNavItemLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/header-1177-pro/header-1177-pro-nav-item.css CHANGED
@@ -1,11 +1,15 @@
1
- /* 1177 Typography - no margins */
1
+ /*******
2
+ * BUTTONS
3
+ ********/
4
+ /*******
5
+ * SCROLLBAR
6
+ ********/
2
7
  /*******
3
8
  * FORM
4
9
  ********/
5
10
  /*******
6
- * Accessibility
11
+ * A11Y
7
12
  ********/
8
- /* headings */
9
13
  @media (max-width: 1023px) {
10
14
  .ids-desktop {
11
15
  display: none !important;
@@ -22,7 +26,7 @@
22
26
  .ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-item ::slotted(a) {
23
27
  display: flex;
24
28
  align-items: center;
25
- padding: 8px 16px;
29
+ padding: 8px 10px;
26
30
  position: relative;
27
31
  text-decoration: none;
28
32
  cursor: pointer;
@@ -117,7 +121,7 @@
117
121
  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-item ::slotted(a) {
118
122
  display: flex;
119
123
  align-items: center;
120
- padding: 8px 16px;
124
+ padding: 8px 10px;
121
125
  position: relative;
122
126
  text-decoration: none;
123
127
  cursor: pointer;
@@ -221,7 +225,7 @@
221
225
  :host .ids-header-1177-pro__nav-item:not(.ids-header-1177-pro__nav-item--unresponsive) ::slotted(a) {
222
226
  display: flex;
223
227
  align-items: center;
224
- padding: 8px 16px;
228
+ padding: 8px 10px;
225
229
  position: relative;
226
230
  text-decoration: none;
227
231
  cursor: pointer;
@@ -320,7 +324,7 @@
320
324
  :host .ids-header-1177-pro__nav-item.ids-header-1177-pro__nav-item--unresponsive ::slotted(a) {
321
325
  display: flex;
322
326
  align-items: center;
323
- padding: 8px 16px;
327
+ padding: 8px 10px;
324
328
  position: relative;
325
329
  text-decoration: none;
326
330
  cursor: pointer;
package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-1177-pro__nav-mobile__menu{background:none;border:none;color:inherit;color:var(--IDS-COLOR-PRIMARY-35);cursor:pointer;display:none;font:inherit;outline:inherit;padding:0}.ids-header-1177-pro__nav-mobile__menu .ids-hamburger{cursor:pointer;position:relative;transition:.2s;user-select:none}.ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines{background:var(--IDS-COLOR-ACCENT-40);border-radius:2px;display:block;height:3px;position:relative;transition:.2s;width:1.3125rem;width:1.25rem}.ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:after,.ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:before{background:var(--IDS-COLOR-ACCENT-40);border-radius:2px;content:\"\";display:inline-block;height:3px;left:0;position:absolute;-webkit-transform-origin:.09375rem center;transform-origin:.09375rem center;-webkit-transform-origin:.13393rem center;transform-origin:.13393rem center;transition:.2s;width:1.3125rem;width:1.25rem}.ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:before{top:8px}.ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:after{top:-8px}.ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger{-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.8)}.ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines{background:transparent}.ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after,.ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{left:-5px;top:0;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;width:2rem}.ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}@media (max-width:1024px){.ids-header-1177-pro__nav-mobile__menu{display:flex}}.ids-header-1177-pro__nav-mobile__menu-items{box-shadow:var(--header-nav-mobile-menu-items_box-shadow);display:none;left:0;position:absolute;right:0;top:calc(100% + 1px);z-index:10}@media (max-width:1024px){.ids-header-1177-pro__nav-mobile__menu-items{display:block}}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-mobile__item{align-items:center;color:var(--IDS-COLOR-ACCENT-40);display:none;height:48px;justify-content:center;position:relative}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-mobile__item a,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-mobile__item button{align-items:center;background:none;border:none;color:inherit;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font:inherit;font-size:.875rem;gap:8px;justify-content:center;outline:inherit;outline:none!important;padding:0;text-decoration:none;width:100%}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-mobile__item ::slotted(a){inset:0;opacity:0;position:absolute}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-mobile__item:focus-within{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item{align-items:center;color:var(--IDS-COLOR-ACCENT-40);display:none;height:48px;justify-content:center;position:relative}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item a,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item button{align-items:center;background:none;border:none;color:inherit;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font:inherit;font-size:.875rem;gap:8px;justify-content:center;outline:inherit;outline:none!important;padding:0;text-decoration:none;width:100%}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item ::slotted(a){inset:0;opacity:0;position:absolute}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item:focus-within{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}@media (max-width:1024px){.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__items__item--mobile){display:flex}}:host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive){align-items:center;color:var(--IDS-COLOR-ACCENT-40);display:none;height:48px;justify-content:center;position:relative}:host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive) a,:host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive) button{align-items:center;background:none;border:none;color:inherit;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font:inherit;font-size:.875rem;gap:8px;justify-content:center;outline:inherit;outline:none!important;padding:0;text-decoration:none;width:100%}:host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive) ::slotted(a){inset:0;opacity:0;position:absolute}:host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive):focus-within{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}@media (max-width:1024px){:host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive):not(.ids-header-1177-pro__items__item--mobile){display:flex}}:host .ids-header-1177-pro__nav-mobile__item.ids-header-1177-pro__nav-mobile__item--unresponsive{align-items:center;color:var(--IDS-COLOR-ACCENT-40);display:none;height:48px;justify-content:center;position:relative}:host .ids-header-1177-pro__nav-mobile__item.ids-header-1177-pro__nav-mobile__item--unresponsive a,:host .ids-header-1177-pro__nav-mobile__item.ids-header-1177-pro__nav-mobile__item--unresponsive button{align-items:center;background:none;border:none;color:inherit;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font:inherit;font-size:.875rem;gap:8px;justify-content:center;outline:inherit;outline:none!important;padding:0;text-decoration:none;width:100%}:host .ids-header-1177-pro__nav-mobile__item.ids-header-1177-pro__nav-mobile__item--unresponsive ::slotted(a){inset:0;opacity:0;position:absolute}:host .ids-header-1177-pro__nav-mobile__item.ids-header-1177-pro__nav-mobile__item--unresponsive:focus-within{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-1177-pro__nav-mobile__menu{background:none;border:none;color:inherit;color:var(--IDS-COLOR-PRIMARY-35);cursor:pointer;display:none;font:inherit;outline:inherit;padding:0}.ids-header-1177-pro__nav-mobile__menu .ids-hamburger{cursor:pointer;position:relative;transition:.2s;user-select:none}.ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines{background:var(--IDS-COLOR-ACCENT-40);border-radius:2px;display:block;height:3px;position:relative;transition:.2s;width:1.3125rem;width:1.25rem}.ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:after,.ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:before{background:var(--IDS-COLOR-ACCENT-40);border-radius:2px;content:\"\";display:inline-block;height:3px;left:0;position:absolute;-webkit-transform-origin:.09375rem center;transform-origin:.09375rem center;-webkit-transform-origin:.13393rem center;transform-origin:.13393rem center;transition:.2s;width:1.3125rem;width:1.25rem}.ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:before{top:8px}.ids-header-1177-pro__nav-mobile__menu .ids-hamburger__lines:after{top:-8px}.ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger{-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.8)}.ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines{background:transparent}.ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after,.ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{left:-5px;top:0;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;width:2rem}.ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ids-header-1177-pro__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}@media (max-width:1024px){.ids-header-1177-pro__nav-mobile__menu{display:flex}}.ids-header-1177-pro__nav-mobile__menu-items{box-shadow:var(--header-nav-mobile-menu-items_box-shadow);display:block;left:0;position:absolute;right:0;top:calc(100% + 1px);z-index:10}@media (min-width:1024px){.ids-header-1177-pro__nav-mobile__menu-items{display:none}}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-mobile__item{align-items:center;color:var(--IDS-COLOR-ACCENT-40);display:none;height:48px;justify-content:center;position:relative}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-mobile__item a,.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-mobile__item button{align-items:center;background:none;border:none;color:inherit;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font:inherit;font-size:.875rem;gap:8px;justify-content:center;outline:inherit;outline:none!important;padding:0;text-decoration:none;width:100%}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-mobile__item ::slotted(a){inset:0;opacity:0;position:absolute}.ids-header-1177-pro--unresponsive .ids-header-1177-pro__nav-mobile__item:focus-within{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item{align-items:center;color:var(--IDS-COLOR-ACCENT-40);display:none;height:48px;justify-content:center;position:relative}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item a,.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item button{align-items:center;background:none;border:none;color:inherit;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font:inherit;font-size:.875rem;gap:8px;justify-content:center;outline:inherit;outline:none!important;padding:0;text-decoration:none;width:100%}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item ::slotted(a){inset:0;opacity:0;position:absolute}.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item:focus-within{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}@media (max-width:1024px){.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__items__item--mobile){display:flex}}:host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive){align-items:center;color:var(--IDS-COLOR-ACCENT-40);display:none;height:48px;justify-content:center;position:relative}:host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive) a,:host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive) button{align-items:center;background:none;border:none;color:inherit;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font:inherit;font-size:.875rem;gap:8px;justify-content:center;outline:inherit;outline:none!important;padding:0;text-decoration:none;width:100%}:host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive) ::slotted(a){inset:0;opacity:0;position:absolute}:host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive):focus-within{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}@media (max-width:1024px){:host .ids-header-1177-pro__nav-mobile__item:not(.ids-header-1177-pro__nav-mobile__item--unresponsive):not(.ids-header-1177-pro__items__item--mobile){display:flex}}:host .ids-header-1177-pro__nav-mobile__item.ids-header-1177-pro__nav-mobile__item--unresponsive{align-items:center;color:var(--IDS-COLOR-ACCENT-40);display:none;height:48px;justify-content:center;position:relative}:host .ids-header-1177-pro__nav-mobile__item.ids-header-1177-pro__nav-mobile__item--unresponsive a,:host .ids-header-1177-pro__nav-mobile__item.ids-header-1177-pro__nav-mobile__item--unresponsive button{align-items:center;background:none;border:none;color:inherit;color:var(--IDS-COLOR-ACCENT-40);cursor:pointer;display:flex;font:inherit;font-size:.875rem;gap:8px;justify-content:center;outline:inherit;outline:none!important;padding:0;text-decoration:none;width:100%}:host .ids-header-1177-pro__nav-mobile__item.ids-header-1177-pro__nav-mobile__item--unresponsive ::slotted(a){inset:0;opacity:0;position:absolute}:host .ids-header-1177-pro__nav-mobile__item.ids-header-1177-pro__nav-mobile__item--unresponsive:focus-within{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}";
4
4
 
5
5
  var header1177ProNavMenuMobileLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css CHANGED
@@ -1,11 +1,15 @@
1
- /* 1177 Typography - no margins */
1
+ /*******
2
+ * BUTTONS
3
+ ********/
4
+ /*******
5
+ * SCROLLBAR
6
+ ********/
2
7
  /*******
3
8
  * FORM
4
9
  ********/
5
10
  /*******
6
- * Accessibility
11
+ * A11Y
7
12
  ********/
8
- /* headings */
9
13
  @media (max-width: 1023px) {
10
14
  .ids-desktop {
11
15
  display: none !important;
@@ -22,7 +26,7 @@
22
26
  background: none;
23
27
  color: inherit;
24
28
  border: none;
25
- padding: 0px;
29
+ padding: 0;
26
30
  font: inherit;
27
31
  cursor: pointer;
28
32
  outline: inherit;
@@ -106,7 +110,7 @@
106
110
  }
107
111
 
108
112
  .ids-header-1177-pro__nav-mobile__menu-items {
109
- display: none;
113
+ display: block;
110
114
  position: absolute;
111
115
  left: 0px;
112
116
  right: 0px;
@@ -114,9 +118,9 @@
114
118
  box-shadow: var(--header-nav-mobile-menu-items_box-shadow);
115
119
  top: calc(100% + 1px);
116
120
  }
117
- @media (max-width: 1024px) {
121
+ @media (min-width: 1024px) {
118
122
  .ids-header-1177-pro__nav-mobile__menu-items {
119
- display: block;
123
+ display: none;
120
124
  }
121
125
  }
122
126
 
@@ -137,7 +141,7 @@
137
141
  background: none;
138
142
  color: inherit;
139
143
  border: none;
140
- padding: 0px;
144
+ padding: 0;
141
145
  font: inherit;
142
146
  cursor: pointer;
143
147
  outline: inherit;
@@ -174,7 +178,7 @@
174
178
  background: none;
175
179
  color: inherit;
176
180
  border: none;
177
- padding: 0px;
181
+ padding: 0;
178
182
  font: inherit;
179
183
  cursor: pointer;
180
184
  outline: inherit;
@@ -221,7 +225,7 @@
221
225
  background: none;
222
226
  color: inherit;
223
227
  border: none;
224
- padding: 0px;
228
+ padding: 0;
225
229
  font: inherit;
226
230
  cursor: pointer;
227
231
  outline: inherit;
@@ -267,7 +271,7 @@
267
271
  background: none;
268
272
  color: inherit;
269
273
  border: none;
270
- padding: 0px;
274
+ padding: 0;
271
275
  font: inherit;
272
276
  cursor: pointer;
273
277
  outline: inherit;
package/components/header-1177-pro/header-1177-pro-region-picker.css CHANGED
@@ -1,11 +1,15 @@
1
- /* 1177 Typography - no margins */
1
+ /*******
2
+ * BUTTONS
3
+ ********/
4
+ /*******
5
+ * SCROLLBAR
6
+ ********/
2
7
  /*******
3
8
  * FORM
4
9
  ********/
5
10
  /*******
6
- * Accessibility
11
+ * A11Y
7
12
  ********/
8
- /* headings */
9
13
  @media (max-width: 1023px) {
10
14
  .ids-desktop {
11
15
  display: none !important;
@@ -32,7 +36,7 @@
32
36
  background: none;
33
37
  color: inherit;
34
38
  border: none;
35
- padding: 0px;
39
+ padding: 0;
36
40
  font: inherit;
37
41
  cursor: pointer;
38
42
  outline: inherit;
@@ -72,7 +76,7 @@
72
76
  background: none;
73
77
  color: inherit;
74
78
  border: none;
75
- padding: 0px;
79
+ padding: 0;
76
80
  font: inherit;
77
81
  cursor: pointer;
78
82
  outline: inherit;
@@ -126,7 +130,7 @@
126
130
  background: none;
127
131
  color: inherit;
128
132
  border: none;
129
- padding: 0px;
133
+ padding: 0;
130
134
  font: inherit;
131
135
  cursor: pointer;
132
136
  outline: inherit;
@@ -179,7 +183,7 @@
179
183
  background: none;
180
184
  color: inherit;
181
185
  border: none;
182
- padding: 0px;
186
+ padding: 0;
183
187
  font: inherit;
184
188
  cursor: pointer;
185
189
  outline: inherit;
package/components/header-1177-pro/header-1177-pro.css CHANGED
@@ -1,11 +1,15 @@
1
- /* 1177 Typography - no margins */
1
+ /*******
2
+ * BUTTONS
3
+ ********/
4
+ /*******
5
+ * SCROLLBAR
6
+ ********/
2
7
  /*******
3
8
  * FORM
4
9
  ********/
5
10
  /*******
6
- * Accessibility
11
+ * A11Y
7
12
  ********/
8
- /* headings */
9
13
  @media (max-width: 1023px) {
10
14
  .ids-desktop {
11
15
  display: none !important;