@patternfly/patternfly 6.3.0-prerelease.10 → 6.3.0-prerelease.11

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/ExpandableSection/expandable-section.css +30 -0
  2. package/components/ExpandableSection/expandable-section.scss +30 -0
  3. package/components/_index.css +30 -0
  4. package/package.json +2 -2
  5. package/patternfly-no-globals.css +30 -0
  6. package/patternfly.css +30 -0
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -9,6 +9,17 @@
9
9
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
10
10
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
11
11
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
12
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
13
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
14
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
15
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
16
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
17
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
18
+ --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
19
+ --pf-v6-c-expandable-section__content--Opacity: 0;
20
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
21
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
22
+ --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
12
23
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
13
24
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
14
25
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -20,10 +31,18 @@
20
31
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
21
32
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
22
33
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
34
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
23
35
  --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
24
36
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
25
37
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
26
38
  }
39
+ @media screen and (prefers-reduced-motion: no-preference) {
40
+ .pf-v6-c-expandable-section {
41
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
42
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
43
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
44
+ }
45
+ }
27
46
 
28
47
  .pf-v6-c-expandable-section {
29
48
  display: flex;
@@ -34,6 +53,11 @@
34
53
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
35
54
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
36
55
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
56
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
57
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
58
+ --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
59
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
60
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
37
61
  }
38
62
  .pf-v6-c-expandable-section.pf-m-limit-width {
39
63
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -46,6 +70,7 @@
46
70
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
47
71
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
48
72
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
73
+ transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
49
74
  }
50
75
  .pf-v6-c-expandable-section.pf-m-indented {
51
76
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -79,4 +104,9 @@
79
104
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
80
105
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
81
106
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
107
+ opacity: var(--pf-v6-c-expandable-section__content--Opacity);
108
+ transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
109
+ transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
110
+ transition-property: opacity, translate;
111
+ translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
82
112
  }
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -13,6 +13,23 @@
13
13
  --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
14
14
  --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
15
15
  --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
16
+ --#{$expandable-section}__content--TransitionDuration--collapse--slide: 0s;
17
+ --#{$expandable-section}__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
18
+ --#{$expandable-section}__content--TransitionDuration--expand--slide: 0s;
19
+ --#{$expandable-section}__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
20
+ --#{$expandable-section}__content--TransitionDuration--slide: var(--#{$expandable-section}__content--TransitionDuration--collapse--slide);
21
+ --#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--collapse--fade);
22
+ --#{$expandable-section}__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
23
+ --#{$expandable-section}__content--Opacity: 0;
24
+ --#{$expandable-section}--m-expanded__content--Opacity: 1;
25
+ --#{$expandable-section}__content--TranslateY: 0;
26
+ --#{$expandable-section}--m-expanded__content--TranslateY: 0;
27
+
28
+ @media screen and (prefers-reduced-motion: no-preference) {
29
+ --#{$expandable-section}__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
30
+ --#{$expandable-section}__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
31
+ --#{$expandable-section}__content--TranslateY: -.5rem;
32
+ }
16
33
 
17
34
  // Content
18
35
  --#{$expandable-section}__content--MaxWidth: auto;
@@ -30,6 +47,8 @@
30
47
  --#{$expandable-section}--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
31
48
  --#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
32
49
  --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
50
+ --#{$expandable-section}--m-display-lg--TransitionDelay: var(--#{$expandable-section}__content--TransitionDuration--fade);
51
+
33
52
 
34
53
  // Indented
35
54
  --#{$expandable-section}--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--#{$expandable-section}__toggle-icon--MinWidth));
@@ -48,6 +67,11 @@
48
67
  --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
49
68
  --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
50
69
  --#{$expandable-section}--m-display-lg--PaddingBlockEnd: var(--#{$expandable-section}--m-display-lg--m-expanded--PaddingBlockEnd);
70
+ --#{$expandable-section}__content--TransitionDuration--slide: var(--#{$expandable-section}__content--TransitionDuration--expand--slide);
71
+ --#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--expand--fade);
72
+ --#{$expandable-section}__content--Opacity: var(--#{$expandable-section}--m-expanded__content--Opacity);
73
+ --#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expanded__content--TranslateY);
74
+ --#{$expandable-section}--m-display-lg--TransitionDelay: 0s;
51
75
  }
52
76
 
53
77
  &.pf-m-limit-width {
@@ -62,6 +86,7 @@
62
86
  background-color: var(--#{$expandable-section}--m-display-lg--BackgroundColor);
63
87
  border: var(--#{$expandable-section}--m-display-lg--BorderWidth) solid var(--#{$expandable-section}--m-display-lg--BorderColor);
64
88
  border-radius: var(--#{$expandable-section}--m-display-lg--BorderRadius);
89
+ transition: padding-block-end 0s var(--#{$expandable-section}--m-display-lg--TransitionDelay, 0s);
65
90
  }
66
91
 
67
92
  &.pf-m-indented {
@@ -99,4 +124,9 @@
99
124
  max-width: var(--#{$expandable-section}__content--MaxWidth);
100
125
  padding-block-end: var(--#{$expandable-section}__content--PaddingBlockEnd, 0);
101
126
  padding-inline-start: var(--#{$expandable-section}__content--PaddingInlineStart, 0);
127
+ opacity: var(--#{$expandable-section}__content--Opacity);
128
+ transition-timing-function: var(--#{$expandable-section}__content--TransitionTimingFunction);
129
+ transition-duration: var(--#{$expandable-section}__content--TransitionDuration--fade), var(--#{$expandable-section}__content--TransitionDuration--slide);
130
+ transition-property: opacity, translate;
131
+ translate: 0 var(--#{$expandable-section}__content--TranslateY);
102
132
  }
package/components/_index.css CHANGED
@@ -6318,6 +6318,17 @@ ul) {
6318
6318
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
6319
6319
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
6320
6320
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
6321
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
6322
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
6323
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
6324
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
6325
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
6326
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
6327
+ --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6328
+ --pf-v6-c-expandable-section__content--Opacity: 0;
6329
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
6330
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
6331
+ --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
6321
6332
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
6322
6333
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
6323
6334
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -6329,10 +6340,18 @@ ul) {
6329
6340
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
6330
6341
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
6331
6342
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
6343
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
6332
6344
  --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
6333
6345
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
6334
6346
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
6335
6347
  }
6348
+ @media screen and (prefers-reduced-motion: no-preference) {
6349
+ .pf-v6-c-expandable-section {
6350
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
6351
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
6352
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
6353
+ }
6354
+ }
6336
6355
 
6337
6356
  .pf-v6-c-expandable-section {
6338
6357
  display: flex;
@@ -6343,6 +6362,11 @@ ul) {
6343
6362
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
6344
6363
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
6345
6364
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
6365
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
6366
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
6367
+ --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
6368
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
6369
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
6346
6370
  }
6347
6371
  .pf-v6-c-expandable-section.pf-m-limit-width {
6348
6372
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -6355,6 +6379,7 @@ ul) {
6355
6379
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
6356
6380
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
6357
6381
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
6382
+ transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
6358
6383
  }
6359
6384
  .pf-v6-c-expandable-section.pf-m-indented {
6360
6385
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -6388,6 +6413,11 @@ ul) {
6388
6413
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
6389
6414
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
6390
6415
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
6416
+ opacity: var(--pf-v6-c-expandable-section__content--Opacity);
6417
+ transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
6418
+ transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
6419
+ transition-property: opacity, translate;
6420
+ translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
6391
6421
  }
6392
6422
 
6393
6423
  .pf-v6-c-file-upload {
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.10",
4
+ "version": "6.3.0-prerelease.11",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,7 +47,7 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.10.0",
50
+ "@patternfly/documentation-framework": "6.10.1",
51
51
  "@patternfly/patternfly-a11y": "5.1.0",
52
52
  "@patternfly/react-code-editor": "6.2.2",
53
53
  "@patternfly/react-core": "6.2.2",
package/patternfly-no-globals.css CHANGED
@@ -13780,6 +13780,17 @@ ul) {
13780
13780
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
13781
13781
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
13782
13782
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
13783
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
13784
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
13785
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
13786
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
13787
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
13788
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
13789
+ --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
13790
+ --pf-v6-c-expandable-section__content--Opacity: 0;
13791
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
13792
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
13793
+ --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
13783
13794
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
13784
13795
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
13785
13796
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -13791,10 +13802,18 @@ ul) {
13791
13802
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
13792
13803
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
13793
13804
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
13805
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
13794
13806
  --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
13795
13807
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
13796
13808
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
13797
13809
  }
13810
+ @media screen and (prefers-reduced-motion: no-preference) {
13811
+ .pf-v6-c-expandable-section {
13812
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
13813
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
13814
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
13815
+ }
13816
+ }
13798
13817
 
13799
13818
  .pf-v6-c-expandable-section {
13800
13819
  display: flex;
@@ -13805,6 +13824,11 @@ ul) {
13805
13824
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
13806
13825
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
13807
13826
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
13827
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
13828
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
13829
+ --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
13830
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
13831
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
13808
13832
  }
13809
13833
  .pf-v6-c-expandable-section.pf-m-limit-width {
13810
13834
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -13817,6 +13841,7 @@ ul) {
13817
13841
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
13818
13842
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
13819
13843
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
13844
+ transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
13820
13845
  }
13821
13846
  .pf-v6-c-expandable-section.pf-m-indented {
13822
13847
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -13850,6 +13875,11 @@ ul) {
13850
13875
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
13851
13876
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
13852
13877
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
13878
+ opacity: var(--pf-v6-c-expandable-section__content--Opacity);
13879
+ transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
13880
+ transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
13881
+ transition-property: opacity, translate;
13882
+ translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
13853
13883
  }
13854
13884
 
13855
13885
  .pf-v6-c-file-upload {
package/patternfly.css CHANGED
@@ -13916,6 +13916,17 @@ ul) {
13916
13916
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
13917
13917
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
13918
13918
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
13919
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
13920
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
13921
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
13922
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
13923
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
13924
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
13925
+ --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
13926
+ --pf-v6-c-expandable-section__content--Opacity: 0;
13927
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
13928
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
13929
+ --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
13919
13930
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
13920
13931
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
13921
13932
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -13927,10 +13938,18 @@ ul) {
13927
13938
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
13928
13939
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
13929
13940
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
13941
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
13930
13942
  --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
13931
13943
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
13932
13944
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
13933
13945
  }
13946
+ @media screen and (prefers-reduced-motion: no-preference) {
13947
+ .pf-v6-c-expandable-section {
13948
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
13949
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
13950
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
13951
+ }
13952
+ }
13934
13953
 
13935
13954
  .pf-v6-c-expandable-section {
13936
13955
  display: flex;
@@ -13941,6 +13960,11 @@ ul) {
13941
13960
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
13942
13961
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
13943
13962
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
13963
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
13964
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
13965
+ --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
13966
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
13967
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
13944
13968
  }
13945
13969
  .pf-v6-c-expandable-section.pf-m-limit-width {
13946
13970
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -13953,6 +13977,7 @@ ul) {
13953
13977
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
13954
13978
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
13955
13979
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
13980
+ transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
13956
13981
  }
13957
13982
  .pf-v6-c-expandable-section.pf-m-indented {
13958
13983
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -13986,6 +14011,11 @@ ul) {
13986
14011
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
13987
14012
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
13988
14013
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
14014
+ opacity: var(--pf-v6-c-expandable-section__content--Opacity);
14015
+ transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
14016
+ transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
14017
+ transition-property: opacity, translate;
14018
+ translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
13989
14019
  }
13990
14020
 
13991
14021
  .pf-v6-c-file-upload {