@patternfly/react-templates 6.6.0-prerelease.9 → 6.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -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-DF7GqRGI.css → output-DVSs94Dd.css} +795 -795
  6. package/dist/umd/react-templates.min.js +1 -1
  7. package/package.json +6 -6
  8. package/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap +2 -2
  9. package/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap +2 -2
  10. package/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap +1 -1
  11. package/src/components/Select/__tests__/__snapshots__/SimpleSelect.test.tsx.snap +2 -2
  12. package/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap +1 -1
package/dist/umd/assets/{output-DF7GqRGI.css → output-DVSs94Dd.css} RENAMED
@@ -3,6 +3,327 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
+ .pf-v6-c-divider {
7
+ --pf-v6-c-divider--Display: flex;
8
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
9
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
10
+ --pf-v6-c-divider--before--FlexBasis: 100%;
11
+ }
12
+
13
+ .pf-v6-c-divider {
14
+ flex-direction: row;
15
+ width: 100%;
16
+ height: var(--pf-v6-c-divider--Size);
17
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
18
+ --pf-v6-hidden-visible--hidden--Display: none;
19
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
20
+ display: var(--pf-v6-hidden-visible--Display);
21
+ }
22
+
23
+ .pf-v6-c-divider.pf-m-hidden {
24
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
25
+ }
26
+
27
+ @media screen and (min-width: 36rem) {
28
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
29
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
30
+ }
31
+ .pf-v6-c-divider.pf-m-visible-on-sm {
32
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
33
+ }
34
+ }
35
+ @media screen and (min-width: 48rem) {
36
+ .pf-v6-c-divider.pf-m-hidden-on-md {
37
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
38
+ }
39
+ .pf-v6-c-divider.pf-m-visible-on-md {
40
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
41
+ }
42
+ }
43
+ @media screen and (min-width: 62rem) {
44
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
45
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
46
+ }
47
+ .pf-v6-c-divider.pf-m-visible-on-lg {
48
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
49
+ }
50
+ }
51
+ @media screen and (min-width: 75rem) {
52
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
53
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
54
+ }
55
+ .pf-v6-c-divider.pf-m-visible-on-xl {
56
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
57
+ }
58
+ }
59
+ @media screen and (min-width: 90.625rem) {
60
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
61
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
62
+ }
63
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
64
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
65
+ }
66
+ }
67
+ .pf-v6-c-divider {
68
+ flex-shrink: 0;
69
+ align-items: stretch;
70
+ align-self: stretch;
71
+ justify-content: center;
72
+ border: 0;
73
+ }
74
+
75
+ .pf-v6-c-divider::before {
76
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
77
+ content: "";
78
+ background-color: var(--pf-v6-c-divider--Color);
79
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
80
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
81
+ }
82
+
83
+ .pf-v6-c-divider.pf-m-horizontal {
84
+ flex-direction: row;
85
+ width: 100%;
86
+ height: var(--pf-v6-c-divider--Size);
87
+ }
88
+
89
+ .pf-v6-c-divider.pf-m-vertical {
90
+ flex-direction: column;
91
+ width: var(--pf-v6-c-divider--Size);
92
+ height: inherit;
93
+ }
94
+
95
+ .pf-v6-c-divider.pf-m-inset-none {
96
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
97
+ }
98
+
99
+ .pf-v6-c-divider.pf-m-inset-xs {
100
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
101
+ }
102
+
103
+ .pf-v6-c-divider.pf-m-inset-sm {
104
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
105
+ }
106
+
107
+ .pf-v6-c-divider.pf-m-inset-md {
108
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
109
+ }
110
+
111
+ .pf-v6-c-divider.pf-m-inset-lg {
112
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
113
+ }
114
+
115
+ .pf-v6-c-divider.pf-m-inset-xl {
116
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
117
+ }
118
+
119
+ .pf-v6-c-divider.pf-m-inset-2xl {
120
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
121
+ }
122
+
123
+ .pf-v6-c-divider.pf-m-inset-3xl {
124
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
125
+ }
126
+
127
+ @media (min-width: 36rem) {
128
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
129
+ flex-direction: row;
130
+ width: 100%;
131
+ height: var(--pf-v6-c-divider--Size);
132
+ }
133
+ }
134
+ @media (min-width: 36rem) {
135
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
136
+ flex-direction: column;
137
+ width: var(--pf-v6-c-divider--Size);
138
+ height: inherit;
139
+ }
140
+ }
141
+ @media (min-width: 36rem) {
142
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
143
+ --pf-v6-c-divider--before--FlexBasis: 100%;
144
+ }
145
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
146
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
147
+ }
148
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
149
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
150
+ }
151
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
152
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
153
+ }
154
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
155
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
156
+ }
157
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
158
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
159
+ }
160
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
161
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
162
+ }
163
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
164
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
165
+ }
166
+ }
167
+ @media (min-width: 48rem) {
168
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
169
+ flex-direction: row;
170
+ width: 100%;
171
+ height: var(--pf-v6-c-divider--Size);
172
+ }
173
+ }
174
+ @media (min-width: 48rem) {
175
+ .pf-v6-c-divider.pf-m-vertical-on-md {
176
+ flex-direction: column;
177
+ width: var(--pf-v6-c-divider--Size);
178
+ height: inherit;
179
+ }
180
+ }
181
+ @media (min-width: 48rem) {
182
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
183
+ --pf-v6-c-divider--before--FlexBasis: 100%;
184
+ }
185
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
186
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
187
+ }
188
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
189
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
190
+ }
191
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
192
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
193
+ }
194
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
195
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
196
+ }
197
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
198
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
199
+ }
200
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
201
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
202
+ }
203
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
204
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
205
+ }
206
+ }
207
+ @media (min-width: 62rem) {
208
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
209
+ flex-direction: row;
210
+ width: 100%;
211
+ height: var(--pf-v6-c-divider--Size);
212
+ }
213
+ }
214
+ @media (min-width: 62rem) {
215
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
216
+ flex-direction: column;
217
+ width: var(--pf-v6-c-divider--Size);
218
+ height: inherit;
219
+ }
220
+ }
221
+ @media (min-width: 62rem) {
222
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
223
+ --pf-v6-c-divider--before--FlexBasis: 100%;
224
+ }
225
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
226
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
227
+ }
228
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
229
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
230
+ }
231
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
232
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
233
+ }
234
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
235
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
236
+ }
237
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
238
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
239
+ }
240
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
241
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
242
+ }
243
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
244
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
245
+ }
246
+ }
247
+ @media (min-width: 75rem) {
248
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
249
+ flex-direction: row;
250
+ width: 100%;
251
+ height: var(--pf-v6-c-divider--Size);
252
+ }
253
+ }
254
+ @media (min-width: 75rem) {
255
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
256
+ flex-direction: column;
257
+ width: var(--pf-v6-c-divider--Size);
258
+ height: inherit;
259
+ }
260
+ }
261
+ @media (min-width: 75rem) {
262
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
263
+ --pf-v6-c-divider--before--FlexBasis: 100%;
264
+ }
265
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
266
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
267
+ }
268
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
269
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
270
+ }
271
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
272
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
273
+ }
274
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
275
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
276
+ }
277
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
278
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
279
+ }
280
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
281
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
282
+ }
283
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
284
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
285
+ }
286
+ }
287
+ @media (min-width: 90.625rem) {
288
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
289
+ flex-direction: row;
290
+ width: 100%;
291
+ height: var(--pf-v6-c-divider--Size);
292
+ }
293
+ }
294
+ @media (min-width: 90.625rem) {
295
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
296
+ flex-direction: column;
297
+ width: var(--pf-v6-c-divider--Size);
298
+ height: inherit;
299
+ }
300
+ }
301
+ @media (min-width: 90.625rem) {
302
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
303
+ --pf-v6-c-divider--before--FlexBasis: 100%;
304
+ }
305
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
306
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
307
+ }
308
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
309
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
310
+ }
311
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
312
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
313
+ }
314
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
315
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
316
+ }
317
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
318
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
319
+ }
320
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
321
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
322
+ }
323
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
324
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
325
+ }
326
+ }
6
327
  .pf-v6-c-menu-toggle {
7
328
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
8
329
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -596,257 +917,13 @@
596
917
  margin-inline-start: auto;
597
918
  }
598
919
 
599
- .pf-v6-c-menu-toggle__toggle-icon {
600
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
601
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
602
- }
603
-
604
- .pf-v6-c-menu-toggle__status-icon {
605
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
606
- }
607
-
608
- .pf-v6-c-text-input-group {
609
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
610
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
611
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
612
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
613
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
614
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
615
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
616
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
617
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
618
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
619
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
620
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
621
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
622
- --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));
623
- --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));
624
- --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));
625
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
626
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
627
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
628
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
629
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
630
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
631
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
632
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
633
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
634
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
635
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
636
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
637
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
638
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
639
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
640
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
641
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
642
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
643
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
644
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
645
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
646
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
647
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
648
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
649
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
650
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
651
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
652
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
653
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
654
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
655
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
656
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
657
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
658
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
659
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
660
- }
661
-
662
- .pf-v6-c-text-input-group {
663
- position: relative;
664
- display: flex;
665
- width: 100%;
666
- font-size: var(--pf-v6-c-text-input-group__FontSize);
667
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
668
- color: var(--pf-v6-c-text-input-group--Color, inherit);
669
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
670
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
671
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
672
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
673
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
674
- }
675
-
676
- .pf-v6-c-text-input-group::before {
677
- position: absolute;
678
- inset: 0;
679
- pointer-events: none;
680
- content: "";
681
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
682
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
683
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
684
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
685
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
686
- }
687
-
688
- .pf-v6-c-text-input-group.pf-m-disabled {
689
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
690
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
691
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
692
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
693
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
694
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
695
- pointer-events: none;
696
- }
697
-
698
- .pf-v6-c-text-input-group.pf-m-plain {
699
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
700
- }
701
-
702
- .pf-v6-c-text-input-group.pf-m-plain::before {
703
- border: 0;
704
- }
705
-
706
- .pf-v6-c-text-input-group.pf-m-success {
707
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
708
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
709
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
710
- }
711
-
712
- .pf-v6-c-text-input-group.pf-m-warning {
713
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
714
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
715
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
716
- }
717
-
718
- .pf-v6-c-text-input-group.pf-m-error {
719
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
720
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
721
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
722
- }
723
-
724
- @media (prefers-reduced-motion: no-preference) {
725
- .pf-v6-c-text-input-group.pf-m-error {
726
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
727
- animation-name: pf-v6-global-danger-jiggle-motion;
728
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
729
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
730
- animation-fill-mode: both;
731
- }
732
- }
733
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
734
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
735
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
736
- animation-name: pf-v6-global-fade-in;
737
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
738
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
739
- }
740
-
741
- .pf-v6-c-text-input-group:hover {
742
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
743
- }
744
-
745
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
746
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
747
- }
748
-
749
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
750
- --pf-v6-c-text-input-group__text--Position: relative;
751
- }
752
-
753
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
754
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
755
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
756
- }
757
-
758
- .pf-v6-c-text-input-group__main {
759
- display: flex;
760
- flex: 1;
761
- flex-wrap: wrap;
762
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
763
- min-width: 0;
764
- }
765
-
766
- .pf-v6-c-text-input-group__main.pf-m-icon {
767
- --pf-v6-c-text-input-group__text--Position: relative;
768
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
769
- display: inline-flex;
770
- align-items: center;
771
- justify-content: center;
772
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
773
- }
774
-
775
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
776
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
777
- }
778
-
779
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
780
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
781
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
782
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
783
- }
784
-
785
- .pf-v6-c-text-input-group__text {
786
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
787
- display: inline-grid;
788
- flex: 1;
789
- grid-template-areas: "text-input";
790
- grid-template-columns: 1fr;
791
- }
792
-
793
- .pf-v6-c-text-input-group__icon {
794
- position: absolute;
795
- inset-block-start: 50%;
796
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
797
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
798
- color: var(--pf-v6-c-text-input-group__icon--Color);
799
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
800
- }
801
-
802
- .pf-v6-c-text-input-group__icon.pf-m-status {
803
- inset-inline-start: auto;
804
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
805
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
806
- }
807
-
808
- .pf-v6-c-text-input-group__text-input {
809
- overflow: hidden;
810
- text-overflow: ellipsis;
811
- white-space: nowrap;
812
- position: relative;
813
- width: 100%;
814
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
815
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
816
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
817
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
818
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
819
- color: var(--pf-v6-c-text-input-group__text-input--Color);
820
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
821
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
822
- border: 0;
823
- }
824
-
825
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
826
- grid-area: text-input;
827
- }
828
-
829
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
830
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
831
- }
832
-
833
- .pf-v6-c-text-input-group__text-input::placeholder {
834
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
835
- }
836
-
837
- .pf-v6-c-text-input-group__utilities {
838
- display: flex;
839
- align-items: center;
840
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
841
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
842
- }
843
-
844
- .pf-v6-c-text-input-group__utilities > * + * {
845
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
920
+ .pf-v6-c-menu-toggle__toggle-icon {
921
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
922
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
846
923
  }
847
924
 
848
- .pf-v6-c-text-input-group__group {
849
- display: flex;
925
+ .pf-v6-c-menu-toggle__status-icon {
926
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
850
927
  }
851
928
 
852
929
  .pf-v6-c-button {
@@ -1889,235 +1966,405 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1889
1966
  scale: 1.5;
1890
1967
  }
1891
1968
  }
1892
- .pf-v6-c-label-group {
1893
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1894
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1895
- --pf-v6-c-label-group--MaxWidth: 100%;
1896
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1897
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1898
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1899
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1900
- --pf-v6-c-label-group__main--MaxWidth: 100%;
1901
- --pf-v6-c-label-group__main--MinWidth: 0;
1902
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1903
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1904
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1905
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1906
- --pf-v6-c-label-group__list--MaxWidth: 100%;
1907
- --pf-v6-c-label-group__list--MinWidth: 0;
1908
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1909
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1910
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1911
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1912
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1913
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1914
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1915
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1916
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1917
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1918
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1919
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
1920
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1921
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1922
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1923
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1924
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1925
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1926
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1927
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1928
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1929
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1969
+ .pf-v6-c-badge {
1970
+ --pf-v6-c-badge--BorderColor: transparent;
1971
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1972
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1973
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1974
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1975
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1976
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1977
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1978
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1979
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1980
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1981
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1982
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1983
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
1984
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1985
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1986
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1987
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1988
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1989
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1990
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1930
1991
  }
1931
1992
 
1932
- .pf-v6-c-label-group {
1933
- display: inline-flex;
1934
- row-gap: var(--pf-v6-c-label-group--RowGap);
1935
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1936
- align-items: center;
1937
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1993
+ .pf-v6-c-badge {
1994
+ position: relative;
1995
+ display: inline-block;
1996
+ min-width: var(--pf-v6-c-badge--MinWidth);
1997
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1998
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1999
+ font-size: var(--pf-v6-c-badge--FontSize);
2000
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2001
+ color: var(--pf-v6-c-badge--Color);
2002
+ text-align: center;
2003
+ white-space: nowrap;
2004
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2005
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2006
+ }
2007
+
2008
+ .pf-v6-c-badge::after {
2009
+ position: absolute;
2010
+ inset: 0;
2011
+ pointer-events: none;
2012
+ content: "";
2013
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2014
+ border-radius: inherit;
2015
+ }
2016
+
2017
+ .pf-v6-c-badge.pf-m-read {
2018
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2019
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2020
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2021
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2022
+ }
2023
+
2024
+ .pf-v6-c-badge.pf-m-unread {
2025
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2026
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2027
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2028
+ }
2029
+
2030
+ .pf-v6-c-badge.pf-m-disabled {
2031
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2032
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2033
+ }
2034
+
2035
+ .pf-v6-c-badge.pf-m-disabled::after {
2036
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2037
+ }
2038
+
2039
+ .pf-v6-c-badge__toggle-icon {
2040
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2041
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2042
+ }
2043
+
2044
+ .pf-v6-c-text-input-group {
2045
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2046
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
2047
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2048
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2049
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2050
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2051
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2052
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2053
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2054
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2055
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2056
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2057
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2058
+ --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));
2059
+ --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));
2060
+ --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));
2061
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2062
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2063
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
2064
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2065
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2066
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2067
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2068
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2069
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2070
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2071
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2072
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2073
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2074
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2075
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2076
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2077
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2078
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2079
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2080
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2081
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2082
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2083
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2084
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2085
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2086
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2087
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2088
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2089
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2090
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2091
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2092
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2093
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2094
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2095
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2096
+ }
2097
+
2098
+ .pf-v6-c-text-input-group {
2099
+ position: relative;
2100
+ display: flex;
2101
+ width: 100%;
2102
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
2103
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
2104
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
2105
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2106
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2107
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2108
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2109
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2110
+ }
2111
+
2112
+ .pf-v6-c-text-input-group::before {
2113
+ position: absolute;
2114
+ inset: 0;
2115
+ pointer-events: none;
2116
+ content: "";
2117
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2118
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2119
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2120
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2121
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2122
+ }
2123
+
2124
+ .pf-v6-c-text-input-group.pf-m-disabled {
2125
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2126
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2127
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2128
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2129
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2130
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2131
+ pointer-events: none;
2132
+ }
2133
+
2134
+ .pf-v6-c-text-input-group.pf-m-plain {
2135
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
2136
+ }
2137
+
2138
+ .pf-v6-c-text-input-group.pf-m-plain::before {
2139
+ border: 0;
2140
+ }
2141
+
2142
+ .pf-v6-c-text-input-group.pf-m-success {
2143
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2144
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2145
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2146
+ }
2147
+
2148
+ .pf-v6-c-text-input-group.pf-m-warning {
2149
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2150
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2151
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2152
+ }
2153
+
2154
+ .pf-v6-c-text-input-group.pf-m-error {
2155
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2156
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2157
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2158
+ }
2159
+
2160
+ @media (prefers-reduced-motion: no-preference) {
2161
+ .pf-v6-c-text-input-group.pf-m-error {
2162
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2163
+ animation-name: pf-v6-global-danger-jiggle-motion;
2164
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2165
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2166
+ animation-fill-mode: both;
2167
+ }
2168
+ }
2169
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2170
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2171
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2172
+ animation-name: pf-v6-global-fade-in;
2173
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2174
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1938
2175
  }
1939
2176
 
1940
- .pf-v6-c-label-group.pf-m-category {
1941
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1942
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1943
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1944
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1945
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1946
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1947
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2177
+ .pf-v6-c-text-input-group:hover {
2178
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1948
2179
  }
1949
2180
 
1950
- .pf-v6-c-label-group.pf-m-vertical {
1951
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1952
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1953
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1954
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1955
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1956
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1957
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2181
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2182
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1958
2183
  }
1959
2184
 
1960
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1961
- align-items: flex-start;
2185
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2186
+ --pf-v6-c-text-input-group__text--Position: relative;
1962
2187
  }
1963
2188
 
1964
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1965
- flex-direction: column;
1966
- align-items: flex-start;
1967
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2189
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2190
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2191
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1968
2192
  }
1969
2193
 
1970
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1971
- flex-direction: column;
1972
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2194
+ .pf-v6-c-text-input-group__main {
2195
+ display: flex;
2196
+ flex: 1;
2197
+ flex-wrap: wrap;
2198
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2199
+ min-width: 0;
1973
2200
  }
1974
2201
 
1975
- .pf-v6-c-label-group.pf-m-editable,
1976
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1977
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1978
- display: flex;
2202
+ .pf-v6-c-text-input-group__main.pf-m-icon {
2203
+ --pf-v6-c-text-input-group__text--Position: relative;
2204
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2205
+ display: inline-flex;
2206
+ align-items: center;
2207
+ justify-content: center;
2208
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1979
2209
  }
1980
2210
 
1981
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1982
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1983
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1984
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1985
- flex: 1;
2211
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2212
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1986
2213
  }
1987
2214
 
1988
- .pf-v6-c-label-group__main {
1989
- display: flex;
2215
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2216
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2217
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2218
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2219
+ }
2220
+
2221
+ .pf-v6-c-text-input-group__text {
2222
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
2223
+ display: inline-grid;
1990
2224
  flex: 1;
1991
- flex-wrap: wrap;
1992
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1993
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1994
- align-items: baseline;
1995
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2225
+ grid-template-areas: "text-input";
2226
+ grid-template-columns: 1fr;
1996
2227
  }
1997
2228
 
1998
- .pf-v6-c-label-group__list {
1999
- display: inline-flex;
2000
- flex-wrap: wrap;
2001
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
2002
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2003
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
2229
+ .pf-v6-c-text-input-group__icon {
2230
+ position: absolute;
2231
+ inset-block-start: 50%;
2232
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2233
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2234
+ color: var(--pf-v6-c-text-input-group__icon--Color);
2235
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2004
2236
  }
2005
2237
 
2006
- .pf-v6-c-label-group__list-item {
2007
- display: inline-flex;
2008
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2238
+ .pf-v6-c-text-input-group__icon.pf-m-status {
2239
+ inset-inline-start: auto;
2240
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2241
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2009
2242
  }
2010
2243
 
2011
- .pf-v6-c-label-group__label {
2244
+ .pf-v6-c-text-input-group__text-input {
2012
2245
  overflow: hidden;
2013
2246
  text-overflow: ellipsis;
2014
2247
  white-space: nowrap;
2015
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2248
+ position: relative;
2249
+ width: 100%;
2250
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2251
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2252
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2253
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2254
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2255
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
2256
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2257
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2258
+ border: 0;
2016
2259
  }
2017
2260
 
2018
- .pf-v6-c-label-group__close {
2261
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2262
+ grid-area: text-input;
2263
+ }
2264
+
2265
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
2266
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2267
+ }
2268
+
2269
+ .pf-v6-c-text-input-group__text-input::placeholder {
2270
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2271
+ }
2272
+
2273
+ .pf-v6-c-text-input-group__utilities {
2019
2274
  display: flex;
2020
- align-self: flex-start;
2275
+ align-items: center;
2276
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2277
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2021
2278
  }
2022
2279
 
2023
- .pf-v6-c-label-group__close .pf-v6-c-button {
2024
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2025
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2026
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2027
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2028
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2280
+ .pf-v6-c-text-input-group__utilities > * + * {
2281
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2029
2282
  }
2030
2283
 
2031
- .pf-v6-c-label-group__textarea {
2032
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2033
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2034
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2035
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2036
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2037
- white-space: nowrap;
2038
- resize: none;
2039
- scrollbar-width: none;
2040
- -ms-overflow-style: none;
2041
- border: 0;
2284
+ .pf-v6-c-text-input-group__group {
2285
+ display: flex;
2042
2286
  }
2043
2287
 
2044
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2045
- display: none;
2288
+ .pf-v6-c-check {
2289
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2290
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2291
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2292
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2293
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2294
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2295
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2296
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2297
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2298
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2299
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2300
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2301
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2302
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2046
2303
  }
2047
2304
 
2048
- .pf-v6-c-badge {
2049
- --pf-v6-c-badge--BorderColor: transparent;
2050
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2051
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2052
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2053
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2054
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2055
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2056
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2057
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2058
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2059
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2060
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2061
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2062
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2063
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2064
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2065
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2066
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2067
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2068
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2069
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2305
+ .pf-v6-c-check {
2306
+ display: grid;
2307
+ grid-template-columns: auto 1fr;
2308
+ gap: var(--pf-v6-c-check--GridGap);
2309
+ accent-color: var(--pf-v6-c-check--AccentColor);
2070
2310
  }
2071
2311
 
2072
- .pf-v6-c-badge {
2073
- position: relative;
2074
- display: inline-block;
2075
- min-width: var(--pf-v6-c-badge--MinWidth);
2076
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2077
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2078
- font-size: var(--pf-v6-c-badge--FontSize);
2079
- font-weight: var(--pf-v6-c-badge--FontWeight);
2080
- color: var(--pf-v6-c-badge--Color);
2081
- text-align: center;
2082
- white-space: nowrap;
2083
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2084
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2312
+ .pf-v6-c-check.pf-m-standalone {
2313
+ display: inline-grid;
2314
+ grid-template-columns: auto;
2315
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2085
2316
  }
2086
2317
 
2087
- .pf-v6-c-badge::after {
2088
- position: absolute;
2089
- inset: 0;
2090
- pointer-events: none;
2091
- content: "";
2092
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2093
- border-radius: inherit;
2318
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2319
+ align-self: center;
2320
+ transform: none;
2094
2321
  }
2095
2322
 
2096
- .pf-v6-c-badge.pf-m-read {
2097
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2098
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2099
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2100
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2323
+ .pf-v6-c-check__input {
2324
+ align-self: start;
2325
+ font-size: var(--pf-v6-c-check__label--FontSize);
2326
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2327
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2101
2328
  }
2102
2329
 
2103
- .pf-v6-c-badge.pf-m-unread {
2104
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2105
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2106
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2330
+ .pf-v6-c-check__label {
2331
+ font-size: var(--pf-v6-c-check__label--FontSize);
2332
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
2333
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2334
+ color: var(--pf-v6-c-check__label--Color);
2107
2335
  }
2108
2336
 
2109
- .pf-v6-c-badge.pf-m-disabled {
2110
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2111
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2337
+ .pf-v6-c-check__description {
2338
+ grid-column: 2;
2339
+ font-size: var(--pf-v6-c-check__description--FontSize);
2340
+ color: var(--pf-v6-c-check__description--Color);
2341
+ }
2342
+
2343
+ .pf-v6-c-check__body {
2344
+ grid-column: 2;
2345
+ }
2346
+
2347
+ .pf-v6-c-check__label,
2348
+ .pf-v6-c-check__input {
2349
+ justify-self: start;
2112
2350
  }
2113
2351
 
2114
- .pf-v6-c-badge.pf-m-disabled::after {
2115
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2352
+ label.pf-v6-c-check, .pf-v6-c-check__label,
2353
+ .pf-v6-c-check__input {
2354
+ cursor: pointer;
2116
2355
  }
2117
2356
 
2118
- .pf-v6-c-badge__toggle-icon {
2119
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2120
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2357
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2358
+ .pf-v6-c-check__input:disabled,
2359
+ .pf-v6-c-check__input.pf-m-disabled {
2360
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2361
+ cursor: not-allowed;
2362
+ }
2363
+
2364
+ .pf-v6-c-check__label-required {
2365
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2366
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
2367
+ color: var(--pf-v6-c-check__label-required--Color);
2121
2368
  }
2122
2369
 
2123
2370
  .pf-v6-c-label {
@@ -2663,409 +2910,162 @@ input.pf-v6-c-label__content {
2663
2910
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2664
2911
  }
2665
2912
 
2666
- .pf-v6-c-check {
2667
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2668
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2669
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2670
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2671
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2672
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2673
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2674
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2675
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2676
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2677
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2678
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2679
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2680
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2681
- }
2682
-
2683
- .pf-v6-c-check {
2684
- display: grid;
2685
- grid-template-columns: auto 1fr;
2686
- gap: var(--pf-v6-c-check--GridGap);
2687
- accent-color: var(--pf-v6-c-check--AccentColor);
2688
- }
2689
-
2690
- .pf-v6-c-check.pf-m-standalone {
2691
- display: inline-grid;
2692
- grid-template-columns: auto;
2693
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2694
- }
2695
-
2696
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2697
- align-self: center;
2698
- transform: none;
2699
- }
2700
-
2701
- .pf-v6-c-check__input {
2702
- align-self: start;
2703
- font-size: var(--pf-v6-c-check__label--FontSize);
2704
- line-height: var(--pf-v6-c-check__label--LineHeight);
2705
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2706
- }
2707
-
2708
- .pf-v6-c-check__label {
2709
- font-size: var(--pf-v6-c-check__label--FontSize);
2710
- font-weight: var(--pf-v6-c-check__label--FontWeight);
2711
- line-height: var(--pf-v6-c-check__label--LineHeight);
2712
- color: var(--pf-v6-c-check__label--Color);
2713
- }
2714
-
2715
- .pf-v6-c-check__description {
2716
- grid-column: 2;
2717
- font-size: var(--pf-v6-c-check__description--FontSize);
2718
- color: var(--pf-v6-c-check__description--Color);
2719
- }
2720
-
2721
- .pf-v6-c-check__body {
2722
- grid-column: 2;
2723
- }
2724
-
2725
- .pf-v6-c-check__label,
2726
- .pf-v6-c-check__input {
2727
- justify-self: start;
2728
- }
2729
-
2730
- label.pf-v6-c-check, .pf-v6-c-check__label,
2731
- .pf-v6-c-check__input {
2732
- cursor: pointer;
2733
- }
2734
-
2735
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2736
- .pf-v6-c-check__input:disabled,
2737
- .pf-v6-c-check__input.pf-m-disabled {
2738
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2739
- cursor: not-allowed;
2740
- }
2741
-
2742
- .pf-v6-c-check__label-required {
2743
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2744
- font-size: var(--pf-v6-c-check__label-required--FontSize);
2745
- color: var(--pf-v6-c-check__label-required--Color);
2746
- }
2747
-
2748
- .pf-v6-c-divider {
2749
- --pf-v6-c-divider--Display: flex;
2750
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2751
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2752
- --pf-v6-c-divider--before--FlexBasis: 100%;
2913
+ .pf-v6-c-label-group {
2914
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2915
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2916
+ --pf-v6-c-label-group--MaxWidth: 100%;
2917
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2918
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2919
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2920
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2921
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
2922
+ --pf-v6-c-label-group__main--MinWidth: 0;
2923
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2924
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2925
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2926
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2927
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
2928
+ --pf-v6-c-label-group__list--MinWidth: 0;
2929
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2930
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2931
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2932
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2933
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2934
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2935
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2936
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2937
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2938
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2939
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2940
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
2941
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2942
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2943
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2944
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2945
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2946
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2947
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2948
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2949
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2950
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2753
2951
  }
2754
2952
 
2755
- .pf-v6-c-divider {
2756
- flex-direction: row;
2757
- width: 100%;
2758
- height: var(--pf-v6-c-divider--Size);
2759
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2760
- --pf-v6-hidden-visible--hidden--Display: none;
2761
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2762
- display: var(--pf-v6-hidden-visible--Display);
2953
+ .pf-v6-c-label-group {
2954
+ display: inline-flex;
2955
+ row-gap: var(--pf-v6-c-label-group--RowGap);
2956
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
2957
+ align-items: center;
2958
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
2763
2959
  }
2764
2960
 
2765
- .pf-v6-c-divider.pf-m-hidden {
2766
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2961
+ .pf-v6-c-label-group.pf-m-category {
2962
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2963
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2964
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2965
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2966
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2967
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2968
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2767
2969
  }
2768
2970
 
2769
- @media screen and (min-width: 36rem) {
2770
- .pf-v6-c-divider.pf-m-hidden-on-sm {
2771
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2772
- }
2773
- .pf-v6-c-divider.pf-m-visible-on-sm {
2774
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2775
- }
2776
- }
2777
- @media screen and (min-width: 48rem) {
2778
- .pf-v6-c-divider.pf-m-hidden-on-md {
2779
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2780
- }
2781
- .pf-v6-c-divider.pf-m-visible-on-md {
2782
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2783
- }
2784
- }
2785
- @media screen and (min-width: 62rem) {
2786
- .pf-v6-c-divider.pf-m-hidden-on-lg {
2787
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2788
- }
2789
- .pf-v6-c-divider.pf-m-visible-on-lg {
2790
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2791
- }
2792
- }
2793
- @media screen and (min-width: 75rem) {
2794
- .pf-v6-c-divider.pf-m-hidden-on-xl {
2795
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2796
- }
2797
- .pf-v6-c-divider.pf-m-visible-on-xl {
2798
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2799
- }
2800
- }
2801
- @media screen and (min-width: 90.625rem) {
2802
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
2803
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2804
- }
2805
- .pf-v6-c-divider.pf-m-visible-on-2xl {
2806
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2807
- }
2808
- }
2809
- .pf-v6-c-divider {
2810
- flex-shrink: 0;
2811
- align-items: stretch;
2812
- align-self: stretch;
2813
- justify-content: center;
2814
- border: 0;
2971
+ .pf-v6-c-label-group.pf-m-vertical {
2972
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2973
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2974
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2975
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2976
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2977
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2978
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2815
2979
  }
2816
2980
 
2817
- .pf-v6-c-divider::before {
2818
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2819
- content: "";
2820
- background-color: var(--pf-v6-c-divider--Color);
2821
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2822
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2981
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2982
+ align-items: flex-start;
2823
2983
  }
2824
2984
 
2825
- .pf-v6-c-divider.pf-m-horizontal {
2826
- flex-direction: row;
2827
- width: 100%;
2828
- height: var(--pf-v6-c-divider--Size);
2985
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2986
+ flex-direction: column;
2987
+ align-items: flex-start;
2988
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2829
2989
  }
2830
2990
 
2831
- .pf-v6-c-divider.pf-m-vertical {
2991
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2832
2992
  flex-direction: column;
2833
- width: var(--pf-v6-c-divider--Size);
2834
- height: inherit;
2993
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2835
2994
  }
2836
2995
 
2837
- .pf-v6-c-divider.pf-m-inset-none {
2838
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2996
+ .pf-v6-c-label-group.pf-m-editable,
2997
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2998
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2999
+ display: flex;
2839
3000
  }
2840
3001
 
2841
- .pf-v6-c-divider.pf-m-inset-xs {
2842
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
3002
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
3003
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
3004
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
3005
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
3006
+ flex: 1;
2843
3007
  }
2844
3008
 
2845
- .pf-v6-c-divider.pf-m-inset-sm {
2846
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
3009
+ .pf-v6-c-label-group__main {
3010
+ display: flex;
3011
+ flex: 1;
3012
+ flex-wrap: wrap;
3013
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
3014
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
3015
+ align-items: baseline;
3016
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2847
3017
  }
2848
3018
 
2849
- .pf-v6-c-divider.pf-m-inset-md {
2850
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
3019
+ .pf-v6-c-label-group__list {
3020
+ display: inline-flex;
3021
+ flex-wrap: wrap;
3022
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
3023
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
3024
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2851
3025
  }
2852
3026
 
2853
- .pf-v6-c-divider.pf-m-inset-lg {
2854
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
3027
+ .pf-v6-c-label-group__list-item {
3028
+ display: inline-flex;
3029
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2855
3030
  }
2856
3031
 
2857
- .pf-v6-c-divider.pf-m-inset-xl {
2858
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
3032
+ .pf-v6-c-label-group__label {
3033
+ overflow: hidden;
3034
+ text-overflow: ellipsis;
3035
+ white-space: nowrap;
3036
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2859
3037
  }
2860
3038
 
2861
- .pf-v6-c-divider.pf-m-inset-2xl {
2862
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3039
+ .pf-v6-c-label-group__close {
3040
+ display: flex;
3041
+ align-self: flex-start;
2863
3042
  }
2864
3043
 
2865
- .pf-v6-c-divider.pf-m-inset-3xl {
2866
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3044
+ .pf-v6-c-label-group__close .pf-v6-c-button {
3045
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
3046
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
3047
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
3048
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
3049
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2867
3050
  }
2868
3051
 
2869
- @media (min-width: 36rem) {
2870
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
2871
- flex-direction: row;
2872
- width: 100%;
2873
- height: var(--pf-v6-c-divider--Size);
2874
- }
2875
- }
2876
- @media (min-width: 36rem) {
2877
- .pf-v6-c-divider.pf-m-vertical-on-sm {
2878
- flex-direction: column;
2879
- width: var(--pf-v6-c-divider--Size);
2880
- height: inherit;
2881
- }
2882
- }
2883
- @media (min-width: 36rem) {
2884
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
2885
- --pf-v6-c-divider--before--FlexBasis: 100%;
2886
- }
2887
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2888
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2889
- }
2890
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2891
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2892
- }
2893
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
2894
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2895
- }
2896
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2897
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2898
- }
2899
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2900
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2901
- }
2902
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2903
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2904
- }
2905
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2906
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2907
- }
2908
- }
2909
- @media (min-width: 48rem) {
2910
- .pf-v6-c-divider.pf-m-horizontal-on-md {
2911
- flex-direction: row;
2912
- width: 100%;
2913
- height: var(--pf-v6-c-divider--Size);
2914
- }
2915
- }
2916
- @media (min-width: 48rem) {
2917
- .pf-v6-c-divider.pf-m-vertical-on-md {
2918
- flex-direction: column;
2919
- width: var(--pf-v6-c-divider--Size);
2920
- height: inherit;
2921
- }
2922
- }
2923
- @media (min-width: 48rem) {
2924
- .pf-v6-c-divider.pf-m-inset-none-on-md {
2925
- --pf-v6-c-divider--before--FlexBasis: 100%;
2926
- }
2927
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
2928
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2929
- }
2930
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
2931
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2932
- }
2933
- .pf-v6-c-divider.pf-m-inset-md-on-md {
2934
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2935
- }
2936
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
2937
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2938
- }
2939
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
2940
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2941
- }
2942
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2943
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2944
- }
2945
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2946
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2947
- }
2948
- }
2949
- @media (min-width: 62rem) {
2950
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
2951
- flex-direction: row;
2952
- width: 100%;
2953
- height: var(--pf-v6-c-divider--Size);
2954
- }
2955
- }
2956
- @media (min-width: 62rem) {
2957
- .pf-v6-c-divider.pf-m-vertical-on-lg {
2958
- flex-direction: column;
2959
- width: var(--pf-v6-c-divider--Size);
2960
- height: inherit;
2961
- }
2962
- }
2963
- @media (min-width: 62rem) {
2964
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
2965
- --pf-v6-c-divider--before--FlexBasis: 100%;
2966
- }
2967
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2968
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2969
- }
2970
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2971
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2972
- }
2973
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
2974
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2975
- }
2976
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2977
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2978
- }
2979
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2980
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2981
- }
2982
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2983
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2984
- }
2985
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2986
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2987
- }
2988
- }
2989
- @media (min-width: 75rem) {
2990
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
2991
- flex-direction: row;
2992
- width: 100%;
2993
- height: var(--pf-v6-c-divider--Size);
2994
- }
2995
- }
2996
- @media (min-width: 75rem) {
2997
- .pf-v6-c-divider.pf-m-vertical-on-xl {
2998
- flex-direction: column;
2999
- width: var(--pf-v6-c-divider--Size);
3000
- height: inherit;
3001
- }
3002
- }
3003
- @media (min-width: 75rem) {
3004
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
3005
- --pf-v6-c-divider--before--FlexBasis: 100%;
3006
- }
3007
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
3008
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
3009
- }
3010
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
3011
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
3012
- }
3013
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
3014
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
3015
- }
3016
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
3017
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
3018
- }
3019
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
3020
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
3021
- }
3022
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
3023
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3024
- }
3025
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
3026
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3027
- }
3028
- }
3029
- @media (min-width: 90.625rem) {
3030
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
3031
- flex-direction: row;
3032
- width: 100%;
3033
- height: var(--pf-v6-c-divider--Size);
3034
- }
3035
- }
3036
- @media (min-width: 90.625rem) {
3037
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
3038
- flex-direction: column;
3039
- width: var(--pf-v6-c-divider--Size);
3040
- height: inherit;
3041
- }
3052
+ .pf-v6-c-label-group__textarea {
3053
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
3054
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
3055
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
3056
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
3057
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
3058
+ white-space: nowrap;
3059
+ resize: none;
3060
+ scrollbar-width: none;
3061
+ -ms-overflow-style: none;
3062
+ border: 0;
3042
3063
  }
3043
- @media (min-width: 90.625rem) {
3044
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
3045
- --pf-v6-c-divider--before--FlexBasis: 100%;
3046
- }
3047
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
3048
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
3049
- }
3050
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
3051
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
3052
- }
3053
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
3054
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
3055
- }
3056
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
3057
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
3058
- }
3059
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
3060
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
3061
- }
3062
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
3063
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3064
- }
3065
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
3066
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3067
- }
3064
+
3065
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
3066
+ display: none;
3068
3067
  }
3068
+
3069
3069
  .pf-v6-c-menu {
3070
3070
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--xs);
3071
3071
  --pf-v6-c-menu--Width: auto;