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

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 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

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;
   }
 }
 
@@ -66,6 +70,20 @@
   --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);
@@ -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/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/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);
   }
 }
 
@@ -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/_index.css

@@ -6581,6 +6581,8 @@ ul) {
   --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;
@@ -6604,6 +6606,8 @@ ul) {
     --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;
   }
 }
 
@@ -6628,6 +6632,20 @@ ul) {
   --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);
 }
@@ -6797,7 +6815,7 @@ ul) {
   --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);
@@ -6817,6 +6835,8 @@ ul) {
   --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);
@@ -7261,6 +7281,8 @@ ul) {
 }
 
 .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;
 }
@@ -7269,9 +7291,13 @@ 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;
+  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);
@@ -8181,6 +8207,30 @@ ul) {
   --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 {
@@ -8188,6 +8238,62 @@ ul) {
   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;
@@ -12203,9 +12309,13 @@ ul.pf-v6-c-list {
   --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;
@@ -12283,9 +12393,17 @@ ul.pf-v6-c-list {
   --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);
   }
 }
 
@@ -12379,7 +12497,8 @@ ul.pf-v6-c-list {
   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 {
@@ -12388,6 +12507,7 @@ ul.pf-v6-c-list {
 
 .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/_index.d.ts

@@ -589,9 +589,10 @@ declare const _default: {
     "inlineOn_2xl": "pf-m-inline-on-2xl",
     "staticOn_2xl": "pf-m-static-on-2xl",
     "xs": "pf-m-xs",
+    "expandTop": "pf-m-expand-top",
+    "expandBottom": "pf-m-expand-bottom",
     "limitWidth": "pf-m-limit-width",
     "indented": "pf-m-indented",
-    "expandTop": "pf-m-expand-top",
     "loading": "pf-m-loading",
     "noPaddingTop": "pf-m-no-padding-top",
     "horizontalOnXs": "pf-m-horizontal-on-xs",
@@ -628,6 +629,11 @@ declare const _default: {
     "inlineEditable": "pf-m-inline-editable",
     "enable": "pf-m-enable",
     "bold": "pf-m-bold",
+    "searchExpandable": "pf-m-search-expandable",
+    "searchInput": "pf-m-search-input",
+    "searchExpand": "pf-m-search-expand",
+    "searchAction": "pf-m-search-action",
+    "expandStart": "pf-m-expand-start",
     "box": "pf-m-box",
     "fill": "pf-m-fill",
     "center": "pf-m-center",

package/css/components/_index.js

@@ -591,9 +591,10 @@ exports.default = {
     "inlineOn_2xl": "pf-m-inline-on-2xl",
     "staticOn_2xl": "pf-m-static-on-2xl",
     "xs": "pf-m-xs",
+    "expandTop": "pf-m-expand-top",
+    "expandBottom": "pf-m-expand-bottom",
     "limitWidth": "pf-m-limit-width",
     "indented": "pf-m-indented",
-    "expandTop": "pf-m-expand-top",
     "loading": "pf-m-loading",
     "noPaddingTop": "pf-m-no-padding-top",
     "horizontalOnXs": "pf-m-horizontal-on-xs",
@@ -630,6 +631,11 @@ exports.default = {
     "inlineEditable": "pf-m-inline-editable",
     "enable": "pf-m-enable",
     "bold": "pf-m-bold",
+    "searchExpandable": "pf-m-search-expandable",
+    "searchInput": "pf-m-search-input",
+    "searchExpand": "pf-m-search-expand",
+    "searchAction": "pf-m-search-action",
+    "expandStart": "pf-m-expand-start",
     "box": "pf-m-box",
     "fill": "pf-m-fill",
     "center": "pf-m-center",

package/css/components/_index.mjs

@@ -589,9 +589,10 @@ export default {
     "inlineOn_2xl": "pf-m-inline-on-2xl",
     "staticOn_2xl": "pf-m-static-on-2xl",
     "xs": "pf-m-xs",
+    "expandTop": "pf-m-expand-top",
+    "expandBottom": "pf-m-expand-bottom",
     "limitWidth": "pf-m-limit-width",
     "indented": "pf-m-indented",
-    "expandTop": "pf-m-expand-top",
     "loading": "pf-m-loading",
     "noPaddingTop": "pf-m-no-padding-top",
     "horizontalOnXs": "pf-m-horizontal-on-xs",
@@ -628,6 +629,11 @@ export default {
     "inlineEditable": "pf-m-inline-editable",
     "enable": "pf-m-enable",
     "bold": "pf-m-bold",
+    "searchExpandable": "pf-m-search-expandable",
+    "searchInput": "pf-m-search-input",
+    "searchExpand": "pf-m-search-expand",
+    "searchAction": "pf-m-search-action",
+    "expandStart": "pf-m-expand-start",
     "box": "pf-m-box",
     "fill": "pf-m-fill",
     "center": "pf-m-center",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "6.3.0-prerelease.6",
+  "version": "6.3.0-prerelease.7",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.29",
+    "@patternfly/patternfly": "6.3.0-prerelease.33",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.0"
   },
   "license": "MIT",
-  "gitHead": "c40f2f81ebe65b6bd785bc38da66330532ac7a30"
+  "gitHead": "96fdb620440615b569e4a95c570e46dc24bfa079"
 }