@patternfly/patternfly 6.5.0-prerelease.33 → 6.5.0-prerelease.35

package/components/DataList/data-list.css

@@ -412,6 +412,14 @@
   --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
+}
+@media screen and (min-width: 36rem) {
+  .pf-v6-c-data-list {
+    --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
+    --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
+  }
+}
+.pf-v6-c-data-list {
   --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
   --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -421,6 +429,14 @@
   --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
   --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-data-list__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+}
+@media screen and (min-width: 36rem) {
+  .pf-v6-c-data-list {
+    --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
+    --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
+  }
+}
+.pf-v6-c-data-list {
   --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-data-list__item-row--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -516,18 +532,6 @@
   --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
 }
-@media screen and (min-width: 36rem) {
-  .pf-v6-c-data-list {
-    --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
-    --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
-  }
-}
-@media screen and (min-width: 36rem) {
-  .pf-v6-c-data-list {
-    --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
-    --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
-  }
-}
 
 .pf-v6-c-data-list {
   font-size: var(--pf-v6-c-data-list--FontSize);
@@ -690,12 +694,6 @@
   --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);
-  gap: var(--pf-v6-c-data-list__item-action--Gap);
-  align-content: flex-start;
-  align-items: flex-start;
-  padding-block-start: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list__item-action--PaddingBlockStart--offset));
-  padding-block-end: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset));
-  margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
 }
 .pf-v6-c-data-list__item-action.pf-m-hidden {
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -740,6 +738,14 @@
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
+.pf-v6-c-data-list__item-action {
+  gap: var(--pf-v6-c-data-list__item-action--Gap);
+  align-content: flex-start;
+  align-items: flex-start;
+  padding-block-start: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list__item-action--PaddingBlockStart--offset));
+  padding-block-end: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset));
+  margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
+}
 
 .pf-v6-c-data-list__toggle {
   margin-block-start: var(--pf-v6-c-data-list__toggle--MarginBlockStart);
@@ -747,15 +753,16 @@
   margin-inline-start: var(--pf-v6-c-data-list__toggle--MarginInlineStart);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-data-list__toggle-icon {
   height: var(--pf-v6-c-data-list__toggle-icon--Height);
   pointer-events: none;
   transition: var(--pf-v6-c-data-list__toggle-icon--Transition);
   transform: rotate(var(--pf-v6-c-data-list__toggle-icon--Rotate));
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
-  scale: -1 1;
-}
 
 .pf-v6-c-data-list__item-content {
   display: grid;

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

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

package/components/DescriptionList/description-list.css

@@ -16,6 +16,13 @@
   --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
+}
+@media screen and (min-width: 36rem) {
+  .pf-v6-c-description-list {
+    --pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
+  }
+}
+.pf-v6-c-description-list {
   --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-description-list__term-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -44,11 +51,6 @@
   --pf-v6-c-description-list--m-horizontal__term--width-on-2xl: inherit;
   --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width);
 }
-@media screen and (min-width: 36rem) {
-  .pf-v6-c-description-list {
-    --pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
-  }
-}
 @media (min-width: 36rem) {
   .pf-v6-c-description-list {
     --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width));

package/components/DescriptionList/description-list.scss

@@ -195,7 +195,11 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
 // stylelint-disable no-duplicate-selectors
 .#{$description-list} {
   @each $breakpoint, $breakpoint-value in $pf-v6-c-description-list--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-1-col#{$breakpoint-name} {

package/components/Divider/divider.css

@@ -13,11 +13,6 @@
   --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);
-  flex-shrink: 0;
-  align-items: stretch;
-  align-self: stretch;
-  justify-content: center;
-  border: 0;
 }
 .pf-v6-c-divider.pf-m-hidden {
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -62,6 +57,13 @@
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
+.pf-v6-c-divider {
+  flex-shrink: 0;
+  align-items: stretch;
+  align-self: stretch;
+  justify-content: center;
+  border: 0;
+}
 .pf-v6-c-divider::before {
   flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
   content: "";

package/components/Drawer/drawer.css

@@ -56,6 +56,19 @@
   --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
   --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
   --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-drawer {
+    --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
+    --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
+    --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
+    --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+    --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
+    --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
+    --pf-v6-c-drawer__panel--Opacity: 1;
+  }
+}
+.pf-v6-c-drawer {
   --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -118,6 +131,17 @@
   --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
   --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
   --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
+}
+@media screen and (min-width: 75rem) {
+  .pf-v6-c-drawer {
+    --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
+  }
+  .pf-v6-c-drawer.pf-m-panel-bottom {
+    --pf-v6-c-drawer__panel--MinWidth: auto;
+    --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
+  }
+}
+.pf-v6-c-drawer {
   --pf-v6-c-drawer__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
   --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
   --pf-v6-c-drawer__panel--BoxShadow: none;
@@ -132,43 +156,27 @@
   --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: 0;
   --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: 0;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-drawer {
-    --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
-    --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
-    --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
-    --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
-    --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
-    --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
-    --pf-v6-c-drawer__panel--Opacity: 1;
-  }
-}
-@media screen and (min-width: 75rem) {
-  .pf-v6-c-drawer {
-    --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
-  }
-  .pf-v6-c-drawer.pf-m-panel-bottom {
-    --pf-v6-c-drawer__panel--MinWidth: auto;
-    --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
-  }
-}
 
 .pf-v6-c-drawer {
   --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
-  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow-x: hidden;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
   --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
 }
 
+.pf-v6-c-drawer {
+  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
+}
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
   --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
 }
 
+.pf-v6-c-drawer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-x: hidden;
+}
 .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
   --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
@@ -198,13 +206,15 @@
 }
 .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
   transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
-  --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
-  visibility: visible;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
   transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
 }
 
+.pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+  --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
+  visibility: visible;
+}
 .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
   transform: translateX(0);
 }
@@ -261,8 +271,8 @@
 .pf-v6-c-drawer__panel,
 .pf-v6-c-drawer__panel-main {
   display: flex;
-  flex-direction: column;
   flex-shrink: 0;
+  flex-direction: column;
   overflow: auto;
 }
 

package/components/Drawer/drawer.scss

@@ -335,8 +335,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 .#{$drawer}__panel,
 .#{$drawer}__panel-main {
   display: flex;
-  flex-direction: column;
   flex-shrink: 0;
+  flex-direction: column;
   overflow: auto;
 }
 
@@ -703,7 +703,11 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
 // Responsive width modifiers
 @each $breakpoint, $breakpoint-value in $pf-v6-c-drawer--breakpoint-map--width {
-  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+  $breakpoint-name: "";
+
+  @if $breakpoint != "base" {
+    $breakpoint-name: -on-#{$breakpoint};
+  }
 
   @if $breakpoint == "base" {
     $breakpoint: "md";
@@ -712,7 +716,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   @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: calc(#{percentage(math.div($width-value, 100))} - (2 * var(--#{$drawer}--m-expanded__panel--inset)));
+        --#{$drawer}__panel--md--FlexBasis: calc(#{math.percentage(math.div($width-value, 100))} - (2 * var(--#{$drawer}--m-expanded__panel--inset)));
         
         @if $width-value == 100 {
           --#{$drawer}__main--Gap: 0; // Reset gap for width-100 inline pill drawers to prevent misalignment
@@ -724,7 +728,11 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
 // Responsive modifiers
 @each $breakpoint, $breakpoint-value in $pf-v6-c-drawer--breakpoint-map {
-  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+  $breakpoint-name: "";
+
+  @if $breakpoint != "base" {
+    $breakpoint-name: -on-#{$breakpoint};
+  }
 
   @if $breakpoint == "base" {
     $breakpoint: "md";

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

@@ -32,6 +32,15 @@
   --pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
   --pf-v6-c-dual-list-selector__list--TranslateY: 0;
   --pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-dual-list-selector {
+    --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
+  }
+}
+.pf-v6-c-dual-list-selector {
   --pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
@@ -73,13 +82,6 @@
   --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
   --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-dual-list-selector {
-    --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
-    --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
-    --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
-  }
-}
 
 .pf-v6-c-dual-list-selector {
   display: grid;
@@ -150,8 +152,6 @@
 
 .pf-v6-c-dual-list-selector__list {
   --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
-  display: flex;
-  flex-direction: column;
 }
 .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list {
   --pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart: 0;
@@ -159,16 +159,22 @@
 }
 .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
   transform: translateX(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX));
-  position: absolute;
-  inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
   transform: translateX(calc(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
 }
 
+.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
+  position: absolute;
+  inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
+}
 .pf-v6-c-dual-list-selector__list.pf-m-drag-over {
   overflow-anchor: none;
 }
+.pf-v6-c-dual-list-selector__list {
+  display: flex;
+  flex-direction: column;
+}
 
 .pf-v6-c-dual-list-selector__list-item:focus-visible {
   --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);

package/components/ExpandableSection/expandable-section.css

@@ -27,6 +27,17 @@
   --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
   --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
   --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-expandable-section {
+    --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
+    --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
+    --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
+  }
+}
+.pf-v6-c-expandable-section {
   --pf-v6-c-expandable-section__content--MaxWidth: auto;
   --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
   --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -43,15 +54,6 @@
   --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
   --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-expandable-section {
-    --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
-    --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
-    --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
-    --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
-    --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
-  }
-}
 
 .pf-v6-c-expandable-section {
   display: flex;
@@ -110,9 +112,13 @@
 }
 .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-expandable-section--m-truncate__content--LineClamp);
-  overflow: hidden;
+}
+
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
+  scale: -1 1;
 }
 
 .pf-v6-c-expandable-section__toggle-icon {
@@ -122,10 +128,6 @@
   transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
   transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
-  scale: -1 1;
-}
-
 .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);
 }

package/components/ExpandableSection/expandable-section.scss

@@ -138,10 +138,10 @@
     &:not(.pf-m-expanded) .#{$expandable-section}__content {
       // stylelint-disable
       display: -webkit-box;
+      overflow: hidden;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: var(--#{$expandable-section}--m-truncate__content--LineClamp);
       // stylelint-enable
-      overflow: hidden;
     }
   }
 }

package/components/Form/form.css

@@ -499,8 +499,8 @@
 
 .pf-v6-c-form__field-group-header-main {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .pf-v6-c-form__field-group-header-title {

package/components/Form/form.scss

@@ -459,8 +459,8 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 
 .#{$form}__field-group-header-main {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .#{$form}__field-group-header-title {

package/components/FormControl/form-control.css

@@ -189,8 +189,8 @@
   --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
 }
 .pf-v6-c-form-control.pf-m-textarea > textarea {
-  outline-offset: 0;
   scrollbar-gutter: stable;
+  outline-offset: 0;
 }
 .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
   padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);

package/components/FormControl/form-control.scss

@@ -244,8 +244,8 @@
     }
 
     > textarea {
-      outline-offset: 0;
       scrollbar-gutter: stable;
+      outline-offset: 0;
     }
 
     .#{$form-control}__utilities {

package/components/JumpLinks/jump-links.css

@@ -234,6 +234,10 @@
   margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-jump-links__toggle-icon {
   display: inline-block;
   color: var(--pf-v6-c-jump-links__toggle-icon--Color);
@@ -241,7 +245,4 @@
   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));
-}
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
-  scale: -1 1;
 }

package/components/JumpLinks/jump-links.scss

@@ -95,7 +95,11 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
   }
 
   @each $breakpoint, $breakpoint-value in $pf-v6-c-jump-links--m-expandable--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-expandable#{$breakpoint-name} {

package/components/Label/label-group.css

@@ -137,9 +137,9 @@
   padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
   white-space: nowrap;
   resize: none;
-  border: 0;
-  -ms-overflow-style: none;
   scrollbar-width: none;
+  -ms-overflow-style: none;
+  border: 0;
 }
 .pf-v6-c-label-group__textarea::-webkit-scrollbar {
   display: none;

package/components/Label/label-group.scss

@@ -163,11 +163,11 @@
   padding-inline-end: var(--#{$label-group}__textarea--PaddingInlineEnd);
   white-space: nowrap;
   resize: none;
-  border: 0;
 
   // Hide scrollbar for IE, Edge and Firefox
-  -ms-overflow-style: none;  // IE and Edge
   scrollbar-width: none;  // Firefox
+  -ms-overflow-style: none;  // IE and Edge
+  border: 0;
 
   // Hide scrollbar for Chrome, Safari and Opera
   &::-webkit-scrollbar {

package/components/Label/label.css

@@ -493,6 +493,10 @@ input.pf-v6-c-label__content {
 .pf-v6-c-label__actions {
   margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
 }
+.pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
+  --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
+}
+
 .pf-v6-c-label__actions .pf-v6-c-button {
   --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
   --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
@@ -502,7 +506,4 @@ input.pf-v6-c-label__content {
   margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
   margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
   outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
-}
-.pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
-  --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
 }