@patternfly/patternfly 6.5.2 → 6.6.0-prerelease.2

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

@@ -145,9 +145,9 @@
   max-height: var(--pf-v6-c-dual-list-selector__menu--MaxHeight);
   margin-block-start: var(--pf-v6-c-dual-list-selector__menu--MarginBlockStart);
   overflow: auto;
+  outline-offset: 2px;
   border: var(--pf-v6-c-dual-list-selector__menu--BorderWidth) solid var(--pf-v6-c-dual-list-selector__menu--BorderColor);
   border-radius: var(--pf-v6-c-dual-list-selector__menu--BorderRadius);
-  outline-offset: 2px;
 }
 
 .pf-v6-c-dual-list-selector__list {
@@ -183,25 +183,25 @@
   --pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart);
 }
 .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expandable > .pf-v6-c-dual-list-selector__list {
-  max-height: 0;
   visibility: hidden;
+  max-height: 0;
   opacity: var(--pf-v6-c-dual-list-selector__list--Opacity);
+  translate: 0 var(--pf-v6-c-dual-list-selector__list--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-dual-list-selector__list--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--slide), 0s, 0s;
   transition-property: opacity, translate, visibility, max-height;
-  translate: 0 var(--pf-v6-c-dual-list-selector__list--TranslateY);
 }
 .pf-v6-c-dual-list-selector__list-item.pf-m-expanded {
   --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
 }
 .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expanded > .pf-v6-c-dual-list-selector__list {
-  max-height: 99999px;
   visibility: revert;
+  max-height: 99999px;
   opacity: var(--pf-v6-c-dual-list-selector--m-expanded__list--Opacity);
+  translate: 0 var(--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY);
   transition-delay: 0s;
   transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide), 0s, 0s;
-  translate: 0 var(--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY);
 }
 .pf-v6-c-dual-list-selector__list-item.pf-m-disabled {
   --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color);
@@ -336,10 +336,10 @@
   min-width: var(--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth);
   color: var(--pf-v6-c-dual-list-selector__item-toggle-icon--Color, inherit);
   text-align: center;
+  transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
   transition-timing-function: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
 }
 
 .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {

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

@@ -184,9 +184,9 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
   max-height: var(--#{$dual-list-selector}__menu--MaxHeight);
   margin-block-start: var(--#{$dual-list-selector}__menu--MarginBlockStart);
   overflow: auto;
+  outline-offset: 2px; // push the focus outline out so that it is not broken by the list item row background
   border: var(--#{$dual-list-selector}__menu--BorderWidth) solid var(--#{$dual-list-selector}__menu--BorderColor);
   border-radius: var(--#{$dual-list-selector}__menu--BorderRadius);
-  outline-offset: 2px; // push the focus outline out so that it is not broken by the list item row background
 }
 
 .#{$dual-list-selector}__list {
@@ -226,14 +226,14 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
 
     > .#{$dual-list-selector}__list {
       .#{$dual-list-selector}.pf-m-animate-expand & { // TODO - remove opt-in class in a breaking change
-        max-height: 0;
         visibility: hidden;
+        max-height: 0;
         opacity: var(--#{$dual-list-selector}__list--Opacity);
+        translate: 0 var(--#{$dual-list-selector}__list--TranslateY);
         transition-delay: 0s, 0s, var(--#{$dual-list-selector}__list--TransitionDuration--fade), var(--#{$dual-list-selector}__list--TransitionDuration--fade);
         transition-timing-function: var(--#{$dual-list-selector}__list--TransitionTimingFunction);
         transition-duration: var(--#{$dual-list-selector}__list--TransitionDuration--fade), var(--#{$dual-list-selector}__list--TransitionDuration--slide), 0s, 0s;
         transition-property: opacity, translate, visibility, max-height;
-        translate: 0 var(--#{$dual-list-selector}__list--TranslateY);
       }
     }
   }
@@ -243,12 +243,12 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
 
     > .#{$dual-list-selector}__list {
       .#{$dual-list-selector}.pf-m-animate-expand & {
-        max-height: 99999px;
         visibility: revert;
+        max-height: 99999px;
         opacity: var(--#{$dual-list-selector}--m-expanded__list--Opacity);
+        translate: 0 var(--#{$dual-list-selector}--m-expanded__list--TranslateY);
         transition-delay: 0s;
         transition-duration: var(--#{$dual-list-selector}__list--TransitionDuration--expand--fade), var(--#{$dual-list-selector}__list--TransitionDuration--expand--slide), 0s, 0s;
-        translate: 0 var(--#{$dual-list-selector}--m-expanded__list--TranslateY);
       }
     }
   }
@@ -401,10 +401,10 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
   min-width: var(--#{$dual-list-selector}__item-toggle-icon--MinWidth);
   color: var(--#{$dual-list-selector}__item-toggle-icon--Color, inherit);
   text-align: center;
+  transform: rotate(var(--#{$dual-list-selector}__item-toggle-icon--Rotate));
   transition-timing-function: var(--#{$dual-list-selector}__item-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--#{$dual-list-selector}__item-toggle-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--#{$dual-list-selector}__item-toggle-icon--Rotate));
 }
 
 // stylelint-disable no-duplicate-selectors

package/components/ExpandableSection/expandable-section.css

@@ -125,8 +125,8 @@
   display: inline-block;
   min-width: var(--pf-v6-c-expandable-section__toggle-icon--MinWidth);
   color: var(--pf-v6-c-expandable-section__toggle-icon--Color);
-  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
   transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
+  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
 }
 .pf-v6-c-expandable-section__toggle-icon.pf-m-expand-top {
   --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
@@ -141,13 +141,13 @@
   display: revert;
 }
 .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) > .pf-v6-c-expandable-section__content {
+  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
   max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
   overflow: var(--pf-v6-c-expandable-section__content--Overflow, hidden);
-  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
   opacity: var(--pf-v6-c-expandable-section__content--Opacity);
+  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
   transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), 0s, 0s;
   transition-property: opacity, translate, visibility, max-height;
-  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
 }

package/components/ExpandableSection/expandable-section.scss

@@ -152,8 +152,8 @@
   display: inline-block;
   min-width: var(--#{$expandable-section}__toggle-icon--MinWidth);
   color: var(--#{$expandable-section}__toggle-icon--Color);
-  transition: var(--#{$expandable-section}__toggle-icon--Transition); // TODO remove shorthand in breaking change
   transform: rotate(var(--#{$expandable-section}__toggle-icon--Rotate));
+  transition: var(--#{$expandable-section}__toggle-icon--Transition); // TODO remove shorthand in breaking change
 
   &.pf-m-expand-top { // TODO: Remove this block in breaking change in favor of using modifier on outer expandable section wrapper
     --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}__toggle-icon--m-expand-top--Rotate);
@@ -170,14 +170,14 @@
   }
 
   .#{$expandable-section}:where(:not(.pf-m-truncate)) > & {
+    visibility: var(--#{$expandable-section}__content--Visibility, hidden);
     max-height: var(--#{$expandable-section}__content--MaxHeight, 0);
     overflow: var(--#{$expandable-section}__content--Overflow, hidden);
-    visibility: var(--#{$expandable-section}__content--Visibility, hidden);
     opacity: var(--#{$expandable-section}__content--Opacity);
+    translate: 0 var(--#{$expandable-section}__content--TranslateY);
     transition-delay: 0s, 0s, var(--#{$expandable-section}__content--TransitionDelay--hide, 0s), var(--#{$expandable-section}__content--TransitionDelay--hide, 0s);
     transition-timing-function: var(--#{$expandable-section}__content--TransitionTimingFunction);
     transition-duration: var(--#{$expandable-section}__content--TransitionDuration--fade), var(--#{$expandable-section}__content--TransitionDuration--slide), 0s, 0s;
     transition-property: opacity, translate, visibility, max-height;
-    translate: 0 var(--#{$expandable-section}__content--TranslateY);
   }
 }

package/components/Form/form.css

@@ -109,7 +109,7 @@
   .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -137,7 +137,7 @@
   .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -165,7 +165,7 @@
   .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -193,7 +193,7 @@
   .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -221,7 +221,7 @@
   .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -249,7 +249,7 @@
   .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -277,7 +277,7 @@
   .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group {
     display: grid;
     grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
-    grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+    column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label {
     padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
@@ -450,14 +450,14 @@
   --pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
 }
 .pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
+  visibility: visible;
   max-height: 99999px;
   padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
-  visibility: visible;
   opacity: 1;
+  translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
   transition-delay: 0s;
   transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
-  translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
 }
 
 .pf-v6-c-form__field-group-toggle {
@@ -479,10 +479,10 @@
   display: inline-block;
   min-width: var(--pf-v6-c-form__field-group-toggle-icon--MinWidth);
   text-align: center;
+  transform: rotate(var(--pf-v6-c-form__field-group-toggle-icon--Rotate));
   transition-timing-function: var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--pf-v6-c-form__field-group-toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-form__field-group-toggle-icon {
   scale: -1 1;
@@ -531,15 +531,15 @@
   padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
 }
 .pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
+  visibility: hidden;
   max-height: 0;
   padding-block-start: 0;
   padding-block-end: 0;
-  visibility: hidden;
   opacity: 0;
+  translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade);
   transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
   transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
-  translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
 }
 
 .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {

package/components/Form/form.scss

@@ -195,7 +195,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
       .#{$form}__group {
         display: grid;
         grid-template-columns: var(--#{$form}--m-horizontal__group-label--md--GridColumnWidth) var(--#{$form}--m-horizontal__group-control--md--GridColumnWidth);
-        grid-column-gap: var(--#{$form}--m-horizontal__group-label--md--GridColumnGap);
+        column-gap: var(--#{$form}--m-horizontal__group-label--md--GridColumnGap);
       }
 
       .#{$form}__group-label {
@@ -408,14 +408,14 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
     }
 
     &.pf-m-expandable > .#{$form}__field-group-body { // TODO - remove .pf-m-expandable in a breaking change, it shouldn't be needed. Only needed now so that these styles are an opt-in behind .pf-m-expandable
+      visibility: visible;
       max-height: 99999px;
       padding-block-start: var(--#{$form}__field-group-body--PaddingBlockStart);
       padding-block-end: var(--#{$form}__field-group-body--PaddingBlockEnd);
-      visibility: visible;
       opacity: 1;
+      translate: 0 var(--#{$form}__field-group--m-expanded__field-group-body--TranslateY);
       transition-delay: 0s;
       transition-duration: var(--#{$form}__field-group-body--TransitionDuration--expand--fade), var(--#{$form}__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
-      translate: 0 var(--#{$form}__field-group--m-expanded__field-group-body--TranslateY);
     }
   }
 }
@@ -440,10 +440,10 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   display: inline-block;
   min-width: var(--#{$form}__field-group-toggle-icon--MinWidth);
   text-align: center;
+  transform: rotate(var(--#{$form}__field-group-toggle-icon--Rotate));
   transition-timing-function: var(--#{$form}__field-group-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--#{$form}__field-group-toggle-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--#{$form}__field-group-toggle-icon--Rotate));
 
   @include pf-v6-mirror-inline-on-rtl;
 }
@@ -491,15 +491,15 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   padding-block-end: var(--#{$form}__field-group-body--PaddingBlockEnd);
 
   @at-root .#{$form}__field-group.pf-m-expandable > & {
+    visibility: hidden;
     max-height: 0;
     padding-block-start: 0;
     padding-block-end: 0;
-    visibility: hidden;
     opacity: 0;
+    translate: 0 var(--#{$form}__field-group-body--TranslateY);
     transition-delay: 0s, 0s, var(--#{$form}__field-group-body--TransitionDuration--collapse--fade), var(--#{$form}__field-group-body--TransitionDuration--collapse--fade), var(--#{$form}__field-group-body--TransitionDuration--collapse--fade), var(--#{$form}__field-group-body--TransitionDuration--collapse--fade);
     transition-duration: var(--#{$form}__field-group-body--TransitionDuration--collapse--fade), var(--#{$form}__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
     transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
-    translate: 0 var(--#{$form}__field-group-body--TranslateY);
   }
 
   > .#{$form}__field-group {

package/components/FormControl/form-control.css

@@ -147,10 +147,10 @@
   padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
   color: var(--pf-v6-c-form-control--Color);
   appearance: none;
+  outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
   background-color: transparent;
   border: none;
   border-radius: var(--pf-v6-c-form-control--BorderRadius);
-  outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
 }
 .pf-v6-c-form-control > ::placeholder {
   color: var(--pf-v6-c-form-control--m-placeholder--Color);

package/components/FormControl/form-control.scss

@@ -182,6 +182,7 @@
     border-radius: var(--#{$form-control}--before--BorderRadius);
   }
 
+  // stylelint-disable selector-max-type
   > :is(input, select, textarea) {
     grid-row: 1 / 2;
     grid-column: 1 / -1;
@@ -191,11 +192,12 @@
     padding-inline-end: var(--#{$form-control}--PaddingInlineEnd);
     color: var(--#{$form-control}--Color);
     appearance: none;
+    outline-offset: var(--#{$form-control}--OutlineOffset);
     background-color: transparent;
     border: none;
     border-radius: var(--#{$form-control}--BorderRadius);
-    outline-offset: var(--#{$form-control}--OutlineOffset);
   }
+  // stylelint-enable selector-max-type
 
   > ::placeholder {
     color: var(--#{$form-control}--m-placeholder--Color); // TODO update to set --#{$form-control}--Color in breaking change - also look for any other place to do that in this component

package/components/Hero/hero.css

@@ -59,8 +59,8 @@
 :where(.pf-v6-theme-glass) .pf-v6-c-hero.pf-m-glass {
   --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
   --pf-v6-c-hero--BackgroundColor: var(--pf-v6-c-hero--m-glass--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-hero--m-glass--BackdropFilter);
   box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
+  backdrop-filter: var(--pf-v6-c-hero--m-glass--BackdropFilter);
 }
 :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
   --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);

package/components/Hero/hero.scss

@@ -70,8 +70,8 @@
     --#{$hero}--BorderColor: var(--#{$hero}--m-glass--BorderColor);
     --#{$hero}--BackgroundColor: var(--#{$hero}--m-glass--BackgroundColor);
 
-    backdrop-filter: var(--#{$hero}--m-glass--BackdropFilter);
     box-shadow: var(--#{$hero}--m-glass--BoxShadow);
+    backdrop-filter: var(--#{$hero}--m-glass--BackdropFilter);
   }
 
   :root:where(.#{$pf-prefix}theme-dark) & {

package/components/Hint/hint.css

@@ -21,7 +21,7 @@
 .pf-v6-c-hint {
   display: grid;
   grid-template-columns: 1fr auto;
-  grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
+  row-gap: var(--pf-v6-c-hint--GridRowGap);
   padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);

package/components/Hint/hint.scss

@@ -31,7 +31,7 @@
 .#{$hint} {
   display: grid;
   grid-template-columns: 1fr auto;
-  grid-row-gap: var(--#{$hint}--GridRowGap);
+  row-gap: var(--#{$hint}--GridRowGap);
   padding-block-start: var(--#{$hint}--PaddingBlockStart);
   padding-block-end: var(--#{$hint}--PaddingBlockEnd);
   padding-inline-start: var(--#{$hint}--PaddingInlineStart);

package/components/InputGroup/input-group.css

@@ -55,20 +55,20 @@
   transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
 }
 .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
+  visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
   flex-grow: 1;
   max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
-  visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
   opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
+  transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
+  scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
   transition-delay: 0s, 0s, var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
   transition-property: opacity, scale, visibility, max-width;
-  transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
-  scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
 }
 .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
-  max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
   visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
+  max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
   opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
   transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
@@ -76,8 +76,8 @@
   transition-property: opacity, visibility, max-width;
 }
 .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
-  max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
   visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
+  max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
   opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
   transition-delay: 0s, var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);

package/components/InputGroup/input-group.scss

@@ -72,22 +72,22 @@
 
     .#{$input-group}__item {
       &.pf-m-search-input {
+        visibility: var(--#{$input-group}__item--m-search-text-input--Visibility, hidden);
         flex-grow: 1;
         max-width: var(--#{$input-group}__item--m-search-text-input--MaxWidth, 0);
-        visibility: var(--#{$input-group}__item--m-search-text-input--Visibility, hidden);
         opacity: var(--#{$input-group}__item--m-search-text-input--Opacity, 0);
+        transform-origin: var(--#{$input-group}__item--m-search-text-input--TransformOriginX) center;
+        scale: var(--#{$input-group}__item--m-search-text-input--ScaleX) 1;
         transition-delay: 0s, 0s, var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade), var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade);
         transition-timing-function: var(--#{$input-group}__item--m-search-text-input--TransitionTimingFunction);
         transition-duration: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade), var(--#{$input-group}__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
         transition-property: opacity, scale, visibility, max-width;
-        transform-origin: var(--#{$input-group}__item--m-search-text-input--TransformOriginX) center;
-        scale: var(--#{$input-group}__item--m-search-text-input--ScaleX) 1;
       }
 
       // the expand button (magnifying glass)
       &.pf-m-search-expand {
-        max-width: var(--#{$input-group}__item--m-search-expand--MaxWidth, 100%);
         visibility: var(--#{$input-group}__item--m-search-expand--Visibility, visible);
+        max-width: var(--#{$input-group}__item--m-search-expand--MaxWidth, 100%);
         opacity: var(--#{$input-group}__item--m-search-expand--Opacity, 1);
         transition-delay: var(--#{$input-group}__item--m-search-action--TransitionDuration--fade);
         transition-timing-function: var(--#{$input-group}__item--m-search-expand--TransitionTimingFunction);
@@ -97,8 +97,8 @@
 
       // other input group items adjacent to the search input that are shown when expanded
       &.pf-m-search-action {
-        max-width: var(--#{$input-group}__item--m-search-action--MaxWidth, 0);
         visibility: var(--#{$input-group}__item--m-search-action--Visibility, hidden);
+        max-width: var(--#{$input-group}__item--m-search-action--MaxWidth, 0);
         opacity: var(--#{$input-group}__item--m-search-action--Opacity, 0);
         transition-delay: 0s, var(--#{$input-group}__item--m-search-action--TransitionDuration--fade), var(--#{$input-group}__item--m-search-action--TransitionDuration--fade);
         transition-timing-function: var(--#{$input-group}__item--m-search-action--TransitionTimingFunction);

package/components/JumpLinks/jump-links.css

@@ -251,8 +251,8 @@
 .pf-v6-c-jump-links__toggle-icon {
   display: inline-block;
   color: var(--pf-v6-c-jump-links__toggle-icon--Color);
+  transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
   transition-timing-function: var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
 }

package/components/JumpLinks/jump-links.scss

@@ -232,8 +232,8 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
 
   display: inline-block;
   color: var(--#{$jump-links}__toggle-icon--Color);
+  transform: rotate(var(--#{$jump-links}__toggle-icon--Rotate));
   transition-timing-function: var(--#{$jump-links}__toggle-icon--TransitionTimingFunction);
   transition-duration: var(--#{$jump-links}__toggle-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--#{$jump-links}__toggle-icon--Rotate));
 }

package/components/Label/label.css

@@ -208,9 +208,9 @@
   font-size: var(--pf-v6-c-label--FontSize);
   white-space: nowrap;
   background: transparent;
-  isolation: isolate;
   border: 0;
   border-radius: var(--pf-v6-c-label--BorderRadius);
+  isolation: isolate;
 }
 .pf-v6-c-label.pf-m-blue {
   --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);

package/components/Label/label.scss

@@ -266,9 +266,9 @@
   font-size: var(--#{$label}--FontSize);
   white-space: nowrap;
   background: transparent;
-  isolation: isolate;
   border: 0;
   border-radius: var(--#{$label}--BorderRadius);
+  isolation: isolate;
 
   &.pf-m-blue {
     --#{$label}--BackgroundColor: var(--#{$label}--m-blue--BackgroundColor);

package/components/Login/login.css

@@ -140,7 +140,7 @@
     display: grid;
     grid-template-areas: "main header" "main footer" "main .";
     grid-template-columns: var(--pf-v6-c-login__container--xl--GridTemplateColumns);
-    grid-column-gap: var(--pf-v6-c-login__container--xl--GridColumnGap);
+    column-gap: var(--pf-v6-c-login__container--xl--GridColumnGap);
     justify-content: center;
     padding-inline-start: var(--pf-v6-c-login__container--PaddingInlineStart);
     padding-inline-end: var(--pf-v6-c-login__container--PaddingInlineEnd);
@@ -166,10 +166,10 @@
   align-self: start;
   margin-block-end: var(--pf-v6-c-login__main--MarginBlockEnd);
   background-color: var(--pf-v6-c-login__main--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-login__main--BackdropFilter);
   border: var(--pf-v6-c-login__main--BorderWidth) solid var(--pf-v6-c-login__main--BorderColor);
   border-radius: var(--pf-v6-c-login__main--BorderRadius);
   box-shadow: var(--pf-v6-c-login__main--BoxShadow);
+  backdrop-filter: var(--pf-v6-c-login__main--BackdropFilter);
 }
 .pf-v6-c-login__main > :first-child:not(.pf-v6-c-login__main-header) {
   padding-block-start: var(--pf-v6-c-login__main-header--PaddingBlockStart);

package/components/Login/login.scss

@@ -141,7 +141,7 @@
       "main footer"
       "main .";
     grid-template-columns: var(--#{$login}__container--xl--GridTemplateColumns);
-    grid-column-gap: var(--#{$login}__container--xl--GridColumnGap);
+    column-gap: var(--#{$login}__container--xl--GridColumnGap);
     justify-content: center;
     padding-inline-start: var(--#{$login}__container--PaddingInlineStart);
     padding-inline-end: var(--#{$login}__container--PaddingInlineEnd);
@@ -167,10 +167,10 @@
   align-self: start;
   margin-block-end: var(--#{$login}__main--MarginBlockEnd);
   background-color: var(--#{$login}__main--BackgroundColor);
-  backdrop-filter: var(--#{$login}__main--BackdropFilter);
   border: var(--#{$login}__main--BorderWidth) solid var(--#{$login}__main--BorderColor);
   border-radius: var(--#{$login}__main--BorderRadius);
   box-shadow: var(--#{$login}__main--BoxShadow);
+  backdrop-filter: var(--#{$login}__main--BackdropFilter);
 
   // If the first child isn't a header, then we need to put the header's top padding there
   > :first-child:not(.#{$login}__main-header) {

package/components/Masthead/masthead.css

@@ -240,9 +240,9 @@
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
   background-color: var(--pf-t--global--background--color--glass--primary--default);
-  backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
   border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
   box-shadow: var(--pf-t--global--box-shadow--glass--default);
+  backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
 }
 
 .pf-v6-c-masthead__main {

package/components/Masthead/masthead.scss

@@ -260,9 +260,9 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   // placeholder for banded
   @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-docked) {
     background-color: var(--pf-t--global--background--color--glass--primary--default);
-    backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
     border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
     box-shadow: var(--pf-t--global--box-shadow--glass--default);
+    backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
   }
 }
 

package/components/Menu/menu.css

@@ -321,8 +321,8 @@
 }
 
 .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list {
-  overflow: hidden;
   visibility: visible;
+  overflow: hidden;
   transition: var(--pf-v6-c-menu--m-drilldown__list--Transition);
 }
 .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list {
@@ -348,8 +348,8 @@
   outline-offset: var(--pf-v6-c-menu--OutlineOffset);
 }
 .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list {
-  overflow: visible;
   visibility: hidden;
+  overflow: visible;
 }
 .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-divider,
 .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item:not(.pf-m-current-path) {
@@ -490,10 +490,10 @@
   color: var(--pf-v6-c-menu__item--Color);
   text-align: start;
   text-decoration-line: none;
+  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
   background-color: var(--pf-v6-c-menu__item--BackgroundColor);
   border: 0;
   border-radius: var(--pf-v6-c-menu__item--BorderRadius);
-  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
   --pf-v6-hidden-visible--visible--Display: flex;
   --pf-v6-hidden-visible--hidden--Display: none;
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
@@ -587,7 +587,7 @@
 .pf-v6-c-menu__item-description {
   font-size: var(--pf-v6-c-menu__item-description--FontSize);
   color: var(--pf-v6-c-menu__item-description--Color);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .pf-v6-c-menu__item-check .pf-v6-c-check {