@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.60

package/base/tokens/tokens-local.scss

@@ -123,4 +123,5 @@
 
   // stylelint-disable custom-property-pattern
   --pf-t--temp--dev--tbd: #BC11E0;
+
 }

package/base/tokens/tokens-palette.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 23 Sep 2024 22:48:17 GMT
+// Generated on Tue, 02 Sep 2025 22:55:03 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--color--black: #000000;
@@ -11,6 +11,7 @@
   --pf-t--color--blue--50: #0066cc;
   --pf-t--color--blue--60: #004d99;
   --pf-t--color--blue--70: #003366;
+  --pf-t--color--blue--80: #032142;
   --pf-t--color--gray--10: #f2f2f2;
   --pf-t--color--gray--20: #e0e0e0;
   --pf-t--color--gray--30: #c7c7c7;
@@ -28,6 +29,7 @@
   --pf-t--color--green--50: #63993d;
   --pf-t--color--green--60: #3d7317;
   --pf-t--color--green--70: #204d00;
+  --pf-t--color--green--80: #183301;
   --pf-t--color--orange--10: #ffe8cc;
   --pf-t--color--orange--20: #fccb8f;
   --pf-t--color--orange--30: #f8ae54;
@@ -35,6 +37,7 @@
   --pf-t--color--orange--50: #ca6c0f;
   --pf-t--color--orange--60: #9e4a06;
   --pf-t--color--orange--70: #732e00;
+  --pf-t--color--orange--80: #4d1f00;
   --pf-t--color--purple--10: #ece6ff;
   --pf-t--color--purple--20: #d0c5f4;
   --pf-t--color--purple--30: #b6a6e9;
@@ -42,6 +45,7 @@
   --pf-t--color--purple--50: #5e40be;
   --pf-t--color--purple--60: #3d2785;
   --pf-t--color--purple--70: #21134d;
+  --pf-t--color--purple--80: #1b0d33;
   --pf-t--color--red--10: #fce3e3;
   --pf-t--color--red--20: #fbc5c5;
   --pf-t--color--red--30: #f9a8a8;
@@ -49,6 +53,7 @@
   --pf-t--color--red--50: #ee0000;
   --pf-t--color--red--60: #a60000;
   --pf-t--color--red--70: #5f0000;
+  --pf-t--color--red--80: #3f0000;
   --pf-t--color--red-orange--10: #ffe3d9;
   --pf-t--color--red-orange--20: #fbbea8;
   --pf-t--color--red-orange--30: #f89b78;
@@ -56,6 +61,7 @@
   --pf-t--color--red-orange--50: #f0561d;
   --pf-t--color--red-orange--60: #b1380b;
   --pf-t--color--red-orange--70: #731f00;
+  --pf-t--color--red-orange--80: #4c1405;
   --pf-t--color--teal--10: #daf2f2;
   --pf-t--color--teal--20: #b9e5e5;
   --pf-t--color--teal--30: #9ad8d8;
@@ -63,6 +69,7 @@
   --pf-t--color--teal--50: #37a3a3;
   --pf-t--color--teal--60: #147878;
   --pf-t--color--teal--70: #004d4d;
+  --pf-t--color--teal--80: #003333;
   --pf-t--color--white: #ffffff;
   --pf-t--color--yellow--10: #fff4cc;
   --pf-t--color--yellow--20: #ffe072;
@@ -71,4 +78,5 @@
   --pf-t--color--yellow--50: #b98412;
   --pf-t--color--yellow--60: #96640f;
   --pf-t--color--yellow--70: #73480b;
+  --pf-t--color--yellow--80: #54330b;
 }

package/components/Accordion/accordion.css

@@ -12,6 +12,10 @@
   --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-accordion__toggle--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --pf-v6-c-accordion__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-accordion__toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
   --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -20,15 +24,40 @@
   --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
+  --pf-v6-c-accordion__toggle-icon--Rotate: 0;
   --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: 0;
   --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-accordion__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: 0;
   --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
+  --pf-v6-c-accordion__expandable-content--MaxHeight: 0;
+  --pf-v6-c-accordion__expandable-content--Visibility: hidden;
+  --pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility: visible;
+  --pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight: 99999px;
+  --pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
+  --pf-v6-c-accordion__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-accordion__item--before--Opacity: 0;
+  --pf-v6-c-accordion__item--m-expanded--before--Opacity: 1;
+  --pf-v6-c-accordion__item--m-expanded--before--TranslateY: 0;
+  --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide);
+  --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade);
+  --pf-v6-c-accordion__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-accordion__expandable-content--Opacity: 0;
+  --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;
   --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);
@@ -47,6 +76,22 @@
   --pf-v6-c-accordion--m-bordered--RowGap: 0;
   --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-accordion__item--BorderWidth: 0;
+  --pf-v6-c-accordion__item--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-accordion__item--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-accordion__expandable-content--BorderWidth: 0;
+  --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 {
@@ -75,24 +120,52 @@
   --pf-v6-c-accordion--RowGap: var(--pf-v6-c-accordion--m-bordered--RowGap);
   --pf-v6-c-accordion__item--BorderRadius: 0;
   --pf-v6-c-accordion__toggle--BorderRadius: 0;
+  --pf-v6-c-accordion__item--BorderWidth: 0;
 }
 .pf-v6-c-accordion.pf-m-bordered .pf-v6-c-accordion__item {
   border-block-end: var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth) solid var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor);
 }
 
 .pf-v6-c-accordion__item {
+  position: relative;
+}
+.pf-v6-c-accordion__item::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
+  border: var(--pf-v6-c-accordion__item--BorderWidth) solid var(--pf-v6-c-accordion__item--BorderColor);
   border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
+  opacity: var(--pf-v6-c-accordion__item--before--Opacity);
+  transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-accordion__item--before--TransitionDuration--fade);
+  transition-property: opacity;
 }
 .pf-v6-c-accordion__item.pf-m-expanded {
   --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
   --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
-  background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
-}
-.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
-  transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
+  --pf-v6-c-accordion__toggle-icon--Rotate: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate);
+  --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
+  --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
+  --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
+  --pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
+  --pf-v6-c-accordion__item--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded--BorderWidth);
+  --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
+  --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
+  --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
+  --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
+  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd);
+  --pf-v6-c-accordion__expandable-content--MaxHeight: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight);
+  --pf-v6-c-accordion__expandable-content--Visibility: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility);
+  --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: 0s;
+  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
+  --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth);
 }
 
 .pf-v6-c-accordion__toggle {
+  position: relative;
+  z-index: var(--pf-v6-c-accordion__toggle--ZIndex);
   display: flex;
   column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap);
   align-items: center;
@@ -108,8 +181,17 @@
   border: 0;
   border-radius: var(--pf-v6-c-accordion__toggle--BorderRadius);
 }
+.pf-v6-c-accordion__toggle::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-accordion__toggle--BorderWidth) solid var(--pf-v6-c-accordion__toggle--BorderColor);
+  border-radius: inherit;
+}
 .pf-v6-c-accordion__toggle:is(:hover, :focus) {
   --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-v6-c-accordion__toggle--hover--BackgroundColor);
+  --pf-v6-c-accordion__toggle--BorderWidth: var(--pf-v6-c-accordion__toggle--hover--BorderWidth);
 }
 
 .pf-v6-c-accordion__toggle-text {
@@ -123,22 +205,36 @@
 
 .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;
+}
+
 .pf-v6-c-accordion__expandable-content {
+  max-height: var(--pf-v6-c-accordion__expandable-content--MaxHeight);
   margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
   margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
   font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
   color: var(--pf-v6-c-accordion__expandable-content--Color);
+  visibility: var(--pf-v6-c-accordion__expandable-content--Visibility);
   background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
+  border: var(--pf-v6-c-accordion__expandable-content--BorderWidth) solid var(--pf-v6-c-accordion__expandable-content--BorderColor);
   border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
+  opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
+  transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, margin-block-end;
+  translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
 }
 .pf-v6-c-accordion__expandable-content.pf-m-fixed {
-  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
+  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base);
   overflow-y: auto;
 }
 

package/components/Accordion/accordion.scss

@@ -7,7 +7,7 @@
 
   // accordion item
   --#{$accordion}__item--BorderRadius: var(--pf-t--global--border--radius--200);
-  --#{$accordion}__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+  --#{$accordion}__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); // TODO - remove "m-expanded" in breaking change
 
   // accordion toggle
   --#{$accordion}__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
@@ -19,6 +19,10 @@
   --#{$accordion}__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$accordion}__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --#{$accordion}__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$accordion}__toggle--ZIndex: var(--pf-t--global--z-index--xs);
+  --#{$accordion}__toggle--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --#{$accordion}__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$accordion}__toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
 
   // Accordion toggle toggle-start modifier
   // This decreases the gap between icon and text, alternative is calc it to * 2 the token or create a new token
@@ -34,17 +38,53 @@
   --#{$accordion}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$accordion}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --#{$accordion}__toggle-icon--Transition: transform var(--#{$accordion}__toggle-icon--TransitionDuration) var(--#{$accordion}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
+  --#{$accordion}__toggle-icon--Rotate: 0;
   --#{$accordion}__toggle--m-expanded__toggle-icon--Rotate: 90deg;
 
   // accordion expandable content
   --#{$accordion}__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
-  --#{$accordion}__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$accordion}__expandable-content--MarginBlockEnd: 0;
   --#{$accordion}__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
   --#{$accordion}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$accordion}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$accordion}__expandable-content--Color: var(--pf-t--global--text--color--regular);
   --#{$accordion}__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$accordion}__expandable-content--m-fixed--MaxHeight--base: 0;
   --#{$accordion}__expandable-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
+  --#{$accordion}__expandable-content--MaxHeight: 0;
+  --#{$accordion}__expandable-content--Visibility: hidden;
+  --#{$accordion}__item--m-expanded__expandable-content--Visibility: visible;
+  --#{$accordion}__item--m-expanded__expandable-content--MaxHeight: 99999px;
+  --#{$accordion}__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
+
+  // expand animation
+  --#{$accordion}__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --#{$accordion}__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --#{$accordion}__item--before--TransitionDuration--fade: var(--#{$accordion}__item--before--TransitionDuration--collapse--fade);
+  --#{$accordion}__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$accordion}__item--before--Opacity: 0;
+  --#{$accordion}__item--m-expanded--before--Opacity: 1;
+  --#{$accordion}__item--m-expanded--before--TranslateY: 0;
+  --#{$accordion}__expandable-content--TransitionDuration--collapse--slide: 0s;
+  --#{$accordion}__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --#{$accordion}__expandable-content--TransitionDuration--expand--slide: 0s;
+  --#{$accordion}__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --#{$accordion}__expandable-content--TransitionDuration--slide: var(--#{$accordion}__expandable-content--TransitionDuration--collapse--slide);
+  --#{$accordion}__expandable-content--TransitionDuration--fade: var(--#{$accordion}__expandable-content--TransitionDuration--collapse--fade);
+  --#{$accordion}__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$accordion}__expandable-content--Opacity: 0;
+  --#{$accordion}__item--m-expanded__expandable-content--Opacity: 1;
+  --#{$accordion}__expandable-content--TranslateY: 0;
+  --#{$accordion}__item--m-expanded__expandable-content--TranslateY: 0;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$accordion}__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --#{$accordion}__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --#{$accordion}__item--before--TranslateY: -.5rem; // TODO - replace with token
+    --#{$accordion}__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --#{$accordion}__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --#{$accordion}__expandable-content--TranslateY: -.5rem; // TODO - replace with token
+  }
 
   // accordion expandable content body
   --#{$accordion}__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -69,6 +109,16 @@
   --#{$accordion}--m-bordered--RowGap: 0;
   --#{$accordion}__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
   --#{$accordion}__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+  
+  // accordion item border for high contrast
+  --#{$accordion}__item--BorderWidth: 0;
+  --#{$accordion}__item--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$accordion}__item--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+
+  // expandable content border for high contrast
+  --#{$accordion}__expandable-content--BorderWidth: 0;
+  --#{$accordion}__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$accordion}__item--m-expanded__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 }
 
 .#{$accordion} {
@@ -99,7 +149,8 @@
     --#{$accordion}--RowGap: var(--#{$accordion}--m-bordered--RowGap);
     --#{$accordion}__item--BorderRadius: 0;
     --#{$accordion}__toggle--BorderRadius: 0;
-
+    --#{$accordion}__item--BorderWidth: 0;
+  
     .#{$accordion}__item {
       border-block-end: var(--#{$accordion}__item--m-bordered--BorderBlockEndWidth) solid var(--#{$accordion}__item--m-bordered--BorderBlockEndColor);
     }
@@ -107,21 +158,48 @@
 }
 
 .#{$accordion}__item {
-  border-radius: var(--#{$accordion}__item--BorderRadius);
+  position: relative;
+
+  &::before { 
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: "";
+    background-color: var(--#{$accordion}__item--m-expanded--BackgroundColor);
+    border: var(--#{$accordion}__item--BorderWidth) solid var(--#{$accordion}__item--BorderColor);
+    border-radius: var(--#{$accordion}__item--BorderRadius);
+    opacity: var(--#{$accordion}__item--before--Opacity);
+    transition-timing-function: var(--#{$accordion}__item--before--TransitionTimingFunction);
+    transition-duration: var(--#{$accordion}__item--before--TransitionDuration--fade);
+    transition-property: opacity;
+  }
 
   &.pf-m-expanded {
     --#{$accordion}__toggle--PaddingBlockEnd: var(--#{$accordion}__toggle--m-expanded--PaddingBlockEnd);
     --#{$accordion}__toggle-text--FontWeight: var(--#{$accordion}__toggle--m-expanded__toggle-text--FontWeight);
+    --#{$accordion}__toggle-icon--Rotate: var(--#{$accordion}__toggle--m-expanded__toggle-icon--Rotate);
+    --#{$accordion}__item--before--TransitionDuration--slide: var(--#{$accordion}__item--before--TransitionDuration--expand--slide);
+    --#{$accordion}__item--before--TransitionDuration--fade: var(--#{$accordion}__item--before--TransitionDuration--expand--fade);
+    --#{$accordion}__item--before--Opacity: var(--#{$accordion}__item--m-expanded--before--Opacity);
+    --#{$accordion}__item--before--TranslateY: var(--#{$accordion}__item--m-expanded--before--TranslateY);
+    --#{$accordion}__item--BorderWidth: var(--#{$accordion}__item--m-expanded--BorderWidth);
+    --#{$accordion}__expandable-content--TransitionDuration--slide: var(--#{$accordion}__expandable-content--TransitionDuration--expand--slide);
+    --#{$accordion}__expandable-content--TransitionDuration--fade: var(--#{$accordion}__expandable-content--TransitionDuration--expand--fade);
+    --#{$accordion}__expandable-content--Opacity: var(--#{$accordion}__item--m-expanded__expandable-content--Opacity);
+    --#{$accordion}__expandable-content--TranslateY: var(--#{$accordion}__item--m-expanded__expandable-content--TranslateY);
+    --#{$accordion}__expandable-content--MarginBlockEnd: var(--#{$accordion}__item--m-expanded__expandable-content--MarginBlockEnd);
+    --#{$accordion}__expandable-content--MaxHeight: var(--#{$accordion}__item--m-expanded__expandable-content--MaxHeight);
+    --#{$accordion}__expandable-content--Visibility: var(--#{$accordion}__item--m-expanded__expandable-content--Visibility);
+    --#{$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);
 
-    background-color: var(--#{$accordion}__item--m-expanded--BackgroundColor);
-
-    .#{$accordion}__toggle-icon {
-      transform: rotate(var(--#{$accordion}__toggle--m-expanded__toggle-icon--Rotate));
-    }
   }
 }
 
 .#{$accordion}__toggle {
+  position: relative;
+  z-index: var(--#{$accordion}__toggle--ZIndex);
   display: flex;
   column-gap: var(--#{$accordion}__toggle--ColumnGap);
   align-items: center;
@@ -137,8 +215,18 @@
   border: 0;
   border-radius: var(--#{$accordion}__toggle--BorderRadius);
 
+  &::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: "";
+    border: var(--#{$accordion}__toggle--BorderWidth) solid var(--#{$accordion}__toggle--BorderColor);
+    border-radius: inherit;
+  }
+
   &:is(:hover, :focus) {
     --#{$accordion}__toggle--BackgroundColor: var(--#{$accordion}__toggle--hover--BackgroundColor);
+    --#{$accordion}__toggle--BorderWidth: var(--#{$accordion}__toggle--hover--BorderWidth);
   }
 }
 
@@ -154,19 +242,33 @@
   @include pf-v6-mirror-inline-on-rtl;
 
   transition: var(--#{$accordion}__toggle-icon--Transition); // TODO remove shorthand property in breaking change
+  transform: rotate(var(--#{$accordion}__toggle-icon--Rotate));
+}
+
+.#{$accordion}__expandable-content:where([hidden]) {
+  display: revert;
 }
 
 .#{$accordion}__expandable-content {
+  max-height:  var(--#{$accordion}__expandable-content--MaxHeight);
   margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
   margin-inline-start: var(--#{$accordion}__expandable-content--MarginInlineStart);
   margin-inline-end: var(--#{$accordion}__expandable-content--MarginInlineEnd);
   font-size: var(--#{$accordion}__expandable-content--FontSize);
   color: var(--#{$accordion}__expandable-content--Color);
+  visibility:  var(--#{$accordion}__expandable-content--Visibility);
   background-color: var(--#{$accordion}__expandable-content--BackgroundColor);
+  border: var(--#{$accordion}__expandable-content--BorderWidth) solid var(--#{$accordion}__expandable-content--BorderColor);
   border-radius: var(--#{$accordion}__expandable-content--BorderRadius);
+  opacity: var(--#{$accordion}__expandable-content--Opacity);
+  transition-delay: 0s, 0s, var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--fade);
+  transition-timing-function: var(--#{$accordion}__expandable-content--TransitionTimingFunction);
+  transition-duration: var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, margin-block-end;
+  translate: 0 var(--#{$accordion}__expandable-content--TranslateY);
 
   &.pf-m-fixed {
-    max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
+    max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight--base);
     overflow-y: auto;
   }
 }

package/components/Alert/alert-group.css

@@ -25,28 +25,47 @@
     var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
     var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
     0s;
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
-  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: all
-    var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
-    var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
-    var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
-  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition: all
+    var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration)
+    var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction)
+    var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
+  --pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --pf-v6-c-alert-group__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert-group__overflow-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -55,6 +74,7 @@
   --pf-v6-c-alert-group__overflow-button--Color: var(--pf-t--global--text--color--link--default);
   --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v6-c-alert-group__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
   --pf-v6-c-alert-group__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
   --pf-v6-c-alert-group__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
   --pf-v6-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
@@ -85,10 +105,21 @@
   padding-inline-end: var(--pf-v6-c-alert-group__overflow-button--PaddingInlineEnd);
   color: var(--pf-v6-c-alert-group__overflow-button--Color);
   background-color: var(--pf-v6-c-alert-group__overflow-button--BackgroundColor);
-  border-width: var(--pf-v6-c-alert-group__overflow-button--BorderWidth);
+  border: 0;
   border-radius: var(--pf-v6-c-alert-group__overflow-button--BorderRadius);
   box-shadow: var(--pf-v6-c-alert-group__overflow-button--BoxShadow);
 }
+.pf-v6-c-alert-group__overflow-button::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-alert-group__overflow-button--BorderWidth) solid var(--pf-v6-c-alert-group__overflow-button--BorderColor);
+  border-radius: inherit;
+}
+.pf-v6-c-alert-group__overflow-button:hover, .pf-v6-c-alert-group__overflow-button:focus {
+  --pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-v6-c-alert-group__overflow-button--hover--BorderWidth);
+}
 
 .pf-v6-c-alert-group__item {
   display: grid;
@@ -105,40 +136,43 @@
     transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
   }
 }
-.pf-v6-c-alert-group__item.pf-m-offstage-top:first-child {
+.pf-v6-c-alert-group__item.pf-m-offstage-top:first-child, .pf-v6-c-alert-group__item.pf-m-incoming:first-child {
   grid-template-rows: 0fr;
   margin-block: 0;
   overflow: hidden;
   opacity: 0;
   transform: translateY(-100%);
 }
-.pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert {
+.pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-incoming:first-child .pf-v6-c-alert {
   min-height: 0;
   padding-block-start: 0;
   padding-block-end: 0;
   border-width: 0;
 }
-.pf-v6-c-alert-group__item.pf-m-offstage-right {
+.pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
   grid-template-rows: 0fr;
   margin-block: 0;
   overflow: hidden;
   opacity: 0;
-  transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
+  transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default)), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default)), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity--default)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default));
 }
-.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
+.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-outgoing .pf-v6-c-alert {
   min-height: 0;
   padding-block-start: 0;
   padding-block-end: 0;
   border-width: 0;
-  transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
+  transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDelay--default));
 }
 @media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-alert-group__item.pf-m-offstage-right {
-    transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
+  .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
+    transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform)), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity)), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block)), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows));
     transform: translateX(100%);
   }
-  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
-    transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition);
+  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
+    transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
+  }
+  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-outgoing .pf-v6-c-alert {
+    transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition));
   }
 }
 .pf-v6-c-alert-group__item:hover {