@patternfly/react-templates 6.5.0-prerelease.31 → 6.5.0-prerelease.33

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 (12) hide show
  1. package/CHANGELOG.md +10 -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-CcgJk-g_.css → output-C3F75__j.css} +1685 -1685
  6. package/dist/umd/react-templates.min.js +1 -1
  7. package/package.json +6 -6
  8. package/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap +32 -8
  9. package/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap +32 -8
  10. package/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap +32 -8
  11. package/src/components/Select/__tests__/__snapshots__/SimpleSelect.test.tsx.snap +32 -8
  12. package/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap +32 -8
package/dist/umd/assets/{output-CcgJk-g_.css → output-C3F75__j.css} RENAMED
@@ -3,563 +3,728 @@
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
- }
22
-
23
- .pf-v6-c-divider.pf-m-hidden {
24
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
25
- }
26
-
27
- @media screen and (min-width: 36rem) {
28
- .pf-v6-c-divider.pf-m-hidden-on-sm {
29
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
30
- }
31
- .pf-v6-c-divider.pf-m-visible-on-sm {
32
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
33
- }
34
- }
35
- @media screen and (min-width: 48rem) {
36
- .pf-v6-c-divider.pf-m-hidden-on-md {
37
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
38
- }
39
- .pf-v6-c-divider.pf-m-visible-on-md {
40
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
41
- }
42
- }
43
- @media screen and (min-width: 62rem) {
44
- .pf-v6-c-divider.pf-m-hidden-on-lg {
45
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
46
- }
47
- .pf-v6-c-divider.pf-m-visible-on-lg {
48
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
49
- }
50
- }
51
- @media screen and (min-width: 75rem) {
52
- .pf-v6-c-divider.pf-m-hidden-on-xl {
53
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
54
- }
55
- .pf-v6-c-divider.pf-m-visible-on-xl {
56
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
57
- }
58
- }
59
- @media screen and (min-width: 90.625rem) {
60
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
61
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
62
- }
63
- .pf-v6-c-divider.pf-m-visible-on-2xl {
64
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
65
- }
66
- }
67
- .pf-v6-c-divider {
68
- flex-shrink: 0;
69
- align-items: stretch;
70
- align-self: stretch;
71
- justify-content: center;
72
- border: 0;
6
+ .pf-v6-c-check {
7
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
8
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
9
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
10
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
11
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
12
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
13
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
14
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
15
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
16
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
17
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
18
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
19
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
20
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
73
21
  }
74
22
 
75
- .pf-v6-c-divider::before {
76
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
77
- content: "";
78
- background-color: var(--pf-v6-c-divider--Color);
79
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
80
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
23
+ .pf-v6-c-check {
24
+ display: grid;
25
+ grid-template-columns: auto 1fr;
26
+ grid-gap: var(--pf-v6-c-check--GridGap);
27
+ accent-color: var(--pf-v6-c-check--AccentColor);
81
28
  }
82
29
 
83
- .pf-v6-c-divider.pf-m-horizontal {
84
- flex-direction: row;
85
- width: 100%;
86
- height: var(--pf-v6-c-divider--Size);
30
+ .pf-v6-c-check.pf-m-standalone {
31
+ display: inline-grid;
32
+ grid-template-columns: auto;
33
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
87
34
  }
88
35
 
89
- .pf-v6-c-divider.pf-m-vertical {
90
- flex-direction: column;
91
- width: var(--pf-v6-c-divider--Size);
92
- height: inherit;
36
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
37
+ align-self: center;
38
+ transform: none;
93
39
  }
94
40
 
95
- .pf-v6-c-divider.pf-m-inset-none {
96
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
41
+ .pf-v6-c-check__input {
42
+ align-self: start;
43
+ font-size: var(--pf-v6-c-check__label--FontSize);
44
+ line-height: var(--pf-v6-c-check__label--LineHeight);
45
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
97
46
  }
98
47
 
99
- .pf-v6-c-divider.pf-m-inset-xs {
100
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
48
+ .pf-v6-c-check__label {
49
+ font-size: var(--pf-v6-c-check__label--FontSize);
50
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
51
+ line-height: var(--pf-v6-c-check__label--LineHeight);
52
+ color: var(--pf-v6-c-check__label--Color);
101
53
  }
102
54
 
103
- .pf-v6-c-divider.pf-m-inset-sm {
104
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
55
+ .pf-v6-c-check__description {
56
+ grid-column: 2;
57
+ font-size: var(--pf-v6-c-check__description--FontSize);
58
+ color: var(--pf-v6-c-check__description--Color);
105
59
  }
106
60
 
107
- .pf-v6-c-divider.pf-m-inset-md {
108
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
61
+ .pf-v6-c-check__body {
62
+ grid-column: 2;
109
63
  }
110
64
 
111
- .pf-v6-c-divider.pf-m-inset-lg {
112
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
65
+ .pf-v6-c-check__label,
66
+ .pf-v6-c-check__input {
67
+ justify-self: start;
113
68
  }
114
69
 
115
- .pf-v6-c-divider.pf-m-inset-xl {
116
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
70
+ label.pf-v6-c-check, .pf-v6-c-check__label,
71
+ .pf-v6-c-check__input {
72
+ cursor: pointer;
117
73
  }
118
74
 
119
- .pf-v6-c-divider.pf-m-inset-2xl {
120
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
75
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
76
+ .pf-v6-c-check__input:disabled,
77
+ .pf-v6-c-check__input.pf-m-disabled {
78
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
79
+ cursor: not-allowed;
121
80
  }
122
81
 
123
- .pf-v6-c-divider.pf-m-inset-3xl {
124
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
82
+ .pf-v6-c-check__label-required {
83
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
84
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
85
+ color: var(--pf-v6-c-check__label-required--Color);
125
86
  }
126
87
 
127
- @media (min-width: 36rem) {
128
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
129
- flex-direction: row;
130
- width: 100%;
131
- height: var(--pf-v6-c-divider--Size);
132
- }
133
- }
134
- @media (min-width: 36rem) {
135
- .pf-v6-c-divider.pf-m-vertical-on-sm {
136
- flex-direction: column;
137
- width: var(--pf-v6-c-divider--Size);
138
- height: inherit;
139
- }
140
- }
141
- @media (min-width: 36rem) {
142
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
143
- --pf-v6-c-divider--before--FlexBasis: 100%;
144
- }
145
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
146
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
147
- }
148
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
149
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
150
- }
151
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
152
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
153
- }
154
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
155
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
156
- }
157
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
158
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
159
- }
160
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
161
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
162
- }
163
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
164
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
165
- }
166
- }
167
- @media (min-width: 48rem) {
168
- .pf-v6-c-divider.pf-m-horizontal-on-md {
169
- flex-direction: row;
170
- width: 100%;
171
- height: var(--pf-v6-c-divider--Size);
172
- }
173
- }
174
- @media (min-width: 48rem) {
175
- .pf-v6-c-divider.pf-m-vertical-on-md {
176
- flex-direction: column;
177
- width: var(--pf-v6-c-divider--Size);
178
- height: inherit;
179
- }
180
- }
181
- @media (min-width: 48rem) {
182
- .pf-v6-c-divider.pf-m-inset-none-on-md {
183
- --pf-v6-c-divider--before--FlexBasis: 100%;
184
- }
185
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
186
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
187
- }
188
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
189
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
190
- }
191
- .pf-v6-c-divider.pf-m-inset-md-on-md {
192
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
193
- }
194
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
195
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
196
- }
197
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
198
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
199
- }
200
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
201
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
202
- }
203
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
204
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
205
- }
206
- }
207
- @media (min-width: 62rem) {
208
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
209
- flex-direction: row;
210
- width: 100%;
211
- height: var(--pf-v6-c-divider--Size);
212
- }
213
- }
214
- @media (min-width: 62rem) {
215
- .pf-v6-c-divider.pf-m-vertical-on-lg {
216
- flex-direction: column;
217
- width: var(--pf-v6-c-divider--Size);
218
- height: inherit;
219
- }
220
- }
221
- @media (min-width: 62rem) {
222
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
223
- --pf-v6-c-divider--before--FlexBasis: 100%;
224
- }
225
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
226
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
227
- }
228
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
229
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
230
- }
231
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
232
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
233
- }
234
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
235
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
236
- }
237
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
238
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
239
- }
240
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
241
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
242
- }
243
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
244
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
245
- }
88
+ .pf-v6-c-menu-toggle {
89
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
90
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
91
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
92
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
93
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
94
+ --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));
95
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
96
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
97
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
98
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
99
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
100
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
101
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
102
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
103
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
104
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
105
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
106
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
107
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
108
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
109
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
110
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
111
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
112
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
113
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
114
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
115
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
116
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
117
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
118
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
119
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
120
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
121
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
122
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
123
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
124
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
125
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
126
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
127
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
128
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
129
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
130
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
131
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
132
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
133
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
134
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
135
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
136
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
137
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
138
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
139
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
140
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
141
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
142
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
143
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
144
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
145
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
146
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
147
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
148
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
149
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
150
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
151
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
152
+ --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
153
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
154
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
155
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
156
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
157
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
158
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
159
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
160
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
161
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
162
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
163
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
164
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
165
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
166
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
167
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
168
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
169
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
170
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
171
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
172
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
173
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
174
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
175
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
176
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
177
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
178
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
179
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
180
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
181
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
182
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
183
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
184
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
185
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
186
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
187
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
188
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
189
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
190
+ --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));
191
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
192
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
193
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
194
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
195
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
196
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
197
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
198
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
199
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
200
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
201
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
202
+ --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
203
+ --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
204
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
205
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
206
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
207
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
208
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
209
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
210
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
211
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
212
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
213
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
214
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
215
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
216
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
217
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
218
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
219
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
220
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
221
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
222
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
223
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
224
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
225
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
226
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
227
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
228
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
229
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
230
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
231
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
232
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
233
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
234
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
235
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
236
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
237
+ }
238
+
239
+ .pf-v6-c-menu-toggle {
240
+ position: relative;
241
+ display: inline-flex;
242
+ gap: var(--pf-v6-c-menu-toggle--Gap);
243
+ align-items: center;
244
+ justify-content: center;
245
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
246
+ max-width: 100%;
247
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
248
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
249
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
250
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
251
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
252
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
253
+ color: var(--pf-v6-c-menu-toggle--Color);
254
+ cursor: pointer;
255
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
256
+ border: 0;
257
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
258
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
259
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
260
+ }
261
+
262
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
263
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
264
+ }
265
+
266
+ .pf-v6-c-menu-toggle::before {
267
+ position: absolute;
268
+ inset-block-start: 0;
269
+ inset-block-end: 0;
270
+ inset-inline-start: 0;
271
+ inset-inline-end: 0;
272
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
273
+ pointer-events: none;
274
+ content: "";
275
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
276
+ transition: inherit;
277
+ }
278
+
279
+ .pf-v6-c-menu-toggle.pf-m-primary {
280
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
281
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
282
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
283
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
284
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
285
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
286
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
287
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
288
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
289
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
290
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
291
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
292
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
293
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
294
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
295
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
296
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
297
+ }
298
+
299
+ .pf-v6-c-menu-toggle.pf-m-secondary {
300
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
301
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
302
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
303
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
304
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
305
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
306
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
307
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
308
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
309
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
310
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
311
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
312
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
313
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
314
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
315
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
316
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
317
+ }
318
+
319
+ .pf-v6-c-menu-toggle.pf-m-full-height {
320
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
321
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
322
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
323
+ align-items: center;
324
+ height: 100%;
325
+ }
326
+
327
+ .pf-v6-c-menu-toggle.pf-m-full-width {
328
+ width: 100%;
329
+ }
330
+
331
+ .pf-v6-c-menu-toggle.pf-m-plain {
332
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
333
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
334
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
335
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
336
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
337
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
338
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
339
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
340
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
341
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
342
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
343
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
344
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
345
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
346
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
347
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
348
+ }
349
+
350
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
351
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
352
+ }
353
+
354
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
355
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
356
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
357
+ }
358
+
359
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
360
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
361
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
362
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
363
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
364
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
365
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
366
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
367
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
368
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
369
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
246
370
  }
247
- @media (min-width: 75rem) {
248
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
249
- flex-direction: row;
250
- width: 100%;
251
- height: var(--pf-v6-c-divider--Size);
252
- }
371
+
372
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
373
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
374
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
375
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
376
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
377
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
378
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
253
379
  }
254
- @media (min-width: 75rem) {
255
- .pf-v6-c-divider.pf-m-vertical-on-xl {
256
- flex-direction: column;
257
- width: var(--pf-v6-c-divider--Size);
258
- height: inherit;
259
- }
380
+
381
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
382
+ border: 0;
260
383
  }
261
- @media (min-width: 75rem) {
262
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
263
- --pf-v6-c-divider--before--FlexBasis: 100%;
264
- }
265
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
266
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
267
- }
268
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
269
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
270
- }
271
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
272
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
273
- }
274
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
275
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
276
- }
277
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
278
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
279
- }
280
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
281
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
282
- }
283
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
284
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
285
- }
384
+
385
+ .pf-v6-c-menu-toggle.pf-m-small {
386
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
387
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
388
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
389
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
390
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
391
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
392
+ --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);
393
+ --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);
286
394
  }
287
- @media (min-width: 90.625rem) {
288
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
289
- flex-direction: row;
290
- width: 100%;
291
- height: var(--pf-v6-c-divider--Size);
292
- }
395
+
396
+ .pf-v6-c-menu-toggle.pf-m-success {
397
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
398
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
293
399
  }
294
- @media (min-width: 90.625rem) {
295
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
296
- flex-direction: column;
297
- width: var(--pf-v6-c-divider--Size);
298
- height: inherit;
299
- }
400
+
401
+ .pf-v6-c-menu-toggle.pf-m-warning {
402
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
403
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
300
404
  }
301
- @media (min-width: 90.625rem) {
302
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
303
- --pf-v6-c-divider--before--FlexBasis: 100%;
304
- }
305
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
306
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
307
- }
308
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
309
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
310
- }
311
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
312
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
313
- }
314
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
315
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
405
+
406
+ .pf-v6-c-menu-toggle.pf-m-danger {
407
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
408
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
409
+ }
410
+
411
+ @media screen and (prefers-reduced-motion: no-preference) {
412
+ .pf-v6-c-menu-toggle.pf-m-danger {
413
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
414
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
415
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
416
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
417
+ animation-fill-mode: both;
316
418
  }
317
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
318
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
419
+ }
420
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
421
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
422
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
423
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
424
+ }
425
+
426
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
427
+ from {
428
+ opacity: 0;
319
429
  }
320
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
321
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
430
+ to {
431
+ opacity: 1;
322
432
  }
323
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
324
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
433
+ }
434
+ .pf-v6-c-menu-toggle.pf-m-settings {
435
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
436
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
437
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
438
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
439
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
440
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
441
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
442
+ }
443
+
444
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
445
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
446
+ }
447
+
448
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
449
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
450
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
451
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
452
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
453
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
454
+ }
455
+
456
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
457
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
458
+ pointer-events: none;
459
+ }
460
+
461
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
462
+ syntax: "<length>";
463
+ inherits: false;
464
+ initial-value: 0;
465
+ }
466
+ @media (prefers-reduced-motion: no-preference) {
467
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
468
+ 33% {
469
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
470
+ }
471
+ 66% {
472
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
473
+ }
325
474
  }
326
475
  }
327
- .pf-v6-c-check {
328
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
329
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
330
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
331
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
332
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
333
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
334
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
335
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
336
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
337
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
338
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
339
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
340
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
341
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
476
+ .pf-v6-c-menu-toggle.pf-m-split-button {
477
+ --pf-v6-c-menu-toggle--Gap: 0;
478
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
479
+ padding: 0;
342
480
  }
343
481
 
344
- .pf-v6-c-check {
345
- display: grid;
346
- grid-template-columns: auto 1fr;
347
- grid-gap: var(--pf-v6-c-check--GridGap);
348
- accent-color: var(--pf-v6-c-check--AccentColor);
482
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
483
+ position: relative;
484
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
485
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
486
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
487
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
349
488
  }
350
489
 
351
- .pf-v6-c-check.pf-m-standalone {
352
- display: inline-grid;
353
- grid-template-columns: auto;
354
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
490
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
491
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
492
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
355
493
  }
356
494
 
357
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
495
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
496
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
497
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
498
+ }
499
+
500
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
501
+ --pf-v6-c-check__label--Color: currentcolor;
502
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
503
+ align-items: center;
504
+ align-self: stretch;
505
+ }
506
+
507
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
508
+ --pf-v6-c-check__input--TranslateY: 0;
358
509
  align-self: center;
359
- transform: none;
360
510
  }
361
511
 
362
- .pf-v6-c-check__input {
363
- align-self: start;
364
- font-size: var(--pf-v6-c-check__label--FontSize);
365
- line-height: var(--pf-v6-c-check__label--LineHeight);
366
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
512
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
513
+ 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);
514
+ }
515
+
516
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
517
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
518
+ }
519
+
520
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
521
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
522
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
523
+ }
524
+
525
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
526
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
527
+ --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);
528
+ }
529
+
530
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
531
+ --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);
532
+ }
533
+
534
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
535
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
536
+ }
537
+
538
+ .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,
539
+ .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,
540
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
541
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
542
+ }
543
+
544
+ .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,
545
+ .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,
546
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
547
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
548
+ }
549
+
550
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
551
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
367
552
  }
368
553
 
369
- .pf-v6-c-check__label {
370
- font-size: var(--pf-v6-c-check__label--FontSize);
371
- font-weight: var(--pf-v6-c-check__label--FontWeight);
372
- line-height: var(--pf-v6-c-check__label--LineHeight);
373
- color: var(--pf-v6-c-check__label--Color);
554
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
555
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
556
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
557
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
374
558
  }
375
559
 
376
- .pf-v6-c-check__description {
377
- grid-column: 2;
378
- font-size: var(--pf-v6-c-check__description--FontSize);
379
- color: var(--pf-v6-c-check__description--Color);
560
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
561
+ content: none;
380
562
  }
381
563
 
382
- .pf-v6-c-check__body {
383
- grid-column: 2;
564
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
565
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
566
+ --pf-v6-c-menu-toggle--Gap: 0;
567
+ align-items: stretch;
568
+ padding: 0;
384
569
  }
385
570
 
386
- .pf-v6-c-check__label,
387
- .pf-v6-c-check__input {
388
- justify-self: start;
571
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
572
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
389
573
  }
390
574
 
391
- label.pf-v6-c-check, .pf-v6-c-check__label,
392
- .pf-v6-c-check__input {
393
- cursor: pointer;
575
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
576
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
577
+ display: flex;
578
+ align-items: stretch;
394
579
  }
395
580
 
396
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
397
- .pf-v6-c-check__input:disabled,
398
- .pf-v6-c-check__input.pf-m-disabled {
399
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
400
- cursor: not-allowed;
581
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
582
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
583
+ flex: 1;
401
584
  }
402
585
 
403
- .pf-v6-c-check__label-required {
404
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
405
- font-size: var(--pf-v6-c-check__label-required--FontSize);
406
- color: var(--pf-v6-c-check__label-required--Color);
586
+ .pf-v6-c-menu-toggle__button {
587
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
588
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
589
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
590
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
591
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
592
+ color: inherit;
593
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
594
+ border: 0;
407
595
  }
408
596
 
409
- .pf-v6-c-label-group {
410
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
411
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
412
- --pf-v6-c-label-group--MaxWidth: 100%;
413
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
414
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
415
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
416
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
417
- --pf-v6-c-label-group__main--MaxWidth: 100%;
418
- --pf-v6-c-label-group__main--MinWidth: 0;
419
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
420
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
421
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
422
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
423
- --pf-v6-c-label-group__list--MaxWidth: 100%;
424
- --pf-v6-c-label-group__list--MinWidth: 0;
425
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
426
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
427
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
428
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
429
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
430
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
431
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
432
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
433
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
434
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
435
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
436
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
437
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
438
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
439
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
440
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
441
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
442
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
443
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
444
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
445
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
446
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
597
+ .pf-v6-c-menu-toggle__button.pf-m-text {
598
+ display: inline-flex;
599
+ align-items: baseline;
447
600
  }
448
601
 
449
- .pf-v6-c-label-group {
450
- display: inline-flex;
451
- row-gap: var(--pf-v6-c-label-group--RowGap);
452
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
453
- align-items: center;
454
- max-width: var(--pf-v6-c-label-group--MaxWidth);
602
+ .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) {
603
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
604
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
455
605
  }
456
606
 
457
- .pf-v6-c-label-group.pf-m-category {
458
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
459
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
460
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
461
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
462
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
463
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
464
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
607
+ .pf-v6-c-menu-toggle__text {
608
+ overflow: hidden;
609
+ text-overflow: ellipsis;
610
+ white-space: nowrap;
611
+ min-width: 0;
465
612
  }
466
613
 
467
- .pf-v6-c-label-group.pf-m-vertical {
468
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
469
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
470
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
471
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
472
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
473
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
474
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
614
+ .pf-v6-c-menu-toggle__count {
615
+ display: flex;
616
+ flex-wrap: nowrap;
475
617
  }
476
618
 
477
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
478
- align-items: flex-start;
619
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
620
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
621
+ .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 {
622
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
623
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
479
624
  }
480
625
 
481
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
482
- flex-direction: column;
483
- align-items: flex-start;
484
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
626
+ .pf-v6-c-menu-toggle__icon {
627
+ flex-shrink: 0;
628
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
629
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
630
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
631
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
485
632
  }
486
633
 
487
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
488
- flex-direction: column;
489
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
634
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
635
+ vertical-align: middle;
490
636
  }
491
637
 
492
- .pf-v6-c-label-group.pf-m-editable,
493
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
494
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
638
+ .pf-v6-c-menu-toggle__controls {
495
639
  display: flex;
640
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
641
+ align-items: center;
642
+ justify-content: center;
643
+ margin-inline-start: auto;
496
644
  }
497
645
 
498
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
499
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
500
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
501
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
502
- flex: 1;
646
+ .pf-v6-c-menu-toggle__toggle-icon {
647
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
648
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
503
649
  }
504
650
 
505
- .pf-v6-c-label-group__main {
506
- display: flex;
507
- flex: 1;
508
- flex-wrap: wrap;
509
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
510
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
511
- align-items: baseline;
512
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
651
+ .pf-v6-c-menu-toggle__status-icon {
652
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
513
653
  }
514
654
 
515
- .pf-v6-c-label-group__list {
516
- display: inline-flex;
517
- flex-wrap: wrap;
518
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
519
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
520
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
655
+ .pf-v6-c-badge {
656
+ --pf-v6-c-badge--BorderColor: transparent;
657
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
658
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
659
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
660
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
661
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
662
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
663
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
664
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
665
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
666
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
667
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
668
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
669
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
670
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
671
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
672
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
673
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
674
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
675
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
676
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
521
677
  }
522
678
 
523
- .pf-v6-c-label-group__list-item {
524
- display: inline-flex;
525
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
679
+ .pf-v6-c-badge {
680
+ position: relative;
681
+ display: inline-block;
682
+ min-width: var(--pf-v6-c-badge--MinWidth);
683
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
684
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
685
+ font-size: var(--pf-v6-c-badge--FontSize);
686
+ font-weight: var(--pf-v6-c-badge--FontWeight);
687
+ color: var(--pf-v6-c-badge--Color);
688
+ text-align: center;
689
+ white-space: nowrap;
690
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
691
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
526
692
  }
527
693
 
528
- .pf-v6-c-label-group__label {
529
- overflow: hidden;
530
- text-overflow: ellipsis;
531
- white-space: nowrap;
532
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
694
+ .pf-v6-c-badge::after {
695
+ position: absolute;
696
+ inset: 0;
697
+ pointer-events: none;
698
+ content: "";
699
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
700
+ border-radius: inherit;
533
701
  }
534
702
 
535
- .pf-v6-c-label-group__close {
536
- display: flex;
537
- align-self: flex-start;
703
+ .pf-v6-c-badge.pf-m-read {
704
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
705
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
706
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
707
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
708
+ }
709
+
710
+ .pf-v6-c-badge.pf-m-unread {
711
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
712
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
713
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
538
714
  }
539
715
 
540
- .pf-v6-c-label-group__close .pf-v6-c-button {
541
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
542
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
543
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
544
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
545
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
716
+ .pf-v6-c-badge.pf-m-disabled {
717
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
718
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
546
719
  }
547
720
 
548
- .pf-v6-c-label-group__textarea {
549
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
550
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
551
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
552
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
553
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
554
- white-space: nowrap;
555
- resize: none;
556
- scrollbar-width: none;
557
- -ms-overflow-style: none;
558
- border: 0;
721
+ .pf-v6-c-badge.pf-m-disabled::after {
722
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
559
723
  }
560
724
 
561
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
562
- display: none;
725
+ .pf-v6-c-badge__toggle-icon {
726
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
727
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
563
728
  }
564
729
 
565
730
  .pf-v6-c-text-input-group {
@@ -749,703 +914,760 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
749
914
 
750
915
  .pf-v6-c-text-input-group__icon {
751
916
  position: absolute;
752
- inset-block-start: 50%;
753
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
754
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
755
- color: var(--pf-v6-c-text-input-group__icon--Color);
756
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
757
- }
758
-
759
- .pf-v6-c-text-input-group__icon.pf-m-status {
760
- inset-inline-start: auto;
761
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
762
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
763
- }
764
-
765
- .pf-v6-c-text-input-group__text-input {
766
- overflow: hidden;
767
- text-overflow: ellipsis;
768
- white-space: nowrap;
769
- position: relative;
770
- width: 100%;
771
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
772
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
773
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
774
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
775
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
776
- color: var(--pf-v6-c-text-input-group__text-input--Color);
777
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
778
- border: 0;
779
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
780
- }
781
-
782
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
783
- grid-area: text-input;
784
- }
785
-
786
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
787
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
788
- }
789
-
790
- .pf-v6-c-text-input-group__text-input::placeholder {
791
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
792
- }
793
-
794
- .pf-v6-c-text-input-group__utilities {
795
- display: flex;
796
- align-items: center;
797
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
798
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
799
- }
800
-
801
- .pf-v6-c-text-input-group__utilities > * + * {
802
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
803
- }
804
-
805
- .pf-v6-c-text-input-group__group {
806
- display: flex;
807
- }
808
-
809
- .pf-v6-c-menu-toggle {
810
- --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
811
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
812
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
813
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
814
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
815
- --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));
816
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
817
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
818
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
819
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
820
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
821
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
822
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
823
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
824
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
825
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
826
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
827
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
828
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
829
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
830
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
831
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
832
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
833
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
834
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
835
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
836
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
837
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
838
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
839
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
840
- --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
841
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
842
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
843
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
844
- --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
845
- --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
846
- --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
847
- --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
848
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
849
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
850
- --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
851
- --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
852
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
853
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
854
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
855
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
856
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
857
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
858
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
859
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
860
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
861
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
862
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
863
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
864
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
865
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
866
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
867
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
868
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
869
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
870
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
871
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
872
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
873
- --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
874
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
875
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
876
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
877
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
878
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
879
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
880
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
881
- --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
882
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
883
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
884
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
885
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
886
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
887
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
888
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
889
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
890
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
891
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
892
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
893
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
894
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
895
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
896
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
897
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
898
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
899
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
900
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
901
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
902
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
903
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
904
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
905
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
906
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
907
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
908
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
909
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
910
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
911
- --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));
912
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
913
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
914
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
915
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
916
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
917
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
918
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
919
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
920
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
921
- --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
922
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
923
- --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
924
- --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
925
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
926
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
927
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
928
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
929
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
930
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
931
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
932
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
933
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
934
- --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
935
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
936
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
937
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
938
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
939
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
940
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
941
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
942
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
943
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
944
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
945
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
946
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
947
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
948
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
949
- --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
950
- --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
951
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
952
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
953
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
954
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
955
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
956
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
957
- --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
958
- }
959
-
960
- .pf-v6-c-menu-toggle {
961
- position: relative;
962
- display: inline-flex;
963
- gap: var(--pf-v6-c-menu-toggle--Gap);
964
- align-items: center;
965
- justify-content: center;
966
- min-width: var(--pf-v6-c-menu-toggle--MinWidth);
967
- max-width: 100%;
968
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
969
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
970
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
971
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
972
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
973
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
974
- color: var(--pf-v6-c-menu-toggle--Color);
975
- cursor: pointer;
976
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
977
- border: 0;
978
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
979
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
980
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
917
+ inset-block-start: 50%;
918
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
919
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
920
+ color: var(--pf-v6-c-text-input-group__icon--Color);
921
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
981
922
  }
982
923
 
983
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
984
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
924
+ .pf-v6-c-text-input-group__icon.pf-m-status {
925
+ inset-inline-start: auto;
926
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
927
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
985
928
  }
986
929
 
987
- .pf-v6-c-menu-toggle::before {
988
- position: absolute;
989
- inset-block-start: 0;
990
- inset-block-end: 0;
991
- inset-inline-start: 0;
992
- inset-inline-end: 0;
993
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
994
- pointer-events: none;
995
- content: "";
996
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
997
- transition: inherit;
930
+ .pf-v6-c-text-input-group__text-input {
931
+ overflow: hidden;
932
+ text-overflow: ellipsis;
933
+ white-space: nowrap;
934
+ position: relative;
935
+ width: 100%;
936
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
937
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
938
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
939
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
940
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
941
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
942
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
943
+ border: 0;
944
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
998
945
  }
999
946
 
1000
- .pf-v6-c-menu-toggle.pf-m-primary {
1001
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
1002
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
1003
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
1004
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
1005
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
1006
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
1007
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
1008
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
1009
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
1010
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
1011
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
1012
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
1013
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
1014
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
1015
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
1016
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
1017
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
947
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
948
+ grid-area: text-input;
1018
949
  }
1019
950
 
1020
- .pf-v6-c-menu-toggle.pf-m-secondary {
1021
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
1022
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
1023
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
1024
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
1025
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
1026
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
1027
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
1028
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
1029
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
1030
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
1031
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
1032
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
1033
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
1034
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
1035
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
1036
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
1037
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
951
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
952
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1038
953
  }
1039
954
 
1040
- .pf-v6-c-menu-toggle.pf-m-full-height {
1041
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
1042
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
1043
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
955
+ .pf-v6-c-text-input-group__text-input::placeholder {
956
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
957
+ }
958
+
959
+ .pf-v6-c-text-input-group__utilities {
960
+ display: flex;
1044
961
  align-items: center;
1045
- height: 100%;
962
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
963
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1046
964
  }
1047
965
 
1048
- .pf-v6-c-menu-toggle.pf-m-full-width {
1049
- width: 100%;
966
+ .pf-v6-c-text-input-group__utilities > * + * {
967
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1050
968
  }
1051
969
 
1052
- .pf-v6-c-menu-toggle.pf-m-plain {
1053
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
1054
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
1055
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
1056
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1057
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
1058
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
1059
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
1060
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1061
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
1062
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
1063
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
1064
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1065
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1066
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
1067
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
1068
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
970
+ .pf-v6-c-text-input-group__group {
971
+ display: flex;
1069
972
  }
1070
973
 
1071
- .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
1072
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
974
+ .pf-v6-c-label-group {
975
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
976
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
977
+ --pf-v6-c-label-group--MaxWidth: 100%;
978
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
979
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
980
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
981
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
982
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
983
+ --pf-v6-c-label-group__main--MinWidth: 0;
984
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
985
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
986
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
987
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
988
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
989
+ --pf-v6-c-label-group__list--MinWidth: 0;
990
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
991
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
992
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
993
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
994
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
995
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
996
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
997
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
998
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
999
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1000
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1001
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1002
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1003
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1004
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1005
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1006
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1007
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1008
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1009
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1010
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1011
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1073
1012
  }
1074
1013
 
1075
- .pf-v6-c-menu-toggle.pf-m-plain::before {
1076
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
1077
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
1014
+ .pf-v6-c-label-group {
1015
+ display: inline-flex;
1016
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1017
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1018
+ align-items: center;
1019
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1078
1020
  }
1079
1021
 
1080
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
1081
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
1082
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
1083
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
1084
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
1085
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
1086
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
1087
- --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
1088
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
1089
- --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
1090
- --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
1022
+ .pf-v6-c-label-group.pf-m-category {
1023
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1024
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1025
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1026
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1027
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1028
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1029
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1091
1030
  }
1092
1031
 
1093
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
1094
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
1095
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
1096
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
1097
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
1098
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
1099
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
1032
+ .pf-v6-c-label-group.pf-m-vertical {
1033
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1034
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1035
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1036
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1037
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1038
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1039
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1100
1040
  }
1101
1041
 
1102
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
1103
- border: 0;
1042
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1043
+ align-items: flex-start;
1104
1044
  }
1105
1045
 
1106
- .pf-v6-c-menu-toggle.pf-m-small {
1107
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
1108
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
1109
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
1110
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
1111
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
1112
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
1113
- --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);
1114
- --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);
1046
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1047
+ flex-direction: column;
1048
+ align-items: flex-start;
1049
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1115
1050
  }
1116
1051
 
1117
- .pf-v6-c-menu-toggle.pf-m-success {
1118
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
1119
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
1052
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1053
+ flex-direction: column;
1054
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1120
1055
  }
1121
1056
 
1122
- .pf-v6-c-menu-toggle.pf-m-warning {
1123
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
1124
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
1057
+ .pf-v6-c-label-group.pf-m-editable,
1058
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1059
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1060
+ display: flex;
1125
1061
  }
1126
1062
 
1127
- .pf-v6-c-menu-toggle.pf-m-danger {
1128
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
1129
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
1063
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1064
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1065
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1066
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1067
+ flex: 1;
1130
1068
  }
1131
1069
 
1132
- @media screen and (prefers-reduced-motion: no-preference) {
1133
- .pf-v6-c-menu-toggle.pf-m-danger {
1134
- transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
1135
- animation-name: pf-v6-c-menu-toggle-m-danger-motion;
1136
- animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
1137
- animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
1138
- animation-fill-mode: both;
1139
- }
1070
+ .pf-v6-c-label-group__main {
1071
+ display: flex;
1072
+ flex: 1;
1073
+ flex-wrap: wrap;
1074
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1075
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1076
+ align-items: baseline;
1077
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1140
1078
  }
1141
- .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
1142
- animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
1143
- animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
1144
- animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
1079
+
1080
+ .pf-v6-c-label-group__list {
1081
+ display: inline-flex;
1082
+ flex-wrap: wrap;
1083
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1084
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1085
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1145
1086
  }
1146
1087
 
1147
- @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
1148
- from {
1149
- opacity: 0;
1150
- }
1151
- to {
1152
- opacity: 1;
1153
- }
1154
- }
1155
- .pf-v6-c-menu-toggle.pf-m-settings {
1156
- --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
1157
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
1158
- --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
1159
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
1160
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
1161
- --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
1162
- --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
1088
+ .pf-v6-c-label-group__list-item {
1089
+ display: inline-flex;
1090
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1163
1091
  }
1164
1092
 
1165
- .pf-v6-c-menu-toggle.pf-m-placeholder {
1166
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
1093
+ .pf-v6-c-label-group__label {
1094
+ overflow: hidden;
1095
+ text-overflow: ellipsis;
1096
+ white-space: nowrap;
1097
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1167
1098
  }
1168
1099
 
1169
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
1170
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
1171
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
1172
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
1173
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
1174
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
1100
+ .pf-v6-c-label-group__close {
1101
+ display: flex;
1102
+ align-self: flex-start;
1175
1103
  }
1176
1104
 
1177
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
1178
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
1179
- pointer-events: none;
1105
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1106
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1107
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1108
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1109
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1110
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1180
1111
  }
1181
1112
 
1182
- @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
1183
- syntax: "<length>";
1184
- inherits: false;
1185
- initial-value: 0;
1113
+ .pf-v6-c-label-group__textarea {
1114
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1115
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1116
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1117
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1118
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1119
+ white-space: nowrap;
1120
+ resize: none;
1121
+ scrollbar-width: none;
1122
+ -ms-overflow-style: none;
1123
+ border: 0;
1186
1124
  }
1187
- @media (prefers-reduced-motion: no-preference) {
1188
- @keyframes pf-v6-c-menu-toggle-m-danger-motion {
1189
- 33% {
1190
- --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
1191
- }
1192
- 66% {
1193
- --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
1194
- }
1195
- }
1125
+
1126
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1127
+ display: none;
1196
1128
  }
1197
- .pf-v6-c-menu-toggle.pf-m-split-button {
1198
- --pf-v6-c-menu-toggle--Gap: 0;
1199
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1200
- padding: 0;
1129
+
1130
+ .pf-v6-c-label {
1131
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1132
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1133
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1134
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1135
+ --pf-v6-c-label--MaxWidth: 100%;
1136
+ --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)));
1137
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1138
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
1139
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1140
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1141
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1142
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1143
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1144
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1145
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1146
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
1147
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
1148
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
1149
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
1150
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
1151
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1152
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
1153
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
1154
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
1155
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
1156
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
1157
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
1158
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
1159
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
1160
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
1161
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
1162
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
1163
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
1164
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
1165
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
1166
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
1167
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
1168
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1169
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1170
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1171
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1172
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1173
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1174
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1175
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1176
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1177
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1178
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1179
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1180
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1181
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1182
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1183
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1184
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1185
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1186
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1187
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1188
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1189
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1190
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1191
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1192
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1193
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1194
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1195
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1196
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1197
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1198
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1199
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1200
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1201
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1202
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1203
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1204
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1205
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1206
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1207
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1208
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1209
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1210
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1211
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1212
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1213
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1214
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1215
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1216
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1217
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1218
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1219
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1220
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1221
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1222
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1223
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1224
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1225
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1226
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1227
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1228
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1229
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1230
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1231
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1232
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1233
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1234
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1235
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1236
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1237
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1238
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1239
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1240
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1241
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1242
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1243
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1244
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1245
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1246
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1247
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1248
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1249
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1250
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1251
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1252
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1253
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1254
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1255
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1256
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1257
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1258
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1259
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1260
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1261
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1262
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1263
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1264
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1265
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1266
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1267
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1268
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1269
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1270
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1271
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1272
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1273
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1274
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1275
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1276
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1277
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1278
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1279
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1280
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1281
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1282
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1283
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
1284
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1285
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1286
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1287
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1288
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1289
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1290
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1291
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1292
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1293
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1294
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1295
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1296
+ --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)));
1297
+ --pf-v6-c-label__content--MaxWidth: 100%;
1298
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1299
+ --pf-v6-c-label__content--Cursor: initial;
1300
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1301
+ --pf-v6-c-label__text--MaxWidth: 100%;
1302
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
1303
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1304
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1305
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
1306
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
1307
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
1308
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
1309
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
1310
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
1311
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1312
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1313
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1314
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1315
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1316
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1317
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
1318
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1319
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1320
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1321
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1322
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1323
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1324
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1325
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1201
1326
  }
1202
1327
 
1203
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
1328
+ .pf-v6-c-label {
1204
1329
  position: relative;
1205
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1206
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1207
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1208
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1330
+ gap: var(--pf-v6-c-label--Gap);
1331
+ min-width: var(--pf-v6-c-label--MinWidth);
1332
+ max-width: var(--pf-v6-c-label--MaxWidth);
1333
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1334
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1335
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1336
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1337
+ font-size: var(--pf-v6-c-label--FontSize);
1338
+ white-space: nowrap;
1339
+ background: transparent;
1340
+ isolation: isolate;
1341
+ border: 0;
1342
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1209
1343
  }
1210
1344
 
1211
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1212
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1213
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1345
+ .pf-v6-c-label.pf-m-blue {
1346
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1347
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1348
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1349
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1350
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1351
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1352
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1353
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1214
1354
  }
1215
1355
 
1216
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1217
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1218
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1356
+ .pf-v6-c-label.pf-m-red {
1357
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1358
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1359
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1360
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1361
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1362
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1363
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1364
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1219
1365
  }
1220
1366
 
1221
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1222
- --pf-v6-c-check__label--Color: currentcolor;
1223
- --pf-v6-c-check__label--disabled--Color: currentcolor;
1224
- align-items: center;
1225
- align-self: stretch;
1367
+ .pf-v6-c-label.pf-m-orange {
1368
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1369
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1370
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1371
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1372
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1373
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1374
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1375
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1226
1376
  }
1227
1377
 
1228
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1229
- --pf-v6-c-check__input--TranslateY: 0;
1230
- align-self: center;
1378
+ .pf-v6-c-label.pf-m-orangered {
1379
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1380
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1381
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1382
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1383
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1384
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1385
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1386
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1231
1387
  }
1232
1388
 
1233
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1234
- 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);
1389
+ .pf-v6-c-label.pf-m-yellow {
1390
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1391
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1392
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1393
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1394
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1395
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1396
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1397
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1235
1398
  }
1236
1399
 
1237
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1238
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
1400
+ .pf-v6-c-label.pf-m-green {
1401
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1402
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1403
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1404
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1405
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1406
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1407
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1408
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1239
1409
  }
1240
1410
 
1241
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1242
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1243
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
1411
+ .pf-v6-c-label.pf-m-teal {
1412
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1413
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1414
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1415
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1416
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1417
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1418
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1419
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1244
1420
  }
1245
1421
 
1246
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1247
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1248
- --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);
1422
+ .pf-v6-c-label.pf-m-purple {
1423
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1424
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1425
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1426
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1427
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1428
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1429
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1430
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1249
1431
  }
1250
1432
 
1251
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1252
- --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);
1433
+ .pf-v6-c-label.pf-m-success {
1434
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1435
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1436
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1437
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1438
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1439
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1440
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1441
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1442
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1443
+ --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);
1253
1444
  }
1254
1445
 
1255
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1256
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
1446
+ .pf-v6-c-label.pf-m-warning {
1447
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1448
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1449
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1450
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1451
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1452
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1453
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1454
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1455
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1456
+ --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);
1257
1457
  }
1258
1458
 
1259
- .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,
1260
- .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,
1261
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1262
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
1459
+ .pf-v6-c-label.pf-m-danger {
1460
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1461
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1462
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1463
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1464
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1465
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1466
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1467
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1468
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1469
+ --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);
1263
1470
  }
1264
1471
 
1265
- .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,
1266
- .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,
1267
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1268
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
1472
+ .pf-v6-c-label.pf-m-info {
1473
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1474
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1475
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1476
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1477
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1478
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1479
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1480
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1481
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1482
+ --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);
1269
1483
  }
1270
1484
 
1271
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1272
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
1485
+ .pf-v6-c-label.pf-m-custom {
1486
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1487
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1488
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1489
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1490
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1491
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1492
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1493
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1494
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1495
+ --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);
1273
1496
  }
1274
1497
 
1275
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1276
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1277
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1278
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
1498
+ .pf-v6-c-label.pf-m-compact {
1499
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1500
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1501
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1502
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1503
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1504
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1505
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1279
1506
  }
1280
1507
 
1281
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1282
- content: none;
1508
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1509
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1283
1510
  }
1284
1511
 
1285
- .pf-v6-c-menu-toggle.pf-m-typeahead {
1286
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1287
- --pf-v6-c-menu-toggle--Gap: 0;
1288
- align-items: stretch;
1289
- padding: 0;
1512
+ .pf-v6-c-label.pf-m-outline {
1513
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1514
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1515
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1516
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1517
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1518
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1519
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1520
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1521
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1522
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1290
1523
  }
1291
1524
 
1292
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1293
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1525
+ .pf-v6-c-label.pf-m-editable {
1526
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1527
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1294
1528
  }
1295
1529
 
1296
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1297
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1298
- display: flex;
1299
- align-items: stretch;
1530
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1531
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1532
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1300
1533
  }
1301
1534
 
1302
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1303
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1304
- flex: 1;
1535
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1536
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1537
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1538
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1305
1539
  }
1306
1540
 
1307
- .pf-v6-c-menu-toggle__button {
1308
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
1309
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1310
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1311
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1312
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1313
- color: inherit;
1314
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1315
- border: 0;
1541
+ .pf-v6-c-label.pf-m-editable-active {
1542
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1543
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1544
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1545
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1316
1546
  }
1317
1547
 
1318
- .pf-v6-c-menu-toggle__button.pf-m-text {
1319
- display: inline-flex;
1320
- align-items: baseline;
1548
+ .pf-v6-c-label.pf-m-overflow {
1549
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1550
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1551
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1321
1552
  }
1322
1553
 
1323
- .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) {
1324
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1325
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
1554
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1555
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1556
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1557
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1326
1558
  }
1327
1559
 
1328
- .pf-v6-c-menu-toggle__text {
1329
- overflow: hidden;
1330
- text-overflow: ellipsis;
1331
- white-space: nowrap;
1332
- min-width: 0;
1560
+ .pf-v6-c-label.pf-m-add {
1561
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1562
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1563
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1564
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1333
1565
  }
1334
1566
 
1335
- .pf-v6-c-menu-toggle__count {
1336
- display: flex;
1337
- flex-wrap: nowrap;
1567
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1568
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1569
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1570
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1571
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1338
1572
  }
1339
1573
 
1340
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1341
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1342
- .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 {
1343
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1344
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1574
+ .pf-v6-c-label.pf-m-clickable {
1575
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1345
1576
  }
1346
1577
 
1347
- .pf-v6-c-menu-toggle__icon {
1348
- flex-shrink: 0;
1349
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
1350
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
1351
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
1352
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
1578
+ .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) {
1579
+ text-decoration-line: none;
1353
1580
  }
1354
1581
 
1355
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
1356
- vertical-align: middle;
1582
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1583
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1584
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1585
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1586
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1587
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1588
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1589
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1357
1590
  }
1358
1591
 
1359
- .pf-v6-c-menu-toggle__controls {
1360
- display: flex;
1361
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1362
- align-items: center;
1363
- justify-content: center;
1364
- margin-inline-start: auto;
1592
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1593
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1365
1594
  }
1366
1595
 
1367
- .pf-v6-c-menu-toggle__toggle-icon {
1368
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1369
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1596
+ .pf-v6-c-label.pf-m-disabled {
1597
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1598
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1599
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1600
+ --pf-v6-c-label--BorderWidth: 0;
1601
+ pointer-events: none;
1370
1602
  }
1371
1603
 
1372
- .pf-v6-c-menu-toggle__status-icon {
1373
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1604
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1605
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1374
1606
  }
1375
1607
 
1376
- .pf-v6-c-badge {
1377
- --pf-v6-c-badge--BorderColor: transparent;
1378
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1379
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1380
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1381
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1382
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1383
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1384
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1385
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1386
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1387
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1388
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1389
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1390
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
1391
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1392
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1393
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1394
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1395
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1396
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1397
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1608
+ .pf-v6-c-label,
1609
+ .pf-v6-c-label__content {
1610
+ display: inline-flex;
1611
+ align-items: center;
1612
+ justify-content: center;
1398
1613
  }
1399
1614
 
1400
- .pf-v6-c-badge {
1401
- position: relative;
1402
- display: inline-block;
1403
- min-width: var(--pf-v6-c-badge--MinWidth);
1404
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1405
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1406
- font-size: var(--pf-v6-c-badge--FontSize);
1407
- font-weight: var(--pf-v6-c-badge--FontWeight);
1408
- color: var(--pf-v6-c-badge--Color);
1409
- text-align: center;
1615
+ .pf-v6-c-label__text {
1616
+ overflow: hidden;
1617
+ text-overflow: ellipsis;
1410
1618
  white-space: nowrap;
1411
- background-color: var(--pf-v6-c-badge--BackgroundColor);
1412
- border-radius: var(--pf-v6-c-badge--BorderRadius);
1619
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
1413
1620
  }
1414
1621
 
1415
- .pf-v6-c-badge::after {
1622
+ .pf-v6-c-label__content {
1623
+ gap: var(--pf-v6-c-label__content--Gap);
1624
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
1625
+ padding: 0;
1626
+ overflow: hidden;
1627
+ color: var(--pf-v6-c-label--Color);
1628
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
1629
+ background: transparent;
1630
+ border-width: 0;
1631
+ }
1632
+
1633
+ .pf-v6-c-label__content::before {
1416
1634
  position: absolute;
1417
1635
  inset: 0;
1636
+ z-index: -1;
1418
1637
  pointer-events: none;
1419
1638
  content: "";
1420
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1421
- border-radius: inherit;
1639
+ background-color: var(--pf-v6-c-label--BackgroundColor);
1640
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1641
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1422
1642
  }
1423
1643
 
1424
- .pf-v6-c-badge.pf-m-read {
1425
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
1426
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1427
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1428
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1644
+ input.pf-v6-c-label__content {
1645
+ overflow: hidden;
1646
+ text-overflow: ellipsis;
1647
+ white-space: nowrap;
1429
1648
  }
1430
1649
 
1431
- .pf-v6-c-badge.pf-m-unread {
1432
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1433
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1434
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1650
+ .pf-v6-c-label__icon {
1651
+ color: var(--pf-v6-c-label__icon--Color);
1435
1652
  }
1436
1653
 
1437
- .pf-v6-c-badge.pf-m-disabled {
1438
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1439
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1654
+ .pf-v6-c-label__actions {
1655
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1440
1656
  }
1441
1657
 
1442
- .pf-v6-c-badge.pf-m-disabled::after {
1443
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1658
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1659
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1444
1660
  }
1445
1661
 
1446
- .pf-v6-c-badge__toggle-icon {
1447
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1448
- color: var(--pf-v6-c-badge__toggle-icon--Color);
1662
+ .pf-v6-c-label__actions .pf-v6-c-button {
1663
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1664
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1665
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1666
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1667
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1668
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1669
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1670
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1449
1671
  }
1450
1672
 
1451
1673
  .pf-v6-c-button {
@@ -2291,632 +2513,526 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2291
2513
  transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2292
2514
  transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2293
2515
  rotate: var(--pf-v6-c-button__icon--Rotate);
2294
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2295
- }
2296
-
2297
- .pf-v6-c-button__icon.pf-m-start {
2298
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2299
- }
2300
-
2301
- .pf-v6-c-button__icon.pf-m-end {
2302
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2303
- }
2304
-
2305
- .pf-v6-c-button__icon-favorite,
2306
- .pf-v6-c-button__icon-favorited {
2307
- grid-area: 1/1/1/1;
2308
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2309
- transition-property: opacity;
2310
- }
2311
-
2312
- .pf-v6-c-button__icon-favorite {
2313
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2314
- }
2315
-
2316
- .pf-v6-c-button__icon-favorited {
2317
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2318
- }
2319
-
2320
- .pf-v6-c-button__progress {
2321
- position: absolute;
2322
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2323
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2324
- line-height: 1;
2325
- color: var(--pf-v6-c-button__progress--Color);
2326
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2327
- }
2328
-
2329
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2330
- --pf-v6-c-spinner--Color: currentcolor;
2331
- }
2332
-
2333
- .pf-v6-c-button__text {
2334
- text-decoration: inherit;
2335
- }
2336
-
2337
- .pf-v6-c-button__count {
2338
- display: inline-flex;
2339
- align-items: center;
2340
- }
2341
-
2342
- .pf-v6-c-button--hamburger-icon path {
2343
- fill: none;
2344
- stroke: currentcolor;
2345
- stroke-linecap: round;
2346
- stroke-linejoin: round;
2347
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2348
- }
2349
-
2350
- .pf-v6-c-button--hamburger-icon--top {
2351
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2352
- }
2353
-
2354
- .pf-v6-c-button--hamburger-icon--middle {
2355
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2356
- }
2357
-
2358
- .pf-v6-c-button--hamburger-icon--arrow {
2359
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2516
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2360
2517
  }
2361
2518
 
2362
- .pf-v6-c-button--hamburger-icon--bottom {
2363
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2519
+ .pf-v6-c-button__icon.pf-m-start {
2520
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2364
2521
  }
2365
2522
 
2366
- @keyframes pf-v6-c-button-icon-notify {
2367
- 33% {
2368
- transform: rotate(30deg);
2369
- }
2370
- 66% {
2371
- transform: rotate(-60deg);
2372
- }
2523
+ .pf-v6-c-button__icon.pf-m-end {
2524
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2373
2525
  }
2374
- @keyframes pf-v6-c-button-icon-favorited {
2375
- 50% {
2376
- scale: 1.5;
2377
- }
2526
+
2527
+ .pf-v6-c-button__icon-favorite,
2528
+ .pf-v6-c-button__icon-favorited {
2529
+ grid-area: 1/1/1/1;
2530
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2531
+ transition-property: opacity;
2378
2532
  }
2379
- .pf-v6-c-label {
2380
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2381
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2382
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2383
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2384
- --pf-v6-c-label--MaxWidth: 100%;
2385
- --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)));
2386
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
2387
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
2388
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
2389
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
2390
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2391
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2392
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2393
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2394
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
2395
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
2396
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
2397
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
2398
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
2399
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
2400
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
2401
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
2402
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
2403
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
2404
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
2405
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
2406
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
2407
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
2408
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
2409
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
2410
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
2411
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
2412
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
2413
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
2414
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
2415
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
2416
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
2417
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
2418
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
2419
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
2420
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
2421
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
2422
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
2423
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
2424
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
2425
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
2426
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
2427
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
2428
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
2429
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
2430
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
2431
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
2432
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
2433
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
2434
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
2435
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
2436
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
2437
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
2438
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
2439
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
2440
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
2441
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
2442
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
2443
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
2444
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
2445
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
2446
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
2447
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
2448
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
2449
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
2450
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
2451
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
2452
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
2453
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
2454
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
2455
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
2456
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
2457
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
2458
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
2459
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
2460
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
2461
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
2462
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
2463
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
2464
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
2465
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
2466
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
2467
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
2468
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
2469
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
2470
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
2471
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2472
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
2473
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
2474
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
2475
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
2476
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
2477
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
2478
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
2479
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
2480
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2481
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2482
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
2483
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
2484
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
2485
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
2486
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
2487
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
2488
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
2489
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
2490
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2491
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2492
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
2493
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
2494
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
2495
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
2496
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
2497
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
2498
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
2499
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
2500
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
2501
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
2502
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
2503
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
2504
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
2505
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
2506
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
2507
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
2508
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
2509
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
2510
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
2511
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
2512
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
2513
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2514
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
2515
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
2516
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
2517
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
2518
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
2519
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
2520
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
2521
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
2522
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2523
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
2524
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
2525
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
2526
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2527
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2528
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
2529
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2530
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2531
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
2532
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
2533
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
2534
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
2535
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
2536
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
2537
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
2538
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2539
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
2540
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2541
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
2542
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2543
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
2544
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
2545
- --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)));
2546
- --pf-v6-c-label__content--MaxWidth: 100%;
2547
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2548
- --pf-v6-c-label__content--Cursor: initial;
2549
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2550
- --pf-v6-c-label__text--MaxWidth: 100%;
2551
- --pf-v6-c-label__actions--MarginInlineEnd: 0;
2552
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2553
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
2554
- --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
2555
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
2556
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
2557
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
2558
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
2559
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
2560
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
2561
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
2562
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
2563
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
2564
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
2565
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
2566
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
2567
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
2568
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
2569
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
2570
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
2571
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2572
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2573
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2574
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2533
+
2534
+ .pf-v6-c-button__icon-favorite {
2535
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2575
2536
  }
2576
2537
 
2577
- .pf-v6-c-label {
2578
- position: relative;
2579
- gap: var(--pf-v6-c-label--Gap);
2580
- min-width: var(--pf-v6-c-label--MinWidth);
2581
- max-width: var(--pf-v6-c-label--MaxWidth);
2582
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
2583
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
2584
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
2585
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
2586
- font-size: var(--pf-v6-c-label--FontSize);
2587
- white-space: nowrap;
2588
- background: transparent;
2589
- isolation: isolate;
2590
- border: 0;
2591
- border-radius: var(--pf-v6-c-label--BorderRadius);
2538
+ .pf-v6-c-button__icon-favorited {
2539
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2592
2540
  }
2593
2541
 
2594
- .pf-v6-c-label.pf-m-blue {
2595
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
2596
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
2597
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
2598
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
2599
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
2600
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
2601
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
2602
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
2542
+ .pf-v6-c-button__progress {
2543
+ position: absolute;
2544
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2545
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2546
+ line-height: 1;
2547
+ color: var(--pf-v6-c-button__progress--Color);
2548
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2603
2549
  }
2604
2550
 
2605
- .pf-v6-c-label.pf-m-red {
2606
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
2607
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
2608
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
2609
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
2610
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
2611
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
2612
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
2613
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
2551
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2552
+ --pf-v6-c-spinner--Color: currentcolor;
2614
2553
  }
2615
2554
 
2616
- .pf-v6-c-label.pf-m-orange {
2617
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
2618
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
2619
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
2620
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
2621
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
2622
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
2623
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
2624
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
2555
+ .pf-v6-c-button__text {
2556
+ text-decoration: inherit;
2625
2557
  }
2626
2558
 
2627
- .pf-v6-c-label.pf-m-orangered {
2628
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
2629
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
2630
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
2631
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
2632
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
2633
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
2634
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
2635
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
2559
+ .pf-v6-c-button__count {
2560
+ display: inline-flex;
2561
+ align-items: center;
2636
2562
  }
2637
2563
 
2638
- .pf-v6-c-label.pf-m-yellow {
2639
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
2640
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
2641
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
2642
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
2643
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
2644
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
2645
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
2646
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
2564
+ .pf-v6-c-button--hamburger-icon path {
2565
+ fill: none;
2566
+ stroke: currentcolor;
2567
+ stroke-linecap: round;
2568
+ stroke-linejoin: round;
2569
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2647
2570
  }
2648
2571
 
2649
- .pf-v6-c-label.pf-m-green {
2650
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
2651
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
2652
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
2653
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
2654
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
2655
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
2656
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
2657
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
2572
+ .pf-v6-c-button--hamburger-icon--top {
2573
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2658
2574
  }
2659
2575
 
2660
- .pf-v6-c-label.pf-m-teal {
2661
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
2662
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
2663
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
2664
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
2665
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
2666
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
2667
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
2668
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
2576
+ .pf-v6-c-button--hamburger-icon--middle {
2577
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2669
2578
  }
2670
2579
 
2671
- .pf-v6-c-label.pf-m-purple {
2672
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
2673
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
2674
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
2675
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
2676
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
2677
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
2678
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
2679
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
2580
+ .pf-v6-c-button--hamburger-icon--arrow {
2581
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2680
2582
  }
2681
2583
 
2682
- .pf-v6-c-label.pf-m-success {
2683
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
2684
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
2685
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
2686
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
2687
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
2688
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
2689
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
2690
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
2691
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
2692
- --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);
2584
+ .pf-v6-c-button--hamburger-icon--bottom {
2585
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2693
2586
  }
2694
2587
 
2695
- .pf-v6-c-label.pf-m-warning {
2696
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
2697
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
2698
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
2699
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
2700
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
2701
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
2702
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
2703
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
2704
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
2705
- --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);
2588
+ @keyframes pf-v6-c-button-icon-notify {
2589
+ 33% {
2590
+ transform: rotate(30deg);
2591
+ }
2592
+ 66% {
2593
+ transform: rotate(-60deg);
2594
+ }
2595
+ }
2596
+ @keyframes pf-v6-c-button-icon-favorited {
2597
+ 50% {
2598
+ scale: 1.5;
2599
+ }
2600
+ }
2601
+ .pf-v6-c-divider {
2602
+ --pf-v6-c-divider--Display: flex;
2603
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2604
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2605
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2706
2606
  }
2707
2607
 
2708
- .pf-v6-c-label.pf-m-danger {
2709
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
2710
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
2711
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
2712
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
2713
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
2714
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
2715
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
2716
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
2717
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
2718
- --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);
2608
+ .pf-v6-c-divider {
2609
+ flex-direction: row;
2610
+ width: 100%;
2611
+ height: var(--pf-v6-c-divider--Size);
2612
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2613
+ --pf-v6-hidden-visible--hidden--Display: none;
2614
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2615
+ display: var(--pf-v6-hidden-visible--Display);
2719
2616
  }
2720
2617
 
2721
- .pf-v6-c-label.pf-m-info {
2722
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
2723
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
2724
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
2725
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
2726
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
2727
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
2728
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
2729
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
2730
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
2731
- --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);
2618
+ .pf-v6-c-divider.pf-m-hidden {
2619
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2732
2620
  }
2733
2621
 
2734
- .pf-v6-c-label.pf-m-custom {
2735
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
2736
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
2737
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
2738
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
2739
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
2740
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
2741
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
2742
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
2743
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
2744
- --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);
2622
+ @media screen and (min-width: 36rem) {
2623
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
2624
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2625
+ }
2626
+ .pf-v6-c-divider.pf-m-visible-on-sm {
2627
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2628
+ }
2629
+ }
2630
+ @media screen and (min-width: 48rem) {
2631
+ .pf-v6-c-divider.pf-m-hidden-on-md {
2632
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2633
+ }
2634
+ .pf-v6-c-divider.pf-m-visible-on-md {
2635
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2636
+ }
2637
+ }
2638
+ @media screen and (min-width: 62rem) {
2639
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
2640
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2641
+ }
2642
+ .pf-v6-c-divider.pf-m-visible-on-lg {
2643
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2644
+ }
2645
+ }
2646
+ @media screen and (min-width: 75rem) {
2647
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
2648
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2649
+ }
2650
+ .pf-v6-c-divider.pf-m-visible-on-xl {
2651
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2652
+ }
2653
+ }
2654
+ @media screen and (min-width: 90.625rem) {
2655
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
2656
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2657
+ }
2658
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
2659
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2660
+ }
2661
+ }
2662
+ .pf-v6-c-divider {
2663
+ flex-shrink: 0;
2664
+ align-items: stretch;
2665
+ align-self: stretch;
2666
+ justify-content: center;
2667
+ border: 0;
2745
2668
  }
2746
2669
 
2747
- .pf-v6-c-label.pf-m-compact {
2748
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
2749
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
2750
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
2751
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
2752
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
2753
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
2754
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
2670
+ .pf-v6-c-divider::before {
2671
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2672
+ content: "";
2673
+ background-color: var(--pf-v6-c-divider--Color);
2674
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2675
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2755
2676
  }
2756
2677
 
2757
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
2758
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
2678
+ .pf-v6-c-divider.pf-m-horizontal {
2679
+ flex-direction: row;
2680
+ width: 100%;
2681
+ height: var(--pf-v6-c-divider--Size);
2759
2682
  }
2760
2683
 
2761
- .pf-v6-c-label.pf-m-outline {
2762
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
2763
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
2764
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
2765
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
2766
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
2767
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
2768
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2769
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2770
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
2771
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
2684
+ .pf-v6-c-divider.pf-m-vertical {
2685
+ flex-direction: column;
2686
+ width: var(--pf-v6-c-divider--Size);
2687
+ height: inherit;
2688
+ }
2689
+
2690
+ .pf-v6-c-divider.pf-m-inset-none {
2691
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2692
+ }
2693
+
2694
+ .pf-v6-c-divider.pf-m-inset-xs {
2695
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2772
2696
  }
2773
2697
 
2774
- .pf-v6-c-label.pf-m-editable {
2775
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
2776
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
2698
+ .pf-v6-c-divider.pf-m-inset-sm {
2699
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2777
2700
  }
2778
2701
 
2779
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
2780
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
2781
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
2702
+ .pf-v6-c-divider.pf-m-inset-md {
2703
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2782
2704
  }
2783
2705
 
2784
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
2785
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
2786
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
2787
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
2706
+ .pf-v6-c-divider.pf-m-inset-lg {
2707
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2788
2708
  }
2789
2709
 
2790
- .pf-v6-c-label.pf-m-editable-active {
2791
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
2792
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
2793
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
2794
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
2710
+ .pf-v6-c-divider.pf-m-inset-xl {
2711
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2795
2712
  }
2796
2713
 
2797
- .pf-v6-c-label.pf-m-overflow {
2798
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
2799
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
2800
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
2714
+ .pf-v6-c-divider.pf-m-inset-2xl {
2715
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2801
2716
  }
2802
2717
 
2803
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
2804
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
2805
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
2806
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
2718
+ .pf-v6-c-divider.pf-m-inset-3xl {
2719
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2807
2720
  }
2808
2721
 
2809
- .pf-v6-c-label.pf-m-add {
2810
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
2811
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
2812
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
2813
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
2722
+ @media (min-width: 36rem) {
2723
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
2724
+ flex-direction: row;
2725
+ width: 100%;
2726
+ height: var(--pf-v6-c-divider--Size);
2727
+ }
2728
+ }
2729
+ @media (min-width: 36rem) {
2730
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
2731
+ flex-direction: column;
2732
+ width: var(--pf-v6-c-divider--Size);
2733
+ height: inherit;
2734
+ }
2735
+ }
2736
+ @media (min-width: 36rem) {
2737
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
2738
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2739
+ }
2740
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2741
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2742
+ }
2743
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2744
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2745
+ }
2746
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
2747
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2748
+ }
2749
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2750
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2751
+ }
2752
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2753
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2754
+ }
2755
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2756
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2757
+ }
2758
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2759
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2760
+ }
2761
+ }
2762
+ @media (min-width: 48rem) {
2763
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
2764
+ flex-direction: row;
2765
+ width: 100%;
2766
+ height: var(--pf-v6-c-divider--Size);
2767
+ }
2768
+ }
2769
+ @media (min-width: 48rem) {
2770
+ .pf-v6-c-divider.pf-m-vertical-on-md {
2771
+ flex-direction: column;
2772
+ width: var(--pf-v6-c-divider--Size);
2773
+ height: inherit;
2774
+ }
2775
+ }
2776
+ @media (min-width: 48rem) {
2777
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2778
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2779
+ }
2780
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2781
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2782
+ }
2783
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2784
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2785
+ }
2786
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2787
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2788
+ }
2789
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2790
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2791
+ }
2792
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2793
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2794
+ }
2795
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2796
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2797
+ }
2798
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2799
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2800
+ }
2801
+ }
2802
+ @media (min-width: 62rem) {
2803
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2804
+ flex-direction: row;
2805
+ width: 100%;
2806
+ height: var(--pf-v6-c-divider--Size);
2807
+ }
2808
+ }
2809
+ @media (min-width: 62rem) {
2810
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2811
+ flex-direction: column;
2812
+ width: var(--pf-v6-c-divider--Size);
2813
+ height: inherit;
2814
+ }
2815
+ }
2816
+ @media (min-width: 62rem) {
2817
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2818
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2819
+ }
2820
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2821
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2822
+ }
2823
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2824
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2825
+ }
2826
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2827
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2828
+ }
2829
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2830
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2831
+ }
2832
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2833
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2834
+ }
2835
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2836
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2837
+ }
2838
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2839
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2840
+ }
2841
+ }
2842
+ @media (min-width: 75rem) {
2843
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2844
+ flex-direction: row;
2845
+ width: 100%;
2846
+ height: var(--pf-v6-c-divider--Size);
2847
+ }
2848
+ }
2849
+ @media (min-width: 75rem) {
2850
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2851
+ flex-direction: column;
2852
+ width: var(--pf-v6-c-divider--Size);
2853
+ height: inherit;
2854
+ }
2855
+ }
2856
+ @media (min-width: 75rem) {
2857
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2858
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2859
+ }
2860
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2861
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2862
+ }
2863
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2864
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2865
+ }
2866
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2867
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2868
+ }
2869
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2870
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2871
+ }
2872
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2873
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2874
+ }
2875
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2876
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2877
+ }
2878
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2879
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2880
+ }
2881
+ }
2882
+ @media (min-width: 90.625rem) {
2883
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2884
+ flex-direction: row;
2885
+ width: 100%;
2886
+ height: var(--pf-v6-c-divider--Size);
2887
+ }
2888
+ }
2889
+ @media (min-width: 90.625rem) {
2890
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2891
+ flex-direction: column;
2892
+ width: var(--pf-v6-c-divider--Size);
2893
+ height: inherit;
2894
+ }
2895
+ }
2896
+ @media (min-width: 90.625rem) {
2897
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2898
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2899
+ }
2900
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2901
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2902
+ }
2903
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2904
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2905
+ }
2906
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2907
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2908
+ }
2909
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2910
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2911
+ }
2912
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2913
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2914
+ }
2915
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2916
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2917
+ }
2918
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2919
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2920
+ }
2921
+ }
2922
+ .pf-v6-c-breadcrumb {
2923
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2924
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
2925
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2926
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
2927
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2928
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
2929
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2930
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2931
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
2932
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2933
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2934
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
2935
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2936
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2937
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
2938
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
2939
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
2940
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2941
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2942
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2943
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2814
2944
  }
2815
2945
 
2816
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
2817
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
2818
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
2819
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
2820
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
2946
+ .pf-v6-c-breadcrumb {
2947
+ display: inline-flex;
2821
2948
  }
2822
2949
 
2823
- .pf-v6-c-label.pf-m-clickable {
2824
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
2950
+ .pf-v6-c-breadcrumb__list {
2951
+ display: flex;
2952
+ flex-wrap: wrap;
2953
+ align-items: center;
2825
2954
  }
2826
2955
 
2827
- .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) {
2828
- text-decoration-line: none;
2956
+ .pf-v6-c-breadcrumb__item {
2957
+ display: flex;
2958
+ align-items: baseline;
2959
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
2960
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
2961
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
2962
+ white-space: nowrap;
2963
+ list-style: none;
2829
2964
  }
2830
2965
 
2831
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2832
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
2833
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2834
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
2835
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
2836
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
2837
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2838
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2966
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
2967
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2839
2968
  }
2840
2969
 
2841
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
2842
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2970
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
2971
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2843
2972
  }
2844
2973
 
2845
- .pf-v6-c-label.pf-m-disabled {
2846
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
2847
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
2848
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
2849
- --pf-v6-c-label--BorderWidth: 0;
2850
- pointer-events: none;
2974
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
2975
+ scale: -1 1;
2851
2976
  }
2852
2977
 
2853
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
2854
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
2978
+ .pf-v6-c-breadcrumb__item-divider {
2979
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
2980
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
2981
+ line-height: 1;
2982
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
2855
2983
  }
2856
2984
 
2857
- .pf-v6-c-label,
2858
- .pf-v6-c-label__content {
2859
- display: inline-flex;
2860
- align-items: center;
2861
- justify-content: center;
2985
+ .pf-v6-c-breadcrumb__link {
2986
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
2987
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
2988
+ font-size: inherit;
2989
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
2990
+ line-height: inherit;
2991
+ color: var(--pf-v6-c-breadcrumb__link--Color);
2992
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
2993
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
2994
+ word-break: break-word;
2995
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2862
2996
  }
2863
2997
 
2864
- .pf-v6-c-label__text {
2865
- overflow: hidden;
2866
- text-overflow: ellipsis;
2867
- white-space: nowrap;
2868
- max-width: var(--pf-v6-c-label__text--MaxWidth);
2998
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
2999
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3000
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3001
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
2869
3002
  }
2870
3003
 
2871
- .pf-v6-c-label__content {
2872
- gap: var(--pf-v6-c-label__content--Gap);
2873
- max-width: var(--pf-v6-c-label__content--MaxWidth);
2874
- padding: 0;
2875
- overflow: hidden;
2876
- color: var(--pf-v6-c-label--Color);
2877
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
2878
- background: transparent;
2879
- border-width: 0;
3004
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3005
+ cursor: default;
2880
3006
  }
2881
3007
 
2882
- .pf-v6-c-label__content::before {
2883
- position: absolute;
2884
- inset: 0;
2885
- z-index: -1;
2886
- pointer-events: none;
2887
- content: "";
2888
- background-color: var(--pf-v6-c-label--BackgroundColor);
2889
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
2890
- border-radius: var(--pf-v6-c-label--BorderRadius);
3008
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3009
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3010
+ text-decoration-line: none;
2891
3011
  }
2892
3012
 
2893
- input.pf-v6-c-label__content {
2894
- overflow: hidden;
2895
- text-overflow: ellipsis;
2896
- white-space: nowrap;
3013
+ button.pf-v6-c-breadcrumb__link {
3014
+ border: none;
2897
3015
  }
2898
3016
 
2899
- .pf-v6-c-label__icon {
2900
- color: var(--pf-v6-c-label__icon--Color);
3017
+ .pf-v6-c-breadcrumb__dropdown {
3018
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3019
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3020
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3021
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
2901
3022
  }
2902
3023
 
2903
- .pf-v6-c-label__actions {
2904
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
3024
+ .pf-v6-c-breadcrumb__heading {
3025
+ display: inline;
3026
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2905
3027
  }
2906
3028
 
2907
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
2908
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
3029
+ .pf-v6-c-breadcrumb__link,
3030
+ .pf-v6-c-breadcrumb__heading {
3031
+ white-space: normal;
2909
3032
  }
2910
3033
 
2911
- .pf-v6-c-label__actions .pf-v6-c-button {
2912
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2913
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2914
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2915
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2916
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2917
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2918
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2919
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
3034
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3035
+ display: none;
2920
3036
  }
2921
3037
 
2922
3038
  .pf-v6-c-menu {
@@ -3615,122 +3731,6 @@ input.pf-v6-c-label__content {
3615
3731
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3616
3732
  }
3617
3733
 
3618
- .pf-v6-c-breadcrumb {
3619
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3620
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3621
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3622
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3623
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3624
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3625
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3626
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3627
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3628
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3629
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3630
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3631
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3632
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3633
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3634
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3635
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3636
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3637
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3638
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3639
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3640
- }
3641
-
3642
- .pf-v6-c-breadcrumb {
3643
- display: inline-flex;
3644
- }
3645
-
3646
- .pf-v6-c-breadcrumb__list {
3647
- display: flex;
3648
- flex-wrap: wrap;
3649
- align-items: center;
3650
- }
3651
-
3652
- .pf-v6-c-breadcrumb__item {
3653
- display: flex;
3654
- align-items: baseline;
3655
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3656
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3657
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3658
- white-space: nowrap;
3659
- list-style: none;
3660
- }
3661
-
3662
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3663
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3664
- }
3665
-
3666
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3667
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3668
- }
3669
-
3670
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3671
- scale: -1 1;
3672
- }
3673
-
3674
- .pf-v6-c-breadcrumb__item-divider {
3675
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3676
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3677
- line-height: 1;
3678
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3679
- }
3680
-
3681
- .pf-v6-c-breadcrumb__link {
3682
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3683
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3684
- font-size: inherit;
3685
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3686
- line-height: inherit;
3687
- color: var(--pf-v6-c-breadcrumb__link--Color);
3688
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3689
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3690
- word-break: break-word;
3691
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3692
- }
3693
-
3694
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3695
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3696
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3697
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3698
- }
3699
-
3700
- .pf-v6-c-breadcrumb__link.pf-m-current {
3701
- cursor: default;
3702
- }
3703
-
3704
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3705
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3706
- text-decoration-line: none;
3707
- }
3708
-
3709
- button.pf-v6-c-breadcrumb__link {
3710
- border: none;
3711
- }
3712
-
3713
- .pf-v6-c-breadcrumb__dropdown {
3714
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3715
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3716
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3717
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3718
- }
3719
-
3720
- .pf-v6-c-breadcrumb__heading {
3721
- display: inline;
3722
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3723
- }
3724
-
3725
- .pf-v6-c-breadcrumb__link,
3726
- .pf-v6-c-breadcrumb__heading {
3727
- white-space: normal;
3728
- }
3729
-
3730
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3731
- display: none;
3732
- }
3733
-
3734
3734
  .pf-v6-c-spinner {
3735
3735
  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3736
3736
  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);