@patternfly/react-styles 6.3.0-prerelease.5 → 6.3.0-prerelease.7

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.3.0-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.6...@patternfly/react-styles@6.3.0-prerelease.7) (2025-06-17)
+
+### Bug Fixes
+
+- **ExpandableSection:** made animation opt-in for detached variant ([#11851](https://github.com/patternfly/patternfly-react/issues/11851)) ([64befbe](https://github.com/patternfly/patternfly-react/commit/64befbe8547ebf4c388ed9f039253a7a689440f8))
+
+# [6.3.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.5...@patternfly/react-styles@6.3.0-prerelease.6) (2025-06-13)
+
+### Features
+
+- **Button/MenuToggle:** added support for hamburger/settings animations ([#11861](https://github.com/patternfly/patternfly-react/issues/11861)) ([cf3d84e](https://github.com/patternfly/patternfly-react/commit/cf3d84ebf8f3046f038af6f6557946faadfe35b0))
+
 # [6.3.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.4...@patternfly/react-styles@6.3.0-prerelease.5) (2025-06-13)
 
 ### Features

package/css/components/Accordion/accordion.css

@@ -202,7 +202,7 @@
   overflow-y: auto;
 }
 .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
-  max-height: 9999px;
+  max-height: 99999px;
   margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
   visibility: revert;
   transition-delay: 0s;

package/css/components/Button/button.css

@@ -23,12 +23,16 @@
   --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
   --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
   --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
+  --pf-v6-c-button--ScaleX: 1;
+  --pf-v6-c-button--ScaleY: 1;
   --pf-v6-c-button--hover--BackgroundColor: transparent;
   --pf-v6-c-button--hover--BorderColor: transparent;
   --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
   --pf-v6-c-button--hover--TextDecorationLine: none;
   --pf-v6-c-button--hover--TextDecorationStyle: none;
   --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
+  --pf-v6-c-button--hover--ScaleX: 1;
+  --pf-v6-c-button--hover--ScaleY: 1;
   --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
   --pf-v6-c-button--m-clicked--BorderColor: transparent;
   --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
@@ -243,11 +247,14 @@
   --pf-v6-c-button__icon--TransitionDuration: 0s;
   --pf-v6-c-button__icon--TransitionProperty: none;
   --pf-v6-c-button__icon--Rotate: 0deg;
-  --pf-v6-c-button__icon--Scale: 1;
   --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
   --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
   --pf-v6-c-button--hover__icon--TransitionProperty: none;
   --pf-v6-c-button--hover__icon--Rotate: 0deg;
+  --pf-v6-c-button__icon--ScaleX: 1;
+  --pf-v6-c-button__icon--ScaleY: 1;
+  --pf-v6-c-button--hover__icon--ScaleX: 1;
+  --pf-v6-c-button--hover__icon--ScaleY: 1;
   --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
@@ -294,7 +301,7 @@
   --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
   --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
   --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
-  --pf-v6-c-button--m-hamburger__icon--m-expand--Scale: -1;
+  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
 }
 
 .pf-v6-c-button {
@@ -330,7 +337,7 @@
   transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-button--TransitionDuration);
   transition-property: var(--pf-v6-c-button--TransitionProperty);
-  scale: var(--pf-v6-c-button--Scale, revert);
+  scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY);
 }
 .pf-v6-c-button::after {
   position: absolute;
@@ -633,30 +640,34 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --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--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
+  --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--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
+  --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
 }
 .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
   --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--Scale: 1;
+  --pf-v6-c-button__icon--ScaleX: 1;
   --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
-  --pf-v6-c-button--hover__icon--Scale: 1;
+  --pf-v6-c-button--hover__icon--ScaleX: 1;
 }
 .pf-v6-c-button:hover, .pf-v6-c-button:focus {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
   --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
   --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
+  --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
+  --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
   --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
   --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
   --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
   --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
   --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
+  --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
+  --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
   text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
   text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
@@ -724,7 +735,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
   transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
   rotate: var(--pf-v6-c-button__icon--Rotate);
-  scale: var(--pf-v6-c-button__icon--Scale);
+  scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
 }
 .pf-v6-c-button__icon.pf-m-start {
   --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
@@ -803,6 +814,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 }
 @keyframes pf-v6-c-button-icon-favorited {
   50% {
-    transform: scale(1.5);
+    scale: 1.5;
   }
 }

package/css/components/DualListSelector/dual-list-selector.css

@@ -185,7 +185,7 @@
   --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
 }
 .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expanded > .pf-v6-c-dual-list-selector__list {
-  max-height: 9999px;
+  max-height: 99999px;
   visibility: revert;
   opacity: var(--pf-v6-c-dual-list-selector--m-expanded__list--Opacity);
   transition-delay: 0s;

package/css/components/ExpandableSection/expandable-section.css

@@ -19,6 +19,8 @@
   --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
   --pf-v6-c-expandable-section__content--Opacity: 0;
   --pf-v6-c-expandable-section__content--TranslateY: 0;
+  --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
+  --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
   --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
   --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
   --pf-v6-c-expandable-section__content--MaxWidth: auto;
@@ -42,6 +44,8 @@
     --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
     --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
     --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
+    --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
+    --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
   }
 }
 
@@ -62,10 +66,24 @@
   --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
   --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
   --pf-v6-c-expandable-section__content--Visibility: auto;
-  --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
+  --pf-v6-c-expandable-section__content--MaxHeight: 99999px;
   --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
   gap: var(--pf-v6-c-expandable-section--Gap);
 }
+.pf-v6-c-expandable-section.pf-m-expand-top {
+  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
+}
+.pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) {
+  --pf-v6-c-expandable-section__content--TranslateY: 0;
+  --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: 0s;
+  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: 0s;
+}
+.pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-top:not(.pf-m-expanded) {
+  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-top__content--TranslateY);
+}
+.pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-bottom:not(.pf-m-expanded) {
+  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY);
+}
 .pf-v6-c-expandable-section.pf-m-limit-width {
   --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
 }

package/css/components/ExpandableSection/expandable-section.d.ts

@@ -6,11 +6,12 @@ declare const _default: {
   "expandableSectionToggleIcon": "pf-v6-c-expandable-section__toggle-icon",
   "modifiers": {
     "expanded": "pf-m-expanded",
+    "expandTop": "pf-m-expand-top",
+    "expandBottom": "pf-m-expand-bottom",
     "limitWidth": "pf-m-limit-width",
     "displayLg": "pf-m-display-lg",
     "indented": "pf-m-indented",
-    "truncate": "pf-m-truncate",
-    "expandTop": "pf-m-expand-top"
+    "truncate": "pf-m-truncate"
   }
 };
 export default _default;

package/css/components/ExpandableSection/expandable-section.js

@@ -8,10 +8,11 @@ exports.default = {
   "expandableSectionToggleIcon": "pf-v6-c-expandable-section__toggle-icon",
   "modifiers": {
     "expanded": "pf-m-expanded",
+    "expandTop": "pf-m-expand-top",
+    "expandBottom": "pf-m-expand-bottom",
     "limitWidth": "pf-m-limit-width",
     "displayLg": "pf-m-display-lg",
     "indented": "pf-m-indented",
-    "truncate": "pf-m-truncate",
-    "expandTop": "pf-m-expand-top"
+    "truncate": "pf-m-truncate"
   }
 };

package/css/components/ExpandableSection/expandable-section.mjs

@@ -6,10 +6,11 @@ export default {
   "expandableSectionToggleIcon": "pf-v6-c-expandable-section__toggle-icon",
   "modifiers": {
     "expanded": "pf-m-expanded",
+    "expandTop": "pf-m-expand-top",
+    "expandBottom": "pf-m-expand-bottom",
     "limitWidth": "pf-m-limit-width",
     "displayLg": "pf-m-display-lg",
     "indented": "pf-m-indented",
-    "truncate": "pf-m-truncate",
-    "expandTop": "pf-m-expand-top"
+    "truncate": "pf-m-truncate"
   }
 };

package/css/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);
@@ -448,7 +450,7 @@
   --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: 9999px;
+  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;
@@ -515,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;
 }
@@ -523,9 +527,13 @@
   display: grid;
   grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
   gap: var(--pf-v6-c-form__field-group-body--Gap);
+  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);

package/css/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/css/components/FormControl/form-control.d.ts

@@ -13,12 +13,12 @@ declare const _default: {
     "plain": "pf-m-plain",
     "expanded": "pf-m-expanded",
     "disabled": "pf-m-disabled",
+    "status": "pf-m-status",
     "icon": "pf-m-icon",
     "placeholder": "pf-m-placeholder",
     "resizeVertical": "pf-m-resize-vertical",
     "resizeHorizontal": "pf-m-resize-horizontal",
-    "resizeBoth": "pf-m-resize-both",
-    "status": "pf-m-status"
+    "resizeBoth": "pf-m-resize-both"
   }
 };
 export default _default;

package/css/components/FormControl/form-control.js

@@ -15,11 +15,11 @@ exports.default = {
     "plain": "pf-m-plain",
     "expanded": "pf-m-expanded",
     "disabled": "pf-m-disabled",
+    "status": "pf-m-status",
     "icon": "pf-m-icon",
     "placeholder": "pf-m-placeholder",
     "resizeVertical": "pf-m-resize-vertical",
     "resizeHorizontal": "pf-m-resize-horizontal",
-    "resizeBoth": "pf-m-resize-both",
-    "status": "pf-m-status"
+    "resizeBoth": "pf-m-resize-both"
   }
 };

package/css/components/FormControl/form-control.mjs

@@ -13,11 +13,11 @@ export default {
     "plain": "pf-m-plain",
     "expanded": "pf-m-expanded",
     "disabled": "pf-m-disabled",
+    "status": "pf-m-status",
     "icon": "pf-m-icon",
     "placeholder": "pf-m-placeholder",
     "resizeVertical": "pf-m-resize-vertical",
     "resizeHorizontal": "pf-m-resize-horizontal",
-    "resizeBoth": "pf-m-resize-both",
-    "status": "pf-m-status"
+    "resizeBoth": "pf-m-resize-both"
   }
 };

package/css/components/InputGroup/input-group.css

@@ -19,6 +19,30 @@
   --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade);
+  --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide);
+  --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
+  --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start: 100%;
+  --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end: 0;
+  --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end);
+  --pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade: 0s;
+  --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
+  --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade);
+  --pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-input-group {
+    --pf-v6-c-input-group__item--m-search-text-input--ScaleX: .7;
+  }
 }
 
 .pf-v6-c-input-group {
@@ -26,6 +50,62 @@
   gap: var(--pf-v6-c-input-group--Gap);
   width: 100%;
 }
+.pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded) {
+  --pf-v6-c-input-group--Gap: 0;
+  transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
+}
+.pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
+  flex-grow: 1;
+  max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
+  visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
+  opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
+  transition-delay: 0s, 0s, var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
+  transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
+  transition-property: opacity, scale, visibility, max-width;
+  transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
+  scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
+}
+.pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
+  max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
+  visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
+  opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
+  transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
+  transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
+  transition-property: opacity, visibility, max-width;
+}
+.pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
+  max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
+  visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
+  opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
+  transition-delay: 0s, var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
+  transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), 0s, 0s;
+  transition-property: opacity, visibility, max-width;
+}
+.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start {
+  --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start);
+}
+.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded {
+  --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%;
+  --pf-v6-c-input-group__item--m-search-text-input--Visibility: visible;
+  --pf-v6-c-input-group__item--m-search-text-input--Opacity: 1;
+  --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade);
+  --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide);
+  --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
+  --pf-v6-c-input-group__item--m-search-action--MaxWidth: 100%;
+  --pf-v6-c-input-group__item--m-search-action--Visibility: visible;
+  --pf-v6-c-input-group__item--m-search-action--Opacity: 1;
+  --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade);
+  --pf-v6-c-input-group__item--m-search-expand--MaxWidth: 0;
+  --pf-v6-c-input-group__item--m-search-expand--Visibility: hidden;
+  --pf-v6-c-input-group__item--m-search-expand--Opacity: 0;
+  --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade);
+}
+.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded .pf-v6-c-input-group__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
+  transition-delay: 0s;
+}
 
 .pf-v6-c-input-group__item {
   position: relative;

package/css/components/InputGroup/input-group.d.ts

@@ -4,6 +4,12 @@ declare const _default: {
   "inputGroupItem": "pf-v6-c-input-group__item",
   "inputGroupText": "pf-v6-c-input-group__text",
   "modifiers": {
+    "searchExpandable": "pf-m-search-expandable",
+    "expanded": "pf-m-expanded",
+    "searchInput": "pf-m-search-input",
+    "searchExpand": "pf-m-search-expand",
+    "searchAction": "pf-m-search-action",
+    "expandStart": "pf-m-expand-start",
     "box": "pf-m-box",
     "plain": "pf-m-plain",
     "disabled": "pf-m-disabled",

package/css/components/InputGroup/input-group.js

@@ -6,6 +6,12 @@ exports.default = {
   "inputGroupItem": "pf-v6-c-input-group__item",
   "inputGroupText": "pf-v6-c-input-group__text",
   "modifiers": {
+    "searchExpandable": "pf-m-search-expandable",
+    "expanded": "pf-m-expanded",
+    "searchInput": "pf-m-search-input",
+    "searchExpand": "pf-m-search-expand",
+    "searchAction": "pf-m-search-action",
+    "expandStart": "pf-m-expand-start",
     "box": "pf-m-box",
     "plain": "pf-m-plain",
     "disabled": "pf-m-disabled",

package/css/components/InputGroup/input-group.mjs

@@ -4,6 +4,12 @@ export default {
   "inputGroupItem": "pf-v6-c-input-group__item",
   "inputGroupText": "pf-v6-c-input-group__text",
   "modifiers": {
+    "searchExpandable": "pf-m-search-expandable",
+    "expanded": "pf-m-expanded",
+    "searchInput": "pf-m-search-input",
+    "searchExpand": "pf-m-search-expand",
+    "searchAction": "pf-m-search-action",
+    "expandStart": "pf-m-expand-start",
     "box": "pf-m-box",
     "plain": "pf-m-plain",
     "disabled": "pf-m-disabled",

package/css/components/Nav/nav.css

@@ -164,7 +164,7 @@
 
 .pf-v6-c-nav__subnav {
   --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
-  max-height: 9999px;
+  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);

package/css/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);
   }
 }
 
@@ -116,18 +128,18 @@
   --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--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
+  --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--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
+  --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--Scale: 1;
+  --pf-v6-c-button__icon--ScaleX: 1;
   --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
-  --pf-v6-c-button--hover__icon--Scale: 1;
+  --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) {
@@ -142,18 +154,18 @@
     --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--Scale: 1;
+    --pf-v6-c-button__icon--ScaleX: 1;
     --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
-    --pf-v6-c-button--hover__icon--Scale: 1;
+    --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--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
+    --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--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
+    --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
   }
 }
 
@@ -184,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 {
@@ -193,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/css/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;