@patternfly/patternfly 6.3.0-prerelease.21 → 6.3.0-prerelease.23

package/components/Form/form.css

@@ -78,6 +78,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 +447,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: 9999px;
+  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;
@@ -500,9 +523,17 @@
   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;
+  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,6 +125,8 @@ $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);
@@ -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,8 @@ $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);
+
+  // 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 +161,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 +403,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: 9999px;
+      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);
+    }
   }
 }
 
@@ -453,8 +482,16 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   display: grid;
   grid-column: var(--#{$form}__field-group-body--GridColumn);
   gap: var(--#{$form}__field-group-body--Gap);
-  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;
+    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 {

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: 9999px;
   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: 9999px;
   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/_index.css

@@ -6704,6 +6704,19 @@ ul) {
   --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 {
@@ -7060,6 +7073,16 @@ ul) {
 .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: 9999px;
+  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;
@@ -7126,9 +7149,17 @@ ul) {
   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;
+  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;
@@ -11364,9 +11395,13 @@ ul.pf-v6-c-list {
   --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);
@@ -11395,6 +11430,13 @@ ul.pf-v6-c-list {
   --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,
@@ -11465,24 +11507,27 @@ ul.pf-v6-c-list {
 
 .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: 9999px;
   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/docs/components/Form/examples/Form.md

@@ -652,7 +652,7 @@ cssPrefix: pf-v6-c-form
         </button>
       </div>
     </div>
-    <div class="pf-v6-c-form__field-group-body" hidden>
+    <div class="pf-v6-c-form__field-group-body" inert>
       <div class="pf-v6-c-form__group">
         <div class="pf-v6-c-form__group-label"><label
             class="pf-v6-c-form__label"
@@ -748,7 +748,7 @@ cssPrefix: pf-v6-c-form
 ```html
 <form class="pf-v6-c-form" novalidate>
   <div
-    class="pf-v6-c-form__field-group"
+    class="pf-v6-c-form__field-group pf-m-expandable"
     role="group"
     aria-labelledby="form-expandable-field-groups-field-group-1-title"
   >
@@ -787,9 +787,95 @@ cssPrefix: pf-v6-c-form
         </button>
       </div>
     </div>
+    <div class="pf-v6-c-form__field-group-body" inert>
+      <div class="pf-v6-c-form__group">
+        <div class="pf-v6-c-form__group-label"><label
+            class="pf-v6-c-form__label"
+            for="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label1"
+          >
+            <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
+            <span
+              class="pf-v6-c-button pf-m-no-padding pf-m-plain"
+              type="button"
+              role="button"
+              tabindex="0"
+              aria-label="More information for label 1 field"
+              aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label1"
+            >
+              <span class="pf-v6-c-button__icon">
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 1024 1024"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
+                  />
+                </svg>
+              </span>
+            </span></span>
+        </div>
+        <div class="pf-v6-c-form__group-control">
+          <span class="pf-v6-c-form-control pf-m-required">
+            <input
+              required
+              type="text"
+              id="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label1"
+              name="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label1"
+            />
+          </span>
+        </div>
+      </div>
+      <div class="pf-v6-c-form__group">
+        <div class="pf-v6-c-form__group-label"><label
+            class="pf-v6-c-form__label"
+            for="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label2"
+          >
+            <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
+            <span
+              class="pf-v6-c-button pf-m-no-padding pf-m-plain"
+              type="button"
+              role="button"
+              tabindex="0"
+              aria-label="More information for label 2 field"
+              aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label2"
+            >
+              <span class="pf-v6-c-button__icon">
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 1024 1024"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
+                  />
+                </svg>
+              </span>
+            </span></span>
+        </div>
+        <div class="pf-v6-c-form__group-control">
+          <span class="pf-v6-c-form-control pf-m-required">
+            <input
+              required
+              type="text"
+              id="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label2"
+              name="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label2"
+            />
+          </span>
+        </div>
+      </div>
+    </div>
   </div>
   <div
-    class="pf-v6-c-form__field-group pf-m-expanded"
+    class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
     role="group"
     aria-labelledby="form-expandable-field-groups-field-group-2-title"
   >
@@ -910,7 +996,7 @@ cssPrefix: pf-v6-c-form
         </div>
       </div>
       <div
-        class="pf-v6-c-form__field-group pf-m-expanded"
+        class="pf-v6-c-form__field-group"
         role="group"
         aria-labelledby="form-expandable-field-groups-field-group-3-title"
       >
@@ -924,7 +1010,7 @@ cssPrefix: pf-v6-c-form
             </div>
           </div>
         </div>
-        <div class="pf-v6-c-form__field-group-body">
+        <div class="pf-v6-c-form__field-group-body" inert>
           <div class="pf-v6-c-form__group">
             <div class="pf-v6-c-form__group-label"><label
                 class="pf-v6-c-form__label"
@@ -1088,5 +1174,6 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
 | `.pf-m-no-padding-top` | `.pf-v6-c-form__group-label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
 | `.pf-m-inline` | `.pf-v6-c-form__group-control` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |
 | `.pf-m-stack` | `.pf-v6-c-form__group-control` | Modifies form group children to be stacked with space between children. |
+| `.pf-m-expandable` | `.pf-v6-c-form__field-group` | Modifies a field group to be expandable. Currently used as the opt-in for animating the expanded state. |
 | `.pf-m-expanded` | `.pf-v6-c-form__field-group` | Modifies an expandable field group for the expanded state. |
 | `--pf-v6-c-form--m-limit-width--MaxWidth` | `.pf-v6-c-form.pf-m-limit-width` | Sets a custom `max-width` for a width limited form. |

package/docs/demos/Form/examples/BasicForms.md

@@ -1049,7 +1049,7 @@ subsection: forms
   </div>
 
   <div
-    class="pf-v6-c-form__field-group"
+    class="pf-v6-c-form__field-group pf-m-expandable"
     role="group"
     aria-labelledby="form-demo-sections-complex-form-alerting-title"
   >
@@ -1086,7 +1086,7 @@ subsection: forms
   </div>
 
   <div
-    class="pf-v6-c-form__field-group"
+    class="pf-v6-c-form__field-group pf-m-expandable"
     role="group"
     aria-labelledby="form-demo-sections-complex-form-query-title"
   >
@@ -1123,7 +1123,7 @@ subsection: forms
   </div>
 
   <div
-    class="pf-v6-c-form__field-group"
+    class="pf-v6-c-form__field-group pf-m-expandable"
     role="group"
     aria-labelledby="form-demo-sections-complex-form-affinity-title"
   >
@@ -1157,9 +1157,9 @@ subsection: forms
         >If specified, the pod's scheduling constraints.</div>
       </div>
     </div>
-    <div class="pf-v6-c-form__field-group-body" hidden>
+    <div class="pf-v6-c-form__field-group-body" inert>
       <div
-        class="pf-v6-c-form__field-group pf-m-expanded"
+        class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
         role="group"
         aria-labelledby="form-demo-sections-complex-form-node-affinity-title"
       >
@@ -1196,7 +1196,7 @@ subsection: forms
         </div>
         <div class="pf-v6-c-form__field-group-body">
           <div
-            class="pf-v6-c-form__field-group"
+            class="pf-v6-c-form__field-group pf-m-expandable"
             role="group"
             aria-labelledby="form-demo-sections-complex-form-node-affinity-required-title"
           >
@@ -1233,7 +1233,7 @@ subsection: forms
           </div>
 
           <div
-            class="pf-v6-c-form__field-group pf-m-expanded"
+            class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
             role="group"
             aria-labelledby="form-demo-sections-complex-form-node-affinity-required-2-title"
           >
@@ -1327,7 +1327,7 @@ subsection: forms
       </div>
 
       <div
-        class="pf-v6-c-form__field-group"
+        class="pf-v6-c-form__field-group pf-m-expandable"
         role="group"
         aria-labelledby="form-demo-sections-complex-form-pod-affinity-title"
       >
@@ -1366,7 +1366,7 @@ subsection: forms
   </div>
 
   <div
-    class="pf-v6-c-form__field-group pf-m-expanded"
+    class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
     role="group"
     aria-labelledby="form-demo-sections-complex-form-routing-title"
   >
@@ -1552,7 +1552,7 @@ subsection: forms
   </div>
 
   <div
-    class="pf-v6-c-form__field-group pf-m-expanded"
+    class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
     role="group"
     aria-labelledby="form-demo-sections-complex-form-health-checks-title"
   >
@@ -1657,7 +1657,7 @@ subsection: forms
   </div>
 
   <div
-    class="pf-v6-c-form__field-group"
+    class="pf-v6-c-form__field-group pf-m-expandable"
     role="group"
     aria-labelledby="form-demo-sections-complex-form-build-configuration-title"
   >
@@ -1696,7 +1696,7 @@ subsection: forms
   </div>
 
   <div
-    class="pf-v6-c-form__field-group"
+    class="pf-v6-c-form__field-group pf-m-expandable"
     role="group"
     aria-labelledby="form-demo-sections-complex-form-deployment-title"
   >

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.3.0-prerelease.21",
+  "version": "6.3.0-prerelease.23",
   "keywords": [],
   "license": "MIT",
   "scripts": {