@patternfly/patternfly 6.3.0-prerelease.21 → 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 (8) hide show
  1. package/components/Nav/nav.css +22 -8
  2. package/components/Nav/nav.scss +22 -9
  3. package/components/_index.css +22 -8
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +22 -8
  6. package/patternfly.css +22 -8
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
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
@@ -11364,9 +11364,13 @@ ul.pf-v6-c-list {
11364
11364
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
11365
11365
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
11366
11366
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
11367
- --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
11368
- --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;
11369
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;
11370
11374
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
11371
11375
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
11372
11376
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -11395,6 +11399,13 @@ ul.pf-v6-c-list {
11395
11399
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
11396
11400
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11397
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
+ }
11398
11409
 
11399
11410
  .pf-v6-c-nav,
11400
11411
  .pf-v6-c-nav__section,
@@ -11465,24 +11476,27 @@ ul.pf-v6-c-list {
11465
11476
 
11466
11477
  .pf-v6-c-nav__subnav {
11467
11478
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
11468
- grid-template-rows: 1fr;
11469
- min-height: 0;
11479
+ max-height: 9999px;
11470
11480
  padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
11471
11481
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
11472
11482
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
11473
11483
  overflow-y: clip;
11474
- 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);
11475
11486
  transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
11476
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
11477
- 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);
11478
11490
  }
11479
11491
  .pf-v6-c-nav__subnav[hidden] {
11480
11492
  --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
11481
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);
11482
11495
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
11483
11496
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
11497
+ --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
11484
11498
  display: grid;
11485
- grid-template-rows: 0fr;
11499
+ max-height: 0;
11486
11500
  visibility: hidden;
11487
11501
  opacity: 0;
11488
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.21",
4
+ "version": "6.3.0-prerelease.22",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -18826,9 +18826,13 @@ ul.pf-v6-c-list {
18826
18826
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
18827
18827
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
18828
18828
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
18829
- --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
18830
- --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;
18831
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;
18832
18836
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
18833
18837
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
18834
18838
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -18857,6 +18861,13 @@ ul.pf-v6-c-list {
18857
18861
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
18858
18862
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18859
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
+ }
18860
18871
 
18861
18872
  .pf-v6-c-nav,
18862
18873
  .pf-v6-c-nav__section,
@@ -18927,24 +18938,27 @@ ul.pf-v6-c-list {
18927
18938
 
18928
18939
  .pf-v6-c-nav__subnav {
18929
18940
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
18930
- grid-template-rows: 1fr;
18931
- min-height: 0;
18941
+ max-height: 9999px;
18932
18942
  padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
18933
18943
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
18934
18944
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
18935
18945
  overflow-y: clip;
18936
- 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);
18937
18948
  transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
18938
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
18939
- 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);
18940
18952
  }
18941
18953
  .pf-v6-c-nav__subnav[hidden] {
18942
18954
  --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
18943
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);
18944
18957
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
18945
18958
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
18959
+ --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
18946
18960
  display: grid;
18947
- grid-template-rows: 0fr;
18961
+ max-height: 0;
18948
18962
  visibility: hidden;
18949
18963
  opacity: 0;
18950
18964
  }
package/patternfly.css CHANGED
@@ -18962,9 +18962,13 @@ ul.pf-v6-c-list {
18962
18962
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
18963
18963
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
18964
18964
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
18965
- --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
18966
- --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;
18967
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;
18968
18972
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
18969
18973
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
18970
18974
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -18993,6 +18997,13 @@ ul.pf-v6-c-list {
18993
18997
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
18994
18998
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18995
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
+ }
18996
19007
 
18997
19008
  .pf-v6-c-nav,
18998
19009
  .pf-v6-c-nav__section,
@@ -19063,24 +19074,27 @@ ul.pf-v6-c-list {
19063
19074
 
19064
19075
  .pf-v6-c-nav__subnav {
19065
19076
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
19066
- grid-template-rows: 1fr;
19067
- min-height: 0;
19077
+ max-height: 9999px;
19068
19078
  padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
19069
19079
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
19070
19080
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
19071
19081
  overflow-y: clip;
19072
- 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);
19073
19084
  transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
19074
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
19075
- 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);
19076
19088
  }
19077
19089
  .pf-v6-c-nav__subnav[hidden] {
19078
19090
  --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
19079
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);
19080
19093
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
19081
19094
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
19095
+ --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
19082
19096
  display: grid;
19083
- grid-template-rows: 0fr;
19097
+ max-height: 0;
19084
19098
  visibility: hidden;
19085
19099
  opacity: 0;
19086
19100
  }