@carbon/styles 1.104.0 → 1.105.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.104.0",
+  "version": "1.105.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,14 +40,14 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.50.0",
-    "@carbon/feature-flags": "^1.2.0",
-    "@carbon/grid": "^11.53.0",
-    "@carbon/layout": "^11.51.0",
-    "@carbon/motion": "^11.44.0",
-    "@carbon/themes": "^11.71.0",
-    "@carbon/type": "^11.57.0",
-    "@ibm/plex": "6.0.0-next.6",
+    "@carbon/colors": "^11.51.0-rc.0",
+    "@carbon/feature-flags": "^1.3.0-rc.0",
+    "@carbon/grid": "^11.54.0-rc.0",
+    "@carbon/layout": "^11.52.0-rc.0",
+    "@carbon/motion": "^11.45.0-rc.0",
+    "@carbon/themes": "^11.72.0-rc.0",
+    "@carbon/type": "^11.58.0-rc.0",
+    "@ibm/plex": "6.4.1",
     "@ibm/plex-mono": "1.1.0",
     "@ibm/plex-sans": "1.1.0",
     "@ibm/plex-sans-arabic": "1.1.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "937649543e9cc6af9dfb6b53a2adb76760bca986"
+  "gitHead": "20a00767571db791cac99d499527e2f995ead478"
 }

package/scss/__tests__/theme-test.js

@@ -217,6 +217,8 @@ describe('@carbon/styles/scss/theme', () => {
         "syntax-standard",
         "syntax-local",
         "syntax-special",
+        "syntax-inserted",
+        "syntax-deleted",
         "ai-popover-background",
         "ai-popover-shadow-outer-01",
         "ai-popover-shadow-outer-02",

package/scss/components/button/_button.scss

@@ -164,8 +164,10 @@
       $button-tertiary-active
     );
 
-    &:hover {
-      color: $text-inverse;
+    @media (any-hover: hover) {
+      &:hover {
+        color: $text-inverse;
+      }
     }
 
     &:focus {
@@ -211,13 +213,16 @@
       margin-inline-start: $spacing-03;
     }
 
-    &:hover,
-    &:active {
-      color: $link-primary-hover;
+    // Apply hover styles only on devices that support hover
+    @media (hover: hover) {
+      &:hover {
+        color: $link-primary-hover;
+      }
     }
 
     &:active {
       background-color: $background-active;
+      color: $link-primary-hover;
     }
 
     &:disabled,
@@ -347,9 +352,11 @@
         $button-danger-active
       );
 
-      &:hover {
-        border-color: $button-danger-hover;
-        color: $text-on-color;
+      @media (hover: hover) {
+        &:hover {
+          border-color: $button-danger-hover;
+          color: $text-on-color;
+        }
       }
 
       &:focus {
@@ -394,7 +401,12 @@
         margin-inline-start: $spacing-03;
       }
 
-      &:hover,
+      @media (hover: hover) {
+        &:hover {
+          color: $text-on-color;
+        }
+      }
+
       &:active {
         color: $text-on-color;
       }

package/scss/components/button/_mixins.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// 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.
@@ -123,8 +123,11 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   background-color: $bg-color;
   color: $font-color;
 
-  &:hover {
-    background-color: $hover-bg-color;
+  // Apply hover styles only on devices that support hover
+  @media (any-hover: hover) {
+    &:hover {
+      background-color: $hover-bg-color;
+    }
   }
 
   &:focus {

package/scss/components/dialog/_dialog.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2014, 2025
+// Copyright IBM Corp. 2014, 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.
@@ -267,6 +267,8 @@
 
   .#{$prefix}--dialog-container {
     display: grid;
+    box-sizing: border-box;
+    border: 1px solid $border-subtle-01;
     background-color: $layer;
     grid-template-areas:
       'header'
@@ -318,6 +320,11 @@
     mask-image: none;
   }
 
+  .#{$prefix}--dialog-scroll-content.#{$prefix}--dialog-scroll-content--no-fade,
+  .#{$prefix}--dialog-scroll-content--no-fade {
+    mask-image: none;
+  }
+
   .#{$prefix}--dialog-footer {
     display: flex;
     align-items: center;

package/scss/components/dropdown/_dropdown.scss

@@ -26,8 +26,8 @@
   .#{$prefix}--dropdown__wrapper--inline {
     display: inline-grid;
     align-items: center;
-    grid-gap: 0 convert.to-rem(24px);
-    grid-template: auto / auto min-content;
+    grid-gap: 0 convert.to-rem(8px);
+    grid-template: auto / auto min-content auto;
 
     &:has(.#{$prefix}--label.#{$prefix}--visually-hidden) {
       grid-template: auto / auto;
@@ -44,7 +44,7 @@
     }
 
     .#{$prefix}--form-requirement {
-      grid-column: 2;
+      grid-column: 3;
     }
   }
 

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

@@ -76,7 +76,7 @@ $list-box-menu-width: convert.to-rem(300px);
     }
 
     .#{$prefix}--form-requirement {
-      grid-column: 2;
+      grid-column: 3;
     }
   }
 

package/scss/components/pagination/_pagination.scss

@@ -206,11 +206,11 @@
 
   span.#{$prefix}--pagination__text {
     color: $text-primary;
-    margin-inline-start: $spacing-05;
   }
 
   span.#{$prefix}--pagination__text.#{$prefix}--pagination__items-count {
     color: $text-secondary;
+    margin-inline-start: $spacing-05;
   }
 
   .#{$prefix}--pagination__button,

package/scss/components/search/_search.scss

@@ -154,29 +154,8 @@
     inset-block-start: 0;
     inset-inline-end: 0;
 
-    &::before {
-      position: absolute;
-      display: block;
-      background-color: $field;
-      block-size: calc(100% - 2px);
-      content: '';
-      inline-size: 2px;
-      inset-block-start: convert.to-rem(1px);
-      inset-inline-start: 0;
-      transition: background-color $duration-fast-02
-        motion(standard, productive);
-
-      @media screen and (prefers-reduced-motion: reduce) {
-        transition: none;
-      }
-    }
-
     &:hover {
       border-block-end: 1px solid $border-strong;
-
-      &::before {
-        background-color: $field-hover;
-      }
     }
   }
 
@@ -191,7 +170,10 @@
     }
   }
 
+  // Keep the clear icon above the hover fill overlay.
   .#{$prefix}--search-close svg {
+    position: relative;
+    z-index: 1;
     fill: inherit;
   }
 
@@ -200,7 +182,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-width: 1px 0;
+    border-width: 0 0 1px;
     border-style: solid;
     border-color: transparent;
     block-size: convert.to-rem(40px);
@@ -208,11 +190,6 @@
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     opacity: 1;
-    transition:
-      opacity $duration-fast-02 motion(standard, productive),
-      background-color $duration-fast-02 motion(standard, productive),
-      outline $duration-fast-02 motion(standard, productive),
-      border $duration-fast-02 motion(standard, productive);
     visibility: inherit;
 
     &:hover {
@@ -230,6 +207,22 @@
     }
   }
 
+  // Preserve the field focus outline while the clear button is hovered.
+  .#{$prefix}--search-input:focus ~ .#{$prefix}--search-close:hover {
+    background-color: transparent;
+    border-block-end-color: transparent;
+    outline: none;
+
+    &::after {
+      position: absolute;
+      background-color: $field-hover;
+      content: '';
+      inset-block: $spacing-01;
+      inset-inline: 0 $spacing-01;
+      pointer-events: none;
+    }
+  }
+
   .#{$prefix}--search--disabled .#{$prefix}--search-close,
   .#{$prefix}--search--disabled.#{$prefix}--search--expandable
     .#{$prefix}--search-magnifier {
@@ -250,17 +243,6 @@
     fill: $icon-on-color-disabled;
   }
 
-  .#{$prefix}--search-close:focus,
-  .#{$prefix}--search-close:active {
-    &::before {
-      background-color: $focus;
-    }
-  }
-
-  .#{$prefix}--search-input:focus ~ .#{$prefix}--search-close:hover {
-    @include focus-outline('outline');
-  }
-
   // Small
   .#{$prefix}--search--sm {
     .#{$prefix}--search-close,

package/scss/fonts/__tests__/__snapshots__/fonts-test.js.snap

@@ -39,6 +39,13 @@ Map {
       "normal",
       "italic",
     },
+    "unicodeRange": Set {
+      "U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525",
+      "U+03C0, U+0E3F, U+2000-200D, U+2028-2029, U+202F, U+2032-2033, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD",
+      "U+0102-0103, U+01CD-01DC, U+1EA0-1EF9, U+20AB",
+      "U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF",
+      "U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02",
+    },
     "weights": Set {
       "300",
       "400",
@@ -82,6 +89,13 @@ Map {
       "normal",
       "italic",
     },
+    "unicodeRange": Set {
+      "U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525",
+      "U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD",
+      "U+0102-0103, U+01CD-01DC, U+1EA0-1EF9, U+20AB",
+      "U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF",
+      "U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02",
+    },
     "weights": Set {
       "300",
       "400",
@@ -125,6 +139,13 @@ Map {
       "normal",
       "italic",
     },
+    "unicodeRange": Set {
+      "U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525",
+      "U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD",
+      "U+0102-0103, U+01CD-01DC, U+1EA0-1EF9, U+20AB",
+      "U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF",
+      "U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02",
+    },
     "weights": Set {
       "300",
       "400",

package/scss/fonts/__tests__/fonts-test.js

@@ -54,6 +54,7 @@ describe('@carbon/styles/scss/fonts', () => {
           weights: new Set(),
           styles: new Set(),
           src: new Set(),
+          unicodeRange: new Set(),
         });
       }
 
@@ -71,6 +72,10 @@ describe('@carbon/styles/scss/fonts', () => {
         if (declaration.property === 'src') {
           entry.src.add(declaration.value);
         }
+
+        if (declaration.property === 'unicode-range') {
+          entry.unicodeRange.add(declaration.value);
+        }
       }
     }
 

package/scss/fonts/_mono.scss

@@ -7,7 +7,7 @@
 
 @use '../config';
 @use './src';
-@use './unicode';
+@use './unicode/mono' as unicode;
 
 $font-family: 'IBM Plex Mono';
 $name: 'IBM-Plex-Mono';

package/scss/fonts/_sans.scss

@@ -7,7 +7,7 @@
 
 @use '../config';
 @use './src';
-@use './unicode';
+@use './unicode/sans' as unicode;
 
 $font-family: 'IBM Plex Sans';
 $name: 'IBM-Plex-Sans';

package/scss/fonts/_serif.scss

@@ -7,7 +7,7 @@
 
 @use '../config';
 @use './src';
-@use './unicode';
+@use './unicode/serif' as unicode;
 
 $font-family: 'IBM Plex Serif';
 $name: 'IBM-Plex-Serif';

package/scss/fonts/unicode/_index.scss

@@ -1,124 +1,19 @@
 //
-// Copyright IBM Corp. 2018, 2023
+// Copyright IBM Corp. 2018, 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.
 //
 
-@use 'sass:map';
+@use './sans';
 
-/// All available unicode ranges where the keys are unicode range names and the
-/// value is the list of unicode ranges that are applicable
-/// @type {List}
-$ranges: (
-  Cyrillic: (
-    U+0400-045F,
-    U+0472-0473,
-    U+0490-049D,
-    U+04A0-04A5,
-    U+04AA-04AB,
-    U+04AE-04B3,
-    U+04B6-04BB,
-    U+04C0-04C2,
-    U+04CF-04D9,
-    U+04DC-04DF,
-    U+04E2-04E9,
-    U+04EE-04F5,
-    U+04F8-04F9,
-  ),
-  Greek: (
-    U+0384-038A,
-    U+038C,
-    U+038E-03A1,
-    U+03A3-03CE,
-  ),
-  Latin1: (
-    U+0000,
-    U+000D,
-    U+0020-007E,
-    U+00A0-00A3,
-    U+00A4-00FF,
-    U+0131,
-    U+0152-0153,
-    U+02C6,
-    U+02DA,
-    U+02DC,
-    U+2013-2014,
-    U+2018-201A,
-    U+201C-201E,
-    U+2020-2022,
-    U+2026,
-    U+2030,
-    U+2039-203A,
-    U+2044,
-    U+2074,
-    U+20AC,
-    U+2122,
-    U+2212,
-    U+FB01-FB02,
-  ),
-  Latin2: (
-    U+0100-024F,
-    U+0259,
-    U+1E00-1EFF,
-    U+20A0-20AB,
-    U+20AD-20CF,
-    U+2C60-2C7F,
-    U+A720-A7FF,
-    U+FB01-FB02,
-  ),
-  Latin3: (
-    U+0102-0103,
-    U+1EA0-1EF9,
-    U+20AB,
-  ),
-  Pi: (
-    U+0E3F,
-    U+2032-2033,
-    U+2070,
-    U+2075-2079,
-    U+2080-2081,
-    U+2083,
-    U+2085-2089,
-    U+2113,
-    U+2116,
-    U+2126,
-    U+212E,
-    U+2150-2151,
-    U+2153-215E,
-    U+2190-2199,
-    U+21A9-21AA,
-    U+21B0-21B3,
-    U+21B6-21B7,
-    U+21BA-21BB,
-    U+21C4,
-    U+21C6,
-    U+2202,
-    U+2206,
-    U+220F,
-    U+2211,
-    U+221A,
-    U+221E,
-    U+222B,
-    U+2248,
-    U+2260,
-    U+2264-2265,
-    U+25CA,
-    U+2713,
-    U+274C,
-    U+2B0E-2B11,
-    U+EBE1-EBE7,
-    U+ECE0,
-    U+EFCC,
-  ),
-);
+/// @deprecated Will be removed in Carbon v12. Use the exported $ranges from the ./sans, ./serif, and ./mono modules instead.
+$ranges: sans.$ranges;
 
 /// Retrieve the unicode range for a given unicode range name
 /// @param {String} $name
 /// @returns {List}
+/// @deprecated Will be removed in Carbon v12. Use the exported get-range function from the ./sans, ./serif, and ./mono modules instead.
 @function get-range($name) {
-  @if map.has-key($ranges, $name) {
-    @return map.get($ranges, $name);
-  }
-  @error 'Unable to find range with the name: #{$name}';
+  @return sans.get-range($name);
 }

package/scss/fonts/unicode/_mono.scss

@@ -0,0 +1,132 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+@use 'sass:map';
+
+/// All available unicode ranges where the keys are unicode range names and the
+/// value is the list of unicode ranges that are applicable
+/// @type {List}
+$ranges: (
+  Cyrillic: (
+    U+0400-045F,
+    U+0462-0463,
+    U+046A-046B,
+    U+0472-0475,
+    U+0490-04C2,
+    U+04CF-04D9,
+    U+04DC-04E9,
+    U+04EE-04F9,
+    U+0524-0525,
+  ),
+  Latin1: (
+    U+0020-007E,
+    U+00A0-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+2013-2014,
+    U+2018-201A,
+    U+201C-201E,
+    U+2020-2022,
+    U+2026,
+    U+2030,
+    U+2039-203A,
+    U+2044,
+    U+20AC,
+    U+2122,
+    U+2212,
+    U+FB01-FB02,
+  ),
+  Latin2: (
+    U+0100-0101,
+    U+0104-0130,
+    U+0132-0151,
+    U+0154-017F,
+    U+018F,
+    U+0192,
+    U+01A0-01A1,
+    U+01AF-01B0,
+    U+01FA-01FF,
+    U+0218-021B,
+    U+0237,
+    U+0259,
+    U+1E80-1E85,
+    U+1E9E,
+    U+20A1,
+    U+20A4,
+    U+20A6,
+    U+20A8-20AA,
+    U+20AD-20AE,
+    U+20B1-20B2,
+    U+20B4-20B5,
+    U+20B8-20BA,
+    U+20BD,
+    U+20BF,
+  ),
+  Latin3: (
+    U+0102-0103,
+    U+01CD-01DC,
+    U+1EA0-1EF9,
+    U+20AB,
+  ),
+  Pi: (
+    U+03C0,
+    U+0E3F,
+    U+2000-200D,
+    U+2028-2029,
+    U+202F,
+    U+2032-2033,
+    U+205F,
+    U+2070,
+    U+2074-2079,
+    U+2080-2089,
+    U+2113,
+    U+2116,
+    U+2126,
+    U+212E,
+    U+2150-2151,
+    U+2153-215E,
+    U+2190-2199,
+    U+21A9-21AA,
+    U+21B0-21B3,
+    U+21B6-21B7,
+    U+21BA-21BB,
+    U+21C4,
+    U+21C6,
+    U+2202,
+    U+2206,
+    U+220F,
+    U+2211,
+    U+2215,
+    U+221A,
+    U+221E,
+    U+222B,
+    U+2248,
+    U+2260,
+    U+2264-2265,
+    U+2500-259F,
+    U+25CA,
+    U+2713,
+    U+274C,
+    U+2B0E-2B11,
+    U+3000,
+    U+FEFF,
+    U+FFFD,
+  ),
+);
+
+/// Retrieve the unicode range for a given unicode range name
+/// @param {String} $name
+/// @returns {List}
+@function get-range($name) {
+  @if map.has-key($ranges, $name) {
+    @return map.get($ranges, $name);
+  }
+  @error 'Unable to find range with the name: #{$name}';
+}