@patternfly/react-styles 6.3.0-prerelease.3 → 6.3.0-prerelease.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Accordion/accordion.css +11 -12
  3. package/css/components/ExpandableSection/expandable-section.css +2 -4
  4. package/css/components/Form/form.css +33 -2
  5. package/css/components/Form/form.d.ts +2 -1
  6. package/css/components/Form/form.js +2 -1
  7. package/css/components/Form/form.mjs +2 -1
  8. package/css/components/Nav/nav.css +22 -8
  9. package/css/components/TreeView/tree-view.css +9 -3
  10. package/css/components/_index.css +77 -29
  11. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.3.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.3...@patternfly/react-styles@6.3.0-prerelease.4) (2025-06-11)
7
+
8
+ ### Features
9
+
10
+ - **Form:** enabled opt-in animations for expandable fieldgroup ([#11843](https://github.com/patternfly/patternfly-react/issues/11843)) ([8c6618b](https://github.com/patternfly/patternfly-react/commit/8c6618b87876924b7ef9b3651b86abb65e7e2dd4))
11
+
6
12
  # [6.3.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.2...@patternfly/react-styles@6.3.0-prerelease.3) (2025-05-21)
7
13
 
8
14
  ### Features
package/css/components/Accordion/accordion.css CHANGED
@@ -183,33 +183,32 @@
183
183
  }
184
184
 
185
185
  .pf-v6-c-accordion__expandable-content {
186
- display: none;
187
- margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
186
+ max-height: 0;
188
187
  margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
189
188
  margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
190
189
  font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
191
190
  color: var(--pf-v6-c-accordion__expandable-content--Color);
191
+ visibility: hidden;
192
192
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
193
193
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
194
194
  opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
195
+ 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);
195
196
  transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
196
- 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);
197
- transition-property: opacity, translate, display;
198
- transition-behavior: allow-discrete;
197
+ transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
198
+ transition-property: opacity, translate, visibility, max-height, margin-block-end;
199
199
  translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
200
200
  }
201
201
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
202
- max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
203
202
  overflow-y: auto;
204
203
  }
205
204
  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
206
- display: revert;
205
+ max-height: 9999px;
206
+ margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
207
+ visibility: revert;
208
+ transition-delay: 0s;
207
209
  }
208
- @starting-style {
209
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
210
- --pf-v6-c-accordion__expandable-content--Opacity: 0;
211
- --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
212
- }
210
+ .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
211
+ max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
213
212
  }
214
213
 
215
214
  .pf-v6-c-accordion__expandable-content-body {
package/css/components/ExpandableSection/expandable-section.css CHANGED
@@ -32,7 +32,7 @@
32
32
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
33
33
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
34
34
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
35
- --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
35
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
36
36
  --pf-v6-c-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(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
37
37
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
38
38
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
@@ -51,7 +51,7 @@
51
51
  gap: 0;
52
52
  transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
53
53
  transition-duration: 0s;
54
- transition-property: gap;
54
+ transition-property: gap, padding-block-end;
55
55
  }
56
56
  .pf-v6-c-expandable-section.pf-m-expanded {
57
57
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
@@ -61,7 +61,6 @@
61
61
  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
62
62
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
63
63
  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
64
- --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
65
64
  --pf-v6-c-expandable-section__content--Visibility: auto;
66
65
  --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
67
66
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
@@ -78,7 +77,6 @@
78
77
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
79
78
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
80
79
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
81
- transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
82
80
  }
83
81
  .pf-v6-c-expandable-section.pf-m-indented {
84
82
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
package/css/components/Form/form.css CHANGED
@@ -78,6 +78,19 @@
78
78
  --pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
79
79
  --pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
80
80
  --pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
81
+ --pf-v6-c-form__field-group-body--TranslateY: 0;
82
+ --pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
83
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
84
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
85
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
86
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
87
+ }
88
+ @media screen and (prefers-reduced-motion: no-preference) {
89
+ .pf-v6-c-form {
90
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
91
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
92
+ --pf-v6-c-form__field-group-body--TranslateY: -.5rem;
93
+ }
81
94
  }
82
95
 
83
96
  .pf-v6-c-form {
@@ -434,6 +447,16 @@
434
447
  .pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
435
448
  --pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
436
449
  }
450
+ .pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
451
+ max-height: 9999px;
452
+ padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
453
+ padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
454
+ visibility: visible;
455
+ opacity: 1;
456
+ transition-delay: 0s;
457
+ 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;
458
+ translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
459
+ }
437
460
 
438
461
  .pf-v6-c-form__field-group-toggle {
439
462
  grid-row: 1/2;
@@ -500,9 +523,17 @@
500
523
  display: grid;
501
524
  grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
502
525
  gap: var(--pf-v6-c-form__field-group-body--Gap);
503
- padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
504
- padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
505
526
  }
527
+ .pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
528
+ max-height: 0;
529
+ visibility: hidden;
530
+ opacity: 0;
531
+ 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);
532
+ 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;
533
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
534
+ translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
535
+ }
536
+
506
537
  .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
507
538
  --pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
508
539
  --pf-v6-c-form__field-group-header--PaddingBlockStart: 0;
package/css/components/Form/form.d.ts CHANGED
@@ -46,7 +46,8 @@ declare const _default: {
46
46
  "stack": "pf-m-stack",
47
47
  "inactive": "pf-m-inactive",
48
48
  "hidden": "pf-m-hidden",
49
- "expanded": "pf-m-expanded"
49
+ "expanded": "pf-m-expanded",
50
+ "expandable": "pf-m-expandable"
50
51
  }
51
52
  };
52
53
  export default _default;
package/css/components/Form/form.js CHANGED
@@ -48,6 +48,7 @@ exports.default = {
48
48
  "stack": "pf-m-stack",
49
49
  "inactive": "pf-m-inactive",
50
50
  "hidden": "pf-m-hidden",
51
- "expanded": "pf-m-expanded"
51
+ "expanded": "pf-m-expanded",
52
+ "expandable": "pf-m-expandable"
52
53
  }
53
54
  };
package/css/components/Form/form.mjs CHANGED
@@ -46,6 +46,7 @@ export default {
46
46
  "stack": "pf-m-stack",
47
47
  "inactive": "pf-m-inactive",
48
48
  "hidden": "pf-m-hidden",
49
- "expanded": "pf-m-expanded"
49
+ "expanded": "pf-m-expanded",
50
+ "expandable": "pf-m-expandable"
50
51
  }
51
52
  };
package/css/components/Nav/nav.css CHANGED
@@ -52,9 +52,13 @@
52
52
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
53
53
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
54
54
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
55
- --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
56
- --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
55
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
56
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: 0s;
57
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
58
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: 0s;
57
59
  --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
60
+ --pf-v6-c-nav__subnav--TranslateY: 0;
61
+ --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
58
62
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
59
63
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
60
64
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -83,6 +87,13 @@
83
87
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
84
88
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
85
89
  }
90
+ @media screen and (prefers-reduced-motion: no-preference) {
91
+ .pf-v6-c-nav {
92
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
93
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
94
+ --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
95
+ }
96
+ }
86
97
 
87
98
  .pf-v6-c-nav,
88
99
  .pf-v6-c-nav__section,
@@ -153,24 +164,27 @@
153
164
 
154
165
  .pf-v6-c-nav__subnav {
155
166
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
156
- grid-template-rows: 1fr;
157
- min-height: 0;
167
+ max-height: 9999px;
158
168
  padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
159
169
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
160
170
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
161
171
  overflow-y: clip;
162
- transition-delay: 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
172
+ visibility: visible;
173
+ transition-delay: 0s, 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
163
174
  transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
164
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
165
- transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
175
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
176
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
177
+ translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
166
178
  }
167
179
  .pf-v6-c-nav__subnav[hidden] {
168
180
  --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
169
181
  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
182
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide);
170
183
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
171
184
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
185
+ --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
172
186
  display: grid;
173
- grid-template-rows: 0fr;
187
+ max-height: 0;
174
188
  visibility: hidden;
175
189
  opacity: 0;
176
190
  }
package/css/components/TreeView/tree-view.css CHANGED
@@ -247,10 +247,13 @@
247
247
  }
248
248
 
249
249
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
250
+ max-height: 0;
251
+ visibility: hidden;
250
252
  opacity: var(--pf-v6-c-tree-view__list--Opacity);
253
+ transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
251
254
  transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
252
- transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
253
- transition-property: opacity, translate;
255
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
256
+ transition-property: opacity, translate, visibility, max-height;
254
257
  translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
255
258
  }
256
259
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
@@ -262,8 +265,11 @@
262
265
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
263
266
  }
264
267
  .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
268
+ max-height: 9999px;
269
+ visibility: revert;
265
270
  opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
266
- transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
271
+ transition-delay: 0s;
272
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
267
273
  translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
268
274
  }
269
275
 
package/css/components/_index.css CHANGED
@@ -376,33 +376,32 @@
376
376
  }
377
377
 
378
378
  .pf-v6-c-accordion__expandable-content {
379
- display: none;
380
- margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
379
+ max-height: 0;
381
380
  margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
382
381
  margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
383
382
  font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
384
383
  color: var(--pf-v6-c-accordion__expandable-content--Color);
384
+ visibility: hidden;
385
385
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
386
386
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
387
387
  opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
388
+ 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);
388
389
  transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
389
- 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);
390
- transition-property: opacity, translate, display;
391
- transition-behavior: allow-discrete;
390
+ transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
391
+ transition-property: opacity, translate, visibility, max-height, margin-block-end;
392
392
  translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
393
393
  }
394
394
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
395
- max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
396
395
  overflow-y: auto;
397
396
  }
398
397
  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
399
- display: revert;
398
+ max-height: 9999px;
399
+ margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
400
+ visibility: revert;
401
+ transition-delay: 0s;
400
402
  }
401
- @starting-style {
402
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
403
- --pf-v6-c-accordion__expandable-content--Opacity: 0;
404
- --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
405
- }
403
+ .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
404
+ max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
406
405
  }
407
406
 
408
407
  .pf-v6-c-accordion__expandable-content-body {
@@ -6474,7 +6473,7 @@ ul) {
6474
6473
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
6475
6474
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
6476
6475
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
6477
- --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
6476
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
6478
6477
  --pf-v6-c-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(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
6479
6478
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
6480
6479
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
@@ -6493,7 +6492,7 @@ ul) {
6493
6492
  gap: 0;
6494
6493
  transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
6495
6494
  transition-duration: 0s;
6496
- transition-property: gap;
6495
+ transition-property: gap, padding-block-end;
6497
6496
  }
6498
6497
  .pf-v6-c-expandable-section.pf-m-expanded {
6499
6498
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
@@ -6503,7 +6502,6 @@ ul) {
6503
6502
  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
6504
6503
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
6505
6504
  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
6506
- --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
6507
6505
  --pf-v6-c-expandable-section__content--Visibility: auto;
6508
6506
  --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
6509
6507
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
@@ -6520,7 +6518,6 @@ ul) {
6520
6518
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
6521
6519
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
6522
6520
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
6523
- transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
6524
6521
  }
6525
6522
  .pf-v6-c-expandable-section.pf-m-indented {
6526
6523
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -6706,6 +6703,19 @@ ul) {
6706
6703
  --pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
6707
6704
  --pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
6708
6705
  --pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
6706
+ --pf-v6-c-form__field-group-body--TranslateY: 0;
6707
+ --pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
6708
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
6709
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
6710
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
6711
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
6712
+ }
6713
+ @media screen and (prefers-reduced-motion: no-preference) {
6714
+ .pf-v6-c-form {
6715
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
6716
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
6717
+ --pf-v6-c-form__field-group-body--TranslateY: -.5rem;
6718
+ }
6709
6719
  }
6710
6720
 
6711
6721
  .pf-v6-c-form {
@@ -7062,6 +7072,16 @@ ul) {
7062
7072
  .pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
7063
7073
  --pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
7064
7074
  }
7075
+ .pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
7076
+ max-height: 9999px;
7077
+ padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
7078
+ padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
7079
+ visibility: visible;
7080
+ opacity: 1;
7081
+ transition-delay: 0s;
7082
+ 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;
7083
+ translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
7084
+ }
7065
7085
 
7066
7086
  .pf-v6-c-form__field-group-toggle {
7067
7087
  grid-row: 1/2;
@@ -7128,9 +7148,17 @@ ul) {
7128
7148
  display: grid;
7129
7149
  grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
7130
7150
  gap: var(--pf-v6-c-form__field-group-body--Gap);
7131
- padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
7132
- padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
7133
7151
  }
7152
+ .pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
7153
+ max-height: 0;
7154
+ visibility: hidden;
7155
+ opacity: 0;
7156
+ 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);
7157
+ 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;
7158
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
7159
+ translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
7160
+ }
7161
+
7134
7162
  .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
7135
7163
  --pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
7136
7164
  --pf-v6-c-form__field-group-header--PaddingBlockStart: 0;
@@ -11366,9 +11394,13 @@ ul.pf-v6-c-list {
11366
11394
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
11367
11395
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
11368
11396
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
11369
- --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
11370
- --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
11397
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
11398
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: 0s;
11399
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
11400
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: 0s;
11371
11401
  --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
11402
+ --pf-v6-c-nav__subnav--TranslateY: 0;
11403
+ --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
11372
11404
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
11373
11405
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
11374
11406
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -11397,6 +11429,13 @@ ul.pf-v6-c-list {
11397
11429
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
11398
11430
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11399
11431
  }
11432
+ @media screen and (prefers-reduced-motion: no-preference) {
11433
+ .pf-v6-c-nav {
11434
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
11435
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
11436
+ --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
11437
+ }
11438
+ }
11400
11439
 
11401
11440
  .pf-v6-c-nav,
11402
11441
  .pf-v6-c-nav__section,
@@ -11467,24 +11506,27 @@ ul.pf-v6-c-list {
11467
11506
 
11468
11507
  .pf-v6-c-nav__subnav {
11469
11508
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
11470
- grid-template-rows: 1fr;
11471
- min-height: 0;
11509
+ max-height: 9999px;
11472
11510
  padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
11473
11511
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
11474
11512
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
11475
11513
  overflow-y: clip;
11476
- transition-delay: 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
11514
+ visibility: visible;
11515
+ transition-delay: 0s, 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
11477
11516
  transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
11478
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
11479
- transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
11517
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
11518
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
11519
+ translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
11480
11520
  }
11481
11521
  .pf-v6-c-nav__subnav[hidden] {
11482
11522
  --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
11483
11523
  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
11524
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide);
11484
11525
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
11485
11526
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
11527
+ --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
11486
11528
  display: grid;
11487
- grid-template-rows: 0fr;
11529
+ max-height: 0;
11488
11530
  visibility: hidden;
11489
11531
  opacity: 0;
11490
11532
  }
@@ -22432,10 +22474,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22432
22474
  }
22433
22475
 
22434
22476
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
22477
+ max-height: 0;
22478
+ visibility: hidden;
22435
22479
  opacity: var(--pf-v6-c-tree-view__list--Opacity);
22480
+ transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
22436
22481
  transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
22437
- transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
22438
- transition-property: opacity, translate;
22482
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
22483
+ transition-property: opacity, translate, visibility, max-height;
22439
22484
  translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
22440
22485
  }
22441
22486
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
@@ -22447,8 +22492,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22447
22492
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
22448
22493
  }
22449
22494
  .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
22495
+ max-height: 9999px;
22496
+ visibility: revert;
22450
22497
  opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
22451
- transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
22498
+ transition-delay: 0s;
22499
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
22452
22500
  translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
22453
22501
  }
22454
22502
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.3.0-prerelease.3",
3
+ "version": "6.3.0-prerelease.4",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.3.0-prerelease.20",
22
+ "@patternfly/patternfly": "6.3.0-prerelease.24",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.0"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "e62933d6c64d3fbeb599a2e3a7c8dc3ab7a981e1"
27
+ "gitHead": "2a9c798759283f3a0d482ec6ffd3dd9eb0d3807d"
28
28
  }