@patternfly/react-styles 6.2.0-prerelease.1 → 6.2.0-prerelease.11

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 (55) hide show
  1. package/CHANGELOG.md +65 -0
  2. package/css/components/Accordion/accordion.css +3 -1
  3. package/css/components/Alert/alert-group.css +52 -9
  4. package/css/components/Banner/banner.css +4 -4
  5. package/css/components/Breadcrumb/breadcrumb.css +3 -2
  6. package/css/components/Button/button.css +63 -2
  7. package/css/components/Button/button.d.ts +3 -0
  8. package/css/components/Button/button.js +3 -0
  9. package/css/components/Button/button.mjs +3 -0
  10. package/css/components/Card/card.css +21 -2
  11. package/css/components/Card/card.d.ts +1 -0
  12. package/css/components/Card/card.js +1 -0
  13. package/css/components/Card/card.mjs +1 -0
  14. package/css/components/ClipboardCopy/clipboard-copy.css +6 -1
  15. package/css/components/ClipboardCopy/clipboard-copy.d.ts +1 -0
  16. package/css/components/ClipboardCopy/clipboard-copy.js +1 -0
  17. package/css/components/ClipboardCopy/clipboard-copy.mjs +1 -0
  18. package/css/components/Content/content.css +2 -1
  19. package/css/components/DataList/data-list.css +3 -1
  20. package/css/components/DescriptionList/description-list.css +3 -2
  21. package/css/components/Drawer/drawer.css +3 -1
  22. package/css/components/DualListSelector/dual-list-selector.css +4 -2
  23. package/css/components/ExpandableSection/expandable-section.css +3 -1
  24. package/css/components/Form/form.css +7 -8
  25. package/css/components/FormControl/form-control.css +108 -41
  26. package/css/components/HelperText/helper-text.css +13 -0
  27. package/css/components/JumpLinks/jump-links.css +5 -3
  28. package/css/components/Label/label.css +3 -2
  29. package/css/components/Masthead/masthead.css +1 -1
  30. package/css/components/Menu/menu.css +15 -7
  31. package/css/components/MenuToggle/menu-toggle.css +47 -0
  32. package/css/components/Nav/nav.css +46 -13
  33. package/css/components/NotificationDrawer/notification-drawer.css +3 -1
  34. package/css/components/Page/page.css +16 -1
  35. package/css/components/Popover/popover.css +2 -0
  36. package/css/components/Progress/progress.css +3 -0
  37. package/css/components/ProgressStepper/progress-stepper.css +2 -1
  38. package/css/components/SimpleList/simple-list.css +2 -2
  39. package/css/components/Switch/switch.css +3 -1
  40. package/css/components/Table/table-grid.css +3 -1
  41. package/css/components/Table/table.css +7 -5
  42. package/css/components/Tabs/tabs.css +7 -3
  43. package/css/components/Timestamp/timestamp.css +2 -1
  44. package/css/components/ToggleGroup/toggle-group.css +1 -1
  45. package/css/components/Toolbar/toolbar.css +10 -3
  46. package/css/components/Toolbar/toolbar.d.ts +1 -0
  47. package/css/components/Toolbar/toolbar.js +1 -0
  48. package/css/components/Toolbar/toolbar.mjs +1 -0
  49. package/css/components/Wizard/wizard.css +5 -3
  50. package/css/components/_index.css +480 -127
  51. package/css/components/_index.d.ts +4 -3
  52. package/css/components/_index.js +4 -3
  53. package/css/components/_index.mjs +4 -3
  54. package/css/docs/components/Toolbar/examples/Toolbar.css +3 -0
  55. package/package.json +4 -4
@@ -23,13 +23,15 @@
23
23
  --pf-v6-c-nav__item--ScrollSnapAlign: end;
24
24
  --pf-v6-c-nav__section-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
25
25
  --pf-v6-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
26
- --pf-v6-c-nav__section-title--PaddingBlockStart: var(--pf-v6-c-nav__link--PaddingBlockStart);
27
- --pf-v6-c-nav__section-title--PaddingBlockEnd: var(--pf-v6-c-nav__link--PaddingBlockEnd);
26
+ --pf-v6-c-nav__section-title--PaddingBlockStart: 0;
27
+ --pf-v6-c-nav__section-title--PaddingBlockEnd: 0;
28
28
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
29
29
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
30
30
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
31
31
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
32
32
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
33
+ --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
34
+ --pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default);
33
35
  --pf-v6-c-nav__link--ColumnGap: var(--pf-t--global--spacer--sm);
34
36
  --pf-v6-c-nav__link--AlignItems: baseline;
35
37
  --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -40,10 +42,19 @@
40
42
  --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
41
43
  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
42
44
  --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
45
+ --pf-v6-c-nav__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--default);
46
+ --pf-v6-c-nav__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
47
+ --pf-v6-c-nav__link--m-current--TransitionDuration--color: var(--pf-t--global--motion--duration--fade--short);
48
+ --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
43
49
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
44
50
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
45
51
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
52
+ --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
53
+ --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
46
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);
47
58
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
48
59
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
49
60
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -72,6 +83,12 @@
72
83
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
73
84
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
74
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
+ }
75
92
 
76
93
  .pf-v6-c-nav,
77
94
  .pf-v6-c-nav__section,
@@ -123,7 +140,7 @@
123
140
  }
124
141
 
125
142
  [class^=pf-v6-c-nav][hidden] {
126
- display: none;
143
+ visibility: hidden;
127
144
  }
128
145
 
129
146
  .pf-v6-c-nav__nav,
@@ -132,30 +149,43 @@
132
149
  --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1);
133
150
  --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset);
134
151
  --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
152
+ visibility: visible;
135
153
  }
136
154
 
137
155
  .pf-v6-c-nav__list {
138
156
  row-gap: var(--pf-v6-c-nav__list--RowGap);
139
157
  column-gap: var(--pf-v6-c-nav__list--ColumnGap);
158
+ min-height: 0;
140
159
  }
141
160
 
142
161
  .pf-v6-c-nav__subnav {
143
162
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
163
+ grid-template-rows: 1fr;
164
+ min-height: 0;
165
+ padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
166
+ padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
144
167
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
168
+ 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;
172
+ }
173
+ .pf-v6-c-nav__subnav[hidden] {
174
+ --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion);
175
+ --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
176
+ --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
177
+ grid-template-rows: 0fr;
178
+ opacity: 0;
145
179
  }
146
180
 
147
181
  .pf-v6-c-nav__item {
148
- row-gap: var(--pf-v6-c-nav__item--RowGap);
149
182
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
150
183
  }
151
184
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
152
185
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
153
186
  }
154
- .pf-v6-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) {
155
- margin-block-end: var(--pf-v6-c-nav__item--m-expanded--MarginBlockEnd, var(--pf-v6-c-nav__item--RowGap));
156
- }
157
- .pf-v6-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) + .pf-v6-c-nav__item > .pf-v6-c-nav__link::before {
158
- inset-block-start: calc(var(--pf-v6-c-nav__item--RowGap) * -1 - var(--pf-v6-c-nav__list--RowGap));
187
+ .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
188
+ margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
159
189
  }
160
190
 
161
191
  .pf-v6-c-nav__section {
@@ -186,13 +216,13 @@
186
216
  line-height: var(--pf-v6-c-nav__link--LineHeight, inherit);
187
217
  color: var(--pf-v6-c-nav__link--Color);
188
218
  text-align: start;
189
- text-decoration: none;
219
+ text-decoration-line: none;
190
220
  background-color: var(--pf-v6-c-nav__link--BackgroundColor);
191
221
  border: none;
192
222
  border-radius: var(--pf-v6-c-nav__link--BorderRadius);
193
- }
194
- .pf-v6-c-nav__link[aria-expanded=true]::before {
195
- inset-block-end: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
223
+ transition-timing-function: var(--pf-v6-c-nav__link--TransitionTimingFunction--background-color), var(--pf-v6-c-nav__link--m-current--TransitionTimingFunction--color);
224
+ transition-duration: var(--pf-v6-c-nav__link--TransitionDuration--background-color), var(--pf-v6-c-nav__link--m-current--TransitionDuration--color);
225
+ transition-property: background-color, color;
196
226
  }
197
227
  .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
198
228
  color: var(--pf-v6-c-nav__link--hover--Color);
@@ -217,6 +247,9 @@
217
247
 
218
248
  .pf-v6-c-nav__toggle-icon {
219
249
  display: inline-block;
250
+ transition-timing-function: var(--pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform);
251
+ transition-duration: var(--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform);
252
+ transition-property: transform;
220
253
  transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
221
254
  }
222
255
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__toggle-icon {
@@ -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 {
@@ -187,9 +187,11 @@
187
187
  }
188
188
 
189
189
  .pf-v6-c-popover__title-text {
190
+ min-width: 0;
190
191
  font-size: var(--pf-v6-c-popover__title-text--FontSize);
191
192
  font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
192
193
  color: var(--pf-v6-c-popover__title-text--Color);
194
+ overflow-wrap: break-word;
193
195
  }
194
196
 
195
197
  .pf-v6-c-popover__body {
@@ -2,6 +2,7 @@
2
2
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
3
3
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
4
4
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
5
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
5
6
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
6
7
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
7
8
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -143,7 +144,9 @@
143
144
  grid-column: 1/3;
144
145
  align-self: center;
145
146
  height: var(--pf-v6-c-progress__bar--Height);
147
+ overflow: hidden;
146
148
  background-color: var(--pf-v6-c-progress__bar--BackgroundColor);
149
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
147
150
  }
148
151
 
149
152
  .pf-v6-c-progress__indicator {
@@ -316,7 +316,8 @@
316
316
  .pf-v6-c-progress-stepper__step-title.pf-m-help-text {
317
317
  padding-inline-start: var(--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineStart);
318
318
  padding-inline-end: var(--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineEnd);
319
- text-decoration: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine) var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle);
319
+ text-decoration-line: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine);
320
+ text-decoration-style: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle);
320
321
  text-underline-offset: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
321
322
  cursor: pointer;
322
323
  }
@@ -34,7 +34,7 @@
34
34
  font-size: var(--pf-v6-c-simple-list__item-link--FontSize);
35
35
  color: var(--pf-v6-c-simple-list__item-link--Color);
36
36
  text-align: start;
37
- text-decoration: none;
37
+ text-decoration-line: none;
38
38
  background-color: var(--pf-v6-c-simple-list__item-link--BackgroundColor);
39
39
  border: none;
40
40
  border-radius: var(--pf-v6-c-simple-list__item-link--BorderRadius);
@@ -47,7 +47,7 @@
47
47
  .pf-v6-c-simple-list__item-link:is(:hover, :focus) {
48
48
  --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-v6-c-simple-list__item-link--hover--BackgroundColor);
49
49
  --pf-v6-c-simple-list__item-link--Color: var(--pf-v6-c-simple-list__item-link--hover--Color);
50
- text-decoration: none;
50
+ text-decoration-line: none;
51
51
  }
52
52
  .pf-v6-c-simple-list__item-link.pf-m-current {
53
53
  --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-v6-c-simple-list__item-link--m-current--BackgroundColor);
@@ -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;
@@ -495,7 +499,7 @@
495
499
  padding-inline-end: var(--pf-v6-c-tabs__link--PaddingInlineEnd);
496
500
  font-size: var(--pf-v6-c-tabs__link--FontSize);
497
501
  color: var(--pf-v6-c-tabs__link--Color);
498
- text-decoration: none;
502
+ text-decoration-line: none;
499
503
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
500
504
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
501
505
  }
@@ -19,7 +19,8 @@
19
19
  }
20
20
  .pf-v6-c-timestamp.pf-m-help-text {
21
21
  --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--Color);
22
- text-decoration: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine) var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
22
+ text-decoration-line: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine);
23
+ text-decoration-style: var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
23
24
  text-underline-offset: var(--pf-v6-c-timestamp--m-help-text--TextUnderlineOffset);
24
25
  cursor: pointer;
25
26
  }
@@ -92,7 +92,7 @@
92
92
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
93
93
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
94
94
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
95
- text-decoration: none;
95
+ text-decoration-line: none;
96
96
  }
97
97
  .pf-v6-c-toggle-group__button.pf-m-selected {
98
98
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--m-selected--BackgroundColor);
@@ -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;
@@ -357,7 +357,7 @@
357
357
  padding-inline: 0;
358
358
  color: var(--pf-v6-c-wizard__nav-link--Color);
359
359
  text-align: start;
360
- text-decoration: var(--pf-v6-c-wizard__nav-link--TextDecoration);
360
+ text-decoration-line: var(--pf-v6-c-wizard__nav-link--TextDecoration);
361
361
  word-break: break-word;
362
362
  counter-increment: wizard-nav-count;
363
363
  background-color: transparent;
@@ -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 {