@carbon/styles 1.111.0 → 1.112.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.111.0",
+  "version": "1.112.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.54.0",
-    "@carbon/feature-flags": "^1.5.0",
-    "@carbon/grid": "^11.58.0",
-    "@carbon/layout": "^11.55.0",
-    "@carbon/motion": "^11.48.0",
-    "@carbon/themes": "^11.77.0",
-    "@carbon/type": "^11.63.0",
+    "@carbon/colors": "^11.55.0",
+    "@carbon/feature-flags": "^1.6.0",
+    "@carbon/grid": "^11.59.0",
+    "@carbon/layout": "^11.56.0",
+    "@carbon/motion": "^11.49.0",
+    "@carbon/themes": "^11.78.0",
+    "@carbon/type": "^11.64.0",
     "@ibm/plex": "6.4.1",
     "@ibm/plex-mono": "1.1.0",
     "@ibm/plex-sans": "1.1.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "5102bd860864c2580048183ffaf50d1ffd4400b5"
+  "gitHead": "a57cf8a896fe3fe09c5ab27648cd58947f37360a"
 }

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`@carbon/styles/scss/motion Public API 1`] = `
 {
@@ -38,6 +38,101 @@ exports[`@carbon/styles/scss/motion Public API 1`] = `
     "slow-01": "400ms",
     "slow-02": "700ms",
     "standard-easing": "cubic-bezier(0.5, 0, 0.1, 1)",
+    "surfaces": {
+      "contextual": {
+        "duration": "fast-02",
+        "enter": {
+          "opacity": 1,
+          "transform": "scale(1)",
+        },
+        "enter-easing": [
+          "entrance",
+          "expressive",
+        ],
+        "exit": {
+          "opacity": 0,
+          "transform": "scale(0.96)",
+        },
+        "exit-easing": [
+          "exit",
+          "expressive",
+        ],
+        "kind": "reveal",
+      },
+      "disclosure": {
+        "duration": "moderate-01",
+        "enter": {
+          "block-size": "auto",
+          "opacity": 1,
+        },
+        "enter-easing": [
+          "entrance",
+          "productive",
+        ],
+        "exit": {
+          "block-size": 0,
+          "opacity": 0,
+        },
+        "exit-easing": [
+          "exit",
+          "productive",
+        ],
+        "kind": "reveal",
+      },
+      "expand": {
+        "duration": "moderate-02",
+        "enter": {
+          "opacity": 1,
+          "transform": "scale(1)",
+        },
+        "enter-easing": [
+          "standard",
+          "productive",
+        ],
+        "exit": {
+          "opacity": 0,
+          "transform": "scale(0.96)",
+        },
+        "exit-easing": [
+          "standard",
+          "productive",
+        ],
+        "kind": "shared-element",
+      },
+      "invoke": {
+        "duration": "moderate-02",
+        "enter-easing": [
+          "standard",
+          "expressive",
+        ],
+        "exit-easing": [
+          "standard",
+          "expressive",
+        ],
+        "kind": "shared-element",
+        "origin": "trigger",
+      },
+      "stretch": {
+        "duration": "slow-01",
+        "enter": {
+          "clip-path": "inset(0 0 0 0)",
+          "opacity": 1,
+        },
+        "enter-easing": [
+          "entrance",
+          "expressive",
+        ],
+        "exit": {
+          "clip-path": "inset(50% 0 50% 0)",
+          "opacity": 0,
+        },
+        "exit-easing": [
+          "exit",
+          "expressive",
+        ],
+        "kind": "reveal",
+      },
+    },
     "transition-base": "250ms",
     "transition-expansion": "300ms",
   },

package/scss/components/__tests__/ai-label-test.js

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const postcss = require('postcss');
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/ai-label', () => {
+  test('guards shared AI Label and Slug hover selectors with any-hover media query', async () => {
+    const { result } = await render(`
+      @use '../ai-label';
+    `);
+    const guardedHoverRules = [];
+    const unguardedHoverRules = [];
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (
+        (rule.selector.includes('.cds--ai-label') ||
+          rule.selector.includes('.cds--slug')) &&
+        rule.selector.includes(':hover')
+      ) {
+        let parent = rule.parent;
+        let isGuarded = false;
+
+        while (parent) {
+          if (
+            parent.type === 'atrule' &&
+            parent.name === 'media' &&
+            parent.params.includes('(any-hover: hover)')
+          ) {
+            isGuarded = true;
+            break;
+          }
+
+          parent = parent.parent;
+        }
+
+        if (isGuarded) {
+          guardedHoverRules.push(rule);
+        } else {
+          unguardedHoverRules.push(rule);
+        }
+      }
+    });
+
+    expect(guardedHoverRules.length).toBeGreaterThan(0);
+    expect(unguardedHoverRules.map((rule) => rule.selector)).toEqual([]);
+  });
+});

package/scss/components/__tests__/code-snippet-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);
@@ -41,4 +42,48 @@ describe('scss/components/code-snippet', () => {
     `);
     expect(unwrap('background-color')).toBe('#000');
   });
+
+  test('hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../code-snippet';
+    `);
+    const hoverRules = [];
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (
+        rule.selector.includes(':hover') &&
+        (rule.selector.includes('.cds--snippet') ||
+          rule.selector.includes('.cds--copy-btn:hover')) &&
+        !rule.selector.includes('.cds--skeleton')
+      ) {
+        hoverRules.push(rule);
+      }
+    });
+
+    expect(hoverRules.length).toBeGreaterThan(0);
+    expect(
+      hoverRules.some((rule) =>
+        rule.selector.includes('.cds--snippet-btn--expand:hover')
+      )
+    ).toBe(true);
+    expect(
+      hoverRules.every((rule) => {
+        let parent = rule.parent;
+
+        while (parent) {
+          if (
+            parent.type === 'atrule' &&
+            parent.name === 'media' &&
+            parent.params.includes('(any-hover: hover)')
+          ) {
+            return true;
+          }
+
+          parent = parent.parent;
+        }
+
+        return false;
+      })
+    ).toBe(true);
+  });
 });

package/scss/components/__tests__/content-switcher-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,48 @@ describe('scss/components/content-switcher', () => {
     `);
     expect(unwrap('mixin')).toBe(true);
   });
+
+  test('hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../content-switcher';
+    `);
+    const hoverRules = [];
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (
+        rule.selector.includes('.cds--content-switcher') &&
+        rule.selector.includes(':hover')
+      ) {
+        hoverRules.push(rule);
+      }
+    });
+
+    expect(hoverRules.length).toBeGreaterThan(0);
+    expect(
+      hoverRules.some((rule) =>
+        rule.selector.includes('.cds--content-switcher-btn: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/__tests__/notification-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);
@@ -46,4 +47,43 @@ describe('scss/components/notification', () => {
       'notification-tokens',
     ]);
   });
+
+  test('button hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../notification';
+    `);
+    const hoverRules = [];
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (
+        rule.selector.includes('-notification__action-button') &&
+        rule.selector.includes(':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/code-snippet/_code-snippet.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.
@@ -44,14 +44,21 @@ $copy-btn-feedback: $background-inverse !default;
     color: $text-disabled;
   }
 
-  .#{$prefix}--snippet--disabled .#{$prefix}--snippet-btn--expand:hover,
-  .#{$prefix}--snippet--disabled .#{$prefix}--copy-btn,
-  .#{$prefix}--snippet--disabled .#{$prefix}--copy-btn:hover {
+  .#{$prefix}--snippet--disabled .#{$prefix}--copy-btn {
     background-color: $layer;
     color: $text-disabled;
     cursor: not-allowed;
   }
 
+  @media (any-hover: hover) {
+    .#{$prefix}--snippet--disabled .#{$prefix}--snippet-btn--expand:hover,
+    .#{$prefix}--snippet--disabled .#{$prefix}--copy-btn:hover {
+      background-color: $layer;
+      color: $text-disabled;
+      cursor: not-allowed;
+    }
+  }
+
   .#{$prefix}--snippet--disabled .#{$prefix}--snippet__icon,
   .#{$prefix}--snippet--disabled
     .#{$prefix}--snippet-btn--expand
@@ -76,8 +83,10 @@ $copy-btn-feedback: $background-inverse !default;
     color: $text-primary;
     cursor: pointer;
 
-    &:hover {
-      background-color: $layer-hover;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $layer-hover;
+      }
     }
 
     &:active {
@@ -133,15 +142,19 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy {
     display: inline-block;
 
-    &:hover {
-      background-color: $layer;
-      cursor: auto;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $layer;
+        cursor: auto;
+      }
     }
   }
 
-  .#{$prefix}--snippet--light.#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy:hover {
-    background-color: $layer-hover;
-    cursor: auto;
+  @media (any-hover: hover) {
+    .#{$prefix}--snippet--light.#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy:hover {
+      background-color: $layer-hover;
+      cursor: auto;
+    }
   }
 
   // Single Line Snippet
@@ -297,8 +310,10 @@ $copy-btn-feedback: $background-inverse !default;
     padding-inline: 0;
   }
 
-  .#{$prefix}--snippet--inline.#{$prefix}--btn.#{$prefix}--btn--primary:hover {
-    color: $text-primary;
+  @media (any-hover: hover) {
+    .#{$prefix}--snippet--inline.#{$prefix}--btn.#{$prefix}--btn--primary:hover {
+      color: $text-primary;
+    }
   }
 
   // override multi copy btn styles
@@ -347,9 +362,11 @@ $copy-btn-feedback: $background-inverse !default;
     transition: $duration-moderate-01 motion(standard, productive);
   }
 
-  .#{$prefix}--snippet-btn--expand:hover {
-    background: $layer-hover;
-    color: $text-primary;
+  @media (any-hover: hover) {
+    .#{$prefix}--snippet-btn--expand:hover {
+      background: $layer-hover;
+      color: $text-primary;
+    }
   }
 
   .#{$prefix}--snippet-btn--expand:active {
@@ -377,12 +394,14 @@ $copy-btn-feedback: $background-inverse !default;
     background-color: $layer;
   }
 
-  .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
-  .#{$prefix}--snippet--light .#{$prefix}--snippet-button:hover,
-  .#{$prefix}--snippet--light
-    .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover,
-  .#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
-    background-color: $layer-hover;
+  @media (any-hover: hover) {
+    .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
+    .#{$prefix}--snippet--light .#{$prefix}--snippet-button:hover,
+    .#{$prefix}--snippet--light
+      .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover,
+    .#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
+      background-color: $layer-hover;
+    }
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:active,