@patternfly/patternfly 6.5.2 → 6.6.0-prerelease.10

package/components/Popover/popover.css

@@ -199,7 +199,7 @@
 }
 
 .pf-v6-c-popover__body {
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .pf-v6-c-popover__footer {

package/components/Popover/popover.scss

@@ -219,7 +219,7 @@
 
 .#{$popover}__arrow {
   position: absolute;
-  // stylelint-disable liberty/use-logical-spec
+  // stylelint-disable property-layout-mappings
   top: var(--#{$popover}__arrow--InsetBlockStart, auto);
   right: var(--#{$popover}__arrow--InsetInlineEnd, auto);
   bottom: var(--#{$popover}__arrow--InsetBlockEnd, auto);
@@ -260,7 +260,7 @@
 
 // Body
 .#{$popover}__body {
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .#{$popover}__footer {

package/components/Progress/progress.css

@@ -36,7 +36,7 @@
   display: grid;
   grid-template-rows: 1fr auto;
   grid-template-columns: auto auto;
-  grid-gap: var(--pf-v6-c-progress--GridGap);
+  gap: var(--pf-v6-c-progress--GridGap);
   align-items: end;
 }
 .pf-v6-c-progress.pf-m-sm {
@@ -130,7 +130,7 @@
 
 .pf-v6-c-progress__description {
   grid-column: 1/2;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 .pf-v6-c-progress__description.pf-m-truncate {
   overflow: hidden;
@@ -146,7 +146,7 @@
   align-items: flex-start;
   justify-content: flex-end;
   text-align: end;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .pf-v6-c-progress__status-icon {

package/components/Progress/progress.scss

@@ -43,7 +43,7 @@
   display: grid;
   grid-template-rows: 1fr auto;
   grid-template-columns: auto auto;
-  grid-gap: var(--#{$progress}--GridGap);
+  gap: var(--#{$progress}--GridGap);
   align-items: end;
 
   // Modifiers
@@ -163,7 +163,7 @@
 // the progress__description is displayed above the progress bar on the left
 .#{$progress}__description {
   grid-column: 1 / 2;
-  word-break: break-word;
+  overflow-wrap: break-word;
 
   &.pf-m-truncate {
     @include pf-v6-text-overflow;
@@ -179,7 +179,7 @@
   align-items: flex-start;
   justify-content: flex-end;
   text-align: end;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 // the progress__status-icon is an icon displayed always in the upper right
@@ -189,11 +189,8 @@
 
 .#{$progress}__bar::before,
 .#{$progress}__indicator {
-  // disable linter as the indicator element should always grow ltr
-  // stylelint-disable liberty/use-logical-spec
   inset-block-start: 0;
   inset-inline-start: 0;
-  // stylelint-enable
 }
 
 // The progress__bar is a white underlay with a semi-transparent color on top, which matches the progress__indicator color

package/components/ProgressStepper/progress-stepper.css

@@ -205,9 +205,9 @@
   inset-block-start: 0;
   inset-inline-start: 0;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
+  clip-path: inset(50%);
 }
 .pf-v6-c-progress-stepper.pf-m-compact .pf-v6-c-progress-stepper__step.pf-m-current .pf-v6-c-progress-stepper__step-main {
   grid-row: 1/2;

package/components/Radio/radio.css

@@ -18,7 +18,7 @@
 .pf-v6-c-radio {
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-gap: var(--pf-v6-c-radio--GridGap);
+  gap: var(--pf-v6-c-radio--GridGap);
   align-items: baseline;
   accent-color: var(--pf-v6-c-radio--AccentColor);
 }

package/components/Radio/radio.scss

@@ -27,7 +27,7 @@
 .#{$radio} {
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-gap: var(--#{$radio}--GridGap);
+  gap: var(--#{$radio}--GridGap);
   align-items: baseline;
   accent-color: var(--#{$radio}--AccentColor);
 

package/components/Sidebar/sidebar.css

@@ -168,6 +168,9 @@
   --pf-v6-c-sidebar__panel--Position: static;
   --pf-v6-c-sidebar__panel--InsetBlockStart: auto;
 }
+.pf-v6-c-sidebar__panel.pf-m-no-background, :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-sidebar__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-sidebar__panel:not(.pf-m-no-plain-on-glass) {
+  --pf-v6-c-sidebar__panel--BackgroundColor: transparent;
+}
 .pf-v6-c-sidebar__panel.pf-m-secondary {
   --pf-v6-c-sidebar__panel--BackgroundColor: var(--pf-v6-c-sidebar__panel--m-secondary--BackgroundColor);
 }
@@ -187,7 +190,7 @@
   --pf-v6-c-sidebar__content--PaddingBlockEnd: var(--pf-v6-c-sidebar__content--m-padding--PaddingBlockEnd);
   --pf-v6-c-sidebar__content--PaddingInlineStart: var(--pf-v6-c-sidebar__content--m-padding--PaddingBlockStart);
 }
-.pf-v6-c-sidebar__content.pf-m-no-background {
+.pf-v6-c-sidebar__content.pf-m-no-background, :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-sidebar__content.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-sidebar__content:not(.pf-m-no-plain-on-glass) {
   --pf-v6-c-sidebar__content--BackgroundColor: transparent;
 }
 .pf-v6-c-sidebar__content.pf-m-secondary {
@@ -200,12 +203,6 @@
   --pf-v6-c-sidebar__content--Order: -1;
 }
 
-.pf-v6-c-sidebar.pf-m-no-background,
-.pf-v6-c-sidebar__panel.pf-m-no-background,
-.pf-v6-c-sidebar__content.pf-m-no-background {
-  background-color: transparent;
-}
-
 .pf-v6-c-sidebar__panel.pf-m-width-default {
   --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
 }

package/components/Sidebar/sidebar.scss

@@ -205,6 +205,12 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
     --#{$sidebar}__panel--InsetBlockStart: auto;
   }
 
+  &.pf-m-no-background,
+  :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
+  :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
+    --#{$sidebar}__panel--BackgroundColor: transparent;
+  }
+
   &.pf-m-secondary {
     --#{$sidebar}__panel--BackgroundColor: var(--#{$sidebar}__panel--m-secondary--BackgroundColor);
   }
@@ -226,7 +232,9 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
     --#{$sidebar}__content--PaddingInlineStart: var(--#{$sidebar}__content--m-padding--PaddingBlockStart);
   }
 
-  &.pf-m-no-background {
+  &.pf-m-no-background,
+  :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
+  :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
     --#{$sidebar}__content--BackgroundColor: transparent;
   }
 
@@ -243,14 +251,6 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   }
 }
 
-.#{$sidebar},
-.#{$sidebar}__panel,
-.#{$sidebar}__content {
-  &.pf-m-no-background {
-    background-color: transparent;
-  }
-}
-
 // Responsive width modifiers
 @each $breakpoint, $breakpoint-value in $pf-v6-c-sidebar--breakpoint-map--width {
   $breakpoint-name: "";

package/components/Spinner/spinner.css

@@ -49,10 +49,10 @@
   width: 100%;
   height: 100%;
   stroke: var(--pf-v6-c-spinner--Color);
+  stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
+  stroke-linecap: round;
   stroke-dasharray: 283;
   stroke-dashoffset: 280;
-  stroke-linecap: round;
-  stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
   transform-origin: 50% 50%;
   animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
 }

package/components/Spinner/spinner.scss

@@ -66,10 +66,10 @@
   width: 100%;
   height: 100%;
   stroke: var(--#{$spinner}--Color);
+  stroke-width: var(--#{$spinner}--StrokeWidth);
+  stroke-linecap: round;
   stroke-dasharray: 283;
   stroke-dashoffset: 280;
-  stroke-linecap: round;
-  stroke-width: var(--#{$spinner}--StrokeWidth);
   transform-origin: 50% 50%;
   animation: #{$spinner}-animation-dash var(--#{$spinner}--AnimationDuration) var(--#{$spinner}__path--AnimationTimingFunction) infinite;
 }

package/components/Switch/switch.css

@@ -128,8 +128,8 @@
   background-color: var(--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor);
   border: var(--pf-v6-c-switch__toggle--before--BorderWidth) solid transparent;
   border-radius: var(--pf-v6-c-switch__toggle--before--BorderRadius);
-  transition: var(--pf-v6-c-switch__toggle--before--Transition);
   transform: translateY(-50%);
+  transition: var(--pf-v6-c-switch__toggle--before--Transition);
 }
 .pf-v6-c-switch__toggle::after {
   position: absolute;

package/components/Switch/switch.scss

@@ -160,8 +160,8 @@
     background-color: var(--#{$switch}__input--not-checked__toggle--before--BackgroundColor);
     border: var(--#{$switch}__toggle--before--BorderWidth) solid transparent; // for forced color mode
     border-radius: var(--#{$switch}__toggle--before--BorderRadius);
-    transition: var(--#{$switch}__toggle--before--Transition); // TODO remove shorthand in breaking change
     transform: translateY(-50%);
+    transition: var(--#{$switch}__toggle--before--Transition); // TODO remove shorthand in breaking change
   }
 
   &::after {

package/components/Table/table-tree-view.css

@@ -134,8 +134,8 @@
 }
 .pf-m-tree-view-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
   position: relative;
-  border: none;
   outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset);
+  border: none;
 }
 .pf-m-tree-view-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before {
   position: absolute;
@@ -173,7 +173,7 @@
 .pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] {
   grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
   grid-column: 1;
-  grid-column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
+  column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
   align-items: start;
 }
 .pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) {
@@ -276,8 +276,8 @@
   }
   .pf-m-tree-view-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
     position: relative;
-    border: none;
     outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset);
+    border: none;
   }
   .pf-m-tree-view-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before {
     position: absolute;
@@ -315,7 +315,7 @@
   .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] {
     grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
     grid-column: 1;
-    grid-column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
+    column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
     align-items: start;
   }
   .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) {
@@ -419,8 +419,8 @@
   }
   .pf-m-tree-view-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
     position: relative;
-    border: none;
     outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset);
+    border: none;
   }
   .pf-m-tree-view-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before {
     position: absolute;
@@ -458,7 +458,7 @@
   .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] {
     grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
     grid-column: 1;
-    grid-column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
+    column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
     align-items: start;
   }
   .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) {
@@ -562,8 +562,8 @@
   }
   .pf-m-tree-view-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
     position: relative;
-    border: none;
     outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset);
+    border: none;
   }
   .pf-m-tree-view-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before {
     position: absolute;
@@ -601,7 +601,7 @@
   .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] {
     grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
     grid-column: 1;
-    grid-column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
+    column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
     align-items: start;
   }
   .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) {
@@ -705,8 +705,8 @@
   }
   .pf-m-tree-view-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
     position: relative;
-    border: none;
     outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset);
+    border: none;
   }
   .pf-m-tree-view-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before {
     position: absolute;
@@ -744,7 +744,7 @@
   .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] {
     grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
     grid-column: 1;
-    grid-column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
+    column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
     align-items: start;
   }
   .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) {

package/components/Table/table-tree-view.scss

@@ -195,8 +195,8 @@ $pf-v6-c-tree-view--MaxDepth: 10;
 
   tbody:where(.#{$table}__tbody) tr:where(.#{$table}__tr) {
     position: relative;
-    border: none;
     outline-offset: var(--#{$table}--m-tree-view-grid--tr--OutlineOffset);
+    border: none;
 
     &::before {
       position: absolute;
@@ -248,7 +248,7 @@ $pf-v6-c-tree-view--MaxDepth: 10;
   td:where(.#{$table}__td)[data-label] {
     grid-template-columns: var(--#{$table}--m-tree-view-grid__td--data-label--GridTemplateColumns);
     grid-column: 1;
-    grid-column-gap: var(--#{$table}--m-tree-view-grid__tbody--cell--GridColumnGap);
+    column-gap: var(--#{$table}--m-tree-view-grid__tbody--cell--GridColumnGap);
     align-items: start;
 
     // set contents of td to start at column two of td grid

package/components/Table/table.css

@@ -175,6 +175,8 @@
   --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
   --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
+  --pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-table {
   --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
@@ -244,6 +246,26 @@
 .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
 }
+.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
+  position: sticky;
+  inset-block-end: 0;
+  z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
+  background: var(--pf-v6-c-table--BackgroundColor);
+}
+.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
+  position: absolute;
+  inset: 0;
+  z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
+  pointer-events: none;
+  content: "";
+  border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
+}
+.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
+  border-block-end: 0;
+}
+.pf-v6-c-table.pf-m-plain {
+  --pf-v6-c-table--BackgroundColor: transparent;
+}
 .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
 .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
 .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -314,11 +336,11 @@
   padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd);
   overflow: var(--pf-v6-c-table--cell--Overflow);
+  text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
   font-size: var(--pf-v6-c-table--cell--FontSize);
   font-weight: var(--pf-v6-c-table--cell--FontWeight);
   line-height: var(--pf-v6-c-table--cell--LineHeight);
   color: var(--pf-v6-c-table--cell--Color);
-  text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
   word-break: var(--pf-v6-c-table--cell--WordBreak);
   white-space: var(--pf-v6-c-table--cell--WhiteSpace);
 }
@@ -424,24 +446,24 @@
 }
 .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-clickable {
   cursor: pointer;
-  background-color: var(--pf-v6-c-table__tr--m-clickable--BackgroundColor);
   outline-offset: var(--pf-v6-c-table__tr--m-clickable--OutlineOffset);
+  background-color: var(--pf-v6-c-table__tr--m-clickable--BackgroundColor);
 }
 .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-clickable:is(:hover, :focus) {
   --pf-v6-c-table__tr--m-clickable--BackgroundColor: var(--pf-v6-c-table__tr--m-clickable--hover--BackgroundColor);
 }
 .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
   position: relative;
-  background-color: var(--pf-v6-c-table__tr--m-selected--BackgroundColor);
   outline-offset: var(--pf-v6-c-table__tr--m-selected--OutlineOffset);
+  background-color: var(--pf-v6-c-table__tr--m-selected--BackgroundColor);
 }
 .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-first-cell-offset-reset > :first-child {
   padding-inline-start: var(--pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingInlineStart);
 }
 .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable {
   cursor: pointer;
-  background-color: var(--pf-v6-c-table__tbody--m-clickable--BackgroundColor);
   outline-offset: var(--pf-v6-c-table__tbody--m-clickable--OutlineOffset);
+  background-color: var(--pf-v6-c-table__tbody--m-clickable--BackgroundColor);
 }
 .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable:is(:hover, :focus) {
   --pf-v6-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor);
@@ -450,8 +472,8 @@
   --pf-v6-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor);
 }
 .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected {
-  background-color: var(--pf-v6-c-table__tbody--m-selected--BackgroundColor);
   outline-offset: var(--pf-v6-c-table__tbody--m-selected--OutlineOffset);
+  background-color: var(--pf-v6-c-table__tbody--m-selected--BackgroundColor);
 }
 .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected .pf-v6-c-table__tr.pf-m-expanded:not(.pf-v6-c-table__expandable-row) {
   border: none;
@@ -476,11 +498,11 @@
   display: var(--pf-v6-c-table__expandable-row--Display, revert);
   visibility: hidden;
   opacity: var(--pf-v6-c-table__expandable-row--Opacity);
+  translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
   transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide), 0s, 0s;
   transition-property: opacity, translate, visibility, background-color;
-  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: var(--pf-v6-c-table__expandable-row--Display, revert);
@@ -488,9 +510,9 @@
 .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded {
   visibility: visible;
   opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
+  translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
   transition-delay: 0s;
   transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), 0s, 0s;
-  translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
 }
 .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
   max-height: 99999px;
@@ -556,8 +578,8 @@
   min-width: var(--pf-v6-c-table__text--MinWidth);
   max-width: var(--pf-v6-c-table--cell--MaxWidth);
   overflow: var(--pf-v6-c-table--cell--Overflow);
-  line-height: var(--pf-v6-c-table--cell--LineHeight);
   text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
+  line-height: var(--pf-v6-c-table--cell--LineHeight);
   word-break: var(--pf-v6-c-table--cell--WordBreak);
   white-space: var(--pf-v6-c-table--cell--WhiteSpace);
 }
@@ -586,10 +608,10 @@
   text-align: start;
   white-space: inherit;
   user-select: text;
+  outline-offset: var(--pf-v6-c-table__button--OutlineOffset);
   background-color: var(--pf-v6-c-table__button--BackgroundColor);
   border: 0;
   border-radius: var(--pf-v6-c-table__button--BorderRadius);
-  outline-offset: var(--pf-v6-c-table__button--OutlineOffset);
 }
 .pf-v6-c-table__button::after {
   position: absolute;
@@ -683,10 +705,10 @@
 }
 
 .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
+  transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
   transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
 }
 .pf-v6-c-table__toggle svg {
   pointer-events: none;
@@ -978,6 +1000,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
 }
 
+.pf-v6-c-table__tfoot {
+  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
+  vertical-align: top;
+}
+
 .pf-v6-c-table__icon-inline {
   display: flex;
   align-items: center;