@carbon/styles 1.32.0-rc.0 → 1.33.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
@@ -6916,7 +6916,15 @@ fieldset[disabled] .cds--form__helper-text {
6916
6916
  }
6917
6917
 
6918
6918
  .cds--list-box--expanded {
6919
- border-bottom-color: var(--cds-border-subtle);
6919
+ border-bottom-color: var(--cds-border-subtle-01, #c6c6c6);
6920
+ }
6921
+
6922
+ .cds--layer-two .cds--list-box--expanded {
6923
+ border-bottom-color: var(--cds-border-subtle-02, #e0e0e0);
6924
+ }
6925
+
6926
+ .cds--layer-three .cds--list-box--expanded {
6927
+ border-bottom-color: var(--cds-border-subtle-03, #c6c6c6);
6920
6928
  }
6921
6929
 
6922
6930
  .cds--list-box--expanded:hover {
@@ -7349,6 +7357,7 @@ fieldset[disabled] .cds--form__helper-text {
7349
7357
  z-index: 9100;
7350
7358
  right: 0;
7351
7359
  left: 0;
7360
+ display: none;
7352
7361
  width: 100%;
7353
7362
  background-color: var(--cds-layer);
7354
7363
  overflow-y: auto;
@@ -7363,9 +7372,10 @@ fieldset[disabled] .cds--form__helper-text {
7363
7372
  }
7364
7373
  }
7365
7374
 
7366
- .cds--list-box .cds--list-box__field[aria-expanded=false] + .cds--list-box__menu {
7375
+ .cds--list-box .cds--list-box__field[aria-expanded=false] .cds--list-box__menu {
7367
7376
  display: none;
7368
7377
  max-height: 0;
7378
+ visibility: hidden;
7369
7379
  }
7370
7380
 
7371
7381
  .cds--list-box--expanded .cds--list-box__menu {
@@ -7423,7 +7433,15 @@ fieldset[disabled] .cds--form__helper-text {
7423
7433
  }
7424
7434
 
7425
7435
  .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
7426
- border-top-color: var(--cds-border-subtle);
7436
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
7437
+ }
7438
+
7439
+ .cds--layer-two .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
7440
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
7441
+ }
7442
+
7443
+ .cds--layer-three .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
7444
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
7427
7445
  }
7428
7446
 
7429
7447
  .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option {
@@ -7434,12 +7452,24 @@ fieldset[disabled] .cds--form__helper-text {
7434
7452
  color: var(--cds-text-primary, #161616);
7435
7453
  }
7436
7454
 
7437
- .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7438
- border-top-color: transparent;
7455
+ .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7456
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
7439
7457
  }
7440
7458
 
7441
- .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7442
- border-top-color: var(--cds-border-subtle);
7459
+ .cds--layer-two .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7460
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
7461
+ }
7462
+
7463
+ .cds--layer-three .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7464
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
7465
+ }
7466
+
7467
+ .cds--layer-two .cds--list-box__menu-item__option {
7468
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
7469
+ }
7470
+
7471
+ .cds--layer-three .cds--list-box__menu-item__option {
7472
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
7443
7473
  }
7444
7474
 
7445
7475
  .cds--list-box__menu-item__option {
@@ -7451,7 +7481,7 @@ fieldset[disabled] .cds--form__helper-text {
7451
7481
  padding: 0.6875rem 0;
7452
7482
  padding-right: 1.5rem;
7453
7483
  border-top: 1px solid transparent;
7454
- border-top-color: var(--cds-border-subtle);
7484
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
7455
7485
  border-bottom: 1px solid transparent;
7456
7486
  margin: 0 1rem;
7457
7487
  color: var(--cds-text-secondary, #525252);
@@ -7513,12 +7543,24 @@ fieldset[disabled] .cds--form__helper-text {
7513
7543
  border-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
7514
7544
  }
7515
7545
 
7516
- .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option {
7517
- border-top-color: var(--cds-border-subtle);
7546
+ .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
7547
+ .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7548
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
7518
7549
  }
7519
7550
 
7520
- .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7521
- border-top-color: var(--cds-border-subtle);
7551
+ .cds--layer-two .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
7552
+ .cds--layer-two .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7553
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
7554
+ }
7555
+
7556
+ .cds--layer-three .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
7557
+ .cds--layer-three .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7558
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
7559
+ }
7560
+
7561
+ .cds--list-box__menu-item--active + .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
7562
+ .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7563
+ border-top-color: transparent;
7522
7564
  }
7523
7565
 
7524
7566
  .cds--list-box.cds--list-box--inline .cds--list-box__menu-item__option {
@@ -7531,10 +7573,15 @@ fieldset[disabled] .cds--form__helper-text {
7531
7573
  }
7532
7574
 
7533
7575
  .cds--list-box__menu-item--highlighted {
7534
- border-color: transparent;
7535
- background-color: var(--cds-layer-selected);
7576
+ outline: 2px solid var(--cds-focus, #0f62fe);
7577
+ outline-offset: -2px;
7536
7578
  color: var(--cds-text-primary, #161616);
7537
7579
  }
7580
+ @media screen and (prefers-contrast) {
7581
+ .cds--list-box__menu-item--highlighted {
7582
+ outline-style: dotted;
7583
+ }
7584
+ }
7538
7585
 
7539
7586
  .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,
7540
7587
  .cds--list-box__menu-item--highlighted + .cds--list-box__menu-item .cds--list-box__menu-item__option {
@@ -14240,8 +14287,8 @@ optgroup.cds--select-optgroup:disabled,
14240
14287
  }
14241
14288
 
14242
14289
  .cds--text-area--fluid div.cds--label {
14243
- right: 1rem;
14244
- left: initial;
14290
+ display: flex;
14291
+ justify-content: flex-end;
14245
14292
  }
14246
14293
 
14247
14294
  .cds--text-area--fluid .cds--text-area {
@@ -15048,6 +15095,15 @@ optgroup.cds--select-optgroup:disabled,
15048
15095
  .cds--modal .cds--number__rule-divider {
15049
15096
  background-color: var(--cds-border-subtle-02, #e0e0e0);
15050
15097
  }
15098
+ .cds--modal .cds--list-box__menu-item__option {
15099
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
15100
+ }
15101
+ .cds--modal .cds--list-box__menu-item:hover .cds--list-box__menu-item__option {
15102
+ border-top-color: var(--cds-layer-hover);
15103
+ }
15104
+ .cds--modal .cds--list-box__menu-item--active:hover .cds--list-box__menu-item__option {
15105
+ border-top-color: var(--cds-layer-selected-hover);
15106
+ }
15051
15107
  .cds--modal .cds--text-input--fluid .cds--text-input,
15052
15108
  .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
15053
15109
  .cds--modal .cds--text-area--fluid .cds--text-area,
@@ -19460,6 +19516,20 @@ span.cds--pagination__text.cds--pagination__items-count {
19460
19516
  }
19461
19517
  }
19462
19518
 
19519
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list {
19520
+ display: grid;
19521
+ width: 100%;
19522
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
19523
+ }
19524
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-label,
19525
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-secondary-label {
19526
+ overflow: hidden;
19527
+ text-overflow: ellipsis;
19528
+ }
19529
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item--icon {
19530
+ margin-left: auto;
19531
+ }
19532
+
19463
19533
  .cds--tabs {
19464
19534
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
19465
19535
  font-weight: var(--cds-body-compact-01-font-weight, 400);