@patternfly/patternfly 6.3.0-prerelease.8 → 6.3.0

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);
 }
@@ -459,6 +485,10 @@
 
 .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;

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);
   }
@@ -574,6 +603,10 @@
 
 .#{$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;

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;
   }

package/components/Page/page.css

@@ -8,9 +8,13 @@
   --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
   --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page__sidebar--BoxShadow: none;
-  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
-  --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-page__sidebar--TransitionProperty: opacity;
+  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
   --pf-v6-c-page__sidebar--TranslateX: -100%;
+  --pf-v6-c-page__sidebar--Opacity: 0;
+  --pf-v6-c-page__sidebar--m-expanded--Opacity: 1;
+  --pf-v6-c-page__sidebar--xl--Opacity: 1;
   --pf-v6-c-page__sidebar--TranslateZ: 0;
   --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
   --pf-v6-c-page__sidebar--xl--TranslateX: 0;
@@ -88,9 +92,17 @@
   --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-page {
+    --pf-v6-c-page__sidebar--Opacity: 1;
+    --pf-v6-c-page__sidebar--TransitionProperty: transform;
+    --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
+  }
+}
 @media screen and (min-width: 75rem) {
   .pf-v6-c-page {
     --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
+    --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
   }
 }
 
@@ -111,6 +123,51 @@
     grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
   }
 }
+.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
+  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+  --pf-v6-c-button__icon--TransitionDelay: 0s;
+  --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+  --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+}
+.pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
+  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+  --pf-v6-c-button__icon--TransitionDelay: 0s;
+  --pf-v6-c-button__icon--ScaleX: 1;
+  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+  --pf-v6-c-button--hover__icon--ScaleX: 1;
+}
+@media (min-width: 75rem) {
+  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger, .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
+    --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
+    --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
+    --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
+    --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
+    --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
+  }
+  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
+    --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+    --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+    --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+    --pf-v6-c-button__icon--TransitionDelay: 0s;
+    --pf-v6-c-button__icon--ScaleX: 1;
+    --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+    --pf-v6-c-button--hover__icon--ScaleX: 1;
+  }
+  .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-collapsed)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
+    --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+    --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+    --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+    --pf-v6-c-button__icon--TransitionDelay: 0s;
+    --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+    --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+    --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+  }
+}
 
 .pf-v6-c-page > .pf-v6-c-masthead {
   z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
@@ -139,7 +196,8 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
-  transition: transform var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
+  opacity: var(--pf-v6-c-page__sidebar--Opacity);
+  transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
   transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__sidebar {
@@ -148,6 +206,7 @@
 
 .pf-v6-c-page__sidebar.pf-m-expanded {
   --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--m-expanded--TranslateX);
+  --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--m-expanded--Opacity);
   box-shadow: var(--pf-v6-c-page__sidebar--BoxShadow);
 }
 @media screen and (min-width: 75rem) {

package/components/Page/page.scss

@@ -21,9 +21,13 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__sidebar--BoxShadow: none;
 
   // TODO Reduced Motion default needed
-  --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
-  --#{$page}__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$page}__sidebar--TransitionProperty: opacity;
+  --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --#{$page}__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
   --#{$page}__sidebar--TranslateX: -100%;
+  --#{$page}__sidebar--Opacity: 0;
+  --#{$page}__sidebar--m-expanded--Opacity: 1;
+  --#{$page}__sidebar--xl--Opacity: 1;
   --#{$page}__sidebar--TranslateZ: 0;
   --#{$page}__sidebar--m-expanded--TranslateX: 0;
   --#{$page}__sidebar--xl--TranslateX: 0;
@@ -32,6 +36,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__sidebar--PaddingInlineStart: 0;
   --#{$page}__sidebar--PaddingInlineEnd: 0;
 
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$page}__sidebar--Opacity: 1;
+    --#{$page}__sidebar--TransitionProperty: transform;
+    --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
+  }
 
   // Sidebar header
   --#{$page}__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
@@ -54,6 +63,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--xl--TranslateX);
+    --#{$page}__sidebar--Opacity: var(--#{$page}__sidebar--xl--Opacity);
   }
 
   // Container for the main content area (grid area)
@@ -149,8 +159,37 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
       "header header"
       "sidebar main";
     grid-template-columns: var(--#{$page}__sidebar--Width) 1fr;
+  }
+
+  // Hamburger menu animation
+  // mobile - show expand on hover
+  > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
+    @include pf-v6-hamburger;
+  }
+
+  // mobile - show collapse when sidebar expanded
+  &:where(:has(> .#{$page}__sidebar.pf-m-expanded)) > .#{$masthead} .#{$masthead}__toggle :is(.#{$button}.pf-m-hamburger, .#{$button}.pf-m-hamburger:hover, .#{$button}.pf-m-hamburger:focus-visible) {
+    @include pf-v6-hamburger($collapse: true);
+  }
+
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
+    // desktop - disable default arrow
+    > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger,
+    &:where(:has(> .#{$page}__sidebar.pf-m-expanded)) > .#{$masthead} .#{$masthead}__toggle :is(.#{$button}.pf-m-hamburger, .#{$button}.pf-m-hamburger:hover, .#{$button}.pf-m-hamburger:focus-visible) {
+      @include pf-v6-hamburger($reset: true);
+    }
+
+    // desktop - show collapse on hover
+    > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
+      @include pf-v6-hamburger($collapse: true);
+    }
+
+    // desktop - show expand on hover when sidebar collapsed
+    &:where(:has(> .#{$page}__sidebar.pf-m-collapsed)) > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
+      @include pf-v6-hamburger;
     }
   }
+}
 
 // Header
 .#{$page} > .#{$masthead} {
@@ -180,7 +219,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   background-color: var(--#{$page}__sidebar--BackgroundColor);
-  transition: transform var(--#{$page}__sidebar--TransitionDuration) var(--#{$page}__sidebar--TransitionTimingFunction);
+  opacity: var(--#{$page}__sidebar--Opacity);
+  transition: var(--#{$page}__sidebar--TransitionProperty) var(--#{$page}__sidebar--TransitionDuration) var(--#{$page}__sidebar--TransitionTimingFunction);
 
   @include pf-v6-bidirectional-style(
     $prop: transform,
@@ -192,6 +232,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   // Expanded nav
   &.pf-m-expanded {
     --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--m-expanded--TranslateX);
+    --#{$page}__sidebar--Opacity: var(--#{$page}__sidebar--m-expanded--Opacity);
 
     box-shadow: var(--#{$page}__sidebar--BoxShadow);
 

package/components/Progress/progress.css

@@ -106,6 +106,22 @@
   --pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-danger__status-icon--Color);
   --pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__bar {
+    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-progress.pf-m-danger .pf-v6-c-progress__status-icon {
+  --pf-v6-c-progress--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-progress--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+  animation-name: pf-v6-global-fade-in;
+  animation-duration: var(--pf-v6-c-progress--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-progress--TransitionTimingFunction--Opacity);
+}
 
 .pf-v6-c-progress__description {
   grid-column: 1/2;

package/components/Progress/progress.scss

@@ -140,6 +140,16 @@
     --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-danger__indicator--BackgroundColor);
     --#{$progress}__status-icon--Color: var(--#{$progress}--m-danger__status-icon--Color);
     --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-danger--m-inside__measure--Color);
+
+    .#{$progress}__bar {
+      @media (prefers-reduced-motion: no-preference) {
+        @include pf-v6-animate-danger-jiggle;
+      }
+    }
+
+    .#{$progress}__status-icon {
+      @include pf-v6-fade-default(#{$progress});
+    }
   }
 }
 
@@ -209,4 +219,4 @@
 
 .#{$progress}__measure {
   font-variant-numeric: tabular-nums;
-}
+}

package/components/ProgressStepper/progress-stepper.scss

@@ -442,5 +442,6 @@ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
       }
     }
   }
+  
 }
 // stylelint-enable

package/components/Skeleton/skeleton.css

@@ -11,8 +11,8 @@
   --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
   --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-skeleton--after--TranslateX: -100%;
-  --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
+  --pf-v6-c-skeleton--after--TranslateX: 0;
+  --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
   --pf-v6-c-skeleton--after--AnimationDuration: 3s;
   --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
   --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -44,6 +44,15 @@
   --pf-v6-c-skeleton--m-height-75--Height: 75%;
   --pf-v6-c-skeleton--m-height-100--Height: 100%;
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-skeleton {
+    --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
+    --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
+    --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
+    --pf-v6-c-skeleton--after--TranslateX: -100%;
+    --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
+  }
+}
 
 .pf-v6-c-skeleton {
   position: relative;
@@ -163,4 +172,15 @@
   100% {
     transform: translateX(100%);
   }
+}
+@keyframes pf-v6-c-skeleton-loading-reduced-motion {
+  0% {
+    opacity: 0.25;
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.25;
+  }
 }

package/components/Skeleton/skeleton.scss

@@ -14,15 +14,23 @@
   // After
   --#{$skeleton}--after--LinearGradientAngle: 90deg;
   --#{$skeleton}--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
-  --#{$skeleton}--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover); // TODO: replace with new token
+  --#{$skeleton}--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover); 
   --#{$skeleton}--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
-  --#{$skeleton}--after--TranslateX: -100%;
-  --#{$skeleton}--after--AnimationName: #{$skeleton}-loading;
+  --#{$skeleton}--after--TranslateX: 0;
+  --#{$skeleton}--after--AnimationName: #{$skeleton}-loading-reduced-motion;
   --#{$skeleton}--after--AnimationDuration: 3s;
   --#{$skeleton}--after--AnimationIterationCount: infinite;
   --#{$skeleton}--after--AnimationTimingFunction: linear;
   --#{$skeleton}--after--AnimationDelay: .5s;
 
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$skeleton}--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
+    --#{$skeleton}--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
+    --#{$skeleton}--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
+    --#{$skeleton}--after--TranslateX: -100%;
+    --#{$skeleton}--after--AnimationName: #{$skeleton}-loading;
+  }
+
   // Circle
   --#{$skeleton}--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$skeleton}--m-circle--before--PaddingBlockEnd: 100%;
@@ -209,3 +217,17 @@
     transform: translateX(100%);
   }
 }
+
+@keyframes #{$skeleton}-loading-reduced-motion {
+  0% {
+    opacity: 0.25;
+  }
+
+  60% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.25;
+  }
+}