@patternfly/patternfly 6.2.0-prerelease.11 → 6.2.0-prerelease.12

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 (9) hide show
  1. package/components/Alert/alert-group.css +50 -7
  2. package/components/Alert/alert-group.scss +114 -28
  3. package/components/_index.css +50 -7
  4. package/docs/components/Alert/examples/Alert.md +6 -0
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +50 -7
  7. package/patternfly.css +50 -7
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/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/components/Alert/alert-group.scss CHANGED
@@ -11,6 +11,60 @@
11
11
  --#{$alert-group}--m-toast--MaxWidth: #{pf-size-prem(600px)};
12
12
  --#{$alert-group}--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
13
13
 
14
+ // Alert group item addition reduced motion
15
+ --#{$alert-group}--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
16
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
17
+ --#{$alert-group}--m-toast__item--Transition--opacity--default: var(--#{$alert-group}--m-toast__item--TransitionDuration--opacity--default)
18
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity--default)
19
+ 0s;
20
+
21
+ // Alert group item addition
22
+ --#{$alert-group}--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
23
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
24
+ --#{$alert-group}--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
25
+ --#{$alert-group}--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
26
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
27
+ --#{$alert-group}--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
28
+ --#{$alert-group}--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
29
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
30
+ --#{$alert-group}--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
31
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
32
+
33
+ // Alert addition
34
+ --#{$alert-group}--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
35
+ --#{$alert-group}--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
36
+ --#{$alert-group}--m-toast__item--c-alert--Transition: all
37
+ var(--#{$alert-group}--m-toast__item--c-alert--TransitionDuration)
38
+ var(--#{$alert-group}--m-toast__item--c-alert--TransitionTimingFunction)
39
+ 0s;
40
+
41
+ // Alert group item removal reduced motion
42
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
43
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
44
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
45
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
46
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
47
+
48
+ // Alert group item removal
49
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
50
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
51
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
52
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
53
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
54
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
55
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
56
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
57
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
58
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
59
+
60
+ // Alert removal
61
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
62
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
63
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition: all
64
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
65
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
66
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
67
+
14
68
  // Overflow button
15
69
  --#{$alert-group}__overflow-button--BorderWidth: 0;
16
70
  --#{$alert-group}__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
@@ -71,7 +125,7 @@
71
125
  // Reduced motion by default
72
126
  // transparency change only
73
127
  transition:
74
- opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
128
+ opacity var(--#{$alert-group}--m-toast__item--Transition--opacity--default);
75
129
  transform: translateX(0) translateY(0);
76
130
 
77
131
  // This transition will happen when the item is added (.pf-m-offstage-top is removed)
@@ -79,14 +133,24 @@
79
133
  // These values are for regular motion
80
134
  @media screen and (prefers-reduced-motion: no-preference) {
81
135
  transition:
82
- 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),
83
- 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),
84
- grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s,
85
- margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
136
+ opacity
137
+ var(--#{$alert-group}--m-toast__item--TransitionDuration--opacity)
138
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity)
139
+ var(--#{$alert-group}--m-toast__item--TransitionDelay--opacity),
140
+ transform
141
+ var(--#{$alert-group}--m-toast__item--TransitionDuration--transform)
142
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--transform)
143
+ var(--#{$alert-group}--m-toast__item--TransitionDelay--transform),
144
+ grid-template-rows
145
+ var(--#{$alert-group}--m-toast__item--TransitionDuration--grid-template-rows)
146
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--grid-template-rows),
147
+ margin-block
148
+ var(--#{$alert-group}--m-toast__item--TransitionDuration--margin-block)
149
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--margin-block);
86
150
 
87
- & .pf-v6-c-alert {
88
- transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
89
- }
151
+ & .pf-v6-c-alert {
152
+ transition: var(--#{$alert-group}--m-toast__item--c-alert--Transition);
153
+ }
90
154
  }
91
155
 
92
156
  // This class is used BEFORE the alert item comes into the list
@@ -117,30 +181,52 @@
117
181
 
118
182
  // This transition will happen when the item is removed
119
183
  // Reduced motion by default
120
- // transparency change only
184
+ // transparency change only, the other properties are delayed until opacity reaches 0 then collapse instantly
121
185
  transition:
122
- opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
123
- transform: translateX(100%);
124
-
125
- & .pf-v6-c-alert {
126
- min-height: 0;
127
- padding-block-start: 0;
128
- padding-block-end: 0;
129
- border-width: 0;
130
- }
131
-
132
- // This transition will happen when the item is added (.pf-m-offstage-top is removed)
133
- // give it height, then slide it down into place
134
- // These values are for regular motion
135
- @media screen and (prefers-reduced-motion: no-preference) {
186
+ grid-template-rows
187
+ 0s
188
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default),
189
+ margin-block
190
+ 0s
191
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default),
192
+ opacity
193
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity--default)
194
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
195
+
196
+ & .pf-v6-c-alert {
197
+ min-height: 0;
198
+ padding-block-start: 0;
199
+ padding-block-end: 0;
200
+ border-width: 0;
201
+ transition:
202
+ all
203
+ 0s
204
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
205
+ }
206
+
207
+ // This transition will happen when the item is removed (.pf-m-offstage-right is added)
208
+ // Slide it down into place, then reduce height
209
+ // These values are for regular motion
210
+ @media screen and (prefers-reduced-motion: no-preference) {
136
211
  transition:
137
- transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s,
138
- opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s,
139
- 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),
140
- 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);
212
+ transform
213
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--transform)
214
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--transform),
215
+ opacity
216
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity)
217
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity),
218
+ margin-block
219
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--margin-block)
220
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block)
221
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block),
222
+ grid-template-rows
223
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows)
224
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows)
225
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
226
+ transform: translateX(100%);
141
227
 
142
228
  & .pf-v6-c-alert {
143
- 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);
229
+ transition: var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition);
144
230
  }
145
231
  }
146
232
  }
package/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 {
package/docs/components/Alert/examples/Alert.md CHANGED
@@ -727,6 +727,12 @@ For sighted users, interactive elements can be included in this message in one o
727
727
  <span class="pf-v6-screen-reader">Success alert:</span>
728
728
  Success toast alert title
729
729
  </p>
730
+ <div class="pf-v6-c-alert__description">
731
+ <p>
732
+ Info toast alert description. From the settings tab, click
733
+ <a href="#">View logs</a>&nbsp;to review the details.
734
+ </p>
735
+ </div>
730
736
  <div class="pf-v6-c-alert__action">
731
737
  <button
732
738
  class="pf-v6-c-button pf-m-plain"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.2.0-prerelease.11",
4
+ "version": "6.2.0-prerelease.12",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -8036,6 +8036,48 @@
8036
8036
  --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
8037
8037
  --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
8038
8038
  --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
8039
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
8040
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
8041
+ --pf-v6-c-alert-group--m-toast__item--Transition--opacity--default: var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default)
8042
+ var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default)
8043
+ 0s;
8044
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
8045
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
8046
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
8047
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
8048
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
8049
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
8050
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
8051
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
8052
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
8053
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
8054
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
8055
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
8056
+ --pf-v6-c-alert-group--m-toast__item--c-alert--Transition: all
8057
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
8058
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
8059
+ 0s;
8060
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
8061
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
8062
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
8063
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
8064
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
8065
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
8066
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
8067
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
8068
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
8069
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
8070
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
8071
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
8072
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
8073
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
8074
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
8075
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
8076
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
8077
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: all
8078
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
8079
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
8080
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
8039
8081
  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
8040
8082
  --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
8041
8083
  --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -8084,15 +8126,15 @@
8084
8126
  display: grid;
8085
8127
  grid-template-rows: 1fr;
8086
8128
  opacity: 1;
8087
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
8129
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
8088
8130
  transform: translateX(0) translateY(0);
8089
8131
  }
8090
8132
  @media screen and (prefers-reduced-motion: no-preference) {
8091
8133
  .pf-v6-c-alert-group__item {
8092
- 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;
8134
+ 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);
8093
8135
  }
8094
8136
  .pf-v6-c-alert-group__item .pf-v6-c-alert {
8095
- transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
8137
+ transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
8096
8138
  }
8097
8139
  }
8098
8140
  .pf-v6-c-alert-group__item.pf-m-offstage-top {
@@ -8113,21 +8155,22 @@
8113
8155
  margin-block: 0;
8114
8156
  overflow: hidden;
8115
8157
  opacity: 0;
8116
- transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
8117
- transform: translateX(100%);
8158
+ 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);
8118
8159
  }
8119
8160
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
8120
8161
  min-height: 0;
8121
8162
  padding-block-start: 0;
8122
8163
  padding-block-end: 0;
8123
8164
  border-width: 0;
8165
+ transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
8124
8166
  }
8125
8167
  @media screen and (prefers-reduced-motion: no-preference) {
8126
8168
  .pf-v6-c-alert-group__item.pf-m-offstage-right {
8127
- 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);
8169
+ 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);
8170
+ transform: translateX(100%);
8128
8171
  }
8129
8172
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
8130
- 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);
8173
+ transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition);
8131
8174
  }
8132
8175
  }
8133
8176
  .pf-v6-c-alert-group__item:hover {