@carbon/styles 1.26.1 → 1.27.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
@@ -2697,7 +2697,7 @@ em {
2697
2697
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
2698
2698
  --cds-field: var(--cds-field-01, #f4f4f4);
2699
2699
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
2700
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
2700
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
2701
2701
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
2702
2702
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
2703
2703
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -2714,7 +2714,7 @@ em {
2714
2714
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
2715
2715
  --cds-field: var(--cds-field-01, #f4f4f4);
2716
2716
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
2717
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
2717
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
2718
2718
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
2719
2719
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
2720
2720
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -2731,7 +2731,7 @@ em {
2731
2731
  --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
2732
2732
  --cds-field: var(--cds-field-02, #ffffff);
2733
2733
  --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
2734
- --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
2734
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
2735
2735
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
2736
2736
  --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
2737
2737
  --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
@@ -2748,7 +2748,7 @@ em {
2748
2748
  --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
2749
2749
  --cds-field: var(--cds-field-03, #f4f4f4);
2750
2750
  --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
2751
- --cds-border-subtle: var(--cds-border-subtle-03, #c6c6c6);
2751
+ --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
2752
2752
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
2753
2753
  --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
2754
2754
  --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
@@ -2867,7 +2867,7 @@ em {
2867
2867
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
2868
2868
  --cds-field: var(--cds-field-01, #f4f4f4);
2869
2869
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
2870
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
2870
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
2871
2871
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
2872
2872
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
2873
2873
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -3041,7 +3041,7 @@ em {
3041
3041
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
3042
3042
  --cds-field: var(--cds-field-01, #f4f4f4);
3043
3043
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
3044
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
3044
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
3045
3045
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
3046
3046
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
3047
3047
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -3215,7 +3215,7 @@ em {
3215
3215
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
3216
3216
  --cds-field: var(--cds-field-01, #f4f4f4);
3217
3217
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
3218
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
3218
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
3219
3219
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
3220
3220
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
3221
3221
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -3388,7 +3388,7 @@ em {
3388
3388
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
3389
3389
  --cds-field: var(--cds-field-01, #f4f4f4);
3390
3390
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
3391
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
3391
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
3392
3392
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
3393
3393
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
3394
3394
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -4365,7 +4365,7 @@ li.cds--accordion__item--disabled:last-of-type {
4365
4365
  -webkit-box-pack: justify;
4366
4366
  -ms-flex-pack: justify;
4367
4367
  justify-content: space-between;
4368
- padding: calc(0.875rem - 3px) 63px calc(0.875rem - 3px) 15px;
4368
+ padding: calc(0.875rem - 3px) calc(4rem - 1px) calc(0.875rem - 3px) calc(1rem - 1px);
4369
4369
  margin: 0;
4370
4370
  border-radius: 0;
4371
4371
  cursor: pointer;
@@ -4504,7 +4504,7 @@ li.cds--accordion__item--disabled:last-of-type {
4504
4504
  border-color: transparent;
4505
4505
  background-color: transparent;
4506
4506
  color: var(--cds-link-primary, #0f62fe);
4507
- padding: calc(0.875rem - 3px) 16px;
4507
+ padding: calc(0.875rem - 3px) 1rem;
4508
4508
  }
4509
4509
  .cds--btn--ghost:hover {
4510
4510
  background-color: var(--cds-layer-hover);
@@ -4538,10 +4538,10 @@ li.cds--accordion__item--disabled:last-of-type {
4538
4538
  outline: none;
4539
4539
  }
4540
4540
  .cds--btn--ghost.cds--btn--sm {
4541
- padding: calc(0.375rem - 3px) 16px;
4541
+ padding: calc(0.375rem - 3px) 1rem;
4542
4542
  }
4543
4543
  .cds--btn--ghost.cds--btn--field, .cds--btn--ghost.cds--btn--md {
4544
- padding: calc(0.675rem - 3px) 16px;
4544
+ padding: calc(0.675rem - 3px) 1rem;
4545
4545
  }
4546
4546
  .cds--btn--ghost:not([disabled]) svg {
4547
4547
  fill: var(--cds-icon-primary, #161616);
@@ -4663,7 +4663,7 @@ li.cds--accordion__item--disabled:last-of-type {
4663
4663
  border-color: transparent;
4664
4664
  background-color: transparent;
4665
4665
  color: var(--cds-button-danger-secondary, #da1e28);
4666
- padding: calc(0.875rem - 3px) 16px;
4666
+ padding: calc(0.875rem - 3px) 1rem;
4667
4667
  }
4668
4668
  .cds--btn--danger--ghost:hover {
4669
4669
  background-color: var(--cds-button-danger-hover, #b81921);
@@ -4694,15 +4694,15 @@ li.cds--accordion__item--disabled:last-of-type {
4694
4694
  outline: none;
4695
4695
  }
4696
4696
  .cds--btn--danger--ghost.cds--btn--sm {
4697
- padding: calc(0.375rem - 3px) 16px;
4697
+ padding: calc(0.375rem - 3px) 1rem;
4698
4698
  }
4699
4699
  .cds--btn--danger--ghost.cds--btn--field, .cds--btn--danger--ghost.cds--btn--md {
4700
- padding: calc(0.675rem - 3px) 16px;
4700
+ padding: calc(0.675rem - 3px) 1rem;
4701
4701
  }
4702
4702
 
4703
4703
  .cds--btn--sm {
4704
4704
  min-height: 2rem;
4705
- padding: calc(0.375rem - 3px) 60px calc(0.375rem - 3px) 12px;
4705
+ padding: calc(0.375rem - 3px) calc(4rem - 4px) calc(0.375rem - 3px) calc(1rem - 4px);
4706
4706
  }
4707
4707
 
4708
4708
  .cds--btn--2xl:not(.cds--btn--icon-only) {
@@ -4728,7 +4728,7 @@ li.cds--accordion__item--disabled:last-of-type {
4728
4728
  .cds--btn--field,
4729
4729
  .cds--btn--md {
4730
4730
  min-height: 2.5rem;
4731
- padding: calc(0.675rem - 3px) 60px calc(0.675rem - 3px) 12px;
4731
+ padding: calc(0.675rem - 3px) calc(4rem - 4px) calc(0.675rem - 3px) calc(1rem - 4px);
4732
4732
  }
4733
4733
 
4734
4734
  .cds--btn--expressive {
@@ -5176,6 +5176,23 @@ fieldset[disabled] .cds--form__helper-text {
5176
5176
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
5177
5177
  }
5178
5178
 
5179
+ .cds--checkbox-group html {
5180
+ font-size: 100%;
5181
+ }
5182
+ .cds--checkbox-group body {
5183
+ font-weight: 400;
5184
+ font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
5185
+ -moz-osx-font-smoothing: grayscale;
5186
+ -webkit-font-smoothing: antialiased;
5187
+ text-rendering: optimizeLegibility;
5188
+ }
5189
+ .cds--checkbox-group code {
5190
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
5191
+ }
5192
+ .cds--checkbox-group strong {
5193
+ font-weight: 600;
5194
+ }
5195
+
5179
5196
  .cds--form-item.cds--checkbox-wrapper {
5180
5197
  position: relative;
5181
5198
  margin-bottom: 0.25rem;
@@ -5332,10 +5349,76 @@ fieldset[disabled] .cds--form__helper-text {
5332
5349
  background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
5333
5350
  }
5334
5351
 
5352
+ .cds--checkbox-group[data-invalid] .cds--checkbox-label::before,
5353
+ .cds--checkbox-wrapper--invalid .cds--checkbox-label::before,
5354
+ .cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before {
5355
+ border: 1px solid var(--cds-support-error, #da1e28);
5356
+ }
5357
+
5358
+ .cds--checkbox-group .cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg,
5359
+ .cds--checkbox-group .cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg,
5360
+ .cds--checkbox-group .cds--checkbox-wrapper > .cds--form__helper-text {
5361
+ display: none;
5362
+ }
5363
+
5364
+ .cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox-label::before,
5365
+ .cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before {
5366
+ border: 1px solid var(--cds-icon-primary, #161616);
5367
+ }
5368
+
5369
+ .cds--checkbox-group__validation-msg,
5370
+ .cds--checkbox__validation-msg {
5371
+ display: none;
5372
+ -webkit-box-align: end;
5373
+ -ms-flex-align: end;
5374
+ align-items: flex-end;
5375
+ margin-top: 0.25rem;
5376
+ }
5377
+
5378
+ .cds--checkbox__invalid-icon {
5379
+ margin: 0 0.0625rem 0 0.1875rem;
5380
+ fill: var(--cds-support-error, #da1e28);
5381
+ }
5382
+
5383
+ .cds--checkbox__invalid-icon--warning {
5384
+ fill: var(--cds-support-warning, #f1c21b);
5385
+ }
5386
+
5387
+ .cds--checkbox__invalid-icon--warning path:first-of-type {
5388
+ fill: #000000;
5389
+ }
5390
+
5391
+ .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg,
5392
+ .cds--checkbox-group--warning .cds--checkbox-group__validation-msg,
5393
+ .cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg,
5394
+ .cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg {
5395
+ display: -webkit-box;
5396
+ display: -ms-flexbox;
5397
+ display: flex;
5398
+ }
5399
+
5400
+ .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,
5401
+ .cds--checkbox-group--warning .cds--checkbox-group__validation-msg .cds--form-requirement,
5402
+ .cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement,
5403
+ .cds--checkbox-wrapper--warning .cds--checkbox__validation-msg .cds--form-requirement {
5404
+ display: block;
5405
+ overflow: visible;
5406
+ max-height: 100%;
5407
+ margin-top: 0;
5408
+ margin-left: 0.5rem;
5409
+ }
5410
+
5411
+ .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,
5412
+ .cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement {
5413
+ color: var(--cds-text-error, #da1e28);
5414
+ }
5415
+
5416
+ .cds--checkbox-group--readonly .cds--checkbox-label,
5335
5417
  .cds--checkbox-wrapper--readonly .cds--checkbox-label {
5336
5418
  cursor: default;
5337
5419
  }
5338
5420
 
5421
+ .cds--checkbox-group--readonly .cds--checkbox-label-text,
5339
5422
  .cds--checkbox-wrapper--readonly .cds--checkbox-label-text {
5340
5423
  cursor: text;
5341
5424
  -webkit-user-select: text;
@@ -5344,15 +5427,18 @@ fieldset[disabled] .cds--form__helper-text {
5344
5427
  user-select: text;
5345
5428
  }
5346
5429
 
5430
+ .cds--checkbox-group--readonly .cds--checkbox + .cds--checkbox-label::before,
5347
5431
  .cds--checkbox-wrapper--readonly .cds--checkbox + .cds--checkbox-label::before {
5348
5432
  border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
5349
5433
  }
5350
5434
 
5435
+ .cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::before,
5351
5436
  .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::before {
5352
5437
  border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
5353
5438
  background: transparent;
5354
5439
  }
5355
5440
 
5441
+ .cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::after,
5356
5442
  .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
5357
5443
  border-color: var(--cds-text-primary, #161616);
5358
5444
  }
@@ -6881,6 +6967,7 @@ fieldset[disabled] .cds--form__helper-text {
6881
6967
 
6882
6968
  .cds--form--fluid .cds--text-input-wrapper--readonly,
6883
6969
  .cds--text-input-wrapper--readonly .cds--text-input {
6970
+ border-bottom-color: var(--cds-border-subtle);
6884
6971
  background: transparent;
6885
6972
  }
6886
6973
 
@@ -7789,10 +7876,12 @@ fieldset[disabled] .cds--form__helper-text {
7789
7876
  }
7790
7877
 
7791
7878
  .cds--list-box .cds--list-box__field[aria-expanded=false] + .cds--list-box__menu {
7879
+ display: none;
7792
7880
  max-height: 0;
7793
7881
  }
7794
7882
 
7795
7883
  .cds--list-box--expanded .cds--list-box__menu {
7884
+ display: block;
7796
7885
  max-height: 13.75rem;
7797
7886
  }
7798
7887
 
@@ -8110,6 +8199,10 @@ fieldset[disabled] .cds--form__helper-text {
8110
8199
  background-color: transparent;
8111
8200
  }
8112
8201
 
8202
+ .cds--combo-box--readonly .cds--text-input {
8203
+ border-bottom-color: var(--cds-border-subtle);
8204
+ }
8205
+
8113
8206
  .cds--combo-box--readonly .cds--list-box__menu-icon,
8114
8207
  .cds--combo-box--readonly .cds--list-box__selection {
8115
8208
  cursor: default;
@@ -8158,7 +8251,6 @@ fieldset[disabled] .cds--form__helper-text {
8158
8251
  }
8159
8252
 
8160
8253
  .cds--contained-list__header {
8161
- position: -webkit-sticky;
8162
8254
  position: sticky;
8163
8255
  z-index: 1;
8164
8256
  top: 0;
@@ -8507,21 +8599,29 @@ fieldset[disabled] .cds--form__helper-text {
8507
8599
  border-color: var(--cds-border-disabled, #c6c6c6);
8508
8600
  }
8509
8601
 
8510
- .cds--content-switcher-btn:first-child {
8602
+ .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
8511
8603
  border-left: 0.0625rem solid var(--cds-border-inverse, #161616);
8512
8604
  border-bottom-left-radius: 0.25rem;
8513
8605
  border-top-left-radius: 0.25rem;
8514
8606
  }
8607
+ .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child:disabled {
8608
+ border-color: var(--cds-border-disabled, #c6c6c6);
8609
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
8610
+ }
8515
8611
 
8516
- .cds--content-switcher-btn:last-child {
8612
+ .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
8517
8613
  border-right: 0.0625rem solid var(--cds-border-inverse, #161616);
8518
8614
  border-bottom-right-radius: 0.25rem;
8519
8615
  border-top-right-radius: 0.25rem;
8520
8616
  }
8617
+ .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child:disabled {
8618
+ border-color: var(--cds-border-disabled, #c6c6c6);
8619
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
8620
+ }
8521
8621
 
8522
- .cds--content-switcher--selected,
8523
- .cds--content-switcher--selected:first-child,
8524
- .cds--content-switcher--selected:last-child {
8622
+ .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected,
8623
+ .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:first-child,
8624
+ .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:last-child {
8525
8625
  border: 0;
8526
8626
  }
8527
8627
 
@@ -8536,7 +8636,7 @@ fieldset[disabled] .cds--form__helper-text {
8536
8636
  content: "";
8537
8637
  }
8538
8638
 
8539
- .cds--content-switcher-btn:first-of-type::before {
8639
+ .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-of-type::before {
8540
8640
  display: none;
8541
8641
  }
8542
8642
 
@@ -8607,6 +8707,87 @@ fieldset[disabled] .cds--form__helper-text {
8607
8707
  }
8608
8708
  }
8609
8709
 
8710
+ .cds--content-switcher--icon-only {
8711
+ -webkit-box-pack: start;
8712
+ -ms-flex-pack: start;
8713
+ justify-content: flex-start;
8714
+ }
8715
+
8716
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn {
8717
+ border-left: 0.0625rem solid var(--cds-border-inverse, #161616);
8718
+ border-bottom-left-radius: 0.25rem;
8719
+ border-top-left-radius: 0.25rem;
8720
+ }
8721
+
8722
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher--selected[disabled],
8723
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher--selected[disabled] {
8724
+ border-color: var(--cds-layer-selected-disabled, #8d8d8d);
8725
+ }
8726
+
8727
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn {
8728
+ border-right: 0.0625rem solid var(--cds-border-inverse, #161616);
8729
+ border-bottom-right-radius: 0.25rem;
8730
+ border-top-right-radius: 0.25rem;
8731
+ }
8732
+
8733
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn.cds--content-switcher--selected,
8734
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn.cds--content-switcher--selected {
8735
+ border-color: var(--cds-background, #ffffff);
8736
+ }
8737
+
8738
+ .cds--content-switcher--lg .cds--content-switcher-btn {
8739
+ padding-right: 0.875rem;
8740
+ padding-left: 0.875rem;
8741
+ }
8742
+
8743
+ .cds--content-switcher--lg .cds--content-switcher-btn svg {
8744
+ width: 20px;
8745
+ height: 20px;
8746
+ }
8747
+
8748
+ .cds--content-switcher--icon-only .cds--content-switcher-btn svg {
8749
+ fill: var(--cds-icon-primary, #161616);
8750
+ }
8751
+
8752
+ .cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected svg {
8753
+ z-index: 1;
8754
+ fill: var(--cds-icon-inverse, #ffffff);
8755
+ }
8756
+
8757
+ .cds--content-switcher--icon-only.cds--content-switcher--sm .cds--btn--sm {
8758
+ height: 2rem;
8759
+ }
8760
+
8761
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-of-type .cds--content-switcher-btn::before {
8762
+ display: none;
8763
+ }
8764
+
8765
+ .cds--content-switcher-btn:focus::before,
8766
+ .cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
8767
+ .cds--content-switcher-btn:hover::before,
8768
+ .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
8769
+ .cds--content-switcher--selected::before,
8770
+ .cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
8771
+ background-color: transparent;
8772
+ }
8773
+
8774
+ .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] {
8775
+ border-color: var(--cds-border-inverse, #161616);
8776
+ }
8777
+
8778
+ .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
8779
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
8780
+ }
8781
+
8782
+ .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled]:not(.cds--content-switcher--selected):hover,
8783
+ .cds--content-switcher--icon-only .cds--content-switcher-popover--selected + .cds--content-switcher-popover--disabled .cds--content-switcher-btn[disabled]:hover::before {
8784
+ background-color: transparent;
8785
+ }
8786
+
8787
+ .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled]:hover::before {
8788
+ background-color: var(--cds-border-subtle);
8789
+ }
8790
+
8610
8791
  .cds--data-table-container {
8611
8792
  position: relative;
8612
8793
  padding-top: 0.125rem;
@@ -9113,7 +9294,6 @@ tr.cds--data-table--selected:last-of-type td {
9113
9294
  display: flex;
9114
9295
  }
9115
9296
  .cds--data-table--sticky-header thead {
9116
- position: -webkit-sticky;
9117
9297
  position: sticky;
9118
9298
  z-index: 1;
9119
9299
  top: 0;
@@ -9720,7 +9900,7 @@ tr.cds--data-table--selected:last-of-type td {
9720
9900
  }
9721
9901
 
9722
9902
  .cds--action-list .cds--btn {
9723
- padding: calc(0.875rem - 3px) 16px;
9903
+ padding: calc(0.875rem - 3px) 1rem;
9724
9904
  color: var(--cds-text-on-color, #ffffff);
9725
9905
  white-space: nowrap;
9726
9906
  }
@@ -9785,7 +9965,6 @@ tr.cds--data-table--selected:last-of-type td {
9785
9965
  }
9786
9966
 
9787
9967
  .cds--batch-summary {
9788
- position: -webkit-sticky;
9789
9968
  position: sticky;
9790
9969
  z-index: 100000;
9791
9970
  left: 0;
@@ -11618,6 +11797,7 @@ th .cds--table-sort__flex {
11618
11797
  }
11619
11798
 
11620
11799
  .cds--date-picker__input[readonly] {
11800
+ border-bottom-color: var(--cds-border-subtle);
11621
11801
  background: transparent;
11622
11802
  cursor: text;
11623
11803
  }
@@ -12136,6 +12316,7 @@ button.cds--dropdown-text:focus {
12136
12316
 
12137
12317
  .cds--dropdown--readonly,
12138
12318
  .cds--dropdown--readonly:hover {
12319
+ border-bottom-color: var(--cds-border-subtle);
12139
12320
  background-color: transparent;
12140
12321
  }
12141
12322
 
@@ -13287,6 +13468,15 @@ button.cds--dropdown-text:focus {
13287
13468
  bottom: 0.5rem;
13288
13469
  }
13289
13470
 
13471
+ .cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker > .cds--date-picker-container,
13472
+ .cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker .cds--date-picker__input {
13473
+ border-bottom-color: var(--cds-border-subtle);
13474
+ }
13475
+
13476
+ .cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input {
13477
+ border-left-color: var(--cds-border-subtle);
13478
+ }
13479
+
13290
13480
  .cds--multi-select__wrapper.cds--list-box__wrapper--fluid--focus:not(.cds--multi-select--filterable__wrapper) .cds--list-box__field--wrapper--input-focused {
13291
13481
  outline: none;
13292
13482
  }
@@ -13555,12 +13745,11 @@ button.cds--dropdown-text:focus {
13555
13745
  }
13556
13746
 
13557
13747
  .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
13558
- border-bottom-width: 0;
13748
+ border-bottom-color: transparent;
13559
13749
  }
13560
13750
  .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
13561
13751
  outline: 2px solid var(--cds-focus, #0f62fe);
13562
13752
  outline-offset: -2px;
13563
- border: 0;
13564
13753
  }
13565
13754
  @media screen and (prefers-contrast) {
13566
13755
  .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
@@ -13569,7 +13758,7 @@ button.cds--dropdown-text:focus {
13569
13758
  }
13570
13759
 
13571
13760
  .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn {
13572
- border-bottom-width: 0;
13761
+ border-bottom-color: transparent;
13573
13762
  }
13574
13763
 
13575
13764
  .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
@@ -13744,6 +13933,7 @@ button.cds--dropdown-text:focus {
13744
13933
  }
13745
13934
 
13746
13935
  .cds--number--readonly input[type=number] {
13936
+ border-bottom-color: var(--cds-border-subtle);
13747
13937
  background: transparent;
13748
13938
  }
13749
13939
 
@@ -14924,6 +15114,7 @@ optgroup.cds--select-optgroup:disabled,
14924
15114
  }
14925
15115
 
14926
15116
  .cds--select--readonly .cds--select-input {
15117
+ border-bottom-color: var(--cds-border-subtle);
14927
15118
  background-color: transparent;
14928
15119
  cursor: default;
14929
15120
  }
@@ -16175,6 +16366,7 @@ optgroup.cds--select-optgroup:disabled,
16175
16366
  font-weight: var(--cds-heading-03-font-weight, 400);
16176
16367
  line-height: var(--cds-heading-03-line-height, 1.4);
16177
16368
  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
16369
+ padding-right: calc(20% - 3rem);
16178
16370
  color: var(--cds-text-primary, #161616);
16179
16371
  }
16180
16372
 
@@ -16488,6 +16680,7 @@ optgroup.cds--select-optgroup:disabled,
16488
16680
 
16489
16681
  .cds--multi-select.cds--multi-select--readonly,
16490
16682
  .cds--multi-select.cds--multi-select--readonly:hover {
16683
+ border-bottom-color: var(--cds-border-subtle);
16491
16684
  background-color: transparent;
16492
16685
  }
16493
16686
 
@@ -20612,35 +20805,51 @@ span.cds--pagination__text.cds--pagination__items-count {
20612
20805
 
20613
20806
  .cds--structured-list-row {
20614
20807
  display: table-row;
20615
- border-bottom: 1px solid var(--cds-border-subtle);
20808
+ border-top: 1px solid var(--cds-border-subtle);
20616
20809
  -webkit-transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
20617
20810
  transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
20618
20811
  }
20619
20812
 
20813
+ .cds--structured-list-tbody .cds--structured-list-row:last-child {
20814
+ border-bottom: 1px solid var(--cds-border-subtle);
20815
+ }
20816
+
20817
+ .cds--structured-list-row--header-row {
20818
+ border: none;
20819
+ }
20820
+
20620
20821
  .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) {
20621
- border-bottom: 1px solid var(--cds-background-hover, rgba(141, 141, 141, 0.12));
20622
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
20822
+ border-color: var(--cds-layer-hover);
20823
+ background-color: var(--cds-layer-hover);
20623
20824
  cursor: pointer;
20624
20825
  }
20625
20826
 
20626
- .cds--structured-list-row.cds--structured-list-row--selected {
20627
- background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
20827
+ .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) + .cds--structured-list-row {
20828
+ border-color: var(--cds-layer-hover);
20829
+ }
20830
+
20831
+ .cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected {
20832
+ border-color: var(--cds-layer-selected);
20833
+ background-color: var(--cds-layer-selected);
20834
+ }
20835
+
20836
+ .cds--structured-list--selection .cds--structured-list-row--selected + .cds--structured-list-row {
20837
+ border-color: var(--cds-layer-selected);
20838
+ }
20839
+
20840
+ .cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected .cds--structured-list-td {
20841
+ color: var(--cds-text-primary, #161616);
20628
20842
  }
20629
20843
 
20630
20844
  .cds--structured-list-row.cds--structured-list-row--header-row {
20631
- border-bottom: 1px solid var(--cds-background-selected, rgba(141, 141, 141, 0.2));
20632
20845
  cursor: inherit;
20633
20846
  }
20634
20847
 
20635
20848
  .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row) > .cds--structured-list-td,
20636
- .cds--structured-list-row.cds--structured-list-row--selected > .cds--structured-list-td {
20849
+ .cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected > .cds--structured-list-td {
20637
20850
  color: var(--cds-text-primary, #161616);
20638
20851
  }
20639
20852
 
20640
- .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row) > .cds--structured-list-td {
20641
- border-top: 1px solid var(--cds-border-subtle);
20642
- }
20643
-
20644
20853
  .cds--structured-list-thead {
20645
20854
  display: table-header-group;
20646
20855
  vertical-align: middle;
@@ -20692,7 +20901,6 @@ span.cds--pagination__text.cds--pagination__items-count {
20692
20901
  display: table-cell;
20693
20902
  max-width: 36rem;
20694
20903
  color: var(--cds-text-secondary, #525252);
20695
- border-top: 1px solid var(--cds-border-subtle);
20696
20904
  -webkit-transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
20697
20905
  transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
20698
20906
  }
@@ -20976,6 +21184,11 @@ span.cds--pagination__text.cds--pagination__items-count {
20976
21184
  }
20977
21185
  }
20978
21186
  }
21187
+ .cds--tabs .cds--tabs__nav-item-label-wrapper {
21188
+ display: -webkit-box;
21189
+ display: -ms-flexbox;
21190
+ display: flex;
21191
+ }
20979
21192
  .cds--tabs .cds--tabs__nav-item {
20980
21193
  display: -webkit-box;
20981
21194
  display: -ms-flexbox;
@@ -21019,6 +21232,18 @@ span.cds--pagination__text.cds--pagination__items-count {
21019
21232
  -webkit-transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
21020
21233
  transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
21021
21234
  }
21235
+ .cds--tabs .cds--tabs__nav-item--icon {
21236
+ display: -webkit-box;
21237
+ display: -ms-flexbox;
21238
+ display: flex;
21239
+ -webkit-box-align: center;
21240
+ -ms-flex-align: center;
21241
+ align-items: center;
21242
+ padding-left: 0.5rem;
21243
+ }
21244
+ .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
21245
+ padding-left: 1rem;
21246
+ }
21022
21247
  .cds--tabs .cds--tabs__nav-link {
21023
21248
  -webkit-box-sizing: border-box;
21024
21249
  box-sizing: border-box;
@@ -21093,7 +21318,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21093
21318
  .cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
21094
21319
  overflow-x: visible;
21095
21320
  }
21096
- .cds--tabs .cds--tabs__nav-item--icon, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
21321
+ .cds--tabs .cds--tabs__nav-item--icon-only, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only {
21097
21322
  display: -webkit-box;
21098
21323
  display: -ms-flexbox;
21099
21324
  display: flex;
@@ -21107,7 +21332,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21107
21332
  justify-content: center;
21108
21333
  padding: 0;
21109
21334
  }
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 {
21335
+ .cds--tabs .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label {
21111
21336
  line-height: 0;
21112
21337
  }
21113
21338
  .cds--tabs.cds--tabs__icon--lg {
@@ -21433,6 +21658,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21433
21658
  }
21434
21659
 
21435
21660
  .cds--text-area__wrapper--readonly .cds--text-area {
21661
+ border-bottom-color: var(--cds-border-subtle);
21436
21662
  background: transparent;
21437
21663
  }
21438
21664
 
@@ -21972,10 +22198,12 @@ span.cds--pagination__text.cds--pagination__items-count {
21972
22198
  }
21973
22199
 
21974
22200
  .cds--time-picker--readonly .cds--time-picker__input-field {
22201
+ border-bottom-color: var(--cds-border-subtle);
21975
22202
  background-color: transparent;
21976
22203
  }
21977
22204
 
21978
22205
  .cds--time-picker--readonly .cds--select-input {
22206
+ border-bottom-color: var(--cds-border-subtle);
21979
22207
  background-color: transparent;
21980
22208
  cursor: default;
21981
22209
  }
@@ -22285,6 +22513,9 @@ span.cds--pagination__text.cds--pagination__items-count {
22285
22513
  .cds--tree-node:focus {
22286
22514
  outline: none;
22287
22515
  }
22516
+ .cds--tree-node:hover {
22517
+ cursor: pointer;
22518
+ }
22288
22519
 
22289
22520
  .cds--tree-node:focus > .cds--tree-node__label {
22290
22521
  outline: 2px solid var(--cds-focus, #0f62fe);