@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
@@ -2488,11 +2488,20 @@ body.ids {
2488
2488
  font-size: 0.875rem;
2489
2489
  }
2490
2490
  .ids-link.ids-link--small.ids-link--start-icon {
2491
- padding-left: 1.25rem;
2491
+ padding-left: 1.125rem;
2492
+ }
2493
+ .ids-link.ids-link--small.ids-link--start-icon:before {
2494
+ font-size: 0.875rem;
2492
2495
  }
2493
2496
  .ids-link.ids-link--small.ids-link--end-icon {
2494
2497
  padding-right: 1.125rem;
2495
2498
  }
2499
+ .ids-link.ids-link--small.ids-link--end-icon:before {
2500
+ font-size: 0.875rem;
2501
+ }
2502
+ .ids-link.ids-link--large {
2503
+ text-decoration: none !important;
2504
+ }
2496
2505
  .ids-link.ids-link--large.ids-link--start-icon, .ids-link.ids-link--large.ids-link--end-icon {
2497
2506
  padding-left: 1.75rem;
2498
2507
  }
@@ -2500,6 +2509,9 @@ body.ids {
2500
2509
  font-size: 1.25rem;
2501
2510
  top: 0.0625rem !important;
2502
2511
  }
2512
+ .ids-link.ids-link--large:hover {
2513
+ text-decoration: none !important;
2514
+ }
2503
2515
  .ids-link.ids-link--block {
2504
2516
  display: flex;
2505
2517
  flex-grow: 1;
@@ -2537,6 +2549,12 @@ body.ids {
2537
2549
  .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 {
2538
2550
  text-decoration: underline !important;
2539
2551
  }
2552
+ .ids-link.ids-link--no-underline {
2553
+ text-decoration: none !important;
2554
+ }
2555
+ .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 {
2556
+ text-decoration: none !important;
2557
+ }
2540
2558
  .ids-link.ids-link--active-icon {
2541
2559
  text-decoration: none !important;
2542
2560
  }
@@ -2721,10 +2739,21 @@ body.ids {
2721
2739
  -moz-user-select: none;
2722
2740
  -ms-user-select: none;
2723
2741
  }
2724
- .ids .ids-button:hover, .ids .ids-button.ids-button--active,
2742
+ .ids .ids-button [class*=" ids-icon-"],
2743
+ .ids-button [class*=" ids-icon-"],
2744
+ .ids button.ids-button [class*=" ids-icon-"] {
2745
+ font-size: 1.125rem;
2746
+ }
2747
+ .ids .ids-button:hover,
2725
2748
  .ids-button:hover,
2749
+ .ids button.ids-button:hover {
2750
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2751
+ box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
2752
+ }
2753
+ .ids .ids-button:active, .ids .ids-button.ids-button--active,
2754
+ .ids-button:active,
2726
2755
  .ids-button.ids-button--active,
2727
- .ids button.ids-button:hover,
2756
+ .ids button.ids-button:active,
2728
2757
  .ids button.ids-button.ids-button--active {
2729
2758
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2730
2759
  box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
@@ -2732,14 +2761,8 @@ body.ids {
2732
2761
  .ids .ids-button:focus,
2733
2762
  .ids-button:focus,
2734
2763
  .ids button.ids-button:focus {
2735
- outline: var(--IDS-FOCUS__OUTLINE);
2736
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2737
- }
2738
- .ids .ids-button:active,
2739
- .ids-button:active,
2740
- .ids button.ids-button:active {
2741
2764
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2742
- box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
2765
+ border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
2743
2766
  outline: var(--IDS-FOCUS__OUTLINE);
2744
2767
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2745
2768
  }
@@ -2789,28 +2812,21 @@ body.ids {
2789
2812
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2790
2813
  color: var(--IDS-COLOR-NEUTRAL-100);
2791
2814
  border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2792
- outline: var(--IDS-FOCUS__OUTLINE);
2793
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2794
2815
  }
2795
- .ids .ids-button.ids-button--secondary:hover, .ids .ids-button.ids-button--secondary.ids-button--active,
2796
- .ids-button.ids-button--secondary:hover,
2816
+ .ids .ids-button.ids-button--secondary.ids-button--active, .ids .ids-button.ids-button--secondary:active,
2797
2817
  .ids-button.ids-button--secondary.ids-button--active,
2798
- .ids button.ids-button.ids-button--secondary:hover,
2799
- .ids button.ids-button.ids-button--secondary.ids-button--active {
2818
+ .ids-button.ids-button--secondary:active,
2819
+ .ids button.ids-button.ids-button--secondary.ids-button--active,
2820
+ .ids button.ids-button.ids-button--secondary:active {
2800
2821
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2801
2822
  color: var(--IDS-COLOR-NEUTRAL-100);
2802
2823
  }
2803
2824
  .ids .ids-button.ids-button--secondary:focus,
2804
2825
  .ids-button.ids-button--secondary:focus,
2805
2826
  .ids button.ids-button.ids-button--secondary:focus {
2806
- outline: var(--IDS-FOCUS__OUTLINE);
2807
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2808
- }
2809
- .ids .ids-button.ids-button--secondary:active,
2810
- .ids-button.ids-button--secondary:active,
2811
- .ids button.ids-button.ids-button--secondary:active {
2812
2827
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2813
2828
  color: var(--IDS-COLOR-NEUTRAL-100);
2829
+ border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
2814
2830
  outline: var(--IDS-FOCUS__OUTLINE);
2815
2831
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2816
2832
  }
@@ -2824,6 +2840,7 @@ body.ids {
2824
2840
  box-shadow: none;
2825
2841
  font-family: var(--IDS-FONT-FAMILY-HEADING);
2826
2842
  text-decoration: underline;
2843
+ text-underline-offset: 0.125rem;
2827
2844
  }
2828
2845
  .ids .ids-button.ids-button--tertiary.ids-button--s,
2829
2846
  .ids-button.ids-button--tertiary.ids-button--s,
@@ -2837,10 +2854,18 @@ body.ids {
2837
2854
  line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
2838
2855
  padding: var(--IDS-BUTTON--L__PADDING);
2839
2856
  }
2840
- .ids .ids-button.ids-button--tertiary:hover, .ids .ids-button.ids-button--tertiary.ids-button--active,
2857
+ .ids .ids-button.ids-button--tertiary:hover,
2841
2858
  .ids-button.ids-button--tertiary:hover,
2859
+ .ids button.ids-button.ids-button--tertiary:hover {
2860
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2861
+ color: var(--IDS-COLOR-NEUTRAL-100);
2862
+ border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
2863
+ border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2864
+ }
2865
+ .ids .ids-button.ids-button--tertiary:active, .ids .ids-button.ids-button--tertiary.ids-button--active,
2866
+ .ids-button.ids-button--tertiary:active,
2842
2867
  .ids-button.ids-button--tertiary.ids-button--active,
2843
- .ids button.ids-button.ids-button--tertiary:hover,
2868
+ .ids button.ids-button.ids-button--tertiary:active,
2844
2869
  .ids button.ids-button.ids-button--tertiary.ids-button--active {
2845
2870
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2846
2871
  color: var(--IDS-COLOR-NEUTRAL-100);
@@ -2850,12 +2875,6 @@ body.ids {
2850
2875
  .ids .ids-button.ids-button--tertiary:focus,
2851
2876
  .ids-button.ids-button--tertiary:focus,
2852
2877
  .ids button.ids-button.ids-button--tertiary:focus {
2853
- outline: var(--IDS-FOCUS__OUTLINE);
2854
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2855
- }
2856
- .ids .ids-button.ids-button--tertiary:active,
2857
- .ids-button.ids-button--tertiary:active,
2858
- .ids button.ids-button.ids-button--tertiary:active {
2859
2878
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2860
2879
  color: var(--IDS-COLOR-NEUTRAL-100);
2861
2880
  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
@@ -2873,11 +2892,6 @@ body.ids {
2873
2892
  color: var(--IDS-BUTTON--DISABLED__COLOR);
2874
2893
  text-decoration: none;
2875
2894
  }
2876
- .ids .ids-button [class^=ids-icon-],
2877
- .ids-button [class^=ids-icon-],
2878
- .ids button.ids-button [class^=ids-icon-] {
2879
- font-size: 1.125rem;
2880
- }
2881
2895
  .ids .ids-button.ids-button--icon, .ids .ids-button.ids-button--fab,
2882
2896
  .ids-button.ids-button--icon,
2883
2897
  .ids-button.ids-button--fab,
@@ -2885,7 +2899,7 @@ body.ids {
2885
2899
  .ids button.ids-button.ids-button--fab {
2886
2900
  width: 2.75rem;
2887
2901
  height: 2.75rem !important;
2888
- border-radius: 100%;
2902
+ border-radius: 100% !important;
2889
2903
  font-style: normal;
2890
2904
  font-weight: 400;
2891
2905
  line-height: 0 !important;
@@ -2927,10 +2941,16 @@ body.ids {
2927
2941
  .ids button.ids-button.ids-button--icon.ids-button--secondary {
2928
2942
  background-color: var(--IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR);
2929
2943
  }
2930
- .ids .ids-button.ids-button--icon:hover, .ids .ids-button.ids-button--icon.ids-button--active,
2944
+ .ids .ids-button.ids-button--icon:hover,
2931
2945
  .ids-button.ids-button--icon:hover,
2946
+ .ids button.ids-button.ids-button--icon:hover {
2947
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2948
+ color: var(--IDS-COLOR-NEUTRAL-100);
2949
+ }
2950
+ .ids .ids-button.ids-button--icon:active, .ids .ids-button.ids-button--icon.ids-button--active,
2951
+ .ids-button.ids-button--icon:active,
2932
2952
  .ids-button.ids-button--icon.ids-button--active,
2933
- .ids button.ids-button.ids-button--icon:hover,
2953
+ .ids button.ids-button.ids-button--icon:active,
2934
2954
  .ids button.ids-button.ids-button--icon.ids-button--active {
2935
2955
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2936
2956
  color: var(--IDS-COLOR-NEUTRAL-100);
@@ -2938,12 +2958,6 @@ body.ids {
2938
2958
  .ids .ids-button.ids-button--icon:focus,
2939
2959
  .ids-button.ids-button--icon:focus,
2940
2960
  .ids button.ids-button.ids-button--icon:focus {
2941
- outline: var(--IDS-FOCUS__OUTLINE);
2942
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2943
- }
2944
- .ids .ids-button.ids-button--icon:active,
2945
- .ids-button.ids-button--icon:active,
2946
- .ids button.ids-button.ids-button--icon:active {
2947
2961
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2948
2962
  color: var(--IDS-COLOR-NEUTRAL-100);
2949
2963
  outline: var(--IDS-FOCUS__OUTLINE);
@@ -2985,8 +2999,6 @@ body.ids {
2985
2999
  .ids button.ids-button.ids-button--block {
2986
3000
  display: flex;
2987
3001
  width: 100%;
2988
- align-items: center;
2989
- justify-content: center;
2990
3002
  }
2991
3003
  @media (max-width: 1024px) {
2992
3004
  .ids .ids-button.ids-button--m-block,
@@ -2994,8 +3006,6 @@ body.ids {
2994
3006
  .ids button.ids-button.ids-button--m-block {
2995
3007
  display: flex;
2996
3008
  width: 100%;
2997
- align-items: center;
2998
- justify-content: center;
2999
3009
  }
3000
3010
  }
3001
3011
  @media (max-width: 640px) {
@@ -3004,8 +3014,6 @@ body.ids {
3004
3014
  .ids button.ids-button.ids-button--s-block {
3005
3015
  display: flex;
3006
3016
  width: 100%;
3007
- align-items: center;
3008
- justify-content: center;
3009
3017
  }
3010
3018
  }
3011
3019
  .ids .ids-button.ids-button--disabled, .ids .ids-button[disabled],
@@ -3027,16 +3035,6 @@ body.ids {
3027
3035
  align-items: flex-start;
3028
3036
  gap: 0.5rem;
3029
3037
  margin-bottom: 0.25rem;
3030
- margin-right: 0.25rem;
3031
- }
3032
- .ids-radio .ids-label-tooltip-wrapper {
3033
- margin-bottom: -0.25rem;
3034
- }
3035
- .ids-radio .ids-label-tooltip-wrapper label {
3036
- display: inline;
3037
- top: -0.188rem;
3038
- position: relative;
3039
- margin-right: 0.25rem;
3040
3038
  }
3041
3039
  .ids-radio input,
3042
3040
  .ids-radio input[type=radio] {
@@ -3141,16 +3139,6 @@ body.ids {
3141
3139
  align-items: flex-start;
3142
3140
  gap: 0.5rem;
3143
3141
  margin-bottom: 0.25rem;
3144
- margin-right: 0.25rem;
3145
- }
3146
- .ids-checkbox .ids-label-tooltip-wrapper {
3147
- margin-bottom: -0.25rem;
3148
- }
3149
- .ids-checkbox .ids-label-tooltip-wrapper label {
3150
- display: inline;
3151
- top: -0.188rem;
3152
- position: relative;
3153
- margin-right: 0.25rem;
3154
3142
  }
3155
3143
  .ids-checkbox input[type=checkbox],
3156
3144
  .ids-checkbox input {
@@ -3224,8 +3212,9 @@ input:focus + .ids-checkbox input::before {
3224
3212
  .ids-checkbox input.ids-input--invalid:checked::after {
3225
3213
  color: var(--IDS-ICON--INVALID-COLOR);
3226
3214
  }
3227
- .ids-checkbox input[type=checkbox].ids-input--invalid::before,
3228
- .ids-checkbox input.ids-input--invalid::before {
3215
+ .ids-checkbox input[type=checkbox].ids-input--invalid::before, .ids-checkbox input[type=checkbox][aria-invalid=true]::before,
3216
+ .ids-checkbox input.ids-input--invalid::before,
3217
+ .ids-checkbox input[aria-invalid=true]::before {
3229
3218
  border: var(--IDS-FORM--INVALID__BORDER);
3230
3219
  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
3231
3220
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3234,8 +3223,9 @@ input:focus + .ids-checkbox input::before {
3234
3223
  .ids-checkbox.ids-checkbox--light input::before {
3235
3224
  background-color: var(--IDS-COLOR-NEUTRAL-100);
3236
3225
  }
3237
- .ids-checkbox.ids-checkbox--light input[type=checkbox].ids-input--invalid::before,
3238
- .ids-checkbox.ids-checkbox--light input.ids-input--invalid::before {
3226
+ .ids-checkbox.ids-checkbox--light input[type=checkbox].ids-input--invalid::before, .ids-checkbox.ids-checkbox--light input[type=checkbox][aria-invalid=true]::before,
3227
+ .ids-checkbox.ids-checkbox--light input.ids-input--invalid::before,
3228
+ .ids-checkbox.ids-checkbox--light input[aria-invalid=true]::before {
3239
3229
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3240
3230
  }
3241
3231
  .ids-checkbox.ids-checkbox--block {
@@ -3472,63 +3462,6 @@ input:focus + .ids-checkbox input::before {
3472
3462
  font-style: italic;
3473
3463
  }
3474
3464
 
3475
- input.ids-range {
3476
- appearance: none;
3477
- width: 100%;
3478
- height: 0.5rem;
3479
- background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
3480
- background-image: linear-gradient(var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR));
3481
- background-repeat: no-repeat;
3482
- border: 0.063rem;
3483
- cursor: pointer;
3484
- display: block;
3485
- padding: 0;
3486
- border-radius: 1rem;
3487
- margin: 0;
3488
- }
3489
- input.ids-range::-ms-track {
3490
- width: 100%;
3491
- cursor: pointer;
3492
- background: transparent;
3493
- border-color: transparent;
3494
- color: transparent;
3495
- }
3496
- input.ids-range::-webkit-slider-thumb {
3497
- -webkit-appearance: none;
3498
- border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
3499
- height: 1.5rem;
3500
- width: 1.5rem;
3501
- border-radius: 100%;
3502
- background: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
3503
- cursor: pointer;
3504
- }
3505
- input.ids-range::-ms-thumb {
3506
- border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
3507
- height: 1.375rem;
3508
- width: 1.5rem;
3509
- border-radius: 100%;
3510
- cursor: pointer;
3511
- }
3512
- input.ids-range:disabled {
3513
- cursor: default;
3514
- appearance: none;
3515
- width: 100%;
3516
- height: 0.5rem;
3517
- background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
3518
- background-image: linear-gradient(var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR));
3519
- background-repeat: no-repeat;
3520
- border: 0.063rem;
3521
- padding: 0;
3522
- border-radius: 1rem;
3523
- }
3524
- input.ids-range:disabled::-webkit-slider-thumb {
3525
- cursor: default;
3526
- background: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
3527
- }
3528
- input.ids-range:disabled::-ms-thumb {
3529
- cursor: default;
3530
- }
3531
-
3532
3465
  .ids-select {
3533
3466
  appearance: none !important;
3534
3467
  -webkit-appearance: none !important;
@@ -3576,7 +3509,7 @@ input.ids-range:disabled::-ms-thumb {
3576
3509
  .ids-select.ids-input--light.ids-input--invalid {
3577
3510
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3578
3511
  }
3579
- .ids-select.ids-input--invalid {
3512
+ .ids-select.ids-input--invalid, .ids-select[aria-invalid=true] {
3580
3513
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3581
3514
  border: var(--IDS-FORM--INVALID__BORDER);
3582
3515
  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
@@ -3584,7 +3517,7 @@ input.ids-range:disabled::-ms-thumb {
3584
3517
  .ids-select.ids-input--light {
3585
3518
  background-color: var(--IDS-COLOR-NEUTRAL-100);
3586
3519
  }
3587
- .ids-select.ids-input--light.ids-input--invalid {
3520
+ .ids-select.ids-input--light.ids-input--invalid, .ids-select.ids-input--light[aria-invalid=true] {
3588
3521
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3589
3522
  border: var(--IDS-FORM--INVALID__BORDER);
3590
3523
  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
@@ -3630,7 +3563,7 @@ input.ids-range:disabled::-ms-thumb {
3630
3563
  transform: translateY(-50%);
3631
3564
  right: var(--IDS-INPUT__ICON-RIGHT);
3632
3565
  }
3633
- .ids-select-wrapper:has(.ids-input--invalid)::after {
3566
+ .ids-select-wrapper:has(.ids-input--invalid)::after, .ids-select-wrapper:has([aria-invalid=true])::after {
3634
3567
  color: var(--IDS-ICON--INVALID-COLOR);
3635
3568
  }
3636
3569
  .ids-select-wrapper:has(select:disabled)::after, .ids-select-wrapper:has([aria-disabled=true])::after {
@@ -3816,16 +3749,6 @@ input.ids-time__input:disabled {
3816
3749
  align-items: flex-start;
3817
3750
  gap: 0.5rem;
3818
3751
  margin-bottom: 0.25rem;
3819
- margin-right: 0;
3820
- }
3821
- .ids-toggle .ids-label-tooltip-wrapper {
3822
- margin-bottom: -0.25rem;
3823
- }
3824
- .ids-toggle .ids-label-tooltip-wrapper label {
3825
- display: inline;
3826
- top: -0.188rem;
3827
- position: relative;
3828
- margin-right: 0;
3829
3752
  }
3830
3753
  .ids-toggle label {
3831
3754
  position: relative;
@@ -3849,6 +3772,7 @@ input.ids-time__input:disabled {
3849
3772
  border: 0.063rem solid transparent;
3850
3773
  border-radius: 6.25rem;
3851
3774
  appearance: none;
3775
+ flex-shrink: 0;
3852
3776
  }
3853
3777
  .ids-toggle input[type=checkbox]:before,
3854
3778
  .ids-toggle input:before {
@@ -3945,6 +3869,88 @@ input:focus + .ids-toggle input:before {
3945
3869
  }
3946
3870
  }
3947
3871
 
3872
+ .ids-range .ids-label {
3873
+ display: inline-block;
3874
+ margin-bottom: 0.75rem !important;
3875
+ }
3876
+
3877
+ .ids-range__input,
3878
+ input[type=range] {
3879
+ cursor: pointer;
3880
+ appearance: none;
3881
+ -webkit-appearance: none;
3882
+ box-sizing: border-box;
3883
+ display: block;
3884
+ padding: 0;
3885
+ margin: 0;
3886
+ width: 100%;
3887
+ height: 0.5rem;
3888
+ border: 0.0625rem solid var(--IDS-RANGE__BORDER-COLOR);
3889
+ border-radius: 1rem;
3890
+ background-size: 98% 100%;
3891
+ background-repeat: no-repeat;
3892
+ background-image: linear-gradient(var(--IDS-RANGE__FILL-BACKGROUND-COLOR), var(--IDS-RANGE__FILL-BACKGROUND-COLOR));
3893
+ touch-action: pan-x;
3894
+ -webkit-tap-highlight-color: transparent;
3895
+ margin-bottom: 0.75rem;
3896
+ }
3897
+ .ids-range__input::-webkit-slider-thumb,
3898
+ input[type=range]::-webkit-slider-thumb {
3899
+ -webkit-appearance: none;
3900
+ height: 1.5rem;
3901
+ width: 1.5rem;
3902
+ outline: 0.1875rem solid var(--IDS-COLOR-NEUTRAL-100);
3903
+ border-radius: 100%;
3904
+ background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
3905
+ cursor: pointer;
3906
+ position: relative;
3907
+ z-index: 1;
3908
+ }
3909
+ .ids-range__input::-moz-range-thumb,
3910
+ input[type=range]::-moz-range-thumb {
3911
+ -moz-appearance: none;
3912
+ height: 1.5rem;
3913
+ width: 1.5rem;
3914
+ outline: 0.1875rem solid var(--IDS-COLOR-NEUTRAL-100);
3915
+ border-radius: 100%;
3916
+ background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
3917
+ cursor: pointer;
3918
+ position: relative;
3919
+ z-index: 1;
3920
+ }
3921
+ .ids-range__input::-ms-thumb,
3922
+ input[type=range]::-ms-thumb {
3923
+ height: 1.5rem;
3924
+ width: 1.5rem;
3925
+ outline: 0.1875rem solid var(--IDS-COLOR-NEUTRAL-100);
3926
+ border-radius: 100%;
3927
+ background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
3928
+ cursor: pointer;
3929
+ position: relative;
3930
+ z-index: 1;
3931
+ }
3932
+ .ids-range__input:disabled,
3933
+ input[type=range]:disabled {
3934
+ cursor: default;
3935
+ border: 0.0625rem dashed var(--IDS-RANGE--DISABLED__BORDER-COLOR);
3936
+ background-image: linear-gradient(var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR), var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR));
3937
+ }
3938
+ .ids-range__input:disabled::-moz-range-thumb,
3939
+ input[type=range]:disabled::-moz-range-thumb {
3940
+ cursor: default;
3941
+ background: var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR);
3942
+ }
3943
+ .ids-range__input:disabled::-webkit-slider-thumb,
3944
+ input[type=range]:disabled::-webkit-slider-thumb {
3945
+ cursor: default;
3946
+ background: var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR);
3947
+ }
3948
+ .ids-range__input:disabled::-ms-thumb,
3949
+ input[type=range]:disabled::-ms-thumb {
3950
+ cursor: default;
3951
+ background: var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR);
3952
+ }
3953
+
3948
3954
  .ids-form-group__fieldset {
3949
3955
  border: none;
3950
3956
  margin: 0;
@@ -4120,7 +4126,7 @@ input:focus + .ids-toggle input:before {
4120
4126
  }
4121
4127
  }
4122
4128
  .ids .ids-heading-m .ids-anchor {
4123
- color: var(--IDS-ANCHOR__COLOR);
4129
+ color: var(--IDS-ANCHOR__COLOR) !important;
4124
4130
  text-decoration: none;
4125
4131
  text-underline-offset: 0.125rem;
4126
4132
  }
@@ -4153,7 +4159,7 @@ input:focus + .ids-toggle input:before {
4153
4159
  }
4154
4160
  }
4155
4161
  .ids .ids-heading-s .ids-anchor {
4156
- color: var(--IDS-ANCHOR__COLOR);
4162
+ color: var(--IDS-ANCHOR__COLOR) !important;
4157
4163
  text-decoration: none;
4158
4164
  text-underline-offset: 0.125rem;
4159
4165
  }
@@ -4179,7 +4185,7 @@ input:focus + .ids-toggle input:before {
4179
4185
  font-weight: var(--IDS-HEADING-XS__FONT-WEIGHT);
4180
4186
  }
4181
4187
  .ids .ids-heading-xs .ids-anchor {
4182
- color: var(--IDS-ANCHOR__COLOR);
4188
+ color: var(--IDS-ANCHOR__COLOR) !important;
4183
4189
  text-decoration: none;
4184
4190
  text-underline-offset: 0.125rem;
4185
4191
  }
@@ -4211,7 +4217,7 @@ input:focus + .ids-toggle input:before {
4211
4217
  }
4212
4218
  }
4213
4219
  .ids .ids-preamble .ids-anchor {
4214
- color: var(--IDS-ANCHOR__COLOR);
4220
+ color: var(--IDS-ANCHOR__COLOR) !important;
4215
4221
  text-decoration: none;
4216
4222
  text-underline-offset: 0.125rem;
4217
4223
  }
@@ -4235,7 +4241,7 @@ input:focus + .ids-toggle input:before {
4235
4241
  letter-spacing: 0;
4236
4242
  }
4237
4243
  .ids .ids-body .ids-anchor {
4238
- color: var(--IDS-ANCHOR__COLOR);
4244
+ color: var(--IDS-ANCHOR__COLOR) !important;
4239
4245
  text-decoration: none;
4240
4246
  text-underline-offset: 0.125rem;
4241
4247
  }
@@ -4263,7 +4269,7 @@ input:focus + .ids-toggle input:before {
4263
4269
  font-family: var(--IDS-FONT-FAMILY-BASE);
4264
4270
  }
4265
4271
  .ids .ids-small .ids-anchor {
4266
- color: var(--IDS-ANCHOR__COLOR);
4272
+ color: var(--IDS-ANCHOR__COLOR) !important;
4267
4273
  text-decoration: none;
4268
4274
  text-underline-offset: 0.125rem;
4269
4275
  }
@@ -4286,6 +4292,21 @@ input:focus + .ids-toggle input:before {
4286
4292
  font-weight: var(--IDS-PAGE-LIST__FONT-WEIGHT);
4287
4293
  letter-spacing: var(--IDS-PAGE-LIST__LETTER-SPACING);
4288
4294
  }
4295
+ .ids .ids-pagelist .ids-anchor {
4296
+ color: var(--IDS-ANCHOR__COLOR) !important;
4297
+ text-decoration: none;
4298
+ text-underline-offset: 0.125rem;
4299
+ }
4300
+ .ids .ids-pagelist .ids-anchor:visited {
4301
+ color: var(--IDS-ANCHOR__COLOR);
4302
+ }
4303
+ .ids .ids-pagelist .ids-anchor:link {
4304
+ text-decoration: underline;
4305
+ }
4306
+ .ids .ids-pagelist .ids-anchor:active, .ids .ids-pagelist .ids-anchor:hover {
4307
+ color: var(--IDS-ANCHOR__HOVER-COLOR);
4308
+ text-decoration: underline;
4309
+ }
4289
4310
  .ids ul.ids-bullet-list,
4290
4311
  .ids .ids-bullet-list {
4291
4312
  list-style: disc;
@@ -4385,6 +4406,342 @@ input:focus + .ids-toggle input:before {
4385
4406
  position: absolute;
4386
4407
  }
4387
4408
 
4409
+ .ids-icon-download-small:before {
4410
+ content: "\e99a";
4411
+ }
4412
+
4413
+ .ids-icon-copy-link:before {
4414
+ content: "\e99b";
4415
+ }
4416
+
4417
+ .ids-icon-activity:before {
4418
+ content: "\e948";
4419
+ }
4420
+
4421
+ .ids-icon-alarm:before {
4422
+ content: "\e949";
4423
+ }
4424
+
4425
+ .ids-icon-archive:before {
4426
+ content: "\e94a";
4427
+ }
4428
+
4429
+ .ids-icon-bookmark:before {
4430
+ content: "\e94b";
4431
+ }
4432
+
4433
+ .ids-icon-call-ongoing:before {
4434
+ content: "\e94c";
4435
+ }
4436
+
4437
+ .ids-icon-call:before {
4438
+ content: "\e94d";
4439
+ }
4440
+
4441
+ .ids-icon-camera-off:before {
4442
+ content: "\e94e";
4443
+ }
4444
+
4445
+ .ids-icon-camera-on:before {
4446
+ content: "\e94f";
4447
+ }
4448
+
4449
+ .ids-icon-camera-switch:before {
4450
+ content: "\e950";
4451
+ }
4452
+
4453
+ .ids-icon-chart-bar:before {
4454
+ content: "\e951";
4455
+ }
4456
+
4457
+ .ids-icon-chart-line:before {
4458
+ content: "\e952";
4459
+ }
4460
+
4461
+ .ids-icon-chat:before {
4462
+ content: "\e953";
4463
+ }
4464
+
4465
+ .ids-icon-clipboard-with-cross:before {
4466
+ content: "\e954";
4467
+ }
4468
+
4469
+ .ids-icon-clipboard-with-text:before {
4470
+ content: "\e955";
4471
+ }
4472
+
4473
+ .ids-icon-clipboard:before {
4474
+ content: "\e956";
4475
+ }
4476
+
4477
+ .ids-icon-copy-file:before {
4478
+ content: "\e957";
4479
+ }
4480
+
4481
+ .ids-icon-denied-small:before {
4482
+ content: "\e958";
4483
+ }
4484
+
4485
+ .ids-icon-denied:before {
4486
+ content: "\e959";
4487
+ }
4488
+
4489
+ .ids-icon-desktop:before {
4490
+ content: "\e95a";
4491
+ }
4492
+
4493
+ .ids-icon-doctors-bag:before {
4494
+ content: "\e95b";
4495
+ }
4496
+
4497
+ .ids-icon-document:before {
4498
+ content: "\e95c";
4499
+ }
4500
+
4501
+ .ids-icon-download:before {
4502
+ content: "\e95d";
4503
+ }
4504
+
4505
+ .ids-icon-e-mail-sent:before {
4506
+ content: "\e95e";
4507
+ }
4508
+
4509
+ .ids-icon-e-mail-unread:before {
4510
+ content: "\e95f";
4511
+ }
4512
+
4513
+ .ids-icon-e-mail:before {
4514
+ content: "\e960";
4515
+ }
4516
+
4517
+ .ids-icon-edit:before {
4518
+ content: "\e961";
4519
+ }
4520
+
4521
+ .ids-icon-error-filled:before {
4522
+ content: "\e962";
4523
+ }
4524
+
4525
+ .ids-icon-error:before {
4526
+ content: "\e963";
4527
+ }
4528
+
4529
+ .ids-icon-file-csv:before {
4530
+ content: "\e964";
4531
+ }
4532
+
4533
+ .ids-icon-file-excel:before {
4534
+ content: "\e965";
4535
+ }
4536
+
4537
+ .ids-icon-file-image:before {
4538
+ content: "\e966";
4539
+ }
4540
+
4541
+ .ids-icon-file-other:before {
4542
+ content: "\e967";
4543
+ }
4544
+
4545
+ .ids-icon-file-pdf:before {
4546
+ content: "\e968";
4547
+ }
4548
+
4549
+ .ids-icon-file-ppt:before {
4550
+ content: "\e969";
4551
+ }
4552
+
4553
+ .ids-icon-file-word:before {
4554
+ content: "\e96a";
4555
+ }
4556
+
4557
+ .ids-icon-find-care:before {
4558
+ content: "\e96b";
4559
+ }
4560
+
4561
+ .ids-icon-flag:before {
4562
+ content: "\e96c";
4563
+ }
4564
+
4565
+ .ids-icon-folder:before {
4566
+ content: "\e96d";
4567
+ }
4568
+
4569
+ .ids-icon-form-numbered-reoccurring:before {
4570
+ content: "\e96e";
4571
+ }
4572
+
4573
+ .ids-icon-form-numbered:before {
4574
+ content: "\e96f";
4575
+ }
4576
+
4577
+ .ids-icon-functions:before {
4578
+ content: "\e970";
4579
+ }
4580
+
4581
+ .ids-icon-headphones:before {
4582
+ content: "\e971";
4583
+ }
4584
+
4585
+ .ids-icon-hourglass-end:before {
4586
+ content: "\e972";
4587
+ }
4588
+
4589
+ .ids-icon-hourglass-start:before {
4590
+ content: "\e973";
4591
+ }
4592
+
4593
+ .ids-icon-hourglass:before {
4594
+ content: "\e974";
4595
+ }
4596
+
4597
+ .ids-icon-house:before {
4598
+ content: "\e975";
4599
+ }
4600
+
4601
+ .ids-icon-id-card-locked:before {
4602
+ content: "\e976";
4603
+ }
4604
+
4605
+ .ids-icon-id-card:before {
4606
+ content: "\e977";
4607
+ }
4608
+
4609
+ .ids-icon-image:before {
4610
+ content: "\e978";
4611
+ }
4612
+
4613
+ .ids-icon-inactivity:before {
4614
+ content: "\e979";
4615
+ }
4616
+
4617
+ .ids-icon-lightbulb:before {
4618
+ content: "\e97a";
4619
+ }
4620
+
4621
+ .ids-icon-list:before {
4622
+ content: "\e97b";
4623
+ }
4624
+
4625
+ .ids-icon-listen:before {
4626
+ content: "\e97c";
4627
+ }
4628
+
4629
+ .ids-icon-locked:before {
4630
+ content: "\e97d";
4631
+ }
4632
+
4633
+ .ids-icon-log-locked:before {
4634
+ content: "\e97e";
4635
+ }
4636
+
4637
+ .ids-icon-log:before {
4638
+ content: "\e97f";
4639
+ }
4640
+
4641
+ .ids-icon-mobile:before {
4642
+ content: "\e980";
4643
+ }
4644
+
4645
+ .ids-icon-moment-start:before {
4646
+ content: "\e981";
4647
+ }
4648
+
4649
+ .ids-icon-moment-stop:before {
4650
+ content: "\e982";
4651
+ }
4652
+
4653
+ .ids-icon-office-building:before {
4654
+ content: "\e983";
4655
+ }
4656
+
4657
+ .ids-icon-organization:before {
4658
+ content: "\e984";
4659
+ }
4660
+
4661
+ .ids-icon-prescription:before {
4662
+ content: "\e985";
4663
+ }
4664
+
4665
+ .ids-icon-print:before {
4666
+ content: "\e986";
4667
+ }
4668
+
4669
+ .ids-icon-settings:before {
4670
+ content: "\e987";
4671
+ }
4672
+
4673
+ .ids-icon-shield-locked-filled:before {
4674
+ content: "\e988";
4675
+ }
4676
+
4677
+ .ids-icon-shield-locked-outlined:before {
4678
+ content: "\e989";
4679
+ }
4680
+
4681
+ .ids-icon-social-facebook:before {
4682
+ content: "\e98a";
4683
+ }
4684
+
4685
+ .ids-icon-social-linkedin:before {
4686
+ content: "\e98b";
4687
+ }
4688
+
4689
+ .ids-icon-social-x:before {
4690
+ content: "\e98c";
4691
+ }
4692
+
4693
+ .ids-icon-switch-person:before {
4694
+ content: "\e98d";
4695
+ }
4696
+
4697
+ .ids-icon-toggle-card-view:before {
4698
+ content: "\e98e";
4699
+ }
4700
+
4701
+ .ids-icon-toggle-list-view:before {
4702
+ content: "\e98f";
4703
+ }
4704
+
4705
+ .ids-icon-trash-can:before {
4706
+ content: "\e990";
4707
+ }
4708
+
4709
+ .ids-icon-tube-analysis:before {
4710
+ content: "\e991";
4711
+ }
4712
+
4713
+ .ids-icon-tube-empty:before {
4714
+ content: "\e992";
4715
+ }
4716
+
4717
+ .ids-icon-tube-filled:before {
4718
+ content: "\e993";
4719
+ }
4720
+
4721
+ .ids-icon-unlocked:before {
4722
+ content: "\e994";
4723
+ }
4724
+
4725
+ .ids-icon-video-off:before {
4726
+ content: "\e995";
4727
+ }
4728
+
4729
+ .ids-icon-video-on:before {
4730
+ content: "\e996";
4731
+ }
4732
+
4733
+ .ids-icon-video-switch:before {
4734
+ content: "\e997";
4735
+ }
4736
+
4737
+ .ids-icon-visibility-off:before {
4738
+ content: "\e998";
4739
+ }
4740
+
4741
+ .ids-icon-visibility:before {
4742
+ content: "\e999";
4743
+ }
4744
+
4388
4745
  .ids-icon-arrow-link:before {
4389
4746
  content: "\e947";
4390
4747
  }
@@ -4698,25 +5055,17 @@ input:focus + .ids-toggle input:before {
4698
5055
  [class^=ids-icon-].ids-icon--text-start {
4699
5056
  margin-right: 0.5rem;
4700
5057
  position: relative;
4701
- bottom: -0.125rem;
5058
+ top: -0.0938rem;
5059
+ vertical-align: middle;
4702
5060
  flex-shrink: 0;
4703
5061
  }
4704
- [class^=ids-icon-].ids-icon--text-start:before {
4705
- top: 50%;
4706
- left: 50%;
4707
- transform: translate(-50%, -50%);
4708
- }
4709
5062
  [class^=ids-icon-].ids-icon--text-end {
4710
5063
  margin-left: 0.5rem;
4711
5064
  position: relative;
4712
- bottom: -0.125rem;
5065
+ top: -0.0938rem;
5066
+ vertical-align: middle;
4713
5067
  flex-shrink: 0;
4714
5068
  }
4715
- [class^=ids-icon-].ids-icon--text-end:before {
4716
- top: 50%;
4717
- left: 50%;
4718
- transform: translate(-50%, -50%);
4719
- }
4720
5069
  [class^=ids-icon-].ids-icon--s {
4721
5070
  width: 1rem;
4722
5071
  height: 1rem;
@@ -4910,7 +5259,6 @@ input[type=search]::-webkit-search-results-decoration {
4910
5259
  --IDS-FORM-INERA__BORDER-RADIUS: 0.188rem;
4911
5260
  /* Error message */
4912
5261
  --IDS-ERROR-MESSAGE__COLOR: var(--IDS-COLOR-ERROR-40);
4913
- --IDS-ERROR-MESSAGE__MARGIN-TOP: 0.8rem;
4914
5262
  --IDS-ERROR-MESSAGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4915
5263
  --IDS-ERROR-MESSAGE__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
4916
5264
  --IDS-ERROR-MESSAGE__BORDER: 0.063rem solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);
@@ -4977,12 +5325,13 @@ input[type=search]::-webkit-search-results-decoration {
4977
5325
  --IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
4978
5326
  --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>');
4979
5327
  /* Range */
4980
- --IDS-RANGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
5328
+ --IDS-RANGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
5329
+ --IDS-RANGE__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
4981
5330
  --IDS-RANGE__THUMB-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4982
- --IDS-RANGE__TICK-COLOR: var(--IDS-COLOR-NEUTRAL-20);
5331
+ --IDS-RANGE__FILL-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4983
5332
  --IDS-RANGE__TICK-LINE-COLOR: var(--IDS-COLOR-NEUTRAL-20);
4984
- --IDS-RANGE__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
4985
- --IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
5333
+ --IDS-RANGE--DISABLED__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
5334
+ --IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
4986
5335
  /**********************
4987
5336
  * COMPONENTS
4988
5337
  **********************/
@@ -5410,7 +5759,6 @@ ids-input input[type=search]::-webkit-search-results-decoration {
5410
5759
  }
5411
5760
 
5412
5761
  .ids-label {
5413
- display: inline-block;
5414
5762
  color: var(--IDS-FORM-LABEL__COLOR);
5415
5763
  font-family: var(--IDS-FORM-LABEL__FONT-FAMILY);
5416
5764
  font-size: var(--IDS-FORM-LABEL__FONT-SIZE);
@@ -5423,7 +5771,7 @@ ids-input input[type=search]::-webkit-search-results-decoration {
5423
5771
  margin-bottom: 0.25rem;
5424
5772
  }
5425
5773
  .ids-label.ids-label--clickable {
5426
- cursor: pointer;
5774
+ cursor: pointer !important;
5427
5775
  }
5428
5776
  .ids-label.ids-label--disabled {
5429
5777
  font-style: italic;
@@ -5434,21 +5782,22 @@ ids-input input[type=search]::-webkit-search-results-decoration {
5434
5782
  display: none;
5435
5783
  }
5436
5784
 
5437
- .ids-label-wrapper {
5785
+ .ids-label-tooltip-wrapper {
5438
5786
  display: inline-flex;
5439
5787
  align-items: flex-start;
5440
5788
  gap: 0.5rem;
5441
- margin-bottom: 0.25rem;
5442
- margin-right: 0.25rem;
5443
5789
  }
5444
- .ids-label-wrapper .ids-label-tooltip-wrapper {
5445
- margin-bottom: -0.25rem;
5790
+ .ids-label-tooltip-wrapper.ids-label-tooltip-wrapper--block {
5791
+ width: 100%;
5792
+ }
5793
+ .ids-label-tooltip-wrapper.ids-label-tooltip-wrapper--inline {
5794
+ display: inline;
5446
5795
  }
5447
- .ids-label-wrapper .ids-label-tooltip-wrapper label {
5796
+ .ids-label-tooltip-wrapper.ids-label-tooltip-wrapper--inline label {
5448
5797
  display: inline;
5449
- top: -0.188rem;
5798
+ margin-right: 0.5rem;
5450
5799
  position: relative;
5451
- margin-right: 0.25rem;
5800
+ top: -0.1875rem;
5452
5801
  }
5453
5802
 
5454
5803
  .ids-show-inera {