@patternfly/patternfly 6.5.2 → 6.6.0-prerelease.10

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;

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 {