@patternfly/patternfly 6.2.0-prerelease.9 → 6.2.0

package/components/FormControl/form-control.scss

@@ -21,10 +21,37 @@
 
   // padding
   --#{$form-control}--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
-  --#{$form-control}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
-  --#{$form-control}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
-  --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--inset--base);
-  --#{$form-control}--PaddingInlineStart: var(--#{$form-control}--inset--base);
+  --#{$form-control}--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
+  --#{$form-control}--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
+  --#{$form-control}--PaddingInlineEnd--base: var(--#{$form-control}--inset--base);
+  --#{$form-control}--PaddingInlineStart--base: var(--#{$form-control}--inset--base);
+  --#{$form-control}--PaddingBlockStart: var(--#{$form-control}--PaddingBlockStart--base);
+  --#{$form-control}--PaddingBlockEnd: var(--#{$form-control}--PaddingBlockEnd--base);
+  --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--PaddingInlineEnd--base);
+  --#{$form-control}--PaddingInlineStart: var(--#{$form-control}--PaddingInlineStart--base);
+
+  // utilities padding inline end
+  --#{$form-control}__utilities--input--PaddingInlineEnd: var(--#{$form-control}__input--PaddingInlineEnd);
+  --#{$form-control}__utilities--select--PaddingInlineEnd: var(--#{$form-control}__select--PaddingInlineEnd);
+  --#{$form-control}__utilities--textarea--PaddingInlineEnd: var(--#{$form-control}__textarea--PaddingInlineEnd);
+  
+  // input padding
+  --#{$form-control}__input--PaddingBlockStart: var(--#{$form-control}--PaddingBlockStart--base);
+  --#{$form-control}__input--PaddingBlockEnd: var(--#{$form-control}--PaddingBlockEnd--base);
+  --#{$form-control}__input--PaddingInlineEnd: var(--#{$form-control}--PaddingInlineEnd--base);
+  --#{$form-control}__input--PaddingInlineStart: var(--#{$form-control}--PaddingInlineStart--base);
+
+  // select padding
+  --#{$form-control}__select--PaddingBlockStart: var(--#{$form-control}--PaddingBlockStart--base);
+  --#{$form-control}__select--PaddingBlockEnd: var(--#{$form-control}--PaddingBlockEnd--base);
+  --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}--PaddingInlineEnd--base);
+  --#{$form-control}__select--PaddingInlineStart: var(--#{$form-control}--PaddingInlineStart--base);
+  
+  // textarea padding
+  --#{$form-control}__textarea--PaddingBlockStart: var(--#{$form-control}--PaddingBlockStart--base);
+  --#{$form-control}__textarea--PaddingBlockEnd: var(--#{$form-control}--PaddingBlockEnd--base);
+  --#{$form-control}__textarea--PaddingInlineEnd: var(--#{$form-control}--PaddingInlineEnd--base);
+  --#{$form-control}__textarea--PaddingInlineStart: var(--#{$form-control}--PaddingInlineStart--base);
 
   // hover
   --#{$form-control}--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
@@ -56,39 +83,41 @@
   --#{$form-control}--m-readonly--m-plain--BorderColor: transparent;
   --#{$form-control}--m-readonly--m-plain--inset--base: 0;
   --#{$form-control}--m-readonly--m-plain--OutlineOffset: 0;
+  --#{$form-control}--icon--width: var(--#{$form-control}--FontSize);
 
   // success
   --#{$form-control}--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
-  --#{$form-control}--m-success--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
+  --#{$form-control}--m-success--PaddingInlineEnd: initial; // remove in breaking change
+  --#{$form-control}__select--m-success--m-status--PaddingInlineEnd: initial; // remove in breaking change
+  --#{$form-control}__input--m-success--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--input--PaddingInlineEnd));
+  --#{$form-control}__select--m-success--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--select--PaddingInlineEnd));
+  --#{$form-control}__textarea--m-success--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--textarea--PaddingInlineEnd));
 
   // warning
   --#{$form-control}--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
-  --#{$form-control}--m-warning--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
-
+  --#{$form-control}--m-warning--PaddingInlineEnd: initial; // remove in breaking change
+  --#{$form-control}__select--m-warning--m-status--PaddingInlineEnd: initial; // remove in breaking change
+  --#{$form-control}__input--m-warning--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--input--PaddingInlineEnd));
+  --#{$form-control}__select--m-warning--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--select--PaddingInlineEnd));
+  --#{$form-control}__textarea--m-warning--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--textarea--PaddingInlineEnd));
+    
   // error
   --#{$form-control}--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
-  --#{$form-control}--m-error--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
-  --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize);
+  --#{$form-control}--m-error--PaddingInlineEnd: initial; // remove in breaking change
+  --#{$form-control}__select--m-error--m-status--PaddingInlineEnd: initial; // remove in breaking change
+  --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize); // remove in breaking change
+  --#{$form-control}__input--m-error--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--input--PaddingInlineEnd));
+  --#{$form-control}__select--m-error--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--select--PaddingInlineEnd));
+  --#{$form-control}__textarea--m-error--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--textarea--PaddingInlineEnd));
 
   // custom icon
-  --#{$form-control}--m-icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
+  --#{$form-control}--m-icon--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--input--PaddingInlineEnd));
   --#{$form-control}--m-icon--icon--width: var(--#{$form-control}--FontSize);
   --#{$form-control}--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
-  --#{$form-control}--m-icon--icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
-  --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}--inset--base);
-  --#{$form-control}__select--PaddingInlineStart: var(--#{$form-control}--inset--base);
-
-  // Select success
-  --#{$form-control}__select--m-success--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
-
-  // Select warning
-  --#{$form-control}__select--m-warning--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
-
-  // Select invalid
-  --#{$form-control}__select--m-error--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
+  --#{$form-control}--m-icon--icon--PaddingInlineEnd: calc(var(--#{$form-control}--icon--width) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--input--PaddingInlineEnd));
 
   // Textarea
   --#{$form-control}--textarea--Width: var(--#{$form-control}--Width);
@@ -108,13 +137,15 @@
 
   // Form control utilities
   --#{$form-control}__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
-  --#{$form-control}__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
-  --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}--inset--base);
+  --#{$form-control}__utilities--PaddingBlockStart: var(--#{$form-control}--PaddingBlockStart);
+  --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}--PaddingInlineEnd--base);
+  --#{$form-control}__utilities--textarea--PaddingBlockStart: calc(var(--#{$form-control}__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
 
   // Form control select toggle icon
-  --#{$form-control}__toggle-icon--PaddingInlineEnd: var(--#{$form-control}--inset--base);
-  --#{$form-control}__toggle-icon--PaddingInlineStart: var(--#{$form-control}--inset--base);
+  --#{$form-control}__toggle-icon--PaddingInlineStart: 0; // remove in breaking change
+  --#{$form-control}__toggle-icon--PaddingInlineEnd: 0; // remove in breaking change
   --#{$form-control}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
+  --#{$form-control}__toggle-icon--FontSize: var(--pf-t--global--icon--size--font--body--default); 
   --#{$form-control}--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 }
 
@@ -178,26 +209,44 @@
     text-overflow: ellipsis;
   }
 
+  @at-root .#{$form-control} {
+    &:has(input) {
+      --#{$form-control}--PaddingBlockStart: var(--#{$form-control}__input--PaddingBlockStart);
+      --#{$form-control}--PaddingBlockEnd: var(--#{$form-control}__input--PaddingBlockEnd);
+      --#{$form-control}--PaddingInlineStart: var(--#{$form-control}__input--PaddingInlineStart);
+      --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}__input--PaddingInlineEnd);
+      --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}__utilities--input--PaddingInlineEnd);
+    }
+  }
+  
   &.pf-m-textarea {
     padding-block-start: var(--#{$form-control}--textarea--PaddingBlockStart--offset);
     padding-block-end: var(--#{$form-control}--textarea--PaddingBlockEnd--offset);
     padding-inline-start: var(--#{$form-control}--textarea--PaddingInlineStart--offset);
     padding-inline-end: var(--#{$form-control}--textarea--PaddingInlineEnd--offset);
-   
+
     &.pf-m-success,
     &.pf-m-warning,
     &.pf-m-error {
       --#{$form-control}--m-status--PaddingInlineEnd--offset: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--ColumnGap)); 
     }
 
+    &:has(textarea) {
+      --#{$form-control}--PaddingBlockStart: calc(var(--#{$form-control}__textarea--PaddingBlockStart) - var(--#{$form-control}--textarea--PaddingBlockStart--offset));
+      --#{$form-control}--PaddingBlockEnd: calc(var(--#{$form-control}__textarea--PaddingBlockEnd) - var(--#{$form-control}--textarea--PaddingBlockEnd--offset));
+      --#{$form-control}--PaddingInlineStart: calc(var(--#{$form-control}__textarea--PaddingInlineStart) - var(--#{$form-control}--textarea--PaddingInlineStart--offset));
+      --#{$form-control}--PaddingInlineEnd: calc(var(--#{$form-control}__textarea--PaddingInlineEnd) - var(--#{$form-control}--textarea--PaddingInlineEnd--offset) + var(--#{$form-control}--m-status--PaddingInlineEnd--offset, 0px));
+      --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}__utilities--textarea--PaddingInlineEnd);
+    }
+
     > textarea {
-      padding-block-start: calc(var(--#{$form-control}--PaddingBlockStart) - var(--#{$form-control}--textarea--PaddingBlockStart--offset));
-      padding-block-end: calc(var(--#{$form-control}--PaddingBlockEnd) - var(--#{$form-control}--textarea--PaddingBlockEnd--offset));
-      padding-inline-start: calc(var(--#{$form-control}--PaddingInlineStart) - var(--#{$form-control}--textarea--PaddingInlineStart--offset));
-      padding-inline-end: calc(var(--#{$form-control}--PaddingInlineEnd) - var(--#{$form-control}--textarea--PaddingInlineEnd--offset) + var(--#{$form-control}--m-status--PaddingInlineEnd--offset, 0));  
       outline-offset: 0;
       scrollbar-gutter: stable;
     }
+
+    .#{$form-control}__utilities {
+      padding-block-start: var(--#{$form-control}__utilities--textarea--PaddingBlockStart);
+    }
   }
 
   &.pf-m-readonly {
@@ -240,56 +289,99 @@
   }
 
   &.pf-m-error {
-    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-error--PaddingInlineEnd);
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-error--after--BorderColor);
     --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-error--hover--after--BorderColor);
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-error__icon--m-status--Color);
-    --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-error--m-status--PaddingInlineEnd);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-error--after--BorderWidth);
 
+    > textarea {
+      padding-inline-end: var(--#{$form-control}--m-error--PaddingInlineEnd, var(--#{$form-control}__textarea--m-error--PaddingInlineEnd));
+    }
+    
+    > input {
+      padding-inline-end: var(--#{$form-control}--m-error--PaddingInlineEnd, var(--#{$form-control}__input--m-error--PaddingInlineEnd));
+    }
+    
+    > select {
+      padding-inline-end: var(--#{$form-control}__select--m-error--m-status--PaddingInlineEnd, var(--#{$form-control}__select--m-error--PaddingInlineEnd));
+    }
+
     &.pf-m-icon {
-      --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
+      > :is(input) {
+        padding-inline-end: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
+      }
     }
   }
 
   &.pf-m-success {
-    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-success--PaddingInlineEnd);
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-success--after--BorderColor);
     --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-success--hover--after--BorderColor);
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-success__icon--m-status--Color);
-    --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-success--m-status--PaddingInlineEnd);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-success--after--BorderWidth);
 
+    > textarea {
+      padding-inline-end: var(--#{$form-control}--m-success--PaddingInlineEnd, var(--#{$form-control}__textarea--m-success--PaddingInlineEnd));
+    }
+    
+    > input {
+      padding-inline-end: var(--#{$form-control}--m-success--PaddingInlineEnd, var(--#{$form-control}__input--m-success--PaddingInlineEnd));
+    }
+    
+    > select {
+      padding-inline-end: var(--#{$form-control}__select--m-success--m-status--PaddingInlineEnd, var(--#{$form-control}__select--m-success--PaddingInlineEnd));
+    }
+
     &.pf-m-icon {
-      --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
+      > :is(input) {
+        padding-inline-end: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
+      }
     }
   }
 
   &.pf-m-warning {
-    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-warning--PaddingInlineEnd);
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-warning--after--BorderColor);
     --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-warning--hover--after--BorderColor);
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-warning__icon--m-status--Color);
-    --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-warning--m-status--PaddingInlineEnd);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-warning--after--BorderWidth);
-
+    
+    > textarea {
+      padding-inline-end: var(--#{$form-control}--m-warning--PaddingInlineEnd, var(--#{$form-control}__textarea--m-warning--PaddingInlineEnd));
+    }
+    
+    > input {
+      padding-inline-end: var(--#{$form-control}--m-warning--PaddingInlineEnd, var(--#{$form-control}__input--m-warning--PaddingInlineEnd));
+    }
+    
+    > select {
+      padding-inline-end: var(--#{$form-control}__select--m-warning--m-status--PaddingInlineEnd, var(--#{$form-control}__select--m-warning--PaddingInlineEnd));
+    }
+    
     &.pf-m-icon {
-      --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
+      > :is(input) {
+        padding-inline-end: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
+      }
     }
   }
-
+  
   &:hover {
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--hover--after--BorderColor);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--hover--after--BorderWidth);
   }
-
+  
   &.pf-m-icon {
     --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--PaddingInlineEnd);
   }
 
-  > select {
-    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}__select--PaddingInlineEnd);
+  &:has(select) {
+    --#{$form-control}--PaddingBlockStart: var(--#{$form-control}__select--PaddingBlockStart);
+    --#{$form-control}--PaddingBlockEnd: var(--#{$form-control}__select--PaddingBlockEnd);
     --#{$form-control}--PaddingInlineStart: var(--#{$form-control}__select--PaddingInlineStart);
+    --#{$form-control}--PaddingInlineEnd: calc(var(--#{$form-control}__select--PaddingInlineEnd) + var(--#{$form-control}__icon--FontSize));
+    --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}__utilities--select--PaddingInlineEnd);
+
+    & .#{$form-control}__utilities {
+      padding-inline-end: var(--#{$form-control}__utilities--select--PaddingInlineEnd);
+    }
 
     // Firefox's select text has additional padding
     // stylelint-disable-next-line
@@ -358,6 +450,7 @@
   grid-column: 3;
   padding-inline-start: var(--#{$form-control}__toggle-icon--PaddingInlineStart);
   padding-inline-end: var(--#{$form-control}__toggle-icon--PaddingInlineEnd);
+  font-size: var(--#{$form-control}__toggle-icon--FontSize);
   color: var(--#{$form-control}__toggle-icon--Color);
   pointer-events: none;
 }
@@ -372,7 +465,3 @@
   padding-inline-end: var(--#{$form-control}__utilities--PaddingInlineEnd);
   pointer-events: none;
 }
-
-select ~ .#{$form-control}__utilities {
-  --#{$form-control}__utilities--PaddingInlineEnd: 0;
-}

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 {
@@ -86,4 +102,3 @@
 .#{$helper-text}__item-text {
   color: var(--#{$helper-text}__item-text--Color);
 }
-

package/components/JumpLinks/jump-links.css

@@ -45,7 +45,7 @@
   --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-jump-links__toggle--Display: none;
   --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
   --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
@@ -237,7 +237,9 @@
 .pf-v6-c-jump-links__toggle-icon {
   display: inline-block;
   color: var(--pf-v6-c-jump-links__toggle-icon--Color);
-  transition: transform var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration) var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
+  transition-timing-function: var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration);
+  transition-property: transform;
   transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {

package/components/JumpLinks/jump-links.scss

@@ -62,7 +62,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
 
   // toggle icon
   --#{$jump-links}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
-  --#{$jump-links}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$jump-links}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --#{$jump-links}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$jump-links}__toggle-icon--Rotate: 0;
   --#{$jump-links}--m-expanded__toggle-icon--Rotate: 90deg;
@@ -218,6 +218,8 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
 
   display: inline-block;
   color: var(--#{$jump-links}__toggle-icon--Color);
-  transition: transform var(--#{$jump-links}__toggle-icon--TransitionDuration) var(--#{$jump-links}__toggle-icon--TransitionTimingFunction);
+  transition-timing-function: var(--#{$jump-links}__toggle-icon--TransitionTimingFunction);
+  transition-duration: var(--#{$jump-links}__toggle-icon--TransitionDuration);
+  transition-property: transform;
   transform: rotate(var(--#{$jump-links}__toggle-icon--Rotate));
 }

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

@@ -334,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);
@@ -558,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

@@ -394,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 {
@@ -617,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/MenuToggle/menu-toggle.css

@@ -103,7 +103,7 @@
   --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
-  --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-v6-c-menu-toggle--BorderRadius);
+  --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -118,12 +118,16 @@
   --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
   --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
   --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
+  --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
   --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
   --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
   --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
   --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
   --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
   --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
 }
@@ -272,6 +276,28 @@
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
   --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu-toggle.pf-m-danger {
+    transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
+    animation-name: pf-v6-c-menu-toggle-m-danger-motion;
+    animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
+    animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
+    animation-fill-mode: both;
+  }
+}
+.pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
+  animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
+  animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
+}
+@keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .pf-v6-c-menu-toggle.pf-m-placeholder {
   --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
 }
@@ -287,6 +313,21 @@
   pointer-events: none;
 }
 
+@property --pf-v6-c-menu-toggle--m-danger--TranslateX {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes pf-v6-c-menu-toggle-m-danger-motion {
+    33% {
+      --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
+    }
+    66% {
+      --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
+    }
+  }
+}
 .pf-v6-c-menu-toggle.pf-m-split-button {
   --pf-v6-c-menu-toggle--Gap: 0;
   --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);

package/components/MenuToggle/menu-toggle.scss

@@ -131,7 +131,7 @@
   --#{$menu-toggle}--m-plain--Color: var(--pf-t--global--icon--color--regular);
   --#{$menu-toggle}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$menu-toggle}--m-plain--BorderColor: transparent;
-  --#{$menu-toggle}--m-plain--BorderRadius: var(--#{$menu-toggle}--BorderRadius);
+  --#{$menu-toggle}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$menu-toggle}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --#{$menu-toggle}--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --#{$menu-toggle}--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -152,6 +152,8 @@
 
   // Status icon
   --#{$menu-toggle}__status-icon--Color: var(--pf-t--global--icon--color--regular);
+  --#{$menu-toggle}__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
+  --#{$menu-toggle}__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
 
   // Success
   --#{$menu-toggle}--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
@@ -164,6 +166,8 @@
   // Danger
   --#{$menu-toggle}--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
   --#{$menu-toggle}--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --#{$menu-toggle}--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+  --#{$menu-toggle}--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
 
   // Placeholder
   --#{$menu-toggle}--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
@@ -337,6 +341,32 @@
   &.pf-m-danger {
     --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-danger--BorderColor);
     --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-danger__status-icon--Color);
+
+    @media screen and (prefers-reduced-motion: no-preference) {
+      transform: translateX(var(--#{$menu-toggle}--m-danger--TranslateX, 0));
+      animation-name: #{$menu-toggle}-m-danger-motion;
+      animation-duration: var(--#{$menu-toggle}--m-danger--AnimationDuration--Transform);
+      animation-timing-function: var(--#{$menu-toggle}--m-danger--AnimationTimingFunction--Transform);
+      animation-fill-mode: both;
+    }
+
+    .#{$menu-toggle}__status-icon {
+      animation-name: #{$menu-toggle}-status-icon-fade-in;
+      animation-duration: var(--#{$menu-toggle}__status-icon--m-danger--TransitionDuration--Opacity);
+      animation-timing-function: var(--#{$menu-toggle}__status-icon--m-danger--TransitionTimingFunction--Opacity);
+      
+      // stylelint-disable max-nesting-depth
+      @keyframes #{$menu-toggle}-status-icon-fade-in {
+        from {
+          opacity: 0;
+        }
+
+        to {
+          opacity: 1;
+        }
+      }
+      // stylelint-enable
+    }
   }
 
   &.pf-m-placeholder {
@@ -357,6 +387,25 @@
   }
 }
 
+// Register the property type for the custom property to be animatable
+@property --#{$menu-toggle}--m-danger--TranslateX {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes #{$menu-toggle}-m-danger-motion {
+    33% {
+      --#{$menu-toggle}--m-danger--TranslateX: -2px;
+    }
+    
+    66% {
+      --#{$menu-toggle}--m-danger--TranslateX: 3px;
+    }
+  }
+}
+
 // - Menu toggle split button
 .#{$menu-toggle}.pf-m-split-button {
   --#{$menu-toggle}--Gap: 0;