@patternfly/patternfly 6.3.0-prerelease.2 → 6.3.0-prerelease.3

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/Drawer/drawer.css +28 -14
  2. package/components/Drawer/drawer.scss +28 -9
  3. package/components/_index.css +28 -14
  4. package/package.json +2 -2
  5. package/patternfly-no-globals.css +28 -14
  6. package/patternfly.css +28 -14
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Drawer/drawer.css CHANGED
@@ -15,9 +15,15 @@
15
15
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
16
16
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
17
17
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
19
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
20
+ --pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
18
21
  --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
19
- --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
20
- --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
22
+ --pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
23
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
24
+ --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
25
+ --pf-v6-c-drawer__panel--Opacity: 0;
26
+ --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
21
27
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
22
28
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
23
29
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -107,6 +113,17 @@
107
113
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
108
114
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
109
115
  }
116
+ @media screen and (prefers-reduced-motion: no-preference) {
117
+ .pf-v6-c-drawer {
118
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
119
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
120
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
121
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
122
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
123
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
124
+ --pf-v6-c-drawer__panel--Opacity: 1;
125
+ }
126
+ }
110
127
  @media screen and (min-width: 75rem) {
111
128
  .pf-v6-c-drawer {
112
129
  --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
@@ -154,8 +171,13 @@
154
171
  .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
155
172
  flex-direction: column;
156
173
  }
174
+ .pf-v6-c-drawer.pf-m-expanded {
175
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
176
+ }
157
177
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
158
178
  transform: translateX(-100%);
179
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
180
+ visibility: visible;
159
181
  }
160
182
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
161
183
  transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
@@ -228,8 +250,11 @@
228
250
  order: 1;
229
251
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
230
252
  overflow: auto;
253
+ visibility: hidden;
231
254
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
232
255
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
256
+ opacity: var(--pf-v6-c-drawer__panel--Opacity);
257
+ transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
233
258
  transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
234
259
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
235
260
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
@@ -286,17 +311,6 @@
286
311
  padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
287
312
  }
288
313
 
289
- @keyframes pf-remove-tab-focus {
290
- to {
291
- visibility: hidden;
292
- }
293
- }
294
- .pf-v6-c-drawer__panel[hidden] {
295
- animation-name: pf-remove-tab-focus;
296
- animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
297
- animation-fill-mode: forwards;
298
- }
299
-
300
314
  .pf-v6-c-drawer__head {
301
315
  display: grid;
302
316
  grid-template-columns: auto;
@@ -404,7 +418,7 @@
404
418
  .pf-v6-c-drawer {
405
419
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
406
420
  }
407
- .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
421
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
408
422
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
409
423
  }
410
424
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
package/components/Drawer/drawer.scss CHANGED
@@ -27,9 +27,15 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
27
27
  --#{$drawer}__panel--RowGap: var(--pf-t--global--spacer--sm);
28
28
  --#{$drawer}__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
29
29
  --#{$drawer}__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
30
+ --#{$drawer}__panel--TransitionDelay: 0s, var(--#{$drawer}__panel--TransitionDelay--focus), var(--#{$drawer}__panel--TransitionDelay--focus);
31
+ --#{$drawer}__panel--TransitionDelay--focus: var(--#{$drawer}__panel--TransitionDuration--fade);
32
+ --#{$drawer}__panel--TransitionDelay--expand--focus: 0s; // on expand, transition visible immediately
30
33
  --#{$drawer}__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
31
- --#{$drawer}__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
32
- --#{$drawer}__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
34
+ --#{$drawer}__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
35
+ --#{$drawer}__panel--TransitionDuration: var(--#{$drawer}__panel--TransitionDuration--fade), 0s, 0s;
36
+ --#{$drawer}__panel--TransitionProperty: opacity, visibility, transform; // by default, fade the drawer
37
+ --#{$drawer}__panel--Opacity: 0;
38
+ --#{$drawer}--m-expanded__panel--Opacity: 1;
33
39
  --#{$drawer}__panel--FlexBasis: 100%;
34
40
  --#{$drawer}__panel--md--FlexBasis--min: #{pf-size-prem(24px)};
35
41
  --#{$drawer}__panel--md--FlexBasis: 50%;
@@ -46,6 +52,16 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
46
52
  --#{$drawer}--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: #{pf-size-prem(24px)};
47
53
  --#{$drawer}--m-panel-bottom__panel--m-resizable--MinHeight: #{pf-size-prem(24px)};
48
54
 
55
+ @media screen and (prefers-reduced-motion: no-preference) {
56
+ --#{$drawer}__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
57
+ --#{$drawer}__panel--TransitionDelay--focus: var(--#{$drawer}__panel--TransitionDuration--slide);
58
+ --#{$drawer}__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--#{$drawer}__panel--TransitionDelay--focus);
59
+ --#{$drawer}__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
60
+ --#{$drawer}__panel--TransitionDuration: 0s, var(--#{$drawer}__panel--TransitionDuration--slide), 0s, 0s, 0s;
61
+ --#{$drawer}__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility; // with no preference, slide the panel
62
+ --#{$drawer}__panel--Opacity: 1;
63
+ }
64
+
49
65
  // Drawer panel head
50
66
  --#{$drawer}__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
51
67
  --#{$drawer}__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -205,12 +221,18 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
205
221
  // Expanded
206
222
  // stylelint-disable selector-max-class
207
223
  &.pf-m-expanded {
224
+ --#{$drawer}__panel--TransitionDelay--focus: var(--#{$drawer}__panel--TransitionDelay--expand--focus);
225
+
208
226
  > .#{$drawer}__main > .#{$drawer}__panel {
209
227
  @include pf-v6-bidirectional-style(
210
228
  $prop: transform,
211
229
  $ltr-val: translateX(-100%),
212
230
  $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)}),
213
231
  );
232
+
233
+ --#{$drawer}__panel--Opacity: var(--#{$drawer}--m-expanded__panel--Opacity);
234
+
235
+ visibility: visible;
214
236
  }
215
237
 
216
238
  &.pf-m-panel-left > .#{$drawer}__main > .#{$drawer}__panel {
@@ -297,8 +319,11 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
297
319
  order: 1;
298
320
  max-height: var(--#{$drawer}__panel--MaxHeight);
299
321
  overflow: auto;
322
+ visibility: hidden; // hidden by default
300
323
  background-color: var(--#{$drawer}__panel--BackgroundColor);
301
324
  box-shadow: var(--#{$drawer}__panel--BoxShadow);
325
+ opacity: var(--#{$drawer}__panel--Opacity);
326
+ transition-delay: var(--#{$drawer}__panel--TransitionDelay);
302
327
  transition-timing-function: var(--#{$drawer}__panel--TransitionTimingFunction);
303
328
  transition-duration: var(--#{$drawer}__panel--TransitionDuration);
304
329
  transition-property: var(--#{$drawer}__panel--TransitionProperty);
@@ -360,9 +385,6 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
360
385
  padding-block-end: var(--#{$drawer}__panel--PaddingBlockEnd);
361
386
  }
362
387
 
363
- // Remove tab focus
364
- @include pf-v6-animate-remove-tab-focus(".#{$drawer}__panel", var(--#{$drawer}__panel--TransitionDuration));
365
-
366
388
  // Panel head
367
389
  .#{$drawer}__head {
368
390
  display: grid;
@@ -491,9 +513,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
491
513
  .#{$drawer} {
492
514
  min-width: var(--#{$drawer}__panel--MinWidth);
493
515
 
494
- // stylelint-disable selector-max-class
495
- // Expanded
496
- &.pf-m-expanded > .#{$drawer}__main {
516
+ > .#{$drawer}__main {
497
517
  > .#{$drawer}__panel {
498
518
  box-shadow: var(--#{$drawer}--m-expanded__panel--BoxShadow);
499
519
  }
@@ -618,7 +638,6 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
618
638
  .#{$drawer}.pf-m-panel-left > .#{$drawer}__main > .#{$drawer}__panel.pf-m-no-border {
619
639
  --#{$drawer}--m-expanded__panel--BoxShadow: none;
620
640
  }
621
- // stylelint-enable
622
641
 
623
642
  .#{$drawer}__splitter {
624
643
  display: block;
package/components/_index.css CHANGED
@@ -5307,9 +5307,15 @@ ul) {
5307
5307
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
5308
5308
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5309
5309
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5310
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
5311
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
5312
+ --pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
5310
5313
  --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
5311
- --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
5312
- --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
5314
+ --pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
5315
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
5316
+ --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
5317
+ --pf-v6-c-drawer__panel--Opacity: 0;
5318
+ --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
5313
5319
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
5314
5320
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
5315
5321
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -5399,6 +5405,17 @@ ul) {
5399
5405
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
5400
5406
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
5401
5407
  }
5408
+ @media screen and (prefers-reduced-motion: no-preference) {
5409
+ .pf-v6-c-drawer {
5410
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
5411
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
5412
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
5413
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
5414
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
5415
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
5416
+ --pf-v6-c-drawer__panel--Opacity: 1;
5417
+ }
5418
+ }
5402
5419
  @media screen and (min-width: 75rem) {
5403
5420
  .pf-v6-c-drawer {
5404
5421
  --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
@@ -5446,8 +5463,13 @@ ul) {
5446
5463
  .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
5447
5464
  flex-direction: column;
5448
5465
  }
5466
+ .pf-v6-c-drawer.pf-m-expanded {
5467
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
5468
+ }
5449
5469
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5450
5470
  transform: translateX(-100%);
5471
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
5472
+ visibility: visible;
5451
5473
  }
5452
5474
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5453
5475
  transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
@@ -5520,8 +5542,11 @@ ul) {
5520
5542
  order: 1;
5521
5543
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
5522
5544
  overflow: auto;
5545
+ visibility: hidden;
5523
5546
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
5524
5547
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
5548
+ opacity: var(--pf-v6-c-drawer__panel--Opacity);
5549
+ transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
5525
5550
  transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
5526
5551
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
5527
5552
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
@@ -5578,17 +5603,6 @@ ul) {
5578
5603
  padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
5579
5604
  }
5580
5605
 
5581
- @keyframes pf-remove-tab-focus {
5582
- to {
5583
- visibility: hidden;
5584
- }
5585
- }
5586
- .pf-v6-c-drawer__panel[hidden] {
5587
- animation-name: pf-remove-tab-focus;
5588
- animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
5589
- animation-fill-mode: forwards;
5590
- }
5591
-
5592
5606
  .pf-v6-c-drawer__head {
5593
5607
  display: grid;
5594
5608
  grid-template-columns: auto;
@@ -5696,7 +5710,7 @@ ul) {
5696
5710
  .pf-v6-c-drawer {
5697
5711
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
5698
5712
  }
5699
- .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5713
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5700
5714
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
5701
5715
  }
5702
5716
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
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.2",
4
+ "version": "6.3.0-prerelease.3",
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.8.3",
50
+ "@patternfly/documentation-framework": "6.8.4",
51
51
  "@patternfly/patternfly-a11y": "5.0.0",
52
52
  "@patternfly/react-code-editor": "6.2.0",
53
53
  "@patternfly/react-core": "6.2.0",
package/patternfly-no-globals.css CHANGED
@@ -12769,9 +12769,15 @@ ul) {
12769
12769
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
12770
12770
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12771
12771
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12772
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
12773
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
12774
+ --pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
12772
12775
  --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12773
- --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
12774
- --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
12776
+ --pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
12777
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
12778
+ --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
12779
+ --pf-v6-c-drawer__panel--Opacity: 0;
12780
+ --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
12775
12781
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
12776
12782
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
12777
12783
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -12861,6 +12867,17 @@ ul) {
12861
12867
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
12862
12868
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
12863
12869
  }
12870
+ @media screen and (prefers-reduced-motion: no-preference) {
12871
+ .pf-v6-c-drawer {
12872
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
12873
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
12874
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
12875
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12876
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
12877
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
12878
+ --pf-v6-c-drawer__panel--Opacity: 1;
12879
+ }
12880
+ }
12864
12881
  @media screen and (min-width: 75rem) {
12865
12882
  .pf-v6-c-drawer {
12866
12883
  --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
@@ -12908,8 +12925,13 @@ ul) {
12908
12925
  .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
12909
12926
  flex-direction: column;
12910
12927
  }
12928
+ .pf-v6-c-drawer.pf-m-expanded {
12929
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
12930
+ }
12911
12931
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
12912
12932
  transform: translateX(-100%);
12933
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
12934
+ visibility: visible;
12913
12935
  }
12914
12936
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
12915
12937
  transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
@@ -12982,8 +13004,11 @@ ul) {
12982
13004
  order: 1;
12983
13005
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
12984
13006
  overflow: auto;
13007
+ visibility: hidden;
12985
13008
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
12986
13009
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
13010
+ opacity: var(--pf-v6-c-drawer__panel--Opacity);
13011
+ transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
12987
13012
  transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
12988
13013
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
12989
13014
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
@@ -13040,17 +13065,6 @@ ul) {
13040
13065
  padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
13041
13066
  }
13042
13067
 
13043
- @keyframes pf-remove-tab-focus {
13044
- to {
13045
- visibility: hidden;
13046
- }
13047
- }
13048
- .pf-v6-c-drawer__panel[hidden] {
13049
- animation-name: pf-remove-tab-focus;
13050
- animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
13051
- animation-fill-mode: forwards;
13052
- }
13053
-
13054
13068
  .pf-v6-c-drawer__head {
13055
13069
  display: grid;
13056
13070
  grid-template-columns: auto;
@@ -13158,7 +13172,7 @@ ul) {
13158
13172
  .pf-v6-c-drawer {
13159
13173
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
13160
13174
  }
13161
- .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13175
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13162
13176
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
13163
13177
  }
13164
13178
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
package/patternfly.css CHANGED
@@ -12905,9 +12905,15 @@ ul) {
12905
12905
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
12906
12906
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12907
12907
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12908
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
12909
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
12910
+ --pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
12908
12911
  --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12909
- --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
12910
- --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
12912
+ --pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
12913
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
12914
+ --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
12915
+ --pf-v6-c-drawer__panel--Opacity: 0;
12916
+ --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
12911
12917
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
12912
12918
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
12913
12919
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -12997,6 +13003,17 @@ ul) {
12997
13003
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
12998
13004
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
12999
13005
  }
13006
+ @media screen and (prefers-reduced-motion: no-preference) {
13007
+ .pf-v6-c-drawer {
13008
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
13009
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
13010
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
13011
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
13012
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
13013
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
13014
+ --pf-v6-c-drawer__panel--Opacity: 1;
13015
+ }
13016
+ }
13000
13017
  @media screen and (min-width: 75rem) {
13001
13018
  .pf-v6-c-drawer {
13002
13019
  --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
@@ -13044,8 +13061,13 @@ ul) {
13044
13061
  .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
13045
13062
  flex-direction: column;
13046
13063
  }
13064
+ .pf-v6-c-drawer.pf-m-expanded {
13065
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
13066
+ }
13047
13067
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13048
13068
  transform: translateX(-100%);
13069
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
13070
+ visibility: visible;
13049
13071
  }
13050
13072
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13051
13073
  transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
@@ -13118,8 +13140,11 @@ ul) {
13118
13140
  order: 1;
13119
13141
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
13120
13142
  overflow: auto;
13143
+ visibility: hidden;
13121
13144
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
13122
13145
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
13146
+ opacity: var(--pf-v6-c-drawer__panel--Opacity);
13147
+ transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
13123
13148
  transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
13124
13149
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
13125
13150
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
@@ -13176,17 +13201,6 @@ ul) {
13176
13201
  padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
13177
13202
  }
13178
13203
 
13179
- @keyframes pf-remove-tab-focus {
13180
- to {
13181
- visibility: hidden;
13182
- }
13183
- }
13184
- .pf-v6-c-drawer__panel[hidden] {
13185
- animation-name: pf-remove-tab-focus;
13186
- animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
13187
- animation-fill-mode: forwards;
13188
- }
13189
-
13190
13204
  .pf-v6-c-drawer__head {
13191
13205
  display: grid;
13192
13206
  grid-template-columns: auto;
@@ -13294,7 +13308,7 @@ ul) {
13294
13308
  .pf-v6-c-drawer {
13295
13309
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
13296
13310
  }
13297
- .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13311
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13298
13312
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
13299
13313
  }
13300
13314
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {