@carbon/styles 1.113.0 → 1.114.0

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2025
+// 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.
@@ -154,30 +154,32 @@
     transition: background-color $duration-fast-01 motion(entrance, productive);
   }
 
-  .#{$prefix}--data-table tbody tr:not([data-child-row]):hover,
-  .#{$prefix}--data-table tbody tr[data-child-row]:hover > td {
-    background-color: $layer-hover;
-  }
+  @media (any-hover: hover) {
+    .#{$prefix}--data-table tbody tr:not([data-child-row]):hover,
+    .#{$prefix}--data-table tbody tr[data-child-row]:hover > td {
+      background-color: $layer-hover;
+    }
 
-  .#{$prefix}--data-table tbody tr:hover td,
-  .#{$prefix}--data-table tbody tr:hover th {
-    border-block-end: 1px solid $layer-hover;
-    border-block-start: 1px solid $layer-hover;
-    color: $text-primary;
-  }
+    .#{$prefix}--data-table tbody tr:hover td,
+    .#{$prefix}--data-table tbody tr:hover th {
+      border-block-end: 1px solid $layer-hover;
+      border-block-start: 1px solid $layer-hover;
+      color: $text-primary;
+    }
 
-  .#{$prefix}--data-table
-    tr:hover
-    .#{$prefix}--link:not(.#{$prefix}--popover-container .#{$prefix}--link) {
-    color: $link-secondary;
-  }
+    .#{$prefix}--data-table
+      tr:hover
+      .#{$prefix}--link:not(.#{$prefix}--popover-container .#{$prefix}--link) {
+      color: $link-secondary;
+    }
 
-  .#{$prefix}--data-table
-    tr:hover
-    .#{$prefix}--link--disabled:not(
-      .#{$prefix}--popover-container .#{$prefix}--link
-    ) {
-    color: $text-disabled;
+    .#{$prefix}--data-table
+      tr:hover
+      .#{$prefix}--link--disabled:not(
+        .#{$prefix}--popover-container .#{$prefix}--link
+      ) {
+      color: $text-disabled;
+    }
   }
 
   .#{$prefix}--data-table th,
@@ -336,15 +338,20 @@
   .#{$prefix}--data-table
     td.#{$prefix}--table-column-menu
     .#{$prefix}--overflow-menu:focus
-    .#{$prefix}--overflow-menu__icon,
-  .#{$prefix}--data-table
-    tr:hover
-    td.#{$prefix}--table-column-menu
-    .#{$prefix}--overflow-menu
     .#{$prefix}--overflow-menu__icon {
     opacity: 1;
   }
 
+  @media (any-hover: hover) {
+    .#{$prefix}--data-table
+      tr:hover
+      td.#{$prefix}--table-column-menu
+      .#{$prefix}--overflow-menu
+      .#{$prefix}--overflow-menu__icon {
+      opacity: 1;
+    }
+  }
+
   .#{$prefix}--table-row--menu-option
     .#{$prefix}--overflow-menu-options__btn
     .#{$prefix}--overflow-menu-options__option-content
@@ -419,20 +426,22 @@
     background-color: $layer-accent;
   }
 
-  .#{$prefix}--data-table--zebra
-    tbody
-    tr:not(.#{$prefix}--parent-row):hover
-    td {
-    border-block-end: 1px solid $layer-hover;
-    border-block-start: 1px solid $layer-hover;
-  }
+  @media (any-hover: hover) {
+    .#{$prefix}--data-table--zebra
+      tbody
+      tr:not(.#{$prefix}--parent-row):hover
+      td {
+      border-block-end: 1px solid $layer-hover;
+      border-block-start: 1px solid $layer-hover;
+    }
 
-  .#{$prefix}--data-table--zebra
-    tbody
-    tr:not(.#{$prefix}--parent-row):not(
-      .#{$prefix}--data-table--selected
-    ):hover {
-    background-color: $layer-hover;
+    .#{$prefix}--data-table--zebra
+      tbody
+      tr:not(.#{$prefix}--parent-row):not(
+        .#{$prefix}--data-table--selected
+      ):hover {
+      background-color: $layer-hover;
+    }
   }
 
   //----------------------------------------------------------------------------
@@ -578,29 +587,31 @@
     border-block-end: 1px solid $layer-active;
   }
 
-  .#{$prefix}--data-table--zebra
-    tbody
-    tr:nth-child(even).#{$prefix}--data-table--selected:hover
-    td {
-    border-block-end: 1px solid $data-table-column-hover;
-  }
+  @media (any-hover: hover) {
+    .#{$prefix}--data-table--zebra
+      tbody
+      tr:nth-child(even).#{$prefix}--data-table--selected:hover
+      td {
+      border-block-end: 1px solid $data-table-column-hover;
+    }
 
-  // hover + zebra select - even child
-  .#{$prefix}--data-table--zebra
-    tbody
-    tr:nth-child(odd).#{$prefix}--data-table--selected:hover
-    td,
-  .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td {
-    border-block-end: 1px solid $data-table-column-hover;
-    border-block-start: 1px solid $data-table-column-hover;
-    color: $text-primary;
-  }
+    // hover + zebra select - even child
+    .#{$prefix}--data-table--zebra
+      tbody
+      tr:nth-child(odd).#{$prefix}--data-table--selected:hover
+      td,
+    .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td {
+      border-block-end: 1px solid $data-table-column-hover;
+      border-block-start: 1px solid $data-table-column-hover;
+      color: $text-primary;
+    }
 
-  .#{$prefix}--data-table--zebra
-    tbody
-    tr:nth-child(odd).#{$prefix}--data-table--selected:hover,
-  .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover {
-    background-color: $data-table-column-hover;
+    .#{$prefix}--data-table--zebra
+      tbody
+      tr:nth-child(odd).#{$prefix}--data-table--selected:hover,
+    .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover {
+      background-color: $data-table-column-hover;
+    }
   }
 
   // selected overflow menu
@@ -770,6 +781,8 @@
 
   .#{$prefix}--data-table--sticky-header {
     display: block;
+    inline-size: fit-content;
+    min-inline-size: 100%;
     overflow-y: scroll;
 
     thead,
@@ -783,10 +796,8 @@
     thead {
       position: sticky;
       z-index: 1;
-      overflow: scroll;
       inline-size: 100%;
       inset-block-start: 0;
-      // Hides ie scrollbar
       -ms-overflow-style: none;
       will-change: transform;
     }
@@ -797,9 +808,7 @@
 
     tbody {
       flex-direction: column;
-      // Hides ie scrollbar
       -ms-overflow-style: none;
-      overflow-x: scroll;
       will-change: transform;
     }
 
@@ -835,10 +844,12 @@
 
     // Taken from L125 _data-table-expandable
     // Used to hide white line when parent row is hovered when child is expanded
-    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
-      + tr[data-child-row]
-      td {
-      border-block-start: 1px solid $layer-hover;
+    @media (any-hover: hover) {
+      tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
+        + tr[data-child-row]
+        td {
+        border-block-start: 1px solid $layer-hover;
+      }
     }
 
     tr.#{$prefix}--expandable-row:last-of-type {
@@ -1013,32 +1024,11 @@
   }
 
   // Remove table cell backgrounds that are overriding gradient background on row
-  .#{$prefix}--data-table
-    tbody
-    tr.#{$prefix}--data-table--ai-label-row:hover
-    td,
-  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row:hover
-    + .#{$prefix}--expandable-row[data-child-row]
-    td,
-  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row--hover
-    + .#{$prefix}--expandable-row[data-child-row]:hover
-    > td,
   tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row--hover
     > td,
   tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row
     + tr.#{$prefix}--expandable-row[data-child-row]
     > td,
-  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
-    td,
-  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
-    td:first-of-type,
-  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(
-      .#{$prefix}--expandable-row
-    ):hover
-    > td,
-  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
-    + tr[data-child-row]
-    > td,
   tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
     > td,
   tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
@@ -1046,11 +1036,32 @@
     background-color: transparent;
   }
 
-  .#{$prefix}--data-table tbody tr.#{$prefix}--data-table--ai-label-row:hover,
-  tr.#{$prefix}--data-table--ai-label-row:hover
-    + .#{$prefix}--expandable-row[data-child-row],
-  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row--hover
-    + .#{$prefix}--expandable-row[data-child-row]:hover,
+  @media (any-hover: hover) {
+    .#{$prefix}--data-table
+      tbody
+      tr.#{$prefix}--data-table--ai-label-row:hover
+      td,
+    tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row:hover
+      + .#{$prefix}--expandable-row[data-child-row]
+      td,
+    tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row--hover
+      + .#{$prefix}--expandable-row[data-child-row]:hover
+      > td,
+    tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+      td,
+    tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+      td:first-of-type,
+    tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(
+        .#{$prefix}--expandable-row
+      ):hover
+      > td,
+    tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+      + tr[data-child-row]
+      > td {
+      background-color: transparent;
+    }
+  }
+
   tr.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--ai-label-row,
   tr.#{$prefix}--data-table--selected.#{$prefix}--parent-row.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--ai-label-row {
     @include ai-table-gradient('hover');
@@ -1058,6 +1069,18 @@
     background-attachment: fixed;
   }
 
+  @media (any-hover: hover) {
+    .#{$prefix}--data-table tbody tr.#{$prefix}--data-table--ai-label-row:hover,
+    tr.#{$prefix}--data-table--ai-label-row:hover
+      + .#{$prefix}--expandable-row[data-child-row],
+    tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row--hover
+      + .#{$prefix}--expandable-row[data-child-row]:hover {
+      @include ai-table-gradient('hover');
+
+      background-attachment: fixed;
+    }
+  }
+
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row,
   .#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row,
   tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row
@@ -1071,17 +1094,22 @@
     background-attachment: fixed;
   }
 
-  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--data-table--selected td,
-  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--data-table--selected:hover
-    td,
-  tbody tr.#{$prefix}--data-table--ai-label-row:hover td,
-  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
-    td:not(.#{$prefix}--table-expand):not(
-      .#{$prefix}--table-column-checkbox
-    ):not(.#{$prefix}--table-column-slug) {
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--data-table--selected td {
     border-block-end-color: $border-subtle;
   }
 
+  @media (any-hover: hover) {
+    tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--data-table--selected:hover
+      td,
+    tbody tr.#{$prefix}--data-table--ai-label-row:hover td,
+    tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+      td:not(.#{$prefix}--table-expand):not(
+        .#{$prefix}--table-column-checkbox
+      ):not(.#{$prefix}--table-column-slug) {
+      border-block-end-color: $border-subtle;
+    }
+  }
+
   tr.#{$prefix}--expandable-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row[data-parent-row]
     > td:not(.#{$prefix}--table-expand):not(
       .#{$prefix}--table-column-checkbox
@@ -1093,13 +1121,15 @@
     border-block-end: 1px solid $layer-selected;
   }
 
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row:hover
-    td:first-of-type,
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row:hover
-    td:first-of-type,
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--decoratorß-row.#{$prefix}--expandable-row:hover
-    td:first-of-type {
-    border-block-end: 1px solid transparent;
+  @media (any-hover: hover) {
+    tr.#{$prefix}--parent-row.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row:hover
+      td:first-of-type,
+    tr.#{$prefix}--parent-row.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row:hover
+      td:first-of-type,
+    tr.#{$prefix}--parent-row.#{$prefix}--data-table--decoratorß-row.#{$prefix}--expandable-row:hover
+      td:first-of-type {
+      border-block-end: 1px solid transparent;
+    }
   }
 
   .#{$prefix}--data-table

package/scss/components/data-table/expandable/_data-table-expandable.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.
@@ -139,33 +139,38 @@
       border-color $duration-fast-01 motion(standard, productive);
   }
 
-  // hovering on collapsed parent
-  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row):first-of-type:hover
-    td {
-    border-block-end: 1px solid $border-subtle;
-    border-block-start: 1px solid $border-subtle;
-  }
-
-  // hovering on expanded parent
-  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td {
-    background-color: $layer-hover;
-    border-block-end: 1px solid $border-subtle;
-    border-block-start: 1px solid $border-subtle;
-    color: $text-primary;
-  }
-
-  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td:first-of-type {
-    // First td doesn't have a visible border
-    border-block-end: 1px solid $layer-hover;
-  }
-
-  // Child row when hovering on expanded parent
-  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
-    + tr[data-child-row]
-    td {
-    background-color: $layer-hover;
-    border-block-end: 1px solid $border-subtle;
-    color: $text-primary;
+  @media (any-hover: hover) {
+    // hovering on collapsed parent
+    tr.#{$prefix}--parent-row:not(
+        .#{$prefix}--expandable-row
+      ):first-of-type:hover
+      td {
+      border-block-end: 1px solid $border-subtle;
+      border-block-start: 1px solid $border-subtle;
+    }
+
+    // hovering on expanded parent
+    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td {
+      background-color: $layer-hover;
+      border-block-end: 1px solid $border-subtle;
+      border-block-start: 1px solid $border-subtle;
+      color: $text-primary;
+    }
+
+    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
+      td:first-of-type {
+      // First td doesn't have a visible border
+      border-block-end: 1px solid $layer-hover;
+    }
+
+    // Child row when hovering on expanded parent
+    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
+      + tr[data-child-row]
+      td {
+      background-color: $layer-hover;
+      border-block-end: 1px solid $border-subtle;
+      color: $text-primary;
+    }
   }
 
   //hovering on expanded child row
@@ -336,16 +341,18 @@
       border-top $duration-fast-01 motion(standard, productive);
   }
 
-  .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:hover td,
-  .#{$prefix}--data-table--zebra
-    tbody
-    tr[data-parent-row]:hover
-    + tr[data-child-row]
-    td,
-  .#{$prefix}--data-table--zebra tbody tr[data-child-row]:hover td {
-    background-color: $layer-hover;
-    border-block-end: 1px solid $layer-hover;
-    border-block-start: 1px solid $layer-hover;
+  @media (any-hover: hover) {
+    .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:hover td,
+    .#{$prefix}--data-table--zebra
+      tbody
+      tr[data-parent-row]:hover
+      + tr[data-child-row]
+      td,
+    .#{$prefix}--data-table--zebra tbody tr[data-child-row]:hover td {
+      background-color: $layer-hover;
+      border-block-end: 1px solid $layer-hover;
+      border-block-start: 1px solid $layer-hover;
+    }
   }
 
   .#{$prefix}--data-table--zebra
@@ -381,15 +388,17 @@
     box-shadow: 0 1px $border-subtle;
   }
 
-  // Parent collapsed hover
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(
-      .#{$prefix}--expandable-row
-    ):hover
-    td {
-    background-color: $layer-selected-hover;
-    border-block-end: 1px solid $border-subtle;
-    border-block-start: 1px solid $layer-selected-hover;
-    box-shadow: 0 1px $layer-selected-hover;
+  @media (any-hover: hover) {
+    // Parent collapsed hover
+    tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(
+        .#{$prefix}--expandable-row
+      ):hover
+      td {
+      background-color: $layer-selected-hover;
+      border-block-end: 1px solid $border-subtle;
+      border-block-start: 1px solid $layer-selected-hover;
+      box-shadow: 0 1px $layer-selected-hover;
+    }
   }
 
   // Parent expanded
@@ -402,11 +411,6 @@
     box-shadow: 0 1px $layer-selected;
   }
 
-  // Parent expanded hover
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
-    td,
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
-    td:first-of-type,
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
     td,
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
@@ -417,6 +421,19 @@
     box-shadow: 0 1px $layer-selected-hover;
   }
 
+  @media (any-hover: hover) {
+    // Parent expanded hover
+    tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+      td,
+    tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+      td:first-of-type {
+      background-color: $layer-selected-hover;
+      border-block-end: 1px solid transparent;
+      border-block-start: 1px solid $layer-selected-hover;
+      box-shadow: 0 1px $layer-selected-hover;
+    }
+  }
+
   // Child row expanded
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
     + tr[data-child-row]
@@ -435,16 +452,21 @@
     padding-block-end: convert.to-rem(24px);
   }
 
-  // Child row expanded hover
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
-    + tr[data-child-row]
-    td,
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
     + tr[data-child-row]
     td {
     background-color: $layer-selected;
   }
 
+  @media (any-hover: hover) {
+    // Child row expanded hover
+    tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+      + tr[data-child-row]
+      td {
+      background-color: $layer-selected;
+    }
+  }
+
   // Slug styles
   .#{$prefix}--parent-row .#{$prefix}--table-column-slug,
   .#{$prefix}--parent-row
@@ -471,12 +493,17 @@
   }
 
   .#{$prefix}--data-table--slug-row td,
-  .#{$prefix}--data-table tr.#{$prefix}--data-table--slug-row:hover td,
-  .#{$prefix}--data-table--ai-label-row td,
-  .#{$prefix}--data-table tr.#{$prefix}--data-table--ai-label-row:hover td {
+  .#{$prefix}--data-table--ai-label-row td {
     border-block-start: 1px solid transparent;
   }
 
+  @media (any-hover: hover) {
+    .#{$prefix}--data-table tr.#{$prefix}--data-table--slug-row:hover td,
+    .#{$prefix}--data-table tr.#{$prefix}--data-table--ai-label-row:hover td {
+      border-block-start: 1px solid transparent;
+    }
+  }
+
   // Windows HCM fix
   .#{$prefix}--table-expand__button:focus .#{$prefix}--table-expand__svg {
     @include high-contrast-mode('focus');

package/scss/components/data-table/skeleton/_data-table-skeleton.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.
@@ -30,14 +30,16 @@
     inline-size: convert.to-rem(64px);
   }
 
-  .#{$prefix}--data-table.#{$prefix}--skeleton tr:hover td {
-    border-color: $border-subtle;
-    background: transparent;
-  }
+  @media (any-hover: hover) {
+    .#{$prefix}--data-table.#{$prefix}--skeleton tr:hover td {
+      border-color: $border-subtle;
+      background: transparent;
+    }
 
-  .#{$prefix}--data-table.#{$prefix}--skeleton tr:hover td:first-of-type,
-  .#{$prefix}--data-table.#{$prefix}--skeleton tr:hover td:last-of-type {
-    border-color: $border-subtle;
+    .#{$prefix}--data-table.#{$prefix}--skeleton tr:hover td:first-of-type,
+    .#{$prefix}--data-table.#{$prefix}--skeleton tr:hover td:last-of-type {
+      border-color: $border-subtle;
+    }
   }
 
   .#{$prefix}--data-table.#{$prefix}--skeleton .#{$prefix}--table-sort {

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

@@ -27,6 +27,26 @@
 /// @access public
 /// @group date-picker
 
+@position-try --bottom-left {
+  inset-area: block-end span-inline-start;
+  margin-block-start: $spacing-02;
+}
+
+@position-try --top-left {
+  inset-area: block-start span-inline-start;
+  margin-block-end: $spacing-02;
+}
+
+@position-try --bottom-right {
+  inset-area: block-end span-inline-end;
+  margin-block-start: $spacing-02;
+}
+
+@position-try --top-right {
+  inset-area: block-start span-inline-end;
+  margin-block-end: $spacing-02;
+}
+
 @mixin date-picker-next-rules {
   // Input wrapper needs relative positioning for icon placement
   .#{$prefix}--date-picker-input__wrapper {
@@ -97,26 +117,6 @@
 
     // Handle viewport overflow
     position-try-options: --bottom-left, --top-left, --bottom-right, --top-right;
-
-    @position-try --bottom-left {
-      inset-area: block-end span-inline-start;
-      margin-block-start: $spacing-02;
-    }
-
-    @position-try --top-left {
-      inset-area: block-start span-inline-start;
-      margin-block-end: $spacing-02;
-    }
-
-    @position-try --bottom-right {
-      inset-area: block-end span-inline-end;
-      margin-block-start: $spacing-02;
-    }
-
-    @position-try --top-right {
-      inset-area: block-start span-inline-end;
-      margin-block-end: $spacing-02;
-    }
   }
 
   .#{$prefix}--date-picker__calendar.open {

package/scss/components/date-picker/_date-picker.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.
@@ -122,8 +122,10 @@
       color: $text-disabled;
     }
 
-    &:disabled:hover {
-      border-block-end: 1px solid transparent;
+    @media (any-hover: hover) {
+      &:disabled:hover {
+        border-block-end: 1px solid transparent;
+      }
     }
 
     &::placeholder {