@patternfly/react-styles 6.2.0-prerelease.4 → 6.2.0-prerelease.6

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 (17) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/css/components/Alert/alert-group.css +50 -7
  3. package/css/components/Button/button.css +16 -0
  4. package/css/components/Button/button.d.ts +1 -0
  5. package/css/components/Button/button.js +1 -0
  6. package/css/components/Button/button.mjs +1 -0
  7. package/css/components/DescriptionList/description-list.css +1 -1
  8. package/css/components/Drawer/drawer.css +3 -1
  9. package/css/components/Form/form.css +3 -3
  10. package/css/components/Nav/nav.css +45 -12
  11. package/css/components/Popover/popover.css +2 -0
  12. package/css/components/Progress/progress.css +3 -0
  13. package/css/components/_index.css +122 -24
  14. package/css/components/_index.d.ts +1 -0
  15. package/css/components/_index.js +1 -0
  16. package/css/components/_index.mjs +1 -0
  17. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,19 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.2.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.2.0-prerelease.5...@patternfly/react-styles@6.2.0-prerelease.6) (2025-02-27)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **deps:** update dependency @patternfly/patternfly to v6.2.0-prerelease.11 ([#11565](https://github.com/patternfly/patternfly-react/issues/11565)) ([f8832f1](https://github.com/patternfly/patternfly-react/commit/f8832f1b5abd0b62c61905eaeea0584daeb0a650))
11
+ - **deps:** update dependency @patternfly/patternfly to v6.2.0-prerelease.12 ([#11571](https://github.com/patternfly/patternfly-react/issues/11571)) ([df1322d](https://github.com/patternfly/patternfly-react/commit/df1322d1550f8a83a227534a670547895457d959))
12
+
13
+ # [6.2.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.2.0-prerelease.4...@patternfly/react-styles@6.2.0-prerelease.5) (2025-02-24)
14
+
15
+ ### Bug Fixes
16
+
17
+ - **deps:** update dependency @patternfly/patternfly to v6.2.0-prerelease.9 ([#11550](https://github.com/patternfly/patternfly-react/issues/11550)) ([e4c7d8d](https://github.com/patternfly/patternfly-react/commit/e4c7d8d3cdf474c9e477091c0867dccbdd17d1f7))
18
+
6
19
  # [6.2.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.2.0-prerelease.3...@patternfly/react-styles@6.2.0-prerelease.4) (2025-02-20)
7
20
 
8
21
  ### Bug Fixes
package/css/components/Alert/alert-group.css CHANGED
@@ -4,6 +4,48 @@
4
4
  --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
5
5
  --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
6
6
  --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
7
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
8
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
9
+ --pf-v6-c-alert-group--m-toast__item--Transition--opacity--default: var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default)
10
+ var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default)
11
+ 0s;
12
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
13
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
14
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
15
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
16
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
17
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
18
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
19
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
20
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
21
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
22
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
23
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
24
+ --pf-v6-c-alert-group--m-toast__item--c-alert--Transition: all
25
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
26
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
27
+ 0s;
28
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
29
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
30
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
31
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
32
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
33
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
34
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
35
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
36
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
37
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
38
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
39
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
40
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
41
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
42
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
43
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
44
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
45
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: all
46
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
47
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
48
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
7
49
  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
8
50
  --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
9
51
  --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -52,15 +94,15 @@
52
94
  display: grid;
53
95
  grid-template-rows: 1fr;
54
96
  opacity: 1;
55
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
97
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
56
98
  transform: translateX(0) translateY(0);
57
99
  }
58
100
  @media screen and (prefers-reduced-motion: no-preference) {
59
101
  .pf-v6-c-alert-group__item {
60
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
102
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity), transform var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows), margin-block var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block);
61
103
  }
62
104
  .pf-v6-c-alert-group__item .pf-v6-c-alert {
63
- transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
105
+ transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
64
106
  }
65
107
  }
66
108
  .pf-v6-c-alert-group__item.pf-m-offstage-top {
@@ -81,21 +123,22 @@
81
123
  margin-block: 0;
82
124
  overflow: hidden;
83
125
  opacity: 0;
84
- transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
85
- transform: translateX(100%);
126
+ transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
86
127
  }
87
128
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
88
129
  min-height: 0;
89
130
  padding-block-start: 0;
90
131
  padding-block-end: 0;
91
132
  border-width: 0;
133
+ transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
92
134
  }
93
135
  @media screen and (prefers-reduced-motion: no-preference) {
94
136
  .pf-v6-c-alert-group__item.pf-m-offstage-right {
95
- transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
137
+ transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
138
+ transform: translateX(100%);
96
139
  }
97
140
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
98
- transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
141
+ transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition);
99
142
  }
100
143
  }
101
144
  .pf-v6-c-alert-group__item:hover {
package/css/components/Button/button.css CHANGED
@@ -235,6 +235,8 @@
235
235
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
236
236
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
237
237
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
238
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
239
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
238
240
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
239
241
  --pf-v6-c-button__progress--Opacity: 0;
240
242
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -599,6 +601,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
599
601
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
600
602
  opacity: 0;
601
603
  }
604
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
605
+ animation-name: pf-v6-c-button-icon-notify;
606
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
607
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
608
+ }
602
609
 
603
610
  .pf-v6-c-button__icon {
604
611
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
@@ -627,4 +634,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
627
634
  .pf-v6-c-button__count {
628
635
  display: inline-flex;
629
636
  align-items: center;
637
+ }
638
+
639
+ @keyframes pf-v6-c-button-icon-notify {
640
+ 33% {
641
+ transform: rotate(30deg);
642
+ }
643
+ 66% {
644
+ transform: rotate(-60deg);
645
+ }
630
646
  }
package/css/components/Button/button.d.ts CHANGED
@@ -28,6 +28,7 @@ declare const _default: {
28
28
  "ariaDisabled": "pf-m-aria-disabled",
29
29
  "progress": "pf-m-progress",
30
30
  "inProgress": "pf-m-in-progress",
31
+ "notify": "pf-m-notify",
31
32
  "start": "pf-m-start",
32
33
  "end": "pf-m-end"
33
34
  },
package/css/components/Button/button.js CHANGED
@@ -30,6 +30,7 @@ exports.default = {
30
30
  "ariaDisabled": "pf-m-aria-disabled",
31
31
  "progress": "pf-m-progress",
32
32
  "inProgress": "pf-m-in-progress",
33
+ "notify": "pf-m-notify",
33
34
  "start": "pf-m-start",
34
35
  "end": "pf-m-end"
35
36
  },
package/css/components/Button/button.mjs CHANGED
@@ -28,6 +28,7 @@ export default {
28
28
  "ariaDisabled": "pf-m-aria-disabled",
29
29
  "progress": "pf-m-progress",
30
30
  "inProgress": "pf-m-in-progress",
31
+ "notify": "pf-m-notify",
31
32
  "start": "pf-m-start",
32
33
  "end": "pf-m-end"
33
34
  },
package/css/components/DescriptionList/description-list.css CHANGED
@@ -14,7 +14,7 @@
14
14
  --pf-v6-c-description-list__term--Display: inline;
15
15
  --pf-v6-c-description-list__term--sm--Display: flex;
16
16
  --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
17
- --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--sm);
17
+ --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default);
18
18
  --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
19
19
  --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
20
20
  --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
package/css/components/Drawer/drawer.css CHANGED
@@ -15,7 +15,8 @@
15
15
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
16
16
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
17
17
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18
- --pf-v6-c-drawer__panel--TransitionDuration: 250ms;
18
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
19
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
19
20
  --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
20
21
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
21
22
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
@@ -229,6 +230,7 @@
229
230
  overflow: auto;
230
231
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
231
232
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
233
+ transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
232
234
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
233
235
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
234
236
  -webkit-overflow-scrolling: touch;
package/css/components/Form/form.css CHANGED
@@ -10,16 +10,16 @@
10
10
  --pf-v6-c-form__group-label--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11
11
  --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart: 0;
12
12
  --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
13
- --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--sm);
13
+ --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--default);
14
14
  --pf-v6-c-form__label--LineHeight: var(--pf-t--global--font--line-height--body);
15
15
  --pf-v6-c-form__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
16
16
  --pf-v6-c-form__label--hover--Cursor: pointer;
17
17
  --pf-v6-c-form__label--m-disabled--hover--Cursor: not-allowed;
18
18
  --pf-v6-c-form__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
19
19
  --pf-v6-c-form__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
20
- --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
20
+ --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--default);
21
21
  --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
22
- --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
22
+ --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--default);
23
23
  --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
24
24
  --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
25
25
  --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical);
package/css/components/Nav/nav.css CHANGED
@@ -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 {
@@ -190,9 +220,9 @@
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 {
package/css/components/Popover/popover.css CHANGED
@@ -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 {
package/css/components/Progress/progress.css CHANGED
@@ -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 {
package/css/components/_index.css CHANGED
@@ -574,6 +574,48 @@
574
574
  --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
575
575
  --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
576
576
  --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
577
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
578
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
579
+ --pf-v6-c-alert-group--m-toast__item--Transition--opacity--default: var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default)
580
+ var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default)
581
+ 0s;
582
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
583
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
584
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
585
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
586
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
587
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
588
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
589
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
590
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
591
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
592
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
593
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
594
+ --pf-v6-c-alert-group--m-toast__item--c-alert--Transition: all
595
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
596
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
597
+ 0s;
598
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
599
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
600
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
601
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
602
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
603
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
604
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
605
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
606
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
607
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
608
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
609
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
610
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
611
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
612
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
613
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
614
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
615
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: all
616
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
617
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
618
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
577
619
  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
578
620
  --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
579
621
  --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -622,15 +664,15 @@
622
664
  display: grid;
623
665
  grid-template-rows: 1fr;
624
666
  opacity: 1;
625
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
667
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
626
668
  transform: translateX(0) translateY(0);
627
669
  }
628
670
  @media screen and (prefers-reduced-motion: no-preference) {
629
671
  .pf-v6-c-alert-group__item {
630
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
672
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity), transform var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows), margin-block var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block);
631
673
  }
632
674
  .pf-v6-c-alert-group__item .pf-v6-c-alert {
633
- transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
675
+ transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
634
676
  }
635
677
  }
636
678
  .pf-v6-c-alert-group__item.pf-m-offstage-top {
@@ -651,21 +693,22 @@
651
693
  margin-block: 0;
652
694
  overflow: hidden;
653
695
  opacity: 0;
654
- transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
655
- transform: translateX(100%);
696
+ transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
656
697
  }
657
698
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
658
699
  min-height: 0;
659
700
  padding-block-start: 0;
660
701
  padding-block-end: 0;
661
702
  border-width: 0;
703
+ transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
662
704
  }
663
705
  @media screen and (prefers-reduced-motion: no-preference) {
664
706
  .pf-v6-c-alert-group__item.pf-m-offstage-right {
665
- transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
707
+ transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
708
+ transform: translateX(100%);
666
709
  }
667
710
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
668
- transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
711
+ transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition);
669
712
  }
670
713
  }
671
714
  .pf-v6-c-alert-group__item:hover {
@@ -1628,6 +1671,8 @@ button.pf-v6-c-breadcrumb__link {
1628
1671
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
1629
1672
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
1630
1673
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
1674
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
1675
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
1631
1676
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
1632
1677
  --pf-v6-c-button__progress--Opacity: 0;
1633
1678
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -1992,6 +2037,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1992
2037
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
1993
2038
  opacity: 0;
1994
2039
  }
2040
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2041
+ animation-name: pf-v6-c-button-icon-notify;
2042
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2043
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2044
+ }
1995
2045
 
1996
2046
  .pf-v6-c-button__icon {
1997
2047
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
@@ -2022,6 +2072,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2022
2072
  align-items: center;
2023
2073
  }
2024
2074
 
2075
+ @keyframes pf-v6-c-button-icon-notify {
2076
+ 33% {
2077
+ transform: rotate(30deg);
2078
+ }
2079
+ 66% {
2080
+ transform: rotate(-60deg);
2081
+ }
2082
+ }
2025
2083
  .pf-v6-c-calendar-month {
2026
2084
  --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
2027
2085
  --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -4105,7 +4163,7 @@ ul) {
4105
4163
  --pf-v6-c-description-list__term--Display: inline;
4106
4164
  --pf-v6-c-description-list__term--sm--Display: flex;
4107
4165
  --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
4108
- --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--sm);
4166
+ --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default);
4109
4167
  --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
4110
4168
  --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
4111
4169
  --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -5191,7 +5249,8 @@ ul) {
5191
5249
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
5192
5250
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5193
5251
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5194
- --pf-v6-c-drawer__panel--TransitionDuration: 250ms;
5252
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
5253
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
5195
5254
  --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
5196
5255
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
5197
5256
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
@@ -5405,6 +5464,7 @@ ul) {
5405
5464
  overflow: auto;
5406
5465
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
5407
5466
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
5467
+ transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
5408
5468
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
5409
5469
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
5410
5470
  -webkit-overflow-scrolling: touch;
@@ -6301,16 +6361,16 @@ ul) {
6301
6361
  --pf-v6-c-form__group-label--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6302
6362
  --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart: 0;
6303
6363
  --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
6304
- --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--sm);
6364
+ --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--default);
6305
6365
  --pf-v6-c-form__label--LineHeight: var(--pf-t--global--font--line-height--body);
6306
6366
  --pf-v6-c-form__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
6307
6367
  --pf-v6-c-form__label--hover--Cursor: pointer;
6308
6368
  --pf-v6-c-form__label--m-disabled--hover--Cursor: not-allowed;
6309
6369
  --pf-v6-c-form__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
6310
6370
  --pf-v6-c-form__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
6311
- --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
6371
+ --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--default);
6312
6372
  --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
6313
- --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
6373
+ --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--default);
6314
6374
  --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
6315
6375
  --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
6316
6376
  --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -10873,13 +10933,15 @@ ul.pf-v6-c-list {
10873
10933
  --pf-v6-c-nav__item--ScrollSnapAlign: end;
10874
10934
  --pf-v6-c-nav__section-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
10875
10935
  --pf-v6-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
10876
- --pf-v6-c-nav__section-title--PaddingBlockStart: var(--pf-v6-c-nav__link--PaddingBlockStart);
10877
- --pf-v6-c-nav__section-title--PaddingBlockEnd: var(--pf-v6-c-nav__link--PaddingBlockEnd);
10936
+ --pf-v6-c-nav__section-title--PaddingBlockStart: 0;
10937
+ --pf-v6-c-nav__section-title--PaddingBlockEnd: 0;
10878
10938
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
10879
10939
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
10880
10940
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
10881
10941
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
10882
10942
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
10943
+ --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
10944
+ --pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default);
10883
10945
  --pf-v6-c-nav__link--ColumnGap: var(--pf-t--global--spacer--sm);
10884
10946
  --pf-v6-c-nav__link--AlignItems: baseline;
10885
10947
  --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -10890,10 +10952,19 @@ ul.pf-v6-c-list {
10890
10952
  --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
10891
10953
  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
10892
10954
  --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
10955
+ --pf-v6-c-nav__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--default);
10956
+ --pf-v6-c-nav__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
10957
+ --pf-v6-c-nav__link--m-current--TransitionDuration--color: var(--pf-t--global--motion--duration--fade--short);
10958
+ --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
10893
10959
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
10894
10960
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
10895
10961
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
10962
+ --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
10963
+ --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
10896
10964
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
10965
+ --pf-v6-c-nav__subnav--TransitionDuration--expansion: 0s;
10966
+ --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: 0s;
10967
+ --pf-v6-c-nav__subnav--TransitionTimingFunction--expansion: var(--pf-t--global--motion--timing-function--default);
10897
10968
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
10898
10969
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
10899
10970
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -10922,6 +10993,12 @@ ul.pf-v6-c-list {
10922
10993
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
10923
10994
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10924
10995
  }
10996
+ @media (prefers-reduced-motion: no-preference) {
10997
+ .pf-v6-c-nav {
10998
+ --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--default);
10999
+ --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--short);
11000
+ }
11001
+ }
10925
11002
 
10926
11003
  .pf-v6-c-nav,
10927
11004
  .pf-v6-c-nav__section,
@@ -10973,7 +11050,7 @@ ul.pf-v6-c-list {
10973
11050
  }
10974
11051
 
10975
11052
  [class^=pf-v6-c-nav][hidden] {
10976
- display: none;
11053
+ visibility: hidden;
10977
11054
  }
10978
11055
 
10979
11056
  .pf-v6-c-nav__nav,
@@ -10982,30 +11059,43 @@ ul.pf-v6-c-list {
10982
11059
  --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1);
10983
11060
  --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset);
10984
11061
  --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
11062
+ visibility: visible;
10985
11063
  }
10986
11064
 
10987
11065
  .pf-v6-c-nav__list {
10988
11066
  row-gap: var(--pf-v6-c-nav__list--RowGap);
10989
11067
  column-gap: var(--pf-v6-c-nav__list--ColumnGap);
11068
+ min-height: 0;
10990
11069
  }
10991
11070
 
10992
11071
  .pf-v6-c-nav__subnav {
10993
11072
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
11073
+ grid-template-rows: 1fr;
11074
+ min-height: 0;
11075
+ padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
11076
+ padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
10994
11077
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
11078
+ overflow-y: clip;
11079
+ transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expansion);
11080
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expansion);
11081
+ transition-property: grid-template-rows, padding-block-start, padding-block-end, opacity;
11082
+ }
11083
+ .pf-v6-c-nav__subnav[hidden] {
11084
+ --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion);
11085
+ --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
11086
+ --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
11087
+ grid-template-rows: 0fr;
11088
+ opacity: 0;
10995
11089
  }
10996
11090
 
10997
11091
  .pf-v6-c-nav__item {
10998
- row-gap: var(--pf-v6-c-nav__item--RowGap);
10999
11092
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
11000
11093
  }
11001
11094
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
11002
11095
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
11003
11096
  }
11004
- .pf-v6-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) {
11005
- margin-block-end: var(--pf-v6-c-nav__item--m-expanded--MarginBlockEnd, var(--pf-v6-c-nav__item--RowGap));
11006
- }
11007
- .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 {
11008
- inset-block-start: calc(var(--pf-v6-c-nav__item--RowGap) * -1 - var(--pf-v6-c-nav__list--RowGap));
11097
+ .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
11098
+ margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
11009
11099
  }
11010
11100
 
11011
11101
  .pf-v6-c-nav__section {
@@ -11040,9 +11130,9 @@ ul.pf-v6-c-list {
11040
11130
  background-color: var(--pf-v6-c-nav__link--BackgroundColor);
11041
11131
  border: none;
11042
11132
  border-radius: var(--pf-v6-c-nav__link--BorderRadius);
11043
- }
11044
- .pf-v6-c-nav__link[aria-expanded=true]::before {
11045
- inset-block-end: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
11133
+ transition-timing-function: var(--pf-v6-c-nav__link--TransitionTimingFunction--background-color), var(--pf-v6-c-nav__link--m-current--TransitionTimingFunction--color);
11134
+ transition-duration: var(--pf-v6-c-nav__link--TransitionDuration--background-color), var(--pf-v6-c-nav__link--m-current--TransitionDuration--color);
11135
+ transition-property: background-color, color;
11046
11136
  }
11047
11137
  .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
11048
11138
  color: var(--pf-v6-c-nav__link--hover--Color);
@@ -11067,6 +11157,9 @@ ul.pf-v6-c-list {
11067
11157
 
11068
11158
  .pf-v6-c-nav__toggle-icon {
11069
11159
  display: inline-block;
11160
+ transition-timing-function: var(--pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform);
11161
+ transition-duration: var(--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform);
11162
+ transition-property: transform;
11070
11163
  transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
11071
11164
  }
11072
11165
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__toggle-icon {
@@ -12739,9 +12832,11 @@ ul.pf-v6-c-list {
12739
12832
  }
12740
12833
 
12741
12834
  .pf-v6-c-popover__title-text {
12835
+ min-width: 0;
12742
12836
  font-size: var(--pf-v6-c-popover__title-text--FontSize);
12743
12837
  font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
12744
12838
  color: var(--pf-v6-c-popover__title-text--Color);
12839
+ overflow-wrap: break-word;
12745
12840
  }
12746
12841
 
12747
12842
  .pf-v6-c-popover__body {
@@ -12756,6 +12851,7 @@ ul.pf-v6-c-list {
12756
12851
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
12757
12852
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
12758
12853
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
12854
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
12759
12855
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
12760
12856
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
12761
12857
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -12897,7 +12993,9 @@ ul.pf-v6-c-list {
12897
12993
  grid-column: 1/3;
12898
12994
  align-self: center;
12899
12995
  height: var(--pf-v6-c-progress__bar--Height);
12996
+ overflow: hidden;
12900
12997
  background-color: var(--pf-v6-c-progress__bar--BackgroundColor);
12998
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
12901
12999
  }
12902
13000
 
12903
13001
  .pf-v6-c-progress__indicator {
package/css/components/_index.d.ts CHANGED
@@ -391,6 +391,7 @@ declare const _default: {
391
391
  "ariaDisabled": "pf-m-aria-disabled",
392
392
  "progress": "pf-m-progress",
393
393
  "inProgress": "pf-m-in-progress",
394
+ "notify": "pf-m-notify",
394
395
  "start": "pf-m-start",
395
396
  "end": "pf-m-end",
396
397
  "inRange": "pf-m-in-range",
package/css/components/_index.js CHANGED
@@ -393,6 +393,7 @@ exports.default = {
393
393
  "ariaDisabled": "pf-m-aria-disabled",
394
394
  "progress": "pf-m-progress",
395
395
  "inProgress": "pf-m-in-progress",
396
+ "notify": "pf-m-notify",
396
397
  "start": "pf-m-start",
397
398
  "end": "pf-m-end",
398
399
  "inRange": "pf-m-in-range",
package/css/components/_index.mjs CHANGED
@@ -391,6 +391,7 @@ export default {
391
391
  "ariaDisabled": "pf-m-aria-disabled",
392
392
  "progress": "pf-m-progress",
393
393
  "inProgress": "pf-m-in-progress",
394
+ "notify": "pf-m-notify",
394
395
  "start": "pf-m-start",
395
396
  "end": "pf-m-end",
396
397
  "inRange": "pf-m-in-range",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.2.0-prerelease.4",
3
+ "version": "6.2.0-prerelease.6",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.2.0-prerelease.7",
22
+ "@patternfly/patternfly": "6.2.0-prerelease.12",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.0"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "fcc7abe033e11506a55a4f30ca2b14d94eaa9d41"
27
+ "gitHead": "ecbf45691913292ce191b65434eecad8fc88df08"
28
28
  }