@carbon/styles 1.58.0 → 1.59.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.58.0",
+  "version": "1.59.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -68,5 +68,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "574070ef9eef05d6e1e5899354bbadc77ba5f3ee"
+  "gitHead": "5663eaa4c9b6ce2bf4e32d8eeccd2bb20aae4539"
 }

package/scss/components/checkbox/_checkbox.scss

@@ -385,4 +385,29 @@
     line-height: inherit;
     margin-block-start: convert.to-rem(-1px);
   }
+
+  // horizontal checkbox group
+  .#{$prefix}--checkbox-group--horizontal {
+    position: relative;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+
+    .#{$prefix}--form-item {
+      flex: none;
+      margin-block-end: 0;
+
+      &:not(:last-of-type) {
+        margin-inline-end: $spacing-05;
+      }
+    }
+
+    .#{$prefix}--checkbox-label-text {
+      padding-inline-start: $spacing-03;
+    }
+
+    .#{$prefix}--label + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
+      margin-block-start: 0;
+    }
+  }
 }

package/scss/components/tile/_tile.scss

@@ -232,6 +232,12 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     inline-size: $-icon-container-size;
     inset-block-end: 0;
     inset-inline-end: 0;
+    @if (
+      enabled('enable-experimental-tile-contrast') or
+        $enable-experimental-tile-contrast
+    ) {
+      border: 1px solid $border-disabled;
+    }
 
     &:focus {
       outline: 2px solid $focus;
@@ -271,6 +277,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--expandable.#{$prefix}--tile--expandable--interactive {
+    border: none;
     cursor: default;
     transition: max-height $duration-moderate-01 motion(standard, productive);
 
@@ -391,6 +398,24 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
+    > .#{$prefix}--slug {
+    inset-inline-end: $spacing-05;
+    transition: inset-inline-end $duration-fast-02 motion(standard, productive);
+
+    @if (
+      enabled('enable-v12-tile-radio-icons') or
+        $enable-experimental-tile-contrast
+    ) {
+      inset-inline-end: $spacing-08;
+    }
+  }
+
+  .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
+    > .#{$prefix}--slug {
+    inset-inline-end: $spacing-08;
+  }
+
   .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--slug {
     pointer-events: none;
   }
@@ -435,7 +460,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:focus,
-  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:focus {
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:focus,
+  .#{$prefix}--tile-input:focus + .#{$prefix}--tile--slug.#{$prefix}--tile {
     outline-offset: -1px;
   }
 
@@ -463,10 +489,23 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable
     .#{$prefix}--tile-content {
     position: relative;
-    z-index: 1;
     cursor: pointer;
   }
 
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    .#{$prefix}--tile-content,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable .#{$prefix}--tile-content,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile__checkmark,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected .#{$prefix}--slug {
+    z-index: 1;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    .#{$prefix}--slug:has(> .cds--popover--open) {
+    z-index: 2;
+  }
+
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--slug,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     > .#{$prefix}--tile__checkmark {