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

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/Accordion/accordion.css +56 -1
  2. package/components/Accordion/accordion.scss +60 -4
  3. package/components/_index.css +56 -1
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +56 -1
  6. package/patternfly.css +56 -1
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Accordion/accordion.css CHANGED
@@ -12,6 +12,7 @@
12
12
  --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
13
13
  --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
14
14
  --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
15
+ --pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
15
16
  --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
16
17
  --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
17
18
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -29,6 +30,24 @@
29
30
  --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
30
31
  --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
31
32
  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
33
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
34
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
35
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
36
+ --pf-v6-c-accordion__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
37
+ --pf-v6-c-accordion__item--before--Opacity: 0;
38
+ --pf-v6-c-accordion__item--m-expanded--before--Opacity: 1;
39
+ --pf-v6-c-accordion__item--m-expanded--before--TranslateY: 0;
40
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: 0s;
41
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
42
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: 0s;
43
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
44
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide);
45
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade);
46
+ --pf-v6-c-accordion__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
47
+ --pf-v6-c-accordion__expandable-content--Opacity: 0;
48
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
49
+ --pf-v6-c-accordion__expandable-content--TranslateY: 0;
50
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
32
51
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
33
52
  --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
34
53
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -48,6 +67,16 @@
48
67
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
49
68
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
50
69
  }
70
+ @media screen and (prefers-reduced-motion: no-preference) {
71
+ .pf-v6-c-accordion {
72
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
73
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
74
+ --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
75
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
76
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
77
+ --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
78
+ }
79
+ }
51
80
 
52
81
  .pf-v6-c-accordion {
53
82
  display: flex;
@@ -81,18 +110,39 @@
81
110
  }
82
111
 
83
112
  .pf-v6-c-accordion__item {
113
+ position: relative;
114
+ }
115
+ .pf-v6-c-accordion__item::before {
116
+ position: absolute;
117
+ inset: 0;
118
+ pointer-events: none;
119
+ content: "";
120
+ background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
84
121
  border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
122
+ opacity: var(--pf-v6-c-accordion__item--before--Opacity);
123
+ transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction);
124
+ transition-duration: var(--pf-v6-c-accordion__item--before--TransitionDuration--fade);
125
+ transition-property: opacity;
85
126
  }
86
127
  .pf-v6-c-accordion__item.pf-m-expanded {
87
128
  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
88
129
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
89
- background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
130
+ --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
131
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
132
+ --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
133
+ --pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
134
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
135
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
136
+ --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
137
+ --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
90
138
  }
91
139
  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
92
140
  transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
93
141
  }
94
142
 
95
143
  .pf-v6-c-accordion__toggle {
144
+ position: relative;
145
+ z-index: var(--pf-v6-c-accordion__toggle--ZIndex);
96
146
  display: flex;
97
147
  column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap);
98
148
  align-items: center;
@@ -136,6 +186,11 @@
136
186
  color: var(--pf-v6-c-accordion__expandable-content--Color);
137
187
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
138
188
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
189
+ opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
190
+ transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
191
+ transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide);
192
+ transition-property: opacity, translate;
193
+ translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
139
194
  }
140
195
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
141
196
  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
package/components/Accordion/accordion.scss CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  // accordion item
9
9
  --#{$accordion}__item--BorderRadius: var(--pf-t--global--border--radius--200);
10
- --#{$accordion}__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
10
+ --#{$accordion}__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); // TODO - remove "m-expanded" in breaking change
11
11
 
12
12
  // accordion toggle
13
13
  --#{$accordion}__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
@@ -19,6 +19,7 @@
19
19
  --#{$accordion}__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
20
20
  --#{$accordion}__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
21
21
  --#{$accordion}__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
22
+ --#{$accordion}__toggle--ZIndex: var(--pf-t--global--z-index--xs);
22
23
 
23
24
  // Accordion toggle toggle-start modifier
24
25
  // This decreases the gap between icon and text, alternative is calc it to * 2 the token or create a new token
@@ -46,6 +47,35 @@
46
47
  --#{$accordion}__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
47
48
  --#{$accordion}__expandable-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
48
49
 
50
+ // expand animation
51
+ --#{$accordion}__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
52
+ --#{$accordion}__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
53
+ --#{$accordion}__item--before--TransitionDuration--fade: var(--#{$accordion}__item--before--TransitionDuration--collapse--fade);
54
+ --#{$accordion}__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
55
+ --#{$accordion}__item--before--Opacity: 0;
56
+ --#{$accordion}__item--m-expanded--before--Opacity: 1;
57
+ --#{$accordion}__item--m-expanded--before--TranslateY: 0;
58
+ --#{$accordion}__expandable-content--TransitionDuration--collapse--slide: 0s;
59
+ --#{$accordion}__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
60
+ --#{$accordion}__expandable-content--TransitionDuration--expand--slide: 0s;
61
+ --#{$accordion}__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
62
+ --#{$accordion}__expandable-content--TransitionDuration--slide: var(--#{$accordion}__expandable-content--TransitionDuration--collapse--slide);
63
+ --#{$accordion}__expandable-content--TransitionDuration--fade: var(--#{$accordion}__expandable-content--TransitionDuration--collapse--fade);
64
+ --#{$accordion}__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
65
+ --#{$accordion}__expandable-content--Opacity: 0;
66
+ --#{$accordion}__item--m-expanded__expandable-content--Opacity: 1;
67
+ --#{$accordion}__expandable-content--TranslateY: 0;
68
+ --#{$accordion}__item--m-expanded__expandable-content--TranslateY: 0;
69
+
70
+ @media screen and (prefers-reduced-motion: no-preference) {
71
+ --#{$accordion}__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
72
+ --#{$accordion}__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
73
+ --#{$accordion}__item--before--TranslateY: -.5rem; // TODO - replace with token
74
+ --#{$accordion}__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
75
+ --#{$accordion}__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
76
+ --#{$accordion}__expandable-content--TranslateY: -.5rem; // TODO - replace with token
77
+ }
78
+
49
79
  // accordion expandable content body
50
80
  --#{$accordion}__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
51
81
  --#{$accordion}__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -107,13 +137,32 @@
107
137
  }
108
138
 
109
139
  .#{$accordion}__item {
110
- border-radius: var(--#{$accordion}__item--BorderRadius);
140
+ position: relative;
141
+
142
+ &::before {
143
+ position: absolute;
144
+ inset: 0;
145
+ pointer-events: none;
146
+ content: "";
147
+ background-color: var(--#{$accordion}__item--m-expanded--BackgroundColor);
148
+ border-radius: var(--#{$accordion}__item--BorderRadius);
149
+ opacity: var(--#{$accordion}__item--before--Opacity);
150
+ transition-timing-function: var(--#{$accordion}__item--before--TransitionTimingFunction);
151
+ transition-duration: var(--#{$accordion}__item--before--TransitionDuration--fade);
152
+ transition-property: opacity;
153
+ }
111
154
 
112
155
  &.pf-m-expanded {
113
156
  --#{$accordion}__toggle--PaddingBlockEnd: var(--#{$accordion}__toggle--m-expanded--PaddingBlockEnd);
114
157
  --#{$accordion}__toggle-text--FontWeight: var(--#{$accordion}__toggle--m-expanded__toggle-text--FontWeight);
115
-
116
- background-color: var(--#{$accordion}__item--m-expanded--BackgroundColor);
158
+ --#{$accordion}__item--before--TransitionDuration--slide: var(--#{$accordion}__item--before--TransitionDuration--expand--slide);
159
+ --#{$accordion}__item--before--TransitionDuration--fade: var(--#{$accordion}__item--before--TransitionDuration--expand--fade);
160
+ --#{$accordion}__item--before--Opacity: var(--#{$accordion}__item--m-expanded--before--Opacity);
161
+ --#{$accordion}__item--before--TranslateY: var(--#{$accordion}__item--m-expanded--before--TranslateY);
162
+ --#{$accordion}__expandable-content--TransitionDuration--slide: var(--#{$accordion}__expandable-content--TransitionDuration--expand--slide);
163
+ --#{$accordion}__expandable-content--TransitionDuration--fade: var(--#{$accordion}__expandable-content--TransitionDuration--expand--fade);
164
+ --#{$accordion}__expandable-content--Opacity: var(--#{$accordion}__item--m-expanded__expandable-content--Opacity);
165
+ --#{$accordion}__expandable-content--TranslateY: var(--#{$accordion}__item--m-expanded__expandable-content--TranslateY);
117
166
 
118
167
  .#{$accordion}__toggle-icon {
119
168
  transform: rotate(var(--#{$accordion}__toggle--m-expanded__toggle-icon--Rotate));
@@ -122,6 +171,8 @@
122
171
  }
123
172
 
124
173
  .#{$accordion}__toggle {
174
+ position: relative;
175
+ z-index: var(--#{$accordion}__toggle--ZIndex);
125
176
  display: flex;
126
177
  column-gap: var(--#{$accordion}__toggle--ColumnGap);
127
178
  align-items: center;
@@ -164,6 +215,11 @@
164
215
  color: var(--#{$accordion}__expandable-content--Color);
165
216
  background-color: var(--#{$accordion}__expandable-content--BackgroundColor);
166
217
  border-radius: var(--#{$accordion}__expandable-content--BorderRadius);
218
+ opacity: var(--#{$accordion}__expandable-content--Opacity);
219
+ transition-timing-function: var(--#{$accordion}__expandable-content--TransitionTimingFunction);
220
+ transition-duration: var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--slide);
221
+ transition-property: opacity, translate;
222
+ translate: 0 var(--#{$accordion}__expandable-content--TranslateY);
167
223
 
168
224
  &.pf-m-fixed {
169
225
  max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
package/components/_index.css CHANGED
@@ -205,6 +205,7 @@
205
205
  --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
206
206
  --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
207
207
  --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
208
+ --pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
208
209
  --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
209
210
  --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
210
211
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -222,6 +223,24 @@
222
223
  --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
223
224
  --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
224
225
  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
226
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
227
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
228
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
229
+ --pf-v6-c-accordion__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
230
+ --pf-v6-c-accordion__item--before--Opacity: 0;
231
+ --pf-v6-c-accordion__item--m-expanded--before--Opacity: 1;
232
+ --pf-v6-c-accordion__item--m-expanded--before--TranslateY: 0;
233
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: 0s;
234
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
235
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: 0s;
236
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
237
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide);
238
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade);
239
+ --pf-v6-c-accordion__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
240
+ --pf-v6-c-accordion__expandable-content--Opacity: 0;
241
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
242
+ --pf-v6-c-accordion__expandable-content--TranslateY: 0;
243
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
225
244
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
226
245
  --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
227
246
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -241,6 +260,16 @@
241
260
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
242
261
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
243
262
  }
263
+ @media screen and (prefers-reduced-motion: no-preference) {
264
+ .pf-v6-c-accordion {
265
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
266
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
267
+ --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
268
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
269
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
270
+ --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
271
+ }
272
+ }
244
273
 
245
274
  .pf-v6-c-accordion {
246
275
  display: flex;
@@ -274,18 +303,39 @@
274
303
  }
275
304
 
276
305
  .pf-v6-c-accordion__item {
306
+ position: relative;
307
+ }
308
+ .pf-v6-c-accordion__item::before {
309
+ position: absolute;
310
+ inset: 0;
311
+ pointer-events: none;
312
+ content: "";
313
+ background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
277
314
  border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
315
+ opacity: var(--pf-v6-c-accordion__item--before--Opacity);
316
+ transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction);
317
+ transition-duration: var(--pf-v6-c-accordion__item--before--TransitionDuration--fade);
318
+ transition-property: opacity;
278
319
  }
279
320
  .pf-v6-c-accordion__item.pf-m-expanded {
280
321
  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
281
322
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
282
- background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
323
+ --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
324
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
325
+ --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
326
+ --pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
327
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
328
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
329
+ --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
330
+ --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
283
331
  }
284
332
  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
285
333
  transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
286
334
  }
287
335
 
288
336
  .pf-v6-c-accordion__toggle {
337
+ position: relative;
338
+ z-index: var(--pf-v6-c-accordion__toggle--ZIndex);
289
339
  display: flex;
290
340
  column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap);
291
341
  align-items: center;
@@ -329,6 +379,11 @@
329
379
  color: var(--pf-v6-c-accordion__expandable-content--Color);
330
380
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
331
381
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
382
+ opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
383
+ transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
384
+ transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide);
385
+ transition-property: opacity, translate;
386
+ translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
332
387
  }
333
388
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
334
389
  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
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.11",
4
+ "version": "6.3.0-prerelease.12",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -7667,6 +7667,7 @@
7667
7667
  --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7668
7668
  --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
7669
7669
  --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
7670
+ --pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
7670
7671
  --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
7671
7672
  --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
7672
7673
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -7684,6 +7685,24 @@
7684
7685
  --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
7685
7686
  --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
7686
7687
  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
7688
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
7689
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
7690
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
7691
+ --pf-v6-c-accordion__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7692
+ --pf-v6-c-accordion__item--before--Opacity: 0;
7693
+ --pf-v6-c-accordion__item--m-expanded--before--Opacity: 1;
7694
+ --pf-v6-c-accordion__item--m-expanded--before--TranslateY: 0;
7695
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: 0s;
7696
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
7697
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: 0s;
7698
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
7699
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide);
7700
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade);
7701
+ --pf-v6-c-accordion__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7702
+ --pf-v6-c-accordion__expandable-content--Opacity: 0;
7703
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
7704
+ --pf-v6-c-accordion__expandable-content--TranslateY: 0;
7705
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
7687
7706
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7688
7707
  --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7689
7708
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -7703,6 +7722,16 @@
7703
7722
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
7704
7723
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
7705
7724
  }
7725
+ @media screen and (prefers-reduced-motion: no-preference) {
7726
+ .pf-v6-c-accordion {
7727
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
7728
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
7729
+ --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
7730
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
7731
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
7732
+ --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
7733
+ }
7734
+ }
7706
7735
 
7707
7736
  .pf-v6-c-accordion {
7708
7737
  display: flex;
@@ -7736,18 +7765,39 @@
7736
7765
  }
7737
7766
 
7738
7767
  .pf-v6-c-accordion__item {
7768
+ position: relative;
7769
+ }
7770
+ .pf-v6-c-accordion__item::before {
7771
+ position: absolute;
7772
+ inset: 0;
7773
+ pointer-events: none;
7774
+ content: "";
7775
+ background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
7739
7776
  border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
7777
+ opacity: var(--pf-v6-c-accordion__item--before--Opacity);
7778
+ transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction);
7779
+ transition-duration: var(--pf-v6-c-accordion__item--before--TransitionDuration--fade);
7780
+ transition-property: opacity;
7740
7781
  }
7741
7782
  .pf-v6-c-accordion__item.pf-m-expanded {
7742
7783
  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
7743
7784
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
7744
- background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
7785
+ --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
7786
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
7787
+ --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
7788
+ --pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
7789
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
7790
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
7791
+ --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
7792
+ --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
7745
7793
  }
7746
7794
  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
7747
7795
  transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
7748
7796
  }
7749
7797
 
7750
7798
  .pf-v6-c-accordion__toggle {
7799
+ position: relative;
7800
+ z-index: var(--pf-v6-c-accordion__toggle--ZIndex);
7751
7801
  display: flex;
7752
7802
  column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap);
7753
7803
  align-items: center;
@@ -7791,6 +7841,11 @@
7791
7841
  color: var(--pf-v6-c-accordion__expandable-content--Color);
7792
7842
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
7793
7843
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
7844
+ opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
7845
+ transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
7846
+ transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide);
7847
+ transition-property: opacity, translate;
7848
+ translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
7794
7849
  }
7795
7850
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
7796
7851
  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
package/patternfly.css CHANGED
@@ -7803,6 +7803,7 @@ button) {
7803
7803
  --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7804
7804
  --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
7805
7805
  --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
7806
+ --pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
7806
7807
  --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
7807
7808
  --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
7808
7809
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -7820,6 +7821,24 @@ button) {
7820
7821
  --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
7821
7822
  --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
7822
7823
  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
7824
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
7825
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
7826
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
7827
+ --pf-v6-c-accordion__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7828
+ --pf-v6-c-accordion__item--before--Opacity: 0;
7829
+ --pf-v6-c-accordion__item--m-expanded--before--Opacity: 1;
7830
+ --pf-v6-c-accordion__item--m-expanded--before--TranslateY: 0;
7831
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: 0s;
7832
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
7833
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: 0s;
7834
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
7835
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide);
7836
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade);
7837
+ --pf-v6-c-accordion__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7838
+ --pf-v6-c-accordion__expandable-content--Opacity: 0;
7839
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
7840
+ --pf-v6-c-accordion__expandable-content--TranslateY: 0;
7841
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
7823
7842
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7824
7843
  --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7825
7844
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -7839,6 +7858,16 @@ button) {
7839
7858
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
7840
7859
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
7841
7860
  }
7861
+ @media screen and (prefers-reduced-motion: no-preference) {
7862
+ .pf-v6-c-accordion {
7863
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
7864
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
7865
+ --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
7866
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
7867
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
7868
+ --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
7869
+ }
7870
+ }
7842
7871
 
7843
7872
  .pf-v6-c-accordion {
7844
7873
  display: flex;
@@ -7872,18 +7901,39 @@ button) {
7872
7901
  }
7873
7902
 
7874
7903
  .pf-v6-c-accordion__item {
7904
+ position: relative;
7905
+ }
7906
+ .pf-v6-c-accordion__item::before {
7907
+ position: absolute;
7908
+ inset: 0;
7909
+ pointer-events: none;
7910
+ content: "";
7911
+ background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
7875
7912
  border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
7913
+ opacity: var(--pf-v6-c-accordion__item--before--Opacity);
7914
+ transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction);
7915
+ transition-duration: var(--pf-v6-c-accordion__item--before--TransitionDuration--fade);
7916
+ transition-property: opacity;
7876
7917
  }
7877
7918
  .pf-v6-c-accordion__item.pf-m-expanded {
7878
7919
  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
7879
7920
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
7880
- background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
7921
+ --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
7922
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
7923
+ --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
7924
+ --pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
7925
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
7926
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
7927
+ --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
7928
+ --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
7881
7929
  }
7882
7930
  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
7883
7931
  transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
7884
7932
  }
7885
7933
 
7886
7934
  .pf-v6-c-accordion__toggle {
7935
+ position: relative;
7936
+ z-index: var(--pf-v6-c-accordion__toggle--ZIndex);
7887
7937
  display: flex;
7888
7938
  column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap);
7889
7939
  align-items: center;
@@ -7927,6 +7977,11 @@ button) {
7927
7977
  color: var(--pf-v6-c-accordion__expandable-content--Color);
7928
7978
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
7929
7979
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
7980
+ opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
7981
+ transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
7982
+ transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide);
7983
+ transition-property: opacity, translate;
7984
+ translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
7930
7985
  }
7931
7986
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
7932
7987
  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);