@patternfly/react-styles 6.2.0-prerelease.9 → 6.2.0

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 (43) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/css/components/Accordion/accordion.css +3 -1
  3. package/css/components/Alert/alert-group.css +2 -2
  4. package/css/components/Banner/banner.css +2 -2
  5. package/css/components/Button/button.css +25 -0
  6. package/css/components/Button/button.d.ts +2 -0
  7. package/css/components/Button/button.js +2 -0
  8. package/css/components/Button/button.mjs +2 -0
  9. package/css/components/Card/card.css +21 -2
  10. package/css/components/Card/card.d.ts +1 -0
  11. package/css/components/Card/card.js +1 -0
  12. package/css/components/Card/card.mjs +1 -0
  13. package/css/components/ClipboardCopy/clipboard-copy.css +6 -1
  14. package/css/components/ClipboardCopy/clipboard-copy.d.ts +1 -0
  15. package/css/components/ClipboardCopy/clipboard-copy.js +1 -0
  16. package/css/components/ClipboardCopy/clipboard-copy.mjs +1 -0
  17. package/css/components/DataList/data-list.css +3 -1
  18. package/css/components/DualListSelector/dual-list-selector.css +4 -2
  19. package/css/components/ExpandableSection/expandable-section.css +3 -1
  20. package/css/components/Form/form.css +4 -2
  21. package/css/components/FormControl/form-control.css +108 -41
  22. package/css/components/HelperText/helper-text.css +2 -2
  23. package/css/components/JumpLinks/jump-links.css +4 -2
  24. package/css/components/Menu/menu.css +4 -4
  25. package/css/components/MenuToggle/menu-toggle.css +1 -1
  26. package/css/components/Nav/nav.css +12 -15
  27. package/css/components/NotificationDrawer/notification-drawer.css +3 -1
  28. package/css/components/Page/page.css +16 -1
  29. package/css/components/Switch/switch.css +3 -1
  30. package/css/components/Table/table-grid.css +3 -1
  31. package/css/components/Table/table.css +7 -5
  32. package/css/components/Tabs/tabs.css +6 -2
  33. package/css/components/Toolbar/toolbar.css +10 -3
  34. package/css/components/Toolbar/toolbar.d.ts +1 -0
  35. package/css/components/Toolbar/toolbar.js +1 -0
  36. package/css/components/Toolbar/toolbar.mjs +1 -0
  37. package/css/components/Wizard/wizard.css +4 -2
  38. package/css/components/_index.css +256 -95
  39. package/css/components/_index.d.ts +3 -3
  40. package/css/components/_index.js +3 -3
  41. package/css/components/_index.mjs +3 -3
  42. package/css/docs/components/Toolbar/examples/Toolbar.css +3 -0
  43. package/package.json +3 -3
@@ -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 {
@@ -557,16 +557,16 @@
557
557
  opacity: 0;
558
558
  }
559
559
 
560
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button,
560
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
561
561
  .pf-v6-c-menu__item-action.pf-m-favorited,
562
562
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
563
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
563
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
564
564
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
565
565
  }
566
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
566
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
567
567
  .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
568
568
  .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
569
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
569
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
570
570
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
571
571
  }
572
572
 
@@ -103,7 +103,7 @@
103
103
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
104
104
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
105
105
  --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
106
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-v6-c-menu-toggle--BorderRadius);
106
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
107
107
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
108
108
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
109
109
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -52,9 +52,9 @@
52
52
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
53
53
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
54
54
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
55
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: 0s;
56
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: 0s;
57
- --pf-v6-c-nav__subnav--TransitionTimingFunction--expansion: var(--pf-t--global--motion--timing-function--default);
55
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
56
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
57
+ --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
58
58
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
59
59
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
60
60
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -83,12 +83,6 @@
83
83
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
84
84
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
85
85
  }
86
- @media (prefers-reduced-motion: no-preference) {
87
- .pf-v6-c-nav {
88
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--default);
89
- --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--short);
90
- }
91
- }
92
86
 
93
87
  .pf-v6-c-nav,
94
88
  .pf-v6-c-nav__section,
@@ -140,7 +134,7 @@
140
134
  }
141
135
 
142
136
  [class^=pf-v6-c-nav][hidden] {
143
- visibility: hidden;
137
+ display: none;
144
138
  }
145
139
 
146
140
  .pf-v6-c-nav__nav,
@@ -149,7 +143,6 @@
149
143
  --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1);
150
144
  --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset);
151
145
  --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
152
- visibility: visible;
153
146
  }
154
147
 
155
148
  .pf-v6-c-nav__list {
@@ -166,15 +159,19 @@
166
159
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
167
160
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
168
161
  overflow-y: clip;
169
- transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expansion);
170
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expansion);
171
- transition-property: grid-template-rows, padding-block-start, padding-block-end, opacity;
162
+ transition-delay: 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
163
+ transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
164
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
165
+ transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
172
166
  }
173
167
  .pf-v6-c-nav__subnav[hidden] {
174
- --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion);
168
+ --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
169
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
175
170
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
176
171
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
172
+ display: grid;
177
173
  grid-template-rows: 0fr;
174
+ visibility: hidden;
178
175
  opacity: 0;
179
176
  }
180
177
 
@@ -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
 
@@ -36,12 +36,18 @@
36
36
  --pf-v6-c-page__main-container--GridArea: main;
37
37
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
38
38
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
39
+ --pf-v6-c-page__main-container--AlignSelf: start;
39
40
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
40
41
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
41
42
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
42
43
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
43
44
  --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
44
45
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
46
+ --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
47
+ --pf-v6-c-page__main-container--xs--BorderRadius: 0;
48
+ --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
49
+ --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
50
+ --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
45
51
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
46
52
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
47
53
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -399,7 +405,7 @@
399
405
  .pf-v6-c-page__main-container {
400
406
  display: flex;
401
407
  flex-direction: column;
402
- align-self: start;
408
+ align-self: var(--pf-v6-c-page__main-container--AlignSelf);
403
409
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
404
410
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
405
411
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
@@ -407,6 +413,15 @@
407
413
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
408
414
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
409
415
  }
416
+ @media screen and (max-width: calc(48rem - 1px)) {
417
+ .pf-v6-c-page__main-container {
418
+ --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
419
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
420
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
421
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
422
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
423
+ }
424
+ }
410
425
 
411
426
  .pf-v6-c-page__main-container,
412
427
  .pf-v6-c-page__drawer {
@@ -30,7 +30,9 @@
30
30
  --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
31
31
  --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
32
32
  --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
33
- --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
33
+ --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
34
+ --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
35
+ --pf-v6-c-switch__toggle--before--Transition: transform var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration), background-color var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration);
34
36
  --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
35
37
  }
36
38
 
@@ -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
 
@@ -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 {
@@ -583,13 +585,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
583
585
  vertical-align: baseline;
584
586
  }
585
587
 
586
- .pf-v6-c-table__favorite .pf-v6-c-button {
588
+ .pf-v6-c-table__favorite .pf-v6-c-button:not(.pf-m-favorite) {
587
589
  --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
588
590
  }
589
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
591
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
590
592
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
591
593
  }
592
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
594
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
593
595
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
594
596
  }
595
597
 
@@ -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;
@@ -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);
@@ -217,13 +217,18 @@
217
217
  }
218
218
  .pf-v6-c-toolbar.pf-m-full-height {
219
219
  --pf-v6-c-toolbar--PaddingBlockStart: 0;
220
- --pf-v6-c-toolbar--PaddinkBlockEnd: 0;
220
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
221
221
  }
222
222
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__group,
223
223
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__item {
224
224
  align-items: stretch;
225
225
  align-self: stretch;
226
226
  }
227
+ .pf-v6-c-toolbar.pf-m-no-padding {
228
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
229
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: 0;
230
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: 0;
231
+ }
227
232
  .pf-v6-c-toolbar.pf-m-primary {
228
233
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
229
234
  }
@@ -370,7 +375,9 @@
370
375
 
371
376
  .pf-v6-c-toolbar__expand-all-icon {
372
377
  display: inline-flex;
373
- 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;
374
381
  transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
375
382
  }
376
383
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-toolbar__expand-all-icon {
@@ -16,6 +16,7 @@ declare const _default: {
16
16
  "sticky": "pf-m-sticky",
17
17
  "static": "pf-m-static",
18
18
  "fullHeight": "pf-m-full-height",
19
+ "noPadding": "pf-m-no-padding",
19
20
  "primary": "pf-m-primary",
20
21
  "secondary": "pf-m-secondary",
21
22
  "noBackground": "pf-m-no-background",
@@ -18,6 +18,7 @@ exports.default = {
18
18
  "sticky": "pf-m-sticky",
19
19
  "static": "pf-m-static",
20
20
  "fullHeight": "pf-m-full-height",
21
+ "noPadding": "pf-m-no-padding",
21
22
  "primary": "pf-m-primary",
22
23
  "secondary": "pf-m-secondary",
23
24
  "noBackground": "pf-m-no-background",
@@ -16,6 +16,7 @@ export default {
16
16
  "sticky": "pf-m-sticky",
17
17
  "static": "pf-m-static",
18
18
  "fullHeight": "pf-m-full-height",
19
+ "noPadding": "pf-m-no-padding",
19
20
  "primary": "pf-m-primary",
20
21
  "secondary": "pf-m-secondary",
21
22
  "noBackground": "pf-m-no-background",
@@ -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 {