@patternfly/patternfly 6.3.0-prerelease.3 → 6.3.0-prerelease.31

package/components/Form/form.css

@@ -51,7 +51,7 @@
   --pf-v6-c-form__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-form__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs));
   --pf-v6-c-form__field-group-toggle--PaddingBlockStart: var(--pf-v6-c-form__field-group-header--PaddingBlockStart);
   --pf-v6-c-form__field-group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
   --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
@@ -71,6 +71,8 @@
   --pf-v6-c-form__field-group-header-description--MarginBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-form__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-form__field-group-header-actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-form__field-group-header-actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --pf-v6-c-form__field-group-header-actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --pf-v6-c-form__field-group-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-form__field-group-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-form__field-group-body--Gap: var(--pf-v6-c-form--GridGap);
@@ -78,6 +80,19 @@
   --pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
   --pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
   --pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
+  --pf-v6-c-form__field-group-body--TranslateY: 0;
+  --pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
+  --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-form {
+    --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-form__field-group-body--TranslateY: -.5rem;
+  }
 }
 
 .pf-v6-c-form {
@@ -434,6 +449,16 @@
 .pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
   --pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
 }
+.pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
+  max-height: 99999px;
+  padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+  transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
+  translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
+}
 
 .pf-v6-c-form__field-group-toggle {
   grid-row: 1/2;
@@ -492,6 +517,8 @@
 }
 
 .pf-v6-c-form__field-group-header-actions {
+  margin-block-start: var(--pf-v6-c-form__field-group-header-actions--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-form__field-group-header-actions--MarginBlockEnd);
   margin-inline-start: var(--pf-v6-c-form__field-group-header-actions--MarginInlineStart);
   white-space: nowrap;
 }
@@ -503,6 +530,18 @@
   padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
 }
+.pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
+  max-height: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  visibility: hidden;
+  opacity: 0;
+  transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade);
+  transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
+  translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
+}
+
 .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
   --pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
   --pf-v6-c-form__field-group-header--PaddingBlockStart: 0;

package/components/Form/form.scss

@@ -125,10 +125,12 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   --#{$form}__field-group--BorderBlockEndWidth: var(--#{$form}__field-group--border-width-base);
   --#{$form}__field-group--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --#{$form}__field-group--field-group--MarginBlockStart: calc(var(--#{$form}--GridGap) * -1);
+
+  // Field group toggle
   --#{$form}__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$form}__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs)); // based off of the expected width of the group toggle, for use to define a column when the toggle is not present
   --#{$form}__field-group-toggle--PaddingBlockStart: var(--#{$form}__field-group-header--PaddingBlockStart);
   --#{$form}__field-group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
-  --#{$form}__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$form}__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg); // remove in breaking change
   --#{$form}__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
   --#{$form}__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
   --#{$form}__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
@@ -138,6 +140,8 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   --#{$form}__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
   --#{$form}__field-group-toggle-icon--Rotate: 0;
   --#{$form}__field-group--m-expanded__toggle-icon--Rotate: 90deg;
+
+  // Field group header
   --#{$form}__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$form}__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --#{$form}__field-group-header--GridColumn: 1 / 3;
@@ -148,6 +152,11 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   --#{$form}__field-group-header-description--MarginBlockStart: var(--pf-t--global--spacer--xs);
   --#{$form}__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
   --#{$form}__field-group-header-actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$form}__field-group-header-actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --#{$form}__field-group-header-actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+
+
+  // Field group body
   --#{$form}__field-group-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --#{$form}__field-group-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --#{$form}__field-group-body--Gap: var(--#{$form}--GridGap);
@@ -155,6 +164,18 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   --#{$form}__field-group__field-group__field-group-body--GridColumn: 1 / 3;
   --#{$form}__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
   --#{$form}__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--#{$form}__field-group-body--PaddingBlockEnd) * -1);
+  --#{$form}__field-group-body--TranslateY: 0;
+  --#{$form}__field-group--m-expanded__field-group-body--TranslateY: 0;
+  --#{$form}__field-group-body--TransitionDuration--expand--slide: 0s;
+  --#{$form}__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --#{$form}__field-group-body--TransitionDuration--collapse--slide: 0s;
+  --#{$form}__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$form}__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --#{$form}__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --#{$form}__field-group-body--TranslateY: -.5rem;
+  }
 }
 
 .#{$form} {
@@ -385,6 +406,17 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
     > .#{$form}__field-group-toggle {
       --#{$form}__field-group-toggle-icon--Rotate: var(--#{$form}__field-group--m-expanded__toggle-icon--Rotate);
     }
+
+    &.pf-m-expandable > .#{$form}__field-group-body { // TODO - remove .pf-m-expandable in a breaking change, it shouldn't be needed. Only needed now so that these styles are an opt-in behind .pf-m-expandable
+      max-height: 99999px;
+      padding-block-start: var(--#{$form}__field-group-body--PaddingBlockStart);
+      padding-block-end: var(--#{$form}__field-group-body--PaddingBlockEnd);
+      visibility: visible;
+      opacity: 1;
+      transition-delay: 0s;
+      transition-duration: var(--#{$form}__field-group-body--TransitionDuration--expand--fade), var(--#{$form}__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
+      translate: 0 var(--#{$form}__field-group--m-expanded__field-group-body--TranslateY);
+    }
   }
 }
 
@@ -445,6 +477,8 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__field-group-header-actions {
+  margin-block-start: var(--#{$form}__field-group-header-actions--MarginBlockStart);
+  margin-block-end: var(--#{$form}__field-group-header-actions--MarginBlockEnd);
   margin-inline-start: var(--#{$form}__field-group-header-actions--MarginInlineStart);
   white-space: nowrap;
 }
@@ -456,6 +490,18 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   padding-block-start: var(--#{$form}__field-group-body--PaddingBlockStart);
   padding-block-end: var(--#{$form}__field-group-body--PaddingBlockEnd);
 
+  @at-root .#{$form}__field-group.pf-m-expandable > & {
+    max-height: 0;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    visibility: hidden;
+    opacity: 0;
+    transition-delay: 0s, 0s, var(--#{$form}__field-group-body--TransitionDuration--collapse--fade), var(--#{$form}__field-group-body--TransitionDuration--collapse--fade), var(--#{$form}__field-group-body--TransitionDuration--collapse--fade), var(--#{$form}__field-group-body--TransitionDuration--collapse--fade);
+    transition-duration: var(--#{$form}__field-group-body--TransitionDuration--collapse--fade), var(--#{$form}__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
+    transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
+    translate: 0 var(--#{$form}__field-group-body--TranslateY);
+  }
+
   > .#{$form}__field-group {
     &:first-child {
       --#{$form}__field-group-toggle--PaddingBlockStart: 0;

package/components/FormControl/form-control.css

@@ -226,6 +226,22 @@
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-form-control.pf-m-error {
+    translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
+    animation-name: pf-v6-global-danger-jiggle-motion;
+    animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
+    animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
+    animation-fill-mode: both;
+  }
+}
+.pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
+  --pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+  animation-name: pf-v6-global-fade-in;
+  animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
+}
 .pf-v6-c-form-control.pf-m-error > textarea {
   padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
 }

package/components/FormControl/form-control.scss

@@ -290,6 +290,14 @@
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-error__icon--m-status--Color);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-error--after--BorderWidth);
 
+    @media (prefers-reduced-motion: no-preference) {
+      @include pf-v6-animate-danger-jiggle;
+    }
+
+    .#{$form-control}__icon.pf-m-status {
+      @include pf-v6-fade-default(#{$form-control});
+    }
+
     > textarea {
       padding-inline-end: var(--#{$form-control}--m-error--PaddingInlineEnd, var(--#{$form-control}__textarea--m-error--PaddingInlineEnd));
     }
@@ -438,6 +446,7 @@
 
   &.pf-m-status {
     --#{$form-control}__icon--Color: var(--#{$form-control}__icon--m-status--Color);
+    
   }
 }
 

package/components/Menu/menu.css

@@ -12,7 +12,7 @@
   --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
-  --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-menu--TransitionDuration: 0s;
   --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-menu--m-plain--BoxShadow: none;
   --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
@@ -85,14 +85,34 @@
   --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
   --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
   --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
-  --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
+  --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
   --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
-  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
   --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
-  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
   --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
   --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  }
+}
 
 .pf-v6-c-menu__content,
 .pf-v6-c-menu__list-item,

package/components/Menu/menu.scss

@@ -15,8 +15,12 @@
   --#{$menu}--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$menu}--button--disabled--Color: var(--pf-t--global--text--color--disabled);
   --#{$menu}--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
-  --#{$menu}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --#{$menu}--TransitionDuration: 0s;
   --#{$menu}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  
+  @media (prefers-reduced-motion: no-preference) {
+    --#{$menu}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  }
 
   // * Menu plain
   --#{$menu}--m-plain--BoxShadow: none;
@@ -126,19 +130,30 @@
   --#{$menu}--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--#{$menu}--m-flyout__menu--m-left--right-offset));
 
   // * Menu drilldown content
-  // TODO Reduced motion default needed for drilldown
   --#{$menu}--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
   --#{$menu}--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
-  --#{$menu}--m-drilldown__content--Transition: transform var(--#{$menu}--m-drilldown__content--TransitionDuration--transform), height var(--#{$menu}--m-drilldown__content--TransitionDuration--height);
+  --#{$menu}--m-drilldown__content--Transition: height var(--#{$menu}--m-drilldown__content--TransitionDuration--height);
+  
+  @media (prefers-reduced-motion: no-preference) {
+    --#{$menu}--m-drilldown__content--Transition: transform var(--#{$menu}--m-drilldown__content--TransitionDuration--transform), height var(--#{$menu}--m-drilldown__content--TransitionDuration--height);
+  }
 
   // * Menu drilldown menu
   --#{$menu}--m-drilldown--c-menu--InsetBlockStart: 0;
-  --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: 0s;
   --#{$menu}--m-drilldown--c-menu--Transition: transform var(--#{$menu}--m-drilldown--c-menu--TransitionDuration--transform);
 
+  @media (prefers-reduced-motion: no-preference) {
+    --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  }
+
   // * Menu drilldown list
-  --#{$menu}--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  --#{$menu}--m-drilldown__list--TransitionDuration--transform: 0s;
   --#{$menu}--m-drilldown__list--Transition: transform var(--#{$menu}--m-drilldown__list--TransitionDuration--transform);
+  
+  @media (prefers-reduced-motion: no-preference) {
+    --#{$menu}--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  }
 
   // * Menu drilled in
   --#{$menu}--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);

package/components/MenuToggle/menu-toggle.css

@@ -33,6 +33,14 @@
   --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
   --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
+  --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
+  --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
+  --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
+  --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
+  --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
+  --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
+  --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
   --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
   --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
@@ -130,6 +138,11 @@
   --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);
+  --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
 }
 
 .pf-v6-c-menu-toggle {
@@ -243,6 +256,10 @@
   --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
   --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
+  --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
+  --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
+  --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
+  --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
 }
 .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
   --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
@@ -298,6 +315,15 @@
     opacity: 1;
   }
 }
+.pf-v6-c-menu-toggle.pf-m-settings {
+  --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
+  --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
+  --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
+  --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
+  --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
+  --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
+  --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
+}
 .pf-v6-c-menu-toggle.pf-m-placeholder {
   --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
 }
@@ -450,16 +476,24 @@
   flex-wrap: nowrap;
 }
 
-.pf-v6-c-menu-toggle__icon {
-  flex-shrink: 0;
-}
 .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
 .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
-.pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
+.pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
   margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
   margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
 }
 
+.pf-v6-c-menu-toggle__icon {
+  flex-shrink: 0;
+  transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
+  transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
+  transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
+  rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
+}
+.pf-v6-c-menu-toggle__icon :where(picture, img) {
+  vertical-align: middle;
+}
+
 .pf-v6-c-menu-toggle__controls {
   display: flex;
   gap: var(--pf-v6-c-menu-toggle__controls--Gap);

package/components/MenuToggle/menu-toggle.scss

@@ -43,6 +43,14 @@
   // * Menu toggle icon
   --#{$menu-toggle}__icon--MinHeight: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight));
   --#{$menu-toggle}__icon--Color: var(--pf-t--global--icon--color--regular);
+  --#{$menu-toggle}__icon--TransitionDelay: 0s;
+  --#{$menu-toggle}__icon--TransitionDuration: 0s;
+  --#{$menu-toggle}__icon--TransitionProperty: none;
+  --#{$menu-toggle}--hover__icon--TransitionDelay: 0s;
+  --#{$menu-toggle}--hover__icon--TransitionDuration: 0s;
+  --#{$menu-toggle}--hover__icon--TransitionProperty: none;
+  --#{$menu-toggle}__icon--Rotate: 0deg;
+  --#{$menu-toggle}--hover__icon--Rotate: 0deg;
 
   // * Menu toggle toggle icon
   --#{$menu-toggle}__toggle-icon--MinHeight: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight));
@@ -174,6 +182,13 @@
 
   // Controls
   --#{$menu-toggle}__controls--Gap: var(--pf-t--global--spacer--sm);
+
+  // Settings
+  --#{$menu-toggle}--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$menu-toggle}--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$menu-toggle}--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$menu-toggle}--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$menu-toggle}--m-settings--hover__icon--Rotate: 60deg;
 }
 
 .#{$menu-toggle} {
@@ -299,6 +314,10 @@
     --#{$menu-toggle}--BorderWidth: var(--#{$menu-toggle}--hover--BorderWidth);
     --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--hover--BorderColor);
     --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--hover__toggle-icon--Color);
+    --#{$menu-toggle}__icon--TransitionDelay: var(--#{$menu-toggle}--hover__icon--TransitionDelay);
+    --#{$menu-toggle}__icon--TransitionDuration: var(--#{$menu-toggle}--hover__icon--TransitionDuration);
+    --#{$menu-toggle}__icon--TransitionProperty: var(--#{$menu-toggle}--hover__icon--TransitionProperty);
+    --#{$menu-toggle}__icon--Rotate: var(--#{$menu-toggle}--hover__icon--Rotate);
   }
 
   &:is(.pf-m-expanded, [aria-expanded="true"]) {
@@ -369,6 +388,16 @@
     }
   }
 
+  &.pf-m-settings {
+    --#{$menu-toggle}__icon--TransitionProperty: rotate;
+    --#{$menu-toggle}__icon--TransitionDuration: var(--#{$menu-toggle}--m-settings__icon--TransitionDuration);
+    --#{$menu-toggle}__icon--TransitionTimingFunction: var(--#{$menu-toggle}--m-settings__icon--TransitionTimingFunction);
+    --#{$menu-toggle}--hover__icon--TransitionProperty: rotate;
+    --#{$menu-toggle}--hover__icon--TransitionDuration: var(--#{$menu-toggle}--m-settings--hover__icon--TransitionDuration);
+    --#{$menu-toggle}--hover__icon--TransitionTimingFunction: var(--#{$menu-toggle}--m-settings--hover__icon--TransitionTimingFunction);
+    --#{$menu-toggle}--hover__icon--Rotate: var(--#{$menu-toggle}--m-settings--hover__icon--Rotate);
+  }
+
   &.pf-m-placeholder {
     --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-placeholder--Color);
   }
@@ -567,17 +596,33 @@
   flex-wrap: nowrap;
 }
 
+%pf-v6-menu-toggle__icon--MarginBlock {
+  margin-block-start: calc(var(--#{$menu-toggle}--PaddingBlockStart) * -1);
+  margin-block-end: calc(var(--#{$menu-toggle}--PaddingBlockEnd) * -1);
+}
+
 .#{$menu-toggle}__icon {
   flex-shrink: 0;
-
+  transition-delay: var(--#{$menu-toggle}__icon--TransitionDelay);
+  transition-duration: var(--#{$menu-toggle}__icon--TransitionDuration);
+  transition-property: var(--#{$menu-toggle}__icon--TransitionProperty);
+  rotate: var(--#{$menu-toggle}__icon--Rotate);
+  
+  @at-root .#{$menu-toggle}:not(.pf-m-plain) & {
+    @extend %pf-v6-menu-toggle__icon--MarginBlock;
+  }
+  
   &.pf-m-avatar {
     .#{$avatar},
     img,
     svg {
-      margin-block-start: calc(var(--#{$menu-toggle}--PaddingBlockStart) * -1);
-      margin-block-end: calc(var(--#{$menu-toggle}--PaddingBlockEnd) * -1);
+      @extend %pf-v6-menu-toggle__icon--MarginBlock;
     }
   }
+
+  :where(picture, img) {
+    vertical-align: middle;
+  }
 }
 
 // - Menu toggle controls

package/components/Nav/nav.css

@@ -52,9 +52,13 @@
   --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
   --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
   --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
-  --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
+  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: 0s;
   --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-nav__subnav--TranslateY: 0;
+  --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
   --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -83,6 +87,13 @@
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-nav {
+    --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-nav,
 .pf-v6-c-nav__section,
@@ -153,24 +164,27 @@
 
 .pf-v6-c-nav__subnav {
   --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
-  grid-template-rows: 1fr;
-  min-height: 0;
+  max-height: 99999px;
   padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
   overflow-y: clip;
-  transition-delay: 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
+  visibility: visible;
+  transition-delay: 0s, 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
   transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
-  transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
-  transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
+  transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
+  translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
 }
 .pf-v6-c-nav__subnav[hidden] {
   --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
   --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
+  --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide);
   --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
   --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
+  --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
   display: grid;
-  grid-template-rows: 0fr;
+  max-height: 0;
   visibility: hidden;
   opacity: 0;
 }

package/components/Nav/nav.scss

@@ -75,9 +75,19 @@
   --#{$nav}__subnav--PaddingBlockStart: var(--#{$nav}__item--RowGap); // needed to keep focus outline on first item from being cut off
   --#{$nav}__subnav--PaddingBlockEnd: var(--#{$nav}__item--RowGap); // needed to keep focus outline on last item from being cut off
   --#{$nav}__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --#{$nav}__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
-  --#{$nav}__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
+  --#{$nav}__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
+  --#{$nav}__subnav--TransitionDuration--expand--slide: 0s;
+  --#{$nav}__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
+  --#{$nav}__subnav--TransitionDuration--collapse--slide: 0s;
   --#{$nav}__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
+  --#{$nav}__subnav--TranslateY: 0;
+  --#{$nav}__subnav--hidden--TranslateY: 0;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$nav}__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --#{$nav}__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --#{$nav}__subnav--hidden--TranslateY: -.5rem;
+  }
 
   // * Nav scroll button
   --#{$nav}__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
@@ -199,25 +209,28 @@
 .#{$nav}__subnav {
   --#{$nav}__list--RowGap: var(--#{$nav}__subnav--RowGap); // this value is passed to --#{$nav}__item--RowGap--row-offset and updates clickable area based on value passed
 
-  grid-template-rows: 1fr;
-  min-height: 0;
+  max-height: 99999px;
   padding-block-start: var(--#{$nav}__subnav--PaddingBlockStart);
   padding-block-end: var(--#{$nav}__subnav--PaddingBlockEnd);
   padding-inline-start: var(--#{$nav}__subnav--PaddingInlineStart); // indent nested lists
   overflow-y: clip;
-  transition-delay: 0s, var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s);
+  visibility: visible;
+  transition-delay: 0s, 0s, var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s);
   transition-timing-function: var(--#{$nav}__subnav--TransitionTimingFunction--expand);
-  transition-duration: var(--#{$nav}__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
-  transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
-  
+  transition-duration: var(--#{$nav}__subnav--TransitionDuration--expand), var(--#{$nav}__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
+  translate: 0 var(--#{$nav}__subnav--TranslateY);
+
   &[hidden] {
     --#{$nav}__subnav--TransitionDelay--expand--focus: var(--#{$nav}__subnav--TransitionDuration--expand);
     --#{$nav}__subnav--TransitionDuration--expand: var(--#{$nav}__subnav--TransitionDuration--collapse);
+    --#{$nav}__subnav--TransitionDuration--expand--slide: var(--#{$nav}__subnav--TransitionDuration--collapse--slide);
     --#{$nav}__subnav--PaddingBlockStart: 0;
     --#{$nav}__subnav--PaddingBlockEnd: 0;
+    --#{$nav}__subnav--TranslateY: var(--#{$nav}__subnav--hidden--TranslateY);
 
     display: grid; // overrides `display: none` - element is hidden via `visibility: hidden`
-    grid-template-rows: 0fr;
+    max-height: 0;
     visibility: hidden;
     opacity: 0;
   }