@carbon/styles 1.73.0 → 1.74.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.
Files changed (9) hide show
  1. package/css/styles.css +42 -20
  2. package/css/styles.min.css +1 -1
  3. package/package.json +2 -2
  4. package/scss/components/combo-box/_combo-box.scss +15 -0
  5. package/scss/components/dropdown/_dropdown.scss +4 -0
  6. package/scss/components/fluid-combo-box/_fluid-combo-box.scss +0 -9
  7. package/scss/components/fluid-list-box/_fluid-list-box.scss +3 -13
  8. package/scss/components/fluid-multiselect/_fluid-multiselect.scss +0 -6
  9. package/scss/components/multiselect/_multiselect.scss +19 -0
package/css/styles.css CHANGED
@@ -10543,6 +10543,20 @@ fieldset[disabled] .cds--form__helper-text {
10543
10543
  background-color: var(--cds-field);
10544
10544
  }
10545
10545
 
10546
+ .cds--combo-box .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted::before {
10547
+ position: absolute;
10548
+ border: 2px solid var(--cds-focus, #0f62fe);
10549
+ block-size: 100%;
10550
+ border-block-start: 1px solid var(--cds-focus, #0f62fe);
10551
+ content: "";
10552
+ inline-size: 100%;
10553
+ }
10554
+
10555
+ .cds--combo-box .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted {
10556
+ outline: 2px solid transparent;
10557
+ outline-offset: -2px;
10558
+ }
10559
+
10546
10560
  .cds--combo-box.cds--list-box--light:hover {
10547
10561
  background-color: var(--cds-field-02, #ffffff);
10548
10562
  }
@@ -15176,6 +15190,16 @@ th .cds--table-sort__flex {
15176
15190
  outline: none;
15177
15191
  }
15178
15192
 
15193
+ .cds--dropdown--focus .cds--list-box__field {
15194
+ outline: 2px solid var(--cds-focus, #0f62fe);
15195
+ outline-offset: -2px;
15196
+ }
15197
+ @media screen and (prefers-contrast) {
15198
+ .cds--dropdown--focus .cds--list-box__field {
15199
+ outline-style: dotted;
15200
+ }
15201
+ }
15202
+
15179
15203
  .cds--dropdown--invalid {
15180
15204
  outline: 2px solid var(--cds-support-error, #da1e28);
15181
15205
  outline-offset: -2px;
@@ -16271,23 +16295,15 @@ button.cds--dropdown-text:focus {
16271
16295
  }
16272
16296
  }
16273
16297
 
16274
- .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus:has(.cds--combo-box) {
16275
- outline: none;
16276
- }
16277
-
16278
- .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus:has(.cds--list-box--expanded) {
16298
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus:has(.cds--list-box--expanded.cds--multi-select--selected) {
16279
16299
  outline-width: 0.0625rem;
16280
16300
  }
16281
16301
 
16282
- .cds--list-box__wrapper--fluid .cds--list-box__field:focus {
16302
+ .cds--list-box__wrapper--fluid--focus .cds--list-box__field:focus {
16283
16303
  outline: none;
16284
16304
  outline-offset: 0;
16285
16305
  }
16286
16306
 
16287
- .cds--list-box__wrapper--fluid:not(.cds--list-box--up) .cds--list-box__menu {
16288
- inset-block-start: 100%;
16289
- }
16290
-
16291
16307
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) {
16292
16308
  outline: 2px solid var(--cds-support-error, #da1e28);
16293
16309
  outline-offset: -2px;
@@ -16536,11 +16552,6 @@ button.cds--dropdown-text:focus {
16536
16552
  white-space: nowrap;
16537
16553
  }
16538
16554
 
16539
- .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus .cds--combo-box.cds--list-box--expanded:has(input[aria-activedescendant]:not([aria-activedescendant=""])) .cds--combo-box--input--focus.cds--text-input {
16540
- outline-offset: -0.0625rem;
16541
- outline-width: 0.0625rem;
16542
- }
16543
-
16544
16555
  .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__selection {
16545
16556
  inset-block: auto 0.625rem;
16546
16557
  transform: none;
@@ -16956,6 +16967,22 @@ button.cds--dropdown-text:focus {
16956
16967
  outline-width: 0.0625rem;
16957
16968
  }
16958
16969
 
16970
+ .cds--multi-select--filterable.cds--multi-select--selected .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted::before,
16971
+ .cds--multi-select.cds--multi-select--selected .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted::before {
16972
+ position: absolute;
16973
+ border: 2px solid var(--cds-focus, #0f62fe);
16974
+ block-size: 100%;
16975
+ border-block-start: 1px solid var(--cds-focus, #0f62fe);
16976
+ content: "";
16977
+ inline-size: 100%;
16978
+ }
16979
+
16980
+ .cds--multi-select--filterable.cds--multi-select--selected .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted,
16981
+ .cds--multi-select.cds--multi-select--selected .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted {
16982
+ outline: 2px solid transparent;
16983
+ outline-offset: -2px;
16984
+ }
16985
+
16959
16986
  .cds--multi-select--filterable.cds--multi-select--selected .cds--text-input,
16960
16987
  .cds--multi-select.cds--multi-select--selected .cds--list-box__field {
16961
16988
  padding-inline-start: 0;
@@ -17017,11 +17044,6 @@ button.cds--dropdown-text:focus {
17017
17044
  margin-block-start: 1.25rem;
17018
17045
  }
17019
17046
 
17020
- .cds--list-box__wrapper--fluid .cds--multi-select--filterable--input-focused {
17021
- outline: none;
17022
- outline-offset: 0;
17023
- }
17024
-
17025
17047
  .cds--list-box__wrapper--fluid .cds--multi-select--filterable .cds--list-box__field .cds--text-input {
17026
17048
  border-block-end: 1px solid transparent;
17027
17049
  }