@patternfly/patternfly 6.0.0-alpha.107 → 6.0.0-alpha.109

package/components/Masthead/masthead.scss

@@ -1,5 +1,5 @@
-$pf-v5-c-masthead--breakpoint-map: build-breakpoint-map();
-$pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-masthead--breakpoint-map: build-breakpoint-map();
+$pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
 :where(:root),
 :where(.#{$masthead}) {
@@ -48,7 +48,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
 }
 
 // * Masthead display stack
-@mixin pf-v5-c-masthead--m-display-stack {
+@mixin pf-v6-c-masthead--m-display-stack {
   --#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-stack--GridTemplateColumns);
   --#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-stack__main--GridColumn);
   --#{$masthead}__main--Order: var(--#{$masthead}--m-display-stack__main--Order);
@@ -59,7 +59,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
 }
 
 // * Masthead display inline
-@mixin pf-v5-c-masthead--m-display-inline {
+@mixin pf-v6-c-masthead--m-display-inline {
   --#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-inline--GridTemplateColumns);
   --#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-inline__main--GridColumn);
   --#{$masthead}__main--Order: var(--#{$masthead}--m-display-inline__main--Order);
@@ -79,12 +79,12 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   }
 
   // Set layout to stack by default
-  @include pf-v5-c-masthead--m-display-stack;
+  @include pf-v6-c-masthead--m-display-stack;
 
   // Set layout to inline at medium breakpoint
   :where(:not(.pf-m-resize-observer)) & {
-    @media screen and (min-width: $pf-v5-global--breakpoint--md) {
-      @include pf-v5-c-masthead--m-display-inline;
+    @media screen and (min-width: $pf-v6-global--breakpoint--md) {
+      @include pf-v6-c-masthead--m-display-inline;
     }
   }
 
@@ -117,16 +117,16 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
 
   // - Masthead display stack
   &.pf-m-display-stack {
-    @include pf-v5-c-masthead--m-display-stack;
+    @include pf-v6-c-masthead--m-display-stack;
   }
 
   // - Masthead display inline
   &.pf-m-display-inline {
-    @include pf-v5-c-masthead--m-display-inline;
+    @include pf-v6-c-masthead--m-display-inline;
   }
 
   // - Masthead insets
-  @each $inset, $inset-value in $pf-v5-c-masthead--inset-map {
+  @each $inset, $inset-value in $pf-v6-c-masthead--inset-map {
     &.pf-m-inset-#{$inset} {
       padding-inline-start: #{$inset-value};
       padding-inline-end: #{$inset-value};
@@ -198,20 +198,20 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
 // TODO: make this an opt in/out
 // stylelint-disable no-duplicate-selectors
 .#{$masthead} {
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-masthead--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-c-masthead--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-display-stack#{$breakpoint-name} {
-        @include pf-v5-c-masthead--m-display-stack;
+        @include pf-v6-c-masthead--m-display-stack;
       }
 
       &.pf-m-display-inline#{$breakpoint-name} {
-        @include pf-v5-c-masthead--m-display-inline;
+        @include pf-v6-c-masthead--m-display-inline;
       }
     }
 
-    @each $inset, $inset-value in $pf-v5-c-masthead--inset-map {
+    @each $inset, $inset-value in $pf-v6-c-masthead--inset-map {
       &.pf-m-inset-#{$inset} {
         padding-inline-start: #{$inset-value};
         padding-inline-end: #{$inset-value};

package/components/Menu/menu.css

@@ -1,61 +1,61 @@
 .pf-v6-c-menu__item, .pf-v6-c-menu__list,
 .pf-v6-c-menu__group {
-  --pf-v5-hidden-visible--hidden--Display: none;
-  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
-  display: var(--pf-v5-hidden-visible--Display);
+  --pf-v6-hidden-visible--hidden--Display: none;
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  display: var(--pf-v6-hidden-visible--Display);
 }
 .pf-m-hidden.pf-v6-c-menu__item, .pf-m-hidden.pf-v6-c-menu__list,
 .pf-m-hidden.pf-v6-c-menu__group {
-  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
 }
 @media screen and (min-width: 576px) {
   .pf-m-hidden-on-sm.pf-v6-c-menu__item, .pf-m-hidden-on-sm.pf-v6-c-menu__list,
   .pf-m-hidden-on-sm.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-sm.pf-v6-c-menu__item, .pf-m-visible-on-sm.pf-v6-c-menu__list,
   .pf-m-visible-on-sm.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 768px) {
   .pf-m-hidden-on-md.pf-v6-c-menu__item, .pf-m-hidden-on-md.pf-v6-c-menu__list,
   .pf-m-hidden-on-md.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-md.pf-v6-c-menu__item, .pf-m-visible-on-md.pf-v6-c-menu__list,
   .pf-m-visible-on-md.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 992px) {
   .pf-m-hidden-on-lg.pf-v6-c-menu__item, .pf-m-hidden-on-lg.pf-v6-c-menu__list,
   .pf-m-hidden-on-lg.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-lg.pf-v6-c-menu__item, .pf-m-visible-on-lg.pf-v6-c-menu__list,
   .pf-m-visible-on-lg.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 1200px) {
   .pf-m-hidden-on-xl.pf-v6-c-menu__item, .pf-m-hidden-on-xl.pf-v6-c-menu__list,
   .pf-m-hidden-on-xl.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-xl.pf-v6-c-menu__item, .pf-m-visible-on-xl.pf-v6-c-menu__list,
   .pf-m-visible-on-xl.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 1450px) {
   .pf-m-hidden-on-2xl.pf-v6-c-menu__item, .pf-m-hidden-on-2xl.pf-v6-c-menu__list,
   .pf-m-hidden-on-2xl.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-2xl.pf-v6-c-menu__item, .pf-m-visible-on-2xl.pf-v6-c-menu__list,
   .pf-m-visible-on-2xl.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 
@@ -164,7 +164,7 @@
 
 .pf-v6-c-menu__list,
 .pf-v6-c-menu__group {
-  --pf-v5-hidden-visible--visible--Display: grid;
+  --pf-v6-hidden-visible--visible--Display: grid;
 }
 
 .pf-v6-c-menu__list,
@@ -425,7 +425,7 @@
   background-color: var(--pf-v6-c-menu__item--BackgroundColor);
   border: 0;
   outline-offset: var(--pf-v6-c-menu--OutlineOffset);
-  --pf-v5-hidden-visible--visible--Display: flex;
+  --pf-v6-hidden-visible--visible--Display: flex;
 }
 :where(label).pf-v6-c-menu__item {
   cursor: pointer;
@@ -476,7 +476,7 @@
 }
 
 .pf-v6-c-menu__item-check .pf-v6-c-check {
-  --pf-v5-c-check__input--TranslateY: none;
+  --pf-v6-c-check__input--TranslateY: none;
 }
 
 .pf-v6-c-menu__item-toggle-icon {

package/components/Menu/menu.scss

@@ -152,7 +152,7 @@
 // - Menu shared hidden visible
 .#{$menu}__list,
 .#{$menu}__group {
-  @include pf-v5-hidden-visible(grid);
+  @include pf-v6-hidden-visible(grid);
 }
 
 // - Menu shared position relative
@@ -259,10 +259,10 @@
       // target first list in menu
       > .#{$menu}__content > .#{$menu}__list,
       > .#{$menu}__list {
-        @include pf-v5-bidirectional-style(
+        @include pf-v6-bidirectional-style(
           $prop: transform,
           $ltr-val: translateX(-100%),
-          $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+          $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)})
         );
       }
       // stylelint-enable
@@ -279,10 +279,10 @@
 
       // stylelint-disable selector-max-class
       &.pf-m-drilled-in {
-        @include pf-v5-bidirectional-style(
+        @include pf-v6-bidirectional-style(
           $prop: transform,
           $ltr-val: translateX(-100%),
-          $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+          $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)})
         );
       }
       // stylelint-enable
@@ -505,7 +505,7 @@
   border: 0;
   outline-offset: var(--#{$menu}--OutlineOffset);
 
-  @include pf-v5-hidden-visible(flex);
+  @include pf-v6-hidden-visible(flex);
 
   @at-root :where(label)#{&} {
     cursor: pointer;
@@ -541,7 +541,7 @@
 
 // - Menu item text
 .#{$menu}__item-text {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   flex-grow: 1;
 }
@@ -566,12 +566,12 @@
 
 // - Menu check
 .#{$menu}__item-check .#{$check} {
-  --pf-v5-c-check__input--TranslateY: none;
+  --#{$check}__input--TranslateY: none;
 }
 
 // - Menu toggle icon
 .#{$menu}__item-toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   color: var(--#{$menu}__item-toggle-icon--Color, inherit);
 }

package/components/MenuToggle/menu-toggle.scss

@@ -499,7 +499,7 @@
 }
 
 .#{$menu-toggle}__text {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   min-width: 0;
 }

package/components/ModalBox/modal-box.scss

@@ -24,7 +24,7 @@
   --#{$modal-box}--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
   --#{$modal-box}--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
 
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$modal-box}--m-align-top--spacer: var(--#{$modal-box}--m-align-top--xl--spacer);
   }
 
@@ -182,7 +182,7 @@
 
 .#{$modal-box}__title,
 .#{$modal-box}__title-text {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 }
 
 .#{$modal-box}__title {
@@ -239,7 +239,7 @@
   > .#{$button}:not(:last-child) {
     margin-inline-end: var(--#{$modal-box}__footer--c-button--MarginRight);
 
-    @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
       --#{$modal-box}__footer--c-button--MarginRight: var(--#{$modal-box}__footer--c-button--sm--MarginRight);
     }
   }

package/components/Nav/nav.scss

@@ -249,7 +249,7 @@
   display: inline-block;
   transform: rotate(var(--#{$nav}__item__toggle-icon--Rotate));
 
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   .#{$nav}__item:where(.pf-m-flyout) & {
     --#{$nav}__item--m-expanded__toggle-icon--Rotate: 0;
@@ -297,7 +297,7 @@
     outline-offset: var(--#{$nav}--OutlineOffset);
 
     > * {
-      @include pf-v5-mirror-inline-on-rtl;
+      @include pf-v6-mirror-inline-on-rtl;
     }
   }
 }
@@ -328,7 +328,7 @@
     scroll-padding-inline-end: var(--#{$nav}--m-horizontal__list--PaddingInlineEnd);
     -webkit-overflow-scrolling: touch;
 
-    @include pf-v5-overflow-hide-scroll;
+    @include pf-v6-overflow-hide-scroll;
   }
 
   .#{$nav}__link {

package/components/NotificationDrawer/notification-drawer.scss

@@ -237,7 +237,7 @@
   word-break: break-word;
 
   &.pf-m-truncate {
-    @include pf-v5-line-clamp("var(--#{$notification-drawer}__list-item-header-title--max-lines)");
+    @include pf-v6-line-clamp("var(--#{$notification-drawer}__list-item-header-title--max-lines)");
   }
 }
 
@@ -288,7 +288,7 @@
 }
 
 .#{$notification-drawer}__group-toggle-title {
-  @include pf-v5-line-clamp("var(--#{$notification-drawer}__group-toggle-title--max-lines)");
+  @include pf-v6-line-clamp("var(--#{$notification-drawer}__group-toggle-title--max-lines)");
 
   flex: 1;
   margin-inline-end: var(--#{$notification-drawer}__group-toggle-title--MarginRight);
@@ -303,7 +303,7 @@
 }
 
 .#{$notification-drawer}__group-toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   margin-inline-end: var(--#{$notification-drawer}__group-toggle-icon--MarginRight);
   color: var(--#{$notification-drawer}__group-toggle-icon--Color);

package/components/NumberInput/number-input.scss

@@ -30,7 +30,7 @@
     > :is(input) {
       text-align: end;
 
-      @extend %pf-v5-remove-num-arrows;
+      @extend %pf-v6-remove-num-arrows;
     }
   }
 }

package/components/OptionsMenu/options-menu.scss

@@ -217,7 +217,7 @@
 }
 
 .#{$options-menu}__toggle-text {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   flex: 1 1 auto;
   text-align: start;
@@ -327,6 +327,6 @@
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/options-menu";
 
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-options-menu;
+@include pf-v6-theme-dark {
+  @include pf-v6-theme-dark-options-menu;
 }

package/components/OptionsMenu/themes/dark/options-menu.scss

@@ -1,6 +1,6 @@
 @import "../../../../sass-utilities/themes/dark/all";
 
-@mixin pf-v5-theme-dark-options-menu() {
+@mixin pf-v6-theme-dark-options-menu() {
   .#{$options-menu} {
     --#{$options-menu}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
     --#{$options-menu}__toggle--BorderTopColor: transparent;

package/components/Page/page.css

@@ -14,51 +14,51 @@
 }
 
 .pf-v6-c-page__header-tools-item, .pf-v6-c-page__header-tools-group {
-  --pf-v5-hidden-visible--hidden--Display: none;
-  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
-  display: var(--pf-v5-hidden-visible--Display);
+  --pf-v6-hidden-visible--hidden--Display: none;
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  display: var(--pf-v6-hidden-visible--Display);
 }
 .pf-m-hidden.pf-v6-c-page__header-tools-item, .pf-m-hidden.pf-v6-c-page__header-tools-group {
-  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
 }
 @media screen and (min-width: 576px) {
   .pf-m-hidden-on-sm.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-sm.pf-v6-c-page__header-tools-group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-sm.pf-v6-c-page__header-tools-item, .pf-m-visible-on-sm.pf-v6-c-page__header-tools-group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 768px) {
   .pf-m-hidden-on-md.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-md.pf-v6-c-page__header-tools-group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-md.pf-v6-c-page__header-tools-item, .pf-m-visible-on-md.pf-v6-c-page__header-tools-group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 992px) {
   .pf-m-hidden-on-lg.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-lg.pf-v6-c-page__header-tools-group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-lg.pf-v6-c-page__header-tools-item, .pf-m-visible-on-lg.pf-v6-c-page__header-tools-group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 1200px) {
   .pf-m-hidden-on-xl.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-xl.pf-v6-c-page__header-tools-group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-xl.pf-v6-c-page__header-tools-item, .pf-m-visible-on-xl.pf-v6-c-page__header-tools-group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 1450px) {
   .pf-m-hidden-on-2xl.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-2xl.pf-v6-c-page__header-tools-group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-2xl.pf-v6-c-page__header-tools-item, .pf-m-visible-on-2xl.pf-v6-c-page__header-tools-group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 
@@ -306,7 +306,7 @@
 }
 
 .pf-v6-c-page__header-tools-group {
-  --pf-v5-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-group--Display);
+  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-group--Display);
   align-items: center;
 }
 .pf-v6-c-page__header-tools-group + .pf-v6-c-page__header-tools-group {
@@ -314,7 +314,7 @@
 }
 
 .pf-v6-c-page__header-tools-item {
-  --pf-v5-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-item--Display);
+  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-item--Display);
 }
 
 .pf-v6-c-page__sidebar {

package/components/Page/page.scss

@@ -19,7 +19,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__header-brand--xl--PaddingRight: var(--pf-t--global--spacer--xl);
   --#{$page}__header-brand--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
 
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$page}__header-brand--PaddingLeft: var(--#{$page}__header-brand--xl--PaddingLeft);
     --#{$page}--inset: var(--#{$page}--xl--inset);
   }
@@ -42,7 +42,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__header-nav--xl--PaddingRight: var(--pf-t--global--spacer--xl);
   --#{$page}__header-nav--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$page}__header-nav--BackgroundColor: var(--#{$page}__header-nav--xl--BackgroundColor);
     --#{$page}__header-nav--PaddingRight: var(--#{$page}__header-nav--xl--PaddingRight);
     --#{$page}__header-nav--PaddingLeft: var(--#{$page}__header-nav--xl--PaddingLeft);
@@ -60,7 +60,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__header-tools--c-button--m-selected--before--Width: auto;
   --#{$page}__header-tools--c-button--m-selected--before--Height: auto;
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$page}__header-tools--MarginRight: var(--#{$page}__header-tools--xl--MarginRight);
   }
 
@@ -100,7 +100,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
   --#{$page}__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--xl--TranslateX);
   }
 
@@ -189,7 +189,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   max-height: 100%;
   background-color: var(--#{$page}--BackgroundColor);
 
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     grid-template-areas:
       "header header"
       "sidebar main";
@@ -217,7 +217,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     align-items: center;
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     grid-template-columns: auto 1fr auto;
   }
 
@@ -232,7 +232,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   grid-column: 1 / 2;
   padding-inline-start: var(--#{$page}__header-brand--PaddingLeft);
 
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     padding-inline-end: var(--#{$page}__header-brand--xl--PaddingRight); // set padding right here to allow mobile view to accomodate tools
   }
 }
@@ -272,7 +272,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   padding-inline-end: var(--#{$page}__header-nav--PaddingRight);
   background-color: var(--#{$page}__header-nav--BackgroundColor);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     grid-row: 1 / 2;
     grid-column: 2 / 3;
   }
@@ -292,13 +292,13 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     margin-inline-start: var(--#{$page}__header-tools--c-avatar--MarginLeft);
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     grid-column: 3 / 4;
   }
 }
 
 .#{$page}__header-tools-group {
-  @include pf-v5-hidden-visible(var(--#{$page}__header-tools-group--Display));
+  @include pf-v6-hidden-visible(var(--#{$page}__header-tools-group--Display));
 
   align-items: center;
 
@@ -308,7 +308,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 .#{$page}__header-tools-item {
-  @include pf-v5-hidden-visible(var(--#{$page}__header-tools-item--Display));
+  @include pf-v6-hidden-visible(var(--#{$page}__header-tools-item--Display));
 }
 
 // Sidebar
@@ -330,10 +330,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   background-color: var(--#{$page}__sidebar--BackgroundColor);
   transition: var(--#{$page}__sidebar--Transition);
 
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: transform,
     $ltr-val: translateX(var(--#{$page}__sidebar--TranslateX)) translateZ(var(--#{$page}__sidebar--TranslateZ)),
-    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$page}__sidebar--TranslateX))}) translateZ(var(--#{$page}__sidebar--TranslateZ))
+    $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$page}__sidebar--TranslateX))}) translateZ(var(--#{$page}__sidebar--TranslateZ))
   );
 
   // Mobile
@@ -343,7 +343,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
     box-shadow: var(--#{$page}__sidebar--BoxShadow);
 
-    @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
       --#{$page}__sidebar--BoxShadow: none;
     }
   }
@@ -393,7 +393,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
       --#{$context-selector}__toggle--BorderLeftColor: transparent;
       --#{$context-selector}__menu--Top: 100%;
 
-      @include pf-v5-t-dark;
+      @include pf-v6-t-dark;
 
       width: 100%;
     }
@@ -472,7 +472,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   @each $breakpoint, $breakpoint-value in $pf-page-v5--height-breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
 
-    @include pf-v5-apply-height-breakpoint($breakpoint) {
+    @include pf-v6-apply-height-breakpoint($breakpoint) {
 
       &.pf-m-sticky-top#{$breakpoint-name} {
         position: sticky;
@@ -535,7 +535,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   @each $breakpoint, $breakpoint-value in $pf-page-v5--height-breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
 
-    @include pf-v5-apply-height-breakpoint($breakpoint) {
+    @include pf-v6-apply-height-breakpoint($breakpoint) {
       &.pf-m-sticky-top#{$breakpoint-name},
       .#{$page}__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
         padding-block-end: var(--#{$page}__main-nav--m-sticky-top--PaddingBottom);
@@ -567,7 +567,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   @each $breakpoint, $breakpoint-value in $pf-page-v5--height-breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
 
-    @include pf-v5-apply-height-breakpoint($breakpoint) {
+    @include pf-v6-apply-height-breakpoint($breakpoint) {
       &.pf-m-sticky-top#{$breakpoint-name},
       .#{$page}__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
         --#{$page}__main-breadcrumb--PaddingBottom: var(--#{$page}__main-breadcrumb--m-sticky-top--PaddingBottom);
@@ -620,7 +620,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   @each $breakpoint, $breakpoint-value in $pf-page-v5--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       // stylelint-disable max-nesting-depth
       &.pf-m-padding#{$breakpoint-name} {
         padding-block-start: var(--#{$page}__main-section--PaddingTop);