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

package/components/Pagination/pagination.scss

@@ -1,6 +1,6 @@
 // @debug $pagination; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-pagination--breakpoint-map: build-breakpoint-map();
-$pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-pagination--breakpoint-map: build-breakpoint-map();
+$pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
 :where(:root),
 :where(.#{$pagination}) {
@@ -51,14 +51,14 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   --#{$pagination}--m-display-summary__page-menu--Display: none;
   --#{$pagination}--m-display-full__page-menu--Display: inline-flex;
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
     --#{$pagination}--m-bottom--BoxShadow: none;
     --#{$pagination}__page-menu--Display: inline-flex;
     --#{$pagination}__nav--Display: inline-flex;
     --#{$pagination}__total-items--Display: none;
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$pagination}__scroll-button--Width: var(--#{$pagination}__scroll-button--xl--Width);
   }
 }
@@ -113,7 +113,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
       justify-content: space-between;
     }
 
-    @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--md) {
       --#{$pagination}--m-bottom--BorderTopWidth: 0;
       --#{$pagination}--m-bottom--MarginTop: 0;
       --#{$pagination}--m-bottom--Bottom: auto;
@@ -171,7 +171,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 
 // nav control
 .#{$pagination}__nav-control {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 }
 
 // nav page element
@@ -189,7 +189,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     width: var(--#{$pagination}__nav-page-select--c-form-control--Width);
 
     > :is(input) {
-      @extend %pf-v5-remove-num-arrows;
+      @extend %pf-v6-remove-num-arrows;
     }
   }
 }
@@ -201,10 +201,10 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 
 // stylelint-disable no-duplicate-selectors
 .#{$pagination} {
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-pagination--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-c-pagination--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-display-summary#{$breakpoint-name} {
         --#{$pagination}__nav--Display: var(--#{$pagination}--m-display-summary__nav--Display);
         --#{$pagination}__page-menu--Display: var(--#{$pagination}--m-display-summary__page-menu--Display);
@@ -217,7 +217,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
         --#{$pagination}__total-items--Display: var(--#{$pagination}--m-display-full__total-items--Display);
       }
 
-      @each $spacer, $spacer-value in $pf-v5-c-pagination--variable-map {
+      @each $spacer, $spacer-value in $pf-v6-c-pagination--variable-map {
         &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
           --#{$pagination}--inset: #{$spacer-value};
         }

package/components/Popover/popover.css

@@ -35,7 +35,7 @@
   --pf-v6-c-popover__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-popover__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-popover__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-popover__close--Top: calc(var(--pf-v6-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5));
+  --pf-v6-c-popover__close--Top: calc(var(--pf-v6-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--control--vertical--compact) * 1.5));
   --pf-v6-c-popover__close--Right: var(--pf-v6-c-popover__content--PaddingRight);
   --pf-v6-c-popover__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-popover__header--MarginBottom: var(--pf-t--global--spacer--sm);

package/components/Popover/popover.scss

@@ -47,7 +47,7 @@
   --#{$popover}__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
 
   // Close
-  --#{$popover}__close--Top: calc(var(--#{$popover}__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5)); // align top of button with top of text - TODO: replace with form element token
+  --#{$popover}__close--Top: calc(var(--#{$popover}__content--PaddingTop) - (var(--pf-t--global--spacer--control--vertical--compact) * 1.5)); // align top of button with top of text
   --#{$popover}__close--Right: var(--#{$popover}__content--PaddingRight); // align right of content
   --#{$popover}__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
 

package/components/Progress/progress.scss

@@ -151,7 +151,7 @@
   word-break: break-word;
 
   &.pf-m-truncate {
-    @include pf-v5-text-overflow;
+    @include pf-v6-text-overflow;
   }
 }
 

package/components/ProgressStepper/progress-stepper.scss

@@ -1,8 +1,8 @@
 // @debug $progress-stepper; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
+$pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 
 // Default layout is vertical
-@mixin pf-v5-c-progress-stepper--m-vertical {
+@mixin pf-v6-c-progress-stepper--m-vertical {
   --#{$progress-stepper}--GridAutoFlow: var(--#{$progress-stepper}--m-vertical--GridAutoFlow);
   --#{$progress-stepper}--GridTemplateColumns: var(--#{$progress-stepper}--m-vertical--GridTemplateColumns);
   --#{$progress-stepper}__step-connector--before--Top: var(--#{$progress-stepper}--m-vertical__step-connector--before--Top);
@@ -29,7 +29,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   --#{$progress-stepper}--m-center__step-main--before--Content: ""; // border swap
 }
 
-@mixin pf-v5-c-progress-stepper--m-horizontal {
+@mixin pf-v6-c-progress-stepper--m-horizontal {
   --#{$progress-stepper}--GridAutoFlow: var(--#{$progress-stepper}--m-horizontal--GridAutoFlow);
   --#{$progress-stepper}--GridTemplateColumns: var(--#{$progress-stepper}--m-horizontal--GridTemplateColumns);
   --#{$progress-stepper}__step-connector--before--Top: var(--#{$progress-stepper}--m-horizontal__step-connector--before--Top);
@@ -186,11 +186,11 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   --#{$progress-stepper}__step-description--TextAlign: start;
 
   // Vertical by default
-  @include pf-v5-c-progress-stepper--m-vertical;
+  @include pf-v6-c-progress-stepper--m-vertical;
 
   // Horizontal at md breakpoint
-  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
-    @include pf-v5-c-progress-stepper--m-horizontal;
+  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
+    @include pf-v6-c-progress-stepper--m-horizontal;
   }
 }
 
@@ -265,7 +265,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
     }
 
     .#{$progress-stepper}__step:not(.pf-m-current) .#{$progress-stepper}__step-main {
-      @include pf-v5-u-screen-reader;
+      @include pf-v6-u-screen-reader;
     }
 
     // For this compact variant only, move the main content for the current step to above the icons
@@ -428,16 +428,16 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 
 // stylelint-disable no-duplicate-selectors
 .#{$progress-stepper} {
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-progress-stepper--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-c-progress-stepper--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-horizontal#{$breakpoint-name} {
-        @include pf-v5-c-progress-stepper--m-horizontal;
+        @include pf-v6-c-progress-stepper--m-horizontal;
       }
 
       &.pf-m-vertical#{$breakpoint-name} {
-        @include pf-v5-c-progress-stepper--m-vertical;
+        @include pf-v6-c-progress-stepper--m-vertical;
       }
     }
   }

package/components/Select/select.scss

@@ -1,7 +1,7 @@
 // @debug $select; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
 .#{$select} {
-  @include pf-v5-t-light; // force the container follow the light theme
+  @include pf-v6-t-light; // force the container follow the light theme
 
   // Toggle
   --#{$select}__toggle--PaddingTop: var(--#{$pf-global}--spacer--form-element);
@@ -350,7 +350,7 @@
     --#{$select}__toggle--PaddingBottom: 0;
 
     .#{$form-control} {
-      @include pf-v5-text-overflow;
+      @include pf-v6-text-overflow;
 
       --#{$form-control}--invalid--BackgroundUrl: none;
 
@@ -391,7 +391,7 @@
 }
 
 .#{$select}__toggle-text {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   color: var(--#{$select}__toggle-text--Color, inherit);
 }
@@ -708,6 +708,6 @@
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/select";
 
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-select;
+@include pf-v6-theme-dark {
+  @include pf-v6-theme-dark-select;
 }

package/components/Select/themes/dark/select.scss

@@ -1,6 +1,6 @@
 @import "../../../../sass-utilities/themes/dark/all";
 
-@mixin pf-v5-theme-dark-select() {
+@mixin pf-v6-theme-dark-select() {
   .#{$select} {
     --#{$select}__toggle--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-500);
     --#{$select}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);

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