@patternfly/patternfly 6.3.0-prerelease.37 → 6.3.0-prerelease.39

package/components/Table/table-grid.css

@@ -98,6 +98,12 @@
 .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
   border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
 }
+.pf-m-grid.pf-v6-c-table.pf-m-animate-expand {
+  --pf-v6-c-table__expandable-row--Display: block;
+}
+.pf-m-grid.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
+  content: none;
+}
 .pf-m-grid.pf-v6-c-table.pf-m-expandable {
   --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
 }
@@ -401,6 +407,12 @@
   .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
     border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
   }
+  .pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand {
+    --pf-v6-c-table__expandable-row--Display: block;
+  }
+  .pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
+    content: none;
+  }
   .pf-m-grid-md.pf-v6-c-table.pf-m-expandable {
     --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
   }
@@ -707,6 +719,12 @@
   .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
     border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
   }
+  .pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand {
+    --pf-v6-c-table__expandable-row--Display: block;
+  }
+  .pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
+    content: none;
+  }
   .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable {
     --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
   }
@@ -1013,6 +1031,12 @@
   .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
     border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
   }
+  .pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand {
+    --pf-v6-c-table__expandable-row--Display: block;
+  }
+  .pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
+    content: none;
+  }
   .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable {
     --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
   }
@@ -1319,6 +1343,12 @@
   .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
     border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
   }
+  .pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand {
+    --pf-v6-c-table__expandable-row--Display: block;
+  }
+  .pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
+    content: none;
+  }
   .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable {
     --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
   }

package/components/Table/table-grid.scss

@@ -133,6 +133,8 @@
 
 // - Table mobile layout
 @include pf-mobile-layout {
+  $pf-mobile-parent: &;
+
   --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-grid--cell--PaddingBlockStart);
   --#{$table}--cell--PaddingInlineEnd: var(--#{$table}--m-grid--cell--PaddingInlineEnd);
   --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-grid--cell--PaddingBlockEnd);
@@ -183,6 +185,20 @@
     }
   }
 
+  &.pf-m-animate-expand {
+    --#{$table}__expandable-row--Display: block;
+
+    > .#{$table}__tbody > .#{$table}__expandable-row {
+      &:not(.pf-m-expanded) {
+        > :is(.#{$table}__td, .#{$table}__th) {
+          &[data-label]::before {
+            content: none; // hides column header for non-expanded rows
+          }
+        }
+      }
+    }
+  }
+
   // Remove border on tr inside non-expanded tbody in of expandable tables
   &.pf-m-expandable {
     --#{$table}__tr--BorderBlockEndWidth: 0; // nested table rows have no border

package/components/Table/table.css

@@ -422,8 +422,11 @@
 .pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator {
   --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
 }
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody.pf-m-expanded > .pf-v6-c-table__control-row {
+  border-block-end: 0;
+}
 .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row {
-  display: revert;
+  display: var(--pf-v6-c-table__expandable-row--Display, revert);
   visibility: hidden;
   opacity: var(--pf-v6-c-table__expandable-row--Opacity);
   transition-delay: 0s, 0s, var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
@@ -433,7 +436,7 @@
   translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
 }
 .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row[hidden] {
-  display: revert;
+  display: var(--pf-v6-c-table__expandable-row--Display, revert);
 }
 .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded {
   visibility: visible;
@@ -455,6 +458,12 @@
 .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
   max-height: 0;
 }
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):not(.pf-m-no-padding) {
+  padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
+  border-block-end: 0;
+}
 .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__control-row.pf-m-no-animate-expand ~ .pf-v6-c-table__expandable-row {
   --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: 0s;
   --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
@@ -766,23 +775,20 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   position: relative;
   border-block-end: 0 solid transparent;
 }
-.pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
-.pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
+:not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
+:not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
   padding-block-start: 0;
 }
-.pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
-.pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
-  padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
-}
-.pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding,
-.pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding {
+
+.pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding,
+.pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding {
   padding-block-start: 0;
   padding-block-end: 0;
   padding-inline-start: 0;
   padding-inline-end: 0;
 }
-.pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding .pf-v6-c-table__expandable-row-content,
-.pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding .pf-v6-c-table__expandable-row-content {
+.pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
+.pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
   padding: 0;
   border-radius: 0;
 }
@@ -808,10 +814,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   border-block-end: 0;
 }
 
-.pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
-  border-block-end: 0;
-}
-
 .pf-v6-c-table.pf-m-compact {
   --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
@@ -871,6 +873,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 }
 .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row {
   background-color: var(--pf-v6-c-table__control-row--BackgroundColor);
+  border-block-end: var(--pf-v6-c-table__control-row--BorderBlockEndWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBlockEndColor);
+}
+.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row.pf-m-expanded {
   border-block-end: 0;
 }
 

package/components/Table/table.scss

@@ -596,8 +596,14 @@
   // stylelint-disable max-nesting-depth, selector-max-class
   &.pf-m-animate-expand {
     > .#{$table}__tbody {
+      &.pf-m-expanded {
+        > .#{$table}__control-row {
+          border-block-end: 0;
+        }
+      }
+
       > .#{$table}__expandable-row {
-        display: revert;
+        display: var(--#{$table}__expandable-row--Display, revert);
         visibility: hidden;
         opacity: var(--#{$table}__expandable-row--Opacity);
         transition-delay: 0s, 0s, var(--#{$table}__expandable-row--TransitionDuration--collapse--fade), var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
@@ -607,7 +613,7 @@
         translate: 0 var(--#{$table}__expandable-row--TranslateY);
 
         &[hidden] {
-          display: revert;
+          display: var(--#{$table}__expandable-row--Display, revert);
         }
 
         &.pf-m-expanded {
@@ -641,6 +647,17 @@
         }
       }
 
+      // Add padding back to compound expandable
+      > .#{$table}__control-row ~ .#{$table}__expandable-row.pf-m-expanded {
+        > :is(.#{$table}__th, .#{$table}__td):not(.pf-m-no-padding) {
+          padding-block-start: var(--#{$table}--cell--PaddingBlockStart);
+        }
+      }
+
+      > .#{$table}__tr:has(~ .#{$table}__expandable-row) {
+        border-block-end: 0;
+      }
+
       > .#{$table}__control-row.pf-m-no-animate-expand ~ .#{$table}__expandable-row {
         --#{$table}__expandable-row--TransitionDuration--collapse--fade: 0s;
         --#{$table}__expandable-row--TransitionDuration--collapse--slide: 0s;
@@ -649,7 +666,7 @@
       }
     }
   }
-  // stylelint-enable max-nesting-depth, selector-max-class
+  // stylelint-enable
 }
 
 // - Table truncate - Table wrap - Table nowrap - Table fit content - Table wrap - Table break word
@@ -1042,22 +1059,15 @@
   position: relative;
   border-block-end: 0 solid transparent;
 
-  // Remove top padding from regular expandable
-  > .#{$table}__th,
-  > .#{$table}__td {
-    padding-block-start: 0;
-  }
-
-  // Add padding back to compound expandable
-  .#{$table}__control-row ~ & {
+  @at-root :not(.#{$table}__control-row) ~ .#{$table}__expandable-row {
     > .#{$table}__th,
     > .#{$table}__td {
-      padding-block-start: var(--#{$table}--cell--PaddingBlockStart);
+      padding-block-start: 0;
     }
   }
 
-  .#{$table}__td,
-  .#{$table}__th {
+  td:where(.#{$table}__td),
+  th:where(.#{$table}__th) {
     &.pf-m-no-padding {
       padding-block-start: 0;
       padding-block-end: 0;
@@ -1101,10 +1111,6 @@
   }
 }
 
-.#{$table}__tr:has(~ .#{$table}__expandable-row) {
-  border-block-end: 0;
-}
-
 // - Table compact
 .#{$table}.pf-m-compact {
   --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact--cell--PaddingBlockStart);
@@ -1194,7 +1200,13 @@
     // - Table tbody table control row
     .#{$table}__control-row {
       background-color: var(--#{$table}__control-row--BackgroundColor);
-      border-block-end: 0;
+      border-block-end: var(--#{$table}__control-row--BorderBlockEndWidth) solid var(--#{$table}__control-row__tbody--BorderBlockEndColor);
+
+      // stylelint-disable max-nesting-depth, selector-max-class
+      &.pf-m-expanded {
+        border-block-end: 0; // TODO this is a dupe of the block above, consolidate in a breaking change
+      }
+      // stylelint-enable
     }
   }
 }

package/components/_index.css

@@ -15747,6 +15747,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
   border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
 }
+.pf-m-grid.pf-v6-c-table.pf-m-animate-expand {
+  --pf-v6-c-table__expandable-row--Display: block;
+}
+.pf-m-grid.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
+  content: none;
+}
 .pf-m-grid.pf-v6-c-table.pf-m-expandable {
   --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
 }
@@ -16050,6 +16056,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
     border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
   }
+  .pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand {
+    --pf-v6-c-table__expandable-row--Display: block;
+  }
+  .pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
+    content: none;
+  }
   .pf-m-grid-md.pf-v6-c-table.pf-m-expandable {
     --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
   }
@@ -16356,6 +16368,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
     border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
   }
+  .pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand {
+    --pf-v6-c-table__expandable-row--Display: block;
+  }
+  .pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
+    content: none;
+  }
   .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable {
     --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
   }
@@ -16662,6 +16680,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
     border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
   }
+  .pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand {
+    --pf-v6-c-table__expandable-row--Display: block;
+  }
+  .pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
+    content: none;
+  }
   .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable {
     --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
   }
@@ -16968,6 +16992,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
     border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
   }
+  .pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand {
+    --pf-v6-c-table__expandable-row--Display: block;
+  }
+  .pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
+    content: none;
+  }
   .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable {
     --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
   }
@@ -17658,8 +17688,11 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 .pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator {
   --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
 }
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody.pf-m-expanded > .pf-v6-c-table__control-row {
+  border-block-end: 0;
+}
 .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row {
-  display: revert;
+  display: var(--pf-v6-c-table__expandable-row--Display, revert);
   visibility: hidden;
   opacity: var(--pf-v6-c-table__expandable-row--Opacity);
   transition-delay: 0s, 0s, var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
@@ -17669,7 +17702,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
 }
 .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row[hidden] {
-  display: revert;
+  display: var(--pf-v6-c-table__expandable-row--Display, revert);
 }
 .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded {
   visibility: visible;
@@ -17691,6 +17724,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
   max-height: 0;
 }
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):not(.pf-m-no-padding) {
+  padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
+  border-block-end: 0;
+}
 .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__control-row.pf-m-no-animate-expand ~ .pf-v6-c-table__expandable-row {
   --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: 0s;
   --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
@@ -18002,23 +18041,20 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   position: relative;
   border-block-end: 0 solid transparent;
 }
-.pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
-.pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
+:not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
+:not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
   padding-block-start: 0;
 }
-.pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
-.pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
-  padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
-}
-.pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding,
-.pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding {
+
+.pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding,
+.pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding {
   padding-block-start: 0;
   padding-block-end: 0;
   padding-inline-start: 0;
   padding-inline-end: 0;
 }
-.pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding .pf-v6-c-table__expandable-row-content,
-.pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding .pf-v6-c-table__expandable-row-content {
+.pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
+.pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
   padding: 0;
   border-radius: 0;
 }
@@ -18044,10 +18080,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   border-block-end: 0;
 }
 
-.pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
-  border-block-end: 0;
-}
-
 .pf-v6-c-table.pf-m-compact {
   --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
@@ -18107,6 +18139,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 }
 .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row {
   background-color: var(--pf-v6-c-table__control-row--BackgroundColor);
+  border-block-end: var(--pf-v6-c-table__control-row--BorderBlockEndWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBlockEndColor);
+}
+.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row.pf-m-expanded {
   border-block-end: 0;
 }
 

package/docs/components/Table/examples/Table.md

@@ -1774,7 +1774,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
 ### Animated expandable
 
-```html
+```html isBeta
 <table
   class="pf-v6-c-table pf-m-grid-lg pf-m-animate-expand pf-m-expandable"
   role="grid"
@@ -1958,7 +1958,6 @@ Note: Table column widths will respond automatically when toggling expanded rows
         </button>
       </td>
     </tr>
-
     <tr
       class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
       role="row"
@@ -2053,7 +2052,6 @@ Note: Table column widths will respond automatically when toggling expanded rows
         </button>
       </td>
     </tr>
-
     <tr class="pf-v6-c-table__tr pf-v6-c-table__expandable-row" role="row">
       <td
         class="pf-v6-c-table__td"
@@ -2135,7 +2133,6 @@ Note: Table column widths will respond automatically when toggling expanded rows
         </button>
       </td>
     </tr>
-
     <tr
       class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
       role="row"
@@ -2220,7 +2217,6 @@ Note: Table column widths will respond automatically when toggling expanded rows
         </button>
       </td>
     </tr>
-
     <tr
       class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
       role="row"
@@ -5584,7 +5580,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 
 ### Animated compound expansion example
 
-```html
+```html isBeta
 <table
   class="pf-v6-c-table pf-m-grid-md pf-m-animate-expand pf-m-expandable"
   role="grid"
@@ -5728,7 +5724,6 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         </button>
       </td>
     </tr>
-
     <tr
       class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
       role="row"
@@ -5947,7 +5942,6 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         </div>
       </td>
     </tr>
-
     <tr class="pf-v6-c-table__tr pf-v6-c-table__expandable-row" role="row">
       <td class="pf-v6-c-table__td pf-m-no-padding" role="cell" colspan="7">
         <div class="pf-v6-c-table__expandable-row-content pf-m-no-background">
@@ -6163,7 +6157,6 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         </div>
       </td>
     </tr>
-
     <tr class="pf-v6-c-table__tr pf-v6-c-table__expandable-row" role="row">
       <td class="pf-v6-c-table__td pf-m-no-padding" role="cell" colspan="7">
         <div class="pf-v6-c-table__expandable-row-content pf-m-no-background">
@@ -6444,7 +6437,6 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         </button>
       </td>
     </tr>
-
     <tr class="pf-v6-c-table__tr pf-v6-c-table__expandable-row" role="row">
       <td class="pf-v6-c-table__td pf-m-no-padding" role="cell" colspan="7">
         <div class="pf-v6-c-table__expandable-row-content pf-m-no-background">
@@ -6660,7 +6652,6 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         </div>
       </td>
     </tr>
-
     <tr class="pf-v6-c-table__tr pf-v6-c-table__expandable-row" role="row">
       <td class="pf-v6-c-table__td pf-m-no-padding" role="cell" colspan="7">
         <div class="pf-v6-c-table__expandable-row-content pf-m-no-background">
@@ -6876,7 +6867,6 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         </div>
       </td>
     </tr>
-
     <tr class="pf-v6-c-table__tr pf-v6-c-table__expandable-row" role="row">
       <td class="pf-v6-c-table__td pf-m-no-padding" role="cell" colspan="7">
         <div class="pf-v6-c-table__expandable-row-content pf-m-no-background">
@@ -7157,7 +7147,6 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         </button>
       </td>
     </tr>
-
     <tr class="pf-v6-c-table__tr pf-v6-c-table__expandable-row" role="row">
       <td class="pf-v6-c-table__td pf-m-no-padding" role="cell" colspan="7">
         <div class="pf-v6-c-table__expandable-row-content pf-m-no-background">
@@ -7373,7 +7362,6 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         </div>
       </td>
     </tr>
-
     <tr class="pf-v6-c-table__tr pf-v6-c-table__expandable-row" role="row">
       <td class="pf-v6-c-table__td pf-m-no-padding" role="cell" colspan="7">
         <div class="pf-v6-c-table__expandable-row-content pf-m-no-background">
@@ -7589,7 +7577,6 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         </div>
       </td>
     </tr>
-
     <tr class="pf-v6-c-table__tr pf-v6-c-table__expandable-row" role="row">
       <td class="pf-v6-c-table__td pf-m-no-padding" role="cell" colspan="7">
         <div class="pf-v6-c-table__expandable-row-content pf-m-no-background">
@@ -7823,6 +7810,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-v6-c-table__control-row` | `.pf-v6-c-table__expandable > <tr>` | Modifies a compound expandable table control row. |
+| `.pf-m-expanded` | `<tbody>`, `.pf-v6-c-table__compound-expansion-toggle` > `.pf-v6-c-button` | Modifies a tbody with a row and an expandable row. |
 | `.pf-v6-c-table__compound-expansion-toggle` | `<td>` | Modifies a `<td>` on active/focus. |
 | `.pf-m-animate-expand` | `.pf-v6-c-table` | Modifies the table to animate expansion. |
 | `.pf-m-expanded` | `.pf-v6-c-table__tbody`, `.pf-v6-c-table__control-row`, `.pf-v6-c-table__compound-expansion-toggle` | Modifies a `<tbody>`, control row, and item in a control row for the expanded state. |

package/docs/demos/Table/examples/Table.md

@@ -4979,7 +4979,10 @@ wrapperTag: div
             </thead>
 
             <tbody class="pf-v6-c-table__tbody pf-m-expanded" role="rowgroup">
-              <tr class="pf-v6-c-table__tr" role="row">
+              <tr
+                class="pf-v6-c-table__tr pf-v6-c-table__control-row pf-m-expanded"
+                role="row"
+              >
                 <th
                   class="pf-v6-c-table__th"
                   role="columnheader"
@@ -5720,7 +5723,10 @@ wrapperTag: div
             </tbody>
 
             <tbody class="pf-v6-c-table__tbody" role="rowgroup">
-              <tr class="pf-v6-c-table__tr" role="row">
+              <tr
+                class="pf-v6-c-table__tr pf-v6-c-table__control-row"
+                role="row"
+              >
                 <th
                   class="pf-v6-c-table__th"
                   role="columnheader"
@@ -6461,7 +6467,10 @@ wrapperTag: div
             </tbody>
 
             <tbody class="pf-v6-c-table__tbody" role="rowgroup">
-              <tr class="pf-v6-c-table__tr" role="row">
+              <tr
+                class="pf-v6-c-table__tr pf-v6-c-table__control-row"
+                role="row"
+              >
                 <th
                   class="pf-v6-c-table__th"
                   role="columnheader"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.3.0-prerelease.37",
+  "version": "6.3.0-prerelease.39",
   "keywords": [],
   "license": "MIT",
   "scripts": {