@patternfly/patternfly 6.2.0-prerelease.9 → 6.3.0-prerelease.1

package/base/patternfly-variables.css

@@ -1235,6 +1235,6 @@
   --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
 }
 
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) {
+:is(.pf-v6-m-dir-rtl, [dir=rtl]) {
   --pf-v6-global--inverse--multiplier: -1;
 }

package/base/patternfly-variables.scss

@@ -15,6 +15,6 @@
   @include dark.pf-v6-tokens;
 }
 
-@include pf-v6-rtl {
+@include pf-v6-rtl(false) {
   @include pf-v6-set-inverse;
 }

package/components/Accordion/accordion.css

@@ -17,7 +17,9 @@
   --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
   --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
-  --pf-v6-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
+  --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
   --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);

package/components/Accordion/accordion.scss

@@ -31,7 +31,9 @@
   --#{$accordion}--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
   // accordion toggle icon
-  --#{$accordion}__toggle-icon--Transition: .2s ease-in 0s;
+  --#{$accordion}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$accordion}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --#{$accordion}__toggle-icon--Transition: transform var(--#{$accordion}__toggle-icon--TransitionDuration) var(--#{$accordion}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
   --#{$accordion}__toggle--m-expanded__toggle-icon--Rotate: 90deg;
 
   // accordion expandable content
@@ -151,7 +153,7 @@
 .#{$accordion}__toggle-icon {
   @include pf-v6-mirror-inline-on-rtl;
 
-  transition: var(--#{$accordion}__toggle-icon--Transition);
+  transition: var(--#{$accordion}__toggle-icon--Transition); // TODO remove shorthand property in breaking change
 }
 
 .#{$accordion}__expandable-content {

package/components/Alert/alert-group.css

@@ -4,6 +4,48 @@
   --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
   --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
   --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
+  --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-alert-group--m-toast__item--Transition--opacity--default: var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default)
+    var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default)
+    0s;
+  --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
+  --pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
+  --pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
+  --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
+  --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
+  --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-alert-group--m-toast__item--c-alert--Transition: all
+    var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
+    var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
+    0s;
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: all
+    var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
+    var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
+    var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
   --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
   --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -52,25 +94,25 @@
   display: grid;
   grid-template-rows: 1fr;
   opacity: 1;
-  transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
+  transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
   transform: translateX(0) translateY(0);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .pf-v6-c-alert-group__item {
-    transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
+    transition: opacity var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity), transform var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows), margin-block var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block);
   }
   .pf-v6-c-alert-group__item .pf-v6-c-alert {
-    transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
+    transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
   }
 }
-.pf-v6-c-alert-group__item.pf-m-offstage-top {
+.pf-v6-c-alert-group__item.pf-m-offstage-top: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 .pf-v6-c-alert {
+.pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert {
   min-height: 0;
   padding-block-start: 0;
   padding-block-end: 0;
@@ -81,21 +123,22 @@
   margin-block: 0;
   overflow: hidden;
   opacity: 0;
-  transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
-  transform: translateX(100%);
+  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);
 }
 .pf-v6-c-alert-group__item.pf-m-offstage-right .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);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .pf-v6-c-alert-group__item.pf-m-offstage-right {
-    transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
+    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);
+    transform: translateX(100%);
   }
   .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
-    transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
+    transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition);
   }
 }
 .pf-v6-c-alert-group__item:hover {

package/components/Alert/alert-group.scss

@@ -11,6 +11,60 @@
   --#{$alert-group}--m-toast--MaxWidth: #{pf-size-prem(600px)};
   --#{$alert-group}--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
 
+  // Alert group item addition reduced motion
+  --#{$alert-group}--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
+  --#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$alert-group}--m-toast__item--Transition--opacity--default: var(--#{$alert-group}--m-toast__item--TransitionDuration--opacity--default) 
+    var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity--default) 
+    0s;
+
+  // Alert group item addition
+  --#{$alert-group}--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
+  --#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$alert-group}--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
+  --#{$alert-group}--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  --#{$alert-group}--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$alert-group}--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
+  --#{$alert-group}--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
+  --#{$alert-group}--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$alert-group}--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
+  --#{$alert-group}--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
+
+  // Alert addition
+  --#{$alert-group}--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
+  --#{$alert-group}--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$alert-group}--m-toast__item--c-alert--Transition: all 
+    var(--#{$alert-group}--m-toast__item--c-alert--TransitionDuration)
+    var(--#{$alert-group}--m-toast__item--c-alert--TransitionTimingFunction)
+    0s;
+
+  // Alert group item removal reduced motion
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
+  --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
+
+  // Alert group item removal
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
+    
+    // Alert removal
+  --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
+  --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition: all 
+    var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration) 
+    var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction) 
+    var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
+  
   // Overflow button
   --#{$alert-group}__overflow-button--BorderWidth: 0;
   --#{$alert-group}__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
@@ -71,7 +125,7 @@
   // Reduced motion by default
   // transparency change only
   transition: 
-  opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
+    opacity var(--#{$alert-group}--m-toast__item--Transition--opacity--default);
   transform: translateX(0) translateY(0);
 
   // This transition will happen when the item is added (.pf-m-offstage-top is removed)
@@ -79,18 +133,29 @@
   // These values are for regular motion
   @media screen and (prefers-reduced-motion: no-preference) {
     transition: 
-      opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), 
-      transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), 
-      grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, 
-      margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
+      opacity 
+        var(--#{$alert-group}--m-toast__item--TransitionDuration--opacity) 
+        var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity) 
+        var(--#{$alert-group}--m-toast__item--TransitionDelay--opacity),
+      transform 
+        var(--#{$alert-group}--m-toast__item--TransitionDuration--transform) 
+        var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--transform) 
+        var(--#{$alert-group}--m-toast__item--TransitionDelay--transform),
+      grid-template-rows 
+        var(--#{$alert-group}--m-toast__item--TransitionDuration--grid-template-rows) 
+        var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--grid-template-rows),
+      margin-block 
+        var(--#{$alert-group}--m-toast__item--TransitionDuration--margin-block) 
+        var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--margin-block);
 
-      & .pf-v6-c-alert {
-        transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
-      }
+    & .pf-v6-c-alert {
+      transition: var(--#{$alert-group}--m-toast__item--c-alert--Transition);
+    }
   }
 
   // This class is used BEFORE the alert item comes into the list
-  &.pf-m-offstage-top {
+  // Only apply if the item is the first alert in the list (all new alerts should appear at the top)
+  &.pf-m-offstage-top:first-child {
     // make the item have no height and position it up above
     grid-template-rows: 0fr;
     margin-block: 0;
@@ -117,30 +182,52 @@
 
     // This transition will happen when the item is removed
     // Reduced motion by default
-    // transparency change only
+    // transparency change only, the other properties are delayed until opacity reaches 0 then collapse instantly
     transition: 
-      opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
-    transform: translateX(100%);
-
-    & .pf-v6-c-alert {
-      min-height: 0;
-      padding-block-start: 0;
-      padding-block-end: 0;
-      border-width: 0;
-    }
-
-    // This transition will happen when the item is added (.pf-m-offstage-top is removed)
-    // give it height, then slide it down into place
-    // These values are for regular motion
-    @media screen and (prefers-reduced-motion: no-preference) {
+      grid-template-rows 
+        0s
+        var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default),
+      margin-block 
+        0s
+        var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default),
+      opacity
+        var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity--default)
+        var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
+      
+      & .pf-v6-c-alert {
+        min-height: 0;
+        padding-block-start: 0;
+        padding-block-end: 0;
+        border-width: 0;
+        transition: 
+          all 
+            0s
+            var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
+      }
+      
+      // This transition will happen when the item is removed (.pf-m-offstage-right is added)
+      // Slide it down into place, then reduce height
+      // These values are for regular motion
+      @media screen and (prefers-reduced-motion: no-preference) {
       transition: 
-        transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, 
-        opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s,
-        margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), 
-        grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
+        transform 
+          var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--transform) 
+          var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--transform), 
+        opacity 
+          var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity) 
+          var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity),
+        margin-block 
+          var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--margin-block) 
+          var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block) 
+          var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block), 
+        grid-template-rows 
+          var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows) 
+          var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows) 
+          var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
+      transform: translateX(100%);
 
         & .pf-v6-c-alert {
-          transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
+          transition: var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition);
         }
     }
   }

package/components/Banner/banner.css

@@ -129,8 +129,8 @@
   cursor: not-allowed;
 }
 .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
-  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-banner--link--Color);
-  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
+  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
+  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
   --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
   text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
 }

package/components/Banner/banner.scss

@@ -158,8 +158,8 @@
   }
 
   .#{$button}.pf-m-inline {
-    --#{$button}--m-link--Color: var(--#{$banner}--link--Color);
-    --#{$button}--m-link--hover--Color: var(--#{$banner}--link--hover--Color);
+    --#{$button}--m-link--m-inline--Color: var(--#{$banner}--link--Color);
+    --#{$button}--m-link--m-inline--hover--Color: var(--#{$banner}--link--hover--Color);
     --#{$button}--disabled--Color: var(--#{$banner}--link--disabled--Color);
 
     text-decoration-line: var(--#{$banner}--link--TextDecoration);

package/components/Button/button.css

@@ -235,6 +235,14 @@
   --pf-v6-c-button__icon--MarginInlineEnd: 0;
   --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
   --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
+  --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
+  --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
+  --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__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%;
@@ -544,6 +552,20 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
   --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 {
+  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;
+}
+.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.pf-m-favorited .pf-v6-c-button__icon {
+  animation-name: pf-v6-c-button-icon-favorited;
+  animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
+  animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
+}
 .pf-v6-c-button:hover, .pf-v6-c-button:focus {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -599,6 +621,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
   opacity: 0;
 }
+.pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
+  animation-name: pf-v6-c-button-icon-notify;
+  animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
+  animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
+}
 
 .pf-v6-c-button__icon {
   margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
@@ -627,4 +654,18 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-button__count {
   display: inline-flex;
   align-items: center;
+}
+
+@keyframes pf-v6-c-button-icon-notify {
+  33% {
+    transform: rotate(30deg);
+  }
+  66% {
+    transform: rotate(-60deg);
+  }
+}
+@keyframes pf-v6-c-button-icon-favorited {
+  50% {
+    transform: scale(1.5);
+  }
 }

package/components/Button/button.scss

@@ -279,6 +279,16 @@
   --#{$button}__icon--MarginInlineEnd: 0;
   --#{$button}__icon--m-start--MarginInlineEnd: 0;
   --#{$button}__icon--m-end--MarginInlineStart: 0;
+  --#{$button}--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
+  --#{$button}--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
+
+  // Favorite button
+  --#{$button}--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --#{$button}--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$button}--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
+  --#{$button}--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
+  --#{$button}--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$button}--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
 
   // Progress
   --#{$button}__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
@@ -631,6 +641,26 @@
     --#{$button}--FontSize: var(--#{$button}--m-display-lg--FontSize);
   }
 
+  // Favorite button icon will transition color
+  &.pf-m-favorite .#{$button}__icon {
+    transition-timing-function: var(--#{$button}--m-favorite__icon--TransitionTimingFunction);
+    transition-duration: var(--#{$button}--m-favorite__icon--TransitionDuration);
+    transition-property: color;
+  }
+
+  // Favorite button when favorited
+  &.pf-m-favorited {
+    --#{$button}__icon--Color: var(--#{$button}--m-favorited__icon--Color);
+    --#{$button}--hover__icon--Color: var(--#{$button}--m-favorited--hover__icon--Color);
+  }
+
+  // Favorite button will run an animation when favorited
+  &.pf-m-favorited .#{$button}__icon {
+    animation-name: #{$button}-icon-favorited;
+    animation-duration: var(--#{$button}--m-favorited__icon--AnimationDuration);
+    animation-timing-function: var(--#{$button}--m-favorited__icon--AnimationTimingFunction);
+  }
+
   &:hover,
   &:focus {
     --#{$button}--Color: var(--#{$button}--hover--Color);
@@ -705,6 +735,12 @@
       }
     }
   }
+
+  &.pf-m-notify .#{$button}__icon {
+    animation-name: #{$button}-icon-notify;
+    animation-duration: var(--#{$button}--m-notify__icon--AnimationDuration--notify);
+    animation-timing-function: var(--#{$button}--m-notify__icon--AnimationTimingFunction--notify);
+  }
 }
 
 .#{$button}__icon {
@@ -738,3 +774,19 @@
   display: inline-flex;
   align-items: center;
 }
+
+@keyframes #{$button}-icon-notify {
+  33% {
+    transform: rotate(30deg);
+  }
+
+  66% {
+    transform: rotate(-60deg);
+  }
+}
+
+@keyframes #{$button}-icon-favorited {
+  50% {
+    transform: scale(1.5);
+  }
+}

package/components/Card/card.css

@@ -15,6 +15,7 @@
   --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
   --pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v6-c-card__title-text--OverflowWrap: break-word;
   --pf-v6-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-card__body--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
@@ -23,12 +24,14 @@
   --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
-  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
   --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
   --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -186,6 +189,21 @@
 .pf-v6-c-card__header.pf-m-toggle-right .pf-v6-c-card__header-toggle {
   order: 2;
 }
+.pf-v6-c-card__header.pf-m-wrap {
+  --pf-v6-c-card__actions--PaddingInlineStart: 0;
+  gap: var(--pf-v6-c-card__header--m-wrap--RowGap) var(--pf-v6-c-card__header--m-wrap--ColumnGap);
+}
+.pf-v6-c-card__header.pf-m-wrap,
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  flex-wrap: wrap;
+  row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
+}
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  margin-inline-start: 0;
+}
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
+  margin-inline-end: auto;
+}
 
 .pf-v6-c-card__header-main {
   flex-grow: 1;
@@ -201,18 +219,22 @@
 
 .pf-v6-c-card__header-toggle-icon {
   display: inline-block;
-  transition: transform var(--pf-v6-c-card__header-toggle-icon--TransitionDuration) var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
+  transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
+  transition-property: transform;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
   scale: -1 1;
 }
 
 .pf-v6-c-card__title-text {
+  overflow: auto;
   font-family: var(--pf-v6-c-card__title-text--FontFamily);
   font-size: var(--pf-v6-c-card__title-text--FontSize);
   font-weight: var(--pf-v6-c-card__title-text--FontWeight);
   line-height: var(--pf-v6-c-card__title-text--LineHeight);
   color: var(--pf-v6-c-card__title-text--Color);
+  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
 }
 
 .pf-v6-c-card__actions {