@patternfly/patternfly 6.3.0-prerelease.5 → 6.3.0-prerelease.51

package/README.md

@@ -16,11 +16,13 @@ Any of the files above are meant for use in consuming the library. The recommend
 
 ## Development
 
-**PatternFly Development requires Node v18.0.0 or greater**
+**PatternFly Development requires Node v20.18.3 or greater**
 
 To setup the PatternFly development environment:
 
 - clone the project
+- ensure you have Node.js v20.18.3 or greater installed
+- enable corepack: `corepack enable`
 - run `yarn install` from the project root
 - run `yarn start`
 - open your browser to `http://localhost:8001`
@@ -63,19 +65,19 @@ When making visual changes to a full page example, new example preview screensho
 
 ## Guidelines for CSS development
 
-- For issues created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Pull Request is merged. The issue should include the Core PR #, the Core Release, a link to the component in https://core-staging.patternfly.org, and information detailing the change.
+- For issues created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Pull Request is merged. The issue should include the Core PR #, the Core Release, a link to the component in https://pf-core-staging.patternfly.org, and information detailing the change.
 - If global variables are modified in Core, a React issue should be opened to address this.
 - CSS developers should ensure that animation is well documented and communicated to the respective React developer.
 - Once the component/enhancement is complete it should receive sign off from a visual designer who can then update the master sketch file with any changes.
 
 ### Handlebars guidelines 
-[For information on how to contribute, refer to our guidelines.](https://core-staging.patternfly.org/contribution)
+[For information on how to contribute, refer to our guidelines.](https://pf-core-staging.patternfly.org/contribution)
 
 ### CSS/Sass guidelines
-[For more information on using CSS and Sass, refer to our guidelines.](https://core-staging.patternfly.org/guidelines)
+[For more information on using CSS and Sass, refer to our guidelines.](https://pf-core-staging.patternfly.org/guidelines)
 
 ### Custom icon guidelines
-[For more information on custom icons, refer to our guidelines.](https://core-staging.patternfly.org/adding-custom-icons)
+[For more information on custom icons, refer to our guidelines.](https://pf-core-staging.patternfly.org/adding-custom-icons)
 
 ## Beta components
 
@@ -112,7 +114,7 @@ If you have any suggestions about ways that we can improve how we use this tool,
 ## FAQ
 
 #### CSS Variables
-[How do I use CSS variables to customize the library?](https://core-staging.patternfly.org/guidelines#variables)
+[How do I use CSS variables to customize the library?](https://pf-core-staging.patternfly.org/guidelines#variables)
 
 #### Browser support
 PatternFly is supported on the latest two major versions of the following browsers:

package/assets/images/icon-help.hbs

@@ -0,0 +1,3 @@
+<svg class="pf-v6-svg" viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em">
+  <path d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"></path>
+</svg> 

package/assets/images/icon-outlined-star.hbs

@@ -0,0 +1,3 @@
+<svg class="pf-v6-svg" viewBox="0 0 576 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em">
+  <path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
+</svg>

package/assets/images/icon-star.hbs

@@ -0,0 +1,3 @@
+<svg class="pf-v6-svg" viewBox="0 0 576 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em">
+  <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
+</svg>

package/base/normalize.scss

@@ -122,6 +122,10 @@
     cursor: pointer;
   }
 
+  :where(:root) {
+    color-scheme: light;
+  }
+
   :where(.pf-v6-theme-dark) {
     color-scheme: dark;
   }

package/base/patternfly-common.css

@@ -44,15 +44,50 @@
 }
 
 .pf-v6-m-no-motion {
-  --pf-t--global--delay--400: 0ms !important;
-  --pf-t--global--delay--300: 0ms !important;
-  --pf-t--global--delay--200: 0ms !important;
-  --pf-t--global--delay--100: 0ms !important;
-  --pf-t--global--duration--600: 0ms !important;
-  --pf-t--global--duration--500: 0ms !important;
-  --pf-t--global--duration--400: 0ms !important;
-  --pf-t--global--duration--300: 0ms !important;
-  --pf-t--global--duration--200: 0ms !important;
-  --pf-t--global--duration--100: 0ms !important;
-  --pf-t--global--duration--50: 0ms !important;
+  --pf-t--global--delay--400: 1ms !important;
+  --pf-t--global--delay--300: 1ms !important;
+  --pf-t--global--delay--200: 1ms !important;
+  --pf-t--global--delay--100: 1ms !important;
+  --pf-t--global--duration--600: 1ms !important;
+  --pf-t--global--duration--500: 1ms !important;
+  --pf-t--global--duration--400: 1ms !important;
+  --pf-t--global--duration--300: 1ms !important;
+  --pf-t--global--duration--200: 1ms !important;
+  --pf-t--global--duration--100: 1ms !important;
+  --pf-t--global--duration--50: 1ms !important;
+}
+
+:root {
+  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
+}
+
+@property --pf-v6-global--danger-jiggle--TranslateX {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@keyframes pf-v6-global-danger-jiggle-motion {
+  33% {
+    --pf-v6-global--danger-jiggle--TranslateX: -2px;
+  }
+  66% {
+    --pf-v6-global--danger-jiggle--TranslateX: 3px;
+  }
+}
+@keyframes pf-v6-global-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes pf-v6-global-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }

package/base/patternfly-common.scss

@@ -50,20 +50,65 @@
   @include pf-v6-mirror-inline-on-rtl;
 }
 
-// Turn off all motion (for testing purposes) by setting all motion tokens to 0
+// Turn off perceptible motion (for testing purposes) by setting all motion tokens to 1ms
 .#{$pf-prefix}m-no-motion {
   // stylelint-disable declaration-no-important
-  --pf-t--global--delay--400: 0ms !important;
-  --pf-t--global--delay--300: 0ms !important;
-  --pf-t--global--delay--200: 0ms !important;
-  --pf-t--global--delay--100: 0ms !important;
-  --pf-t--global--duration--600: 0ms !important;
-  --pf-t--global--duration--500: 0ms !important;
-  --pf-t--global--duration--400: 0ms !important;
-  --pf-t--global--duration--300: 0ms !important;
-  --pf-t--global--duration--200: 0ms !important;
-  --pf-t--global--duration--100: 0ms !important;
-  --pf-t--global--duration--50: 0ms !important;
+  --pf-t--global--delay--400: 1ms !important;
+  --pf-t--global--delay--300: 1ms !important;
+  --pf-t--global--delay--200: 1ms !important;
+  --pf-t--global--delay--100: 1ms !important;
+  --pf-t--global--duration--600: 1ms !important;
+  --pf-t--global--duration--500: 1ms !important;
+  --pf-t--global--duration--400: 1ms !important;
+  --pf-t--global--duration--300: 1ms !important;
+  --pf-t--global--duration--200: 1ms !important;
+  --pf-t--global--duration--100: 1ms !important;
+  --pf-t--global--duration--50: 1ms !important;
 
   // stylelink-enable declaration-no-important
-}
+}
+
+:root {
+  --#{$pf-global}--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+  --#{$pf-global}--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
+}
+
+// Register the property type for the custom property to be animatable
+@property  --#{$pf-global}--danger-jiggle--TranslateX {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+// Animate danger jiggle
+@keyframes #{$pf-global}-danger-jiggle-motion {
+  33% {
+    --#{$pf-global}--danger-jiggle--TranslateX: -2px;
+  }
+  
+  66% {
+    --#{$pf-global}--danger-jiggle--TranslateX: 3px;
+  }
+}
+
+// Animate fade-in
+@keyframes #{$pf-global}-fade-in {
+  from {
+    opacity: 0;
+  }
+  
+  to {
+    opacity: 1;
+  }
+}
+
+// Animate fade-out
+@keyframes #{$pf-global}-fade-out {
+  from {
+    opacity: 1;
+  }
+  
+  to {
+    opacity: 0;
+  }
+}

package/components/Accordion/accordion.css

@@ -12,6 +12,7 @@
   --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--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);
@@ -29,6 +30,24 @@
   --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: 9.375rem;
+  --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);
@@ -48,6 +67,16 @@
   --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);
 }
+@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;
@@ -81,18 +110,39 @@
 }
 
 .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-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--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__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__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 {
+  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;
@@ -128,19 +178,38 @@
   scale: -1 1;
 }
 
+.pf-v6-c-accordion__expandable-content:where([hidden]) {
+  display: revert;
+}
+
 .pf-v6-c-accordion__expandable-content {
-  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
+  max-height: 0;
   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: hidden;
   background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
   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);
   overflow-y: auto;
 }
+.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
+  max-height: 99999px;
+  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
+  visibility: revert;
+  transition-delay: 0s;
+}
+.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
+  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
+}
 
 .pf-v6-c-accordion__expandable-content-body {
   padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart);

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,7 @@
   --#{$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 toggle-start modifier
   // This decreases the gap between icon and text, alternative is calc it to * 2 the token or create a new token
@@ -46,6 +47,35 @@
   --#{$accordion}__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$accordion}__expandable-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
 
+  // 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);
   --#{$accordion}__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -107,13 +137,32 @@
 }
 
 .#{$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-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);
-
-    background-color: var(--#{$accordion}__item--m-expanded--BackgroundColor);
+    --#{$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}__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}__toggle-icon {
       transform: rotate(var(--#{$accordion}__toggle--m-expanded__toggle-icon--Rotate));
@@ -122,6 +171,8 @@
 }
 
 .#{$accordion}__toggle {
+  position: relative;
+  z-index: var(--#{$accordion}__toggle--ZIndex);
   display: flex;
   column-gap: var(--#{$accordion}__toggle--ColumnGap);
   align-items: center;
@@ -156,19 +207,40 @@
   transition: var(--#{$accordion}__toggle-icon--Transition); // TODO remove shorthand property in breaking change
 }
 
+.#{$accordion}__expandable-content:where([hidden]) {
+  display: revert;
+}
+
 .#{$accordion}__expandable-content {
-  margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
+  max-height: 0;
   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: hidden;
   background-color: var(--#{$accordion}__expandable-content--BackgroundColor);
   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);
     overflow-y: auto;
   }
+
+  .#{$accordion}__item.pf-m-expanded & {
+    max-height: 99999px;
+    margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
+    visibility: revert;
+    transition-delay: 0s;
+
+    &.pf-m-fixed {
+      max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
+    }
+  }
 }
 
 .#{$accordion}__expandable-content-body {

package/components/Alert/alert-group.css

@@ -25,27 +25,45 @@
     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--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: 0;
   --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);
@@ -105,40 +123,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 {