@patternfly/react-templates 6.4.1-prerelease.8 → 6.5.0-prerelease.1

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 (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-Cs3FSG0J.css → output-dwqxFv-S.css} +2066 -2038
  6. package/dist/umd/react-templates.min.js +1 -1
  7. package/package.json +6 -6
package/dist/umd/assets/{output-Cs3FSG0J.css → output-dwqxFv-S.css} RENAMED
@@ -3,568 +3,6 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-divider {
7
- --pf-v6-c-divider--Display: flex;
8
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
9
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
10
- --pf-v6-c-divider--before--FlexBasis: 100%;
11
- }
12
-
13
- .pf-v6-c-divider {
14
- flex-direction: row;
15
- width: 100%;
16
- height: var(--pf-v6-c-divider--Size);
17
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
18
- --pf-v6-hidden-visible--hidden--Display: none;
19
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
20
- display: var(--pf-v6-hidden-visible--Display);
21
- flex-shrink: 0;
22
- align-items: stretch;
23
- align-self: stretch;
24
- justify-content: center;
25
- border: 0;
26
- }
27
-
28
- .pf-v6-c-divider.pf-m-hidden {
29
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
30
- }
31
-
32
- @media screen and (min-width: 36rem) {
33
- .pf-v6-c-divider.pf-m-hidden-on-sm {
34
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
35
- }
36
- .pf-v6-c-divider.pf-m-visible-on-sm {
37
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
38
- }
39
- }
40
- @media screen and (min-width: 48rem) {
41
- .pf-v6-c-divider.pf-m-hidden-on-md {
42
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
43
- }
44
- .pf-v6-c-divider.pf-m-visible-on-md {
45
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
46
- }
47
- }
48
- @media screen and (min-width: 62rem) {
49
- .pf-v6-c-divider.pf-m-hidden-on-lg {
50
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
51
- }
52
- .pf-v6-c-divider.pf-m-visible-on-lg {
53
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
54
- }
55
- }
56
- @media screen and (min-width: 75rem) {
57
- .pf-v6-c-divider.pf-m-hidden-on-xl {
58
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
59
- }
60
- .pf-v6-c-divider.pf-m-visible-on-xl {
61
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
62
- }
63
- }
64
- @media screen and (min-width: 90.625rem) {
65
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
66
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
67
- }
68
- .pf-v6-c-divider.pf-m-visible-on-2xl {
69
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
70
- }
71
- }
72
- .pf-v6-c-divider::before {
73
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
74
- content: "";
75
- background-color: var(--pf-v6-c-divider--Color);
76
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
77
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
78
- }
79
-
80
- .pf-v6-c-divider.pf-m-horizontal {
81
- flex-direction: row;
82
- width: 100%;
83
- height: var(--pf-v6-c-divider--Size);
84
- }
85
-
86
- .pf-v6-c-divider.pf-m-vertical {
87
- flex-direction: column;
88
- width: var(--pf-v6-c-divider--Size);
89
- height: inherit;
90
- }
91
-
92
- .pf-v6-c-divider.pf-m-inset-none {
93
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
94
- }
95
-
96
- .pf-v6-c-divider.pf-m-inset-xs {
97
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
98
- }
99
-
100
- .pf-v6-c-divider.pf-m-inset-sm {
101
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
102
- }
103
-
104
- .pf-v6-c-divider.pf-m-inset-md {
105
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
106
- }
107
-
108
- .pf-v6-c-divider.pf-m-inset-lg {
109
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
110
- }
111
-
112
- .pf-v6-c-divider.pf-m-inset-xl {
113
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
114
- }
115
-
116
- .pf-v6-c-divider.pf-m-inset-2xl {
117
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
118
- }
119
-
120
- .pf-v6-c-divider.pf-m-inset-3xl {
121
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
122
- }
123
-
124
- @media (min-width: 36rem) {
125
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
126
- flex-direction: row;
127
- width: 100%;
128
- height: var(--pf-v6-c-divider--Size);
129
- }
130
- }
131
- @media (min-width: 36rem) {
132
- .pf-v6-c-divider.pf-m-vertical-on-sm {
133
- flex-direction: column;
134
- width: var(--pf-v6-c-divider--Size);
135
- height: inherit;
136
- }
137
- }
138
- @media (min-width: 36rem) {
139
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
140
- --pf-v6-c-divider--before--FlexBasis: 100%;
141
- }
142
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
143
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
144
- }
145
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
146
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
147
- }
148
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
149
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
150
- }
151
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
152
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
153
- }
154
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
155
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
156
- }
157
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
158
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
159
- }
160
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
161
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
162
- }
163
- }
164
- @media (min-width: 48rem) {
165
- .pf-v6-c-divider.pf-m-horizontal-on-md {
166
- flex-direction: row;
167
- width: 100%;
168
- height: var(--pf-v6-c-divider--Size);
169
- }
170
- }
171
- @media (min-width: 48rem) {
172
- .pf-v6-c-divider.pf-m-vertical-on-md {
173
- flex-direction: column;
174
- width: var(--pf-v6-c-divider--Size);
175
- height: inherit;
176
- }
177
- }
178
- @media (min-width: 48rem) {
179
- .pf-v6-c-divider.pf-m-inset-none-on-md {
180
- --pf-v6-c-divider--before--FlexBasis: 100%;
181
- }
182
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
183
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
184
- }
185
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
186
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
187
- }
188
- .pf-v6-c-divider.pf-m-inset-md-on-md {
189
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
190
- }
191
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
192
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
193
- }
194
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
195
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
196
- }
197
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
198
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
199
- }
200
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
201
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
202
- }
203
- }
204
- @media (min-width: 62rem) {
205
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
206
- flex-direction: row;
207
- width: 100%;
208
- height: var(--pf-v6-c-divider--Size);
209
- }
210
- }
211
- @media (min-width: 62rem) {
212
- .pf-v6-c-divider.pf-m-vertical-on-lg {
213
- flex-direction: column;
214
- width: var(--pf-v6-c-divider--Size);
215
- height: inherit;
216
- }
217
- }
218
- @media (min-width: 62rem) {
219
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
220
- --pf-v6-c-divider--before--FlexBasis: 100%;
221
- }
222
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
223
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
224
- }
225
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
226
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
227
- }
228
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
229
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
230
- }
231
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
232
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
233
- }
234
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
235
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
236
- }
237
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
238
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
239
- }
240
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
241
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
242
- }
243
- }
244
- @media (min-width: 75rem) {
245
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
246
- flex-direction: row;
247
- width: 100%;
248
- height: var(--pf-v6-c-divider--Size);
249
- }
250
- }
251
- @media (min-width: 75rem) {
252
- .pf-v6-c-divider.pf-m-vertical-on-xl {
253
- flex-direction: column;
254
- width: var(--pf-v6-c-divider--Size);
255
- height: inherit;
256
- }
257
- }
258
- @media (min-width: 75rem) {
259
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
260
- --pf-v6-c-divider--before--FlexBasis: 100%;
261
- }
262
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
263
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
264
- }
265
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
266
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
267
- }
268
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
269
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
270
- }
271
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
272
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
273
- }
274
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
275
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
276
- }
277
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
278
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
279
- }
280
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
281
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
282
- }
283
- }
284
- @media (min-width: 90.625rem) {
285
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
286
- flex-direction: row;
287
- width: 100%;
288
- height: var(--pf-v6-c-divider--Size);
289
- }
290
- }
291
- @media (min-width: 90.625rem) {
292
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
293
- flex-direction: column;
294
- width: var(--pf-v6-c-divider--Size);
295
- height: inherit;
296
- }
297
- }
298
- @media (min-width: 90.625rem) {
299
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
300
- --pf-v6-c-divider--before--FlexBasis: 100%;
301
- }
302
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
303
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
304
- }
305
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
306
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
307
- }
308
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
309
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
310
- }
311
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
312
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
313
- }
314
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
315
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
316
- }
317
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
318
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
319
- }
320
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
321
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
322
- }
323
- }
324
- .pf-v6-c-text-input-group {
325
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
326
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
327
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
328
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
329
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
330
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
331
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
332
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
333
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
334
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
335
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
336
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
337
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
338
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
339
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
340
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
341
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
342
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
343
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
344
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
345
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
346
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
347
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
348
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
349
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
350
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
351
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
352
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
353
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
354
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
355
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
356
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
357
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
358
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
359
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
360
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
361
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
362
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
363
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
364
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
365
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
366
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
367
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
368
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
369
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
370
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
371
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
372
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
373
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
374
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
375
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
376
- }
377
-
378
- .pf-v6-c-text-input-group {
379
- position: relative;
380
- display: flex;
381
- width: 100%;
382
- font-size: var(--pf-v6-c-text-input-group__FontSize);
383
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
384
- color: var(--pf-v6-c-text-input-group--Color, inherit);
385
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
386
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
387
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
388
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
389
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
390
- }
391
-
392
- .pf-v6-c-text-input-group::before {
393
- position: absolute;
394
- inset: 0;
395
- pointer-events: none;
396
- content: "";
397
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
398
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
399
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
400
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
401
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
402
- }
403
-
404
- .pf-v6-c-text-input-group.pf-m-disabled {
405
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
406
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
407
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
408
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
409
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
410
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
411
- pointer-events: none;
412
- }
413
-
414
- .pf-v6-c-text-input-group.pf-m-plain {
415
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
416
- }
417
-
418
- .pf-v6-c-text-input-group.pf-m-plain::before {
419
- border: 0;
420
- }
421
-
422
- .pf-v6-c-text-input-group.pf-m-success {
423
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
424
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
425
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
426
- }
427
-
428
- .pf-v6-c-text-input-group.pf-m-warning {
429
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
430
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
431
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
432
- }
433
-
434
- .pf-v6-c-text-input-group.pf-m-error {
435
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
436
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
437
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
438
- }
439
-
440
- @media (prefers-reduced-motion: no-preference) {
441
- .pf-v6-c-text-input-group.pf-m-error {
442
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
443
- animation-name: pf-v6-global-danger-jiggle-motion;
444
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
445
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
446
- animation-fill-mode: both;
447
- }
448
- }
449
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
450
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
451
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
452
- animation-name: pf-v6-global-fade-in;
453
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
454
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
455
- }
456
-
457
- .pf-v6-c-text-input-group:hover {
458
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
459
- }
460
-
461
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
462
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
463
- }
464
-
465
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
466
- --pf-v6-c-text-input-group__text--Position: relative;
467
- }
468
-
469
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
470
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
471
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
472
- }
473
-
474
- .pf-v6-c-text-input-group__main {
475
- display: flex;
476
- flex: 1;
477
- flex-wrap: wrap;
478
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
479
- min-width: 0;
480
- }
481
-
482
- .pf-v6-c-text-input-group__main.pf-m-icon {
483
- --pf-v6-c-text-input-group__text--Position: relative;
484
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
485
- display: inline-flex;
486
- align-items: center;
487
- justify-content: center;
488
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
489
- }
490
-
491
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
492
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
493
- }
494
-
495
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
496
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
497
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
498
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
499
- }
500
-
501
- .pf-v6-c-text-input-group__text {
502
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
503
- display: inline-grid;
504
- flex: 1;
505
- grid-template-areas: "text-input";
506
- grid-template-columns: 1fr;
507
- }
508
-
509
- .pf-v6-c-text-input-group__icon {
510
- position: absolute;
511
- inset-block-start: 50%;
512
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
513
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
514
- color: var(--pf-v6-c-text-input-group__icon--Color);
515
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
516
- }
517
-
518
- .pf-v6-c-text-input-group__icon.pf-m-status {
519
- inset-inline-start: auto;
520
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
521
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
522
- }
523
-
524
- .pf-v6-c-text-input-group__text-input {
525
- overflow: hidden;
526
- text-overflow: ellipsis;
527
- white-space: nowrap;
528
- position: relative;
529
- width: 100%;
530
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
531
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
532
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
533
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
534
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
535
- color: var(--pf-v6-c-text-input-group__text-input--Color);
536
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
537
- border: 0;
538
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
539
- }
540
-
541
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
542
- grid-area: text-input;
543
- }
544
-
545
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
546
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
547
- }
548
-
549
- .pf-v6-c-text-input-group__text-input::placeholder {
550
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
551
- }
552
-
553
- .pf-v6-c-text-input-group__utilities {
554
- display: flex;
555
- align-items: center;
556
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
557
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
558
- }
559
-
560
- .pf-v6-c-text-input-group__utilities > * + * {
561
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
562
- }
563
-
564
- .pf-v6-c-text-input-group__group {
565
- display: flex;
566
- }
567
-
568
6
  .pf-v6-c-button {
569
7
  --pf-v6-c-button--Display: inline-flex;
570
8
  --pf-v6-c-button--AlignItems: baseline;
@@ -882,6 +320,14 @@
882
320
  --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
883
321
  --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
884
322
  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
323
+ --pf-v6-c-button--m-circle--ScaleX: 1.29;
324
+ --pf-v6-c-button--m-circle--ScaleY: 1.29;
325
+ --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
326
+ --pf-v6-c-button--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
327
+ --pf-v6-c-button--m-circle--PaddingBlockStart: var(--pf-v6-c-button--m-circle--Padding--base);
328
+ --pf-v6-c-button--m-circle--PaddingInlineEnd: 0;
329
+ --pf-v6-c-button--m-circle--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--Padding--base);
330
+ --pf-v6-c-button--m-circle--PaddingInlineStart: 0;
885
331
  }
886
332
 
887
333
  .pf-v6-c-button {
@@ -1279,6 +725,18 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1279
725
  --pf-v6-c-button--hover__icon--ScaleX: 1;
1280
726
  }
1281
727
 
728
+ .pf-v6-c-button.pf-m-circle {
729
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
730
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
731
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
732
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
733
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
734
+ }
735
+
736
+ .pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
737
+ scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
738
+ }
739
+
1282
740
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
1283
741
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
1284
742
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -1351,1647 +809,2098 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1351
809
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
1352
810
  }
1353
811
 
1354
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
1355
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
1356
- --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
812
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
813
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
814
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
815
+ }
816
+
817
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
818
+ opacity: 0;
819
+ }
820
+
821
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
822
+ animation-name: pf-v6-c-button-icon-notify;
823
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
824
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
825
+ }
826
+
827
+ .pf-v6-c-button__icon {
828
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
829
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
830
+ color: var(--pf-v6-c-button__icon--Color);
831
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
832
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
833
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
834
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
835
+ rotate: var(--pf-v6-c-button__icon--Rotate);
836
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
837
+ }
838
+
839
+ .pf-v6-c-button__icon.pf-m-start {
840
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
841
+ }
842
+
843
+ .pf-v6-c-button__icon.pf-m-end {
844
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
845
+ }
846
+
847
+ .pf-v6-c-button__icon-favorite,
848
+ .pf-v6-c-button__icon-favorited {
849
+ grid-area: 1/1/1/1;
850
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
851
+ transition-property: opacity;
852
+ }
853
+
854
+ .pf-v6-c-button__icon-favorite {
855
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
856
+ }
857
+
858
+ .pf-v6-c-button__icon-favorited {
859
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
860
+ }
861
+
862
+ .pf-v6-c-button__progress {
863
+ position: absolute;
864
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
865
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
866
+ line-height: 1;
867
+ color: var(--pf-v6-c-button__progress--Color);
868
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
869
+ }
870
+
871
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
872
+ --pf-v6-c-spinner--Color: currentcolor;
873
+ }
874
+
875
+ .pf-v6-c-button__text {
876
+ text-decoration: inherit;
877
+ }
878
+
879
+ .pf-v6-c-button__count {
880
+ display: inline-flex;
881
+ align-items: center;
882
+ }
883
+
884
+ .pf-v6-c-button--hamburger-icon path {
885
+ fill: none;
886
+ stroke: currentcolor;
887
+ stroke-linecap: round;
888
+ stroke-linejoin: round;
889
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
890
+ }
891
+
892
+ .pf-v6-c-button--hamburger-icon--top {
893
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
894
+ }
895
+
896
+ .pf-v6-c-button--hamburger-icon--middle {
897
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
898
+ }
899
+
900
+ .pf-v6-c-button--hamburger-icon--arrow {
901
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
902
+ }
903
+
904
+ .pf-v6-c-button--hamburger-icon--bottom {
905
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
906
+ }
907
+
908
+ @keyframes pf-v6-c-button-icon-notify {
909
+ 33% {
910
+ transform: rotate(30deg);
911
+ }
912
+ 66% {
913
+ transform: rotate(-60deg);
914
+ }
915
+ }
916
+ @keyframes pf-v6-c-button-icon-favorited {
917
+ 50% {
918
+ scale: 1.5;
919
+ }
920
+ }
921
+ .pf-v6-c-label {
922
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
923
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
924
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
925
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
926
+ --pf-v6-c-label--MaxWidth: 100%;
927
+ --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
928
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
929
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
930
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
931
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
932
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
933
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
934
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
935
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
936
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
937
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
938
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
939
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
940
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
941
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
942
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
943
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
944
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
945
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
946
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
947
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
948
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
949
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
950
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
951
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
952
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
953
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
954
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
955
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
956
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
957
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
958
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
959
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
960
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
961
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
962
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
963
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
964
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
965
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
966
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
967
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
968
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
969
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
970
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
971
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
972
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
973
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
974
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
975
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
976
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
977
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
978
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
979
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
980
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
981
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
982
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
983
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
984
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
985
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
986
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
987
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
988
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
989
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
990
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
991
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
992
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
993
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
994
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
995
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
996
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
997
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
998
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
999
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1000
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1001
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1002
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1003
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1004
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1005
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1006
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1007
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1008
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1009
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1010
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1011
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1012
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1013
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1014
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1015
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1016
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1017
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1018
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1019
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1020
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1021
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1022
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1023
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1024
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1025
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1026
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1027
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1028
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1029
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1030
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1031
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1032
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1033
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1034
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1035
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1036
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1037
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1038
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1039
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1040
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1041
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1042
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1043
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1044
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1045
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1046
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1047
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1048
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1049
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1050
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1051
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1052
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1053
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1054
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1055
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1056
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1057
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1058
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1059
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1060
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1061
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1062
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1063
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1064
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1065
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1066
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1067
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1068
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1069
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1070
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1071
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1072
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1073
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1074
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
1075
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1076
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1077
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1078
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1079
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1080
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1081
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1082
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1083
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1084
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1085
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1086
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1087
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
1088
+ --pf-v6-c-label__content--MaxWidth: 100%;
1089
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1090
+ --pf-v6-c-label__content--Cursor: initial;
1091
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1092
+ --pf-v6-c-label__text--MaxWidth: 100%;
1093
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
1094
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1095
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1096
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
1097
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
1098
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
1099
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
1100
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
1101
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
1102
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1103
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1104
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1105
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1106
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1107
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1108
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
1109
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1110
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1111
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1112
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1113
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1114
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1115
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1116
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1117
+ }
1118
+
1119
+ .pf-v6-c-label {
1120
+ position: relative;
1121
+ gap: var(--pf-v6-c-label--Gap);
1122
+ min-width: var(--pf-v6-c-label--MinWidth);
1123
+ max-width: var(--pf-v6-c-label--MaxWidth);
1124
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1125
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1126
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1127
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1128
+ font-size: var(--pf-v6-c-label--FontSize);
1129
+ white-space: nowrap;
1130
+ background: transparent;
1131
+ isolation: isolate;
1132
+ border: 0;
1133
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1357
1134
  }
1358
1135
 
1359
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
1360
- opacity: 0;
1136
+ .pf-v6-c-label.pf-m-blue {
1137
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1138
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1139
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1140
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1141
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1142
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1143
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1144
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1361
1145
  }
1362
1146
 
1363
- .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
1364
- animation-name: pf-v6-c-button-icon-notify;
1365
- animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
1366
- animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
1147
+ .pf-v6-c-label.pf-m-red {
1148
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1149
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1150
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1151
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1152
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1153
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1154
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1155
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1367
1156
  }
1368
1157
 
1369
- .pf-v6-c-button__icon {
1370
- margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
1371
- margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
1372
- color: var(--pf-v6-c-button__icon--Color);
1373
- transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
1374
- transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
1375
- transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
1376
- transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
1377
- rotate: var(--pf-v6-c-button__icon--Rotate);
1378
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
1158
+ .pf-v6-c-label.pf-m-orange {
1159
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1160
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1161
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1162
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1163
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1164
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1165
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1166
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1379
1167
  }
1380
1168
 
1381
- .pf-v6-c-button__icon.pf-m-start {
1382
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
1169
+ .pf-v6-c-label.pf-m-orangered {
1170
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1171
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1172
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1173
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1174
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1175
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1176
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1177
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1383
1178
  }
1384
1179
 
1385
- .pf-v6-c-button__icon.pf-m-end {
1386
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
1180
+ .pf-v6-c-label.pf-m-yellow {
1181
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1182
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1183
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1184
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1185
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1186
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1187
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1188
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1387
1189
  }
1388
1190
 
1389
- .pf-v6-c-button__icon-favorite,
1390
- .pf-v6-c-button__icon-favorited {
1391
- grid-area: 1/1/1/1;
1392
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
1393
- transition-property: opacity;
1191
+ .pf-v6-c-label.pf-m-green {
1192
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1193
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1194
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1195
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1196
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1197
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1198
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1199
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1394
1200
  }
1395
1201
 
1396
- .pf-v6-c-button__icon-favorite {
1397
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
1202
+ .pf-v6-c-label.pf-m-teal {
1203
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1204
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1205
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1206
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1207
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1208
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1209
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1210
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1398
1211
  }
1399
1212
 
1400
- .pf-v6-c-button__icon-favorited {
1401
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
1213
+ .pf-v6-c-label.pf-m-purple {
1214
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1215
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1216
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1217
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1218
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1219
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1220
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1221
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1402
1222
  }
1403
1223
 
1404
- .pf-v6-c-button__progress {
1405
- position: absolute;
1406
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
1407
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
1408
- line-height: 1;
1409
- color: var(--pf-v6-c-button__progress--Color);
1410
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
1224
+ .pf-v6-c-label.pf-m-success {
1225
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1226
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1227
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1228
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1229
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1230
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1231
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1232
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1233
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1234
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1411
1235
  }
1412
1236
 
1413
- .pf-v6-c-button__progress .pf-v6-c-spinner {
1414
- --pf-v6-c-spinner--Color: currentcolor;
1237
+ .pf-v6-c-label.pf-m-warning {
1238
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1239
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1240
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1241
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1242
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1243
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1244
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1245
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1246
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1247
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
1415
1248
  }
1416
1249
 
1417
- .pf-v6-c-button__text {
1418
- text-decoration: inherit;
1250
+ .pf-v6-c-label.pf-m-danger {
1251
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1252
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1253
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1254
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1255
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1256
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1257
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1258
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1259
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1260
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
1419
1261
  }
1420
1262
 
1421
- .pf-v6-c-button__count {
1422
- display: inline-flex;
1423
- align-items: center;
1263
+ .pf-v6-c-label.pf-m-info {
1264
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1265
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1266
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1267
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1268
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1269
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1270
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1271
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1272
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1273
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
1424
1274
  }
1425
1275
 
1426
- .pf-v6-c-button--hamburger-icon path {
1427
- fill: none;
1428
- stroke: currentcolor;
1429
- stroke-linecap: round;
1430
- stroke-linejoin: round;
1431
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
1276
+ .pf-v6-c-label.pf-m-custom {
1277
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1278
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1279
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1280
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1281
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1282
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1283
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1284
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1285
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1286
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1432
1287
  }
1433
1288
 
1434
- .pf-v6-c-button--hamburger-icon--top {
1435
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
1289
+ .pf-v6-c-label.pf-m-compact {
1290
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1291
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1292
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1293
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1294
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1295
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1296
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1436
1297
  }
1437
1298
 
1438
- .pf-v6-c-button--hamburger-icon--middle {
1439
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
1299
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1300
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1440
1301
  }
1441
1302
 
1442
- .pf-v6-c-button--hamburger-icon--arrow {
1443
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
1303
+ .pf-v6-c-label.pf-m-outline {
1304
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1305
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1306
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1307
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1308
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1309
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1310
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1311
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1312
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1313
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1444
1314
  }
1445
1315
 
1446
- .pf-v6-c-button--hamburger-icon--bottom {
1447
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
1316
+ .pf-v6-c-label.pf-m-editable {
1317
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1318
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1448
1319
  }
1449
1320
 
1450
- @keyframes pf-v6-c-button-icon-notify {
1451
- 33% {
1452
- transform: rotate(30deg);
1453
- }
1454
- 66% {
1455
- transform: rotate(-60deg);
1456
- }
1457
- }
1458
- @keyframes pf-v6-c-button-icon-favorited {
1459
- 50% {
1460
- scale: 1.5;
1461
- }
1321
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1322
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1323
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1462
1324
  }
1463
- .pf-v6-c-menu-toggle {
1464
- --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1465
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1466
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1467
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1468
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1469
- --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
1470
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
1471
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
1472
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
1473
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
1474
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
1475
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
1476
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
1477
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
1478
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1479
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1480
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
1481
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
1482
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
1483
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
1484
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
1485
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1486
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
1487
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
1488
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
1489
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
1490
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1491
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1492
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1493
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1494
- --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1495
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1496
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1497
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
1498
- --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
1499
- --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
1500
- --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
1501
- --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
1502
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
1503
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
1504
- --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
1505
- --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
1506
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1507
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1508
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1509
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1510
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1511
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1512
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
1513
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
1514
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
1515
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1516
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
1517
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
1518
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1519
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
1520
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1521
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
1522
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
1523
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1524
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1525
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1526
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1527
- --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
1528
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
1529
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
1530
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
1531
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1532
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1533
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
1534
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
1535
- --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
1536
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1537
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
1538
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
1539
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
1540
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1541
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1542
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1543
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
1544
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
1545
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1546
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1547
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
1548
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
1549
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
1550
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
1551
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
1552
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
1553
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1554
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1555
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
1556
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1557
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
1558
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1559
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
1560
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
1561
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1562
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
1563
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
1564
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
1565
- --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
1566
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1567
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1568
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1569
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1570
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1571
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1572
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1573
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
1574
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1575
- --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
1576
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1577
- --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1578
- --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
1579
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1580
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1581
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1582
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
1583
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1584
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
1585
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
1586
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1587
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1588
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
1589
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
1590
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
1591
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1592
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1593
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
1594
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
1595
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1596
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1597
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
1598
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1599
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1600
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1601
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1602
- --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
1603
- --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
1604
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
1605
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
1606
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1607
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1608
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1609
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1610
- --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
1325
+
1326
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1327
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1328
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1329
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1611
1330
  }
1612
1331
 
1613
- .pf-v6-c-menu-toggle {
1614
- position: relative;
1615
- display: inline-flex;
1616
- gap: var(--pf-v6-c-menu-toggle--Gap);
1617
- align-items: center;
1618
- justify-content: center;
1619
- min-width: var(--pf-v6-c-menu-toggle--MinWidth);
1620
- max-width: 100%;
1621
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1622
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1623
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1624
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1625
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
1626
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
1627
- color: var(--pf-v6-c-menu-toggle--Color);
1628
- cursor: pointer;
1629
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
1630
- border: 0;
1631
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
1632
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
1633
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
1332
+ .pf-v6-c-label.pf-m-editable-active {
1333
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1334
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1335
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1336
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1634
1337
  }
1635
1338
 
1636
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
1637
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1339
+ .pf-v6-c-label.pf-m-overflow {
1340
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1341
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1342
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1638
1343
  }
1639
1344
 
1640
- .pf-v6-c-menu-toggle::before {
1641
- position: absolute;
1642
- inset-block-start: 0;
1643
- inset-block-end: 0;
1644
- inset-inline-start: 0;
1645
- inset-inline-end: 0;
1646
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
1647
- pointer-events: none;
1648
- content: "";
1649
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
1650
- transition: inherit;
1345
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1346
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1347
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1348
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1651
1349
  }
1652
1350
 
1653
- .pf-v6-c-menu-toggle.pf-m-primary {
1654
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
1655
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
1656
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
1657
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
1658
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
1659
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
1660
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
1661
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
1662
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
1663
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
1664
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
1665
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
1666
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
1667
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
1668
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
1669
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
1670
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
1351
+ .pf-v6-c-label.pf-m-add {
1352
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1353
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1354
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1355
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1671
1356
  }
1672
1357
 
1673
- .pf-v6-c-menu-toggle.pf-m-secondary {
1674
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
1675
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
1676
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
1677
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
1678
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
1679
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
1680
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
1681
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
1682
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
1683
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
1684
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
1685
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
1686
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
1687
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
1688
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
1689
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
1690
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
1358
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1359
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1360
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1361
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1362
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1691
1363
  }
1692
1364
 
1693
- .pf-v6-c-menu-toggle.pf-m-full-height {
1694
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
1695
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
1696
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
1365
+ .pf-v6-c-label.pf-m-clickable {
1366
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1367
+ }
1368
+
1369
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1370
+ text-decoration-line: none;
1371
+ }
1372
+
1373
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1374
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1375
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1376
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1377
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1378
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1379
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1380
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1381
+ }
1382
+
1383
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1384
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1385
+ }
1386
+
1387
+ .pf-v6-c-label.pf-m-disabled {
1388
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1389
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1390
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1391
+ --pf-v6-c-label--BorderWidth: 0;
1392
+ pointer-events: none;
1393
+ }
1394
+
1395
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1396
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1397
+ }
1398
+
1399
+ .pf-v6-c-label,
1400
+ .pf-v6-c-label__content {
1401
+ display: inline-flex;
1697
1402
  align-items: center;
1698
- height: 100%;
1403
+ justify-content: center;
1699
1404
  }
1700
1405
 
1701
- .pf-v6-c-menu-toggle.pf-m-full-width {
1702
- width: 100%;
1406
+ .pf-v6-c-label__text {
1407
+ overflow: hidden;
1408
+ text-overflow: ellipsis;
1409
+ white-space: nowrap;
1410
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
1703
1411
  }
1704
1412
 
1705
- .pf-v6-c-menu-toggle.pf-m-plain {
1706
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
1707
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
1708
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
1709
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1710
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
1711
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
1712
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
1713
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1714
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
1715
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
1716
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
1717
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1718
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1719
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
1720
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
1721
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
1413
+ .pf-v6-c-label__content {
1414
+ gap: var(--pf-v6-c-label__content--Gap);
1415
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
1416
+ padding: 0;
1417
+ overflow: hidden;
1418
+ color: var(--pf-v6-c-label--Color);
1419
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
1420
+ background: transparent;
1421
+ border-width: 0;
1722
1422
  }
1723
1423
 
1724
- .pf-v6-c-menu-toggle.pf-m-plain::before {
1725
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
1726
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
1424
+ .pf-v6-c-label__content::before {
1425
+ position: absolute;
1426
+ inset: 0;
1427
+ z-index: -1;
1428
+ pointer-events: none;
1429
+ content: "";
1430
+ background-color: var(--pf-v6-c-label--BackgroundColor);
1431
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1432
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1727
1433
  }
1728
1434
 
1729
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
1730
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
1731
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
1732
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
1733
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
1734
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
1735
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
1736
- --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
1737
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
1738
- --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
1739
- --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
1435
+ input.pf-v6-c-label__content {
1436
+ overflow: hidden;
1437
+ text-overflow: ellipsis;
1438
+ white-space: nowrap;
1740
1439
  }
1741
1440
 
1742
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
1743
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
1744
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
1745
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
1746
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
1747
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
1748
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
1441
+ .pf-v6-c-label__icon {
1442
+ color: var(--pf-v6-c-label__icon--Color);
1749
1443
  }
1750
1444
 
1751
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
1752
- border: 0;
1445
+ .pf-v6-c-label__actions {
1446
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1753
1447
  }
1754
1448
 
1755
- .pf-v6-c-menu-toggle.pf-m-small {
1756
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
1757
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
1758
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
1759
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
1760
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
1761
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
1762
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
1763
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
1449
+ .pf-v6-c-label__actions .pf-v6-c-button {
1450
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1451
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1452
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1453
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1454
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1455
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1456
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1457
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1764
1458
  }
1765
1459
 
1766
- .pf-v6-c-menu-toggle.pf-m-success {
1767
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
1768
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
1460
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1461
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1462
+ }
1463
+
1464
+ .pf-v6-c-label-group {
1465
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1466
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1467
+ --pf-v6-c-label-group--MaxWidth: 100%;
1468
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1469
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1470
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1471
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1472
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
1473
+ --pf-v6-c-label-group__main--MinWidth: 0;
1474
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1475
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1476
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1477
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1478
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
1479
+ --pf-v6-c-label-group__list--MinWidth: 0;
1480
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1481
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1482
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1483
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1484
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1485
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1486
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1487
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1488
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1489
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1490
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1491
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1492
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1493
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1494
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1495
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1496
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1497
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1498
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1499
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1500
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1501
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1769
1502
  }
1770
1503
 
1771
- .pf-v6-c-menu-toggle.pf-m-warning {
1772
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
1773
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
1504
+ .pf-v6-c-label-group {
1505
+ display: inline-flex;
1506
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1507
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1508
+ align-items: center;
1509
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1774
1510
  }
1775
1511
 
1776
- .pf-v6-c-menu-toggle.pf-m-danger {
1777
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
1778
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
1512
+ .pf-v6-c-label-group.pf-m-category {
1513
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1514
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1515
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1516
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1517
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1518
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1519
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1779
1520
  }
1780
1521
 
1781
- @media screen and (prefers-reduced-motion: no-preference) {
1782
- .pf-v6-c-menu-toggle.pf-m-danger {
1783
- transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
1784
- animation-name: pf-v6-c-menu-toggle-m-danger-motion;
1785
- animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
1786
- animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
1787
- animation-fill-mode: both;
1788
- }
1789
- }
1790
- .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
1791
- animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
1792
- animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
1793
- animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
1522
+ .pf-v6-c-label-group.pf-m-vertical {
1523
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1524
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1525
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1526
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1527
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1528
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1529
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1794
1530
  }
1795
1531
 
1796
- @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
1797
- from {
1798
- opacity: 0;
1799
- }
1800
- to {
1801
- opacity: 1;
1802
- }
1803
- }
1804
- .pf-v6-c-menu-toggle.pf-m-settings {
1805
- --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
1806
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
1807
- --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
1808
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
1809
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
1810
- --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
1811
- --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
1532
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1533
+ align-items: flex-start;
1812
1534
  }
1813
1535
 
1814
- .pf-v6-c-menu-toggle.pf-m-placeholder {
1815
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
1536
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1537
+ flex-direction: column;
1538
+ align-items: flex-start;
1539
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1816
1540
  }
1817
1541
 
1818
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
1819
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
1820
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
1821
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
1822
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
1823
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
1542
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1543
+ flex-direction: column;
1544
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1824
1545
  }
1825
1546
 
1826
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
1827
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
1828
- pointer-events: none;
1547
+ .pf-v6-c-label-group.pf-m-editable,
1548
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1549
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1550
+ display: flex;
1829
1551
  }
1830
1552
 
1831
- @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
1832
- syntax: "<length>";
1833
- inherits: false;
1834
- initial-value: 0;
1835
- }
1836
- @media (prefers-reduced-motion: no-preference) {
1837
- @keyframes pf-v6-c-menu-toggle-m-danger-motion {
1838
- 33% {
1839
- --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
1840
- }
1841
- 66% {
1842
- --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
1843
- }
1844
- }
1845
- }
1846
- .pf-v6-c-menu-toggle.pf-m-split-button {
1847
- --pf-v6-c-menu-toggle--Gap: 0;
1848
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1849
- padding: 0;
1553
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1554
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1555
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1556
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1557
+ flex: 1;
1850
1558
  }
1851
1559
 
1852
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
1853
- position: relative;
1854
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1855
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1856
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1857
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1560
+ .pf-v6-c-label-group__main {
1561
+ display: flex;
1562
+ flex: 1;
1563
+ flex-wrap: wrap;
1564
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1565
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1566
+ align-items: baseline;
1567
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1858
1568
  }
1859
1569
 
1860
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1861
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1862
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1570
+ .pf-v6-c-label-group__list {
1571
+ display: inline-flex;
1572
+ flex-wrap: wrap;
1573
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1574
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1575
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1863
1576
  }
1864
1577
 
1865
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1866
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1867
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1578
+ .pf-v6-c-label-group__list-item {
1579
+ display: inline-flex;
1580
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1868
1581
  }
1869
1582
 
1870
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1871
- --pf-v6-c-check__label--Color: currentcolor;
1872
- --pf-v6-c-check__label--disabled--Color: currentcolor;
1873
- align-items: center;
1874
- align-self: stretch;
1583
+ .pf-v6-c-label-group__label {
1584
+ overflow: hidden;
1585
+ text-overflow: ellipsis;
1586
+ white-space: nowrap;
1587
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1875
1588
  }
1876
1589
 
1877
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1878
- --pf-v6-c-check__input--TranslateY: 0;
1879
- align-self: center;
1590
+ .pf-v6-c-label-group__close {
1591
+ display: flex;
1592
+ align-self: flex-start;
1880
1593
  }
1881
1594
 
1882
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1883
- border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
1595
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1596
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1597
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1598
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1599
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1600
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1884
1601
  }
1885
1602
 
1886
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1887
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
1603
+ .pf-v6-c-label-group__textarea {
1604
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1605
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1606
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1607
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1608
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1609
+ white-space: nowrap;
1610
+ resize: none;
1611
+ border: 0;
1612
+ -ms-overflow-style: none;
1613
+ scrollbar-width: none;
1888
1614
  }
1889
1615
 
1890
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1891
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1892
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
1616
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1617
+ display: none;
1893
1618
  }
1894
1619
 
1895
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1896
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1897
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
1620
+ .pf-v6-c-check {
1621
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1622
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1623
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1624
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1625
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1626
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1627
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1628
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1629
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1630
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1631
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1632
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1633
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1634
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1898
1635
  }
1899
1636
 
1900
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1901
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
1637
+ .pf-v6-c-check {
1638
+ display: grid;
1639
+ grid-template-columns: auto 1fr;
1640
+ grid-gap: var(--pf-v6-c-check--GridGap);
1641
+ accent-color: var(--pf-v6-c-check--AccentColor);
1902
1642
  }
1903
1643
 
1904
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1905
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
1644
+ .pf-v6-c-check.pf-m-standalone {
1645
+ display: inline-grid;
1646
+ grid-template-columns: auto;
1647
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1906
1648
  }
1907
1649
 
1908
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1909
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1910
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1911
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
1650
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1651
+ align-self: center;
1652
+ transform: none;
1912
1653
  }
1913
1654
 
1914
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1915
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1916
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1917
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
1655
+ .pf-v6-c-check__input {
1656
+ align-self: start;
1657
+ font-size: var(--pf-v6-c-check__label--FontSize);
1658
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1659
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1918
1660
  }
1919
1661
 
1920
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1921
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
1662
+ .pf-v6-c-check__label {
1663
+ font-size: var(--pf-v6-c-check__label--FontSize);
1664
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
1665
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1666
+ color: var(--pf-v6-c-check__label--Color);
1922
1667
  }
1923
1668
 
1924
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1925
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1926
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1927
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
1669
+ .pf-v6-c-check__description {
1670
+ grid-column: 2;
1671
+ font-size: var(--pf-v6-c-check__description--FontSize);
1672
+ color: var(--pf-v6-c-check__description--Color);
1928
1673
  }
1929
1674
 
1930
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1931
- content: none;
1675
+ .pf-v6-c-check__body {
1676
+ grid-column: 2;
1932
1677
  }
1933
1678
 
1934
- .pf-v6-c-menu-toggle.pf-m-typeahead {
1935
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1936
- --pf-v6-c-menu-toggle--Gap: 0;
1937
- align-items: stretch;
1938
- padding: 0;
1679
+ .pf-v6-c-check__label,
1680
+ .pf-v6-c-check__input {
1681
+ justify-self: start;
1939
1682
  }
1940
1683
 
1941
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1942
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1684
+ label.pf-v6-c-check, .pf-v6-c-check__label,
1685
+ .pf-v6-c-check__input {
1686
+ cursor: pointer;
1943
1687
  }
1944
1688
 
1945
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1946
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1947
- display: flex;
1948
- align-items: stretch;
1689
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1690
+ .pf-v6-c-check__input:disabled,
1691
+ .pf-v6-c-check__input.pf-m-disabled {
1692
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1693
+ cursor: not-allowed;
1949
1694
  }
1950
1695
 
1951
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1952
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1953
- flex: 1;
1696
+ .pf-v6-c-check__label-required {
1697
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1698
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
1699
+ color: var(--pf-v6-c-check__label-required--Color);
1954
1700
  }
1955
1701
 
1956
- .pf-v6-c-menu-toggle__button {
1957
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
1958
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1959
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1960
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1961
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1962
- color: inherit;
1963
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1964
- border: 0;
1702
+ .pf-v6-c-badge {
1703
+ --pf-v6-c-badge--BorderColor: transparent;
1704
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1705
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1706
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1707
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1708
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1709
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1710
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1711
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1712
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1713
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1714
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1715
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1716
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
1717
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1718
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1719
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1720
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1721
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1722
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1723
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1965
1724
  }
1966
1725
 
1967
- .pf-v6-c-menu-toggle__button.pf-m-text {
1968
- display: inline-flex;
1969
- align-items: baseline;
1726
+ .pf-v6-c-badge {
1727
+ position: relative;
1728
+ display: inline-block;
1729
+ min-width: var(--pf-v6-c-badge--MinWidth);
1730
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1731
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1732
+ font-size: var(--pf-v6-c-badge--FontSize);
1733
+ font-weight: var(--pf-v6-c-badge--FontWeight);
1734
+ color: var(--pf-v6-c-badge--Color);
1735
+ text-align: center;
1736
+ white-space: nowrap;
1737
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
1738
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
1970
1739
  }
1971
1740
 
1972
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
1973
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1974
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
1741
+ .pf-v6-c-badge::after {
1742
+ position: absolute;
1743
+ inset: 0;
1744
+ pointer-events: none;
1745
+ content: "";
1746
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1747
+ border-radius: inherit;
1975
1748
  }
1976
1749
 
1977
- .pf-v6-c-menu-toggle__text {
1978
- overflow: hidden;
1979
- text-overflow: ellipsis;
1980
- white-space: nowrap;
1981
- min-width: 0;
1750
+ .pf-v6-c-badge.pf-m-read {
1751
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
1752
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1753
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1754
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1982
1755
  }
1983
1756
 
1984
- .pf-v6-c-menu-toggle__count {
1985
- display: flex;
1986
- flex-wrap: nowrap;
1757
+ .pf-v6-c-badge.pf-m-unread {
1758
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1759
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1760
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1987
1761
  }
1988
1762
 
1989
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1990
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1991
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
1992
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1993
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1763
+ .pf-v6-c-badge.pf-m-disabled {
1764
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1765
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1994
1766
  }
1995
1767
 
1996
- .pf-v6-c-menu-toggle__icon {
1997
- flex-shrink: 0;
1998
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
1999
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
2000
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
2001
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
1768
+ .pf-v6-c-badge.pf-m-disabled::after {
1769
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2002
1770
  }
2003
1771
 
2004
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
2005
- vertical-align: middle;
1772
+ .pf-v6-c-badge__toggle-icon {
1773
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1774
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2006
1775
  }
2007
1776
 
2008
- .pf-v6-c-menu-toggle__controls {
2009
- display: flex;
2010
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
2011
- align-items: center;
2012
- justify-content: center;
2013
- margin-inline-start: auto;
1777
+ .pf-v6-c-text-input-group {
1778
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1779
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
1780
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1781
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1782
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1783
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1784
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1785
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1786
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1787
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1788
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1789
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1790
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1791
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1792
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1793
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1794
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1795
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1796
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
1797
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1798
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1799
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1800
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1801
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1802
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1803
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1804
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1805
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1806
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1807
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1808
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1809
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1810
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
1811
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1812
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1813
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1814
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1815
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1816
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1817
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1818
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1819
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1820
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1821
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1822
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1823
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1824
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1825
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1826
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1827
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1828
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2014
1829
  }
2015
1830
 
2016
- .pf-v6-c-menu-toggle__toggle-icon {
2017
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
2018
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1831
+ .pf-v6-c-text-input-group {
1832
+ position: relative;
1833
+ display: flex;
1834
+ width: 100%;
1835
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
1836
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
1837
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
1838
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1839
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1840
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1841
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1842
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2019
1843
  }
2020
1844
 
2021
- .pf-v6-c-menu-toggle__status-icon {
2022
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1845
+ .pf-v6-c-text-input-group::before {
1846
+ position: absolute;
1847
+ inset: 0;
1848
+ pointer-events: none;
1849
+ content: "";
1850
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1851
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1852
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1853
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1854
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2023
1855
  }
2024
1856
 
2025
- .pf-v6-c-label-group {
2026
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2027
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2028
- --pf-v6-c-label-group--MaxWidth: 100%;
2029
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2030
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2031
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2032
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2033
- --pf-v6-c-label-group__main--MaxWidth: 100%;
2034
- --pf-v6-c-label-group__main--MinWidth: 0;
2035
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2036
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2037
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2038
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2039
- --pf-v6-c-label-group__list--MaxWidth: 100%;
2040
- --pf-v6-c-label-group__list--MinWidth: 0;
2041
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2042
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2043
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2044
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2045
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2046
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2047
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2048
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2049
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2050
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2051
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2052
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
2053
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2054
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2055
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2056
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2057
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2058
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2059
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2060
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2061
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2062
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1857
+ .pf-v6-c-text-input-group.pf-m-disabled {
1858
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1859
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1860
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1861
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1862
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1863
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1864
+ pointer-events: none;
2063
1865
  }
2064
1866
 
2065
- .pf-v6-c-label-group {
2066
- display: inline-flex;
2067
- row-gap: var(--pf-v6-c-label-group--RowGap);
2068
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
2069
- align-items: center;
2070
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1867
+ .pf-v6-c-text-input-group.pf-m-plain {
1868
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
2071
1869
  }
2072
1870
 
2073
- .pf-v6-c-label-group.pf-m-category {
2074
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2075
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2076
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2077
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2078
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2079
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2080
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1871
+ .pf-v6-c-text-input-group.pf-m-plain::before {
1872
+ border: 0;
2081
1873
  }
2082
1874
 
2083
- .pf-v6-c-label-group.pf-m-vertical {
2084
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2085
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2086
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2087
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2088
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2089
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2090
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1875
+ .pf-v6-c-text-input-group.pf-m-success {
1876
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1877
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1878
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2091
1879
  }
2092
1880
 
2093
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2094
- align-items: flex-start;
1881
+ .pf-v6-c-text-input-group.pf-m-warning {
1882
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1883
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1884
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2095
1885
  }
2096
1886
 
2097
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2098
- flex-direction: column;
2099
- align-items: flex-start;
2100
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1887
+ .pf-v6-c-text-input-group.pf-m-error {
1888
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1889
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1890
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2101
1891
  }
2102
1892
 
2103
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2104
- flex-direction: column;
2105
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1893
+ @media (prefers-reduced-motion: no-preference) {
1894
+ .pf-v6-c-text-input-group.pf-m-error {
1895
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1896
+ animation-name: pf-v6-global-danger-jiggle-motion;
1897
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1898
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1899
+ animation-fill-mode: both;
1900
+ }
1901
+ }
1902
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1903
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1904
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1905
+ animation-name: pf-v6-global-fade-in;
1906
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1907
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2106
1908
  }
2107
1909
 
2108
- .pf-v6-c-label-group.pf-m-editable,
2109
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2110
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2111
- display: flex;
1910
+ .pf-v6-c-text-input-group:hover {
1911
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2112
1912
  }
2113
1913
 
2114
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2115
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2116
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2117
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2118
- flex: 1;
1914
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1915
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2119
1916
  }
2120
1917
 
2121
- .pf-v6-c-label-group__main {
1918
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1919
+ --pf-v6-c-text-input-group__text--Position: relative;
1920
+ }
1921
+
1922
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1923
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1924
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1925
+ }
1926
+
1927
+ .pf-v6-c-text-input-group__main {
2122
1928
  display: flex;
2123
1929
  flex: 1;
2124
1930
  flex-wrap: wrap;
2125
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
2126
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2127
- align-items: baseline;
2128
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1931
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1932
+ min-width: 0;
2129
1933
  }
2130
1934
 
2131
- .pf-v6-c-label-group__list {
1935
+ .pf-v6-c-text-input-group__main.pf-m-icon {
1936
+ --pf-v6-c-text-input-group__text--Position: relative;
1937
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2132
1938
  display: inline-flex;
2133
- flex-wrap: wrap;
2134
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
2135
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2136
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1939
+ align-items: center;
1940
+ justify-content: center;
1941
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2137
1942
  }
2138
1943
 
2139
- .pf-v6-c-label-group__list-item {
2140
- display: inline-flex;
2141
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1944
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1945
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2142
1946
  }
2143
1947
 
2144
- .pf-v6-c-label-group__label {
1948
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1949
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1950
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1951
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1952
+ }
1953
+
1954
+ .pf-v6-c-text-input-group__text {
1955
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
1956
+ display: inline-grid;
1957
+ flex: 1;
1958
+ grid-template-areas: "text-input";
1959
+ grid-template-columns: 1fr;
1960
+ }
1961
+
1962
+ .pf-v6-c-text-input-group__icon {
1963
+ position: absolute;
1964
+ inset-block-start: 50%;
1965
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1966
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1967
+ color: var(--pf-v6-c-text-input-group__icon--Color);
1968
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1969
+ }
1970
+
1971
+ .pf-v6-c-text-input-group__icon.pf-m-status {
1972
+ inset-inline-start: auto;
1973
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1974
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1975
+ }
1976
+
1977
+ .pf-v6-c-text-input-group__text-input {
2145
1978
  overflow: hidden;
2146
1979
  text-overflow: ellipsis;
2147
1980
  white-space: nowrap;
2148
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1981
+ position: relative;
1982
+ width: 100%;
1983
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1984
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1985
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1986
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1987
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1988
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
1989
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1990
+ border: 0;
1991
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2149
1992
  }
2150
1993
 
2151
- .pf-v6-c-label-group__close {
2152
- display: flex;
2153
- align-self: flex-start;
1994
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1995
+ grid-area: text-input;
2154
1996
  }
2155
1997
 
2156
- .pf-v6-c-label-group__close .pf-v6-c-button {
2157
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2158
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2159
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2160
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2161
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1998
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
1999
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2162
2000
  }
2163
2001
 
2164
- .pf-v6-c-label-group__textarea {
2165
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2166
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2167
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2168
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2169
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2170
- white-space: nowrap;
2171
- resize: none;
2172
- border: 0;
2173
- -ms-overflow-style: none;
2174
- scrollbar-width: none;
2002
+ .pf-v6-c-text-input-group__text-input::placeholder {
2003
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2175
2004
  }
2176
2005
 
2177
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2178
- display: none;
2006
+ .pf-v6-c-text-input-group__utilities {
2007
+ display: flex;
2008
+ align-items: center;
2009
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2010
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2179
2011
  }
2180
2012
 
2181
- .pf-v6-c-badge {
2182
- --pf-v6-c-badge--BorderColor: transparent;
2183
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2184
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2185
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2186
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2187
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2188
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2189
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2190
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2191
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2192
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2193
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2194
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2195
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2196
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2197
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2198
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2199
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2200
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2201
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2202
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2013
+ .pf-v6-c-text-input-group__utilities > * + * {
2014
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2203
2015
  }
2204
2016
 
2205
- .pf-v6-c-badge {
2206
- position: relative;
2207
- display: inline-block;
2208
- min-width: var(--pf-v6-c-badge--MinWidth);
2209
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2210
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2211
- font-size: var(--pf-v6-c-badge--FontSize);
2212
- font-weight: var(--pf-v6-c-badge--FontWeight);
2213
- color: var(--pf-v6-c-badge--Color);
2214
- text-align: center;
2215
- white-space: nowrap;
2216
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2217
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2017
+ .pf-v6-c-text-input-group__group {
2018
+ display: flex;
2218
2019
  }
2219
2020
 
2220
- .pf-v6-c-badge::after {
2221
- position: absolute;
2222
- inset: 0;
2223
- pointer-events: none;
2224
- content: "";
2225
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2226
- border-radius: inherit;
2021
+ .pf-v6-c-divider {
2022
+ --pf-v6-c-divider--Display: flex;
2023
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2024
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2025
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2227
2026
  }
2228
2027
 
2229
- .pf-v6-c-badge.pf-m-read {
2230
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2231
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2232
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2233
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2028
+ .pf-v6-c-divider {
2029
+ flex-direction: row;
2030
+ width: 100%;
2031
+ height: var(--pf-v6-c-divider--Size);
2032
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2033
+ --pf-v6-hidden-visible--hidden--Display: none;
2034
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2035
+ display: var(--pf-v6-hidden-visible--Display);
2036
+ flex-shrink: 0;
2037
+ align-items: stretch;
2038
+ align-self: stretch;
2039
+ justify-content: center;
2040
+ border: 0;
2234
2041
  }
2235
2042
 
2236
- .pf-v6-c-badge.pf-m-unread {
2237
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2238
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2239
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2043
+ .pf-v6-c-divider.pf-m-hidden {
2044
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2240
2045
  }
2241
2046
 
2242
- .pf-v6-c-badge.pf-m-disabled {
2243
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2244
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2047
+ @media screen and (min-width: 36rem) {
2048
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
2049
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2050
+ }
2051
+ .pf-v6-c-divider.pf-m-visible-on-sm {
2052
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2053
+ }
2245
2054
  }
2246
-
2247
- .pf-v6-c-badge.pf-m-disabled::after {
2248
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2055
+ @media screen and (min-width: 48rem) {
2056
+ .pf-v6-c-divider.pf-m-hidden-on-md {
2057
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2058
+ }
2059
+ .pf-v6-c-divider.pf-m-visible-on-md {
2060
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2061
+ }
2249
2062
  }
2250
-
2251
- .pf-v6-c-badge__toggle-icon {
2252
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2253
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2063
+ @media screen and (min-width: 62rem) {
2064
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
2065
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2066
+ }
2067
+ .pf-v6-c-divider.pf-m-visible-on-lg {
2068
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2069
+ }
2254
2070
  }
2255
-
2256
- .pf-v6-c-label {
2257
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2258
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2259
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2260
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2261
- --pf-v6-c-label--MaxWidth: 100%;
2262
- --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
2263
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
2264
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
2265
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
2266
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
2267
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2268
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2269
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2270
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2271
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
2272
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
2273
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
2274
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
2275
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
2276
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
2277
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
2278
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
2279
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
2280
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
2281
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
2282
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
2283
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
2284
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
2285
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
2286
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
2287
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
2288
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
2289
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
2290
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
2291
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
2292
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
2293
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
2294
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
2295
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
2296
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
2297
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
2298
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
2299
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
2300
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
2301
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
2302
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
2303
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
2304
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
2305
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
2306
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
2307
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
2308
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
2309
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
2310
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
2311
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
2312
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
2313
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
2314
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
2315
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
2316
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
2317
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
2318
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
2319
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
2320
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
2321
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
2322
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
2323
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
2324
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
2325
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
2326
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
2327
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
2328
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
2329
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
2330
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
2331
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
2332
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
2333
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
2334
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
2335
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
2336
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
2337
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
2338
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
2339
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
2340
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
2341
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
2342
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
2343
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
2344
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
2345
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
2346
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
2347
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
2348
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2349
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
2350
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
2351
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
2352
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
2353
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
2354
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
2355
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
2356
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
2357
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2358
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2359
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
2360
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
2361
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
2362
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
2363
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
2364
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
2365
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
2366
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
2367
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2368
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2369
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
2370
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
2371
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
2372
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
2373
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
2374
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
2375
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
2376
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
2377
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
2378
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
2379
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
2380
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
2381
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
2382
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
2383
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
2384
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
2385
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
2386
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
2387
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
2388
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
2389
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
2390
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2391
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
2392
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
2393
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
2394
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
2395
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
2396
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
2397
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
2398
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
2399
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2400
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
2401
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
2402
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
2403
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2404
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2405
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
2406
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2407
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2408
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
2409
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
2410
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
2411
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
2412
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
2413
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
2414
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
2415
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2416
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
2417
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2418
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
2419
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2420
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
2421
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
2422
- --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
2423
- --pf-v6-c-label__content--MaxWidth: 100%;
2424
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2425
- --pf-v6-c-label__content--Cursor: initial;
2426
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2427
- --pf-v6-c-label__text--MaxWidth: 100%;
2428
- --pf-v6-c-label__actions--MarginInlineEnd: 0;
2429
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2430
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
2431
- --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
2432
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
2433
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
2434
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
2435
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
2436
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
2437
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
2438
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
2439
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
2440
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
2441
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
2442
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
2443
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
2444
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
2445
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
2446
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
2447
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
2448
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2449
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2450
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2451
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2071
+ @media screen and (min-width: 75rem) {
2072
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
2073
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2074
+ }
2075
+ .pf-v6-c-divider.pf-m-visible-on-xl {
2076
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2077
+ }
2078
+ }
2079
+ @media screen and (min-width: 90.625rem) {
2080
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
2081
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2082
+ }
2083
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
2084
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2085
+ }
2086
+ }
2087
+ .pf-v6-c-divider::before {
2088
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2089
+ content: "";
2090
+ background-color: var(--pf-v6-c-divider--Color);
2091
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2092
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2452
2093
  }
2453
2094
 
2454
- .pf-v6-c-label {
2455
- position: relative;
2456
- gap: var(--pf-v6-c-label--Gap);
2457
- min-width: var(--pf-v6-c-label--MinWidth);
2458
- max-width: var(--pf-v6-c-label--MaxWidth);
2459
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
2460
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
2461
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
2462
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
2463
- font-size: var(--pf-v6-c-label--FontSize);
2464
- white-space: nowrap;
2465
- background: transparent;
2466
- isolation: isolate;
2467
- border: 0;
2468
- border-radius: var(--pf-v6-c-label--BorderRadius);
2095
+ .pf-v6-c-divider.pf-m-horizontal {
2096
+ flex-direction: row;
2097
+ width: 100%;
2098
+ height: var(--pf-v6-c-divider--Size);
2469
2099
  }
2470
2100
 
2471
- .pf-v6-c-label.pf-m-blue {
2472
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
2473
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
2474
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
2475
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
2476
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
2477
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
2478
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
2479
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
2101
+ .pf-v6-c-divider.pf-m-vertical {
2102
+ flex-direction: column;
2103
+ width: var(--pf-v6-c-divider--Size);
2104
+ height: inherit;
2480
2105
  }
2481
2106
 
2482
- .pf-v6-c-label.pf-m-red {
2483
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
2484
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
2485
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
2486
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
2487
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
2488
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
2489
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
2490
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
2107
+ .pf-v6-c-divider.pf-m-inset-none {
2108
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2491
2109
  }
2492
2110
 
2493
- .pf-v6-c-label.pf-m-orange {
2494
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
2495
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
2496
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
2497
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
2498
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
2499
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
2500
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
2501
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
2111
+ .pf-v6-c-divider.pf-m-inset-xs {
2112
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2502
2113
  }
2503
2114
 
2504
- .pf-v6-c-label.pf-m-orangered {
2505
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
2506
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
2507
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
2508
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
2509
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
2510
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
2511
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
2512
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
2115
+ .pf-v6-c-divider.pf-m-inset-sm {
2116
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2513
2117
  }
2514
2118
 
2515
- .pf-v6-c-label.pf-m-yellow {
2516
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
2517
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
2518
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
2519
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
2520
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
2521
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
2522
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
2523
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
2119
+ .pf-v6-c-divider.pf-m-inset-md {
2120
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2524
2121
  }
2525
2122
 
2526
- .pf-v6-c-label.pf-m-green {
2527
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
2528
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
2529
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
2530
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
2531
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
2532
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
2533
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
2534
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
2123
+ .pf-v6-c-divider.pf-m-inset-lg {
2124
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2535
2125
  }
2536
2126
 
2537
- .pf-v6-c-label.pf-m-teal {
2538
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
2539
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
2540
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
2541
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
2542
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
2543
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
2544
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
2545
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
2127
+ .pf-v6-c-divider.pf-m-inset-xl {
2128
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2546
2129
  }
2547
2130
 
2548
- .pf-v6-c-label.pf-m-purple {
2549
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
2550
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
2551
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
2552
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
2553
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
2554
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
2555
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
2556
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
2131
+ .pf-v6-c-divider.pf-m-inset-2xl {
2132
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2557
2133
  }
2558
2134
 
2559
- .pf-v6-c-label.pf-m-success {
2560
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
2561
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
2562
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
2563
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
2564
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
2565
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
2566
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
2567
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
2568
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
2569
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2135
+ .pf-v6-c-divider.pf-m-inset-3xl {
2136
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2137
+ }
2138
+
2139
+ @media (min-width: 36rem) {
2140
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
2141
+ flex-direction: row;
2142
+ width: 100%;
2143
+ height: var(--pf-v6-c-divider--Size);
2144
+ }
2145
+ }
2146
+ @media (min-width: 36rem) {
2147
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
2148
+ flex-direction: column;
2149
+ width: var(--pf-v6-c-divider--Size);
2150
+ height: inherit;
2151
+ }
2152
+ }
2153
+ @media (min-width: 36rem) {
2154
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
2155
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2156
+ }
2157
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2158
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2159
+ }
2160
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2161
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2162
+ }
2163
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
2164
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2165
+ }
2166
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2167
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2168
+ }
2169
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2170
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2171
+ }
2172
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2173
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2174
+ }
2175
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2176
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2177
+ }
2178
+ }
2179
+ @media (min-width: 48rem) {
2180
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
2181
+ flex-direction: row;
2182
+ width: 100%;
2183
+ height: var(--pf-v6-c-divider--Size);
2184
+ }
2185
+ }
2186
+ @media (min-width: 48rem) {
2187
+ .pf-v6-c-divider.pf-m-vertical-on-md {
2188
+ flex-direction: column;
2189
+ width: var(--pf-v6-c-divider--Size);
2190
+ height: inherit;
2191
+ }
2192
+ }
2193
+ @media (min-width: 48rem) {
2194
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2195
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2196
+ }
2197
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2198
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2199
+ }
2200
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2201
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2202
+ }
2203
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2204
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2205
+ }
2206
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2207
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2208
+ }
2209
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2210
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2211
+ }
2212
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2213
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2214
+ }
2215
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2216
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2217
+ }
2218
+ }
2219
+ @media (min-width: 62rem) {
2220
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2221
+ flex-direction: row;
2222
+ width: 100%;
2223
+ height: var(--pf-v6-c-divider--Size);
2224
+ }
2225
+ }
2226
+ @media (min-width: 62rem) {
2227
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2228
+ flex-direction: column;
2229
+ width: var(--pf-v6-c-divider--Size);
2230
+ height: inherit;
2231
+ }
2232
+ }
2233
+ @media (min-width: 62rem) {
2234
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2235
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2236
+ }
2237
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2238
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2239
+ }
2240
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2241
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2242
+ }
2243
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2244
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2245
+ }
2246
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2247
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2248
+ }
2249
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2250
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2251
+ }
2252
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2253
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2254
+ }
2255
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2256
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2257
+ }
2258
+ }
2259
+ @media (min-width: 75rem) {
2260
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2261
+ flex-direction: row;
2262
+ width: 100%;
2263
+ height: var(--pf-v6-c-divider--Size);
2264
+ }
2265
+ }
2266
+ @media (min-width: 75rem) {
2267
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2268
+ flex-direction: column;
2269
+ width: var(--pf-v6-c-divider--Size);
2270
+ height: inherit;
2271
+ }
2570
2272
  }
2571
-
2572
- .pf-v6-c-label.pf-m-warning {
2573
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
2574
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
2575
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
2576
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
2577
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
2578
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
2579
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
2580
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
2581
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
2582
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
2273
+ @media (min-width: 75rem) {
2274
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2275
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2276
+ }
2277
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2278
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2279
+ }
2280
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2281
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2282
+ }
2283
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2284
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2285
+ }
2286
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2287
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2288
+ }
2289
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2290
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2291
+ }
2292
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2293
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2294
+ }
2295
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2296
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2297
+ }
2583
2298
  }
2584
-
2585
- .pf-v6-c-label.pf-m-danger {
2586
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
2587
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
2588
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
2589
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
2590
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
2591
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
2592
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
2593
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
2594
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
2595
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
2299
+ @media (min-width: 90.625rem) {
2300
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2301
+ flex-direction: row;
2302
+ width: 100%;
2303
+ height: var(--pf-v6-c-divider--Size);
2304
+ }
2596
2305
  }
2597
-
2598
- .pf-v6-c-label.pf-m-info {
2599
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
2600
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
2601
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
2602
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
2603
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
2604
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
2605
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
2606
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
2607
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
2608
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
2306
+ @media (min-width: 90.625rem) {
2307
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2308
+ flex-direction: column;
2309
+ width: var(--pf-v6-c-divider--Size);
2310
+ height: inherit;
2311
+ }
2609
2312
  }
2610
-
2611
- .pf-v6-c-label.pf-m-custom {
2612
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
2613
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
2614
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
2615
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
2616
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
2617
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
2618
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
2619
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
2620
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
2621
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2313
+ @media (min-width: 90.625rem) {
2314
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2315
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2316
+ }
2317
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2318
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2319
+ }
2320
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2321
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2322
+ }
2323
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2324
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2325
+ }
2326
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2327
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2328
+ }
2329
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2330
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2331
+ }
2332
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2333
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2334
+ }
2335
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2336
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2337
+ }
2338
+ }
2339
+ .pf-v6-c-menu-toggle {
2340
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
2341
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2342
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2343
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2344
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2345
+ --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
2346
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
2347
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
2348
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
2349
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
2350
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
2351
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
2352
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
2353
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
2354
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2355
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
2356
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
2357
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
2358
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
2359
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
2360
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
2361
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
2362
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
2363
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
2364
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
2365
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
2366
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
2367
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
2368
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2369
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
2370
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
2371
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2372
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
2373
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
2374
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
2375
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
2376
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
2377
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
2378
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
2379
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
2380
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
2381
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
2382
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
2383
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
2384
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
2385
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
2386
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
2387
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
2388
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
2389
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
2390
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
2391
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
2392
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
2393
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
2394
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
2395
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
2396
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2397
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
2398
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
2399
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
2400
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
2401
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
2402
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
2403
+ --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
2404
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
2405
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
2406
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
2407
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
2408
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2409
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
2410
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
2411
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
2412
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
2413
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
2414
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
2415
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
2416
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
2417
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
2418
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
2419
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
2420
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
2421
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
2422
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2423
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
2424
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
2425
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
2426
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
2427
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
2428
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
2429
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
2430
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
2431
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
2432
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
2433
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
2434
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
2435
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
2436
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
2437
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
2438
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
2439
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
2440
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
2441
+ --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
2442
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2443
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2444
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2445
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
2446
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
2447
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
2448
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
2449
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
2450
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2451
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
2452
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2453
+ --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2454
+ --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
2455
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
2456
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2457
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
2458
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
2459
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
2460
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
2461
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
2462
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
2463
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
2464
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
2465
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
2466
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
2467
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
2468
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
2469
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
2470
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
2471
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
2472
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2473
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2474
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
2475
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2476
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
2477
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2478
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
2479
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
2480
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
2481
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
2482
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
2483
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
2484
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
2485
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
2486
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
2487
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
2622
2488
  }
2623
2489
 
2624
- .pf-v6-c-label.pf-m-compact {
2625
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
2626
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
2627
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
2628
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
2629
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
2630
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
2631
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
2490
+ .pf-v6-c-menu-toggle {
2491
+ position: relative;
2492
+ display: inline-flex;
2493
+ gap: var(--pf-v6-c-menu-toggle--Gap);
2494
+ align-items: center;
2495
+ justify-content: center;
2496
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
2497
+ max-width: 100%;
2498
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
2499
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
2500
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
2501
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
2502
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
2503
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
2504
+ color: var(--pf-v6-c-menu-toggle--Color);
2505
+ cursor: pointer;
2506
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
2507
+ border: 0;
2508
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
2509
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
2510
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
2632
2511
  }
2633
2512
 
2634
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
2635
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
2513
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
2514
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2636
2515
  }
2637
2516
 
2638
- .pf-v6-c-label.pf-m-outline {
2639
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
2640
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
2641
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
2642
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
2643
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
2644
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
2645
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2646
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2647
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
2648
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
2517
+ .pf-v6-c-menu-toggle::before {
2518
+ position: absolute;
2519
+ inset-block-start: 0;
2520
+ inset-block-end: 0;
2521
+ inset-inline-start: 0;
2522
+ inset-inline-end: 0;
2523
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
2524
+ pointer-events: none;
2525
+ content: "";
2526
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
2527
+ transition: inherit;
2649
2528
  }
2650
2529
 
2651
- .pf-v6-c-label.pf-m-editable {
2652
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
2653
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
2530
+ .pf-v6-c-menu-toggle.pf-m-primary {
2531
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
2532
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
2533
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
2534
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
2535
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
2536
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
2537
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
2538
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
2539
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
2540
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
2541
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
2542
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
2543
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
2544
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
2545
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
2546
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
2547
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
2654
2548
  }
2655
2549
 
2656
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
2657
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
2658
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
2550
+ .pf-v6-c-menu-toggle.pf-m-secondary {
2551
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
2552
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
2553
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
2554
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
2555
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
2556
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
2557
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
2558
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
2559
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
2560
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
2561
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
2562
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
2563
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
2564
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
2565
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
2566
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
2567
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
2659
2568
  }
2660
2569
 
2661
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
2662
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
2663
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
2664
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
2570
+ .pf-v6-c-menu-toggle.pf-m-full-height {
2571
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
2572
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
2573
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
2574
+ align-items: center;
2575
+ height: 100%;
2665
2576
  }
2666
2577
 
2667
- .pf-v6-c-label.pf-m-editable-active {
2668
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
2669
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
2670
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
2671
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
2578
+ .pf-v6-c-menu-toggle.pf-m-full-width {
2579
+ width: 100%;
2672
2580
  }
2673
2581
 
2674
- .pf-v6-c-label.pf-m-overflow {
2675
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
2676
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
2677
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
2582
+ .pf-v6-c-menu-toggle.pf-m-plain {
2583
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
2584
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
2585
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
2586
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
2587
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
2588
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
2589
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
2590
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
2591
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
2592
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
2593
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
2594
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
2595
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
2596
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
2597
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
2598
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
2678
2599
  }
2679
2600
 
2680
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
2681
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
2682
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
2683
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
2601
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
2602
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
2684
2603
  }
2685
2604
 
2686
- .pf-v6-c-label.pf-m-add {
2687
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
2688
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
2689
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
2690
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
2605
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
2606
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
2607
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
2691
2608
  }
2692
2609
 
2693
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
2694
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
2695
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
2696
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
2697
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
2610
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
2611
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
2612
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
2613
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
2614
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
2615
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
2616
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
2617
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
2618
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
2619
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
2620
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
2698
2621
  }
2699
2622
 
2700
- .pf-v6-c-label.pf-m-clickable {
2701
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
2623
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
2624
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
2625
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
2626
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
2627
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
2628
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
2629
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
2702
2630
  }
2703
2631
 
2704
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2705
- text-decoration-line: none;
2632
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
2633
+ border: 0;
2706
2634
  }
2707
2635
 
2708
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2709
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
2710
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2711
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
2712
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
2713
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
2714
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2715
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2636
+ .pf-v6-c-menu-toggle.pf-m-small {
2637
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
2638
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
2639
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
2640
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
2641
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
2642
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
2643
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
2644
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
2716
2645
  }
2717
2646
 
2718
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
2719
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2647
+ .pf-v6-c-menu-toggle.pf-m-success {
2648
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
2649
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
2720
2650
  }
2721
2651
 
2722
- .pf-v6-c-label.pf-m-disabled {
2723
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
2724
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
2725
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
2726
- --pf-v6-c-label--BorderWidth: 0;
2727
- pointer-events: none;
2652
+ .pf-v6-c-menu-toggle.pf-m-warning {
2653
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
2654
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
2728
2655
  }
2729
2656
 
2730
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
2731
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
2657
+ .pf-v6-c-menu-toggle.pf-m-danger {
2658
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
2659
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
2732
2660
  }
2733
2661
 
2734
- .pf-v6-c-label,
2735
- .pf-v6-c-label__content {
2736
- display: inline-flex;
2737
- align-items: center;
2738
- justify-content: center;
2662
+ @media screen and (prefers-reduced-motion: no-preference) {
2663
+ .pf-v6-c-menu-toggle.pf-m-danger {
2664
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
2665
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
2666
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
2667
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
2668
+ animation-fill-mode: both;
2669
+ }
2739
2670
  }
2740
-
2741
- .pf-v6-c-label__text {
2742
- overflow: hidden;
2743
- text-overflow: ellipsis;
2744
- white-space: nowrap;
2745
- max-width: var(--pf-v6-c-label__text--MaxWidth);
2671
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
2672
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
2673
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
2674
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
2746
2675
  }
2747
2676
 
2748
- .pf-v6-c-label__content {
2749
- gap: var(--pf-v6-c-label__content--Gap);
2750
- max-width: var(--pf-v6-c-label__content--MaxWidth);
2751
- padding: 0;
2752
- overflow: hidden;
2753
- color: var(--pf-v6-c-label--Color);
2754
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
2755
- background: transparent;
2756
- border-width: 0;
2677
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
2678
+ from {
2679
+ opacity: 0;
2680
+ }
2681
+ to {
2682
+ opacity: 1;
2683
+ }
2684
+ }
2685
+ .pf-v6-c-menu-toggle.pf-m-settings {
2686
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
2687
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
2688
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
2689
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
2690
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
2691
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
2692
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
2757
2693
  }
2758
2694
 
2759
- .pf-v6-c-label__content::before {
2760
- position: absolute;
2761
- inset: 0;
2762
- z-index: -1;
2763
- pointer-events: none;
2764
- content: "";
2765
- background-color: var(--pf-v6-c-label--BackgroundColor);
2766
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
2767
- border-radius: var(--pf-v6-c-label--BorderRadius);
2695
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
2696
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
2768
2697
  }
2769
2698
 
2770
- input.pf-v6-c-label__content {
2771
- overflow: hidden;
2772
- text-overflow: ellipsis;
2773
- white-space: nowrap;
2699
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
2700
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
2701
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
2702
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
2703
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
2704
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
2774
2705
  }
2775
2706
 
2776
- .pf-v6-c-label__icon {
2777
- color: var(--pf-v6-c-label__icon--Color);
2707
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
2708
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
2709
+ pointer-events: none;
2778
2710
  }
2779
2711
 
2780
- .pf-v6-c-label__actions {
2781
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2712
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
2713
+ syntax: "<length>";
2714
+ inherits: false;
2715
+ initial-value: 0;
2782
2716
  }
2783
-
2784
- .pf-v6-c-label__actions .pf-v6-c-button {
2785
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2786
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2787
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2788
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2789
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2790
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2791
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2792
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2717
+ @media (prefers-reduced-motion: no-preference) {
2718
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
2719
+ 33% {
2720
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
2721
+ }
2722
+ 66% {
2723
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
2724
+ }
2725
+ }
2726
+ }
2727
+ .pf-v6-c-menu-toggle.pf-m-split-button {
2728
+ --pf-v6-c-menu-toggle--Gap: 0;
2729
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
2730
+ padding: 0;
2793
2731
  }
2794
2732
 
2795
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
2796
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
2733
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
2734
+ position: relative;
2735
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
2736
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
2737
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
2738
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
2797
2739
  }
2798
2740
 
2799
- .pf-v6-c-check {
2800
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2801
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2802
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2803
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2804
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2805
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2806
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2807
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2808
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2809
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2810
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2811
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2812
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2813
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2741
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
2742
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2743
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2814
2744
  }
2815
2745
 
2816
- .pf-v6-c-check {
2817
- display: grid;
2818
- grid-template-columns: auto 1fr;
2819
- grid-gap: var(--pf-v6-c-check--GridGap);
2820
- accent-color: var(--pf-v6-c-check--AccentColor);
2746
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
2747
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2748
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2821
2749
  }
2822
2750
 
2823
- .pf-v6-c-check.pf-m-standalone {
2824
- display: inline-grid;
2825
- grid-template-columns: auto;
2826
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2751
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
2752
+ --pf-v6-c-check__label--Color: currentcolor;
2753
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
2754
+ align-items: center;
2755
+ align-self: stretch;
2827
2756
  }
2828
2757
 
2829
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2758
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
2759
+ --pf-v6-c-check__input--TranslateY: 0;
2830
2760
  align-self: center;
2831
- transform: none;
2832
2761
  }
2833
2762
 
2834
- .pf-v6-c-check__input {
2835
- align-self: start;
2836
- font-size: var(--pf-v6-c-check__label--FontSize);
2837
- line-height: var(--pf-v6-c-check__label--LineHeight);
2838
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2763
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
2764
+ border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
2839
2765
  }
2840
2766
 
2841
- .pf-v6-c-check__label {
2842
- font-size: var(--pf-v6-c-check__label--FontSize);
2843
- font-weight: var(--pf-v6-c-check__label--FontWeight);
2844
- line-height: var(--pf-v6-c-check__label--LineHeight);
2845
- color: var(--pf-v6-c-check__label--Color);
2767
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
2768
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
2846
2769
  }
2847
2770
 
2848
- .pf-v6-c-check__description {
2849
- grid-column: 2;
2850
- font-size: var(--pf-v6-c-check__description--FontSize);
2851
- color: var(--pf-v6-c-check__description--Color);
2771
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
2772
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
2773
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
2852
2774
  }
2853
2775
 
2854
- .pf-v6-c-check__body {
2855
- grid-column: 2;
2776
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
2777
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
2778
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
2856
2779
  }
2857
2780
 
2858
- .pf-v6-c-check__label,
2859
- .pf-v6-c-check__input {
2860
- justify-self: start;
2781
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
2782
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
2861
2783
  }
2862
2784
 
2863
- label.pf-v6-c-check, .pf-v6-c-check__label,
2864
- .pf-v6-c-check__input {
2865
- cursor: pointer;
2785
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
2786
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
2866
2787
  }
2867
2788
 
2868
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2869
- .pf-v6-c-check__input:disabled,
2870
- .pf-v6-c-check__input.pf-m-disabled {
2871
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2872
- cursor: not-allowed;
2789
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
2790
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
2791
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
2792
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
2873
2793
  }
2874
2794
 
2875
- .pf-v6-c-check__label-required {
2876
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2877
- font-size: var(--pf-v6-c-check__label-required--FontSize);
2878
- color: var(--pf-v6-c-check__label-required--Color);
2795
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
2796
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
2797
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
2798
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
2879
2799
  }
2880
2800
 
2881
- .pf-v6-c-breadcrumb {
2882
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2883
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
2884
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2885
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
2886
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2887
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
2888
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2889
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2890
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
2891
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2892
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2893
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
2894
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2895
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2896
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
2897
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
2898
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
2899
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2900
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2901
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2902
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2801
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
2802
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
2903
2803
  }
2904
2804
 
2905
- .pf-v6-c-breadcrumb {
2906
- display: inline-flex;
2805
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
2806
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
2807
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
2808
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
2907
2809
  }
2908
2810
 
2909
- .pf-v6-c-breadcrumb__list {
2910
- display: flex;
2911
- flex-wrap: wrap;
2912
- align-items: center;
2811
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
2812
+ content: none;
2913
2813
  }
2914
2814
 
2915
- .pf-v6-c-breadcrumb__item {
2916
- display: flex;
2917
- align-items: baseline;
2918
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
2919
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
2920
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
2921
- white-space: nowrap;
2922
- list-style: none;
2815
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
2816
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
2817
+ --pf-v6-c-menu-toggle--Gap: 0;
2818
+ align-items: stretch;
2819
+ padding: 0;
2923
2820
  }
2924
2821
 
2925
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
2926
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2822
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
2823
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2927
2824
  }
2928
2825
 
2929
- .pf-v6-c-breadcrumb__item:not(:last-child) {
2930
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2826
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
2827
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2828
+ display: flex;
2829
+ align-items: stretch;
2931
2830
  }
2932
2831
 
2933
- .pf-v6-c-breadcrumb__item-divider {
2934
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
2935
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
2936
- line-height: 1;
2937
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
2832
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
2833
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
2834
+ flex: 1;
2938
2835
  }
2939
2836
 
2940
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
2941
- scale: -1 1;
2837
+ .pf-v6-c-menu-toggle__button {
2838
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
2839
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
2840
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
2841
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
2842
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
2843
+ color: inherit;
2844
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
2845
+ border: 0;
2942
2846
  }
2943
2847
 
2944
- .pf-v6-c-breadcrumb__link {
2945
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
2946
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
2947
- font-size: inherit;
2948
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
2949
- line-height: inherit;
2950
- color: var(--pf-v6-c-breadcrumb__link--Color);
2951
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
2952
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
2953
- word-break: break-word;
2954
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2848
+ .pf-v6-c-menu-toggle__button.pf-m-text {
2849
+ display: inline-flex;
2850
+ align-items: baseline;
2955
2851
  }
2956
2852
 
2957
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
2958
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
2959
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
2960
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
2853
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
2854
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
2855
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
2961
2856
  }
2962
2857
 
2963
- .pf-v6-c-breadcrumb__link.pf-m-current {
2964
- cursor: default;
2858
+ .pf-v6-c-menu-toggle__text {
2859
+ overflow: hidden;
2860
+ text-overflow: ellipsis;
2861
+ white-space: nowrap;
2862
+ min-width: 0;
2965
2863
  }
2966
2864
 
2967
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
2968
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
2969
- text-decoration-line: none;
2865
+ .pf-v6-c-menu-toggle__count {
2866
+ display: flex;
2867
+ flex-wrap: nowrap;
2970
2868
  }
2971
2869
 
2972
- button.pf-v6-c-breadcrumb__link {
2973
- border: none;
2870
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
2871
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
2872
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
2873
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
2874
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
2974
2875
  }
2975
2876
 
2976
- .pf-v6-c-breadcrumb__dropdown {
2977
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
2978
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
2979
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
2980
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
2877
+ .pf-v6-c-menu-toggle__icon {
2878
+ flex-shrink: 0;
2879
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
2880
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
2881
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
2882
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
2981
2883
  }
2982
2884
 
2983
- .pf-v6-c-breadcrumb__heading {
2984
- display: inline;
2985
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2885
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
2886
+ vertical-align: middle;
2986
2887
  }
2987
2888
 
2988
- .pf-v6-c-breadcrumb__link,
2989
- .pf-v6-c-breadcrumb__heading {
2990
- white-space: normal;
2889
+ .pf-v6-c-menu-toggle__controls {
2890
+ display: flex;
2891
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
2892
+ align-items: center;
2893
+ justify-content: center;
2894
+ margin-inline-start: auto;
2991
2895
  }
2992
2896
 
2993
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
2994
- display: none;
2897
+ .pf-v6-c-menu-toggle__toggle-icon {
2898
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
2899
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
2900
+ }
2901
+
2902
+ .pf-v6-c-menu-toggle__status-icon {
2903
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
2995
2904
  }
2996
2905
 
2997
2906
  .pf-v6-c-menu {
@@ -3024,7 +2933,7 @@ button.pf-v6-c-breadcrumb__link {
3024
2933
  --pf-v6-c-menu__footer--BoxShadow: none;
3025
2934
  --pf-v6-c-menu__footer--BorderColor: transparent;
3026
2935
  --pf-v6-c-menu__footer--BorderWidth: 0;
3027
- --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
2936
+ --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
3028
2937
  --pf-v6-c-menu--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
3029
2938
  --pf-v6-c-menu--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
3030
2939
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
@@ -3560,122 +3469,329 @@ button.pf-v6-c-breadcrumb__link {
3560
3469
  .pf-v6-c-menu__item.pf-m-visible-on-xl {
3561
3470
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3562
3471
  }
3563
- }
3564
- @media screen and (min-width: 90.625rem) {
3565
- .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
3566
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3472
+ }
3473
+ @media screen and (min-width: 90.625rem) {
3474
+ .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
3475
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3476
+ }
3477
+ .pf-v6-c-menu__item.pf-m-visible-on-2xl {
3478
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3479
+ }
3480
+ }
3481
+ :where(label).pf-v6-c-menu__item {
3482
+ cursor: pointer;
3483
+ }
3484
+
3485
+ .pf-v6-c-menu__item.pf-m-selected {
3486
+ --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
3487
+ }
3488
+
3489
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
3490
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3491
+ opacity: 1;
3492
+ }
3493
+
3494
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3495
+ color: var(--pf-v6-c-menu__item-external--Color);
3496
+ }
3497
+
3498
+ .pf-v6-c-menu__item-select-icon {
3499
+ color: var(--pf-v6-c-menu__item-select-icon--Color);
3500
+ }
3501
+
3502
+ .pf-v6-c-menu__item-main {
3503
+ column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
3504
+ align-items: center;
3505
+ width: 100%;
3506
+ }
3507
+
3508
+ .pf-v6-c-menu__item-text {
3509
+ overflow: hidden;
3510
+ text-overflow: ellipsis;
3511
+ white-space: nowrap;
3512
+ flex-grow: 1;
3513
+ }
3514
+
3515
+ .pf-v6-c-menu__group-title {
3516
+ padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
3517
+ padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
3518
+ padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
3519
+ padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
3520
+ font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
3521
+ font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
3522
+ color: var(--pf-v6-c-menu__group-title--Color);
3523
+ }
3524
+
3525
+ .pf-v6-c-menu__item-description {
3526
+ font-size: var(--pf-v6-c-menu__item-description--FontSize);
3527
+ color: var(--pf-v6-c-menu__item-description--Color);
3528
+ word-break: break-word;
3529
+ }
3530
+
3531
+ .pf-v6-c-menu__item-check .pf-v6-c-check {
3532
+ --pf-v6-c-check__input--TranslateY: none;
3533
+ }
3534
+
3535
+ .pf-v6-c-menu__item-toggle-icon {
3536
+ color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
3537
+ }
3538
+
3539
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
3540
+ scale: -1 1;
3541
+ }
3542
+
3543
+ .pf-v6-c-menu__item-icon {
3544
+ color: var(--pf-v6-c-menu__item--icon--Color, inherit);
3545
+ }
3546
+
3547
+ .pf-v6-c-menu__item-select-icon,
3548
+ .pf-v6-c-menu__item-external-icon {
3549
+ opacity: 0;
3550
+ }
3551
+
3552
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
3553
+ .pf-v6-c-menu__item-action.pf-m-favorited,
3554
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3555
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
3556
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3557
+ }
3558
+
3559
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
3560
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3561
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3562
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
3563
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3564
+ }
3565
+
3566
+ .pf-v6-c-menu__breadcrumb {
3567
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3568
+ padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3569
+ padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3570
+ padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3571
+ padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3572
+ }
3573
+
3574
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3575
+ min-width: auto;
3576
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3577
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3578
+ }
3579
+
3580
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3581
+ height: auto;
3582
+ }
3583
+
3584
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3585
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
3586
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
3587
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3588
+ }
3589
+
3590
+ .pf-v6-c-spinner {
3591
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3592
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3593
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3594
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3595
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3596
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3597
+ --pf-v6-c-spinner--StrokeWidth: 10;
3598
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3599
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3600
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3601
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3602
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3603
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3604
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3605
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3606
+ }
3607
+
3608
+ .pf-v6-c-spinner {
3609
+ width: var(--pf-v6-c-spinner--Width);
3610
+ height: var(--pf-v6-c-spinner--Height);
3611
+ overflow: hidden;
3612
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3613
+ }
3614
+
3615
+ .pf-v6-c-spinner.pf-m-inline {
3616
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3617
+ }
3618
+
3619
+ .pf-v6-c-spinner.pf-m-xs {
3620
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3621
+ --pf-v6-c-spinner--StrokeWidth: 15;
3622
+ }
3623
+
3624
+ .pf-v6-c-spinner.pf-m-sm {
3625
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3626
+ }
3627
+
3628
+ .pf-v6-c-spinner.pf-m-md {
3629
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3630
+ }
3631
+
3632
+ .pf-v6-c-spinner.pf-m-lg {
3633
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3634
+ }
3635
+
3636
+ .pf-v6-c-spinner.pf-m-xl {
3637
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3638
+ }
3639
+
3640
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
3641
+ --pf-v6-c-spinner--AnimationDuration: 0s;
3642
+ }
3643
+
3644
+ .pf-v6-c-spinner__path {
3645
+ width: 100%;
3646
+ height: 100%;
3647
+ stroke: var(--pf-v6-c-spinner--Color);
3648
+ stroke-dasharray: 283;
3649
+ stroke-dashoffset: 280;
3650
+ stroke-linecap: round;
3651
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3652
+ transform-origin: 50% 50%;
3653
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3654
+ }
3655
+
3656
+ @keyframes pf-v6-c-spinner-animation-rotate {
3657
+ 0% {
3658
+ transform: rotate(0deg);
3659
+ }
3660
+ 100% {
3661
+ transform: rotate(360deg);
3662
+ }
3663
+ }
3664
+ @keyframes pf-v6-c-spinner-animation-dash {
3665
+ 0% {
3666
+ stroke-dashoffset: 280;
3667
+ transform: rotate(0);
3668
+ }
3669
+ 15% {
3670
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3567
3671
  }
3568
- .pf-v6-c-menu__item.pf-m-visible-on-2xl {
3569
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3672
+ 40% {
3673
+ stroke-dasharray: 220;
3674
+ stroke-dashoffset: 150;
3675
+ }
3676
+ 100% {
3677
+ stroke-dashoffset: 280;
3678
+ transform: rotate(720deg);
3570
3679
  }
3571
3680
  }
3572
- :where(label).pf-v6-c-menu__item {
3573
- cursor: pointer;
3574
- }
3575
-
3576
- .pf-v6-c-menu__item.pf-m-selected {
3577
- --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
3578
- }
3579
-
3580
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
3581
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3582
- opacity: 1;
3583
- }
3584
-
3585
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3586
- color: var(--pf-v6-c-menu__item-external--Color);
3681
+ .pf-v6-c-breadcrumb {
3682
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3683
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3684
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3685
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3686
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3687
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3688
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3689
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3690
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3691
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3692
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3693
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3694
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3695
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3696
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3697
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3698
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3699
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3700
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3701
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3702
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3587
3703
  }
3588
3704
 
3589
- .pf-v6-c-menu__item-select-icon {
3590
- color: var(--pf-v6-c-menu__item-select-icon--Color);
3705
+ .pf-v6-c-breadcrumb {
3706
+ display: inline-flex;
3591
3707
  }
3592
3708
 
3593
- .pf-v6-c-menu__item-main {
3594
- column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
3709
+ .pf-v6-c-breadcrumb__list {
3710
+ display: flex;
3711
+ flex-wrap: wrap;
3595
3712
  align-items: center;
3596
- width: 100%;
3597
3713
  }
3598
3714
 
3599
- .pf-v6-c-menu__item-text {
3600
- overflow: hidden;
3601
- text-overflow: ellipsis;
3715
+ .pf-v6-c-breadcrumb__item {
3716
+ display: flex;
3717
+ align-items: baseline;
3718
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3719
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3720
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3602
3721
  white-space: nowrap;
3603
- flex-grow: 1;
3722
+ list-style: none;
3604
3723
  }
3605
3724
 
3606
- .pf-v6-c-menu__group-title {
3607
- padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
3608
- padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
3609
- padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
3610
- padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
3611
- font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
3612
- font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
3613
- color: var(--pf-v6-c-menu__group-title--Color);
3725
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3726
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3614
3727
  }
3615
3728
 
3616
- .pf-v6-c-menu__item-description {
3617
- font-size: var(--pf-v6-c-menu__item-description--FontSize);
3618
- color: var(--pf-v6-c-menu__item-description--Color);
3619
- word-break: break-word;
3729
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3730
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3620
3731
  }
3621
3732
 
3622
- .pf-v6-c-menu__item-check .pf-v6-c-check {
3623
- --pf-v6-c-check__input--TranslateY: none;
3733
+ .pf-v6-c-breadcrumb__item-divider {
3734
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3735
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3736
+ line-height: 1;
3737
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3624
3738
  }
3625
3739
 
3626
- .pf-v6-c-menu__item-toggle-icon {
3627
- color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
3740
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3741
+ scale: -1 1;
3628
3742
  }
3629
3743
 
3630
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
3631
- scale: -1 1;
3744
+ .pf-v6-c-breadcrumb__link {
3745
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3746
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3747
+ font-size: inherit;
3748
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3749
+ line-height: inherit;
3750
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3751
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3752
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3753
+ word-break: break-word;
3754
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3632
3755
  }
3633
3756
 
3634
- .pf-v6-c-menu__item-icon {
3635
- color: var(--pf-v6-c-menu__item--icon--Color, inherit);
3757
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3758
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3759
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3760
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3636
3761
  }
3637
3762
 
3638
- .pf-v6-c-menu__item-select-icon,
3639
- .pf-v6-c-menu__item-external-icon {
3640
- opacity: 0;
3763
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3764
+ cursor: default;
3641
3765
  }
3642
3766
 
3643
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
3644
- .pf-v6-c-menu__item-action.pf-m-favorited,
3645
- .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3646
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
3647
- --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3767
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3768
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3769
+ text-decoration-line: none;
3648
3770
  }
3649
3771
 
3650
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
3651
- .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3652
- .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3653
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
3654
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3772
+ button.pf-v6-c-breadcrumb__link {
3773
+ border: none;
3655
3774
  }
3656
3775
 
3657
- .pf-v6-c-menu__breadcrumb {
3658
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3659
- padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3660
- padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3661
- padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3662
- padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3776
+ .pf-v6-c-breadcrumb__dropdown {
3777
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3778
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3779
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3780
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3663
3781
  }
3664
3782
 
3665
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3666
- min-width: auto;
3667
- padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3668
- padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3783
+ .pf-v6-c-breadcrumb__heading {
3784
+ display: inline;
3785
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3669
3786
  }
3670
3787
 
3671
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3672
- height: auto;
3788
+ .pf-v6-c-breadcrumb__link,
3789
+ .pf-v6-c-breadcrumb__heading {
3790
+ white-space: normal;
3673
3791
  }
3674
3792
 
3675
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3676
- --pf-v6-c-menu-toggle--BorderWidth: 0;
3677
- --pf-v6-c-menu-toggle--BorderColor: transparent;
3678
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3793
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3794
+ display: none;
3679
3795
  }
3680
3796
 
3681
3797
  .pf-v6-c-tooltip {
@@ -3807,92 +3923,4 @@ button.pf-v6-c-breadcrumb__link {
3807
3923
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3808
3924
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3809
3925
  transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3810
- }
3811
-
3812
- .pf-v6-c-spinner {
3813
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3814
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3815
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3816
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3817
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3818
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3819
- --pf-v6-c-spinner--StrokeWidth: 10;
3820
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3821
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3822
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3823
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3824
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3825
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3826
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3827
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3828
- }
3829
-
3830
- .pf-v6-c-spinner {
3831
- width: var(--pf-v6-c-spinner--Width);
3832
- height: var(--pf-v6-c-spinner--Height);
3833
- overflow: hidden;
3834
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3835
- }
3836
-
3837
- .pf-v6-c-spinner.pf-m-inline {
3838
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3839
- }
3840
-
3841
- .pf-v6-c-spinner.pf-m-xs {
3842
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3843
- --pf-v6-c-spinner--StrokeWidth: 15;
3844
- }
3845
-
3846
- .pf-v6-c-spinner.pf-m-sm {
3847
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3848
- }
3849
-
3850
- .pf-v6-c-spinner.pf-m-md {
3851
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3852
- }
3853
-
3854
- .pf-v6-c-spinner.pf-m-lg {
3855
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3856
- }
3857
-
3858
- .pf-v6-c-spinner.pf-m-xl {
3859
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3860
- }
3861
-
3862
- .pf-v6-c-spinner__path {
3863
- width: 100%;
3864
- height: 100%;
3865
- stroke: var(--pf-v6-c-spinner--Color);
3866
- stroke-dasharray: 283;
3867
- stroke-dashoffset: 280;
3868
- stroke-linecap: round;
3869
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3870
- transform-origin: 50% 50%;
3871
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3872
- }
3873
-
3874
- @keyframes pf-v6-c-spinner-animation-rotate {
3875
- 0% {
3876
- transform: rotate(0deg);
3877
- }
3878
- 100% {
3879
- transform: rotate(360deg);
3880
- }
3881
- }
3882
- @keyframes pf-v6-c-spinner-animation-dash {
3883
- 0% {
3884
- stroke-dashoffset: 280;
3885
- transform: rotate(0);
3886
- }
3887
- 15% {
3888
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3889
- }
3890
- 40% {
3891
- stroke-dasharray: 220;
3892
- stroke-dashoffset: 150;
3893
- }
3894
- 100% {
3895
- stroke-dashoffset: 280;
3896
- transform: rotate(720deg);
3897
- }
3898
3926
  }