@carbon/styles 1.53.0-rc.0 → 1.53.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/css/styles.css CHANGED
@@ -2762,21 +2762,22 @@ em {
2762
2762
  --cds-ai-aura-end: rgba(255, 255, 255, 0);
2763
2763
  --cds-ai-aura-hover-background: #edf5ff;
2764
2764
  --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
2765
- --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
2765
+ --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.32);
2766
2766
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
2767
- --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
2768
- --cds-ai-border-end: #d0e2ff;
2769
- --cds-ai-border-start: #78a9ff;
2767
+ --cds-ai-aura-start-sm: rgba(69, 137, 255, 0.16);
2768
+ --cds-ai-border-end: #78a9ff;
2769
+ --cds-ai-border-start: rgba(166, 200, 255, 0.64);
2770
2770
  --cds-ai-border-strong: #4589ff;
2771
- --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
2772
- --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
2771
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.1);
2772
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.1);
2773
2773
  --cds-ai-overlay: rgba(0, 17, 65, 0.5);
2774
- --cds-ai-popover-caret-bottom: #d0e2ff;
2775
- --cds-ai-popover-caret-bottom-background: #d5e5ff;
2776
- --cds-ai-popover-caret-bottom-background-actions: #dae5f8;
2777
- --cds-ai-popover-caret-center: #a7c7ff;
2778
- --cds-ai-popover-shadow-outer-01: rgba(0, 67, 206, 0.25);
2779
- --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.1);
2774
+ --cds-ai-popover-background: #ffffff;
2775
+ --cds-ai-popover-caret-bottom: #78a9ff;
2776
+ --cds-ai-popover-caret-bottom-background: #eaf1ff;
2777
+ --cds-ai-popover-caret-bottom-background-actions: #e9effa;
2778
+ --cds-ai-popover-caret-center: #a0c3ff;
2779
+ --cds-ai-popover-shadow-outer-01: rgba(0, 67, 206, 0.06);
2780
+ --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.04);
2780
2781
  --cds-ai-skeleton-background: #d0e2ff;
2781
2782
  --cds-ai-skeleton-element-background: #4589ff;
2782
2783
  --cds-background: #ffffff;
@@ -2807,8 +2808,14 @@ em {
2807
2808
  --cds-chat-avatar-bot: #6f6f6f;
2808
2809
  --cds-chat-avatar-user: #0f62fe;
2809
2810
  --cds-chat-bubble-agent: #ffffff;
2810
- --cds-chat-bubble-agent-border: #e0e0e0;
2811
+ --cds-chat-bubble-border: #e0e0e0;
2811
2812
  --cds-chat-bubble-user: #e0e0e0;
2813
+ --cds-chat-button: #0f62fe;
2814
+ --cds-chat-button-active: rgba(141, 141, 141, 0.5);
2815
+ --cds-chat-button-hover: rgba(141, 141, 141, 0.12);
2816
+ --cds-chat-button-selected: rgba(141, 141, 141, 0.2);
2817
+ --cds-chat-button-text-hover: #0043ce;
2818
+ --cds-chat-button-text-selected: #525252;
2812
2819
  --cds-chat-header-background: #ffffff;
2813
2820
  --cds-chat-prompt-background: #ffffff;
2814
2821
  --cds-chat-prompt-border-end: rgba(244, 244, 244, 0);
@@ -2869,9 +2876,6 @@ em {
2869
2876
  --cds-shadow: rgba(0, 0, 0, 0.3);
2870
2877
  --cds-skeleton-background: #e8e8e8;
2871
2878
  --cds-skeleton-element: #c6c6c6;
2872
- --cds-slug-background: #525252;
2873
- --cds-slug-background-hover: #6f6f6f;
2874
- --cds-slug-hollow-hover: #474747;
2875
2879
  --cds-support-caution-major: #ff832b;
2876
2880
  --cds-support-caution-minor: #f1c21b;
2877
2881
  --cds-support-caution-undefined: #8a3ffc;
@@ -2980,21 +2984,22 @@ em {
2980
2984
  --cds-ai-aura-end: rgba(255, 255, 255, 0);
2981
2985
  --cds-ai-aura-hover-background: #edf5ff;
2982
2986
  --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
2983
- --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
2987
+ --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.32);
2984
2988
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
2985
- --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
2986
- --cds-ai-border-end: #d0e2ff;
2987
- --cds-ai-border-start: #78a9ff;
2989
+ --cds-ai-aura-start-sm: rgba(69, 137, 255, 0.16);
2990
+ --cds-ai-border-end: #78a9ff;
2991
+ --cds-ai-border-start: rgba(166, 200, 255, 0.64);
2988
2992
  --cds-ai-border-strong: #4589ff;
2989
- --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
2990
- --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
2993
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.1);
2994
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.1);
2991
2995
  --cds-ai-overlay: rgba(0, 17, 65, 0.5);
2992
- --cds-ai-popover-caret-bottom: #d0e2ff;
2993
- --cds-ai-popover-caret-bottom-background: #ccdbf8;
2994
- --cds-ai-popover-caret-bottom-background-actions: #d2dcee;
2995
- --cds-ai-popover-caret-center: #a7c7ff;
2996
- --cds-ai-popover-shadow-outer-01: rgba(0, 67, 206, 0.25);
2997
- --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.1);
2996
+ --cds-ai-popover-background: #ffffff;
2997
+ --cds-ai-popover-caret-bottom: #78a9ff;
2998
+ --cds-ai-popover-caret-bottom-background: #eaf1ff;
2999
+ --cds-ai-popover-caret-bottom-background-actions: #e9effa;
3000
+ --cds-ai-popover-caret-center: #a0c3ff;
3001
+ --cds-ai-popover-shadow-outer-01: rgba(0, 67, 206, 0.06);
3002
+ --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.04);
2998
3003
  --cds-ai-skeleton-background: #d0e2ff;
2999
3004
  --cds-ai-skeleton-element-background: #4589ff;
3000
3005
  --cds-background: #f4f4f4;
@@ -3025,8 +3030,14 @@ em {
3025
3030
  --cds-chat-avatar-bot: #6f6f6f;
3026
3031
  --cds-chat-avatar-user: #0f62fe;
3027
3032
  --cds-chat-bubble-agent: #ffffff;
3028
- --cds-chat-bubble-agent-border: #e0e0e0;
3033
+ --cds-chat-bubble-border: #e0e0e0;
3029
3034
  --cds-chat-bubble-user: #e0e0e0;
3035
+ --cds-chat-button: #0f62fe;
3036
+ --cds-chat-button-active: rgba(141, 141, 141, 0.5);
3037
+ --cds-chat-button-hover: rgba(141, 141, 141, 0.12);
3038
+ --cds-chat-button-selected: rgba(141, 141, 141, 0.2);
3039
+ --cds-chat-button-text-hover: #0043ce;
3040
+ --cds-chat-button-text-selected: #525252;
3030
3041
  --cds-chat-header-background: #ffffff;
3031
3042
  --cds-chat-prompt-background: #ffffff;
3032
3043
  --cds-chat-prompt-border-end: rgba(244, 244, 244, 0);
@@ -3087,9 +3098,6 @@ em {
3087
3098
  --cds-shadow: rgba(0, 0, 0, 0.3);
3088
3099
  --cds-skeleton-background: #e8e8e8;
3089
3100
  --cds-skeleton-element: #c6c6c6;
3090
- --cds-slug-background: #525252;
3091
- --cds-slug-background-hover: #6f6f6f;
3092
- --cds-slug-hollow-hover: #474747;
3093
3101
  --cds-support-caution-major: #ff832b;
3094
3102
  --cds-support-caution-minor: #f1c21b;
3095
3103
  --cds-support-caution-undefined: #8a3ffc;
@@ -3200,21 +3208,22 @@ em {
3200
3208
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
3201
3209
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
3202
3210
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
3203
- --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
3204
- --cds-ai-border-end: rgba(166, 200, 255, 0.24);
3205
- --cds-ai-border-start: #4589ff;
3211
+ --cds-ai-aura-start-sm: rgba(69, 137, 255, 0.16);
3212
+ --cds-ai-border-end: #4589ff;
3213
+ --cds-ai-border-start: rgba(166, 200, 255, 0.36);
3206
3214
  --cds-ai-border-strong: #78a9ff;
3207
- --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
3208
- --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3209
- --cds-ai-overlay: rgba(0, 17, 65, 0.5);
3210
- --cds-ai-popover-caret-bottom: #465060;
3211
- --cds-ai-popover-caret-bottom-background: #2d3f5c;
3212
- --cds-ai-popover-caret-bottom-background-actions: #253042;
3213
- --cds-ai-popover-caret-center: #456fb5;
3214
- --cds-ai-popover-shadow-outer-01: rgba(0, 45, 156, 0.25);
3215
- --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.65);
3216
- --cds-ai-skeleton-background: #a6c8ff;
3217
- --cds-ai-skeleton-element-background: #002d9c;
3215
+ --cds-ai-drop-shadow: rgba(0, 0, 0, 0.28);
3216
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.16);
3217
+ --cds-ai-overlay: rgba(0, 0, 0, 0.5);
3218
+ --cds-ai-popover-background: #161616;
3219
+ --cds-ai-popover-caret-bottom: #4589ff;
3220
+ --cds-ai-popover-caret-bottom-background: #202d45;
3221
+ --cds-ai-popover-caret-bottom-background-actions: #1e283a;
3222
+ --cds-ai-popover-caret-center: #4870b5;
3223
+ --cds-ai-popover-shadow-outer-01: rgba(0, 0, 0, 0.12);
3224
+ --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.08);
3225
+ --cds-ai-skeleton-background: rgba(120, 169, 255, 0.5);
3226
+ --cds-ai-skeleton-element-background: rgba(120, 169, 255, 0.3);
3218
3227
  --cds-background: #262626;
3219
3228
  --cds-background-active: rgba(141, 141, 141, 0.4);
3220
3229
  --cds-background-brand: #0f62fe;
@@ -3243,8 +3252,14 @@ em {
3243
3252
  --cds-chat-avatar-bot: #8d8d8d;
3244
3253
  --cds-chat-avatar-user: #4589ff;
3245
3254
  --cds-chat-bubble-agent: #262626;
3246
- --cds-chat-bubble-agent-border: #525252;
3255
+ --cds-chat-bubble-border: #525252;
3247
3256
  --cds-chat-bubble-user: #393939;
3257
+ --cds-chat-button: #78a9ff;
3258
+ --cds-chat-button-active: rgba(141, 141, 141, 0.4);
3259
+ --cds-chat-button-hover: rgba(141, 141, 141, 0.16);
3260
+ --cds-chat-button-selected: rgba(141, 141, 141, 0.24);
3261
+ --cds-chat-button-text-hover: #a6c8ff;
3262
+ --cds-chat-button-text-selected: #c6c6c6;
3248
3263
  --cds-chat-header-background: #262626;
3249
3264
  --cds-chat-prompt-background: #161616;
3250
3265
  --cds-chat-prompt-border-end: rgba(38, 38, 38, 0);
@@ -3305,9 +3320,6 @@ em {
3305
3320
  --cds-shadow: rgba(0, 0, 0, 0.8);
3306
3321
  --cds-skeleton-background: #333333;
3307
3322
  --cds-skeleton-element: #525252;
3308
- --cds-slug-background: #c6c6c6;
3309
- --cds-slug-background-hover: #e0e0e0;
3310
- --cds-slug-hollow-hover: #b5b5b5;
3311
3323
  --cds-support-caution-major: #ff832b;
3312
3324
  --cds-support-caution-minor: #f1c21b;
3313
3325
  --cds-support-caution-undefined: #a56eff;
@@ -3417,21 +3429,22 @@ em {
3417
3429
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
3418
3430
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
3419
3431
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
3420
- --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
3421
- --cds-ai-border-end: rgba(166, 200, 255, 0.24);
3422
- --cds-ai-border-start: #4589ff;
3432
+ --cds-ai-aura-start-sm: rgba(69, 137, 255, 0.16);
3433
+ --cds-ai-border-end: #4589ff;
3434
+ --cds-ai-border-start: rgba(166, 200, 255, 0.36);
3423
3435
  --cds-ai-border-strong: #78a9ff;
3424
- --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
3425
- --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3426
- --cds-ai-overlay: rgba(0, 17, 65, 0.5);
3427
- --cds-ai-popover-caret-bottom: #3d4655;
3428
- --cds-ai-popover-caret-bottom-background: #213250;
3429
- --cds-ai-popover-caret-bottom-background-actions: #192436;
3430
- --cds-ai-popover-caret-center: #3f68af;
3431
- --cds-ai-popover-shadow-outer-01: rgba(0, 45, 156, 0.25);
3432
- --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.65);
3433
- --cds-ai-skeleton-background: #a6c8ff;
3434
- --cds-ai-skeleton-element-background: #002d9c;
3436
+ --cds-ai-drop-shadow: rgba(0, 0, 0, 0.28);
3437
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.16);
3438
+ --cds-ai-overlay: rgba(0, 0, 0, 0.5);
3439
+ --cds-ai-popover-background: #161616;
3440
+ --cds-ai-popover-caret-bottom: #4589ff;
3441
+ --cds-ai-popover-caret-bottom-background: #202d45;
3442
+ --cds-ai-popover-caret-bottom-background-actions: #1e283a;
3443
+ --cds-ai-popover-caret-center: #4870b5;
3444
+ --cds-ai-popover-shadow-outer-01: rgba(0, 0, 0, 0.12);
3445
+ --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.08);
3446
+ --cds-ai-skeleton-background: rgba(120, 169, 255, 0.5);
3447
+ --cds-ai-skeleton-element-background: rgba(120, 169, 255, 0.3);
3435
3448
  --cds-background: #161616;
3436
3449
  --cds-background-active: rgba(141, 141, 141, 0.4);
3437
3450
  --cds-background-brand: #0f62fe;
@@ -3460,8 +3473,14 @@ em {
3460
3473
  --cds-chat-avatar-bot: #8d8d8d;
3461
3474
  --cds-chat-avatar-user: #4589ff;
3462
3475
  --cds-chat-bubble-agent: #262626;
3463
- --cds-chat-bubble-agent-border: #525252;
3476
+ --cds-chat-bubble-border: #525252;
3464
3477
  --cds-chat-bubble-user: #393939;
3478
+ --cds-chat-button: #78a9ff;
3479
+ --cds-chat-button-active: rgba(141, 141, 141, 0.4);
3480
+ --cds-chat-button-hover: rgba(141, 141, 141, 0.16);
3481
+ --cds-chat-button-selected: rgba(141, 141, 141, 0.24);
3482
+ --cds-chat-button-text-hover: #a6c8ff;
3483
+ --cds-chat-button-text-selected: #c6c6c6;
3465
3484
  --cds-chat-header-background: #262626;
3466
3485
  --cds-chat-prompt-background: #161616;
3467
3486
  --cds-chat-prompt-border-end: rgba(38, 38, 38, 0);
@@ -3522,9 +3541,6 @@ em {
3522
3541
  --cds-shadow: rgba(0, 0, 0, 0.8);
3523
3542
  --cds-skeleton-background: #292929;
3524
3543
  --cds-skeleton-element: #393939;
3525
- --cds-slug-background: #c6c6c6;
3526
- --cds-slug-background-hover: #e0e0e0;
3527
- --cds-slug-hollow-hover: #b5b5b5;
3528
3544
  --cds-support-caution-major: #ff832b;
3529
3545
  --cds-support-caution-minor: #f1c21b;
3530
3546
  --cds-support-caution-undefined: #a56eff;
@@ -5561,7 +5577,7 @@ a.cds--overflow-menu-options__btn::before {
5561
5577
  }
5562
5578
  .cds--link:active, .cds--link:active:visited, .cds--link:active:visited:hover {
5563
5579
  outline: 1px solid var(--cds-focus, #0f62fe);
5564
- color: var(--cds-text-primary, #161616);
5580
+ color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe));
5565
5581
  outline-color: var(--cds-link-focus-text-color, var(--cds-focus, #0f62fe));
5566
5582
  text-decoration: underline;
5567
5583
  }
@@ -5581,10 +5597,10 @@ a.cds--overflow-menu-options__btn::before {
5581
5597
  }
5582
5598
  }
5583
5599
  .cds--link:visited {
5584
- color: var(--cds-link-primary, #0f62fe);
5600
+ color: var(--cds-link-visited-text-color, var(--cds-link-visited, #8a3ffc));
5585
5601
  }
5586
5602
  .cds--link:visited:hover {
5587
- color: var(--cds-link-primary-hover, #0043ce);
5603
+ color: var(--cds-link-visited-text-color, var(--cds-link-visited, #8a3ffc));
5588
5604
  }
5589
5605
 
5590
5606
  .cds--link--disabled,
@@ -5615,11 +5631,11 @@ a.cds--overflow-menu-options__btn::before {
5615
5631
  }
5616
5632
 
5617
5633
  .cds--link.cds--link--visited:visited {
5618
- color: var(--cds-link-visited, #8a3ffc);
5634
+ color: var(--cds-link-visited-text-color, var(--cds-link-visited, #8a3ffc));
5619
5635
  }
5620
5636
 
5621
5637
  .cds--link.cds--link--visited:visited:hover {
5622
- color: var(--cds-link-primary-hover, #0043ce);
5638
+ color: var(--cds-link-hover-text-color, var(--cds-link-primary-hover, #0043ce));
5623
5639
  }
5624
5640
 
5625
5641
  .cds--link.cds--link--inline {
@@ -5670,12 +5686,21 @@ a.cds--overflow-menu-options__btn::before {
5670
5686
 
5671
5687
  .cds--chat-btn--quick-action {
5672
5688
  align-items: center;
5673
- border: 1px solid var(--cds-link-primary, #0f62fe);
5689
+ border: 1px solid var(--cds-chat-button, #0f62fe);
5690
+ background: transparent;
5691
+ color: var(--cds-chat-button, #0f62fe);
5674
5692
  }
5675
5693
 
5676
5694
  .cds--chat-btn--quick-action:hover:not(:active):not([disabled]) {
5677
5695
  border-color: transparent;
5678
- background: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
5696
+ background: var(--cds-chat-button-hover, rgba(141, 141, 141, 0.12));
5697
+ color: var(--cds-chat-button-text-hover, #0043ce);
5698
+ }
5699
+
5700
+ .cds--chat-btn--quick-action:active {
5701
+ border-color: transparent;
5702
+ background: var(--cds-chat-button-active, rgba(141, 141, 141, 0.5));
5703
+ color: var(--cds-chat-button-text-hover, #0043ce);
5679
5704
  }
5680
5705
 
5681
5706
  .cds--chat-btn--quick-action.cds--btn--ghost:focus {
@@ -5698,12 +5723,13 @@ a.cds--overflow-menu-options__btn::before {
5698
5723
  .cds--chat-btn--quick-action--selected[disabled],
5699
5724
  .cds--chat-btn--quick-action--selected[disabled]:hover {
5700
5725
  border-color: transparent;
5701
- background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
5702
- color: var(--cds-text-secondary, #525252);
5726
+ background: var(--cds-chat-button-selected, rgba(141, 141, 141, 0.2));
5727
+ color: var(--cds-chat-button-text-selected, #525252);
5703
5728
  }
5704
5729
 
5705
- .cds--chat-btn--quick-action--selected:hover {
5706
- color: var(--cds-text-secondary, #525252);
5730
+ .cds--chat-btn--quick-action.cds--chat-btn--quick-action--selected:not([disabled]):hover,
5731
+ .cds--chat-btn--quick-action.cds--chat-btn--quick-action--selected:not([disabled]):active {
5732
+ color: var(--cds-chat-button-text-selected, #525252);
5707
5733
  }
5708
5734
 
5709
5735
  .cds--chat-btn.cds--skeleton {
@@ -7664,7 +7690,7 @@ fieldset[disabled] .cds--form__helper-text {
7664
7690
  }
7665
7691
 
7666
7692
  .cds--text-input__field-wrapper--slug .cds--text-input:not(:has(~ .cds--slug--revert)) {
7667
- background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
7693
+ background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
7668
7694
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
7669
7695
  padding-inline-end: 2.5rem;
7670
7696
  }
@@ -8484,17 +8510,17 @@ fieldset[disabled] .cds--form__helper-text {
8484
8510
  }
8485
8511
 
8486
8512
  .cds--list-box__field .cds--text-input {
8487
- padding-inline-end: 4.5rem;
8513
+ padding-inline-end: 5rem;
8488
8514
  }
8489
8515
 
8490
8516
  .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input,
8491
8517
  .cds--list-box--warning .cds--list-box__field .cds--text-input {
8492
- padding-inline-end: 6.125rem;
8518
+ padding-inline-end: 6.5625rem;
8493
8519
  }
8494
8520
 
8495
8521
  .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input + .cds--list-box__invalid-icon,
8496
8522
  .cds--list-box--warning .cds--list-box__field .cds--text-input + .cds--list-box__invalid-icon {
8497
- inset-inline-end: 4.125rem;
8523
+ inset-inline-end: 5.125rem;
8498
8524
  }
8499
8525
 
8500
8526
  .cds--list-box__field .cds--text-input--empty {
@@ -8598,7 +8624,7 @@ fieldset[disabled] .cds--form__helper-text {
8598
8624
  inline-size: 1.5rem;
8599
8625
  inset-block-start: 50%;
8600
8626
  /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
8601
- inset-inline-end: 2.25rem;
8627
+ inset-inline-end: 2.8125rem;
8602
8628
  transform: translateY(-50%);
8603
8629
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
8604
8630
  -webkit-user-select: none;
@@ -9028,12 +9054,32 @@ fieldset[disabled] .cds--form__helper-text {
9028
9054
  .cds--list-box__wrapper--slug .cds--slug {
9029
9055
  position: absolute;
9030
9056
  inset-block-start: 50%;
9031
- inset-inline-end: 2.5rem;
9057
+ inset-inline-end: calc(2.5rem + 9px);
9058
+ margin-block-start: 0.03125rem;
9032
9059
  transform: translateY(-50%);
9033
9060
  }
9034
9061
 
9062
+ .cds--list-box__wrapper--slug .cds--slug::after,
9063
+ .cds--list-box__wrapper--slug .cds--slug::before {
9064
+ position: absolute;
9065
+ background-color: var(--cds-border-subtle-01, #c6c6c6);
9066
+ block-size: 1rem;
9067
+ content: "";
9068
+ inline-size: 0.0625rem;
9069
+ }
9070
+
9071
+ .cds--list-box__wrapper--slug .cds--slug::before {
9072
+ display: none;
9073
+ inset-inline-start: -0.5625rem;
9074
+ }
9075
+
9076
+ .cds--list-box__wrapper--slug .cds--slug::after {
9077
+ display: block;
9078
+ inset-inline-end: -0.5625rem;
9079
+ }
9080
+
9035
9081
  .cds--list-box__wrapper--slug .cds--list-box:not(:has(.cds--slug--revert)) {
9036
- background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
9082
+ background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
9037
9083
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
9038
9084
  }
9039
9085
 
@@ -9059,21 +9105,28 @@ fieldset[disabled] .cds--form__helper-text {
9059
9105
 
9060
9106
  .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input:not(.cds--text-input--empty),
9061
9107
  .cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty) {
9062
- padding-inline-end: 7.5rem;
9108
+ padding-inline-end: 8.8125rem;
9063
9109
  }
9064
9110
 
9065
- .cds--list-box__wrapper--slug .cds--list-box--invalid .cds--slug,
9066
- .cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug {
9067
- inset-inline-end: 4rem;
9111
+ .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input--empty + .cds--list-box__invalid-icon,
9112
+ .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--list-box__invalid-icon,
9113
+ .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__invalid-icon.cds--list-box__invalid-icon--warning {
9114
+ inset-inline-end: 5.1875rem;
9068
9115
  }
9069
9116
 
9070
- .cds--list-box__wrapper--slug .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug {
9071
- inset-inline-end: 4rem;
9117
+ .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--slug::before,
9118
+ .cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug::before {
9119
+ display: block;
9072
9120
  }
9073
9121
 
9074
- .cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug,
9122
+ .cds--list-box__wrapper--slug .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug,
9075
9123
  .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug {
9076
- inset-inline-end: 5.5rem;
9124
+ inset-inline-end: calc(4rem + 18px);
9125
+ }
9126
+
9127
+ .cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon,
9128
+ .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon {
9129
+ inset-inline-end: 7.25rem;
9077
9130
  }
9078
9131
 
9079
9132
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -9101,6 +9154,33 @@ fieldset[disabled] .cds--form__helper-text {
9101
9154
  }
9102
9155
  }
9103
9156
 
9157
+ .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::after {
9158
+ position: absolute;
9159
+ background-color: var(--cds-border-subtle-01, #c6c6c6);
9160
+ block-size: 1rem;
9161
+ content: "";
9162
+ inline-size: 0.0625rem;
9163
+ margin-inline-start: 2.0625rem;
9164
+ }
9165
+
9166
+ .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before,
9167
+ .cds--list-box--invalid[data-invalid] .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before {
9168
+ position: absolute;
9169
+ background-color: var(--cds-border-subtle-01, #c6c6c6);
9170
+ block-size: 1rem;
9171
+ content: "";
9172
+ inline-size: 0.0625rem;
9173
+ margin-inline-end: 2.0625rem;
9174
+ }
9175
+
9176
+ .cds--list-box__wrapper--slug:has(.cds--multi-select) .cds--list-box__menu-icon {
9177
+ inset-inline-end: calc(0.75rem - 4px);
9178
+ }
9179
+
9180
+ .cds--list-box__wrapper--slug:has(.cds--dropdown) .cds--list-box__menu-icon {
9181
+ inset-inline-end: calc(0.75rem - 4px);
9182
+ }
9183
+
9104
9184
  .cds--combo-box:hover {
9105
9185
  background-color: var(--cds-field);
9106
9186
  }
@@ -10930,7 +11010,7 @@ tr.cds--data-table--selected:last-of-type td {
10930
11010
 
10931
11011
  tr.cds--data-table--slug-row,
10932
11012
  tr.cds--data-table--slug-row + .cds--expandable-row {
10933
- background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
11013
+ background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
10934
11014
  background-attachment: fixed;
10935
11015
  }
10936
11016
 
@@ -10957,14 +11037,14 @@ tr.cds--data-table--slug-row:hover + .cds--expandable-row[data-child-row],
10957
11037
  tr.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover,
10958
11038
  tr.cds--expandable-row--hover.cds--data-table--slug-row,
10959
11039
  tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--slug-row {
10960
- background: linear-gradient(to right, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.4)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%), var(--cds-ai-aura-hover-background, #edf5ff);
11040
+ background: linear-gradient(to right, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%), var(--cds-ai-aura-hover-background, #edf5ff);
10961
11041
  background-attachment: fixed;
10962
11042
  }
10963
11043
 
10964
11044
  tr.cds--parent-row.cds--data-table--selected.cds--data-table--slug-row,
10965
11045
  .cds--data-table--selected.cds--data-table--slug-row,
10966
11046
  tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row {
10967
- background: linear-gradient(to right, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), var(--cds-layer-selected);
11047
+ background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), var(--cds-layer-selected);
10968
11048
  background-attachment: fixed;
10969
11049
  }
10970
11050
 
@@ -10985,7 +11065,7 @@ tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-
10985
11065
 
10986
11066
  .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
10987
11067
  .cds--data-table thead th:has(> .cds--table-header-label--slug) {
10988
- background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
11068
+ background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
10989
11069
  }
10990
11070
 
10991
11071
  .cds--table-column-slug .cds--slug {
@@ -11013,11 +11093,11 @@ th:has(.cds--table-header-label--slug) {
11013
11093
  }
11014
11094
 
11015
11095
  td.cds--table-cell--column-slug {
11016
- background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
11096
+ background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
11017
11097
  }
11018
11098
 
11019
11099
  tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug {
11020
- border-block-start: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
11100
+ border-block-start: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
11021
11101
  }
11022
11102
 
11023
11103
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -13527,7 +13607,7 @@ th .cds--table-sort__flex {
13527
13607
  }
13528
13608
 
13529
13609
  .cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(:has(~ .cds--slug--revert)) {
13530
- background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
13610
+ background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
13531
13611
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
13532
13612
  padding-inline-end: 4rem;
13533
13613
  }
@@ -14950,6 +15030,28 @@ button.cds--dropdown-text:focus {
14950
15030
  padding-inline-end: 6rem;
14951
15031
  }
14952
15032
 
15033
+ .cds--list-box__wrapper--fluid .cds--list-box__selection {
15034
+ inset-inline-end: 2.5625rem;
15035
+ }
15036
+
15037
+ .cds--list-box__wrapper--fluid .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before,
15038
+ .cds--list-box__wrapper--fluid .cds--list-box--invalid[data-invalid] .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before {
15039
+ position: absolute;
15040
+ background-color: transparent;
15041
+ block-size: 1rem;
15042
+ content: "";
15043
+ inline-size: 0.0625rem;
15044
+ margin-inline-end: 2.0625rem;
15045
+ }
15046
+
15047
+ .cds--list-box__wrapper--fluid:has(.cds--multi-select) .cds--list-box__menu-icon {
15048
+ inset-inline-end: 0.75rem;
15049
+ }
15050
+
15051
+ .cds--list-box__wrapper--fluid:has(.cds--dropdown) .cds--list-box__menu-icon {
15052
+ inset-inline-end: 0.75rem;
15053
+ }
15054
+
14953
15055
  .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__field {
14954
15056
  overflow: visible;
14955
15057
  padding: 0;
@@ -15258,7 +15360,7 @@ button.cds--dropdown-text:focus {
15258
15360
  }
15259
15361
 
15260
15362
  .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug:not(:has(~ .cds--slug--revert)) {
15261
- background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
15363
+ background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
15262
15364
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
15263
15365
  }
15264
15366
 
@@ -15820,7 +15922,7 @@ button.cds--dropdown-text:focus {
15820
15922
 
15821
15923
  .cds--number__input-wrapper--slug input[type=number]:not(:has(~ .cds--slug--revert)),
15822
15924
  .cds--number__input-wrapper--slug input[type=number]:disabled {
15823
- background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
15925
+ background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
15824
15926
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
15825
15927
  padding-inline-end: 7rem;
15826
15928
  }
@@ -16081,7 +16183,7 @@ button.cds--dropdown-text:focus {
16081
16183
  }
16082
16184
 
16083
16185
  .cds--number-input--fluid .cds--number__input-wrapper--slug:not(:has(~ .cds--slug--revert)) {
16084
- background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
16186
+ background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
16085
16187
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
16086
16188
  }
16087
16189
 
@@ -16123,6 +16225,7 @@ button.cds--dropdown-text:focus {
16123
16225
  }
16124
16226
 
16125
16227
  .cds--search--fluid .cds--search-magnifier-icon {
16228
+ color: var(--cds-icon-primary, #161616);
16126
16229
  inset: auto 1rem 0.8125rem auto;
16127
16230
  transform: none;
16128
16231
  }
@@ -16135,16 +16238,6 @@ button.cds--dropdown-text:focus {
16135
16238
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
16136
16239
  }
16137
16240
 
16138
- .cds--search--fluid .cds--search-close::before {
16139
- position: absolute;
16140
- display: block;
16141
- background: var(--cds-border-subtle);
16142
- block-size: 1rem;
16143
- content: "";
16144
- inline-size: 0.0625rem;
16145
- inset: auto -0.0625rem 0.875rem auto;
16146
- }
16147
-
16148
16241
  .cds--search--fluid .cds--search-input:focus ~ .cds--search-close:hover {
16149
16242
  outline: none;
16150
16243
  }
@@ -16460,7 +16553,7 @@ optgroup.cds--select-optgroup:disabled,
16460
16553
  }
16461
16554
 
16462
16555
  .cds--select--slug .cds--select-input:not(:has(~ .cds--slug--revert)) {
16463
- background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
16556
+ background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
16464
16557
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
16465
16558
  padding-inline-end: 4rem;
16466
16559
  }
@@ -16772,7 +16865,7 @@ optgroup.cds--select-optgroup:disabled,
16772
16865
  }
16773
16866
 
16774
16867
  .cds--text-area__wrapper--slug .cds--text-area:not(:has(~ .cds--slug--revert)) {
16775
- background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
16868
+ background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
16776
16869
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
16777
16870
  padding-inline-end: 2.5rem;
16778
16871
  }
@@ -16998,7 +17091,7 @@ optgroup.cds--select-optgroup:disabled,
16998
17091
  }
16999
17092
 
17000
17093
  .cds--text-area--fluid .cds--text-area__wrapper--slug:not(:has(~ .cds--slug--revert)) {
17001
- background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
17094
+ background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
17002
17095
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
17003
17096
  }
17004
17097
 
@@ -17945,15 +18038,15 @@ optgroup.cds--select-optgroup:disabled,
17945
18038
  }
17946
18039
 
17947
18040
  .cds--modal--slug .cds--modal-container {
17948
- background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
18041
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
17949
18042
  border: 1px solid transparent;
17950
18043
  background-color: var(--cds-layer);
17951
- box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
18044
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
17952
18045
  }
17953
18046
 
17954
18047
  .cds--modal--slug .cds--modal-container:has(.cds--modal-footer) {
17955
- background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) calc(0% + 64px), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
17956
- box-shadow: inset 0 -80px 0 -16px var(--cds-layer), inset 0 -160px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
18048
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) calc(0% + 64px), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
18049
+ box-shadow: inset 0 -80px 0 -16px var(--cds-layer), inset 0 -160px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
17957
18050
  }
17958
18051
 
17959
18052
  .cds--modal--slug .cds--slug {
@@ -20902,6 +20995,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20902
20995
  --cds-button-focus-color: var(--cds-focus-inverse, #ffffff);
20903
20996
  --cds-link-text-color: var(--cds-link-inverse, #78a9ff);
20904
20997
  --cds-link-hover-text-color: var(--cds-link-inverse, #78a9ff);
20998
+ --cds-link-visited-text-color: var(--cds-link-inverse, #78a9ff);
20905
20999
  --cds-link-focus-text-color: var(--cds-focus-inverse, #ffffff);
20906
21000
  font-size: var(--cds-body-01-font-size, 0.875rem);
20907
21001
  font-weight: var(--cds-body-01-font-weight, 400);
@@ -20941,142 +21035,85 @@ span.cds--pagination__text.cds--pagination__items-count {
20941
21035
  display: flex;
20942
21036
  align-items: center;
20943
21037
  justify-content: center;
20944
- color: var(--cds-text-inverse, #ffffff);
21038
+ border: 1px solid var(--cds-border-inverse, #161616);
21039
+ background: transparent;
21040
+ color: var(--cds-text-primary, #161616);
20945
21041
  font-weight: 600;
20946
- transition: color 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9);
21042
+ outline: none;
21043
+ transition: color 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), background 70ms cubic-bezier(0, 0, 0.38, 0.9);
20947
21044
  }
20948
21045
  .cds--slug .cds--slug__button--mini {
20949
21046
  height: 1rem;
20950
21047
  width: 1rem;
20951
21048
  font-size: 0.5625rem;
20952
21049
  line-height: 0.75rem;
20953
- background: var(--cds-slug-background, #525252);
20954
21050
  }
20955
21051
  .cds--slug .cds--slug__button--2xs {
20956
21052
  height: 1.25rem;
20957
21053
  width: 1.25rem;
20958
21054
  font-size: 0.75rem;
20959
21055
  line-height: 1rem;
20960
- background: var(--cds-slug-background, #525252);
20961
21056
  }
20962
21057
  .cds--slug .cds--slug__button--xs {
20963
21058
  height: 1.5rem;
20964
21059
  width: 1.5rem;
20965
21060
  font-size: 0.75rem;
20966
21061
  line-height: 1rem;
20967
- background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
20968
21062
  }
20969
21063
  .cds--slug .cds--slug__button--sm {
20970
21064
  height: 2rem;
20971
21065
  width: 2rem;
20972
21066
  font-size: 1rem;
20973
21067
  line-height: 1.3125rem;
20974
- background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
20975
21068
  }
20976
21069
  .cds--slug .cds--slug__button--md {
20977
21070
  height: 2.5rem;
20978
21071
  width: 2.5rem;
20979
21072
  font-size: 1rem;
20980
21073
  line-height: 1.3125rem;
20981
- background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
20982
21074
  }
20983
21075
  .cds--slug .cds--slug__button--lg {
20984
21076
  height: 3rem;
20985
21077
  width: 3rem;
20986
21078
  font-size: 1rem;
20987
21079
  line-height: 1.3125rem;
20988
- background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
20989
21080
  }
20990
21081
  .cds--slug .cds--slug__button--xl {
20991
21082
  height: 4rem;
20992
21083
  width: 4rem;
20993
21084
  font-size: 1.25rem;
20994
21085
  line-height: 1.625rem;
20995
- background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
20996
21086
  }
20997
21087
 
20998
21088
  .cds--slug .cds--slug__button:focus {
20999
- box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
21000
- outline: none;
21001
- }
21002
-
21003
- .cds--slug__text {
21004
- position: relative;
21005
- z-index: 1;
21006
- }
21007
-
21008
- .cds--slug__button::before {
21009
- position: absolute;
21010
- background: var(--cds-slug-gradient-hover, #161616 linear-gradient(135deg, #d1d1d1 0%, rgba(255, 255, 255, 0) 100%));
21011
- block-size: 100%;
21012
- content: "";
21013
- inline-size: 100%;
21014
- opacity: 0;
21015
- transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
21016
- }
21017
-
21018
- .cds--slug__button.cds--slug__button--mini::after,
21019
- .cds--slug__button.cds--slug__button--2xs::after {
21020
- position: absolute;
21021
- block-size: 1.5rem;
21022
- content: "";
21023
- inline-size: 1.5rem;
21024
- opacity: 0;
21025
- }
21026
-
21027
- .cds--slug__button:hover::before {
21028
- opacity: 1;
21089
+ border: 1px solid var(--cds-focus, #0f62fe);
21090
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
21029
21091
  }
21030
21092
 
21031
- .cds--slug .cds--slug__button:focus::before {
21032
- block-size: calc(100% - 6px);
21033
- inline-size: calc(100% - 6px);
21093
+ .cds--slug .cds--slug__button.cds--slug__button--mini:focus,
21094
+ .cds--slug .cds--slug__button.cds--slug__button--2xs:focus {
21095
+ box-shadow: none;
21034
21096
  }
21035
21097
 
21036
- .cds--slug__button.cds--slug__button--mini::before,
21037
- .cds--slug__button.cds--slug__button--2xs::before {
21038
- background: var(--cds-slug-background-hover, #6f6f6f);
21098
+ .cds--slug .cds--slug__button:hover {
21099
+ background: var(--cds-border-inverse, #161616);
21100
+ color: var(--cds-text-inverse, #ffffff);
21039
21101
  }
21040
21102
 
21041
- .cds--slug__button.cds--slug__button--mini:focus,
21042
- .cds--slug__button.cds--slug__button--2xs:focus {
21103
+ .cds--slug .cds--slug__button:hover:active {
21104
+ background: var(--cds-border-inverse, #161616);
21043
21105
  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-focus-inset, #ffffff);
21106
+ color: var(--cds-text-inverse, #ffffff);
21044
21107
  }
21045
21108
 
21046
- .cds--slug__button.cds--slug__button--mini:focus::before,
21047
- .cds--slug__button.cds--slug__button--2xs:focus::before {
21048
- block-size: calc(100% - 4px);
21049
- inline-size: calc(100% - 4px);
21050
- }
21051
-
21052
- .cds--slug__button--hollow.cds--slug__button--sm,
21053
- .cds--slug__button--hollow.cds--slug__button--md,
21054
- .cds--slug__button--hollow.cds--slug__button--lg,
21055
- .cds--slug__button--hollow.cds--slug__button--xl {
21056
- block-size: 1.5rem;
21057
- font-size: 0.75rem;
21058
- inline-size: 1.5rem;
21059
- line-height: 1rem;
21060
- }
21061
-
21062
- .cds--slug__button--hollow::before {
21063
- display: none;
21064
- }
21065
-
21066
- .cds--slug .cds--slug__button--hollow {
21067
- border: 1px solid var(--cds-border-inverse, #161616);
21068
- background: transparent;
21069
- color: var(--cds-text-primary, #161616);
21070
- }
21071
-
21072
- .cds--slug__button--hollow:hover {
21073
- border-color: var(--cds-slug-hollow-hover, #474747);
21074
- color: var(--cds-slug-hollow-hover, #474747);
21109
+ .cds--slug .cds--slug__button.cds--slug__button--mini:hover:active,
21110
+ .cds--slug .cds--slug__button.cds--slug__button--2xs:hover:active {
21111
+ box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
21075
21112
  }
21076
21113
 
21077
- .cds--slug__button--hollow:focus {
21078
- border-color: var(--cds-focus, #0f62fe);
21079
- box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
21114
+ .cds--slug__text {
21115
+ position: relative;
21116
+ z-index: 1;
21080
21117
  }
21081
21118
 
21082
21119
  .cds--slug .cds--slug__button--inline {
@@ -21100,8 +21137,11 @@ span.cds--pagination__text.cds--pagination__items-count {
21100
21137
  box-shadow: none;
21101
21138
  }
21102
21139
 
21103
- .cds--slug .cds--slug__button--inline:hover {
21140
+ .cds--slug .cds--slug__button--inline:hover,
21141
+ .cds--slug .cds--slug__button--inline:hover:active {
21104
21142
  border-color: var(--cds-icon-secondary, #525252);
21143
+ background: transparent;
21144
+ box-shadow: none;
21105
21145
  color: var(--cds-text-secondary, #525252);
21106
21146
  }
21107
21147
 
@@ -21113,16 +21153,12 @@ span.cds--pagination__text.cds--pagination__items-count {
21113
21153
  background: var(--cds-icon-secondary, #525252);
21114
21154
  }
21115
21155
 
21116
- .cds--slug--hollow .cds--slug__button--inline:hover .cds--slug__text::before {
21117
- background: transparent;
21118
- box-shadow: inset 0 0 0 1px var(--cds-icon-secondary, #525252);
21119
- }
21120
-
21121
21156
  .cds--slug__button--inline .cds--slug__text {
21122
21157
  padding-inline-start: 0.5rem;
21123
21158
  }
21124
21159
 
21125
- .cds--slug__button--inline.cds--slug__button--lg .cds--slug__text {
21160
+ .cds--slug__button--inline.cds--slug__button--lg .cds--slug__text,
21161
+ .cds--slug__button--inline.cds--slug__button--xl .cds--slug__text {
21126
21162
  padding-inline-start: 0.75rem;
21127
21163
  }
21128
21164
 
@@ -21140,20 +21176,8 @@ span.cds--pagination__text.cds--pagination__items-count {
21140
21176
  transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9);
21141
21177
  }
21142
21178
 
21143
- .cds--slug--hollow .cds--slug__text::before {
21144
- background: transparent;
21145
- block-size: 0.375rem;
21146
- box-shadow: inset 0 0 0 1px var(--cds-icon-primary, #161616);
21147
- inline-size: 0.375rem;
21148
- }
21149
-
21150
- .cds--slug--hollow .cds--slug__button--sm .cds--slug__text,
21151
- .cds--slug--hollow .cds--slug__button--md .cds--slug__text {
21152
- padding-inline-start: 0.5625rem;
21153
- }
21154
-
21155
21179
  .cds--slug__button--lg .cds--slug__text::before,
21156
- .cds--slug--hollow .cds--slug__button--lg .cds--slug__text::before {
21180
+ .cds--slug__button--xl .cds--slug__text::before {
21157
21181
  block-size: 0.5rem;
21158
21182
  inline-size: 0.5rem;
21159
21183
  }
@@ -21192,30 +21216,27 @@ span.cds--pagination__text.cds--pagination__items-count {
21192
21216
  font-size: 0.875rem;
21193
21217
  }
21194
21218
 
21195
- .cds--slug .cds--slug__button--inline-with-content:focus {
21219
+ .cds--slug .cds--slug__button--inline-with-content:focus,
21220
+ .cds--slug .cds--slug__button--inline-with-content:hover:focus {
21196
21221
  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
21197
21222
  }
21198
21223
 
21199
- .cds--slug.cds--slug--hollow .cds--toggletip-content {
21200
- row-gap: 0;
21201
- }
21202
-
21203
- .cds--slug.cds--slug--enabled .cds--slug-content {
21204
- background: linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
21224
+ .cds--slug .cds--slug-content {
21225
+ background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
21205
21226
  border: 1px solid transparent;
21206
21227
  border-radius: 0.5rem;
21207
- box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), -40px 30px 100px -25px var(--cds-ai-popover-shadow-outer-01, rgba(0, 67, 206, 0.25)), -60px 80px 60px -45px var(--cds-ai-popover-shadow-outer-02, rgba(0, 0, 0, 0.1));
21228
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), -40px 44px 60px -24px var(--cds-ai-popover-shadow-outer-01, rgba(0, 67, 206, 0.06)), -56px 64px 64px -24px var(--cds-ai-popover-shadow-outer-02, rgba(0, 0, 0, 0.04));
21208
21229
  color: var(--cds-text-primary, #161616);
21209
21230
  min-inline-size: 17.5rem;
21210
21231
  }
21211
21232
 
21212
- .cds--slug.cds--slug--enabled > .cds--toggletip > .cds--popover > .cds--popover-caret {
21233
+ .cds--slug > .cds--toggletip > .cds--popover > .cds--popover-caret {
21213
21234
  background: transparent;
21214
21235
  -webkit-clip-path: none;
21215
21236
  clip-path: none;
21216
21237
  }
21217
21238
 
21218
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
21239
+ .cds--slug > .cds--toggletip:is(.cds--popover--top,
21219
21240
  .cds--popover--top-right,
21220
21241
  .cds--popover--top-left,
21221
21242
  .cds--popover--bottom,
@@ -21229,7 +21250,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21229
21250
  .cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::before {
21230
21251
  position: absolute;
21231
21252
  display: block;
21232
- border: 1px solid var(--cds-ai-border-start, #78a9ff);
21253
+ border: 1px solid var(--cds-ai-border-start, rgba(166, 200, 255, 0.64));
21233
21254
  background: var(--cds-background, #ffffff);
21234
21255
  block-size: 0.75rem;
21235
21256
  -webkit-clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
@@ -21239,7 +21260,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21239
21260
  transform: rotate(45deg);
21240
21261
  }
21241
21262
 
21242
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
21263
+ .cds--slug > .cds--toggletip:is(.cds--popover--top,
21243
21264
  .cds--popover--top-right,
21244
21265
  .cds--popover--top-left,
21245
21266
  .cds--popover--bottom,
@@ -21259,16 +21280,16 @@ span.cds--pagination__text.cds--pagination__items-count {
21259
21280
  inline-size: 0.125rem;
21260
21281
  }
21261
21282
 
21262
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
21283
+ .cds--slug > .cds--toggletip:is(.cds--popover--top,
21263
21284
  .cds--popover--top-right,
21264
21285
  .cds--popover--top-left) > .cds--popover > .cds--popover-caret::before {
21265
21286
  inset-block-end: 0.0625rem;
21266
21287
  transform: rotate(-135deg);
21267
21288
  }
21268
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
21289
+ .cds--slug > .cds--toggletip:is(.cds--popover--top,
21269
21290
  .cds--popover--top-right,
21270
21291
  .cds--popover--top-left) > .cds--popover > .cds--popover-caret::after {
21271
- background: var(--cds-ai-popover-caret-bottom-background, #d5e5ff);
21292
+ background: var(--cds-ai-popover-caret-bottom-background, #eaf1ff);
21272
21293
  block-size: 0.125rem;
21273
21294
  border-end-end-radius: 50%;
21274
21295
  border-end-start-radius: 50%;
@@ -21277,19 +21298,19 @@ span.cds--pagination__text.cds--pagination__items-count {
21277
21298
  inset-inline-start: -0.0625rem;
21278
21299
  }
21279
21300
 
21280
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
21301
+ .cds--slug > .cds--toggletip:is(.cds--popover--top,
21281
21302
  .cds--popover--top-right,
21282
21303
  .cds--popover--top-left) > .cds--popover > .cds--slug-content--with-actions + .cds--popover-caret::after {
21283
21304
  display: none;
21284
21305
  }
21285
21306
 
21286
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--right,
21307
+ .cds--slug > .cds--toggletip:is(.cds--popover--right,
21287
21308
  .cds--popover--right-bottom,
21288
21309
  .cds--popover--right-top) > .cds--popover > .cds--popover-caret::before {
21289
21310
  inset-inline-start: 0.0625rem;
21290
21311
  transform: rotate(-45deg);
21291
21312
  }
21292
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--right,
21313
+ .cds--slug > .cds--toggletip:is(.cds--popover--right,
21293
21314
  .cds--popover--right-bottom,
21294
21315
  .cds--popover--right-top) > .cds--popover > .cds--popover-caret::after {
21295
21316
  border-end-start-radius: 50%;
@@ -21298,13 +21319,13 @@ span.cds--pagination__text.cds--pagination__items-count {
21298
21319
  inset-inline-start: 0.375rem;
21299
21320
  }
21300
21321
 
21301
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--bottom,
21322
+ .cds--slug > .cds--toggletip:is(.cds--popover--bottom,
21302
21323
  .cds--popover--bottom-left,
21303
21324
  .cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::before {
21304
21325
  inset-block-start: 0.0625rem;
21305
21326
  transform: rotate(45deg);
21306
21327
  }
21307
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--bottom,
21328
+ .cds--slug > .cds--toggletip:is(.cds--popover--bottom,
21308
21329
  .cds--popover--bottom-left,
21309
21330
  .cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::after {
21310
21331
  block-size: 0.125rem;
@@ -21315,13 +21336,13 @@ span.cds--pagination__text.cds--pagination__items-count {
21315
21336
  inset-inline-start: -0.0625rem;
21316
21337
  }
21317
21338
 
21318
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
21339
+ .cds--slug > .cds--toggletip:is(.cds--popover--left,
21319
21340
  .cds--popover--left-bottom,
21320
21341
  .cds--popover--left-top) > .cds--popover > .cds--popover-caret::before {
21321
21342
  inset-inline-end: 0.0625rem;
21322
21343
  transform: rotate(135deg);
21323
21344
  }
21324
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
21345
+ .cds--slug > .cds--toggletip:is(.cds--popover--left,
21325
21346
  .cds--popover--left-bottom,
21326
21347
  .cds--popover--left-top) > .cds--popover > .cds--popover-caret::after {
21327
21348
  border-end-end-radius: 50%;
@@ -21330,44 +21351,44 @@ span.cds--pagination__text.cds--pagination__items-count {
21330
21351
  inset-inline-start: -0.125rem;
21331
21352
  }
21332
21353
 
21333
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
21354
+ .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
21334
21355
  .cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::after {
21335
21356
  background: transparent;
21336
21357
  }
21337
21358
 
21338
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
21359
+ .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
21339
21360
  .cds--popover--right-bottom,
21340
21361
  .cds--popover--top,
21341
21362
  .cds--popover--top-right,
21342
21363
  .cds--popover--top-left) > .cds--popover > .cds--popover-caret::before {
21343
- border-color: var(--cds-ai-popover-caret-bottom, #d0e2ff);
21344
- background: var(--cds-ai-popover-caret-bottom-background, #d5e5ff);
21364
+ border-color: var(--cds-ai-popover-caret-bottom, #78a9ff);
21365
+ background: var(--cds-ai-popover-caret-bottom-background, #eaf1ff);
21345
21366
  }
21346
21367
 
21347
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
21368
+ .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
21348
21369
  .cds--popover--right-bottom,
21349
21370
  .cds--popover--top,
21350
21371
  .cds--popover--top-right,
21351
21372
  .cds--popover--top-left) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-caret::before {
21352
- background: var(--cds-ai-popover-caret-bottom-background-actions, #dae5f8);
21373
+ background: var(--cds-ai-popover-caret-bottom-background-actions, #e9effa);
21353
21374
  }
21354
21375
 
21355
- .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
21376
+ .cds--slug > .cds--toggletip:is(.cds--popover--left,
21356
21377
  .cds--popover--right) > .cds--popover > .cds--popover-caret::before {
21357
- border-color: var(--cds-ai-popover-caret-center, #a7c7ff);
21378
+ border-color: var(--cds-ai-popover-caret-center, #a0c3ff);
21358
21379
  }
21359
21380
 
21360
- .cds--slug.cds--slug--enabled .cds--toggletip-content {
21381
+ .cds--slug .cds--toggletip-content {
21361
21382
  padding-block-end: 5rem;
21362
21383
  padding-block-start: 1.5rem;
21363
21384
  padding-inline: 1.5rem;
21364
21385
  }
21365
21386
 
21366
- .cds--slug.cds--slug--enabled .cds--slug-content .cds--toggletip-content {
21387
+ .cds--slug .cds--slug-content .cds--toggletip-content {
21367
21388
  max-inline-size: 20rem;
21368
21389
  }
21369
21390
 
21370
- .cds--slug.cds--slug--enabled .cds--slug-actions {
21391
+ .cds--slug .cds--slug-actions {
21371
21392
  position: absolute;
21372
21393
  justify-content: flex-end;
21373
21394
  -webkit-backdrop-filter: blur(85px);
@@ -21382,12 +21403,12 @@ span.cds--pagination__text.cds--pagination__items-count {
21382
21403
  inset-inline-end: 0;
21383
21404
  }
21384
21405
 
21385
- .cds--slug.cds--slug--enabled .cds--slug-actions .cds--btn:focus {
21406
+ .cds--slug .cds--slug-actions .cds--btn:focus {
21386
21407
  border-color: var(--cds-focus, #0f62fe);
21387
21408
  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-background, #ffffff);
21388
21409
  }
21389
21410
 
21390
- .cds--slug.cds--slug--enabled .cds--slug-actions .cds--btn--primary {
21411
+ .cds--slug .cds--slug-actions .cds--btn--primary {
21391
21412
  order: 1;
21392
21413
  border-end-end-radius: 0.4375rem;
21393
21414
  }
@@ -22607,13 +22628,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22607
22628
  }
22608
22629
 
22609
22630
  .cds--tile--slug.cds--tile {
22610
- background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
22631
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
22611
22632
  border: 1px solid transparent;
22612
- box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
22633
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
22613
22634
  }
22614
22635
 
22615
22636
  .cds--tile--slug.cds--tile--expandable:hover {
22616
- background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
22637
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
22617
22638
  }
22618
22639
 
22619
22640
  .cds--tile--slug.cds--tile--selectable::before,
@@ -22632,8 +22653,8 @@ span.cds--pagination__text.cds--pagination__items-count {
22632
22653
 
22633
22654
  .cds--tile--slug.cds--tile--selectable::before,
22634
22655
  .cds--tile--slug.cds--tile--clickable::before {
22635
- background: linear-gradient(to top, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.4)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) border-box;
22636
- box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2));
22656
+ background: linear-gradient(to top, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) border-box;
22657
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
22637
22658
  }
22638
22659
 
22639
22660
  .cds--tile--slug.cds--tile--selectable:hover::before,
@@ -22643,7 +22664,7 @@ span.cds--pagination__text.cds--pagination__items-count {
22643
22664
 
22644
22665
  .cds--tile--slug.cds--tile--selectable::after {
22645
22666
  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-border-inverse, #161616), var(--cds-border-inverse, #161616)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
22646
- box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2));
22667
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
22647
22668
  }
22648
22669
 
22649
22670
  .cds--tile--slug.cds--tile--selectable:hover::after {