@carbon/styles 1.64.0 → 1.65.0

package/scss/components/accordion/_accordion.scss

@@ -50,9 +50,11 @@ $content-padding: 0 0 0 $spacing-05 !default;
     @include layout.use('density', $default: 'normal');
 
     @include component-reset.reset;
-
-    inline-size: 100%;
-    list-style: none;
+    /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector, no-duplicate-selectors */
+    & {
+      inline-size: 100%;
+      list-style: none;
+    }
   }
 
   .#{$prefix}--accordion__item {
@@ -81,20 +83,23 @@ $content-padding: 0 0 0 $spacing-05 !default;
   }
 
   .#{$prefix}--accordion__heading {
+    transition: background-color motion(standard, productive) $duration-fast-02;
     @include button-reset.reset;
 
-    position: relative;
-    display: flex;
-    flex-direction: $flex-direction;
-    align-items: center;
-    justify-content: $justify-content;
-    margin: 0;
-    color: $text-primary;
-    cursor: pointer;
-    inline-size: 100%;
-    min-block-size: layout.size('height');
-    padding-inline-end: layout.density('padding-inline');
-    transition: background-color motion(standard, productive) $duration-fast-02;
+    /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector, no-duplicate-selectors */
+    & {
+      position: relative;
+      display: flex;
+      flex-direction: $flex-direction;
+      align-items: center;
+      justify-content: $justify-content;
+      margin: 0;
+      color: $text-primary;
+      cursor: pointer;
+      inline-size: 100%;
+      min-block-size: layout.size('height');
+      padding-inline-end: layout.density('padding-inline');
+    }
 
     &:hover {
       background-color: $layer-hover;
@@ -143,23 +148,30 @@ $content-padding: 0 0 0 $spacing-05 !default;
   .#{$prefix}--accordion__arrow {
     @include focus-outline('reset');
 
-    flex: 0 0 1rem;
-    block-size: 1rem;
-    fill: $icon-primary;
-    inline-size: 1rem;
-    // Without flex basis and flex shrink being set here, our icon width can go
-    // <16px and cause the icon to render in the incorrect artboard size
-    transform: rotate(-270deg) #{'/*rtl:ignore*/'};
     transition: all $duration-fast-02 motion(standard, productive);
+
+    /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector, no-duplicate-selectors */
+    & {
+      flex: 0 0 1rem;
+      block-size: 1rem;
+      fill: $icon-primary;
+      inline-size: 1rem;
+      // Without flex basis and flex shrink being set here, our icon width can go
+      // <16px and cause the icon to render in the incorrect artboard size
+      transform: rotate(-270deg) #{'/*rtl:ignore*/'};
+    }
   }
 
   .#{$prefix}--accordion__title {
     @include type-style('body-01');
 
-    z-index: 1;
-    inline-size: 100%;
-    padding-inline-start: $spacing-05;
-    text-align: start;
+    /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector, no-duplicate-selectors */
+    & {
+      z-index: 1;
+      inline-size: 100%;
+      padding-inline-start: $spacing-05;
+      text-align: start;
+    }
   }
 
   .#{$prefix}--accordion__wrapper {

package/scss/components/checkbox/_checkbox.scss

@@ -62,7 +62,7 @@
     display: flex;
     cursor: pointer;
     min-block-size: convert.to-rem(20px);
-    padding-block-start: convert.to-rem(2px);
+    padding-block-start: convert.to-rem(1px);
     padding-inline-start: convert.to-rem(20px);
     user-select: none;
   }

package/scss/components/code-snippet/_code-snippet.scss

@@ -300,6 +300,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--inline.#{$prefix}--btn {
     block-size: 1.25rem;
     inline-size: initial;
+    max-inline-size: unset;
     min-block-size: 1.25rem;
     padding-inline: 0;
   }

package/scss/components/inline-loading/_inline-loading.scss

@@ -30,7 +30,7 @@ $-loading-gap-small: 110;
   }
 
   .#{$prefix}--inline-loading__text {
-    @include type-style('label-01');
+    @include type-style('label-02');
 
     color: $text-secondary;
   }

package/scss/components/modal/_modal.scss

@@ -272,7 +272,7 @@
   }
 
   //removing mask image in case we have dropdown in modal
-  .#{$prefix}--modal-scroll-content:has(.#{$prefix}--dropdown--autoalign) {
+  .#{$prefix}--modal-scroll-content:has(.#{$prefix}--autoalign) {
     mask-image: none;
   }
 

package/scss/components/multiselect/_multiselect.scss

@@ -42,6 +42,26 @@
     min-inline-size: auto;
   }
 
+  // When select all is turned on, the first item in the listbox
+  // is always the "Select all" option and gets special border
+  // treatment
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--selectall
+    .#{$prefix}--list-box__menu-item:first-child
+    .#{$prefix}--list-box__menu-item__option {
+    padding: 0.6875rem $spacing-05;
+    margin: 0;
+    border-block-end: 1px solid $border-subtle-01;
+  }
+
+  // When select all is turned on, the second item in the list
+  // has special treatment to look correct against the "Select all"
+  // border treatment
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--selectall
+    .#{$prefix}--list-box__menu-item:nth-child(2)
+    .#{$prefix}--list-box__menu-item__option {
+    border-block-start: none;
+  }
+
   .#{$prefix}--multi-select
     .#{$prefix}--list-box__menu-item__option
     .#{$prefix}--checkbox-wrapper {
@@ -62,6 +82,23 @@
     white-space: nowrap;
   }
 
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    .#{$prefix}--checkbox-label::before {
+    margin-block: 0;
+  }
+
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    .cds--checkbox:indeterminate
+    + .cds--checkbox-label::after {
+    inset-block-start: convert.to-rem(9px);
+  }
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    .cds--checkbox-label::after {
+    inset-block-start: convert.to-rem(5px);
+  }
   .#{$prefix}--multi-select
     .#{$prefix}--list-box__menu-item__option
     > .#{$prefix}--form-item {

package/scss/components/slider/_slider.scss

@@ -224,7 +224,6 @@
   .#{$prefix}--slider__thumb--lower,
   .#{$prefix}--slider__thumb--upper {
     position: absolute;
-    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
     border-radius: unset;
     background-color: transparent;
     box-shadow: none;