@carbon/styles 1.108.0 → 1.109.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.108.0",
+  "version": "1.109.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "5bb41d341768785b898851fde30731cb31b981c2"
+  "gitHead": "a4c90a9dc15cc4f0e6a99b3c0001a7a25303b555"
 }

package/scss/components/link/_link.scss

@@ -37,7 +37,7 @@ $link-focus-text-color: custom-property.get-var(
     @include component-reset.reset;
     @include type.type-style('body-compact-01');
 
-    display: inline;
+    display: inline-flex;
     color: $link-text-color;
     outline: none;
     text-decoration: none;
@@ -114,6 +114,11 @@ $link-focus-text-color: custom-property.get-var(
     @include type.type-style('body-compact-02');
   }
 
+  // Paired with icon
+  .#{$prefix}--link--icon {
+    display: inline-block;
+  }
+
   .#{$prefix}--link__icon {
     display: inline-flex;
     align-items: center;

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2025
+// Copyright IBM Corp. 2016, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -16,6 +16,7 @@
 @use '../../spacing' as *;
 @use '../../motion' as *;
 @use '../../layer' as *;
+@use '../../utilities/layout';
 @use '../../utilities/ai-gradient' as *;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/button-reset';
@@ -82,16 +83,17 @@ $list-box-menu-width: convert.to-rem(300px);
 
   .#{$prefix}--list-box {
     @include reset;
+    @include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
 
     position: relative;
     border: none;
     background-color: $field;
-    block-size: convert.to-rem(40px);
+    block-size: layout.size('height');
     border-block-end: 1px solid $border-strong;
     color: $text-primary;
     cursor: pointer;
     inline-size: $list-box-width;
-    max-block-size: convert.to-rem(40px);
+    max-block-size: layout.size('height');
     transition: all $duration-fast-01 motion(standard, productive);
 
     &:hover {
@@ -103,16 +105,6 @@ $list-box-menu-width: convert.to-rem(300px);
     cursor: default;
   }
 
-  .#{$prefix}--list-box--lg {
-    block-size: convert.to-rem(48px);
-    max-block-size: convert.to-rem(48px);
-  }
-
-  .#{$prefix}--list-box--sm {
-    block-size: convert.to-rem(32px);
-    max-block-size: convert.to-rem(32px);
-  }
-
   .#{$prefix}--list-box--expanded {
     border-block-end-color: $border-subtle-01;
   }
@@ -548,20 +540,8 @@ $list-box-menu-width: convert.to-rem(300px);
 
   .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu {
     display: block;
-    // 40px item height * 5.5 items shown
-    max-block-size: convert.to-rem(220px);
-  }
-
-  .#{$prefix}--list-box--expanded.#{$prefix}--list-box--lg
-    .#{$prefix}--list-box__menu {
-    // 48px item height * 5.5 items shown
-    max-block-size: convert.to-rem(264px);
-  }
-
-  .#{$prefix}--list-box--expanded.#{$prefix}--list-box--sm
-    .#{$prefix}--list-box__menu {
-    // 32px item height * 5.5 items shown
-    max-block-size: convert.to-rem(176px);
+    // item height * 5.5 items shown
+    max-block-size: calc(layout.size('height') * 5.5);
   }
 
   // Descendant of a `list-box__menu` that represents a selection for a control
@@ -569,7 +549,7 @@ $list-box-menu-width: convert.to-rem(300px);
     @include type-style('body-compact-01');
 
     position: relative;
-    block-size: convert.to-rem(40px);
+    block-size: layout.size('height');
     color: $text-secondary;
     cursor: pointer;
     transition: background $duration-fast-01 motion(standard, productive);
@@ -589,14 +569,6 @@ $list-box-menu-width: convert.to-rem(300px);
     background-color: $layer-hover;
   }
 
-  .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item {
-    block-size: convert.to-rem(32px);
-  }
-
-  .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item {
-    block-size: convert.to-rem(48px);
-  }
-
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover {
     background-color: transparent;
   }
@@ -670,9 +642,9 @@ $list-box-menu-width: convert.to-rem(300px);
 
     display: block;
     overflow: hidden;
-    padding: convert.to-rem(11px) 0;
+    padding: calc((layout.size('height') - 1rem) / 2 - 1px) 0;
     margin: 0 $spacing-05;
-    block-size: convert.to-rem(40px);
+    block-size: layout.size('height');
     border-block-end: 1px solid transparent;
     border-block-start: 1px solid transparent;
     border-block-start-color: $border-subtle-01;
@@ -690,7 +662,7 @@ $list-box-menu-width: convert.to-rem(300px);
     &:focus {
       @include focus-outline('outline');
 
-      padding: convert.to-rem(11px) convert.to-rem(16px);
+      padding: calc((layout.size('height') - 1rem) / 2) convert.to-rem(16px);
       border-color: transparent;
       margin: 0;
     }
@@ -701,16 +673,6 @@ $list-box-menu-width: convert.to-rem(300px);
     }
   }
 
-  .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item__option {
-    block-size: convert.to-rem(32px);
-    padding-block: convert.to-rem(7px) convert.to-rem(7px);
-  }
-
-  .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item__option {
-    block-size: convert.to-rem(48px);
-    padding-block: convert.to-rem(15px) convert.to-rem(15px);
-  }
-
   .#{$prefix}--list-box--disabled
     .#{$prefix}--list-box__menu-item:hover
     .#{$prefix}--list-box__menu-item__option,
@@ -863,27 +825,7 @@ $list-box-menu-width: convert.to-rem(300px);
 
   // Dropdown top orientation modifiers
   .#{$prefix}--list-box--up .#{$prefix}--list-box__menu {
-    inset-block-end: 2.5rem;
-  }
-
-  .#{$prefix}--list-box--up.#{$prefix}--dropdown--sm
-    .#{$prefix}--list-box__menu,
-  .#{$prefix}--list-box--up.#{$prefix}--list-box--sm
-    .#{$prefix}--list-box__menu,
-  .#{$prefix}--list-box--up
-    .#{$prefix}--list-box--sm
-    .#{$prefix}--list-box__menu {
-    inset-block-end: 2rem;
-  }
-
-  .#{$prefix}--list-box--up.#{$prefix}--dropdown--lg
-    .#{$prefix}--list-box__menu,
-  .#{$prefix}--list-box--up.#{$prefix}--list-box--lg
-    .#{$prefix}--list-box__menu,
-  .#{$prefix}--list-box--up
-    .#{$prefix}--list-box--lg
-    .#{$prefix}--list-box__menu {
-    inset-block-end: 3rem;
+    inset-block-end: layout.size('height');
   }
 
   // Tweaks for descendants

package/scss/components/multiselect/_multiselect.scss

@@ -29,6 +29,10 @@
     inline-size: 100%;
   }
 
+  .#{$prefix}--multi-select .#{$prefix}--list-box__field {
+    block-size: 100%;
+  }
+
   .#{$prefix}--multi-select .#{$prefix}--list-box__field:focus {
     @include focus-outline('reset');
   }

package/scss/components/tabs/_tabs.scss

@@ -81,6 +81,8 @@
     }
 
     &.#{$prefix}--tabs--vertical {
+      @include layout.use('size', $min: 'sm', $max: 'xl', $default: 'xl');
+
       background: $layer;
       box-shadow: inset -1px 0 $border-subtle;
       grid-column: span 2;
@@ -337,7 +339,7 @@
     &.#{$prefix}--tabs--vertical .#{$prefix}--tabs__nav-item {
       flex: none;
       background-color: $layer-01;
-      block-size: $spacing-10;
+      block-size: layout.size('height');
       border-block-end: 1px solid $border-subtle;
       border-inline-end: 1px solid $border-subtle;
       box-shadow: inset 3px 0 0 0 $border-subtle;
@@ -824,3 +826,11 @@
     }
   }
 }
+
+.#{$prefix}--tabs.#{$prefix}--tabs--vertical.#{$prefix}--layout--size-sm {
+  .#{$prefix}--tabs__nav-link {
+    .#{$prefix}--tabs__nav-item-label {
+      -webkit-line-clamp: 1;
+    }
+  }
+}