@patternfly/patternfly 6.3.0-prerelease.30 → 6.3.0-prerelease.31

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/components/Page/page.css +17 -3
  2. package/components/Page/page.scss +15 -3
  3. package/components/_index.css +17 -3
  4. package/docs/components/Button/examples/Button.md +4 -1
  5. package/docs/components/CodeBlock/examples/CodeBlock.md +1 -1
  6. package/docs/components/ExpandableSection/examples/ExpandableSection.md +6 -6
  7. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  8. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  9. package/package.json +1 -1
  10. package/patternfly-no-globals.css +17 -3
  11. package/patternfly.css +17 -3
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Page/page.css CHANGED
@@ -8,9 +8,13 @@
8
8
  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
9
9
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10
10
  --pf-v6-c-page__sidebar--BoxShadow: none;
11
- --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
12
- --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
11
+ --pf-v6-c-page__sidebar--TransitionProperty: opacity;
12
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
13
+ --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
13
14
  --pf-v6-c-page__sidebar--TranslateX: -100%;
15
+ --pf-v6-c-page__sidebar--Opacity: 0;
16
+ --pf-v6-c-page__sidebar--m-expanded--Opacity: 1;
17
+ --pf-v6-c-page__sidebar--xl--Opacity: 1;
14
18
  --pf-v6-c-page__sidebar--TranslateZ: 0;
15
19
  --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
16
20
  --pf-v6-c-page__sidebar--xl--TranslateX: 0;
@@ -88,9 +92,17 @@
88
92
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
89
93
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
90
94
  }
95
+ @media screen and (prefers-reduced-motion: no-preference) {
96
+ .pf-v6-c-page {
97
+ --pf-v6-c-page__sidebar--Opacity: 1;
98
+ --pf-v6-c-page__sidebar--TransitionProperty: transform;
99
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
100
+ }
101
+ }
91
102
  @media screen and (min-width: 75rem) {
92
103
  .pf-v6-c-page {
93
104
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
105
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
94
106
  }
95
107
  }
96
108
 
@@ -184,7 +196,8 @@
184
196
  overflow-y: auto;
185
197
  -webkit-overflow-scrolling: touch;
186
198
  background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
187
- transition: transform var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
199
+ opacity: var(--pf-v6-c-page__sidebar--Opacity);
200
+ transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
188
201
  transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
189
202
  }
190
203
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__sidebar {
@@ -193,6 +206,7 @@
193
206
 
194
207
  .pf-v6-c-page__sidebar.pf-m-expanded {
195
208
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--m-expanded--TranslateX);
209
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--m-expanded--Opacity);
196
210
  box-shadow: var(--pf-v6-c-page__sidebar--BoxShadow);
197
211
  }
198
212
  @media screen and (min-width: 75rem) {
package/components/Page/page.scss CHANGED
@@ -21,9 +21,13 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
21
21
  --#{$page}__sidebar--BoxShadow: none;
22
22
 
23
23
  // TODO Reduced Motion default needed
24
- --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
25
- --#{$page}__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
24
+ --#{$page}__sidebar--TransitionProperty: opacity;
25
+ --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
26
+ --#{$page}__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
26
27
  --#{$page}__sidebar--TranslateX: -100%;
28
+ --#{$page}__sidebar--Opacity: 0;
29
+ --#{$page}__sidebar--m-expanded--Opacity: 1;
30
+ --#{$page}__sidebar--xl--Opacity: 1;
27
31
  --#{$page}__sidebar--TranslateZ: 0;
28
32
  --#{$page}__sidebar--m-expanded--TranslateX: 0;
29
33
  --#{$page}__sidebar--xl--TranslateX: 0;
@@ -32,6 +36,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
32
36
  --#{$page}__sidebar--PaddingInlineStart: 0;
33
37
  --#{$page}__sidebar--PaddingInlineEnd: 0;
34
38
 
39
+ @media screen and (prefers-reduced-motion: no-preference) {
40
+ --#{$page}__sidebar--Opacity: 1;
41
+ --#{$page}__sidebar--TransitionProperty: transform;
42
+ --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
43
+ }
35
44
 
36
45
  // Sidebar header
37
46
  --#{$page}__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
@@ -54,6 +63,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
54
63
 
55
64
  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
56
65
  --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--xl--TranslateX);
66
+ --#{$page}__sidebar--Opacity: var(--#{$page}__sidebar--xl--Opacity);
57
67
  }
58
68
 
59
69
  // Container for the main content area (grid area)
@@ -209,7 +219,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
209
219
  overflow-y: auto;
210
220
  -webkit-overflow-scrolling: touch;
211
221
  background-color: var(--#{$page}__sidebar--BackgroundColor);
212
- transition: transform var(--#{$page}__sidebar--TransitionDuration) var(--#{$page}__sidebar--TransitionTimingFunction);
222
+ opacity: var(--#{$page}__sidebar--Opacity);
223
+ transition: var(--#{$page}__sidebar--TransitionProperty) var(--#{$page}__sidebar--TransitionDuration) var(--#{$page}__sidebar--TransitionTimingFunction);
213
224
 
214
225
  @include pf-v6-bidirectional-style(
215
226
  $prop: transform,
@@ -221,6 +232,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
221
232
  // Expanded nav
222
233
  &.pf-m-expanded {
223
234
  --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--m-expanded--TranslateX);
235
+ --#{$page}__sidebar--Opacity: var(--#{$page}__sidebar--m-expanded--Opacity);
224
236
 
225
237
  box-shadow: var(--#{$page}__sidebar--BoxShadow);
226
238
 
package/components/_index.css CHANGED
@@ -12211,9 +12211,13 @@ ul.pf-v6-c-list {
12211
12211
  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
12212
12212
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12213
12213
  --pf-v6-c-page__sidebar--BoxShadow: none;
12214
- --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
12215
- --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
12214
+ --pf-v6-c-page__sidebar--TransitionProperty: opacity;
12215
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
12216
+ --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12216
12217
  --pf-v6-c-page__sidebar--TranslateX: -100%;
12218
+ --pf-v6-c-page__sidebar--Opacity: 0;
12219
+ --pf-v6-c-page__sidebar--m-expanded--Opacity: 1;
12220
+ --pf-v6-c-page__sidebar--xl--Opacity: 1;
12217
12221
  --pf-v6-c-page__sidebar--TranslateZ: 0;
12218
12222
  --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
12219
12223
  --pf-v6-c-page__sidebar--xl--TranslateX: 0;
@@ -12291,9 +12295,17 @@ ul.pf-v6-c-list {
12291
12295
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
12292
12296
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
12293
12297
  }
12298
+ @media screen and (prefers-reduced-motion: no-preference) {
12299
+ .pf-v6-c-page {
12300
+ --pf-v6-c-page__sidebar--Opacity: 1;
12301
+ --pf-v6-c-page__sidebar--TransitionProperty: transform;
12302
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
12303
+ }
12304
+ }
12294
12305
  @media screen and (min-width: 75rem) {
12295
12306
  .pf-v6-c-page {
12296
12307
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
12308
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
12297
12309
  }
12298
12310
  }
12299
12311
 
@@ -12387,7 +12399,8 @@ ul.pf-v6-c-list {
12387
12399
  overflow-y: auto;
12388
12400
  -webkit-overflow-scrolling: touch;
12389
12401
  background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
12390
- transition: transform var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
12402
+ opacity: var(--pf-v6-c-page__sidebar--Opacity);
12403
+ transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
12391
12404
  transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
12392
12405
  }
12393
12406
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__sidebar {
@@ -12396,6 +12409,7 @@ ul.pf-v6-c-list {
12396
12409
 
12397
12410
  .pf-v6-c-page__sidebar.pf-m-expanded {
12398
12411
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--m-expanded--TranslateX);
12412
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--m-expanded--Opacity);
12399
12413
  box-shadow: var(--pf-v6-c-page__sidebar--BoxShadow);
12400
12414
  }
12401
12415
  @media screen and (min-width: 75rem) {
package/docs/components/Button/examples/Button.md CHANGED
@@ -2116,6 +2116,7 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2116
2116
  <button
2117
2117
  class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2118
2118
  type="button"
2119
+ aria-expanded="false"
2119
2120
  aria-label="Hamburger"
2120
2121
  >
2121
2122
  <span class="pf-v6-c-button__icon">
@@ -2135,6 +2136,7 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2135
2136
  <button
2136
2137
  class="pf-v6-c-button pf-m-expand pf-m-hamburger pf-m-plain"
2137
2138
  type="button"
2139
+ aria-expanded="false"
2138
2140
  aria-label="Hamburger"
2139
2141
  >
2140
2142
  <span class="pf-v6-c-button__icon">
@@ -2152,8 +2154,9 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2152
2154
  </span>
2153
2155
  </button>
2154
2156
  <button
2155
- class="pf-v6-c-button pf-m-collapse pf-m-hamburger pf-m-plain"
2157
+ class="pf-v6-c-button pf-m-collapse pf-m-hamburger pf-m-expanded pf-m-plain"
2156
2158
  type="button"
2159
+ aria-expanded="true"
2157
2160
  aria-label="Hamburger"
2158
2161
  >
2159
2162
  <span class="pf-v6-c-button__icon">
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -169,7 +169,7 @@ name: azure-sample-repo<div
169
169
  <button
170
170
  class="pf-v6-c-button pf-m-link"
171
171
  type="button"
172
- aria-expanded="true"
172
+ aria-expanded
173
173
  aria-controls="code-block-expandable-expanded-content"
174
174
  >
175
175
  <span class="pf-v6-c-button__icon pf-m-start">
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -31,7 +31,7 @@ cssPrefix: pf-v6-c-expandable-section
31
31
  ```html
32
32
  <div class="pf-v6-c-expandable-section pf-m-expanded">
33
33
  <div class="pf-v6-c-expandable-section__toggle">
34
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
34
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
35
35
  <span class="pf-v6-c-button__icon pf-m-start">
36
36
  <span class="pf-v6-c-expandable-section__toggle-icon">
37
37
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -52,7 +52,7 @@ cssPrefix: pf-v6-c-expandable-section
52
52
  ```html
53
53
  <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented">
54
54
  <div class="pf-v6-c-expandable-section__toggle">
55
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
55
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
56
56
  <span class="pf-v6-c-button__icon pf-m-start">
57
57
  <span class="pf-v6-c-expandable-section__toggle-icon">
58
58
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -97,7 +97,7 @@ cssPrefix: pf-v6-c-expandable-section
97
97
  class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width"
98
98
  >
99
99
  <div class="pf-v6-c-expandable-section__toggle">
100
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
100
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
101
101
  <span class="pf-v6-c-button__icon pf-m-start">
102
102
  <span class="pf-v6-c-expandable-section__toggle-icon">
103
103
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -120,7 +120,7 @@ cssPrefix: pf-v6-c-expandable-section
120
120
  class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width pf-m-indented"
121
121
  >
122
122
  <div class="pf-v6-c-expandable-section__toggle">
123
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
123
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
124
124
  <span class="pf-v6-c-button__icon pf-m-start">
125
125
  <span class="pf-v6-c-expandable-section__toggle-icon">
126
126
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -155,7 +155,7 @@ cssPrefix: pf-v6-c-expandable-section
155
155
  <button
156
156
  class="pf-v6-c-button pf-m-link"
157
157
  type="button"
158
- aria-expanded="true"
158
+ aria-expanded
159
159
  aria-controls="detached-toggle-content"
160
160
  >
161
161
  <span class="pf-v6-c-button__icon pf-m-start">
@@ -201,7 +201,7 @@ cssPrefix: pf-v6-c-expandable-section
201
201
  <button
202
202
  class="pf-v6-c-button pf-m-inline pf-m-link"
203
203
  type="button"
204
- aria-expanded="true"
204
+ aria-expanded
205
205
  >
206
206
  <span class="pf-v6-c-button__text">Show less</span>
207
207
  </button>
package/docs/components/JumpLinks/examples/JumpLinks.md CHANGED
@@ -513,7 +513,7 @@ cssPrefix: pf-v6-c-jump-links
513
513
  <button
514
514
  class="pf-v6-c-button pf-m-plain"
515
515
  type="button"
516
- aria-expanded="true"
516
+ aria-expanded
517
517
  aria-label="Toggle jump links"
518
518
  >
519
519
  <span class="pf-v6-c-button__icon pf-m-start">
package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md CHANGED
@@ -346,11 +346,7 @@ cssPrefix: pf-v6-c-multiple-file-upload
346
346
  <div class="pf-v6-c-multiple-file-upload__status">
347
347
  <div class="pf-v6-c-expandable-section pf-m-expanded">
348
348
  <div class="pf-v6-c-expandable-section__toggle">
349
- <button
350
- class="pf-v6-c-button pf-m-link"
351
- type="button"
352
- aria-expanded="true"
353
- >
349
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
354
350
  <span class="pf-v6-c-button__icon pf-m-start">
355
351
  <span class="pf-v6-c-expandable-section__toggle-icon">
356
352
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -557,11 +553,7 @@ cssPrefix: pf-v6-c-multiple-file-upload
557
553
  <div class="pf-v6-c-multiple-file-upload__status">
558
554
  <div class="pf-v6-c-expandable-section pf-m-expanded">
559
555
  <div class="pf-v6-c-expandable-section__toggle">
560
- <button
561
- class="pf-v6-c-button pf-m-link"
562
- type="button"
563
- aria-expanded="true"
564
- >
556
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
565
557
  <span class="pf-v6-c-button__icon pf-m-start">
566
558
  <span class="pf-v6-c-expandable-section__toggle-icon">
567
559
  <i class="fas fa-angle-right" aria-hidden="true"></i>
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.30",
4
+ "version": "6.3.0-prerelease.31",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -19707,9 +19707,13 @@ ul.pf-v6-c-list {
19707
19707
  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
19708
19708
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
19709
19709
  --pf-v6-c-page__sidebar--BoxShadow: none;
19710
- --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
19711
- --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
19710
+ --pf-v6-c-page__sidebar--TransitionProperty: opacity;
19711
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
19712
+ --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
19712
19713
  --pf-v6-c-page__sidebar--TranslateX: -100%;
19714
+ --pf-v6-c-page__sidebar--Opacity: 0;
19715
+ --pf-v6-c-page__sidebar--m-expanded--Opacity: 1;
19716
+ --pf-v6-c-page__sidebar--xl--Opacity: 1;
19713
19717
  --pf-v6-c-page__sidebar--TranslateZ: 0;
19714
19718
  --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
19715
19719
  --pf-v6-c-page__sidebar--xl--TranslateX: 0;
@@ -19787,9 +19791,17 @@ ul.pf-v6-c-list {
19787
19791
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
19788
19792
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
19789
19793
  }
19794
+ @media screen and (prefers-reduced-motion: no-preference) {
19795
+ .pf-v6-c-page {
19796
+ --pf-v6-c-page__sidebar--Opacity: 1;
19797
+ --pf-v6-c-page__sidebar--TransitionProperty: transform;
19798
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
19799
+ }
19800
+ }
19790
19801
  @media screen and (min-width: 75rem) {
19791
19802
  .pf-v6-c-page {
19792
19803
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
19804
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
19793
19805
  }
19794
19806
  }
19795
19807
 
@@ -19883,7 +19895,8 @@ ul.pf-v6-c-list {
19883
19895
  overflow-y: auto;
19884
19896
  -webkit-overflow-scrolling: touch;
19885
19897
  background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
19886
- transition: transform var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
19898
+ opacity: var(--pf-v6-c-page__sidebar--Opacity);
19899
+ transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
19887
19900
  transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
19888
19901
  }
19889
19902
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__sidebar {
@@ -19892,6 +19905,7 @@ ul.pf-v6-c-list {
19892
19905
 
19893
19906
  .pf-v6-c-page__sidebar.pf-m-expanded {
19894
19907
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--m-expanded--TranslateX);
19908
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--m-expanded--Opacity);
19895
19909
  box-shadow: var(--pf-v6-c-page__sidebar--BoxShadow);
19896
19910
  }
19897
19911
  @media screen and (min-width: 75rem) {
package/patternfly.css CHANGED
@@ -19843,9 +19843,13 @@ ul.pf-v6-c-list {
19843
19843
  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
19844
19844
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
19845
19845
  --pf-v6-c-page__sidebar--BoxShadow: none;
19846
- --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
19847
- --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
19846
+ --pf-v6-c-page__sidebar--TransitionProperty: opacity;
19847
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
19848
+ --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
19848
19849
  --pf-v6-c-page__sidebar--TranslateX: -100%;
19850
+ --pf-v6-c-page__sidebar--Opacity: 0;
19851
+ --pf-v6-c-page__sidebar--m-expanded--Opacity: 1;
19852
+ --pf-v6-c-page__sidebar--xl--Opacity: 1;
19849
19853
  --pf-v6-c-page__sidebar--TranslateZ: 0;
19850
19854
  --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
19851
19855
  --pf-v6-c-page__sidebar--xl--TranslateX: 0;
@@ -19923,9 +19927,17 @@ ul.pf-v6-c-list {
19923
19927
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
19924
19928
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
19925
19929
  }
19930
+ @media screen and (prefers-reduced-motion: no-preference) {
19931
+ .pf-v6-c-page {
19932
+ --pf-v6-c-page__sidebar--Opacity: 1;
19933
+ --pf-v6-c-page__sidebar--TransitionProperty: transform;
19934
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
19935
+ }
19936
+ }
19926
19937
  @media screen and (min-width: 75rem) {
19927
19938
  .pf-v6-c-page {
19928
19939
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
19940
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
19929
19941
  }
19930
19942
  }
19931
19943
 
@@ -20019,7 +20031,8 @@ ul.pf-v6-c-list {
20019
20031
  overflow-y: auto;
20020
20032
  -webkit-overflow-scrolling: touch;
20021
20033
  background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
20022
- transition: transform var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
20034
+ opacity: var(--pf-v6-c-page__sidebar--Opacity);
20035
+ transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
20023
20036
  transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
20024
20037
  }
20025
20038
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__sidebar {
@@ -20028,6 +20041,7 @@ ul.pf-v6-c-list {
20028
20041
 
20029
20042
  .pf-v6-c-page__sidebar.pf-m-expanded {
20030
20043
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--m-expanded--TranslateX);
20044
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--m-expanded--Opacity);
20031
20045
  box-shadow: var(--pf-v6-c-page__sidebar--BoxShadow);
20032
20046
  }
20033
20047
  @media screen and (min-width: 75rem) {