@inera/ids-design 5.1.0 → 5.1.2

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 (21) hide show
  1. package/components/dropdown/dropdown-lit.js +1 -1
  2. package/components/dropdown/dropdown.css +7 -12
  3. package/components/header-1177/composite-header-1177.css +27 -44
  4. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  5. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  6. package/components/header-1177/header-1177-nav-item-mobile.css +1 -0
  7. package/components/header-1177/header-1177-nav-item.css +24 -44
  8. package/components/header-1177/header-1177-nav-lit.js +1 -1
  9. package/components/header-1177/header-1177-nav.css +2 -0
  10. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  11. package/components/header-1177-admin/header-1177-admin-nav-item.css +4 -4
  12. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  13. package/components/header-1177-pro/header-1177-pro-nav-item.css +4 -20
  14. package/components/navigation/content/navigation-content-lit.js +1 -1
  15. package/components/navigation/content/navigation-content.css +2 -2
  16. package/global/global.css +24 -47
  17. package/package.json +1 -1
  18. package/themes/1177/1177.css +28 -47
  19. package/themes/1177-pro/1177-pro.css +28 -47
  20. package/themes/inera/inera.css +28 -47
  21. package/themes/inera-admin/inera-admin.css +28 -47
package/themes/1177-pro/1177-pro.css CHANGED
@@ -2388,14 +2388,14 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2388
2388
  color: var(--link-colorpreset-1_color);
2389
2389
  text-decoration-color: var(--link-colorpreset-1_color);
2390
2390
  line-height: 1.5rem;
2391
+ gap: 8px;
2391
2392
  cursor: pointer;
2392
2393
  display: inline-flex;
2393
- gap: 8px;
2394
2394
  align-items: flex-start;
2395
2395
  text-decoration: none;
2396
2396
  position: relative;
2397
2397
  }
2398
- .ids-link:not(:has(.ids-link__icon)) {
2398
+ .ids-link:not(:has(.ids-icon)) {
2399
2399
  text-decoration: underline;
2400
2400
  }
2401
2401
  .ids-link:focus:focus {
@@ -2403,7 +2403,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2403
2403
  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
2404
2404
  }
2405
2405
  .ids-link:hover, .ids-link:focus {
2406
- text-decoration: underline;
2406
+ text-decoration: underline !important;
2407
2407
  color: var(--link-colorpreset-1-hover_color);
2408
2408
  }
2409
2409
  .ids-link:hover .ids-link__icon:has(+ .ids-link__icon--hover), .ids-link:focus .ids-link__icon:has(+ .ids-link__icon--hover) {
@@ -2421,55 +2421,37 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2421
2421
  .ids-link.ids-link--active-icon {
2422
2422
  text-decoration: none !important;
2423
2423
  }
2424
- .ids-link.ids-link--active-icon .ids-link__icon .ids-link__icon__wrap,
2425
- .ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
2424
+ .ids-link.ids-link--active-icon .ids-icon {
2425
+ margin-top: 0.25rem;
2426
+ display: inline-flex;
2426
2427
  border-radius: 100%;
2427
- padding: 3px;
2428
+ width: 1rem;
2429
+ height: 1rem;
2428
2430
  align-items: center;
2429
2431
  justify-content: center;
2432
+ padding: 0.188rem;
2430
2433
  }
2431
- .ids-link.ids-link--active-icon:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon:focus-within .ids-link__icon .ids-link__icon__wrap {
2432
- background-color: var(--link-colorpreset-1-hover_color);
2434
+ .ids-link.ids-link--active-icon.ids-link--active .ids-icon {
2435
+ background-color: var(--link-colorpreset-1--active-icon--active_background-color);
2433
2436
  }
2434
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
2435
- display: none;
2437
+ .ids-link.ids-link--active-icon:hover .ids-icon, .ids-link.ids-link--active-icon:focus-within .ids-icon {
2438
+ background-color: var(--link-colorpreset-1--active-icon--hover_background-color);
2436
2439
  }
2437
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon--hover {
2440
+ .ids-link.ids-link--active-icon.ids-link--color-2 .ids-icon {
2441
+ margin-top: 0.25rem;
2438
2442
  display: inline-flex;
2439
- }
2440
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon .ids-link__icon__wrap {
2441
- background-color: var(--link-colorpreset-1_color);
2442
- }
2443
- .ids-link.ids-link--active-icon.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
2444
- background-color: var(--link-colorpreset-1-hover_color);
2445
- }
2446
- .ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
2447
- background-color: var(--link-colorpreset-1-hover_color);
2448
- }
2449
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon .ids-link__icon__wrap,
2450
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
2451
2443
  border-radius: 100%;
2452
- padding: 3px;
2444
+ width: 1rem;
2445
+ height: 1rem;
2453
2446
  align-items: center;
2454
2447
  justify-content: center;
2448
+ padding: 0.188rem;
2455
2449
  }
2456
- .ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-link__icon .ids-link__icon__wrap {
2457
- background-color: var(--link-colorpreset-2-hover_color);
2450
+ .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
2451
+ background-color: var(--link-colorpreset-2--active-icon--active_background-color);
2458
2452
  }
2459
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
2460
- display: none;
2461
- }
2462
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon--hover {
2463
- display: inline-flex;
2464
- }
2465
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon .ids-link__icon__wrap {
2466
- background-color: var(--link-colorpreset-2_color);
2467
- }
2468
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
2469
- background-color: var(--link-colorpreset-2-hover_color);
2470
- }
2471
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
2472
- background-color: var(--link-colorpreset-2-hover_color);
2453
+ .ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-icon {
2454
+ background-color: var(--link-colorpreset-2--active-icon--hover_background-color);
2473
2455
  }
2474
2456
  .ids-link.ids-link--color-2 {
2475
2457
  color: var(--link-colorpreset-2_color);
@@ -2489,17 +2471,12 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2489
2471
  .ids-link.ids-link--light:hover {
2490
2472
  color: white !important;
2491
2473
  }
2492
- .ids-link .ids-link__icon,
2493
- .ids-link .ids-link__icon--hover {
2474
+ .ids-link .ids-icon {
2494
2475
  display: inline-flex;
2495
- justify-content: center;
2496
2476
  align-items: center;
2477
+ justify-content: center;
2497
2478
  height: 1.5rem;
2498
2479
  }
2499
- .ids-link .ids-link__text {
2500
- display: inline-flex;
2501
- gap: 8px;
2502
- }
2503
2480
  .ids-link .ids-link__icon {
2504
2481
  display: inline-flex;
2505
2482
  }
@@ -4028,6 +4005,10 @@ select::placeholder {
4028
4005
  --link-colorpreset-1-hover_color: var(--IDS-COLOR-ACCENT-30);
4029
4006
  --link-colorpreset-2_color: var(--IDS-COLOR-PRIMARY-35);
4030
4007
  --link-colorpreset-2-hover_color: var(--IDS-COLOR-PRIMARY-30);
4008
+ --link-colorpreset-1--active-icon--hover_background-color: var(--IDS-COLOR-ACCENT-40);
4009
+ --link-colorpreset-1--active-icon--active_background-color: var(--IDS-COLOR-ACCENT-30);
4010
+ --link-colorpreset-2--active-icon--hover_background-color: var(--IDS-COLOR-PRIMARY-35);
4011
+ --link-colorpreset-2--active-icon--active_background-color: var(--IDS-COLOR-PRIMARY-30);
4031
4012
  /* List */
4032
4013
  --list-heading_color: var(--IDS-COLOR-ACCENT-40);
4033
4014
  --list_border: var(--IDS-COLOR-NEUTRAL-90);
package/themes/inera/inera.css CHANGED
@@ -2388,14 +2388,14 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2388
2388
  color: var(--link-colorpreset-1_color);
2389
2389
  text-decoration-color: var(--link-colorpreset-1_color);
2390
2390
  line-height: 1.5rem;
2391
+ gap: 8px;
2391
2392
  cursor: pointer;
2392
2393
  display: inline-flex;
2393
- gap: 8px;
2394
2394
  align-items: flex-start;
2395
2395
  text-decoration: none;
2396
2396
  position: relative;
2397
2397
  }
2398
- .ids-link:not(:has(.ids-link__icon)) {
2398
+ .ids-link:not(:has(.ids-icon)) {
2399
2399
  text-decoration: underline;
2400
2400
  }
2401
2401
  .ids-link:focus:focus {
@@ -2403,7 +2403,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2403
2403
  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
2404
2404
  }
2405
2405
  .ids-link:hover, .ids-link:focus {
2406
- text-decoration: underline;
2406
+ text-decoration: underline !important;
2407
2407
  color: var(--link-colorpreset-1-hover_color);
2408
2408
  }
2409
2409
  .ids-link:hover .ids-link__icon:has(+ .ids-link__icon--hover), .ids-link:focus .ids-link__icon:has(+ .ids-link__icon--hover) {
@@ -2421,55 +2421,37 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2421
2421
  .ids-link.ids-link--active-icon {
2422
2422
  text-decoration: none !important;
2423
2423
  }
2424
- .ids-link.ids-link--active-icon .ids-link__icon .ids-link__icon__wrap,
2425
- .ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
2424
+ .ids-link.ids-link--active-icon .ids-icon {
2425
+ margin-top: 0.25rem;
2426
+ display: inline-flex;
2426
2427
  border-radius: 100%;
2427
- padding: 3px;
2428
+ width: 1rem;
2429
+ height: 1rem;
2428
2430
  align-items: center;
2429
2431
  justify-content: center;
2432
+ padding: 0.188rem;
2430
2433
  }
2431
- .ids-link.ids-link--active-icon:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon:focus-within .ids-link__icon .ids-link__icon__wrap {
2432
- background-color: var(--link-colorpreset-1-hover_color);
2434
+ .ids-link.ids-link--active-icon.ids-link--active .ids-icon {
2435
+ background-color: var(--link-colorpreset-1--active-icon--active_background-color);
2433
2436
  }
2434
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
2435
- display: none;
2437
+ .ids-link.ids-link--active-icon:hover .ids-icon, .ids-link.ids-link--active-icon:focus-within .ids-icon {
2438
+ background-color: var(--link-colorpreset-1--active-icon--hover_background-color);
2436
2439
  }
2437
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon--hover {
2440
+ .ids-link.ids-link--active-icon.ids-link--color-2 .ids-icon {
2441
+ margin-top: 0.25rem;
2438
2442
  display: inline-flex;
2439
- }
2440
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon .ids-link__icon__wrap {
2441
- background-color: var(--link-colorpreset-1_color);
2442
- }
2443
- .ids-link.ids-link--active-icon.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
2444
- background-color: var(--link-colorpreset-1-hover_color);
2445
- }
2446
- .ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
2447
- background-color: var(--link-colorpreset-1-hover_color);
2448
- }
2449
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon .ids-link__icon__wrap,
2450
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
2451
2443
  border-radius: 100%;
2452
- padding: 3px;
2444
+ width: 1rem;
2445
+ height: 1rem;
2453
2446
  align-items: center;
2454
2447
  justify-content: center;
2448
+ padding: 0.188rem;
2455
2449
  }
2456
- .ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-link__icon .ids-link__icon__wrap {
2457
- background-color: var(--link-colorpreset-2-hover_color);
2450
+ .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
2451
+ background-color: var(--link-colorpreset-2--active-icon--active_background-color);
2458
2452
  }
2459
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
2460
- display: none;
2461
- }
2462
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon--hover {
2463
- display: inline-flex;
2464
- }
2465
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon .ids-link__icon__wrap {
2466
- background-color: var(--link-colorpreset-2_color);
2467
- }
2468
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
2469
- background-color: var(--link-colorpreset-2-hover_color);
2470
- }
2471
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
2472
- background-color: var(--link-colorpreset-2-hover_color);
2453
+ .ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-icon {
2454
+ background-color: var(--link-colorpreset-2--active-icon--hover_background-color);
2473
2455
  }
2474
2456
  .ids-link.ids-link--color-2 {
2475
2457
  color: var(--link-colorpreset-2_color);
@@ -2489,17 +2471,12 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2489
2471
  .ids-link.ids-link--light:hover {
2490
2472
  color: white !important;
2491
2473
  }
2492
- .ids-link .ids-link__icon,
2493
- .ids-link .ids-link__icon--hover {
2474
+ .ids-link .ids-icon {
2494
2475
  display: inline-flex;
2495
- justify-content: center;
2496
2476
  align-items: center;
2477
+ justify-content: center;
2497
2478
  height: 1.5rem;
2498
2479
  }
2499
- .ids-link .ids-link__text {
2500
- display: inline-flex;
2501
- gap: 8px;
2502
- }
2503
2480
  .ids-link .ids-link__icon {
2504
2481
  display: inline-flex;
2505
2482
  }
@@ -4050,6 +4027,10 @@ select::placeholder {
4050
4027
  --link-colorpreset-1-hover_color: var(--IDS-COLOR-ACCENT-30);
4051
4028
  --link-colorpreset-2_color: var(--IDS-COLOR-PRIMARY-40);
4052
4029
  --link-colorpreset-2-hover_color: var(--IDS-COLOR-PRIMARY-30);
4030
+ --link-colorpreset-1--active-icon--hover_background-color: var(--IDS-COLOR-ACCENT-40);
4031
+ --link-colorpreset-1--active-icon--active_background-color: var(--IDS-COLOR-ACCENT-30);
4032
+ --link-colorpreset-2--active-icon--hover_background-color: var(--IDS-COLOR-PRIMARY-40);
4033
+ --link-colorpreset-2--active-icon--active_background-color: var(--IDS-COLOR-PRIMARY-30);
4053
4034
  /* List */
4054
4035
  --list-heading_color: var(--IDS-COLOR-ACCENT-40);
4055
4036
  --list_border: var(--IDS-COLOR-NEUTRAL-90);
package/themes/inera-admin/inera-admin.css CHANGED
@@ -2388,14 +2388,14 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2388
2388
  color: var(--link-colorpreset-1_color);
2389
2389
  text-decoration-color: var(--link-colorpreset-1_color);
2390
2390
  line-height: 1.5rem;
2391
+ gap: 8px;
2391
2392
  cursor: pointer;
2392
2393
  display: inline-flex;
2393
- gap: 8px;
2394
2394
  align-items: flex-start;
2395
2395
  text-decoration: none;
2396
2396
  position: relative;
2397
2397
  }
2398
- .ids-link:not(:has(.ids-link__icon)) {
2398
+ .ids-link:not(:has(.ids-icon)) {
2399
2399
  text-decoration: underline;
2400
2400
  }
2401
2401
  .ids-link:focus:focus {
@@ -2403,7 +2403,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2403
2403
  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
2404
2404
  }
2405
2405
  .ids-link:hover, .ids-link:focus {
2406
- text-decoration: underline;
2406
+ text-decoration: underline !important;
2407
2407
  color: var(--link-colorpreset-1-hover_color);
2408
2408
  }
2409
2409
  .ids-link:hover .ids-link__icon:has(+ .ids-link__icon--hover), .ids-link:focus .ids-link__icon:has(+ .ids-link__icon--hover) {
@@ -2421,55 +2421,37 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2421
2421
  .ids-link.ids-link--active-icon {
2422
2422
  text-decoration: none !important;
2423
2423
  }
2424
- .ids-link.ids-link--active-icon .ids-link__icon .ids-link__icon__wrap,
2425
- .ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
2424
+ .ids-link.ids-link--active-icon .ids-icon {
2425
+ margin-top: 0.25rem;
2426
+ display: inline-flex;
2426
2427
  border-radius: 100%;
2427
- padding: 3px;
2428
+ width: 1rem;
2429
+ height: 1rem;
2428
2430
  align-items: center;
2429
2431
  justify-content: center;
2432
+ padding: 0.188rem;
2430
2433
  }
2431
- .ids-link.ids-link--active-icon:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon:focus-within .ids-link__icon .ids-link__icon__wrap {
2432
- background-color: var(--link-colorpreset-1-hover_color);
2434
+ .ids-link.ids-link--active-icon.ids-link--active .ids-icon {
2435
+ background-color: var(--link-colorpreset-1--active-icon--active_background-color);
2433
2436
  }
2434
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
2435
- display: none;
2437
+ .ids-link.ids-link--active-icon:hover .ids-icon, .ids-link.ids-link--active-icon:focus-within .ids-icon {
2438
+ background-color: var(--link-colorpreset-1--active-icon--hover_background-color);
2436
2439
  }
2437
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon--hover {
2440
+ .ids-link.ids-link--active-icon.ids-link--color-2 .ids-icon {
2441
+ margin-top: 0.25rem;
2438
2442
  display: inline-flex;
2439
- }
2440
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon .ids-link__icon__wrap {
2441
- background-color: var(--link-colorpreset-1_color);
2442
- }
2443
- .ids-link.ids-link--active-icon.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
2444
- background-color: var(--link-colorpreset-1-hover_color);
2445
- }
2446
- .ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
2447
- background-color: var(--link-colorpreset-1-hover_color);
2448
- }
2449
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon .ids-link__icon__wrap,
2450
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
2451
2443
  border-radius: 100%;
2452
- padding: 3px;
2444
+ width: 1rem;
2445
+ height: 1rem;
2453
2446
  align-items: center;
2454
2447
  justify-content: center;
2448
+ padding: 0.188rem;
2455
2449
  }
2456
- .ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-link__icon .ids-link__icon__wrap {
2457
- background-color: var(--link-colorpreset-2-hover_color);
2450
+ .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
2451
+ background-color: var(--link-colorpreset-2--active-icon--active_background-color);
2458
2452
  }
2459
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
2460
- display: none;
2461
- }
2462
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon--hover {
2463
- display: inline-flex;
2464
- }
2465
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon .ids-link__icon__wrap {
2466
- background-color: var(--link-colorpreset-2_color);
2467
- }
2468
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
2469
- background-color: var(--link-colorpreset-2-hover_color);
2470
- }
2471
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
2472
- background-color: var(--link-colorpreset-2-hover_color);
2453
+ .ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-icon {
2454
+ background-color: var(--link-colorpreset-2--active-icon--hover_background-color);
2473
2455
  }
2474
2456
  .ids-link.ids-link--color-2 {
2475
2457
  color: var(--link-colorpreset-2_color);
@@ -2489,17 +2471,12 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2489
2471
  .ids-link.ids-link--light:hover {
2490
2472
  color: white !important;
2491
2473
  }
2492
- .ids-link .ids-link__icon,
2493
- .ids-link .ids-link__icon--hover {
2474
+ .ids-link .ids-icon {
2494
2475
  display: inline-flex;
2495
- justify-content: center;
2496
2476
  align-items: center;
2477
+ justify-content: center;
2497
2478
  height: 1.5rem;
2498
2479
  }
2499
- .ids-link .ids-link__text {
2500
- display: inline-flex;
2501
- gap: 8px;
2502
- }
2503
2480
  .ids-link .ids-link__icon {
2504
2481
  display: inline-flex;
2505
2482
  }
@@ -4050,6 +4027,10 @@ select::placeholder {
4050
4027
  --link-colorpreset-1-hover_color: var(--IDS-COLOR-ACCENT-30);
4051
4028
  --link-colorpreset-2_color: var(--IDS-COLOR-PRIMARY-40);
4052
4029
  --link-colorpreset-2-hover_color: var(--IDS-COLOR-PRIMARY-30);
4030
+ --link-colorpreset-1--active-icon--hover_background-color: var(--IDS-COLOR-ACCENT-40);
4031
+ --link-colorpreset-1--active-icon--active_background-color: var(--IDS-COLOR-ACCENT-30);
4032
+ --link-colorpreset-2--active-icon--hover_background-color: var(--IDS-COLOR-PRIMARY-40);
4033
+ --link-colorpreset-2--active-icon--active_background-color: var(--IDS-COLOR-PRIMARY-30);
4053
4034
  /* List */
4054
4035
  --list-heading_color: var(--IDS-COLOR-ACCENT-40);
4055
4036
  --list_border: var(--IDS-COLOR-NEUTRAL-90);