@patternfly/patternfly 6.2.0-prerelease.20 → 6.2.0-prerelease.22

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 (35) hide show
  1. package/components/Accordion/accordion.css +3 -1
  2. package/components/Accordion/accordion.scss +4 -2
  3. package/components/Card/card.css +4 -2
  4. package/components/Card/card.scss +4 -2
  5. package/components/ClipboardCopy/clipboard-copy.css +6 -1
  6. package/components/ClipboardCopy/clipboard-copy.scss +8 -2
  7. package/components/DataList/data-list.css +3 -1
  8. package/components/DataList/data-list.scss +4 -2
  9. package/components/DualListSelector/dual-list-selector.css +4 -2
  10. package/components/DualListSelector/dual-list-selector.scss +4 -2
  11. package/components/ExpandableSection/expandable-section.css +3 -1
  12. package/components/ExpandableSection/expandable-section.scss +4 -2
  13. package/components/Form/form.css +4 -2
  14. package/components/Form/form.scss +4 -2
  15. package/components/JumpLinks/jump-links.css +4 -2
  16. package/components/JumpLinks/jump-links.scss +4 -2
  17. package/components/NotificationDrawer/notification-drawer.css +3 -1
  18. package/components/NotificationDrawer/notification-drawer.scss +4 -2
  19. package/components/Table/table-grid.css +3 -1
  20. package/components/Table/table-grid.scss +4 -2
  21. package/components/Table/table.css +4 -2
  22. package/components/Table/table.scss +4 -2
  23. package/components/Tabs/tabs.css +6 -2
  24. package/components/Tabs/tabs.scss +8 -4
  25. package/components/Toolbar/toolbar.css +4 -2
  26. package/components/Toolbar/toolbar.scss +4 -2
  27. package/components/Wizard/wizard.css +4 -2
  28. package/components/Wizard/wizard.scss +4 -2
  29. package/components/_index.css +55 -22
  30. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +29 -0
  31. package/package.json +1 -1
  32. package/patternfly-no-globals.css +55 -22
  33. package/patternfly.css +55 -22
  34. package/patternfly.min.css +1 -1
  35. package/patternfly.min.css.map +1 -1
package/components/Accordion/accordion.css CHANGED
@@ -17,7 +17,9 @@
17
17
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
18
18
  --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
19
19
  --pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
20
- --pf-v6-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
20
+ --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
21
+ --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
22
+ --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
21
23
  --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
22
24
  --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
23
25
  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
package/components/Accordion/accordion.scss CHANGED
@@ -31,7 +31,9 @@
31
31
  --#{$accordion}--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
32
32
 
33
33
  // accordion toggle icon
34
- --#{$accordion}__toggle-icon--Transition: .2s ease-in 0s;
34
+ --#{$accordion}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
35
+ --#{$accordion}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
36
+ --#{$accordion}__toggle-icon--Transition: transform var(--#{$accordion}__toggle-icon--TransitionDuration) var(--#{$accordion}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
35
37
  --#{$accordion}__toggle--m-expanded__toggle-icon--Rotate: 90deg;
36
38
 
37
39
  // accordion expandable content
@@ -151,7 +153,7 @@
151
153
  .#{$accordion}__toggle-icon {
152
154
  @include pf-v6-mirror-inline-on-rtl;
153
155
 
154
- transition: var(--#{$accordion}__toggle-icon--Transition);
156
+ transition: var(--#{$accordion}__toggle-icon--Transition); // TODO remove shorthand property in breaking change
155
157
  }
156
158
 
157
159
  .#{$accordion}__expandable-content {
package/components/Card/card.css CHANGED
@@ -30,7 +30,7 @@
30
30
  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
31
31
  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
32
32
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
33
- --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
33
+ --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
34
34
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
35
35
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
36
36
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -218,7 +218,9 @@
218
218
 
219
219
  .pf-v6-c-card__header-toggle-icon {
220
220
  display: inline-block;
221
- transition: transform var(--pf-v6-c-card__header-toggle-icon--TransitionDuration) var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
221
+ transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
222
+ transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
223
+ transition-property: transform;
222
224
  }
223
225
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
224
226
  scale: -1 1;
package/components/Card/card.scss CHANGED
@@ -34,7 +34,7 @@
34
34
  --#{$card}__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
35
35
  --#{$card}__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
36
36
  --#{$card}__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
37
- --#{$card}__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
37
+ --#{$card}__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
38
38
  --#{$card}--m-expanded__header-toggle-icon--Rotate: 90deg;
39
39
 
40
40
  // Selectable/Clickable
@@ -305,7 +305,9 @@
305
305
  @include pf-v6-mirror-inline-on-rtl;
306
306
 
307
307
  display: inline-block;
308
- transition: transform var(--#{$card}__header-toggle-icon--TransitionDuration) var(--#{$card}__header-toggle-icon--TransitionTimingFunction);
308
+ transition-timing-function: var(--#{$card}__header-toggle-icon--TransitionTimingFunction);
309
+ transition-duration: var(--#{$card}__header-toggle-icon--TransitionDuration);
310
+ transition-property: transform;
309
311
  }
310
312
 
311
313
  .#{$card}__title-text {
package/components/ClipboardCopy/clipboard-copy.css CHANGED
@@ -1,5 +1,7 @@
1
1
  .pf-v6-c-clipboard-copy {
2
- --pf-v6-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
2
+ --pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
3
+ --pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
4
+ --pf-v6-c-clipboard-copy__toggle-icon--Transition: transform var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration) var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction);
3
5
  --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
4
6
  --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
5
7
  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -39,6 +41,9 @@
39
41
  .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-block {
40
42
  display: block;
41
43
  }
44
+ .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-truncate {
45
+ display: inline-flex;
46
+ }
42
47
 
43
48
  .pf-v6-c-clipboard-copy__group {
44
49
  display: flex;
package/components/ClipboardCopy/clipboard-copy.scss CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
  @include pf-root($clipboard-copy) {
4
4
  // Toggle icon
5
- --#{$clipboard-copy}__toggle-icon--Transition: .2s ease-in 0s;
5
+ --#{$clipboard-copy}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
6
+ --#{$clipboard-copy}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7
+ --#{$clipboard-copy}__toggle-icon--Transition: transform var(--#{$clipboard-copy}__toggle-icon--TransitionDuration) var(--#{$clipboard-copy}__toggle-icon--TransitionTimingFunction); // TODO Remove in breaking change along with shorthand property
6
8
  --#{$clipboard-copy}--m-expanded__toggle-icon--Rotate: 90deg;
7
9
 
8
10
  // Clipboard copy expanded content
@@ -55,6 +57,10 @@
55
57
  &.pf-m-block {
56
58
  display: block;
57
59
  }
60
+
61
+ &.pf-m-truncate {
62
+ display: inline-flex;
63
+ }
58
64
  }
59
65
  }
60
66
 
@@ -67,7 +73,7 @@
67
73
  .#{$clipboard-copy}__toggle-icon {
68
74
  @include pf-v6-mirror-inline-on-rtl;
69
75
 
70
- transition: var(--#{$clipboard-copy}__toggle-icon--Transition);
76
+ transition: var(--#{$clipboard-copy}__toggle-icon--Transition); // TODO remove shorthand in breaking change
71
77
  }
72
78
 
73
79
  .#{$clipboard-copy}__expandable-content {
package/components/DataList/data-list.css CHANGED
@@ -443,7 +443,9 @@
443
443
  --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
444
444
  --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
445
445
  --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
446
- --pf-v6-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
446
+ --pf-v6-c-data-list__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
447
+ --pf-v6-c-data-list__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
448
+ --pf-v6-c-data-list__toggle-icon--Transition: transform var(--pf-v6-c-data-list__toggle-icon--TransitionDuration) var(--pf-v6-c-data-list__toggle-icon--TransitionTimingFunction);
447
449
  --pf-v6-c-data-list__toggle-icon--Rotate: 0;
448
450
  --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
449
451
  --pf-v6-c-data-list__item-draggable-button--BackgroundColor: transparent;
package/components/DataList/data-list.scss CHANGED
@@ -60,7 +60,9 @@
60
60
  --#{$data-list}__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
61
61
  --#{$data-list}__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
62
62
  --#{$data-list}__toggle-icon--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
63
- --#{$data-list}__toggle-icon--Transition: .2s ease-in 0s;
63
+ --#{$data-list}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
64
+ --#{$data-list}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
65
+ --#{$data-list}__toggle-icon--Transition: transform var(--#{$data-list}__toggle-icon--TransitionDuration) var(--#{$data-list}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
64
66
  --#{$data-list}__toggle-icon--Rotate: 0;
65
67
  --#{$data-list}__item--m-expanded__toggle-icon--Rotate: 90deg;
66
68
 
@@ -342,7 +344,7 @@
342
344
 
343
345
  height: var(--#{$data-list}__toggle-icon--Height);
344
346
  pointer-events: none;
345
- transition: var(--#{$data-list}__toggle-icon--Transition);
347
+ transition: var(--#{$data-list}__toggle-icon--Transition); // TODO remove shorthand in breaking change
346
348
  transform: rotate(var(--#{$data-list}__toggle-icon--Rotate));
347
349
  }
348
350
 
package/components/DualListSelector/dual-list-selector.css CHANGED
@@ -53,7 +53,7 @@
53
53
  --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
54
54
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
55
55
  --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
56
- --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
56
+ --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
57
57
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
58
58
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
59
59
  --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
@@ -277,7 +277,9 @@
277
277
  min-width: var(--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth);
278
278
  color: var(--pf-v6-c-dual-list-selector__item-toggle-icon--Color, inherit);
279
279
  text-align: center;
280
- transition: transform var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration) var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
280
+ transition-timing-function: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
281
+ transition-duration: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration);
282
+ transition-property: transform;
281
283
  transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
282
284
  }
283
285
 
package/components/DualListSelector/dual-list-selector.scss CHANGED
@@ -84,7 +84,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
84
84
  // Icon
85
85
  --#{$dual-list-selector}__item-toggle-icon--Rotate: 0;
86
86
  --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
87
- --#{$dual-list-selector}__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
87
+ --#{$dual-list-selector}__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
88
88
  --#{$dual-list-selector}__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
89
89
  --#{$dual-list-selector}__item-toggle-icon--MinWidth: var(--#{$dual-list-selector}__list-item-row--FontSize);
90
90
  --#{$dual-list-selector}__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
@@ -339,7 +339,9 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
339
339
  min-width: var(--#{$dual-list-selector}__item-toggle-icon--MinWidth);
340
340
  color: var(--#{$dual-list-selector}__item-toggle-icon--Color, inherit);
341
341
  text-align: center;
342
- transition: transform var(--#{$dual-list-selector}__item-toggle-icon--TransitionDuration) var(--#{$dual-list-selector}__item-toggle-icon--TransitionTimingFunction);
342
+ transition-timing-function: var(--#{$dual-list-selector}__item-toggle-icon--TransitionTimingFunction);
343
+ transition-duration: var(--#{$dual-list-selector}__item-toggle-icon--TransitionDuration);
344
+ transition-property: transform;
343
345
  transform: rotate(var(--#{$dual-list-selector}__item-toggle-icon--Rotate));
344
346
  }
345
347
 
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -2,7 +2,9 @@
2
2
  --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
3
3
  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
4
4
  --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
5
- --pf-v6-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
5
+ --pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6
+ --pf-v6-c-expandable-section__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
7
+ --pf-v6-c-expandable-section__toggle-icon--Transition: transform var(--pf-v6-c-expandable-section__toggle-icon--TransitionDuration) var(--pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction);
6
8
  --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
7
9
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
8
10
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -6,7 +6,9 @@
6
6
  // Toggle icon
7
7
  --#{$expandable-section}__toggle-icon--MinWidth: 1em;
8
8
  --#{$expandable-section}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
9
- --#{$expandable-section}__toggle-icon--Transition: .2s ease-in 0s;
9
+ --#{$expandable-section}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
10
+ --#{$expandable-section}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
11
+ --#{$expandable-section}__toggle-icon--Transition: transform var(--#{$expandable-section}__toggle-icon--TransitionDuration) var(--#{$expandable-section}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
10
12
  --#{$expandable-section}__toggle-icon--Rotate: 0;
11
13
  --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
12
14
  --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
@@ -85,7 +87,7 @@
85
87
  display: inline-block;
86
88
  min-width: var(--#{$expandable-section}__toggle-icon--MinWidth);
87
89
  color: var(--#{$expandable-section}__toggle-icon--Color);
88
- transition: var(--#{$expandable-section}__toggle-icon--Transition);
90
+ transition: var(--#{$expandable-section}__toggle-icon--Transition); // TODO remove shorthand in breaking change
89
91
  transform: rotate(var(--#{$expandable-section}__toggle-icon--Rotate));
90
92
 
91
93
  &.pf-m-expand-top {
package/components/Form/form.css CHANGED
@@ -56,7 +56,7 @@
56
56
  --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
57
57
  --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
58
58
  --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
59
- --pf-v6-c-form__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
59
+ --pf-v6-c-form__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
60
60
  --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
61
61
  --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
62
62
  --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
@@ -454,7 +454,9 @@
454
454
  display: inline-block;
455
455
  min-width: var(--pf-v6-c-form__field-group-toggle-icon--MinWidth);
456
456
  text-align: center;
457
- transition: transform var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration) var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
457
+ transition-timing-function: var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
458
+ transition-duration: var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration);
459
+ transition-property: transform;
458
460
  transform: rotate(var(--pf-v6-c-form__field-group-toggle-icon--Rotate));
459
461
  }
460
462
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-form__field-group-toggle-icon {
package/components/Form/form.scss CHANGED
@@ -133,7 +133,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
133
133
  --#{$form}__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
134
134
  --#{$form}__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
135
135
  --#{$form}__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
136
- --#{$form}__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
136
+ --#{$form}__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
137
137
  --#{$form}__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
138
138
  --#{$form}__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
139
139
  --#{$form}__field-group-toggle-icon--Rotate: 0;
@@ -408,7 +408,9 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
408
408
  display: inline-block;
409
409
  min-width: var(--#{$form}__field-group-toggle-icon--MinWidth);
410
410
  text-align: center;
411
- transition: transform var(--#{$form}__field-group-toggle-icon--TransitionDuration) var(--#{$form}__field-group-toggle-icon--TransitionTimingFunction);
411
+ transition-timing-function: var(--#{$form}__field-group-toggle-icon--TransitionTimingFunction);
412
+ transition-duration: var(--#{$form}__field-group-toggle-icon--TransitionDuration);
413
+ transition-property: transform;
412
414
  transform: rotate(var(--#{$form}__field-group-toggle-icon--Rotate));
413
415
 
414
416
  @include pf-v6-mirror-inline-on-rtl;
package/components/JumpLinks/jump-links.css CHANGED
@@ -45,7 +45,7 @@
45
45
  --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
46
46
  --pf-v6-c-jump-links__toggle--Display: none;
47
47
  --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
48
- --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
48
+ --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
49
49
  --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
50
50
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
51
51
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
@@ -237,7 +237,9 @@
237
237
  .pf-v6-c-jump-links__toggle-icon {
238
238
  display: inline-block;
239
239
  color: var(--pf-v6-c-jump-links__toggle-icon--Color);
240
- transition: transform var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration) var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
240
+ transition-timing-function: var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
241
+ transition-duration: var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration);
242
+ transition-property: transform;
241
243
  transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
242
244
  }
243
245
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
package/components/JumpLinks/jump-links.scss CHANGED
@@ -62,7 +62,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
62
62
 
63
63
  // toggle icon
64
64
  --#{$jump-links}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
65
- --#{$jump-links}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
65
+ --#{$jump-links}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
66
66
  --#{$jump-links}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
67
67
  --#{$jump-links}__toggle-icon--Rotate: 0;
68
68
  --#{$jump-links}--m-expanded__toggle-icon--Rotate: 90deg;
@@ -218,6 +218,8 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
218
218
 
219
219
  display: inline-block;
220
220
  color: var(--#{$jump-links}__toggle-icon--Color);
221
- transition: transform var(--#{$jump-links}__toggle-icon--TransitionDuration) var(--#{$jump-links}__toggle-icon--TransitionTimingFunction);
221
+ transition-timing-function: var(--#{$jump-links}__toggle-icon--TransitionTimingFunction);
222
+ transition-duration: var(--#{$jump-links}__toggle-icon--TransitionDuration);
223
+ transition-property: transform;
222
224
  transform: rotate(var(--#{$jump-links}__toggle-icon--Rotate));
223
225
  }
package/components/NotificationDrawer/notification-drawer.css CHANGED
@@ -66,7 +66,9 @@
66
66
  --pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd: var(--pf-t--global--spacer--md);
67
67
  --pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
68
68
  --pf-v6-c-notification-drawer__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
69
- --pf-v6-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
69
+ --pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
70
+ --pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
71
+ --pf-v6-c-notification-drawer__group-toggle-icon--Transition: transform var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration) var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction);
70
72
  --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
71
73
  }
72
74
 
package/components/NotificationDrawer/notification-drawer.scss CHANGED
@@ -101,7 +101,9 @@
101
101
  // Group toggle icon
102
102
  --#{$notification-drawer}__group-toggle-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
103
103
  --#{$notification-drawer}__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
104
- --#{$notification-drawer}__group-toggle-icon--Transition: .2s ease-in 0s;
104
+ --#{$notification-drawer}__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
105
+ --#{$notification-drawer}__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
106
+ --#{$notification-drawer}__group-toggle-icon--Transition: transform var(--#{$notification-drawer}__group-toggle-icon--TransitionDuration) var(--#{$notification-drawer}__group-toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
105
107
  --#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate: 90deg;
106
108
  }
107
109
 
@@ -308,7 +310,7 @@
308
310
 
309
311
  margin-inline-end: var(--#{$notification-drawer}__group-toggle-icon--MarginInlineEnd);
310
312
  color: var(--#{$notification-drawer}__group-toggle-icon--Color);
311
- transition: var(--#{$notification-drawer}__group-toggle-icon--Transition);
313
+ transition: var(--#{$notification-drawer}__group-toggle-icon--Transition); // TODO remove shorthand in breaking change
312
314
 
313
315
  .#{$notification-drawer}__group.pf-m-expanded & {
314
316
  transform: rotate(var(--#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate));
package/components/Table/table-grid.css CHANGED
@@ -52,7 +52,9 @@
52
52
  --pf-v6-c-table__action--responsive--MarginInlineStart: var(--pf-t--global--spacer--xl);
53
53
  --pf-v6-c-table--m-grid__favorite--action--MarginInlineStart: var(--pf-t--global--spacer--2xl);
54
54
  --pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart: calc(var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart) + var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart));
55
- --pf-v6-c-table__toggle__icon--Transition: .2s ease-in 0s;
55
+ --pf-v6-c-table__toggle__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
56
+ --pf-v6-c-table__toggle__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
57
+ --pf-v6-c-table__toggle__icon--Transition: transform var(--pf-v6-c-table__toggle__icon--TransitionDuration) var(--pf-v6-c-table__toggle__icon--TransitionTimingFunction);
56
58
  --pf-v6-c-table__toggle--m-expanded__icon--Rotate: 180deg;
57
59
  }
58
60
 
package/components/Table/table-grid.scss CHANGED
@@ -124,7 +124,9 @@
124
124
  --#{$table}--m-grid__check--favorite--action--MarginInlineStart: calc(var(--#{$table}--m-grid__check--favorite--MarginInlineStart) + var(--#{$table}--m-grid__favorite--action--MarginInlineStart));
125
125
 
126
126
  // * Table grid toggle icon
127
- --#{$table}__toggle__icon--Transition: .2s ease-in 0s;
127
+ --#{$table}__toggle__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
128
+ --#{$table}__toggle__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
129
+ --#{$table}__toggle__icon--Transition: transform var(--#{$table}__toggle__icon--TransitionDuration) var(--#{$table}__toggle__icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
128
130
  --#{$table}__toggle--m-expanded__icon--Rotate: 180deg;
129
131
  }
130
132
 
@@ -523,7 +525,7 @@
523
525
 
524
526
  // - Table grid toggle icon
525
527
  .#{$table}__toggle-icon {
526
- transition: var(--#{$table}__toggle__icon--Transition);
528
+ transition: var(--#{$table}__toggle__icon--Transition); // TODO remove shorthand in breaking change
527
529
 
528
530
  .#{$button}.pf-m-expanded > & {
529
531
  transform: rotate(var(--#{$table}__toggle--m-expanded__icon--Rotate));
package/components/Table/table.css CHANGED
@@ -50,7 +50,7 @@
50
50
  --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
51
51
  --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
52
52
  --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
53
- --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
53
+ --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
54
54
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
55
55
  --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
56
56
  --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -548,7 +548,9 @@
548
548
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
549
549
  }
550
550
  .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
551
- transition: transform var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration) var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
551
+ transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
552
+ transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration);
553
+ transition-property: transform;
552
554
  transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
553
555
  }
554
556
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
package/components/Table/table.scss CHANGED
@@ -83,7 +83,7 @@
83
83
  --#{$table}__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
84
84
  --#{$table}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
85
85
  --#{$table}__toggle--c-button__toggle-icon--Rotate: 270deg;
86
- --#{$table}__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
86
+ --#{$table}__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
87
87
  --#{$table}__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
88
88
  --#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
89
89
 
@@ -747,7 +747,9 @@
747
747
  .#{$table}__toggle-icon {
748
748
  @include pf-v6-mirror-inline-on-rtl;
749
749
 
750
- transition: transform var(--#{$table}__toggle--c-button__toggle-icon--TransitionDuration) var(--#{$table}__toggle--c-button__toggle-icon--TransitionTimingFunction);
750
+ transition-timing-function: var(--#{$table}__toggle--c-button__toggle-icon--TransitionTimingFunction);
751
+ transition-duration: var(--#{$table}__toggle--c-button__toggle-icon--TransitionDuration);
752
+ transition-property: transform;
751
753
  transform: rotate(var(--#{$table}__toggle--c-button__toggle-icon--Rotate));
752
754
  }
753
755
 
package/components/Tabs/tabs.css CHANGED
@@ -102,7 +102,9 @@
102
102
  --pf-v6-c-tabs__item--ScrollSnapAlign: end;
103
103
  --pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis: y;
104
104
  --pf-v6-c-tabs__toggle--Display: flex;
105
- --pf-v6-c-tabs__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
105
+ --pf-v6-c-tabs__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
106
+ --pf-v6-c-tabs__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
107
+ --pf-v6-c-tabs__toggle-icon--Transition: transform var(--pf-v6-c-tabs__toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction);
106
108
  --pf-v6-c-tabs__toggle-icon--Rotate: 0;
107
109
  --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
108
110
  --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
@@ -122,7 +124,9 @@
122
124
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
123
125
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
124
126
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
125
- --pf-v6-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
127
+ --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
128
+ --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
129
+ --pf-v6-c-tabs__link-toggle-icon--Transition: transform var(--pf-v6-c-tabs__link-toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction);
126
130
  --pf-v6-c-tabs__link-toggle-icon--Rotate: 0;
127
131
  --pf-v6-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
128
132
  --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
package/components/Tabs/tabs.scss CHANGED
@@ -129,7 +129,9 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
129
129
 
130
130
  // Expandable
131
131
  --#{$tabs}__toggle--Display: flex;
132
- --#{$tabs}__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
132
+ --#{$tabs}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
133
+ --#{$tabs}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
134
+ --#{$tabs}__toggle-icon--Transition: transform var(--#{$tabs}__toggle-icon--TransitionDuration) var(--#{$tabs}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
133
135
  --#{$tabs}__toggle-icon--Rotate: 0;
134
136
  --#{$tabs}--m-expanded__toggle-icon--Rotate: 90deg;
135
137
  --#{$tabs}--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
@@ -155,7 +157,9 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
155
157
 
156
158
  // Overflow menu toggle icon
157
159
  --#{$tabs}__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
158
- --#{$tabs}__link-toggle-icon--Transition: .2s ease-in 0s;
160
+ --#{$tabs}__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
161
+ --#{$tabs}__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
162
+ --#{$tabs}__link-toggle-icon--Transition: transform var(--#{$tabs}__link-toggle-icon--TransitionDuration) var(--#{$tabs}__link-toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
159
163
  --#{$tabs}__link-toggle-icon--Rotate: 0;
160
164
  --#{$tabs}__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
161
165
  --#{$tabs}__link--m-expanded__toggle-icon--Rotate: 90deg;
@@ -470,7 +474,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
470
474
  @include pf-v6-mirror-inline-on-rtl;
471
475
 
472
476
  display: inline-block;
473
- transition: var(--#{$tabs}__toggle-icon--Transition);
477
+ transition: var(--#{$tabs}__toggle-icon--Transition); // TODO remove shorthand in breaking change
474
478
  transform: rotate(var(--#{$tabs}__toggle-icon--Rotate));
475
479
  }
476
480
 
@@ -650,7 +654,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
650
654
  align-self: end;
651
655
  font-size: var(--#{$tabs}__link-toggle-icon--FontSize);
652
656
  color: var(--#{$tabs}__link-toggle-icon--Color);
653
- transition: var(--#{$tabs}__link-toggle-icon--Transition);
657
+ transition: var(--#{$tabs}__link-toggle-icon--Transition); // TODO remove shorthand in breaking change
654
658
  transform: rotate(var(--#{$tabs}__link-toggle-icon--Rotate));
655
659
  }
656
660
 
package/components/Toolbar/toolbar.css CHANGED
@@ -37,7 +37,7 @@
37
37
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
38
38
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
39
39
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
40
- --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
40
+ --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
41
41
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
42
42
  --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
43
43
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
@@ -375,7 +375,9 @@
375
375
 
376
376
  .pf-v6-c-toolbar__expand-all-icon {
377
377
  display: inline-flex;
378
- transition: transform var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration) var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
378
+ transition-timing-function: var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
379
+ transition-duration: var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration);
380
+ transition-property: transform;
379
381
  transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
380
382
  }
381
383
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-toolbar__expand-all-icon {
package/components/Toolbar/toolbar.scss CHANGED
@@ -67,7 +67,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
67
67
 
68
68
  // * Toolbar expand all
69
69
  --#{$toolbar}__expand-all-icon--Rotate: 0;
70
- --#{$toolbar}__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
70
+ --#{$toolbar}__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
71
71
  --#{$toolbar}__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
72
72
  --#{$toolbar}__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
73
73
 
@@ -306,7 +306,9 @@ $pf-v6--include-toolbar-breakpoints: true !default;
306
306
  // - Toolbar expand all
307
307
  .#{$toolbar}__expand-all-icon {
308
308
  display: inline-flex;
309
- transition: transform var(--#{$toolbar}__expand-all-icon--TransitionDuration) var(--#{$toolbar}__expand-all-icon--TransitionTimingFunction);
309
+ transition-timing-function: var(--#{$toolbar}__expand-all-icon--TransitionTimingFunction);
310
+ transition-duration: var(--#{$toolbar}__expand-all-icon--TransitionDuration);
311
+ transition-property: transform;
310
312
  transform: rotate(var(--#{$toolbar}__expand-all-icon--Rotate));
311
313
 
312
314
  @include pf-v6-mirror-inline-on-rtl; // - TODO: mirror this icon in breaking change
package/components/Wizard/wizard.css CHANGED
@@ -39,7 +39,7 @@
39
39
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
40
40
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
41
41
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
42
- --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
42
+ --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
43
43
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
44
44
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
45
45
  --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
@@ -445,7 +445,9 @@
445
445
 
446
446
  .pf-v6-c-wizard__nav-link-toggle-icon {
447
447
  display: inline-block;
448
- transition: transform var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration) var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
448
+ transition-timing-function: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
449
+ transition-duration: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration);
450
+ transition-property: transform;
449
451
  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
450
452
  }
451
453
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {
package/components/Wizard/wizard.scss CHANGED
@@ -63,7 +63,7 @@
63
63
  --#{$wizard}__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
64
64
  --#{$wizard}__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
65
65
  --#{$wizard}__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
66
- --#{$wizard}__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
66
+ --#{$wizard}__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
67
67
  --#{$wizard}__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
68
68
  --#{$wizard}__nav-link-toggle-icon--Rotate: 0;
69
69
  --#{$wizard}__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
@@ -547,7 +547,9 @@
547
547
  @include pf-v6-mirror-inline-on-rtl;
548
548
 
549
549
  display: inline-block;
550
- transition: transform var(--#{$wizard}__nav-link-toggle-icon--TransitionDuration) var(--#{$wizard}__nav-link-toggle-icon--TransitionTimingFunction);
550
+ transition-timing-function: var(--#{$wizard}__nav-link-toggle-icon--TransitionTimingFunction);
551
+ transition-duration: var(--#{$wizard}__nav-link-toggle-icon--TransitionDuration);
552
+ transition-property: transform;
551
553
  transform: rotate(var(--#{$wizard}__nav-link-toggle-icon--Rotate));
552
554
  }
553
555