@carbon/styles 1.32.0-rc.0 → 1.33.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.32.0-rc.0",
+  "version": "1.33.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -31,14 +31,19 @@
   "peerDependencies": {
     "sass": "^1.33.0"
   },
+  "peerDependenciesMeta": {
+    "sass": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@carbon/colors": "^11.16.0",
+    "@carbon/colors": "^11.17.0-rc.0",
     "@carbon/feature-flags": "^0.15.0",
-    "@carbon/grid": "^11.15.0",
-    "@carbon/layout": "^11.15.0",
-    "@carbon/motion": "^11.12.0",
-    "@carbon/themes": "^11.20.0",
-    "@carbon/type": "^11.19.0",
+    "@carbon/grid": "^11.16.0-rc.0",
+    "@carbon/layout": "^11.16.0-rc.0",
+    "@carbon/motion": "^11.13.0-rc.0",
+    "@carbon/themes": "^11.21.0-rc.0",
+    "@carbon/type": "^11.20.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -59,5 +64,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "fe40fbf428231bd35f6bc8cc871ea09c7afa5051"
+  "gitHead": "b9e28c4e35eeddf4ecc3261630a8f3fecc7012d4"
 }

package/scss/components/fluid-text-area/_fluid-text-area.scss

@@ -65,8 +65,8 @@
 
   //counter
   .#{$prefix}--text-area--fluid div.#{$prefix}--label {
-    right: 1rem;
-    left: initial;
+    display: flex;
+    justify-content: flex-end;
   }
 
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area {

package/scss/components/list-box/_list-box.scss

@@ -103,7 +103,15 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box--expanded {
-    border-bottom-color: $border-subtle;
+    border-bottom-color: $border-subtle-01;
+  }
+
+  .#{$prefix}--layer-two .#{$prefix}--list-box--expanded {
+    border-bottom-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three .#{$prefix}--list-box--expanded {
+    border-bottom-color: $border-subtle-03;
   }
 
   .#{$prefix}--list-box--expanded:hover {
@@ -502,6 +510,7 @@ $list-box-menu-width: rem(300px);
     z-index: z('dropdown');
     right: 0;
     left: 0;
+    display: none;
     width: $list-box-width;
     background-color: $layer;
     overflow-y: auto;
@@ -513,11 +522,12 @@ $list-box-menu-width: rem(300px);
     }
   }
 
-  .#{$prefix}--list-box
-    .#{$prefix}--list-box__field[aria-expanded='false']
-    + .#{$prefix}--list-box__menu {
-    display: none;
-    max-height: 0;
+  .#{$prefix}--list-box .#{$prefix}--list-box__field[aria-expanded='false'] {
+    .#{$prefix}--list-box__menu {
+      display: none;
+      max-height: 0;
+      visibility: hidden;
+    }
   }
 
   .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu {
@@ -582,7 +592,19 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box--disabled
     .#{$prefix}--list-box__menu-item__option:hover {
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-01;
+  }
+
+  .#{$prefix}--layer-two
+    .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item__option:hover {
+    border-top-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three
+    .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item__option:hover {
+    border-top-color: $border-subtle-03;
   }
 
   .#{$prefix}--list-box__menu-item:first-of-type
@@ -595,17 +617,35 @@ $list-box-menu-width: rem(300px);
     color: $text-primary;
   }
 
-  .#{$prefix}--list-box__menu-item:hover
+  .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item:hover
     + .#{$prefix}--list-box__menu-item
     .#{$prefix}--list-box__menu-item__option {
-    border-top-color: transparent;
+    border-top-color: $border-subtle-01;
   }
 
-  .#{$prefix}--list-box--disabled
+  .#{$prefix}--layer-two
+    .#{$prefix}--list-box--disabled
     .#{$prefix}--list-box__menu-item:hover
     + .#{$prefix}--list-box__menu-item
     .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three
+    .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle-03;
+  }
+
+  .#{$prefix}--layer-two .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle-03;
   }
 
   .#{$prefix}--list-box__menu-item__option {
@@ -617,7 +657,7 @@ $list-box-menu-width: rem(300px);
     padding: rem(11px) 0;
     padding-right: $spacing-06;
     border-top: 1px solid transparent;
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-01;
     border-bottom: 1px solid transparent;
     margin: 0 $spacing-05;
     color: $text-secondary;
@@ -682,14 +722,40 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box__menu-item[disabled]:hover
+    + .#{$prefix}--list-box__menu-item
     .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-01;
   }
 
-  .#{$prefix}--list-box__menu-item[disabled]:hover
+  .#{$prefix}--layer-two
+    .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--layer-two
+    .#{$prefix}--list-box__menu-item[disabled]:hover
     + .#{$prefix}--list-box__menu-item
     .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three
+    .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--layer-three
+    .#{$prefix}--list-box__menu-item[disabled]:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle-03;
+  }
+
+  .#{$prefix}--list-box__menu-item--active
+    + .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box__menu-item:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: transparent;
   }
 
   .#{$prefix}--list-box.#{$prefix}--list-box--inline
@@ -704,8 +770,8 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box__menu-item--highlighted {
-    border-color: transparent;
-    background-color: $layer-selected;
+    @include focus-outline('outline');
+
     color: $text-primary;
   }
 

package/scss/components/modal/_modal.scss

@@ -72,6 +72,20 @@
       background-color: $border-subtle-02;
     }
 
+    .#{$prefix}--list-box__menu-item__option {
+      border-top-color: $border-subtle-02;
+    }
+
+    .#{$prefix}--list-box__menu-item:hover
+      .#{$prefix}--list-box__menu-item__option {
+      border-top-color: $layer-hover;
+    }
+
+    .#{$prefix}--list-box__menu-item--active:hover
+      .#{$prefix}--list-box__menu-item__option {
+      border-top-color: $layer-selected-hover;
+    }
+
     // Fluid inputs
     .#{$prefix}--text-input--fluid .#{$prefix}--text-input,
     .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,

package/scss/components/tabs/_tabs.scss

@@ -609,3 +609,25 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     @include high-contrast-mode('disabled');
   }
 }
+
+//-----------------------------
+// Grid contained tabs
+//-----------------------------
+
+.#{$prefix}--tabs.#{$prefix}--tabs--contained.#{$prefix}--tabs--full-width
+  .#{$prefix}--tab--list {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+
+  .#{$prefix}--tabs__nav-link {
+    .#{$prefix}--tabs__nav-item-label,
+    .#{$prefix}--tabs__nav-item-secondary-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .#{$prefix}--tabs__nav-item--icon {
+      margin-left: auto;
+    }
+  }
+}