@inera/ids-design 6.0.3 → 6.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (177) hide show
  1. package/components/accordion/accordion-lit.d.ts +2 -2
  2. package/components/accordion/accordion-lit.js +2 -2
  3. package/components/alert/alert-lit.d.ts +2 -2
  4. package/components/alert/alert-lit.js +1 -1
  5. package/components/alert/alert.css +54 -70
  6. package/components/alert-global/alert-global-lit.d.ts +2 -2
  7. package/components/alert-global/alert-global-lit.js +1 -1
  8. package/components/alert-global/alert-global.css +7 -0
  9. package/components/badge/badge-lit.d.ts +2 -2
  10. package/components/box-link/box-link-lit.d.ts +2 -2
  11. package/components/box-link/box-link-lit.js +1 -1
  12. package/components/box-link/box-link.css +1 -0
  13. package/components/breadcrumbs/breadcrumbs-lit.d.ts +2 -2
  14. package/components/button-group/button-group-lit.d.ts +2 -2
  15. package/components/button-group/button-group-lit.js +1 -1
  16. package/components/button-group/button-group.css +8 -3
  17. package/components/card/card-lit.d.ts +2 -2
  18. package/components/card/card-lit.js +3 -3
  19. package/components/card/card.css +7 -0
  20. package/components/carousel/carousel-item-lit.d.ts +2 -2
  21. package/components/carousel/carousel-lit.d.ts +2 -2
  22. package/components/data-table/data-table-lit.d.ts +2 -2
  23. package/components/data-table/data-table-lit.js +1 -1
  24. package/components/data-table/data-table.css +1 -1
  25. package/components/date-label/date-label-lit.d.ts +2 -2
  26. package/components/dialog/dialog-lit.d.ts +2 -2
  27. package/components/dialog/dialog-lit.js +1 -1
  28. package/components/dialog/dialog.css +2 -0
  29. package/components/dropdown/dropdown-lit.d.ts +2 -2
  30. package/components/dropdown/dropdown-lit.js +3 -3
  31. package/components/dropdown/dropdown.css +0 -1
  32. package/components/footer-1177/footer-1177-lit.d.ts +2 -2
  33. package/components/footer-1177-admin/footer-1177-admin-lit.d.ts +2 -2
  34. package/components/footer-1177-pro/footer-1177-pro-lit.d.ts +2 -2
  35. package/components/footer-inera/footer-inera-lit.d.ts +2 -2
  36. package/components/footer-inera-admin/footer-inera-admin-lit.d.ts +2 -2
  37. package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
  38. package/components/footer-inera-admin/footer-inera-admin.css +4 -4
  39. package/components/form/error-message/error-message-lit.d.ts +2 -2
  40. package/components/form/error-message/error-message-lit.js +1 -1
  41. package/components/form/error-message/error-message.css +2 -1
  42. package/components/form/group/group-lit.d.ts +2 -2
  43. package/components/form/range/range-lit.d.ts +2 -2
  44. package/components/form/range/range-lit.js +1 -1
  45. package/components/form/range/range.css +34 -11
  46. package/components/form/select-multiple/select-multiple-lit.d.ts +2 -2
  47. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  48. package/components/form/select-multiple/select-multiple.css +35 -15
  49. package/components/form/spinner/spinner-lit.d.ts +2 -2
  50. package/components/grid/column/column-lit.d.ts +2 -2
  51. package/components/grid/container/container-lit.d.ts +2 -2
  52. package/components/grid/row/row-lit.d.ts +2 -2
  53. package/components/header-1177/composite-header-1177.css +12 -7
  54. package/components/header-1177/header-1177-avatar-lit.d.ts +2 -2
  55. package/components/header-1177/header-1177-item-lit.d.ts +2 -2
  56. package/components/header-1177/header-1177-item-lit.js +1 -1
  57. package/components/header-1177/header-1177-item.css +4 -0
  58. package/components/header-1177/header-1177-lit.d.ts +2 -2
  59. package/components/header-1177/header-1177-lit.js +1 -1
  60. package/components/header-1177/header-1177-nav-item-lit.d.ts +2 -2
  61. package/components/header-1177/header-1177-nav-item-mobile-lit.d.ts +2 -2
  62. package/components/header-1177/header-1177-nav-item-mobile.css +1 -0
  63. package/components/header-1177/header-1177-nav-lit.d.ts +2 -2
  64. package/components/header-1177/header-1177.css +7 -7
  65. package/components/header-1177-admin/header-1177-admin-avatar-lit.d.ts +2 -2
  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.d.ts +2 -2
  68. package/components/header-1177-admin/header-1177-admin-avatar.css +32 -0
  69. package/components/header-1177-admin/header-1177-admin-item-lit.d.ts +2 -2
  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 +4 -0
  72. package/components/header-1177-admin/header-1177-admin-lit.d.ts +2 -2
  73. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  74. package/components/header-1177-admin/header-1177-admin-nav-item-lit.d.ts +2 -2
  75. package/components/header-1177-admin/header-1177-admin-nav-lit.d.ts +2 -2
  76. package/components/header-1177-admin/header-1177-admin.css +46 -6
  77. package/components/header-1177-pro/header-1177-pro-avatar-lit.d.ts +2 -2
  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.d.ts +2 -2
  80. package/components/header-1177-pro/header-1177-pro-avatar.css +32 -0
  81. package/components/header-1177-pro/header-1177-pro-item-lit.d.ts +2 -2
  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 +14 -0
  84. package/components/header-1177-pro/header-1177-pro-lit.d.ts +2 -2
  85. package/components/header-1177-pro/header-1177-pro-lit.js +1 -1
  86. package/components/header-1177-pro/header-1177-pro-nav-item-lit.d.ts +2 -2
  87. package/components/header-1177-pro/header-1177-pro-nav-lit.d.ts +2 -2
  88. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.d.ts +2 -2
  89. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +1 -0
  90. package/components/header-1177-pro/header-1177-pro-region-picker-lit.d.ts +2 -2
  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 +41 -7
  93. package/components/header-1177-pro/header-1177-pro.css +41 -7
  94. package/components/header-inera/header-inera-item-lit.d.ts +2 -2
  95. package/components/header-inera/header-inera-item-lit.js +1 -1
  96. package/components/header-inera/header-inera-item.css +8 -14
  97. package/components/header-inera/header-inera-lit.d.ts +2 -2
  98. package/components/header-inera/header-inera-lit.js +1 -1
  99. package/components/header-inera/header-inera-nav-item-lit.d.ts +2 -2
  100. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  101. package/components/header-inera/header-inera-nav-item.css +1 -1
  102. package/components/header-inera/header-inera-nav-lit.d.ts +2 -2
  103. package/components/header-inera/header-inera-nav-mobile-lit.d.ts +2 -2
  104. package/components/header-inera/header-inera-nav-mobile-lit.js +1 -1
  105. package/components/header-inera/header-inera-nav-mobile.css +1 -0
  106. package/components/header-inera/header-inera.css +2 -2
  107. package/components/header-inera-admin/composite-header-inera-admin.css +35 -22
  108. package/components/header-inera-admin/header-inera-admin-avatar-lit.d.ts +2 -2
  109. package/components/header-inera-admin/header-inera-admin-avatar-lit.js +1 -1
  110. package/components/header-inera-admin/header-inera-admin-avatar-mobile-lit.d.ts +2 -2
  111. package/components/header-inera-admin/header-inera-admin-avatar-mobile-lit.js +1 -1
  112. package/components/header-inera-admin/header-inera-admin-avatar-mobile.css +8 -1
  113. package/components/header-inera-admin/header-inera-admin-avatar.css +15 -4
  114. package/components/header-inera-admin/header-inera-admin-item-lit.d.ts +2 -2
  115. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  116. package/components/header-inera-admin/header-inera-admin-item.css +8 -14
  117. package/components/header-inera-admin/header-inera-admin-lit.d.ts +2 -2
  118. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  119. package/components/header-inera-admin/header-inera-admin-nav-item-lit.d.ts +2 -2
  120. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  121. package/components/header-inera-admin/header-inera-admin-nav-item.css +1 -1
  122. package/components/header-inera-admin/header-inera-admin-nav-lit.d.ts +2 -2
  123. package/components/header-inera-admin/header-inera-admin-nav-mobile-lit.d.ts +2 -2
  124. package/components/header-inera-admin/header-inera-admin-nav-mobile-lit.js +1 -1
  125. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +1 -0
  126. package/components/header-inera-admin/header-inera-admin.css +2 -2
  127. package/components/mobile-menu/mobile-menu-lit.d.ts +2 -2
  128. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  129. package/components/mobile-menu/mobile-menu.css +39 -17
  130. package/components/navigation/content/navigation-content-lit.d.ts +2 -2
  131. package/components/navigation/local/navigation-local-lit.d.ts +2 -2
  132. package/components/notification-badge/notification-badge-lit.d.ts +2 -2
  133. package/components/pagination/data-pagination/data-pagination-lit.d.ts +2 -2
  134. package/components/pagination/list-pagination/list-pagination-lit.d.ts +2 -2
  135. package/components/pagination/list-pagination/list-pagination-lit.js +3 -3
  136. package/components/pagination/list-pagination/list-pagination.css +8 -8
  137. package/components/popover/popover-content-lit.d.ts +2 -2
  138. package/components/popover/popover-lit.d.ts +2 -2
  139. package/components/popover/popover-lit.js +1 -1
  140. package/components/popover/popover.css +1 -0
  141. package/components/progressbar/progressbar-lit.d.ts +2 -2
  142. package/components/progressbar/progressbar-lit.js +1 -1
  143. package/components/progressbar/progressbar.css +20 -14
  144. package/components/puff-list/puff-list-lit.d.ts +2 -2
  145. package/components/side-menu/side-menu-lit.d.ts +2 -2
  146. package/components/side-menu/side-menu-lit.js +1 -1
  147. package/components/side-menu/side-menu.css +4 -2
  148. package/components/side-panel/side-panel-lit.d.ts +2 -2
  149. package/components/side-panel/side-panel-lit.js +1 -1
  150. package/components/side-panel/side-panel.css +1 -13
  151. package/components/stepper/stepper-lit.d.ts +2 -2
  152. package/components/stepper/stepper-lit.js +1 -1
  153. package/components/stepper/stepper.css +22 -9
  154. package/components/tabs/tab-lit.d.ts +2 -2
  155. package/components/tabs/tab-lit.js +1 -1
  156. package/components/tabs/tab-panel-lit.d.ts +2 -2
  157. package/components/tabs/tab.css +10 -5
  158. package/components/tabs/tabs-lit.d.ts +2 -2
  159. package/components/tabs/tabs-lit.js +1 -1
  160. package/components/tag/tag-lit.d.ts +2 -2
  161. package/components/tooltip/tooltip-lit.d.ts +2 -2
  162. package/global/global.css +511 -162
  163. package/global/icons/font/Inera-Design-Icons.eot +0 -0
  164. package/global/icons/font/Inera-Design-Icons.svg +322 -154
  165. package/global/icons/font/Inera-Design-Icons.ttf +0 -0
  166. package/global/icons/font/Inera-Design-Icons.woff +0 -0
  167. package/license.md +7 -7
  168. package/package.json +1 -1
  169. package/themes/1177/1177-tokens.css +33 -33
  170. package/themes/1177/1177.css +527 -178
  171. package/themes/1177-pro/1177-pro.css +527 -178
  172. package/themes/inera/inera-tokens.css +52 -52
  173. package/themes/inera/inera.css +526 -177
  174. package/themes/inera-admin/inera-admin.css +526 -177
  175. package/components/form/textarea/textarea-lit.d.ts +0 -2
  176. package/components/form/textarea/textarea-lit.js +0 -7
  177. package/components/form/textarea/textarea.css +0 -0
@@ -2461,11 +2461,20 @@ body.ids {
2461
2461
  font-size: 0.875rem;
2462
2462
  }
2463
2463
  .ids-link.ids-link--small.ids-link--start-icon {
2464
- padding-left: 1.25rem;
2464
+ padding-left: 1.125rem;
2465
+ }
2466
+ .ids-link.ids-link--small.ids-link--start-icon:before {
2467
+ font-size: 0.875rem;
2465
2468
  }
2466
2469
  .ids-link.ids-link--small.ids-link--end-icon {
2467
2470
  padding-right: 1.125rem;
2468
2471
  }
2472
+ .ids-link.ids-link--small.ids-link--end-icon:before {
2473
+ font-size: 0.875rem;
2474
+ }
2475
+ .ids-link.ids-link--large {
2476
+ text-decoration: none !important;
2477
+ }
2469
2478
  .ids-link.ids-link--large.ids-link--start-icon, .ids-link.ids-link--large.ids-link--end-icon {
2470
2479
  padding-left: 1.75rem;
2471
2480
  }
@@ -2473,6 +2482,9 @@ body.ids {
2473
2482
  font-size: 1.25rem;
2474
2483
  top: 0.0625rem !important;
2475
2484
  }
2485
+ .ids-link.ids-link--large:hover {
2486
+ text-decoration: none !important;
2487
+ }
2476
2488
  .ids-link.ids-link--block {
2477
2489
  display: flex;
2478
2490
  flex-grow: 1;
@@ -2510,6 +2522,12 @@ body.ids {
2510
2522
  .ids-link.ids-link--underlined:has(.ids-icon), .ids-link.ids-link--underlined.ids-link--start-icon, .ids-link.ids-link--underlined.ids-link--end-icon {
2511
2523
  text-decoration: underline !important;
2512
2524
  }
2525
+ .ids-link.ids-link--no-underline {
2526
+ text-decoration: none !important;
2527
+ }
2528
+ .ids-link.ids-link--no-underline:has(.ids-icon), .ids-link.ids-link--no-underline.ids-link--start-icon, .ids-link.ids-link--no-underline.ids-link--end-icon {
2529
+ text-decoration: none !important;
2530
+ }
2513
2531
  .ids-link.ids-link--active-icon {
2514
2532
  text-decoration: none !important;
2515
2533
  }
@@ -2694,10 +2712,21 @@ body.ids {
2694
2712
  -moz-user-select: none;
2695
2713
  -ms-user-select: none;
2696
2714
  }
2697
- .ids .ids-button:hover, .ids .ids-button.ids-button--active,
2715
+ .ids .ids-button [class*=" ids-icon-"],
2716
+ .ids-button [class*=" ids-icon-"],
2717
+ .ids button.ids-button [class*=" ids-icon-"] {
2718
+ font-size: 1.125rem;
2719
+ }
2720
+ .ids .ids-button:hover,
2698
2721
  .ids-button:hover,
2722
+ .ids button.ids-button:hover {
2723
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2724
+ box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
2725
+ }
2726
+ .ids .ids-button:active, .ids .ids-button.ids-button--active,
2727
+ .ids-button:active,
2699
2728
  .ids-button.ids-button--active,
2700
- .ids button.ids-button:hover,
2729
+ .ids button.ids-button:active,
2701
2730
  .ids button.ids-button.ids-button--active {
2702
2731
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2703
2732
  box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
@@ -2705,14 +2734,8 @@ body.ids {
2705
2734
  .ids .ids-button:focus,
2706
2735
  .ids-button:focus,
2707
2736
  .ids button.ids-button:focus {
2708
- outline: var(--IDS-FOCUS__OUTLINE);
2709
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2710
- }
2711
- .ids .ids-button:active,
2712
- .ids-button:active,
2713
- .ids button.ids-button:active {
2714
2737
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2715
- box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
2738
+ border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
2716
2739
  outline: var(--IDS-FOCUS__OUTLINE);
2717
2740
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2718
2741
  }
@@ -2762,28 +2785,21 @@ body.ids {
2762
2785
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2763
2786
  color: var(--IDS-COLOR-NEUTRAL-100);
2764
2787
  border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2765
- outline: var(--IDS-FOCUS__OUTLINE);
2766
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2767
2788
  }
2768
- .ids .ids-button.ids-button--secondary:hover, .ids .ids-button.ids-button--secondary.ids-button--active,
2769
- .ids-button.ids-button--secondary:hover,
2789
+ .ids .ids-button.ids-button--secondary.ids-button--active, .ids .ids-button.ids-button--secondary:active,
2770
2790
  .ids-button.ids-button--secondary.ids-button--active,
2771
- .ids button.ids-button.ids-button--secondary:hover,
2772
- .ids button.ids-button.ids-button--secondary.ids-button--active {
2791
+ .ids-button.ids-button--secondary:active,
2792
+ .ids button.ids-button.ids-button--secondary.ids-button--active,
2793
+ .ids button.ids-button.ids-button--secondary:active {
2773
2794
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2774
2795
  color: var(--IDS-COLOR-NEUTRAL-100);
2775
2796
  }
2776
2797
  .ids .ids-button.ids-button--secondary:focus,
2777
2798
  .ids-button.ids-button--secondary:focus,
2778
2799
  .ids button.ids-button.ids-button--secondary:focus {
2779
- outline: var(--IDS-FOCUS__OUTLINE);
2780
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2781
- }
2782
- .ids .ids-button.ids-button--secondary:active,
2783
- .ids-button.ids-button--secondary:active,
2784
- .ids button.ids-button.ids-button--secondary:active {
2785
2800
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2786
2801
  color: var(--IDS-COLOR-NEUTRAL-100);
2802
+ border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
2787
2803
  outline: var(--IDS-FOCUS__OUTLINE);
2788
2804
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2789
2805
  }
@@ -2797,6 +2813,7 @@ body.ids {
2797
2813
  box-shadow: none;
2798
2814
  font-family: var(--IDS-FONT-FAMILY-HEADING);
2799
2815
  text-decoration: underline;
2816
+ text-underline-offset: 0.125rem;
2800
2817
  }
2801
2818
  .ids .ids-button.ids-button--tertiary.ids-button--s,
2802
2819
  .ids-button.ids-button--tertiary.ids-button--s,
@@ -2810,10 +2827,18 @@ body.ids {
2810
2827
  line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
2811
2828
  padding: var(--IDS-BUTTON--L__PADDING);
2812
2829
  }
2813
- .ids .ids-button.ids-button--tertiary:hover, .ids .ids-button.ids-button--tertiary.ids-button--active,
2830
+ .ids .ids-button.ids-button--tertiary:hover,
2814
2831
  .ids-button.ids-button--tertiary:hover,
2832
+ .ids button.ids-button.ids-button--tertiary:hover {
2833
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2834
+ color: var(--IDS-COLOR-NEUTRAL-100);
2835
+ border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
2836
+ border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2837
+ }
2838
+ .ids .ids-button.ids-button--tertiary:active, .ids .ids-button.ids-button--tertiary.ids-button--active,
2839
+ .ids-button.ids-button--tertiary:active,
2815
2840
  .ids-button.ids-button--tertiary.ids-button--active,
2816
- .ids button.ids-button.ids-button--tertiary:hover,
2841
+ .ids button.ids-button.ids-button--tertiary:active,
2817
2842
  .ids button.ids-button.ids-button--tertiary.ids-button--active {
2818
2843
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2819
2844
  color: var(--IDS-COLOR-NEUTRAL-100);
@@ -2823,12 +2848,6 @@ body.ids {
2823
2848
  .ids .ids-button.ids-button--tertiary:focus,
2824
2849
  .ids-button.ids-button--tertiary:focus,
2825
2850
  .ids button.ids-button.ids-button--tertiary:focus {
2826
- outline: var(--IDS-FOCUS__OUTLINE);
2827
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2828
- }
2829
- .ids .ids-button.ids-button--tertiary:active,
2830
- .ids-button.ids-button--tertiary:active,
2831
- .ids button.ids-button.ids-button--tertiary:active {
2832
2851
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2833
2852
  color: var(--IDS-COLOR-NEUTRAL-100);
2834
2853
  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
@@ -2846,11 +2865,6 @@ body.ids {
2846
2865
  color: var(--IDS-BUTTON--DISABLED__COLOR);
2847
2866
  text-decoration: none;
2848
2867
  }
2849
- .ids .ids-button [class^=ids-icon-],
2850
- .ids-button [class^=ids-icon-],
2851
- .ids button.ids-button [class^=ids-icon-] {
2852
- font-size: 1.125rem;
2853
- }
2854
2868
  .ids .ids-button.ids-button--icon, .ids .ids-button.ids-button--fab,
2855
2869
  .ids-button.ids-button--icon,
2856
2870
  .ids-button.ids-button--fab,
@@ -2858,7 +2872,7 @@ body.ids {
2858
2872
  .ids button.ids-button.ids-button--fab {
2859
2873
  width: 2.75rem;
2860
2874
  height: 2.75rem !important;
2861
- border-radius: 100%;
2875
+ border-radius: 100% !important;
2862
2876
  font-style: normal;
2863
2877
  font-weight: 400;
2864
2878
  line-height: 0 !important;
@@ -2900,10 +2914,16 @@ body.ids {
2900
2914
  .ids button.ids-button.ids-button--icon.ids-button--secondary {
2901
2915
  background-color: var(--IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR);
2902
2916
  }
2903
- .ids .ids-button.ids-button--icon:hover, .ids .ids-button.ids-button--icon.ids-button--active,
2917
+ .ids .ids-button.ids-button--icon:hover,
2904
2918
  .ids-button.ids-button--icon:hover,
2919
+ .ids button.ids-button.ids-button--icon:hover {
2920
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2921
+ color: var(--IDS-COLOR-NEUTRAL-100);
2922
+ }
2923
+ .ids .ids-button.ids-button--icon:active, .ids .ids-button.ids-button--icon.ids-button--active,
2924
+ .ids-button.ids-button--icon:active,
2905
2925
  .ids-button.ids-button--icon.ids-button--active,
2906
- .ids button.ids-button.ids-button--icon:hover,
2926
+ .ids button.ids-button.ids-button--icon:active,
2907
2927
  .ids button.ids-button.ids-button--icon.ids-button--active {
2908
2928
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2909
2929
  color: var(--IDS-COLOR-NEUTRAL-100);
@@ -2911,12 +2931,6 @@ body.ids {
2911
2931
  .ids .ids-button.ids-button--icon:focus,
2912
2932
  .ids-button.ids-button--icon:focus,
2913
2933
  .ids button.ids-button.ids-button--icon:focus {
2914
- outline: var(--IDS-FOCUS__OUTLINE);
2915
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2916
- }
2917
- .ids .ids-button.ids-button--icon:active,
2918
- .ids-button.ids-button--icon:active,
2919
- .ids button.ids-button.ids-button--icon:active {
2920
2934
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2921
2935
  color: var(--IDS-COLOR-NEUTRAL-100);
2922
2936
  outline: var(--IDS-FOCUS__OUTLINE);
@@ -2958,8 +2972,6 @@ body.ids {
2958
2972
  .ids button.ids-button.ids-button--block {
2959
2973
  display: flex;
2960
2974
  width: 100%;
2961
- align-items: center;
2962
- justify-content: center;
2963
2975
  }
2964
2976
  @media (max-width: 1024px) {
2965
2977
  .ids .ids-button.ids-button--m-block,
@@ -2967,8 +2979,6 @@ body.ids {
2967
2979
  .ids button.ids-button.ids-button--m-block {
2968
2980
  display: flex;
2969
2981
  width: 100%;
2970
- align-items: center;
2971
- justify-content: center;
2972
2982
  }
2973
2983
  }
2974
2984
  @media (max-width: 640px) {
@@ -2977,8 +2987,6 @@ body.ids {
2977
2987
  .ids button.ids-button.ids-button--s-block {
2978
2988
  display: flex;
2979
2989
  width: 100%;
2980
- align-items: center;
2981
- justify-content: center;
2982
2990
  }
2983
2991
  }
2984
2992
  .ids .ids-button.ids-button--disabled, .ids .ids-button[disabled],
@@ -3000,16 +3008,6 @@ body.ids {
3000
3008
  align-items: flex-start;
3001
3009
  gap: 0.5rem;
3002
3010
  margin-bottom: 0.25rem;
3003
- margin-right: 0.25rem;
3004
- }
3005
- .ids-radio .ids-label-tooltip-wrapper {
3006
- margin-bottom: -0.25rem;
3007
- }
3008
- .ids-radio .ids-label-tooltip-wrapper label {
3009
- display: inline;
3010
- top: -0.188rem;
3011
- position: relative;
3012
- margin-right: 0.25rem;
3013
3011
  }
3014
3012
  .ids-radio input,
3015
3013
  .ids-radio input[type=radio] {
@@ -3114,16 +3112,6 @@ body.ids {
3114
3112
  align-items: flex-start;
3115
3113
  gap: 0.5rem;
3116
3114
  margin-bottom: 0.25rem;
3117
- margin-right: 0.25rem;
3118
- }
3119
- .ids-checkbox .ids-label-tooltip-wrapper {
3120
- margin-bottom: -0.25rem;
3121
- }
3122
- .ids-checkbox .ids-label-tooltip-wrapper label {
3123
- display: inline;
3124
- top: -0.188rem;
3125
- position: relative;
3126
- margin-right: 0.25rem;
3127
3115
  }
3128
3116
  .ids-checkbox input[type=checkbox],
3129
3117
  .ids-checkbox input {
@@ -3197,8 +3185,9 @@ input:focus + .ids-checkbox input::before {
3197
3185
  .ids-checkbox input.ids-input--invalid:checked::after {
3198
3186
  color: var(--IDS-ICON--INVALID-COLOR);
3199
3187
  }
3200
- .ids-checkbox input[type=checkbox].ids-input--invalid::before,
3201
- .ids-checkbox input.ids-input--invalid::before {
3188
+ .ids-checkbox input[type=checkbox].ids-input--invalid::before, .ids-checkbox input[type=checkbox][aria-invalid=true]::before,
3189
+ .ids-checkbox input.ids-input--invalid::before,
3190
+ .ids-checkbox input[aria-invalid=true]::before {
3202
3191
  border: var(--IDS-FORM--INVALID__BORDER);
3203
3192
  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
3204
3193
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3207,8 +3196,9 @@ input:focus + .ids-checkbox input::before {
3207
3196
  .ids-checkbox.ids-checkbox--light input::before {
3208
3197
  background-color: var(--IDS-COLOR-NEUTRAL-100);
3209
3198
  }
3210
- .ids-checkbox.ids-checkbox--light input[type=checkbox].ids-input--invalid::before,
3211
- .ids-checkbox.ids-checkbox--light input.ids-input--invalid::before {
3199
+ .ids-checkbox.ids-checkbox--light input[type=checkbox].ids-input--invalid::before, .ids-checkbox.ids-checkbox--light input[type=checkbox][aria-invalid=true]::before,
3200
+ .ids-checkbox.ids-checkbox--light input.ids-input--invalid::before,
3201
+ .ids-checkbox.ids-checkbox--light input[aria-invalid=true]::before {
3212
3202
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3213
3203
  }
3214
3204
  .ids-checkbox.ids-checkbox--block {
@@ -3445,63 +3435,6 @@ input:focus + .ids-checkbox input::before {
3445
3435
  font-style: italic;
3446
3436
  }
3447
3437
 
3448
- input.ids-range {
3449
- appearance: none;
3450
- width: 100%;
3451
- height: 0.5rem;
3452
- background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
3453
- background-image: linear-gradient(var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR));
3454
- background-repeat: no-repeat;
3455
- border: 0.063rem;
3456
- cursor: pointer;
3457
- display: block;
3458
- padding: 0;
3459
- border-radius: 1rem;
3460
- margin: 0;
3461
- }
3462
- input.ids-range::-ms-track {
3463
- width: 100%;
3464
- cursor: pointer;
3465
- background: transparent;
3466
- border-color: transparent;
3467
- color: transparent;
3468
- }
3469
- input.ids-range::-webkit-slider-thumb {
3470
- -webkit-appearance: none;
3471
- border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
3472
- height: 1.5rem;
3473
- width: 1.5rem;
3474
- border-radius: 100%;
3475
- background: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
3476
- cursor: pointer;
3477
- }
3478
- input.ids-range::-ms-thumb {
3479
- border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
3480
- height: 1.375rem;
3481
- width: 1.5rem;
3482
- border-radius: 100%;
3483
- cursor: pointer;
3484
- }
3485
- input.ids-range:disabled {
3486
- cursor: default;
3487
- appearance: none;
3488
- width: 100%;
3489
- height: 0.5rem;
3490
- background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
3491
- background-image: linear-gradient(var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR));
3492
- background-repeat: no-repeat;
3493
- border: 0.063rem;
3494
- padding: 0;
3495
- border-radius: 1rem;
3496
- }
3497
- input.ids-range:disabled::-webkit-slider-thumb {
3498
- cursor: default;
3499
- background: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
3500
- }
3501
- input.ids-range:disabled::-ms-thumb {
3502
- cursor: default;
3503
- }
3504
-
3505
3438
  .ids-select {
3506
3439
  appearance: none !important;
3507
3440
  -webkit-appearance: none !important;
@@ -3549,7 +3482,7 @@ input.ids-range:disabled::-ms-thumb {
3549
3482
  .ids-select.ids-input--light.ids-input--invalid {
3550
3483
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3551
3484
  }
3552
- .ids-select.ids-input--invalid {
3485
+ .ids-select.ids-input--invalid, .ids-select[aria-invalid=true] {
3553
3486
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3554
3487
  border: var(--IDS-FORM--INVALID__BORDER);
3555
3488
  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
@@ -3557,7 +3490,7 @@ input.ids-range:disabled::-ms-thumb {
3557
3490
  .ids-select.ids-input--light {
3558
3491
  background-color: var(--IDS-COLOR-NEUTRAL-100);
3559
3492
  }
3560
- .ids-select.ids-input--light.ids-input--invalid {
3493
+ .ids-select.ids-input--light.ids-input--invalid, .ids-select.ids-input--light[aria-invalid=true] {
3561
3494
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3562
3495
  border: var(--IDS-FORM--INVALID__BORDER);
3563
3496
  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
@@ -3603,7 +3536,7 @@ input.ids-range:disabled::-ms-thumb {
3603
3536
  transform: translateY(-50%);
3604
3537
  right: var(--IDS-INPUT__ICON-RIGHT);
3605
3538
  }
3606
- .ids-select-wrapper:has(.ids-input--invalid)::after {
3539
+ .ids-select-wrapper:has(.ids-input--invalid)::after, .ids-select-wrapper:has([aria-invalid=true])::after {
3607
3540
  color: var(--IDS-ICON--INVALID-COLOR);
3608
3541
  }
3609
3542
  .ids-select-wrapper:has(select:disabled)::after, .ids-select-wrapper:has([aria-disabled=true])::after {
@@ -3789,16 +3722,6 @@ input.ids-time__input:disabled {
3789
3722
  align-items: flex-start;
3790
3723
  gap: 0.5rem;
3791
3724
  margin-bottom: 0.25rem;
3792
- margin-right: 0;
3793
- }
3794
- .ids-toggle .ids-label-tooltip-wrapper {
3795
- margin-bottom: -0.25rem;
3796
- }
3797
- .ids-toggle .ids-label-tooltip-wrapper label {
3798
- display: inline;
3799
- top: -0.188rem;
3800
- position: relative;
3801
- margin-right: 0;
3802
3725
  }
3803
3726
  .ids-toggle label {
3804
3727
  position: relative;
@@ -3822,6 +3745,7 @@ input.ids-time__input:disabled {
3822
3745
  border: 0.063rem solid transparent;
3823
3746
  border-radius: 6.25rem;
3824
3747
  appearance: none;
3748
+ flex-shrink: 0;
3825
3749
  }
3826
3750
  .ids-toggle input[type=checkbox]:before,
3827
3751
  .ids-toggle input:before {
@@ -3918,6 +3842,88 @@ input:focus + .ids-toggle input:before {
3918
3842
  }
3919
3843
  }
3920
3844
 
3845
+ .ids-range .ids-label {
3846
+ display: inline-block;
3847
+ margin-bottom: 0.75rem !important;
3848
+ }
3849
+
3850
+ .ids-range__input,
3851
+ input[type=range] {
3852
+ cursor: pointer;
3853
+ appearance: none;
3854
+ -webkit-appearance: none;
3855
+ box-sizing: border-box;
3856
+ display: block;
3857
+ padding: 0;
3858
+ margin: 0;
3859
+ width: 100%;
3860
+ height: 0.5rem;
3861
+ border: 0.0625rem solid var(--IDS-RANGE__BORDER-COLOR);
3862
+ border-radius: 1rem;
3863
+ background-size: 98% 100%;
3864
+ background-repeat: no-repeat;
3865
+ background-image: linear-gradient(var(--IDS-RANGE__FILL-BACKGROUND-COLOR), var(--IDS-RANGE__FILL-BACKGROUND-COLOR));
3866
+ touch-action: pan-x;
3867
+ -webkit-tap-highlight-color: transparent;
3868
+ margin-bottom: 0.75rem;
3869
+ }
3870
+ .ids-range__input::-webkit-slider-thumb,
3871
+ input[type=range]::-webkit-slider-thumb {
3872
+ -webkit-appearance: none;
3873
+ height: 1.5rem;
3874
+ width: 1.5rem;
3875
+ outline: 0.1875rem solid var(--IDS-COLOR-NEUTRAL-100);
3876
+ border-radius: 100%;
3877
+ background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
3878
+ cursor: pointer;
3879
+ position: relative;
3880
+ z-index: 1;
3881
+ }
3882
+ .ids-range__input::-moz-range-thumb,
3883
+ input[type=range]::-moz-range-thumb {
3884
+ -moz-appearance: none;
3885
+ height: 1.5rem;
3886
+ width: 1.5rem;
3887
+ outline: 0.1875rem solid var(--IDS-COLOR-NEUTRAL-100);
3888
+ border-radius: 100%;
3889
+ background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
3890
+ cursor: pointer;
3891
+ position: relative;
3892
+ z-index: 1;
3893
+ }
3894
+ .ids-range__input::-ms-thumb,
3895
+ input[type=range]::-ms-thumb {
3896
+ height: 1.5rem;
3897
+ width: 1.5rem;
3898
+ outline: 0.1875rem solid var(--IDS-COLOR-NEUTRAL-100);
3899
+ border-radius: 100%;
3900
+ background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
3901
+ cursor: pointer;
3902
+ position: relative;
3903
+ z-index: 1;
3904
+ }
3905
+ .ids-range__input:disabled,
3906
+ input[type=range]:disabled {
3907
+ cursor: default;
3908
+ border: 0.0625rem dashed var(--IDS-RANGE--DISABLED__BORDER-COLOR);
3909
+ background-image: linear-gradient(var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR), var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR));
3910
+ }
3911
+ .ids-range__input:disabled::-moz-range-thumb,
3912
+ input[type=range]:disabled::-moz-range-thumb {
3913
+ cursor: default;
3914
+ background: var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR);
3915
+ }
3916
+ .ids-range__input:disabled::-webkit-slider-thumb,
3917
+ input[type=range]:disabled::-webkit-slider-thumb {
3918
+ cursor: default;
3919
+ background: var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR);
3920
+ }
3921
+ .ids-range__input:disabled::-ms-thumb,
3922
+ input[type=range]:disabled::-ms-thumb {
3923
+ cursor: default;
3924
+ background: var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR);
3925
+ }
3926
+
3921
3927
  .ids-form-group__fieldset {
3922
3928
  border: none;
3923
3929
  margin: 0;
@@ -4093,7 +4099,7 @@ input:focus + .ids-toggle input:before {
4093
4099
  }
4094
4100
  }
4095
4101
  .ids .ids-heading-m .ids-anchor {
4096
- color: var(--IDS-ANCHOR__COLOR);
4102
+ color: var(--IDS-ANCHOR__COLOR) !important;
4097
4103
  text-decoration: none;
4098
4104
  text-underline-offset: 0.125rem;
4099
4105
  }
@@ -4126,7 +4132,7 @@ input:focus + .ids-toggle input:before {
4126
4132
  }
4127
4133
  }
4128
4134
  .ids .ids-heading-s .ids-anchor {
4129
- color: var(--IDS-ANCHOR__COLOR);
4135
+ color: var(--IDS-ANCHOR__COLOR) !important;
4130
4136
  text-decoration: none;
4131
4137
  text-underline-offset: 0.125rem;
4132
4138
  }
@@ -4152,7 +4158,7 @@ input:focus + .ids-toggle input:before {
4152
4158
  font-weight: var(--IDS-HEADING-XS__FONT-WEIGHT);
4153
4159
  }
4154
4160
  .ids .ids-heading-xs .ids-anchor {
4155
- color: var(--IDS-ANCHOR__COLOR);
4161
+ color: var(--IDS-ANCHOR__COLOR) !important;
4156
4162
  text-decoration: none;
4157
4163
  text-underline-offset: 0.125rem;
4158
4164
  }
@@ -4184,7 +4190,7 @@ input:focus + .ids-toggle input:before {
4184
4190
  }
4185
4191
  }
4186
4192
  .ids .ids-preamble .ids-anchor {
4187
- color: var(--IDS-ANCHOR__COLOR);
4193
+ color: var(--IDS-ANCHOR__COLOR) !important;
4188
4194
  text-decoration: none;
4189
4195
  text-underline-offset: 0.125rem;
4190
4196
  }
@@ -4208,7 +4214,7 @@ input:focus + .ids-toggle input:before {
4208
4214
  letter-spacing: 0;
4209
4215
  }
4210
4216
  .ids .ids-body .ids-anchor {
4211
- color: var(--IDS-ANCHOR__COLOR);
4217
+ color: var(--IDS-ANCHOR__COLOR) !important;
4212
4218
  text-decoration: none;
4213
4219
  text-underline-offset: 0.125rem;
4214
4220
  }
@@ -4236,7 +4242,7 @@ input:focus + .ids-toggle input:before {
4236
4242
  font-family: var(--IDS-FONT-FAMILY-BASE);
4237
4243
  }
4238
4244
  .ids .ids-small .ids-anchor {
4239
- color: var(--IDS-ANCHOR__COLOR);
4245
+ color: var(--IDS-ANCHOR__COLOR) !important;
4240
4246
  text-decoration: none;
4241
4247
  text-underline-offset: 0.125rem;
4242
4248
  }
@@ -4259,6 +4265,21 @@ input:focus + .ids-toggle input:before {
4259
4265
  font-weight: var(--IDS-PAGE-LIST__FONT-WEIGHT);
4260
4266
  letter-spacing: var(--IDS-PAGE-LIST__LETTER-SPACING);
4261
4267
  }
4268
+ .ids .ids-pagelist .ids-anchor {
4269
+ color: var(--IDS-ANCHOR__COLOR) !important;
4270
+ text-decoration: none;
4271
+ text-underline-offset: 0.125rem;
4272
+ }
4273
+ .ids .ids-pagelist .ids-anchor:visited {
4274
+ color: var(--IDS-ANCHOR__COLOR);
4275
+ }
4276
+ .ids .ids-pagelist .ids-anchor:link {
4277
+ text-decoration: underline;
4278
+ }
4279
+ .ids .ids-pagelist .ids-anchor:active, .ids .ids-pagelist .ids-anchor:hover {
4280
+ color: var(--IDS-ANCHOR__HOVER-COLOR);
4281
+ text-decoration: underline;
4282
+ }
4262
4283
  .ids ul.ids-bullet-list,
4263
4284
  .ids .ids-bullet-list {
4264
4285
  list-style: disc;
@@ -4358,6 +4379,342 @@ input:focus + .ids-toggle input:before {
4358
4379
  position: absolute;
4359
4380
  }
4360
4381
 
4382
+ .ids-icon-download-small:before {
4383
+ content: "\e99a";
4384
+ }
4385
+
4386
+ .ids-icon-copy-link:before {
4387
+ content: "\e99b";
4388
+ }
4389
+
4390
+ .ids-icon-activity:before {
4391
+ content: "\e948";
4392
+ }
4393
+
4394
+ .ids-icon-alarm:before {
4395
+ content: "\e949";
4396
+ }
4397
+
4398
+ .ids-icon-archive:before {
4399
+ content: "\e94a";
4400
+ }
4401
+
4402
+ .ids-icon-bookmark:before {
4403
+ content: "\e94b";
4404
+ }
4405
+
4406
+ .ids-icon-call-ongoing:before {
4407
+ content: "\e94c";
4408
+ }
4409
+
4410
+ .ids-icon-call:before {
4411
+ content: "\e94d";
4412
+ }
4413
+
4414
+ .ids-icon-camera-off:before {
4415
+ content: "\e94e";
4416
+ }
4417
+
4418
+ .ids-icon-camera-on:before {
4419
+ content: "\e94f";
4420
+ }
4421
+
4422
+ .ids-icon-camera-switch:before {
4423
+ content: "\e950";
4424
+ }
4425
+
4426
+ .ids-icon-chart-bar:before {
4427
+ content: "\e951";
4428
+ }
4429
+
4430
+ .ids-icon-chart-line:before {
4431
+ content: "\e952";
4432
+ }
4433
+
4434
+ .ids-icon-chat:before {
4435
+ content: "\e953";
4436
+ }
4437
+
4438
+ .ids-icon-clipboard-with-cross:before {
4439
+ content: "\e954";
4440
+ }
4441
+
4442
+ .ids-icon-clipboard-with-text:before {
4443
+ content: "\e955";
4444
+ }
4445
+
4446
+ .ids-icon-clipboard:before {
4447
+ content: "\e956";
4448
+ }
4449
+
4450
+ .ids-icon-copy-file:before {
4451
+ content: "\e957";
4452
+ }
4453
+
4454
+ .ids-icon-denied-small:before {
4455
+ content: "\e958";
4456
+ }
4457
+
4458
+ .ids-icon-denied:before {
4459
+ content: "\e959";
4460
+ }
4461
+
4462
+ .ids-icon-desktop:before {
4463
+ content: "\e95a";
4464
+ }
4465
+
4466
+ .ids-icon-doctors-bag:before {
4467
+ content: "\e95b";
4468
+ }
4469
+
4470
+ .ids-icon-document:before {
4471
+ content: "\e95c";
4472
+ }
4473
+
4474
+ .ids-icon-download:before {
4475
+ content: "\e95d";
4476
+ }
4477
+
4478
+ .ids-icon-e-mail-sent:before {
4479
+ content: "\e95e";
4480
+ }
4481
+
4482
+ .ids-icon-e-mail-unread:before {
4483
+ content: "\e95f";
4484
+ }
4485
+
4486
+ .ids-icon-e-mail:before {
4487
+ content: "\e960";
4488
+ }
4489
+
4490
+ .ids-icon-edit:before {
4491
+ content: "\e961";
4492
+ }
4493
+
4494
+ .ids-icon-error-filled:before {
4495
+ content: "\e962";
4496
+ }
4497
+
4498
+ .ids-icon-error:before {
4499
+ content: "\e963";
4500
+ }
4501
+
4502
+ .ids-icon-file-csv:before {
4503
+ content: "\e964";
4504
+ }
4505
+
4506
+ .ids-icon-file-excel:before {
4507
+ content: "\e965";
4508
+ }
4509
+
4510
+ .ids-icon-file-image:before {
4511
+ content: "\e966";
4512
+ }
4513
+
4514
+ .ids-icon-file-other:before {
4515
+ content: "\e967";
4516
+ }
4517
+
4518
+ .ids-icon-file-pdf:before {
4519
+ content: "\e968";
4520
+ }
4521
+
4522
+ .ids-icon-file-ppt:before {
4523
+ content: "\e969";
4524
+ }
4525
+
4526
+ .ids-icon-file-word:before {
4527
+ content: "\e96a";
4528
+ }
4529
+
4530
+ .ids-icon-find-care:before {
4531
+ content: "\e96b";
4532
+ }
4533
+
4534
+ .ids-icon-flag:before {
4535
+ content: "\e96c";
4536
+ }
4537
+
4538
+ .ids-icon-folder:before {
4539
+ content: "\e96d";
4540
+ }
4541
+
4542
+ .ids-icon-form-numbered-reoccurring:before {
4543
+ content: "\e96e";
4544
+ }
4545
+
4546
+ .ids-icon-form-numbered:before {
4547
+ content: "\e96f";
4548
+ }
4549
+
4550
+ .ids-icon-functions:before {
4551
+ content: "\e970";
4552
+ }
4553
+
4554
+ .ids-icon-headphones:before {
4555
+ content: "\e971";
4556
+ }
4557
+
4558
+ .ids-icon-hourglass-end:before {
4559
+ content: "\e972";
4560
+ }
4561
+
4562
+ .ids-icon-hourglass-start:before {
4563
+ content: "\e973";
4564
+ }
4565
+
4566
+ .ids-icon-hourglass:before {
4567
+ content: "\e974";
4568
+ }
4569
+
4570
+ .ids-icon-house:before {
4571
+ content: "\e975";
4572
+ }
4573
+
4574
+ .ids-icon-id-card-locked:before {
4575
+ content: "\e976";
4576
+ }
4577
+
4578
+ .ids-icon-id-card:before {
4579
+ content: "\e977";
4580
+ }
4581
+
4582
+ .ids-icon-image:before {
4583
+ content: "\e978";
4584
+ }
4585
+
4586
+ .ids-icon-inactivity:before {
4587
+ content: "\e979";
4588
+ }
4589
+
4590
+ .ids-icon-lightbulb:before {
4591
+ content: "\e97a";
4592
+ }
4593
+
4594
+ .ids-icon-list:before {
4595
+ content: "\e97b";
4596
+ }
4597
+
4598
+ .ids-icon-listen:before {
4599
+ content: "\e97c";
4600
+ }
4601
+
4602
+ .ids-icon-locked:before {
4603
+ content: "\e97d";
4604
+ }
4605
+
4606
+ .ids-icon-log-locked:before {
4607
+ content: "\e97e";
4608
+ }
4609
+
4610
+ .ids-icon-log:before {
4611
+ content: "\e97f";
4612
+ }
4613
+
4614
+ .ids-icon-mobile:before {
4615
+ content: "\e980";
4616
+ }
4617
+
4618
+ .ids-icon-moment-start:before {
4619
+ content: "\e981";
4620
+ }
4621
+
4622
+ .ids-icon-moment-stop:before {
4623
+ content: "\e982";
4624
+ }
4625
+
4626
+ .ids-icon-office-building:before {
4627
+ content: "\e983";
4628
+ }
4629
+
4630
+ .ids-icon-organization:before {
4631
+ content: "\e984";
4632
+ }
4633
+
4634
+ .ids-icon-prescription:before {
4635
+ content: "\e985";
4636
+ }
4637
+
4638
+ .ids-icon-print:before {
4639
+ content: "\e986";
4640
+ }
4641
+
4642
+ .ids-icon-settings:before {
4643
+ content: "\e987";
4644
+ }
4645
+
4646
+ .ids-icon-shield-locked-filled:before {
4647
+ content: "\e988";
4648
+ }
4649
+
4650
+ .ids-icon-shield-locked-outlined:before {
4651
+ content: "\e989";
4652
+ }
4653
+
4654
+ .ids-icon-social-facebook:before {
4655
+ content: "\e98a";
4656
+ }
4657
+
4658
+ .ids-icon-social-linkedin:before {
4659
+ content: "\e98b";
4660
+ }
4661
+
4662
+ .ids-icon-social-x:before {
4663
+ content: "\e98c";
4664
+ }
4665
+
4666
+ .ids-icon-switch-person:before {
4667
+ content: "\e98d";
4668
+ }
4669
+
4670
+ .ids-icon-toggle-card-view:before {
4671
+ content: "\e98e";
4672
+ }
4673
+
4674
+ .ids-icon-toggle-list-view:before {
4675
+ content: "\e98f";
4676
+ }
4677
+
4678
+ .ids-icon-trash-can:before {
4679
+ content: "\e990";
4680
+ }
4681
+
4682
+ .ids-icon-tube-analysis:before {
4683
+ content: "\e991";
4684
+ }
4685
+
4686
+ .ids-icon-tube-empty:before {
4687
+ content: "\e992";
4688
+ }
4689
+
4690
+ .ids-icon-tube-filled:before {
4691
+ content: "\e993";
4692
+ }
4693
+
4694
+ .ids-icon-unlocked:before {
4695
+ content: "\e994";
4696
+ }
4697
+
4698
+ .ids-icon-video-off:before {
4699
+ content: "\e995";
4700
+ }
4701
+
4702
+ .ids-icon-video-on:before {
4703
+ content: "\e996";
4704
+ }
4705
+
4706
+ .ids-icon-video-switch:before {
4707
+ content: "\e997";
4708
+ }
4709
+
4710
+ .ids-icon-visibility-off:before {
4711
+ content: "\e998";
4712
+ }
4713
+
4714
+ .ids-icon-visibility:before {
4715
+ content: "\e999";
4716
+ }
4717
+
4361
4718
  .ids-icon-arrow-link:before {
4362
4719
  content: "\e947";
4363
4720
  }
@@ -4671,25 +5028,17 @@ input:focus + .ids-toggle input:before {
4671
5028
  [class^=ids-icon-].ids-icon--text-start {
4672
5029
  margin-right: 0.5rem;
4673
5030
  position: relative;
4674
- bottom: -0.125rem;
5031
+ top: -0.0938rem;
5032
+ vertical-align: middle;
4675
5033
  flex-shrink: 0;
4676
5034
  }
4677
- [class^=ids-icon-].ids-icon--text-start:before {
4678
- top: 50%;
4679
- left: 50%;
4680
- transform: translate(-50%, -50%);
4681
- }
4682
5035
  [class^=ids-icon-].ids-icon--text-end {
4683
5036
  margin-left: 0.5rem;
4684
5037
  position: relative;
4685
- bottom: -0.125rem;
5038
+ top: -0.0938rem;
5039
+ vertical-align: middle;
4686
5040
  flex-shrink: 0;
4687
5041
  }
4688
- [class^=ids-icon-].ids-icon--text-end:before {
4689
- top: 50%;
4690
- left: 50%;
4691
- transform: translate(-50%, -50%);
4692
- }
4693
5042
  [class^=ids-icon-].ids-icon--s {
4694
5043
  width: 1rem;
4695
5044
  height: 1rem;
@@ -4880,7 +5229,6 @@ input[type=search]::-webkit-search-results-decoration {
4880
5229
  --IDS-FORM-LABEL--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
4881
5230
  /* Error message */
4882
5231
  --IDS-ERROR-MESSAGE__COLOR: var(--IDS-COLOR-ERROR-40);
4883
- --IDS-ERROR-MESSAGE__MARGIN-TOP: 0.8rem;
4884
5232
  --IDS-ERROR-MESSAGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4885
5233
  --IDS-ERROR-MESSAGE__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
4886
5234
  --IDS-ERROR-MESSAGE__BORDER: 0.063rem solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);
@@ -4947,12 +5295,13 @@ input[type=search]::-webkit-search-results-decoration {
4947
5295
  --IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
4948
5296
  --IDS-TOGGLE--DISABLED-CHECKED__KNOB-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="0.688rem" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="rgb(128,130,133)"></path></svg>');
4949
5297
  /* Range */
4950
- --IDS-RANGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
4951
- --IDS-RANGE__THUMB-BACKGROUND-COLOR: var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR);
4952
- --IDS-RANGE__TICK-COLOR: var(--IDS-COLOR-NEUTRAL-20);
5298
+ --IDS-RANGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
5299
+ --IDS-RANGE__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
5300
+ --IDS-RANGE__THUMB-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
5301
+ --IDS-RANGE__FILL-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4953
5302
  --IDS-RANGE__TICK-LINE-COLOR: var(--IDS-COLOR-NEUTRAL-50);
4954
- --IDS-RANGE__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4955
- --IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-50);
5303
+ --IDS-RANGE--DISABLED__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
5304
+ --IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-50);
4956
5305
  /**********************
4957
5306
  * COMPONENTS
4958
5307
  **********************/
@@ -5383,7 +5732,6 @@ ids-input input[type=search]::-webkit-search-results-decoration {
5383
5732
  }
5384
5733
 
5385
5734
  .ids-label {
5386
- display: inline-block;
5387
5735
  color: var(--IDS-FORM-LABEL__COLOR);
5388
5736
  font-family: var(--IDS-FORM-LABEL__FONT-FAMILY);
5389
5737
  font-size: var(--IDS-FORM-LABEL__FONT-SIZE);
@@ -5396,7 +5744,7 @@ ids-input input[type=search]::-webkit-search-results-decoration {
5396
5744
  margin-bottom: 0.25rem;
5397
5745
  }
5398
5746
  .ids-label.ids-label--clickable {
5399
- cursor: pointer;
5747
+ cursor: pointer !important;
5400
5748
  }
5401
5749
  .ids-label.ids-label--disabled {
5402
5750
  font-style: italic;
@@ -5407,21 +5755,22 @@ ids-input input[type=search]::-webkit-search-results-decoration {
5407
5755
  display: none;
5408
5756
  }
5409
5757
 
5410
- .ids-label-wrapper {
5758
+ .ids-label-tooltip-wrapper {
5411
5759
  display: inline-flex;
5412
5760
  align-items: flex-start;
5413
5761
  gap: 0.5rem;
5414
- margin-bottom: 0.25rem;
5415
- margin-right: 0.25rem;
5416
5762
  }
5417
- .ids-label-wrapper .ids-label-tooltip-wrapper {
5418
- margin-bottom: -0.25rem;
5763
+ .ids-label-tooltip-wrapper.ids-label-tooltip-wrapper--block {
5764
+ width: 100%;
5765
+ }
5766
+ .ids-label-tooltip-wrapper.ids-label-tooltip-wrapper--inline {
5767
+ display: inline;
5419
5768
  }
5420
- .ids-label-wrapper .ids-label-tooltip-wrapper label {
5769
+ .ids-label-tooltip-wrapper.ids-label-tooltip-wrapper--inline label {
5421
5770
  display: inline;
5422
- top: -0.188rem;
5771
+ margin-right: 0.5rem;
5423
5772
  position: relative;
5424
- margin-right: 0.25rem;
5773
+ top: -0.1875rem;
5425
5774
  }
5426
5775
 
5427
5776
  /* Thematic classes */