@patternfly/patternfly 6.2.0-prerelease.19 → 6.2.0-prerelease.20

package/components/Button/button.css

@@ -237,6 +237,12 @@
   --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%;
@@ -546,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);
@@ -643,4 +663,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   66% {
     transform: rotate(-60deg);
   }
+}
+@keyframes pf-v6-c-button-icon-favorited {
+  50% {
+    transform: scale(1.5);
+  }
 }

package/components/Button/button.scss

@@ -282,6 +282,14 @@
   --#{$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
   --#{$button}__progress--Opacity: 0;
@@ -633,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);
@@ -756,3 +784,9 @@
     transform: rotate(-60deg);
   }
 }
+
+@keyframes #{$button}-icon-favorited {
+  50% {
+    transform: scale(1.5);
+  }
+}

package/components/Menu/menu.css

@@ -557,16 +557,16 @@
   opacity: 0;
 }
 
-.pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button,
+.pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
 .pf-v6-c-menu__item-action.pf-m-favorited,
 .pf-v6-c-menu__item-action.pf-m-favorited:hover,
-.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
+.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
   --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
 }
-.pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
+.pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
 .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
 .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
-.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
+.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
   --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
 }
 

package/components/Menu/menu.scss

@@ -615,11 +615,12 @@
 
 // TODO: standardize icon fitting
 // - Menu item action
+// TODO in breaking change - remove button styling here that is taken care of by favorite button now
 .#{$menu}__item-toggle-icon,
 .#{$menu}__item-action {
   &.pf-m-favorited,
   &.pf-m-favorited:hover,
-  &.pf-m-favorited .#{$button} {
+  &.pf-m-favorited .#{$button}:not(.pf-m-favorited) {
     --#{$button}--m-plain__icon--Color: var(--#{$menu}__item-action--m-favorited--Color);
     
     &:is(:hover, :focus) {

package/components/Switch/switch.css

@@ -30,7 +30,9 @@
   --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
   --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
   --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
-  --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
+  --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
+  --pf-v6-c-switch__toggle--before--Transition: transform var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration), background-color var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration);
   --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
 }
 

package/components/Switch/switch.scss

@@ -41,7 +41,9 @@
   --#{$switch}__toggle--before--Height: var(--#{$switch}__toggle--before--Width);
   --#{$switch}__toggle--before--InsetInlineStart: calc((var(--#{$switch}__toggle--Height) - var(--#{$switch}__toggle--before--Height)) / 2);
   --#{$switch}__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
-  --#{$switch}__toggle--before--Transition: transform .25s ease 0s;
+  --#{$switch}__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$switch}__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
+  --#{$switch}__toggle--before--Transition: transform var(--#{$switch}__toggle--before--TransitionTimingFunction) var(--#{$switch}__toggle--before--TransitionDuration), background-color var(--#{$switch}__toggle--before--TransitionTimingFunction) var(--#{$switch}__toggle--before--TransitionDuration); // TODO remove in breaking change along with shorthand property
   --#{$switch}__toggle--Width: calc(var(--#{$switch}__toggle--Height) + var(--#{$switch}__toggle-icon--Offset) + var(--#{$switch}__toggle--before--Width));
 }
 
@@ -152,7 +154,7 @@
     content: "";
     background-color: var(--#{$switch}__input--not-checked__toggle--before--BackgroundColor);
     border-radius: var(--#{$switch}__toggle--before--BorderRadius);
-    transition: var(--#{$switch}__toggle--before--Transition);
+    transition: var(--#{$switch}__toggle--before--Transition); // TODO remove shorthand in breaking change
     transform: translateY(-50%);
   }
 

package/components/Table/table.css

@@ -583,13 +583,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   vertical-align: baseline;
 }
 
-.pf-v6-c-table__favorite .pf-v6-c-button {
+.pf-v6-c-table__favorite .pf-v6-c-button:not(.pf-m-favorite) {
   --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
 }
-.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
+.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
   --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
 }
-.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
+.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
   --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
 }
 

package/components/Table/table.scss

@@ -789,12 +789,13 @@
 }
 
 // - Table favorite
+// TODO in breaking change - remove button styling here that is taken care of by favorite button now
 .#{$table}__favorite {
-  .#{$button} {
+  .#{$button}:not(.pf-m-favorite) {
     --#{$button}--FontSize: var(--#{$table}__favorite--c-button--FontSize);
   }
 
-  &.pf-m-favorited .#{$button} {
+  &.pf-m-favorited .#{$button}:not(.pf-m-favorited) {
     --#{$button}--m-plain__icon--Color: var(--#{$table}__favorite--m-favorited--c-button--Color);
 
     &:is(:hover, :focus) {

package/components/_index.css

@@ -1673,6 +1673,12 @@ button.pf-v6-c-breadcrumb__link {
   --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%;
@@ -1982,6 +1988,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);
@@ -2080,6 +2100,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
     transform: rotate(-60deg);
   }
 }
+@keyframes pf-v6-c-button-icon-favorited {
+  50% {
+    transform: scale(1.5);
+  }
+}
 .pf-v6-c-calendar-month {
   --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -10050,16 +10075,16 @@ ul.pf-v6-c-list {
   opacity: 0;
 }
 
-.pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button,
+.pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
 .pf-v6-c-menu__item-action.pf-m-favorited,
 .pf-v6-c-menu__item-action.pf-m-favorited:hover,
-.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
+.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
   --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
 }
-.pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
+.pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
 .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
 .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
-.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
+.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
   --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
 }
 
@@ -14715,7 +14740,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
   --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
   --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
-  --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
+  --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
+  --pf-v6-c-switch__toggle--before--Transition: transform var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration), background-color var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration);
   --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
 }
 
@@ -17030,13 +17057,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   vertical-align: baseline;
 }
 
-.pf-v6-c-table__favorite .pf-v6-c-button {
+.pf-v6-c-table__favorite .pf-v6-c-button:not(.pf-m-favorite) {
   --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
 }
-.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
+.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
   --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
 }
-.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
+.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
   --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
 }
 

package/docs/components/Button/examples/Button.md

@@ -1999,6 +1999,32 @@ For when a plain/icon button is placed inline with text
 
 ```
 
+### Favorite
+
+A favorite button should use a plain button with the star icon. Applying `.pf-m-favorited` to the button initiates a microanimation and indicates that the item is favorited.
+
+```html
+<button
+  class="pf-v6-c-button pf-m-favorite pf-m-plain"
+  type="button"
+  aria-label="not starred"
+>
+  <span class="pf-v6-c-button__icon">
+    <i class="fas fa-star" aria-hidden="true"></i>
+  </span>
+</button>
+<button
+  class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
+  type="button"
+  aria-label="starred"
+>
+  <span class="pf-v6-c-button__icon">
+    <i class="fas fa-star" aria-hidden="true"></i>
+  </span>
+</button>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -2052,3 +2078,6 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-progress` | `.pf-v6-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
 | `.pf-m-in-progress` | `.pf-v6-c-button` | Indicates that the button is in the in progress state. |
 | `.pf-m-stateful` | `.pf-v6-c-button` | Indicates that the button is used for one of read, unread, and attention states. **Note:** Always use with a modifier of `.pf-m-read`, `.pf-m-unread`, or `.pf-m-attention`. |
+| `.pf-m-notify` | `.pf-v6-c-button` | Indicates that the button should show the user notification of an event. **Note:** This is intended for use with a bell icon in the notification badge. |
+| `.pf-m-favorite` | `.pf-v6-c-button .pf-m-plain` | Modifies a plain button to be a favorite button. **Note:** This is intended for use with a star icon. |
+| `.pf-m-favorited` | `.pf-v6-c-button .pf-m-plain .pf-m-favorite` | Modifies a favorite button to indicate that item is favorited.  |

package/docs/components/Menu/examples/Menu.md

@@ -5640,9 +5640,9 @@ cssPrefix: pf-v6-c-menu
             </span>
             <span class="pf-v6-c-menu__item-description">This is a description</span>
           </a>
-          <div class="pf-v6-c-menu__item-action pf-m-favorited">
+          <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Starred"
@@ -5666,9 +5666,9 @@ cssPrefix: pf-v6-c-menu
             </span>
             <span class="pf-v6-c-menu__item-description">This is a description</span>
           </a>
-          <div class="pf-v6-c-menu__item-action pf-m-favorited">
+          <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Starred"
@@ -5699,7 +5699,7 @@ cssPrefix: pf-v6-c-menu
           </a>
           <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Not starred"
@@ -5728,7 +5728,7 @@ cssPrefix: pf-v6-c-menu
           </a>
           <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Not starred"

package/docs/components/Table/examples/Table.md

@@ -20222,12 +20222,9 @@ For sticky columns to function correctly, the parent table's width must be contr
         </label>
       </td>
 
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-favorite-button1"
@@ -20284,7 +20281,7 @@ For sticky columns to function correctly, the parent table's width must be contr
 
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-favorite-button2"
@@ -20337,12 +20334,9 @@ For sticky columns to function correctly, the parent table's width must be contr
         </label>
       </td>
 
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-favorite-button3"
@@ -20397,7 +20391,7 @@ For sticky columns to function correctly, the parent table's width must be contr
 
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-favorite-button4"
@@ -20459,7 +20453,7 @@ For sticky columns to function correctly, the parent table's width must be contr
         <div class="pf-v6-c-action-list pf-m-icons">
           <div class="pf-v6-c-action-list__item">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorite pf-m-plain"
               type="button"
               aria-label="Favorite all"
             >
@@ -20502,12 +20496,9 @@ For sticky columns to function correctly, the parent table's width must be contr
 
   <tbody class="pf-v6-c-table__tbody" role="rowgroup">
     <tr class="pf-v6-c-table__tr" role="row">
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-sortable-favorite-button1"
@@ -20534,12 +20525,9 @@ For sticky columns to function correctly, the parent table's width must be contr
     </tr>
 
     <tr class="pf-v6-c-table__tr" role="row">
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-sortable-favorite-button3"
@@ -20566,7 +20554,7 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr class="pf-v6-c-table__tr" role="row">
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-sortable-favorite-button2"
@@ -20593,7 +20581,7 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr class="pf-v6-c-table__tr" role="row">
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-sortable-favorite-button4"
@@ -20620,7 +20608,7 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr class="pf-v6-c-table__tr" role="row">
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-sortable-favorite-button5"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.2.0-prerelease.19",
+  "version": "6.2.0-prerelease.20",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -47,7 +47,7 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.1.0",
-    "@patternfly/documentation-framework": "6.5.16",
+    "@patternfly/documentation-framework": "6.5.18",
     "@patternfly/patternfly-a11y": "5.0.0",
     "@patternfly/react-code-editor": "6.1.0",
     "@patternfly/react-core": "6.1.0",

package/patternfly-no-globals.css

@@ -9135,6 +9135,12 @@ button.pf-v6-c-breadcrumb__link {
   --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%;
@@ -9444,6 +9450,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);
@@ -9542,6 +9562,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
     transform: rotate(-60deg);
   }
 }
+@keyframes pf-v6-c-button-icon-favorited {
+  50% {
+    transform: scale(1.5);
+  }
+}
 .pf-v6-c-calendar-month {
   --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -17512,16 +17537,16 @@ ul.pf-v6-c-list {
   opacity: 0;
 }
 
-.pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button,
+.pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
 .pf-v6-c-menu__item-action.pf-m-favorited,
 .pf-v6-c-menu__item-action.pf-m-favorited:hover,
-.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
+.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
   --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
 }
-.pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
+.pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
 .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
 .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
-.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
+.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
   --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
 }
 
@@ -22177,7 +22202,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
   --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
   --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
-  --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
+  --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
+  --pf-v6-c-switch__toggle--before--Transition: transform var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration), background-color var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration);
   --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
 }
 
@@ -24492,13 +24519,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   vertical-align: baseline;
 }
 
-.pf-v6-c-table__favorite .pf-v6-c-button {
+.pf-v6-c-table__favorite .pf-v6-c-button:not(.pf-m-favorite) {
   --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
 }
-.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
+.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
   --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
 }
-.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
+.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
   --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
 }