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

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 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.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,7 +178,12 @@
   scale: -1 1;
 }
 
+.pf-v6-c-accordion__expandable-content:where([hidden]) {
+  display: revert;
+}
+
 .pf-v6-c-accordion__expandable-content {
+  display: none;
   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);
@@ -136,11 +191,26 @@
   color: var(--pf-v6-c-accordion__expandable-content--Color);
   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-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), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
+  transition-property: opacity, translate, display;
+  transition-behavior: allow-discrete;
+  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 {
+  display: revert;
+}
+@starting-style {
+  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
+    --pf-v6-c-accordion__expandable-content--Opacity: 0;
+    --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
+  }
+}
 
 .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"
   }
 };

package/css/components/Button/button.css

@@ -243,6 +243,11 @@
   --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
   --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
   --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-button__icon--favorite--Opacity: 1;
+  --pf-v6-c-button__icon--favorited--Opacity: 0;
+  --pf-v6-c-button--m-favorited__icon--favorite--Opacity: 0;
+  --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
+  --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button__progress--Opacity: 0;
   --pf-v6-c-button__progress--TranslateY: -50%;
@@ -553,6 +558,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
 }
 .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
+  display: grid;
   transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
   transition-property: color;
@@ -560,6 +566,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-button.pf-m-favorited {
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
   --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
+  --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
+  --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
 }
 .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
   animation-name: pf-v6-c-button-icon-favorited;
@@ -639,6 +647,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
 }
 
+.pf-v6-c-button__icon-favorite,
+.pf-v6-c-button__icon-favorited {
+  grid-area: 1/1/1/1;
+  transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
+  transition-property: opacity;
+}
+
+.pf-v6-c-button__icon-favorite {
+  opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
+}
+
+.pf-v6-c-button__icon-favorited {
+  opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
+}
+
 .pf-v6-c-button__progress {
   position: absolute;
   inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
@@ -651,6 +674,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-spinner--Color: currentcolor;
 }
 
+.pf-v6-c-button__text {
+  text-decoration: inherit;
+}
+
 .pf-v6-c-button__count {
   display: inline-flex;
   align-items: center;

package/css/components/Button/button.d.ts

@@ -4,7 +4,10 @@ declare const _default: {
   "button": "pf-v6-c-button",
   "buttonCount": "pf-v6-c-button__count",
   "buttonIcon": "pf-v6-c-button__icon",
+  "buttonIconFavorite": "pf-v6-c-button__icon-favorite",
+  "buttonIconFavorited": "pf-v6-c-button__icon-favorited",
   "buttonProgress": "pf-v6-c-button__progress",
+  "buttonText": "pf-v6-c-button__text",
   "modifiers": {
     "primary": "pf-m-primary",
     "unread": "pf-m-unread",

package/css/components/Button/button.js

@@ -6,7 +6,10 @@ exports.default = {
   "button": "pf-v6-c-button",
   "buttonCount": "pf-v6-c-button__count",
   "buttonIcon": "pf-v6-c-button__icon",
+  "buttonIconFavorite": "pf-v6-c-button__icon-favorite",
+  "buttonIconFavorited": "pf-v6-c-button__icon-favorited",
   "buttonProgress": "pf-v6-c-button__progress",
+  "buttonText": "pf-v6-c-button__text",
   "modifiers": {
     "primary": "pf-m-primary",
     "unread": "pf-m-unread",

package/css/components/Button/button.mjs

@@ -4,7 +4,10 @@ export default {
   "button": "pf-v6-c-button",
   "buttonCount": "pf-v6-c-button__count",
   "buttonIcon": "pf-v6-c-button__icon",
+  "buttonIconFavorite": "pf-v6-c-button__icon-favorite",
+  "buttonIconFavorited": "pf-v6-c-button__icon-favorited",
   "buttonProgress": "pf-v6-c-button__progress",
+  "buttonText": "pf-v6-c-button__text",
   "modifiers": {
     "primary": "pf-m-primary",
     "unread": "pf-m-unread",

package/css/components/ExpandableSection/expandable-section.css

@@ -9,6 +9,17 @@
   --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
   --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
+  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
+  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
+  --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-expandable-section__content--Opacity: 0;
+  --pf-v6-c-expandable-section__content--TranslateY: 0;
+  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
+  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
   --pf-v6-c-expandable-section__content--MaxWidth: auto;
   --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
   --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -20,10 +31,18 @@
   --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
   --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
   --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
   --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-expandable-section {
+    --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-expandable-section {
   display: flex;
@@ -34,6 +53,11 @@
   --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
   --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
   --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
+  --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
+  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
+  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
+  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
+  --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
 }
 .pf-v6-c-expandable-section.pf-m-limit-width {
   --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -46,6 +70,7 @@
   background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
   border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
   border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
+  transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
 }
 .pf-v6-c-expandable-section.pf-m-indented {
   --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -79,4 +104,25 @@
   max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
   padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
   padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
+}
+.pf-v6-c-expandable-section__content:where([hidden]) {
+  display: revert;
+}
+.pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
+  display: none;
+  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
+  transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
+  transition-property: opacity, translate, display;
+  transition-behavior: allow-discrete;
+  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
+}
+.pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
+  display: revert;
+}
+@starting-style {
+  .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
+    --pf-v6-c-expandable-section__content--Opacity: 0;
+    --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
+  }
 }

package/css/components/MenuToggle/menu-toggle.css

@@ -450,16 +450,20 @@
   flex-wrap: nowrap;
 }
 
-.pf-v6-c-menu-toggle__icon {
-  flex-shrink: 0;
-}
 .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
 .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
-.pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
+.pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
   margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
   margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
 }
 
+.pf-v6-c-menu-toggle__icon {
+  flex-shrink: 0;
+}
+.pf-v6-c-menu-toggle__icon :where(picture, img) {
+  vertical-align: middle;
+}
+
 .pf-v6-c-menu-toggle__controls {
   display: flex;
   gap: var(--pf-v6-c-menu-toggle__controls--Gap);

package/css/components/Skeleton/skeleton.css

@@ -11,8 +11,8 @@
   --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
   --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-skeleton--after--TranslateX: -100%;
-  --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
+  --pf-v6-c-skeleton--after--TranslateX: 0;
+  --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
   --pf-v6-c-skeleton--after--AnimationDuration: 3s;
   --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
   --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -44,6 +44,15 @@
   --pf-v6-c-skeleton--m-height-75--Height: 75%;
   --pf-v6-c-skeleton--m-height-100--Height: 100%;
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-skeleton {
+    --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
+    --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
+    --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
+    --pf-v6-c-skeleton--after--TranslateX: -100%;
+    --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
+  }
+}
 
 .pf-v6-c-skeleton {
   position: relative;
@@ -163,4 +172,15 @@
   100% {
     transform: translateX(100%);
   }
+}
+@keyframes pf-v6-c-skeleton-loading-reduced-motion {
+  0% {
+    opacity: 0.25;
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.25;
+  }
 }