@inera/ids-design 8.0.0 → 8.1.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 (161) hide show
  1. package/components/accordion/accordion-lit.js +1 -1
  2. package/components/accordion/accordion.css +35 -175
  3. package/components/alert/alert-lit.js +1 -1
  4. package/components/alert/alert.css +28 -138
  5. package/components/badge/badge-lit.js +1 -1
  6. package/components/badge/badge.css +1 -1
  7. package/components/box-link/box-link-lit.js +1 -1
  8. package/components/box-link/box-link.css +94 -39
  9. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  10. package/components/breadcrumbs/breadcrumbs.css +1 -0
  11. package/components/card/card-lit.js +1 -1
  12. package/components/card/card.css +34 -128
  13. package/components/carousel/carousel-item-lit.js +1 -1
  14. package/components/carousel/carousel-item.css +10 -122
  15. package/components/carousel/carousel-lit.js +1 -1
  16. package/components/carousel/carousel.css +36 -17
  17. package/components/data-table/data-table-lit.js +1 -1
  18. package/components/data-table/data-table.css +5 -11
  19. package/components/dialog/dialog-lit.js +1 -1
  20. package/components/dialog/dialog.css +8 -11
  21. package/components/dropdown/dropdown-lit.js +1 -1
  22. package/components/dropdown/dropdown.css +21 -12
  23. package/components/footer-1177/footer-1177-lit.js +1 -1
  24. package/components/footer-1177/footer-1177.css +48 -125
  25. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  26. package/components/footer-1177-admin/footer-1177-admin.css +47 -140
  27. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  28. package/components/footer-1177-pro/footer-1177-pro.css +47 -140
  29. package/components/footer-inera/footer-inera-lit.js +1 -1
  30. package/components/footer-inera/footer-inera.css +42 -123
  31. package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
  32. package/components/footer-inera-admin/footer-inera-admin.css +47 -132
  33. package/components/form/group/group-lit.js +1 -1
  34. package/components/form/group/group.css +10 -113
  35. package/components/form/range/range-lit.js +1 -1
  36. package/components/form/range/range.css +40 -119
  37. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  38. package/components/form/select-multiple/select-multiple.css +27 -5
  39. package/components/global-alert/global-alert-lit.js +1 -1
  40. package/components/global-alert/global-alert.css +55 -161
  41. package/components/grid/container/container-lit.js +1 -1
  42. package/components/grid/container/container.css +1 -1
  43. package/components/header-1177/composite-header-1177.css +612 -842
  44. package/components/header-1177/header-1177-avatar-lit.js +1 -1
  45. package/components/header-1177/header-1177-avatar.css +57 -156
  46. package/components/header-1177/header-1177-item-lit.js +1 -1
  47. package/components/header-1177/header-1177-item.css +366 -139
  48. package/components/header-1177/header-1177-lit.js +1 -1
  49. package/components/header-1177/header-1177-menu-mobile-lit.js +1 -1
  50. package/components/header-1177/header-1177-menu-mobile.css +14 -4
  51. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  52. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  53. package/components/header-1177/header-1177-nav-item-mobile.css +40 -116
  54. package/components/header-1177/header-1177-nav-item.css +102 -416
  55. package/components/header-1177/header-1177-nav-lit.js +1 -1
  56. package/components/header-1177/header-1177-nav.css +20 -1
  57. package/components/header-1177/header-1177-region-picker-lit.js +1 -1
  58. package/components/header-1177/header-1177-region-picker-mobile-lit.js +1 -1
  59. package/components/header-1177/header-1177-region-picker-mobile.css +3 -2
  60. package/components/header-1177/header-1177-region-picker.css +3 -2
  61. package/components/header-1177/header-1177.css +19 -17
  62. package/components/header-1177-admin/header-1177-admin-avatar-lit.js +1 -1
  63. package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
  64. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +8 -12
  65. package/components/header-1177-admin/header-1177-admin-avatar.css +29 -132
  66. package/components/header-1177-admin/header-1177-admin-item-lit.js +1 -1
  67. package/components/header-1177-admin/header-1177-admin-item.css +307 -122
  68. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  69. package/components/header-1177-admin/header-1177-admin-menu-mobile-lit.js +1 -1
  70. package/components/header-1177-admin/header-1177-admin-menu-mobile.css +14 -4
  71. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  72. package/components/header-1177-admin/header-1177-admin-nav-item.css +108 -436
  73. package/components/header-1177-admin/header-1177-admin.css +33 -33
  74. package/components/header-1177-pro/header-1177-pro-avatar-lit.js +1 -1
  75. package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
  76. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +8 -13
  77. package/components/header-1177-pro/header-1177-pro-avatar.css +25 -128
  78. package/components/header-1177-pro/header-1177-pro-item-lit.js +1 -1
  79. package/components/header-1177-pro/header-1177-pro-item.css +338 -141
  80. package/components/header-1177-pro/header-1177-pro-lit.js +1 -1
  81. package/components/header-1177-pro/header-1177-pro-menu-mobile-lit.js +1 -1
  82. package/components/header-1177-pro/header-1177-pro-menu-mobile.css +14 -4
  83. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  84. package/components/header-1177-pro/header-1177-pro-nav-item.css +112 -386
  85. package/components/header-1177-pro/header-1177-pro-nav-lit.js +1 -1
  86. package/components/header-1177-pro/header-1177-pro-nav.css +10 -0
  87. package/components/header-1177-pro/header-1177-pro-region-picker-lit.js +1 -1
  88. package/components/header-1177-pro/header-1177-pro-region-picker-mobile-lit.js +1 -1
  89. package/components/header-1177-pro/header-1177-pro-region-picker-mobile.css +4 -4
  90. package/components/header-1177-pro/header-1177-pro-region-picker.css +3 -2
  91. package/components/header-1177-pro/header-1177-pro.css +35 -33
  92. package/components/header-inera/header-inera-item-lit.js +1 -1
  93. package/components/header-inera/header-inera-item.css +92 -53
  94. package/components/header-inera/header-inera-lit.js +1 -1
  95. package/components/header-inera/header-inera-menu-mobile-lit.js +1 -1
  96. package/components/header-inera/header-inera-menu-mobile.css +18 -4
  97. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  98. package/components/header-inera/header-inera-nav-item.css +51 -70
  99. package/components/header-inera/header-inera.css +12 -9
  100. package/components/header-inera-admin/composite-header-inera-admin.css +241 -320
  101. package/components/header-inera-admin/header-inera-admin-avatar-lit.js +1 -1
  102. package/components/header-inera-admin/header-inera-admin-avatar-mobile-lit.js +1 -1
  103. package/components/header-inera-admin/header-inera-admin-avatar-mobile.css +9 -12
  104. package/components/header-inera-admin/header-inera-admin-avatar.css +25 -128
  105. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  106. package/components/header-inera-admin/header-inera-admin-item.css +101 -53
  107. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  108. package/components/header-inera-admin/header-inera-admin-menu-mobile-lit.js +1 -1
  109. package/components/header-inera-admin/header-inera-admin-menu-mobile.css +61 -58
  110. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  111. package/components/header-inera-admin/header-inera-admin-nav-item.css +52 -76
  112. package/components/header-inera-admin/header-inera-admin.css +5 -5
  113. package/components/header-patient/header-patient-lit.js +1 -1
  114. package/components/header-patient/header-patient.css +27 -126
  115. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  116. package/components/mobile-menu/mobile-menu.css +311 -435
  117. package/components/navigation/content/navigation-content-lit.js +1 -1
  118. package/components/navigation/content/navigation-content.css +15 -149
  119. package/components/navigation/local/navigation-local-lit.js +1 -1
  120. package/components/navigation/local/navigation-local.css +10 -14
  121. package/components/notification-badge/notification-badge-lit.js +1 -1
  122. package/components/notification-badge/notification-badge.css +1 -0
  123. package/components/pagination/data-pagination/data-pagination-lit.js +1 -1
  124. package/components/pagination/data-pagination/data-pagination.css +107 -131
  125. package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
  126. package/components/pagination/list-pagination/list-pagination.css +84 -54
  127. package/components/popover/popover-content-lit.js +1 -1
  128. package/components/popover/popover-content.css +86 -167
  129. package/components/popover/popover-lit.js +1 -1
  130. package/components/popover/popover.css +2 -2
  131. package/components/progressbar/progressbar-lit.js +1 -1
  132. package/components/progressbar/progressbar.css +10 -113
  133. package/components/puff-list/puff-list-lit.js +1 -1
  134. package/components/puff-list/puff-list.css +89 -216
  135. package/components/side-menu/side-menu-lit.js +1 -1
  136. package/components/side-menu/side-menu.css +66 -74
  137. package/components/side-panel/side-panel-lit.js +1 -1
  138. package/components/side-panel/side-panel.css +23 -19
  139. package/components/stepper/stepper-lit.js +1 -1
  140. package/components/stepper/stepper.css +19 -146
  141. package/components/tabs/tab-lit.js +1 -1
  142. package/components/tabs/tab.css +5 -5
  143. package/components/tabs/tabs-lit.js +2 -2
  144. package/components/tabs/tabs.css +0 -2
  145. package/components/tag/tag-lit.js +1 -1
  146. package/components/tag/tag.css +12 -7
  147. package/components/tooltip/tooltip-lit.js +1 -1
  148. package/components/tooltip/tooltip.css +8 -9
  149. package/global/global.css +919 -729
  150. package/global/icons/Inera-Design-Icons.eot +0 -0
  151. package/global/icons/Inera-Design-Icons.svg +14 -2
  152. package/global/icons/Inera-Design-Icons.ttf +0 -0
  153. package/global/icons/Inera-Design-Icons.woff +0 -0
  154. package/global/util/util.css +12 -2
  155. package/package.json +1 -1
  156. package/styles.css +1323 -1117
  157. package/tokens/themes/1177-admin-tokens.css +534 -138
  158. package/tokens/themes/1177-pro-tokens.css +534 -138
  159. package/tokens/themes/1177-tokens.css +534 -138
  160. package/tokens/themes/inera-admin-tokens.css +365 -81
  161. package/tokens/themes/inera-tokens.css +365 -81
package/components/card/card.css CHANGED
@@ -25,75 +25,13 @@
25
25
  /*******
26
26
  * A11Y
27
27
  ********/
28
- :root {
28
+ .ids--light, .ids--dark {
29
29
  --IDS-FONT-FAMILY-BASE: "Open Sans";
30
30
  --IDS-FONT-FAMILY-HEADING: "Inter";
31
31
  --IDS-FONT-COLOR: var(--ids-color-surface-text-on-default);
32
- --IDS-HEADING-XXL__COLOR: var(--ids-color-heading-text-xxl);
33
- --IDS-HEADING-XXL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
34
- --IDS-HEADING-XXL__FONT-SIZE: 2rem;
35
- --IDS-HEADING-XXL__LINE-HEIGHT: 2.5rem;
36
- --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 3rem;
37
- --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.25rem;
38
- --IDS-HEADING-XXL__FONT-WEIGHT: 700;
39
- --IDS-HEADING-XXL__LETTER-SPACING: -0.052rem;
40
- --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: -0.078rem;
41
32
  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
42
- --IDS-HEADING-XL__COLOR: var(--ids-color-heading-text-xl);
43
- --IDS-HEADING-XL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
44
- --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
45
- --IDS-HEADING-XL__LINE-HEIGHT: 2.125rem;
46
- --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2.25rem;
47
- --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.625rem;
48
- --IDS-HEADING-XL__FONT-WEIGHT: 700;
49
- --IDS-HEADING-XL__LETTER-SPACING: -0.031rem;
50
- --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: -0.063rem;
51
33
  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
52
- --IDS-HEADING-L__COLOR: var(--ids-color-heading-text-l);
53
- --IDS-HEADING-L__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
54
- --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
55
- --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
56
- --IDS-HEADING-L__FONT-SIZE: 1.5rem;
57
- --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
58
- --IDS-HEADING-L__FONT-WEIGHT: 700;
59
- --IDS-HEADING-L__LETTER-SPACING: -0.025rem;
60
- --IDS-HEADING-L__LETTER-SPACING-DESKTOP: -0.044rem;
61
34
  --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
62
- --IDS-HEADING-M__COLOR: var(--ids-color-heading-text-m);
63
- --IDS-HEADING-M__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
64
- --IDS-HEADING-M__FONT-SIZE: 1.375rem;
65
- --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
66
- --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
67
- --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 1.875rem;
68
- --IDS-HEADING-M__FONT-WEIGHT: 700;
69
- --IDS-HEADING-M__LETTER-SPACING: -0.019rem;
70
- --IDS-HEADING-M__LETTER-SPACING-DESKTOP: -0.031rem;
71
- --IDS-HEADING-S__COLOR: var(--ids-color-heading-text-s);
72
- --IDS-HEADING-S__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
73
- --IDS-HEADING-S__FONT-SIZE: 1.25rem;
74
- --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
75
- --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
76
- --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.5rem;
77
- --IDS-HEADING-S__FONT-WEIGHT: 700;
78
- --IDS-HEADING-S__LETTER-SPACING: -0.013rem;
79
- --IDS-HEADING-S__LETTER-SPACING-DESKTOP: -0.025rem;
80
- --IDS-HEADING-XS__COLOR: var(--ids-color-heading-text-xs);
81
- --IDS-HEADING-XS__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
82
- --IDS-HEADING-XS__FONT-SIZE: 1rem;
83
- --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
84
- --IDS-HEADING-XS__FONT-WEIGHT: 700;
85
- --IDS-HEADING-XS__LETTER-SPACING: 0;
86
- --IDS-ANCHOR__COLOR: var(--ids-color-interactive-text-default);
87
- --IDS-ANCHOR__HOVER-COLOR: var(--ids-color-interactive-text-hover);
88
- --IDS-PREAMBLE__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
89
- --IDS-PREAMBLE__FONT-SIZE: 1.125rem;
90
- --IDS-PREAMBLE__LINE-HEIGHT: 1.75rem;
91
- --IDS-PREAMBLE__FONT-SIZE-DESKTOP: 1.375rem;
92
- --IDS-PREAMBLE__LINE-HEIGHT-DESKTOP: 2.25rem;
93
- --IDS-BODY__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
94
- --IDS-BODY__FONT-SIZE: 1rem;
95
- --IDS-BODY__LINE-HEIGHT: 1.5rem;
96
- --IDS-BODY--DISABLED__COLOR: var(--ids-color-interactive-text-disabled);
97
35
  --IDS-PAGE-LIST__COLOR: var(--ids-color-brand-text-primary);
98
36
  --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
99
37
  --IDS-PAGE-LIST__FONT-SIZE: 1.25rem;
@@ -105,66 +43,25 @@
105
43
  --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
106
44
  --IDS-DIVIDER__COLOR: var(--ids-color-surface-border-default);
107
45
  }
108
- :root.ids--1177-pro, :root.ids--1177-admin {
46
+ .ids--light.ids--1177-pro, .ids--light.ids--1177-admin, .ids--dark.ids--1177-pro, .ids--dark.ids--1177-admin {
109
47
  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
110
48
  }
111
- :root.ids--inera, :root.ids--inera-admin {
49
+ .ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
112
50
  --IDS-FONT-FAMILY-BASE: "Open Sans";
113
51
  --IDS-FONT-FAMILY-HEADING: "Poppins";
114
- --IDS-HEADING-XXL__FONT-SIZE: 1.875rem;
115
- --IDS-HEADING-XXL__LINE-HEIGHT: 2.375rem;
116
- --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 2.5rem;
117
- --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.125rem;
118
- --IDS-HEADING-XXL__FONT-WEIGHT: 600;
119
- --IDS-HEADING-XXL__LETTER-SPACING: inherit;
120
- --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: inherit;
121
52
  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
122
- --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
123
- --IDS-HEADING-XL__LINE-HEIGHT: 2rem;
124
- --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2rem;
125
- --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.5rem;
126
- --IDS-HEADING-XL__FONT-WEIGHT: 600;
127
- --IDS-HEADING-XL__LETTER-SPACING: inherit;
128
- --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: inherit;
129
53
  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
130
- --IDS-HEADING-L__FONT-SIZE: 1.5rem;
131
- --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
132
- --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
133
- --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
134
- --IDS-HEADING-L__FONT-WEIGHT: 600;
135
- --IDS-HEADING-L__LETTER-SPACING: inherit;
136
- --IDS-HEADING-L__LETTER-SPACING-DESKTOP: inherit;
137
54
  --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
138
- --IDS-HEADING-M__FONT-SIZE: 1.375rem;
139
- --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
140
- --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
141
- --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 2rem;
142
- --IDS-HEADING-M__FONT-WEIGHT: 600;
143
- --IDS-HEADING-M__LETTER-SPACING: inherit;
144
- --IDS-HEADING-M__LETTER-SPACING-DESKTOP: inherit;
145
- --IDS-HEADING-S__FONT-SIZE: 1.25rem;
146
- --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
147
- --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
148
- --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.625rem;
149
- --IDS-HEADING-S__FONT-WEIGHT: 600;
150
- --IDS-HEADING-S__LETTER-SPACING: inherit;
151
- --IDS-HEADING-S__LETTER-SPACING-DESKTOP: inherit;
152
- --IDS-HEADING-XS__FONT-SIZE: 1rem;
153
- --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
154
- --IDS-HEADING-XS__FONT-WEIGHT: 600;
155
- --IDS-HEADING-XS__LETTER-SPACING: inherit;
156
- --IDS-BODY__LINE-HEIGHT: 1.625rem;
157
- --IDS-BODY--DISABLED__COLOR: var(--ids-color-interactive-text-disabled);
158
55
  --IDS-PAGE-LIST__FONT-WEIGHT: 600;
159
56
  --IDS-PAGE-LIST__LETTER-SPACING: 0;
160
57
  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: normal;
161
58
  --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
162
59
  --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
163
60
  }
164
- :root.ids--dark {
61
+ .ids--light.ids--dark, .ids--dark.ids--dark {
165
62
  --IDS-PAGE-LIST__COLOR: var(--ids-color-navigation-text-default);
166
63
  }
167
- :root.ids--dark.ids--1177-pro, :root.ids--dark.ids--1177-admin, :root.ids--dark.ids--inera, :root.ids--dark.ids--inera-admin {
64
+ .ids--light.ids--dark.ids--1177-pro, .ids--light.ids--dark.ids--1177-admin, .ids--light.ids--dark.ids--inera, .ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--1177-pro, .ids--dark.ids--dark.ids--1177-admin, .ids--dark.ids--dark.ids--inera, .ids--dark.ids--dark.ids--inera-admin {
168
65
  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
169
66
  }
170
67
 
@@ -183,10 +80,10 @@
183
80
  padding: 1.25rem 1rem;
184
81
  font-style: normal;
185
82
  color: var(--IDS-CARD__COLOR);
186
- font-family: var(--IDS-BODY__FONT-FAMILY);
187
- font-size: var(--IDS-BODY__FONT-SIZE);
188
- line-height: var(--IDS-BODY__LINE-HEIGHT);
189
- font-weight: 400;
83
+ font-family: var(--ids-font-family-body-text);
84
+ font-size: var(--ids-font-size-body-text);
85
+ line-height: var(--ids-line-height-body-text);
86
+ font-weight: var(--ids-font-weight-body-text);
190
87
  letter-spacing: 0;
191
88
  }
192
89
  .ids-card.ids-card--border-top {
@@ -196,13 +93,21 @@
196
93
  display: block;
197
94
  position: absolute;
198
95
  top: 0;
199
- left: 0;
200
- right: 0;
201
- height: 0.25rem;
202
- background-color: var(--IDS-CARD--BORDER-TOP__BACKGROUND-COLOR);
96
+ left: -1px;
97
+ right: -1px;
98
+ height: var(--IDS-CARD__BORDER-RADIUS);
99
+ min-height: var(--IDS-CARD--BORDER-TOP__HEIGHT);
100
+ overflow: hidden;
101
+ pointer-events: none;
203
102
  border-top-left-radius: var(--IDS-CARD__BORDER-RADIUS);
204
103
  border-top-right-radius: var(--IDS-CARD__BORDER-RADIUS);
205
104
  }
105
+ .ids-card.ids-card--border-top .ids-card__border-top::after {
106
+ content: "";
107
+ display: block;
108
+ height: var(--IDS-CARD--BORDER-TOP__HEIGHT);
109
+ background-color: var(--IDS-CARD--BORDER-TOP__BACKGROUND-COLOR);
110
+ }
206
111
  @media (min-width: 1024px) {
207
112
  .ids-card .ids-card__content {
208
113
  padding: 1.5rem 1.25rem;
@@ -210,7 +115,6 @@
210
115
  }
211
116
  @media (max-width: 1024px) {
212
117
  .ids-card.ids-card--hide-on-m {
213
- box-shadow: none !important;
214
118
  border: none !important;
215
119
  overflow: visible !important;
216
120
  background-color: none !important;
@@ -226,7 +130,6 @@
226
130
  }
227
131
  @media (max-width: 640px) {
228
132
  .ids-card.ids-card--hide-on-s {
229
- box-shadow: none !important;
230
133
  border: none !important;
231
134
  overflow: visible !important;
232
135
  background-color: none !important;
@@ -247,6 +150,7 @@
247
150
  .ids-card.ids-card--focus-card {
248
151
  background-color: var(--IDS-CARD--FOCUS__BACKGROUND-COLOR);
249
152
  border: var(--IDS-CARD--FOCUS__BORDER);
153
+ box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-1);
250
154
  }
251
155
  .ids-card.ids-card--focus-card .ids-card__content {
252
156
  padding: 1.1875rem 0.9375rem;
@@ -261,7 +165,6 @@
261
165
  }
262
166
  @media (max-width: 1024px) {
263
167
  .ids-card.ids-card--lean.ids-card--hide-on-m {
264
- box-shadow: none !important;
265
168
  border: none !important;
266
169
  overflow: visible !important;
267
170
  background-color: none !important;
@@ -277,7 +180,6 @@
277
180
  }
278
181
  @media (max-width: 640px) {
279
182
  .ids-card.ids-card--lean.ids-card--hide-on-s {
280
- box-shadow: none !important;
281
183
  border: none !important;
282
184
  overflow: visible !important;
283
185
  background-color: none !important;
@@ -291,21 +193,25 @@
291
193
  display: none !important;
292
194
  }
293
195
  }
294
- .ids-card.ids-card--interactive :focus-within {
295
- outline: var(--IDS-FOCUS__OUTLINE);
296
- outline-offset: 0.1875rem !important;
297
- }
298
- .ids-card.ids-card--interactive .ids-card--interactive-link {
196
+ .ids-card.ids-card--interactive .ids-card--interactive-link,
197
+ .ids-card.ids-card--interactive ::slotted([slot=interactive]) {
299
198
  border-radius: var(--IDS-CARD__BORDER-RADIUS);
199
+ cursor: pointer;
300
200
  position: absolute;
301
201
  top: 0;
302
202
  left: 0;
303
203
  right: 0;
304
204
  bottom: 0;
205
+ width: 100%;
206
+ height: 100%;
305
207
  }
306
- .ids-card.ids-card--interactive:hover, .ids-card.ids-card--interactive:focus, .ids-card.ids-card--interactive:focus-within {
307
- box-shadow: var(--IDS-BOX-SHADOW);
208
+ .ids-card.ids-card--interactive .ids-card--interactive-link:focus-visible,
209
+ .ids-card.ids-card--interactive ::slotted([slot=interactive]):focus-visible {
210
+ outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
211
+ outline-offset: 0.1875rem !important;
212
+ }
213
+ .ids-card.ids-card--interactive:hover {
214
+ box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-1);
308
215
  background-color: var(--IDS-CARD--INTERACTIVE__BACKGROUND-COLOR);
309
216
  cursor: pointer;
310
- position: relative;
311
217
  }
package/components/carousel/carousel-item-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = ":root{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Inter\";--IDS-FONT-COLOR:var(--ids-color-surface-text-on-default);--IDS-HEADING-XXL__COLOR:var(--ids-color-heading-text-xxl);--IDS-HEADING-XXL__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-HEADING-XXL__FONT-SIZE:2rem;--IDS-HEADING-XXL__LINE-HEIGHT:2.5rem;--IDS-HEADING-XXL__FONT-SIZE-DESKTOP:3rem;--IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP:3.25rem;--IDS-HEADING-XXL__FONT-WEIGHT:700;--IDS-HEADING-XXL__LETTER-SPACING:-0.052rem;--IDS-HEADING-XXL__LETTER-SPACING-DESKTOP:-0.078rem;--IDS-HEADING-XXL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-XL__COLOR:var(--ids-color-heading-text-xl);--IDS-HEADING-XL__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-HEADING-XL__FONT-SIZE:1.625rem;--IDS-HEADING-XL__LINE-HEIGHT:2.125rem;--IDS-HEADING-XL__FONT-SIZE-DESKTOP:2.25rem;--IDS-HEADING-XL__LINE-HEIGHT-DESKTOP:2.625rem;--IDS-HEADING-XL__FONT-WEIGHT:700;--IDS-HEADING-XL__LETTER-SPACING:-0.031rem;--IDS-HEADING-XL__LETTER-SPACING-DESKTOP:-0.063rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-L__COLOR:var(--ids-color-heading-text-l);--IDS-HEADING-L__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-HEADING-L__FONT-SIZE-DESKTOP:1.75rem;--IDS-HEADING-L__LINE-HEIGHT-DESKTOP:2.25rem;--IDS-HEADING-L__FONT-SIZE:1.5rem;--IDS-HEADING-L__LINE-HEIGHT:1.875rem;--IDS-HEADING-L__FONT-WEIGHT:700;--IDS-HEADING-L__LETTER-SPACING:-0.025rem;--IDS-HEADING-L__LETTER-SPACING-DESKTOP:-0.044rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-M__COLOR:var(--ids-color-heading-text-m);--IDS-HEADING-M__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-HEADING-M__FONT-SIZE:1.375rem;--IDS-HEADING-M__LINE-HEIGHT:1.75rem;--IDS-HEADING-M__FONT-SIZE-DESKTOP:1.5rem;--IDS-HEADING-M__LINE-HEIGHT-DESKTOP:1.875rem;--IDS-HEADING-M__FONT-WEIGHT:700;--IDS-HEADING-M__LETTER-SPACING:-0.019rem;--IDS-HEADING-M__LETTER-SPACING-DESKTOP:-0.031rem;--IDS-HEADING-S__COLOR:var(--ids-color-heading-text-s);--IDS-HEADING-S__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-HEADING-S__FONT-SIZE:1.25rem;--IDS-HEADING-S__LINE-HEIGHT:1.5rem;--IDS-HEADING-S__FONT-SIZE-DESKTOP:1.25rem;--IDS-HEADING-S__LINE-HEIGHT-DESKTOP:1.5rem;--IDS-HEADING-S__FONT-WEIGHT:700;--IDS-HEADING-S__LETTER-SPACING:-0.013rem;--IDS-HEADING-S__LETTER-SPACING-DESKTOP:-0.025rem;--IDS-HEADING-XS__COLOR:var(--ids-color-heading-text-xs);--IDS-HEADING-XS__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-HEADING-XS__FONT-SIZE:1rem;--IDS-HEADING-XS__LINE-HEIGHT:1.25rem;--IDS-HEADING-XS__FONT-WEIGHT:700;--IDS-HEADING-XS__LETTER-SPACING:0;--IDS-ANCHOR__COLOR:var(--ids-color-interactive-text-default);--IDS-ANCHOR__HOVER-COLOR:var(--ids-color-interactive-text-hover);--IDS-PREAMBLE__FONT-FAMILY:var(--IDS-FONT-FAMILY-BASE);--IDS-PREAMBLE__FONT-SIZE:1.125rem;--IDS-PREAMBLE__LINE-HEIGHT:1.75rem;--IDS-PREAMBLE__FONT-SIZE-DESKTOP:1.375rem;--IDS-PREAMBLE__LINE-HEIGHT-DESKTOP:2.25rem;--IDS-BODY__FONT-FAMILY:var(--IDS-FONT-FAMILY-BASE);--IDS-BODY__FONT-SIZE:1rem;--IDS-BODY__LINE-HEIGHT:1.5rem;--IDS-BODY--DISABLED__COLOR:var(--ids-color-interactive-text-disabled);--IDS-PAGE-LIST__COLOR:var(--ids-color-brand-text-primary);--IDS-PAGE-LIST__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-PAGE-LIST__FONT-SIZE:1.25rem;--IDS-PAGE-LIST__LINE-HEIGHT:1.5rem;--IDS-PAGE-LIST__FONT-WEIGHT:700;--IDS-PAGE-LIST__LETTER-SPACING:-0.025rem;--IDS-BULLET-LIST__MARKER-COLOR:var(--ids-color-brand-text-primary);--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:bold;--IDS-BULLET-LIST__LINE-HEIGHT:1.5rem;--IDS-DIVIDER__COLOR:var(--ids-color-surface-border-default)}:root.ids--1177-admin,:root.ids--1177-pro{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}:root.ids--inera,:root.ids--inera-admin{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Poppins\";--IDS-HEADING-XXL__FONT-SIZE:1.875rem;--IDS-HEADING-XXL__LINE-HEIGHT:2.375rem;--IDS-HEADING-XXL__FONT-SIZE-DESKTOP:2.5rem;--IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP:3.125rem;--IDS-HEADING-XXL__FONT-WEIGHT:600;--IDS-HEADING-XXL__LETTER-SPACING:inherit;--IDS-HEADING-XXL__LETTER-SPACING-DESKTOP:inherit;--IDS-HEADING-XXL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-XL__FONT-SIZE:1.625rem;--IDS-HEADING-XL__LINE-HEIGHT:2rem;--IDS-HEADING-XL__FONT-SIZE-DESKTOP:2rem;--IDS-HEADING-XL__LINE-HEIGHT-DESKTOP:2.5rem;--IDS-HEADING-XL__FONT-WEIGHT:600;--IDS-HEADING-XL__LETTER-SPACING:inherit;--IDS-HEADING-XL__LETTER-SPACING-DESKTOP:inherit;--IDS-HEADING-XL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-L__FONT-SIZE:1.5rem;--IDS-HEADING-L__LINE-HEIGHT:1.875rem;--IDS-HEADING-L__FONT-SIZE-DESKTOP:1.75rem;--IDS-HEADING-L__LINE-HEIGHT-DESKTOP:2.25rem;--IDS-HEADING-L__FONT-WEIGHT:600;--IDS-HEADING-L__LETTER-SPACING:inherit;--IDS-HEADING-L__LETTER-SPACING-DESKTOP:inherit;--IDS-HEADING-L__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-M__FONT-SIZE:1.375rem;--IDS-HEADING-M__LINE-HEIGHT:1.75rem;--IDS-HEADING-M__FONT-SIZE-DESKTOP:1.5rem;--IDS-HEADING-M__LINE-HEIGHT-DESKTOP:2rem;--IDS-HEADING-M__FONT-WEIGHT:600;--IDS-HEADING-M__LETTER-SPACING:inherit;--IDS-HEADING-M__LETTER-SPACING-DESKTOP:inherit;--IDS-HEADING-S__FONT-SIZE:1.25rem;--IDS-HEADING-S__LINE-HEIGHT:1.5rem;--IDS-HEADING-S__FONT-SIZE-DESKTOP:1.25rem;--IDS-HEADING-S__LINE-HEIGHT-DESKTOP:1.625rem;--IDS-HEADING-S__FONT-WEIGHT:600;--IDS-HEADING-S__LETTER-SPACING:inherit;--IDS-HEADING-S__LETTER-SPACING-DESKTOP:inherit;--IDS-HEADING-XS__FONT-SIZE:1rem;--IDS-HEADING-XS__LINE-HEIGHT:1.25rem;--IDS-HEADING-XS__FONT-WEIGHT:600;--IDS-HEADING-XS__LETTER-SPACING:inherit;--IDS-BODY__LINE-HEIGHT:1.625rem;--IDS-BODY--DISABLED__COLOR:var(--ids-color-interactive-text-disabled);--IDS-PAGE-LIST__FONT-WEIGHT:600;--IDS-PAGE-LIST__LETTER-SPACING:0;--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:normal;--IDS-BULLET-LIST__LINE-HEIGHT:1.625rem;--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT:600}:root.ids--dark{--IDS-PAGE-LIST__COLOR:var(--ids-color-navigation-text-default)}:root.ids--dark.ids--1177-admin,:root.ids--dark.ids--1177-pro,:root.ids--dark.ids--inera,:root.ids--dark.ids--inera-admin{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-carousel-item{background-color:var(--IDS-CAROUSEL-ITEM__BACKGROUND-COLOR);border:var(--IDS-CAROUSEL-ITEM__BORDER);border-radius:.188rem}.ids-carousel-item .ids-carousel-item__headline{color:var(--IDS-CAROUSEL-ITEM__COLOR);font-family:var(--IDS-HEADING-S__FONT-FAMILY);font-size:var(--IDS-HEADING-S__FONT-SIZE);font-style:normal;font-weight:var(--IDS-HEADING-S__FONT-WEIGHT);letter-spacing:var(--IDS-HEADING-S__LETTER-SPACING);line-height:var(--IDS-HEADING-S__LINE-HEIGHT)}@media (min-width:1024px){.ids-carousel-item .ids-carousel-item__headline{font-size:var(--IDS-HEADING-S__FONT-SIZE-DESKTOP);letter-spacing:var(--IDS-HEADING-S__LETTER-SPACING-DESKTOP);line-height:var(--IDS-HEADING-S__LINE-HEIGHT-DESKTOP)}}.ids-carousel-item .ids-carousel-item__headline{margin-bottom:.5rem!important;margin-top:0!important}.ids-carousel-item .ids-carousel-item__image{display:flex;justify-content:center;overflow:hidden;padding-top:66.6666666667%;position:relative}.ids-carousel-item .ids-carousel-item__content{color:var(--IDS-CAROUSEL-ITEM__COLOR);flex:6;font-family:var(--IDS-FONT-FAMILY-BASE);padding:1.75rem 1.25rem}.ids-carousel-item .ids-carousel-item__footer{align-items:center;display:flex;justify-content:space-between;margin-top:1.875rem}.ids-carousel-item .ids-carousel-item__description{color:var(--IDS-CAROUSEL-ITEM__DESCRIPTION-COLOR)}@media only screen and (max-width:1024px){.ids-carousel-item .ids-carousel-item__footer{align-items:flex-start;flex-direction:column;margin-top:1.75rem}.ids-carousel-item .ids-carousel-item__description{margin-bottom:.875rem}}@media only screen and (max-width:640px){.ids-carousel-item .ids-carousel-item__footer{margin-top:.625rem}}.ids-carousel-item ::slotted([slot=image]),.ids-carousel-item img{left:50%;max-height:100%;max-width:100%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}";
3
+ var css_248z = ".ids--dark,.ids--light{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Inter\";--IDS-FONT-COLOR:var(--ids-color-surface-text-on-default);--IDS-HEADING-XXL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.875rem;--IDS-PAGE-LIST__COLOR:var(--ids-color-brand-text-primary);--IDS-PAGE-LIST__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-PAGE-LIST__FONT-SIZE:1.25rem;--IDS-PAGE-LIST__LINE-HEIGHT:1.5rem;--IDS-PAGE-LIST__FONT-WEIGHT:700;--IDS-PAGE-LIST__LETTER-SPACING:-0.025rem;--IDS-BULLET-LIST__MARKER-COLOR:var(--ids-color-brand-text-primary);--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:bold;--IDS-BULLET-LIST__LINE-HEIGHT:1.5rem;--IDS-DIVIDER__COLOR:var(--ids-color-surface-border-default)}.ids--dark.ids--1177-admin,.ids--dark.ids--1177-pro,.ids--light.ids--1177-admin,.ids--light.ids--1177-pro{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}.ids--dark.ids--inera,.ids--dark.ids--inera-admin,.ids--light.ids--inera,.ids--light.ids--inera-admin{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Poppins\";--IDS-HEADING-XXL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.25rem;--IDS-PAGE-LIST__FONT-WEIGHT:600;--IDS-PAGE-LIST__LETTER-SPACING:0;--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:normal;--IDS-BULLET-LIST__LINE-HEIGHT:1.625rem;--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT:600}.ids--dark.ids--dark,.ids--light.ids--dark{--IDS-PAGE-LIST__COLOR:var(--ids-color-navigation-text-default)}.ids--dark.ids--dark.ids--1177-admin,.ids--dark.ids--dark.ids--1177-pro,.ids--dark.ids--dark.ids--inera,.ids--dark.ids--dark.ids--inera-admin,.ids--light.ids--dark.ids--1177-admin,.ids--light.ids--dark.ids--1177-pro,.ids--light.ids--dark.ids--inera,.ids--light.ids--dark.ids--inera-admin{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-carousel-item{background-color:var(--IDS-CAROUSEL-ITEM__BACKGROUND-COLOR);border:var(--IDS-CAROUSEL-ITEM__BORDER);border-radius:.188rem}.ids-carousel-item .ids-carousel-item__headline{color:var(--IDS-CAROUSEL-ITEM__COLOR);font-family:var(--ids-font-family-heading);font-size:var(--ids-font-size-heading-s);font-style:normal;font-weight:var(--ids-font-weight-heading-s);letter-spacing:var(--ids-font-letter-spacing-heading-s);line-height:var(--ids-font-line-height-heading-s);margin-bottom:.5rem!important;margin-top:0!important}.ids-carousel-item .ids-carousel-item__image{display:flex;justify-content:center;overflow:hidden;padding-top:66.6666666667%;position:relative}.ids-carousel-item .ids-carousel-item__content{color:var(--IDS-CAROUSEL-ITEM__COLOR);flex:6;font-family:var(--IDS-FONT-FAMILY-BASE);padding:1.75rem 1.25rem}.ids-carousel-item .ids-carousel-item__footer{align-items:center;display:flex;justify-content:space-between;margin-top:1.875rem}.ids-carousel-item .ids-carousel-item__description{color:var(--IDS-CAROUSEL-ITEM__DESCRIPTION-COLOR)}@media only screen and (max-width:1024px){.ids-carousel-item .ids-carousel-item__footer{align-items:flex-start;flex-direction:column;margin-top:1.75rem}.ids-carousel-item .ids-carousel-item__description{margin-bottom:.875rem}}@media only screen and (max-width:640px){.ids-carousel-item .ids-carousel-item__footer{margin-top:.625rem}}.ids-carousel-item ::slotted([slot=image]),.ids-carousel-item img{left:50%;max-height:100%;max-width:100%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}";
4
4
 
5
5
  var carouselItemLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/carousel/carousel-item.css CHANGED
@@ -1,72 +1,10 @@
1
- :root {
1
+ .ids--light, .ids--dark {
2
2
  --IDS-FONT-FAMILY-BASE: "Open Sans";
3
3
  --IDS-FONT-FAMILY-HEADING: "Inter";
4
4
  --IDS-FONT-COLOR: var(--ids-color-surface-text-on-default);
5
- --IDS-HEADING-XXL__COLOR: var(--ids-color-heading-text-xxl);
6
- --IDS-HEADING-XXL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
7
- --IDS-HEADING-XXL__FONT-SIZE: 2rem;
8
- --IDS-HEADING-XXL__LINE-HEIGHT: 2.5rem;
9
- --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 3rem;
10
- --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.25rem;
11
- --IDS-HEADING-XXL__FONT-WEIGHT: 700;
12
- --IDS-HEADING-XXL__LETTER-SPACING: -0.052rem;
13
- --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: -0.078rem;
14
5
  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
15
- --IDS-HEADING-XL__COLOR: var(--ids-color-heading-text-xl);
16
- --IDS-HEADING-XL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
17
- --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
18
- --IDS-HEADING-XL__LINE-HEIGHT: 2.125rem;
19
- --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2.25rem;
20
- --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.625rem;
21
- --IDS-HEADING-XL__FONT-WEIGHT: 700;
22
- --IDS-HEADING-XL__LETTER-SPACING: -0.031rem;
23
- --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: -0.063rem;
24
6
  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
25
- --IDS-HEADING-L__COLOR: var(--ids-color-heading-text-l);
26
- --IDS-HEADING-L__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
27
- --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
28
- --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
29
- --IDS-HEADING-L__FONT-SIZE: 1.5rem;
30
- --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
31
- --IDS-HEADING-L__FONT-WEIGHT: 700;
32
- --IDS-HEADING-L__LETTER-SPACING: -0.025rem;
33
- --IDS-HEADING-L__LETTER-SPACING-DESKTOP: -0.044rem;
34
7
  --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
35
- --IDS-HEADING-M__COLOR: var(--ids-color-heading-text-m);
36
- --IDS-HEADING-M__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
37
- --IDS-HEADING-M__FONT-SIZE: 1.375rem;
38
- --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
39
- --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
40
- --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 1.875rem;
41
- --IDS-HEADING-M__FONT-WEIGHT: 700;
42
- --IDS-HEADING-M__LETTER-SPACING: -0.019rem;
43
- --IDS-HEADING-M__LETTER-SPACING-DESKTOP: -0.031rem;
44
- --IDS-HEADING-S__COLOR: var(--ids-color-heading-text-s);
45
- --IDS-HEADING-S__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
46
- --IDS-HEADING-S__FONT-SIZE: 1.25rem;
47
- --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
48
- --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
49
- --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.5rem;
50
- --IDS-HEADING-S__FONT-WEIGHT: 700;
51
- --IDS-HEADING-S__LETTER-SPACING: -0.013rem;
52
- --IDS-HEADING-S__LETTER-SPACING-DESKTOP: -0.025rem;
53
- --IDS-HEADING-XS__COLOR: var(--ids-color-heading-text-xs);
54
- --IDS-HEADING-XS__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
55
- --IDS-HEADING-XS__FONT-SIZE: 1rem;
56
- --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
57
- --IDS-HEADING-XS__FONT-WEIGHT: 700;
58
- --IDS-HEADING-XS__LETTER-SPACING: 0;
59
- --IDS-ANCHOR__COLOR: var(--ids-color-interactive-text-default);
60
- --IDS-ANCHOR__HOVER-COLOR: var(--ids-color-interactive-text-hover);
61
- --IDS-PREAMBLE__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
62
- --IDS-PREAMBLE__FONT-SIZE: 1.125rem;
63
- --IDS-PREAMBLE__LINE-HEIGHT: 1.75rem;
64
- --IDS-PREAMBLE__FONT-SIZE-DESKTOP: 1.375rem;
65
- --IDS-PREAMBLE__LINE-HEIGHT-DESKTOP: 2.25rem;
66
- --IDS-BODY__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
67
- --IDS-BODY__FONT-SIZE: 1rem;
68
- --IDS-BODY__LINE-HEIGHT: 1.5rem;
69
- --IDS-BODY--DISABLED__COLOR: var(--ids-color-interactive-text-disabled);
70
8
  --IDS-PAGE-LIST__COLOR: var(--ids-color-brand-text-primary);
71
9
  --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
72
10
  --IDS-PAGE-LIST__FONT-SIZE: 1.25rem;
@@ -78,66 +16,25 @@
78
16
  --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
79
17
  --IDS-DIVIDER__COLOR: var(--ids-color-surface-border-default);
80
18
  }
81
- :root.ids--1177-pro, :root.ids--1177-admin {
19
+ .ids--light.ids--1177-pro, .ids--light.ids--1177-admin, .ids--dark.ids--1177-pro, .ids--dark.ids--1177-admin {
82
20
  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
83
21
  }
84
- :root.ids--inera, :root.ids--inera-admin {
22
+ .ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
85
23
  --IDS-FONT-FAMILY-BASE: "Open Sans";
86
24
  --IDS-FONT-FAMILY-HEADING: "Poppins";
87
- --IDS-HEADING-XXL__FONT-SIZE: 1.875rem;
88
- --IDS-HEADING-XXL__LINE-HEIGHT: 2.375rem;
89
- --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 2.5rem;
90
- --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.125rem;
91
- --IDS-HEADING-XXL__FONT-WEIGHT: 600;
92
- --IDS-HEADING-XXL__LETTER-SPACING: inherit;
93
- --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: inherit;
94
25
  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
95
- --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
96
- --IDS-HEADING-XL__LINE-HEIGHT: 2rem;
97
- --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2rem;
98
- --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.5rem;
99
- --IDS-HEADING-XL__FONT-WEIGHT: 600;
100
- --IDS-HEADING-XL__LETTER-SPACING: inherit;
101
- --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: inherit;
102
26
  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
103
- --IDS-HEADING-L__FONT-SIZE: 1.5rem;
104
- --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
105
- --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
106
- --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
107
- --IDS-HEADING-L__FONT-WEIGHT: 600;
108
- --IDS-HEADING-L__LETTER-SPACING: inherit;
109
- --IDS-HEADING-L__LETTER-SPACING-DESKTOP: inherit;
110
27
  --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
111
- --IDS-HEADING-M__FONT-SIZE: 1.375rem;
112
- --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
113
- --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
114
- --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 2rem;
115
- --IDS-HEADING-M__FONT-WEIGHT: 600;
116
- --IDS-HEADING-M__LETTER-SPACING: inherit;
117
- --IDS-HEADING-M__LETTER-SPACING-DESKTOP: inherit;
118
- --IDS-HEADING-S__FONT-SIZE: 1.25rem;
119
- --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
120
- --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
121
- --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.625rem;
122
- --IDS-HEADING-S__FONT-WEIGHT: 600;
123
- --IDS-HEADING-S__LETTER-SPACING: inherit;
124
- --IDS-HEADING-S__LETTER-SPACING-DESKTOP: inherit;
125
- --IDS-HEADING-XS__FONT-SIZE: 1rem;
126
- --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
127
- --IDS-HEADING-XS__FONT-WEIGHT: 600;
128
- --IDS-HEADING-XS__LETTER-SPACING: inherit;
129
- --IDS-BODY__LINE-HEIGHT: 1.625rem;
130
- --IDS-BODY--DISABLED__COLOR: var(--ids-color-interactive-text-disabled);
131
28
  --IDS-PAGE-LIST__FONT-WEIGHT: 600;
132
29
  --IDS-PAGE-LIST__LETTER-SPACING: 0;
133
30
  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: normal;
134
31
  --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
135
32
  --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
136
33
  }
137
- :root.ids--dark {
34
+ .ids--light.ids--dark, .ids--dark.ids--dark {
138
35
  --IDS-PAGE-LIST__COLOR: var(--ids-color-navigation-text-default);
139
36
  }
140
- :root.ids--dark.ids--1177-pro, :root.ids--dark.ids--1177-admin, :root.ids--dark.ids--inera, :root.ids--dark.ids--inera-admin {
37
+ .ids--light.ids--dark.ids--1177-pro, .ids--light.ids--dark.ids--1177-admin, .ids--light.ids--dark.ids--inera, .ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--1177-pro, .ids--dark.ids--dark.ids--1177-admin, .ids--dark.ids--dark.ids--inera, .ids--dark.ids--dark.ids--inera-admin {
141
38
  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
142
39
  }
143
40
 
@@ -161,20 +58,11 @@
161
58
  .ids-carousel-item .ids-carousel-item__headline {
162
59
  font-style: normal;
163
60
  color: var(--IDS-CAROUSEL-ITEM__COLOR);
164
- font-family: var(--IDS-HEADING-S__FONT-FAMILY);
165
- font-size: var(--IDS-HEADING-S__FONT-SIZE);
166
- line-height: var(--IDS-HEADING-S__LINE-HEIGHT);
167
- letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING);
168
- font-weight: var(--IDS-HEADING-S__FONT-WEIGHT);
169
- }
170
- @media (min-width: 1024px) {
171
- .ids-carousel-item .ids-carousel-item__headline {
172
- font-size: var(--IDS-HEADING-S__FONT-SIZE-DESKTOP);
173
- line-height: var(--IDS-HEADING-S__LINE-HEIGHT-DESKTOP);
174
- letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING-DESKTOP);
175
- }
176
- }
177
- .ids-carousel-item .ids-carousel-item__headline {
61
+ font-family: var(--ids-font-family-heading);
62
+ font-size: var(--ids-font-size-heading-s);
63
+ line-height: var(--ids-font-line-height-heading-s);
64
+ letter-spacing: var(--ids-font-letter-spacing-heading-s);
65
+ font-weight: var(--ids-font-weight-heading-s);
178
66
  margin-top: 0 !important;
179
67
  margin-bottom: 0.5rem !important;
180
68
  }
package/components/carousel/carousel-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-carousel{position:relative}.ids-carousel .ids-carousel-content{box-sizing:border-box;margin-left:0;margin-right:0;overflow:hidden;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;width:100%}.ids-carousel .ids-carousel__button-next:focus,.ids-carousel .ids-carousel__button-prev:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:0!important}.ids-carousel .ids-carousel__button-next,.ids-carousel .ids-carousel__button-prev{align-items:center;background:none;border:none;cursor:pointer;display:none;height:50%;justify-content:center;opacity:1;padding:0;position:absolute;top:calc(40% - 3rem);transform:translateY(-50%);transition:opacity .3s ease-in;z-index:3}.ids-carousel .ids-carousel__button-next:before,.ids-carousel .ids-carousel__button-prev:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-CAROUSEL-ICON__COLOR);display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:2.5rem;pointer-events:none;position:absolute;text-align:center}.ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile,.ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile{display:flex}.ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile:before,.ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile:before,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile:before,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile:before{color:var(--IDS-CAROUSEL-ICON__COLOR-MOBILE);font-size:1.25rem}.ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile:before,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile:before{left:0}.ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile:before,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile:before{right:.125rem}.ids-carousel .ids-carousel__button-prev:before{content:\"\\e937\";left:.25rem}.ids-carousel .ids-carousel__button-next:before{content:\"\\e938\";right:.25rem}.ids-carousel .ids-carousel-btn__inner{align-items:center;background-color:var(--IDS-CAROUSEL-ICON__BACKGROUND-COLOR);box-shadow:0 0 .375rem rgba(0,0,0,.3);box-shadow:0 0 rgba(0,0,0,.3);display:flex;height:3rem;justify-content:center;width:1.6875rem}.ids-carousel .ids-carousel-btn__inner .ids-icon{width:1rem}.ids-carousel .ids-carousel__button-prev{left:0}.ids-carousel .ids-carousel__button-prev .ids-carousel-btn__inner{border-radius:0 1.5rem 1.5rem 0}.ids-carousel .ids-carousel__button-prev .ids-icon{padding-right:.313rem}.ids-carousel .ids-carousel__button-next{right:0}.ids-carousel .ids-carousel__button-next .ids-carousel-btn__inner{border-radius:1.5rem 0 0 1.5rem}.ids-carousel .ids-carousel__button-next .ids-icon{padding-left:.313rem}@media only screen and (min-width:1024px){.ids-carousel .ids-carousel-content{margin-left:3.125rem;margin-right:3.125rem;width:calc(100% - 6.25rem)}.ids-carousel .ids-carousel__button-next,.ids-carousel .ids-carousel__button-prev{display:flex;width:3rem}.ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile,.ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile{display:none}}.ids-carousel .ids-carousel-item-wrapper,.ids-carousel ::slotted(.ids-carousel-item-wrapper){display:inline-block;position:absolute;top:0;transition:left .5s ease-in-out;width:100%;z-index:1}.ids-carousel .ids-carousel-item-wrapper.active,.ids-carousel .ids-carousel-item-wrapper.initial,.ids-carousel ::slotted(.ids-carousel-item-wrapper.active),.ids-carousel ::slotted(.ids-carousel-item-wrapper.initial){left:0;opacity:1;position:relative;z-index:2}.ids-carousel .ids-carousel-item-wrapper.next,.ids-carousel .ids-carousel-item-wrapper.prev,.ids-carousel ::slotted(.ids-carousel-item-wrapper.next),.ids-carousel ::slotted(.ids-carousel-item-wrapper.prev){z-index:2}.ids-carousel .animating-right .ids-carousel-item-wrapper.prev,.ids-carousel .animating-right ::slotted(.ids-carousel-item-wrapper.prev){z-index:2}.ids-carousel .animating-right .ids-carousel-item-wrapper.next,.ids-carousel .animating-right ::slotted(.ids-carousel-item-wrapper.next){z-index:2}.ids-carousel .animating-left .ids-carousel-item-wrapper.prev,.ids-carousel .animating-left ::slotted(.ids-carousel-item-wrapper.prev){z-index:2}.ids-carousel .animating-left .ids-carousel-item-wrapper.next,.ids-carousel .animating-left ::slotted(.ids-carousel-item-wrapper.next){z-index:2}.ids-carousel .ids-carousel-item-wrapper.prev,.ids-carousel ::slotted(.ids-carousel-item-wrapper.prev){left:-100%}.ids-carousel .ids-carousel-item-wrapper.next,.ids-carousel ::slotted(.ids-carousel-item-wrapper.next){left:100%}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-carousel{position:relative}.ids-carousel .ids-carousel-content{box-sizing:border-box;margin-left:0;margin-right:0;overflow:hidden;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;width:100%}.ids-carousel .ids-carousel__button-next:focus-visible,.ids-carousel .ids-carousel__button-prev:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:-.125rem!important}.ids-carousel .ids-carousel__button-next,.ids-carousel .ids-carousel__button-prev{align-items:center;background:none;border:none;cursor:pointer;display:none;height:50%;justify-content:center;opacity:1;padding:0;position:absolute;top:calc(40% - 3rem);transform:translateY(-50%);transition:opacity .3s ease-in;z-index:3}.ids-carousel .ids-carousel__button-next:before,.ids-carousel .ids-carousel__button-prev:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-CAROUSEL-ICON__COLOR);display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:2.5rem;pointer-events:none;position:absolute;text-align:center}.ids-carousel .ids-carousel__button-next:hover:before,.ids-carousel .ids-carousel__button-prev:hover:before{color:var(--IDS-CAROUSEL-ICON__HOVER-COLOR)}.ids-carousel .ids-carousel__button-next:active:before,.ids-carousel .ids-carousel__button-prev:active:before{color:var(--IDS-CAROUSEL-ICON__ACTIVE-COLOR)}.ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile,.ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile{display:flex}.ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile:before,.ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile:before,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile:before,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile:before{color:var(--IDS-CAROUSEL-ICON__COLOR-MOBILE);font-size:1.25rem}.ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile:focus-visible,.ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile:focus-visible,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile:focus-visible,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile:focus-visible{outline-color:var(--IDS-FOCUS__OUTLINE--LIGHT-COLOR)!important}.ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile:before,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile:before{left:0}.ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile:before,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile:before{right:.125rem}.ids-carousel .ids-carousel__button-prev:before{content:\"\\e937\";left:.25rem}.ids-carousel .ids-carousel__button-next:before{content:\"\\e938\";right:.25rem}.ids-carousel .ids-carousel-btn__inner{align-items:center;background-color:var(--IDS-CAROUSEL-ICON__BACKGROUND-COLOR);display:flex;height:3rem;justify-content:center;width:1.6875rem}.ids-carousel .ids-carousel-btn__inner .ids-icon{width:1rem}.ids-carousel .ids-carousel__button-prev{left:0}.ids-carousel .ids-carousel__button-prev .ids-carousel-btn__inner{border-radius:0 1.5rem 1.5rem 0}.ids-carousel .ids-carousel__button-prev .ids-icon{padding-right:.313rem}.ids-carousel .ids-carousel__button-next{right:0}.ids-carousel .ids-carousel__button-next .ids-carousel-btn__inner{border-radius:1.5rem 0 0 1.5rem}.ids-carousel .ids-carousel__button-next .ids-icon{padding-left:.313rem}.ids-carousel .ids-carousel__button-next:hover .ids-carousel-btn__inner,.ids-carousel .ids-carousel__button-prev:hover .ids-carousel-btn__inner{background-color:var(--IDS-CAROUSEL-ICON__HOVER-BACKGROUND-COLOR)}.ids-carousel .ids-carousel__button-next:active .ids-carousel-btn__inner,.ids-carousel .ids-carousel__button-prev:active .ids-carousel-btn__inner{background-color:var(--IDS-CAROUSEL-ICON__ACTIVE-BACKGROUND-COLOR)}@media only screen and (min-width:1024px){.ids-carousel .ids-carousel-content{margin-left:3.125rem;margin-right:3.125rem;width:calc(100% - 6.25rem)}.ids-carousel .ids-carousel__button-next,.ids-carousel .ids-carousel__button-prev{display:flex;width:3rem}.ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile,.ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile,.ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile{display:none}}.ids-carousel .ids-carousel-item-wrapper,.ids-carousel ::slotted(.ids-carousel-item-wrapper){display:inline-block;position:absolute;top:0;transition:left .5s ease-in-out;width:100%;z-index:1}.ids-carousel .ids-carousel-item-wrapper.active,.ids-carousel .ids-carousel-item-wrapper.initial,.ids-carousel ::slotted(.ids-carousel-item-wrapper.active),.ids-carousel ::slotted(.ids-carousel-item-wrapper.initial){left:0;opacity:1;position:relative;z-index:2}.ids-carousel .ids-carousel-item-wrapper.next,.ids-carousel .ids-carousel-item-wrapper.prev,.ids-carousel ::slotted(.ids-carousel-item-wrapper.next),.ids-carousel ::slotted(.ids-carousel-item-wrapper.prev){z-index:2}.ids-carousel .animating-right .ids-carousel-item-wrapper.prev,.ids-carousel .animating-right ::slotted(.ids-carousel-item-wrapper.prev){z-index:2}.ids-carousel .animating-right .ids-carousel-item-wrapper.next,.ids-carousel .animating-right ::slotted(.ids-carousel-item-wrapper.next){z-index:2}.ids-carousel .animating-left .ids-carousel-item-wrapper.prev,.ids-carousel .animating-left ::slotted(.ids-carousel-item-wrapper.prev){z-index:2}.ids-carousel .animating-left .ids-carousel-item-wrapper.next,.ids-carousel .animating-left ::slotted(.ids-carousel-item-wrapper.next){z-index:2}.ids-carousel .ids-carousel-item-wrapper.prev,.ids-carousel ::slotted(.ids-carousel-item-wrapper.prev){left:-100%}.ids-carousel .ids-carousel-item-wrapper.next,.ids-carousel ::slotted(.ids-carousel-item-wrapper.next){left:100%}";
4
4
 
5
5
  var carouselLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/carousel/carousel.css CHANGED
@@ -38,10 +38,10 @@
38
38
  margin-left: 0;
39
39
  margin-right: 0;
40
40
  }
41
- .ids-carousel .ids-carousel__button-prev:focus,
42
- .ids-carousel .ids-carousel__button-next:focus {
43
- outline: var(--IDS-FOCUS__OUTLINE);
44
- outline-offset: 0 !important;
41
+ .ids-carousel .ids-carousel__button-prev:focus-visible,
42
+ .ids-carousel .ids-carousel__button-next:focus-visible {
43
+ outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
44
+ outline-offset: -0.125rem !important;
45
45
  }
46
46
  .ids-carousel .ids-carousel__button-prev,
47
47
  .ids-carousel .ids-carousel__button-next {
@@ -60,8 +60,8 @@
60
60
  align-items: center;
61
61
  justify-content: center;
62
62
  }
63
- .ids-carousel .ids-carousel__button-prev::before,
64
- .ids-carousel .ids-carousel__button-next::before {
63
+ .ids-carousel .ids-carousel__button-prev:before,
64
+ .ids-carousel .ids-carousel__button-next:before {
65
65
  font: icon;
66
66
  font-family: "Inera-Design-Icons" !important;
67
67
  display: block;
@@ -73,30 +73,43 @@
73
73
  text-align: center;
74
74
  color: var(--IDS-CAROUSEL-ICON__COLOR);
75
75
  }
76
+ .ids-carousel .ids-carousel__button-prev:hover:before,
77
+ .ids-carousel .ids-carousel__button-next:hover:before {
78
+ color: var(--IDS-CAROUSEL-ICON__HOVER-COLOR);
79
+ }
80
+ .ids-carousel .ids-carousel__button-prev:active:before,
81
+ .ids-carousel .ids-carousel__button-next:active:before {
82
+ color: var(--IDS-CAROUSEL-ICON__ACTIVE-COLOR);
83
+ }
76
84
  .ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile, .ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile,
77
85
  .ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile,
78
86
  .ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile {
79
87
  display: flex;
80
88
  }
81
- .ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile::before, .ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile::before,
82
- .ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile::before,
83
- .ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile::before {
89
+ .ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile:before, .ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile:before,
90
+ .ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile:before,
91
+ .ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile:before {
84
92
  font-size: 1.25rem;
85
93
  color: var(--IDS-CAROUSEL-ICON__COLOR-MOBILE);
86
94
  }
87
- .ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile::before,
88
- .ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile::before {
95
+ .ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile:focus-visible, .ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile:focus-visible,
96
+ .ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile:focus-visible,
97
+ .ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile:focus-visible {
98
+ outline-color: var(--IDS-FOCUS__OUTLINE--LIGHT-COLOR) !important;
99
+ }
100
+ .ids-carousel .ids-carousel__button-prev.ids-carousel__button-prev--mobile:before,
101
+ .ids-carousel .ids-carousel__button-next.ids-carousel__button-prev--mobile:before {
89
102
  left: 0;
90
103
  }
91
- .ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile::before,
92
- .ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile::before {
104
+ .ids-carousel .ids-carousel__button-prev.ids-carousel__button-next--mobile:before,
105
+ .ids-carousel .ids-carousel__button-next.ids-carousel__button-next--mobile:before {
93
106
  right: 0.125rem;
94
107
  }
95
- .ids-carousel .ids-carousel__button-prev::before {
108
+ .ids-carousel .ids-carousel__button-prev:before {
96
109
  content: "\e937";
97
110
  left: 0.25rem;
98
111
  }
99
- .ids-carousel .ids-carousel__button-next::before {
112
+ .ids-carousel .ids-carousel__button-next:before {
100
113
  content: "\e938";
101
114
  right: 0.25rem;
102
115
  }
@@ -105,10 +118,8 @@
105
118
  justify-content: center;
106
119
  align-items: center;
107
120
  background-color: var(--IDS-CAROUSEL-ICON__BACKGROUND-COLOR);
108
- box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.3);
109
121
  height: 3rem;
110
122
  width: 1.6875rem;
111
- box-shadow: rgba(0, 0, 0, 0.3) 0 0;
112
123
  }
113
124
  .ids-carousel .ids-carousel-btn__inner .ids-icon {
114
125
  width: 1rem;
@@ -131,6 +142,14 @@
131
142
  .ids-carousel .ids-carousel__button-next .ids-icon {
132
143
  padding-left: 0.313rem;
133
144
  }
145
+ .ids-carousel .ids-carousel__button-prev:hover .ids-carousel-btn__inner,
146
+ .ids-carousel .ids-carousel__button-next:hover .ids-carousel-btn__inner {
147
+ background-color: var(--IDS-CAROUSEL-ICON__HOVER-BACKGROUND-COLOR);
148
+ }
149
+ .ids-carousel .ids-carousel__button-prev:active .ids-carousel-btn__inner,
150
+ .ids-carousel .ids-carousel__button-next:active .ids-carousel-btn__inner {
151
+ background-color: var(--IDS-CAROUSEL-ICON__ACTIVE-BACKGROUND-COLOR);
152
+ }
134
153
  @media only screen and (min-width: 1024px) {
135
154
  .ids-carousel .ids-carousel-content {
136
155
  width: calc(100% - 6.25rem);
package/components/data-table/data-table-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-data-table table{border:.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);border-collapse:separate;border-radius:var(--IDS-DATA-TABLE__BORDER-RADIUS);border-spacing:0;margin:1.25rem auto 3.125rem;overflow:visible;width:100%}.ids-data-table td,.ids-data-table th{border-bottom:.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);border-right:none;line-height:1.25rem;padding:.5rem;position:relative;text-align:left;white-space:nowrap}.ids-data-table td:first-child,.ids-data-table th:first-child{padding-left:1rem}.ids-data-table td:last-child,.ids-data-table th:last-child{padding-right:1rem}.ids-data-table td.ids-data-table__col--wide,.ids-data-table th.ids-data-table__col--wide{width:30em}.ids-data-table td .ids-data-table__icon,.ids-data-table th .ids-data-table__icon{color:var(--IDS-DATA-TABLE__ICON-COLOR);margin-bottom:-.125rem;margin-left:.5rem}.ids-data-table td:hover .ids-data-table__icon,.ids-data-table th:hover .ids-data-table__icon{color:var(--IDS-DATA-TABLE__ICON-HOVER-COLOR)}.ids-data-table th{background-color:var(--IDS-DATA-TABLE__HEAD-BACKGROUND_COLOR);border-bottom:.125rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);color:var(--IDS-DATA-TABLE__HEAD-COLOR);cursor:pointer;font-family:var(--IDS-DATA-TABLE__HEAD-FONT-FAMILY);font-weight:700}.ids-data-table th:not(:first-child):not(:last-child){padding:.75rem .5rem}.ids-data-table th:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.313rem!important;z-index:2}.ids-data-table thead tr{border-top-right-radius:var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS)}.ids-data-table thead tr,.ids-data-table thead tr th:first-child{border-top-left-radius:var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS)}.ids-data-table thead tr th:last-child{border-top-right-radius:var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS)}.ids-data-table tbody tr{border-bottom:.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR)}.ids-data-table tbody tr td{color:var(--IDS-DATA-TABLE__CELL-COLOR)}.ids-data-table tbody tr:focus{outline:none}.ids-data-table tbody tr[selected]{background-color:var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR)}.ids-data-table tbody tr:last-child{border-bottom-left-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS);border-bottom-right-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}.ids-data-table tbody tr:last-child td{border-bottom:none}.ids-data-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}.ids-data-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}.ids-data-table.ids-data-table--interactive tbody tr:hover{background-color:var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);cursor:pointer;position:relative;z-index:2}.ids-data-table.ids-data-table--interactive tbody tr:focus{background-color:var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.25rem!important}.ids-data-table.ids-data-table--interactive tbody tr:focus:last-child{border-radius:0 0 var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS) var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}.ids-data-table.ids-data-table--empty td{padding:1em}.ids-data-table.ids-data-table--empty .empty-message{text-align:left}.ids-data-table.ids-data-table--empty .empty-message:focus{outline:none}@media (max-width:1024px){.ids-data-table table{width:100%}}@media (max-width:640px){.ids-data-table .ids-data-table__col--wide{width:auto}}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-data-table table{border:.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);border-collapse:separate;border-radius:var(--IDS-DATA-TABLE__BORDER-RADIUS);border-spacing:0;margin:1.25rem auto 3.125rem;overflow:visible;width:100%}.ids-data-table td,.ids-data-table th{border-bottom:.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);border-right:none;line-height:1.25rem;padding:.5rem;position:relative;text-align:left;white-space:nowrap}.ids-data-table td:first-child,.ids-data-table th:first-child{padding-left:1rem}.ids-data-table td:last-child,.ids-data-table th:last-child{padding-right:1rem}.ids-data-table td.ids-data-table__col--wide,.ids-data-table th.ids-data-table__col--wide{width:30em}.ids-data-table td .ids-data-table__icon,.ids-data-table th .ids-data-table__icon{color:var(--IDS-DATA-TABLE__ICON-COLOR);margin-bottom:-.125rem;margin-left:.5rem}.ids-data-table td:hover .ids-data-table__icon,.ids-data-table th:hover .ids-data-table__icon{color:var(--IDS-DATA-TABLE__ICON-HOVER-COLOR)}.ids-data-table th{background-color:var(--IDS-DATA-TABLE__HEAD-BACKGROUND_COLOR);border-bottom:.125rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);color:var(--IDS-DATA-TABLE__HEAD-COLOR);cursor:pointer;font-family:var(--IDS-DATA-TABLE__HEAD-FONT-FAMILY);font-weight:700}.ids-data-table th:not(:first-child):not(:last-child){padding:.75rem .5rem}.ids-data-table th:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:-.313rem!important;z-index:2}.ids-data-table thead tr{border-top-right-radius:var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS)}.ids-data-table thead tr,.ids-data-table thead tr th:first-child{border-top-left-radius:var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS)}.ids-data-table thead tr th:last-child{border-top-right-radius:var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS)}.ids-data-table tbody tr{border-bottom:.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR)}.ids-data-table tbody tr td{color:var(--IDS-DATA-TABLE__CELL-COLOR)}.ids-data-table tbody tr[selected]{background-color:var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR)}.ids-data-table tbody tr:last-child{border-bottom-left-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS);border-bottom-right-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}.ids-data-table tbody tr:last-child td{border-bottom:none}.ids-data-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}.ids-data-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}.ids-data-table.ids-data-table--interactive tbody tr:hover{background-color:var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);cursor:pointer;position:relative;z-index:2}.ids-data-table.ids-data-table--interactive tbody tr:focus-visible{background-color:var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:-.25rem!important}.ids-data-table.ids-data-table--interactive tbody tr:focus-visible:last-child{border-radius:0 0 var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS) var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}.ids-data-table.ids-data-table--empty td{padding:1em}.ids-data-table.ids-data-table--empty .empty-message{text-align:left}@media (max-width:1024px){.ids-data-table table{width:100%}}@media (max-width:640px){.ids-data-table .ids-data-table__col--wide{width:auto}}";
4
4
 
5
5
  var dataTableLit = css`${unsafeCSS(css_248z)}`;
6
6