@carbon/styles 1.24.0 → 1.26.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
@@ -5053,7 +5053,7 @@ input[data-invalid]:not(:focus),
5053
5053
  .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
5054
5054
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
5055
5055
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
5056
- .cds--list-box[data-invalid]:not(:focus),
5056
+ .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),
5057
5057
  .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
5058
5058
  outline: 2px solid var(--cds-support-error, #da1e28);
5059
5059
  outline-offset: -2px;
@@ -5064,7 +5064,7 @@ input[data-invalid]:not(:focus),
5064
5064
  .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
5065
5065
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
5066
5066
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
5067
- .cds--list-box[data-invalid]:not(:focus),
5067
+ .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),
5068
5068
  .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
5069
5069
  outline-style: dotted;
5070
5070
  }
@@ -5081,6 +5081,7 @@ input[data-invalid] ~ .cds--form-requirement,
5081
5081
  .cds--text-input__field-wrapper--warning ~ .cds--form-requirement,
5082
5082
  .cds--text-input__field-wrapper--warning > .cds--text-input ~ .cds--form-requirement,
5083
5083
  .cds--text-area__wrapper[data-invalid] ~ .cds--form-requirement,
5084
+ .cds--text-area__wrapper--warn ~ .cds--form-requirement,
5084
5085
  .cds--select-input__wrapper[data-invalid] ~ .cds--form-requirement,
5085
5086
  .cds--select--warning .cds--select-input__wrapper ~ .cds--form-requirement,
5086
5087
  .cds--time-picker[data-invalid] ~ .cds--form-requirement,
@@ -5261,18 +5262,18 @@ fieldset[disabled] .cds--form__helper-text {
5261
5262
  border: 1px solid var(--cds-icon-primary, #161616);
5262
5263
  margin: 0.125rem 0.125rem 0.125rem 0.1875rem;
5263
5264
  background-color: transparent;
5264
- border-radius: 1px;
5265
+ border-radius: 2px;
5265
5266
  content: "";
5266
5267
  }
5267
5268
 
5268
5269
  .cds--checkbox-label::after {
5269
5270
  position: absolute;
5270
- top: 0.5rem;
5271
+ top: 0.46875rem;
5271
5272
  left: 0.4375rem;
5272
5273
  width: 0.5625rem;
5273
5274
  height: 0.3125rem;
5274
- border-bottom: 2px solid var(--cds-icon-inverse, #ffffff);
5275
- border-left: 2px solid var(--cds-icon-inverse, #ffffff);
5275
+ border-bottom: 1.5px solid var(--cds-icon-inverse, #ffffff);
5276
+ border-left: 1.5px solid var(--cds-icon-inverse, #ffffff);
5276
5277
  margin-top: -0.1875rem /*rtl:0rem*/;
5277
5278
  background: none;
5278
5279
  content: "";
@@ -5789,6 +5790,16 @@ fieldset[disabled] .cds--form__helper-text {
5789
5790
  -webkit-transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
5790
5791
  transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
5791
5792
  }
5793
+ .cds--snippet--multi .cds--snippet-container:focus {
5794
+ outline: 2px solid var(--cds-focus, #0f62fe);
5795
+ outline-offset: -2px;
5796
+ outline-offset: 0;
5797
+ }
5798
+ @media screen and (prefers-contrast) {
5799
+ .cds--snippet--multi .cds--snippet-container:focus {
5800
+ outline-style: dotted;
5801
+ }
5802
+ }
5792
5803
 
5793
5804
  .cds--snippet--multi.cds--snippet--expand .cds--snippet-container {
5794
5805
  padding-bottom: 1rem;
@@ -8109,6 +8120,43 @@ fieldset[disabled] .cds--form__helper-text {
8109
8120
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
8110
8121
  }
8111
8122
 
8123
+ .cds--combo-button__container {
8124
+ display: -webkit-inline-box;
8125
+ display: -ms-inline-flexbox;
8126
+ display: inline-flex;
8127
+ -webkit-column-gap: 0.0625rem;
8128
+ -moz-column-gap: 0.0625rem;
8129
+ column-gap: 0.0625rem;
8130
+ }
8131
+
8132
+ .cds--combo-button__container--sm .cds--combo-button__primary-action {
8133
+ min-width: 7.9375rem;
8134
+ }
8135
+
8136
+ .cds--combo-button__container--md .cds--combo-button__primary-action {
8137
+ min-width: 7.4375rem;
8138
+ }
8139
+
8140
+ .cds--combo-button__container--lg .cds--combo-button__primary-action {
8141
+ min-width: 6.9375rem;
8142
+ }
8143
+
8144
+ .cds--combo-button__primary-action .cds--btn {
8145
+ width: 100%;
8146
+ }
8147
+
8148
+ .cds--combo-button__trigger svg {
8149
+ -webkit-transition: -webkit-transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
8150
+ transition: -webkit-transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
8151
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
8152
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), -webkit-transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
8153
+ }
8154
+
8155
+ .cds--combo-button__container--open .cds--combo-button__trigger svg {
8156
+ -webkit-transform: rotate(180deg);
8157
+ transform: rotate(180deg);
8158
+ }
8159
+
8112
8160
  .cds--contained-list__header {
8113
8161
  position: -webkit-sticky;
8114
8162
  position: sticky;
@@ -9655,9 +9703,8 @@ tr.cds--data-table--selected:last-of-type td {
9655
9703
  }
9656
9704
 
9657
9705
  .cds--batch-actions--active {
9658
- overflow: auto hidden;
9659
- -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
9660
- clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
9706
+ -webkit-clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%);
9707
+ clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%);
9661
9708
  pointer-events: all;
9662
9709
  -webkit-transform: translate3d(0, 0, 0);
9663
9710
  transform: translate3d(0, 0, 0);
@@ -12659,6 +12706,24 @@ button.cds--dropdown-text:focus {
12659
12706
  }
12660
12707
 
12661
12708
  .cds--file__drop-container {
12709
+ -webkit-box-sizing: border-box;
12710
+ box-sizing: border-box;
12711
+ padding: 0;
12712
+ border: 0;
12713
+ margin: 0;
12714
+ font-family: inherit;
12715
+ font-size: 100%;
12716
+ vertical-align: baseline;
12717
+ display: inline-block;
12718
+ padding: 0;
12719
+ border: 0;
12720
+ -webkit-appearance: none;
12721
+ -moz-appearance: none;
12722
+ appearance: none;
12723
+ background: none;
12724
+ cursor: pointer;
12725
+ text-align: start;
12726
+ width: 100%;
12662
12727
  display: -webkit-box;
12663
12728
  display: -ms-flexbox;
12664
12729
  display: flex;
@@ -12677,6 +12742,15 @@ button.cds--dropdown-text:focus {
12677
12742
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
12678
12743
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
12679
12744
  }
12745
+ .cds--file__drop-container *,
12746
+ .cds--file__drop-container *::before,
12747
+ .cds--file__drop-container *::after {
12748
+ -webkit-box-sizing: inherit;
12749
+ box-sizing: inherit;
12750
+ }
12751
+ .cds--file__drop-container::-moz-focus-inner {
12752
+ border: 0;
12753
+ }
12680
12754
 
12681
12755
  .cds--file__drop-container--drag-over {
12682
12756
  background: none;
@@ -13213,6 +13287,14 @@ button.cds--dropdown-text:focus {
13213
13287
  bottom: 0.5rem;
13214
13288
  }
13215
13289
 
13290
+ .cds--multi-select__wrapper.cds--list-box__wrapper--fluid--focus:not(.cds--multi-select--filterable__wrapper) .cds--list-box__field--wrapper--input-focused {
13291
+ outline: none;
13292
+ }
13293
+
13294
+ .cds--list-box__wrapper--fluid .cds--tag.cds--tag--filter {
13295
+ margin-top: 1.25rem;
13296
+ }
13297
+
13216
13298
  .cds--list-box__wrapper--fluid .cds--multi-select--filterable--input-focused {
13217
13299
  outline: none;
13218
13300
  outline-offset: 0;
@@ -13783,6 +13865,10 @@ button.cds--dropdown-text:focus {
13783
13865
  white-space: nowrap;
13784
13866
  }
13785
13867
 
13868
+ .cds--number-input--fluid .cds--number__input-wrapper {
13869
+ position: initial;
13870
+ }
13871
+
13786
13872
  .cds--number-input--fluid input[type=number] {
13787
13873
  min-height: 4rem;
13788
13874
  padding: 2rem 5rem 0.8125rem 1rem;
@@ -14974,10 +15060,7 @@ optgroup.cds--select-optgroup:disabled,
14974
15060
  }
14975
15061
 
14976
15062
  .cds--select--fluid .cds--select-input__wrapper {
14977
- -webkit-box-orient: vertical;
14978
- -webkit-box-direction: normal;
14979
- -ms-flex-direction: column;
14980
- flex-direction: column;
15063
+ display: block;
14981
15064
  }
14982
15065
 
14983
15066
  .cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
@@ -15114,7 +15197,18 @@ optgroup.cds--select-optgroup:disabled,
15114
15197
  display: none;
15115
15198
  }
15116
15199
 
15117
- .cds--text-area--fluid .cds--text-area--invalid + .cds--text-area__divider {
15200
+ .cds--text-area--fluid .cds--text-area--invalid,
15201
+ .cds--text-area--fluid .cds--text-area--warn {
15202
+ resize: none;
15203
+ }
15204
+
15205
+ .cds--text-area--fluid .cds--text-area--invalid {
15206
+ padding: 0 0.875rem 0.8125rem;
15207
+ margin-top: 1.875rem;
15208
+ }
15209
+
15210
+ .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider,
15211
+ .cds--text-area--fluid .cds--text-area__wrapper--warn .cds--text-area__divider {
15118
15212
  display: block;
15119
15213
  border-style: solid;
15120
15214
  border-color: var(--cds-border-subtle);
@@ -15122,7 +15216,8 @@ optgroup.cds--select-optgroup:disabled,
15122
15216
  margin: 0 1rem;
15123
15217
  }
15124
15218
 
15125
- .cds--text-area--fluid .cds--text-area--invalid + .cds--text-area__divider + .cds--form-requirement {
15219
+ .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--form-requirement.cds--form-requirement,
15220
+ .cds--text-area--fluid .cds--text-area__wrapper--warn .cds--form-requirement.cds--form-requirement {
15126
15221
  position: relative;
15127
15222
  display: block;
15128
15223
  overflow: visible;
@@ -15130,10 +15225,23 @@ optgroup.cds--select-optgroup:disabled,
15130
15225
  padding: 0.5rem 2.5rem 0.5rem 1rem;
15131
15226
  margin: 0;
15132
15227
  background: var(--cds-field);
15228
+ }
15229
+
15230
+ .cds--text-area--fluid .cds--text-area__wrapper--warn .cds--form-requirement.cds--form-requirement {
15231
+ border-bottom: 1px solid var(--cds-border-strong);
15232
+ color: var(--cds-text-primary, #161616);
15233
+ }
15234
+
15235
+ .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--form-requirement.cds--form-requirement {
15236
+ border-bottom: none;
15133
15237
  color: var(--cds-text-error, #da1e28);
15134
15238
  }
15135
15239
 
15136
- .cds--modal .cds--text-area--fluid .cds--text-area--invalid + .cds--text-area__divider + .cds--form-requirement {
15240
+ .cds--text-area--fluid .cds--text-area--warn {
15241
+ border-bottom: none;
15242
+ }
15243
+
15244
+ .cds--modal .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider + .cds--form-requirement {
15137
15245
  background: var(--cds-field-02, #ffffff);
15138
15246
  }
15139
15247
 
@@ -15142,21 +15250,13 @@ optgroup.cds--select-optgroup:disabled,
15142
15250
  }
15143
15251
 
15144
15252
  .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:not(:focus) {
15145
- outline: 2px solid var(--cds-support-error, #da1e28);
15146
- outline-offset: -2px;
15147
- outline-offset: 0;
15148
- }
15149
- @media screen and (prefers-contrast) {
15150
- .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:not(:focus) {
15151
- outline-style: dotted;
15152
- }
15253
+ border: 2px solid var(--cds-support-error, #da1e28);
15153
15254
  }
15154
15255
 
15155
15256
  .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:focus-within,
15156
15257
  .cds--text-area--fluid .cds--text-area__wrapper:focus-within {
15157
15258
  outline: 2px solid var(--cds-focus, #0f62fe);
15158
15259
  outline-offset: -2px;
15159
- outline-offset: 0;
15160
15260
  }
15161
15261
  @media screen and (prefers-contrast) {
15162
15262
  .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:focus-within,
@@ -15726,12 +15826,28 @@ optgroup.cds--select-optgroup:disabled,
15726
15826
  content: "▪";
15727
15827
  }
15728
15828
 
15829
+ .cds--menu-button__trigger:not(.cds--btn--ghost) {
15830
+ min-width: 10rem;
15831
+ }
15832
+
15833
+ .cds--menu-button__trigger svg {
15834
+ -webkit-transition: -webkit-transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
15835
+ transition: -webkit-transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
15836
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
15837
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), -webkit-transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
15838
+ }
15839
+
15840
+ .cds--menu-button__trigger--open svg {
15841
+ -webkit-transform: rotate(180deg);
15842
+ transform: rotate(180deg);
15843
+ }
15844
+
15729
15845
  .cds--menu {
15730
15846
  -webkit-box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
15731
15847
  box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
15732
15848
  position: fixed;
15733
15849
  z-index: 9000;
15734
- min-width: 13rem;
15850
+ min-width: 10rem;
15735
15851
  max-width: 18rem;
15736
15852
  padding: 0.25rem 0;
15737
15853
  background-color: var(--cds-layer);
@@ -15739,6 +15855,10 @@ optgroup.cds--select-optgroup:disabled,
15739
15855
  visibility: hidden;
15740
15856
  }
15741
15857
 
15858
+ .cds--menu--with-icons {
15859
+ min-width: 12rem;
15860
+ }
15861
+
15742
15862
  .cds--menu--open {
15743
15863
  visibility: visible;
15744
15864
  }
@@ -15774,8 +15894,8 @@ optgroup.cds--select-optgroup:disabled,
15774
15894
  -moz-column-gap: 0.5rem;
15775
15895
  column-gap: 0.5rem;
15776
15896
  cursor: pointer;
15777
- grid-template-columns: 0 1fr -webkit-max-content;
15778
- grid-template-columns: 0 1fr max-content;
15897
+ grid-template-columns: 1fr -webkit-max-content;
15898
+ grid-template-columns: 1fr max-content;
15779
15899
  padding-inline: 1rem;
15780
15900
  -webkit-transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
15781
15901
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -15811,6 +15931,10 @@ optgroup.cds--select-optgroup:disabled,
15811
15931
  }
15812
15932
 
15813
15933
  .cds--menu-item__icon {
15934
+ display: none;
15935
+ }
15936
+
15937
+ .cds--menu--with-icons .cds--menu-item__icon {
15814
15938
  display: -webkit-box;
15815
15939
  display: -ms-flexbox;
15816
15940
  display: flex;
@@ -15907,6 +16031,28 @@ optgroup.cds--select-optgroup:disabled,
15907
16031
  .cds--modal .cds--number__rule-divider {
15908
16032
  background-color: var(--cds-border-subtle-02, #e0e0e0);
15909
16033
  }
16034
+ .cds--modal .cds--text-input--fluid .cds--text-input,
16035
+ .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
16036
+ .cds--modal .cds--text-area--fluid .cds--text-area,
16037
+ .cds--modal .cds--search--fluid .cds--search-input,
16038
+ .cds--modal .cds--select--fluid .cds--select-input,
16039
+ .cds--modal .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider + .cds--form-requirement,
16040
+ .cds--modal .cds--list-box__wrapper--fluid .cds--list-box,
16041
+ .cds--modal .cds--list-box__wrapper--fluid.cds--list-box__wrapper,
16042
+ .cds--modal .cds--number-input--fluid input[type=number],
16043
+ .cds--modal .cds--number-input--fluid .cds--number__control-btn::before,
16044
+ .cds--modal .cds--number-input--fluid .cds--number__control-btn::after,
16045
+ .cds--modal .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
16046
+ background-color: var(--cds-field-01, #f4f4f4);
16047
+ }
16048
+ .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::before,
16049
+ .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::after {
16050
+ background-color: var(--cds-field-hover);
16051
+ }
16052
+ .cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::before,
16053
+ .cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::after {
16054
+ border-left: 2px solid var(--cds-focus, #0f62fe);
16055
+ }
15910
16056
 
15911
16057
  .cds--modal.is-visible .cds--modal-container {
15912
16058
  -webkit-transform: translate3d(0, 0, 0);
@@ -15988,6 +16134,11 @@ optgroup.cds--select-optgroup:disabled,
15988
16134
  }
15989
16135
  }
15990
16136
 
16137
+ .cds--modal-content .cds--form--fluid {
16138
+ margin-right: -1rem;
16139
+ margin-left: -1rem;
16140
+ }
16141
+
15991
16142
  .cds--modal-content > p,
15992
16143
  .cds--modal-content__regular-content {
15993
16144
  font-size: var(--cds-body-01-font-size, 0.875rem);
@@ -16153,7 +16304,10 @@ optgroup.cds--select-optgroup:disabled,
16153
16304
  -webkit-box-flex: 0;
16154
16305
  -ms-flex: 0 1 50%;
16155
16306
  flex: 0 1 50%;
16156
- padding-top: 1rem;
16307
+ -webkit-box-align: baseline;
16308
+ -ms-flex-align: baseline;
16309
+ align-items: baseline;
16310
+ padding-top: 0.875rem;
16157
16311
  padding-bottom: 2rem;
16158
16312
  margin: 0;
16159
16313
  }
@@ -16229,12 +16383,24 @@ optgroup.cds--select-optgroup:disabled,
16229
16383
  }
16230
16384
 
16231
16385
  /* stylelint-enable */
16232
- .cds--multi-select .cds--tag {
16233
- min-width: auto;
16234
- margin: 0 0.5rem 0 0;
16386
+ .cds--multi-select .cds--list-box__field--wrapper {
16387
+ display: -webkit-inline-box;
16388
+ display: -ms-inline-flexbox;
16389
+ display: inline-flex;
16390
+ width: 100%;
16391
+ height: calc(100% + 1px);
16392
+ -webkit-box-align: center;
16393
+ -ms-flex-align: center;
16394
+ align-items: center;
16235
16395
  }
16236
16396
 
16237
- .cds--multi-select--filterable .cds--tag {
16397
+ .cds--multi-select .cds--list-box__field:focus {
16398
+ outline: 2px solid transparent;
16399
+ outline-offset: -2px;
16400
+ }
16401
+
16402
+ .cds--multi-select .cds--tag {
16403
+ min-width: auto;
16238
16404
  margin: 0 0.5rem 0 1rem;
16239
16405
  }
16240
16406
 
@@ -16285,17 +16451,20 @@ optgroup.cds--select-optgroup:disabled,
16285
16451
  outline: none;
16286
16452
  }
16287
16453
 
16288
- .cds--multi-select--filterable--input-focused {
16454
+ .cds--multi-select--filterable--input-focused,
16455
+ .cds--multi-select .cds--list-box__field--wrapper--input-focused {
16289
16456
  outline: 2px solid var(--cds-focus, #0f62fe);
16290
16457
  outline-offset: -2px;
16291
16458
  }
16292
16459
  @media screen and (prefers-contrast) {
16293
- .cds--multi-select--filterable--input-focused {
16460
+ .cds--multi-select--filterable--input-focused,
16461
+ .cds--multi-select .cds--list-box__field--wrapper--input-focused {
16294
16462
  outline-style: dotted;
16295
16463
  }
16296
16464
  }
16297
16465
 
16298
- .cds--multi-select--filterable.cds--multi-select--selected .cds--text-input {
16466
+ .cds--multi-select--filterable.cds--multi-select--selected .cds--text-input,
16467
+ .cds--multi-select.cds--multi-select--selected .cds--list-box__field {
16299
16468
  padding-left: 0;
16300
16469
  }
16301
16470
 
@@ -18925,6 +19094,84 @@ span.cds--pagination__text.cds--pagination__items-count {
18925
19094
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
18926
19095
  }
18927
19096
 
19097
+ .cds--popover--tab-tip .cds--popover-content {
19098
+ border-radius: 0;
19099
+ }
19100
+
19101
+ .cds--popover--tab-tip__button {
19102
+ -webkit-box-sizing: border-box;
19103
+ box-sizing: border-box;
19104
+ padding: 0;
19105
+ border: 0;
19106
+ margin: 0;
19107
+ font-family: inherit;
19108
+ font-size: 100%;
19109
+ vertical-align: baseline;
19110
+ display: inline-block;
19111
+ padding: 0;
19112
+ border: 0;
19113
+ -webkit-appearance: none;
19114
+ -moz-appearance: none;
19115
+ appearance: none;
19116
+ background: none;
19117
+ cursor: pointer;
19118
+ text-align: start;
19119
+ width: 100%;
19120
+ position: relative;
19121
+ display: -webkit-inline-box;
19122
+ display: -ms-inline-flexbox;
19123
+ display: inline-flex;
19124
+ width: 2rem;
19125
+ height: 2rem;
19126
+ -webkit-box-align: center;
19127
+ -ms-flex-align: center;
19128
+ align-items: center;
19129
+ -webkit-box-pack: center;
19130
+ -ms-flex-pack: center;
19131
+ justify-content: center;
19132
+ }
19133
+ .cds--popover--tab-tip__button *,
19134
+ .cds--popover--tab-tip__button *::before,
19135
+ .cds--popover--tab-tip__button *::after {
19136
+ -webkit-box-sizing: inherit;
19137
+ box-sizing: inherit;
19138
+ }
19139
+ .cds--popover--tab-tip__button::-moz-focus-inner {
19140
+ border: 0;
19141
+ }
19142
+ .cds--popover--tab-tip__button:focus {
19143
+ outline: 2px solid var(--cds-focus, #0f62fe);
19144
+ outline-offset: -2px;
19145
+ }
19146
+ @media screen and (prefers-contrast) {
19147
+ .cds--popover--tab-tip__button:focus {
19148
+ outline-style: dotted;
19149
+ }
19150
+ }
19151
+ .cds--popover--tab-tip__button:hover {
19152
+ background-color: var(--cds-layer-hover);
19153
+ }
19154
+
19155
+ .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button {
19156
+ background: var(--cds-layer);
19157
+ -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
19158
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
19159
+ }
19160
+
19161
+ .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after {
19162
+ position: absolute;
19163
+ z-index: 6001;
19164
+ bottom: 0;
19165
+ width: 100%;
19166
+ height: 2px;
19167
+ background: var(--cds-layer);
19168
+ content: "";
19169
+ }
19170
+
19171
+ .cds--popover--tab-tip__button svg {
19172
+ fill: var(--cds-icon-primary, #161616);
19173
+ }
19174
+
18928
19175
  .cds--progress-bar__label {
18929
19176
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
18930
19177
  font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -19733,6 +19980,55 @@ span.cds--pagination__text.cds--pagination__items-count {
19733
19980
  user-select: text;
19734
19981
  }
19735
19982
 
19983
+ .cds--radio-button-group--invalid .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance {
19984
+ border-color: var(--cds-support-error, #da1e28);
19985
+ }
19986
+
19987
+ .cds--radio-button__validation-msg {
19988
+ display: none;
19989
+ -webkit-box-align: end;
19990
+ -ms-flex-align: end;
19991
+ align-items: flex-end;
19992
+ margin-top: 0.5rem;
19993
+ }
19994
+
19995
+ .cds--radio-button__invalid-icon {
19996
+ margin: 0 0.0625rem 0 0.1875rem;
19997
+ fill: var(--cds-support-error, #da1e28);
19998
+ }
19999
+
20000
+ .cds--radio-button__invalid-icon--warning {
20001
+ fill: var(--cds-support-warning, #f1c21b);
20002
+ }
20003
+
20004
+ .cds--radio-button__invalid-icon--warning path:first-of-type {
20005
+ fill: #000000;
20006
+ }
20007
+
20008
+ .cds--radio-button__validation-msg .cds--form__helper-text {
20009
+ margin-top: 0;
20010
+ }
20011
+
20012
+ .cds--radio-button-group--invalid + .cds--radio-button__validation-msg,
20013
+ .cds--radio-button-group--warning + .cds--radio-button__validation-msg {
20014
+ display: -webkit-box;
20015
+ display: -ms-flexbox;
20016
+ display: flex;
20017
+ }
20018
+
20019
+ .cds--radio-button-group--invalid + .cds--radio-button__validation-msg .cds--form-requirement,
20020
+ .cds--radio-button-group--warning + .cds--radio-button__validation-msg .cds--form-requirement {
20021
+ display: block;
20022
+ overflow: visible;
20023
+ max-height: 100%;
20024
+ margin-top: 0;
20025
+ margin-left: 0.5rem;
20026
+ }
20027
+
20028
+ .cds--radio-button-group--invalid + .cds--radio-button__validation-msg .cds--form-requirement {
20029
+ color: var(--cds-text-error, #da1e28);
20030
+ }
20031
+
19736
20032
  .cds--radio-button:focus + .cds--radio-button__label .cds--radio-button__appearance {
19737
20033
  outline: 2px solid var(--cds-focus, #0f62fe);
19738
20034
  outline-offset: 1.5px;
@@ -20748,7 +21044,6 @@ span.cds--pagination__text.cds--pagination__items-count {
20748
21044
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
20749
21045
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
20750
21046
  overflow: hidden;
20751
- max-width: 10rem;
20752
21047
  padding: 0.75rem 1rem 0.5rem;
20753
21048
  border-bottom: 2px solid var(--cds-border-subtle);
20754
21049
  color: var(--cds-text-secondary, #525252);
@@ -20781,8 +21076,20 @@ span.cds--pagination__text.cds--pagination__items-count {
20781
21076
  height: 3rem;
20782
21077
  padding: 0.5rem 1rem;
20783
21078
  border-bottom: 0;
21079
+ }
21080
+ .cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item-label {
20784
21081
  line-height: calc(3rem - (0.5rem * 2));
20785
21082
  }
21083
+ .cds--tabs.cds--tabs--contained .cds--tabs__nav-item-secondary-label {
21084
+ font-size: var(--cds-label-01-font-size, 0.75rem);
21085
+ font-weight: var(--cds-label-01-font-weight, 400);
21086
+ line-height: var(--cds-label-01-line-height, 1.33333);
21087
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
21088
+ min-height: 1rem;
21089
+ }
21090
+ .cds--tabs.cds--tabs--contained.cds--tabs--tall .cds--tabs__nav-link {
21091
+ height: 4rem;
21092
+ }
20786
21093
  .cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
20787
21094
  overflow-x: visible;
20788
21095
  }
@@ -20800,6 +21107,9 @@ span.cds--pagination__text.cds--pagination__items-count {
20800
21107
  justify-content: center;
20801
21108
  padding: 0;
20802
21109
  }
21110
+ .cds--tabs .cds--tabs__nav-item--icon .cds--tabs__nav-item-label, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon .cds--tabs__nav-item-label {
21111
+ line-height: 0;
21112
+ }
20803
21113
  .cds--tabs.cds--tabs__icon--lg {
20804
21114
  --cds-icon-tab-size: 3rem;
20805
21115
  }
@@ -20829,9 +21139,11 @@ span.cds--pagination__text.cds--pagination__items-count {
20829
21139
  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
20830
21140
  color: var(--cds-text-primary, #161616);
20831
21141
  }
21142
+ .cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item--selected, .cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item--selected:hover {
21143
+ line-height: calc(3rem - (0.5rem * 2));
21144
+ }
20832
21145
  .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected:hover {
20833
21146
  background-color: var(--cds-layer);
20834
- line-height: calc(3rem - (0.5rem * 2));
20835
21147
  }
20836
21148
  .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected .cds--tabs__nav-link:focus,
20837
21149
  .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected .cds--tabs__nav-link:active, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected:hover .cds--tabs__nav-link:focus,
@@ -21075,6 +21387,15 @@ span.cds--pagination__text.cds--pagination__items-count {
21075
21387
  fill: var(--cds-support-error, #da1e28);
21076
21388
  }
21077
21389
 
21390
+ .cds--text-area__invalid-icon--warning {
21391
+ fill: var(--cds-support-warning, #f1c21b);
21392
+ }
21393
+
21394
+ .cds--text-area__invalid-icon--warning path[fill] {
21395
+ fill: #000000;
21396
+ opacity: 1;
21397
+ }
21398
+
21078
21399
  .cds--text-area__counter-alert {
21079
21400
  position: absolute;
21080
21401
  overflow: hidden;
@@ -22013,14 +22334,17 @@ span.cds--pagination__text.cds--pagination__items-count {
22013
22334
  -webkit-box-align: center;
22014
22335
  -ms-flex-align: center;
22015
22336
  align-items: center;
22016
- padding-top: 0.4375rem;
22017
- padding-bottom: 0.4375rem;
22018
22337
  }
22019
22338
  .cds--tree-node__label:hover {
22020
22339
  background-color: var(--cds-layer-hover-01, #e8e8e8);
22021
22340
  color: var(--cds-text-primary, #161616);
22022
22341
  }
22023
22342
 
22343
+ .cds--tree-node:not(.cds--tree-parent-node) .cds--tree-node__label {
22344
+ padding-top: 0.4375rem;
22345
+ padding-bottom: 0.4375rem;
22346
+ }
22347
+
22024
22348
  .cds--tree-node__label:hover .cds--tree-node__label__details {
22025
22349
  color: var(--cds-text-primary, #161616);
22026
22350
  }
@@ -22058,14 +22382,17 @@ span.cds--pagination__text.cds--pagination__items-count {
22058
22382
  display: -webkit-box;
22059
22383
  display: -ms-flexbox;
22060
22384
  display: flex;
22385
+ width: 1.5rem;
22386
+ height: 1.5rem;
22061
22387
  -webkit-box-align: center;
22062
22388
  -ms-flex-align: center;
22063
22389
  align-items: center;
22064
22390
  -ms-flex-item-align: start;
22065
22391
  align-self: flex-start;
22066
- padding: 0.0625rem 0;
22392
+ padding-left: 0.25rem;
22067
22393
  border: 0;
22068
- margin-right: 0.5rem;
22394
+ margin-top: 0.25rem;
22395
+ margin-right: 0.25rem;
22069
22396
  }
22070
22397
  .cds--tree-parent-node__toggle:hover {
22071
22398
  cursor: pointer;