@carbon/styles 1.109.0 → 1.110.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.109.0",
+  "version": "1.110.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.52.0",
-    "@carbon/feature-flags": "^1.3.0",
-    "@carbon/grid": "^11.56.0",
-    "@carbon/layout": "^11.53.0",
-    "@carbon/motion": "^11.46.0",
-    "@carbon/themes": "^11.75.0",
-    "@carbon/type": "^11.61.0",
+    "@carbon/colors": "^11.53.0",
+    "@carbon/feature-flags": "^1.4.0",
+    "@carbon/grid": "^11.57.0",
+    "@carbon/layout": "^11.54.0",
+    "@carbon/motion": "^11.47.0",
+    "@carbon/themes": "^11.76.0",
+    "@carbon/type": "^11.62.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": "a4c90a9dc15cc4f0e6a99b3c0001a7a25303b555"
+  "gitHead": "30ca2b932469a5c89da10cb8d1fa82586ed14018"
 }

package/scss/components/__tests__/accordion-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.
@@ -10,6 +10,7 @@
 'use strict';
 
 const { SassRenderer } = require('@carbon/test-utils/scss');
+const css = require('css');
 
 const { render } = SassRenderer.create(__dirname);
 
@@ -44,4 +45,83 @@ describe('scss/components/accordion', () => {
     `);
     expect(unwrap('direction')).toBe('row');
   });
+
+  test('hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../accordion';
+    `);
+    const { stylesheet } = css.parse(
+      removeAtRule(result.css.toString(), '@starting-style')
+    );
+
+    function getAccordionHoverSelectors(rules, media = []) {
+      return rules.flatMap((rule) => {
+        if (rule.type === 'media') {
+          return getAccordionHoverSelectors(rule.rules, [...media, rule.media]);
+        }
+
+        if (rule.type !== 'rule') {
+          return [];
+        }
+
+        return rule.selectors
+          .filter((selector) => {
+            return (
+              selector.includes('.cds--accordion') &&
+              selector.includes(':hover')
+            );
+          })
+          .map((selector) => {
+            return { media, selector };
+          });
+      });
+    }
+
+    const hoverSelectors = getAccordionHoverSelectors(stylesheet.rules);
+
+    expect(hoverSelectors).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          media: expect.arrayContaining([
+            expect.stringContaining('(any-hover: hover)'),
+          ]),
+          selector: expect.stringContaining('.cds--accordion__heading:hover'),
+        }),
+      ])
+    );
+    expect(
+      hoverSelectors.every(({ media }) => {
+        return media.some((query) => query.includes('(any-hover: hover)'));
+      })
+    ).toBe(true);
+  });
 });
+
+function removeAtRule(cssText, atRule) {
+  const start = cssText.indexOf(atRule);
+
+  if (start === -1) {
+    return cssText;
+  }
+
+  const blockStart = cssText.indexOf('{', start);
+  let blockEnd = blockStart;
+  let depth = 0;
+
+  for (let i = blockStart; i < cssText.length; i++) {
+    if (cssText[i] === '{') {
+      depth++;
+    }
+
+    if (cssText[i] === '}') {
+      depth--;
+    }
+
+    if (depth === 0) {
+      blockEnd = i + 1;
+      break;
+    }
+  }
+
+  return `${cssText.slice(0, start)}${cssText.slice(blockEnd)}`;
+}

package/scss/components/accordion/_accordion.scss

@@ -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.
@@ -68,16 +68,18 @@ $content-padding: 0 0 0 $spacing-05 !default;
   }
 
   .#{$prefix}--accordion__item:not(.#{$prefix}--accordion__item--active) {
-    // Blend border on hover
-    &:hover,
-    // Blend top border of the next component on hover
-    &:hover + .#{$prefix}--accordion__item {
-      border-block-start-color: $layer-hover;
-    }
+    @media (any-hover: hover) {
+      // Blend border on hover
+      &:hover,
+      // Blend top border of the next component on hover
+      &:hover + .#{$prefix}--accordion__item {
+        border-block-start-color: $layer-hover;
+      }
 
-    // Blend bottom border of last item on hover
-    &:last-child:hover {
-      border-block-end-color: $layer-hover;
+      // Blend bottom border of last item on hover
+      &:last-child:hover {
+        border-block-end-color: $layer-hover;
+      }
     }
   }
 
@@ -99,9 +101,11 @@ $content-padding: 0 0 0 $spacing-05 !default;
       padding-inline-end: layout.density('padding-inline');
     }
 
-    &:hover {
-      background-color: $layer-hover;
-      outline: none;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $layer-hover;
+        outline: none;
+      }
     }
 
     &:focus {
@@ -137,8 +141,10 @@ $content-padding: 0 0 0 $spacing-05 !default;
     fill: $icon-disabled;
   }
 
-  .#{$prefix}--accordion__heading[disabled]:hover::before {
-    background-color: transparent;
+  @media (any-hover: hover) {
+    .#{$prefix}--accordion__heading[disabled]:hover::before {
+      background-color: transparent;
+    }
   }
 
   .#{$prefix}--accordion__item--disabled,
@@ -276,10 +282,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
     position: relative;
     border-color: transparent;
 
-    &:last-child,
-    &:hover,
-    &:last-child:hover,
-    &:hover + .#{$prefix}--accordion__item {
+    &:last-child {
       border-color: transparent;
     }
 
@@ -309,38 +312,50 @@ $content-padding: 0 0 0 $spacing-05 !default;
     }
   }
 
-  .#{$prefix}--accordion--flush .#{$prefix}--accordion__heading:hover {
-    position: relative;
-    z-index: 1;
+  @media (any-hover: hover) {
+    .#{$prefix}--accordion--flush .#{$prefix}--accordion__item:hover,
+    .#{$prefix}--accordion--flush .#{$prefix}--accordion__item:last-child:hover,
+    .#{$prefix}--accordion--flush
+      .#{$prefix}--accordion__item:hover
+      + .#{$prefix}--accordion__item {
+      border-color: transparent;
+    }
+  }
 
-    // blend top/bottom border into heading hover state
-    &::before,
-    &::after {
-      position: absolute;
-      display: block;
-      background: $layer-hover;
-      block-size: 1px;
-      content: '';
-      inline-size: 100%;
-      inset-inline-start: 0;
-      transition: background motion(standard, productive) $duration-fast-02;
+  @media (any-hover: hover) {
+    .#{$prefix}--accordion--flush .#{$prefix}--accordion__heading:hover {
+      position: relative;
+      z-index: 1;
 
-      @media screen and (prefers-reduced-motion: reduce) {
-        transition: none;
+      // blend top/bottom border into heading hover state
+      &::before,
+      &::after {
+        position: absolute;
+        display: block;
+        background: $layer-hover;
+        block-size: 1px;
+        content: '';
+        inline-size: 100%;
+        inset-inline-start: 0;
+        transition: background motion(standard, productive) $duration-fast-02;
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
-    }
 
-    &::before {
-      inset-block-start: -1px;
-    }
+      &::before {
+        inset-block-start: -1px;
+      }
 
-    &::after {
-      inset-block-end: -1px;
-    }
+      &::after {
+        inset-block-end: -1px;
+      }
 
-    &:focus::after,
-    &:focus::before {
-      background: none;
+      &:focus::after,
+      &:focus::before {
+        background: none;
+      }
     }
   }
 
@@ -355,7 +370,6 @@ $content-padding: 0 0 0 $spacing-05 !default;
     fill: $icon-primary;
     pointer-events: none;
 
-    &:hover,
     &:focus,
     &:active {
       border: none;
@@ -364,11 +378,22 @@ $content-padding: 0 0 0 $spacing-05 !default;
     }
   }
 
-  .#{$prefix}--accordion.#{$prefix}--skeleton
-    .#{$prefix}--accordion__heading:hover::before,
-  .#{$prefix}--accordion.#{$prefix}--skeleton
-    .#{$prefix}--accordion__heading:hover {
-    background-color: transparent;
+  @media (any-hover: hover) {
+    .#{$prefix}--accordion.#{$prefix}--skeleton
+      .#{$prefix}--accordion__arrow:hover {
+      border: none;
+      cursor: default;
+      outline: none;
+    }
+  }
+
+  @media (any-hover: hover) {
+    .#{$prefix}--accordion.#{$prefix}--skeleton
+      .#{$prefix}--accordion__heading:hover::before,
+    .#{$prefix}--accordion.#{$prefix}--skeleton
+      .#{$prefix}--accordion__heading:hover {
+      background-color: transparent;
+    }
   }
 
   .#{$prefix}--accordion--end.#{$prefix}--skeleton

package/scss/components/link/_link.scss

@@ -85,12 +85,10 @@ $link-focus-text-color: custom-property.get-var(
     text-decoration: none;
   }
 
-  .#{$prefix}--link.#{$prefix}--link--visited,
   .#{$prefix}--link.#{$prefix}--link--visited:visited {
     color: $link-visited-text-color;
   }
 
-  .#{$prefix}--link.#{$prefix}--link--visited:hover,
   .#{$prefix}--link.#{$prefix}--link--visited:visited:hover {
     color: $link-hover-text-color;
   }

package/scss/components/menu-button/_menu-button.scss

@@ -16,7 +16,7 @@
 /// @group menu-button
 @mixin menu-button {
   .#{$prefix}--menu-button__container {
-    display: contents;
+    display: inline-flex;
   }
 
   .#{$prefix}--menu-button__trigger:not(.#{$prefix}--btn--ghost) {

package/scss/components/multiselect/_multiselect.scss

@@ -13,6 +13,7 @@
 @use '../../theme' as *;
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
+@use '../../utilities/layout';
 
 /// Multi select styles
 /// @access public
@@ -56,7 +57,7 @@
   .#{$prefix}--multi-select.#{$prefix}--multi-select--selectall
     .#{$prefix}--list-box__menu-item:first-child
     .#{$prefix}--list-box__menu-item__option {
-    padding: 0.6875rem $spacing-05;
+    padding: calc((layout.size('height') - 1lh) / 2 - 1px) $spacing-05;
     margin: 0;
     border-block-end: 1px solid $border-subtle-01;
   }

package/scss/components/popover/_popover.scss

@@ -120,8 +120,10 @@ $popover-caret-height: custom-property.get-var(
     @include focus-outline('outline');
   }
 
-  &:hover {
-    background-color: theme.$layer-hover;
+  @media (any-hover: hover) {
+    &:hover {
+      background-color: theme.$layer-hover;
+    }
   }
 
   svg {