@carbon/styles 1.112.0 → 1.113.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.112.0",
+  "version": "1.113.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,15 +40,15 @@
     }
   },
   "dependencies": {
-    "@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",
+    "@carbon/colors": "^11.56.0",
+    "@carbon/feature-flags": "^1.7.0",
+    "@carbon/grid": "^11.60.0",
+    "@carbon/layout": "^11.57.0",
+    "@carbon/motion": "^11.50.0",
+    "@carbon/themes": "^11.79.0",
+    "@carbon/type": "^11.65.0",
     "@ibm/plex": "6.4.1",
-    "@ibm/plex-mono": "1.1.0",
+    "@ibm/plex-mono": "2.5.0",
     "@ibm/plex-sans": "1.1.0",
     "@ibm/plex-sans-arabic": "1.1.0",
     "@ibm/plex-sans-devanagari": "1.1.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "a57cf8a896fe3fe09c5ab27648cd58947f37360a"
+  "gitHead": "188d23202ec1092322dee92cf0df9d9958224ae4"
 }

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

@@ -39,6 +39,7 @@ describe('scss/components/button', () => {
   "button-padding-ghost-sm",
   "button-border-width",
   "button-outline-width",
+  "button-min-inline-size",
   "button-separator",
   "button-primary",
   "button-secondary",

package/scss/components/__tests__/pagination-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);
@@ -23,4 +24,44 @@ describe('scss/components/pagination', () => {
     `);
     expect(unwrap('mixin')).toBe(true);
   });
+
+  test('hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../pagination';
+    `);
+    const hoverRules = [];
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (
+        (rule.selector.includes('.cds--pagination') ||
+          rule.selector.includes('.cds--unstable-pagination')) &&
+        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/__tests__/ui-shell-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,60 @@ describe('scss/components/ui-shell', () => {
      `);
     expect(unwrap('mixin')).toBe(true);
   });
+
+  test('header hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../ui-shell/header';
+    `);
+    const hoverRules = [];
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (
+        rule.selector.includes('.cds--header') &&
+        rule.selector.includes(':hover')
+      ) {
+        hoverRules.push(rule);
+      }
+    });
+
+    expect(hoverRules.length).toBeGreaterThan(0);
+    expect(
+      hoverRules.some((rule) =>
+        rule.selector.includes('.cds--header__action:hover')
+      )
+    ).toBe(true);
+    expect(
+      hoverRules.some((rule) =>
+        rule.selector.includes('.cds--header__menu-item:hover')
+      )
+    ).toBe(true);
+    expect(
+      hoverRules.some(
+        (rule) =>
+          rule.selector.includes('.cds--header__menu-item--current') &&
+          rule.selector.includes(':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/_index.scss

@@ -6,11 +6,13 @@
 //
 
 @use 'accordion';
+@use 'action-set';
 @use 'ai-label';
 @use 'aspect-ratio';
 @use 'badge-indicator';
 @use 'breadcrumb';
 @use 'button';
+@use 'card';
 @use 'chat-button';
 @use 'checkbox';
 @use 'code-snippet';
@@ -60,6 +62,8 @@
 @use 'progress-bar';
 @use 'progress-indicator';
 @use 'radio-button';
+@use 'resizer';
+@use 'side-panel';
 @use 'search';
 @use 'select';
 @use 'shape-indicator';
@@ -78,4 +82,5 @@
 @use 'toggle';
 @use 'tooltip';
 @use 'treeview';
+@use 'truncated-text';
 @use 'ui-shell';

package/scss/components/action-set/_action-set.scss

@@ -0,0 +1,130 @@
+//
+// Copyright IBM Corp. 2021, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+//-----------------------------
+// Action set
+//-----------------------------
+
+@use '../../config' as *;
+@use '../../theme' as *;
+@use '../../type';
+@use '../../spacing' as *;
+@use '../../utilities/convert' as *;
+
+/// Action set styles
+/// @access public
+/// @group action-set
+@mixin action-set {
+  .#{$prefix}--action-set {
+    align-items: stretch;
+    justify-content: flex-end;
+    background-color: $layer-01;
+  }
+
+  .#{$prefix}--action-set .#{$prefix}--action-set__action-button {
+    @include type.type-style('body-short-01');
+
+    align-items: center;
+    margin: 0;
+
+    &.#{$prefix}--action-set__action-button--expressive {
+      block-size: $spacing-10;
+      padding-block: $spacing-05 $spacing-07;
+    }
+  }
+
+  .#{$prefix}--action-set.#{$prefix}--btn-set
+    .#{$prefix}--action-set__action-button.#{$prefix}--btn.#{$prefix}--btn--expressive,
+  .#{$prefix}--action-set.#{$prefix}--btn-set
+    .#{$prefix}--action-set__action-button.#{$prefix}--btn {
+    max-inline-size: none;
+  }
+
+  .#{$prefix}--action-set:not(.#{$prefix}--action-set--stacking)
+    .#{$prefix}--action-set__action-button--ghost {
+    padding-inline-start: $spacing-05;
+  }
+
+  // For row-single in medium,
+  // or for ghosts in row-single,
+  // buttons are 100% width
+  .#{$prefix}--action-set.#{$prefix}--action-set--row-single.#{$prefix}--action-set--md
+    .#{$prefix}--action-set__action-button,
+  .#{$prefix}--action-set.#{$prefix}--action-set--row-single
+    .#{$prefix}--action-set__action-button--ghost {
+    flex: 0 0 100%;
+  }
+
+  // For ghosts in row-double,
+  // buttons are 75% width and expand to use any remaining space
+  .#{$prefix}--action-set.#{$prefix}--action-set--row-double
+    .#{$prefix}--action-set__action-button--ghost {
+    flex: 1 1 75%;
+  }
+
+  // For row-single in large (non-ghost),
+  // or row-double in medium or large,
+  // buttons are 50% width
+  .#{$prefix}--action-set.#{$prefix}--action-set--row-single.#{$prefix}--action-set--lg
+    .#{$prefix}--action-set__action-button:not(
+      .#{$prefix}--action-set__action-button--ghost
+    ),
+  .#{$prefix}--action-set.#{$prefix}--action-set--row-double.#{$prefix}--action-set--md
+    .#{$prefix}--action-set__action-button,
+  .#{$prefix}--action-set.#{$prefix}--action-set--row-double.#{$prefix}--action-set--lg
+    .#{$prefix}--action-set__action-button,
+  .#{$prefix}--action-set.#{$prefix}--action-set--row-triple
+    .#{$prefix}--action-set__action-button--ghost {
+    flex: 0 1 50%;
+  }
+
+  // For ghosts in row-triple,
+  // buttons are 50% width and expand to use any remaining space
+  .#{$prefix}--action-set.#{$prefix}--action-set--row-triple
+    .#{$prefix}--action-set__action-button--ghost {
+    flex: 1 1 50%;
+  }
+
+  // For row-triple in large (non-ghost),
+  // or any non-ghosts in extra large or 2xl,
+  // or row-quadruple (non-ghost),
+  // buttons are 25% width with a max of 232px
+  .#{$prefix}--action-set.#{$prefix}--btn-set.#{$prefix}--action-set--row-triple.#{$prefix}--action-set--lg
+    .#{$prefix}--action-set__action-button:not(
+      .#{$prefix}--action-set__action-button--ghost
+    ),
+  .#{$prefix}--action-set.#{$prefix}--btn-set.#{$prefix}--action-set--xl
+    .#{$prefix}--action-set__action-button:not(
+      .#{$prefix}--action-set__action-button--ghost
+    ),
+  .#{$prefix}--action-set.#{$prefix}--btn-set.#{$prefix}--action-set--2xl
+    .#{$prefix}--action-set__action-button:not(
+      .#{$prefix}--action-set__action-button--ghost
+    ),
+  .#{$prefix}--action-set.#{$prefix}--btn-set.#{$prefix}--action-set--row-quadruple
+    .#{$prefix}--action-set__action-button:not(
+      .#{$prefix}--action-set__action-button--ghost
+    ) {
+    flex: 0 1 25%;
+
+    max-inline-size: to-rem(232px);
+  }
+
+  .#{$prefix}--action-set.#{$prefix}--btn-set.#{$prefix}--action-set--row-quadruple
+    .#{$prefix}--action-set__action-button--ghost {
+    flex: 1 1 25%;
+  }
+
+  .#{$prefix}--action-set
+    .#{$prefix}--action-set__action-button
+    .#{$prefix}--inline-loading {
+    position: absolute;
+    inline-size: $spacing-07;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+}

package/scss/components/action-set/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2021, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'action-set';
+@use 'action-set';
+
+@include action-set.action-set;

package/scss/components/button/_button.scss

@@ -58,9 +58,9 @@
   // NOTE: Container queries are based on this value which is based on IBM Products implementation
   // Side panel has up to 3 buttons unstacked from size lg (640px). Min 160.33px/button
   // Narrow Tearsheet 540px has 4 buttons unstacked buttons. Min 135px/button
-  // May need to be configurable as 3 * 135px is less than 640px.
-  // Current value 176px only supports up to 3 buttons at 540px.
-  $min-inline-button-size: convert.to-rem(176px);
+  // Override via `@use '@carbon/styles/scss/components/button' with
+  //   ($button-min-inline-size: <value>)` for contexts that need a different threshold.
+  $min-inline-button-size: $button-min-inline-size;
 
   .#{$prefix}--btn-set__fluid-inner .#{$prefix}--btn {
     // default non-column layout

package/scss/components/button/_vars.scss

@@ -6,6 +6,7 @@
 //
 
 @use '../../spacing' as *;
+@use '../../utilities/convert';
 
 /// @type Number
 /// @access public
@@ -77,3 +78,12 @@ $button-border-width: 2px !default;
 /// @access public
 /// @group button
 $button-outline-width: 1px !default;
+
+/// Minimum inline size of a fluid button. Used as the container-query threshold
+/// for stacking fluid button sets. Contexts with more buttons or narrower
+/// containers (e.g. Tearsheet at 540px with 4 buttons) should lower this value
+/// via `@use … with ($button-min-inline-size: <value>)`.
+/// @type Number
+/// @access public
+/// @group button
+$button-min-inline-size: convert.to-rem(176px) !default;