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

package/components/Menu/menu.scss

@@ -347,8 +347,8 @@
 
     // - Menu list
     .#{$menu}__list {
-      overflow: hidden;
       visibility: visible;
+      overflow: hidden;
       transition: var(--#{$menu}--m-drilldown__list--Transition);
 
       & .#{$menu}__list {
@@ -390,8 +390,8 @@
 
   // stylelint-disable selector-max-class
   &.pf-m-drilled-in > .#{$menu}__content > .#{$menu}__list {
-    overflow: visible;
     visibility: hidden;
+    overflow: visible;
 
     > .#{$divider},
     > .#{$menu}__list-item:not(.pf-m-current-path) {
@@ -566,10 +566,10 @@
   color: var(--#{$menu}__item--Color);
   text-align: start;
   text-decoration-line: none;
+  outline-offset: var(--#{$menu}--OutlineOffset);
   background-color: var(--#{$menu}__item--BackgroundColor);
   border: 0;
   border-radius: var(--#{$menu}__item--BorderRadius);
-  outline-offset: var(--#{$menu}--OutlineOffset);
 
   @include pf-v6-hidden-visible(flex);
 
@@ -627,7 +627,7 @@
 .#{$menu}__item-description {
   font-size: var(--#{$menu}__item-description--FontSize);
   color: var(--#{$menu}__item-description--Color);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 // - Menu check

package/components/MenuToggle/menu-toggle.css

@@ -523,10 +523,10 @@
 
 .pf-v6-c-menu-toggle__icon {
   flex-shrink: 0;
+  rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
   transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
   transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
   transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
-  rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
 }
 .pf-v6-c-menu-toggle__icon :where(picture, img) {
   vertical-align: middle;

package/components/MenuToggle/menu-toggle.scss

@@ -649,10 +649,10 @@
 
 .#{$menu-toggle}__icon {
   flex-shrink: 0;
+  rotate: var(--#{$menu-toggle}__icon--Rotate);
   transition-delay: var(--#{$menu-toggle}__icon--TransitionDelay);
   transition-duration: var(--#{$menu-toggle}__icon--TransitionDuration);
   transition-property: var(--#{$menu-toggle}__icon--TransitionProperty);
-  rotate: var(--#{$menu-toggle}__icon--Rotate);
   
   @at-root .#{$menu-toggle}:not(.pf-m-plain) & {
     @extend %pf-v6-menu-toggle__icon--MarginBlock;

package/components/ModalBox/modal-box.css

@@ -183,7 +183,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  word-break: break-word;
+  overflow-wrap: break-word;
   -webkit-overflow-scrolling: touch;
 }
 .pf-v6-c-modal-box__body:last-child {

package/components/ModalBox/modal-box.scss

@@ -226,7 +226,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  word-break: break-word;
+  overflow-wrap: break-word;
   -webkit-overflow-scrolling: touch;
 
   &:last-child {

package/components/Nav/nav.css

@@ -212,17 +212,17 @@
 
 .pf-v6-c-nav__subnav {
   --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
+  visibility: visible;
   max-height: 99999px;
   padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
   overflow-y: clip;
-  visibility: visible;
+  translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
   transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
   transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
   transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
-  translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
 }
 .pf-v6-c-nav__subnav[hidden] {
   --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
@@ -232,8 +232,8 @@
   --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
   --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
   display: grid;
-  max-height: 0;
   visibility: hidden;
+  max-height: 0;
   opacity: 0;
 }
 
@@ -251,10 +251,10 @@
   content: var(--pf-v6-c-nav__item--accent--content, "");
   background-color: var(--pf-v6-c-nav__item--accent--color);
   border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
+  scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
   transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
   transition-property: scale;
-  scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
 }
 .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
   margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
@@ -342,10 +342,10 @@
 
 .pf-v6-c-nav__toggle-icon {
   display: inline-block;
+  transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
   transition-timing-function: var(--pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform);
   transition-duration: var(--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform);
   transition-property: transform;
-  transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__toggle-icon {
   scale: -1 1;

package/components/Nav/nav.scss

@@ -265,17 +265,17 @@
 .#{$nav}__subnav {
   --#{$nav}__list--RowGap: var(--#{$nav}__subnav--RowGap); // this value is passed to --#{$nav}__item--RowGap--row-offset and updates clickable area based on value passed
 
+  visibility: visible;
   max-height: 99999px;
   padding-block-start: var(--#{$nav}__subnav--PaddingBlockStart);
   padding-block-end: var(--#{$nav}__subnav--PaddingBlockEnd);
   padding-inline-start: var(--#{$nav}__subnav--PaddingInlineStart); // indent nested lists
   overflow-y: clip;
-  visibility: visible;
+  translate: 0 var(--#{$nav}__subnav--TranslateY);
   transition-delay: 0s, 0s, var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s);
   transition-timing-function: var(--#{$nav}__subnav--TransitionTimingFunction--expand);
   transition-duration: var(--#{$nav}__subnav--TransitionDuration--expand), var(--#{$nav}__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
   transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
-  translate: 0 var(--#{$nav}__subnav--TranslateY);
 
   &[hidden] {
     --#{$nav}__subnav--TransitionDelay--expand--focus: var(--#{$nav}__subnav--TransitionDuration--expand);
@@ -286,8 +286,8 @@
     --#{$nav}__subnav--TranslateY: var(--#{$nav}__subnav--hidden--TranslateY);
 
     display: grid; // overrides `display: none` - element is hidden via `visibility: hidden`
-    max-height: 0;
     visibility: hidden;
+    max-height: 0;
     opacity: 0;
   }
 }
@@ -307,10 +307,10 @@
     content: var(--#{$nav}__item--accent--content, "");
     background-color: var(--#{$nav}__item--accent--color);
     border-radius: var(--#{$nav}__item--accent--BorderRadius);
+    scale: 1 var(--#{$nav}__item--accent--ScaleY);
     transition-timing-function: var(--#{$nav}__item--accent--TransitionTimingFunction);
     transition-duration: var(--#{$nav}__item--accent--TransitionDuration);
     transition-property: scale;
-    scale: 1 var(--#{$nav}__item--accent--ScaleY);
   }
 
   > .#{$nav}__link[button] {
@@ -422,10 +422,10 @@
 // - Nav toggle caret icon
 .#{$nav}__toggle-icon {
   display: inline-block;
+  transform: rotate(var(--#{$nav}__item__toggle-icon--Rotate));
   transition-timing-function: var(--#{$nav}__item__toggle-icon--TransitionTimingFunction--transform);
   transition-duration: var(--#{$nav}__item__toggle-icon--TransitionDuration--transform);
   transition-property: transform;
-  transform: rotate(var(--#{$nav}__item__toggle-icon--Rotate));
 
   @include pf-v6-mirror-inline-on-rtl;
 

package/components/NotificationDrawer/notification-drawer.css

@@ -138,9 +138,9 @@
   padding-block-end: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
+  outline-offset: var(--pf-v6-c-notification-drawer__list-item--OutlineOffset);
   background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
   border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
-  outline-offset: var(--pf-v6-c-notification-drawer__list-item--OutlineOffset);
 }
 .pf-v6-c-notification-drawer__list-item::before {
   position: absolute;
@@ -197,7 +197,7 @@
 
 .pf-v6-c-notification-drawer__list-item-header-title {
   font-weight: var(--pf-v6-c-notification-drawer__list-item-header-title--FontWeight);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
   display: -webkit-box;
@@ -219,7 +219,7 @@
   grid-row: 2/3;
   grid-column: 1/2;
   margin-block-end: var(--pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .pf-v6-c-notification-drawer__list-item-timestamp {
@@ -250,9 +250,9 @@
   padding-block-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd);
+  outline-offset: var(--pf-v6-c-notification-drawer__group-toggle--OutlineOffset);
   background-color: var(--pf-v6-c-notification-drawer__group-toggle--BackgroundColor);
   border: none;
-  outline-offset: var(--pf-v6-c-notification-drawer__group-toggle--OutlineOffset);
 }
 
 .pf-v6-c-notification-drawer__group-toggle-title {
@@ -264,7 +264,7 @@
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
   font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
   text-align: start;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .pf-v6-c-notification-drawer__group-toggle-count {

package/components/NotificationDrawer/notification-drawer.scss

@@ -173,9 +173,9 @@
   padding-block-end: var(--#{$notification-drawer}__list-item--PaddingBlockEnd);
   padding-inline-start: var(--#{$notification-drawer}__list-item--PaddingInlineStart);
   padding-inline-end: var(--#{$notification-drawer}__list-item--PaddingInlineEnd);
+  outline-offset: var(--#{$notification-drawer}__list-item--OutlineOffset);
   background-color: var(--#{$notification-drawer}__list-item--BackgroundColor);
   border-radius: var(--#{$notification-drawer}__list-item--BorderRadius);
-  outline-offset: var(--#{$notification-drawer}__list-item--OutlineOffset);
 
   &::before {
     position: absolute;
@@ -242,7 +242,7 @@
 
 .#{$notification-drawer}__list-item-header-title {
   font-weight: var(--#{$notification-drawer}__list-item-header-title--FontWeight);
-  word-break: break-word;
+  overflow-wrap: break-word;
 
   &.pf-m-truncate {
     @include pf-v6-line-clamp("var(--#{$notification-drawer}__list-item-header-title--max-lines)");
@@ -263,7 +263,7 @@
   grid-row: 2 / 3;
   grid-column: 1 / 2;
   margin-block-end: var(--#{$notification-drawer}__list-item-description--MarginBlockEnd);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .#{$notification-drawer}__list-item-timestamp {
@@ -295,9 +295,9 @@
   padding-block-end: var(--#{$notification-drawer}__group-toggle--PaddingBlockEnd);
   padding-inline-start: var(--#{$notification-drawer}__group-toggle--PaddingInlineStart);
   padding-inline-end: var(--#{$notification-drawer}__group-toggle--PaddingInlineEnd);
+  outline-offset: var(--#{$notification-drawer}__group-toggle--OutlineOffset);
   background-color: var(--#{$notification-drawer}__group-toggle--BackgroundColor);
   border: none;
-  outline-offset: var(--#{$notification-drawer}__group-toggle--OutlineOffset);
 }
 
 .#{$notification-drawer}__group-toggle-title {
@@ -307,7 +307,7 @@
   margin-inline-end: var(--#{$notification-drawer}__group-toggle-title--MarginInlineEnd);
   font-size: var(--#{$notification-drawer}__group-toggle-title--FontSize);
   text-align: start;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .#{$notification-drawer}__group-toggle-count {

package/components/Page/page.css

@@ -394,10 +394,11 @@
   inset-inline-start: 0;
   z-index: var(--pf-v6-c-page__dock--ZIndex);
   display: flex;
+  visibility: hidden;
   flex-direction: column;
   grid-area: dock;
   width: var(--pf-v6-c-page__dock--Width);
-  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
+  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide), visibility 0s var(--pf-v6-c-page__dock--TransitionDuration--slide);
   translate: -100% 0;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__dock {
@@ -406,7 +407,9 @@
 
 .pf-v6-c-page__dock.pf-m-expanded {
   --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
+  visibility: visible;
   translate: 0;
+  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide), visibility 0s 0s;
 }
 @media (min-width: 62rem) {
   .pf-v6-c-page__dock {
@@ -414,6 +417,7 @@
     --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
     position: revert;
     inset: revert;
+    visibility: revert;
     width: auto;
     translate: 0;
   }
@@ -428,9 +432,9 @@
 .pf-v6-c-page__dock-main {
   flex-grow: 1;
   background-color: var(--pf-v6-c-page__dock-main--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-page__dock-main--BackdropFilter);
   border-inline-end: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock-main--BorderInlineEndColor);
   box-shadow: var(--pf-v6-c-page__dock-main--BoxShadow);
+  backdrop-filter: var(--pf-v6-c-page__dock-main--BackdropFilter);
 }
 .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-page__dock-main {
   border-inline-end: var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor);
@@ -512,10 +516,10 @@
   margin-inline-start: var(--pf-v6-c-page__sidebar-main--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd);
   background-color: var(--pf-v6-c-page__sidebar-main--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-page__sidebar-main--BackdropFilter);
   border: var(--pf-v6-c-page__sidebar-main--BorderWidth) solid var(--pf-v6-c-page__sidebar-main--BorderColor);
   border-radius: var(--pf-v6-c-page__sidebar-main--BorderRadius);
   box-shadow: var(--pf-v6-c-page__sidebar-main--BoxShadow);
+  backdrop-filter: var(--pf-v6-c-page__sidebar-main--BackdropFilter);
 }
 
 .pf-v6-c-page__sidebar-header {
@@ -881,7 +885,6 @@
   margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
   background: var(--pf-v6-c-page__main-container--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-page__main-container--BackdropFilter);
   border: solid var(--pf-v6-c-page__main-container--BorderColor);
   border-block-start-width: var(--pf-v6-c-page__main-container--BorderBlockStartWidth);
   border-block-end-width: var(--pf-v6-c-page__main-container--BorderBlockEndWidth);
@@ -889,6 +892,7 @@
   border-inline-end-width: var(--pf-v6-c-page__main-container--BorderInlineEndWidth);
   border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
   box-shadow: var(--pf-v6-c-page__main-container--BoxShadow);
+  backdrop-filter: var(--pf-v6-c-page__main-container--BackdropFilter);
 }
 @media screen and (max-width: calc(48rem - 1px)) {
   .pf-v6-c-page__main-container {

package/components/Page/page.scss

@@ -425,10 +425,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   inset-inline-start: 0;
   z-index: var(--#{$page}__dock--ZIndex);
   display: flex;
+  visibility: hidden;
   flex-direction: column;
   grid-area: dock;
   width: var(--#{$page}__dock--Width);
-  transition: translate var(--#{$page}__dock--TransitionDuration--slide) var(--#{$page}__dock--TransitionTimingFunction--slide);
+  transition: translate var(--#{$page}__dock--TransitionDuration--slide) var(--#{$page}__dock--TransitionTimingFunction--slide), visibility 0s var(--#{$page}__dock--TransitionDuration--slide);
 
   @include pf-v6-bidirectional-style(
     $prop: translate,
@@ -439,7 +440,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   &.pf-m-expanded {
     --#{$page}__dock--TransitionDuration--slide: var(--#{$page}__dock--m-expanded--TransitionDuration--slide);
 
+    visibility: visible;
     translate: 0;
+    transition:
+      translate var(--#{$page}__dock--TransitionDuration--slide) var(--#{$page}__dock--TransitionTimingFunction--slide),
+      visibility 0s 0s;
   }
 
   @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
@@ -448,6 +453,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
     position: revert;
     inset: revert;
+    visibility: revert;
     width: auto;
     translate: 0;
   }
@@ -464,9 +470,9 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 .#{$page}__dock-main {
   flex-grow: 1;
   background-color: var(--#{$page}__dock-main--BackgroundColor);
-  backdrop-filter: var(--#{$page}__dock-main--BackdropFilter);
   border-inline-end: var(--#{$page}__dock-main--BorderInlineEndWidth) solid var(--#{$page}__dock-main--BorderInlineEndColor);
   box-shadow: var(--#{$page}__dock-main--BoxShadow);
+  backdrop-filter: var(--#{$page}__dock-main--BackdropFilter);
 
   .#{$page}__dock.pf-m-expanded & {
     border-inline-end: var(--#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor);
@@ -561,10 +567,10 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   margin-inline-start: var(--#{$page}__sidebar-main--MarginInlineStart);
   margin-inline-end: var(--#{$page}__sidebar-main--MarginInlineEnd);
   background-color: var(--#{$page}__sidebar-main--BackgroundColor);
-  backdrop-filter: var(--#{$page}__sidebar-main--BackdropFilter);
   border: var(--#{$page}__sidebar-main--BorderWidth) solid var(--#{$page}__sidebar-main--BorderColor);
   border-radius: var(--#{$page}__sidebar-main--BorderRadius);
   box-shadow: var(--#{$page}__sidebar-main--BoxShadow);
+  backdrop-filter: var(--#{$page}__sidebar-main--BackdropFilter);
 }
 
 .#{$page}__sidebar-header {
@@ -761,7 +767,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
   margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
   background: var(--#{$page}__main-container--BackgroundColor);
-  backdrop-filter: var(--#{$page}__main-container--BackdropFilter);
   border: solid var(--#{$page}__main-container--BorderColor);
   border-block-start-width: var(--#{$page}__main-container--BorderBlockStartWidth);
   border-block-end-width: var(--#{$page}__main-container--BorderBlockEndWidth);
@@ -769,6 +774,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   border-inline-end-width: var(--#{$page}__main-container--BorderInlineEndWidth);
   border-radius: var(--#{$page}__main-container--BorderRadius);
   box-shadow: var(--#{$page}__main-container--BoxShadow);
+  backdrop-filter: var(--#{$page}__main-container--BackdropFilter);
 
   @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
     --#{$page}__main-container--AlignSelf: var(--#{$page}__main-container--xs--AlignSelf);

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/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 {