@carbon/styles 1.70.0 → 1.71.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 (6) hide show
  1. package/css/styles.css +38 -8
  2. package/css/styles.min.css +1 -1
  3. package/package.json +2 -2
  4. package/scss/components/button/_button.scss +1 -0
  5. package/scss/components/fluid-select/_fluid-select.scss +5 -1
  6. package/scss/components/select/_select.scss +68 -11
package/css/styles.css CHANGED
@@ -4798,6 +4798,7 @@ li.cds--accordion__item--disabled:last-of-type {
4798
4798
  }
4799
4799
  .cds--btn--ghost .cds--btn__icon {
4800
4800
  position: static;
4801
+ align-self: center;
4801
4802
  margin-inline-start: 0.5rem;
4802
4803
  }
4803
4804
  .cds--btn--ghost:hover, .cds--btn--ghost:active {
@@ -18054,6 +18055,7 @@ optgroup.cds--select-optgroup:disabled,
18054
18055
  display: none;
18055
18056
  }
18056
18057
 
18058
+ .cds--select--decorator .cds--select__inner-wrapper--decorator > *,
18057
18059
  .cds--select--slug .cds--ai-label,
18058
18060
  .cds--select--slug .cds--slug {
18059
18061
  position: absolute;
@@ -18063,6 +18065,8 @@ optgroup.cds--select-optgroup:disabled,
18063
18065
  transform: translateY(-50%);
18064
18066
  }
18065
18067
 
18068
+ .cds--select--decorator .cds--select__inner-wrapper--decorator > *::after,
18069
+ .cds--select--decorator .cds--select__inner-wrapper--decorator > *::before,
18066
18070
  .cds--select--slug .cds--ai-label::after,
18067
18071
  .cds--select--slug .cds--ai-label::before,
18068
18072
  .cds--select--slug .cds--slug::after,
@@ -18074,41 +18078,66 @@ optgroup.cds--select-optgroup:disabled,
18074
18078
  inline-size: 0.0625rem;
18075
18079
  }
18076
18080
 
18081
+ .cds--select--decorator .cds--select__inner-wrapper--decorator > *::before,
18077
18082
  .cds--select--slug .cds--ai-label::before,
18078
18083
  .cds--select--slug .cds--slug::before {
18079
18084
  display: none;
18080
18085
  inset-inline-start: calc(-0.5rem - 1px);
18081
18086
  }
18082
18087
 
18088
+ .cds--select--decorator .cds--select__inner-wrapper--decorator > *::after,
18083
18089
  .cds--select--slug .cds--ai-label::after,
18084
18090
  .cds--select--slug .cds--slug::after {
18085
18091
  display: block;
18092
+ inset-block-start: 0;
18086
18093
  inset-inline-end: calc(-0.5rem - 1px);
18087
18094
  }
18088
18095
 
18096
+ .cds--select--decorator .cds--select__inner-wrapper--decorator > .cds--ai-label--revert::before,
18097
+ .cds--select--slug .cds--ai-label--revert::before,
18098
+ .cds--select--slug .cds--slug--revert::before {
18099
+ inset-block-start: 0.5rem;
18100
+ inset-inline-start: 0;
18101
+ }
18102
+
18103
+ .cds--select--decorator .cds--select__inner-wrapper--decorator > .cds--ai-label--revert,
18104
+ .cds--select--slug .cds--ai-label--revert {
18105
+ inset-inline-end: 2.5625rem;
18106
+ }
18107
+
18108
+ .cds--select--decorator .cds--ai-label--revert::after,
18089
18109
  .cds--select--slug .cds--ai-label--revert::after,
18090
18110
  .cds--select--slug .cds--slug--revert::after {
18091
18111
  inset-block-start: 0.5rem;
18092
- inset-inline-end: -0.0625rem;
18112
+ inset-inline-end: -1px;
18093
18113
  }
18094
18114
 
18095
- .cds--select--slug .cds--select-input:has(~ .cds--ai-label):not(:has(~ .cds--ai-label--revert)),
18096
- .cds--select--slug .cds--select-input:has(~ .cds--slug):not(:has(~ .cds--slug--revert)) {
18097
- background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
18098
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
18115
+ .cds--select--decorator .cds--select-input:has(~ .cds--select__inner-wrapper--decorator),
18116
+ .cds--select--slug .cds--select-input:has(~ .cds--ai-label),
18117
+ .cds--select--slug .cds--select-input:has(~ .cds--slug) {
18099
18118
  padding-inline-end: 4rem;
18100
18119
  }
18101
18120
 
18102
- .cds--select--slug:has(.cds--select__invalid-icon) .cds--select-input:has(~ .cds--ai-label):not(:has(~ .cds--ai-label--revert)),
18103
- .cds--select--slug:has(.cds--select__invalid-icon) .cds--select-input:has(~ .cds--slug):not(:has(~ .cds--slug--revert)) {
18121
+ .cds--select--decorator:has(.cds--select__invalid-icon) .cds--select-input:has(~ .cds--select__inner-wrapper--decorator),
18122
+ .cds--select--slug:has(.cds--select__invalid-icon) .cds--select-input:has(~ .cds--ai-label),
18123
+ .cds--select--slug:has(.cds--select__invalid-icon) .cds--select-input:has(~ .cds--slug) {
18104
18124
  padding-inline-end: 6rem;
18105
18125
  }
18106
18126
 
18127
+ .cds--select--decorator .cds--select-input:has(~ .cds--select__inner-wrapper--decorator .cds--ai-label):not(:has(~ .cds--select__inner-wrapper--decorator .cds--ai-label--revert)),
18128
+ .cds--select--slug .cds--select-input:has(~ .cds--ai-label):not(:has(~ .cds--ai-label--revert)),
18129
+ .cds--select--slug .cds--select-input:has(~ .cds--slug):not(:has(~ .cds--slug--revert)) {
18130
+ background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
18131
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
18132
+ }
18133
+
18134
+ .cds--select--decorator:has(.cds--select__invalid-icon) .cds--select__inner-wrapper--decorator > *::before,
18107
18135
  .cds--select--slug:has(.cds--select__invalid-icon) .cds--ai-label::before,
18108
18136
  .cds--select--slug:has(.cds--select__invalid-icon) .cds--slug::before {
18109
18137
  display: block;
18110
18138
  }
18111
18139
 
18140
+ .cds--select--decorator .cds--select-input__wrapper .cds--select-input ~ .cds--select__invalid-icon,
18112
18141
  .cds--select--slug .cds--select-input__wrapper[data-invalid] .cds--select-input ~ .cds--select__invalid-icon,
18113
18142
  .cds--select--slug .cds--select-input__wrapper .cds--select-input ~ .cds--select__invalid-icon {
18114
18143
  inset-inline-end: 5rem;
@@ -18263,10 +18292,11 @@ optgroup.cds--select-optgroup:disabled,
18263
18292
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
18264
18293
  }
18265
18294
 
18295
+ .cds--select--fluid .cds--select--decorator .cds--select__inner-wrapper--decorator > *,
18266
18296
  .cds--select--fluid .cds--select--slug .cds--ai-label,
18267
18297
  .cds--select--fluid .cds--select--slug .cds--slug {
18268
18298
  inset-block-start: 2.625rem;
18269
- inset-inline-end: 2.5rem;
18299
+ inset-inline-end: 3rem;
18270
18300
  }
18271
18301
 
18272
18302
  .cds--select--fluid .cds--select--slug .cds--select-input {