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

package/components/Table/table-grid.scss

@@ -5,25 +5,25 @@
   }
 
   .pf-m-grid-md.#{$table} {
-    @media screen and (max-width: $pf-v5-global--breakpoint--md) {
+    @media screen and (max-width: $pf-v6-global--breakpoint--md) {
       @content;
     }
   }
 
   .pf-m-grid-lg.#{$table} {
-    @media screen and (max-width: $pf-v5-global--breakpoint--lg) {
+    @media screen and (max-width: $pf-v6-global--breakpoint--lg) {
       @content;
     }
   }
 
   .pf-m-grid-xl.#{$table} {
-    @media screen and (max-width: $pf-v5-global--breakpoint--xl) {
+    @media screen and (max-width: $pf-v6-global--breakpoint--xl) {
       @content;
     }
   }
 
   .pf-m-grid-2xl.#{$table} {
-    @media screen and (max-width: $pf-v5-global--breakpoint--2xl) {
+    @media screen and (max-width: $pf-v6-global--breakpoint--2xl) {
       @content;
     }
   }
@@ -267,7 +267,7 @@
 
   // - Table grid th td data label
   :where(.#{$table}__th, .#{$table}__td)[data-label] {
-    // default pf-v5-hidden-visible() mixin is called in table.scss. redefining variable here
+    // default pf-v6-hidden-visible() mixin is called in table.scss. redefining variable here
     --#{$table}--cell--hidden-visible--Display: var(--#{$table}--m-grid--cell--hidden-visible--Display);
 
     grid-column: 1;
@@ -526,7 +526,7 @@
     text-align: end;
 
     // @smallest breakpoint
-    @media screen and (max-width: $pf-v5-global--breakpoint--sm) {
+    @media screen and (max-width: $pf-v6-global--breakpoint--sm) {
       grid-row-start: 1;
       grid-column-start: 2;
       margin-inline-start: 0;

package/components/Table/table-tree-view.scss

@@ -69,10 +69,10 @@ $pf-v6-c-tree-view--MaxDepth: 10;
   cursor: pointer;
 
   > .#{$table}__toggle {
-    @include pf-v5-bidirectional-style (
+    @include pf-v6-bidirectional-style (
       $prop: 'transform',
       $ltr-val: translateX(var(--#{$table}--m-tree-view__toggle--TranslateX)),
-      $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$table}--m-tree-view__toggle--TranslateX))})
+      $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$table}--m-tree-view__toggle--TranslateX))})
     );
 
     position: var(--#{$table}--m-tree-view__toggle--Position);
@@ -125,25 +125,25 @@ $pf-v6-c-tree-view--MaxDepth: 10;
   }
 
   .pf-m-tree-view-grid-md.#{$table} {
-    @media screen and (max-width: $pf-v5-global--breakpoint--md) {
+    @media screen and (max-width: $pf-v6-global--breakpoint--md) {
       @content;
     }
   }
 
   .pf-m-tree-view-grid-lg.#{$table} {
-    @media screen and (max-width: $pf-v5-global--breakpoint--lg) {
+    @media screen and (max-width: $pf-v6-global--breakpoint--lg) {
       @content;
     }
   }
 
   .pf-m-tree-view-grid-xl.#{$table} {
-    @media screen and (max-width: $pf-v5-global--breakpoint--xl) {
+    @media screen and (max-width: $pf-v6-global--breakpoint--xl) {
       @content;
     }
   }
 
   .pf-m-tree-view-grid-2xl.#{$table} {
-    @media screen and (max-width: $pf-v5-global--breakpoint--2xl) {
+    @media screen and (max-width: $pf-v6-global--breakpoint--2xl) {
       @content;
     }
   }

package/components/Table/table.css

@@ -1,49 +1,49 @@
 .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
-  --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-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden:where(th, td) {
-  --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-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-sm:where(th, td) {
-    --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-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-sm:where(th, td) {
-    --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-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-md:where(th, td) {
-    --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-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-md:where(th, td) {
-    --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-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-lg:where(th, td) {
-    --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-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-lg:where(th, td) {
-    --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-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-xl:where(th, td) {
-    --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-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-xl:where(th, td) {
-    --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-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-hidden-on-2xl:where(th, td) {
-    --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-v6-c-table tr:where(.pf-v6-c-table__tr) > .pf-m-visible-on-2xl:where(th, td) {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 
@@ -238,7 +238,7 @@
   opacity: var(--pf-v6-c-table__tr--m-ghost-row--Opacity);
 }
 .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
-  --pf-v5-hidden-visible--visible--Display: var(--pf-v6-c-table--cell--hidden-visible--Display);
+  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-table--cell--hidden-visible--Display);
   position: relative;
   width: var(--pf-v6-c-table--cell--Width);
   min-width: var(--pf-v6-c-table--cell--MinWidth);

package/components/Table/table.scss

@@ -314,7 +314,7 @@
 
   // - Table th - Table td
   tr:where(.#{$table}__tr) > :where(th, td) {
-    @include pf-v5-hidden-visible(var(--#{$table}--cell--hidden-visible--Display));
+    @include pf-v6-hidden-visible(var(--#{$table}--cell--hidden-visible--Display));
 
     position: relative;
     width: var(--#{$table}--cell--Width);
@@ -724,7 +724,7 @@
 
 
   .#{$table}__toggle-icon {
-    @include pf-v5-mirror-inline-on-rtl;
+    @include pf-v6-mirror-inline-on-rtl;
 
     transition: var(--#{$table}__toggle--c-button__toggle-icon--Transition);
     transform: rotate(var(--#{$table}__toggle--c-button__toggle-icon--Rotate));

package/components/Tabs/tabs.scss

@@ -1,6 +1,6 @@
 // @debug $tabs; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-tabs--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
-$pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-tabs--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
 :where(:root),
 :where(.#{$tabs}) {
@@ -374,10 +374,10 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
       overflow-wrap: break-word;
     }
 
-    @each $breakpoint, $breakpoint-value in $pf-v5-c-tabs--breakpoint-map {
+    @each $breakpoint, $breakpoint-value in $pf-v6-c-tabs--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-expandable#{$breakpoint-name} {
           --#{$tabs}__list--Display: none;
@@ -490,7 +490,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 }
 
 .#{$tabs}__toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
   color: var(--#{$tabs}__toggle-icon--Color);
@@ -506,7 +506,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
 // Tab list
 .#{$tabs}__list {
-  @include pf-v5-overflow-hide-scroll;
+  @include pf-v6-overflow-hide-scroll;
 
   position: relative;
   display: var(--#{$tabs}__list--Display);
@@ -677,7 +677,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 }
 
 .#{$tabs}__link-toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   align-self: end;
   font-size: var(--#{$tabs}__link-toggle-icon--FontSize);
@@ -750,11 +750,11 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
 // stylelint-disable no-duplicate-selectors, max-nesting-depth
 .#{$tabs} {
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-tabs--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-c-tabs--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
-      @each $spacer, $spacer-value in $pf-v5-c-tabs--spacer-map {
+    @include pf-v6-apply-breakpoint($breakpoint) {
+      @each $spacer, $spacer-value in $pf-v6-c-tabs--spacer-map {
         &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
           --#{$tabs}--inset: #{$spacer-value};
           --#{$tabs}--m-vertical--inset: #{$spacer-value};

package/components/TextInputGroup/text-input-group.scss

@@ -133,7 +133,7 @@
 }
 
 .#{$text-input-group}__text-input {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   position: relative;
   width: 100%;

package/components/ToggleGroup/toggle-group.css

@@ -109,11 +109,11 @@
   pointer-events: none;
 }
 
-.pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
+.pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected) {
   --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
 }
 
-.pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
+.pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
   --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
 }
 

package/components/ToggleGroup/toggle-group.scss

@@ -146,12 +146,12 @@
 }
 
 // For consecutive selected items, turn the left border back to what it was
-.pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
+.#{$toggle-group}__item:has(.pf-m-selected) + .#{$toggle-group}__item:has(.pf-m-selected) {
   --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor);
 }
     
 // For consecutive disabled items, turn the left border back to what it was
-.pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
+.#{$toggle-group}__item:has(:disabled, .pf-m-disabled) + .#{$toggle-group}__item:has(:disabled, .pf-m-disabled) {
   --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor);
 }
 

package/components/Toolbar/toolbar.css

@@ -3,73 +3,73 @@
 .pf-v6-c-toolbar__item,
 .pf-v6-c-toolbar__group.pf-m-chip-group-container,
 .pf-v6-c-toolbar__group.pf-m-chip-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-toolbar__content-section,
 .pf-m-hidden.pf-v6-c-toolbar__group,
 .pf-m-hidden.pf-v6-c-toolbar__item {
-  --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-toolbar__content-section,
   .pf-m-hidden-on-sm.pf-v6-c-toolbar__group,
   .pf-m-hidden-on-sm.pf-v6-c-toolbar__item {
-    --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-toolbar__content-section,
   .pf-m-visible-on-sm.pf-v6-c-toolbar__group,
   .pf-m-visible-on-sm.pf-v6-c-toolbar__item {
-    --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-toolbar__content-section,
   .pf-m-hidden-on-md.pf-v6-c-toolbar__group,
   .pf-m-hidden-on-md.pf-v6-c-toolbar__item {
-    --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-toolbar__content-section,
   .pf-m-visible-on-md.pf-v6-c-toolbar__group,
   .pf-m-visible-on-md.pf-v6-c-toolbar__item {
-    --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-toolbar__content-section,
   .pf-m-hidden-on-lg.pf-v6-c-toolbar__group,
   .pf-m-hidden-on-lg.pf-v6-c-toolbar__item {
-    --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-toolbar__content-section,
   .pf-m-visible-on-lg.pf-v6-c-toolbar__group,
   .pf-m-visible-on-lg.pf-v6-c-toolbar__item {
-    --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-toolbar__content-section,
   .pf-m-hidden-on-xl.pf-v6-c-toolbar__group,
   .pf-m-hidden-on-xl.pf-v6-c-toolbar__item {
-    --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-toolbar__content-section,
   .pf-m-visible-on-xl.pf-v6-c-toolbar__group,
   .pf-m-visible-on-xl.pf-v6-c-toolbar__item {
-    --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-toolbar__content-section,
   .pf-m-hidden-on-2xl.pf-v6-c-toolbar__group,
   .pf-m-hidden-on-2xl.pf-v6-c-toolbar__item {
-    --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-toolbar__content-section,
   .pf-m-visible-on-2xl.pf-v6-c-toolbar__group,
   .pf-m-visible-on-2xl.pf-v6-c-toolbar__item {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 
@@ -107,7 +107,7 @@
 .pf-v6-c-toolbar__item,
 .pf-v6-c-toolbar__group.pf-m-chip-group-container,
 .pf-v6-c-toolbar__group.pf-m-chip-group {
-  --pf-v5-hidden-visible--visible--Display: flex;
+  --pf-v6-hidden-visible--visible--Display: flex;
   flex-wrap: wrap;
 }
 

package/components/Toolbar/toolbar.scss

@@ -1,11 +1,11 @@
-$pf-v5-c-toolbar--spacer-map: build-spacer-map();
-$pf-v5-c-toolbar--inset-map: build-spacer-map();
-$pf-v5-c-toolbar--align-items--alignments: ('stretch', 'baseline', 'start', 'center', 'end');
-$pf-v5-c-toolbar--breakpoint-map: build-breakpoint-map('base');
-$pf-v5--include-toolbar-breakpoints: true !default;
-
-@if $pf-v5--include-toolbar-breakpoints {
-  $pf-v5-c-toolbar--breakpoint-map: build-breakpoint-map('base', 'sm', 'md', 'lg', 'xl', '2xl');
+$pf-v6-c-toolbar--spacer-map: build-spacer-map();
+$pf-v6-c-toolbar--inset-map: build-spacer-map();
+$pf-v6-c-toolbar--align-items--alignments: ('stretch', 'baseline', 'start', 'center', 'end');
+$pf-v6-c-toolbar--breakpoint-map: build-breakpoint-map('base');
+$pf-v6--include-toolbar-breakpoints: true !default;
+
+@if $pf-v6--include-toolbar-breakpoints {
+  $pf-v6-c-toolbar--breakpoint-map: build-breakpoint-map('base', 'sm', 'md', 'lg', 'xl', '2xl');
 }
 
 :where(:root),
@@ -62,7 +62,7 @@ $pf-v5--include-toolbar-breakpoints: true !default;
 .#{$toolbar}__item,
 .#{$toolbar}__group.pf-m-chip-group-container,
 .#{$toolbar}__group.pf-m-chip-group {
-  @include pf-v5-hidden-visible(flex);
+  @include pf-v6-hidden-visible(flex);
 
   flex-wrap: wrap;
 }
@@ -160,8 +160,8 @@ $pf-v5--include-toolbar-breakpoints: true !default;
 
 // - Toolbar item
 .#{$toolbar}__item {
-  @include pf-v5-build-css-variable-stack("--#{$toolbar}__item--Width--base", "--#{$toolbar}__item--Width", $pf-v5-c-toolbar--breakpoint-map);
-  @include pf-v5-build-css-variable-stack("--#{$toolbar}__item--MinWidth--base", "--#{$toolbar}__item--MinWidth", $pf-v5-c-toolbar--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$toolbar}__item--Width--base", "--#{$toolbar}__item--Width", $pf-v6-c-toolbar--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$toolbar}__item--MinWidth--base", "--#{$toolbar}__item--MinWidth", $pf-v6-c-toolbar--breakpoint-map);
 
   row-gap: var(--#{$toolbar}__item--RowGap, var(--#{$toolbar}--RowGap));
   column-gap: var(--#{$toolbar}__item--ColumnGap);
@@ -233,7 +233,7 @@ $pf-v5--include-toolbar-breakpoints: true !default;
   background-color: var(--#{$toolbar}__expandable-content--BackgroundColor);
   box-shadow: var(--#{$toolbar}__expandable-content--BoxShadow);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     position: static;
     padding: 0;
     box-shadow: none;
@@ -255,7 +255,7 @@ $pf-v5--include-toolbar-breakpoints: true !default;
   transition: var(--#{$toolbar}__expand-all-icon--Transition);
   transform: rotate(var(--#{$toolbar}__expand-all-icon--Rotate));
 
-  @include pf-v5-mirror-inline-on-rtl; // - TODO: mirror this icon in breaking change
+  @include pf-v6-mirror-inline-on-rtl; // - TODO: mirror this icon in breaking change
 }
 
 // - Toolbar group - Toolbar item
@@ -269,10 +269,10 @@ $pf-v5--include-toolbar-breakpoints: true !default;
   }
 }
 
-@each $breakpoint, $breakpoint-value in $pf-v5-c-toolbar--breakpoint-map {
+@each $breakpoint, $breakpoint-value in $pf-v6-c-toolbar--breakpoint-map {
   $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-  @include pf-v5-apply-breakpoint($breakpoint) {
+  @include pf-v6-apply-breakpoint($breakpoint) {
     .#{$toolbar}__group,
     .#{$toolbar}__item {
       &.pf-m-align-start#{$breakpoint-name} {
@@ -292,7 +292,7 @@ $pf-v5--include-toolbar-breakpoints: true !default;
         flex-grow: 1;
       }
 
-      @each $alignment in $pf-v5-c-toolbar--align-items--alignments {
+      @each $alignment in $pf-v6-c-toolbar--align-items--alignments {
         &.pf-m-align-self-#{$alignment}#{$breakpoint-name} {
           align-self: #{$alignment};
         }
@@ -304,7 +304,7 @@ $pf-v5--include-toolbar-breakpoints: true !default;
     .#{$toolbar}__content,
     .#{$toolbar}__content-section {
       // Inset modifiers
-      @each $inset, $inset-value in $pf-v5-c-toolbar--inset-map {
+      @each $inset, $inset-value in $pf-v6-c-toolbar--inset-map {
         &.pf-m-inset-#{$inset}#{$breakpoint-name} {
           --#{$toolbar}__content--PaddingInline: #{$inset-value};
         }
@@ -324,20 +324,20 @@ $pf-v5--include-toolbar-breakpoints: true !default;
         flex-wrap: nowrap;
       }
 
-      @each $alignment in $pf-v5-c-toolbar--align-items--alignments {
+      @each $alignment in $pf-v6-c-toolbar--align-items--alignments {
         &.pf-m-align-items-#{$alignment}#{$breakpoint-name} {
           align-items: #{$alignment};
         }
       }
 
-      @each $gap, $gap-value in $pf-v5-c-toolbar--spacer-map {
+      @each $gap, $gap-value in $pf-v6-c-toolbar--spacer-map {
         &.pf-m-gap-#{$gap}#{$breakpoint-name} {
           column-gap: #{$gap-value};
         }
       }
 
       // Row and column gap modifiers
-      @each $spacer, $spacer-value in $pf-v5-c-toolbar--spacer-map {
+      @each $spacer, $spacer-value in $pf-v6-c-toolbar--spacer-map {
         &.pf-m-column-gap-#{$spacer}#{$breakpoint-name} {
           column-gap: #{$spacer-value};
         }

package/components/TreeView/tree-view.scss

@@ -325,7 +325,7 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 }
 
 .#{$tree-view}__node-toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
   min-width: var(--#{$tree-view}__node-toggle-icon--MinWidth);
@@ -415,10 +415,10 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
   background-color: var(--#{$tree-view}__node-toggle--BackgroundColor);
   border: 0;
 
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: transform,
     $ltr-val: translateX(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX)),
-    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX))})
+    $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX))})
   );
 }
 
@@ -427,13 +427,13 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
   &.pf-m-truncate {
     --#{$tree-view}__node-content--Overflow: hidden;
 
-    @include pf-v5-text-overflow;
+    @include pf-v6-text-overflow;
   }
 
   @at-root .#{$tree-view}.pf-m-truncate & {
     --#{$tree-view}__node-content--Overflow: hidden;
 
-    @include pf-v5-text-overflow;
+    @include pf-v6-text-overflow;
   }
 }
 

package/components/Truncate/truncate.scss

@@ -26,7 +26,7 @@
 
 // End
 .#{$truncate}__end {
-  @include pf-v5-bidirectional-style (
+  @include pf-v6-bidirectional-style (
     $prop: direction,
     $ltr-val: rtl,
     $rtl-val: ltr
@@ -36,7 +36,7 @@
 .#{$truncate}__start + .#{$truncate}__end {
   overflow: visible;
 
-  @include pf-v5-bidirectional-style (
+  @include pf-v6-bidirectional-style (
     $prop: direction,
     $ltr-val: ltr,
     $rtl-val: rtl
@@ -46,7 +46,7 @@
 // safari not supported
 @supports (-webkit-hyphens: none) {
   .#{$truncate}__end {
-    @include pf-v5-bidirectional-style (
+    @include pf-v6-bidirectional-style (
       $prop: direction,
       $ltr-val: ltr,
       $rtl-val: rtl

package/components/Wizard/wizard.scss

@@ -110,7 +110,7 @@
   --#{$wizard}__nav--lg--BorderRightWidth: var(--pf-t--global--border--width--regular);
   --#{$wizard}__nav--lg--BorderRightColor: var(--pf-t--global--border--color--default);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     --#{$wizard}__nav--Width: var(--#{$wizard}__nav--lg--Width);
     --#{$wizard}__nav--BoxShadow: none;
   }
@@ -222,7 +222,7 @@
   padding-block-start: var(--#{$wizard}__description--PaddingTop);
   color: var(--#{$wizard}__description--Color);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     display: block;
   }
 }
@@ -243,7 +243,7 @@
   border-inline-start: 0;
   border-inline-end: 0;
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     display: none;
   }
 
@@ -280,7 +280,7 @@
 }
 
 .#{$wizard}__toggle-separator {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   margin-inline-start: var(--#{$wizard}__toggle-separator--MarginLeft);
   color: var(--#{$wizard}__toggle-separator--Color);
@@ -298,7 +298,7 @@
   min-height: var(--#{$wizard}__outer-wrap--MinHeight);
   background-color: var(--#{$wizard}__outer-wrap--BackgroundColor);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     padding-inline-start: var(--#{$wizard}__outer-wrap--lg--PaddingLeft);
   }
 }
@@ -310,7 +310,7 @@
   flex-grow: 1;
   min-height: 0;
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     position: static;
   }
 }
@@ -332,7 +332,7 @@
     display: block;
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     display: block;
     height: 100%;
     border-inline-end: var(--#{$wizard}__nav--lg--BorderRightWidth) solid var(--#{$wizard}__nav--lg--BorderRightColor);
@@ -416,10 +416,10 @@
   // Common step number styles
   @at-root .#{$wizard}__toggle-num,
   &::before {
-    @include pf-v5-bidirectional-style(
+    @include pf-v6-bidirectional-style(
       $prop: transform,
       $ltr-val: translateX(var(--#{$wizard}__nav-link--before--TranslateX)) translateY(var(--#{$wizard}__nav-link--before--TranslateY)),
-      $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$wizard}__nav-link--before--TranslateX))}) translateY(var(--#{$wizard}__nav-link--before--TranslateY))
+      $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$wizard}__nav-link--before--TranslateX))}) translateY(var(--#{$wizard}__nav-link--before--TranslateY))
     );
 
     position: absolute;
@@ -485,7 +485,7 @@
 }
 
 .#{$wizard}__nav-link-toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
   transition: var(--#{$wizard}__nav-link-toggle-icon--Transition);