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

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

@@ -1,11 +1,6 @@
 .pf-v6-c-page {
   --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
-  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: 0;
-  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
   --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page__dock--Width: 15.625rem;
   --pf-v6-c-page__dock--desktop--Width: auto;
@@ -24,6 +19,11 @@
   --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
   --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
   --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
+  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
+  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
   --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-page__sidebar--Width--base: 18.125rem;
   --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -194,20 +194,17 @@
   --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
   --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
-  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page--BackgroundColor--glass: transparent;
   --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
-  --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
+  --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
+  --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
   --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
   --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
-  --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
-  --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
-  --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
+  --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--xs) * -1);
+  --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
+  --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
   --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
   --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
@@ -218,9 +215,11 @@
   --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
   --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
+  --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--gutter--default);
+  --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
+  --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
+  --pf-v6-c-page--m-dock__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
+  --pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-page {
   --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -243,6 +242,8 @@
   --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
   --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
   --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
+  --pf-v6-c-page--m-dock__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight--glass);
+  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass);
 }
 @media (min-width: 75rem) {
   .pf-v6-c-page {
@@ -394,10 +395,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 +408,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 +418,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 +433,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 +517,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 +886,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 +893,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

@@ -9,13 +9,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}--inset: var(--pf-t--global--spacer--inset--page-chrome);
 
-  // Docked nav
-  --#{$page}--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
-  --#{$page}--m-dock__main-container--MarginBlockStart: 0;
-  --#{$page}--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
-  --#{$page}--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
-  --#{$page}--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
-
   // Header
   --#{$page}--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
 
@@ -40,6 +33,13 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
   --#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
 
+  // Docked nav
+  --#{$page}--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
+  --#{$page}--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
+  --#{$page}--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
+  --#{$page}--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
+  --#{$page}--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
+
   // Sidebar
   --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$page}__sidebar--Width--base: #{pf-size-prem(290px)};
@@ -235,23 +235,18 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$page}__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
 
-  // Docked nav
-  --#{$page}--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
-  --#{$page}--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
-  --#{$page}--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
-
   // Glass theme
   --#{$page}--BackgroundColor--glass: transparent;
   --#{$page}__sidebar--Width--base--glass: calc(#{pf-size-prem(290px)} + var(--pf-t--global--spacer--inset--page-chrome) * 2);
-  --#{$page}__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
-  --#{$page}__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
-  --#{$page}__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
+  --#{$page}__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
+  --#{$page}__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
+  --#{$page}__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
   --#{$page}__sidebar-main--PaddingBlockEnd--glass: var(--#{$page}__sidebar--PaddingBlockEnd);
   --#{$page}__sidebar-main--PaddingInlineStart--glass: var(--#{$page}__sidebar--PaddingInlineStart);
   --#{$page}__sidebar-main--PaddingInlineEnd--glass: var(--#{$page}__sidebar--PaddingInlineEnd);
-  --#{$page}__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
-  --#{$page}__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
-  --#{$page}__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
+  --#{$page}__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--xs) * -1);
+  --#{$page}__sidebar-main--MarginBlockEnd--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
+  --#{$page}__sidebar-main--MarginInlineStart--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
   --#{$page}__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
   --#{$page}__sidebar-main--BackgroundColor--glass: var(--#{$page}__sidebar--BackgroundColor);
   --#{$page}__sidebar-main--BackdropFilter--glass: var(--#{$page}__sidebar--BackdropFilter);
@@ -262,9 +257,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__sidebar-main--xl--MarginBlockStart--glass: 0;
   --#{$page}__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --#{$page}__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
-  --#{$page}__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
-  --#{$page}__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
-  --#{$page}__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
+  --#{$page}__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--gutter--default);
+  --#{$page}__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
+  --#{$page}__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
+  --#{$page}--m-dock__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
+  --#{$page}--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
 
   :where(.pf-v6-theme-glass) & {
     --#{$page}--BackgroundColor: var(--#{$page}--BackgroundColor--glass);
@@ -287,6 +284,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     --#{$page}__sidebar-main--BoxShadow: var(--#{$page}__sidebar-main--BoxShadow--glass);
     --#{$page}__main-container--MarginBlockStart: var(--#{$page}__main-container--MarginBlockStart--glass);
     --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--MaxHeight--glass);
+    --#{$page}--m-dock__main-container--MaxHeight: var(--#{$page}--m-dock__main-container--MaxHeight--glass);
+    --#{$page}--m-dock__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--MarginBlockStart--glass);  
   }
 
   @media (min-width: $pf-v6-global--breakpoint--xl) {
@@ -425,10 +424,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 +439,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 +452,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 +469,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 +566,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 +766,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 +773,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/Sidebar/sidebar.css

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