@patternfly/react-templates 6.5.0-prerelease.12 → 6.5.0-prerelease.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +4 -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-BEGZomXi.css → output-BkydBiXO.css} +1777 -1777
  6. package/package.json +6 -6
package/dist/umd/assets/{output-BEGZomXi.css → output-BkydBiXO.css} RENAMED
@@ -3,325 +3,6 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-text-input-group {
7
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
8
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
9
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
11
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
12
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
13
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
14
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
15
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
16
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
17
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
18
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
19
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
20
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
21
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
22
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
23
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
24
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
26
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
27
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
28
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
29
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
30
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
31
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
32
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
33
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
34
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
35
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
36
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
37
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
38
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
39
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
40
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
41
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
42
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
43
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
44
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
45
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
46
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
47
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
48
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
49
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
50
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
51
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
52
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
53
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
54
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
55
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
56
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
57
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
58
- }
59
-
60
- .pf-v6-c-text-input-group {
61
- position: relative;
62
- display: flex;
63
- width: 100%;
64
- font-size: var(--pf-v6-c-text-input-group__FontSize);
65
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
66
- color: var(--pf-v6-c-text-input-group--Color, inherit);
67
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
68
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
69
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
70
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
71
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
72
- }
73
-
74
- .pf-v6-c-text-input-group::before {
75
- position: absolute;
76
- inset: 0;
77
- pointer-events: none;
78
- content: "";
79
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
80
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
81
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
82
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
83
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
84
- }
85
-
86
- .pf-v6-c-text-input-group.pf-m-disabled {
87
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
88
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
89
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
90
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
91
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
92
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
93
- pointer-events: none;
94
- }
95
-
96
- .pf-v6-c-text-input-group.pf-m-plain {
97
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
98
- }
99
-
100
- .pf-v6-c-text-input-group.pf-m-plain::before {
101
- border: 0;
102
- }
103
-
104
- .pf-v6-c-text-input-group.pf-m-success {
105
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
106
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
107
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
108
- }
109
-
110
- .pf-v6-c-text-input-group.pf-m-warning {
111
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
112
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
113
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
114
- }
115
-
116
- .pf-v6-c-text-input-group.pf-m-error {
117
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
118
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
119
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
120
- }
121
-
122
- @media (prefers-reduced-motion: no-preference) {
123
- .pf-v6-c-text-input-group.pf-m-error {
124
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
125
- animation-name: pf-v6-global-danger-jiggle-motion;
126
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
127
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
128
- animation-fill-mode: both;
129
- }
130
- }
131
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
132
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
133
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
134
- animation-name: pf-v6-global-fade-in;
135
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
136
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
137
- }
138
-
139
- .pf-v6-c-text-input-group:hover {
140
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
141
- }
142
-
143
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
144
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
145
- }
146
-
147
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
148
- --pf-v6-c-text-input-group__text--Position: relative;
149
- }
150
-
151
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
152
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
153
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
154
- }
155
-
156
- .pf-v6-c-text-input-group__main {
157
- display: flex;
158
- flex: 1;
159
- flex-wrap: wrap;
160
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
161
- min-width: 0;
162
- }
163
-
164
- .pf-v6-c-text-input-group__main.pf-m-icon {
165
- --pf-v6-c-text-input-group__text--Position: relative;
166
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
167
- display: inline-flex;
168
- align-items: center;
169
- justify-content: center;
170
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
171
- }
172
-
173
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
174
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
175
- }
176
-
177
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
178
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
179
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
180
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
181
- }
182
-
183
- .pf-v6-c-text-input-group__text {
184
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
185
- display: inline-grid;
186
- flex: 1;
187
- grid-template-areas: "text-input";
188
- grid-template-columns: 1fr;
189
- }
190
-
191
- .pf-v6-c-text-input-group__icon {
192
- position: absolute;
193
- inset-block-start: 50%;
194
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
195
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
196
- color: var(--pf-v6-c-text-input-group__icon--Color);
197
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
198
- }
199
-
200
- .pf-v6-c-text-input-group__icon.pf-m-status {
201
- inset-inline-start: auto;
202
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
203
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
204
- }
205
-
206
- .pf-v6-c-text-input-group__text-input {
207
- overflow: hidden;
208
- text-overflow: ellipsis;
209
- white-space: nowrap;
210
- position: relative;
211
- width: 100%;
212
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
213
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
214
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
215
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
216
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
217
- color: var(--pf-v6-c-text-input-group__text-input--Color);
218
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
219
- border: 0;
220
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
221
- }
222
-
223
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
224
- grid-area: text-input;
225
- }
226
-
227
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
228
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
229
- }
230
-
231
- .pf-v6-c-text-input-group__text-input::placeholder {
232
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
233
- }
234
-
235
- .pf-v6-c-text-input-group__utilities {
236
- display: flex;
237
- align-items: center;
238
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
239
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
240
- }
241
-
242
- .pf-v6-c-text-input-group__utilities > * + * {
243
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
244
- }
245
-
246
- .pf-v6-c-text-input-group__group {
247
- display: flex;
248
- }
249
-
250
- .pf-v6-c-badge {
251
- --pf-v6-c-badge--BorderColor: transparent;
252
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
253
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
254
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
255
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
256
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
257
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
258
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
259
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
260
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
261
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
262
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
263
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
264
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
265
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
266
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
267
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
268
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
269
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
270
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
271
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
272
- }
273
-
274
- .pf-v6-c-badge {
275
- position: relative;
276
- display: inline-block;
277
- min-width: var(--pf-v6-c-badge--MinWidth);
278
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
279
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
280
- font-size: var(--pf-v6-c-badge--FontSize);
281
- font-weight: var(--pf-v6-c-badge--FontWeight);
282
- color: var(--pf-v6-c-badge--Color);
283
- text-align: center;
284
- white-space: nowrap;
285
- background-color: var(--pf-v6-c-badge--BackgroundColor);
286
- border-radius: var(--pf-v6-c-badge--BorderRadius);
287
- }
288
-
289
- .pf-v6-c-badge::after {
290
- position: absolute;
291
- inset: 0;
292
- pointer-events: none;
293
- content: "";
294
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
295
- border-radius: inherit;
296
- }
297
-
298
- .pf-v6-c-badge.pf-m-read {
299
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
300
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
301
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
302
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
303
- }
304
-
305
- .pf-v6-c-badge.pf-m-unread {
306
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
307
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
308
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
309
- }
310
-
311
- .pf-v6-c-badge.pf-m-disabled {
312
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
313
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
314
- }
315
-
316
- .pf-v6-c-badge.pf-m-disabled::after {
317
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
318
- }
319
-
320
- .pf-v6-c-badge__toggle-icon {
321
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
322
- color: var(--pf-v6-c-badge__toggle-icon--Color);
323
- }
324
-
325
6
  .pf-v6-c-button {
326
7
  --pf-v6-c-button--Display: inline-flex;
327
8
  --pf-v6-c-button--AlignItems: baseline;
@@ -1165,1032 +846,738 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1165
846
  transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
1166
847
  transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
1167
848
  rotate: var(--pf-v6-c-button__icon--Rotate);
1168
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
1169
- }
1170
-
1171
- .pf-v6-c-button__icon.pf-m-start {
1172
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
1173
- }
1174
-
1175
- .pf-v6-c-button__icon.pf-m-end {
1176
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
1177
- }
1178
-
1179
- .pf-v6-c-button__icon-favorite,
1180
- .pf-v6-c-button__icon-favorited {
1181
- grid-area: 1/1/1/1;
1182
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
1183
- transition-property: opacity;
1184
- }
1185
-
1186
- .pf-v6-c-button__icon-favorite {
1187
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
1188
- }
1189
-
1190
- .pf-v6-c-button__icon-favorited {
1191
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
1192
- }
1193
-
1194
- .pf-v6-c-button__progress {
1195
- position: absolute;
1196
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
1197
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
1198
- line-height: 1;
1199
- color: var(--pf-v6-c-button__progress--Color);
1200
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
1201
- }
1202
-
1203
- .pf-v6-c-button__progress .pf-v6-c-spinner {
1204
- --pf-v6-c-spinner--Color: currentcolor;
1205
- }
1206
-
1207
- .pf-v6-c-button__text {
1208
- text-decoration: inherit;
1209
- }
1210
-
1211
- .pf-v6-c-button__count {
1212
- display: inline-flex;
1213
- align-items: center;
1214
- }
1215
-
1216
- .pf-v6-c-button--hamburger-icon path {
1217
- fill: none;
1218
- stroke: currentcolor;
1219
- stroke-linecap: round;
1220
- stroke-linejoin: round;
1221
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
1222
- }
1223
-
1224
- .pf-v6-c-button--hamburger-icon--top {
1225
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
1226
- }
1227
-
1228
- .pf-v6-c-button--hamburger-icon--middle {
1229
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
1230
- }
1231
-
1232
- .pf-v6-c-button--hamburger-icon--arrow {
1233
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
1234
- }
1235
-
1236
- .pf-v6-c-button--hamburger-icon--bottom {
1237
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
1238
- }
1239
-
1240
- @keyframes pf-v6-c-button-icon-notify {
1241
- 33% {
1242
- transform: rotate(30deg);
1243
- }
1244
- 66% {
1245
- transform: rotate(-60deg);
1246
- }
1247
- }
1248
- @keyframes pf-v6-c-button-icon-favorited {
1249
- 50% {
1250
- scale: 1.5;
1251
- }
1252
- }
1253
- .pf-v6-c-divider {
1254
- --pf-v6-c-divider--Display: flex;
1255
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1256
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1257
- --pf-v6-c-divider--before--FlexBasis: 100%;
1258
- }
1259
-
1260
- .pf-v6-c-divider {
1261
- flex-direction: row;
1262
- width: 100%;
1263
- height: var(--pf-v6-c-divider--Size);
1264
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1265
- --pf-v6-hidden-visible--hidden--Display: none;
1266
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1267
- display: var(--pf-v6-hidden-visible--Display);
1268
- flex-shrink: 0;
1269
- align-items: stretch;
1270
- align-self: stretch;
1271
- justify-content: center;
1272
- border: 0;
1273
- }
1274
-
1275
- .pf-v6-c-divider.pf-m-hidden {
1276
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1277
- }
1278
-
1279
- @media screen and (min-width: 36rem) {
1280
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1281
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1282
- }
1283
- .pf-v6-c-divider.pf-m-visible-on-sm {
1284
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1285
- }
1286
- }
1287
- @media screen and (min-width: 48rem) {
1288
- .pf-v6-c-divider.pf-m-hidden-on-md {
1289
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1290
- }
1291
- .pf-v6-c-divider.pf-m-visible-on-md {
1292
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1293
- }
1294
- }
1295
- @media screen and (min-width: 62rem) {
1296
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1297
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1298
- }
1299
- .pf-v6-c-divider.pf-m-visible-on-lg {
1300
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1301
- }
1302
- }
1303
- @media screen and (min-width: 75rem) {
1304
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1305
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1306
- }
1307
- .pf-v6-c-divider.pf-m-visible-on-xl {
1308
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1309
- }
1310
- }
1311
- @media screen and (min-width: 90.625rem) {
1312
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1313
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1314
- }
1315
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1316
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1317
- }
1318
- }
1319
- .pf-v6-c-divider::before {
1320
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1321
- content: "";
1322
- background-color: var(--pf-v6-c-divider--Color);
1323
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
1324
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
1325
- }
1326
-
1327
- .pf-v6-c-divider.pf-m-horizontal {
1328
- flex-direction: row;
1329
- width: 100%;
1330
- height: var(--pf-v6-c-divider--Size);
849
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
1331
850
  }
1332
851
 
1333
- .pf-v6-c-divider.pf-m-vertical {
1334
- flex-direction: column;
1335
- width: var(--pf-v6-c-divider--Size);
1336
- height: inherit;
852
+ .pf-v6-c-button__icon.pf-m-start {
853
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
1337
854
  }
1338
855
 
1339
- .pf-v6-c-divider.pf-m-inset-none {
1340
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
856
+ .pf-v6-c-button__icon.pf-m-end {
857
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
1341
858
  }
1342
859
 
1343
- .pf-v6-c-divider.pf-m-inset-xs {
1344
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
860
+ .pf-v6-c-button__icon-favorite,
861
+ .pf-v6-c-button__icon-favorited {
862
+ grid-area: 1/1/1/1;
863
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
864
+ transition-property: opacity;
1345
865
  }
1346
866
 
1347
- .pf-v6-c-divider.pf-m-inset-sm {
1348
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
867
+ .pf-v6-c-button__icon-favorite {
868
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
1349
869
  }
1350
870
 
1351
- .pf-v6-c-divider.pf-m-inset-md {
1352
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
871
+ .pf-v6-c-button__icon-favorited {
872
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
1353
873
  }
1354
874
 
1355
- .pf-v6-c-divider.pf-m-inset-lg {
1356
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
875
+ .pf-v6-c-button__progress {
876
+ position: absolute;
877
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
878
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
879
+ line-height: 1;
880
+ color: var(--pf-v6-c-button__progress--Color);
881
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
1357
882
  }
1358
883
 
1359
- .pf-v6-c-divider.pf-m-inset-xl {
1360
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
884
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
885
+ --pf-v6-c-spinner--Color: currentcolor;
1361
886
  }
1362
887
 
1363
- .pf-v6-c-divider.pf-m-inset-2xl {
1364
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
888
+ .pf-v6-c-button__text {
889
+ text-decoration: inherit;
1365
890
  }
1366
891
 
1367
- .pf-v6-c-divider.pf-m-inset-3xl {
1368
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
892
+ .pf-v6-c-button__count {
893
+ display: inline-flex;
894
+ align-items: center;
1369
895
  }
1370
896
 
1371
- @media (min-width: 36rem) {
1372
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1373
- flex-direction: row;
1374
- width: 100%;
1375
- height: var(--pf-v6-c-divider--Size);
1376
- }
897
+ .pf-v6-c-button--hamburger-icon path {
898
+ fill: none;
899
+ stroke: currentcolor;
900
+ stroke-linecap: round;
901
+ stroke-linejoin: round;
902
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
1377
903
  }
1378
- @media (min-width: 36rem) {
1379
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1380
- flex-direction: column;
1381
- width: var(--pf-v6-c-divider--Size);
1382
- height: inherit;
1383
- }
904
+
905
+ .pf-v6-c-button--hamburger-icon--top {
906
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
1384
907
  }
1385
- @media (min-width: 36rem) {
1386
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1387
- --pf-v6-c-divider--before--FlexBasis: 100%;
1388
- }
1389
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1390
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1391
- }
1392
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1393
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1394
- }
1395
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
1396
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1397
- }
1398
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1399
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1400
- }
1401
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1402
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1403
- }
1404
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1405
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1406
- }
1407
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1408
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1409
- }
908
+
909
+ .pf-v6-c-button--hamburger-icon--middle {
910
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
1410
911
  }
1411
- @media (min-width: 48rem) {
1412
- .pf-v6-c-divider.pf-m-horizontal-on-md {
1413
- flex-direction: row;
1414
- width: 100%;
1415
- height: var(--pf-v6-c-divider--Size);
1416
- }
912
+
913
+ .pf-v6-c-button--hamburger-icon--arrow {
914
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
1417
915
  }
1418
- @media (min-width: 48rem) {
1419
- .pf-v6-c-divider.pf-m-vertical-on-md {
1420
- flex-direction: column;
1421
- width: var(--pf-v6-c-divider--Size);
1422
- height: inherit;
1423
- }
916
+
917
+ .pf-v6-c-button--hamburger-icon--bottom {
918
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
1424
919
  }
1425
- @media (min-width: 48rem) {
1426
- .pf-v6-c-divider.pf-m-inset-none-on-md {
1427
- --pf-v6-c-divider--before--FlexBasis: 100%;
1428
- }
1429
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
1430
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1431
- }
1432
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
1433
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1434
- }
1435
- .pf-v6-c-divider.pf-m-inset-md-on-md {
1436
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1437
- }
1438
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
1439
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1440
- }
1441
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
1442
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1443
- }
1444
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1445
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
920
+
921
+ @keyframes pf-v6-c-button-icon-notify {
922
+ 33% {
923
+ transform: rotate(30deg);
1446
924
  }
1447
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1448
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
925
+ 66% {
926
+ transform: rotate(-60deg);
1449
927
  }
1450
928
  }
1451
- @media (min-width: 62rem) {
1452
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
1453
- flex-direction: row;
1454
- width: 100%;
1455
- height: var(--pf-v6-c-divider--Size);
929
+ @keyframes pf-v6-c-button-icon-favorited {
930
+ 50% {
931
+ scale: 1.5;
1456
932
  }
1457
933
  }
1458
- @media (min-width: 62rem) {
1459
- .pf-v6-c-divider.pf-m-vertical-on-lg {
1460
- flex-direction: column;
1461
- width: var(--pf-v6-c-divider--Size);
1462
- height: inherit;
1463
- }
934
+ .pf-v6-c-check {
935
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
936
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
937
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
938
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
939
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
940
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
941
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
942
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
943
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
944
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
945
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
946
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
947
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
948
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1464
949
  }
1465
- @media (min-width: 62rem) {
1466
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
1467
- --pf-v6-c-divider--before--FlexBasis: 100%;
1468
- }
1469
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1470
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1471
- }
1472
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1473
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1474
- }
1475
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
1476
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1477
- }
1478
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1479
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1480
- }
1481
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1482
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1483
- }
1484
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1485
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1486
- }
1487
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1488
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1489
- }
950
+
951
+ .pf-v6-c-check {
952
+ display: grid;
953
+ grid-template-columns: auto 1fr;
954
+ grid-gap: var(--pf-v6-c-check--GridGap);
955
+ accent-color: var(--pf-v6-c-check--AccentColor);
1490
956
  }
1491
- @media (min-width: 75rem) {
1492
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
1493
- flex-direction: row;
1494
- width: 100%;
1495
- height: var(--pf-v6-c-divider--Size);
1496
- }
957
+
958
+ .pf-v6-c-check.pf-m-standalone {
959
+ display: inline-grid;
960
+ grid-template-columns: auto;
961
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1497
962
  }
1498
- @media (min-width: 75rem) {
1499
- .pf-v6-c-divider.pf-m-vertical-on-xl {
1500
- flex-direction: column;
1501
- width: var(--pf-v6-c-divider--Size);
1502
- height: inherit;
1503
- }
963
+
964
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
965
+ align-self: center;
966
+ transform: none;
1504
967
  }
1505
- @media (min-width: 75rem) {
1506
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
1507
- --pf-v6-c-divider--before--FlexBasis: 100%;
1508
- }
1509
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1510
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1511
- }
1512
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1513
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1514
- }
1515
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
1516
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1517
- }
1518
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1519
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1520
- }
1521
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1522
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1523
- }
1524
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1525
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1526
- }
1527
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1528
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1529
- }
968
+
969
+ .pf-v6-c-check__input {
970
+ align-self: start;
971
+ font-size: var(--pf-v6-c-check__label--FontSize);
972
+ line-height: var(--pf-v6-c-check__label--LineHeight);
973
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1530
974
  }
1531
- @media (min-width: 90.625rem) {
1532
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1533
- flex-direction: row;
1534
- width: 100%;
1535
- height: var(--pf-v6-c-divider--Size);
1536
- }
975
+
976
+ .pf-v6-c-check__label {
977
+ font-size: var(--pf-v6-c-check__label--FontSize);
978
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
979
+ line-height: var(--pf-v6-c-check__label--LineHeight);
980
+ color: var(--pf-v6-c-check__label--Color);
1537
981
  }
1538
- @media (min-width: 90.625rem) {
1539
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
1540
- flex-direction: column;
1541
- width: var(--pf-v6-c-divider--Size);
1542
- height: inherit;
1543
- }
982
+
983
+ .pf-v6-c-check__description {
984
+ grid-column: 2;
985
+ font-size: var(--pf-v6-c-check__description--FontSize);
986
+ color: var(--pf-v6-c-check__description--Color);
1544
987
  }
1545
- @media (min-width: 90.625rem) {
1546
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1547
- --pf-v6-c-divider--before--FlexBasis: 100%;
1548
- }
1549
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1550
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1551
- }
1552
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1553
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1554
- }
1555
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1556
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1557
- }
1558
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1559
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1560
- }
1561
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1562
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1563
- }
1564
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1565
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1566
- }
1567
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1568
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1569
- }
988
+
989
+ .pf-v6-c-check__body {
990
+ grid-column: 2;
1570
991
  }
1571
- .pf-v6-c-label {
1572
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1573
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1574
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1575
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1576
- --pf-v6-c-label--MaxWidth: 100%;
1577
- --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)));
1578
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1579
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
1580
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1581
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1582
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1583
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1584
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1585
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1586
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1587
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
1588
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
1589
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
1590
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
1591
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
1592
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1593
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
1594
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
1595
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
1596
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
1597
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
1598
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
1599
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
1600
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
1601
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
1602
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
1603
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
1604
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
1605
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
1606
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
1607
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
1608
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
1609
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1610
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1611
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1612
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1613
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1614
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1615
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1616
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1617
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1618
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1619
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1620
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1621
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1622
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1623
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1624
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1625
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1626
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1627
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1628
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1629
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1630
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1631
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1632
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1633
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1634
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1635
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1636
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1637
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1638
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1639
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1640
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1641
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1642
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1643
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1644
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1645
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1646
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1647
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1648
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1649
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1650
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1651
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1652
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1653
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1654
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1655
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1656
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1657
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1658
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1659
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1660
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1661
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1662
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1663
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1664
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1665
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1666
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1667
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1668
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1669
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1670
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1671
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1672
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1673
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1674
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1675
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1676
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1677
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1678
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1679
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1680
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1681
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1682
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1683
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1684
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1685
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1686
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1687
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1688
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1689
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1690
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1691
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1692
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1693
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1694
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1695
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1696
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1697
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1698
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1699
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1700
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1701
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1702
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1703
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1704
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1705
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1706
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1707
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1708
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1709
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1710
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1711
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1712
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1713
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1714
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1715
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1716
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1717
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1718
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1719
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1720
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1721
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1722
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1723
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1724
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
1725
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1726
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1727
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1728
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1729
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1730
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1731
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1732
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1733
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1734
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1735
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1736
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1737
- --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)));
1738
- --pf-v6-c-label__content--MaxWidth: 100%;
1739
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1740
- --pf-v6-c-label__content--Cursor: initial;
1741
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1742
- --pf-v6-c-label__text--MaxWidth: 100%;
1743
- --pf-v6-c-label__actions--MarginInlineEnd: 0;
1744
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1745
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1746
- --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
1747
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
1748
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
1749
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
1750
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
1751
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
1752
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1753
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1754
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1755
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1756
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1757
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1758
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
1759
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1760
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1761
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1762
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1763
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1764
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1765
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1766
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
992
+
993
+ .pf-v6-c-check__label,
994
+ .pf-v6-c-check__input {
995
+ justify-self: start;
996
+ }
997
+
998
+ label.pf-v6-c-check, .pf-v6-c-check__label,
999
+ .pf-v6-c-check__input {
1000
+ cursor: pointer;
1767
1001
  }
1768
1002
 
1769
- .pf-v6-c-label {
1003
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1004
+ .pf-v6-c-check__input:disabled,
1005
+ .pf-v6-c-check__input.pf-m-disabled {
1006
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1007
+ cursor: not-allowed;
1008
+ }
1009
+
1010
+ .pf-v6-c-check__label-required {
1011
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1012
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
1013
+ color: var(--pf-v6-c-check__label-required--Color);
1014
+ }
1015
+
1016
+ .pf-v6-c-menu-toggle {
1017
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1018
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1019
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1020
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1021
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1022
+ --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));
1023
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
1024
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
1025
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
1026
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
1027
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
1028
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
1029
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
1030
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
1031
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1032
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1033
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
1034
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
1035
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
1036
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
1037
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
1038
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1039
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
1040
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
1041
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
1042
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
1043
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1044
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1045
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1046
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1047
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1048
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1049
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1050
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
1051
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
1052
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
1053
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
1054
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
1055
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
1056
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
1057
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
1058
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
1059
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1060
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1061
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1062
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1063
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1064
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1065
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
1066
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
1067
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
1068
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1069
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
1070
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
1071
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1072
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
1073
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1074
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
1075
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
1076
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1077
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1078
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1079
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1080
+ --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
1081
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
1082
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
1083
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
1084
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1085
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1086
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
1087
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
1088
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
1089
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1090
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
1091
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
1092
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
1093
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1094
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1095
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1096
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
1097
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
1098
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1099
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1100
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
1101
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
1102
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
1103
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
1104
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
1105
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
1106
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1107
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1108
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
1109
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1110
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
1111
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1112
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
1113
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
1114
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1115
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
1116
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
1117
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
1118
+ --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));
1119
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1120
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1121
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1122
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1123
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1124
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1125
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1126
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
1127
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1128
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
1129
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1130
+ --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1131
+ --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
1132
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1133
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1134
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1135
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
1136
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1137
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
1138
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
1139
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1140
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1141
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
1142
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
1143
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
1144
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
1145
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1146
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1147
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
1148
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
1149
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1150
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1151
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
1152
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1153
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1154
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1155
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1156
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
1157
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
1158
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
1159
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
1160
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1161
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1162
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1163
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1164
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
1165
+ }
1166
+
1167
+ .pf-v6-c-menu-toggle {
1770
1168
  position: relative;
1771
- gap: var(--pf-v6-c-label--Gap);
1772
- min-width: var(--pf-v6-c-label--MinWidth);
1773
- max-width: var(--pf-v6-c-label--MaxWidth);
1774
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1775
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1776
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1777
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1778
- font-size: var(--pf-v6-c-label--FontSize);
1779
- white-space: nowrap;
1780
- background: transparent;
1781
- isolation: isolate;
1169
+ display: inline-flex;
1170
+ gap: var(--pf-v6-c-menu-toggle--Gap);
1171
+ align-items: center;
1172
+ justify-content: center;
1173
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
1174
+ max-width: 100%;
1175
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1176
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1177
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1178
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1179
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
1180
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
1181
+ color: var(--pf-v6-c-menu-toggle--Color);
1182
+ cursor: pointer;
1183
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
1782
1184
  border: 0;
1783
- border-radius: var(--pf-v6-c-label--BorderRadius);
1185
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
1186
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
1187
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
1784
1188
  }
1785
1189
 
1786
- .pf-v6-c-label.pf-m-blue {
1787
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1788
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1789
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1790
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1791
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1792
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1793
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1794
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1190
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
1191
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1192
+ }
1193
+
1194
+ .pf-v6-c-menu-toggle::before {
1195
+ position: absolute;
1196
+ inset-block-start: 0;
1197
+ inset-block-end: 0;
1198
+ inset-inline-start: 0;
1199
+ inset-inline-end: 0;
1200
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
1201
+ pointer-events: none;
1202
+ content: "";
1203
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
1204
+ transition: inherit;
1205
+ }
1206
+
1207
+ .pf-v6-c-menu-toggle.pf-m-primary {
1208
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
1209
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
1210
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
1211
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
1212
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
1213
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
1214
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
1215
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
1216
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
1217
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
1218
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
1219
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
1220
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
1221
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
1222
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
1223
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
1224
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
1225
+ }
1226
+
1227
+ .pf-v6-c-menu-toggle.pf-m-secondary {
1228
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
1229
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
1230
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
1231
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
1232
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
1233
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
1234
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
1235
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
1236
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
1237
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
1238
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
1239
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
1240
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
1241
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
1242
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
1243
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
1244
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
1795
1245
  }
1796
1246
 
1797
- .pf-v6-c-label.pf-m-red {
1798
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1799
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1800
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1801
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1802
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1803
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1804
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1805
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1247
+ .pf-v6-c-menu-toggle.pf-m-full-height {
1248
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
1249
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
1250
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
1251
+ align-items: center;
1252
+ height: 100%;
1806
1253
  }
1807
1254
 
1808
- .pf-v6-c-label.pf-m-orange {
1809
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1810
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1811
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1812
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1813
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1814
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1815
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1816
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1255
+ .pf-v6-c-menu-toggle.pf-m-full-width {
1256
+ width: 100%;
1817
1257
  }
1818
1258
 
1819
- .pf-v6-c-label.pf-m-orangered {
1820
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1821
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1822
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1823
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1824
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1825
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1826
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1827
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1259
+ .pf-v6-c-menu-toggle.pf-m-plain {
1260
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
1261
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
1262
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
1263
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1264
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
1265
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
1266
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
1267
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1268
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
1269
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
1270
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
1271
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1272
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1273
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
1274
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
1275
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
1828
1276
  }
1829
1277
 
1830
- .pf-v6-c-label.pf-m-yellow {
1831
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1832
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1833
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1834
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1835
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1836
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1837
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1838
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1278
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
1279
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
1839
1280
  }
1840
1281
 
1841
- .pf-v6-c-label.pf-m-green {
1842
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1843
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1844
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1845
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1846
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1847
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1848
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1849
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1282
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
1283
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
1284
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
1850
1285
  }
1851
1286
 
1852
- .pf-v6-c-label.pf-m-teal {
1853
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1854
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1855
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1856
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1857
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1858
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1859
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1860
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1287
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
1288
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
1289
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
1290
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
1291
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
1292
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
1293
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
1294
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
1295
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
1296
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
1297
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
1861
1298
  }
1862
1299
 
1863
- .pf-v6-c-label.pf-m-purple {
1864
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1865
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1866
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1867
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1868
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1869
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1870
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1871
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1300
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
1301
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
1302
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
1303
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
1304
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
1305
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
1306
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
1872
1307
  }
1873
1308
 
1874
- .pf-v6-c-label.pf-m-success {
1875
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1876
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1877
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1878
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1879
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1880
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1881
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1882
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1883
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1884
- --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);
1309
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
1310
+ border: 0;
1885
1311
  }
1886
1312
 
1887
- .pf-v6-c-label.pf-m-warning {
1888
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1889
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1890
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1891
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1892
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1893
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1894
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1895
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1896
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1897
- --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);
1313
+ .pf-v6-c-menu-toggle.pf-m-small {
1314
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
1315
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
1316
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
1317
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
1318
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
1319
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
1320
+ --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);
1321
+ --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);
1898
1322
  }
1899
1323
 
1900
- .pf-v6-c-label.pf-m-danger {
1901
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1902
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1903
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1904
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1905
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1906
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1907
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1908
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1909
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1910
- --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);
1324
+ .pf-v6-c-menu-toggle.pf-m-success {
1325
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
1326
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
1911
1327
  }
1912
1328
 
1913
- .pf-v6-c-label.pf-m-info {
1914
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1915
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1916
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1917
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1918
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1919
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1920
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1921
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1922
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1923
- --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);
1329
+ .pf-v6-c-menu-toggle.pf-m-warning {
1330
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
1331
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
1924
1332
  }
1925
1333
 
1926
- .pf-v6-c-label.pf-m-custom {
1927
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1928
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1929
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1930
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1931
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1932
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1933
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1934
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1935
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1936
- --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);
1334
+ .pf-v6-c-menu-toggle.pf-m-danger {
1335
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
1336
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
1937
1337
  }
1938
1338
 
1939
- .pf-v6-c-label.pf-m-compact {
1940
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1941
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1942
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1943
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1944
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1945
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1946
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1339
+ @media screen and (prefers-reduced-motion: no-preference) {
1340
+ .pf-v6-c-menu-toggle.pf-m-danger {
1341
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
1342
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
1343
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
1344
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
1345
+ animation-fill-mode: both;
1346
+ }
1347
+ }
1348
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
1349
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
1350
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
1351
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
1947
1352
  }
1948
1353
 
1949
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1950
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1354
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
1355
+ from {
1356
+ opacity: 0;
1357
+ }
1358
+ to {
1359
+ opacity: 1;
1360
+ }
1361
+ }
1362
+ .pf-v6-c-menu-toggle.pf-m-settings {
1363
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
1364
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
1365
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
1366
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
1367
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
1368
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
1369
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
1951
1370
  }
1952
1371
 
1953
- .pf-v6-c-label.pf-m-outline {
1954
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1955
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1956
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1957
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1958
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1959
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1960
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1961
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1962
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1963
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1372
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
1373
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
1964
1374
  }
1965
1375
 
1966
- .pf-v6-c-label.pf-m-editable {
1967
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1968
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1376
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
1377
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
1378
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
1379
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
1380
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
1381
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
1969
1382
  }
1970
1383
 
1971
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1972
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1973
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1384
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
1385
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
1386
+ pointer-events: none;
1974
1387
  }
1975
1388
 
1976
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1977
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1978
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1979
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1389
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
1390
+ syntax: "<length>";
1391
+ inherits: false;
1392
+ initial-value: 0;
1980
1393
  }
1981
-
1982
- .pf-v6-c-label.pf-m-editable-active {
1983
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1984
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1985
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1986
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1394
+ @media (prefers-reduced-motion: no-preference) {
1395
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
1396
+ 33% {
1397
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
1398
+ }
1399
+ 66% {
1400
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
1401
+ }
1402
+ }
1403
+ }
1404
+ .pf-v6-c-menu-toggle.pf-m-split-button {
1405
+ --pf-v6-c-menu-toggle--Gap: 0;
1406
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1407
+ padding: 0;
1987
1408
  }
1988
1409
 
1989
- .pf-v6-c-label.pf-m-overflow {
1990
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1991
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1992
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1410
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
1411
+ position: relative;
1412
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1413
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1414
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1415
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1993
1416
  }
1994
1417
 
1995
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1996
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1997
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1998
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1418
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1419
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1420
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1999
1421
  }
2000
1422
 
2001
- .pf-v6-c-label.pf-m-add {
2002
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
2003
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
2004
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
2005
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1423
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1424
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1425
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2006
1426
  }
2007
1427
 
2008
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
2009
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
2010
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
2011
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
2012
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1428
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1429
+ --pf-v6-c-check__label--Color: currentcolor;
1430
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
1431
+ align-items: center;
1432
+ align-self: stretch;
2013
1433
  }
2014
1434
 
2015
- .pf-v6-c-label.pf-m-clickable {
2016
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1435
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1436
+ --pf-v6-c-check__input--TranslateY: 0;
1437
+ align-self: center;
2017
1438
  }
2018
1439
 
2019
- .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) {
2020
- text-decoration-line: none;
1440
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1441
+ 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);
2021
1442
  }
2022
1443
 
2023
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2024
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
2025
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2026
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
2027
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
2028
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
2029
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2030
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1444
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1445
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
2031
1446
  }
2032
1447
 
2033
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
2034
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1448
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1449
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1450
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
2035
1451
  }
2036
1452
 
2037
- .pf-v6-c-label.pf-m-disabled {
2038
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
2039
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
2040
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
2041
- --pf-v6-c-label--BorderWidth: 0;
2042
- pointer-events: none;
1453
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1454
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1455
+ --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);
2043
1456
  }
2044
1457
 
2045
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
2046
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1458
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1459
+ --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);
2047
1460
  }
2048
1461
 
2049
- .pf-v6-c-label,
2050
- .pf-v6-c-label__content {
2051
- display: inline-flex;
2052
- align-items: center;
2053
- justify-content: center;
1462
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1463
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
2054
1464
  }
2055
1465
 
2056
- .pf-v6-c-label__text {
2057
- overflow: hidden;
2058
- text-overflow: ellipsis;
2059
- white-space: nowrap;
2060
- max-width: var(--pf-v6-c-label__text--MaxWidth);
1466
+ .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,
1467
+ .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,
1468
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1469
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
2061
1470
  }
2062
1471
 
2063
- .pf-v6-c-label__content {
2064
- gap: var(--pf-v6-c-label__content--Gap);
2065
- max-width: var(--pf-v6-c-label__content--MaxWidth);
2066
- padding: 0;
2067
- overflow: hidden;
2068
- color: var(--pf-v6-c-label--Color);
2069
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
2070
- background: transparent;
2071
- border-width: 0;
1472
+ .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,
1473
+ .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,
1474
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1475
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
2072
1476
  }
2073
1477
 
2074
- .pf-v6-c-label__content::before {
2075
- position: absolute;
2076
- inset: 0;
2077
- z-index: -1;
2078
- pointer-events: none;
2079
- content: "";
2080
- background-color: var(--pf-v6-c-label--BackgroundColor);
2081
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
2082
- border-radius: var(--pf-v6-c-label--BorderRadius);
1478
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1479
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
2083
1480
  }
2084
1481
 
2085
- input.pf-v6-c-label__content {
2086
- overflow: hidden;
2087
- text-overflow: ellipsis;
2088
- white-space: nowrap;
1482
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1483
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1484
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1485
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
2089
1486
  }
2090
1487
 
2091
- .pf-v6-c-label__icon {
2092
- color: var(--pf-v6-c-label__icon--Color);
1488
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1489
+ content: none;
2093
1490
  }
2094
1491
 
2095
- .pf-v6-c-label__actions {
2096
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1492
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
1493
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1494
+ --pf-v6-c-menu-toggle--Gap: 0;
1495
+ align-items: stretch;
1496
+ padding: 0;
2097
1497
  }
2098
1498
 
2099
- .pf-v6-c-label__actions .pf-v6-c-button {
2100
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2101
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2102
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2103
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2104
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2105
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2106
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2107
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1499
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1500
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2108
1501
  }
2109
1502
 
2110
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
2111
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1503
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1504
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1505
+ display: flex;
1506
+ align-items: stretch;
2112
1507
  }
2113
1508
 
2114
- .pf-v6-c-check {
2115
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2116
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2117
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2118
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2119
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2120
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2121
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2122
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2123
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2124
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2125
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2126
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2127
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2128
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1509
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1510
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1511
+ flex: 1;
2129
1512
  }
2130
1513
 
2131
- .pf-v6-c-check {
2132
- display: grid;
2133
- grid-template-columns: auto 1fr;
2134
- grid-gap: var(--pf-v6-c-check--GridGap);
2135
- accent-color: var(--pf-v6-c-check--AccentColor);
1514
+ .pf-v6-c-menu-toggle__button {
1515
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
1516
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1517
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1518
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1519
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1520
+ color: inherit;
1521
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1522
+ border: 0;
2136
1523
  }
2137
1524
 
2138
- .pf-v6-c-check.pf-m-standalone {
2139
- display: inline-grid;
2140
- grid-template-columns: auto;
2141
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1525
+ .pf-v6-c-menu-toggle__button.pf-m-text {
1526
+ display: inline-flex;
1527
+ align-items: baseline;
2142
1528
  }
2143
1529
 
2144
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2145
- align-self: center;
2146
- transform: none;
1530
+ .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) {
1531
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1532
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
2147
1533
  }
2148
1534
 
2149
- .pf-v6-c-check__input {
2150
- align-self: start;
2151
- font-size: var(--pf-v6-c-check__label--FontSize);
2152
- line-height: var(--pf-v6-c-check__label--LineHeight);
2153
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1535
+ .pf-v6-c-menu-toggle__text {
1536
+ overflow: hidden;
1537
+ text-overflow: ellipsis;
1538
+ white-space: nowrap;
1539
+ min-width: 0;
2154
1540
  }
2155
1541
 
2156
- .pf-v6-c-check__label {
2157
- font-size: var(--pf-v6-c-check__label--FontSize);
2158
- font-weight: var(--pf-v6-c-check__label--FontWeight);
2159
- line-height: var(--pf-v6-c-check__label--LineHeight);
2160
- color: var(--pf-v6-c-check__label--Color);
1542
+ .pf-v6-c-menu-toggle__count {
1543
+ display: flex;
1544
+ flex-wrap: nowrap;
2161
1545
  }
2162
1546
 
2163
- .pf-v6-c-check__description {
2164
- grid-column: 2;
2165
- font-size: var(--pf-v6-c-check__description--FontSize);
2166
- color: var(--pf-v6-c-check__description--Color);
1547
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1548
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1549
+ .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 {
1550
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1551
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
2167
1552
  }
2168
1553
 
2169
- .pf-v6-c-check__body {
2170
- grid-column: 2;
1554
+ .pf-v6-c-menu-toggle__icon {
1555
+ flex-shrink: 0;
1556
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
1557
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
1558
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
1559
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
2171
1560
  }
2172
1561
 
2173
- .pf-v6-c-check__label,
2174
- .pf-v6-c-check__input {
2175
- justify-self: start;
1562
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
1563
+ vertical-align: middle;
2176
1564
  }
2177
1565
 
2178
- label.pf-v6-c-check, .pf-v6-c-check__label,
2179
- .pf-v6-c-check__input {
2180
- cursor: pointer;
1566
+ .pf-v6-c-menu-toggle__controls {
1567
+ display: flex;
1568
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1569
+ align-items: center;
1570
+ justify-content: center;
1571
+ margin-inline-start: auto;
2181
1572
  }
2182
1573
 
2183
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2184
- .pf-v6-c-check__input:disabled,
2185
- .pf-v6-c-check__input.pf-m-disabled {
2186
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2187
- cursor: not-allowed;
1574
+ .pf-v6-c-menu-toggle__toggle-icon {
1575
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1576
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
2188
1577
  }
2189
1578
 
2190
- .pf-v6-c-check__label-required {
2191
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2192
- font-size: var(--pf-v6-c-check__label-required--FontSize);
2193
- color: var(--pf-v6-c-check__label-required--Color);
1579
+ .pf-v6-c-menu-toggle__status-icon {
1580
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
2194
1581
  }
2195
1582
 
2196
1583
  .pf-v6-c-label-group {
@@ -2307,729 +1694,1226 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2307
1694
  min-width: var(--pf-v6-c-label-group__list--MinWidth);
2308
1695
  }
2309
1696
 
2310
- .pf-v6-c-label-group__list-item {
2311
- display: inline-flex;
2312
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1697
+ .pf-v6-c-label-group__list-item {
1698
+ display: inline-flex;
1699
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1700
+ }
1701
+
1702
+ .pf-v6-c-label-group__label {
1703
+ overflow: hidden;
1704
+ text-overflow: ellipsis;
1705
+ white-space: nowrap;
1706
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1707
+ }
1708
+
1709
+ .pf-v6-c-label-group__close {
1710
+ display: flex;
1711
+ align-self: flex-start;
1712
+ }
1713
+
1714
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1715
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1716
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1717
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1718
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1719
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1720
+ }
1721
+
1722
+ .pf-v6-c-label-group__textarea {
1723
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1724
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1725
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1726
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1727
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1728
+ white-space: nowrap;
1729
+ resize: none;
1730
+ border: 0;
1731
+ -ms-overflow-style: none;
1732
+ scrollbar-width: none;
1733
+ }
1734
+
1735
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1736
+ display: none;
1737
+ }
1738
+
1739
+ .pf-v6-c-text-input-group {
1740
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1741
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
1742
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1743
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1744
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1745
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1746
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1747
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1748
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1749
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1750
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1751
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1752
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1753
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1754
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1755
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1756
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1757
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1758
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
1759
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1760
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1761
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1762
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1763
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1764
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1765
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1766
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1767
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1768
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1769
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1770
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1771
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1772
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
1773
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1774
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1775
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1776
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1777
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1778
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1779
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1780
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1781
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1782
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1783
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1784
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1785
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1786
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1787
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1788
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1789
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1790
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1791
+ }
1792
+
1793
+ .pf-v6-c-text-input-group {
1794
+ position: relative;
1795
+ display: flex;
1796
+ width: 100%;
1797
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
1798
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
1799
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
1800
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1801
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1802
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1803
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1804
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1805
+ }
1806
+
1807
+ .pf-v6-c-text-input-group::before {
1808
+ position: absolute;
1809
+ inset: 0;
1810
+ pointer-events: none;
1811
+ content: "";
1812
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1813
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1814
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1815
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1816
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1817
+ }
1818
+
1819
+ .pf-v6-c-text-input-group.pf-m-disabled {
1820
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1821
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1822
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1823
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1824
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1825
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1826
+ pointer-events: none;
1827
+ }
1828
+
1829
+ .pf-v6-c-text-input-group.pf-m-plain {
1830
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
1831
+ }
1832
+
1833
+ .pf-v6-c-text-input-group.pf-m-plain::before {
1834
+ border: 0;
1835
+ }
1836
+
1837
+ .pf-v6-c-text-input-group.pf-m-success {
1838
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1839
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1840
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1841
+ }
1842
+
1843
+ .pf-v6-c-text-input-group.pf-m-warning {
1844
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1845
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1846
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1847
+ }
1848
+
1849
+ .pf-v6-c-text-input-group.pf-m-error {
1850
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1851
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1852
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1853
+ }
1854
+
1855
+ @media (prefers-reduced-motion: no-preference) {
1856
+ .pf-v6-c-text-input-group.pf-m-error {
1857
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1858
+ animation-name: pf-v6-global-danger-jiggle-motion;
1859
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1860
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1861
+ animation-fill-mode: both;
1862
+ }
1863
+ }
1864
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1865
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1866
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1867
+ animation-name: pf-v6-global-fade-in;
1868
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1869
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1870
+ }
1871
+
1872
+ .pf-v6-c-text-input-group:hover {
1873
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1874
+ }
1875
+
1876
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1877
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1878
+ }
1879
+
1880
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1881
+ --pf-v6-c-text-input-group__text--Position: relative;
1882
+ }
1883
+
1884
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1885
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1886
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1887
+ }
1888
+
1889
+ .pf-v6-c-text-input-group__main {
1890
+ display: flex;
1891
+ flex: 1;
1892
+ flex-wrap: wrap;
1893
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1894
+ min-width: 0;
1895
+ }
1896
+
1897
+ .pf-v6-c-text-input-group__main.pf-m-icon {
1898
+ --pf-v6-c-text-input-group__text--Position: relative;
1899
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1900
+ display: inline-flex;
1901
+ align-items: center;
1902
+ justify-content: center;
1903
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1904
+ }
1905
+
1906
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1907
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1908
+ }
1909
+
1910
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1911
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1912
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1913
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1914
+ }
1915
+
1916
+ .pf-v6-c-text-input-group__text {
1917
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
1918
+ display: inline-grid;
1919
+ flex: 1;
1920
+ grid-template-areas: "text-input";
1921
+ grid-template-columns: 1fr;
1922
+ }
1923
+
1924
+ .pf-v6-c-text-input-group__icon {
1925
+ position: absolute;
1926
+ inset-block-start: 50%;
1927
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1928
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1929
+ color: var(--pf-v6-c-text-input-group__icon--Color);
1930
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2313
1931
  }
2314
1932
 
2315
- .pf-v6-c-label-group__label {
1933
+ .pf-v6-c-text-input-group__icon.pf-m-status {
1934
+ inset-inline-start: auto;
1935
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1936
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1937
+ }
1938
+
1939
+ .pf-v6-c-text-input-group__text-input {
2316
1940
  overflow: hidden;
2317
1941
  text-overflow: ellipsis;
2318
1942
  white-space: nowrap;
2319
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1943
+ position: relative;
1944
+ width: 100%;
1945
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1946
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1947
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1948
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1949
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1950
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
1951
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1952
+ border: 0;
1953
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2320
1954
  }
2321
1955
 
2322
- .pf-v6-c-label-group__close {
2323
- display: flex;
2324
- align-self: flex-start;
1956
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1957
+ grid-area: text-input;
2325
1958
  }
2326
1959
 
2327
- .pf-v6-c-label-group__close .pf-v6-c-button {
2328
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2329
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2330
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2331
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2332
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1960
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
1961
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2333
1962
  }
2334
1963
 
2335
- .pf-v6-c-label-group__textarea {
2336
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2337
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2338
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2339
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2340
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2341
- white-space: nowrap;
2342
- resize: none;
2343
- border: 0;
2344
- -ms-overflow-style: none;
2345
- scrollbar-width: none;
1964
+ .pf-v6-c-text-input-group__text-input::placeholder {
1965
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2346
1966
  }
2347
1967
 
2348
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2349
- display: none;
1968
+ .pf-v6-c-text-input-group__utilities {
1969
+ display: flex;
1970
+ align-items: center;
1971
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1972
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2350
1973
  }
2351
1974
 
2352
- .pf-v6-c-menu-toggle {
2353
- --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
2354
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2355
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2356
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2357
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2358
- --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));
2359
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
2360
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
2361
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
2362
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
2363
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
2364
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
2365
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
2366
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
2367
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2368
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
2369
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
2370
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
2371
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
2372
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
2373
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
2374
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
2375
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
2376
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
2377
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
2378
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
2379
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
2380
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
2381
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2382
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
2383
- --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
2384
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2385
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
2386
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
2387
- --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
2388
- --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
2389
- --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
2390
- --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
2391
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
2392
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
2393
- --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
2394
- --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
2395
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
2396
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
2397
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
2398
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
2399
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
2400
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
2401
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
2402
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
2403
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
2404
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
2405
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
2406
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
2407
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
2408
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
2409
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2410
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
2411
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
2412
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
2413
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
2414
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
2415
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
2416
- --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
2417
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
2418
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
2419
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
2420
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
2421
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2422
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
2423
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
2424
- --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
2425
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
2426
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
2427
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
2428
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
2429
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
2430
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
2431
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
2432
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
2433
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
2434
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
2435
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2436
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
2437
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
2438
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
2439
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
2440
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
2441
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
2442
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
2443
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
2444
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
2445
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
2446
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
2447
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
2448
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
2449
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
2450
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
2451
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
2452
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
2453
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
2454
- --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));
2455
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2456
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2457
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2458
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
2459
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
2460
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
2461
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
2462
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
2463
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2464
- --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
2465
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2466
- --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2467
- --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
2468
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
2469
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2470
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
2471
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
2472
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
2473
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
2474
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
2475
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
2476
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
2477
- --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
2478
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
2479
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
2480
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
2481
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
2482
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
2483
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
2484
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
2485
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2486
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2487
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
2488
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2489
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
2490
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2491
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
2492
- --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
2493
- --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
2494
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
2495
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
2496
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
2497
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
2498
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
2499
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
2500
- --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
1975
+ .pf-v6-c-text-input-group__utilities > * + * {
1976
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1977
+ }
1978
+
1979
+ .pf-v6-c-text-input-group__group {
1980
+ display: flex;
1981
+ }
1982
+
1983
+ .pf-v6-c-label {
1984
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1985
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1986
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1987
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1988
+ --pf-v6-c-label--MaxWidth: 100%;
1989
+ --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)));
1990
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1991
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
1992
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1993
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1994
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1995
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1996
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1997
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1998
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1999
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
2000
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
2001
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
2002
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
2003
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
2004
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
2005
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
2006
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
2007
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
2008
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
2009
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
2010
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
2011
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
2012
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
2013
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
2014
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
2015
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
2016
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
2017
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
2018
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
2019
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
2020
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
2021
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
2022
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
2023
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
2024
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
2025
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
2026
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
2027
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
2028
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
2029
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
2030
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
2031
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
2032
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
2033
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
2034
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
2035
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
2036
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
2037
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
2038
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
2039
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
2040
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
2041
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
2042
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
2043
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
2044
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
2045
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
2046
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
2047
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
2048
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
2049
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
2050
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
2051
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
2052
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
2053
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
2054
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
2055
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
2056
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
2057
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
2058
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
2059
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
2060
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
2061
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
2062
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
2063
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
2064
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
2065
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
2066
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
2067
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
2068
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
2069
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
2070
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
2071
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
2072
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
2073
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
2074
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
2075
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2076
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
2077
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
2078
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
2079
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
2080
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
2081
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
2082
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
2083
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
2084
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2085
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2086
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
2087
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
2088
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
2089
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
2090
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
2091
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
2092
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
2093
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
2094
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2095
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2096
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
2097
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
2098
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
2099
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
2100
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
2101
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
2102
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
2103
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
2104
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
2105
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
2106
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
2107
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
2108
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
2109
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
2110
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
2111
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
2112
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
2113
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
2114
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
2115
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
2116
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
2117
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2118
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
2119
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
2120
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
2121
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
2122
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
2123
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
2124
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
2125
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
2126
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2127
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
2128
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
2129
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
2130
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2131
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2132
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
2133
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2134
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2135
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
2136
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
2137
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
2138
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
2139
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
2140
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
2141
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
2142
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2143
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
2144
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2145
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
2146
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2147
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
2148
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
2149
+ --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)));
2150
+ --pf-v6-c-label__content--MaxWidth: 100%;
2151
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2152
+ --pf-v6-c-label__content--Cursor: initial;
2153
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2154
+ --pf-v6-c-label__text--MaxWidth: 100%;
2155
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
2156
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2157
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
2158
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
2159
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
2160
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
2161
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
2162
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
2163
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
2164
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
2165
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
2166
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
2167
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
2168
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
2169
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
2170
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
2171
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
2172
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
2173
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
2174
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
2175
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2176
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2177
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2178
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2501
2179
  }
2502
2180
 
2503
- .pf-v6-c-menu-toggle {
2181
+ .pf-v6-c-label {
2504
2182
  position: relative;
2505
- display: inline-flex;
2506
- gap: var(--pf-v6-c-menu-toggle--Gap);
2507
- align-items: center;
2508
- justify-content: center;
2509
- min-width: var(--pf-v6-c-menu-toggle--MinWidth);
2510
- max-width: 100%;
2511
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
2512
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
2513
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
2514
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
2515
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
2516
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
2517
- color: var(--pf-v6-c-menu-toggle--Color);
2518
- cursor: pointer;
2519
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
2183
+ gap: var(--pf-v6-c-label--Gap);
2184
+ min-width: var(--pf-v6-c-label--MinWidth);
2185
+ max-width: var(--pf-v6-c-label--MaxWidth);
2186
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
2187
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
2188
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
2189
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
2190
+ font-size: var(--pf-v6-c-label--FontSize);
2191
+ white-space: nowrap;
2192
+ background: transparent;
2193
+ isolation: isolate;
2520
2194
  border: 0;
2521
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
2522
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
2523
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
2524
- }
2525
-
2526
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
2527
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2528
- }
2529
-
2530
- .pf-v6-c-menu-toggle::before {
2531
- position: absolute;
2532
- inset-block-start: 0;
2533
- inset-block-end: 0;
2534
- inset-inline-start: 0;
2535
- inset-inline-end: 0;
2536
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
2537
- pointer-events: none;
2538
- content: "";
2539
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
2540
- transition: inherit;
2541
- }
2542
-
2543
- .pf-v6-c-menu-toggle.pf-m-primary {
2544
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
2545
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
2546
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
2547
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
2548
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
2549
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
2550
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
2551
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
2552
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
2553
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
2554
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
2555
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
2556
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
2557
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
2558
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
2559
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
2560
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
2195
+ border-radius: var(--pf-v6-c-label--BorderRadius);
2561
2196
  }
2562
2197
 
2563
- .pf-v6-c-menu-toggle.pf-m-secondary {
2564
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
2565
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
2566
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
2567
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
2568
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
2569
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
2570
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
2571
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
2572
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
2573
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
2574
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
2575
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
2576
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
2577
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
2578
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
2579
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
2580
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
2198
+ .pf-v6-c-label.pf-m-blue {
2199
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
2200
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
2201
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
2202
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
2203
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
2204
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
2205
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
2206
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
2581
2207
  }
2582
2208
 
2583
- .pf-v6-c-menu-toggle.pf-m-full-height {
2584
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
2585
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
2586
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
2587
- align-items: center;
2588
- height: 100%;
2209
+ .pf-v6-c-label.pf-m-red {
2210
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
2211
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
2212
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
2213
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
2214
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
2215
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
2216
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
2217
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
2589
2218
  }
2590
2219
 
2591
- .pf-v6-c-menu-toggle.pf-m-full-width {
2592
- width: 100%;
2220
+ .pf-v6-c-label.pf-m-orange {
2221
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
2222
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
2223
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
2224
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
2225
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
2226
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
2227
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
2228
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
2593
2229
  }
2594
2230
 
2595
- .pf-v6-c-menu-toggle.pf-m-plain {
2596
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
2597
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
2598
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
2599
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
2600
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
2601
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
2602
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
2603
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
2604
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
2605
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
2606
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
2607
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
2608
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
2609
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
2610
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
2611
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
2231
+ .pf-v6-c-label.pf-m-orangered {
2232
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
2233
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
2234
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
2235
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
2236
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
2237
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
2238
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
2239
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
2612
2240
  }
2613
2241
 
2614
- .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
2615
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
2242
+ .pf-v6-c-label.pf-m-yellow {
2243
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
2244
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
2245
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
2246
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
2247
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
2248
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
2249
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
2250
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
2616
2251
  }
2617
2252
 
2618
- .pf-v6-c-menu-toggle.pf-m-plain::before {
2619
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
2620
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
2253
+ .pf-v6-c-label.pf-m-green {
2254
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
2255
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
2256
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
2257
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
2258
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
2259
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
2260
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
2261
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
2621
2262
  }
2622
2263
 
2623
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
2624
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
2625
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
2626
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
2627
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
2628
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
2629
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
2630
- --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
2631
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
2632
- --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
2633
- --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
2264
+ .pf-v6-c-label.pf-m-teal {
2265
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
2266
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
2267
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
2268
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
2269
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
2270
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
2271
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
2272
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
2634
2273
  }
2635
2274
 
2636
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
2637
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
2638
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
2639
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
2640
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
2641
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
2642
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
2275
+ .pf-v6-c-label.pf-m-purple {
2276
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
2277
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
2278
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
2279
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
2280
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
2281
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
2282
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
2283
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
2643
2284
  }
2644
2285
 
2645
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
2646
- border: 0;
2286
+ .pf-v6-c-label.pf-m-success {
2287
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
2288
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
2289
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
2290
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
2291
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
2292
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
2293
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
2294
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
2295
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
2296
+ --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);
2647
2297
  }
2648
2298
 
2649
- .pf-v6-c-menu-toggle.pf-m-small {
2650
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
2651
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
2652
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
2653
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
2654
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
2655
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
2656
- --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);
2657
- --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);
2299
+ .pf-v6-c-label.pf-m-warning {
2300
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
2301
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
2302
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
2303
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
2304
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
2305
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
2306
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
2307
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
2308
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
2309
+ --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);
2658
2310
  }
2659
2311
 
2660
- .pf-v6-c-menu-toggle.pf-m-success {
2661
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
2662
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
2312
+ .pf-v6-c-label.pf-m-danger {
2313
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
2314
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
2315
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
2316
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
2317
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
2318
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
2319
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
2320
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
2321
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
2322
+ --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);
2663
2323
  }
2664
2324
 
2665
- .pf-v6-c-menu-toggle.pf-m-warning {
2666
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
2667
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
2325
+ .pf-v6-c-label.pf-m-info {
2326
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
2327
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
2328
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
2329
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
2330
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
2331
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
2332
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
2333
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
2334
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
2335
+ --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);
2668
2336
  }
2669
2337
 
2670
- .pf-v6-c-menu-toggle.pf-m-danger {
2671
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
2672
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
2338
+ .pf-v6-c-label.pf-m-custom {
2339
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
2340
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
2341
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
2342
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
2343
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
2344
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
2345
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
2346
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
2347
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
2348
+ --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);
2673
2349
  }
2674
2350
 
2675
- @media screen and (prefers-reduced-motion: no-preference) {
2676
- .pf-v6-c-menu-toggle.pf-m-danger {
2677
- transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
2678
- animation-name: pf-v6-c-menu-toggle-m-danger-motion;
2679
- animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
2680
- animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
2681
- animation-fill-mode: both;
2682
- }
2683
- }
2684
- .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
2685
- animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
2686
- animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
2687
- animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
2351
+ .pf-v6-c-label.pf-m-compact {
2352
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
2353
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
2354
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
2355
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
2356
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
2357
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
2358
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
2688
2359
  }
2689
2360
 
2690
- @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
2691
- from {
2692
- opacity: 0;
2693
- }
2694
- to {
2695
- opacity: 1;
2696
- }
2361
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
2362
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
2697
2363
  }
2698
- .pf-v6-c-menu-toggle.pf-m-settings {
2699
- --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
2700
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
2701
- --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
2702
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
2703
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
2704
- --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
2705
- --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
2364
+
2365
+ .pf-v6-c-label.pf-m-outline {
2366
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
2367
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
2368
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
2369
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
2370
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
2371
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
2372
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2373
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2374
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
2375
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
2706
2376
  }
2707
2377
 
2708
- .pf-v6-c-menu-toggle.pf-m-placeholder {
2709
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
2378
+ .pf-v6-c-label.pf-m-editable {
2379
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
2380
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
2710
2381
  }
2711
2382
 
2712
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
2713
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
2714
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
2715
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
2716
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
2717
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
2383
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
2384
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
2385
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
2718
2386
  }
2719
2387
 
2720
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
2721
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
2722
- pointer-events: none;
2388
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
2389
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
2390
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
2391
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
2723
2392
  }
2724
2393
 
2725
- @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
2726
- syntax: "<length>";
2727
- inherits: false;
2728
- initial-value: 0;
2394
+ .pf-v6-c-label.pf-m-editable-active {
2395
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
2396
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
2397
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
2398
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
2729
2399
  }
2730
- @media (prefers-reduced-motion: no-preference) {
2731
- @keyframes pf-v6-c-menu-toggle-m-danger-motion {
2732
- 33% {
2733
- --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
2734
- }
2735
- 66% {
2736
- --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
2737
- }
2738
- }
2400
+
2401
+ .pf-v6-c-label.pf-m-overflow {
2402
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
2403
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
2404
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
2739
2405
  }
2740
- .pf-v6-c-menu-toggle.pf-m-split-button {
2741
- --pf-v6-c-menu-toggle--Gap: 0;
2742
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
2743
- padding: 0;
2406
+
2407
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
2408
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
2409
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
2410
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
2744
2411
  }
2745
2412
 
2746
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
2747
- position: relative;
2748
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
2749
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
2750
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
2751
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
2413
+ .pf-v6-c-label.pf-m-add {
2414
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
2415
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
2416
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
2417
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
2752
2418
  }
2753
2419
 
2754
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
2755
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2756
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2420
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
2421
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
2422
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
2423
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
2424
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
2757
2425
  }
2758
2426
 
2759
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
2760
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2761
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2427
+ .pf-v6-c-label.pf-m-clickable {
2428
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
2762
2429
  }
2763
2430
 
2764
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
2765
- --pf-v6-c-check__label--Color: currentcolor;
2766
- --pf-v6-c-check__label--disabled--Color: currentcolor;
2767
- align-items: center;
2768
- align-self: stretch;
2431
+ .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) {
2432
+ text-decoration-line: none;
2769
2433
  }
2770
2434
 
2771
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
2772
- --pf-v6-c-check__input--TranslateY: 0;
2773
- align-self: center;
2435
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2436
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
2437
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2438
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
2439
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
2440
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
2441
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2442
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2774
2443
  }
2775
2444
 
2776
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
2777
- 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);
2445
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
2446
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2778
2447
  }
2779
2448
 
2780
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
2781
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
2449
+ .pf-v6-c-label.pf-m-disabled {
2450
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
2451
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
2452
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
2453
+ --pf-v6-c-label--BorderWidth: 0;
2454
+ pointer-events: none;
2782
2455
  }
2783
2456
 
2784
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
2785
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
2786
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
2457
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
2458
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
2787
2459
  }
2788
2460
 
2789
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
2790
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
2791
- --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);
2461
+ .pf-v6-c-label,
2462
+ .pf-v6-c-label__content {
2463
+ display: inline-flex;
2464
+ align-items: center;
2465
+ justify-content: center;
2792
2466
  }
2793
2467
 
2794
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
2795
- --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);
2468
+ .pf-v6-c-label__text {
2469
+ overflow: hidden;
2470
+ text-overflow: ellipsis;
2471
+ white-space: nowrap;
2472
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
2796
2473
  }
2797
2474
 
2798
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
2799
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
2475
+ .pf-v6-c-label__content {
2476
+ gap: var(--pf-v6-c-label__content--Gap);
2477
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
2478
+ padding: 0;
2479
+ overflow: hidden;
2480
+ color: var(--pf-v6-c-label--Color);
2481
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
2482
+ background: transparent;
2483
+ border-width: 0;
2800
2484
  }
2801
2485
 
2802
- .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,
2803
- .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,
2804
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
2805
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
2486
+ .pf-v6-c-label__content::before {
2487
+ position: absolute;
2488
+ inset: 0;
2489
+ z-index: -1;
2490
+ pointer-events: none;
2491
+ content: "";
2492
+ background-color: var(--pf-v6-c-label--BackgroundColor);
2493
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
2494
+ border-radius: var(--pf-v6-c-label--BorderRadius);
2806
2495
  }
2807
2496
 
2808
- .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,
2809
- .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,
2810
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
2811
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
2497
+ input.pf-v6-c-label__content {
2498
+ overflow: hidden;
2499
+ text-overflow: ellipsis;
2500
+ white-space: nowrap;
2812
2501
  }
2813
2502
 
2814
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
2815
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
2503
+ .pf-v6-c-label__icon {
2504
+ color: var(--pf-v6-c-label__icon--Color);
2816
2505
  }
2817
2506
 
2818
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
2819
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
2820
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
2821
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
2507
+ .pf-v6-c-label__actions {
2508
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2822
2509
  }
2823
2510
 
2824
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
2825
- content: none;
2511
+ .pf-v6-c-label__actions .pf-v6-c-button {
2512
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2513
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2514
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2515
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2516
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2517
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2518
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2519
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2826
2520
  }
2827
2521
 
2828
- .pf-v6-c-menu-toggle.pf-m-typeahead {
2829
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
2830
- --pf-v6-c-menu-toggle--Gap: 0;
2831
- align-items: stretch;
2832
- padding: 0;
2522
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
2523
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
2833
2524
  }
2834
2525
 
2835
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
2836
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2526
+ .pf-v6-c-divider {
2527
+ --pf-v6-c-divider--Display: flex;
2528
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2529
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2530
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2837
2531
  }
2838
2532
 
2839
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
2840
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2841
- display: flex;
2533
+ .pf-v6-c-divider {
2534
+ flex-direction: row;
2535
+ width: 100%;
2536
+ height: var(--pf-v6-c-divider--Size);
2537
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2538
+ --pf-v6-hidden-visible--hidden--Display: none;
2539
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2540
+ display: var(--pf-v6-hidden-visible--Display);
2541
+ flex-shrink: 0;
2842
2542
  align-items: stretch;
2543
+ align-self: stretch;
2544
+ justify-content: center;
2545
+ border: 0;
2843
2546
  }
2844
2547
 
2845
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
2846
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
2847
- flex: 1;
2548
+ .pf-v6-c-divider.pf-m-hidden {
2549
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2848
2550
  }
2849
2551
 
2850
- .pf-v6-c-menu-toggle__button {
2851
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
2852
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
2853
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
2854
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
2855
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
2856
- color: inherit;
2857
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
2858
- border: 0;
2552
+ @media screen and (min-width: 36rem) {
2553
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
2554
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2555
+ }
2556
+ .pf-v6-c-divider.pf-m-visible-on-sm {
2557
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2558
+ }
2559
+ }
2560
+ @media screen and (min-width: 48rem) {
2561
+ .pf-v6-c-divider.pf-m-hidden-on-md {
2562
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2563
+ }
2564
+ .pf-v6-c-divider.pf-m-visible-on-md {
2565
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2566
+ }
2567
+ }
2568
+ @media screen and (min-width: 62rem) {
2569
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
2570
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2571
+ }
2572
+ .pf-v6-c-divider.pf-m-visible-on-lg {
2573
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2574
+ }
2575
+ }
2576
+ @media screen and (min-width: 75rem) {
2577
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
2578
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2579
+ }
2580
+ .pf-v6-c-divider.pf-m-visible-on-xl {
2581
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2582
+ }
2583
+ }
2584
+ @media screen and (min-width: 90.625rem) {
2585
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
2586
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2587
+ }
2588
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
2589
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2590
+ }
2591
+ }
2592
+ .pf-v6-c-divider::before {
2593
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2594
+ content: "";
2595
+ background-color: var(--pf-v6-c-divider--Color);
2596
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2597
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2859
2598
  }
2860
2599
 
2861
- .pf-v6-c-menu-toggle__button.pf-m-text {
2862
- display: inline-flex;
2863
- align-items: baseline;
2600
+ .pf-v6-c-divider.pf-m-horizontal {
2601
+ flex-direction: row;
2602
+ width: 100%;
2603
+ height: var(--pf-v6-c-divider--Size);
2864
2604
  }
2865
2605
 
2866
- .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) {
2867
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
2868
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
2606
+ .pf-v6-c-divider.pf-m-vertical {
2607
+ flex-direction: column;
2608
+ width: var(--pf-v6-c-divider--Size);
2609
+ height: inherit;
2869
2610
  }
2870
2611
 
2871
- .pf-v6-c-menu-toggle__text {
2872
- overflow: hidden;
2873
- text-overflow: ellipsis;
2874
- white-space: nowrap;
2875
- min-width: 0;
2612
+ .pf-v6-c-divider.pf-m-inset-none {
2613
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2876
2614
  }
2877
2615
 
2878
- .pf-v6-c-menu-toggle__count {
2879
- display: flex;
2880
- flex-wrap: nowrap;
2616
+ .pf-v6-c-divider.pf-m-inset-xs {
2617
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2881
2618
  }
2882
2619
 
2883
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
2884
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
2885
- .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 {
2886
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
2887
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
2620
+ .pf-v6-c-divider.pf-m-inset-sm {
2621
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2888
2622
  }
2889
2623
 
2890
- .pf-v6-c-menu-toggle__icon {
2891
- flex-shrink: 0;
2892
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
2893
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
2894
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
2895
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
2624
+ .pf-v6-c-divider.pf-m-inset-md {
2625
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2896
2626
  }
2897
2627
 
2898
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
2899
- vertical-align: middle;
2628
+ .pf-v6-c-divider.pf-m-inset-lg {
2629
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2900
2630
  }
2901
2631
 
2902
- .pf-v6-c-menu-toggle__controls {
2903
- display: flex;
2904
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
2905
- align-items: center;
2906
- justify-content: center;
2907
- margin-inline-start: auto;
2632
+ .pf-v6-c-divider.pf-m-inset-xl {
2633
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2908
2634
  }
2909
2635
 
2910
- .pf-v6-c-menu-toggle__toggle-icon {
2911
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
2912
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
2636
+ .pf-v6-c-divider.pf-m-inset-2xl {
2637
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2913
2638
  }
2914
2639
 
2915
- .pf-v6-c-menu-toggle__status-icon {
2916
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
2640
+ .pf-v6-c-divider.pf-m-inset-3xl {
2641
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2917
2642
  }
2918
2643
 
2919
- .pf-v6-c-breadcrumb {
2920
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2921
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
2922
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2923
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
2924
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2925
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
2926
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2927
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2928
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
2929
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2930
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2931
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
2932
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2933
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2934
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
2935
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
2936
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
2937
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2938
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2939
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2940
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2644
+ @media (min-width: 36rem) {
2645
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
2646
+ flex-direction: row;
2647
+ width: 100%;
2648
+ height: var(--pf-v6-c-divider--Size);
2649
+ }
2941
2650
  }
2942
-
2943
- .pf-v6-c-breadcrumb {
2944
- display: inline-flex;
2651
+ @media (min-width: 36rem) {
2652
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
2653
+ flex-direction: column;
2654
+ width: var(--pf-v6-c-divider--Size);
2655
+ height: inherit;
2656
+ }
2945
2657
  }
2946
-
2947
- .pf-v6-c-breadcrumb__list {
2948
- display: flex;
2949
- flex-wrap: wrap;
2950
- align-items: center;
2658
+ @media (min-width: 36rem) {
2659
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
2660
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2661
+ }
2662
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2663
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2664
+ }
2665
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2666
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2667
+ }
2668
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
2669
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2670
+ }
2671
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2672
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2673
+ }
2674
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2675
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2676
+ }
2677
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2678
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2679
+ }
2680
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2681
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2682
+ }
2951
2683
  }
2952
-
2953
- .pf-v6-c-breadcrumb__item {
2954
- display: flex;
2955
- align-items: baseline;
2956
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
2957
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
2958
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
2959
- white-space: nowrap;
2960
- list-style: none;
2684
+ @media (min-width: 48rem) {
2685
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
2686
+ flex-direction: row;
2687
+ width: 100%;
2688
+ height: var(--pf-v6-c-divider--Size);
2689
+ }
2961
2690
  }
2962
-
2963
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
2964
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2691
+ @media (min-width: 48rem) {
2692
+ .pf-v6-c-divider.pf-m-vertical-on-md {
2693
+ flex-direction: column;
2694
+ width: var(--pf-v6-c-divider--Size);
2695
+ height: inherit;
2696
+ }
2965
2697
  }
2966
-
2967
- .pf-v6-c-breadcrumb__item:not(:last-child) {
2968
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2698
+ @media (min-width: 48rem) {
2699
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2700
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2701
+ }
2702
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2703
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2704
+ }
2705
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2706
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2707
+ }
2708
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2709
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2710
+ }
2711
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2712
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2713
+ }
2714
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2715
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2716
+ }
2717
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2718
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2719
+ }
2720
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2721
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2722
+ }
2969
2723
  }
2970
-
2971
- .pf-v6-c-breadcrumb__item-divider {
2972
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
2973
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
2974
- line-height: 1;
2975
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
2724
+ @media (min-width: 62rem) {
2725
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2726
+ flex-direction: row;
2727
+ width: 100%;
2728
+ height: var(--pf-v6-c-divider--Size);
2729
+ }
2730
+ }
2731
+ @media (min-width: 62rem) {
2732
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2733
+ flex-direction: column;
2734
+ width: var(--pf-v6-c-divider--Size);
2735
+ height: inherit;
2736
+ }
2737
+ }
2738
+ @media (min-width: 62rem) {
2739
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2740
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2741
+ }
2742
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2743
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2744
+ }
2745
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2746
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2747
+ }
2748
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2749
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2750
+ }
2751
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2752
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2753
+ }
2754
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2755
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2756
+ }
2757
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2758
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2759
+ }
2760
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2761
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2762
+ }
2763
+ }
2764
+ @media (min-width: 75rem) {
2765
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2766
+ flex-direction: row;
2767
+ width: 100%;
2768
+ height: var(--pf-v6-c-divider--Size);
2769
+ }
2770
+ }
2771
+ @media (min-width: 75rem) {
2772
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2773
+ flex-direction: column;
2774
+ width: var(--pf-v6-c-divider--Size);
2775
+ height: inherit;
2776
+ }
2777
+ }
2778
+ @media (min-width: 75rem) {
2779
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2780
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2781
+ }
2782
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2783
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2784
+ }
2785
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2786
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2787
+ }
2788
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2789
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2790
+ }
2791
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2792
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2793
+ }
2794
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2795
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2796
+ }
2797
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2798
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2799
+ }
2800
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2801
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2802
+ }
2976
2803
  }
2977
-
2978
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
2979
- scale: -1 1;
2804
+ @media (min-width: 90.625rem) {
2805
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2806
+ flex-direction: row;
2807
+ width: 100%;
2808
+ height: var(--pf-v6-c-divider--Size);
2809
+ }
2980
2810
  }
2981
-
2982
- .pf-v6-c-breadcrumb__link {
2983
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
2984
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
2985
- font-size: inherit;
2986
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
2987
- line-height: inherit;
2988
- color: var(--pf-v6-c-breadcrumb__link--Color);
2989
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
2990
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
2991
- word-break: break-word;
2992
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2811
+ @media (min-width: 90.625rem) {
2812
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2813
+ flex-direction: column;
2814
+ width: var(--pf-v6-c-divider--Size);
2815
+ height: inherit;
2816
+ }
2993
2817
  }
2994
-
2995
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
2996
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
2997
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
2998
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
2818
+ @media (min-width: 90.625rem) {
2819
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2820
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2821
+ }
2822
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2823
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2824
+ }
2825
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2826
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2827
+ }
2828
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2829
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2830
+ }
2831
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2832
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2833
+ }
2834
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2835
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2836
+ }
2837
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2838
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2839
+ }
2840
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2841
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2842
+ }
2843
+ }
2844
+ .pf-v6-c-badge {
2845
+ --pf-v6-c-badge--BorderColor: transparent;
2846
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2847
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2848
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2849
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2850
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2851
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2852
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2853
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2854
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2855
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2856
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2857
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2858
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2859
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2860
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2861
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2862
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2863
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2864
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2865
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2999
2866
  }
3000
2867
 
3001
- .pf-v6-c-breadcrumb__link.pf-m-current {
3002
- cursor: default;
2868
+ .pf-v6-c-badge {
2869
+ position: relative;
2870
+ display: inline-block;
2871
+ min-width: var(--pf-v6-c-badge--MinWidth);
2872
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2873
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2874
+ font-size: var(--pf-v6-c-badge--FontSize);
2875
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2876
+ color: var(--pf-v6-c-badge--Color);
2877
+ text-align: center;
2878
+ white-space: nowrap;
2879
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2880
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
3003
2881
  }
3004
2882
 
3005
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3006
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3007
- text-decoration-line: none;
2883
+ .pf-v6-c-badge::after {
2884
+ position: absolute;
2885
+ inset: 0;
2886
+ pointer-events: none;
2887
+ content: "";
2888
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2889
+ border-radius: inherit;
3008
2890
  }
3009
2891
 
3010
- button.pf-v6-c-breadcrumb__link {
3011
- border: none;
2892
+ .pf-v6-c-badge.pf-m-read {
2893
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2894
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2895
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2896
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
3012
2897
  }
3013
2898
 
3014
- .pf-v6-c-breadcrumb__dropdown {
3015
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3016
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3017
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3018
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
2899
+ .pf-v6-c-badge.pf-m-unread {
2900
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2901
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2902
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
3019
2903
  }
3020
2904
 
3021
- .pf-v6-c-breadcrumb__heading {
3022
- display: inline;
3023
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2905
+ .pf-v6-c-badge.pf-m-disabled {
2906
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2907
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
3024
2908
  }
3025
2909
 
3026
- .pf-v6-c-breadcrumb__link,
3027
- .pf-v6-c-breadcrumb__heading {
3028
- white-space: normal;
2910
+ .pf-v6-c-badge.pf-m-disabled::after {
2911
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
3029
2912
  }
3030
2913
 
3031
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3032
- display: none;
2914
+ .pf-v6-c-badge__toggle-icon {
2915
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2916
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
3033
2917
  }
3034
2918
 
3035
2919
  .pf-v6-c-menu {
@@ -3716,6 +3600,122 @@ button.pf-v6-c-breadcrumb__link {
3716
3600
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3717
3601
  }
3718
3602
 
3603
+ .pf-v6-c-breadcrumb {
3604
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3605
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3606
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3607
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3608
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3609
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3610
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3611
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3612
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3613
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3614
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3615
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3616
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3617
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3618
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3619
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3620
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3621
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3622
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3623
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3624
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3625
+ }
3626
+
3627
+ .pf-v6-c-breadcrumb {
3628
+ display: inline-flex;
3629
+ }
3630
+
3631
+ .pf-v6-c-breadcrumb__list {
3632
+ display: flex;
3633
+ flex-wrap: wrap;
3634
+ align-items: center;
3635
+ }
3636
+
3637
+ .pf-v6-c-breadcrumb__item {
3638
+ display: flex;
3639
+ align-items: baseline;
3640
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3641
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3642
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3643
+ white-space: nowrap;
3644
+ list-style: none;
3645
+ }
3646
+
3647
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3648
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3649
+ }
3650
+
3651
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3652
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3653
+ }
3654
+
3655
+ .pf-v6-c-breadcrumb__item-divider {
3656
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3657
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3658
+ line-height: 1;
3659
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3660
+ }
3661
+
3662
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3663
+ scale: -1 1;
3664
+ }
3665
+
3666
+ .pf-v6-c-breadcrumb__link {
3667
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3668
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3669
+ font-size: inherit;
3670
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3671
+ line-height: inherit;
3672
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3673
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3674
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3675
+ word-break: break-word;
3676
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3677
+ }
3678
+
3679
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3680
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3681
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3682
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3683
+ }
3684
+
3685
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3686
+ cursor: default;
3687
+ }
3688
+
3689
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3690
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3691
+ text-decoration-line: none;
3692
+ }
3693
+
3694
+ button.pf-v6-c-breadcrumb__link {
3695
+ border: none;
3696
+ }
3697
+
3698
+ .pf-v6-c-breadcrumb__dropdown {
3699
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3700
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3701
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3702
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3703
+ }
3704
+
3705
+ .pf-v6-c-breadcrumb__heading {
3706
+ display: inline;
3707
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3708
+ }
3709
+
3710
+ .pf-v6-c-breadcrumb__link,
3711
+ .pf-v6-c-breadcrumb__heading {
3712
+ white-space: normal;
3713
+ }
3714
+
3715
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3716
+ display: none;
3717
+ }
3718
+
3719
3719
  .pf-v6-c-spinner {
3720
3720
  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3721
3721
  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);