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

package/components/Sidebar/sidebar.css

@@ -200,146 +200,146 @@
   background-color: transparent;
 }
 
-.pf-v5-c-sidebar__panel.pf-m-width-default {
-  --pf-v5-c-sidebar__panel--FlexBasis: var(--pf-v5-c-sidebar__panel--FlexBasis--base);
+.pf-v6-c-sidebar__panel.pf-m-width-default {
+  --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
 }
 
-.pf-v5-c-sidebar__panel.pf-m-width-25 {
-  --pf-v5-c-sidebar__panel--FlexBasis: 25%;
+.pf-v6-c-sidebar__panel.pf-m-width-25 {
+  --pf-v6-c-sidebar__panel--FlexBasis: 25%;
 }
 
-.pf-v5-c-sidebar__panel.pf-m-width-33 {
-  --pf-v5-c-sidebar__panel--FlexBasis: 33%;
+.pf-v6-c-sidebar__panel.pf-m-width-33 {
+  --pf-v6-c-sidebar__panel--FlexBasis: 33%;
 }
 
-.pf-v5-c-sidebar__panel.pf-m-width-50 {
-  --pf-v5-c-sidebar__panel--FlexBasis: 50%;
+.pf-v6-c-sidebar__panel.pf-m-width-50 {
+  --pf-v6-c-sidebar__panel--FlexBasis: 50%;
 }
 
-.pf-v5-c-sidebar__panel.pf-m-width-66 {
-  --pf-v5-c-sidebar__panel--FlexBasis: 66%;
+.pf-v6-c-sidebar__panel.pf-m-width-66 {
+  --pf-v6-c-sidebar__panel--FlexBasis: 66%;
 }
 
-.pf-v5-c-sidebar__panel.pf-m-width-75 {
-  --pf-v5-c-sidebar__panel--FlexBasis: 75%;
+.pf-v6-c-sidebar__panel.pf-m-width-75 {
+  --pf-v6-c-sidebar__panel--FlexBasis: 75%;
 }
 
-.pf-v5-c-sidebar__panel.pf-m-width-100 {
-  --pf-v5-c-sidebar__panel--FlexBasis: 100%;
+.pf-v6-c-sidebar__panel.pf-m-width-100 {
+  --pf-v6-c-sidebar__panel--FlexBasis: 100%;
 }
 
 @media (min-width: 576px) {
-  .pf-v5-c-sidebar__panel.pf-m-width-default-on-sm {
-    --pf-v5-c-sidebar__panel--FlexBasis: var(--pf-v5-c-sidebar__panel--FlexBasis--base);
+  .pf-v6-c-sidebar__panel.pf-m-width-default-on-sm {
+    --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-25-on-sm {
-    --pf-v5-c-sidebar__panel--FlexBasis: 25%;
+  .pf-v6-c-sidebar__panel.pf-m-width-25-on-sm {
+    --pf-v6-c-sidebar__panel--FlexBasis: 25%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-33-on-sm {
-    --pf-v5-c-sidebar__panel--FlexBasis: 33%;
+  .pf-v6-c-sidebar__panel.pf-m-width-33-on-sm {
+    --pf-v6-c-sidebar__panel--FlexBasis: 33%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-50-on-sm {
-    --pf-v5-c-sidebar__panel--FlexBasis: 50%;
+  .pf-v6-c-sidebar__panel.pf-m-width-50-on-sm {
+    --pf-v6-c-sidebar__panel--FlexBasis: 50%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-66-on-sm {
-    --pf-v5-c-sidebar__panel--FlexBasis: 66%;
+  .pf-v6-c-sidebar__panel.pf-m-width-66-on-sm {
+    --pf-v6-c-sidebar__panel--FlexBasis: 66%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-75-on-sm {
-    --pf-v5-c-sidebar__panel--FlexBasis: 75%;
+  .pf-v6-c-sidebar__panel.pf-m-width-75-on-sm {
+    --pf-v6-c-sidebar__panel--FlexBasis: 75%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-100-on-sm {
-    --pf-v5-c-sidebar__panel--FlexBasis: 100%;
+  .pf-v6-c-sidebar__panel.pf-m-width-100-on-sm {
+    --pf-v6-c-sidebar__panel--FlexBasis: 100%;
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-c-sidebar__panel.pf-m-width-default-on-md {
-    --pf-v5-c-sidebar__panel--FlexBasis: var(--pf-v5-c-sidebar__panel--FlexBasis--base);
+  .pf-v6-c-sidebar__panel.pf-m-width-default-on-md {
+    --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-25-on-md {
-    --pf-v5-c-sidebar__panel--FlexBasis: 25%;
+  .pf-v6-c-sidebar__panel.pf-m-width-25-on-md {
+    --pf-v6-c-sidebar__panel--FlexBasis: 25%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-33-on-md {
-    --pf-v5-c-sidebar__panel--FlexBasis: 33%;
+  .pf-v6-c-sidebar__panel.pf-m-width-33-on-md {
+    --pf-v6-c-sidebar__panel--FlexBasis: 33%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-50-on-md {
-    --pf-v5-c-sidebar__panel--FlexBasis: 50%;
+  .pf-v6-c-sidebar__panel.pf-m-width-50-on-md {
+    --pf-v6-c-sidebar__panel--FlexBasis: 50%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-66-on-md {
-    --pf-v5-c-sidebar__panel--FlexBasis: 66%;
+  .pf-v6-c-sidebar__panel.pf-m-width-66-on-md {
+    --pf-v6-c-sidebar__panel--FlexBasis: 66%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-75-on-md {
-    --pf-v5-c-sidebar__panel--FlexBasis: 75%;
+  .pf-v6-c-sidebar__panel.pf-m-width-75-on-md {
+    --pf-v6-c-sidebar__panel--FlexBasis: 75%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-100-on-md {
-    --pf-v5-c-sidebar__panel--FlexBasis: 100%;
+  .pf-v6-c-sidebar__panel.pf-m-width-100-on-md {
+    --pf-v6-c-sidebar__panel--FlexBasis: 100%;
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-c-sidebar__panel.pf-m-width-default-on-lg {
-    --pf-v5-c-sidebar__panel--FlexBasis: var(--pf-v5-c-sidebar__panel--FlexBasis--base);
+  .pf-v6-c-sidebar__panel.pf-m-width-default-on-lg {
+    --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-25-on-lg {
-    --pf-v5-c-sidebar__panel--FlexBasis: 25%;
+  .pf-v6-c-sidebar__panel.pf-m-width-25-on-lg {
+    --pf-v6-c-sidebar__panel--FlexBasis: 25%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-33-on-lg {
-    --pf-v5-c-sidebar__panel--FlexBasis: 33%;
+  .pf-v6-c-sidebar__panel.pf-m-width-33-on-lg {
+    --pf-v6-c-sidebar__panel--FlexBasis: 33%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-50-on-lg {
-    --pf-v5-c-sidebar__panel--FlexBasis: 50%;
+  .pf-v6-c-sidebar__panel.pf-m-width-50-on-lg {
+    --pf-v6-c-sidebar__panel--FlexBasis: 50%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-66-on-lg {
-    --pf-v5-c-sidebar__panel--FlexBasis: 66%;
+  .pf-v6-c-sidebar__panel.pf-m-width-66-on-lg {
+    --pf-v6-c-sidebar__panel--FlexBasis: 66%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-75-on-lg {
-    --pf-v5-c-sidebar__panel--FlexBasis: 75%;
+  .pf-v6-c-sidebar__panel.pf-m-width-75-on-lg {
+    --pf-v6-c-sidebar__panel--FlexBasis: 75%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-100-on-lg {
-    --pf-v5-c-sidebar__panel--FlexBasis: 100%;
+  .pf-v6-c-sidebar__panel.pf-m-width-100-on-lg {
+    --pf-v6-c-sidebar__panel--FlexBasis: 100%;
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-sidebar__panel.pf-m-width-default-on-xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: var(--pf-v5-c-sidebar__panel--FlexBasis--base);
+  .pf-v6-c-sidebar__panel.pf-m-width-default-on-xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-25-on-xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: 25%;
+  .pf-v6-c-sidebar__panel.pf-m-width-25-on-xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: 25%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-33-on-xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: 33%;
+  .pf-v6-c-sidebar__panel.pf-m-width-33-on-xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: 33%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-50-on-xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: 50%;
+  .pf-v6-c-sidebar__panel.pf-m-width-50-on-xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: 50%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-66-on-xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: 66%;
+  .pf-v6-c-sidebar__panel.pf-m-width-66-on-xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: 66%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-75-on-xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: 75%;
+  .pf-v6-c-sidebar__panel.pf-m-width-75-on-xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: 75%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-100-on-xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: 100%;
+  .pf-v6-c-sidebar__panel.pf-m-width-100-on-xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: 100%;
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-c-sidebar__panel.pf-m-width-default-on-2xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: var(--pf-v5-c-sidebar__panel--FlexBasis--base);
+  .pf-v6-c-sidebar__panel.pf-m-width-default-on-2xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-25-on-2xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: 25%;
+  .pf-v6-c-sidebar__panel.pf-m-width-25-on-2xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: 25%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-33-on-2xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: 33%;
+  .pf-v6-c-sidebar__panel.pf-m-width-33-on-2xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: 33%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-50-on-2xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: 50%;
+  .pf-v6-c-sidebar__panel.pf-m-width-50-on-2xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: 50%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-66-on-2xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: 66%;
+  .pf-v6-c-sidebar__panel.pf-m-width-66-on-2xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: 66%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-75-on-2xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: 75%;
+  .pf-v6-c-sidebar__panel.pf-m-width-75-on-2xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: 75%;
   }
-  .pf-v5-c-sidebar__panel.pf-m-width-100-on-2xl {
-    --pf-v5-c-sidebar__panel--FlexBasis: 100%;
+  .pf-v6-c-sidebar__panel.pf-m-width-100-on-2xl {
+    --pf-v6-c-sidebar__panel--FlexBasis: 100%;
   }
 }

package/components/Sidebar/sidebar.scss

@@ -1,6 +1,6 @@
 // @debug $sidebar; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-sidebar--breakpoint-map--width: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
-$pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
+$pf-v6-c-sidebar--breakpoint-map--width: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
 :root,
 :where(.#{$sidebar}) {
@@ -74,7 +74,7 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
   // Panel
   --#{$sidebar}__panel--FlexBasis--base: auto;
-  --#{$sidebar}__panel--BoxShadow--base: #{0 pf-size-prem(4px) pf-size-prem(4px) pf-size-prem(-4px) rgba($pf-v5-color-black-1000, .16)}; // modified so the shadow is only visible on the bottom of the element
+  --#{$sidebar}__panel--BoxShadow--base: #{0 pf-size-prem(4px) pf-size-prem(4px) pf-size-prem(-4px) rgba($pf-v5-color-black-1000, .16)}; // TODO NEEDS TOKEN. previous comment:modified so the shadow is only visible on the bottom of the element 
   --#{$sidebar}__panel--BoxShadow: var(--#{$sidebar}__panel--BoxShadow--base);
   --#{$sidebar}__panel--Top: 0;
   --#{$sidebar}__panel--md--Top: auto;
@@ -101,7 +101,7 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 .#{$sidebar} {
   height: 100%;
 
-  @media (min-width: $pf-v5-global--breakpoint--md) {
+  @media (min-width: $pf-v6-global--breakpoint--md) {
     --#{$sidebar}__main--FlexDirection: var(--#{$sidebar}__main--md--FlexDirection);
     --#{$sidebar}__main--AlignItems: var(--#{$sidebar}__main--md--AlignItems);
     --#{$sidebar}__main--m-border--before--Display: var(--#{$sidebar}__main--m-border--before--md--Display); // show border starting at md breakpoint
@@ -111,7 +111,7 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
     --#{$sidebar}__panel--Position: var(--#{$sidebar}__panel--md--Position);
   }
 
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$sidebar}--inset: var(--#{$sidebar}--xl--inset);
   }
 
@@ -123,7 +123,7 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
     --#{$sidebar}__panel--Order: var(--#{$sidebar}--m-panel-right__panel--Order);
     --#{$sidebar}__content--Order: var(--#{$sidebar}--m-panel-right__content--Order);
 
-    @media (min-width: $pf-v5-global--breakpoint--md) {
+    @media (min-width: $pf-v6-global--breakpoint--md) {
       --#{$sidebar}--m-panel-right__panel--Order: var(--#{$sidebar}--m-panel-right__panel--md--Order);
       --#{$sidebar}--m-panel-right__content--Order: var(--#{$sidebar}--m-panel-right__content--md--Order);
     }
@@ -245,16 +245,16 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
 
 // Responsive width modifiers
-@each $breakpoint, $breakpoint-value in $pf-v5-c-sidebar--breakpoint-map--width {
+@each $breakpoint, $breakpoint-value in $pf-v6-c-sidebar--breakpoint-map--width {
   $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-  @include pf-v5-apply-breakpoint($breakpoint) {
-    @each $width-value in $pf-v5-c-sidebar__panel--list--width {
-      .pf-v5-c-sidebar__panel.pf-m-width-#{$width-value}#{$breakpoint-name} {
+  @include pf-v6-apply-breakpoint($breakpoint) {
+    @each $width-value in $pf-v6-c-sidebar__panel--list--width {
+      .pf-v6-c-sidebar__panel.pf-m-width-#{$width-value}#{$breakpoint-name} {
         @if $width-value == "default" {
-          --pf-v5-c-sidebar__panel--FlexBasis: var(--pf-v5-c-sidebar__panel--FlexBasis--base);
+          --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
         } @else {
-          --pf-v5-c-sidebar__panel--FlexBasis: #{percentage(div($width-value, 100))};
+          --pf-v6-c-sidebar__panel--FlexBasis: #{percentage(div($width-value, 100))};
         }
       }
     }

package/components/Skeleton/skeleton.scss

@@ -76,7 +76,7 @@
   }
 
   &::after {
-    @include pf-v5-mirror-inline-on-rtl;
+    @include pf-v6-mirror-inline-on-rtl;
 
     position: absolute;
     inset: 0;

package/components/Slider/slider.scss

@@ -79,7 +79,7 @@
 }
 
 .#{$slider} {
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: --#{$slider}__rail-track--before--fill--direction, 
     $ltr-val: right,
     $rtl-val: left
@@ -160,10 +160,10 @@
 }
 
 .#{$slider}__step-tick {
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: transform,
     $ltr-val: translateX(var(--#{$slider}__step-tick--TranslateX)),
-    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$slider}__step-tick--TranslateX))})
+    $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$slider}__step-tick--TranslateX))})
   );
 
   position: absolute;
@@ -176,10 +176,10 @@
 }
 
 .#{$slider}__step-label {
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: transform,
     $ltr-val: translateX(var(--#{$slider}__step-label--TranslateX)),
-    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$slider}__step-label--TranslateX))})
+    $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$slider}__step-label--TranslateX))})
   );
 
   position: absolute;
@@ -188,10 +188,10 @@
 }
 
 .#{$slider}__thumb {
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: transform,
     $ltr-val: translate(var(--#{$slider}__thumb--TranslateX), var(--#{$slider}__thumb--TranslateY)),
-    $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$slider}__thumb--TranslateX))}, var(--#{$slider}__thumb--TranslateY))
+    $rtl-val: translate(#{pf-v6-calc-inverse(var(--#{$slider}__thumb--TranslateX))}, var(--#{$slider}__thumb--TranslateY))
   );
 
   position: absolute;
@@ -205,10 +205,10 @@
   box-shadow: var(--#{$slider}__thumb--BoxShadow);
 
   &::before {
-    @include pf-v5-bidirectional-style(
+    @include pf-v6-bidirectional-style(
       $prop: transform,
       $ltr-val: translate(var(--#{$slider}__thumb--before--TranslateX), var(--#{$slider}__thumb--before--TranslateY)),
-      $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$slider}__thumb--before--TranslateX))}, var(--#{$slider}__thumb--before--TranslateY))
+      $rtl-val: translate(#{pf-v6-calc-inverse(var(--#{$slider}__thumb--before--TranslateX))}, var(--#{$slider}__thumb--before--TranslateY))
     );
 
     position: absolute;
@@ -239,10 +239,10 @@
   margin-inline-start: var(--#{$slider}__value--MarginLeft);
 
   &.pf-m-floating {
-    @include pf-v5-bidirectional-style(
+    @include pf-v6-bidirectional-style(
       $prop: transform,
       $ltr-val: translate(var(--#{$slider}__value--m-floating--TranslateX), var(--#{$slider}__value--m-floating--TranslateY)),
-      $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$slider}__value--m-floating--TranslateX))}, var(--#{$slider}__value--m-floating--TranslateY)),
+      $rtl-val: translate(#{pf-v6-calc-inverse(var(--#{$slider}__value--m-floating--TranslateX))}, var(--#{$slider}__value--m-floating--TranslateY)),
     );
 
     --#{$slider}__value--MarginLeft: 0;

package/components/Switch/switch.scss

@@ -91,10 +91,10 @@
       background-color: var(--#{$switch}__input--checked__toggle--BackgroundColor);
 
       &::before {
-        @include pf-v5-bidirectional-style(
+        @include pf-v6-bidirectional-style(
           $prop: transform,
           $ltr-val: translate(var(--#{$switch}__input--checked__toggle--before--TranslateX), -50%),
-          $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$switch}__input--checked__toggle--before--TranslateX))}, -50%)
+          $rtl-val: translate(#{pf-v6-calc-inverse(var(--#{$switch}__input--checked__toggle--before--TranslateX))}, -50%)
         );
 
         background-color: var(--#{$switch}__input--checked__toggle--before--BackgroundColor);

package/components/TabContent/tab-content.scss

@@ -26,7 +26,7 @@
 .#{$tab-content} {
   background-color: var(--#{$tab-content}--BackgroundColor);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$tab-content}__body--m-padding--PaddingTop: var(--#{$tab-content}__body--m-padding--xl--PaddingTop);
     --#{$tab-content}__body--m-padding--PaddingRight: var(--#{$tab-content}__body--m-padding--xl--PaddingRight);
     --#{$tab-content}__body--m-padding--PaddingBottom: var(--#{$tab-content}__body--m-padding--xl--PaddingBottom);

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};