@carbon/styles 1.44.0 → 1.45.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
@@ -3979,7 +3979,7 @@ li.cds--accordion__item--disabled:last-of-type {
3979
3979
  will-change: transform;
3980
3980
  }
3981
3981
 
3982
- .cds--popover--open > .cds--popover > .cds--popover-caret {
3982
+ .cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-caret {
3983
3983
  display: block;
3984
3984
  }
3985
3985
 
@@ -7803,6 +7803,19 @@ fieldset[disabled] .cds--form__helper-text {
7803
7803
  }
7804
7804
  }
7805
7805
 
7806
+ .cds--tag .cds--slug .cds--slug__button--inline {
7807
+ color: currentColor;
7808
+ margin-inline-start: 0.0625rem;
7809
+ }
7810
+
7811
+ .cds--tag .cds--slug .cds--slug__button--inline .cds--slug__text::before {
7812
+ background-color: currentColor;
7813
+ }
7814
+
7815
+ .cds--tag .cds--slug .cds--slug__button--inline:hover {
7816
+ border-color: currentColor;
7817
+ }
7818
+
7806
7819
  /* stylelint-disable */
7807
7820
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
7808
7821
  .cds--tag {
@@ -8139,7 +8152,7 @@ fieldset[disabled] .cds--form__helper-text {
8139
8152
 
8140
8153
  .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty,
8141
8154
  .cds--list-box--warning .cds--list-box__field .cds--text-input--empty {
8142
- padding-inline-end: carbon--mini-units(9);
8155
+ padding-inline-end: 4rem;
8143
8156
  }
8144
8157
 
8145
8158
  .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty + .cds--list-box__invalid-icon,
@@ -8668,15 +8681,26 @@ fieldset[disabled] .cds--form__helper-text {
8668
8681
  }
8669
8682
 
8670
8683
  .cds--list-box__wrapper--slug .cds--list-box__field,
8671
- .cds--list-box__wrapper--slug .cds--text-input {
8684
+ .cds--list-box__wrapper--slug .cds--text-input--empty {
8672
8685
  padding-inline-end: 4rem;
8673
8686
  }
8674
8687
 
8675
- .cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field,
8688
+ .cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) {
8689
+ padding-inline-end: 6rem;
8690
+ }
8691
+
8692
+ .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input--empty,
8693
+ .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--list-box__field,
8694
+ .cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input--empty,
8676
8695
  .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field {
8677
8696
  padding-inline-end: 6rem;
8678
8697
  }
8679
8698
 
8699
+ .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input:not(.cds--text-input--empty),
8700
+ .cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty) {
8701
+ padding-inline-end: 7.5rem;
8702
+ }
8703
+
8680
8704
  .cds--list-box__wrapper--slug .cds--list-box--invalid .cds--slug,
8681
8705
  .cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug {
8682
8706
  inset-inline-end: 4rem;
@@ -8785,6 +8809,7 @@ fieldset[disabled] .cds--form__helper-text {
8785
8809
  max-inline-size: 18rem;
8786
8810
  min-inline-size: 10rem;
8787
8811
  opacity: 0;
8812
+ overflow-y: auto;
8788
8813
  visibility: hidden;
8789
8814
  }
8790
8815
  .cds--menu *,
@@ -8825,7 +8850,7 @@ fieldset[disabled] .cds--form__helper-text {
8825
8850
  display: grid;
8826
8851
  align-items: center;
8827
8852
  block-size: 2rem;
8828
- color: var(--cds-text-primary, #161616);
8853
+ color: var(--cds-text-secondary, #525252);
8829
8854
  -moz-column-gap: 0.5rem;
8830
8855
  column-gap: 0.5rem;
8831
8856
  cursor: pointer;
@@ -8842,9 +8867,16 @@ fieldset[disabled] .cds--form__helper-text {
8842
8867
  outline-style: dotted;
8843
8868
  }
8844
8869
  }
8870
+ .cds--menu-item svg {
8871
+ color: var(--cds-icon-secondary, #525252);
8872
+ }
8845
8873
 
8846
8874
  .cds--menu-item:hover {
8847
8875
  background-color: var(--cds-layer-hover);
8876
+ color: var(--cds-text-primary, #161616);
8877
+ }
8878
+ .cds--menu-item:hover svg {
8879
+ color: var(--cds-icon-primary, #161616);
8848
8880
  }
8849
8881
 
8850
8882
  .cds--menu--xs .cds--menu-item {
@@ -9806,7 +9838,7 @@ fieldset[disabled] .cds--form__helper-text {
9806
9838
  }
9807
9839
 
9808
9840
  .cds--data-table-header {
9809
- background: var(--cds-layer);
9841
+ background-color: var(--cds-layer);
9810
9842
  padding-block-end: 1.5rem;
9811
9843
  padding-block-start: 1rem;
9812
9844
  padding-inline: 1rem;
@@ -9873,13 +9905,13 @@ fieldset[disabled] .cds--form__helper-text {
9873
9905
  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
9874
9906
  }
9875
9907
 
9876
- .cds--data-table tbody tr:hover {
9877
- background: var(--cds-layer-hover);
9908
+ .cds--data-table tbody tr:not([data-child-row]):hover,
9909
+ .cds--data-table tbody tr[data-child-row]:hover > td {
9910
+ background-color: var(--cds-layer-hover);
9878
9911
  }
9879
9912
 
9880
9913
  .cds--data-table tbody tr:hover td,
9881
9914
  .cds--data-table tbody tr:hover th {
9882
- background: var(--cds-layer-hover);
9883
9915
  border-block-end: 1px solid var(--cds-layer-hover);
9884
9916
  border-block-start: 1px solid var(--cds-layer-hover);
9885
9917
  color: var(--cds-text-primary, #161616);
@@ -9955,7 +9987,6 @@ fieldset[disabled] .cds--form__helper-text {
9955
9987
 
9956
9988
  .cds--data-table td,
9957
9989
  .cds--data-table tbody th {
9958
- background: var(--cds-layer);
9959
9990
  border-block-end: 1px solid var(--cds-border-subtle);
9960
9991
  border-block-start: 1px solid var(--cds-layer);
9961
9992
  color: var(--cds-text-secondary, #525252);
@@ -10058,17 +10089,23 @@ fieldset[disabled] .cds--form__helper-text {
10058
10089
  }
10059
10090
 
10060
10091
  .cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(even) td {
10061
- background-color: var(--cds-layer-accent);
10062
10092
  border-block-end: 1px solid var(--cds-layer-accent);
10063
10093
  border-block-start: 1px solid var(--cds-layer-accent);
10064
10094
  }
10065
10095
 
10096
+ .cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):nth-child(even) {
10097
+ background-color: var(--cds-layer-accent);
10098
+ }
10099
+
10066
10100
  .cds--data-table--zebra tbody tr:not(.cds--parent-row):hover td {
10067
- background-color: var(--cds-layer-hover);
10068
10101
  border-block-end: 1px solid var(--cds-layer-hover);
10069
10102
  border-block-start: 1px solid var(--cds-layer-hover);
10070
10103
  }
10071
10104
 
10105
+ .cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):hover {
10106
+ background-color: var(--cds-layer-hover);
10107
+ }
10108
+
10072
10109
  .cds--table-column-checkbox .cds--checkbox-label {
10073
10110
  min-block-size: 1.5rem;
10074
10111
  padding-inline-start: 0;
@@ -10084,7 +10121,7 @@ fieldset[disabled] .cds--form__helper-text {
10084
10121
 
10085
10122
  .cds--data-table th.cds--table-column-checkbox {
10086
10123
  position: static;
10087
- background: var(--cds-layer-accent);
10124
+ background-color: var(--cds-layer-accent);
10088
10125
  inline-size: 2rem;
10089
10126
  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
10090
10127
  }
@@ -10156,12 +10193,16 @@ fieldset[disabled] .cds--form__helper-text {
10156
10193
 
10157
10194
  .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected td,
10158
10195
  tr.cds--data-table--selected td {
10159
- background-color: var(--cds-layer-selected);
10160
10196
  border-block-end: 1px solid var(--cds-layer-active);
10161
10197
  border-block-start: 1px solid var(--cds-layer-selected);
10162
10198
  color: var(--cds-text-primary, #161616);
10163
10199
  }
10164
10200
 
10201
+ .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected,
10202
+ tr.cds--data-table--selected {
10203
+ background-color: var(--cds-layer-selected);
10204
+ }
10205
+
10165
10206
  .cds--data-table--zebra tbody tr:first-of-type:nth-child(odd).cds--data-table--selected td,
10166
10207
  tr.cds--data-table--selected:first-of-type td {
10167
10208
  border-block-start: 1px solid var(--cds-border-subtle-selected);
@@ -10184,12 +10225,16 @@ tr.cds--data-table--selected:last-of-type td {
10184
10225
 
10185
10226
  .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover td,
10186
10227
  .cds--data-table tbody .cds--data-table--selected:hover td {
10187
- background: var(--cds-layer-selected-hover);
10188
10228
  border-block-end: 1px solid var(--cds-layer-selected-hover);
10189
10229
  border-block-start: 1px solid var(--cds-layer-selected-hover);
10190
10230
  color: var(--cds-text-primary, #161616);
10191
10231
  }
10192
10232
 
10233
+ .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover,
10234
+ .cds--data-table tbody .cds--data-table--selected:hover {
10235
+ background-color: var(--cds-layer-selected-hover);
10236
+ }
10237
+
10193
10238
  .cds--data-table--selected .cds--overflow-menu .cds--overflow-menu__icon {
10194
10239
  opacity: 1;
10195
10240
  }
@@ -10487,6 +10532,39 @@ tr.cds--data-table--selected:last-of-type td {
10487
10532
  margin: -0.1875rem 0;
10488
10533
  }
10489
10534
 
10535
+ .cds--data-table .cds--table-column-slug {
10536
+ inline-size: 1rem;
10537
+ padding-inline-end: 0;
10538
+ }
10539
+
10540
+ .cds--data-table tbody tr:has(> .cds--table-column-slug--active) {
10541
+ background-image: linear-gradient(90deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 50%, transparent 100%), linear-gradient(90deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
10542
+ background-attachment: fixed;
10543
+ }
10544
+
10545
+ .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
10546
+ .cds--data-table thead th:has(> .cds--table-header-label--slug) {
10547
+ background-image: linear-gradient(180deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 100%, transparent 100%), linear-gradient(180deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
10548
+ }
10549
+
10550
+ .cds--table-column-slug .cds--slug {
10551
+ position: absolute;
10552
+ transform: translateY(-50%);
10553
+ }
10554
+
10555
+ .cds--data-table--xl .cds--table-column-slug .cds--slug {
10556
+ transform: translateY(1px);
10557
+ }
10558
+
10559
+ th .cds--table-header-label.cds--table-header-label--slug {
10560
+ display: flex;
10561
+ align-items: center;
10562
+ }
10563
+
10564
+ th .cds--table-header-label.cds--table-header-label--slug .cds--slug {
10565
+ margin-inline-start: 0.5rem;
10566
+ }
10567
+
10490
10568
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
10491
10569
  .cds--data-table-content {
10492
10570
  outline: 1px solid transparent;
@@ -11572,7 +11650,7 @@ tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td {
11572
11650
  background-color: var(--cds-layer-hover);
11573
11651
  padding-block-end: 0;
11574
11652
  padding-block-start: 0;
11575
- transition: padding 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11653
+ transition: padding 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
11576
11654
  }
11577
11655
 
11578
11656
  tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td .cds--child-row-inner-container {
@@ -11581,13 +11659,22 @@ tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td .cds--child
11581
11659
  }
11582
11660
 
11583
11661
  tr.cds--parent-row.cds--expandable-row + tr[data-child-row] {
11584
- transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11662
+ transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
11585
11663
  }
11586
11664
 
11587
11665
  tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
11588
11666
  border-block-end: 1px solid var(--cds-border-subtle);
11589
11667
  padding-inline-start: 3.5rem;
11590
- transition: padding-bottom 110ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
11668
+ transition: padding-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11669
+ }
11670
+
11671
+ tbody:has(> tr.cds--parent-row--slug) > tr.cds--expandable-row[data-child-row] td,
11672
+ tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
11673
+ padding-inline-start: 5.5rem;
11674
+ }
11675
+
11676
+ tbody:has(> tr.cds--parent-row--slug):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
11677
+ padding-inline-start: 7.5rem;
11591
11678
  }
11592
11679
 
11593
11680
  tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-inner-container {
@@ -11611,7 +11698,7 @@ tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-i
11611
11698
  tr.cds--parent-row:not(.cds--expandable-row) td,
11612
11699
  tr.cds--parent-row.cds--expandable-row td,
11613
11700
  tr.cds--parent-row.cds--expandable-row {
11614
- transition: height 240ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
11701
+ transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
11615
11702
  }
11616
11703
 
11617
11704
  tr.cds--parent-row:not(.cds--expandable-row):first-of-type:hover td {
@@ -11665,6 +11752,11 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
11665
11752
  padding-inline-start: 0.375rem;
11666
11753
  }
11667
11754
 
11755
+ .cds--data-table td.cds--table-expand[data-previous-value=collapsed] + .cds--table-column-checkbox {
11756
+ border-block-end: 1px solid transparent;
11757
+ box-shadow: none;
11758
+ }
11759
+
11668
11760
  .cds--data-table th.cds--table-expand + .cds--table-column-checkbox + th,
11669
11761
  .cds--data-table td.cds--table-expand + .cds--table-column-checkbox + td {
11670
11762
  padding-inline-start: 0.5rem;
@@ -11755,7 +11847,7 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
11755
11847
 
11756
11848
  tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
11757
11849
  position: absolute;
11758
- background: var(--cds-layer-accent);
11850
+ background-color: var(--cds-layer-accent);
11759
11851
  block-size: 0.0625rem;
11760
11852
  content: "";
11761
11853
  inline-size: 0.5rem;
@@ -11765,7 +11857,7 @@ tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
11765
11857
 
11766
11858
  tr.cds--parent-row.cds--expandable-row:hover td.cds--table-expand + td::after,
11767
11859
  tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td.cds--table-expand + td::after {
11768
- background: var(--cds-layer-hover);
11860
+ background-color: var(--cds-layer-hover);
11769
11861
  }
11770
11862
 
11771
11863
  tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
@@ -11786,7 +11878,7 @@ tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
11786
11878
 
11787
11879
  .cds--data-table--zebra tr.cds--parent-row td,
11788
11880
  .cds--data-table--zebra tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
11789
- transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), border-top 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11881
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-top 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
11790
11882
  }
11791
11883
 
11792
11884
  .cds--data-table--zebra tbody tr[data-parent-row]:hover td,
@@ -11798,33 +11890,33 @@ tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
11798
11890
  }
11799
11891
 
11800
11892
  .cds--data-table--zebra tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td {
11801
- background: var(--cds-layer-hover);
11893
+ background-color: var(--cds-layer-hover);
11802
11894
  border-block-end: 1px solid var(--cds-layer-hover);
11803
11895
  border-block-start: 1px solid var(--cds-layer-hover);
11804
11896
  }
11805
11897
 
11898
+ tr.cds--parent-row.cds--data-table--selected {
11899
+ background-color: var(--cds-layer-selected);
11900
+ }
11901
+
11806
11902
  tr.cds--parent-row.cds--data-table--selected:first-of-type td {
11807
- background: var(--cds-layer-selected);
11808
- border-block-end: 1px solid var(--cds-border-subtle);
11809
11903
  border-block-start: 1px solid var(--cds-layer-active);
11810
11904
  box-shadow: 0 1px var(--cds-layer-active);
11811
11905
  }
11812
11906
 
11813
11907
  tr.cds--parent-row.cds--data-table--selected td {
11814
- background: var(--cds-layer-selected);
11815
- border-block-end: 1px solid transparent;
11908
+ border-block-end: 1px solid var(--cds-layer-active);
11816
11909
  box-shadow: 0 1px var(--cds-layer-active);
11817
11910
  color: var(--cds-text-primary, #161616);
11818
11911
  }
11819
11912
 
11820
11913
  tr.cds--parent-row.cds--data-table--selected:last-of-type td {
11821
- background: var(--cds-layer-selected);
11822
11914
  border-block-end: 1px solid transparent;
11823
11915
  box-shadow: 0 1px var(--cds-border-subtle);
11824
11916
  }
11825
11917
 
11826
11918
  tr.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover td {
11827
- background: var(--cds-layer-selected-hover);
11919
+ background-color: var(--cds-layer-selected-hover);
11828
11920
  border-block-end: 1px solid var(--cds-border-subtle);
11829
11921
  border-block-start: 1px solid var(--cds-layer-selected-hover);
11830
11922
  box-shadow: 0 1px var(--cds-layer-selected-hover);
@@ -11840,7 +11932,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
11840
11932
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
11841
11933
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td,
11842
11934
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td:first-of-type {
11843
- background: var(--cds-layer-selected-hover);
11935
+ background-color: var(--cds-layer-selected-hover);
11844
11936
  border-block-end: 1px solid transparent;
11845
11937
  border-block-start: 1px solid var(--cds-layer-selected-hover);
11846
11938
  box-shadow: 0 1px var(--cds-layer-selected-hover);
@@ -11861,7 +11953,22 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row + tr[data-child
11861
11953
 
11862
11954
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] td,
11863
11955
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[data-child-row] td {
11864
- background: var(--cds-layer-selected);
11956
+ background-color: var(--cds-layer-selected);
11957
+ }
11958
+
11959
+ .cds--parent-row .cds--table-column-slug,
11960
+ .cds--parent-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
11961
+ box-shadow: none;
11962
+ }
11963
+
11964
+ .cds--parent-row.cds--expandable-row .cds--table-column-slug,
11965
+ .cds--parent-row.cds--expandable-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
11966
+ border-block-end: 1px solid transparent;
11967
+ }
11968
+
11969
+ .cds--parent-row--slug td,
11970
+ .cds--data-table tr.cds--parent-row--slug:hover td {
11971
+ border-block-start: 1px solid transparent;
11865
11972
  }
11866
11973
 
11867
11974
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -12209,6 +12316,11 @@ th .cds--table-sort__flex {
12209
12316
  margin-block-start: 0.8125rem;
12210
12317
  }
12211
12318
 
12319
+ .cds--table-sort__header--slug .cds--slug {
12320
+ margin-inline-end: auto;
12321
+ margin-inline-start: 0.5rem;
12322
+ }
12323
+
12212
12324
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
12213
12325
  .cds--table-sort__icon,
12214
12326
  .cds--table-sort__icon-unsorted {
@@ -14228,7 +14340,7 @@ button.cds--dropdown-text:focus {
14228
14340
  }
14229
14341
 
14230
14342
  .cds--list-box__wrapper--fluid :not(.cds--list-box--up) .cds--list-box__menu {
14231
- inset-block-start: calc(100% + 0.1875rem);
14343
+ inset-block-start: calc(100% + 0.0625rem);
14232
14344
  }
14233
14345
 
14234
14346
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) {
@@ -14341,6 +14453,34 @@ button.cds--dropdown-text:focus {
14341
14453
  background: var(--cds-skeleton-element, #c6c6c6);
14342
14454
  }
14343
14455
 
14456
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--slug {
14457
+ inset-block-start: 2.625rem;
14458
+ }
14459
+
14460
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug,
14461
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--slug {
14462
+ inset-inline-end: 2.5rem;
14463
+ }
14464
+
14465
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning button.cds--list-box__field,
14466
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] button.cds--list-box__field {
14467
+ padding-inline-end: 4rem;
14468
+ }
14469
+
14470
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty),
14471
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug.cds--list-box__wrapper--fluid--invalid .cds--list-box--invalid .cds--text-input:not(.cds--text-input--empty) {
14472
+ padding-inline-end: 5.5rem;
14473
+ }
14474
+
14475
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--text-input:not(.cds--text-input--empty)) ~ .cds--slug,
14476
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--text-input:not(.cds--text-input--empty)) ~ .cds--slug {
14477
+ inset-inline-end: 4rem;
14478
+ }
14479
+
14480
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) {
14481
+ padding-inline-end: 6rem;
14482
+ }
14483
+
14344
14484
  .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__field {
14345
14485
  overflow: visible;
14346
14486
  padding: 0;
@@ -14348,7 +14488,8 @@ button.cds--dropdown-text:focus {
14348
14488
 
14349
14489
  .cds--list-box__wrapper--fluid .cds--combo-box .cds--text-input {
14350
14490
  overflow: hidden;
14351
- padding: 2.0625rem 4rem 0.8125rem 1rem;
14491
+ padding-block: 2.0625rem 0.8125rem;
14492
+ padding-inline: 1rem 4rem;
14352
14493
  text-overflow: ellipsis;
14353
14494
  transition: none;
14354
14495
  white-space: nowrap;
@@ -14651,6 +14792,12 @@ button.cds--dropdown-text:focus {
14651
14792
  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
14652
14793
  }
14653
14794
 
14795
+ .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
14796
+ .cds--date-picker--fluid--invalid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
14797
+ .cds--date-picker--fluid--warn .cds--date-picker-input__wrapper--slug .cds--date-picker__input {
14798
+ padding-inline-end: 4rem;
14799
+ }
14800
+
14654
14801
  .cds--multi-select .cds--list-box__field--wrapper {
14655
14802
  display: inline-flex;
14656
14803
  align-items: center;
@@ -15192,7 +15339,8 @@ button.cds--dropdown-text:focus {
15192
15339
  padding-inline-end: 9rem;
15193
15340
  }
15194
15341
 
15195
- .cds--number__input-wrapper--slug input[type=number] {
15342
+ .cds--number__input-wrapper--slug input[type=number],
15343
+ .cds--number__input-wrapper--slug input[type=number]:disabled {
15196
15344
  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
15197
15345
  padding-inline-end: 7rem;
15198
15346
  }
@@ -15437,6 +15585,17 @@ button.cds--dropdown-text:focus {
15437
15585
  inset-block-start: 2.6875rem;
15438
15586
  }
15439
15587
 
15588
+ .cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number__input-wrapper--slug .cds--slug,
15589
+ .cds--number-input--fluid .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning .cds--slug {
15590
+ inset-inline-end: 5.5rem;
15591
+ }
15592
+
15593
+ .cds--number-input--fluid .cds--number__input-wrapper--slug input,
15594
+ .cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number__input-wrapper--slug input[data-invalid],
15595
+ .cds--number-input--fluid .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning input {
15596
+ padding-inline-end: 7.5rem;
15597
+ }
15598
+
15440
15599
  .cds--number-input--fluid .cds--number__input-wrapper--slug {
15441
15600
  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
15442
15601
  }
@@ -15877,7 +16036,8 @@ optgroup.cds--select-optgroup:disabled,
15877
16036
 
15878
16037
  .cds--select--fluid .cds--select__arrow {
15879
16038
  block-size: 1rem;
15880
- inset-block-start: 2rem;
16039
+ inset-block-start: 2.125rem;
16040
+ inset-inline-end: 0.75rem;
15881
16041
  }
15882
16042
 
15883
16043
  .cds--select--fluid .cds--select__divider {
@@ -15978,6 +16138,15 @@ optgroup.cds--select-optgroup:disabled,
15978
16138
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
15979
16139
  }
15980
16140
 
16141
+ .cds--select--fluid .cds--select--slug .cds--slug {
16142
+ inset-block-start: 2.625rem;
16143
+ inset-inline-end: 2.5rem;
16144
+ }
16145
+
16146
+ .cds--select--fluid .cds--select--slug .cds--select-input {
16147
+ padding-inline-end: 4rem;
16148
+ }
16149
+
15981
16150
  .cds--text-area {
15982
16151
  box-sizing: border-box;
15983
16152
  padding: 0;
@@ -16201,7 +16370,7 @@ optgroup.cds--select-optgroup:disabled,
16201
16370
  align-items: center;
16202
16371
  margin: 0;
16203
16372
  block-size: 1rem;
16204
- inline-size: calc(100% - 2rem);
16373
+ inline-size: auto;
16205
16374
  inset-block-start: 0.8125rem;
16206
16375
  inset-inline-start: 1rem;
16207
16376
  }
@@ -16345,6 +16514,11 @@ optgroup.cds--select-optgroup:disabled,
16345
16514
  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
16346
16515
  }
16347
16516
 
16517
+ .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid ~ .cds--slug,
16518
+ .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--warn ~ .cds--slug {
16519
+ inset-inline-end: 1rem;
16520
+ }
16521
+
16348
16522
  .cds--text-input--fluid.cds--text-input-wrapper {
16349
16523
  position: relative;
16350
16524
  background: var(--cds-field);
@@ -16410,8 +16584,8 @@ optgroup.cds--select-optgroup:disabled,
16410
16584
  border-block-end: none;
16411
16585
  }
16412
16586
 
16413
- .cds--text-input--fluid .cds--text-input--invalid + .cds--text-input__divider,
16414
- .cds--text-input--fluid .cds--text-input--warning + .cds--text-input__divider {
16587
+ .cds--text-input--fluid .cds--text-input--invalid ~ .cds--text-input__divider,
16588
+ .cds--text-input--fluid .cds--text-input--warning ~ .cds--text-input__divider {
16415
16589
  display: block;
16416
16590
  border-style: solid;
16417
16591
  border-color: var(--cds-border-subtle);
@@ -16499,7 +16673,18 @@ optgroup.cds--select-optgroup:disabled,
16499
16673
  }
16500
16674
 
16501
16675
  .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--slug {
16502
- inset-block-start: 2.6875rem;
16676
+ inset-block-start: 2.625rem;
16677
+ }
16678
+
16679
+ .cds--text-input--fluid .cds--text-input--invalid ~ .cds--slug,
16680
+ .cds--text-input--fluid .cds--text-input--warning ~ .cds--slug {
16681
+ inset-inline-end: 1rem;
16682
+ }
16683
+
16684
+ .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input,
16685
+ .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input--invalid,
16686
+ .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input--warning {
16687
+ padding-inline-end: 2.5rem;
16503
16688
  }
16504
16689
 
16505
16690
  .cds--time-picker--fluid {
@@ -16578,7 +16763,7 @@ optgroup.cds--select-optgroup:disabled,
16578
16763
  padding-block-start: 1.875rem;
16579
16764
  }
16580
16765
 
16581
- .cds--select--fluid:last-of-type .cds--select-input {
16766
+ .cds--time-picker--fluid .cds--select--fluid:last-of-type .cds--select-input {
16582
16767
  border-inline-end: 2px solid transparent;
16583
16768
  }
16584
16769
 
@@ -18179,6 +18364,10 @@ optgroup.cds--select-optgroup:disabled,
18179
18364
  padding: 0.9375rem 0;
18180
18365
  }
18181
18366
 
18367
+ .cds--actionable-notification__button-wrapper {
18368
+ display: flex;
18369
+ }
18370
+
18182
18371
  .cds--actionable-notification--toast .cds--actionable-notification__text-wrapper {
18183
18372
  padding: 0.9375rem 0 1.4375rem 0;
18184
18373
  }
@@ -19743,29 +19932,89 @@ span.cds--pagination__text.cds--pagination__items-count {
19743
19932
  transition: background 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
19744
19933
  }
19745
19934
 
19746
- .cds--slider__thumb {
19935
+ .cds--slider__thumb-wrapper {
19747
19936
  position: absolute;
19748
19937
  z-index: 3;
19938
+ block-size: 0.875rem;
19939
+ inline-size: 0.875rem;
19940
+ transform: translate(-50%, -50%);
19941
+ --cds-tooltip-padding-inline: 0.5rem;
19942
+ --cds-popover-offset: 0.5rem;
19943
+ }
19944
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper {
19945
+ transform: translate(50%, -50%);
19946
+ }
19947
+
19948
+ .cds--slider__thumb-wrapper--lower,
19949
+ .cds--slider__thumb-wrapper--upper {
19950
+ block-size: 24px;
19951
+ inline-size: 16px;
19952
+ --cds-popover-offset: var(--cds-popover-caret-height, 0.5rem);
19953
+ }
19954
+
19955
+ .cds--slider__thumb-wrapper--lower {
19956
+ transform: translate(-100%, -50%);
19957
+ }
19958
+ .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-content {
19959
+ transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
19960
+ }
19961
+ .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-caret {
19962
+ inset-inline-end: 0;
19963
+ inset-inline-start: revert;
19964
+ transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
19965
+ }
19966
+
19967
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--lower {
19968
+ transform: translate(100%, -50%);
19969
+ }
19970
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-content {
19971
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 0rem)));
19972
+ }
19973
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-caret {
19974
+ transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
19975
+ }
19976
+
19977
+ .cds--slider__thumb-wrapper--upper {
19978
+ transform: translate(0, -50%);
19979
+ }
19980
+ .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-content {
19981
+ transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
19982
+ }
19983
+ .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-caret {
19984
+ inset-inline-start: 0;
19985
+ transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
19986
+ }
19987
+
19988
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--upper {
19989
+ transform: translate(0, -50%);
19990
+ }
19991
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-content {
19992
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 0rem)));
19993
+ }
19994
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-caret {
19995
+ transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
19996
+ }
19997
+
19998
+ .cds--slider__thumb {
19999
+ position: absolute;
19749
20000
  border-radius: 50%;
19750
20001
  background: var(--cds-layer-selected-inverse, #161616);
19751
- block-size: 0.875rem;
19752
20002
  box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
19753
- inline-size: 0.875rem;
20003
+ inset: 0;
19754
20004
  outline: none;
19755
- transform: translate(-50%, -50%);
19756
20005
  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background 110ms cubic-bezier(0.2, 0, 0.38, 0.9), box-shadow 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
19757
20006
  }
19758
20007
  .cds--slider__thumb:hover {
19759
- transform: translate(-50%, -50%) scale(1.4286);
20008
+ transform: scale(1.4286);
19760
20009
  }
19761
20010
  .cds--slider__thumb:focus {
19762
20011
  background-color: var(--cds-interactive, #0f62fe);
19763
20012
  box-shadow: inset 0 0 0 2px var(--cds-interactive, #0f62fe), inset 0 0 0 3px var(--cds-layer);
19764
- transform: translate(-50%, -50%) scale(1.4286);
20013
+ transform: scale(1.4286);
19765
20014
  }
19766
20015
  .cds--slider__thumb:active {
19767
20016
  box-shadow: inset 0 0 0 2px var(--cds-interactive, #0f62fe);
19768
- transform: translate(-50%, -50%) scale(1.4286);
20017
+ transform: scale(1.4286);
19769
20018
  }
19770
20019
 
19771
20020
  .cds--slider__thumb-icon {
@@ -19779,14 +20028,12 @@ span.cds--pagination__text.cds--pagination__items-count {
19779
20028
 
19780
20029
  .cds--slider__thumb--lower,
19781
20030
  .cds--slider__thumb--upper {
19782
- display: block;
20031
+ position: absolute;
19783
20032
  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
19784
20033
  border-radius: unset;
19785
20034
  background-color: transparent;
19786
- block-size: 24px;
19787
20035
  box-shadow: none;
19788
- inline-size: 16px;
19789
- transform: translate(-100%, -50%);
20036
+ inset: 0;
19790
20037
  transition: none;
19791
20038
  }
19792
20039
  .cds--slider__thumb--lower::before,
@@ -19803,7 +20050,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19803
20050
  }
19804
20051
  .cds--slider__thumb--lower:hover,
19805
20052
  .cds--slider__thumb--upper:hover {
19806
- transform: translate(-100%, -50%);
20053
+ transform: none;
19807
20054
  }
19808
20055
  .cds--slider__thumb--lower:hover .cds--slider__thumb-icon,
19809
20056
  .cds--slider__thumb--upper:hover .cds--slider__thumb-icon {
@@ -19812,13 +20059,13 @@ span.cds--pagination__text.cds--pagination__items-count {
19812
20059
  .cds--slider__thumb--lower:active,
19813
20060
  .cds--slider__thumb--upper:active {
19814
20061
  box-shadow: none;
19815
- transform: translate(-100%, -50%);
20062
+ transform: none;
19816
20063
  }
19817
20064
  .cds--slider__thumb--lower:focus,
19818
20065
  .cds--slider__thumb--upper:focus {
19819
20066
  background-color: transparent;
19820
20067
  box-shadow: none;
19821
- transform: translate(-100%, -50%);
20068
+ transform: none;
19822
20069
  }
19823
20070
  .cds--slider__thumb--lower:focus .cds--slider__thumb-icon,
19824
20071
  .cds--slider__thumb--upper:focus .cds--slider__thumb-icon {
@@ -19836,20 +20083,14 @@ span.cds--pagination__text.cds--pagination__items-count {
19836
20083
  }
19837
20084
 
19838
20085
  .cds--slider__thumb--upper {
19839
- transform: translate(0, -50%);
20086
+ transform: none;
19840
20087
  }
19841
20088
  .cds--slider__thumb--upper::before {
19842
20089
  inset-inline-end: auto;
19843
20090
  inset-inline-start: 0;
19844
20091
  }
19845
- .cds--slider__thumb--upper:hover {
19846
- transform: translate(0, -50%);
19847
- }
19848
- .cds--slider__thumb--upper:active {
19849
- transform: translate(0, -50%);
19850
- }
19851
- .cds--slider__thumb--upper:focus {
19852
- transform: translate(0, -50%);
20092
+ .cds--slider__thumb--upper:hover, .cds--slider__thumb--upper:active, .cds--slider__thumb--upper:focus {
20093
+ transform: none;
19853
20094
  }
19854
20095
 
19855
20096
  .cds--slider__input {
@@ -19860,6 +20101,10 @@ span.cds--pagination__text.cds--pagination__items-count {
19860
20101
  position: relative;
19861
20102
  }
19862
20103
 
20104
+ .cds--slider-text-input-wrapper--hidden {
20105
+ display: none;
20106
+ }
20107
+
19863
20108
  .cds--slider-text-input,
19864
20109
  .cds-slider-text-input {
19865
20110
  -moz-appearance: textfield;
@@ -19874,11 +20119,8 @@ span.cds--pagination__text.cds--pagination__items-count {
19874
20119
  display: none;
19875
20120
  }
19876
20121
 
19877
- .cds--slider-text-input--hidden {
19878
- display: none;
19879
- }
19880
-
19881
- .cds--slider__thumb:focus ~ .cds--slider__filled-track {
20122
+ .cds--slider__thumb:focus ~ .cds--slider__filled-track,
20123
+ .cds--slider__thumb-wrapper:focus-within ~ .cds--slider__filled-track {
19882
20124
  background-color: var(--cds-border-interactive, #0f62fe);
19883
20125
  }
19884
20126
 
@@ -20020,15 +20262,17 @@ span.cds--pagination__text.cds--pagination__items-count {
20020
20262
  pointer-events: none;
20021
20263
  }
20022
20264
 
20265
+ .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper {
20266
+ inset-inline-start: 50%;
20267
+ }
20023
20268
  .cds--slider-container.cds--skeleton .cds--slider__thumb {
20024
20269
  cursor: default;
20025
- inset-inline-start: 50%;
20026
20270
  pointer-events: none;
20027
20271
  }
20028
- .cds--slider-container.cds--skeleton .cds--slider__thumb--lower {
20272
+ .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--lower {
20029
20273
  inset-inline-start: 0;
20030
20274
  }
20031
- .cds--slider-container.cds--skeleton .cds--slider__thumb--upper {
20275
+ .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--upper {
20032
20276
  inset-inline-start: 100%;
20033
20277
  }
20034
20278
 
@@ -21660,6 +21904,10 @@ span.cds--pagination__text.cds--pagination__items-count {
21660
21904
  border-radius: 1rem;
21661
21905
  }
21662
21906
 
21907
+ .cds--tile--slug-rounded .cds--tile__chevron {
21908
+ border-end-end-radius: 1rem;
21909
+ }
21910
+
21663
21911
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
21664
21912
  .cds--tile__chevron svg,
21665
21913
  .cds--tile__checkmark svg,