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

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 (10) hide show
  1. package/components/ExpandableSection/expandable-section.css +2 -4
  2. package/components/ExpandableSection/expandable-section.scss +2 -4
  3. package/components/Nav/nav.css +22 -8
  4. package/components/Nav/nav.scss +22 -9
  5. package/components/_index.css +24 -12
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +24 -12
  8. package/patternfly.css +24 -12
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/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/components/ExpandableSection/expandable-section.scss CHANGED
@@ -48,7 +48,7 @@
48
48
  --#{$expandable-section}--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
49
49
  --#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
50
50
  --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
51
- --#{$expandable-section}--m-display-lg--TransitionDelay: var(--#{$expandable-section}__content--TransitionDuration--fade);
51
+ --#{$expandable-section}--m-display-lg--TransitionDelay: var(--#{$expandable-section}__content--TransitionDuration--collapse--fade);
52
52
 
53
53
  // Indented
54
54
  --#{$expandable-section}--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--#{$expandable-section}__toggle-icon--MinWidth));
@@ -64,7 +64,7 @@
64
64
  gap: 0;
65
65
  transition-delay: var(--#{$expandable-section}__content--TransitionDelay--hide);
66
66
  transition-duration: 0s;
67
- transition-property: gap;
67
+ transition-property: gap, padding-block-end;
68
68
 
69
69
  &.pf-m-expanded {
70
70
  --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
@@ -74,7 +74,6 @@
74
74
  --#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--expand--fade);
75
75
  --#{$expandable-section}__content--Opacity: var(--#{$expandable-section}--m-expanded__content--Opacity);
76
76
  --#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expanded__content--TranslateY);
77
- --#{$expandable-section}--m-display-lg--TransitionDelay: 0s;
78
77
  --#{$expandable-section}__content--Visibility: auto;
79
78
  --#{$expandable-section}__content--MaxHeight: 9999px;
80
79
  --#{$expandable-section}__content--TransitionDelay--hide: 0s;
@@ -94,7 +93,6 @@
94
93
  background-color: var(--#{$expandable-section}--m-display-lg--BackgroundColor);
95
94
  border: var(--#{$expandable-section}--m-display-lg--BorderWidth) solid var(--#{$expandable-section}--m-display-lg--BorderColor);
96
95
  border-radius: var(--#{$expandable-section}--m-display-lg--BorderRadius);
97
- transition: padding-block-end 0s var(--#{$expandable-section}--m-display-lg--TransitionDelay, 0s);
98
96
  }
99
97
 
100
98
  &.pf-m-indented {
package/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/components/Nav/nav.scss CHANGED
@@ -75,9 +75,19 @@
75
75
  --#{$nav}__subnav--PaddingBlockStart: var(--#{$nav}__item--RowGap); // needed to keep focus outline on first item from being cut off
76
76
  --#{$nav}__subnav--PaddingBlockEnd: var(--#{$nav}__item--RowGap); // needed to keep focus outline on last item from being cut off
77
77
  --#{$nav}__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
78
- --#{$nav}__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
79
- --#{$nav}__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
78
+ --#{$nav}__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
79
+ --#{$nav}__subnav--TransitionDuration--expand--slide: 0s;
80
+ --#{$nav}__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
81
+ --#{$nav}__subnav--TransitionDuration--collapse--slide: 0s;
80
82
  --#{$nav}__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
83
+ --#{$nav}__subnav--TranslateY: 0;
84
+ --#{$nav}__subnav--hidden--TranslateY: 0;
85
+
86
+ @media screen and (prefers-reduced-motion: no-preference) {
87
+ --#{$nav}__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
88
+ --#{$nav}__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
89
+ --#{$nav}__subnav--hidden--TranslateY: -.5rem;
90
+ }
81
91
 
82
92
  // * Nav scroll button
83
93
  --#{$nav}__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
@@ -199,25 +209,28 @@
199
209
  .#{$nav}__subnav {
200
210
  --#{$nav}__list--RowGap: var(--#{$nav}__subnav--RowGap); // this value is passed to --#{$nav}__item--RowGap--row-offset and updates clickable area based on value passed
201
211
 
202
- grid-template-rows: 1fr;
203
- min-height: 0;
212
+ max-height: 9999px;
204
213
  padding-block-start: var(--#{$nav}__subnav--PaddingBlockStart);
205
214
  padding-block-end: var(--#{$nav}__subnav--PaddingBlockEnd);
206
215
  padding-inline-start: var(--#{$nav}__subnav--PaddingInlineStart); // indent nested lists
207
216
  overflow-y: clip;
208
- transition-delay: 0s, var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s);
217
+ visibility: visible;
218
+ transition-delay: 0s, 0s, var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s), var(--#{$nav}__subnav--TransitionDelay--expand--focus, 0s);
209
219
  transition-timing-function: var(--#{$nav}__subnav--TransitionTimingFunction--expand);
210
- transition-duration: var(--#{$nav}__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
211
- transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
212
-
220
+ transition-duration: var(--#{$nav}__subnav--TransitionDuration--expand), var(--#{$nav}__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
221
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
222
+ translate: 0 var(--#{$nav}__subnav--TranslateY);
223
+
213
224
  &[hidden] {
214
225
  --#{$nav}__subnav--TransitionDelay--expand--focus: var(--#{$nav}__subnav--TransitionDuration--expand);
215
226
  --#{$nav}__subnav--TransitionDuration--expand: var(--#{$nav}__subnav--TransitionDuration--collapse);
227
+ --#{$nav}__subnav--TransitionDuration--expand--slide: var(--#{$nav}__subnav--TransitionDuration--collapse--slide);
216
228
  --#{$nav}__subnav--PaddingBlockStart: 0;
217
229
  --#{$nav}__subnav--PaddingBlockEnd: 0;
230
+ --#{$nav}__subnav--TranslateY: var(--#{$nav}__subnav--hidden--TranslateY);
218
231
 
219
232
  display: grid; // overrides `display: none` - element is hidden via `visibility: hidden`
220
- grid-template-rows: 0fr;
233
+ max-height: 0;
221
234
  visibility: hidden;
222
235
  opacity: 0;
223
236
  }
package/components/_index.css CHANGED
@@ -6474,7 +6474,7 @@ ul) {
6474
6474
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
6475
6475
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
6476
6476
  --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);
6477
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
6478
6478
  --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
6479
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
6480
6480
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
@@ -6493,7 +6493,7 @@ ul) {
6493
6493
  gap: 0;
6494
6494
  transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
6495
6495
  transition-duration: 0s;
6496
- transition-property: gap;
6496
+ transition-property: gap, padding-block-end;
6497
6497
  }
6498
6498
  .pf-v6-c-expandable-section.pf-m-expanded {
6499
6499
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
@@ -6503,7 +6503,6 @@ ul) {
6503
6503
  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
6504
6504
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
6505
6505
  --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
6506
  --pf-v6-c-expandable-section__content--Visibility: auto;
6508
6507
  --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
6509
6508
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
@@ -6520,7 +6519,6 @@ ul) {
6520
6519
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
6521
6520
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
6522
6521
  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
6522
  }
6525
6523
  .pf-v6-c-expandable-section.pf-m-indented {
6526
6524
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -11366,9 +11364,13 @@ ul.pf-v6-c-list {
11366
11364
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
11367
11365
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
11368
11366
  --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);
11367
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
11368
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: 0s;
11369
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
11370
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: 0s;
11371
11371
  --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
11372
+ --pf-v6-c-nav__subnav--TranslateY: 0;
11373
+ --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
11372
11374
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
11373
11375
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
11374
11376
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -11397,6 +11399,13 @@ ul.pf-v6-c-list {
11397
11399
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
11398
11400
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11399
11401
  }
11402
+ @media screen and (prefers-reduced-motion: no-preference) {
11403
+ .pf-v6-c-nav {
11404
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
11405
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
11406
+ --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
11407
+ }
11408
+ }
11400
11409
 
11401
11410
  .pf-v6-c-nav,
11402
11411
  .pf-v6-c-nav__section,
@@ -11467,24 +11476,27 @@ ul.pf-v6-c-list {
11467
11476
 
11468
11477
  .pf-v6-c-nav__subnav {
11469
11478
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
11470
- grid-template-rows: 1fr;
11471
- min-height: 0;
11479
+ max-height: 9999px;
11472
11480
  padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
11473
11481
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
11474
11482
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
11475
11483
  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);
11484
+ visibility: visible;
11485
+ 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
11486
  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;
11487
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
11488
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
11489
+ translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
11480
11490
  }
11481
11491
  .pf-v6-c-nav__subnav[hidden] {
11482
11492
  --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
11483
11493
  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
11494
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide);
11484
11495
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
11485
11496
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
11497
+ --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
11486
11498
  display: grid;
11487
- grid-template-rows: 0fr;
11499
+ max-height: 0;
11488
11500
  visibility: hidden;
11489
11501
  opacity: 0;
11490
11502
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.3.0-prerelease.20",
4
+ "version": "6.3.0-prerelease.22",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,7 +47,7 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.10.11",
50
+ "@patternfly/documentation-framework": "6.10.19",
51
51
  "@patternfly/patternfly-a11y": "5.1.0",
52
52
  "@patternfly/react-code-editor": "6.2.2",
53
53
  "@patternfly/react-core": "6.2.2",
package/patternfly-no-globals.css CHANGED
@@ -13936,7 +13936,7 @@ ul) {
13936
13936
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
13937
13937
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
13938
13938
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
13939
- --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
13939
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
13940
13940
  --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));
13941
13941
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
13942
13942
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
@@ -13955,7 +13955,7 @@ ul) {
13955
13955
  gap: 0;
13956
13956
  transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
13957
13957
  transition-duration: 0s;
13958
- transition-property: gap;
13958
+ transition-property: gap, padding-block-end;
13959
13959
  }
13960
13960
  .pf-v6-c-expandable-section.pf-m-expanded {
13961
13961
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
@@ -13965,7 +13965,6 @@ ul) {
13965
13965
  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
13966
13966
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
13967
13967
  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
13968
- --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
13969
13968
  --pf-v6-c-expandable-section__content--Visibility: auto;
13970
13969
  --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
13971
13970
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
@@ -13982,7 +13981,6 @@ ul) {
13982
13981
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
13983
13982
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
13984
13983
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
13985
- transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
13986
13984
  }
13987
13985
  .pf-v6-c-expandable-section.pf-m-indented {
13988
13986
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -18828,9 +18826,13 @@ ul.pf-v6-c-list {
18828
18826
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
18829
18827
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
18830
18828
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
18831
- --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
18832
- --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
18829
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
18830
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: 0s;
18831
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
18832
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: 0s;
18833
18833
  --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
18834
+ --pf-v6-c-nav__subnav--TranslateY: 0;
18835
+ --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
18834
18836
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
18835
18837
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
18836
18838
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -18859,6 +18861,13 @@ ul.pf-v6-c-list {
18859
18861
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
18860
18862
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18861
18863
  }
18864
+ @media screen and (prefers-reduced-motion: no-preference) {
18865
+ .pf-v6-c-nav {
18866
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
18867
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
18868
+ --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
18869
+ }
18870
+ }
18862
18871
 
18863
18872
  .pf-v6-c-nav,
18864
18873
  .pf-v6-c-nav__section,
@@ -18929,24 +18938,27 @@ ul.pf-v6-c-list {
18929
18938
 
18930
18939
  .pf-v6-c-nav__subnav {
18931
18940
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
18932
- grid-template-rows: 1fr;
18933
- min-height: 0;
18941
+ max-height: 9999px;
18934
18942
  padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
18935
18943
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
18936
18944
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
18937
18945
  overflow-y: clip;
18938
- 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);
18946
+ visibility: visible;
18947
+ 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);
18939
18948
  transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
18940
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
18941
- transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
18949
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
18950
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
18951
+ translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
18942
18952
  }
18943
18953
  .pf-v6-c-nav__subnav[hidden] {
18944
18954
  --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
18945
18955
  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
18956
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide);
18946
18957
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
18947
18958
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
18959
+ --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
18948
18960
  display: grid;
18949
- grid-template-rows: 0fr;
18961
+ max-height: 0;
18950
18962
  visibility: hidden;
18951
18963
  opacity: 0;
18952
18964
  }
package/patternfly.css CHANGED
@@ -14072,7 +14072,7 @@ ul) {
14072
14072
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
14073
14073
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
14074
14074
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
14075
- --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
14075
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
14076
14076
  --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));
14077
14077
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
14078
14078
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
@@ -14091,7 +14091,7 @@ ul) {
14091
14091
  gap: 0;
14092
14092
  transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
14093
14093
  transition-duration: 0s;
14094
- transition-property: gap;
14094
+ transition-property: gap, padding-block-end;
14095
14095
  }
14096
14096
  .pf-v6-c-expandable-section.pf-m-expanded {
14097
14097
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
@@ -14101,7 +14101,6 @@ ul) {
14101
14101
  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
14102
14102
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
14103
14103
  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
14104
- --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
14105
14104
  --pf-v6-c-expandable-section__content--Visibility: auto;
14106
14105
  --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
14107
14106
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
@@ -14118,7 +14117,6 @@ ul) {
14118
14117
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
14119
14118
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
14120
14119
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
14121
- transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
14122
14120
  }
14123
14121
  .pf-v6-c-expandable-section.pf-m-indented {
14124
14122
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -18964,9 +18962,13 @@ ul.pf-v6-c-list {
18964
18962
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
18965
18963
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
18966
18964
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
18967
- --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
18968
- --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
18965
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
18966
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: 0s;
18967
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
18968
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: 0s;
18969
18969
  --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
18970
+ --pf-v6-c-nav__subnav--TranslateY: 0;
18971
+ --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
18970
18972
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
18971
18973
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
18972
18974
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -18995,6 +18997,13 @@ ul.pf-v6-c-list {
18995
18997
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
18996
18998
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18997
18999
  }
19000
+ @media screen and (prefers-reduced-motion: no-preference) {
19001
+ .pf-v6-c-nav {
19002
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
19003
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
19004
+ --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
19005
+ }
19006
+ }
18998
19007
 
18999
19008
  .pf-v6-c-nav,
19000
19009
  .pf-v6-c-nav__section,
@@ -19065,24 +19074,27 @@ ul.pf-v6-c-list {
19065
19074
 
19066
19075
  .pf-v6-c-nav__subnav {
19067
19076
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
19068
- grid-template-rows: 1fr;
19069
- min-height: 0;
19077
+ max-height: 9999px;
19070
19078
  padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
19071
19079
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
19072
19080
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
19073
19081
  overflow-y: clip;
19074
- 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);
19082
+ visibility: visible;
19083
+ 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);
19075
19084
  transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
19076
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
19077
- transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
19085
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
19086
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
19087
+ translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
19078
19088
  }
19079
19089
  .pf-v6-c-nav__subnav[hidden] {
19080
19090
  --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
19081
19091
  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
19092
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide);
19082
19093
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
19083
19094
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
19095
+ --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
19084
19096
  display: grid;
19085
- grid-template-rows: 0fr;
19097
+ max-height: 0;
19086
19098
  visibility: hidden;
19087
19099
  opacity: 0;
19088
19100
  }