@patternfly/react-templates 6.4.1-prerelease.5 → 6.4.1-prerelease.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) 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-ChCb1ffo.css → output-BDshzjq9.css} +754 -754
  6. package/package.json +3 -3
package/dist/umd/assets/{output-ChCb1ffo.css → output-BDshzjq9.css} RENAMED
@@ -3,324 +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
6
  .pf-v6-c-menu-toggle {
325
7
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
326
8
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -781,183 +463,426 @@
781
463
  .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
782
464
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
783
465
  }
784
-
785
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
786
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
787
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
788
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
466
+
467
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
468
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
469
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
470
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
471
+ }
472
+
473
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
474
+ content: none;
475
+ }
476
+
477
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
478
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
479
+ --pf-v6-c-menu-toggle--Gap: 0;
480
+ align-items: stretch;
481
+ padding: 0;
482
+ }
483
+
484
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
485
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
486
+ }
487
+
488
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
489
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
490
+ display: flex;
491
+ align-items: stretch;
492
+ }
493
+
494
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
495
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
496
+ flex: 1;
497
+ }
498
+
499
+ .pf-v6-c-menu-toggle__button {
500
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
501
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
502
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
503
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
504
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
505
+ color: inherit;
506
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
507
+ border: 0;
508
+ }
509
+
510
+ .pf-v6-c-menu-toggle__button.pf-m-text {
511
+ display: inline-flex;
512
+ align-items: baseline;
513
+ }
514
+
515
+ .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) {
516
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
517
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
518
+ }
519
+
520
+ .pf-v6-c-menu-toggle__text {
521
+ overflow: hidden;
522
+ text-overflow: ellipsis;
523
+ white-space: nowrap;
524
+ min-width: 0;
525
+ }
526
+
527
+ .pf-v6-c-menu-toggle__count {
528
+ display: flex;
529
+ flex-wrap: nowrap;
530
+ }
531
+
532
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
533
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
534
+ .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 {
535
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
536
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
537
+ }
538
+
539
+ .pf-v6-c-menu-toggle__icon {
540
+ flex-shrink: 0;
541
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
542
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
543
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
544
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
545
+ }
546
+
547
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
548
+ vertical-align: middle;
549
+ }
550
+
551
+ .pf-v6-c-menu-toggle__controls {
552
+ display: flex;
553
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
554
+ align-items: center;
555
+ justify-content: center;
556
+ margin-inline-start: auto;
557
+ }
558
+
559
+ .pf-v6-c-menu-toggle__toggle-icon {
560
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
561
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
562
+ }
563
+
564
+ .pf-v6-c-menu-toggle__status-icon {
565
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
566
+ }
567
+
568
+ .pf-v6-c-divider {
569
+ --pf-v6-c-divider--Display: flex;
570
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
571
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
572
+ --pf-v6-c-divider--before--FlexBasis: 100%;
573
+ }
574
+
575
+ .pf-v6-c-divider {
576
+ flex-direction: row;
577
+ width: 100%;
578
+ height: var(--pf-v6-c-divider--Size);
579
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
580
+ --pf-v6-hidden-visible--hidden--Display: none;
581
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
582
+ display: var(--pf-v6-hidden-visible--Display);
583
+ flex-shrink: 0;
584
+ align-items: stretch;
585
+ align-self: stretch;
586
+ justify-content: center;
587
+ border: 0;
588
+ }
589
+
590
+ .pf-v6-c-divider.pf-m-hidden {
591
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
592
+ }
593
+
594
+ @media screen and (min-width: 36rem) {
595
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
596
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
597
+ }
598
+ .pf-v6-c-divider.pf-m-visible-on-sm {
599
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
600
+ }
601
+ }
602
+ @media screen and (min-width: 48rem) {
603
+ .pf-v6-c-divider.pf-m-hidden-on-md {
604
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
605
+ }
606
+ .pf-v6-c-divider.pf-m-visible-on-md {
607
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
608
+ }
609
+ }
610
+ @media screen and (min-width: 62rem) {
611
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
612
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
613
+ }
614
+ .pf-v6-c-divider.pf-m-visible-on-lg {
615
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
616
+ }
617
+ }
618
+ @media screen and (min-width: 75rem) {
619
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
620
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
621
+ }
622
+ .pf-v6-c-divider.pf-m-visible-on-xl {
623
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
624
+ }
625
+ }
626
+ @media screen and (min-width: 90.625rem) {
627
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
628
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
629
+ }
630
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
631
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
632
+ }
633
+ }
634
+ .pf-v6-c-divider::before {
635
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
636
+ content: "";
637
+ background-color: var(--pf-v6-c-divider--Color);
638
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
639
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
789
640
  }
790
641
 
791
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
792
- content: none;
642
+ .pf-v6-c-divider.pf-m-horizontal {
643
+ flex-direction: row;
644
+ width: 100%;
645
+ height: var(--pf-v6-c-divider--Size);
793
646
  }
794
647
 
795
- .pf-v6-c-menu-toggle.pf-m-typeahead {
796
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
797
- --pf-v6-c-menu-toggle--Gap: 0;
798
- align-items: stretch;
799
- padding: 0;
648
+ .pf-v6-c-divider.pf-m-vertical {
649
+ flex-direction: column;
650
+ width: var(--pf-v6-c-divider--Size);
651
+ height: inherit;
800
652
  }
801
653
 
802
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
803
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
654
+ .pf-v6-c-divider.pf-m-inset-none {
655
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
804
656
  }
805
657
 
806
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
807
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
808
- display: flex;
809
- align-items: stretch;
658
+ .pf-v6-c-divider.pf-m-inset-xs {
659
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
810
660
  }
811
661
 
812
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
813
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
814
- flex: 1;
662
+ .pf-v6-c-divider.pf-m-inset-sm {
663
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
815
664
  }
816
665
 
817
- .pf-v6-c-menu-toggle__button {
818
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
819
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
820
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
821
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
822
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
823
- color: inherit;
824
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
825
- border: 0;
666
+ .pf-v6-c-divider.pf-m-inset-md {
667
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
826
668
  }
827
669
 
828
- .pf-v6-c-menu-toggle__button.pf-m-text {
829
- display: inline-flex;
830
- align-items: baseline;
670
+ .pf-v6-c-divider.pf-m-inset-lg {
671
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
831
672
  }
832
673
 
833
- .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) {
834
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
835
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
674
+ .pf-v6-c-divider.pf-m-inset-xl {
675
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
836
676
  }
837
677
 
838
- .pf-v6-c-menu-toggle__text {
839
- overflow: hidden;
840
- text-overflow: ellipsis;
841
- white-space: nowrap;
842
- min-width: 0;
678
+ .pf-v6-c-divider.pf-m-inset-2xl {
679
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
843
680
  }
844
681
 
845
- .pf-v6-c-menu-toggle__count {
846
- display: flex;
847
- flex-wrap: nowrap;
682
+ .pf-v6-c-divider.pf-m-inset-3xl {
683
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
848
684
  }
849
685
 
850
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
851
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
852
- .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 {
853
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
854
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
686
+ @media (min-width: 36rem) {
687
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
688
+ flex-direction: row;
689
+ width: 100%;
690
+ height: var(--pf-v6-c-divider--Size);
691
+ }
855
692
  }
856
-
857
- .pf-v6-c-menu-toggle__icon {
858
- flex-shrink: 0;
859
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
860
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
861
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
862
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
693
+ @media (min-width: 36rem) {
694
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
695
+ flex-direction: column;
696
+ width: var(--pf-v6-c-divider--Size);
697
+ height: inherit;
698
+ }
863
699
  }
864
-
865
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
866
- vertical-align: middle;
700
+ @media (min-width: 36rem) {
701
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
702
+ --pf-v6-c-divider--before--FlexBasis: 100%;
703
+ }
704
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
705
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
706
+ }
707
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
708
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
709
+ }
710
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
711
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
712
+ }
713
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
714
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
715
+ }
716
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
717
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
718
+ }
719
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
720
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
721
+ }
722
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
723
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
724
+ }
867
725
  }
868
-
869
- .pf-v6-c-menu-toggle__controls {
870
- display: flex;
871
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
872
- align-items: center;
873
- justify-content: center;
874
- margin-inline-start: auto;
726
+ @media (min-width: 48rem) {
727
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
728
+ flex-direction: row;
729
+ width: 100%;
730
+ height: var(--pf-v6-c-divider--Size);
731
+ }
875
732
  }
876
-
877
- .pf-v6-c-menu-toggle__toggle-icon {
878
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
879
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
733
+ @media (min-width: 48rem) {
734
+ .pf-v6-c-divider.pf-m-vertical-on-md {
735
+ flex-direction: column;
736
+ width: var(--pf-v6-c-divider--Size);
737
+ height: inherit;
738
+ }
880
739
  }
881
-
882
- .pf-v6-c-menu-toggle__status-icon {
883
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
740
+ @media (min-width: 48rem) {
741
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
742
+ --pf-v6-c-divider--before--FlexBasis: 100%;
743
+ }
744
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
745
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
746
+ }
747
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
748
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
749
+ }
750
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
751
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
752
+ }
753
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
754
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
755
+ }
756
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
757
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
758
+ }
759
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
760
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
761
+ }
762
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
763
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
764
+ }
884
765
  }
885
-
886
- .pf-v6-c-badge {
887
- --pf-v6-c-badge--BorderColor: transparent;
888
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
889
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
890
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
891
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
892
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
893
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
894
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
895
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
896
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
897
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
898
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
899
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
900
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
901
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
902
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
903
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
904
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
905
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
906
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
907
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
766
+ @media (min-width: 62rem) {
767
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
768
+ flex-direction: row;
769
+ width: 100%;
770
+ height: var(--pf-v6-c-divider--Size);
771
+ }
908
772
  }
909
-
910
- .pf-v6-c-badge {
911
- position: relative;
912
- display: inline-block;
913
- min-width: var(--pf-v6-c-badge--MinWidth);
914
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
915
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
916
- font-size: var(--pf-v6-c-badge--FontSize);
917
- font-weight: var(--pf-v6-c-badge--FontWeight);
918
- color: var(--pf-v6-c-badge--Color);
919
- text-align: center;
920
- white-space: nowrap;
921
- background-color: var(--pf-v6-c-badge--BackgroundColor);
922
- border-radius: var(--pf-v6-c-badge--BorderRadius);
773
+ @media (min-width: 62rem) {
774
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
775
+ flex-direction: column;
776
+ width: var(--pf-v6-c-divider--Size);
777
+ height: inherit;
778
+ }
923
779
  }
924
-
925
- .pf-v6-c-badge::after {
926
- position: absolute;
927
- inset: 0;
928
- pointer-events: none;
929
- content: "";
930
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
931
- border-radius: inherit;
780
+ @media (min-width: 62rem) {
781
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
782
+ --pf-v6-c-divider--before--FlexBasis: 100%;
783
+ }
784
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
785
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
786
+ }
787
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
788
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
789
+ }
790
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
791
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
792
+ }
793
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
794
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
795
+ }
796
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
797
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
798
+ }
799
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
800
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
801
+ }
802
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
803
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
804
+ }
932
805
  }
933
-
934
- .pf-v6-c-badge.pf-m-read {
935
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
936
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
937
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
938
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
806
+ @media (min-width: 75rem) {
807
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
808
+ flex-direction: row;
809
+ width: 100%;
810
+ height: var(--pf-v6-c-divider--Size);
811
+ }
939
812
  }
940
-
941
- .pf-v6-c-badge.pf-m-unread {
942
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
943
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
944
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
813
+ @media (min-width: 75rem) {
814
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
815
+ flex-direction: column;
816
+ width: var(--pf-v6-c-divider--Size);
817
+ height: inherit;
818
+ }
945
819
  }
946
-
947
- .pf-v6-c-badge.pf-m-disabled {
948
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
949
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
820
+ @media (min-width: 75rem) {
821
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
822
+ --pf-v6-c-divider--before--FlexBasis: 100%;
823
+ }
824
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
825
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
826
+ }
827
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
828
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
829
+ }
830
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
831
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
832
+ }
833
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
834
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
835
+ }
836
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
837
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
838
+ }
839
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
840
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
841
+ }
842
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
843
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
844
+ }
950
845
  }
951
-
952
- .pf-v6-c-badge.pf-m-disabled::after {
953
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
846
+ @media (min-width: 90.625rem) {
847
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
848
+ flex-direction: row;
849
+ width: 100%;
850
+ height: var(--pf-v6-c-divider--Size);
851
+ }
954
852
  }
955
-
956
- .pf-v6-c-badge__toggle-icon {
957
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
958
- color: var(--pf-v6-c-badge__toggle-icon--Color);
853
+ @media (min-width: 90.625rem) {
854
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
855
+ flex-direction: column;
856
+ width: var(--pf-v6-c-divider--Size);
857
+ height: inherit;
858
+ }
859
+ }
860
+ @media (min-width: 90.625rem) {
861
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
862
+ --pf-v6-c-divider--before--FlexBasis: 100%;
863
+ }
864
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
865
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
866
+ }
867
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
868
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
869
+ }
870
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
871
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
872
+ }
873
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
874
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
875
+ }
876
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
877
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
878
+ }
879
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
880
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
881
+ }
882
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
883
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
884
+ }
959
885
  }
960
-
961
886
  .pf-v6-c-label {
962
887
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
963
888
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -1567,176 +1492,20 @@ input.pf-v6-c-label__content {
1567
1492
 
1568
1493
  label.pf-v6-c-check, .pf-v6-c-check__label,
1569
1494
  .pf-v6-c-check__input {
1570
- cursor: pointer;
1571
- }
1572
-
1573
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1574
- .pf-v6-c-check__input:disabled,
1575
- .pf-v6-c-check__input.pf-m-disabled {
1576
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1577
- cursor: not-allowed;
1578
- }
1579
-
1580
- .pf-v6-c-check__label-required {
1581
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1582
- font-size: var(--pf-v6-c-check__label-required--FontSize);
1583
- color: var(--pf-v6-c-check__label-required--Color);
1584
- }
1585
-
1586
- .pf-v6-c-label-group {
1587
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1588
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1589
- --pf-v6-c-label-group--MaxWidth: 100%;
1590
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1591
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1592
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1593
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1594
- --pf-v6-c-label-group__main--MaxWidth: 100%;
1595
- --pf-v6-c-label-group__main--MinWidth: 0;
1596
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1597
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1598
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1599
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1600
- --pf-v6-c-label-group__list--MaxWidth: 100%;
1601
- --pf-v6-c-label-group__list--MinWidth: 0;
1602
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1603
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1604
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1605
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1606
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1607
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1608
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1609
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1610
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1611
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1612
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1613
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
1614
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1615
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1616
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1617
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1618
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1619
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1620
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1621
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1622
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1623
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1624
- }
1625
-
1626
- .pf-v6-c-label-group {
1627
- display: inline-flex;
1628
- row-gap: var(--pf-v6-c-label-group--RowGap);
1629
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1630
- align-items: center;
1631
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1632
- }
1633
-
1634
- .pf-v6-c-label-group.pf-m-category {
1635
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1636
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1637
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1638
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1639
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1640
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1641
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1642
- }
1643
-
1644
- .pf-v6-c-label-group.pf-m-vertical {
1645
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1646
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1647
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1648
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1649
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1650
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1651
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1652
- }
1653
-
1654
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1655
- align-items: flex-start;
1656
- }
1657
-
1658
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1659
- flex-direction: column;
1660
- align-items: flex-start;
1661
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1662
- }
1663
-
1664
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1665
- flex-direction: column;
1666
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1667
- }
1668
-
1669
- .pf-v6-c-label-group.pf-m-editable,
1670
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1671
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1672
- display: flex;
1673
- }
1674
-
1675
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1676
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1677
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1678
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1679
- flex: 1;
1680
- }
1681
-
1682
- .pf-v6-c-label-group__main {
1683
- display: flex;
1684
- flex: 1;
1685
- flex-wrap: wrap;
1686
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1687
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1688
- align-items: baseline;
1689
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1690
- }
1691
-
1692
- .pf-v6-c-label-group__list {
1693
- display: inline-flex;
1694
- flex-wrap: wrap;
1695
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1696
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1697
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1698
- }
1699
-
1700
- .pf-v6-c-label-group__list-item {
1701
- display: inline-flex;
1702
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1703
- }
1704
-
1705
- .pf-v6-c-label-group__label {
1706
- overflow: hidden;
1707
- text-overflow: ellipsis;
1708
- white-space: nowrap;
1709
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1710
- }
1711
-
1712
- .pf-v6-c-label-group__close {
1713
- display: flex;
1714
- align-self: flex-start;
1715
- }
1716
-
1717
- .pf-v6-c-label-group__close .pf-v6-c-button {
1718
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1719
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1720
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1721
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1722
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1495
+ cursor: pointer;
1723
1496
  }
1724
1497
 
1725
- .pf-v6-c-label-group__textarea {
1726
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1727
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1728
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1729
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1730
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1731
- white-space: nowrap;
1732
- resize: none;
1733
- border: 0;
1734
- -ms-overflow-style: none;
1735
- scrollbar-width: none;
1498
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1499
+ .pf-v6-c-check__input:disabled,
1500
+ .pf-v6-c-check__input.pf-m-disabled {
1501
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1502
+ cursor: not-allowed;
1736
1503
  }
1737
1504
 
1738
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1739
- display: none;
1505
+ .pf-v6-c-check__label-required {
1506
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1507
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
1508
+ color: var(--pf-v6-c-check__label-required--Color);
1740
1509
  }
1741
1510
 
1742
1511
  .pf-v6-c-button {
@@ -2617,23 +2386,254 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2617
2386
  d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2618
2387
  }
2619
2388
 
2620
- .pf-v6-c-button--hamburger-icon--bottom {
2621
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2389
+ .pf-v6-c-button--hamburger-icon--bottom {
2390
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2391
+ }
2392
+
2393
+ @keyframes pf-v6-c-button-icon-notify {
2394
+ 33% {
2395
+ transform: rotate(30deg);
2396
+ }
2397
+ 66% {
2398
+ transform: rotate(-60deg);
2399
+ }
2400
+ }
2401
+ @keyframes pf-v6-c-button-icon-favorited {
2402
+ 50% {
2403
+ scale: 1.5;
2404
+ }
2405
+ }
2406
+ .pf-v6-c-label-group {
2407
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2408
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2409
+ --pf-v6-c-label-group--MaxWidth: 100%;
2410
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2411
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2412
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2413
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2414
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
2415
+ --pf-v6-c-label-group__main--MinWidth: 0;
2416
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2417
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2418
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2419
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2420
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
2421
+ --pf-v6-c-label-group__list--MinWidth: 0;
2422
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2423
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2424
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2425
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2426
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2427
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2428
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2429
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2430
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2431
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2432
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2433
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
2434
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2435
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2436
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2437
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2438
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2439
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2440
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2441
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2442
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2443
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2444
+ }
2445
+
2446
+ .pf-v6-c-label-group {
2447
+ display: inline-flex;
2448
+ row-gap: var(--pf-v6-c-label-group--RowGap);
2449
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
2450
+ align-items: center;
2451
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
2452
+ }
2453
+
2454
+ .pf-v6-c-label-group.pf-m-category {
2455
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2456
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2457
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2458
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2459
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2460
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2461
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2462
+ }
2463
+
2464
+ .pf-v6-c-label-group.pf-m-vertical {
2465
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2466
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2467
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2468
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2469
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2470
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2471
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2472
+ }
2473
+
2474
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2475
+ align-items: flex-start;
2476
+ }
2477
+
2478
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2479
+ flex-direction: column;
2480
+ align-items: flex-start;
2481
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2482
+ }
2483
+
2484
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2485
+ flex-direction: column;
2486
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2487
+ }
2488
+
2489
+ .pf-v6-c-label-group.pf-m-editable,
2490
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2491
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2492
+ display: flex;
2493
+ }
2494
+
2495
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2496
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2497
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2498
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2499
+ flex: 1;
2500
+ }
2501
+
2502
+ .pf-v6-c-label-group__main {
2503
+ display: flex;
2504
+ flex: 1;
2505
+ flex-wrap: wrap;
2506
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
2507
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2508
+ align-items: baseline;
2509
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2510
+ }
2511
+
2512
+ .pf-v6-c-label-group__list {
2513
+ display: inline-flex;
2514
+ flex-wrap: wrap;
2515
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
2516
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2517
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2518
+ }
2519
+
2520
+ .pf-v6-c-label-group__list-item {
2521
+ display: inline-flex;
2522
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2523
+ }
2524
+
2525
+ .pf-v6-c-label-group__label {
2526
+ overflow: hidden;
2527
+ text-overflow: ellipsis;
2528
+ white-space: nowrap;
2529
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2530
+ }
2531
+
2532
+ .pf-v6-c-label-group__close {
2533
+ display: flex;
2534
+ align-self: flex-start;
2535
+ }
2536
+
2537
+ .pf-v6-c-label-group__close .pf-v6-c-button {
2538
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2539
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2540
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2541
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2542
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2543
+ }
2544
+
2545
+ .pf-v6-c-label-group__textarea {
2546
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2547
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2548
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2549
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2550
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2551
+ white-space: nowrap;
2552
+ resize: none;
2553
+ border: 0;
2554
+ -ms-overflow-style: none;
2555
+ scrollbar-width: none;
2556
+ }
2557
+
2558
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2559
+ display: none;
2560
+ }
2561
+
2562
+ .pf-v6-c-badge {
2563
+ --pf-v6-c-badge--BorderColor: transparent;
2564
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2565
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2566
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2567
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2568
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2569
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2570
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2571
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2572
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2573
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2574
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2575
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2576
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2577
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2578
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2579
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2580
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2581
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2582
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2583
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2584
+ }
2585
+
2586
+ .pf-v6-c-badge {
2587
+ position: relative;
2588
+ display: inline-block;
2589
+ min-width: var(--pf-v6-c-badge--MinWidth);
2590
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2591
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2592
+ font-size: var(--pf-v6-c-badge--FontSize);
2593
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2594
+ color: var(--pf-v6-c-badge--Color);
2595
+ text-align: center;
2596
+ white-space: nowrap;
2597
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2598
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2599
+ }
2600
+
2601
+ .pf-v6-c-badge::after {
2602
+ position: absolute;
2603
+ inset: 0;
2604
+ pointer-events: none;
2605
+ content: "";
2606
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2607
+ border-radius: inherit;
2608
+ }
2609
+
2610
+ .pf-v6-c-badge.pf-m-read {
2611
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2612
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2613
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2614
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2615
+ }
2616
+
2617
+ .pf-v6-c-badge.pf-m-unread {
2618
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2619
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2620
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2621
+ }
2622
+
2623
+ .pf-v6-c-badge.pf-m-disabled {
2624
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2625
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2622
2626
  }
2623
2627
 
2624
- @keyframes pf-v6-c-button-icon-notify {
2625
- 33% {
2626
- transform: rotate(30deg);
2627
- }
2628
- 66% {
2629
- transform: rotate(-60deg);
2630
- }
2628
+ .pf-v6-c-badge.pf-m-disabled::after {
2629
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2631
2630
  }
2632
- @keyframes pf-v6-c-button-icon-favorited {
2633
- 50% {
2634
- scale: 1.5;
2635
- }
2631
+
2632
+ .pf-v6-c-badge__toggle-icon {
2633
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2634
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2636
2635
  }
2636
+
2637
2637
  .pf-v6-c-text-input-group {
2638
2638
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2639
2639
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
@@ -2878,6 +2878,122 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2878
2878
  display: flex;
2879
2879
  }
2880
2880
 
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);
2903
+ }
2904
+
2905
+ .pf-v6-c-breadcrumb {
2906
+ display: inline-flex;
2907
+ }
2908
+
2909
+ .pf-v6-c-breadcrumb__list {
2910
+ display: flex;
2911
+ flex-wrap: wrap;
2912
+ align-items: center;
2913
+ }
2914
+
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;
2923
+ }
2924
+
2925
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
2926
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2927
+ }
2928
+
2929
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
2930
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2931
+ }
2932
+
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);
2938
+ }
2939
+
2940
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
2941
+ scale: -1 1;
2942
+ }
2943
+
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);
2955
+ }
2956
+
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);
2961
+ }
2962
+
2963
+ .pf-v6-c-breadcrumb__link.pf-m-current {
2964
+ cursor: default;
2965
+ }
2966
+
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;
2970
+ }
2971
+
2972
+ button.pf-v6-c-breadcrumb__link {
2973
+ border: none;
2974
+ }
2975
+
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);
2981
+ }
2982
+
2983
+ .pf-v6-c-breadcrumb__heading {
2984
+ display: inline;
2985
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2986
+ }
2987
+
2988
+ .pf-v6-c-breadcrumb__link,
2989
+ .pf-v6-c-breadcrumb__heading {
2990
+ white-space: normal;
2991
+ }
2992
+
2993
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
2994
+ display: none;
2995
+ }
2996
+
2881
2997
  .pf-v6-c-menu {
2882
2998
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2883
2999
  --pf-v6-c-menu--Width: auto;
@@ -3649,122 +3765,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3649
3765
  transform: rotate(720deg);
3650
3766
  }
3651
3767
  }
3652
- .pf-v6-c-breadcrumb {
3653
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3654
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3655
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3656
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3657
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3658
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3659
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3660
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3661
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3662
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3663
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3664
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3665
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3666
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3667
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3668
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3669
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3670
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3671
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3672
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3673
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3674
- }
3675
-
3676
- .pf-v6-c-breadcrumb {
3677
- display: inline-flex;
3678
- }
3679
-
3680
- .pf-v6-c-breadcrumb__list {
3681
- display: flex;
3682
- flex-wrap: wrap;
3683
- align-items: center;
3684
- }
3685
-
3686
- .pf-v6-c-breadcrumb__item {
3687
- display: flex;
3688
- align-items: baseline;
3689
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3690
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3691
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3692
- white-space: nowrap;
3693
- list-style: none;
3694
- }
3695
-
3696
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3697
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3698
- }
3699
-
3700
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3701
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3702
- }
3703
-
3704
- .pf-v6-c-breadcrumb__item-divider {
3705
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3706
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3707
- line-height: 1;
3708
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3709
- }
3710
-
3711
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3712
- scale: -1 1;
3713
- }
3714
-
3715
- .pf-v6-c-breadcrumb__link {
3716
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3717
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3718
- font-size: inherit;
3719
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3720
- line-height: inherit;
3721
- color: var(--pf-v6-c-breadcrumb__link--Color);
3722
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3723
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3724
- word-break: break-word;
3725
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3726
- }
3727
-
3728
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3729
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3730
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3731
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3732
- }
3733
-
3734
- .pf-v6-c-breadcrumb__link.pf-m-current {
3735
- cursor: default;
3736
- }
3737
-
3738
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3739
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3740
- text-decoration-line: none;
3741
- }
3742
-
3743
- button.pf-v6-c-breadcrumb__link {
3744
- border: none;
3745
- }
3746
-
3747
- .pf-v6-c-breadcrumb__dropdown {
3748
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3749
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3750
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3751
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3752
- }
3753
-
3754
- .pf-v6-c-breadcrumb__heading {
3755
- display: inline;
3756
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3757
- }
3758
-
3759
- .pf-v6-c-breadcrumb__link,
3760
- .pf-v6-c-breadcrumb__heading {
3761
- white-space: normal;
3762
- }
3763
-
3764
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3765
- display: none;
3766
- }
3767
-
3768
3768
  .pf-v6-c-tooltip {
3769
3769
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3770
3770
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);