@carbon/styles 1.114.0 → 1.115.0-rc.0

package/scss/components/__tests__/data-table-test.js

@@ -85,6 +85,55 @@ describe('scss/components/data-table/action', () => {
        `);
     expect(unwrap('mixin')).toBe(true);
   });
+
+  test('toolbar hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../data-table/action';
+    `);
+    const hoverRules = [];
+    const toolbarSelectors = [
+      '.cds--toolbar',
+      '.cds--action-list',
+      '.cds--batch-summary',
+    ];
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (
+        rule.selector.includes(':hover') &&
+        toolbarSelectors.some((selector) => rule.selector.includes(selector))
+      ) {
+        hoverRules.push(rule);
+      }
+    });
+
+    expect(hoverRules.length).toBeGreaterThan(0);
+    expect(
+      hoverRules.some((rule) =>
+        rule.selector.includes('.cds--toolbar-action: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([]);
+  });
 });
 
 describe('scss/components/data-table/expandable', () => {

package/scss/components/_index.scss

@@ -45,6 +45,7 @@
 @use 'fluid-time-picker';
 @use 'form';
 @use 'FullPageError';
+@use 'guidebanner';
 @use 'icon-indicator';
 @use 'inline-loading';
 @use 'InterstitialScreen';
@@ -57,9 +58,10 @@
 @use 'modal';
 @use 'multiselect';
 @use 'notification';
+@use 'notifications-panel';
 @use 'number-input';
 @use 'overflow-menu';
-@use 'OptionsTile';
+@use 'options-tile';
 @use 'page-header';
 @use 'pagination';
 @use 'pagination-nav';
@@ -80,6 +82,7 @@
 @use 'structured-list';
 @use 'tabs';
 @use 'tag';
+@use 'Tearsheet';
 @use 'text-area';
 @use 'text-input';
 @use 'tile';
@@ -90,5 +93,5 @@
 @use 'treeview';
 @use 'truncated-text';
 @use 'ui-shell';
-@use 'EditInPlace';
+@use 'edit-in-place';
 @use 'user-avatar';

package/scss/components/big-number/_big-number.scss

@@ -57,6 +57,7 @@
 
   .#{$prefix}--big-number__row {
     display: flex;
+    align-items: center;
   }
 
   .#{$prefix}--big-number__percentage {

package/scss/components/button/_button.scss

@@ -42,7 +42,13 @@
   }
 }
 
-@mixin button-set-fluid-layout() {
+/// Emit all fluid layout rules for a ButtonSet.
+///
+/// @param {Number} $min-inline-size [$button-min-inline-size] - The minimum
+///   inline size per button used as the container-query stacking threshold.
+///   Pass a smaller value (e.g. `7.5rem` / 120px) for contexts with narrower
+///   footers (Tearsheet, narrow SidePanel) so buttons don't stack too early.
+@mixin button-set-fluid-layout($min-inline-size: $button-min-inline-size) {
   container-type: inline-size;
 
   .#{$prefix}--btn-set__fluid-inner {
@@ -55,13 +61,6 @@
     inline-size: 100%;
   }
 
-  // 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
-  // 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
     flex: 0 1 25%;
@@ -71,7 +70,7 @@
   }
 
   .#{$prefix}--btn-set__fluid-inner--auto-stack .#{$prefix}--btn {
-    min-inline-size: $min-inline-button-size;
+    min-inline-size: $min-inline-size;
   }
 
   .#{$prefix}--btn-set__fluid-inner .#{$prefix}--btn--ghost,
@@ -85,14 +84,14 @@
   $max-fluid-buttons: 4;
   // this determines whether or not column is used
   @for $i from 1 through $max-fluid-buttons {
-    @container (width <= #{$i * $min-inline-button-size}) {
+    @container (width <= #{$i * $min-inline-size}) {
       .#{$prefix}--btn-set__fluid-inner--auto-stack#{has-n-children($i)} {
         @include button-set-fluid-column();
       }
     }
   }
 
-  @container (width <= #{4 * $min-inline-button-size}) {
+  @container (width <= #{4 * $min-inline-size}) {
     .#{$prefix}--btn-set__fluid-inner#{has-n-children(2)} {
       .#{$prefix}--btn {
         flex-basis: 50%;
@@ -101,7 +100,7 @@
     }
   }
 
-  @container (width <= #{3 * $min-inline-button-size}) {
+  @container (width <= #{3 * $min-inline-size}) {
     .#{$prefix}--btn-set__fluid-inner#{has-n-children(1)} .#{$prefix}--btn {
       flex: 1 1 100%;
       max-inline-size: none;

package/scss/components/button/_vars.scss

@@ -79,10 +79,10 @@ $button-border-width: 2px !default;
 /// @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>)`.
+/// Default minimum inline size per button for fluid ButtonSet container-query
+/// stacking. Components with narrower containers (e.g. Tearsheet, SidePanel)
+/// should pass a custom value via the `$min-inline-size` parameter of the
+/// `button-set-fluid-layout` mixin rather than reconfiguring this variable.
 /// @type Number
 /// @access public
 /// @group button

package/scss/components/checkbox/_checkbox.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.
@@ -38,6 +38,17 @@
     margin-block-start: -#{$spacing-01};
   }
 
+  .#{$prefix}--checkbox-group-inner--decorator
+    + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper,
+  .#{$prefix}--checkbox-group
+    > .#{$prefix}--ai-label
+    + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper,
+  .#{$prefix}--checkbox-group
+    > .#{$prefix}--slug
+    + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
+    margin-block-start: -#{$spacing-01};
+  }
+
   // Spacing below collection of checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
     margin-block-end: convert.to-rem(3px);
@@ -387,57 +398,81 @@
   //-----------------------------------------------
   // Decorator
   //-----------------------------------------------
-  .#{$prefix}--checkbox-group--decorator legend.#{$prefix}--label,
-  .#{$prefix}--checkbox-wrapper--decorator .#{$prefix}--checkbox-label-text {
+  .#{$prefix}--checkbox-wrapper--decorator,
+  .#{$prefix}--checkbox-wrapper--slug {
     display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .#{$prefix}--checkbox-group--decorator legend.#{$prefix}--label,
+  .#{$prefix}--checkbox-group--slug legend.#{$prefix}--label {
+    float: inline-start;
+  }
+
+  .#{$prefix}--checkbox-group--decorator
+    > .#{$prefix}--checkbox-group-inner--decorator,
+  .#{$prefix}--checkbox-group--slug > .#{$prefix}--ai-label,
+  .#{$prefix}--checkbox-group--slug > .#{$prefix}--slug {
+    float: inline-start;
+  }
+
+  .#{$prefix}--checkbox-group--decorator legend.#{$prefix}--label,
+  .#{$prefix}--checkbox-wrapper--decorator .#{$prefix}--checkbox-label-text,
+  .#{$prefix}--checkbox-group--decorator
+    > .#{$prefix}--checkbox-group-inner--decorator {
+    display: inline-flex;
   }
   // Remove v12
   .#{$prefix}--checkbox-group--slug legend.#{$prefix}--label,
-  .#{$prefix}--checkbox-wrapper--slug .#{$prefix}--checkbox-label-text {
-    display: flex;
+  .#{$prefix}--checkbox-wrapper--slug .#{$prefix}--checkbox-label-text,
+  .#{$prefix}--checkbox-group--slug > .#{$prefix}--ai-label,
+  .#{$prefix}--checkbox-group--slug > .#{$prefix}--slug {
+    display: inline-flex;
   }
 
   .#{$prefix}--checkbox-group--decorator
-    legend.#{$prefix}--label
-    .#{$prefix}--checkbox-group-inner--decorator
+    > .#{$prefix}--checkbox-group-inner--decorator
     > *,
   .#{$prefix}--checkbox-wrapper--decorator
-    .#{$prefix}--checkbox-label-text
-    .#{$prefix}--checkbox-wrapper-inner--decorator
+    > .#{$prefix}--checkbox-wrapper-inner--decorator
     > * {
     margin-inline-start: $spacing-03;
   }
   // Remove v12
-  .#{$prefix}--checkbox-group--slug
-    legend.#{$prefix}--label
-    .#{$prefix}--ai-label,
-  .#{$prefix}--checkbox-wrapper--slug
-    .#{$prefix}--checkbox-label-text
-    .#{$prefix}--ai-label,
-  .#{$prefix}--checkbox-group--slug legend.#{$prefix}--label .#{$prefix}--slug,
-  .#{$prefix}--checkbox-wrapper--slug
-    .#{$prefix}--checkbox-label-text
-    .#{$prefix}--slug {
+  .#{$prefix}--checkbox-group--slug > .#{$prefix}--ai-label,
+  .#{$prefix}--checkbox-group--slug > .#{$prefix}--slug,
+  .#{$prefix}--checkbox-wrapper--slug > .#{$prefix}--ai-label,
+  .#{$prefix}--checkbox-wrapper--slug > .#{$prefix}--slug {
     margin-inline-start: $spacing-03;
   }
 
   .#{$prefix}--checkbox-wrapper--decorator
-    .#{$prefix}--checkbox-label-text
+    > .#{$prefix}--checkbox-wrapper-inner--decorator
     .#{$prefix}--ai-label__button--inline {
     line-height: inherit;
     margin-block-start: convert.to-rem(-1px);
   }
   // Remove v12
-  .#{$prefix}--checkbox-wrapper--slug
-    .#{$prefix}--checkbox-label-text
-    .#{$prefix}--ai-label__button--inline,
-  .#{$prefix}--checkbox-wrapper--slug
-    .#{$prefix}--checkbox-label-text
-    .#{$prefix}--slug__button--inline {
+  .#{$prefix}--checkbox-wrapper--slug .#{$prefix}--ai-label__button--inline,
+  .#{$prefix}--checkbox-wrapper--slug .#{$prefix}--slug__button--inline {
     line-height: inherit;
     margin-block-start: convert.to-rem(-1px);
   }
 
+  .#{$prefix}--checkbox-wrapper--decorator > .#{$prefix}--form__helper-text,
+  .#{$prefix}--checkbox-wrapper--slug > .#{$prefix}--form__helper-text {
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--checkbox-group--decorator
+    > .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper,
+  .#{$prefix}--checkbox-group--slug
+    > .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
+    clear: both;
+  }
+
   //-----------------------------------------------
   // Horizontal group
   //-----------------------------------------------
@@ -463,5 +498,13 @@
     .#{$prefix}--label + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
       margin-block-start: 0;
     }
+
+    .#{$prefix}--checkbox-group-inner--decorator
+      + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper,
+    > .#{$prefix}--ai-label
+      + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper,
+    > .#{$prefix}--slug + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
+      margin-block-start: 0;
+    }
   }
 }

package/scss/components/combo-box/_combo-box.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.
@@ -9,6 +9,7 @@
 @use '../../config' as *;
 @use '../../theme' as *;
 @use '../../utilities/convert';
+@use '../../feature-flags' as *;
 @use '../../utilities/focus-outline' as *;
 
 /// Combo box styles
@@ -19,21 +20,22 @@
     background-color: $field;
   }
 
-  .#{$prefix}--combo-box
-    .#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted::before {
-    position: absolute;
-    border: 2px solid $focus;
-    block-size: 100%;
-    border-block-start: 1px solid $focus;
-    content: '';
-    inline-size: 100%;
-  }
+  @if not enabled('enable-v12-release') {
+    .#{$prefix}--combo-box
+      .#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted::before {
+      position: absolute;
+      border: 2px solid $focus;
+      block-size: 100%;
+      border-block-start: 1px solid $focus;
+      content: '';
+      inline-size: 100%;
+    }
 
-  .#{$prefix}--combo-box
-    .#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted {
-    @include focus-outline('reset');
+    .#{$prefix}--combo-box
+      .#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted {
+      @include focus-outline('reset');
+    }
   }
-
   // V11: Possibly deprecate
   .#{$prefix}--combo-box.#{$prefix}--list-box--light:hover {
     background-color: $field-02;
@@ -52,14 +54,23 @@
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--combo-box.#{$prefix}--list-box--expanded:has(
-      input[aria-activedescendant]:not([aria-activedescendant=''])
-    )
-    .#{$prefix}--combo-box--input--focus.#{$prefix}--text-input {
-    outline-offset: convert.to-rem(-1px);
-    outline-width: convert.to-rem(1px);
+  // v12 focus outline is on the combo-box itself, don't select cds--text-input
+  @if enabled('enable-v12-release') {
+    .#{$prefix}--combo-box.#{$prefix}--list-box--expanded:has(
+        input[aria-activedescendant]:not([aria-activedescendant=''])
+      ) {
+      outline-offset: convert.to-rem(-1px);
+      outline-width: convert.to-rem(1px);
+    }
+  } @else {
+    .#{$prefix}--combo-box.#{$prefix}--list-box--expanded:has(
+        input[aria-activedescendant]:not([aria-activedescendant=''])
+      )
+      .#{$prefix}--combo-box--input--focus.#{$prefix}--text-input {
+      outline-offset: convert.to-rem(-1px);
+      outline-width: convert.to-rem(1px);
+    }
   }
-
   .#{$prefix}--combo-box .#{$prefix}--list-box__field,
   .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__field,

package/scss/components/data-table/action/_data-table-action.scss

@@ -76,8 +76,10 @@
       width $transition-expansion $standard-easing,
       background-color $duration-fast-02 motion(entrance, productive);
 
-    &:hover {
-      background-color: $field-hover;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $field-hover;
+      }
     }
   }
 
@@ -117,14 +119,21 @@
   .#{$prefix}--toolbar-search-container-active
     .#{$prefix}--search-magnifier-icon:focus,
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier-icon:active,
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier-icon:hover {
+    .#{$prefix}--search-magnifier-icon:active {
     border: none;
     background-color: transparent;
     outline: none;
   }
 
+  @media (any-hover: hover) {
+    .#{$prefix}--toolbar-search-container-active
+      .#{$prefix}--search-magnifier-icon:hover {
+      border: none;
+      background-color: transparent;
+      outline: none;
+    }
+  }
+
   //-------------------------------------------------
   //ACTIVE SEARCH - DEFAULT TOOLBAR
   //-------------------------------------------------
@@ -161,14 +170,21 @@
   //SEARCH CLOSE BUTTON
   //-------------------------------------------------
   .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close,
-  .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search-close:hover,
-  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-close,
-  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-close:hover {
+  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-close {
     border: none;
     background-color: transparent;
   }
 
+  @media (any-hover: hover) {
+    .#{$prefix}--toolbar-search-container-persistent
+      .#{$prefix}--search-close:hover,
+    .#{$prefix}--toolbar-search-container-active
+      .#{$prefix}--search-close:hover {
+      border: none;
+      background-color: transparent;
+    }
+  }
+
   .#{$prefix}--toolbar-search-container-persistent
     .#{$prefix}--search-close::before {
     display: none;
@@ -199,15 +215,22 @@
     transition: background $duration-fast-02 motion(entrance, productive);
   }
 
-  .#{$prefix}--toolbar-action:hover:not([disabled]) {
-    background-color: $field-hover;
+  @media (any-hover: hover) {
+    .#{$prefix}--toolbar-action:hover:not([disabled]) {
+      background-color: $field-hover;
+    }
   }
 
-  .#{$prefix}--toolbar-action[aria-expanded='true'],
-  .#{$prefix}--toolbar-action:hover[aria-expanded='true'] {
+  .#{$prefix}--toolbar-action[aria-expanded='true'] {
     background-color: $layer-02;
   }
 
+  @media (any-hover: hover) {
+    .#{$prefix}--toolbar-action:hover[aria-expanded='true'] {
+      background-color: $layer-02;
+    }
+  }
+
   .#{$prefix}--toolbar-action[disabled] {
     cursor: not-allowed;
   }
@@ -283,9 +306,11 @@
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search-input:hover:not([disabled]) {
-    background-color: $field-hover;
+  @media (any-hover: hover) {
+    .#{$prefix}--toolbar-search-container-persistent
+      .#{$prefix}--search-input:hover:not([disabled]) {
+      background-color: $field-hover;
+    }
   }
 
   .#{$prefix}--toolbar-search-container-persistent
@@ -388,15 +413,20 @@
   }
 
   // cancel btn pseudo element
-  .#{$prefix}--action-list
-    .#{$prefix}--btn--primary:nth-child(3):hover
-    + .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before,
   .#{$prefix}--action-list
     .#{$prefix}--btn--primary:nth-child(3):focus
     + .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
     opacity: 0;
   }
 
+  @media (any-hover: hover) {
+    .#{$prefix}--action-list
+      .#{$prefix}--btn--primary:nth-child(3):hover
+      + .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
+      opacity: 0;
+    }
+  }
+
   .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
     position: absolute;
     display: block;
@@ -412,9 +442,11 @@
     transition: opacity $duration-fast-02 motion(standard, productive);
   }
 
-  .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel:hover::before {
-    opacity: 0;
-    transition: opacity $transition-base $standard-easing;
+  @media (any-hover: hover) {
+    .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel:hover::before {
+      opacity: 0;
+      transition: opacity $transition-base $standard-easing;
+    }
   }
 
   // items selected text

package/scss/components/data-table/sort/_data-table-sort.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.
@@ -260,13 +260,47 @@
     .#{$prefix}--table-sort__icon-unsorted {
     margin-inline: auto convert.to-rem(8px);
   }
+
+  .#{$prefix}--table-sort__header--slug,
+  .#{$prefix}--table-sort__header--decorator {
+    position: relative;
+
+    .#{$prefix}--table-sort {
+      padding-inline-end: $spacing-06;
+    }
+
+    > .#{$prefix}--table-header-label--decorator-inner {
+      position: absolute;
+      z-index: 1;
+      inset-block-start: 50%;
+      inset-inline-end: $spacing-03;
+      margin-inline-end: 0;
+      transform: translateY(-50%);
+    }
+  }
+
   .#{$prefix}--table-sort__header--ai-label .#{$prefix}--ai-label,
-  .#{$prefix}--table-sort__header--ai-label .#{$prefix}--slug,
+  .#{$prefix}--table-sort__header--ai-label .#{$prefix}--slug {
+    display: block;
+    margin-inline-end: convert.to-rem(8px);
+  }
+
+  .#{$prefix}--table-sort__header--slug
+    .#{$prefix}--table-header-label--decorator-inner,
   .#{$prefix}--table-sort__header--decorator
     .#{$prefix}--table-header-label--decorator-inner,
   .#{$prefix}--table-sort__header--ai-label
     .#{$prefix}--table-header-label--decorator-inner {
     display: block;
-    margin-inline-end: convert.to-rem(8px);
+    margin-inline-end: 0;
+  }
+
+  .#{$prefix}--table-sort__header--ai-label
+    > .#{$prefix}--table-header-label--decorator-inner
+    .#{$prefix}--ai-label,
+  .#{$prefix}--table-sort__header--ai-label
+    > .#{$prefix}--table-header-label--decorator-inner
+    .#{$prefix}--slug {
+    margin-inline-end: 0;
   }
 }