@patternfly/patternfly 6.3.0-prerelease.12 → 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 (8) hide show
  1. package/components/TreeView/tree-view.css +33 -0
  2. package/components/TreeView/tree-view.scss +36 -2
  3. package/components/_index.css +33 -0
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +33 -0
  6. package/patternfly.css +33 -0
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
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
@@ -22051,6 +22051,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22051
22051
  --pf-v6-c-tree-view__node-container--Display: contents;
22052
22052
  --pf-v6-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
22053
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;
22054
22065
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
22055
22066
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
22056
22067
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -22066,6 +22077,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22066
22077
  --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
22067
22078
  --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
22068
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);
22069
22082
  --pf-v6-c-tree-view__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
22070
22083
  --pf-v6-c-tree-view__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
22071
22084
  --pf-v6-c-tree-view__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -22141,6 +22154,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22141
22154
  --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
22142
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);
22143
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
+ }
22144
22164
 
22145
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 {
22146
22166
  position: relative;
@@ -22256,12 +22276,20 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22256
22276
  display: inline-block;
22257
22277
  min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
22258
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);
22259
22280
  transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
22260
22281
  }
22261
22282
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
22262
22283
  scale: -1 1;
22263
22284
  }
22264
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
+ }
22265
22293
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
22266
22294
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
22267
22295
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
@@ -22270,6 +22298,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22270
22298
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color);
22271
22299
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
22272
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
+ }
22273
22306
 
22274
22307
  .pf-v6-c-tree-view__node,
22275
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.12",
4
+ "version": "6.3.0-prerelease.13",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -29513,6 +29513,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29513
29513
  --pf-v6-c-tree-view__node-container--Display: contents;
29514
29514
  --pf-v6-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
29515
29515
  --pf-v6-c-tree-view__node-content--Overflow: visible;
29516
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: 0s;
29517
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
29518
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: 0s;
29519
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
29520
+ --pf-v6-c-tree-view__list--TransitionDuration--slide: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide);
29521
+ --pf-v6-c-tree-view__list--TransitionDuration--fade: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade);
29522
+ --pf-v6-c-tree-view__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
29523
+ --pf-v6-c-tree-view__list--Opacity: 0;
29524
+ --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
29525
+ --pf-v6-c-tree-view__list--TranslateY: 0;
29526
+ --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
29516
29527
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
29517
29528
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
29518
29529
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -29528,6 +29539,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29528
29539
  --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
29529
29540
  --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
29530
29541
  --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
29542
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
29543
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
29531
29544
  --pf-v6-c-tree-view__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
29532
29545
  --pf-v6-c-tree-view__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
29533
29546
  --pf-v6-c-tree-view__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -29603,6 +29616,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29603
29616
  --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
29604
29617
  --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);
29605
29618
  }
29619
+ @media screen and (prefers-reduced-motion: no-preference) {
29620
+ .pf-v6-c-tree-view {
29621
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
29622
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
29623
+ --pf-v6-c-tree-view__list--TranslateY: -.5rem;
29624
+ }
29625
+ }
29606
29626
 
29607
29627
  .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 {
29608
29628
  position: relative;
@@ -29718,12 +29738,20 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29718
29738
  display: inline-block;
29719
29739
  min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
29720
29740
  text-align: center;
29741
+ transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
29721
29742
  transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
29722
29743
  }
29723
29744
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
29724
29745
  scale: -1 1;
29725
29746
  }
29726
29747
 
29748
+ .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
29749
+ opacity: var(--pf-v6-c-tree-view__list--Opacity);
29750
+ transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
29751
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
29752
+ transition-property: opacity, translate;
29753
+ translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
29754
+ }
29727
29755
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
29728
29756
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
29729
29757
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
@@ -29732,6 +29760,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29732
29760
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color);
29733
29761
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
29734
29762
  }
29763
+ .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
29764
+ opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
29765
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
29766
+ translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
29767
+ }
29735
29768
 
29736
29769
  .pf-v6-c-tree-view__node,
29737
29770
  .pf-v6-c-tree-view__node-container {
package/patternfly.css CHANGED
@@ -29649,6 +29649,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29649
29649
  --pf-v6-c-tree-view__node-container--Display: contents;
29650
29650
  --pf-v6-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
29651
29651
  --pf-v6-c-tree-view__node-content--Overflow: visible;
29652
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: 0s;
29653
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
29654
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: 0s;
29655
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
29656
+ --pf-v6-c-tree-view__list--TransitionDuration--slide: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide);
29657
+ --pf-v6-c-tree-view__list--TransitionDuration--fade: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade);
29658
+ --pf-v6-c-tree-view__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
29659
+ --pf-v6-c-tree-view__list--Opacity: 0;
29660
+ --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
29661
+ --pf-v6-c-tree-view__list--TranslateY: 0;
29662
+ --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
29652
29663
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
29653
29664
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
29654
29665
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -29664,6 +29675,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29664
29675
  --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
29665
29676
  --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
29666
29677
  --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
29678
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
29679
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
29667
29680
  --pf-v6-c-tree-view__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
29668
29681
  --pf-v6-c-tree-view__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
29669
29682
  --pf-v6-c-tree-view__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -29739,6 +29752,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29739
29752
  --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
29740
29753
  --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);
29741
29754
  }
29755
+ @media screen and (prefers-reduced-motion: no-preference) {
29756
+ .pf-v6-c-tree-view {
29757
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
29758
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
29759
+ --pf-v6-c-tree-view__list--TranslateY: -.5rem;
29760
+ }
29761
+ }
29742
29762
 
29743
29763
  .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 {
29744
29764
  position: relative;
@@ -29854,12 +29874,20 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29854
29874
  display: inline-block;
29855
29875
  min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
29856
29876
  text-align: center;
29877
+ transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
29857
29878
  transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
29858
29879
  }
29859
29880
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
29860
29881
  scale: -1 1;
29861
29882
  }
29862
29883
 
29884
+ .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
29885
+ opacity: var(--pf-v6-c-tree-view__list--Opacity);
29886
+ transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
29887
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
29888
+ transition-property: opacity, translate;
29889
+ translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
29890
+ }
29863
29891
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
29864
29892
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
29865
29893
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
@@ -29868,6 +29896,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29868
29896
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color);
29869
29897
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
29870
29898
  }
29899
+ .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
29900
+ opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
29901
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
29902
+ translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
29903
+ }
29871
29904
 
29872
29905
  .pf-v6-c-tree-view__node,
29873
29906
  .pf-v6-c-tree-view__node-container {