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

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 {
@@ -135,8 +135,8 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   }
 
   // Actions
-  --#{$drawer}__actions--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1.5); // TODO: add form element var
-  --#{$drawer}__actions--MarginRight: calc(var(--pf-t--global--spacer--xs) * -1.5); // TODO: add form element var
+  --#{$drawer}__actions--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
+  --#{$drawer}__actions--MarginRight: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
 
   // Box shadow
   --#{$drawer}__panel--BoxShadow: none;
@@ -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%)}),
           ); 
         }
 

package/components/Dropdown/dropdown.scss

@@ -1,5 +1,5 @@
 // @debug $dropdown; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 
 .#{$dropdown} {
   // Toggle
@@ -613,7 +613,7 @@ $pf-v5-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
   }
 
   .#{$dropdown}__toggle-text {
-    @include pf-v5-text-overflow;
+    @include pf-v6-text-overflow;
   }
 }
 
@@ -684,10 +684,10 @@ $pf-v5-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 .#{$dropdown}__menu {
   min-width: 100%;
 
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-dropdown--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-c-dropdown--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-align-right#{$breakpoint-name} {
        inset-inline-end: 0;
       }
@@ -815,6 +815,6 @@ $pf-v5-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/dropdown";
 
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-dropdown;
+@include pf-v6-theme-dark {
+  @include pf-v6-theme-dark-dropdown;
 }

package/components/Dropdown/themes/dark/dropdown.scss

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

package/components/DualListSelector/dual-list-selector.scss

@@ -170,10 +170,10 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
     --#{$dual-list-selector}__item-toggle--MarginBottom: 0;
 
     .#{$dual-list-selector}__item-toggle {
-      @include pf-v5-bidirectional-style(
+      @include pf-v6-bidirectional-style(
         $prop: transform,
         $ltr-val: translateX(var(--#{$dual-list-selector}__list__list__item-toggle--TranslateX)),
-        $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$dual-list-selector}__list__list__item-toggle--TranslateX))}),
+        $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$dual-list-selector}__list__list__item-toggle--TranslateX))}),
       ); 
 
       position: absolute;
@@ -288,7 +288,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
 }
 
 .#{$dual-list-selector}__item-text {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   flex-grow: 1;
   color: var(--#{$dual-list-selector}__item-text--Color);
@@ -308,7 +308,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
 }
 
 :is(.#{$dual-list-selector}__controls-item, .#{$dual-list-selector}__item-toggle-icon) {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 }
 
 .#{$dual-list-selector}__item-main {

package/components/ExpandableSection/expandable-section.scss

@@ -144,7 +144,7 @@
 }
 
 .#{$expandable-section}__toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   min-width: var(--#{$expandable-section}__toggle-icon--MinWidth);
   color: var(--#{$expandable-section}__toggle-icon--Color);

package/components/Form/form.scss

@@ -1,23 +1,23 @@
 // @debug $form; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
 
-@mixin pf-v5-c-form--m-horizontal {
+@mixin pf-v6-c-form--m-horizontal {
   // default horizontal styles applied at medium breakpoint
-  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
     @content;
   }
 
   // custom xs style since this isn't in our maps - maps are based on mobile first design. This may not even be a valid option based on design but I guess it doesn't hurt to add.
   &-on-xs {
-    @media screen and (min-width: $pf-v5-global--breakpoint--xs) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--xs) {
       @content;
     }
   }
 
   // loop to build the rest of the breakpoints
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-form--m-horizontal--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-c-form--m-horizontal--breakpoint-map {
     &-on-#{$breakpoint} {
-      @include pf-v5-apply-breakpoint($breakpoint) {
+      @include pf-v6-apply-breakpoint($breakpoint) {
         @content;
       }
     }
@@ -167,7 +167,7 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
       }
     }
 
-    @include pf-v5-c-form--m-horizontal {
+    @include pf-v6-c-form--m-horizontal {
       --#{$form}__group-label--PaddingBottom: 0;
 
       .#{$form}__group {
@@ -409,7 +409,7 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   transition: var(--#{$form}__field-group-toggle-icon--Transition);
   transform: rotate(var(--#{$form}__field-group-toggle-icon--Rotate));
 
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 }
 
 .#{$form}__field-group-header {

package/components/FormControl/form-control.css

@@ -16,8 +16,8 @@
   --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-form-control--Width: 100%;
   --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--md);
-  --pf-v6-c-form-control--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-form-control--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-form-control--PaddingTop: var(--pf-t--global--spacer--control--vertical--default);
+  --pf-v6-c-form-control--PaddingBottom: var(--pf-t--global--spacer--control--vertical--default);
   --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--inset--base);
   --pf-v6-c-form-control--PaddingLeft: var(--pf-v6-c-form-control--inset--base);
   --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
@@ -265,5 +265,5 @@
 }
 
 select ~ .pf-v6-c-form-control__utilities {
-  --pf-v5-c-form-control__utilities--PaddingRight: 0;
+  --pf-v6-c-form-control__utilities--PaddingRight: 0;
 }

package/components/FormControl/form-control.scss

@@ -18,8 +18,8 @@
 
   // padding
   --#{$form-control}--inset--base: var(--pf-t--global--spacer--md);
-  --#{$form-control}--PaddingTop: var(--pf-t--global--spacer--sm); // (--#{$pf-global}--spacer--form-element);
-  --#{$form-control}--PaddingBottom: var(--pf-t--global--spacer--sm); // var(--#{$pf-global}--spacer--form-element);
+  --#{$form-control}--PaddingTop: var(--pf-t--global--spacer--control--vertical--default);
+  --#{$form-control}--PaddingBottom: var(--pf-t--global--spacer--control--vertical--default);
   --#{$form-control}--PaddingRight: var(--#{$form-control}--inset--base);
   --#{$form-control}--PaddingLeft: var(--#{$form-control}--inset--base);
 
@@ -350,5 +350,5 @@
 }
 
 select ~ .#{$form-control}__utilities {
---pf-v5-c-form-control__utilities--PaddingRight: 0;
+  --#{$form-control}__utilities--PaddingRight: 0;
 }

package/components/Hint/hint.css

@@ -17,7 +17,7 @@
   --pf-v6-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
   --pf-v6-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
   --pf-v6-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
+  --pf-v6-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
 }
 
 .pf-v6-c-hint {

package/components/Hint/hint.scss

@@ -27,7 +27,7 @@
 
   // Hint Actions
   --#{$hint}__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
-  --#{$hint}__actions--c-dropdown--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1); // TODO form element spacer
+  --#{$hint}__actions--c-dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
 }
 
 .#{$hint} {

package/components/JumpLinks/jump-links.css

@@ -42,8 +42,8 @@
   --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-jump-links__label--MarginBottom: var(--pf-t--global--spacer--md);
   --pf-v6-c-jump-links__label--Display: block;
-  --pf-v6-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-v6-global--spacer--form-element));
-  --pf-v6-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-v6-global--spacer--form-element));
+  --pf-v6-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
+  --pf-v6-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
   --pf-v6-c-jump-links__toggle--MarginBottom: var(--pf-v6-c-jump-links__toggle--MarginBottom--base);
   --pf-v6-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-v6-c-jump-links__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
   --pf-v6-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));

package/components/JumpLinks/jump-links.scss

@@ -1,5 +1,5 @@
 // @debug $jump-links; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 
 :where(:root),
 :where(.#{$jump-links}) {
@@ -56,8 +56,8 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
   --#{$jump-links}__label--Display: block;
 
   // toggle
-  --#{$jump-links}__toggle--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element));
-  --#{$jump-links}__toggle--MarginBottom--base: calc(-1 * var(--#{$pf-global}--spacer--form-element));
+  --#{$jump-links}__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
+  --#{$jump-links}__toggle--MarginBottom--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
   --#{$jump-links}__toggle--MarginBottom: var(--#{$jump-links}__toggle--MarginBottom--base);
   --#{$jump-links}--m-expanded__toggle--MarginBottom: calc(var(--#{$jump-links}__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
   --#{$jump-links}__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
@@ -101,10 +101,10 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
     flex-direction: column;
   }
 
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-jump-links--m-expandable--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-c-jump-links--m-expandable--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-expandable#{$breakpoint-name} {
         --#{$jump-links}__list--Display: none;
         --#{$jump-links}__toggle--Display: block;
@@ -229,7 +229,7 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
 }
 
 .#{$jump-links}__toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
   color: var(--#{$jump-links}__toggle-icon--Color);

package/components/Label/label-group.scss

@@ -124,7 +124,7 @@
 }
 
 .#{$label-group}__label {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   max-width: var(--#{$label-group}__label--MaxWidth);
 }

package/components/Label/label.scss

@@ -536,7 +536,7 @@
 }
 
 .#{$label}__text {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   max-width: var(--#{$label}__text--MaxWidth);
 }
@@ -564,7 +564,7 @@
 
   // truncate input fields
   @at-root input#{&} {
-    @include pf-v5-text-overflow;
+    @include pf-v6-text-overflow;
   }
 }
 

package/components/LogViewer/log-viewer.scss

@@ -72,7 +72,7 @@
     --#{$log-viewer}__main--BorderWidth: var(--#{$log-viewer}--m-dark__main--BorderWidth);
 
     .#{$log-viewer}__main {
-      @include pf-v5-t-dark;
+      @include pf-v6-t-dark;
 
       --#{$log-viewer}__main--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
       --#{$log-viewer}__main--BorderColor: var(--#{$pf-global}--BorderColor--100);
@@ -221,6 +221,6 @@
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/log-viewer";
 
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-log-viewer;
+@include pf-v6-theme-dark {
+  @include pf-v6-theme-dark-log-viewer;
 }

package/components/LogViewer/themes/dark/log-viewer.scss

@@ -1,7 +1,7 @@
 @import "../../../../sass-utilities/themes/dark/all";
 
-@mixin pf-v5-theme-dark-log-viewer() {
+@mixin pf-v6-theme-dark-log-viewer() {
   .#{$log-viewer}.pf-m-dark .#{$log-viewer}__main {
-    @include pf-v5-theme-dark--t-dark;
+    @include pf-v6-theme-dark--t-dark;
   }
 }

package/components/Login/login.scss

@@ -12,7 +12,7 @@
   --#{$login}__container--PaddingRight: #{pf-size-prem(98px)};
   --#{$login}__container--xl--GridTemplateColumns: #{pf-size-prem(544px)} minmax(auto, #{pf-size-prem(544px)}); // unique to the login layout
 
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$login}__container--MaxWidth: var(--#{$login}__container--xl--MaxWidth);
   }
 
@@ -21,7 +21,7 @@
   --#{$login}__header--PaddingLeft: var(--pf-t--global--spacer--md);
   --#{$login}__header--PaddingRight: var(--pf-t--global--spacer--md);
 
-  @media (min-width: $pf-v5-global--breakpoint--sm) {
+  @media (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$login}__header--PaddingRight: 0;
     --#{$login}__header--PaddingLeft: 0;
   }
@@ -31,7 +31,7 @@
   --#{$login}__header--c-brand--MarginBottom: var(--pf-t--global--spacer--lg);
   --#{$login}__header--c-brand--xl--MarginBottom: var(--pf-t--global--spacer--2xl);
 
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$login}__header--MarginBottom: var(--#{$login}__header--xl--MarginBottom);
     --#{$login}__header--c-brand--MarginBottom: var(--#{$login}__header--c-brand--xl--MarginBottom);
   }
@@ -41,7 +41,7 @@
   --#{$login}__main--MarginBottom: var(--pf-t--global--spacer--lg);
   --#{$login}__main--BorderRadius: var(--pf-t--global--border--radius--large);
 
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$login}__main--MarginBottom: 0;
   }
 
@@ -61,7 +61,7 @@
   --#{$login}__main-header-desc--FontSize: var(--pf-t--global--font--size--body--default);
 
 
-  @media (min-width: $pf-v5-global--breakpoint--md) {
+  @media (min-width: $pf-v6-global--breakpoint--md) {
     --#{$login}__main-header--PaddingRight: var(--#{$login}__main-header--md--PaddingRight);
     --#{$login}__main-header--PaddingLeft: var(--#{$login}__main-header--md--PaddingLeft);
     --#{$login}__main-header-desc--MarginBottom: var(--#{$login}__main-header-desc--md--MarginBottom);
@@ -74,7 +74,7 @@
   --#{$login}__main-body--md--PaddingRight: var(--pf-t--global--spacer--2xl);
   --#{$login}__main-body--md--PaddingLeft: var(--pf-t--global--spacer--2xl);
 
-  @media (min-width: $pf-v5-global--breakpoint--md) {
+  @media (min-width: $pf-v6-global--breakpoint--md) {
     --#{$login}__main-body--PaddingRight: var(--#{$login}__main-body--md--PaddingRight);
     --#{$login}__main-body--PaddingLeft: var(--#{$login}__main-body--md--PaddingLeft);
   }
@@ -100,7 +100,7 @@
   --#{$login}__footer--PaddingLeft: var(--pf-t--global--spacer--md);
   --#{$login}__footer--PaddingRight: var(--pf-t--global--spacer--md);
 
-  @media (min-width: $pf-v5-global--breakpoint--sm) {
+  @media (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$login}__footer--PaddingRight: 0;
     --#{$login}__footer--PaddingLeft: 0;
   }
@@ -108,7 +108,7 @@
   --#{$login}__footer--c-list--PaddingTop: var(--pf-t--global--spacer--md);
   --#{$login}__footer--c-list--xl--PaddingTop: var(--pf-t--global--spacer--2xl);
 
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$login}__footer--c-list--PaddingTop: var(--#{$login}__footer--c-list--xl--PaddingTop);
   }
 }
@@ -120,7 +120,7 @@
   padding-block-start: var(--#{$login}--PaddingTop);
   padding-block-end: var(--#{$login}--PaddingBottom);
 
-  @media (min-width: $pf-v5-global--breakpoint--sm) {
+  @media (min-width: $pf-v6-global--breakpoint--sm) {
     align-items: center;
   }
 }
@@ -130,7 +130,7 @@
   max-width: var(--#{$login}__container--MaxWidth);
 
   // Large viewports
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     display: grid;
     grid-template-areas:
       "main header"
@@ -149,7 +149,7 @@
   padding-inline-start: var(--#{$login}__header--PaddingLeft);
   padding-inline-end: var(--#{$login}__header--PaddingRight);
 
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     margin-block-start: var(--#{$login}__header--xl--MarginTop);
   }
 
@@ -187,7 +187,7 @@
   padding-inline-start: var(--#{$login}__main-header--PaddingLeft);
   padding-inline-end: var(--#{$login}__main-header--PaddingRight);
 
-  @media (min-width: $pf-v5-global--breakpoint--md) {
+  @media (min-width: $pf-v6-global--breakpoint--md) {
     grid-template-columns: 1fr auto;
   }
 }
@@ -197,7 +197,7 @@
   grid-row: auto;
   grid-column: auto;
 
-  @media (min-width: $pf-v5-global--breakpoint--md) {
+  @media (min-width: $pf-v6-global--breakpoint--md) {
     grid-row: 1;
     grid-column: 2 / 3;
   }