@patternfly/react-styles 6.3.0-prerelease.1 → 6.3.0-prerelease.11

package/CHANGELOG.md

@@ -3,6 +3,64 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.3.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.10...@patternfly/react-styles@6.3.0-prerelease.11) (2025-07-11)
+
+### Bug Fixes
+
+- **Table:** updated logic for expandable class ([#11918](https://github.com/patternfly/patternfly-react/issues/11918)) ([2b6c99b](https://github.com/patternfly/patternfly-react/commit/2b6c99b4617f09009d799af4587a0b0d291cdf84))
+
+# [6.3.0-prerelease.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.9...@patternfly/react-styles@6.3.0-prerelease.10) (2025-07-02)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [6.3.0-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.8...@patternfly/react-styles@6.3.0-prerelease.9) (2025-06-23)
+
+### Bug Fixes
+
+- Bumped to latest core version. ([#11880](https://github.com/patternfly/patternfly-react/issues/11880)) ([0380aa5](https://github.com/patternfly/patternfly-react/commit/0380aa504b4d0d83459126bfd98b2e4e29cac4e8))
+
+# [6.3.0-prerelease.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.7...@patternfly/react-styles@6.3.0-prerelease.8) (2025-06-20)
+
+### Features
+
+- **Table:** added optin animations for expansion ([#11865](https://github.com/patternfly/patternfly-react/issues/11865)) ([9adc88b](https://github.com/patternfly/patternfly-react/commit/9adc88b652f77ed5737c9f6dd02885daace1cd2b))
+
+# [6.3.0-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.6...@patternfly/react-styles@6.3.0-prerelease.7) (2025-06-17)
+
+### Bug Fixes
+
+- **ExpandableSection:** made animation opt-in for detached variant ([#11851](https://github.com/patternfly/patternfly-react/issues/11851)) ([64befbe](https://github.com/patternfly/patternfly-react/commit/64befbe8547ebf4c388ed9f039253a7a689440f8))
+
+# [6.3.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.5...@patternfly/react-styles@6.3.0-prerelease.6) (2025-06-13)
+
+### Features
+
+- **Button/MenuToggle:** added support for hamburger/settings animations ([#11861](https://github.com/patternfly/patternfly-react/issues/11861)) ([cf3d84e](https://github.com/patternfly/patternfly-react/commit/cf3d84ebf8f3046f038af6f6557946faadfe35b0))
+
+# [6.3.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.4...@patternfly/react-styles@6.3.0-prerelease.5) (2025-06-13)
+
+### Features
+
+- **Icons:** Allow more complex paths and svgs ([#11864](https://github.com/patternfly/patternfly-react/issues/11864)) ([fa16a3b](https://github.com/patternfly/patternfly-react/commit/fa16a3bd3ac35be6f0d23f642194d23dba0b313e))
+
+# [6.3.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.3...@patternfly/react-styles@6.3.0-prerelease.4) (2025-06-11)
+
+### Features
+
+- **Form:** enabled opt-in animations for expandable fieldgroup ([#11843](https://github.com/patternfly/patternfly-react/issues/11843)) ([8c6618b](https://github.com/patternfly/patternfly-react/commit/8c6618b87876924b7ef9b3651b86abb65e7e2dd4))
+
+# [6.3.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.2...@patternfly/react-styles@6.3.0-prerelease.3) (2025-05-21)
+
+### Features
+
+- **Tabs:** added animations ([#11767](https://github.com/patternfly/patternfly-react/issues/11767)) ([bae4fc3](https://github.com/patternfly/patternfly-react/commit/bae4fc36aa39007d9474236cbada62ac55a27989))
+
+# [6.3.0-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.1...@patternfly/react-styles@6.3.0-prerelease.2) (2025-05-20)
+
+### Bug Fixes
+
+- **Table:** removed divider for expanded rows ([#11815](https://github.com/patternfly/patternfly-react/issues/11815)) ([292dd5e](https://github.com/patternfly/patternfly-react/commit/292dd5ebf809d9bffa6698d7c6fea6da82f73c64))
+
 # [6.3.0-prerelease.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.2.1-prerelease.0...@patternfly/react-styles@6.3.0-prerelease.1) (2025-04-24)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/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/css/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/css/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/css/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/css/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 {

package/css/components/Alert/alert-group.d.ts

@@ -4,10 +4,13 @@ declare const _default: {
   "alertGroup": "pf-v6-c-alert-group",
   "alertGroupItem": "pf-v6-c-alert-group__item",
   "alertGroupOverflowButton": "pf-v6-c-alert-group__overflow-button",
+  "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
     "toast": "pf-m-toast",
     "offstageTop": "pf-m-offstage-top",
-    "offstageRight": "pf-m-offstage-right"
+    "incoming": "pf-m-incoming",
+    "offstageRight": "pf-m-offstage-right",
+    "outgoing": "pf-m-outgoing"
   }
 };
 export default _default;

package/css/components/Alert/alert-group.js

@@ -6,9 +6,12 @@ exports.default = {
   "alertGroup": "pf-v6-c-alert-group",
   "alertGroupItem": "pf-v6-c-alert-group__item",
   "alertGroupOverflowButton": "pf-v6-c-alert-group__overflow-button",
+  "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
     "toast": "pf-m-toast",
     "offstageTop": "pf-m-offstage-top",
-    "offstageRight": "pf-m-offstage-right"
+    "incoming": "pf-m-incoming",
+    "offstageRight": "pf-m-offstage-right",
+    "outgoing": "pf-m-outgoing"
   }
 };

package/css/components/Alert/alert-group.mjs

@@ -4,9 +4,12 @@ export default {
   "alertGroup": "pf-v6-c-alert-group",
   "alertGroupItem": "pf-v6-c-alert-group__item",
   "alertGroupOverflowButton": "pf-v6-c-alert-group__overflow-button",
+  "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
     "toast": "pf-m-toast",
     "offstageTop": "pf-m-offstage-top",
-    "offstageRight": "pf-m-offstage-right"
+    "incoming": "pf-m-incoming",
+    "offstageRight": "pf-m-offstage-right",
+    "outgoing": "pf-m-outgoing"
   }
 };