@carbon/styles 1.113.0 → 1.114.0

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;
@@ -103,10 +114,6 @@
     }
   }
 
-  .#{$prefix}--file-browse-btn--disabled .#{$prefix}--file__drop-container {
-    border: 1px dashed button.$button-disabled;
-  }
-
   .#{$prefix}--label-description {
     @include reset;
     @include type-style('body-compact-01');
@@ -418,6 +425,12 @@
     block-size: convert.to-rem(96px);
   }
 
+  .#{$prefix}--file-browse-btn--disabled.#{$prefix}--file__drop-container,
+  .#{$prefix}--file-browse-btn--disabled .#{$prefix}--file__drop-container {
+    border: 1px dashed button.$button-disabled;
+    cursor: no-drop;
+  }
+
   .#{$prefix}--file__drop-container--drag-over {
     background: none;
     outline: 2px solid $focus;

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/scroll-gradient/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+@forward 'scroll-gradient';
+@use 'scroll-gradient';
+
+@include scroll-gradient.scroll-gradient;

package/scss/components/scroll-gradient/_scroll-gradient.scss

@@ -0,0 +1,107 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+//-----------------------------
+// Scroll gradient
+//-----------------------------
+
+@use '../../config' as *;
+@use '../../spacing' as *;
+
+/// ScrollGradient styles
+/// @access public
+/// @group scroll-gradient
+@mixin scroll-gradient {
+  $intersection-value: 3rem;
+
+  .#{$prefix}--scroll-gradient {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    block-size: inherit;
+    inline-size: inherit;
+  }
+
+  .#{$prefix}--scroll-gradient__content {
+    display: grid;
+    overflow: auto;
+    block-size: inherit;
+    grid-template-columns: 1fr;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--scroll-gradient__content-children {
+    block-size: 100%;
+    grid-column-start: 1;
+    grid-row-start: 1;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--scroll-gradient__content-children > * {
+    grid-area: 1 / 1;
+  }
+
+  .#{$prefix}--scroll-gradient__start-vertical,
+  .#{$prefix}--scroll-gradient__start-horizontal,
+  .#{$prefix}--scroll-gradient__end-vertical,
+  .#{$prefix}--scroll-gradient__end-horizontal {
+    position: absolute;
+    z-index: 1;
+    display: none;
+    pointer-events: none;
+  }
+
+  .#{$prefix}--scroll-gradient--y-scrollable
+    .#{$prefix}--scroll-gradient__start-vertical {
+    block-size: $spacing-09;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+
+  .#{$prefix}--scroll-gradient--y-scrollable
+    .#{$prefix}--scroll-gradient__end-vertical {
+    block-size: $spacing-09;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
+
+  .#{$prefix}--scroll-gradient--x-scrollable
+    .#{$prefix}--scroll-gradient__start-horizontal {
+    inline-size: $spacing-09;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+
+  .#{$prefix}--scroll-gradient--x-scrollable
+    .#{$prefix}--scroll-gradient__end-horizontal {
+    inline-size: $spacing-09;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+
+  .#{$prefix}--scroll-gradient [data-start-vertical],
+  .#{$prefix}--scroll-gradient [data-end-vertical] {
+    block-size: $intersection-value;
+    grid-column-start: 1;
+    grid-row-start: 1;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--scroll-gradient [data-end-vertical],
+  .#{$prefix}--scroll-gradient [data-end-horizontal] {
+    place-self: flex-end;
+  }
+
+  .#{$prefix}--scroll-gradient [data-start-horizontal],
+  .#{$prefix}--scroll-gradient [data-end-horizontal] {
+    block-size: 100%;
+    grid-column-start: 1;
+    grid-row-start: 1;
+    inline-size: $intersection-value;
+  }
+}

package/scss/components/slider/_slider.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.
@@ -198,9 +198,11 @@
       background $duration-fast-02 motion(standard, productive),
       box-shadow $duration-fast-02 motion(standard, productive);
 
-    &:hover {
-      // 20px / 14px = 1.4286
-      transform: scale(1.4286);
+    @media (any-hover: hover) {
+      &:hover {
+        // 20px / 14px = 1.4286
+        transform: scale(1.4286);
+      }
     }
 
     &:focus {
@@ -248,11 +250,13 @@
       inset-inline-end: 0;
     }
 
-    &:hover {
-      transform: none;
+    @media (any-hover: hover) {
+      &:hover {
+        transform: none;
 
-      .#{$prefix}--slider__thumb-icon {
-        fill: $text-secondary;
+        .#{$prefix}--slider__thumb-icon {
+          fill: $text-secondary;
+        }
       }
     }
 
@@ -289,11 +293,16 @@
       inset-inline: 0 auto;
     }
 
-    &:hover,
     &:active,
     &:focus {
       transform: none;
     }
+
+    @media (any-hover: hover) {
+      &:hover {
+        transform: none;
+      }
+    }
   }
 
   .#{$prefix}--slider__input {
@@ -376,9 +385,11 @@
   .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
     background-color: $border-disabled;
 
-    &:hover {
-      cursor: not-allowed;
-      transform: none;
+    @media (any-hover: hover) {
+      &:hover {
+        cursor: not-allowed;
+        transform: none;
+      }
     }
 
     &:focus {
@@ -400,12 +411,18 @@
     background-color: transparent;
 
     &:active,
-    &:hover,
     &:focus {
       background-color: transparent;
       transform: none;
     }
 
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: transparent;
+        transform: none;
+      }
+    }
+
     .#{$prefix}--slider__thumb-icon {
       fill: $border-disabled;
     }
@@ -430,11 +447,17 @@
     transition: none;
 
     &:active,
-    &:focus,
-    &:hover {
+    &:focus {
       color: $text-disabled;
       outline: none;
     }
+
+    @media (any-hover: hover) {
+      &:hover {
+        color: $text-disabled;
+        outline: none;
+      }
+    }
   }
 
   // readonly state

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 {

package/scss/components/tabs/_tabs.scss

@@ -827,6 +827,17 @@
   }
 }
 
+//-----------------------------
+// Popover tooltip
+//-----------------------------
+.#{$prefix}--tabs .#{$prefix}--icon-tooltip .#{$prefix}--popover-content {
+  @include custom-property.declaration('popover-offset', convert.to-rem(8px));
+}
+
+.#{$prefix}--tabs .#{$prefix}--icon-tooltip .#{$prefix}--popover-caret {
+  @include custom-property.declaration('popover-offset', convert.to-rem(8px));
+}
+
 .#{$prefix}--tabs.#{$prefix}--tabs--vertical.#{$prefix}--layout--size-sm {
   .#{$prefix}--tabs__nav-link {
     .#{$prefix}--tabs__nav-item-label {

package/scss/components/tag/_mixins.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.
@@ -20,14 +20,18 @@
   &.#{$prefix}--tag--operational {
     border: 1px solid $border-color;
 
-    &:hover {
-      background-color: $filter-hover-color;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $filter-hover-color;
+      }
     }
   }
 
   .#{$prefix}--tag__close-icon {
-    &:hover {
-      background-color: $filter-hover-color;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $filter-hover-color;
+      }
     }
   }