@carbon/styles 1.70.0 → 1.71.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.70.0",
+  "version": "1.71.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "ab3eba8531c341d5ee5d956b962d7cce04944ac3"
+  "gitHead": "bd4f60433ff12a7e880a43aeffd71caea62c1e6b"
 }

package/scss/components/button/_button.scss

@@ -119,6 +119,7 @@
 
     .#{$prefix}--btn__icon {
       position: static;
+      align-self: center;
       margin-inline-start: $spacing-03;
     }
 

package/scss/components/fluid-select/_fluid-select.scss

@@ -201,10 +201,14 @@
   }
 
   // AILabel styles
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--decorator
+    .#{$prefix}--select__inner-wrapper--decorator
+    > *,
   .#{$prefix}--select--fluid .#{$prefix}--select--slug .#{$prefix}--ai-label,
   .#{$prefix}--select--fluid .#{$prefix}--select--slug .#{$prefix}--slug {
     inset-block-start: convert.to-rem(42px);
-    inset-inline-end: $spacing-08;
+    inset-inline-end: $spacing-09;
   }
 
   .#{$prefix}--select--fluid

package/scss/components/select/_select.scss

@@ -283,6 +283,9 @@
 
   $divider-width: 1px;
 
+  .#{$prefix}--select--decorator
+    .#{$prefix}--select__inner-wrapper--decorator
+    > *,
   .#{$prefix}--select--slug .#{$prefix}--ai-label,
   .#{$prefix}--select--slug .#{$prefix}--slug {
     position: absolute;
@@ -292,6 +295,12 @@
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--select--decorator
+    .#{$prefix}--select__inner-wrapper--decorator
+    > *::after,
+  .#{$prefix}--select--decorator
+    .#{$prefix}--select__inner-wrapper--decorator
+    > *::before,
   .#{$prefix}--select--slug .#{$prefix}--ai-label::after,
   .#{$prefix}--select--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--select--slug .#{$prefix}--slug::after,
@@ -303,48 +312,92 @@
     inline-size: convert.to-rem(1px);
   }
 
+  .#{$prefix}--select--decorator
+    .#{$prefix}--select__inner-wrapper--decorator
+    > *::before,
   .#{$prefix}--select--slug .#{$prefix}--ai-label::before,
   .#{$prefix}--select--slug .#{$prefix}--slug::before {
     display: none;
     inset-inline-start: calc(-#{$spacing-03} - #{$divider-width});
   }
 
+  .#{$prefix}--select--decorator
+    .#{$prefix}--select__inner-wrapper--decorator
+    > *::after,
   .#{$prefix}--select--slug .#{$prefix}--ai-label::after,
   .#{$prefix}--select--slug .#{$prefix}--slug::after {
     display: block;
+    inset-block-start: 0;
     inset-inline-end: calc(-#{$spacing-03} - #{$divider-width});
   }
 
+  .#{$prefix}--select--decorator
+    .#{$prefix}--select__inner-wrapper--decorator
+    > .#{$prefix}--ai-label--revert::before,
+  .#{$prefix}--select--slug .#{$prefix}--ai-label--revert::before,
+  .#{$prefix}--select--slug .#{$prefix}--slug--revert::before {
+    inset-block-start: 0.5rem;
+    inset-inline-start: 0;
+  }
+
+  .#{$prefix}--select--decorator
+    .#{$prefix}--select__inner-wrapper--decorator
+    > .#{$prefix}--ai-label--revert,
+  .#{$prefix}--select--slug .#{$prefix}--ai-label--revert {
+    inset-inline-end: convert.to-rem(41px);
+  }
+
+  .#{$prefix}--select--decorator .#{$prefix}--ai-label--revert::after,
   .#{$prefix}--select--slug .#{$prefix}--ai-label--revert::after,
   .#{$prefix}--select--slug .#{$prefix}--slug--revert::after {
     inset-block-start: convert.to-rem(8px);
-    inset-inline-end: convert.to-rem(-1px);
+    inset-inline-end: -($divider-width);
   }
 
-  .#{$prefix}--select--slug
-    .#{$prefix}--select-input:has(~ .#{$prefix}--ai-label):not(
-      :has(~ .#{$prefix}--ai-label--revert)
+  .#{$prefix}--select--decorator
+    .#{$prefix}--select-input:has(
+      ~ .#{$prefix}--select__inner-wrapper--decorator
     ),
   .#{$prefix}--select--slug
-    .#{$prefix}--select-input:has(~ .#{$prefix}--slug):not(
-      :has(~ .#{$prefix}--slug--revert)
-    ) {
-    @include ai-gradient;
-
+    .#{$prefix}--select-input:has(~ .#{$prefix}--ai-label),
+  .#{$prefix}--select--slug .#{$prefix}--select-input:has(~ .#{$prefix}--slug) {
     padding-inline-end: $spacing-10;
   }
 
+  .#{$prefix}--select--decorator:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--select-input:has(
+      ~ .#{$prefix}--select__inner-wrapper--decorator
+    ),
   .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--select-input:has(~ .#{$prefix}--ai-label),
+  .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--select-input:has(~ .#{$prefix}--slug) {
+    padding-inline-end: $spacing-12;
+  }
+
+  .#{$prefix}--select--decorator
+    .#{$prefix}--select-input:has(
+      ~ .#{$prefix}--select__inner-wrapper--decorator .#{$prefix}--ai-label
+    ):not(
+      :has(
+          ~ .#{$prefix}--select__inner-wrapper--decorator
+            .#{$prefix}--ai-label--revert
+        )
+    ),
+  .#{$prefix}--select--slug
     .#{$prefix}--select-input:has(~ .#{$prefix}--ai-label):not(
       :has(~ .#{$prefix}--ai-label--revert)
     ),
-  .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+  .#{$prefix}--select--slug
     .#{$prefix}--select-input:has(~ .#{$prefix}--slug):not(
       :has(~ .#{$prefix}--slug--revert)
     ) {
-    padding-inline-end: $spacing-12;
+    @include ai-gradient;
   }
 
+  .#{$prefix}--select--decorator:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--select__inner-wrapper--decorator
+    > *::before,
   .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
     .#{$prefix}--ai-label::before,
   .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
@@ -352,6 +405,10 @@
     display: block;
   }
 
+  .#{$prefix}--select--decorator
+    .#{$prefix}--select-input__wrapper
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon,
   .#{$prefix}--select--slug
     .#{$prefix}--select-input__wrapper[data-invalid]
     .#{$prefix}--select-input