@patternfly/patternfly 6.5.0-prerelease.4 → 6.5.0-prerelease.41

package/base/tokens/tokens-redhat-highcontrast.scss

@@ -0,0 +1,127 @@
+
+// Do not edit directly
+// Generated on Tue, 10 Feb 2026 01:53:46 GMT
+
+// Only tokens that differ from base theme (120 tokens)
+@mixin pf-v6-tokens {
+  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--400);
+  --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--150);
+  --pf-t--global--border--width--action--plain--clicked: var(--pf-t--global--border--width--200);
+  --pf-t--global--border--width--action--plain--hover: var(--pf-t--global--border--width--100);
+  --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--200);
+  --pf-t--global--border--width--main--default: var(--pf-t--global--border--width--200);
+  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
+  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
+  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
+  --pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--color--brand--subtle--400);
+  --pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--color--brand--subtle--400);
+  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--400);
+  --pf-t--global--border--color--control--default: var(--pf-t--global--border--color--400);
+  --pf-t--global--border--color--default: var(--pf-t--global--border--color--400);
+  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--300);
+  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--500);
+  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--400);
+  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--500);
+  --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--500);
+  --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--400);
+  --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--500);
+  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--500);
+  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--500);
+  --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--500);
+  --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--400);
+  --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--500);
+  --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--500);
+  --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--400);
+  --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--500);
+  --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--500);
+  --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--400);
+  --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--500);
+  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--500);
+  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--400);
+  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--500);
+  --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--500);
+  --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--400);
+  --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--500);
+  --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--500);
+  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--400);
+  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--500);
+  --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--400);
+  --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+  --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--border--color--subtle: var(--pf-t--global--border--color--400);
+  --pf-t--global--border--radius--action--plain--default: var(--pf-t--global--border--radius--pill);
+  --pf-t--global--border--radius--control--default: var(--pf-t--global--border--radius--pill);
+  --pf-t--global--border--width--high-contrast--extra-strong: var(--pf-t--global--border--width--extra-strong);
+  --pf-t--global--border--width--high-contrast--regular: var(--pf-t--global--border--width--regular);
+  --pf-t--global--border--width--high-contrast--strong: var(--pf-t--global--border--width--strong);
+  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--300);
+  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--200);
+  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--300);
+  --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400);
+  --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300);
+  --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--400);
+  --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--400);
+  --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--300);
+  --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--400);
+  --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--100);
+  --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--50);
+  --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--100);
+  --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--300);
+  --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--200);
+  --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--300);
+  --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
+  --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
+  --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
+  --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--300);
+  --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--200);
+  --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--300);
+  --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--300);
+  --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--200);
+  --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--300);
+  --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+  --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--focus-ring--color--default: var(--pf-t--global--focus-ring--color--200);
+  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--400);
+  --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--300);
+  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--400);
+  --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--200);
+  --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--200);
+  --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--200);
+  --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--200);
+  --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--200);
+  --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200);
+  --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--100);
+  --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--200);
+  --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+  --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--150);
+  --pf-t--global--text--color--brand--clicked: var(--pf-t--global--color--brand--500);
+  --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--400);
+  --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--500);
+  --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--200);
+  --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--250);
+  --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--350);
+  --pf-t--global--text--color--required: var(--pf-t--global--text--color--500);
+  --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--300);
+  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--200);
+  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--300);
+  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+  --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--250);
+  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
+  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
+  --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
+  --pf-t--global--border--color--main--default: var(--pf-t--global--border--color--default);
+  --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
+}

package/base/tokens/tokens-redhat.scss

@@ -0,0 +1,15 @@
+
+// Do not edit directly
+// Generated on Tue, 10 Feb 2026 01:53:46 GMT
+
+// Only tokens that differ from base theme (8 tokens)
+@mixin pf-v6-tokens {
+  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
+  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
+  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
+  --pf-t--global--border--radius--action--plain--default: var(--pf-t--global--border--radius--pill);
+  --pf-t--global--border--radius--control--default: var(--pf-t--global--border--radius--pill);
+  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
+  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
+  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
+}

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/Accordion/accordion.scss

@@ -193,7 +193,6 @@
     --#{$accordion}__expandable-content--TransitionDuration--fade: 0s;
     --#{$accordion}__expandable-content--m-fixed--MaxHeight--base: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
     --#{$accordion}__expandable-content--BorderWidth: var(--#{$accordion}__item--m-expanded__expandable-content--BorderWidth);
-
   }
 }
 

package/components/ActionList/action-list.css

@@ -4,6 +4,7 @@
   --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
   --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+  --pf-v6-c-action-list--m-vertical--m-icons--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
 }
 
 .pf-v6-c-action-list,
@@ -18,6 +19,7 @@
 }
 .pf-v6-c-action-list.pf-m-icons {
   --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
+  --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-v6-c-action-list--m-vertical--m-icons--RowGap);
   column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
 }
 .pf-v6-c-action-list.pf-m-vertical, .pf-v6-c-action-list.pf-m-vertical .pf-v6-c-action-list__group {

package/components/ActionList/action-list.scss

@@ -10,6 +10,7 @@
 
   // * Action list icons
   --#{$action-list}--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+  --#{$action-list}--m-vertical--m-icons--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
 }
 
 // - Action list - Action list group
@@ -27,6 +28,7 @@
   // - Action list icons
   &.pf-m-icons {
     --#{$action-list}__group--ColumnGap: var(--#{$action-list}--m-icons--ColumnGap);
+    --#{$action-list}--m-vertical--RowGap:  var(--#{$action-list}--m-vertical--m-icons--RowGap);
 
     column-gap: var(--#{$action-list}--m-icons--ColumnGap); // update prop: val to prevent potential inheritance conflicts
   }

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