@inera/ids-design 5.3.0 → 5.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/components/alert/alert-lit.js +1 -1
  2. package/components/alert/alert.css +48 -48
  3. package/components/alert-global/alert-global-lit.js +1 -1
  4. package/components/alert-global/alert-global.css +68 -92
  5. package/components/badge/badge-lit.js +1 -1
  6. package/components/badge/badge.css +10 -6
  7. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  8. package/components/breadcrumbs/breadcrumbs.css +48 -25
  9. package/components/button-group/button-group-lit.js +1 -1
  10. package/components/button-group/button-group.css +1 -1
  11. package/components/card/card-lit.js +1 -1
  12. package/components/card/card.css +26 -17
  13. package/components/carousel/carousel-item-lit.d.ts +2 -0
  14. package/components/carousel/carousel-item-lit.js +7 -0
  15. package/components/carousel/carousel-item.css +67 -0
  16. package/components/carousel/carousel-lit.d.ts +2 -0
  17. package/components/carousel/carousel-lit.js +7 -0
  18. package/components/carousel/carousel.css +156 -0
  19. package/components/data-table/data-table-lit.js +1 -1
  20. package/components/data-table/data-table.css +28 -28
  21. package/components/date-label/date-label-lit.js +1 -1
  22. package/components/date-label/date-label.css +13 -13
  23. package/components/dialog/dialog-lit.js +1 -1
  24. package/components/dialog/dialog.css +43 -47
  25. package/components/dropdown/dropdown-lit.js +1 -1
  26. package/components/dropdown/dropdown.css +21 -21
  27. package/components/expandable/expandable-lit.js +1 -1
  28. package/components/expandable/expandable.css +38 -37
  29. package/components/footer/footer-lit.js +1 -1
  30. package/components/footer/footer.css +49 -49
  31. package/components/footer-1177/footer-1177-lit.js +1 -1
  32. package/components/footer-1177/footer-1177.css +72 -70
  33. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  34. package/components/footer-1177-admin/footer-1177-admin.css +75 -71
  35. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  36. package/components/footer-1177-pro/footer-1177-pro.css +38 -39
  37. package/components/footer-inera/footer-inera-lit.js +1 -1
  38. package/components/footer-inera/footer-inera.css +84 -84
  39. package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
  40. package/components/footer-inera-admin/footer-inera-admin.css +111 -110
  41. package/components/form/error-message/error-message-lit.js +1 -1
  42. package/components/form/error-message/error-message.css +9 -9
  43. package/components/form/group/group-lit.js +1 -1
  44. package/components/form/group/group.css +7 -7
  45. package/components/form/range/range-lit.js +1 -1
  46. package/components/form/range/range.css +15 -16
  47. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  48. package/components/form/select-multiple/select-multiple.css +44 -35
  49. package/components/form/spinner/spinner-lit.js +1 -1
  50. package/components/form/spinner/spinner.css +9 -8
  51. package/components/grid/column/column-lit.js +1 -1
  52. package/components/grid/column/column.css +12 -0
  53. package/components/header-1177/composite-header-1177.css +413 -394
  54. package/components/header-1177/header-1177-avatar-lit.js +1 -1
  55. package/components/header-1177/header-1177-avatar.css +42 -34
  56. package/components/header-1177/header-1177-item-lit.js +1 -1
  57. package/components/header-1177/header-1177-item.css +47 -43
  58. package/components/header-1177/header-1177-lit.js +1 -1
  59. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  60. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  61. package/components/header-1177/header-1177-nav-item-mobile.css +39 -40
  62. package/components/header-1177/header-1177-nav-item.css +141 -141
  63. package/components/header-1177/header-1177-nav-lit.js +1 -1
  64. package/components/header-1177/header-1177-nav.css +22 -22
  65. package/components/header-1177/header-1177.css +125 -117
  66. package/components/header-1177-admin/header-1177-admin-avatar-lit.js +1 -1
  67. package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
  68. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +17 -17
  69. package/components/header-1177-admin/header-1177-admin-avatar.css +62 -61
  70. package/components/header-1177-admin/header-1177-admin-item-lit.js +1 -1
  71. package/components/header-1177-admin/header-1177-admin-item.css +53 -37
  72. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  73. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  74. package/components/header-1177-admin/header-1177-admin-nav-item.css +149 -149
  75. package/components/header-1177-admin/header-1177-admin-nav-lit.js +1 -1
  76. package/components/header-1177-admin/header-1177-admin-nav.css +16 -16
  77. package/components/header-1177-admin/header-1177-admin.css +74 -72
  78. package/components/header-1177-pro/header-1177-pro-avatar-lit.js +1 -1
  79. package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
  80. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +18 -17
  81. package/components/header-1177-pro/header-1177-pro-avatar.css +67 -65
  82. package/components/header-1177-pro/header-1177-pro-item-lit.js +1 -1
  83. package/components/header-1177-pro/header-1177-pro-item.css +17 -13
  84. package/components/header-1177-pro/header-1177-pro-lit.js +1 -1
  85. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  86. package/components/header-1177-pro/header-1177-pro-nav-item.css +137 -137
  87. package/components/header-1177-pro/header-1177-pro-nav-lit.js +1 -1
  88. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +1 -1
  89. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +32 -32
  90. package/components/header-1177-pro/header-1177-pro-nav.css +20 -24
  91. package/components/header-1177-pro/header-1177-pro-region-picker-lit.js +1 -1
  92. package/components/header-1177-pro/header-1177-pro-region-picker.css +81 -77
  93. package/components/header-1177-pro/header-1177-pro.css +63 -63
  94. package/components/header-inera/header-inera-item-lit.js +1 -1
  95. package/components/header-inera/header-inera-item.css +15 -12
  96. package/components/header-inera/header-inera-lit.js +1 -1
  97. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  98. package/components/header-inera/header-inera-nav-item.css +37 -50
  99. package/components/header-inera/header-inera-nav-lit.js +1 -1
  100. package/components/header-inera/header-inera-nav-mobile-lit.js +1 -1
  101. package/components/header-inera/header-inera-nav-mobile.css +49 -48
  102. package/components/header-inera/header-inera-nav.css +2 -2
  103. package/components/header-inera/header-inera.css +17 -17
  104. package/components/header-inera-admin/composite-header-inera-admin.css +152 -170
  105. package/components/header-inera-admin/header-inera-admin-avatar-lit.js +1 -1
  106. package/components/header-inera-admin/header-inera-admin-avatar-mobile-lit.js +1 -1
  107. package/components/header-inera-admin/header-inera-admin-avatar-mobile.css +9 -9
  108. package/components/header-inera-admin/header-inera-admin-avatar.css +22 -21
  109. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  110. package/components/header-inera-admin/header-inera-admin-item.css +11 -11
  111. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  112. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  113. package/components/header-inera-admin/header-inera-admin-nav-item.css +42 -50
  114. package/components/header-inera-admin/header-inera-admin-nav-lit.js +1 -1
  115. package/components/header-inera-admin/header-inera-admin-nav-mobile-lit.js +1 -1
  116. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +49 -48
  117. package/components/header-inera-admin/header-inera-admin-nav.css +2 -2
  118. package/components/header-inera-admin/header-inera-admin.css +30 -30
  119. package/components/list/list-lit.js +1 -1
  120. package/components/list/list.css +38 -21
  121. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  122. package/components/mobile-menu/mobile-menu.css +413 -408
  123. package/components/navigation/content/navigation-content-lit.js +1 -1
  124. package/components/navigation/content/navigation-content.css +15 -15
  125. package/components/navigation/local/navigation-local-lit.js +1 -1
  126. package/components/navigation/local/navigation-local.css +13 -13
  127. package/components/notification-badge/notification-badge-lit.js +1 -1
  128. package/components/notification-badge/notification-badge.css +2 -2
  129. package/components/pagination/data-pagination/data-pagination-lit.js +1 -1
  130. package/components/pagination/data-pagination/data-pagination.css +23 -23
  131. package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
  132. package/components/pagination/list-pagination/list-pagination.css +32 -29
  133. package/components/popover/popover-content-lit.js +1 -1
  134. package/components/popover/popover-content.css +74 -82
  135. package/components/progressbar/progressbar-lit.js +1 -1
  136. package/components/progressbar/progressbar.css +12 -12
  137. package/components/side-menu/side-menu-lit.js +1 -1
  138. package/components/side-menu/side-menu.css +32 -32
  139. package/components/side-panel/side-panel-lit.js +1 -1
  140. package/components/side-panel/side-panel.css +83 -101
  141. package/components/stepper/stepper-lit.js +1 -1
  142. package/components/stepper/stepper.css +28 -24
  143. package/components/table/table.css +5 -5
  144. package/components/tabs/tab-lit.js +1 -1
  145. package/components/tabs/tab-panel-lit.js +1 -1
  146. package/components/tabs/tab-panel.css +2 -2
  147. package/components/tabs/tab.css +24 -24
  148. package/components/tabs/tabs-lit.js +2 -2
  149. package/components/tabs/tabs.css +6 -6
  150. package/components/tag/tag-lit.js +1 -1
  151. package/components/tag/tag.css +19 -43
  152. package/components/tooltip/tooltip-lit.js +1 -1
  153. package/components/tooltip/tooltip.css +11 -14
  154. package/global/_partials.css +1 -1
  155. package/global/global.css +404 -356
  156. package/global/util/util.css +7 -5
  157. package/package.json +1 -1
  158. package/themes/1177/1177.css +812 -822
  159. package/themes/1177-pro/1177-pro.css +912 -929
  160. package/themes/inera/inera.css +812 -858
  161. package/themes/inera-admin/inera-admin.css +860 -934
  162. package/themes/reset.css +1 -1
package/components/navigation/content/navigation-content-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = ".ids-navigation-content{background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:var(--IDS-NAVIGATION-CONTENT__BORDER-RADIUS);box-shadow:0 0 10px rgba(27,27,27,.2);position:relative;width:100%}.ids-navigation-content:after{background-color:var(--IDS-COLOR-NEUTRAL-100);clip-path:polygon(0 0,0 100%,100% 100%);left:-9px;z-index:1}.ids-navigation-content:after,.ids-navigation-content:before{content:\"\";height:1.4rem;position:absolute;top:20px;transform:rotate(45deg);width:1.4rem}.ids-navigation-content:before{box-shadow:0 0 10px rgba(27,27,27,.2);left:-11px;z-index:-1}.ids-navigation-content .ids-navigation-content__border-top{border-radius:var(--IDS-CARD__BORDER-RADIUS);display:block;height:20px;left:0;overflow:hidden;position:absolute;top:0;width:100%}.ids-navigation-content .ids-navigation-content__border-top div{border-top:var(--IDS-CARD--BORDER-2__INNER__BORDER-TOP)}.ids-navigation-content .ids-navigation-content__inner{border-top:var(--IDS-NAVIGATION-CONTENT__BORDER-TOP);padding:20px;position:relative}.ids-navigation-content .ids-navigation-content__inner .ids-navigation-content__inner__headline{color:var(--IDS-NAVIGATION-CONTENT__COLOR);font-family:var(--IDS-NAVIGATION-CONTENT__FONT-FAMILY);font-size:var(--IDS-NAVIGATION-CONTENT__FONT-SIZE);font-weight:var(--IDS-NAVIGATION-CONTENT__FONT-WEIGHT);letter-spacing:-.2px;line-height:var(--IDS-NAVIGATION-CONTENT__LINE-HEIGHT);margin:0 0 8px}.ids-navigation-content .ids-navigation-content__inner a{border-top:1px solid var(--IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR);display:block;padding:14px 0}.ids-navigation-content .ids-navigation-content__inner ::slotted(*){border-top:1px solid var(--IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR);display:block;padding:14px 0}";
3
+ var css_248z = ".ids-navigation-content{background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:var(--IDS-NAVIGATION-CONTENT__BORDER-RADIUS);box-shadow:0 0 .625rem rgba(27,27,27,.2);position:relative;width:100%}.ids-navigation-content:after{background-color:var(--IDS-COLOR-NEUTRAL-100);clip-path:polygon(0 0,0 100%,100% 100%);left:-.563rem;z-index:1}.ids-navigation-content:after,.ids-navigation-content:before{content:\"\";height:1.4rem;position:absolute;top:1.25rem;transform:rotate(45deg);width:1.4rem}.ids-navigation-content:before{box-shadow:0 0 .625rem rgba(27,27,27,.2);left:-.688rem;z-index:-1}.ids-navigation-content .ids-navigation-content__border-top{border-radius:var(--IDS-CARD__BORDER-RADIUS);display:block;height:1.25rem;left:0;overflow:hidden;position:absolute;top:0;width:100%}.ids-navigation-content .ids-navigation-content__border-top div{border-top:var(--IDS-CARD--BORDER-2__BORDER-TOP)}.ids-navigation-content .ids-navigation-content__inner{border-top:var(--IDS-NAVIGATION-CONTENT__BORDER-TOP);padding:1.25rem;position:relative}.ids-navigation-content .ids-navigation-content__inner .ids-navigation-content__inner__headline{color:var(--IDS-NAVIGATION-CONTENT__COLOR);font-family:var(--IDS-NAVIGATION-CONTENT__FONT-FAMILY);font-size:var(--IDS-NAVIGATION-CONTENT__FONT-SIZE);font-weight:var(--IDS-NAVIGATION-CONTENT__FONT-WEIGHT);letter-spacing:-.013rem;line-height:var(--IDS-NAVIGATION-CONTENT__LINE-HEIGHT);margin:0 0 .5rem}.ids-navigation-content .ids-navigation-content__inner a{border-top:.063rem solid var(--IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR);display:block;padding:.875rem 0}.ids-navigation-content .ids-navigation-content__inner ::slotted(*){border-top:.063rem solid var(--IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR);display:block;padding:.875rem 0}";
4
4
 
5
5
  var navigationContentLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/navigation/content/navigation-content.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .ids-navigation-content {
2
2
  width: 100%;
3
- box-shadow: 0 0 10px rgba(27, 27, 27, 0.2);
3
+ box-shadow: 0 0 0.625rem rgba(27, 27, 27, 0.2);
4
4
  border-radius: var(--IDS-NAVIGATION-CONTENT__BORDER-RADIUS);
5
5
  background-color: var(--IDS-COLOR-NEUTRAL-100);
6
6
  position: relative;
@@ -11,8 +11,8 @@
11
11
  height: 1.4rem;
12
12
  width: 1.4rem;
13
13
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
14
- top: 20px;
15
- left: -9px;
14
+ top: 1.25rem;
15
+ left: -0.563rem;
16
16
  background-color: var(--IDS-COLOR-NEUTRAL-100);
17
17
  transform: rotate(45deg);
18
18
  z-index: 1;
@@ -22,11 +22,11 @@
22
22
  position: absolute;
23
23
  height: 1.4rem;
24
24
  width: 1.4rem;
25
- top: 20px;
26
- left: -11px;
25
+ top: 1.25rem;
26
+ left: -0.688rem;
27
27
  transform: rotate(45deg);
28
28
  z-index: -1;
29
- box-shadow: rgba(27, 27, 27, 0.2) 0 0 10px;
29
+ box-shadow: rgba(27, 27, 27, 0.2) 0 0 0.625rem;
30
30
  }
31
31
  .ids-navigation-content .ids-navigation-content__border-top {
32
32
  position: absolute;
@@ -35,14 +35,14 @@
35
35
  top: 0;
36
36
  width: 100%;
37
37
  display: block;
38
- height: 20px;
38
+ height: 1.25rem;
39
39
  left: 0;
40
40
  }
41
41
  .ids-navigation-content .ids-navigation-content__border-top div {
42
- border-top: var(--IDS-CARD--BORDER-2__INNER__BORDER-TOP);
42
+ border-top: var(--IDS-CARD--BORDER-2__BORDER-TOP);
43
43
  }
44
44
  .ids-navigation-content .ids-navigation-content__inner {
45
- padding: 20px;
45
+ padding: 1.25rem;
46
46
  border-top: var(--IDS-NAVIGATION-CONTENT__BORDER-TOP);
47
47
  position: relative;
48
48
  }
@@ -51,17 +51,17 @@
51
51
  font-weight: var(--IDS-NAVIGATION-CONTENT__FONT-WEIGHT);
52
52
  font-size: var(--IDS-NAVIGATION-CONTENT__FONT-SIZE);
53
53
  line-height: var(--IDS-NAVIGATION-CONTENT__LINE-HEIGHT);
54
- letter-spacing: -0.2px;
54
+ letter-spacing: -0.013rem;
55
55
  color: var(--IDS-NAVIGATION-CONTENT__COLOR);
56
- margin: 0 0 8px 0;
56
+ margin: 0 0 0.5rem 0;
57
57
  }
58
58
  .ids-navigation-content .ids-navigation-content__inner a {
59
- border-top: 1px solid var(--IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR);
59
+ border-top: 0.063rem solid var(--IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR);
60
60
  display: block;
61
- padding: 14px 0;
61
+ padding: 0.875rem 0;
62
62
  }
63
63
  .ids-navigation-content .ids-navigation-content__inner ::slotted(*) {
64
- border-top: 1px solid var(--IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR);
64
+ border-top: 0.063rem solid var(--IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR);
65
65
  display: block;
66
- padding: 14px 0;
66
+ padding: 0.875rem 0;
67
67
  }
package/components/navigation/local/navigation-local-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = ".ids-navigation-local{border-bottom:var(--IDS-NAVIGATION-LOCAL__BORDER)}.ids-navigation-local .ids-navigation-local__headline{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(font-family-2);font-size:1.25rem;font-style:normal;font-weight:700;letter-spacing:-.03125rem;line-height:1.5rem;padding:14px 20px 14px 0}.ids-navigation-local .ids-navigation-local__link,.ids-navigation-local a{border-top:var(--IDS-NAVIGATION-LOCAL__BORDER);color:var(--IDS-NAVIGATION-LOCAL-LINK__COLOR);display:block!important;outline-offset:-2px!important;padding:12px 20px;position:relative;text-decoration:none}.ids-navigation-local .ids-navigation-local__link.ids-navigation-local__link--active:before,.ids-navigation-local a.ids-navigation-local__link--active:before{background-color:var(--IDS-NAVIGATION-LOCAL--ACTIVE-BACKGROUND-COLOR)}.ids-navigation-local .ids-navigation-local__link:focus,.ids-navigation-local .ids-navigation-local__link:hover,.ids-navigation-local a:focus,.ids-navigation-local a:hover{border-top:var(--IDS-NAVIGATION-LOCAL__HOVER-BORDER)}.ids-navigation-local .ids-navigation-local__link:focus:before,.ids-navigation-local .ids-navigation-local__link:hover:before,.ids-navigation-local a:focus:before,.ids-navigation-local a:hover:before{background-color:var(--IDS-NAVIGATION-LOCAL--ACTIVE-HOVER-BACKGROUND-COLOR)!important}.ids-navigation-local .ids-navigation-local__link:before,.ids-navigation-local a:before{background-color:var(--IDS-COLOR-NEUTRAL-100);content:\"\";display:block;height:calc(100% + 1px);left:0;position:absolute;top:-1px;width:5px}.ids-navigation-local ::slotted(a){border-top:var(--IDS-NAVIGATION-LOCAL__BORDER);color:var(--IDS-NAVIGATION-LOCAL-LINK__COLOR);display:block!important;outline-offset:-2px!important;padding:12px 20px;position:relative;text-decoration:none}.ids-navigation-local ::slotted(a).ids-navigation-local__link--active:before{background-color:var(--IDS-NAVIGATION-LOCAL--ACTIVE-BACKGROUND-COLOR)}.ids-navigation-local ::slotted(a):focus,.ids-navigation-local ::slotted(a):hover{border-top:var(--IDS-NAVIGATION-LOCAL__HOVER-BORDER)}.ids-navigation-local ::slotted(a):focus:before,.ids-navigation-local ::slotted(a):hover:before{background-color:var(--IDS-NAVIGATION-LOCAL--ACTIVE-HOVER-BACKGROUND-COLOR)!important}.ids-navigation-local ::slotted(a):before{background-color:var(--IDS-COLOR-NEUTRAL-100);content:\"\";display:block;height:calc(100% + 1px);left:0;position:absolute;top:-1px;width:5px}.ids-navigation-local ::slotted(a:focus),.ids-navigation-local ::slotted(a:hover){border-top:var(--IDS-NAVIGATION-LOCAL__HOVER-BORDER)}.ids-navigation-local ::slotted(a:focus):before,.ids-navigation-local ::slotted(a:hover):before{background-color:var(--IDS-NAVIGATION-LOCAL--ACTIVE-HOVER-BACKGROUND-COLOR)!important}.ids-navigation-local ::slotted(.ids-navigation-local__link--active):before{background-color:var(--IDS-NAVIGATION-LOCAL--ACTIVE-BACKGROUND-COLOR)}";
3
+ var css_248z = ".ids-navigation-local{border-bottom:var(--IDS-NAVIGATION-LOCAL__BORDER)}.ids-navigation-local .ids-navigation-local__headline{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(font-family-2);font-size:1.25rem;font-style:normal;font-weight:700;letter-spacing:-.03125rem;line-height:1.5rem;padding:.875rem 1.25rem .875rem 0}.ids-navigation-local .ids-navigation-local__link,.ids-navigation-local a{border-top:var(--IDS-NAVIGATION-LOCAL__BORDER);color:var(--IDS-NAVIGATION-LOCAL__LINK-COLOR);display:block!important;outline-offset:-.125rem!important;padding:.75rem 1.25rem;position:relative;text-decoration:none}.ids-navigation-local .ids-navigation-local__link.ids-navigation-local__link--active:before,.ids-navigation-local a.ids-navigation-local__link--active:before{background-color:var(--IDS-NAVIGATION-LOCAL--ACTIVE-BACKGROUND-COLOR)}.ids-navigation-local .ids-navigation-local__link:focus,.ids-navigation-local .ids-navigation-local__link:hover,.ids-navigation-local a:focus,.ids-navigation-local a:hover{border-top:var(--IDS-NAVIGATION-LOCAL__HOVER-BORDER)}.ids-navigation-local .ids-navigation-local__link:focus:before,.ids-navigation-local .ids-navigation-local__link:hover:before,.ids-navigation-local a:focus:before,.ids-navigation-local a:hover:before{background-color:var(--IDS-NAVIGATION-LOCAL--ACTIVE-HOVER-BACKGROUND-COLOR)!important}.ids-navigation-local .ids-navigation-local__link:before,.ids-navigation-local a:before{background-color:var(--IDS-COLOR-NEUTRAL-100);content:\"\";display:block;height:calc(100% + .063rem);left:0;position:absolute;top:-.063rem;width:.313rem}.ids-navigation-local ::slotted(a){border-top:var(--IDS-NAVIGATION-LOCAL__BORDER);color:var(--IDS-NAVIGATION-LOCAL__LINK-COLOR);display:block!important;outline-offset:-.125rem!important;padding:.75rem 1.25rem;position:relative;text-decoration:none}.ids-navigation-local ::slotted(a).ids-navigation-local__link--active:before{background-color:var(--IDS-NAVIGATION-LOCAL--ACTIVE-BACKGROUND-COLOR)}.ids-navigation-local ::slotted(a):focus,.ids-navigation-local ::slotted(a):hover{border-top:var(--IDS-NAVIGATION-LOCAL__HOVER-BORDER)}.ids-navigation-local ::slotted(a):focus:before,.ids-navigation-local ::slotted(a):hover:before{background-color:var(--IDS-NAVIGATION-LOCAL--ACTIVE-HOVER-BACKGROUND-COLOR)!important}.ids-navigation-local ::slotted(a):before{background-color:var(--IDS-COLOR-NEUTRAL-100);content:\"\";display:block;height:calc(100% + .063rem);left:0;position:absolute;top:-.063rem;width:.313rem}.ids-navigation-local ::slotted(a:focus),.ids-navigation-local ::slotted(a:hover){border-top:var(--IDS-NAVIGATION-LOCAL__HOVER-BORDER)}.ids-navigation-local ::slotted(a:focus):before,.ids-navigation-local ::slotted(a:hover):before{background-color:var(--IDS-NAVIGATION-LOCAL--ACTIVE-HOVER-BACKGROUND-COLOR)!important}.ids-navigation-local ::slotted(.ids-navigation-local__link--active):before{background-color:var(--IDS-NAVIGATION-LOCAL--ACTIVE-BACKGROUND-COLOR)}";
4
4
 
5
5
  var navigationLocalLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/navigation/local/navigation-local.css CHANGED
@@ -9,17 +9,17 @@
9
9
  font-weight: 700;
10
10
  letter-spacing: -0.03125rem;
11
11
  line-height: 1.5rem;
12
- padding: 14px 20px 14px 0px;
12
+ padding: 0.875rem 1.25rem 0.875rem 0;
13
13
  }
14
14
  .ids-navigation-local a,
15
15
  .ids-navigation-local .ids-navigation-local__link {
16
16
  display: block !important;
17
- padding: 12px 20px;
17
+ padding: 0.75rem 1.25rem;
18
18
  border-top: var(--IDS-NAVIGATION-LOCAL__BORDER);
19
19
  position: relative;
20
- color: var(--IDS-NAVIGATION-LOCAL-LINK__COLOR);
20
+ color: var(--IDS-NAVIGATION-LOCAL__LINK-COLOR);
21
21
  text-decoration: none;
22
- outline-offset: -2px !important;
22
+ outline-offset: -0.125rem !important;
23
23
  }
24
24
  .ids-navigation-local a.ids-navigation-local__link--active::before,
25
25
  .ids-navigation-local .ids-navigation-local__link.ids-navigation-local__link--active::before {
@@ -40,20 +40,20 @@
40
40
  content: "";
41
41
  position: absolute;
42
42
  left: 0;
43
- top: -1px;
43
+ top: -0.063rem;
44
44
  display: block;
45
- height: calc(100% + 1px);
46
- width: 5px;
45
+ height: calc(100% + 0.063rem);
46
+ width: 0.313rem;
47
47
  background-color: var(--IDS-COLOR-NEUTRAL-100);
48
48
  }
49
49
  .ids-navigation-local ::slotted(a) {
50
50
  display: block !important;
51
- padding: 12px 20px;
51
+ padding: 0.75rem 1.25rem;
52
52
  border-top: var(--IDS-NAVIGATION-LOCAL__BORDER);
53
53
  position: relative;
54
- color: var(--IDS-NAVIGATION-LOCAL-LINK__COLOR);
54
+ color: var(--IDS-NAVIGATION-LOCAL__LINK-COLOR);
55
55
  text-decoration: none;
56
- outline-offset: -2px !important;
56
+ outline-offset: -0.125rem !important;
57
57
  }
58
58
  .ids-navigation-local ::slotted(a).ids-navigation-local__link--active::before {
59
59
  background-color: var(--IDS-NAVIGATION-LOCAL--ACTIVE-BACKGROUND-COLOR);
@@ -68,10 +68,10 @@
68
68
  content: "";
69
69
  position: absolute;
70
70
  left: 0;
71
- top: -1px;
71
+ top: -0.063rem;
72
72
  display: block;
73
- height: calc(100% + 1px);
74
- width: 5px;
73
+ height: calc(100% + 0.063rem);
74
+ width: 0.313rem;
75
75
  background-color: var(--IDS-COLOR-NEUTRAL-100);
76
76
  }
77
77
  .ids-navigation-local ::slotted(a:focus),
package/components/notification-badge/notification-badge-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = ".ids-notification-badge{align-items:center;background-color:var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);border:1px solid var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);border-radius:1.5rem;box-sizing:border-box;color:var(--IDS-NOTIFICATION-BADGE__COLOR);display:inline-block;font-size:.875rem;font-weight:400;justify-content:center;line-height:1.5rem;min-height:1.5rem;min-width:1.5rem;padding:0 .5rem;text-align:center}.ids-notification-badge.ids-notification-badge--outlined{background-color:#fff;color:var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR)}";
3
+ var css_248z = ".ids-notification-badge{align-items:center;background-color:var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);border:.063rem solid var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);border-radius:1.5rem;box-sizing:border-box;color:var(--IDS-NOTIFICATION-BADGE__COLOR);display:inline-block;font-size:.875rem;font-weight:400;justify-content:center;line-height:1.5rem;min-height:1.5rem;min-width:1.5rem;padding:0 .5rem;text-align:center}.ids-notification-badge.ids-notification-badge--outlined{background-color:var(--IDS-COLOR-NEUTRAL-100);color:var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR)}";
4
4
 
5
5
  var notificationBadgeLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/notification-badge/notification-badge.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .ids-notification-badge {
2
2
  background-color: var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);
3
- border: 1px solid var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);
3
+ border: 0.063rem solid var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);
4
4
  color: var(--IDS-NOTIFICATION-BADGE__COLOR);
5
5
  font-size: 0.875rem;
6
6
  font-weight: normal;
@@ -17,5 +17,5 @@
17
17
  }
18
18
  .ids-notification-badge.ids-notification-badge--outlined {
19
19
  color: var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);
20
- background-color: white;
20
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
21
21
  }
package/components/pagination/data-pagination/data-pagination-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = ".ids-data-pagination .ids-data-pagination__next-button ::slotted(button),.ids-data-pagination .ids-data-pagination__next-button button,.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button button{background-color:transparent!important;background-size:16px 16px;border:1px solid transparent!important;cursor:pointer;height:31px!important;width:31px!important}.ids-data-pagination .ids-data-pagination__next-button :hover::slotted(button),.ids-data-pagination .ids-data-pagination__next-button button:hover,.ids-data-pagination .ids-data-pagination__prev-button :hover::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button button:hover{background-image:var(--IDS-SELECT__CHEVRON-ICON--HOVER)!important}.ids-data-pagination .ids-data-pagination__next-button :active::slotted(button),.ids-data-pagination .ids-data-pagination__next-button :focus-visible::slotted(button),.ids-data-pagination .ids-data-pagination__next-button :focus-within::slotted(button),.ids-data-pagination .ids-data-pagination__next-button :focus::slotted(button),.ids-data-pagination .ids-data-pagination__next-button button:active,.ids-data-pagination .ids-data-pagination__next-button button:focus,.ids-data-pagination .ids-data-pagination__next-button button:focus-visible,.ids-data-pagination .ids-data-pagination__next-button button:focus-within,.ids-data-pagination .ids-data-pagination__prev-button :active::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button :focus-visible::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button :focus-within::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button :focus::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button button:active,.ids-data-pagination .ids-data-pagination__prev-button button:focus,.ids-data-pagination .ids-data-pagination__prev-button button:focus-visible,.ids-data-pagination .ids-data-pagination__prev-button button:focus-within{outline:var(--IDS-FOCUS_OUTLINE)!important}.ids-data-pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end}.ids-data-pagination .ids-data-pagination__select{align-items:center;display:flex;position:relative}.ids-data-pagination .ids-data-pagination__select:after{background-image:var(--IDS-SELECT__CHEVRON-ICON);background-position:50%;background-repeat:no-repeat;content:\"\";display:block;height:100%;pointer-events:none;position:absolute;right:10px;top:0;transform:rotate(90deg);width:8px}.ids-data-pagination .ids-data-pagination__select ::slotted(label),.ids-data-pagination .ids-data-pagination__select label{color:var(--IDS-INPUT__COLOR);display:flex!important;font-family:var(--font-family_1)!important;margin-right:8px!important;white-space:nowrap!important}.ids-data-pagination .ids-data-pagination__select ::slotted(select),.ids-data-pagination .ids-data-pagination__select select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border:var(--IDS-INPUT__BORDER)!important;border-radius:5px!important;box-sizing:border-box;color:var(--IDS-INPUT__COLOR);cursor:pointer!important;display:flex!important;font-family:var(--font-family_1)!important;padding:4px 28px 4px 8px!important;width:100%!important}.ids-data-pagination .ids-data-pagination__select ::slotted(select) option,.ids-data-pagination .ids-data-pagination__select select option{height:20px!important}.ids-data-pagination.ids-data-pagination--light ::slotted(select),.ids-data-pagination.ids-data-pagination--light select{background-color:#fff}.ids-data-pagination .ids-data-pagination__summary{color:var(--IDS-INPUT__COLOR);display:flex;font-family:var(--font-family_1)!important;margin-left:40px}.ids-data-pagination .ids-data-pagination__buttons{display:flex;white-space:nowrap}.ids-data-pagination .ids-data-pagination__prev-button{display:flex;margin-left:20px}.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button button{background-image:var(--IDS-SELECT__CHEVRON-ICON)!important;background-position:7px 7px!important;background-repeat:no-repeat!important;rotate:180deg}.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled),.ids-data-pagination .ids-data-pagination__prev-button button:disabled{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)!important;cursor:default}.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled:hover),.ids-data-pagination .ids-data-pagination__prev-button button:disabled:hover{border:1px solid transparent!important}.ids-data-pagination .ids-data-pagination__next-button{display:flex;margin-left:8px}.ids-data-pagination .ids-data-pagination__next-button ::slotted(button),.ids-data-pagination .ids-data-pagination__next-button button{background-image:var(--IDS-SELECT__CHEVRON-ICON)!important;background-position:7px 7px!important;background-repeat:no-repeat!important}.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled),.ids-data-pagination .ids-data-pagination__next-button button:disabled{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)!important;cursor:default}.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled:hover),.ids-data-pagination .ids-data-pagination__next-button button:disabled:hover{border:1px solid transparent!important}";
3
+ var css_248z = ".ids-data-pagination .ids-data-pagination__next-button ::slotted(button),.ids-data-pagination .ids-data-pagination__next-button button,.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button button{background-color:transparent!important;background-size:1rem 1rem;border:.063rem solid transparent!important;cursor:pointer;height:1.938rem!important;width:1.938rem!important}.ids-data-pagination .ids-data-pagination__next-button :hover::slotted(button),.ids-data-pagination .ids-data-pagination__next-button button:hover,.ids-data-pagination .ids-data-pagination__prev-button :hover::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button button:hover{background-image:var(--IDS-SELECT__CHEVRON-ICON--HOVER)!important}.ids-data-pagination .ids-data-pagination__next-button :active::slotted(button),.ids-data-pagination .ids-data-pagination__next-button :focus-visible::slotted(button),.ids-data-pagination .ids-data-pagination__next-button :focus-within::slotted(button),.ids-data-pagination .ids-data-pagination__next-button :focus::slotted(button),.ids-data-pagination .ids-data-pagination__next-button button:active,.ids-data-pagination .ids-data-pagination__next-button button:focus,.ids-data-pagination .ids-data-pagination__next-button button:focus-visible,.ids-data-pagination .ids-data-pagination__next-button button:focus-within,.ids-data-pagination .ids-data-pagination__prev-button :active::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button :focus-visible::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button :focus-within::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button :focus::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button button:active,.ids-data-pagination .ids-data-pagination__prev-button button:focus,.ids-data-pagination .ids-data-pagination__prev-button button:focus-visible,.ids-data-pagination .ids-data-pagination__prev-button button:focus-within{outline:var(--IDS-FOCUS__OUTLINE)!important}.ids-data-pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end}.ids-data-pagination .ids-data-pagination__select{align-items:center;display:flex;position:relative}.ids-data-pagination .ids-data-pagination__select:after{background-image:var(--IDS-SELECT__CHEVRON-ICON);background-position:50%;background-repeat:no-repeat;content:\"\";display:block;height:100%;pointer-events:none;position:absolute;right:.625rem;top:0;transform:rotate(90deg);width:.5rem}.ids-data-pagination .ids-data-pagination__select ::slotted(label),.ids-data-pagination .ids-data-pagination__select label{color:var(--IDS-INPUT__COLOR);display:flex!important;font-family:var(--IDS-FONT-FAMILY-BASE)!important;margin-right:.5rem!important;white-space:nowrap!important}.ids-data-pagination .ids-data-pagination__select ::slotted(select),.ids-data-pagination .ids-data-pagination__select select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border:var(--IDS-INPUT__BORDER)!important;border-radius:.313rem!important;box-sizing:border-box;color:var(--IDS-INPUT__COLOR);cursor:pointer!important;display:flex!important;font-family:var(--IDS-FONT-FAMILY-BASE)!important;padding:.25rem 1.75rem .25rem .5rem!important;width:100%!important}.ids-data-pagination .ids-data-pagination__select ::slotted(select) option,.ids-data-pagination .ids-data-pagination__select select option{height:1.25rem!important}.ids-data-pagination.ids-data-pagination--light ::slotted(select),.ids-data-pagination.ids-data-pagination--light select{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-data-pagination .ids-data-pagination__summary{color:var(--IDS-INPUT__COLOR);display:flex;font-family:var(--IDS-FONT-FAMILY-BASE)!important;margin-left:2.5rem}.ids-data-pagination .ids-data-pagination__buttons{display:flex;white-space:nowrap}.ids-data-pagination .ids-data-pagination__prev-button{display:flex;margin-left:1.25rem}.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button button{background-image:var(--IDS-SELECT__CHEVRON-ICON)!important;background-position:.438rem .438rem!important;background-repeat:no-repeat!important;rotate:180deg}.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled),.ids-data-pagination .ids-data-pagination__prev-button button:disabled{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)!important;cursor:default}.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled:hover),.ids-data-pagination .ids-data-pagination__prev-button button:disabled:hover{border:.063rem solid transparent!important}.ids-data-pagination .ids-data-pagination__next-button{display:flex;margin-left:.5rem}.ids-data-pagination .ids-data-pagination__next-button ::slotted(button),.ids-data-pagination .ids-data-pagination__next-button button{background-image:var(--IDS-SELECT__CHEVRON-ICON)!important;background-position:.438rem .438rem!important;background-repeat:no-repeat!important}.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled),.ids-data-pagination .ids-data-pagination__next-button button:disabled{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)!important;cursor:default}.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled:hover),.ids-data-pagination .ids-data-pagination__next-button button:disabled:hover{border:.063rem solid transparent!important}";
4
4
 
5
5
  var dataPaginationLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/pagination/data-pagination/data-pagination.css CHANGED
@@ -2,11 +2,11 @@
2
2
  .ids-data-pagination .ids-data-pagination__next-button ::slotted(button), .ids-data-pagination .ids-data-pagination__prev-button button,
3
3
  .ids-data-pagination .ids-data-pagination__prev-button ::slotted(button) {
4
4
  cursor: pointer;
5
- background-size: 16px 16px;
6
- height: 31px !important;
7
- width: 31px !important;
5
+ background-size: 1rem 1rem;
6
+ height: 1.938rem !important;
7
+ width: 1.938rem !important;
8
8
  background-color: transparent !important;
9
- border: 1px solid transparent !important;
9
+ border: 0.063rem solid transparent !important;
10
10
  }
11
11
  .ids-data-pagination .ids-data-pagination__next-button button:hover,
12
12
  .ids-data-pagination .ids-data-pagination__next-button :hover::slotted(button), .ids-data-pagination .ids-data-pagination__prev-button button:hover,
@@ -22,7 +22,7 @@
22
22
  .ids-data-pagination .ids-data-pagination__prev-button :focus-visible::slotted(button), .ids-data-pagination .ids-data-pagination__next-button button:active,
23
23
  .ids-data-pagination .ids-data-pagination__next-button :active::slotted(button), .ids-data-pagination .ids-data-pagination__prev-button button:active,
24
24
  .ids-data-pagination .ids-data-pagination__prev-button :active::slotted(button) {
25
- outline: var(--IDS-FOCUS_OUTLINE) !important;
25
+ outline: var(--IDS-FOCUS__OUTLINE) !important;
26
26
  }
27
27
 
28
28
  .ids-data-pagination {
@@ -38,13 +38,13 @@
38
38
  }
39
39
  .ids-data-pagination .ids-data-pagination__select::after {
40
40
  content: "";
41
- width: 8px;
41
+ width: 0.5rem;
42
42
  height: 100%;
43
43
  display: block;
44
44
  position: absolute;
45
45
  transform: rotate(90deg);
46
- right: 10px;
47
- top: 0px;
46
+ right: 0.625rem;
47
+ top: 0;
48
48
  background-position: center;
49
49
  background-repeat: no-repeat;
50
50
  background-image: var(--IDS-SELECT__CHEVRON-ICON);
@@ -53,9 +53,9 @@
53
53
  .ids-data-pagination .ids-data-pagination__select label,
54
54
  .ids-data-pagination .ids-data-pagination__select ::slotted(label) {
55
55
  display: flex !important;
56
- margin-right: 8px !important;
56
+ margin-right: 0.5rem !important;
57
57
  white-space: nowrap !important;
58
- font-family: var(--font-family_1) !important;
58
+ font-family: var(--IDS-FONT-FAMILY-BASE) !important;
59
59
  color: var(--IDS-INPUT__COLOR);
60
60
  }
61
61
  .ids-data-pagination .ids-data-pagination__select select,
@@ -67,26 +67,26 @@
67
67
  box-sizing: border-box;
68
68
  color: var(--IDS-INPUT__COLOR);
69
69
  cursor: pointer !important;
70
- padding: 4px 28px 4px 8px !important;
70
+ padding: 0.25rem 1.75rem 0.25rem 0.5rem !important;
71
71
  border: var(--IDS-INPUT__BORDER) !important;
72
- border-radius: 5px !important;
72
+ border-radius: 0.313rem !important;
73
73
  width: 100% !important;
74
- font-family: var(--font-family_1) !important;
74
+ font-family: var(--IDS-FONT-FAMILY-BASE) !important;
75
75
  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
76
76
  }
77
77
  .ids-data-pagination .ids-data-pagination__select select option,
78
78
  .ids-data-pagination .ids-data-pagination__select ::slotted(select) option {
79
- height: 20px !important;
79
+ height: 1.25rem !important;
80
80
  }
81
81
  .ids-data-pagination.ids-data-pagination--light select,
82
82
  .ids-data-pagination.ids-data-pagination--light ::slotted(select) {
83
- background-color: white;
83
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
84
84
  }
85
85
  .ids-data-pagination .ids-data-pagination__summary {
86
86
  color: var(--IDS-INPUT__COLOR);
87
87
  display: flex;
88
- margin-left: 40px;
89
- font-family: var(--font-family_1) !important;
88
+ margin-left: 2.5rem;
89
+ font-family: var(--IDS-FONT-FAMILY-BASE) !important;
90
90
  }
91
91
  .ids-data-pagination .ids-data-pagination__buttons {
92
92
  white-space: nowrap;
@@ -94,12 +94,12 @@
94
94
  }
95
95
  .ids-data-pagination .ids-data-pagination__prev-button {
96
96
  display: flex;
97
- margin-left: 20px;
97
+ margin-left: 1.25rem;
98
98
  }
99
99
  .ids-data-pagination .ids-data-pagination__prev-button button,
100
100
  .ids-data-pagination .ids-data-pagination__prev-button ::slotted(button) {
101
101
  rotate: 180deg;
102
- background-position: 7px 7px !important;
102
+ background-position: 0.438rem 0.438rem !important;
103
103
  background-repeat: no-repeat !important;
104
104
  background-image: var(--IDS-SELECT__CHEVRON-ICON) !important;
105
105
  }
@@ -110,15 +110,15 @@
110
110
  }
111
111
  .ids-data-pagination .ids-data-pagination__prev-button button:disabled:hover,
112
112
  .ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled:hover) {
113
- border: 1px solid transparent !important;
113
+ border: 0.063rem solid transparent !important;
114
114
  }
115
115
  .ids-data-pagination .ids-data-pagination__next-button {
116
116
  display: flex;
117
- margin-left: 8px;
117
+ margin-left: 0.5rem;
118
118
  }
119
119
  .ids-data-pagination .ids-data-pagination__next-button button,
120
120
  .ids-data-pagination .ids-data-pagination__next-button ::slotted(button) {
121
- background-position: 7px 7px !important;
121
+ background-position: 0.438rem 0.438rem !important;
122
122
  background-repeat: no-repeat !important;
123
123
  background-image: var(--IDS-SELECT__CHEVRON-ICON) !important;
124
124
  }
@@ -129,5 +129,5 @@
129
129
  }
130
130
  .ids-data-pagination .ids-data-pagination__next-button button:disabled:hover,
131
131
  .ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled:hover) {
132
- border: 1px solid transparent !important;
132
+ border: 0.063rem solid transparent !important;
133
133
  }
package/components/pagination/list-pagination/list-pagination-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = ".ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button{background-color:transparent!important;background-image:var(--IDS-SELECT__CHEVRON-ICON)!important;background-size:16px 16px;border:1px solid transparent!important;cursor:pointer;height:28px!important;width:28px!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :active::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :focus-visible::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :focus-within::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :focus::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :hover::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:active,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus-visible,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus-within,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:hover,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :active::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :focus-visible::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :focus-within::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :focus::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :hover::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:active,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus-visible,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus-within,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:hover{background-image:var(--IDS-SELECT__CHEVRON-ICON--HOVER)!important;outline:var(--IDS-FOCUS_OUTLINE)!important;outline-offset:2px}.ids-list-pagination{text-align:center}.ids-list-pagination .ids-list-pagination__summary{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(--font-family_1)!important;line-height:24px;margin-bottom:8px;text-align:center}.ids-list-pagination .ids-list-pagination__content{align-items:center;display:flex;justify-content:center}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list{align-items:center;display:flex;justify-content:center;margin:0;padding:0}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item{align-items:center;border:1px solid transparent;border-radius:1.75rem;box-sizing:border-box;display:flex;justify-content:center;margin:0 2px;min-height:1.75rem;min-width:1.75rem;text-align:center}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[hidden]{display:none}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[hidden-before]:before{color:var(--IDS-COLOR-NEUTRAL-20);content:\"..\";display:block;font-family:var(--font-family_1);font-size:24px;font-style:normal;font-weight:700;line-height:24px;margin-left:-3px;margin-right:4px}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item.ids-list-pagination__list-item--current{background-color:var(--IDS-LINK--COLORPRESET-1__COLOR);border:1px solid var(--IDS-LINK--COLORPRESET-1__COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button{background-color:transparent;border:0;color:var(--IDS-LINK--COLORPRESET-1__COLOR);cursor:pointer;display:block;font-family:var(--IDS-LIST-PAGINATION-LINK--FONT-FAMILY);font-size:16px;font-style:normal;font-weight:700;line-height:1.5rem;min-height:28px;min-width:28px;padding:0 .5rem;text-align:center;text-decoration-color:var(--IDS-LINK--COLORPRESET-1__COLOR);text-decoration:underline;text-underline-offset:4px}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:2px!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:active,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-visible,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-within,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:hover{color:var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current{color:var(--IDS-COLOR-NEUTRAL-100);cursor:default;font-weight:400;text-decoration:none}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus-visible,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus-within,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:hover{color:var(--IDS-COLOR-NEUTRAL-100)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button{display:flex;margin-right:4px}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button{background-position:5px 5px!important;background-repeat:no-repeat!important;rotate:180deg}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:disabled),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:disabled{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)!important;cursor:default}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button{display:flex;margin-left:4px}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button{background-position:5px 6px!important;background-repeat:no-repeat!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:disabled),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)!important;cursor:default}";
3
+ var css_248z = ".ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button{background-color:transparent!important;background-image:var(--IDS-SELECT__CHEVRON-ICON)!important;background-size:1rem 1rem;border:.063rem solid transparent!important;cursor:pointer;height:1.75rem!important;width:1.75rem!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :active::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :focus-visible::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :focus-within::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :focus::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :hover::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:active,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus-visible,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus-within,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:hover,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :active::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :focus-visible::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :focus-within::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :focus::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :hover::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:active,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus-visible,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus-within,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:hover{background-image:var(--IDS-SELECT__CHEVRON-ICON--HOVER)!important;border-radius:1.75rem;outline:var(--IDS-FOCUS__OUTLINE)!important;outline-offset:.125rem}.ids-list-pagination{text-align:center}.ids-list-pagination .ids-list-pagination__summary{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(--IDS-FONT-FAMILY-BASE)!important;line-height:1.5rem;margin-bottom:.5rem;text-align:center}.ids-list-pagination .ids-list-pagination__content{align-items:center;display:flex;justify-content:center}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list{align-items:center;display:flex;justify-content:center;margin:0;padding:0}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item{align-items:center;border:.063rem solid transparent;border-radius:1.75rem;box-sizing:border-box;display:flex;justify-content:center;margin:0 .125rem;min-height:1.75rem;min-width:1.75rem;text-align:center}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[hidden]{display:none}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[hidden-before]:before{color:var(--IDS-COLOR-NEUTRAL-20);content:\"..\";display:block;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.5rem;font-style:normal;font-weight:700;line-height:1.5rem;margin-left:-.188rem;margin-right:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item.ids-list-pagination__list-item--current{background-color:var(--IDS-LINK--COLORPRESET-1__COLOR);border:.063rem solid var(--IDS-LINK--COLORPRESET-1__COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button{background-color:transparent;border:0;border-radius:1.75rem;color:var(--IDS-LINK--COLORPRESET-1__COLOR);cursor:pointer;display:block;font-family:var(--IDS-LIST-PAGINATION__LINK-FONT-FAMILY);font-size:1rem;font-style:normal;font-weight:700;line-height:1.5rem;min-height:1.75rem;min-width:1.75rem;padding:0 .5rem;text-align:center;text-decoration-color:var(--IDS-LINK--COLORPRESET-1__COLOR);text-decoration:underline;text-underline-offset:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:.125rem!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:active,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-visible,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-within,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:hover{color:var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current{color:var(--IDS-COLOR-NEUTRAL-100);cursor:default;font-weight:400;text-decoration:none}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus-visible,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus-within,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:hover{color:var(--IDS-COLOR-NEUTRAL-100)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button{display:flex;margin-right:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button{background-position:.313rem .313rem!important;background-repeat:no-repeat!important;rotate:180deg}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:disabled),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:disabled{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)!important;cursor:default}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button{display:flex;margin-left:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button{background-position:.313rem .375rem!important;background-repeat:no-repeat!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:disabled),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)!important;cursor:default}";
4
4
 
5
5
  var listPaginationLit = css`
6
6
  ${unsafeCSS(css_248z)}
package/components/pagination/list-pagination/list-pagination.css CHANGED
@@ -2,7 +2,7 @@
2
2
  * BUTTONS
3
3
  ********/
4
4
  /*******
5
- * SCROLLBAR
5
+ * SCROLLBARS
6
6
  ********/
7
7
  /*******
8
8
  * FORM
@@ -14,11 +14,11 @@
14
14
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button,
15
15
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button) {
16
16
  cursor: pointer;
17
- background-size: 16px 16px;
18
- height: 28px !important;
19
- width: 28px !important;
17
+ background-size: 1rem 1rem;
18
+ height: 1.75rem !important;
19
+ width: 1.75rem !important;
20
20
  background-color: transparent !important;
21
- border: 1px solid transparent !important;
21
+ border: 0.063rem solid transparent !important;
22
22
  background-image: var(--IDS-SELECT__CHEVRON-ICON) !important;
23
23
  }
24
24
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:hover,
@@ -32,8 +32,9 @@
32
32
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :focus-visible::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:active,
33
33
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :active::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:active,
34
34
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :active::slotted(button) {
35
- outline: var(--IDS-FOCUS_OUTLINE) !important;
36
- outline-offset: 2px;
35
+ outline: var(--IDS-FOCUS__OUTLINE) !important;
36
+ outline-offset: 0.125rem;
37
+ border-radius: 1.75rem;
37
38
  background-image: var(--IDS-SELECT__CHEVRON-ICON--HOVER) !important;
38
39
  }
39
40
 
@@ -43,9 +44,9 @@
43
44
  .ids-list-pagination .ids-list-pagination__summary {
44
45
  color: var(--IDS-COLOR-NEUTRAL-20);
45
46
  text-align: center;
46
- font-family: var(--font-family_1) !important;
47
- line-height: 24px;
48
- margin-bottom: 8px;
47
+ font-family: var(--IDS-FONT-FAMILY-BASE) !important;
48
+ line-height: 1.5rem;
49
+ margin-bottom: 0.5rem;
49
50
  }
50
51
  .ids-list-pagination .ids-list-pagination__content {
51
52
  display: flex;
@@ -64,11 +65,11 @@
64
65
  align-items: center;
65
66
  justify-content: center;
66
67
  text-align: center;
67
- margin: 0 2px;
68
+ margin: 0 0.125rem;
68
69
  min-width: 1.75rem;
69
70
  min-height: 1.75rem;
70
71
  border-radius: 1.75rem;
71
- border: 1px solid transparent;
72
+ border: 0.063rem solid transparent;
72
73
  box-sizing: border-box;
73
74
  }
74
75
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[hidden] {
@@ -77,41 +78,43 @@
77
78
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[hidden-before]:before {
78
79
  content: "..";
79
80
  display: block;
80
- margin-right: 4px;
81
- margin-left: -3px;
81
+ margin-right: 0.25rem;
82
+ margin-left: -0.188rem;
82
83
  color: var(--IDS-COLOR-NEUTRAL-20);
83
- font-family: var(--font-family_1);
84
- font-size: 24px;
84
+ font-family: var(--IDS-FONT-FAMILY-BASE);
85
+ font-size: 1.5rem;
85
86
  font-style: normal;
86
87
  font-weight: 700;
87
- line-height: 24px;
88
+ line-height: 1.5rem;
88
89
  }
89
90
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item.ids-list-pagination__list-item--current {
90
91
  background-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
91
- border: 1px solid var(--IDS-LINK--COLORPRESET-1__COLOR);
92
+ border: 0.063rem solid var(--IDS-LINK--COLORPRESET-1__COLOR);
92
93
  }
93
94
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button {
94
95
  display: block;
95
- min-width: 28px;
96
- min-height: 28px;
96
+ min-width: 1.75rem;
97
+ min-height: 1.75rem;
97
98
  padding: 0 0.5rem;
98
99
  background-color: transparent;
99
100
  border: 0;
101
+ border-radius: 1.75rem;
100
102
  text-align: center;
101
- font-family: var(--IDS-LIST-PAGINATION-LINK--FONT-FAMILY);
102
- font-size: 16px;
103
+ font-family: var(--IDS-LIST-PAGINATION__LINK-FONT-FAMILY);
104
+ font-size: 1rem;
103
105
  font-style: normal;
104
106
  font-weight: 700;
107
+ font-size: 1rem;
105
108
  line-height: 1.5rem;
106
109
  color: var(--IDS-LINK--COLORPRESET-1__COLOR);
107
110
  text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
108
111
  text-decoration: underline;
109
- text-underline-offset: 4px;
112
+ text-underline-offset: 0.25rem;
110
113
  cursor: pointer;
111
114
  }
112
115
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus {
113
- outline: var(--IDS-FOCUS_OUTLINE);
114
- outline-offset: 2px !important;
116
+ outline: var(--IDS-FOCUS__OUTLINE);
117
+ outline-offset: 0.125rem !important;
115
118
  }
116
119
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:hover, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-within, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-visible, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:active {
117
120
  color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
@@ -127,12 +130,12 @@
127
130
  }
128
131
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button {
129
132
  display: flex;
130
- margin-right: 4px;
133
+ margin-right: 0.25rem;
131
134
  }
132
135
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button,
133
136
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button) {
134
137
  rotate: 180deg;
135
- background-position: 5px 5px !important;
138
+ background-position: 0.313rem 0.313rem !important;
136
139
  background-repeat: no-repeat !important;
137
140
  }
138
141
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:disabled,
@@ -142,11 +145,11 @@
142
145
  }
143
146
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button {
144
147
  display: flex;
145
- margin-left: 4px;
148
+ margin-left: 0.25rem;
146
149
  }
147
150
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button,
148
151
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button) {
149
- background-position: 5px 6px !important;
152
+ background-position: 0.313rem 0.375rem !important;
150
153
  background-repeat: no-repeat !important;
151
154
  }
152
155
  .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled,
package/components/popover/popover-content-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}}:host([show]){display:block}:host{color:var(--IDS-BASE__FONT-COLOR);display:none;position:absolute;width:max-content}.ids-popover-content{background:#fff;border:1px solid var(--popover_border);border-radius:var(--popover-content_border-radius);box-shadow:0 0 10px rgba(0,0,0,.3);box-sizing:border-box;max-height:260px;padding:20px;position:relative;width:260px;z-index:2}.ids-popover-content ::slotted(*){color:var(--IDS-BASE__FONT-COLOR)}.ids-popover-content ::slotted(h3),.ids-popover-content h3{color:var(--IDS-BASE__FONT-COLOR)!important;color:var(--heading-xs-color);font-family:var(--heading-xs-font-family)!important;font-size:var(--heading-xs-font-size)!important;font-style:normal!important;font-weight:var(--heading-xs-font-weight)!important;letter-spacing:var(--heading-xs-letter-spacing)!important;line-height:var(--heading-xs-line-height)!important;margin-bottom:8px!important}.ids-popover-content .ids-popover-content__caret{position:absolute}.ids-popover-content .ids-popover-content__caret.hide{display:none}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top{bottom:-27px;left:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-left{bottom:-28px;left:2px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-right{bottom:-28px;right:2px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left{right:-28px;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-top{bottom:2px;right:-28px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-bottom{right:-28px;top:2px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right{left:-28px;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-top{bottom:2px;left:-28px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-bottom{left:-28px;top:2px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom{left:50%;top:-28px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-left{left:2px;top:-28px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-right{right:2px;top:-28px}.ids-popover-content .ids-popover-content__caret-body{background:#fff;display:block;position:absolute;z-index:4}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-right{bottom:0;clip-path:polygon(0 0,50% 100%,100% 0);height:.6rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-top{clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:0;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-top{clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:0;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-right{clip-path:polygon(0 100%,50% 0,100% 100%);height:.6rem;top:0;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-border{background-color:var(--popover_border);position:absolute;z-index:1}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-right{background-color:var(--popover_border);bottom:-2px;clip-path:polygon(0 0,50% 100%,100% 0);height:.6rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-top{background-color:var(--popover_border);clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:-2px;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-top{background-color:var(--popover_border);clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:-2px;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-right{clip-path:polygon(0 100%,50% 0,100% 100%);height:.6rem;top:-2px;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-shadow{filter:blur(3px);height:0;position:absolute;width:0;z-index:1}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-right{border-left:.625rem solid transparent;border-right:.625rem solid transparent;border-top:.625rem solid rgba(0,0,0,.15);bottom:-7px;transform:translateX(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-top{border-bottom:.5625rem solid transparent;border-right:.5625rem solid rgba(53,53,53,.15);border-top:.5625rem solid transparent;right:-7px;transform:translateY(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-top{border-bottom:.5625rem solid transparent;border-right:.5625rem solid rgba(53,53,53,.15);border-top:.5625rem solid transparent;left:-7px;transform:translateY(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-right{border-bottom:.625rem solid rgba(0,0,0,.15);border-left:.625rem solid transparent;border-right:.625rem solid transparent;top:-7px;transform:translateX(-50%)}.ids-popover-content .ids-popover-content__inner-wrapper{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row-reverse;flex-wrap:wrap;position:relative;z-index:4}.ids-popover-content .ids-popover-content__close-btn-wrapper{display:block;height:20px;max-width:100%;z-index:1}.ids-popover-content .ids-popover-content__text-wrapper{display:block;flex-basis:0;flex-grow:1;height:100%;height:calc(100% - 20px);margin-right:-17px;max-width:100%;overflow:auto;overflow-x:hidden;padding-right:20px;position:relative;text-align:left;width:100%;width:calc(100% - 20px)}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar{margin-left:-20px;margin-top:30px;position:absolute;width:14px}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-track{background:var(--IDS-SCROLL_TRACK-COLOR);border-radius:10px;margin-bottom:0;margin-top:30px}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-resizer{appearance:none;background-image:var(--IDS-TEXTAREA-RESIZER-IMAGE);background-position:50%;background-repeat:no-repeat;background-size:cover}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-corner{background-color:transparent}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL_COLOR);border:3px solid var(--IDS-SCROLL_TRACK-COLOR);border-radius:10px;box-sizing:border-box;cursor:auto}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL_HOVER-COLOR)}.ids-popover-content .ids-popover-content__text-wrapper:focus{outline:var(--focus_outline);outline-offset:10px}.ids-popover-content .ids-popover-content__close-btn{background:none;border:none;color:inherit;cursor:pointer;outline:inherit;padding:0}.ids-popover-content .ids-popover-content__close-btn:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-popover-content .ids-popover-content__close-btn:focus,.ids-popover-content .ids-popover-content__close-icon:focus{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}:host([show]){display:block}:host{color:var(--IDS-BASE__FONT-COLOR);display:none;position:absolute;width:max-content}.ids-popover-content{background-color:var(--IDS-COLOR-NEUTRAL-100);border:.063rem solid var(--IDS-POPOVER-CONTENT__BORDER);border-radius:var(--IDS-POPOVER-CONTENT__BORDER-RADIUS);box-shadow:0 0 .625rem rgba(0,0,0,.3);box-sizing:border-box;max-height:16.25rem;padding:1.25rem;position:relative;width:16.25rem;z-index:2}.ids-popover-content ::slotted(*){color:var(--IDS-BASE__FONT-COLOR)}.ids-popover-content ::slotted(h3),.ids-popover-content h3{color:var(--IDS-BASE__FONT-COLOR)!important;color:var(--IDS-HEADING-XS__COLOR);font-family:var(--IDS-HEADING-XS__FONT-FAMILY)!important;font-size:var(--IDS-HEADING-XS__FONT-SIZE)!important;font-style:normal!important;font-weight:var(--IDS-HEADING-XS__FONT-WEIGHT)!important;letter-spacing:var(--IDS-HEADING-XS__LETTER-SPACING)!important;line-height:var(--IDS-HEADING-XS__LINE-HEIGHT)!important;margin-bottom:.5rem!important}.ids-popover-content .ids-popover-content__caret{position:absolute}.ids-popover-content .ids-popover-content__caret.hide{display:none}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top{bottom:-1.688rem;left:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-left{bottom:-1.75rem;left:.125rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-right{bottom:-1.75rem;right:.125rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left{right:-1.75rem;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-top{bottom:.125rem;right:-1.75rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-bottom{right:-1.75rem;top:.125rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right{left:-1.75rem;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-top{bottom:.125rem;left:-1.75rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-bottom{left:-1.75rem;top:.125rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom{left:50%;top:-1.75rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-left{left:.125rem;top:-1.75rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-right{right:.125rem;top:-1.75rem}.ids-popover-content .ids-popover-content__caret-body{background:var(--IDS-COLOR-NEUTRAL-100);display:block;position:absolute;z-index:4}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-right{bottom:0;clip-path:polygon(0 0,50% 100%,100% 0);height:.6rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-top{clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:0;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-top{clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:0;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-right{clip-path:polygon(0 100%,50% 0,100% 100%);height:.6rem;top:0;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-border{background-color:var(--IDS-POPOVER-CONTENT__BORDER);position:absolute;z-index:1}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-right{background-color:var(--IDS-POPOVER-CONTENT__BORDER);bottom:-.125rem;clip-path:polygon(0 0,50% 100%,100% 0);height:.6rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-top{background-color:var(--IDS-POPOVER-CONTENT__BORDER);clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:-.125rem;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-top{background-color:var(--IDS-POPOVER-CONTENT__BORDER);clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:-.125rem;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-right{clip-path:polygon(0 100%,50% 0,100% 100%);height:.6rem;top:-.125rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-shadow{filter:blur(.188rem);height:0;position:absolute;width:0;z-index:1}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-right{border-left:.625rem solid transparent;border-right:.625rem solid transparent;border-top:.625rem solid rgba(0,0,0,.15);bottom:-.438rem;transform:translateX(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-top{border-bottom:.5625rem solid transparent;border-right:.5625rem solid rgba(53,53,53,.15);border-top:.5625rem solid transparent;right:-.438rem;transform:translateY(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-top{border-bottom:.5625rem solid transparent;border-right:.5625rem solid rgba(53,53,53,.15);border-top:.5625rem solid transparent;left:-.438rem;transform:translateY(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-right{border-bottom:.625rem solid rgba(0,0,0,.15);border-left:.625rem solid transparent;border-right:.625rem solid transparent;top:-.438rem;transform:translateX(-50%)}.ids-popover-content .ids-popover-content__inner-wrapper{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row-reverse;flex-wrap:wrap;position:relative;z-index:4}.ids-popover-content .ids-popover-content__close-btn-wrapper{display:block;height:1.25rem;max-width:100%;z-index:1}.ids-popover-content .ids-popover-content__text-wrapper{display:block;flex-basis:0;flex-grow:1;height:100%;height:calc(100% - 1.25rem);margin-right:-1.12rem;max-width:100%;overflow:auto;overflow-x:hidden;padding-right:1.25rem;position:relative;text-align:left;width:100%;width:calc(100% - 1.25rem)}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar{margin-left:-1.25rem;position:absolute;width:1rem}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-track{background:var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;margin-bottom:0;margin-top:1.5rem}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__COLOR);border:.125rem solid var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;box-sizing:border-box;cursor:auto}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__HOVER-COLOR)}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-corner{background-color:transparent}.ids-popover-content .ids-popover-content__text-wrapper:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:.625rem}.ids-popover-content .ids-popover-content__close-btn{background:none;border:none;color:inherit;cursor:pointer;outline:inherit;padding:0}.ids-popover-content .ids-popover-content__close-btn:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-popover-content .ids-popover-content__close-btn:focus,.ids-popover-content .ids-popover-content__close-icon:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}";
4
4
 
5
5
  var popoverContentLit = css`${unsafeCSS(css_248z)}`;
6
6