@patternfly/patternfly 6.6.0-prerelease.1 → 6.6.0-prerelease.10

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;

package/components/Table/table.scss

@@ -269,6 +269,10 @@
   --#{$table}--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
   --#{$table}--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
   --#{$table}--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
+    
+  // * Table sticky footer
+  --#{$table}--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
+  --#{$table}--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
 
   :where(.pf-v6-theme-glass) & {
     --#{$table}--m-sticky-header--BorderBlockEndWidth: 0;
@@ -373,6 +377,34 @@
     }
   }
 
+  // - Table sticky footer
+  &.pf-m-sticky-footer {
+    > .#{$table}__tfoot {
+      position: sticky;
+      inset-block-end: 0;
+      z-index: var(--#{$table}--m-sticky-footer--ZIndex);
+      background: var(--#{$table}--BackgroundColor);
+
+      &::before {
+        position: absolute;
+        inset: 0;
+        z-index: var(--#{$table}--m-sticky-footer--border--ZIndex);
+        pointer-events: none;
+        content: "";
+        border-block-start: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+      }
+    }
+
+    > .#{$table}__tbody:last-of-type > .#{$table}__tr:last-of-type {
+      border-block-end: 0;
+    }
+  }
+
+  // - Table plain
+  &.pf-m-plain {
+    --#{$table}--BackgroundColor: transparent;
+  }
+
   // - Table striped
   // stylelint-disable
   &.pf-m-striped:not(.pf-m-expandable) > tbody:where(.#{$table}__tbody) > tr:where(.#{$table}__tr):nth-child(odd), // regular table
@@ -411,11 +443,11 @@
 
     // default settings
     overflow: var(--#{$table}--cell--Overflow);
+    text-overflow: var(--#{$table}--cell--TextOverflow);
     font-size: var(--#{$table}--cell--FontSize);
     font-weight: var(--#{$table}--cell--FontWeight);
     line-height: var(--#{$table}--cell--LineHeight);
     color: var(--#{$table}--cell--Color);
-    text-overflow: var(--#{$table}--cell--TextOverflow);
     word-break: var(--#{$table}--cell--WordBreak);
     white-space: var(--#{$table}--cell--WhiteSpace);
 
@@ -544,8 +576,8 @@
   // }
 
   .#{$table}__td.pf-m-action {
-    --pf-v6-c-table--cell--PaddingBlockStart: var(--#{$table}__td--m-action--PaddingBlockStart);
-    --pf-v6-c-table--cell--PaddingBlockEnd: var(--#{$table}__td--m-action--PaddingBlockEnd);
+    --#{$table}--cell--PaddingBlockStart: var(--#{$table}__td--m-action--PaddingBlockStart);
+    --#{$table}--cell--PaddingBlockEnd: var(--#{$table}__td--m-action--PaddingBlockEnd);
   }
 
   // - Table sort
@@ -584,8 +616,8 @@
   tr:where(.#{$table}__tr) {
     &.pf-m-clickable {
       cursor: pointer;
-      background-color: var(--#{$table}__tr--m-clickable--BackgroundColor);
       outline-offset: var(--#{$table}__tr--m-clickable--OutlineOffset);
+      background-color: var(--#{$table}__tr--m-clickable--BackgroundColor);
 
       &:is(:hover, :focus) {
         --#{$table}__tr--m-clickable--BackgroundColor: var(--#{$table}__tr--m-clickable--hover--BackgroundColor);
@@ -595,8 +627,8 @@
     // tr selected
     &.pf-m-selected {
       position: relative;
-      background-color: var(--#{$table}__tr--m-selected--BackgroundColor);
       outline-offset: var(--#{$table}__tr--m-selected--OutlineOffset);
+      background-color: var(--#{$table}__tr--m-selected--BackgroundColor);
     }
 
     &.pf-m-first-cell-offset-reset > :first-child {
@@ -609,8 +641,8 @@
   tbody:where(.#{$table}__tbody) {
     &.pf-m-clickable {
       cursor: pointer;
-      background-color: var(--#{$table}__tbody--m-clickable--BackgroundColor);
       outline-offset: var(--#{$table}__tbody--m-clickable--OutlineOffset);
+      background-color: var(--#{$table}__tbody--m-clickable--BackgroundColor);
 
       &:is(:hover, :focus) {
         --#{$table}__tbody--m-clickable--BackgroundColor: var(--#{$table}__tbody--m-clickable--hover--BackgroundColor);
@@ -623,8 +655,8 @@
 
     // - Table tbody expanded
     &.pf-m-selected {
-      background-color: var(--#{$table}__tbody--m-selected--BackgroundColor);
       outline-offset: var(--#{$table}__tbody--m-selected--OutlineOffset);
+      background-color: var(--#{$table}__tbody--m-selected--BackgroundColor);
 
       .#{$table}__tr.pf-m-expanded:not(.#{$table}__expandable-row) {
         border: none;
@@ -663,11 +695,11 @@
         display: var(--#{$table}__expandable-row--Display, revert);
         visibility: hidden;
         opacity: var(--#{$table}__expandable-row--Opacity);
+        translate: 0 var(--#{$table}__expandable-row--TranslateY);
         transition-delay: 0s, 0s, var(--#{$table}__expandable-row--TransitionDuration--collapse--fade), var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
         transition-timing-function: var(--#{$table}__expandable-row--TransitionTimingFunction);
         transition-duration: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade), var(--#{$table}__expandable-row--TransitionDuration--collapse--slide), 0s, 0s;
         transition-property: opacity, translate, visibility, background-color;
-        translate: 0 var(--#{$table}__expandable-row--TranslateY);
 
         &[hidden] {
           display: var(--#{$table}__expandable-row--Display, revert);
@@ -676,9 +708,9 @@
         &.pf-m-expanded {
           visibility: visible;
           opacity: var(--#{$table}__tbody--m-expanded__expandable-row--Opacity);
+          translate: 0 var(--#{$table}__tbody--m-expanded__expandable-row--TranslateY);
           transition-delay: 0s;
           transition-duration: var(--#{$table}__expandable-row--TransitionDuration--expand--fade), var(--#{$table}__expandable-row--TransitionDuration--expand--slide), 0s, 0s;
-          translate: 0 var(--#{$table}__tbody--m-expanded__expandable-row--TranslateY);
 
           > :is(.#{$table}__td, .#{$table}__th) {
             > .#{$table}__expandable-row-content {
@@ -769,8 +801,8 @@
   min-width: var(--#{$table}__text--MinWidth);
   max-width: var(--#{$table}--cell--MaxWidth);
   overflow: var(--#{$table}--cell--Overflow);
-  line-height: var(--#{$table}--cell--LineHeight);
   text-overflow: var(--#{$table}--cell--TextOverflow);
+  line-height: var(--#{$table}--cell--LineHeight);
   word-break: var(--#{$table}--cell--WordBreak);
   white-space: var(--#{$table}--cell--WhiteSpace);
 
@@ -804,10 +836,10 @@
   text-align: start;
   white-space: inherit;
   user-select: text;
+  outline-offset: var(--#{$table}__button--OutlineOffset);
   background-color: var(--#{$table}__button--BackgroundColor);
   border: 0;
   border-radius: var(--#{$table}__button--BorderRadius);
-  outline-offset: var(--#{$table}__button--OutlineOffset);
 
   &::after {
     position: absolute;
@@ -919,10 +951,10 @@
   .#{$table}__toggle-icon {
     @include pf-v6-mirror-inline-on-rtl;
 
+    transform: rotate(var(--#{$table}__toggle--c-button__toggle-icon--Rotate));
     transition-timing-function: var(--#{$table}__toggle--c-button__toggle-icon--TransitionTimingFunction);
     transition-duration: var(--#{$table}__toggle--c-button__toggle-icon--TransitionDuration);
     transition-property: transform;
-    transform: rotate(var(--#{$table}__toggle--c-button__toggle-icon--Rotate));
   }
 
   svg {
@@ -1235,8 +1267,8 @@
   }
 
   .#{$table}__td.pf-m-action {
-    --pf-v6-c-table--cell--PaddingBlockStart: var(--#{$table}--m-compact__td--m-action--PaddingBlockStart);
-    --pf-v6-c-table--cell--PaddingBlockEnd: var(--#{$table}--m-compact__td--m-action--PaddingBlockEnd);
+    --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact__td--m-action--PaddingBlockStart);
+    --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact__td--m-action--PaddingBlockEnd);
   }
 
   .#{$table}__icon {
@@ -1331,6 +1363,13 @@
   }
 }
 
+// - Table tfoot
+.#{$table}__tfoot {
+  --#{$table}__tr--BorderBlockEndWidth: 0;
+
+  vertical-align: top;
+}
+
 // - Table icon inline
 .#{$table}__icon-inline {
   display: flex;

package/components/Tabs/tabs.css

@@ -475,8 +475,8 @@
 
 .pf-v6-c-tabs__toggle-icon {
   display: inline-block;
-  transition: var(--pf-v6-c-tabs__toggle-icon--Transition);
   transform: rotate(var(--pf-v6-c-tabs__toggle-icon--Rotate));
+  transition: var(--pf-v6-c-tabs__toggle-icon--Transition);
 }
 
 .pf-v6-c-tabs__list::-webkit-scrollbar {
@@ -640,8 +640,8 @@
   align-self: end;
   font-size: var(--pf-v6-c-tabs__link-toggle-icon--FontSize);
   color: var(--pf-v6-c-tabs__link-toggle-icon--Color);
-  transition: var(--pf-v6-c-tabs__link-toggle-icon--Transition);
   transform: rotate(var(--pf-v6-c-tabs__link-toggle-icon--Rotate));
+  transition: var(--pf-v6-c-tabs__link-toggle-icon--Transition);
 }
 
 .pf-v6-c-tabs__item-action {
@@ -904,10 +904,10 @@
     border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
     border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
     border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
+    transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
     transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
     transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
     transition-property: width, height, translate;
-    transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
     translate: var(--pf-v6-c-tabs--link-accent--TranslateX) var(--pf-v6-c-tabs--link-accent--TranslateY);
   }
   :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {

package/components/Tabs/tabs.scss

@@ -553,8 +553,8 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
-  transition: var(--#{$tabs}__toggle-icon--Transition); // TODO remove shorthand in breaking change
   transform: rotate(var(--#{$tabs}__toggle-icon--Rotate));
+  transition: var(--#{$tabs}__toggle-icon--Transition); // TODO remove shorthand in breaking change
 }
 
 // Tab list
@@ -738,8 +738,8 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   align-self: end;
   font-size: var(--#{$tabs}__link-toggle-icon--FontSize);
   color: var(--#{$tabs}__link-toggle-icon--Color);
-  transition: var(--#{$tabs}__link-toggle-icon--Transition); // TODO remove shorthand in breaking change
   transform: rotate(var(--#{$tabs}__link-toggle-icon--Rotate));
+  transition: var(--#{$tabs}__link-toggle-icon--Transition); // TODO remove shorthand in breaking change
 }
 
 .#{$tabs}__item-action {
@@ -846,10 +846,10 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
       border: 0 solid var(--#{$tabs}--link-accent--color);
       border-block-end-width: var(--#{$tabs}--link-accent--BorderBlockEndWidth);
       border-inline-start-width: var(--#{$tabs}--link-accent--BorderInlineStartWidth);
+      transform-origin: var(--#{$tabs}--link-accent--TransformOrigin);
       transition-timing-function: var(--#{$tabs}--link-accent--TransitionTimingFunction);
       transition-duration: var(--#{$tabs}--link-accent--TransitionDuration);
       transition-property: width, height, translate;
-      transform-origin: var(--#{$tabs}--link-accent--TransformOrigin);
 
       @include pf-v6-bidirectional-style(
         $prop: translate,

package/components/TextInputGroup/text-input-group.css

@@ -194,9 +194,9 @@
   padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
   color: var(--pf-v6-c-text-input-group__text-input--Color);
+  outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
   background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
   border: 0;
-  outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
 }
 .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
   grid-area: text-input;

package/components/TextInputGroup/text-input-group.scss

@@ -221,9 +221,9 @@
   padding-inline-start: var(--#{$text-input-group}__text-input--PaddingInlineStart);
   padding-inline-end: var(--#{$text-input-group}__text-input--PaddingInlineEnd);
   color: var(--#{$text-input-group}__text-input--Color);
+  outline-offset: var(--#{$text-input-group}__text-input--OutlineOffset);
   background-color: var(--#{$text-input-group}__text-input--BackgroundColor);
   border: 0;
-  outline-offset: var(--#{$text-input-group}__text-input--OutlineOffset);
 
   &,
   &.pf-m-hint {

package/components/Title/title.css

@@ -41,7 +41,7 @@
 
 .pf-v6-c-title {
   font-family: var(--pf-v6-c-title--FontFamily);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 .pf-v6-c-title.pf-m-4xl {
   font-size: var(--pf-v6-c-title--m-4xl--FontSize);

package/components/Title/title.scss

@@ -71,7 +71,7 @@
 
 .#{$title} {
   font-family: var(--#{$title}--FontFamily);
-  word-break: break-word;
+  overflow-wrap: break-word;
 
   &.pf-m-4xl {
     font-size: var(--#{$title}--m-4xl--FontSize);

package/components/Toolbar/toolbar.css

@@ -558,10 +558,10 @@
 
 .pf-v6-c-toolbar__expand-all-icon {
   display: inline-flex;
+  transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
   transition-timing-function: var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-toolbar__expand-all-icon {
   scale: -1 1;