@patternfly/patternfly 6.3.0-prerelease.22 → 6.3.0-prerelease.24

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.22",
+  "version": "6.3.0-prerelease.24",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-globals.css

@@ -7838,33 +7838,32 @@
 }
 
 .pf-v6-c-accordion__expandable-content {
-  display: none;
-  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
+  max-height: 0;
   margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
   font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
   color: var(--pf-v6-c-accordion__expandable-content--Color);
+  visibility: hidden;
   background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
   border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
   opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
-  transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
-  transition-property: opacity, translate, display;
-  transition-behavior: allow-discrete;
+  transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, margin-block-end;
   translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
 }
 .pf-v6-c-accordion__expandable-content.pf-m-fixed {
-  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
   overflow-y: auto;
 }
 .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
-  display: revert;
+  max-height: 9999px;
+  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
+  visibility: revert;
+  transition-delay: 0s;
 }
-@starting-style {
-  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
-    --pf-v6-c-accordion__expandable-content--Opacity: 0;
-    --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
-  }
+.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
+  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
 }
 
 .pf-v6-c-accordion__expandable-content-body {
@@ -14166,6 +14165,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 {
@@ -14522,6 +14534,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;
@@ -14588,9 +14610,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;
@@ -29906,10 +29936,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 }
 
 .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
+  max-height: 0;
+  visibility: hidden;
   opacity: var(--pf-v6-c-tree-view__list--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
-  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
-  transition-property: opacity, translate;
+  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height;
   translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
 }
 .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
@@ -29921,8 +29954,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
 }
 .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
+  max-height: 9999px;
+  visibility: revert;
   opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
-  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
+  transition-delay: 0s;
+  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
   translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
 }
 

package/patternfly.css

@@ -7974,33 +7974,32 @@ button) {
 }
 
 .pf-v6-c-accordion__expandable-content {
-  display: none;
-  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
+  max-height: 0;
   margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
   font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
   color: var(--pf-v6-c-accordion__expandable-content--Color);
+  visibility: hidden;
   background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
   border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
   opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
-  transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
-  transition-property: opacity, translate, display;
-  transition-behavior: allow-discrete;
+  transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, margin-block-end;
   translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
 }
 .pf-v6-c-accordion__expandable-content.pf-m-fixed {
-  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
   overflow-y: auto;
 }
 .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
-  display: revert;
+  max-height: 9999px;
+  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
+  visibility: revert;
+  transition-delay: 0s;
 }
-@starting-style {
-  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
-    --pf-v6-c-accordion__expandable-content--Opacity: 0;
-    --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
-  }
+.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
+  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
 }
 
 .pf-v6-c-accordion__expandable-content-body {
@@ -14302,6 +14301,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 {
@@ -14658,6 +14670,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;
@@ -14724,9 +14746,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;
@@ -30042,10 +30072,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 }
 
 .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
+  max-height: 0;
+  visibility: hidden;
   opacity: var(--pf-v6-c-tree-view__list--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
-  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
-  transition-property: opacity, translate;
+  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height;
   translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
 }
 .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
@@ -30057,8 +30090,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
 }
 .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
+  max-height: 9999px;
+  visibility: revert;
   opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
-  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
+  transition-delay: 0s;
+  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
   translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
 }