@patternfly/react-styles 6.2.0-prerelease.5 → 6.2.0-prerelease.7

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 (16) 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/Form/form.css +3 -3
  9. package/css/components/Masthead/masthead.css +1 -1
  10. package/css/components/Menu/menu.css +0 -1
  11. package/css/components/Nav/nav.css +45 -12
  12. package/css/components/_index.css +115 -25
  13. package/css/components/_index.d.ts +1 -0
  14. package/css/components/_index.js +1 -0
  15. package/css/components/_index.mjs +1 -0
  16. 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.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.2.0-prerelease.6...@patternfly/react-styles@6.2.0-prerelease.7) (2025-03-05)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **deps:** update dependency @patternfly/patternfly to v6.2.0-prerelease.14 ([#11609](https://github.com/patternfly/patternfly-react/issues/11609)) ([f8af65a](https://github.com/patternfly/patternfly-react/commit/f8af65a09409331bfea6c5818c333457b35fe84b))
11
+
12
+ # [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)
13
+
14
+ ### Bug Fixes
15
+
16
+ - **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))
17
+ - **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))
18
+
6
19
  # [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)
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/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/Masthead/masthead.css CHANGED
@@ -185,7 +185,7 @@
185
185
  grid-column-end: -1;
186
186
  row-gap: var(--pf-v6-c-masthead__content-RowGap, var(--pf-v6-c-masthead--RowGap));
187
187
  column-gap: var(--pf-v6-c-masthead__content--ColumnGap, var(--pf-v6-c-masthead--ColumnGap));
188
- align-self: stretch;
188
+ align-self: center;
189
189
  order: var(--pf-v6-c-masthead__content--Order);
190
190
  min-width: 0.25rem;
191
191
  }
package/css/components/Menu/menu.css CHANGED
@@ -334,7 +334,6 @@
334
334
  z-index: var(--pf-v6-c-menu--ZIndex);
335
335
  margin-block-start: calc(var(--pf-v6-c-menu--RowGap) * -1);
336
336
  margin-block-end: calc(var(--pf-v6-c-menu--RowGap) * -1);
337
- overflow: hidden;
338
337
  }
339
338
  .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
340
339
  padding-block-start: var(--pf-v6-c-menu--RowGap);
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/_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);
@@ -6303,16 +6361,16 @@ ul) {
6303
6361
  --pf-v6-c-form__group-label--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6304
6362
  --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart: 0;
6305
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)));
6306
- --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);
6307
6365
  --pf-v6-c-form__label--LineHeight: var(--pf-t--global--font--line-height--body);
6308
6366
  --pf-v6-c-form__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
6309
6367
  --pf-v6-c-form__label--hover--Cursor: pointer;
6310
6368
  --pf-v6-c-form__label--m-disabled--hover--Cursor: not-allowed;
6311
6369
  --pf-v6-c-form__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
6312
6370
  --pf-v6-c-form__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
6313
- --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);
6314
6372
  --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
6315
- --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);
6316
6374
  --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
6317
6375
  --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
6318
6376
  --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -9055,7 +9113,7 @@ ul.pf-v6-c-list {
9055
9113
  grid-column-end: -1;
9056
9114
  row-gap: var(--pf-v6-c-masthead__content-RowGap, var(--pf-v6-c-masthead--RowGap));
9057
9115
  column-gap: var(--pf-v6-c-masthead__content--ColumnGap, var(--pf-v6-c-masthead--ColumnGap));
9058
- align-self: stretch;
9116
+ align-self: center;
9059
9117
  order: var(--pf-v6-c-masthead__content--Order);
9060
9118
  min-width: 0.25rem;
9061
9119
  }
@@ -9739,7 +9797,6 @@ ul.pf-v6-c-list {
9739
9797
  z-index: var(--pf-v6-c-menu--ZIndex);
9740
9798
  margin-block-start: calc(var(--pf-v6-c-menu--RowGap) * -1);
9741
9799
  margin-block-end: calc(var(--pf-v6-c-menu--RowGap) * -1);
9742
- overflow: hidden;
9743
9800
  }
9744
9801
  .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
9745
9802
  padding-block-start: var(--pf-v6-c-menu--RowGap);
@@ -10875,13 +10932,15 @@ ul.pf-v6-c-list {
10875
10932
  --pf-v6-c-nav__item--ScrollSnapAlign: end;
10876
10933
  --pf-v6-c-nav__section-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
10877
10934
  --pf-v6-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
10878
- --pf-v6-c-nav__section-title--PaddingBlockStart: var(--pf-v6-c-nav__link--PaddingBlockStart);
10879
- --pf-v6-c-nav__section-title--PaddingBlockEnd: var(--pf-v6-c-nav__link--PaddingBlockEnd);
10935
+ --pf-v6-c-nav__section-title--PaddingBlockStart: 0;
10936
+ --pf-v6-c-nav__section-title--PaddingBlockEnd: 0;
10880
10937
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
10881
10938
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
10882
10939
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
10883
10940
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
10884
10941
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
10942
+ --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
10943
+ --pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default);
10885
10944
  --pf-v6-c-nav__link--ColumnGap: var(--pf-t--global--spacer--sm);
10886
10945
  --pf-v6-c-nav__link--AlignItems: baseline;
10887
10946
  --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -10892,10 +10951,19 @@ ul.pf-v6-c-list {
10892
10951
  --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
10893
10952
  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
10894
10953
  --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
10954
+ --pf-v6-c-nav__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--default);
10955
+ --pf-v6-c-nav__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
10956
+ --pf-v6-c-nav__link--m-current--TransitionDuration--color: var(--pf-t--global--motion--duration--fade--short);
10957
+ --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
10895
10958
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
10896
10959
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
10897
10960
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
10961
+ --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
10962
+ --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
10898
10963
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
10964
+ --pf-v6-c-nav__subnav--TransitionDuration--expansion: 0s;
10965
+ --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: 0s;
10966
+ --pf-v6-c-nav__subnav--TransitionTimingFunction--expansion: var(--pf-t--global--motion--timing-function--default);
10899
10967
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
10900
10968
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
10901
10969
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -10924,6 +10992,12 @@ ul.pf-v6-c-list {
10924
10992
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
10925
10993
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10926
10994
  }
10995
+ @media (prefers-reduced-motion: no-preference) {
10996
+ .pf-v6-c-nav {
10997
+ --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--default);
10998
+ --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--short);
10999
+ }
11000
+ }
10927
11001
 
10928
11002
  .pf-v6-c-nav,
10929
11003
  .pf-v6-c-nav__section,
@@ -10975,7 +11049,7 @@ ul.pf-v6-c-list {
10975
11049
  }
10976
11050
 
10977
11051
  [class^=pf-v6-c-nav][hidden] {
10978
- display: none;
11052
+ visibility: hidden;
10979
11053
  }
10980
11054
 
10981
11055
  .pf-v6-c-nav__nav,
@@ -10984,30 +11058,43 @@ ul.pf-v6-c-list {
10984
11058
  --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1);
10985
11059
  --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset);
10986
11060
  --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
11061
+ visibility: visible;
10987
11062
  }
10988
11063
 
10989
11064
  .pf-v6-c-nav__list {
10990
11065
  row-gap: var(--pf-v6-c-nav__list--RowGap);
10991
11066
  column-gap: var(--pf-v6-c-nav__list--ColumnGap);
11067
+ min-height: 0;
10992
11068
  }
10993
11069
 
10994
11070
  .pf-v6-c-nav__subnav {
10995
11071
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
11072
+ grid-template-rows: 1fr;
11073
+ min-height: 0;
11074
+ padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
11075
+ padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
10996
11076
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
11077
+ overflow-y: clip;
11078
+ transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expansion);
11079
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expansion);
11080
+ transition-property: grid-template-rows, padding-block-start, padding-block-end, opacity;
11081
+ }
11082
+ .pf-v6-c-nav__subnav[hidden] {
11083
+ --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion);
11084
+ --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
11085
+ --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
11086
+ grid-template-rows: 0fr;
11087
+ opacity: 0;
10997
11088
  }
10998
11089
 
10999
11090
  .pf-v6-c-nav__item {
11000
- row-gap: var(--pf-v6-c-nav__item--RowGap);
11001
11091
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
11002
11092
  }
11003
11093
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
11004
11094
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
11005
11095
  }
11006
- .pf-v6-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) {
11007
- margin-block-end: var(--pf-v6-c-nav__item--m-expanded--MarginBlockEnd, var(--pf-v6-c-nav__item--RowGap));
11008
- }
11009
- .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 {
11010
- inset-block-start: calc(var(--pf-v6-c-nav__item--RowGap) * -1 - var(--pf-v6-c-nav__list--RowGap));
11096
+ .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
11097
+ margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
11011
11098
  }
11012
11099
 
11013
11100
  .pf-v6-c-nav__section {
@@ -11042,9 +11129,9 @@ ul.pf-v6-c-list {
11042
11129
  background-color: var(--pf-v6-c-nav__link--BackgroundColor);
11043
11130
  border: none;
11044
11131
  border-radius: var(--pf-v6-c-nav__link--BorderRadius);
11045
- }
11046
- .pf-v6-c-nav__link[aria-expanded=true]::before {
11047
- inset-block-end: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
11132
+ transition-timing-function: var(--pf-v6-c-nav__link--TransitionTimingFunction--background-color), var(--pf-v6-c-nav__link--m-current--TransitionTimingFunction--color);
11133
+ transition-duration: var(--pf-v6-c-nav__link--TransitionDuration--background-color), var(--pf-v6-c-nav__link--m-current--TransitionDuration--color);
11134
+ transition-property: background-color, color;
11048
11135
  }
11049
11136
  .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
11050
11137
  color: var(--pf-v6-c-nav__link--hover--Color);
@@ -11069,6 +11156,9 @@ ul.pf-v6-c-list {
11069
11156
 
11070
11157
  .pf-v6-c-nav__toggle-icon {
11071
11158
  display: inline-block;
11159
+ transition-timing-function: var(--pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform);
11160
+ transition-duration: var(--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform);
11161
+ transition-property: transform;
11072
11162
  transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
11073
11163
  }
11074
11164
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__toggle-icon {
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.5",
3
+ "version": "6.2.0-prerelease.7",
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.9",
22
+ "@patternfly/patternfly": "6.2.0-prerelease.14",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.0"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "4c026dda42ab4c8fabacf1762ccf0ff785237a80"
27
+ "gitHead": "fb25d761a922d5ae5f893997cb647fa445bb88c9"
28
28
  }