@carbon/styles 1.114.0-rc.0 → 1.114.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.114.0-rc.0",
+  "version": "1.114.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.57.0-rc.0",
-    "@carbon/feature-flags": "^1.8.0-rc.0",
-    "@carbon/grid": "^11.61.0-rc.0",
-    "@carbon/layout": "^11.58.0-rc.0",
-    "@carbon/motion": "^11.51.0-rc.0",
-    "@carbon/themes": "^11.80.0-rc.0",
-    "@carbon/type": "^11.66.0-rc.0",
+    "@carbon/colors": "^11.57.0",
+    "@carbon/feature-flags": "^1.8.0",
+    "@carbon/grid": "^11.61.0",
+    "@carbon/layout": "^11.58.0",
+    "@carbon/motion": "^11.51.0",
+    "@carbon/themes": "^11.80.0",
+    "@carbon/type": "^11.66.0",
     "@ibm/plex": "6.4.1",
     "@ibm/plex-mono": "2.5.0",
     "@ibm/plex-sans": "1.1.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "e848b98936051ac0026fb83551c91bfe603c589c"
+  "gitHead": "7518c84ffd00f22434fe19d83119692c12fccb2f"
 }

package/scss/components/__tests__/button-test.js

@@ -9,6 +9,7 @@
 
 'use strict';
 
+const postcss = require('postcss');
 const { SassRenderer } = require('@carbon/test-utils/scss');
 
 const { render } = SassRenderer.create(__dirname);
@@ -69,4 +70,30 @@ describe('scss/components/button', () => {
     `);
     expect(unwrap('height')).toBe('2rem');
   });
+
+  test('icon-only ghost button does not apply active background on focus', async () => {
+    const { result } = await render(`
+    @use '../button';
+  `);
+
+    let focusRule;
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (rule.selector === '.cds--btn--icon-only.cds--btn--ghost:focus') {
+        focusRule = rule;
+      }
+    });
+
+    expect(focusRule).toBeDefined();
+
+    const declarations = focusRule.nodes
+      .filter((node) => node.type === 'decl')
+      .reduce((styles, node) => {
+        styles[node.prop] = node.value;
+        return styles;
+      }, {});
+
+    expect(declarations['background-color']).toBeUndefined();
+    expect(declarations['box-shadow']).toBeDefined();
+  });
 });

package/scss/components/__tests__/overflow-menu-test.js

@@ -1,5 +1,5 @@
 /**
- * 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.
@@ -9,6 +9,7 @@
 
 'use strict';
 
+const postcss = require('postcss');
 const { SassRenderer } = require('@carbon/test-utils/scss');
 
 const { render } = SassRenderer.create(__dirname);
@@ -24,4 +25,42 @@ describe('scss/components/overflow-menu', () => {
      `);
     expect(unwrap('mixin')).toBe(true);
   });
+
+  test('trigger hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../overflow-menu';
+    `);
+    const hoverRules = [];
+    const triggerSelector =
+      /\.cds--overflow-menu(?=[.:#\s>+~,\[]).*:hover|\.cds--overflow-menu__trigger(?=[.:#\s>+~,\[]).*:hover/;
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (triggerSelector.test(rule.selector)) {
+        hoverRules.push(rule);
+      }
+    });
+
+    expect(hoverRules.length).toBeGreaterThan(0);
+    expect(
+      hoverRules
+        .filter((rule) => {
+          let parent = rule.parent;
+
+          while (parent) {
+            if (
+              parent.type === 'atrule' &&
+              parent.name === 'media' &&
+              parent.params.includes('(any-hover: hover)')
+            ) {
+              return false;
+            }
+
+            parent = parent.parent;
+          }
+
+          return true;
+        })
+        .map((rule) => rule.selector)
+    ).toEqual([]);
+  });
 });

package/scss/components/__tests__/structured-list-test.js

@@ -1,5 +1,5 @@
 /**
- * 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.
@@ -9,6 +9,7 @@
 
 'use strict';
 
+const postcss = require('postcss');
 const { SassRenderer } = require('@carbon/test-utils/scss');
 
 const { render } = SassRenderer.create(__dirname);
@@ -24,4 +25,40 @@ describe('scss/components/structured-list', () => {
       `);
     expect(unwrap('mixin')).toBe(true);
   });
+
+  test('row hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../structured-list';
+    `);
+    const hoverRules = [];
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (rule.selector.includes('.cds--structured-list-row:hover')) {
+        hoverRules.push(rule);
+      }
+    });
+
+    expect(hoverRules.length).toBeGreaterThan(0);
+    expect(
+      hoverRules
+        .filter((rule) => {
+          let parent = rule.parent;
+
+          while (parent) {
+            if (
+              parent.type === 'atrule' &&
+              parent.name === 'media' &&
+              parent.params.includes('(any-hover: hover)')
+            ) {
+              return false;
+            }
+
+            parent = parent.parent;
+          }
+
+          return true;
+        })
+        .map((rule) => rule.selector)
+    ).toEqual([]);
+  });
 });

package/scss/components/__tests__/tag-test.js

@@ -1,5 +1,5 @@
 /**
- * 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.
@@ -8,7 +8,6 @@
  */
 
 'use strict';
-
 const { SassRenderer } = require('@carbon/test-utils/scss');
 
 const { render } = SassRenderer.create(__dirname);

package/scss/components/__tests__/text-input-test.js

@@ -1,5 +1,5 @@
 /**
- * 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.

package/scss/components/__tests__/treeview-test.js

@@ -1,5 +1,5 @@
 /**
- * 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.
@@ -9,6 +9,7 @@
 
 'use strict';
 
+const postcss = require('postcss');
 const { SassRenderer } = require('@carbon/test-utils/scss');
 
 const { render } = SassRenderer.create(__dirname);
@@ -22,4 +23,62 @@ describe('scss/components/treeview', () => {
      `);
     expect(unwrap('mixin')).toBe(true);
   });
+
+  test('hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../treeview';
+    `);
+    const hoverRules = [];
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (
+        rule.selector.includes('.cds--tree') &&
+        rule.selector.includes(':hover')
+      ) {
+        hoverRules.push(rule);
+      }
+    });
+
+    expect(hoverRules.length).toBeGreaterThan(0);
+    expect(
+      hoverRules.some((rule) =>
+        rule.selector.includes('.cds--tree-node__label:hover')
+      )
+    ).toBe(true);
+    expect(
+      hoverRules.some(
+        (rule) =>
+          rule.selector.includes('.cds--tree-node--disabled') &&
+          rule.selector.includes('.cds--tree-node__label:hover')
+      )
+    ).toBe(true);
+    expect(
+      hoverRules.some(
+        (rule) =>
+          rule.selector.includes('.cds--tree-node--selected') &&
+          rule.selector.includes('.cds--tree-node__label:hover')
+      )
+    ).toBe(true);
+    expect(
+      hoverRules
+        .filter((rule) => {
+          let parent = rule.parent;
+
+          while (parent) {
+            if (
+              parent.type === 'atrule' &&
+              parent.name === 'media' &&
+              parent.params.includes('(any-hover: hover)')
+            ) {
+              return false;
+            }
+
+            parent = parent.parent;
+          }
+
+          return true;
+        })
+        .map((rule) => rule.selector)
+    ).toEqual([]);
+  });
 });

package/scss/components/button/_button.scss

@@ -260,7 +260,6 @@
 
     &.#{$prefix}--btn--ghost {
       &:focus {
-        background-color: $background-active;
         box-shadow: inset 0 0 0 $button-outline-width $button-focus-color;
       }
     }

package/scss/components/date-picker/_date-picker.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.
@@ -122,8 +122,10 @@
       color: $text-disabled;
     }
 
-    &:disabled:hover {
-      border-block-end: 1px solid transparent;
+    @media (any-hover: hover) {
+      &:disabled:hover {
+        border-block-end: 1px solid transparent;
+      }
     }
 
     &::placeholder {

package/scss/components/date-picker/_flatpickr.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.
@@ -236,8 +236,10 @@
       transition: none;
     }
 
-    &:hover {
-      background-color: $layer-hover;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $layer-hover;
+      }
     }
   }
 
@@ -247,9 +249,11 @@
     fill: $icon-disabled;
   }
 
-  .flatpickr-next-month.disabled:hover svg,
-  .flatpickr-prev-month.disabled:hover svg {
-    fill: $icon-disabled;
+  @media (any-hover: hover) {
+    .flatpickr-next-month.disabled:hover svg,
+    .flatpickr-prev-month.disabled:hover svg {
+      fill: $icon-disabled;
+    }
   }
 
   .flatpickr-current-month {
@@ -265,8 +269,10 @@
   .flatpickr-current-month .cur-month {
     margin-inline: $spacing-02 $spacing-02;
 
-    &:hover {
-      background-color: $layer-hover;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $layer-hover;
+      }
     }
   }
 
@@ -274,8 +280,10 @@
     position: relative;
     inline-size: convert.to-rem(60px);
 
-    &:hover {
-      background-color: $background-hover;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $background-hover;
+      }
     }
   }
 
@@ -351,9 +359,11 @@
       inset-block-start: 33%;
     }
 
-    &:hover::after {
-      border-block-end-color: $button-primary;
-      border-block-start-color: $button-primary;
+    @media (any-hover: hover) {
+      &:hover::after {
+        border-block-end-color: $button-primary;
+        border-block-start-color: $button-primary;
+      }
     }
 
     &:active::after {
@@ -370,14 +380,16 @@
     border-block-start-color: $text-disabled;
   }
 
-  .numInputWrapper:hover .arrowUp,
-  .numInputWrapper:hover .arrowDown {
-    opacity: 1;
-  }
+  @media (any-hover: hover) {
+    .numInputWrapper:hover .arrowUp,
+    .numInputWrapper:hover .arrowDown {
+      opacity: 1;
+    }
 
-  .numInputWrapper:hover .numInput[disabled] ~ .arrowUp,
-  .numInputWrapper:hover .numInput[disabled] ~ .arrowDown {
-    opacity: 0;
+    .numInputWrapper:hover .numInput[disabled] ~ .arrowUp,
+    .numInputWrapper:hover .numInput[disabled] ~ .arrowDown {
+      opacity: 0;
+    }
   }
 
   .flatpickr-weekdays {
@@ -445,8 +457,10 @@
     inline-size: convert.to-rem(40px);
     transition: all $duration-fast-01 motion(standard, productive);
 
-    &:hover {
-      background: $layer-hover;
+    @media (any-hover: hover) {
+      &:hover {
+        background: $layer-hover;
+      }
     }
 
     &:focus {
@@ -522,11 +536,13 @@
     background: $layer-01;
   }
 
-  .flatpickr-day.endRange:hover {
-    @include focus-outline('outline');
+  @media (any-hover: hover) {
+    .flatpickr-day.endRange:hover {
+      @include focus-outline('outline');
 
-    background: $layer-01;
-    color: $text-primary;
+      background: $layer-01;
+      color: $text-primary;
+    }
   }
 
   .flatpickr-day.endRange.inRange.selected {
@@ -538,8 +554,10 @@
     color: $text-disabled;
     cursor: not-allowed;
 
-    &:hover {
-      background-color: transparent;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: transparent;
+      }
     }
   }
 

package/scss/components/file-uploader/_file-uploader.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.
@@ -72,13 +72,18 @@
     outline-offset: -2px;
     transition: $duration-fast-02 motion(standard, productive);
 
-    &:focus,
-    &:hover {
+    @media (any-hover: hover) {
+      &:hover {
+        outline: 2px solid $focus;
+        text-decoration: underline;
+      }
+    }
+
+    &:focus {
       outline: 2px solid $focus;
+      text-decoration: underline;
     }
 
-    &:hover,
-    &:focus,
     &:active,
     &:active:visited {
       text-decoration: underline;
@@ -94,8 +99,14 @@
     cursor: no-drop;
     text-decoration: none;
     transition: none;
+    @media (any-hover: hover) {
+      &:hover {
+        color: $text-disabled;
+        outline: none;
+        text-decoration: none;
+      }
+    }
 
-    &:hover,
     &:focus {
       color: $text-disabled;
       outline: none;

package/scss/components/loading/_loading.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.
@@ -96,6 +96,7 @@
     inset-block-start: 0;
     inset-inline-start: 0;
     transition: background-color $duration-slow-02 motion(standard, expressive);
+    user-select: none;
   }
 
   .#{$prefix}--loading-overlay--stop {

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -50,8 +50,10 @@
       @include focus-outline('outline');
     }
 
-    &:hover {
-      background-color: $background-hover;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $background-hover;
+      }
     }
   }
 
@@ -123,8 +125,10 @@
     }
   }
 
-  .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open:hover {
-    background-color: $layer;
+  @media (any-hover: hover) {
+    .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open:hover {
+      background-color: $layer;
+    }
   }
 
   .#{$prefix}--overflow-menu-options--light {
@@ -135,8 +139,10 @@
     }
   }
 
-  .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open:hover {
-    background-color: $layer-hover;
+  @media (any-hover: hover) {
+    .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open:hover {
+      background-color: $layer-hover;
+    }
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']:not(

package/scss/components/pagination/_pagination.scss

@@ -134,6 +134,14 @@
 
   .#{$prefix}--pagination__right {
     border-inline-start: 1px solid $border-subtle;
+
+    @container pagination (max-width: 42rem) {
+      border-inline-start: 0;
+    }
+
+    &.#{$prefix}--pagination__right--no-content {
+      border-inline-start: 0;
+    }
   }
 
   .#{$prefix}--pagination__left,
@@ -178,6 +186,10 @@
   .#{$prefix}--pagination__left {
     padding: 0 $spacing-05 0 0;
 
+    &.#{$prefix}--pagination__left--no-sizer {
+      padding: 0;
+    }
+
     // 42rem = 'md' breakpoint width
     @container pagination (min-width: 42rem) {
       padding: 0 $spacing-05;

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -92,9 +92,11 @@
       color $duration-fast-02 motion(standard, productive);
     user-select: none;
 
-    &:hover {
-      background-color: $background-color-hover;
-      color: $text-primary;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $background-color-hover;
+        color: $text-primary;
+      }
     }
 
     &:focus {

package/scss/components/structured-list/_structured-list.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.
@@ -87,21 +87,23 @@
     border: none;
   }
 
-  .#{$prefix}--structured-list--selection
-    .#{$prefix}--structured-list-row:hover:not(
-      .#{$prefix}--structured-list-row--header-row
-    ):not(.#{$prefix}--structured-list-row--selected) {
-    border-color: $layer-hover;
-    background-color: $layer-hover;
-    cursor: pointer;
-  }
+  @media (any-hover: hover) {
+    .#{$prefix}--structured-list--selection
+      .#{$prefix}--structured-list-row:hover:not(
+        .#{$prefix}--structured-list-row--header-row
+      ):not(.#{$prefix}--structured-list-row--selected) {
+      border-color: $layer-hover;
+      background-color: $layer-hover;
+      cursor: pointer;
+    }
 
-  .#{$prefix}--structured-list--selection
-    .#{$prefix}--structured-list-row:hover:not(
-      .#{$prefix}--structured-list-row--header-row
-    ):not(.#{$prefix}--structured-list-row--selected)
-    + .#{$prefix}--structured-list-row {
-    border-color: $layer-hover;
+    .#{$prefix}--structured-list--selection
+      .#{$prefix}--structured-list-row:hover:not(
+        .#{$prefix}--structured-list-row--header-row
+      ):not(.#{$prefix}--structured-list-row--selected)
+      + .#{$prefix}--structured-list-row {
+      border-color: $layer-hover;
+    }
   }
 
   .#{$prefix}--structured-list--selection
@@ -126,11 +128,16 @@
     cursor: inherit;
   }
 
-  .#{$prefix}--structured-list--selection
-    .#{$prefix}--structured-list-row:hover:not(
-      .#{$prefix}--structured-list-row--header-row
-    )
-    > .#{$prefix}--structured-list-td,
+  @media (any-hover: hover) {
+    .#{$prefix}--structured-list--selection
+      .#{$prefix}--structured-list-row:hover:not(
+        .#{$prefix}--structured-list-row--header-row
+      )
+      > .#{$prefix}--structured-list-td {
+      color: $text-primary;
+    }
+  }
+
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected
     > .#{$prefix}--structured-list-td {