@patternfly/patternfly 6.3.0-prerelease.9 → 6.3.0

package/components/ExpandableSection/expandable-section.scss

@@ -13,6 +13,28 @@
   --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
   --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
   --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
+  --#{$expandable-section}__content--TransitionDuration--collapse--slide: 0s;
+  --#{$expandable-section}__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --#{$expandable-section}__content--TransitionDuration--expand--slide: 0s;
+  --#{$expandable-section}__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --#{$expandable-section}__content--TransitionDuration--slide: var(--#{$expandable-section}__content--TransitionDuration--collapse--slide);
+  --#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--collapse--fade);
+  --#{$expandable-section}__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$expandable-section}__content--TransitionDelay--hide: var(--#{$expandable-section}__content--TransitionDuration--fade);
+  --#{$expandable-section}__content--Opacity: 0;
+  --#{$expandable-section}__content--TranslateY: 0;
+  --#{$expandable-section}--m-expand-top__content--TranslateY: 0;
+  --#{$expandable-section}--m-expand-bottom__content--TranslateY: 0;
+  --#{$expandable-section}--m-expanded__content--Opacity: 1;
+  --#{$expandable-section}--m-expanded__content--TranslateY: 0;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$expandable-section}__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --#{$expandable-section}__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --#{$expandable-section}__content--TranslateY: -.5rem;
+    --#{$expandable-section}--m-expand-top__content--TranslateY: .5rem;
+    --#{$expandable-section}--m-expand-bottom__content--TranslateY: -.5rem;
+  }
 
   // Content
   --#{$expandable-section}__content--MaxWidth: auto;
@@ -30,6 +52,7 @@
   --#{$expandable-section}--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
   --#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
   --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$expandable-section}--m-display-lg--TransitionDelay: var(--#{$expandable-section}__content--TransitionDuration--collapse--fade);
 
   // Indented
   --#{$expandable-section}--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--#{$expandable-section}__toggle-icon--MinWidth));
@@ -42,12 +65,47 @@
 .#{$expandable-section} {
   display: flex;
   flex-direction: column;
-  gap: var(--#{$expandable-section}--Gap);
+  gap: 0;
+  transition-delay: var(--#{$expandable-section}__content--TransitionDelay--hide);
+  transition-duration: 0s;
+  transition-property: gap, padding-block-end;
 
   &.pf-m-expanded {
     --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
     --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
     --#{$expandable-section}--m-display-lg--PaddingBlockEnd: var(--#{$expandable-section}--m-display-lg--m-expanded--PaddingBlockEnd);
+    --#{$expandable-section}__content--TransitionDuration--slide: var(--#{$expandable-section}__content--TransitionDuration--expand--slide);
+    --#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--expand--fade);
+    --#{$expandable-section}__content--Opacity: var(--#{$expandable-section}--m-expanded__content--Opacity);
+    --#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expanded__content--TranslateY);
+    --#{$expandable-section}__content--Visibility: auto;
+    --#{$expandable-section}__content--MaxHeight: 99999px;
+    --#{$expandable-section}__content--TransitionDelay--hide: 0s;
+
+    gap: var(--pf-v6-c-expandable-section--Gap);
+  }
+
+  &.pf-m-expand-top {
+    --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}__toggle-icon--m-expand-top--Rotate);
+  }
+
+  // The following selector is for ensuring we target only detached expandable section contents without introducing a breaking change
+  // (since typically both toggle and content would both be in the expandable section wrapper)
+  // In a breaking change we could update this to utilize the pf-m-detached class
+  &:has(.#{$expandable-section}__content:only-child) {
+    &:not(.pf-m-expand-top, .pf-m-expand-bottom) {
+      --#{$expandable-section}__content--TranslateY: 0;
+      --#{$expandable-section}__content--TransitionDuration--expand--fade: 0s;
+      --#{$expandable-section}__content--TransitionDuration--collapse--fade: 0s;
+    }
+
+    &.pf-m-expand-top:not(.pf-m-expanded) {
+      --#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expand-top__content--TranslateY);
+    }
+
+    &.pf-m-expand-bottom:not(.pf-m-expanded) {
+      --#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expand-bottom__content--TranslateY);
+    }
   }
 
   &.pf-m-limit-width {
@@ -70,6 +128,7 @@
 
   &.pf-m-truncate {
     --#{$expandable-section}--Gap: var(--#{$expandable-section}--m-truncate--Gap);
+
     &:not(.pf-m-expanded) .#{$expandable-section}__content {
       // stylelint-disable
       display: -webkit-box;
@@ -90,7 +149,7 @@
   transition: var(--#{$expandable-section}__toggle-icon--Transition); // TODO remove shorthand in breaking change
   transform: rotate(var(--#{$expandable-section}__toggle-icon--Rotate));
 
-  &.pf-m-expand-top {
+  &.pf-m-expand-top { // TODO: Remove this block in breaking change in favor of using modifier on outer expandable section wrapper
     --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}__toggle-icon--m-expand-top--Rotate);
   }
 }
@@ -99,4 +158,19 @@
   max-width: var(--#{$expandable-section}__content--MaxWidth);
   padding-block-end: var(--#{$expandable-section}__content--PaddingBlockEnd, 0);
   padding-inline-start: var(--#{$expandable-section}__content--PaddingInlineStart, 0);
+
+  &:where([hidden]) {
+    display: revert;
+  }
+
+  .#{$expandable-section}:where(:not(.pf-m-truncate)) & {
+    max-height: var(--#{$expandable-section}__content--MaxHeight, 0);
+    visibility: var(--#{$expandable-section}__content--Visibility, hidden);
+    opacity: var(--#{$expandable-section}__content--Opacity);
+    transition-delay: 0s, 0s, var(--#{$expandable-section}__content--TransitionDelay--hide, 0s), var(--#{$expandable-section}__content--TransitionDelay--hide, 0s);
+    transition-timing-function: var(--#{$expandable-section}__content--TransitionTimingFunction);
+    transition-duration: var(--#{$expandable-section}__content--TransitionDuration--fade), var(--#{$expandable-section}__content--TransitionDuration--slide), 0s, 0s;
+    transition-property: opacity, translate, visibility, max-height;
+    translate: 0 var(--#{$expandable-section}__content--TranslateY);
+  }
 }

package/components/FileUpload/file-upload.css

@@ -6,9 +6,9 @@
   --pf-v6-c-file-upload--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-file-upload--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-file-upload--BorderWidth: var(--pf-t--global--border--width--regular);
-  --pf-v6-c-file-upload--BorderColor: transparent;
-  --pf-v6-c-file-upload--BorderStyle: solid;
-  --pf-v6-c-file-upload--m-drag-hover--BorderColor: var(--pf-t--global--icon--color--brand--default);
+  --pf-v6-c-file-upload--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-file-upload--BorderStyle: dashed;
+  --pf-v6-c-file-upload--m-drag-hover--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-file-upload--m-drag-hover--BorderStyle: dashed;
   --pf-v6-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
   --pf-v6-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-t--global--spacer--3xl) * 2);

package/components/FileUpload/file-upload.scss

@@ -8,11 +8,11 @@
   --#{$file-upload}--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$file-upload}--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$file-upload}--BorderWidth: var(--pf-t--global--border--width--regular);
-  --#{$file-upload}--BorderColor: transparent;
-  --#{$file-upload}--BorderStyle: solid;
+  --#{$file-upload}--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$file-upload}--BorderStyle: dashed;
 
   // pf-m-drag-hover
-  --#{$file-upload}--m-drag-hover--BorderColor: var(--pf-t--global--icon--color--brand--default);
+  --#{$file-upload}--m-drag-hover--BorderColor: var(--pf-t--global--border--color--clicked);
   --#{$file-upload}--m-drag-hover--BorderStyle: dashed;
 
   // File select > Button

package/components/Form/form.css

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

package/components/Form/form.scss

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

package/components/FormControl/form-control.css

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

package/components/FormControl/form-control.scss

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

package/components/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/components/InputGroup/input-group.scss

@@ -31,12 +31,107 @@
   // Input group text, disabled variant
   --#{$input-group}__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
   --#{$input-group}__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+
+  // Input group search expanded
+  --#{$input-group}__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$input-group}__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --#{$input-group}__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+  --#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+  --#{$input-group}__item--m-search-text-input--TransitionDuration--fade: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--fade);
+  --#{$input-group}__item--m-search-text-input--TransitionDuration--slide: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--slide);
+  --#{$input-group}__item--m-search-text-input--ScaleX: 1;
+  --#{$input-group}__item--m-search-text-input--TransformOriginX--expand-start: 100%;
+  --#{$input-group}__item--m-search-text-input--TransformOriginX--expand-end: 0;
+  --#{$input-group}__item--m-search-text-input--TransformOriginX: var(--#{$input-group}__item--m-search-text-input--TransformOriginX--expand-end);
+  --#{$input-group}__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
+  --#{$input-group}__item--m-search-expand--TransitionDuration--expand--fade: 0s;
+  --#{$input-group}__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
+  --#{$input-group}__item--m-search-expand--TransitionDuration--fade: var(--#{$input-group}__item--m-search-expand--TransitionDuration--expand--fade);
+  --#{$input-group}__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$input-group}__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --#{$input-group}__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --#{$input-group}__item--m-search-action--TransitionDuration--fade: var(--#{$input-group}__item--m-search-action--TransitionDuration--collapse--fade);
+  
+  @media (prefers-reduced-motion: no-preference) {
+    --#{$input-group}__item--m-search-text-input--ScaleX: .7;
+  }
 }
 
 .#{$input-group} {
   display: flex;
   gap: var(--#{$input-group}--Gap);
   width: 100%;
+
+  &.pf-m-search-expandable {
+    &:not(.pf-m-expanded) {
+      --#{$input-group}--Gap: 0;
+
+      transition: gap 0s var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade);
+    }
+
+    .#{$input-group}__item {
+      &.pf-m-search-input {
+        flex-grow: 1;
+        max-width: var(--#{$input-group}__item--m-search-text-input--MaxWidth, 0);
+        visibility: var(--#{$input-group}__item--m-search-text-input--Visibility, hidden);
+        opacity: var(--#{$input-group}__item--m-search-text-input--Opacity, 0);
+        transition-delay: 0s, 0s, var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade), var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade);
+        transition-timing-function: var(--#{$input-group}__item--m-search-text-input--TransitionTimingFunction);
+        transition-duration: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade), var(--#{$input-group}__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
+        transition-property: opacity, scale, visibility, max-width;
+        transform-origin: var(--#{$input-group}__item--m-search-text-input--TransformOriginX) center;
+        scale: var(--#{$input-group}__item--m-search-text-input--ScaleX) 1;
+      }
+
+      // the expand button (magnifying glass)
+      &.pf-m-search-expand {
+        max-width: var(--#{$input-group}__item--m-search-expand--MaxWidth, 100%);
+        visibility: var(--#{$input-group}__item--m-search-expand--Visibility, visible);
+        opacity: var(--#{$input-group}__item--m-search-expand--Opacity, 1);
+        transition-delay: var(--#{$input-group}__item--m-search-action--TransitionDuration--fade);
+        transition-timing-function: var(--#{$input-group}__item--m-search-expand--TransitionTimingFunction);
+        transition-duration: var(--#{$input-group}__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
+        transition-property: opacity, visibility, max-width;
+      }
+
+      // other input group items adjacent to the search input that are shown when expanded
+      &.pf-m-search-action {
+        max-width: var(--#{$input-group}__item--m-search-action--MaxWidth, 0);
+        visibility: var(--#{$input-group}__item--m-search-action--Visibility, hidden);
+        opacity: var(--#{$input-group}__item--m-search-action--Opacity, 0);
+        transition-delay: 0s, var(--#{$input-group}__item--m-search-action--TransitionDuration--fade), var(--#{$input-group}__item--m-search-action--TransitionDuration--fade);
+        transition-timing-function: var(--#{$input-group}__item--m-search-action--TransitionTimingFunction);
+        transition-duration: var(--#{$input-group}__item--m-search-action--TransitionDuration--fade), 0s, 0s;
+        transition-property: opacity, visibility, max-width;
+      }
+    }
+  
+    &.pf-m-expand-start {
+      --#{$input-group}__item--m-search-text-input--TransformOriginX: var(--#{$input-group}__item--m-search-text-input--TransformOriginX--expand-start);
+    }
+    
+    &.pf-m-expanded {
+      --#{$input-group}__item--m-search-text-input--MaxWidth: 100%;
+      --#{$input-group}__item--m-search-text-input--Visibility: visible;
+      --#{$input-group}__item--m-search-text-input--Opacity: 1;
+      --#{$input-group}__item--m-search-text-input--TransitionDuration--fade: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--expand--fade);
+      --#{$input-group}__item--m-search-text-input--TransitionDuration--slide: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--expand--slide);
+      --#{$input-group}__item--m-search-text-input--ScaleX: 1;
+      --#{$input-group}__item--m-search-action--MaxWidth: 100%;
+      --#{$input-group}__item--m-search-action--Visibility: visible;
+      --#{$input-group}__item--m-search-action--Opacity: 1;
+      --#{$input-group}__item--m-search-action--TransitionDuration--fade: var(--#{$input-group}__item--m-search-action--TransitionDuration--expand--fade);
+      --#{$input-group}__item--m-search-expand--MaxWidth: 0;
+      --#{$input-group}__item--m-search-expand--Visibility: hidden;
+      --#{$input-group}__item--m-search-expand--Opacity: 0;
+      --#{$input-group}__item--m-search-expand--TransitionDuration--fade: var(--#{$input-group}__item--m-search-expand--TransitionDuration--collapse--fade);
+
+      .#{$input-group}__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
+        transition-delay: 0s;
+      }
+    }
+  }
 }
 
 .#{$input-group}__item {

package/components/Menu/menu.css

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