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

package/components/Chip/chip.scss

@@ -44,7 +44,7 @@
   // icon
   --#{$chip}__icon--MarginLeft: var(--#{$pf-global}--spacer--sm);
 
-  @include pf-v5-t-light;  // This component always needs to be light
+  @include pf-v6-t-light;  // This component always needs to be light
 
   position: relative;
   display: inline-flex;
@@ -91,7 +91,7 @@
 
 // Text element
 .#{$chip}__text {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   position: relative;
   max-width: var(--#{$chip}__text--MaxWidth);
@@ -135,6 +135,6 @@
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/chip";
 
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-chip;
+@include pf-v6-theme-dark {
+  @include pf-v6-theme-dark-chip;
 }

package/components/Chip/themes/dark/chip.scss

@@ -1,6 +1,6 @@
 @import "../../../../sass-utilities/themes/dark/all";
 
-@mixin pf-v5-theme-dark-chip() {
+@mixin pf-v6-theme-dark-chip() {
   .#{$chip} {
     --#{$chip}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
     --#{$chip}--before--BorderColor: var(--#{$pf-global}--BorderColor--100);

package/components/ClipboardCopy/clipboard-copy.scss

@@ -76,7 +76,7 @@
 }
 
 .#{$clipboard-copy}__toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   transition: var(--#{$clipboard-copy}__toggle-icon--Transition);
 }

package/components/Content/content.scss

@@ -284,7 +284,7 @@
     display: grid;
     grid-template-columns: 1fr;
 
-    @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
       grid-template: auto / auto 1fr;
       grid-row-gap: var(--#{$content}--dl--RowGap);
       grid-column-gap: var(--#{$content}--dl--ColumnGap);
@@ -297,18 +297,18 @@
     &:not(:first-child) {
       margin-block-start: var(--#{$content}--dt--MarginTop);
 
-      @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+      @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
         --#{$content}--dt--MarginTop: var(--#{$content}--dt--sm--MarginTop);
       }
     }
 
-    @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
       grid-column: 1;
     }
   }
 
   dd {
-    @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
       grid-column: 2;
     }
   }

package/components/ContextSelector/context-selector.scss

@@ -125,7 +125,7 @@
   --#{$context-selector}--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
   --#{$context-selector}--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$context-selector}--m-page-insets__toggle--PaddingRight: var(--#{$context-selector}--m-page-insets__toggle--xl--PaddingRight);
     --#{$context-selector}--m-page-insets__toggle--PaddingLeft: var(--#{$context-selector}--m-page-insets__toggle--xl--PaddingLeft);
     --#{$context-selector}--m-page-insets__menu-list-item--PaddingRight: var(--#{$context-selector}--m-page-insets__menu-list-item--xl--PaddingRight);
@@ -286,7 +286,7 @@
   }
 
   .#{$context-selector}__toggle-text {
-    @include pf-v5-text-overflow;
+    @include pf-v6-text-overflow;
 
     flex: 1 1 auto;
     font-size: var(--#{$context-selector}__toggle-text--FontSize);
@@ -303,7 +303,7 @@
 }
 
 .#{$context-selector}__menu {
-  @include pf-v5-t-light;
+  @include pf-v6-t-light;
 
   position: absolute;
   inset-block-start: var(--#{$context-selector}__menu--Top);
@@ -379,6 +379,6 @@
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/context-selector";
 
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-context-selector;
+@include pf-v6-theme-dark {
+  @include pf-v6-theme-dark-context-selector;
 }

package/components/ContextSelector/themes/dark/context-selector.scss

@@ -1,6 +1,6 @@
 @import "../../../../sass-utilities/themes/dark/all";
 
-@mixin pf-v5-theme-dark-context-selector() {
+@mixin pf-v6-theme-dark-context-selector() {
   .#{$context-selector} {
     --#{$context-selector}__menu--Top: 100%;
     --#{$context-selector}__menu-list-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);

package/components/DataList/data-list-grid.scss

@@ -1,19 +1,19 @@
-@mixin pf-v5-c-data-list-responsive-block() {
+@mixin pf-v6-c-data-list-responsive-block() {
   // base responsive styles
   @at-root .#{$data-list}:not([class*="pf-m-grid"]) {
-    @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--md) {
       @content;
     }
   }
 
   @at-root .#{$data-list}.pf-m-grid-none {
-    @media screen and (min-width: $pf-v5-global--breakpoint--xs) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--xs) {
       @content;
     }
   }
 
   // grid modifiers
-  @each $size, $bp in $pf-v5-global--breakpoint-name-map {
+  @each $size, $bp in $pf-v6-global--breakpoint-name-map {
     @at-root .#{$data-list}.pf-m-grid-#{$size} {
       @media screen and (min-width: #{$bp}) {
         @content;
@@ -22,7 +22,7 @@
   }
 }
 
-@include pf-v5-c-data-list-responsive-block {
+@include pf-v6-c-data-list-responsive-block {
   --#{$data-list}__cell--cell--PaddingTop: var(--#{$data-list}__cell--cell--md--PaddingTop);
   --#{$data-list}__cell--PaddingBottom: var(--#{$data-list}__cell--md--PaddingBottom);
   --#{$data-list}__item-control--MarginRight: var(--#{$data-list}__item-control--md--MarginRight);
@@ -32,7 +32,7 @@
   --#{$data-list}--m-compact__cell--PaddingBottom: var(--#{$data-list}--m-compact__cell--md--PaddingBottom);
   --#{$data-list}--m-compact__cell-cell--PaddingTop: var(--#{$data-list}--m-compact__cell-cell--md--PaddingTop);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$data-list}__item-row--PaddingRight: var(--#{$data-list}__item-row--xl--PaddingRight);
     --#{$data-list}__item-row--PaddingLeft: var(--#{$data-list}__item-row--xl--PaddingLeft);
     --#{$data-list}__expandable-content-body--PaddingRight: var(--#{$data-list}__expandable-content-body--xl--PaddingRight);

package/components/DataList/data-list.css

@@ -1,49 +1,49 @@
 .pf-v6-c-data-list__item-action {
-  --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-data-list__item-action {
-  --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-data-list__item-action {
-    --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-data-list__item-action {
-    --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-data-list__item-action {
-    --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-data-list__item-action {
-    --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-data-list__item-action {
-    --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-data-list__item-action {
-    --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-data-list__item-action {
-    --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-data-list__item-action {
-    --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-data-list__item-action {
-    --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-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 
@@ -730,7 +730,7 @@
 }
 
 .pf-v6-c-data-list__item-action {
-  --pf-v5-hidden-visible--visible--Display: var(--pf-v6-c-data-list__item-action--Display);
+  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-data-list__item-action--Display);
   align-content: flex-start;
   align-items: flex-start;
   padding-block-start: var(--pf-v6-c-data-list__item-action--PaddingTop);

package/components/DataList/data-list.scss

@@ -10,7 +10,7 @@
   --#{$data-list}--sm--BorderTopColor: var(--pf-t--global--border--color--default);
   --#{$data-list}--MarginLeft: var(--pf-t--global--spacer--md);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$data-list}--BorderTopColor: var(--#{$data-list}--sm--BorderTopColor);
     --#{$data-list}--BorderTopWidth: var(--#{$data-list}--sm--BorderTopWidth);
   }
@@ -25,7 +25,7 @@
   --#{$data-list}__item--sm--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
   --#{$data-list}__item--sm--BorderBottomColor: var(--pf-t--global--border--color--default);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$data-list}__item--BorderBottomWidth: var(--#{$data-list}__item--sm--BorderBottomWidth);
     --#{$data-list}__item--BorderBottomColor: var(--#{$data-list}__item--sm--BorderBottomColor);
   }
@@ -320,7 +320,7 @@
 }
 
 .#{$data-list}__item-action {
-  @include pf-v5-hidden-visible(var(--#{$data-list}__item-action--Display));
+  @include pf-v6-hidden-visible(var(--#{$data-list}__item-action--Display));
 
   align-content: flex-start;
   align-items: flex-start;
@@ -348,7 +348,7 @@
 
 // toggle icon rotate
 .#{$data-list}__toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   height: var(--#{$data-list}__toggle-icon--Height);
   pointer-events: none;

package/components/DescriptionList/description-list-order.scss

@@ -6,7 +6,7 @@ $pf-v6-c-description-list-order--limit: 12;
   @each $breakpoint, $breakpoint-value in $pf-v6-c-description-list-order--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       @for $i from 0 through $pf-v6-c-description-list-order--limit {
         .pf-m-order-#{$i}#{$breakpoint-name} {
           order: #{$i};

package/components/DescriptionList/description-list.scss

@@ -26,7 +26,7 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   --#{$description-list}__term--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$description-list}__term--LineHeight: var(--pf-t--global--font--line-height--body);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$description-list}__term--Display: var(--#{$description-list}__term--sm--Display);
   }
 
@@ -63,8 +63,8 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   --#{$description-list}--m-display-lg__description--FontSize: var(--pf-t--global--font--size--body--lg); // TODO replace with new font tokens when available
   --#{$description-list}--m-display-2xl__description--FontSize: var(--pf-t--global--font--size--heading--lg); // TODO replace with new font tokens when available
 
-  @include pf-v5-output-root-variables("--#{$description-list}--m-horizontal__term--width", $pf-v6-c-description-list--breakpoint-map);
-  @include pf-v5-build-css-variable-stack("--#{$description-list}__term--width", "--#{$description-list}--m-horizontal__term--width", $pf-v6-c-description-list--breakpoint-map);
+  @include pf-v6-output-root-variables("--#{$description-list}--m-horizontal__term--width", $pf-v6-c-description-list--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$description-list}__term--width", "--#{$description-list}--m-horizontal__term--width", $pf-v6-c-description-list--breakpoint-map);
 }
 
 .#{$description-list} { 
@@ -85,7 +85,7 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   &.pf-m-auto-fit {
     grid-template-columns: repeat(auto-fit, minmax(var(--#{$description-list}--m-auto-fit--GridTemplateColumns--minmax--min), 1fr));
 
-    @include pf-v5-build-css-variable-stack("--#{$description-list}--GridTemplateColumns--minmax--min", "--#{$description-list}--GridTemplateColumns--min", $pf-v6-c-description-list--breakpoint-map);
+    @include pf-v6-build-css-variable-stack("--#{$description-list}--GridTemplateColumns--minmax--min", "--#{$description-list}--GridTemplateColumns--min", $pf-v6-c-description-list--breakpoint-map);
   }
 
   &.pf-m-compact {
@@ -201,7 +201,7 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   @each $breakpoint, $breakpoint-value in $pf-v6-c-description-list--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-1-col#{$breakpoint-name} {
         --#{$description-list}--GridTemplateColumns--count: var(--#{$description-list}--m-1-col--GridTemplateColumns--count);
       }

package/components/Divider/divider.css

@@ -1,49 +1,49 @@
 .pf-v6-c-divider {
-  --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-divider {
-  --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-divider {
-    --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-divider {
-    --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-divider {
-    --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-divider {
-    --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-divider {
-    --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-divider {
-    --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-divider {
-    --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-divider {
-    --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-divider {
-    --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-divider {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 
@@ -59,7 +59,7 @@
   flex-direction: row;
   width: 100%;
   height: var(--pf-v6-c-divider--Size);
-  --pf-v5-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
+  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
   flex-shrink: 0;
   align-items: stretch;
   align-self: stretch;

package/components/Divider/divider.scss

@@ -1,16 +1,16 @@
 // @debug $divider; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-divider--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
-$pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl");
+$pf-v6-c-divider--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl");
 
 // * Divider horizontal
-@mixin pf-v5-c-divider--m-horizontal {
+@mixin pf-v6-c-divider--m-horizontal {
   flex-direction: row;
   width: 100%;
   height: var(--#{$divider}--Size);  // apply size to height in horizontal orientation
 }
 
 // * Divider vertical
-@mixin pf-v5-c-divider--m-vertical {
+@mixin pf-v6-c-divider--m-vertical {
   flex-direction: column;
   width: var(--#{$divider}--Size); // apply size to width in vertical orientation
   height: inherit;
@@ -29,8 +29,8 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
 
 // - Divider
 .#{$divider} {
-  @include pf-v5-c-divider--m-horizontal; // default, set to orientation to horizontal
-  @include pf-v5-hidden-visible(var(--#{$divider}--Display));
+  @include pf-v6-c-divider--m-horizontal; // default, set to orientation to horizontal
+  @include pf-v6-hidden-visible(var(--#{$divider}--Display));
 
   flex-shrink: 0;
   align-items: stretch;
@@ -47,16 +47,16 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
 
   // - Divider horizontal
   &.pf-m-horizontal {
-    @include pf-v5-c-divider--m-horizontal;
+    @include pf-v6-c-divider--m-horizontal;
   }
 
   // - Divider vertical
   &.pf-m-vertical {
-    @include pf-v5-c-divider--m-vertical;
+    @include pf-v6-c-divider--m-vertical;
   }
 
   // - Divider spacer insets
-  @each $spacer, $spacer-value in $pf-v5-c-divider--spacer-map {
+  @each $spacer, $spacer-value in $pf-v6-c-divider--spacer-map {
     @if $spacer == none {
       $spacer-value: 0%;
     }
@@ -71,23 +71,23 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
 // TODO: make responsive values opt in/out
 // stylelint-disable
 .#{$divider} {
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-divider--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-c-divider--breakpoint-map {
     $breakpoint-name: '-on-' + #{$breakpoint};
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-horizontal#{$breakpoint-name} {
-        @include pf-v5-c-divider--m-horizontal;
+        @include pf-v6-c-divider--m-horizontal;
       }
     }
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-vertical#{$breakpoint-name} {
-        @include pf-v5-c-divider--m-vertical;
+        @include pf-v6-c-divider--m-vertical;
       }
     }
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
-      @each $spacer, $spacer-value in $pf-v5-c-divider--spacer-map {
+    @include pf-v6-apply-breakpoint($breakpoint) {
+      @each $spacer, $spacer-value in $pf-v6-c-divider--spacer-map {
         &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
           @if $spacer == none {
             --#{$divider}--before--FlexBasis: 100%;

package/components/Drawer/drawer.scss

@@ -1,7 +1,7 @@
 // @debug $drawer; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-drawer--breakpoint-map: build-breakpoint-map("base", "lg", "xl", "2xl");
-$pf-v5-c-drawer--breakpoint-map--width: build-breakpoint-map("base", "lg", "xl", "2xl");
-$pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
+$pf-v6-c-drawer--breakpoint-map: build-breakpoint-map("base", "lg", "xl", "2xl");
+$pf-v6-c-drawer--breakpoint-map--width: build-breakpoint-map("base", "lg", "xl", "2xl");
+$pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
 :where(:root),
 :where(.#{$drawer}) {
@@ -125,7 +125,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   --#{$drawer}__splitter--m-vertical__splitter-handle--after--Width: #{pf-size-prem(4px)};
   --#{$drawer}__splitter--m-vertical__splitter-handle--after--Height: #{pf-size-prem(12px)};
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$drawer}__panel--MinWidth: var(--#{$drawer}__panel--xl--MinWidth);
   
     &.pf-m-panel-bottom {
@@ -153,12 +153,12 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 }
 
 .#{$drawer} {
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: --#{$drawer}--m-expanded__panel--BoxShadow,
     $ltr-val: var(--pf-t--global--box-shadow--lg--left),
     $rtl-val: var(--pf-t--global--box-shadow--lg--right)
   ); 
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: --#{$drawer}--m-expanded--m-panel-left__panel--BoxShadow,
     $ltr-val: var(--#{$pf-global}--BoxShadow--lg-right),
     $rtl-val: var(--#{$pf-global}--BoxShadow--lg-left)
@@ -181,10 +181,10 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       order: 0;
       margin-inline-end: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
 
-      @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%)}),
       ); 
     }
 
@@ -201,10 +201,10 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   // stylelint-disable selector-max-class
   &.pf-m-expanded {
     > .#{$drawer}__main > .#{$drawer}__panel {
-      @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%)}),
       ); 
     }
 
@@ -321,7 +321,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     --#{$drawer}__panel--BackgroundColor: transparent;
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
     --#{$drawer}__panel--FlexBasis:
       max(
         var(--#{$drawer}__panel--md--FlexBasis--min),
@@ -329,7 +329,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       );
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$drawer}__panel--md--FlexBasis: var(--#{$drawer}__panel--xl--FlexBasis);
 
     .#{$drawer}.pf-m-panel-bottom & {
@@ -355,7 +355,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 }
 
 // Remove tab focus
-@include pf-v5-animate-remove-tab-focus(".#{$drawer}__panel", var(--#{$drawer}__panel--TransitionDuration));
+@include pf-v6-animate-remove-tab-focus(".#{$drawer}__panel", var(--#{$drawer}__panel--TransitionDuration));
 
 // Panel head
 .#{$drawer}__head {
@@ -463,10 +463,10 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   inset-block-start: var(--#{$drawer}__splitter-handle--Top);
   inset-inline-start: var(--#{$drawer}__splitter-handle--Left);
 
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: transform,
     $ltr-val: translate(-50%, -50%),
-    $rtl-val: translate(#{pf-v5-calc-inverse(-50%)}, -50%),
+    $rtl-val: translate(#{pf-v6-calc-inverse(-50%)}, -50%),
   ); 
 
 
@@ -485,7 +485,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 }
 
 // Layout modifications happen after md breakpoint
-@media screen and (min-width: $pf-v5-global--breakpoint--md) {
+@media screen and (min-width: $pf-v6-global--breakpoint--md) {
   // Default
   .#{$drawer} {
     min-width: var(--#{$drawer}__panel--MinWidth);
@@ -625,15 +625,15 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 }
 
 // Responsive width modifiers
-@each $breakpoint, $breakpoint-value in $pf-v5-c-drawer--breakpoint-map--width {
+@each $breakpoint, $breakpoint-value in $pf-v6-c-drawer--breakpoint-map--width {
   $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
   @if $breakpoint == "base" {
     $breakpoint: "md";
   }
 
-  @include pf-v5-apply-breakpoint($breakpoint) {
-    @each $width-value in $pf-v5-c-drawer__panel--list--width {
+  @include pf-v6-apply-breakpoint($breakpoint) {
+    @each $width-value in $pf-v6-c-drawer__panel--list--width {
       .#{$drawer}__panel.pf-m-width-#{$width-value}#{$breakpoint-name} {
         --#{$drawer}__panel--md--FlexBasis: #{percentage(div($width-value, 100))};
       }
@@ -642,14 +642,14 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 }
 
 // Responsive modifiers
-@each $breakpoint, $breakpoint-value in $pf-v5-c-drawer--breakpoint-map {
+@each $breakpoint, $breakpoint-value in $pf-v6-c-drawer--breakpoint-map {
   $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
   @if $breakpoint == "base" {
     $breakpoint: "md";
   }
 
-  @include pf-v5-apply-breakpoint($breakpoint) {
+  @include pf-v6-apply-breakpoint($breakpoint) {
     // Drawer and inline
     .#{$drawer}.pf-m-inline#{$breakpoint-name},
     .#{$drawer}.pf-m-static#{$breakpoint-name} {
@@ -675,10 +675,10 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       > .#{$drawer}__main > .#{$drawer}__panel {
         margin-inline-start: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
 
-        @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%)}),
         ); 
       }
 
@@ -699,10 +699,10 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
           margin-inline-start: 0;
           margin-inline-end: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
 
-          @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%)}),
           ); 
         }