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

package/components/Button/button.scss

@@ -20,6 +20,7 @@
   --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$button}--TextDecorationLine: none;
   --#{$button}--TextDecorationStyle: none;
+  --#{$button}--TextDecorationColor: currentcolor;
   --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
   --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$button}--TransitionProperty: color, background-color, border-width, border-color, padding;
@@ -30,6 +31,7 @@
   --#{$button}--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
   --#{$button}--hover--TextDecorationLine: none;
   --#{$button}--hover--TextDecorationStyle: none;
+  --#{$button}--hover--TextDecorationColor: currentcolor;
 
   // Clicked
   --#{$button}--m-clicked--BackgroundColor: transparent;
@@ -128,6 +130,12 @@
   --#{$button}--span--m-link--m-inline--Display: inline;
   --#{$button}--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
+  --#{$button}--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
+  --#{$button}--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
+  --#{$button}--m-link--m-inline--TextDecorationColor: currentcolor;
+  --#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
+  --#{$button}--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
+  --#{$button}--m-link--m-inline--hover--TextDecorationColor: currentcolor;
 
   // Plain
   --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -259,6 +267,7 @@
   // Disabled
   --#{$button}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --#{$button}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --#{$button}--disabled--TextDecorationColor: currentcolor;
   --#{$button}--disabled--BorderColor: transparent;
   --#{$button}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
 
@@ -270,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
@@ -311,7 +330,9 @@
   line-height: var(--#{$button}--LineHeight, inherit);
   color: var(--#{$button}--Color);
   text-align: center;
-  text-decoration: var(--#{$button}--TextDecorationLine) var(--#{$button}--TextDecorationStyle);
+  text-decoration-line: var(--#{$button}--TextDecorationLine);
+  text-decoration-style: var(--#{$button}--TextDecorationStyle);
+  text-decoration-color: var(--#{$button}--TextDecorationColor);
   white-space: nowrap;
   cursor: pointer; // needed for when a button does not use <button> - eg, <span>
   user-select: none;
@@ -440,6 +461,12 @@
       --#{$button}--disabled--BackgroundColor: transparent;
       --#{$button}--disabled--Color: var(--#{$button}--m-link--m-inline--disabled--Color);
       --#{$button}--disabled__icon--Color: var(--#{$button}--m-link--m-inline--disabled__icon--Color);
+      --#{$button}--m-link--Color: var(--#{$button}--m-link--m-inline--Color);
+      --#{$button}--m-link__icon--Color: var(--#{$button}--m-link--m-inline__icon--Color);
+      --#{$button}--TextDecorationColor: var(--#{$button}--m-link--m-inline--TextDecorationColor);
+      --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor);
+      --#{$button}--m-link--hover--Color: var(--#{$button}--m-link--m-inline--hover--Color);
+      --#{$button}--m-link--hover__icon--Color: var(--#{$button}--m-link--m-inline--hover__icon--Color);
 
       text-align: start;
       white-space: normal;
@@ -614,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);
@@ -623,7 +670,9 @@
     --#{$button}--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-plain--m-no-padding--hover__icon--Color);
     --#{$button}__icon--Color: var(--#{$button}--hover__icon--Color);
 
-    text-decoration: var(--#{$button}--hover--TextDecorationLine) var(--#{$button}--hover--TextDecorationStyle);
+    text-decoration-line: var(--#{$button}--hover--TextDecorationLine);
+    text-decoration-style: var(--#{$button}--hover--TextDecorationStyle);
+    text-decoration-color: var(--#{$button}--hover--TextDecorationColor);
   }
 
   &.pf-m-clicked {
@@ -645,6 +694,7 @@
   &.pf-m-disabled,
   &.pf-m-aria-disabled {
     color: var(--#{$button}--disabled--Color);
+    text-decoration-color: var(--#{$button}--disabled--TextDecorationColor);
     background-color: var(--#{$button}--disabled--BackgroundColor);
 
     &::after {
@@ -685,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 {
@@ -718,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

@@ -23,6 +23,8 @@
   --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);
@@ -186,6 +188,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;

package/components/Card/card.scss

@@ -25,6 +25,8 @@
   --#{$card}__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
   --#{$card}__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --#{$card}__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$card}__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$card}__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
 
   // Expandable
   --#{$card}__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -265,6 +267,26 @@
       order: 2;
     }
   }
+
+  &.pf-m-wrap {
+    --pf-v6-c-card__actions--PaddingInlineStart: 0;
+
+    gap: var(--#{$card}__header--m-wrap--RowGap) var(--#{$card}__header--m-wrap--ColumnGap);
+
+    &,
+    .#{$card}__actions {
+      flex-wrap: wrap;
+      row-gap: var(--#{$card}__header--m-wrap--RowGap);
+    }
+
+    .#{$card}__actions {
+      + * {
+        margin-inline-end: auto;
+      }
+
+      margin-inline-start: 0
+    }
+  }
 }
 
 .#{$card}__header-main {

package/components/Content/content.css

@@ -83,7 +83,8 @@
 
 :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
   color: var(--pf-v6-c-content--a--Color);
-  text-decoration: var(--pf-v6-c-content--a--TextDecorationLine) var(--pf-v6-c-content--a--TextDecorationStyle);
+  text-decoration-line: var(--pf-v6-c-content--a--TextDecorationLine);
+  text-decoration-style: var(--pf-v6-c-content--a--TextDecorationStyle);
 }
 :is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus) {
   --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);

package/components/Content/content.scss

@@ -119,7 +119,8 @@
     & a
   ) {
     color: var(--#{$content}--a--Color);
-    text-decoration: var(--#{$content}--a--TextDecorationLine) var(--#{$content}--a--TextDecorationStyle);
+    text-decoration-line: var(--#{$content}--a--TextDecorationLine);
+    text-decoration-style: var(--#{$content}--a--TextDecorationStyle);
 
     &:is(:hover, :focus) {
       --#{$content}--a--Color: var(--#{$content}--a--hover--Color);

package/components/DescriptionList/description-list.css

@@ -14,7 +14,7 @@
   --pf-v6-c-description-list__term--Display: inline;
   --pf-v6-c-description-list__term--sm--Display: flex;
   --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -196,7 +196,8 @@
   min-width: 0;
 }
 .pf-v6-c-description-list__text.pf-m-help-text {
-  text-decoration: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationLine) var(--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle);
+  text-decoration-line: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationLine);
+  text-decoration-style: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle);
   text-underline-offset: var(--pf-v6-c-description-list__text--m-help-text--TextUnderlineOffset);
   cursor: pointer;
 }

package/components/DescriptionList/description-list.scss

@@ -24,7 +24,7 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   --#{$description-list}__term--Display: inline;
   --#{$description-list}__term--sm--Display: flex;
   --#{$description-list}__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --#{$description-list}__term--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$description-list}__term--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$description-list}__term--LineHeight: var(--pf-t--global--font--line-height--body);
 
   @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
@@ -179,7 +179,8 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   min-width: 0; // this allows overflow-wrap to work
 
   &.pf-m-help-text {
-    text-decoration: var(--#{$description-list}__text--m-help-text--TextDecorationLine) var(--#{$description-list}__text--m-help-text--TextDecorationStyle);
+    text-decoration-line: var(--#{$description-list}__text--m-help-text--TextDecorationLine);
+    text-decoration-style: var(--#{$description-list}__text--m-help-text--TextDecorationStyle);
     text-underline-offset: var(--#{$description-list}__text--m-help-text--TextUnderlineOffset);
     cursor: pointer;
 

package/components/Drawer/drawer.css

@@ -15,7 +15,8 @@
   --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-drawer__panel--TransitionDuration: 250ms;
+  --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
   --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
   --pf-v6-c-drawer__panel--FlexBasis: 100%;
   --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
@@ -229,6 +230,7 @@
   overflow: auto;
   background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
   box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
+  transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
   transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
   -webkit-overflow-scrolling: touch;

package/components/Drawer/drawer.scss

@@ -27,7 +27,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   --#{$drawer}__panel--RowGap: var(--pf-t--global--spacer--sm);
   --#{$drawer}__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$drawer}__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --#{$drawer}__panel--TransitionDuration: 250ms;
+  --#{$drawer}__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$drawer}__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
   --#{$drawer}__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
   --#{$drawer}__panel--FlexBasis: 100%;
   --#{$drawer}__panel--md--FlexBasis--min: #{pf-size-prem(24px)};
@@ -298,6 +299,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   overflow: auto;
   background-color: var(--#{$drawer}__panel--BackgroundColor);
   box-shadow: var(--#{$drawer}__panel--BoxShadow);
+  transition-timing-function: var(--#{$drawer}__panel--TransitionTimingFunction);
   transition-duration: var(--#{$drawer}__panel--TransitionDuration);
   transition-property: var(--#{$drawer}__panel--TransitionProperty);
   -webkit-overflow-scrolling: touch;

package/components/Form/form.css

@@ -10,16 +10,16 @@
   --pf-v6-c-form__group-label--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart: 0;
   --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
-  --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form__label--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-form__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-form__label--hover--Cursor: pointer;
   --pf-v6-c-form__label--m-disabled--hover--Cursor: not-allowed;
   --pf-v6-c-form__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-form__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
-  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
   --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -333,9 +333,6 @@
   font-size: var(--pf-v6-c-form__label--FontSize);
   line-height: var(--pf-v6-c-form__label--LineHeight);
 }
-.pf-v6-c-form__label::selection {
-  background-color: none;
-}
 .pf-v6-c-form__label:not(.pf-m-disabled):hover {
   cursor: var(--pf-v6-c-form__label--hover--Cursor);
 }

package/components/Form/form.scss

@@ -67,7 +67,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   --#{$form}--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
 
   // Label
-  --#{$form}__label--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$form}__label--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$form}__label--LineHeight: var(--pf-t--global--font--line-height--body);
   --#{$form}__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
   --#{$form}__label--hover--Cursor: pointer;
@@ -78,11 +78,11 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 
   // Required labels
   --#{$form}__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
-  --#{$form}__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$form}__label-required--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$form}__label-required--Color: var(--pf-t--global--color--status--danger--default);
 
   // Field level help
-  --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Form group label info
   --#{$form}__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
@@ -261,10 +261,6 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   font-size: var(--#{$form}__label--FontSize);
   line-height: var(--#{$form}__label--LineHeight);
 
-  &::selection {
-    background-color: none;
-  }
-
   &:not(.pf-m-disabled):hover {
     cursor: var(--#{$form}__label--hover--Cursor);
   }

package/components/HelperText/helper-text.css

@@ -12,6 +12,8 @@
   --pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
   --pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
@@ -56,6 +58,17 @@
   --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
   --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
   --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
+  animation-name: --pf-v6-c-helper-text-item-fade-in;
+  animation-duration: var(--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity);
+}
+@keyframes --pf-v6-c-helper-text-item-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 .pf-v6-c-helper-text__item.pf-m-dynamic {
   --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);

package/components/HelperText/helper-text.scss

@@ -16,6 +16,8 @@
   --#{$helper-text}__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --#{$helper-text}__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
   --#{$helper-text}__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$helper-text}__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --#{$helper-text}__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
 
   // dynamic
   --#{$helper-text}--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -71,6 +73,20 @@
     --#{$helper-text}__item-text--FontWeight: var(--#{$helper-text}__item-text--m-error--FontWeight);
     --#{$helper-text}__item-icon--Color: var(--#{$helper-text}__item-icon--m-error--Color);
     --#{$helper-text}--m-dynamic__item-icon--Color: var(--#{$helper-text}--m-dynamic--m-error__item-icon--Color);
+
+    animation-name: --#{$helper-text}-item-fade-in;
+    animation-duration: var(--#{$helper-text}__item--m-error--TransitionDuration--Opacity);
+    animation-timing-function: var(--#{$helper-text}__item--m-error--TransitionTimingFunction--Opacity); 
+    
+    @keyframes --#{$helper-text}-item-fade-in {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
   }
 
   &.pf-m-dynamic {

package/components/JumpLinks/jump-links.css

@@ -186,7 +186,7 @@
   padding-block-end: var(--pf-v6-c-jump-links__link--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-jump-links__link--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-jump-links__link--PaddingInlineEnd);
-  text-decoration: none;
+  text-decoration-line: none;
   outline-offset: var(--pf-v6-c-jump-links__link--OutlineOffset);
 }
 .pf-v6-c-jump-links__link:is(:hover, :focus) {

package/components/JumpLinks/jump-links.scss

@@ -160,7 +160,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
   padding-block-end: var(--#{$jump-links}__link--PaddingBlockEnd);
   padding-inline-start: var(--#{$jump-links}__link--PaddingInlineStart);
   padding-inline-end: var(--#{$jump-links}__link--PaddingInlineEnd);
-  text-decoration: none;
+  text-decoration-line: none;
   outline-offset: var(--#{$jump-links}__link--OutlineOffset);
 
   &:is(:hover, :focus) {

package/components/Label/label.css

@@ -381,7 +381,8 @@
   --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
 }
 .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
-  text-decoration: var(--pf-v6-c-label--m-editable--TextDecorationLine) var(--pf-v6-c-label--m-editable--TextDecorationStyle);
+  text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
+  text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
   text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
 }
 .pf-v6-c-label.pf-m-editable-active {
@@ -414,7 +415,7 @@
   --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
 }
 .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
-  text-decoration: none;
+  text-decoration-line: none;
 }
 .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
   --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);

package/components/Label/label.scss

@@ -458,7 +458,8 @@
     }
 
     .#{$label}__text {
-      text-decoration: var(--#{$label}--m-editable--TextDecorationLine) var(--#{$label}--m-editable--TextDecorationStyle);
+      text-decoration-line: var(--#{$label}--m-editable--TextDecorationLine);
+      text-decoration-style: var(--#{$label}--m-editable--TextDecorationStyle);
       text-underline-offset: var(--#{$label}--m-editable--TextUnderlineOffset);
     }
   }
@@ -500,7 +501,7 @@
     .#{$label}__content {
       &,
       &:is(:hover, :focus) {
-        text-decoration: none;
+        text-decoration-line: none;
       }
 
       &:is(:hover, :focus) {

package/components/Masthead/masthead.css

@@ -185,7 +185,7 @@
   grid-column-end: -1;
   row-gap: var(--pf-v6-c-masthead__content-RowGap, var(--pf-v6-c-masthead--RowGap));
   column-gap: var(--pf-v6-c-masthead__content--ColumnGap, var(--pf-v6-c-masthead--ColumnGap));
-  align-self: stretch;
+  align-self: center;
   order: var(--pf-v6-c-masthead__content--Order);
   min-width: 0.25rem;
 }

package/components/Masthead/masthead.scss

@@ -199,7 +199,7 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   grid-column-end: -1; // force content to right edge or full available width
   row-gap: var(--#{$masthead}__content-RowGap, var(--#{$masthead}--RowGap));
   column-gap: var(--#{$masthead}__content--ColumnGap, var(--#{$masthead}--ColumnGap));
-  align-self: stretch;
+  align-self: center;
   order: var(--#{$masthead}__content--Order);
   min-width: #{pf-size-prem(4ch)}; // allow flex containers to shrink to fit possible overflow
 }

package/components/Menu/menu.css

@@ -177,11 +177,20 @@
 .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) {
   --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
   --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
-  --pf-v6-c-menu__item-external-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
+  --pf-v6-c-menu__item-external--Color: transparent;
+  --pf-v6-c-menu__item-select-icon--Color: transparent;
   --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
   --pf-v6-c-menu__list-item--BackgroundColor: transparent;
+  --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent;
+}
+.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled),
+.pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled) {
   pointer-events: none;
 }
+.pf-v6-c-menu__list-item.pf-m-aria-disabled .pf-v6-c-menu__item,
+.pf-v6-c-menu__item-action.pf-m-aria-disabled .pf-v6-c-menu__item {
+  cursor: default;
+}
 
 [class*=pf-v6-c-menu]:is([hidden]) {
   display: none;
@@ -325,7 +334,6 @@
   z-index: var(--pf-v6-c-menu--ZIndex);
   margin-block-start: calc(var(--pf-v6-c-menu--RowGap) * -1);
   margin-block-end: calc(var(--pf-v6-c-menu--RowGap) * -1);
-  overflow: hidden;
 }
 .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
   padding-block-start: var(--pf-v6-c-menu--RowGap);
@@ -429,7 +437,7 @@
   line-height: var(--pf-v6-c-menu__item--LineHeight);
   color: var(--pf-v6-c-menu__item--Color);
   text-align: start;
-  text-decoration: none;
+  text-decoration-line: none;
   background-color: var(--pf-v6-c-menu__item--BackgroundColor);
   border: 0;
   outline-offset: var(--pf-v6-c-menu--OutlineOffset);
@@ -549,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

@@ -175,12 +175,22 @@
   &:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled="true"]) {
     --#{$menu}__item--Color: var(--#{$menu}__item--m-disabled--Color);
     --#{$menu}__item-toggle-icon--Color: var(--#{$menu}--icon--disabled--Color);
-    --#{$menu}__item-external-icon--Color: var(--#{$menu}--icon--disabled--Color);
+    --#{$menu}__item-external--Color: transparent;
+    --#{$menu}__item-select-icon--Color: transparent;
     --#{$menu}__item-description--Color: var(--#{$menu}--icon--disabled--Color);
     --#{$menu}__list-item--BackgroundColor: transparent;
+    --#{$menu}__list-item--hover--BackgroundColor: transparent;
+  }
 
+  &:is(.pf-m-disabled, :disabled) {
     pointer-events: none;
   }
+
+  &.pf-m-aria-disabled {
+    .#{$menu}__item {
+      cursor: default;
+    }
+  }
 }
 
 // - Menu hidden
@@ -384,12 +394,10 @@
 
     // offset row-gap when scrollbar is present
     .#{$menu}__content {
-      // TODO: figure out why this fixes the scrollable
       position: relative;
       z-index: var(--#{$menu}--ZIndex);
       margin-block-start: calc(var(--#{$menu}--RowGap) * -1);
       margin-block-end: calc(var(--#{$menu}--RowGap) * -1);
-      overflow: hidden; // hide scrollbars
     }
 
     .#{$menu}__list {
@@ -518,7 +526,7 @@
   line-height: var(--#{$menu}__item--LineHeight);
   color: var(--#{$menu}__item--Color);
   text-align: start;
-  text-decoration: none;
+  text-decoration-line: none;
   background-color: var(--#{$menu}__item--BackgroundColor);
   border: 0;
   outline-offset: var(--#{$menu}--OutlineOffset);
@@ -607,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) {