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

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 (10) hide show
  1. package/components/Accordion/accordion.css +56 -1
  2. package/components/Accordion/accordion.scss +60 -4
  3. package/components/TreeView/tree-view.css +33 -0
  4. package/components/TreeView/tree-view.scss +36 -2
  5. package/components/_index.css +89 -1
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +89 -1
  8. package/patternfly.css +89 -1
  9. package/patternfly.min.css +1 -1
  10. 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/TreeView/tree-view.css CHANGED
@@ -14,6 +14,17 @@
14
14
  --pf-v6-c-tree-view__node-container--Display: contents;
15
15
  --pf-v6-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
16
16
  --pf-v6-c-tree-view__node-content--Overflow: visible;
17
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: 0s;
18
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
19
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: 0s;
20
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
21
+ --pf-v6-c-tree-view__list--TransitionDuration--slide: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide);
22
+ --pf-v6-c-tree-view__list--TransitionDuration--fade: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade);
23
+ --pf-v6-c-tree-view__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
24
+ --pf-v6-c-tree-view__list--Opacity: 0;
25
+ --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
26
+ --pf-v6-c-tree-view__list--TranslateY: 0;
27
+ --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
17
28
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
18
29
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
19
30
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -29,6 +40,8 @@
29
40
  --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
30
41
  --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
31
42
  --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
43
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
44
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
32
45
  --pf-v6-c-tree-view__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
33
46
  --pf-v6-c-tree-view__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
34
47
  --pf-v6-c-tree-view__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -104,6 +117,13 @@
104
117
  --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
105
118
  --pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) + 0.25rem);
106
119
  }
120
+ @media screen and (prefers-reduced-motion: no-preference) {
121
+ .pf-v6-c-tree-view {
122
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
123
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
124
+ --pf-v6-c-tree-view__list--TranslateY: -.5rem;
125
+ }
126
+ }
107
127
 
108
128
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item {
109
129
  position: relative;
@@ -219,12 +239,20 @@
219
239
  display: inline-block;
220
240
  min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
221
241
  text-align: center;
242
+ transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
222
243
  transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
223
244
  }
224
245
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
225
246
  scale: -1 1;
226
247
  }
227
248
 
249
+ .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
250
+ opacity: var(--pf-v6-c-tree-view__list--Opacity);
251
+ transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
252
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
253
+ transition-property: opacity, translate;
254
+ translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
255
+ }
228
256
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
229
257
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
230
258
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
@@ -233,6 +261,11 @@
233
261
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color);
234
262
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
235
263
  }
264
+ .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
265
+ opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
266
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
267
+ translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
268
+ }
236
269
 
237
270
  .pf-v6-c-tree-view__node,
238
271
  .pf-v6-c-tree-view__node-container {
package/components/TreeView/tree-view.scss CHANGED
@@ -28,6 +28,25 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
28
28
  --#{$tree-view}__node-content--RowGap: var(--pf-t--global--spacer--sm);
29
29
  --#{$tree-view}__node-content--Overflow: visible;
30
30
 
31
+ // List
32
+ --#{$tree-view}__list--TransitionDuration--expand--slide: 0s;
33
+ --#{$tree-view}__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
34
+ --#{$tree-view}__list--TransitionDuration--collapse--slide: 0s;
35
+ --#{$tree-view}__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
36
+ --#{$tree-view}__list--TransitionDuration--slide: var(--#{$tree-view}__list--TransitionDuration--collapse--slide);
37
+ --#{$tree-view}__list--TransitionDuration--fade: var(--#{$tree-view}__list--TransitionDuration--collapse--fade);
38
+ --#{$tree-view}__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
39
+ --#{$tree-view}__list--Opacity: 0;
40
+ --#{$tree-view}--m-expanded__list--Opacity: 1;
41
+ --#{$tree-view}__list--TranslateY: 0;
42
+ --#{$tree-view}--m-expanded__list--TranslateY: 0;
43
+
44
+ @media screen and (prefers-reduced-motion: no-preference) {
45
+ --#{$tree-view}__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
46
+ --#{$tree-view}__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
47
+ --#{$tree-view}__list--TranslateY: -.5rem;
48
+ }
49
+
31
50
  // Nested toggle
32
51
  --#{$tree-view}__list-item__list-item__node-toggle--InsetBlockStart: var(--#{$tree-view}__node--PaddingBlockStart);
33
52
  --#{$tree-view}__list-item__list-item__node-toggle--InsetInlineStart: var(--#{$tree-view}__node--PaddingInlineStart);
@@ -48,6 +67,8 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
48
67
  --#{$tree-view}__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
49
68
  --#{$tree-view}__node-toggle--MarginBlockStart: calc(var(--#{$tree-view}__node-toggle--PaddingBlockStart) * -1);
50
69
  --#{$tree-view}__node-toggle--MarginBlockEnd: calc(var(--#{$tree-view}__node-toggle--PaddingBlockStart) * -1);
70
+ --#{$tree-view}__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
71
+ --#{$tree-view}__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
51
72
 
52
73
  // Check
53
74
  --#{$tree-view}__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -330,11 +351,19 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
330
351
  display: inline-block;
331
352
  min-width: var(--#{$tree-view}__node-toggle-icon--MinWidth);
332
353
  text-align: center;
354
+ transition: transform var(--#{$tree-view}__node-toggle-icon--TransitionDuration) var(--#{$tree-view}__node-toggle-icon--TransitionTimingFunction);
333
355
  transform: rotate(var(--#{$tree-view}__node-toggle-icon--Rotate));
334
356
  }
335
357
 
336
- // stylelint-disable
337
358
  .#{$tree-view}__list-item {
359
+ .#{$tree-view}__list {
360
+ opacity: var(--#{$tree-view}__list--Opacity);
361
+ transition-timing-function: var(--#{$tree-view}__list--TransitionTimingFunction);
362
+ transition-duration: var(--#{$tree-view}__list--TransitionDuration--fade), var(--#{$tree-view}__list--TransitionDuration--slide);
363
+ transition-property: opacity, translate;
364
+ translate: 0 var(--#{$tree-view}__list--TranslateY);
365
+ }
366
+
338
367
  .#{$tree-view}__list-item {
339
368
  --#{$tree-view}__node-toggle-icon--Rotate: var(--#{$tree-view}__node-toggle-icon--base--Rotate); // reset nested toggle icon rotate
340
369
  --#{$tree-view}__node-toggle--Color: var(--#{$tree-view}__node-toggle--Color--base); // reset nested toggle color
@@ -343,9 +372,14 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
343
372
  &.pf-m-expanded {
344
373
  --#{$tree-view}__node-toggle--Color: var(--#{$tree-view}__list-item--m-expanded__node-toggle--Color);
345
374
  --#{$tree-view}__node-toggle-icon--Rotate: var(--#{$tree-view}__list-item--m-expanded__node-toggle-icon--Rotate);
375
+
376
+ > .#{$tree-view}__list {
377
+ opacity: var(--#{$tree-view}--m-expanded__list--Opacity);
378
+ transition-duration: var(--#{$tree-view}__list--TransitionDuration--expand--fade), var(--#{$tree-view}__list--TransitionDuration--expand--slide);
379
+ translate: 0 var(--#{$tree-view}--m-expanded__list--TranslateY);
380
+ }
346
381
  }
347
382
  }
348
- // stylelint-enable
349
383
 
350
384
  .#{$tree-view}__node,
351
385
  .#{$tree-view}__node-container {
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);
@@ -21996,6 +22051,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21996
22051
  --pf-v6-c-tree-view__node-container--Display: contents;
21997
22052
  --pf-v6-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
21998
22053
  --pf-v6-c-tree-view__node-content--Overflow: visible;
22054
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: 0s;
22055
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
22056
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: 0s;
22057
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
22058
+ --pf-v6-c-tree-view__list--TransitionDuration--slide: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide);
22059
+ --pf-v6-c-tree-view__list--TransitionDuration--fade: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade);
22060
+ --pf-v6-c-tree-view__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22061
+ --pf-v6-c-tree-view__list--Opacity: 0;
22062
+ --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
22063
+ --pf-v6-c-tree-view__list--TranslateY: 0;
22064
+ --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
21999
22065
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
22000
22066
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
22001
22067
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -22011,6 +22077,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22011
22077
  --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
22012
22078
  --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
22013
22079
  --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
22080
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
22081
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22014
22082
  --pf-v6-c-tree-view__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
22015
22083
  --pf-v6-c-tree-view__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
22016
22084
  --pf-v6-c-tree-view__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -22086,6 +22154,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22086
22154
  --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
22087
22155
  --pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) + 0.25rem);
22088
22156
  }
22157
+ @media screen and (prefers-reduced-motion: no-preference) {
22158
+ .pf-v6-c-tree-view {
22159
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
22160
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
22161
+ --pf-v6-c-tree-view__list--TranslateY: -.5rem;
22162
+ }
22163
+ }
22089
22164
 
22090
22165
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item {
22091
22166
  position: relative;
@@ -22201,12 +22276,20 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22201
22276
  display: inline-block;
22202
22277
  min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
22203
22278
  text-align: center;
22279
+ transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
22204
22280
  transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
22205
22281
  }
22206
22282
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
22207
22283
  scale: -1 1;
22208
22284
  }
22209
22285
 
22286
+ .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
22287
+ opacity: var(--pf-v6-c-tree-view__list--Opacity);
22288
+ transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
22289
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
22290
+ transition-property: opacity, translate;
22291
+ translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
22292
+ }
22210
22293
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
22211
22294
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
22212
22295
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
@@ -22215,6 +22298,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22215
22298
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color);
22216
22299
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
22217
22300
  }
22301
+ .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
22302
+ opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
22303
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
22304
+ translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
22305
+ }
22218
22306
 
22219
22307
  .pf-v6-c-tree-view__node,
22220
22308
  .pf-v6-c-tree-view__node-container {
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.13",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {