@carbon/styles 1.50.0-rc.0 → 1.51.0-rc.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.
package/css/styles.css CHANGED
@@ -2764,6 +2764,7 @@ em {
2764
2764
  --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
2765
2765
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
2766
2766
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
2767
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
2767
2768
  --cds-ai-border-end: #d0e2ff;
2768
2769
  --cds-ai-border-start: #78a9ff;
2769
2770
  --cds-ai-border-strong: #4589ff;
@@ -2772,6 +2773,7 @@ em {
2772
2773
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
2773
2774
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
2774
2775
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
2776
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
2775
2777
  --cds-background: #ffffff;
2776
2778
  --cds-background-active: rgba(141, 141, 141, 0.5);
2777
2779
  --cds-background-brand: #0f62fe;
@@ -2796,9 +2798,9 @@ em {
2796
2798
  --cds-border-tile-01: #c6c6c6;
2797
2799
  --cds-border-tile-02: #a8a8a8;
2798
2800
  --cds-border-tile-03: #c6c6c6;
2799
- --cds-chat-avatar-agent: #161616;
2800
- --cds-chat-avatar-bot: #0f62fe;
2801
- --cds-chat-avatar-user: #161616;
2801
+ --cds-chat-avatar-agent: #393939;
2802
+ --cds-chat-avatar-bot: #6f6f6f;
2803
+ --cds-chat-avatar-user: #0f62fe;
2802
2804
  --cds-chat-bubble-agent: #ffffff;
2803
2805
  --cds-chat-bubble-agent-border: #e0e0e0;
2804
2806
  --cds-chat-bubble-user: #e0e0e0;
@@ -2983,6 +2985,7 @@ em {
2983
2985
  --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
2984
2986
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
2985
2987
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
2988
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
2986
2989
  --cds-ai-border-end: #d0e2ff;
2987
2990
  --cds-ai-border-start: #78a9ff;
2988
2991
  --cds-ai-border-strong: #4589ff;
@@ -2991,6 +2994,7 @@ em {
2991
2994
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
2992
2995
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
2993
2996
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
2997
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
2994
2998
  --cds-background: #f4f4f4;
2995
2999
  --cds-background-active: rgba(141, 141, 141, 0.5);
2996
3000
  --cds-background-brand: #0f62fe;
@@ -3015,9 +3019,9 @@ em {
3015
3019
  --cds-border-tile-01: #a8a8a8;
3016
3020
  --cds-border-tile-02: #c6c6c6;
3017
3021
  --cds-border-tile-03: #a8a8a8;
3018
- --cds-chat-avatar-agent: #161616;
3019
- --cds-chat-avatar-bot: #0f62fe;
3020
- --cds-chat-avatar-user: #161616;
3022
+ --cds-chat-avatar-agent: #393939;
3023
+ --cds-chat-avatar-bot: #6f6f6f;
3024
+ --cds-chat-avatar-user: #0f62fe;
3021
3025
  --cds-chat-bubble-agent: #ffffff;
3022
3026
  --cds-chat-bubble-agent-border: #e0e0e0;
3023
3027
  --cds-chat-bubble-user: #e0e0e0;
@@ -3202,6 +3206,7 @@ em {
3202
3206
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
3203
3207
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
3204
3208
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
3209
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
3205
3210
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
3206
3211
  --cds-ai-border-start: #4589ff;
3207
3212
  --cds-ai-border-strong: #78a9ff;
@@ -3209,6 +3214,7 @@ em {
3209
3214
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
3210
3215
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
3211
3216
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3217
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
3212
3218
  --cds-background: #262626;
3213
3219
  --cds-background-active: rgba(141, 141, 141, 0.4);
3214
3220
  --cds-background-brand: #0f62fe;
@@ -3233,9 +3239,9 @@ em {
3233
3239
  --cds-border-tile-01: #6f6f6f;
3234
3240
  --cds-border-tile-02: #8d8d8d;
3235
3241
  --cds-border-tile-03: #a8a8a8;
3236
- --cds-chat-avatar-agent: #f4f4f4;
3237
- --cds-chat-avatar-bot: #4589ff;
3238
- --cds-chat-avatar-user: #f4f4f4;
3242
+ --cds-chat-avatar-agent: #c6c6c6;
3243
+ --cds-chat-avatar-bot: #8d8d8d;
3244
+ --cds-chat-avatar-user: #4589ff;
3239
3245
  --cds-chat-bubble-agent: #262626;
3240
3246
  --cds-chat-bubble-agent-border: #525252;
3241
3247
  --cds-chat-bubble-user: #393939;
@@ -3417,6 +3423,7 @@ em {
3417
3423
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
3418
3424
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
3419
3425
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
3426
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
3420
3427
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
3421
3428
  --cds-ai-border-start: #4589ff;
3422
3429
  --cds-ai-border-strong: #78a9ff;
@@ -3424,6 +3431,7 @@ em {
3424
3431
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
3425
3432
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
3426
3433
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3434
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
3427
3435
  --cds-background: #161616;
3428
3436
  --cds-background-active: rgba(141, 141, 141, 0.4);
3429
3437
  --cds-background-brand: #0f62fe;
@@ -3448,9 +3456,9 @@ em {
3448
3456
  --cds-border-tile-01: #525252;
3449
3457
  --cds-border-tile-02: #6f6f6f;
3450
3458
  --cds-border-tile-03: #8d8d8d;
3451
- --cds-chat-avatar-agent: #f4f4f4;
3452
- --cds-chat-avatar-bot: #4589ff;
3453
- --cds-chat-avatar-user: #f4f4f4;
3459
+ --cds-chat-avatar-agent: #c6c6c6;
3460
+ --cds-chat-avatar-bot: #8d8d8d;
3461
+ --cds-chat-avatar-user: #4589ff;
3454
3462
  --cds-chat-bubble-agent: #262626;
3455
3463
  --cds-chat-bubble-agent-border: #525252;
3456
3464
  --cds-chat-bubble-user: #393939;
@@ -3934,7 +3942,7 @@ li.cds--accordion__item--disabled:last-of-type {
3934
3942
  padding-block-start: 100%;
3935
3943
  }
3936
3944
 
3937
- @keyframes hide-feedback {
3945
+ @keyframes cds--hide-feedback {
3938
3946
  0% {
3939
3947
  opacity: 1;
3940
3948
  visibility: inherit;
@@ -3944,7 +3952,7 @@ li.cds--accordion__item--disabled:last-of-type {
3944
3952
  visibility: hidden;
3945
3953
  }
3946
3954
  }
3947
- @keyframes show-feedback {
3955
+ @keyframes cds--show-feedback {
3948
3956
  0% {
3949
3957
  opacity: 0;
3950
3958
  visibility: hidden;
@@ -3954,7 +3962,7 @@ li.cds--accordion__item--disabled:last-of-type {
3954
3962
  visibility: inherit;
3955
3963
  }
3956
3964
  }
3957
- @keyframes skeleton {
3965
+ @keyframes cds--skeleton {
3958
3966
  0% {
3959
3967
  opacity: 0.3;
3960
3968
  transform: scaleX(0);
@@ -4863,7 +4871,7 @@ li.cds--accordion__item--disabled:last-of-type {
4863
4871
  }
4864
4872
  .cds--btn.cds--skeleton::before {
4865
4873
  position: absolute;
4866
- animation: 3000ms ease-in-out skeleton infinite;
4874
+ animation: 3000ms ease-in-out cds--skeleton infinite;
4867
4875
  background: var(--cds-skeleton-element, #c6c6c6);
4868
4876
  block-size: 100%;
4869
4877
  content: "";
@@ -5498,7 +5506,7 @@ a.cds--overflow-menu-options__btn::before {
5498
5506
  }
5499
5507
  .cds--breadcrumb.cds--skeleton .cds--link::before {
5500
5508
  position: absolute;
5501
- animation: 3000ms ease-in-out skeleton infinite;
5509
+ animation: 3000ms ease-in-out cds--skeleton infinite;
5502
5510
  background: var(--cds-skeleton-element, #c6c6c6);
5503
5511
  block-size: 100%;
5504
5512
  content: "";
@@ -5632,6 +5640,60 @@ a.cds--overflow-menu-options__btn::before {
5632
5640
  margin-inline-start: 0.5rem;
5633
5641
  }
5634
5642
 
5643
+ .cds--chat-btn {
5644
+ border-radius: 1.5rem;
5645
+ }
5646
+
5647
+ .cds--chat-btn.cds--btn--md {
5648
+ border-radius: 1.25rem;
5649
+ }
5650
+
5651
+ .cds--chat-btn.cds--btn--sm {
5652
+ border-radius: 1rem;
5653
+ }
5654
+
5655
+ .cds--chat-btn--quick-action {
5656
+ align-items: center;
5657
+ border: 1px solid var(--cds-link-primary, #0f62fe);
5658
+ }
5659
+
5660
+ .cds--chat-btn--quick-action:hover:not(:active):not([disabled]) {
5661
+ border-color: transparent;
5662
+ background: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
5663
+ }
5664
+
5665
+ .cds--chat-btn--quick-action.cds--btn--ghost:focus {
5666
+ border-color: var(--cds-focus, #0f62fe);
5667
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
5668
+ }
5669
+
5670
+ .cds--chat-btn--quick-action.cds--btn--ghost:hover:focus {
5671
+ border-color: var(--cds-focus, #0f62fe);
5672
+ box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
5673
+ }
5674
+
5675
+ .cds--chat-btn--quick-action[disabled],
5676
+ .cds--chat-btn--quick-action[disabled]:hover {
5677
+ border-color: var(--cds-button-disabled, #c6c6c6);
5678
+ color: var(--cds-button-disabled, #c6c6c6);
5679
+ }
5680
+
5681
+ .cds--chat-btn--quick-action--selected,
5682
+ .cds--chat-btn--quick-action--selected[disabled],
5683
+ .cds--chat-btn--quick-action--selected[disabled]:hover {
5684
+ border-color: transparent;
5685
+ background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
5686
+ color: var(--cds-text-secondary, #525252);
5687
+ }
5688
+
5689
+ .cds--chat-btn--quick-action--selected:hover {
5690
+ color: var(--cds-text-secondary, #525252);
5691
+ }
5692
+
5693
+ .cds--chat-btn.cds--skeleton {
5694
+ overflow: hidden;
5695
+ }
5696
+
5635
5697
  input:-webkit-autofill,
5636
5698
  input:-webkit-autofill:hover,
5637
5699
  input:-webkit-autofill:focus,
@@ -5783,7 +5845,7 @@ textarea:-webkit-autofill:focus {
5783
5845
  }
5784
5846
  .cds--label.cds--skeleton::before {
5785
5847
  position: absolute;
5786
- animation: 3000ms ease-in-out skeleton infinite;
5848
+ animation: 3000ms ease-in-out cds--skeleton infinite;
5787
5849
  background: var(--cds-skeleton-element, #c6c6c6);
5788
5850
  block-size: 100%;
5789
5851
  content: "";
@@ -6206,7 +6268,7 @@ fieldset[disabled] .cds--form__helper-text {
6206
6268
  }
6207
6269
  .cds--checkbox-label-text.cds--skeleton::before {
6208
6270
  position: absolute;
6209
- animation: 3000ms ease-in-out skeleton infinite;
6271
+ animation: 3000ms ease-in-out cds--skeleton infinite;
6210
6272
  background: var(--cds-skeleton-element, #c6c6c6);
6211
6273
  block-size: 100%;
6212
6274
  content: "";
@@ -6352,10 +6414,10 @@ fieldset[disabled] .cds--form__helper-text {
6352
6414
  border: none;
6353
6415
  }
6354
6416
  .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
6355
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
6417
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback;
6356
6418
  }
6357
6419
  .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
6358
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
6420
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback;
6359
6421
  }
6360
6422
 
6361
6423
  .cds--copy-btn svg {
@@ -6509,12 +6571,12 @@ fieldset[disabled] .cds--form__helper-text {
6509
6571
 
6510
6572
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out::before,
6511
6573
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
6512
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
6574
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback;
6513
6575
  }
6514
6576
 
6515
6577
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in::before,
6516
6578
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
6517
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
6579
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback;
6518
6580
  }
6519
6581
 
6520
6582
  .cds--snippet--inline code {
@@ -6943,7 +7005,7 @@ fieldset[disabled] .cds--form__helper-text {
6943
7005
  }
6944
7006
  .cds--snippet.cds--skeleton span::before {
6945
7007
  position: absolute;
6946
- animation: 3000ms ease-in-out skeleton infinite;
7008
+ animation: 3000ms ease-in-out cds--skeleton infinite;
6947
7009
  background: var(--cds-skeleton-element, #c6c6c6);
6948
7010
  block-size: 100%;
6949
7011
  content: "";
@@ -7211,7 +7273,7 @@ fieldset[disabled] .cds--form__helper-text {
7211
7273
  .cds--text-input--password__visibility.cds--tooltip--visible::before, .cds--text-input--password__visibility.cds--tooltip--visible::after, .cds--text-input--password__visibility:hover::before, .cds--text-input--password__visibility:hover::after, .cds--text-input--password__visibility:focus::before, .cds--text-input--password__visibility:focus::after {
7212
7274
  opacity: 1;
7213
7275
  }
7214
- @keyframes tooltip-fade {
7276
+ @keyframes cds--tooltip-fade {
7215
7277
  from {
7216
7278
  opacity: 0;
7217
7279
  }
@@ -7231,7 +7293,7 @@ fieldset[disabled] .cds--form__helper-text {
7231
7293
  .cds--text-input--password__visibility.cds--tooltip--visible + .cds--assistive-text, .cds--text-input--password__visibility.cds--tooltip--visible.cds--tooltip--a11y::before, .cds--text-input--password__visibility:hover .cds--assistive-text,
7232
7294
  .cds--text-input--password__visibility:hover + .cds--assistive-text, .cds--text-input--password__visibility:hover.cds--tooltip--a11y::before, .cds--text-input--password__visibility:focus .cds--assistive-text,
7233
7295
  .cds--text-input--password__visibility:focus + .cds--assistive-text, .cds--text-input--password__visibility:focus.cds--tooltip--a11y::before {
7234
- animation: tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
7296
+ animation: cds--tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
7235
7297
  }
7236
7298
  .cds--text-input--password__visibility.cds--tooltip--hidden .cds--assistive-text, .cds--text-input--password__visibility.cds--tooltip--hidden + .cds--assistive-text {
7237
7299
  overflow: hidden;
@@ -7413,7 +7475,7 @@ fieldset[disabled] .cds--form__helper-text {
7413
7475
  }
7414
7476
  .cds--skeleton.cds--text-input::before {
7415
7477
  position: absolute;
7416
- animation: 3000ms ease-in-out skeleton infinite;
7478
+ animation: 3000ms ease-in-out cds--skeleton infinite;
7417
7479
  background: var(--cds-skeleton-element, #c6c6c6);
7418
7480
  block-size: 100%;
7419
7481
  content: "";
@@ -7896,7 +7958,7 @@ fieldset[disabled] .cds--form__helper-text {
7896
7958
  }
7897
7959
  .cds--tag.cds--skeleton::before {
7898
7960
  position: absolute;
7899
- animation: 3000ms ease-in-out skeleton infinite;
7961
+ animation: 3000ms ease-in-out cds--skeleton infinite;
7900
7962
  background: var(--cds-skeleton-element, #c6c6c6);
7901
7963
  block-size: 100%;
7902
7964
  content: "";
@@ -9893,7 +9955,7 @@ fieldset[disabled] .cds--form__helper-text {
9893
9955
  }
9894
9956
  .cds--radio-button__label.cds--skeleton::before {
9895
9957
  position: absolute;
9896
- animation: 3000ms ease-in-out skeleton infinite;
9958
+ animation: 3000ms ease-in-out cds--skeleton infinite;
9897
9959
  background: var(--cds-skeleton-element, #c6c6c6);
9898
9960
  block-size: 100%;
9899
9961
  content: "";
@@ -10681,20 +10743,67 @@ tr.cds--data-table--selected:last-of-type td {
10681
10743
  padding-inline-end: 0;
10682
10744
  }
10683
10745
 
10684
- .cds--data-table tbody tr:has(> .cds--table-column-slug--active) {
10685
- background-image: linear-gradient(90deg, 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%);
10686
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
10746
+ tr.cds--data-table--slug-row,
10747
+ tr.cds--data-table--slug-row + .cds--expandable-row {
10748
+ 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%);
10687
10749
  background-attachment: fixed;
10688
10750
  }
10689
10751
 
10752
+ .cds--data-table--slug-row {
10753
+ box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
10754
+ }
10755
+
10756
+ .cds--data-table tbody tr.cds--data-table--slug-row:hover td,
10757
+ tr.cds--data-table--slug-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td,
10758
+ tr.cds--data-table--slug-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td,
10759
+ tr.cds--data-table--slug-row.cds--expandable-row--hover > td,
10760
+ tr.cds--data-table--selected.cds--data-table--slug-row.cds--expandable-row + tr.cds--expandable-row[data-child-row] > td,
10761
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
10762
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
10763
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td,
10764
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td,
10765
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td,
10766
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td:first-of-type {
10767
+ background-color: transparent;
10768
+ }
10769
+
10770
+ .cds--data-table tbody tr.cds--data-table--slug-row:hover,
10771
+ tr.cds--data-table--slug-row:hover + .cds--expandable-row[data-child-row],
10772
+ tr.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover,
10773
+ tr.cds--expandable-row--hover.cds--data-table--slug-row,
10774
+ tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--slug-row {
10775
+ 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);
10776
+ }
10777
+
10778
+ tr.cds--parent-row.cds--data-table--selected.cds--data-table--slug-row,
10779
+ .cds--data-table--selected.cds--data-table--slug-row,
10780
+ tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row {
10781
+ 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);
10782
+ }
10783
+
10784
+ tr.cds--data-table--slug-row.cds--data-table--selected td,
10785
+ tr.cds--data-table--slug-row.cds--data-table--selected:hover td,
10786
+ tbody tr.cds--data-table--slug-row:hover td,
10787
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
10788
+ border-block-end-color: var(--cds-border-subtle);
10789
+ }
10790
+
10791
+ tr.cds--expandable-row.cds--data-table--selected.cds--data-table--slug-row[data-parent-row] > td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
10792
+ border-block-end: 1px solid var(--cds-layer-selected);
10793
+ }
10794
+
10795
+ tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type {
10796
+ border-block-end: 1px solid transparent;
10797
+ }
10798
+
10690
10799
  .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
10691
10800
  .cds--data-table thead th:has(> .cds--table-header-label--slug) {
10692
- background-image: linear-gradient(180deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
10693
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
10801
+ 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%);
10694
10802
  }
10695
10803
 
10696
10804
  .cds--table-column-slug .cds--slug {
10697
10805
  position: absolute;
10806
+ z-index: 2;
10698
10807
  transform: translateY(-50%);
10699
10808
  }
10700
10809
 
@@ -10708,10 +10817,24 @@ th .cds--table-header-label.cds--table-header-label--slug {
10708
10817
  }
10709
10818
 
10710
10819
  th .cds--table-header-label.cds--table-header-label--slug .cds--slug {
10711
- margin-inline-start: 0.5rem;
10820
+ margin-inline-start: auto;
10821
+ }
10822
+
10823
+ th.cds--table-sort__header--slug,
10824
+ th:has(.cds--table-header-label--slug) {
10825
+ box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
10826
+ }
10827
+
10828
+ td.cds--table-cell--column-slug {
10829
+ 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%);
10830
+ }
10831
+
10832
+ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug {
10833
+ 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%);
10712
10834
  }
10713
10835
 
10714
10836
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
10837
+ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug,
10715
10838
  .cds--data-table-content {
10716
10839
  outline: 1px solid transparent;
10717
10840
  }
@@ -11074,7 +11197,7 @@ th .cds--table-header-label.cds--table-header-label--slug .cds--slug {
11074
11197
  .cds--search--md.cds--skeleton .cds--search-input::before,
11075
11198
  .cds--search--sm.cds--skeleton .cds--search-input::before {
11076
11199
  position: absolute;
11077
- animation: 3000ms ease-in-out skeleton infinite;
11200
+ animation: 3000ms ease-in-out cds--skeleton infinite;
11078
11201
  background: var(--cds-skeleton-element, #c6c6c6);
11079
11202
  block-size: 100%;
11080
11203
  content: "";
@@ -11814,12 +11937,12 @@ tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
11814
11937
  transition: padding-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11815
11938
  }
11816
11939
 
11817
- tbody:has(> tr.cds--parent-row--slug) > tr.cds--expandable-row[data-child-row] td,
11940
+ tbody:has(> tr.cds--data-table--slug-row) > tr.cds--expandable-row[data-child-row] td,
11818
11941
  tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
11819
11942
  padding-inline-start: 5.5rem;
11820
11943
  }
11821
11944
 
11822
- tbody:has(> tr.cds--parent-row--slug):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
11945
+ tbody:has(> tr.cds--data-table--slug-row):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
11823
11946
  padding-inline-start: 7.5rem;
11824
11947
  }
11825
11948
 
@@ -12114,8 +12237,8 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
12114
12237
  border-block-end: 1px solid transparent;
12115
12238
  }
12116
12239
 
12117
- .cds--parent-row--slug td,
12118
- .cds--data-table tr.cds--parent-row--slug:hover td {
12240
+ .cds--data-table--slug-row td,
12241
+ .cds--data-table tr.cds--data-table--slug-row:hover td {
12119
12242
  border-block-start: 1px solid transparent;
12120
12243
  }
12121
12244
 
@@ -12160,7 +12283,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
12160
12283
  .cds--data-table.cds--skeleton th span::before,
12161
12284
  .cds--data-table.cds--skeleton td span::before {
12162
12285
  position: absolute;
12163
- animation: 3000ms ease-in-out skeleton infinite;
12286
+ animation: 3000ms ease-in-out cds--skeleton infinite;
12164
12287
  background: var(--cds-skeleton-element, #c6c6c6);
12165
12288
  block-size: 100%;
12166
12289
  content: "";
@@ -12213,7 +12336,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
12213
12336
  }
12214
12337
  .cds--data-table-container.cds--skeleton .cds--data-table-header__title::before {
12215
12338
  position: absolute;
12216
- animation: 3000ms ease-in-out skeleton infinite;
12339
+ animation: 3000ms ease-in-out cds--skeleton infinite;
12217
12340
  background: var(--cds-skeleton-element, #c6c6c6);
12218
12341
  block-size: 100%;
12219
12342
  content: "";
@@ -12244,7 +12367,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
12244
12367
  }
12245
12368
  .cds--data-table-container.cds--skeleton .cds--data-table-header__description::before {
12246
12369
  position: absolute;
12247
- animation: 3000ms ease-in-out skeleton infinite;
12370
+ animation: 3000ms ease-in-out cds--skeleton infinite;
12248
12371
  background: var(--cds-skeleton-element, #c6c6c6);
12249
12372
  block-size: 100%;
12250
12373
  content: "";
@@ -12464,9 +12587,14 @@ th .cds--table-sort__flex {
12464
12587
  margin-block-start: 0.8125rem;
12465
12588
  }
12466
12589
 
12590
+ .cds--table-sort__header--slug .cds--table-sort__icon,
12591
+ .cds--table-sort__header--slug .cds--table-sort__icon-unsorted {
12592
+ margin-inline-end: 0.5rem;
12593
+ margin-inline-start: auto;
12594
+ }
12595
+
12467
12596
  .cds--table-sort__header--slug .cds--slug {
12468
- margin-inline-end: auto;
12469
- margin-inline-start: 0.5rem;
12597
+ margin-inline-end: 0.5rem;
12470
12598
  }
12471
12599
 
12472
12600
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -13248,7 +13376,7 @@ th .cds--table-sort__flex {
13248
13376
  .cds--date-picker.cds--skeleton input::before,
13249
13377
  .cds--date-picker__input.cds--skeleton::before {
13250
13378
  position: absolute;
13251
- animation: 3000ms ease-in-out skeleton infinite;
13379
+ animation: 3000ms ease-in-out cds--skeleton infinite;
13252
13380
  background: var(--cds-skeleton-element, #c6c6c6);
13253
13381
  block-size: 100%;
13254
13382
  content: "";
@@ -13286,7 +13414,7 @@ th .cds--table-sort__flex {
13286
13414
  }
13287
13415
  .cds--date-picker.cds--skeleton .cds--label::before {
13288
13416
  position: absolute;
13289
- animation: 3000ms ease-in-out skeleton infinite;
13417
+ animation: 3000ms ease-in-out cds--skeleton infinite;
13290
13418
  background: var(--cds-skeleton-element, #c6c6c6);
13291
13419
  block-size: 100%;
13292
13420
  content: "";
@@ -13756,7 +13884,7 @@ button.cds--dropdown-text:focus {
13756
13884
  .cds--dropdown-v2.cds--skeleton::before,
13757
13885
  .cds--dropdown.cds--skeleton::before {
13758
13886
  position: absolute;
13759
- animation: 3000ms ease-in-out skeleton infinite;
13887
+ animation: 3000ms ease-in-out cds--skeleton infinite;
13760
13888
  background: var(--cds-skeleton-element, #c6c6c6);
13761
13889
  block-size: 100%;
13762
13890
  content: "";
@@ -13814,7 +13942,7 @@ button.cds--dropdown-text:focus {
13814
13942
  animation-duration: 690ms;
13815
13943
  animation-fill-mode: forwards;
13816
13944
  animation-iteration-count: infinite;
13817
- animation-name: rotate;
13945
+ animation-name: cds--rotate;
13818
13946
  animation-timing-function: linear;
13819
13947
  block-size: 5.5rem;
13820
13948
  inline-size: 5.5rem;
@@ -13826,7 +13954,7 @@ button.cds--dropdown-text:focus {
13826
13954
  }
13827
13955
  .cds--loading svg circle {
13828
13956
  animation-duration: 10ms;
13829
- animation-name: init-stroke;
13957
+ animation-name: cds--init-stroke;
13830
13958
  animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
13831
13959
  }
13832
13960
  @media screen and (prefers-reduced-motion: reduce) {
@@ -13855,13 +13983,13 @@ button.cds--dropdown-text:focus {
13855
13983
  }
13856
13984
 
13857
13985
  .cds--loading--stop {
13858
- animation: rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
13986
+ animation: cds--rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, cds--rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
13859
13987
  }
13860
13988
  .cds--loading--stop svg circle {
13861
13989
  animation-delay: 700ms;
13862
13990
  animation-duration: 700ms;
13863
13991
  animation-fill-mode: forwards;
13864
- animation-name: stroke-end;
13992
+ animation-name: cds--stroke-end;
13865
13993
  animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
13866
13994
  }
13867
13995
  @media screen and (prefers-reduced-motion: reduce) {
@@ -13914,7 +14042,7 @@ button.cds--dropdown-text:focus {
13914
14042
  display: none;
13915
14043
  }
13916
14044
 
13917
- @keyframes rotate {
14045
+ @keyframes cds--rotate {
13918
14046
  0% {
13919
14047
  transform: rotate(0deg);
13920
14048
  }
@@ -13922,18 +14050,18 @@ button.cds--dropdown-text:focus {
13922
14050
  transform: rotate(360deg);
13923
14051
  }
13924
14052
  }
13925
- @keyframes rotate-end-p1 {
14053
+ @keyframes cds--rotate-end-p1 {
13926
14054
  100% {
13927
14055
  transform: rotate(360deg);
13928
14056
  }
13929
14057
  }
13930
- @keyframes rotate-end-p2 {
14058
+ @keyframes cds--rotate-end-p2 {
13931
14059
  100% {
13932
14060
  transform: rotate(-360deg);
13933
14061
  }
13934
14062
  }
13935
14063
  /* Stroke animations */
13936
- @keyframes init-stroke {
14064
+ @keyframes cds--init-stroke {
13937
14065
  0% {
13938
14066
  stroke-dashoffset: 276.4608;
13939
14067
  }
@@ -13941,7 +14069,7 @@ button.cds--dropdown-text:focus {
13941
14069
  stroke-dashoffset: 52.527552;
13942
14070
  }
13943
14071
  }
13944
- @keyframes stroke-end {
14072
+ @keyframes cds--stroke-end {
13945
14073
  0% {
13946
14074
  stroke-dashoffset: 52.527552;
13947
14075
  }
@@ -15527,7 +15655,7 @@ button.cds--dropdown-text:focus {
15527
15655
  }
15528
15656
  .cds--number.cds--skeleton::before {
15529
15657
  position: absolute;
15530
- animation: 3000ms ease-in-out skeleton infinite;
15658
+ animation: 3000ms ease-in-out cds--skeleton infinite;
15531
15659
  background: var(--cds-skeleton-element, #c6c6c6);
15532
15660
  block-size: 100%;
15533
15661
  content: "";
@@ -16116,7 +16244,7 @@ optgroup.cds--select-optgroup:disabled,
16116
16244
  }
16117
16245
  .cds--select.cds--skeleton::before {
16118
16246
  position: absolute;
16119
- animation: 3000ms ease-in-out skeleton infinite;
16247
+ animation: 3000ms ease-in-out cds--skeleton infinite;
16120
16248
  background: var(--cds-skeleton-element, #c6c6c6);
16121
16249
  block-size: 100%;
16122
16250
  content: "";
@@ -16490,7 +16618,7 @@ optgroup.cds--select-optgroup:disabled,
16490
16618
  }
16491
16619
  .cds--text-area.cds--skeleton::before {
16492
16620
  position: absolute;
16493
- animation: 3000ms ease-in-out skeleton infinite;
16621
+ animation: 3000ms ease-in-out cds--skeleton infinite;
16494
16622
  background: var(--cds-skeleton-element, #c6c6c6);
16495
16623
  block-size: 100%;
16496
16624
  content: "";
@@ -17032,7 +17160,7 @@ optgroup.cds--select-optgroup:disabled,
17032
17160
  inline-size: 50%;
17033
17161
  }
17034
17162
 
17035
- @keyframes stroke {
17163
+ @keyframes prefix--stroke {
17036
17164
  100% {
17037
17165
  stroke-dashoffset: 0;
17038
17166
  }
@@ -17075,7 +17203,7 @@ optgroup.cds--select-optgroup:disabled,
17075
17203
  .cds--inline-loading__checkmark {
17076
17204
  animation-duration: 250ms;
17077
17205
  animation-fill-mode: forwards;
17078
- animation-name: stroke;
17206
+ animation-name: cds--stroke;
17079
17207
  fill: none;
17080
17208
  stroke: var(--cds-interactive, #0f62fe);
17081
17209
  stroke-dasharray: 12;
@@ -17541,52 +17669,14 @@ optgroup.cds--select-optgroup:disabled,
17541
17669
 
17542
17670
  .cds--modal-scroll-content {
17543
17671
  border-block-end: 2px solid transparent;
17672
+ -webkit-mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
17673
+ mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
17544
17674
  }
17545
17675
 
17546
17676
  .cds--modal-scroll-content > *:last-child {
17547
17677
  padding-block-end: 1.5rem;
17548
17678
  }
17549
17679
 
17550
- .cds--modal-content--overflow-indicator {
17551
- position: absolute;
17552
- background: var(--cds-layer);
17553
- block-size: 3rem;
17554
- grid-column: 1/-1;
17555
- grid-row: 2/-2;
17556
- inline-size: calc(100% - 1rem);
17557
- inset-block-end: 0;
17558
- inset-inline-start: 0;
17559
- pointer-events: none;
17560
- }
17561
- .cds--modal-content--overflow-indicator::before {
17562
- position: absolute;
17563
- background-image: linear-gradient(to bottom, transparent, var(--cds-layer));
17564
- block-size: 2rem;
17565
- content: "";
17566
- inline-size: 100%;
17567
- inset-block-start: -32px;
17568
- pointer-events: none;
17569
- }
17570
-
17571
- @media not all and (min-resolution >= 0.001dpcm) {
17572
- @supports (-webkit-appearance: none) and (stroke-color: transparent) {
17573
- .cds--modal-content--overflow-indicator {
17574
- background-image: linear-gradient(to bottom, rgba(var(--cds-layer), 0), var(--cds-layer));
17575
- }
17576
- }
17577
- }
17578
- .cds--modal-content:focus ~ .cds--modal-content--overflow-indicator {
17579
- margin: 0 2px 2px;
17580
- }
17581
-
17582
- @media screen and (-ms-high-contrast: active) {
17583
- .cds--modal-scroll-content > *:last-child {
17584
- padding-block-end: 0;
17585
- }
17586
- .cds--modal-content--overflow-indicator {
17587
- display: none;
17588
- }
17589
- }
17590
17680
  .cds--modal-footer {
17591
17681
  display: flex;
17592
17682
  justify-content: flex-end;
@@ -17658,14 +17748,20 @@ optgroup.cds--select-optgroup:disabled,
17658
17748
  margin: 0;
17659
17749
  }
17660
17750
 
17751
+ .cds--modal--slug.cds--modal {
17752
+ background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
17753
+ }
17754
+
17661
17755
  .cds--modal--slug .cds--modal-container {
17662
- 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-background, #ffffff), 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, #ffffff), var(--cds-background, #ffffff)) border-box;
17756
+ 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;
17757
+ border: 1px solid transparent;
17663
17758
  background-color: var(--cds-layer);
17759
+ 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));
17664
17760
  }
17665
17761
 
17666
- .cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
17667
- background: linear-gradient(to top, 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-background, #ffffff), 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, #ffffff), var(--cds-background, #ffffff)) border-box;
17668
- background-color: var(--cds-layer);
17762
+ .cds--modal--slug .cds--modal-container:has(.cds--modal-footer) {
17763
+ 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;
17764
+ 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));
17669
17765
  }
17670
17766
 
17671
17767
  .cds--modal--slug .cds--slug {
@@ -17674,13 +17770,23 @@ optgroup.cds--select-optgroup:disabled,
17674
17770
  inset-inline-end: 0;
17675
17771
  }
17676
17772
 
17773
+ .cds--modal--slug .cds--modal-content.cds--modal-scroll-content {
17774
+ -webkit-mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
17775
+ mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
17776
+ }
17777
+
17677
17778
  .cds--modal-header > .cds--slug:has(+ .cds--modal-close-button),
17678
17779
  .cds--modal-header > .cds--modal-close-button ~ .cds--slug,
17679
17780
  .cds--modal--slug .cds--modal-container-body > .cds--slug {
17680
17781
  inset-inline-end: 3rem;
17681
17782
  }
17682
17783
 
17683
- /* stylelint-disable */
17784
+ .cds--modal--slug .cds--modal-content--overflow-indicator::before,
17785
+ .cds--modal--slug .cds--modal-content--overflow-indicator {
17786
+ display: none;
17787
+ }
17788
+
17789
+ /* stylelint-disable no-duplicate-selectors */
17684
17790
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
17685
17791
  .cds--modal-close__icon {
17686
17792
  fill: ButtonText;
@@ -17694,7 +17800,7 @@ optgroup.cds--select-optgroup:disabled,
17694
17800
  }
17695
17801
  }
17696
17802
 
17697
- /* stylelint-enable */
17803
+ /* stylelint-enable no-duplicate-selectors */
17698
17804
  .cds--inline-notification {
17699
17805
  position: relative;
17700
17806
  display: flex;
@@ -19531,7 +19637,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19531
19637
  position: absolute;
19532
19638
  animation-duration: 1400ms;
19533
19639
  animation-iteration-count: infinite;
19534
- animation-name: progress-bar-indeterminate;
19640
+ animation-name: cds--progress-bar-indeterminate;
19535
19641
  animation-timing-function: linear;
19536
19642
  background-image: linear-gradient(90deg, var(--cds-interactive, #0f62fe) 12.5%, transparent 12.5%);
19537
19643
  background-position-x: 0%;
@@ -19541,7 +19647,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19541
19647
  }
19542
19648
 
19543
19649
  [dir=rtl] .cds--progress-bar--indeterminate .cds--progress-bar__track::after {
19544
- animation-name: progress-bar-indeterminate-rtl;
19650
+ animation-name: cds--progress-bar-indeterminate-rtl;
19545
19651
  }
19546
19652
 
19547
19653
  .cds--progress-bar__helper-text {
@@ -19594,7 +19700,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19594
19700
  margin-inline-end: 0;
19595
19701
  }
19596
19702
 
19597
- @keyframes progress-bar-indeterminate {
19703
+ @keyframes cds--progress-bar-indeterminate {
19598
19704
  0% {
19599
19705
  background-position-x: 25%;
19600
19706
  }
@@ -19602,7 +19708,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19602
19708
  background-position-x: -105%;
19603
19709
  }
19604
19710
  }
19605
- @keyframes progress-bar-indeterminate-rtl {
19711
+ @keyframes cds--progress-bar-indeterminate-rtl {
19606
19712
  0% {
19607
19713
  background-position-x: -105%;
19608
19714
  }
@@ -19908,7 +20014,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19908
20014
  }
19909
20015
  .cds--progress.cds--skeleton .cds--progress-label::before {
19910
20016
  position: absolute;
19911
- animation: 3000ms ease-in-out skeleton infinite;
20017
+ animation: 3000ms ease-in-out cds--skeleton infinite;
19912
20018
  background: var(--cds-skeleton-element, #c6c6c6);
19913
20019
  block-size: 100%;
19914
20020
  content: "";
@@ -19995,7 +20101,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19995
20101
  }
19996
20102
  .cds--icon--skeleton::before {
19997
20103
  position: absolute;
19998
- animation: 3000ms ease-in-out skeleton infinite;
20104
+ animation: 3000ms ease-in-out cds--skeleton infinite;
19999
20105
  background: var(--cds-skeleton-element, #c6c6c6);
20000
20106
  block-size: 100%;
20001
20107
  content: "";
@@ -20025,7 +20131,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20025
20131
  }
20026
20132
  .cds--skeleton__placeholder::before {
20027
20133
  position: absolute;
20028
- animation: 3000ms ease-in-out skeleton infinite;
20134
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20029
20135
  background: var(--cds-skeleton-element, #c6c6c6);
20030
20136
  block-size: 100%;
20031
20137
  content: "";
@@ -20056,7 +20162,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20056
20162
  }
20057
20163
  .cds--skeleton__text::before {
20058
20164
  position: absolute;
20059
- animation: 3000ms ease-in-out skeleton infinite;
20165
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20060
20166
  background: var(--cds-skeleton-element, #c6c6c6);
20061
20167
  block-size: 100%;
20062
20168
  content: "";
@@ -20447,7 +20553,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20447
20553
  }
20448
20554
  .cds--slider-container.cds--skeleton .cds--slider__range-label::before {
20449
20555
  position: absolute;
20450
- animation: 3000ms ease-in-out skeleton infinite;
20556
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20451
20557
  background: var(--cds-skeleton-element, #c6c6c6);
20452
20558
  block-size: 100%;
20453
20559
  content: "";
@@ -20864,7 +20970,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20864
20970
  }
20865
20971
 
20866
20972
  .cds--slug.cds--slug--enabled .cds--slug-content {
20867
- 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-background, #ffffff), 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, #ffffff), var(--cds-background, #ffffff)) border-box;
20973
+ 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;
20868
20974
  border: 1px solid transparent;
20869
20975
  border-radius: 0.5rem;
20870
20976
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), -40px 30px 100px -25px var(--cds-slug-callout-shadow-outer-01, rgba(0, 67, 206, 0.25)), -60px 80px 60px -45px var(--cds-slug-callout-shadow-outer-02, rgba(0, 0, 0, 0.1));
@@ -21341,7 +21447,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21341
21447
  }
21342
21448
  .cds--structured-list.cds--skeleton span::before {
21343
21449
  position: absolute;
21344
- animation: 3000ms ease-in-out skeleton infinite;
21450
+ animation: 3000ms ease-in-out cds--skeleton infinite;
21345
21451
  background: var(--cds-skeleton-element, #c6c6c6);
21346
21452
  block-size: 100%;
21347
21453
  content: "";
@@ -21855,7 +21961,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21855
21961
  }
21856
21962
  .cds--tabs.cds--skeleton .cds--tabs__nav-link span::before {
21857
21963
  position: absolute;
21858
- animation: 3000ms ease-in-out skeleton infinite;
21964
+ animation: 3000ms ease-in-out cds--skeleton infinite;
21859
21965
  background: var(--cds-skeleton-element, #c6c6c6);
21860
21966
  block-size: 100%;
21861
21967
  content: "";
@@ -22159,10 +22265,6 @@ span.cds--pagination__text.cds--pagination__items-count {
22159
22265
  }
22160
22266
  }
22161
22267
 
22162
- .cds--tile-content__above-the-fold {
22163
- display: block;
22164
- }
22165
-
22166
22268
  .cds--tile-content__below-the-fold {
22167
22269
  display: block;
22168
22270
  opacity: 0;
@@ -22270,13 +22372,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22270
22372
  }
22271
22373
 
22272
22374
  .cds--tile--slug.cds--tile {
22273
- 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-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
22375
+ 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;
22274
22376
  border: 1px solid transparent;
22275
22377
  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));
22276
22378
  }
22277
22379
 
22278
22380
  .cds--tile--slug.cds--tile--expandable:hover {
22279
- 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-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
22381
+ 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;
22280
22382
  }
22281
22383
 
22282
22384
  .cds--tile--slug.cds--tile--selectable::before,
@@ -22661,7 +22763,7 @@ span.cds--pagination__text.cds--pagination__items-count {
22661
22763
  }
22662
22764
  .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
22663
22765
  position: absolute;
22664
- animation: 3000ms ease-in-out skeleton infinite;
22766
+ animation: 3000ms ease-in-out cds--skeleton infinite;
22665
22767
  background: var(--cds-skeleton-element, #c6c6c6);
22666
22768
  block-size: 100%;
22667
22769
  content: "";
@@ -22692,7 +22794,7 @@ span.cds--pagination__text.cds--pagination__items-count {
22692
22794
  }
22693
22795
  .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
22694
22796
  position: absolute;
22695
- animation: 3000ms ease-in-out skeleton infinite;
22797
+ animation: 3000ms ease-in-out cds--skeleton infinite;
22696
22798
  background: var(--cds-skeleton-element, #c6c6c6);
22697
22799
  block-size: 100%;
22698
22800
  content: "";