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

package/assets/fontawesome/_variables.scss

@@ -1,6 +1,7 @@
 // Variables
 // --------------------------
 @use 'sass:math';
+@use 'sass:string';
 
 $fa-font-size-base:           16px !default;
 $fa-css-prefix:               'fa' !default;
@@ -12,7 +13,7 @@ $fa-fw-width:                 math.div(20em, 16);
 $pf-v6-global--disable-fontawesome: false !default;
 // Convenience function used to set content property
 @function fa-content($fa-var) {
-  @return unquote("\"#{ $fa-var }\"");
+  @return string.unquote("\"#{ $fa-var }\"");
 }
 
 $fa-var-500px: \f26e;

package/base/tokens/tokens-local.scss

@@ -1,4 +1,4 @@
-@import '../../sass-utilities/init';
+@use '../../sass-utilities/init' as *;
 
 // LOCAL TOKENS
 

package/components/AboutModalBox/about-modal-box.css

@@ -17,31 +17,6 @@
   --pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
-  --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
-  --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
-  --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
-  --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
 }
 @media screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box {
@@ -50,6 +25,14 @@
     --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd);
   }
 }
+.pf-v6-c-about-modal-box {
+  --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
+  --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+}
 @media only screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box {
     --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd);
@@ -60,17 +43,42 @@
     --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd);
   }
 }
+.pf-v6-c-about-modal-box {
+  --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
+  --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
+  --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
+}
 @media only screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box {
     --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd);
     --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart);
   }
 }
+.pf-v6-c-about-modal-box {
+  --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+}
 @media only screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box {
     --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart);
   }
 }
+.pf-v6-c-about-modal-box {
+  --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
+}
 @media only screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box {
     --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockStart);
@@ -94,7 +102,6 @@
   background-repeat: no-repeat;
   background-position: var(--pf-v6-c-about-modal-box--BackgroundPosition);
   background-size: var(--pf-v6-c-about-modal-box--BackgroundSize);
-  --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
 }
 @media only screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box {
@@ -110,6 +117,9 @@
     grid-template-columns: var(--pf-v6-c-about-modal-box--lg--GridTemplateColumns);
   }
 }
+.pf-v6-c-about-modal-box {
+  --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
+}
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-about-modal-box {
   --pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
 }

package/components/Accordion/accordion.css

@@ -58,6 +58,18 @@
   --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
   --pf-v6-c-accordion__expandable-content--TranslateY: 0;
   --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-accordion {
+    --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
+    --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
+  }
+}
+.pf-v6-c-accordion {
   --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -83,16 +95,6 @@
   --pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-accordion {
-    --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
-    --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
-    --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
-    --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
-    --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
-    --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
-  }
-}
 
 .pf-v6-c-accordion {
   display: flex;
@@ -203,13 +205,14 @@
   color: var(--pf-v6-c-accordion__toggle-text--Color);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-accordion__toggle-icon {
   transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
   transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate));
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
-  scale: -1 1;
-}
 
 .pf-v6-c-accordion__expandable-content:where([hidden]) {
   display: revert;

package/components/Alert/alert.css

@@ -140,14 +140,15 @@
   margin-inline-end: var(--pf-v6-c-alert__toggle--MarginInlineEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-alert__toggle-icon {
   display: inline-block;
   transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
-  scale: -1 1;
-}
 
 .pf-v6-c-alert__icon {
   grid-area: icon;
@@ -164,9 +165,9 @@
 }
 .pf-v6-c-alert__title.pf-m-truncate {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-alert__title--max-lines);
-  overflow: hidden;
 }
 
 .pf-v6-c-alert__description {

package/components/Avatar/avatar.css

@@ -28,7 +28,6 @@
 }
 .pf-v6-c-avatar.pf-m-sm {
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width);
-  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
 }
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-sm {
@@ -55,6 +54,9 @@
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-2xl, var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))))));
   }
 }
+.pf-v6-c-avatar.pf-m-sm {
+  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
+}
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height));
@@ -82,7 +84,6 @@
 }
 .pf-v6-c-avatar.pf-m-md {
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width);
-  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
 }
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-md {
@@ -109,6 +110,9 @@
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-2xl, var(--pf-v6-c-avatar--m-md--Width-on-xl, var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width))))));
   }
 }
+.pf-v6-c-avatar.pf-m-md {
+  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
+}
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height));
@@ -136,7 +140,6 @@
 }
 .pf-v6-c-avatar.pf-m-lg {
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width);
-  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
 }
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-lg {
@@ -163,6 +166,9 @@
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-2xl, var(--pf-v6-c-avatar--m-lg--Width-on-xl, var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width))))));
   }
 }
+.pf-v6-c-avatar.pf-m-lg {
+  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
+}
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height));
@@ -190,7 +196,6 @@
 }
 .pf-v6-c-avatar.pf-m-xl {
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width);
-  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
 }
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-xl {
@@ -217,6 +222,9 @@
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-2xl, var(--pf-v6-c-avatar--m-xl--Width-on-xl, var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width))))));
   }
 }
+.pf-v6-c-avatar.pf-m-xl {
+  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
+}
 @media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height));

package/components/BackgroundImage/background-image.css

@@ -9,6 +9,12 @@
 
 .pf-v6-c-background-image {
   --pf-v6-c-background-image--BackgroundPosition: bottom right;
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
+  --pf-v6-c-background-image--BackgroundPosition: bottom left;
+}
+
+.pf-v6-c-background-image {
   position: fixed;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -20,7 +26,4 @@
   background-repeat: no-repeat;
   background-position: var(--pf-v6-c-background-image--BackgroundPosition);
   background-size: var(--pf-v6-c-background-image--BackgroundSize);
-}
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
-  --pf-v6-c-background-image--BackgroundPosition: bottom left;
 }

package/components/Banner/banner.css

@@ -10,6 +10,14 @@
   --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v6-c-banner--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-banner--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+}
+@media (min-width: 48rem) {
+  .pf-v6-c-banner {
+    --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
+    --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
+  }
+}
+.pf-v6-c-banner {
   --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
   --pf-v6-c-banner--link--TextDecoration: underline;
   --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
@@ -43,12 +51,6 @@
   --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
   --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
 }
-@media (min-width: 48rem) {
-  .pf-v6-c-banner {
-    --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
-    --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
-  }
-}
 
 .pf-v6-c-banner {
   flex-shrink: 0;

package/components/Brand/brand.css

@@ -7,7 +7,6 @@
   width: var(--pf-v6-c-brand--Width--base);
   height: var(--pf-v6-c-brand--Height--base);
   --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
-  --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
 }
 @media (min-width: 36rem) {
   .pf-v6-c-brand {
@@ -34,6 +33,9 @@
     --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))));
   }
 }
+.pf-v6-c-brand {
+  --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
+}
 @media (min-width: 36rem) {
   .pf-v6-c-brand {
     --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));

package/components/Breadcrumb/breadcrumb.css

@@ -48,15 +48,16 @@
   margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
+  scale: -1 1;
+}
+
 .pf-v6-c-breadcrumb__item-divider {
   margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
   font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
   line-height: 1;
   color: var(--pf-v6-c-breadcrumb__item-divider--Color);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
-  scale: -1 1;
-}
 
 .pf-v6-c-breadcrumb__link {
   padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);

package/components/Button/button.css

@@ -449,6 +449,12 @@
   --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
   --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
 }
+span.pf-v6-c-button.pf-m-link.pf-m-inline {
+  --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
+  --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
+  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
+}
+
 .pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
   --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
@@ -488,12 +494,6 @@
   background: transparent;
   outline-offset: 0.125rem;
 }
-span.pf-v6-c-button.pf-m-link.pf-m-inline {
-  --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
-  --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
-  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
-}
-
 .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
   --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
 }

package/components/CalendarMonth/calendar-month.css

@@ -87,13 +87,14 @@
   margin-block-end: var(--pf-v6-c-calendar-month__header--MarginBlockEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
+  scale: -1 1;
+}
+
 .pf-v6-c-calendar-month__header-nav-control {
   margin-inline-start: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
-  scale: -1 1;
-}
 
 .pf-v6-c-calendar-month__header-month {
   flex-grow: 1;

package/components/Card/card.css

@@ -207,12 +207,12 @@
   flex-wrap: wrap;
   row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
 }
-.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
-  margin-inline-start: 0;
-}
 .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
   margin-inline-end: auto;
 }
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  margin-inline-start: 0;
+}
 
 .pf-v6-c-card__header-main {
   flex-grow: 1;
@@ -226,15 +226,16 @@
   margin-inline-end: var(--pf-v6-c-card__header-toggle--MarginInlineEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-card__header-toggle-icon {
   display: inline-block;
   transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
   transition-property: transform;
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
-  scale: -1 1;
-}
 
 .pf-v6-c-card__title-text {
   font-family: var(--pf-v6-c-card__title-text--FontFamily);

package/components/ClipboardCopy/clipboard-copy.css

@@ -50,13 +50,14 @@
   gap: var(--pf-v6-c-clipboard-copy__group--Gap);
 }
 
-.pf-v6-c-clipboard-copy__toggle-icon {
-  transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
-}
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-clipboard-copy__toggle-icon {
   scale: -1 1;
 }
 
+.pf-v6-c-clipboard-copy__toggle-icon {
+  transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
+}
+
 .pf-v6-c-clipboard-copy__expandable-content {
   padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd);

package/components/CodeEditor/code-editor.css

@@ -70,8 +70,8 @@
 
 .pf-v6-c-code-editor__container {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .pf-v6-c-code-editor__header {

package/components/CodeEditor/code-editor.scss

@@ -91,8 +91,8 @@
 
 .#{$code-editor}__container {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .#{$code-editor}__header {

package/components/Compass/compass.css

@@ -183,23 +183,27 @@
 }
 .pf-v6-c-compass__sidebar.pf-m-start {
   translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
-  grid-area: sidebar-start;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
   translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
 }
 
+.pf-v6-c-compass__sidebar.pf-m-start {
+  grid-area: sidebar-start;
+}
 .pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
   margin-inline-end: var(--pf-v6-c-compass--Gap);
 }
 .pf-v6-c-compass__sidebar.pf-m-end {
   translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
-  grid-area: sidebar-end;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
   translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
 }
 
+.pf-v6-c-compass__sidebar.pf-m-end {
+  grid-area: sidebar-end;
+}
 .pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
   margin-inline-start: var(--pf-v6-c-compass--Gap);
 }

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