@patternfly/patternfly 6.3.0-prerelease.19 → 6.3.0-prerelease.20

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 (11) hide show
  1. package/components/DualListSelector/dual-list-selector.css +36 -0
  2. package/components/DualListSelector/dual-list-selector.scss +43 -0
  3. package/components/ExpandableSection/expandable-section.css +14 -14
  4. package/components/ExpandableSection/expandable-section.scss +15 -14
  5. package/components/_index.css +50 -14
  6. package/docs/components/DualListSelector/examples/DualListSelector.md +518 -0
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +50 -14
  9. package/patternfly.css +50 -14
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/components/DualListSelector/dual-list-selector.css CHANGED
@@ -21,6 +21,17 @@
21
21
  --pf-v6-c-dual-list-selector__menu--MinHeight: 12.5rem;
22
22
  --pf-v6-c-dual-list-selector__menu--MaxHeight: 20rem;
23
23
  --pf-v6-c-dual-list-selector__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
24
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: 0s;
25
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
26
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: 0s;
27
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
28
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--slide: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide);
29
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--fade: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade);
30
+ --pf-v6-c-dual-list-selector__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
31
+ --pf-v6-c-dual-list-selector__list--Opacity: 0;
32
+ --pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
33
+ --pf-v6-c-dual-list-selector__list--TranslateY: 0;
34
+ --pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
24
35
  --pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
25
36
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
26
37
  --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -58,6 +69,13 @@
58
69
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
59
70
  --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
60
71
  }
72
+ @media screen and (prefers-reduced-motion: no-preference) {
73
+ .pf-v6-c-dual-list-selector {
74
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
75
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
76
+ --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
77
+ }
78
+ }
61
79
 
62
80
  .pf-v6-c-dual-list-selector {
63
81
  display: grid;
@@ -153,9 +171,27 @@
153
171
  .pf-v6-c-dual-list-selector__list-item.pf-m-expandable {
154
172
  --pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart);
155
173
  }
174
+ .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expandable > .pf-v6-c-dual-list-selector__list {
175
+ max-height: 0;
176
+ visibility: hidden;
177
+ opacity: var(--pf-v6-c-dual-list-selector__list--Opacity);
178
+ transition-delay: 0s, 0s, var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade);
179
+ transition-timing-function: var(--pf-v6-c-dual-list-selector__list--TransitionTimingFunction);
180
+ transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--slide), 0s, 0s;
181
+ transition-property: opacity, translate, visibility, max-height;
182
+ translate: 0 var(--pf-v6-c-dual-list-selector__list--TranslateY);
183
+ }
156
184
  .pf-v6-c-dual-list-selector__list-item.pf-m-expanded {
157
185
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
158
186
  }
187
+ .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expanded > .pf-v6-c-dual-list-selector__list {
188
+ max-height: 9999px;
189
+ visibility: revert;
190
+ opacity: var(--pf-v6-c-dual-list-selector--m-expanded__list--Opacity);
191
+ transition-delay: 0s;
192
+ transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide), 0s, 0s;
193
+ translate: 0 var(--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY);
194
+ }
159
195
  .pf-v6-c-dual-list-selector__list-item.pf-m-disabled {
160
196
  --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color);
161
197
  --pf-v6-c-dual-list-selector__item-toggle-icon--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color);
package/components/DualListSelector/dual-list-selector.scss CHANGED
@@ -35,6 +35,25 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
35
35
  --#{$dual-list-selector}__menu--MaxHeight: #{pf-size-prem(320px)};
36
36
  --#{$dual-list-selector}__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
37
37
 
38
+ // List
39
+ --#{$dual-list-selector}__list--TransitionDuration--expand--slide: 0s;
40
+ --#{$dual-list-selector}__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
41
+ --#{$dual-list-selector}__list--TransitionDuration--collapse--slide: 0s;
42
+ --#{$dual-list-selector}__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
43
+ --#{$dual-list-selector}__list--TransitionDuration--slide: var(--#{$dual-list-selector}__list--TransitionDuration--collapse--slide);
44
+ --#{$dual-list-selector}__list--TransitionDuration--fade: var(--#{$dual-list-selector}__list--TransitionDuration--collapse--fade);
45
+ --#{$dual-list-selector}__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
46
+ --#{$dual-list-selector}__list--Opacity: 0;
47
+ --#{$dual-list-selector}--m-expanded__list--Opacity: 1;
48
+ --#{$dual-list-selector}__list--TranslateY: 0;
49
+ --#{$dual-list-selector}--m-expanded__list--TranslateY: 0;
50
+
51
+ @media screen and (prefers-reduced-motion: no-preference) {
52
+ --#{$dual-list-selector}__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
53
+ --#{$dual-list-selector}__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
54
+ --#{$dual-list-selector}__list--TranslateY: -.5rem;
55
+ }
56
+
38
57
  // List item
39
58
  --#{$dual-list-selector}__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
40
59
  --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
@@ -199,10 +218,34 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
199
218
 
200
219
  &.pf-m-expandable {
201
220
  --#{$dual-list-selector}__item--PaddingInlineStart: var(--#{$dual-list-selector}__item--m-expandable--PaddingInlineStart);
221
+
222
+ > .#{$dual-list-selector}__list {
223
+ .#{$dual-list-selector}.pf-m-animate-expand & { // TODO - remove opt-in class in a breaking change
224
+ max-height: 0;
225
+ visibility: hidden;
226
+ opacity: var(--#{$dual-list-selector}__list--Opacity);
227
+ transition-delay: 0s, 0s, var(--#{$dual-list-selector}__list--TransitionDuration--fade), var(--#{$dual-list-selector}__list--TransitionDuration--fade);
228
+ transition-timing-function: var(--#{$dual-list-selector}__list--TransitionTimingFunction);
229
+ transition-duration: var(--#{$dual-list-selector}__list--TransitionDuration--fade), var(--#{$dual-list-selector}__list--TransitionDuration--slide), 0s, 0s;
230
+ transition-property: opacity, translate, visibility, max-height;
231
+ translate: 0 var(--#{$dual-list-selector}__list--TranslateY);
232
+ }
233
+ }
202
234
  }
203
235
 
204
236
  &.pf-m-expanded {
205
237
  --#{$dual-list-selector}__item-toggle-icon--Rotate: var(--#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate);
238
+
239
+ > .#{$dual-list-selector}__list {
240
+ .#{$dual-list-selector}.pf-m-animate-expand & {
241
+ max-height: 9999px;
242
+ visibility: revert;
243
+ opacity: var(--#{$dual-list-selector}--m-expanded__list--Opacity);
244
+ transition-delay: 0s;
245
+ transition-duration: var(--#{$dual-list-selector}__list--TransitionDuration--expand--fade), var(--#{$dual-list-selector}__list--TransitionDuration--expand--slide), 0s, 0s;
246
+ translate: 0 var(--#{$dual-list-selector}--m-expanded__list--TranslateY);
247
+ }
248
+ }
206
249
  }
207
250
 
208
251
  &.pf-m-disabled {
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -16,6 +16,7 @@
16
16
  --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
17
17
  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
18
18
  --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
19
+ --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
19
20
  --pf-v6-c-expandable-section__content--Opacity: 0;
20
21
  --pf-v6-c-expandable-section__content--TranslateY: 0;
21
22
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
@@ -47,7 +48,10 @@
47
48
  .pf-v6-c-expandable-section {
48
49
  display: flex;
49
50
  flex-direction: column;
50
- gap: var(--pf-v6-c-expandable-section--Gap);
51
+ gap: 0;
52
+ transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
53
+ transition-duration: 0s;
54
+ transition-property: gap;
51
55
  }
52
56
  .pf-v6-c-expandable-section.pf-m-expanded {
53
57
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
@@ -58,6 +62,10 @@
58
62
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
59
63
  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
60
64
  --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
65
+ --pf-v6-c-expandable-section__content--Visibility: auto;
66
+ --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
67
+ --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
68
+ gap: var(--pf-v6-c-expandable-section--Gap);
61
69
  }
62
70
  .pf-v6-c-expandable-section.pf-m-limit-width {
63
71
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -109,20 +117,12 @@
109
117
  display: revert;
110
118
  }
111
119
  .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
112
- display: none;
120
+ max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
121
+ visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
113
122
  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
123
+ transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
114
124
  transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
115
- transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
116
- transition-property: opacity, translate, display;
117
- transition-behavior: allow-discrete;
125
+ transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), 0s, 0s;
126
+ transition-property: opacity, translate, visibility, max-height;
118
127
  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
119
- }
120
- .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
121
- display: revert;
122
- }
123
- @starting-style {
124
- .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
125
- --pf-v6-c-expandable-section__content--Opacity: 0;
126
- --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
127
- }
128
128
  }
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -20,6 +20,7 @@
20
20
  --#{$expandable-section}__content--TransitionDuration--slide: var(--#{$expandable-section}__content--TransitionDuration--collapse--slide);
21
21
  --#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--collapse--fade);
22
22
  --#{$expandable-section}__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
23
+ --#{$expandable-section}__content--TransitionDelay--hide: var(--#{$expandable-section}__content--TransitionDuration--fade);
23
24
  --#{$expandable-section}__content--Opacity: 0;
24
25
  --#{$expandable-section}__content--TranslateY: 0;
25
26
  --#{$expandable-section}--m-expanded__content--Opacity: 1;
@@ -60,7 +61,10 @@
60
61
  .#{$expandable-section} {
61
62
  display: flex;
62
63
  flex-direction: column;
63
- gap: var(--#{$expandable-section}--Gap);
64
+ gap: 0;
65
+ transition-delay: var(--#{$expandable-section}__content--TransitionDelay--hide);
66
+ transition-duration: 0s;
67
+ transition-property: gap;
64
68
 
65
69
  &.pf-m-expanded {
66
70
  --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
@@ -71,6 +75,11 @@
71
75
  --#{$expandable-section}__content--Opacity: var(--#{$expandable-section}--m-expanded__content--Opacity);
72
76
  --#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expanded__content--TranslateY);
73
77
  --#{$expandable-section}--m-display-lg--TransitionDelay: 0s;
78
+ --#{$expandable-section}__content--Visibility: auto;
79
+ --#{$expandable-section}__content--MaxHeight: 9999px;
80
+ --#{$expandable-section}__content--TransitionDelay--hide: 0s;
81
+
82
+ gap: var(--pf-v6-c-expandable-section--Gap);
74
83
  }
75
84
 
76
85
  &.pf-m-limit-width {
@@ -130,21 +139,13 @@
130
139
  }
131
140
 
132
141
  .#{$expandable-section}:where(:not(.pf-m-truncate)) & {
133
- display: none;
142
+ max-height: var(--#{$expandable-section}__content--MaxHeight, 0);
143
+ visibility: var(--#{$expandable-section}__content--Visibility, hidden);
134
144
  opacity: var(--#{$expandable-section}__content--Opacity);
145
+ transition-delay: 0s, 0s, var(--#{$expandable-section}__content--TransitionDelay--hide, 0s), var(--#{$expandable-section}__content--TransitionDelay--hide, 0s);
135
146
  transition-timing-function: var(--#{$expandable-section}__content--TransitionTimingFunction);
136
- transition-duration: var(--#{$expandable-section}__content--TransitionDuration--fade), var(--#{$expandable-section}__content--TransitionDuration--slide), var(--#{$expandable-section}__content--TransitionDuration--fade);
137
- transition-property: opacity, translate, display;
138
- transition-behavior: allow-discrete;
147
+ transition-duration: var(--#{$expandable-section}__content--TransitionDuration--fade), var(--#{$expandable-section}__content--TransitionDuration--slide), 0s, 0s;
148
+ transition-property: opacity, translate, visibility, max-height;
139
149
  translate: 0 var(--#{$expandable-section}__content--TranslateY);
140
150
  }
141
-
142
- .#{$expandable-section}.pf-m-expanded & {
143
- display: revert;
144
-
145
- @starting-style {
146
- --#{$expandable-section}__content--Opacity: 0;
147
- --#{$expandable-section}__content--TranslateY: -.5rem;
148
- }
149
- }
150
151
  }
package/components/_index.css CHANGED
@@ -4745,6 +4745,17 @@ ul) {
4745
4745
  --pf-v6-c-dual-list-selector__menu--MinHeight: 12.5rem;
4746
4746
  --pf-v6-c-dual-list-selector__menu--MaxHeight: 20rem;
4747
4747
  --pf-v6-c-dual-list-selector__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
4748
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: 0s;
4749
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
4750
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: 0s;
4751
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
4752
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--slide: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide);
4753
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--fade: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade);
4754
+ --pf-v6-c-dual-list-selector__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
4755
+ --pf-v6-c-dual-list-selector__list--Opacity: 0;
4756
+ --pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
4757
+ --pf-v6-c-dual-list-selector__list--TranslateY: 0;
4758
+ --pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
4748
4759
  --pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
4749
4760
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
4750
4761
  --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -4782,6 +4793,13 @@ ul) {
4782
4793
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
4783
4794
  --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
4784
4795
  }
4796
+ @media screen and (prefers-reduced-motion: no-preference) {
4797
+ .pf-v6-c-dual-list-selector {
4798
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
4799
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
4800
+ --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
4801
+ }
4802
+ }
4785
4803
 
4786
4804
  .pf-v6-c-dual-list-selector {
4787
4805
  display: grid;
@@ -4877,9 +4895,27 @@ ul) {
4877
4895
  .pf-v6-c-dual-list-selector__list-item.pf-m-expandable {
4878
4896
  --pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart);
4879
4897
  }
4898
+ .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expandable > .pf-v6-c-dual-list-selector__list {
4899
+ max-height: 0;
4900
+ visibility: hidden;
4901
+ opacity: var(--pf-v6-c-dual-list-selector__list--Opacity);
4902
+ transition-delay: 0s, 0s, var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade);
4903
+ transition-timing-function: var(--pf-v6-c-dual-list-selector__list--TransitionTimingFunction);
4904
+ transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--slide), 0s, 0s;
4905
+ transition-property: opacity, translate, visibility, max-height;
4906
+ translate: 0 var(--pf-v6-c-dual-list-selector__list--TranslateY);
4907
+ }
4880
4908
  .pf-v6-c-dual-list-selector__list-item.pf-m-expanded {
4881
4909
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
4882
4910
  }
4911
+ .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expanded > .pf-v6-c-dual-list-selector__list {
4912
+ max-height: 9999px;
4913
+ visibility: revert;
4914
+ opacity: var(--pf-v6-c-dual-list-selector--m-expanded__list--Opacity);
4915
+ transition-delay: 0s;
4916
+ transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide), 0s, 0s;
4917
+ translate: 0 var(--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY);
4918
+ }
4883
4919
  .pf-v6-c-dual-list-selector__list-item.pf-m-disabled {
4884
4920
  --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color);
4885
4921
  --pf-v6-c-dual-list-selector__item-toggle-icon--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color);
@@ -6422,6 +6458,7 @@ ul) {
6422
6458
  --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
6423
6459
  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
6424
6460
  --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6461
+ --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
6425
6462
  --pf-v6-c-expandable-section__content--Opacity: 0;
6426
6463
  --pf-v6-c-expandable-section__content--TranslateY: 0;
6427
6464
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
@@ -6453,7 +6490,10 @@ ul) {
6453
6490
  .pf-v6-c-expandable-section {
6454
6491
  display: flex;
6455
6492
  flex-direction: column;
6456
- gap: var(--pf-v6-c-expandable-section--Gap);
6493
+ gap: 0;
6494
+ transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
6495
+ transition-duration: 0s;
6496
+ transition-property: gap;
6457
6497
  }
6458
6498
  .pf-v6-c-expandable-section.pf-m-expanded {
6459
6499
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
@@ -6464,6 +6504,10 @@ ul) {
6464
6504
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
6465
6505
  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
6466
6506
  --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
6507
+ --pf-v6-c-expandable-section__content--Visibility: auto;
6508
+ --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
6509
+ --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
6510
+ gap: var(--pf-v6-c-expandable-section--Gap);
6467
6511
  }
6468
6512
  .pf-v6-c-expandable-section.pf-m-limit-width {
6469
6513
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -6515,23 +6559,15 @@ ul) {
6515
6559
  display: revert;
6516
6560
  }
6517
6561
  .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
6518
- display: none;
6562
+ max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
6563
+ visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
6519
6564
  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
6565
+ transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
6520
6566
  transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
6521
- transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
6522
- transition-property: opacity, translate, display;
6523
- transition-behavior: allow-discrete;
6567
+ transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), 0s, 0s;
6568
+ transition-property: opacity, translate, visibility, max-height;
6524
6569
  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
6525
6570
  }
6526
- .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
6527
- display: revert;
6528
- }
6529
- @starting-style {
6530
- .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
6531
- --pf-v6-c-expandable-section__content--Opacity: 0;
6532
- --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
6533
- }
6534
- }
6535
6571
 
6536
6572
  .pf-v6-c-file-upload {
6537
6573
  --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--gap--group--vertical);