@inera/ids-design 6.0.3 → 6.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/components/box-link/box-link-lit.js +1 -1
  2. package/components/box-link/box-link.css +1 -0
  3. package/components/dialog/dialog-lit.js +1 -1
  4. package/components/dialog/dialog.css +2 -0
  5. package/components/dropdown/dropdown-lit.js +1 -1
  6. package/components/dropdown/dropdown.css +0 -1
  7. package/components/form/error-message/error-message-lit.js +1 -1
  8. package/components/form/error-message/error-message.css +2 -1
  9. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  10. package/components/form/select-multiple/select-multiple.css +35 -15
  11. package/components/header-1177/composite-header-1177.css +5 -5
  12. package/components/header-1177/header-1177-lit.js +1 -1
  13. package/components/header-1177/header-1177.css +5 -5
  14. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  15. package/components/mobile-menu/mobile-menu.css +39 -17
  16. package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
  17. package/components/pagination/list-pagination/list-pagination.css +8 -8
  18. package/components/popover/popover-lit.js +1 -1
  19. package/components/popover/popover.css +1 -0
  20. package/components/progressbar/progressbar-lit.js +1 -1
  21. package/components/progressbar/progressbar.css +7 -1
  22. package/components/side-menu/side-menu-lit.js +1 -1
  23. package/components/side-menu/side-menu.css +4 -2
  24. package/components/side-panel/side-panel-lit.js +1 -1
  25. package/components/side-panel/side-panel.css +0 -13
  26. package/components/stepper/stepper-lit.js +1 -1
  27. package/components/stepper/stepper.css +21 -9
  28. package/components/tabs/tab-lit.js +1 -1
  29. package/components/tabs/tab.css +10 -5
  30. package/components/tabs/tabs-lit.js +1 -1
  31. package/global/global.css +395 -84
  32. package/global/icons/font/Inera-Design-Icons.eot +0 -0
  33. package/global/icons/font/Inera-Design-Icons.svg +171 -3
  34. package/global/icons/font/Inera-Design-Icons.ttf +0 -0
  35. package/global/icons/font/Inera-Design-Icons.woff +0 -0
  36. package/package.json +1 -1
  37. package/themes/1177/1177.css +405 -95
  38. package/themes/1177-pro/1177-pro.css +405 -95
  39. package/themes/inera/inera.css +405 -95
  40. package/themes/inera-admin/inera-admin.css +405 -95
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "type": "module",
3
3
  "name": "@inera/ids-design",
4
- "version": "6.0.3",
4
+ "version": "6.1.0",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -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,16 @@ 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:hover,
2698
2716
  .ids-button:hover,
2717
+ .ids button.ids-button:hover {
2718
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2719
+ box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
2720
+ }
2721
+ .ids .ids-button:active, .ids .ids-button.ids-button--active,
2722
+ .ids-button:active,
2699
2723
  .ids-button.ids-button--active,
2700
- .ids button.ids-button:hover,
2724
+ .ids button.ids-button:active,
2701
2725
  .ids button.ids-button.ids-button--active {
2702
2726
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2703
2727
  box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
@@ -2708,14 +2732,6 @@ body.ids {
2708
2732
  outline: var(--IDS-FOCUS__OUTLINE);
2709
2733
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2710
2734
  }
2711
- .ids .ids-button:active,
2712
- .ids-button:active,
2713
- .ids button.ids-button:active {
2714
- background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2715
- box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
2716
- outline: var(--IDS-FOCUS__OUTLINE);
2717
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2718
- }
2719
2735
  .ids .ids-button.ids-button--s,
2720
2736
  .ids-button.ids-button--s,
2721
2737
  .ids button.ids-button.ids-button--s {
@@ -2762,14 +2778,12 @@ body.ids {
2762
2778
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2763
2779
  color: var(--IDS-COLOR-NEUTRAL-100);
2764
2780
  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
2781
  }
2768
- .ids .ids-button.ids-button--secondary:hover, .ids .ids-button.ids-button--secondary.ids-button--active,
2769
- .ids-button.ids-button--secondary:hover,
2782
+ .ids .ids-button.ids-button--secondary.ids-button--active, .ids .ids-button.ids-button--secondary:active,
2770
2783
  .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 {
2784
+ .ids-button.ids-button--secondary:active,
2785
+ .ids button.ids-button.ids-button--secondary.ids-button--active,
2786
+ .ids button.ids-button.ids-button--secondary:active {
2773
2787
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2774
2788
  color: var(--IDS-COLOR-NEUTRAL-100);
2775
2789
  }
@@ -2779,14 +2793,6 @@ body.ids {
2779
2793
  outline: var(--IDS-FOCUS__OUTLINE);
2780
2794
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2781
2795
  }
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
- background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2786
- color: var(--IDS-COLOR-NEUTRAL-100);
2787
- outline: var(--IDS-FOCUS__OUTLINE);
2788
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2789
- }
2790
2796
  .ids .ids-button.ids-button--tertiary,
2791
2797
  .ids-button.ids-button--tertiary,
2792
2798
  .ids button.ids-button.ids-button--tertiary {
@@ -2810,29 +2816,27 @@ body.ids {
2810
2816
  line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
2811
2817
  padding: var(--IDS-BUTTON--L__PADDING);
2812
2818
  }
2813
- .ids .ids-button.ids-button--tertiary:hover, .ids .ids-button.ids-button--tertiary.ids-button--active,
2819
+ .ids .ids-button.ids-button--tertiary:hover,
2814
2820
  .ids-button.ids-button--tertiary:hover,
2815
- .ids-button.ids-button--tertiary.ids-button--active,
2816
- .ids button.ids-button.ids-button--tertiary:hover,
2817
- .ids button.ids-button.ids-button--tertiary.ids-button--active {
2821
+ .ids button.ids-button.ids-button--tertiary:hover {
2818
2822
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2819
2823
  color: var(--IDS-COLOR-NEUTRAL-100);
2820
2824
  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
2821
2825
  border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2822
2826
  }
2823
- .ids .ids-button.ids-button--tertiary:focus,
2824
- .ids-button.ids-button--tertiary:focus,
2825
- .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,
2827
+ .ids .ids-button.ids-button--tertiary:active, .ids .ids-button.ids-button--tertiary.ids-button--active,
2830
2828
  .ids-button.ids-button--tertiary:active,
2831
- .ids button.ids-button.ids-button--tertiary:active {
2829
+ .ids-button.ids-button--tertiary.ids-button--active,
2830
+ .ids button.ids-button.ids-button--tertiary:active,
2831
+ .ids button.ids-button.ids-button--tertiary.ids-button--active {
2832
2832
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2833
2833
  color: var(--IDS-COLOR-NEUTRAL-100);
2834
2834
  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
2835
2835
  border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2836
+ }
2837
+ .ids .ids-button.ids-button--tertiary:focus,
2838
+ .ids-button.ids-button--tertiary:focus,
2839
+ .ids button.ids-button.ids-button--tertiary:focus {
2836
2840
  outline: var(--IDS-FOCUS__OUTLINE);
2837
2841
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2838
2842
  }
@@ -2900,10 +2904,16 @@ body.ids {
2900
2904
  .ids button.ids-button.ids-button--icon.ids-button--secondary {
2901
2905
  background-color: var(--IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR);
2902
2906
  }
2903
- .ids .ids-button.ids-button--icon:hover, .ids .ids-button.ids-button--icon.ids-button--active,
2907
+ .ids .ids-button.ids-button--icon:hover,
2904
2908
  .ids-button.ids-button--icon:hover,
2909
+ .ids button.ids-button.ids-button--icon:hover {
2910
+ background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2911
+ color: var(--IDS-COLOR-NEUTRAL-100);
2912
+ }
2913
+ .ids .ids-button.ids-button--icon:active, .ids .ids-button.ids-button--icon.ids-button--active,
2914
+ .ids-button.ids-button--icon:active,
2905
2915
  .ids-button.ids-button--icon.ids-button--active,
2906
- .ids button.ids-button.ids-button--icon:hover,
2916
+ .ids button.ids-button.ids-button--icon:active,
2907
2917
  .ids button.ids-button.ids-button--icon.ids-button--active {
2908
2918
  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2909
2919
  color: var(--IDS-COLOR-NEUTRAL-100);
@@ -2914,14 +2924,6 @@ body.ids {
2914
2924
  outline: var(--IDS-FOCUS__OUTLINE);
2915
2925
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2916
2926
  }
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
- background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
2921
- color: var(--IDS-COLOR-NEUTRAL-100);
2922
- outline: var(--IDS-FOCUS__OUTLINE);
2923
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2924
- }
2925
2927
  .ids .ids-button.ids-button--submit,
2926
2928
  .ids-button.ids-button--submit,
2927
2929
  .ids button.ids-button.ids-button--submit {
@@ -3000,16 +3002,6 @@ body.ids {
3000
3002
  align-items: flex-start;
3001
3003
  gap: 0.5rem;
3002
3004
  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
3005
  }
3014
3006
  .ids-radio input,
3015
3007
  .ids-radio input[type=radio] {
@@ -3114,16 +3106,6 @@ body.ids {
3114
3106
  align-items: flex-start;
3115
3107
  gap: 0.5rem;
3116
3108
  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
3109
  }
3128
3110
  .ids-checkbox input[type=checkbox],
3129
3111
  .ids-checkbox input {
@@ -3197,8 +3179,9 @@ input:focus + .ids-checkbox input::before {
3197
3179
  .ids-checkbox input.ids-input--invalid:checked::after {
3198
3180
  color: var(--IDS-ICON--INVALID-COLOR);
3199
3181
  }
3200
- .ids-checkbox input[type=checkbox].ids-input--invalid::before,
3201
- .ids-checkbox input.ids-input--invalid::before {
3182
+ .ids-checkbox input[type=checkbox].ids-input--invalid::before, .ids-checkbox input[type=checkbox][aria-invalid=true]::before,
3183
+ .ids-checkbox input.ids-input--invalid::before,
3184
+ .ids-checkbox input[aria-invalid=true]::before {
3202
3185
  border: var(--IDS-FORM--INVALID__BORDER);
3203
3186
  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
3204
3187
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
@@ -3207,8 +3190,9 @@ input:focus + .ids-checkbox input::before {
3207
3190
  .ids-checkbox.ids-checkbox--light input::before {
3208
3191
  background-color: var(--IDS-COLOR-NEUTRAL-100);
3209
3192
  }
3210
- .ids-checkbox.ids-checkbox--light input[type=checkbox].ids-input--invalid::before,
3211
- .ids-checkbox.ids-checkbox--light input.ids-input--invalid::before {
3193
+ .ids-checkbox.ids-checkbox--light input[type=checkbox].ids-input--invalid::before, .ids-checkbox.ids-checkbox--light input[type=checkbox][aria-invalid=true]::before,
3194
+ .ids-checkbox.ids-checkbox--light input.ids-input--invalid::before,
3195
+ .ids-checkbox.ids-checkbox--light input[aria-invalid=true]::before {
3212
3196
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3213
3197
  }
3214
3198
  .ids-checkbox.ids-checkbox--block {
@@ -3549,7 +3533,7 @@ input.ids-range:disabled::-ms-thumb {
3549
3533
  .ids-select.ids-input--light.ids-input--invalid {
3550
3534
  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3551
3535
  }
3552
- .ids-select.ids-input--invalid {
3536
+ .ids-select.ids-input--invalid, .ids-select[aria-invalid=true] {
3553
3537
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3554
3538
  border: var(--IDS-FORM--INVALID__BORDER);
3555
3539
  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
@@ -3557,7 +3541,7 @@ input.ids-range:disabled::-ms-thumb {
3557
3541
  .ids-select.ids-input--light {
3558
3542
  background-color: var(--IDS-COLOR-NEUTRAL-100);
3559
3543
  }
3560
- .ids-select.ids-input--light.ids-input--invalid {
3544
+ .ids-select.ids-input--light.ids-input--invalid, .ids-select.ids-input--light[aria-invalid=true] {
3561
3545
  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
3562
3546
  border: var(--IDS-FORM--INVALID__BORDER);
3563
3547
  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
@@ -3603,7 +3587,7 @@ input.ids-range:disabled::-ms-thumb {
3603
3587
  transform: translateY(-50%);
3604
3588
  right: var(--IDS-INPUT__ICON-RIGHT);
3605
3589
  }
3606
- .ids-select-wrapper:has(.ids-input--invalid)::after {
3590
+ .ids-select-wrapper:has(.ids-input--invalid)::after, .ids-select-wrapper:has([aria-invalid=true])::after {
3607
3591
  color: var(--IDS-ICON--INVALID-COLOR);
3608
3592
  }
3609
3593
  .ids-select-wrapper:has(select:disabled)::after, .ids-select-wrapper:has([aria-disabled=true])::after {
@@ -3789,16 +3773,6 @@ input.ids-time__input:disabled {
3789
3773
  align-items: flex-start;
3790
3774
  gap: 0.5rem;
3791
3775
  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
3776
  }
3803
3777
  .ids-toggle label {
3804
3778
  position: relative;
@@ -3822,6 +3796,7 @@ input.ids-time__input:disabled {
3822
3796
  border: 0.063rem solid transparent;
3823
3797
  border-radius: 6.25rem;
3824
3798
  appearance: none;
3799
+ flex-shrink: 0;
3825
3800
  }
3826
3801
  .ids-toggle input[type=checkbox]:before,
3827
3802
  .ids-toggle input:before {
@@ -4358,6 +4333,342 @@ input:focus + .ids-toggle input:before {
4358
4333
  position: absolute;
4359
4334
  }
4360
4335
 
4336
+ .ids-icon-download-small:before {
4337
+ content: "\e99a";
4338
+ }
4339
+
4340
+ .ids-icon-copy-link:before {
4341
+ content: "\e99b";
4342
+ }
4343
+
4344
+ .ids-icon-activity:before {
4345
+ content: "\e948";
4346
+ }
4347
+
4348
+ .ids-icon-alarm:before {
4349
+ content: "\e949";
4350
+ }
4351
+
4352
+ .ids-icon-archive:before {
4353
+ content: "\e94a";
4354
+ }
4355
+
4356
+ .ids-icon-bookmark:before {
4357
+ content: "\e94b";
4358
+ }
4359
+
4360
+ .ids-icon-call-ongoing:before {
4361
+ content: "\e94c";
4362
+ }
4363
+
4364
+ .ids-icon-call:before {
4365
+ content: "\e94d";
4366
+ }
4367
+
4368
+ .ids-icon-camera-off:before {
4369
+ content: "\e94e";
4370
+ }
4371
+
4372
+ .ids-icon-camera-on:before {
4373
+ content: "\e94f";
4374
+ }
4375
+
4376
+ .ids-icon-camera-switch:before {
4377
+ content: "\e950";
4378
+ }
4379
+
4380
+ .ids-icon-chart-bar:before {
4381
+ content: "\e951";
4382
+ }
4383
+
4384
+ .ids-icon-chart-line:before {
4385
+ content: "\e952";
4386
+ }
4387
+
4388
+ .ids-icon-chat:before {
4389
+ content: "\e953";
4390
+ }
4391
+
4392
+ .ids-icon-clipboard-with-cross:before {
4393
+ content: "\e954";
4394
+ }
4395
+
4396
+ .ids-icon-clipboard-with-text:before {
4397
+ content: "\e955";
4398
+ }
4399
+
4400
+ .ids-icon-clipboard:before {
4401
+ content: "\e956";
4402
+ }
4403
+
4404
+ .ids-icon-copy-file:before {
4405
+ content: "\e957";
4406
+ }
4407
+
4408
+ .ids-icon-denied-small:before {
4409
+ content: "\e958";
4410
+ }
4411
+
4412
+ .ids-icon-denied:before {
4413
+ content: "\e959";
4414
+ }
4415
+
4416
+ .ids-icon-desktop:before {
4417
+ content: "\e95a";
4418
+ }
4419
+
4420
+ .ids-icon-doctors-bag:before {
4421
+ content: "\e95b";
4422
+ }
4423
+
4424
+ .ids-icon-document:before {
4425
+ content: "\e95c";
4426
+ }
4427
+
4428
+ .ids-icon-download:before {
4429
+ content: "\e95d";
4430
+ }
4431
+
4432
+ .ids-icon-e-mail-sent:before {
4433
+ content: "\e95e";
4434
+ }
4435
+
4436
+ .ids-icon-e-mail-unread:before {
4437
+ content: "\e95f";
4438
+ }
4439
+
4440
+ .ids-icon-e-mail:before {
4441
+ content: "\e960";
4442
+ }
4443
+
4444
+ .ids-icon-edit:before {
4445
+ content: "\e961";
4446
+ }
4447
+
4448
+ .ids-icon-error-filled:before {
4449
+ content: "\e962";
4450
+ }
4451
+
4452
+ .ids-icon-error:before {
4453
+ content: "\e963";
4454
+ }
4455
+
4456
+ .ids-icon-file-csv:before {
4457
+ content: "\e964";
4458
+ }
4459
+
4460
+ .ids-icon-file-excel:before {
4461
+ content: "\e965";
4462
+ }
4463
+
4464
+ .ids-icon-file-image:before {
4465
+ content: "\e966";
4466
+ }
4467
+
4468
+ .ids-icon-file-other:before {
4469
+ content: "\e967";
4470
+ }
4471
+
4472
+ .ids-icon-file-pdf:before {
4473
+ content: "\e968";
4474
+ }
4475
+
4476
+ .ids-icon-file-ppt:before {
4477
+ content: "\e969";
4478
+ }
4479
+
4480
+ .ids-icon-file-word:before {
4481
+ content: "\e96a";
4482
+ }
4483
+
4484
+ .ids-icon-find-care:before {
4485
+ content: "\e96b";
4486
+ }
4487
+
4488
+ .ids-icon-flag:before {
4489
+ content: "\e96c";
4490
+ }
4491
+
4492
+ .ids-icon-folder:before {
4493
+ content: "\e96d";
4494
+ }
4495
+
4496
+ .ids-icon-form-numbered-reoccurring:before {
4497
+ content: "\e96e";
4498
+ }
4499
+
4500
+ .ids-icon-form-numbered:before {
4501
+ content: "\e96f";
4502
+ }
4503
+
4504
+ .ids-icon-functions:before {
4505
+ content: "\e970";
4506
+ }
4507
+
4508
+ .ids-icon-headphones:before {
4509
+ content: "\e971";
4510
+ }
4511
+
4512
+ .ids-icon-hourglass-end:before {
4513
+ content: "\e972";
4514
+ }
4515
+
4516
+ .ids-icon-hourglass-start:before {
4517
+ content: "\e973";
4518
+ }
4519
+
4520
+ .ids-icon-hourglass:before {
4521
+ content: "\e974";
4522
+ }
4523
+
4524
+ .ids-icon-house:before {
4525
+ content: "\e975";
4526
+ }
4527
+
4528
+ .ids-icon-id-card-locked:before {
4529
+ content: "\e976";
4530
+ }
4531
+
4532
+ .ids-icon-id-card:before {
4533
+ content: "\e977";
4534
+ }
4535
+
4536
+ .ids-icon-image:before {
4537
+ content: "\e978";
4538
+ }
4539
+
4540
+ .ids-icon-inactivity:before {
4541
+ content: "\e979";
4542
+ }
4543
+
4544
+ .ids-icon-lightbulb:before {
4545
+ content: "\e97a";
4546
+ }
4547
+
4548
+ .ids-icon-list:before {
4549
+ content: "\e97b";
4550
+ }
4551
+
4552
+ .ids-icon-listen:before {
4553
+ content: "\e97c";
4554
+ }
4555
+
4556
+ .ids-icon-locked:before {
4557
+ content: "\e97d";
4558
+ }
4559
+
4560
+ .ids-icon-log-locked:before {
4561
+ content: "\e97e";
4562
+ }
4563
+
4564
+ .ids-icon-log:before {
4565
+ content: "\e97f";
4566
+ }
4567
+
4568
+ .ids-icon-mobile:before {
4569
+ content: "\e980";
4570
+ }
4571
+
4572
+ .ids-icon-moment-start:before {
4573
+ content: "\e981";
4574
+ }
4575
+
4576
+ .ids-icon-moment-stop:before {
4577
+ content: "\e982";
4578
+ }
4579
+
4580
+ .ids-icon-office-building:before {
4581
+ content: "\e983";
4582
+ }
4583
+
4584
+ .ids-icon-organization:before {
4585
+ content: "\e984";
4586
+ }
4587
+
4588
+ .ids-icon-prescription:before {
4589
+ content: "\e985";
4590
+ }
4591
+
4592
+ .ids-icon-print:before {
4593
+ content: "\e986";
4594
+ }
4595
+
4596
+ .ids-icon-settings:before {
4597
+ content: "\e987";
4598
+ }
4599
+
4600
+ .ids-icon-shield-locked-filled:before {
4601
+ content: "\e988";
4602
+ }
4603
+
4604
+ .ids-icon-shield-locked-outlined:before {
4605
+ content: "\e989";
4606
+ }
4607
+
4608
+ .ids-icon-social-facebook:before {
4609
+ content: "\e98a";
4610
+ }
4611
+
4612
+ .ids-icon-social-linkedin:before {
4613
+ content: "\e98b";
4614
+ }
4615
+
4616
+ .ids-icon-social-x:before {
4617
+ content: "\e98c";
4618
+ }
4619
+
4620
+ .ids-icon-switch-person:before {
4621
+ content: "\e98d";
4622
+ }
4623
+
4624
+ .ids-icon-toggle-card-view:before {
4625
+ content: "\e98e";
4626
+ }
4627
+
4628
+ .ids-icon-toggle-list-view:before {
4629
+ content: "\e98f";
4630
+ }
4631
+
4632
+ .ids-icon-trash-can:before {
4633
+ content: "\e990";
4634
+ }
4635
+
4636
+ .ids-icon-tube-analysis:before {
4637
+ content: "\e991";
4638
+ }
4639
+
4640
+ .ids-icon-tube-empty:before {
4641
+ content: "\e992";
4642
+ }
4643
+
4644
+ .ids-icon-tube-filled:before {
4645
+ content: "\e993";
4646
+ }
4647
+
4648
+ .ids-icon-unlocked:before {
4649
+ content: "\e994";
4650
+ }
4651
+
4652
+ .ids-icon-video-off:before {
4653
+ content: "\e995";
4654
+ }
4655
+
4656
+ .ids-icon-video-on:before {
4657
+ content: "\e996";
4658
+ }
4659
+
4660
+ .ids-icon-video-switch:before {
4661
+ content: "\e997";
4662
+ }
4663
+
4664
+ .ids-icon-visibility-off:before {
4665
+ content: "\e998";
4666
+ }
4667
+
4668
+ .ids-icon-visibility:before {
4669
+ content: "\e999";
4670
+ }
4671
+
4361
4672
  .ids-icon-arrow-link:before {
4362
4673
  content: "\e947";
4363
4674
  }
@@ -4880,7 +5191,6 @@ input[type=search]::-webkit-search-results-decoration {
4880
5191
  --IDS-FORM-LABEL--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
4881
5192
  /* Error message */
4882
5193
  --IDS-ERROR-MESSAGE__COLOR: var(--IDS-COLOR-ERROR-40);
4883
- --IDS-ERROR-MESSAGE__MARGIN-TOP: 0.8rem;
4884
5194
  --IDS-ERROR-MESSAGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
4885
5195
  --IDS-ERROR-MESSAGE__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
4886
5196
  --IDS-ERROR-MESSAGE__BORDER: 0.063rem solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);
@@ -5383,7 +5693,6 @@ ids-input input[type=search]::-webkit-search-results-decoration {
5383
5693
  }
5384
5694
 
5385
5695
  .ids-label {
5386
- display: inline-block;
5387
5696
  color: var(--IDS-FORM-LABEL__COLOR);
5388
5697
  font-family: var(--IDS-FORM-LABEL__FONT-FAMILY);
5389
5698
  font-size: var(--IDS-FORM-LABEL__FONT-SIZE);
@@ -5396,7 +5705,7 @@ ids-input input[type=search]::-webkit-search-results-decoration {
5396
5705
  margin-bottom: 0.25rem;
5397
5706
  }
5398
5707
  .ids-label.ids-label--clickable {
5399
- cursor: pointer;
5708
+ cursor: pointer !important;
5400
5709
  }
5401
5710
  .ids-label.ids-label--disabled {
5402
5711
  font-style: italic;
@@ -5407,21 +5716,22 @@ ids-input input[type=search]::-webkit-search-results-decoration {
5407
5716
  display: none;
5408
5717
  }
5409
5718
 
5410
- .ids-label-wrapper {
5719
+ .ids-label-tooltip-wrapper {
5411
5720
  display: inline-flex;
5412
5721
  align-items: flex-start;
5413
5722
  gap: 0.5rem;
5414
- margin-bottom: 0.25rem;
5415
- margin-right: 0.25rem;
5416
5723
  }
5417
- .ids-label-wrapper .ids-label-tooltip-wrapper {
5418
- margin-bottom: -0.25rem;
5724
+ .ids-label-tooltip-wrapper.ids-label-tooltip-wrapper--block {
5725
+ width: 100%;
5726
+ }
5727
+ .ids-label-tooltip-wrapper.ids-label-tooltip-wrapper--inline {
5728
+ display: inline;
5419
5729
  }
5420
- .ids-label-wrapper .ids-label-tooltip-wrapper label {
5730
+ .ids-label-tooltip-wrapper.ids-label-tooltip-wrapper--inline label {
5421
5731
  display: inline;
5422
- top: -0.188rem;
5732
+ margin-right: 0.5rem;
5423
5733
  position: relative;
5424
- margin-right: 0.25rem;
5734
+ top: -0.1875rem;
5425
5735
  }
5426
5736
 
5427
5737
  /* Thematic classes */