@patternfly/patternfly 6.5.0-prerelease.32 → 6.5.0-prerelease.34

package/components/Masthead/masthead.css

@@ -51,6 +51,11 @@
   --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
 }
 
+.pf-v6-c-masthead .pf-v6-c-toolbar {
+  --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
+  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
+  --pf-v6-c-toolbar__content--MinWidth: 0;
+}
 .pf-v6-c-masthead {
   --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
   --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
@@ -64,23 +69,6 @@
   --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
   --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
   --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
-  display: grid;
-  grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
-  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
-  row-gap: var(--pf-v6-c-masthead--RowGap);
-  column-gap: var(--pf-v6-c-masthead--ColumnGap);
-  align-items: start;
-  min-width: 0;
-  padding-block-start: var(--pf-v6-c-masthead--PaddingBlockStart, var(--pf-v6-c-masthead--PaddingBlock));
-  padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
-  padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
-  padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
-  background-color: var(--pf-v6-c-masthead--BackgroundColor);
-}
-.pf-v6-c-masthead .pf-v6-c-toolbar {
-  --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
-  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
-  --pf-v6-c-toolbar__content--MinWidth: 0;
 }
 @media screen and (min-width: 48rem) {
   :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
@@ -98,7 +86,33 @@
     --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
   }
 }
+.pf-v6-c-masthead {
+  display: grid;
+  grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
+  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
+  row-gap: var(--pf-v6-c-masthead--RowGap);
+  column-gap: var(--pf-v6-c-masthead--ColumnGap);
+  align-items: start;
+  min-width: 0;
+  padding-block-start: var(--pf-v6-c-masthead--PaddingBlockStart, var(--pf-v6-c-masthead--PaddingBlock));
+  padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
+  padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
+  padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
+  background-color: var(--pf-v6-c-masthead--BackgroundColor);
+}
 .pf-v6-c-masthead.pf-m-docked {
+  --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
+  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
+  --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
+  --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
+  --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
+  --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
+  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
+  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
+  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
+  --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
+  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
+  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
   --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
   --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
   --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
@@ -120,8 +134,8 @@
   backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
 }
 .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   align-self: revert;
 }
 .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {

package/components/Masthead/masthead.scss

@@ -142,6 +142,8 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   background-color: var(--#{$masthead}--BackgroundColor);
 
   &.pf-m-docked {
+    @include pf-v6-c-masthead--m-display-inline;
+
     --#{$masthead}--BackgroundColor: var(--#{$masthead}--m-docked--BackgroundColor);
     --#{$masthead}--GridTemplateRows: var(--#{$masthead}--m-docked--GridTemplateRows);
     --#{$masthead}--PaddingBlockStart: var(--#{$masthead}--m-docked--PaddingBlockStart);
@@ -164,8 +166,8 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
     backdrop-filter: var(--#{$masthead}--m-docked--BackdropFilter);
 
     .#{$masthead}__content {
-      flex-direction: column;
       flex-grow: 1;
+      flex-direction: column;
       align-self: revert;
     }
 
@@ -280,7 +282,11 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
 // stylelint-disable no-duplicate-selectors
 .#{$masthead} {
   @each $breakpoint, $breakpoint-value in $pf-v6-c-masthead--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-display-stack#{$breakpoint-name} {

package/components/Menu/menu.css

@@ -16,6 +16,13 @@
   --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-menu--TransitionDuration: 0s;
   --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  }
+}
+.pf-v6-c-menu {
   --pf-v6-c-menu--m-plain--BoxShadow: none;
   --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
   --pf-v6-c-menu__content--Height: auto;
@@ -95,33 +102,34 @@
   --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
   --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
-  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
-  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
-  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
-  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
-  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
-  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-menu {
-    --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
-  }
 }
 @media (prefers-reduced-motion: no-preference) {
   .pf-v6-c-menu {
     --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
   }
 }
+.pf-v6-c-menu {
+  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
+  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
+  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
+}
 @media (prefers-reduced-motion: no-preference) {
   .pf-v6-c-menu {
     --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   }
 }
+.pf-v6-c-menu {
+  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
+  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
+}
 @media (prefers-reduced-motion: no-preference) {
   .pf-v6-c-menu {
     --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   }
 }
+.pf-v6-c-menu {
+  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
+}
 
 .pf-v6-c-menu__content,
 .pf-v6-c-menu__list-item,
@@ -579,13 +587,14 @@
   --pf-v6-c-check__input--TranslateY: none;
 }
 
-.pf-v6-c-menu__item-toggle-icon {
-  color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
-}
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
   scale: -1 1;
 }
 
+.pf-v6-c-menu__item-toggle-icon {
+  color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
+}
+
 .pf-v6-c-menu__item-icon {
   color: var(--pf-v6-c-menu__item--icon--Color, inherit);
 }

package/components/ModalBox/modal-box.css

@@ -21,6 +21,13 @@
   --pf-v6-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
   --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
   --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+}
+@media (min-width: 75rem) {
+  .pf-v6-c-modal-box {
+    --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
+  }
+}
+.pf-v6-c-modal-box {
   --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -52,11 +59,6 @@
   --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
 }
-@media (min-width: 75rem) {
-  .pf-v6-c-modal-box {
-    --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
-  }
-}
 
 .pf-v6-c-modal-box {
   position: relative;
@@ -118,8 +120,8 @@
 
 .pf-v6-c-modal-box__header {
   display: flex;
-  flex-direction: column;
   flex-shrink: 0;
+  flex-direction: column;
   gap: var(--pf-v6-c-modal-box__header--Gap);
   padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
@@ -136,8 +138,8 @@
 
 .pf-v6-c-modal-box__header-main {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   gap: var(--pf-v6-c-modal-box__header-main--Gap);
   min-width: 0;
   padding-block-start: var(--pf-v6-c-modal-box__header-main--PaddingBlockStart);

package/components/ModalBox/modal-box.scss

@@ -161,8 +161,8 @@
 
 .#{$modal-box}__header {
   display: flex;
-  flex-direction: column;
   flex-shrink: 0;
+  flex-direction: column;
   gap: var(--#{$modal-box}__header--Gap);
   padding-block-start: var(--#{$modal-box}__header--PaddingBlockStart);
   padding-block-end: var(--#{$modal-box}__header--PaddingBlockEnd);
@@ -181,8 +181,8 @@
 
 .#{$modal-box}__header-main {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   gap: var(--#{$modal-box}__header-main--Gap);
   min-width: 0;
   padding-block-start: var(--#{$modal-box}__header-main--PaddingBlockStart);

package/components/Nav/nav.css

@@ -73,6 +73,15 @@
   --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-nav__subnav--TranslateY: 0;
   --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-nav {
+    --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
+  }
+}
+.pf-v6-c-nav {
   --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -108,13 +117,6 @@
   --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-nav {
-    --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
-    --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
-    --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
-  }
-}
 
 .pf-v6-c-nav,
 .pf-v6-c-nav__section,
@@ -162,6 +164,10 @@
   position: relative;
   align-self: center;
   min-width: 1lh;
+  text-align: center;
+}
+.pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
+  display: none;
 }
 .pf-v6-c-nav .pf-v6-c-menu {
   --pf-v6-c-menu--MinWidth: 100%;
@@ -395,12 +401,14 @@
   scroll-snap-type: var(--pf-v6-c-nav__list--ScrollSnapType);
   scroll-padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
   -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list::-webkit-scrollbar {
   display: none;
 }
+.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list {
+  scrollbar-width: none;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}
 .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link {
   outline-offset: var(--pf-v6-c-nav--OutlineOffset);
 }

package/components/Nav/nav.scss

@@ -204,6 +204,11 @@
       position: relative;
       align-self: center;
       min-width: 1lh;
+      text-align: center;
+    }
+
+    .#{$nav}__link-text {
+      display: none;
     }
   }
 

package/components/NotificationDrawer/notification-drawer.css

@@ -191,9 +191,9 @@
 }
 .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-notification-drawer__list-item-header-title--max-lines);
-  overflow: hidden;
 }
 
 .pf-v6-c-notification-drawer__list-item-action {
@@ -247,9 +247,9 @@
 
 .pf-v6-c-notification-drawer__group-toggle-title {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
-  overflow: hidden;
   flex: 1;
   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);
@@ -262,15 +262,15 @@
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-notification-drawer__group-toggle-icon {
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
   color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
   transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
-  scale: -1 1;
-}
-
 .pf-v6-c-notification-drawer__group.pf-m-expanded .pf-v6-c-notification-drawer__group-toggle-icon {
   transform: rotate(var(--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
 }

package/components/Page/page.css

@@ -25,6 +25,15 @@
   --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
   --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-page {
+    --pf-v6-c-page__sidebar--Opacity: 1;
+    --pf-v6-c-page__sidebar--TransitionProperty: transform;
+    --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
+  }
+}
+.pf-v6-c-page {
   --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -40,6 +49,15 @@
   --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
+}
+@media screen and (min-width: 75rem) {
+  .pf-v6-c-page {
+    --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
+    --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
+    --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
+  }
+}
+.pf-v6-c-page {
   --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-page__main-container--GridArea: main;
   --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
@@ -62,6 +80,17 @@
   --pf-v6-c-page__main-container--xs--BorderBlockEndWidth: 0;
   --pf-v6-c-page__main-container--xs--BorderInlineStartWidth: 0px;
   --pf-v6-c-page__main-container--xs--BorderInlineEndWidth: 0px;
+}
+@media screen and (max-width: calc(48rem - 1px)) {
+  .pf-v6-c-page {
+    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
+    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
+    --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
+    --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
+    --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
+  }
+}
+.pf-v6-c-page {
   --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -114,29 +143,6 @@
   --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);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-page {
-    --pf-v6-c-page__sidebar--Opacity: 1;
-    --pf-v6-c-page__sidebar--TransitionProperty: transform;
-    --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
-  }
-}
-@media screen and (min-width: 75rem) {
-  .pf-v6-c-page {
-    --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
-    --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
-    --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
-  }
-}
-@media screen and (max-width: calc(48rem - 1px)) {
-  .pf-v6-c-page {
-    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
-    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
-    --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
-    --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
-    --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
-  }
-}
 
 .pf-v6-c-page {
   display: grid;
@@ -211,15 +217,15 @@
   }
 }
 
-.pf-v6-c-page > .pf-v6-c-masthead {
-  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
-  grid-area: header;
-}
 @media (min-width: 75rem) {
   .pf-v6-c-page > .pf-v6-c-masthead {
     --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns);
   }
 }
+.pf-v6-c-page > .pf-v6-c-masthead {
+  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
+  grid-area: header;
+}
 
 .pf-v6-c-page__dock {
   z-index: var(--pf-v6-c-page__dock--ZIndex);
@@ -336,8 +342,8 @@
 .pf-v6-c-page__main-group,
 .pf-v6-c-page__main-subnav {
   display: flex;
-  flex-direction: column;
   flex-shrink: 0;
+  flex-direction: column;
 }
 .pf-v6-c-page__main-breadcrumb.pf-m-overflow-scroll,
 .pf-v6-c-page__main-tabs.pf-m-overflow-scroll,
@@ -581,8 +587,8 @@
 .pf-v6-c-page__main-drawer,
 .pf-v6-c-page__main-group {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .pf-v6-c-page__main {

package/components/Page/page.scss

@@ -378,8 +378,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 .#{$page}__main-group,
 .#{$page}__main-subnav {
   display: flex;
-  flex-direction: column;
   flex-shrink: 0;
+  flex-direction: column;
 
   &.pf-m-overflow-scroll {
     position: relative;
@@ -401,7 +401,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   // Responsive height modifiers for sticky top/bottom
   @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint}-height;
+    }
 
     @include pf-v6-apply-height-breakpoint($breakpoint) {
 
@@ -483,8 +487,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 .#{$page}__main-drawer,
 .#{$page}__main-group {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .#{$page}__main {
@@ -516,7 +520,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   // Responsive height modifiers for sticky top/bottom
   @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint}-height;
+    }
 
     @include pf-v6-apply-height-breakpoint($breakpoint) {
       &.pf-m-sticky-top#{$breakpoint-name},
@@ -564,7 +572,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   @each $breakpoint, $breakpoint-value in $pf-page-v6--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       // stylelint-disable max-nesting-depth

package/components/Pagination/pagination.scss

@@ -230,7 +230,11 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 // stylelint-disable no-duplicate-selectors
 .#{$pagination} {
   @each $breakpoint, $breakpoint-value in $pf-v6-c-pagination--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-display-summary#{$breakpoint-name} {

package/components/ProgressStepper/progress-stepper.scss

@@ -430,7 +430,11 @@ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 // stylelint-disable no-duplicate-selectors
 .#{$progress-stepper} {
   @each $breakpoint, $breakpoint-value in $pf-v6-c-progress-stepper--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-horizontal#{$breakpoint-name} {

package/components/Sidebar/sidebar.css

@@ -143,8 +143,8 @@
   position: var(--pf-v6-c-sidebar__panel--Position);
   inset-block-start: var(--pf-v6-c-sidebar__panel--InsetBlockStart);
   z-index: var(--pf-v6-c-sidebar__panel--ZIndex);
-  flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
   flex-shrink: 0;
+  flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
   order: var(--pf-v6-c-sidebar__panel--Order);
   padding-block-start: var(--pf-v6-c-sidebar__panel--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-sidebar__panel--PaddingBlockEnd);

package/components/Sidebar/sidebar.scss

@@ -177,8 +177,8 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   position: var(--#{$sidebar}__panel--Position);
   inset-block-start: var(--#{$sidebar}__panel--InsetBlockStart);
   z-index: var(--#{$sidebar}__panel--ZIndex);
-  flex-basis: var(--#{$sidebar}__panel--FlexBasis);
   flex-shrink: 0;
+  flex-basis: var(--#{$sidebar}__panel--FlexBasis);
   order: var(--#{$sidebar}__panel--Order);
   padding-block-start: var(--#{$sidebar}__panel--PaddingBlockStart);
   padding-block-end: var(--#{$sidebar}__panel--PaddingBlockEnd);
@@ -253,7 +253,11 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
 // Responsive width modifiers
 @each $breakpoint, $breakpoint-value in $pf-v6-c-sidebar--breakpoint-map--width {
-  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+  $breakpoint-name: "";
+
+  @if $breakpoint != "base" {
+    $breakpoint-name: -on-#{$breakpoint};
+  }
 
   @include pf-v6-apply-breakpoint($breakpoint) {
     @each $width-value in $pf-v6-c-sidebar__panel--list--width {
@@ -261,7 +265,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
         @if $width-value == "default" {
           --#{$sidebar}__panel--FlexBasis: var(--#{$sidebar}__panel--FlexBasis--base);
         } @else {
-          --#{$sidebar}__panel--FlexBasis: #{percentage(math.div($width-value, 100))};
+          --#{$sidebar}__panel--FlexBasis: #{math.percentage(math.div($width-value, 100))};
         }
       }
     }