@patternfly/patternfly 6.2.0-prerelease.25 → 6.2.0-prerelease.27

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 (13) hide show
  1. package/base/patternfly-variables.css +1 -1
  2. package/base/patternfly-variables.scss +1 -1
  3. package/components/Nav/nav.css +12 -15
  4. package/components/Nav/nav.scss +12 -15
  5. package/components/_index.css +12 -15
  6. package/package.json +2 -2
  7. package/patternfly-base-no-globals.css +1 -1
  8. package/patternfly-base.css +1 -1
  9. package/patternfly-no-globals.css +13 -16
  10. package/patternfly.css +13 -16
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
  13. package/sass-utilities/mixins.scss +8 -4
package/base/patternfly-variables.css CHANGED
@@ -1235,6 +1235,6 @@
1235
1235
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
1236
1236
  }
1237
1237
 
1238
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) {
1238
+ :is(.pf-v6-m-dir-rtl, [dir=rtl]) {
1239
1239
  --pf-v6-global--inverse--multiplier: -1;
1240
1240
  }
package/base/patternfly-variables.scss CHANGED
@@ -15,6 +15,6 @@
15
15
  @include dark.pf-v6-tokens;
16
16
  }
17
17
 
18
- @include pf-v6-rtl {
18
+ @include pf-v6-rtl(false) {
19
19
  @include pf-v6-set-inverse;
20
20
  }
package/components/Nav/nav.css CHANGED
@@ -52,9 +52,9 @@
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--expansion: 0s;
56
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: 0s;
57
- --pf-v6-c-nav__subnav--TransitionTimingFunction--expansion: var(--pf-t--global--motion--timing-function--default);
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);
57
+ --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
58
58
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
59
59
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
60
60
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -83,12 +83,6 @@
83
83
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
84
84
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
85
85
  }
86
- @media (prefers-reduced-motion: no-preference) {
87
- .pf-v6-c-nav {
88
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--default);
89
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--short);
90
- }
91
- }
92
86
 
93
87
  .pf-v6-c-nav,
94
88
  .pf-v6-c-nav__section,
@@ -140,7 +134,7 @@
140
134
  }
141
135
 
142
136
  [class^=pf-v6-c-nav][hidden] {
143
- visibility: hidden;
137
+ display: none;
144
138
  }
145
139
 
146
140
  .pf-v6-c-nav__nav,
@@ -149,7 +143,6 @@
149
143
  --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1);
150
144
  --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset);
151
145
  --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
152
- visibility: visible;
153
146
  }
154
147
 
155
148
  .pf-v6-c-nav__list {
@@ -166,15 +159,19 @@
166
159
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
167
160
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
168
161
  overflow-y: clip;
169
- transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expansion);
170
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expansion);
171
- transition-property: grid-template-rows, padding-block-start, padding-block-end, opacity;
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);
163
+ 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;
172
166
  }
173
167
  .pf-v6-c-nav__subnav[hidden] {
174
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion);
168
+ --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
169
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
175
170
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
176
171
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
172
+ display: grid;
177
173
  grid-template-rows: 0fr;
174
+ visibility: hidden;
178
175
  opacity: 0;
179
176
  }
180
177
 
package/components/Nav/nav.scss CHANGED
@@ -75,14 +75,9 @@
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--expansion: 0s; // no slide by default
79
- --#{$nav}__subnav--hidden--TransitionDuration--expansion: 0s;
80
- --#{$nav}__subnav--TransitionTimingFunction--expansion: var(--pf-t--global--motion--timing-function--default);
81
-
82
- @media (prefers-reduced-motion: no-preference) {
83
- --#{$nav}__subnav--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--default);
84
- --#{$nav}__subnav--hidden--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--short);
85
- }
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);
80
+ --#{$nav}__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
86
81
 
87
82
  // * Nav scroll button
88
83
  --#{$nav}__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
@@ -180,7 +175,7 @@
180
175
  }
181
176
 
182
177
  [class^="#{$nav}"][hidden] {
183
- visibility: hidden;
178
+ display: none;
184
179
  }
185
180
 
186
181
  // Magic value calcs
@@ -191,8 +186,6 @@
191
186
  --#{$nav}__item--RowGap--row-offset: calc(var(--#{$nav}__list--RowGap) / 2 * -1); // row gap offset calcs 1/2 height of row gap
192
187
  --#{$nav}__link--clickable-inset--Block: var(--#{$nav}__item--RowGap--row-offset); // set link's clickable area offset based on 1/2 row gap
193
188
  --#{$nav}__button--RowGap--row-offset: calc(var(--#{$nav}__item--RowGap) * -1); // match extra bottom paddings applied to expanded nav_links
194
-
195
- visibility: visible;
196
189
  }
197
190
 
198
191
  // - Nav list
@@ -212,16 +205,20 @@
212
205
  padding-block-end: var(--#{$nav}__subnav--PaddingBlockEnd);
213
206
  padding-inline-start: var(--#{$nav}__subnav--PaddingInlineStart); // indent nested lists
214
207
  overflow-y: clip;
215
- transition-timing-function: var(--#{$nav}__subnav--TransitionTimingFunction--expansion);
216
- transition-duration: var(--#{$nav}__subnav--TransitionDuration--expansion);
217
- transition-property: grid-template-rows, padding-block-start, padding-block-end, opacity;
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);
209
+ 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;
218
212
 
219
213
  &[hidden] {
220
- --#{$nav}__subnav--TransitionDuration--expansion: var(--#{$nav}__subnav--hidden--TransitionDuration--expansion);
214
+ --#{$nav}__subnav--TransitionDelay--expand--focus: var(--#{$nav}__subnav--TransitionDuration--expand);
215
+ --#{$nav}__subnav--TransitionDuration--expand: var(--#{$nav}__subnav--TransitionDuration--collapse);
221
216
  --#{$nav}__subnav--PaddingBlockStart: 0;
222
217
  --#{$nav}__subnav--PaddingBlockEnd: 0;
223
218
 
219
+ display: grid; // overrides `display: none` - element is hidden via `visibility: hidden`
224
220
  grid-template-rows: 0fr;
221
+ visibility: hidden;
225
222
  opacity: 0;
226
223
  }
227
224
  }
package/components/_index.css CHANGED
@@ -11143,9 +11143,9 @@ ul.pf-v6-c-list {
11143
11143
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
11144
11144
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
11145
11145
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
11146
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: 0s;
11147
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: 0s;
11148
- --pf-v6-c-nav__subnav--TransitionTimingFunction--expansion: var(--pf-t--global--motion--timing-function--default);
11146
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
11147
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
11148
+ --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
11149
11149
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
11150
11150
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
11151
11151
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -11174,12 +11174,6 @@ ul.pf-v6-c-list {
11174
11174
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
11175
11175
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11176
11176
  }
11177
- @media (prefers-reduced-motion: no-preference) {
11178
- .pf-v6-c-nav {
11179
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--default);
11180
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--short);
11181
- }
11182
- }
11183
11177
 
11184
11178
  .pf-v6-c-nav,
11185
11179
  .pf-v6-c-nav__section,
@@ -11231,7 +11225,7 @@ ul.pf-v6-c-list {
11231
11225
  }
11232
11226
 
11233
11227
  [class^=pf-v6-c-nav][hidden] {
11234
- visibility: hidden;
11228
+ display: none;
11235
11229
  }
11236
11230
 
11237
11231
  .pf-v6-c-nav__nav,
@@ -11240,7 +11234,6 @@ ul.pf-v6-c-list {
11240
11234
  --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1);
11241
11235
  --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset);
11242
11236
  --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
11243
- visibility: visible;
11244
11237
  }
11245
11238
 
11246
11239
  .pf-v6-c-nav__list {
@@ -11257,15 +11250,19 @@ ul.pf-v6-c-list {
11257
11250
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
11258
11251
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
11259
11252
  overflow-y: clip;
11260
- transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expansion);
11261
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expansion);
11262
- transition-property: grid-template-rows, padding-block-start, padding-block-end, opacity;
11253
+ 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);
11254
+ transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
11255
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
11256
+ transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
11263
11257
  }
11264
11258
  .pf-v6-c-nav__subnav[hidden] {
11265
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion);
11259
+ --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
11260
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
11266
11261
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
11267
11262
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
11263
+ display: grid;
11268
11264
  grid-template-rows: 0fr;
11265
+ visibility: hidden;
11269
11266
  opacity: 0;
11270
11267
  }
11271
11268
 
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.2.0-prerelease.25",
4
+ "version": "6.2.0-prerelease.27",
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.5.19",
50
+ "@patternfly/documentation-framework": "6.5.20",
51
51
  "@patternfly/patternfly-a11y": "5.0.0",
52
52
  "@patternfly/react-code-editor": "6.1.0",
53
53
  "@patternfly/react-core": "6.1.0",
package/patternfly-base-no-globals.css CHANGED
@@ -7456,6 +7456,6 @@
7456
7456
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
7457
7457
  }
7458
7458
 
7459
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) {
7459
+ :is(.pf-v6-m-dir-rtl, [dir=rtl]) {
7460
7460
  --pf-v6-global--inverse--multiplier: -1;
7461
7461
  }
package/patternfly-base.css CHANGED
@@ -7592,6 +7592,6 @@ button) {
7592
7592
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
7593
7593
  }
7594
7594
 
7595
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) {
7595
+ :is(.pf-v6-m-dir-rtl, [dir=rtl]) {
7596
7596
  --pf-v6-global--inverse--multiplier: -1;
7597
7597
  }
package/patternfly-no-globals.css CHANGED
@@ -7457,7 +7457,7 @@
7457
7457
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
7458
7458
  }
7459
7459
 
7460
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) {
7460
+ :is(.pf-v6-m-dir-rtl, [dir=rtl]) {
7461
7461
  --pf-v6-global--inverse--multiplier: -1;
7462
7462
  }
7463
7463
 
@@ -18605,9 +18605,9 @@ ul.pf-v6-c-list {
18605
18605
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
18606
18606
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
18607
18607
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
18608
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: 0s;
18609
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: 0s;
18610
- --pf-v6-c-nav__subnav--TransitionTimingFunction--expansion: var(--pf-t--global--motion--timing-function--default);
18608
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
18609
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
18610
+ --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
18611
18611
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
18612
18612
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
18613
18613
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -18636,12 +18636,6 @@ ul.pf-v6-c-list {
18636
18636
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
18637
18637
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18638
18638
  }
18639
- @media (prefers-reduced-motion: no-preference) {
18640
- .pf-v6-c-nav {
18641
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--default);
18642
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--short);
18643
- }
18644
- }
18645
18639
 
18646
18640
  .pf-v6-c-nav,
18647
18641
  .pf-v6-c-nav__section,
@@ -18693,7 +18687,7 @@ ul.pf-v6-c-list {
18693
18687
  }
18694
18688
 
18695
18689
  [class^=pf-v6-c-nav][hidden] {
18696
- visibility: hidden;
18690
+ display: none;
18697
18691
  }
18698
18692
 
18699
18693
  .pf-v6-c-nav__nav,
@@ -18702,7 +18696,6 @@ ul.pf-v6-c-list {
18702
18696
  --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1);
18703
18697
  --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset);
18704
18698
  --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
18705
- visibility: visible;
18706
18699
  }
18707
18700
 
18708
18701
  .pf-v6-c-nav__list {
@@ -18719,15 +18712,19 @@ ul.pf-v6-c-list {
18719
18712
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
18720
18713
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
18721
18714
  overflow-y: clip;
18722
- transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expansion);
18723
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expansion);
18724
- transition-property: grid-template-rows, padding-block-start, padding-block-end, opacity;
18715
+ 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);
18716
+ transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
18717
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
18718
+ transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
18725
18719
  }
18726
18720
  .pf-v6-c-nav__subnav[hidden] {
18727
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion);
18721
+ --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
18722
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
18728
18723
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
18729
18724
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
18725
+ display: grid;
18730
18726
  grid-template-rows: 0fr;
18727
+ visibility: hidden;
18731
18728
  opacity: 0;
18732
18729
  }
18733
18730
 
package/patternfly.css CHANGED
@@ -7593,7 +7593,7 @@ button) {
7593
7593
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
7594
7594
  }
7595
7595
 
7596
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) {
7596
+ :is(.pf-v6-m-dir-rtl, [dir=rtl]) {
7597
7597
  --pf-v6-global--inverse--multiplier: -1;
7598
7598
  }
7599
7599
 
@@ -18741,9 +18741,9 @@ ul.pf-v6-c-list {
18741
18741
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
18742
18742
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
18743
18743
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
18744
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: 0s;
18745
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: 0s;
18746
- --pf-v6-c-nav__subnav--TransitionTimingFunction--expansion: var(--pf-t--global--motion--timing-function--default);
18744
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
18745
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
18746
+ --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
18747
18747
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
18748
18748
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
18749
18749
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -18772,12 +18772,6 @@ ul.pf-v6-c-list {
18772
18772
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
18773
18773
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18774
18774
  }
18775
- @media (prefers-reduced-motion: no-preference) {
18776
- .pf-v6-c-nav {
18777
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--default);
18778
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--short);
18779
- }
18780
- }
18781
18775
 
18782
18776
  .pf-v6-c-nav,
18783
18777
  .pf-v6-c-nav__section,
@@ -18829,7 +18823,7 @@ ul.pf-v6-c-list {
18829
18823
  }
18830
18824
 
18831
18825
  [class^=pf-v6-c-nav][hidden] {
18832
- visibility: hidden;
18826
+ display: none;
18833
18827
  }
18834
18828
 
18835
18829
  .pf-v6-c-nav__nav,
@@ -18838,7 +18832,6 @@ ul.pf-v6-c-list {
18838
18832
  --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1);
18839
18833
  --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset);
18840
18834
  --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
18841
- visibility: visible;
18842
18835
  }
18843
18836
 
18844
18837
  .pf-v6-c-nav__list {
@@ -18855,15 +18848,19 @@ ul.pf-v6-c-list {
18855
18848
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
18856
18849
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
18857
18850
  overflow-y: clip;
18858
- transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expansion);
18859
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expansion);
18860
- transition-property: grid-template-rows, padding-block-start, padding-block-end, opacity;
18851
+ 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);
18852
+ transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
18853
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
18854
+ transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
18861
18855
  }
18862
18856
  .pf-v6-c-nav__subnav[hidden] {
18863
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion);
18857
+ --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
18858
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
18864
18859
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
18865
18860
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
18861
+ display: grid;
18866
18862
  grid-template-rows: 0fr;
18863
+ visibility: hidden;
18867
18864
  opacity: 0;
18868
18865
  }
18869
18866