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

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

@@ -314,11 +314,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 +424,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 +450,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 +476,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 +488,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 +556,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 +586,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 +683,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;

package/components/Table/table.scss

@@ -411,11 +411,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);
 
@@ -584,8 +584,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 +595,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 +609,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 +623,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 +663,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 +676,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 +769,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 +804,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 +919,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 {

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;

package/components/Toolbar/toolbar.scss

@@ -391,10 +391,10 @@ $pf-v6--include-toolbar-breakpoints: true !default;
 // - Toolbar expand all
 .#{$toolbar}__expand-all-icon {
   display: inline-flex;
+  transform: rotate(var(--#{$toolbar}__expand-all-icon--Rotate));
   transition-timing-function: var(--#{$toolbar}__expand-all-icon--TransitionTimingFunction);
   transition-duration: var(--#{$toolbar}__expand-all-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--#{$toolbar}__expand-all-icon--Rotate));
 
   @include pf-v6-mirror-inline-on-rtl; // - TODO: mirror this icon in breaking change
 }

package/components/Tooltip/tooltip.css

@@ -98,7 +98,7 @@
   font-size: var(--pf-v6-c-tooltip__content--FontSize);
   color: var(--pf-v6-c-tooltip__content--Color);
   text-align: center;
-  word-break: break-word;
+  overflow-wrap: break-word;
   background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
   border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
 }

package/components/Tooltip/tooltip.scss

@@ -129,7 +129,7 @@
   font-size: var(--#{$tooltip}__content--FontSize);
   color: var(--#{$tooltip}__content--Color);
   text-align: center;
-  word-break: break-word;
+  overflow-wrap: break-word;
   background-color: var(--#{$tooltip}__content--BackgroundColor);
   border-radius: var(--#{$tooltip}__content--BorderRadius);
 
@@ -140,7 +140,7 @@
 
 .#{$tooltip}__arrow {
   position: absolute;
-  // stylelint-disable liberty/use-logical-spec
+  // stylelint-disable property-layout-mappings
   top: var(--#{$tooltip}__arrow--InsetBlockStart, auto);
   right: var(--#{$tooltip}__arrow--InsetInlineEnd, auto);
   bottom: var(--#{$tooltip}__arrow--InsetBlockEnd, auto);

package/components/TreeView/tree-view.css

@@ -267,19 +267,19 @@
   display: inline-block;
   min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
   text-align: center;
-  transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
+  transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
 }
 
 .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
-  max-height: 0;
   visibility: hidden;
+  max-height: 0;
   opacity: var(--pf-v6-c-tree-view__list--Opacity);
+  translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
   transition-property: opacity, translate, visibility, max-height;
-  translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
 }
 .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
   --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
@@ -290,12 +290,12 @@
   --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
 }
 .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
-  max-height: 99999px;
   visibility: revert;
+  max-height: 99999px;
   opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
+  translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
   transition-delay: 0s;
   transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
-  translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
 }
 
 .pf-v6-c-tree-view__node,

package/components/TreeView/tree-view.scss

@@ -376,20 +376,20 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
   display: inline-block;
   min-width: var(--#{$tree-view}__node-toggle-icon--MinWidth);
   text-align: center;
-  transition: transform var(--#{$tree-view}__node-toggle-icon--TransitionDuration) var(--#{$tree-view}__node-toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$tree-view}__node-toggle-icon--Rotate));
+  transition: transform var(--#{$tree-view}__node-toggle-icon--TransitionDuration) var(--#{$tree-view}__node-toggle-icon--TransitionTimingFunction);
 }
 
 .#{$tree-view}__list-item {
   .#{$tree-view}__list {
-    max-height: 0;
     visibility: hidden;
+    max-height: 0;
     opacity: var(--#{$tree-view}__list--Opacity);
+    translate: 0 var(--#{$tree-view}__list--TranslateY);
     transition-delay: 0s, 0s, var(--#{$tree-view}__list--TransitionDuration--fade), var(--#{$tree-view}__list--TransitionDuration--fade);
     transition-timing-function: var(--#{$tree-view}__list--TransitionTimingFunction);
     transition-duration: var(--#{$tree-view}__list--TransitionDuration--fade), var(--#{$tree-view}__list--TransitionDuration--slide), 0s, 0s;
     transition-property: opacity, translate, visibility, max-height;
-    translate: 0 var(--#{$tree-view}__list--TranslateY);
   }
 
   .#{$tree-view}__list-item {
@@ -402,12 +402,12 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
     --#{$tree-view}__node-toggle-icon--Rotate: var(--#{$tree-view}__list-item--m-expanded__node-toggle-icon--Rotate);
 
     > .#{$tree-view}__list {
-      max-height: 99999px;
       visibility: revert;
+      max-height: 99999px;
       opacity: var(--#{$tree-view}--m-expanded__list--Opacity);
+      translate: 0 var(--#{$tree-view}--m-expanded__list--TranslateY);
       transition-delay: 0s;
       transition-duration: var(--#{$tree-view}__list--TransitionDuration--expand--fade), var(--#{$tree-view}__list--TransitionDuration--expand--slide), 0s, 0s;
-      translate: 0 var(--#{$tree-view}--m-expanded__list--TranslateY);
     }
   }
 }

package/components/Wizard/wizard.css

@@ -196,7 +196,7 @@
 
 .pf-v6-c-wizard__title {
   padding-inline-end: var(--pf-v6-c-wizard__title--PaddingInlineEnd);
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .pf-v6-c-wizard__title-text {
@@ -259,7 +259,7 @@
   align-items: baseline;
   margin-block-end: var(--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd);
   text-align: start;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 .pf-v6-c-wizard__toggle-list-item:not(:last-child) {
   margin-inline-end: var(--pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd);
@@ -395,8 +395,8 @@
   padding-inline: 0;
   color: var(--pf-v6-c-wizard__nav-link--Color);
   text-align: start;
+  overflow-wrap: break-word;
   text-decoration-line: var(--pf-v6-c-wizard__nav-link--TextDecoration);
-  word-break: break-word;
   counter-increment: wizard-nav-count;
   background-color: transparent;
   border: none;
@@ -501,10 +501,10 @@
 
 .pf-v6-c-wizard__nav-link-toggle-icon {
   display: inline-block;
+  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
   transition-timing-function: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
 }
 
 .pf-v6-c-wizard__main {
@@ -514,7 +514,7 @@
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .pf-v6-c-wizard__main-body {

package/components/Wizard/wizard.scss

@@ -261,7 +261,7 @@
 
 .#{$wizard}__title {
   padding-inline-end: var(--#{$wizard}__title--PaddingInlineEnd);
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .#{$wizard}__title-text {
@@ -325,7 +325,7 @@
   align-items: baseline;
   margin-block-end: var(--#{$wizard}__toggle-list-item--MarginBlockEnd);
   text-align: start;
-  word-break: break-word;
+  overflow-wrap: break-word;
 
   &:not(:last-child) {
     margin-inline-end: var(--#{$wizard}__toggle-list-item--not-last-child--MarginInlineEnd);
@@ -478,8 +478,8 @@
   padding-inline: 0;
   color: var(--#{$wizard}__nav-link--Color);
   text-align: start; // needed for when the item is a button
+  overflow-wrap: break-word;
   text-decoration-line: var(--#{$wizard}__nav-link--TextDecoration);
-  word-break: break-word;
   counter-increment: wizard-nav-count;
   background-color: transparent;
   border: none;
@@ -601,10 +601,10 @@
   @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
+  transform: rotate(var(--#{$wizard}__nav-link-toggle-icon--Rotate));
   transition-timing-function: var(--#{$wizard}__nav-link-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--#{$wizard}__nav-link-toggle-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--#{$wizard}__nav-link-toggle-icon--Rotate));
 }
 
 .#{$wizard}__main {
@@ -614,7 +614,7 @@
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .#{$wizard}__main-body {