@carbon/web-components 2.61.0 → 2.62.0

package/scss/components/data-table/_table-core.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 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.
@@ -350,14 +350,21 @@
 :host(#{$prefix}-table-row[expandable][expanded]),
 :host(#{$prefix}-table-row[selection-name][expandable][expanded]),
 :host(#{$prefix}-table-row[expandable][expanded][highlighted]),
-:host(#{$prefix}-table-row[selection-name][expandable][expanded][highlighted])
-  :host(#{$prefix}-table-row[expandable][expanded]:hover),
-:host(#{$prefix}-table-row[selection-name][expandable][expanded]:hover) {
+:host(#{$prefix}-table-row[selection-name][expandable][expanded][highlighted]) {
   .#{$prefix}--table-expand {
     border-block-end-color: transparent;
   }
 }
 
+@media (any-hover: hover) {
+  :host(#{$prefix}-table-row[expandable][expanded]:hover),
+  :host(#{$prefix}-table-row[selection-name][expandable][expanded]:hover) {
+    .#{$prefix}--table-expand {
+      border-block-end-color: transparent;
+    }
+  }
+}
+
 :host(#{$prefix}-table-row[expandable][expanded][selected]),
 :host(#{$prefix}-table-row[selection-name][expandable][expanded][selected]) {
   ::slotted(#{$prefix}-table-cell),
@@ -372,10 +379,6 @@
 :host(#{$prefix}-table-row[expandable][expanded][selected][highlighted]),
 :host(
     #{$prefix}-table-row[selection-name][expandable][expanded][selected][highlighted]
-  ),
-:host(#{$prefix}-table-row[expandable][expanded][selected]:hover),
-:host(
-    #{$prefix}-table-row[selection-name][expandable][expanded][selected]:hover
   ) {
   ::slotted(#{$prefix}-table-cell),
   .#{$prefix}--table-expand,
@@ -384,6 +387,19 @@
   }
 }
 
+@media (any-hover: hover) {
+  :host(#{$prefix}-table-row[expandable][expanded][selected]:hover),
+  :host(
+      #{$prefix}-table-row[selection-name][expandable][expanded][selected]:hover
+    ) {
+    ::slotted(#{$prefix}-table-cell),
+    .#{$prefix}--table-expand,
+    .#{$prefix}--table-column-checkbox {
+      background-color: $layer-selected-hover;
+    }
+  }
+}
+
 :host(#{$prefix}-table-row[expandable][selected]),
 :host(#{$prefix}-table-row[selection-name][expandable][selected]) {
   ::slotted(#{$prefix}-table-cell),
@@ -394,9 +410,7 @@
 }
 
 :host(#{$prefix}-table-row[expandable][highlighted]),
-:host(#{$prefix}-table-row[selection-name][expandable][highlighted]),
-:host(#{$prefix}-table-row[expandable]:hover),
-:host(#{$prefix}-table-row[selection-name][expandable]:hover) {
+:host(#{$prefix}-table-row[selection-name][expandable][highlighted]) {
   &:not([ai-label]) {
     ::slotted(#{$prefix}-table-cell),
     .#{$prefix}--table-expand,
@@ -406,6 +420,19 @@
   }
 }
 
+@media (any-hover: hover) {
+  :host(#{$prefix}-table-row[expandable]:hover),
+  :host(#{$prefix}-table-row[selection-name][expandable]:hover) {
+    &:not([ai-label]) {
+      ::slotted(#{$prefix}-table-cell),
+      .#{$prefix}--table-expand,
+      .#{$prefix}--table-column-checkbox {
+        border-block-end-color: $border-subtle;
+      }
+    }
+  }
+}
+
 :host(#{$prefix}-table-row[odd]) {
   .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox,
@@ -425,9 +452,7 @@
   }
 }
 
-:host(#{$prefix}-table-row[highlighted]),
-:host(#{$prefix}-table-row:hover),
-:host(#{$prefix}-table-expand-row:hover) {
+:host(#{$prefix}-table-row[highlighted]) {
   ::slotted(#{$prefix}-table-cell),
   ::slotted(#{$prefix}-table-cell-skeleton),
   .#{$prefix}--table-expand,
@@ -439,9 +464,22 @@
   }
 }
 
-:host(#{$prefix}-table-row[highlighted]),
-:host(#{$prefix}-table-row[even]:hover),
-:host(#{$prefix}-table-row[odd]:hover) {
+@media (any-hover: hover) {
+  :host(#{$prefix}-table-row:hover),
+  :host(#{$prefix}-table-expand-row:hover) {
+    ::slotted(#{$prefix}-table-cell),
+    ::slotted(#{$prefix}-table-cell-skeleton),
+    .#{$prefix}--table-expand,
+    .#{$prefix}--table-column-checkbox {
+      background-color: $background-hover;
+      border-block-end-color: $layer-hover;
+      border-block-start-color: $layer-hover;
+      color: $text-primary;
+    }
+  }
+}
+
+:host(#{$prefix}-table-row[highlighted]) {
   .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox,
   ::slotted(#{$prefix}-table-cell),
@@ -451,6 +489,19 @@
   }
 }
 
+@media (any-hover: hover) {
+  :host(#{$prefix}-table-row[even]:hover),
+  :host(#{$prefix}-table-row[odd]:hover) {
+    .#{$prefix}--table-expand,
+    .#{$prefix}--table-column-checkbox,
+    ::slotted(#{$prefix}-table-cell),
+    ::slotted(#{$prefix}-table-cell-skeleton) {
+      background-color: $background-hover;
+      border-block-end: 1px solid $layer-hover;
+    }
+  }
+}
+
 //aligns selection and expansion with slug
 :host(#{$prefix}-table-row[rows-with-ai-label]) {
   #{$prefix}-checkbox,
@@ -506,10 +557,12 @@
   background-attachment: fixed;
   box-shadow: inset 1px 0 $ai-border-strong;
 
-  &:hover {
-    @include ai-table-gradient('hover');
+  @media (any-hover: hover) {
+    &:hover {
+      @include ai-table-gradient('hover');
 
-    background-attachment: fixed;
+      background-attachment: fixed;
+    }
   }
 }
 

package/scss/components/data-table/_table-selection.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 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.
@@ -55,11 +55,13 @@
   }
 }
 
-:host(#{$prefix}-table-row:hover) {
-  .#{$prefix}--table-column-checkbox {
-    background-color: $background-hover;
-    border-block-end-color: $layer-hover;
-    border-block-start-color: $layer-hover;
+@media (any-hover: hover) {
+  :host(#{$prefix}-table-row:hover) {
+    .#{$prefix}--table-column-checkbox {
+      background-color: $background-hover;
+      border-block-end-color: $layer-hover;
+      border-block-start-color: $layer-hover;
+    }
   }
 }
 
@@ -73,12 +75,14 @@
     color: $text-primary;
   }
 
-  &:hover {
-    ::slotted(#{$prefix}-table-cell),
-    .#{$prefix}--table-expand,
-    .#{$prefix}--table-column-checkbox {
-      background-color: $data-table-column-hover;
-      border-block-end-color: $data-table-column-hover;
+  @media (any-hover: hover) {
+    &:hover {
+      ::slotted(#{$prefix}-table-cell),
+      .#{$prefix}--table-expand,
+      .#{$prefix}--table-column-checkbox {
+        background-color: $data-table-column-hover;
+        border-block-end-color: $data-table-column-hover;
+      }
     }
   }
 }
@@ -96,8 +100,7 @@
 
   background-attachment: fixed;
 
-  &[highlighted],
-  &:hover {
+  &[highlighted] {
     @include ai-table-gradient('hover');
 
     background-attachment: fixed;
@@ -109,6 +112,20 @@
     }
   }
 
+  @media (any-hover: hover) {
+    &:hover {
+      @include ai-table-gradient('hover');
+
+      background-attachment: fixed;
+
+      ::slotted(#{$prefix}-table-cell),
+      .#{$prefix}--table-expand,
+      .#{$prefix}--table-column-checkbox {
+        background: none;
+      }
+    }
+  }
+
   ::slotted(#{$prefix}-table-cell),
   .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox {

package/scss/components/date-picker/date-picker.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2025
+// Copyright IBM Corp. 2019, 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.
@@ -46,8 +46,10 @@ $css--plex: true !default;
     cursor: not-allowed;
     opacity: 0.5;
 
-    &:hover {
-      background: transparent;
+    @media (any-hover: hover) {
+      &:hover {
+        background: transparent;
+      }
     }
   }
 
@@ -60,9 +62,11 @@ $css--plex: true !default;
       opacity: 0.5;
     }
 
-    &:hover {
-      svg {
-        fill: $layer-selected-inverse;
+    @media (any-hover: hover) {
+      &:hover {
+        svg {
+          fill: $layer-selected-inverse;
+        }
       }
     }
   }

package/scss/components/overflow-menu/overflow-menu.scss

@@ -43,9 +43,11 @@
   }
 }
 
-:host(#{$prefix}-overflow-menu[disabled]:hover),
-:host(#{$prefix}-breadcrumb-overflow-menu[disabled]:hover) {
-  background-color: transparent;
+@media (any-hover: hover) {
+  :host(#{$prefix}-overflow-menu[disabled]:hover),
+  :host(#{$prefix}-breadcrumb-overflow-menu[disabled]:hover) {
+    background-color: transparent;
+  }
 }
 
 :host(#{$prefix}-overflow-menu[open]),
@@ -54,8 +56,10 @@
   box-shadow: 0 $spacing-01 6px 0 rgba(0, 0, 0, 0.3);
   transition: none;
 
-  :hover {
-    background-color: $layer;
+  @media (any-hover: hover) {
+    :hover {
+      background-color: $layer;
+    }
   }
 }
 
@@ -124,7 +128,6 @@
     inline-size: $spacing-05;
     min-block-size: 1.125rem;
 
-    &:hover,
     &:active,
     &:focus {
       box-sizing: border-box;
@@ -137,14 +140,29 @@
       }
     }
 
+    @media (any-hover: hover) {
+      &:hover {
+        box-sizing: border-box;
+        background: none;
+        box-shadow: none;
+        outline-offset: 0;
+
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
+
     &:active,
     &:focus {
       outline: 1px solid $focus;
     }
 
-    &:hover {
-      &::after {
-        background: $link-primary-hover;
+    @media (any-hover: hover) {
+      &:hover {
+        &::after {
+          background: $link-primary-hover;
+        }
       }
     }
 
@@ -176,8 +194,10 @@
   transform: translateY(4px);
 }
 
-:host(#{$prefix}-overflow-menu[breadcrumb]:hover) ::slotted([slot='icon']) {
-  fill: $link-primary-hover;
+@media (any-hover: hover) {
+  :host(#{$prefix}-overflow-menu[breadcrumb]:hover) ::slotted([slot='icon']) {
+    fill: $link-primary-hover;
+  }
 }
 
 :host(#{$prefix}-overflow-menu[breadcrumb]:active) ::slotted([slot='icon']) {

package/scss/components/resizer/resizer-grid.scss

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2026, 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.
+ */
+
+:host {
+  --start-element-size: 1fr;
+  --end-element-size: 1fr;
+
+  display: grid;
+  overflow: hidden;
+  block-size: 100%;
+  inline-size: 100%;
+
+  transition:
+    grid-template-columns 180ms cubic-bezier(0.25, 0.9, 0.25, 1),
+    grid-template-rows 180ms cubic-bezier(0.25, 0.9, 0.25, 1);
+}
+
+:host([axis='x']) {
+  grid-template-columns: var(--start-element-size) auto var(--end-element-size);
+}
+
+:host([axis='y']) {
+  grid-template-rows: var(--start-element-size) auto var(--end-element-size);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    transition: none;
+  }
+}

package/scss/components/resizer/resizer-handle-pivot.scss

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2026, 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.
+ */
+
+:host {
+  position: absolute;
+  display: block;
+  background: currentColor;
+  block-size: max(1px, var(--resizer-thickness));
+  cursor: all-scroll;
+  inline-size: max(1px, var(--resizer-thickness));
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &::before {
+    position: absolute;
+    z-index: 1;
+    background-color: var(--resizer-grab-color);
+    block-size: calc(
+      max(1px, var(--resizer-thickness)) +
+        max(0px, var(--resizer-grab-thickness))
+    );
+    content: '';
+    inline-size: calc(
+      max(1px, var(--resizer-thickness)) +
+        max(0px, var(--resizer-grab-thickness))
+    );
+    margin-block-start: calc(-1 * max(0px, var(--resizer-grab-thickness)) / 2);
+    margin-inline-start: calc(-1 * max(0px, var(--resizer-grab-thickness)) / 2);
+  }
+}
+
+:host([position='start']) {
+  margin-inline-start: calc(-1 * max(1px, var(--resizer-thickness)));
+}

package/scss/components/resizer/resizer-handle.scss

@@ -0,0 +1,127 @@
+/**
+ * Copyright IBM Corp. 2026, 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.
+ */
+
+.handle-content {
+  display: flex;
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+.icon-container {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  block-size: 100%;
+}
+
+:host {
+  display: grid;
+  background: var(--cds-border-subtle);
+  cursor: ns-resize;
+  min-block-size: max(1px, var(--resizer-thickness));
+  min-inline-size: max(1px, var(--resizer-thickness));
+  touch-action: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  .icon-container {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      background-color: var(--resizer-grab-color);
+      block-size: calc(
+        max(1px, var(--resizer-thickness)) +
+          max(0px, var(--resizer-grab-thickness))
+      );
+      content: '';
+      inline-size: 100%;
+      inset-inline-start: 0;
+    }
+  }
+}
+
+:host(:hover),
+:host([data-synthetic-hover]) {
+  @media (prefers-reduced-motion: no-preference) {
+    background-color: var(--cds-border-interactive);
+    transition: background-color var(--cds-duration-moderate-01);
+  }
+}
+
+:host(:focus) {
+  background-color: var(--cds-border-interactive);
+  outline: none;
+}
+
+:host(:active),
+:host([data-synthetic-active]) {
+  background-color: var(--cds-border-interactive);
+}
+
+:host(:focus:not(:focus-visible)) {
+  box-shadow: none;
+  outline: none;
+}
+
+:host([slot='handle-horizontal']),
+:host([orientation='horizontal']) {
+  cursor: ew-resize;
+
+  .icon-container {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      background-color: var(--resizer-grab-color);
+      block-size: 100%;
+      content: '';
+      inline-size: calc(
+        max(1px, var(--resizer-thickness)) +
+          max(0px, var(--resizer-grab-thickness))
+      );
+      inset-block-start: 0;
+      inset-inline-start: auto;
+    }
+  }
+}
+
+:host([slot='handle-vertical']),
+:host([orientation='vertical']) {
+  cursor: ns-resize;
+  min-inline-size: 0;
+
+  .icon-container {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      background-color: var(--resizer-grab-color);
+      block-size: calc(
+        max(1px, var(--resizer-thickness)) +
+          max(0px, var(--resizer-grab-thickness))
+      );
+      content: '';
+      inline-size: 100%;
+      inset-inline-start: 0;
+    }
+  }
+}
+
+.sr-only {
+  position: absolute;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  block-size: 1px;
+  clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
+  white-space: nowrap;
+}

package/scss/components/resizer/resizer-panel.scss

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2026, 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.
+ */
+
+:host {
+  overflow: hidden;
+}