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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +1 -37
  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-DSAeSDFl.css → output-bz9IngSo.css} +792 -792
  6. package/dist/umd/react-templates.min.js +1 -1
  7. package/package.json +3 -3
package/dist/umd/assets/{output-DSAeSDFl.css → output-bz9IngSo.css} RENAMED
@@ -3,332 +3,6 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-check {
7
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
8
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
9
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
10
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
11
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
12
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
13
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
14
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
15
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
16
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
17
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
18
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
19
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
20
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
21
- }
22
-
23
- .pf-v6-c-check {
24
- display: grid;
25
- grid-template-columns: auto 1fr;
26
- grid-gap: var(--pf-v6-c-check--GridGap);
27
- accent-color: var(--pf-v6-c-check--AccentColor);
28
- }
29
-
30
- .pf-v6-c-check.pf-m-standalone {
31
- display: inline-grid;
32
- grid-template-columns: auto;
33
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
34
- }
35
-
36
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
37
- align-self: center;
38
- transform: none;
39
- }
40
-
41
- .pf-v6-c-check__input {
42
- align-self: start;
43
- font-size: var(--pf-v6-c-check__label--FontSize);
44
- line-height: var(--pf-v6-c-check__label--LineHeight);
45
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
46
- }
47
-
48
- .pf-v6-c-check__label {
49
- font-size: var(--pf-v6-c-check__label--FontSize);
50
- font-weight: var(--pf-v6-c-check__label--FontWeight);
51
- line-height: var(--pf-v6-c-check__label--LineHeight);
52
- color: var(--pf-v6-c-check__label--Color);
53
- }
54
-
55
- .pf-v6-c-check__description {
56
- grid-column: 2;
57
- font-size: var(--pf-v6-c-check__description--FontSize);
58
- color: var(--pf-v6-c-check__description--Color);
59
- }
60
-
61
- .pf-v6-c-check__body {
62
- grid-column: 2;
63
- }
64
-
65
- .pf-v6-c-check__label,
66
- .pf-v6-c-check__input {
67
- justify-self: start;
68
- }
69
-
70
- label.pf-v6-c-check, .pf-v6-c-check__label,
71
- .pf-v6-c-check__input {
72
- cursor: pointer;
73
- }
74
-
75
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
76
- .pf-v6-c-check__input:disabled,
77
- .pf-v6-c-check__input.pf-m-disabled {
78
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
79
- cursor: not-allowed;
80
- }
81
-
82
- .pf-v6-c-check__label-required {
83
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
84
- font-size: var(--pf-v6-c-check__label-required--FontSize);
85
- color: var(--pf-v6-c-check__label-required--Color);
86
- }
87
-
88
- .pf-v6-c-text-input-group {
89
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
90
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
91
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
92
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
93
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
94
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
95
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
96
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
97
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
98
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
99
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
100
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
101
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
102
- --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));
103
- --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));
104
- --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));
105
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
106
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
107
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
108
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
109
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
110
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
111
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
112
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
113
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
114
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
115
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
116
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
117
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
118
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
119
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
120
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
121
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
122
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
123
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
124
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
125
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
126
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
127
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
128
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
129
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
130
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
131
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
132
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
133
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
134
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
135
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
136
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
137
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
138
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
139
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
140
- }
141
-
142
- .pf-v6-c-text-input-group {
143
- position: relative;
144
- display: flex;
145
- width: 100%;
146
- font-size: var(--pf-v6-c-text-input-group__FontSize);
147
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
148
- color: var(--pf-v6-c-text-input-group--Color, inherit);
149
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
150
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
151
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
152
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
153
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
154
- }
155
-
156
- .pf-v6-c-text-input-group::before {
157
- position: absolute;
158
- inset: 0;
159
- pointer-events: none;
160
- content: "";
161
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
162
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
163
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
164
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
165
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
166
- }
167
-
168
- .pf-v6-c-text-input-group.pf-m-disabled {
169
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
170
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
171
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
172
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
173
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
174
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
175
- pointer-events: none;
176
- }
177
-
178
- .pf-v6-c-text-input-group.pf-m-plain {
179
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
180
- }
181
-
182
- .pf-v6-c-text-input-group.pf-m-plain::before {
183
- border: 0;
184
- }
185
-
186
- .pf-v6-c-text-input-group.pf-m-success {
187
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
188
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
189
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
190
- }
191
-
192
- .pf-v6-c-text-input-group.pf-m-warning {
193
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
194
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
195
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
196
- }
197
-
198
- .pf-v6-c-text-input-group.pf-m-error {
199
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
200
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
201
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
202
- }
203
-
204
- @media (prefers-reduced-motion: no-preference) {
205
- .pf-v6-c-text-input-group.pf-m-error {
206
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
207
- animation-name: pf-v6-global-danger-jiggle-motion;
208
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
209
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
210
- animation-fill-mode: both;
211
- }
212
- }
213
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
214
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
215
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
216
- animation-name: pf-v6-global-fade-in;
217
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
218
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
219
- }
220
-
221
- .pf-v6-c-text-input-group:hover {
222
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
223
- }
224
-
225
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
226
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
227
- }
228
-
229
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
230
- --pf-v6-c-text-input-group__text--Position: relative;
231
- }
232
-
233
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
234
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
235
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
236
- }
237
-
238
- .pf-v6-c-text-input-group__main {
239
- display: flex;
240
- flex: 1;
241
- flex-wrap: wrap;
242
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
243
- min-width: 0;
244
- }
245
-
246
- .pf-v6-c-text-input-group__main.pf-m-icon {
247
- --pf-v6-c-text-input-group__text--Position: relative;
248
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
249
- display: inline-flex;
250
- align-items: center;
251
- justify-content: center;
252
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
253
- }
254
-
255
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
256
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
257
- }
258
-
259
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
260
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
261
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
262
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
263
- }
264
-
265
- .pf-v6-c-text-input-group__text {
266
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
267
- display: inline-grid;
268
- flex: 1;
269
- grid-template-areas: "text-input";
270
- grid-template-columns: 1fr;
271
- }
272
-
273
- .pf-v6-c-text-input-group__icon {
274
- position: absolute;
275
- inset-block-start: 50%;
276
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
277
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
278
- color: var(--pf-v6-c-text-input-group__icon--Color);
279
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
280
- }
281
-
282
- .pf-v6-c-text-input-group__icon.pf-m-status {
283
- inset-inline-start: auto;
284
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
285
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
286
- }
287
-
288
- .pf-v6-c-text-input-group__text-input {
289
- overflow: hidden;
290
- text-overflow: ellipsis;
291
- white-space: nowrap;
292
- position: relative;
293
- width: 100%;
294
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
295
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
296
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
297
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
298
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
299
- color: var(--pf-v6-c-text-input-group__text-input--Color);
300
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
301
- border: 0;
302
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
303
- }
304
-
305
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
306
- grid-area: text-input;
307
- }
308
-
309
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
310
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
311
- }
312
-
313
- .pf-v6-c-text-input-group__text-input::placeholder {
314
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
315
- }
316
-
317
- .pf-v6-c-text-input-group__utilities {
318
- display: flex;
319
- align-items: center;
320
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
321
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
322
- }
323
-
324
- .pf-v6-c-text-input-group__utilities > * + * {
325
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
326
- }
327
-
328
- .pf-v6-c-text-input-group__group {
329
- display: flex;
330
- }
331
-
332
6
  .pf-v6-c-menu-toggle {
333
7
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
334
8
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -882,244 +556,13 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
882
556
  margin-inline-start: auto;
883
557
  }
884
558
 
885
- .pf-v6-c-menu-toggle__toggle-icon {
886
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
887
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
888
- }
889
-
890
- .pf-v6-c-menu-toggle__status-icon {
891
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
892
- }
893
-
894
- .pf-v6-c-badge {
895
- --pf-v6-c-badge--BorderColor: transparent;
896
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
897
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
898
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
899
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
900
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
901
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
902
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
903
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
904
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
905
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
906
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
907
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
908
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
909
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
910
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
911
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
912
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
913
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
914
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
915
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
916
- }
917
-
918
- .pf-v6-c-badge {
919
- position: relative;
920
- display: inline-block;
921
- min-width: var(--pf-v6-c-badge--MinWidth);
922
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
923
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
924
- font-size: var(--pf-v6-c-badge--FontSize);
925
- font-weight: var(--pf-v6-c-badge--FontWeight);
926
- color: var(--pf-v6-c-badge--Color);
927
- text-align: center;
928
- white-space: nowrap;
929
- background-color: var(--pf-v6-c-badge--BackgroundColor);
930
- border-radius: var(--pf-v6-c-badge--BorderRadius);
931
- }
932
-
933
- .pf-v6-c-badge::after {
934
- position: absolute;
935
- inset: 0;
936
- pointer-events: none;
937
- content: "";
938
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
939
- border-radius: inherit;
940
- }
941
-
942
- .pf-v6-c-badge.pf-m-read {
943
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
944
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
945
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
946
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
947
- }
948
-
949
- .pf-v6-c-badge.pf-m-unread {
950
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
951
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
952
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
953
- }
954
-
955
- .pf-v6-c-badge.pf-m-disabled {
956
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
957
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
958
- }
959
-
960
- .pf-v6-c-badge.pf-m-disabled::after {
961
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
962
- }
963
-
964
- .pf-v6-c-badge__toggle-icon {
965
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
966
- color: var(--pf-v6-c-badge__toggle-icon--Color);
967
- }
968
-
969
- .pf-v6-c-label-group {
970
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
971
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
972
- --pf-v6-c-label-group--MaxWidth: 100%;
973
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
974
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
975
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
976
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
977
- --pf-v6-c-label-group__main--MaxWidth: 100%;
978
- --pf-v6-c-label-group__main--MinWidth: 0;
979
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
980
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
981
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
982
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
983
- --pf-v6-c-label-group__list--MaxWidth: 100%;
984
- --pf-v6-c-label-group__list--MinWidth: 0;
985
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
986
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
987
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
988
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
989
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
990
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
991
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
992
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
993
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
994
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
995
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
996
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
997
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
998
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
999
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1000
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1001
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1002
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1003
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1004
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1005
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1006
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1007
- }
1008
-
1009
- .pf-v6-c-label-group {
1010
- display: inline-flex;
1011
- row-gap: var(--pf-v6-c-label-group--RowGap);
1012
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1013
- align-items: center;
1014
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1015
- }
1016
-
1017
- .pf-v6-c-label-group.pf-m-category {
1018
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1019
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1020
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1021
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1022
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1023
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1024
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1025
- }
1026
-
1027
- .pf-v6-c-label-group.pf-m-vertical {
1028
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1029
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1030
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1031
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1032
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1033
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1034
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1035
- }
1036
-
1037
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1038
- align-items: flex-start;
1039
- }
1040
-
1041
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1042
- flex-direction: column;
1043
- align-items: flex-start;
1044
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1045
- }
1046
-
1047
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1048
- flex-direction: column;
1049
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1050
- }
1051
-
1052
- .pf-v6-c-label-group.pf-m-editable,
1053
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1054
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1055
- display: flex;
1056
- }
1057
-
1058
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1059
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1060
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1061
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1062
- flex: 1;
1063
- }
1064
-
1065
- .pf-v6-c-label-group__main {
1066
- display: flex;
1067
- flex: 1;
1068
- flex-wrap: wrap;
1069
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1070
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1071
- align-items: baseline;
1072
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1073
- }
1074
-
1075
- .pf-v6-c-label-group__list {
1076
- display: inline-flex;
1077
- flex-wrap: wrap;
1078
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1079
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1080
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1081
- }
1082
-
1083
- .pf-v6-c-label-group__list-item {
1084
- display: inline-flex;
1085
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1086
- }
1087
-
1088
- .pf-v6-c-label-group__label {
1089
- overflow: hidden;
1090
- text-overflow: ellipsis;
1091
- white-space: nowrap;
1092
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1093
- }
1094
-
1095
- .pf-v6-c-label-group__close {
1096
- display: flex;
1097
- align-self: flex-start;
1098
- }
1099
-
1100
- .pf-v6-c-label-group__close .pf-v6-c-button {
1101
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1102
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1103
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1104
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1105
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1106
- }
1107
-
1108
- .pf-v6-c-label-group__textarea {
1109
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1110
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1111
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1112
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1113
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1114
- white-space: nowrap;
1115
- resize: none;
1116
- border: 0;
1117
- -ms-overflow-style: none;
1118
- scrollbar-width: none;
559
+ .pf-v6-c-menu-toggle__toggle-icon {
560
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
561
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1119
562
  }
1120
563
 
1121
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1122
- display: none;
564
+ .pf-v6-c-menu-toggle__status-icon {
565
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1123
566
  }
1124
567
 
1125
568
  .pf-v6-c-label {
@@ -2325,241 +1768,554 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2325
1768
  transition-property: color;
2326
1769
  }
2327
1770
 
2328
- .pf-v6-c-button.pf-m-favorited {
2329
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
2330
- --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
2331
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
2332
- --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
2333
- --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
2334
- --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
1771
+ .pf-v6-c-button.pf-m-favorited {
1772
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
1773
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
1774
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
1775
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
1776
+ --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
1777
+ --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
1778
+ }
1779
+
1780
+ .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
1781
+ animation-name: pf-v6-c-button-icon-favorited;
1782
+ animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
1783
+ animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
1784
+ }
1785
+
1786
+ .pf-v6-c-button.pf-m-settings {
1787
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
1788
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
1789
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
1790
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
1791
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
1792
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
1793
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
1794
+ }
1795
+
1796
+ .pf-v6-c-button.pf-m-hamburger {
1797
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1798
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
1799
+ --pf-v6-c-button__icon--TransitionProperty: scale;
1800
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1801
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
1802
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
1803
+ }
1804
+
1805
+ .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
1806
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
1807
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
1808
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
1809
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
1810
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
1811
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
1812
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
1813
+ }
1814
+
1815
+ .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
1816
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
1817
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
1818
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
1819
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
1820
+ --pf-v6-c-button__icon--ScaleX: 1;
1821
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
1822
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
1823
+ }
1824
+
1825
+ .pf-v6-c-button:hover, .pf-v6-c-button:focus {
1826
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
1827
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
1828
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
1829
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
1830
+ --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
1831
+ --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
1832
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
1833
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
1834
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
1835
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
1836
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
1837
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
1838
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
1839
+ --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
1840
+ text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
1841
+ text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
1842
+ text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
1843
+ outline-offset: var(--pf-t--global--focus-ring--position--offset);
1844
+ }
1845
+
1846
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
1847
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
1848
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
1849
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
1850
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
1851
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
1852
+ }
1853
+
1854
+ .pf-v6-c-button:active {
1855
+ background-size: 100% 100%;
1856
+ transition-duration: 0s;
1857
+ }
1858
+
1859
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
1860
+ pointer-events: none;
1861
+ }
1862
+
1863
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
1864
+ color: var(--pf-v6-c-button--disabled--Color);
1865
+ text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
1866
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
1867
+ }
1868
+
1869
+ .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
1870
+ border-color: transparent;
1871
+ }
1872
+
1873
+ .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
1874
+ color: var(--pf-v6-c-button--disabled__icon--Color);
1875
+ }
1876
+
1877
+ .pf-v6-c-button.pf-m-aria-disabled {
1878
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
1879
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
1880
+ cursor: default;
1881
+ }
1882
+
1883
+ .pf-v6-c-button.pf-m-progress {
1884
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
1885
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
1886
+ }
1887
+
1888
+ .pf-v6-c-button.pf-m-in-progress {
1889
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
1890
+ }
1891
+
1892
+ .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
1893
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
1894
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
1895
+ }
1896
+
1897
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
1898
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
1899
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
1900
+ }
1901
+
1902
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
1903
+ opacity: 0;
1904
+ }
1905
+
1906
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
1907
+ animation-name: pf-v6-c-button-icon-notify;
1908
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
1909
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
1910
+ }
1911
+
1912
+ .pf-v6-c-button__icon {
1913
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
1914
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
1915
+ color: var(--pf-v6-c-button__icon--Color);
1916
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
1917
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
1918
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
1919
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
1920
+ rotate: var(--pf-v6-c-button__icon--Rotate);
1921
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
1922
+ }
1923
+
1924
+ .pf-v6-c-button__icon.pf-m-start {
1925
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
1926
+ }
1927
+
1928
+ .pf-v6-c-button__icon.pf-m-end {
1929
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
1930
+ }
1931
+
1932
+ .pf-v6-c-button__icon-favorite,
1933
+ .pf-v6-c-button__icon-favorited {
1934
+ grid-area: 1/1/1/1;
1935
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
1936
+ transition-property: opacity;
1937
+ }
1938
+
1939
+ .pf-v6-c-button__icon-favorite {
1940
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
1941
+ }
1942
+
1943
+ .pf-v6-c-button__icon-favorited {
1944
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
1945
+ }
1946
+
1947
+ .pf-v6-c-button__progress {
1948
+ position: absolute;
1949
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
1950
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
1951
+ line-height: 1;
1952
+ color: var(--pf-v6-c-button__progress--Color);
1953
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
1954
+ }
1955
+
1956
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
1957
+ --pf-v6-c-spinner--Color: currentcolor;
1958
+ }
1959
+
1960
+ .pf-v6-c-button__text {
1961
+ text-decoration: inherit;
1962
+ }
1963
+
1964
+ .pf-v6-c-button__count {
1965
+ display: inline-flex;
1966
+ align-items: center;
1967
+ }
1968
+
1969
+ .pf-v6-c-button--hamburger-icon path {
1970
+ fill: none;
1971
+ stroke: currentcolor;
1972
+ stroke-linecap: round;
1973
+ stroke-linejoin: round;
1974
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
1975
+ }
1976
+
1977
+ .pf-v6-c-button--hamburger-icon--top {
1978
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
1979
+ }
1980
+
1981
+ .pf-v6-c-button--hamburger-icon--middle {
1982
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
1983
+ }
1984
+
1985
+ .pf-v6-c-button--hamburger-icon--arrow {
1986
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
1987
+ }
1988
+
1989
+ .pf-v6-c-button--hamburger-icon--bottom {
1990
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
1991
+ }
1992
+
1993
+ @keyframes pf-v6-c-button-icon-notify {
1994
+ 33% {
1995
+ transform: rotate(30deg);
1996
+ }
1997
+ 66% {
1998
+ transform: rotate(-60deg);
1999
+ }
2000
+ }
2001
+ @keyframes pf-v6-c-button-icon-favorited {
2002
+ 50% {
2003
+ scale: 1.5;
2004
+ }
2005
+ }
2006
+ .pf-v6-c-label-group {
2007
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2008
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2009
+ --pf-v6-c-label-group--MaxWidth: 100%;
2010
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2011
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2012
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2013
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2014
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
2015
+ --pf-v6-c-label-group__main--MinWidth: 0;
2016
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2017
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2018
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2019
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2020
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
2021
+ --pf-v6-c-label-group__list--MinWidth: 0;
2022
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2023
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2024
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2025
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2026
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2027
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2028
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2029
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2030
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2031
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2032
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2033
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
2034
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2035
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2036
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2037
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2038
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2039
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2040
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2041
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2042
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2043
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2044
+ }
2045
+
2046
+ .pf-v6-c-label-group {
2047
+ display: inline-flex;
2048
+ row-gap: var(--pf-v6-c-label-group--RowGap);
2049
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
2050
+ align-items: center;
2051
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
2335
2052
  }
2336
2053
 
2337
- .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
2338
- animation-name: pf-v6-c-button-icon-favorited;
2339
- animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
2340
- animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
2054
+ .pf-v6-c-label-group.pf-m-category {
2055
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2056
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2057
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2058
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2059
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2060
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2061
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2341
2062
  }
2342
2063
 
2343
- .pf-v6-c-button.pf-m-settings {
2344
- --pf-v6-c-button__icon--TransitionProperty: rotate;
2345
- --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
2346
- --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
2347
- --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
2348
- --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
2349
- --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
2350
- --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
2064
+ .pf-v6-c-label-group.pf-m-vertical {
2065
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2066
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2067
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2068
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2069
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2070
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2071
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2351
2072
  }
2352
2073
 
2353
- .pf-v6-c-button.pf-m-hamburger {
2354
- --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
2355
- --pf-v6-c-button__icon--TransitionDuration: 0s;
2356
- --pf-v6-c-button__icon--TransitionProperty: scale;
2357
- --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
2358
- --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
2359
- --pf-v6-c-button--hover__icon--TransitionProperty: scale;
2074
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2075
+ align-items: flex-start;
2360
2076
  }
2361
2077
 
2362
- .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
2363
- --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
2364
- --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
2365
- --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
2366
- --pf-v6-c-button__icon--TransitionDelay: 0s;
2367
- --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
2368
- --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2369
- --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
2078
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2079
+ flex-direction: column;
2080
+ align-items: flex-start;
2081
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2370
2082
  }
2371
2083
 
2372
- .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
2373
- --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
2374
- --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
2375
- --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
2376
- --pf-v6-c-button__icon--TransitionDelay: 0s;
2377
- --pf-v6-c-button__icon--ScaleX: 1;
2378
- --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2379
- --pf-v6-c-button--hover__icon--ScaleX: 1;
2084
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2085
+ flex-direction: column;
2086
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2380
2087
  }
2381
2088
 
2382
- .pf-v6-c-button:hover, .pf-v6-c-button:focus {
2383
- --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
2384
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
2385
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
2386
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
2387
- --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
2388
- --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
2389
- --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
2390
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
2391
- --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
2392
- --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
2393
- --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
2394
- --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
2395
- --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
2396
- --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
2397
- text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
2398
- text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
2399
- text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
2400
- outline-offset: var(--pf-t--global--focus-ring--position--offset);
2089
+ .pf-v6-c-label-group.pf-m-editable,
2090
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2091
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2092
+ display: flex;
2401
2093
  }
2402
2094
 
2403
- .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
2404
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
2405
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
2406
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
2407
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
2408
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
2095
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2096
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2097
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2098
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2099
+ flex: 1;
2409
2100
  }
2410
2101
 
2411
- .pf-v6-c-button:active {
2412
- background-size: 100% 100%;
2413
- transition-duration: 0s;
2102
+ .pf-v6-c-label-group__main {
2103
+ display: flex;
2104
+ flex: 1;
2105
+ flex-wrap: wrap;
2106
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
2107
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2108
+ align-items: baseline;
2109
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2414
2110
  }
2415
2111
 
2416
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
2417
- pointer-events: none;
2112
+ .pf-v6-c-label-group__list {
2113
+ display: inline-flex;
2114
+ flex-wrap: wrap;
2115
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
2116
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2117
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2418
2118
  }
2419
2119
 
2420
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2421
- color: var(--pf-v6-c-button--disabled--Color);
2422
- text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2423
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
2120
+ .pf-v6-c-label-group__list-item {
2121
+ display: inline-flex;
2122
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2424
2123
  }
2425
2124
 
2426
- .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2427
- border-color: transparent;
2125
+ .pf-v6-c-label-group__label {
2126
+ overflow: hidden;
2127
+ text-overflow: ellipsis;
2128
+ white-space: nowrap;
2129
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2428
2130
  }
2429
2131
 
2430
- .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
2431
- color: var(--pf-v6-c-button--disabled__icon--Color);
2132
+ .pf-v6-c-label-group__close {
2133
+ display: flex;
2134
+ align-self: flex-start;
2432
2135
  }
2433
2136
 
2434
- .pf-v6-c-button.pf-m-aria-disabled {
2435
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
2436
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
2437
- cursor: default;
2137
+ .pf-v6-c-label-group__close .pf-v6-c-button {
2138
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2139
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2140
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2141
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2142
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2438
2143
  }
2439
2144
 
2440
- .pf-v6-c-button.pf-m-progress {
2441
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
2442
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
2145
+ .pf-v6-c-label-group__textarea {
2146
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2147
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2148
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2149
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2150
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2151
+ white-space: nowrap;
2152
+ resize: none;
2153
+ border: 0;
2154
+ -ms-overflow-style: none;
2155
+ scrollbar-width: none;
2443
2156
  }
2444
2157
 
2445
- .pf-v6-c-button.pf-m-in-progress {
2446
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2158
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2159
+ display: none;
2447
2160
  }
2448
2161
 
2449
- .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2450
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2451
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2162
+ .pf-v6-c-badge {
2163
+ --pf-v6-c-badge--BorderColor: transparent;
2164
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2165
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2166
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2167
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2168
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2169
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2170
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2171
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2172
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2173
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2174
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2175
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2176
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2177
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2178
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2179
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2180
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2181
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2182
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2183
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2452
2184
  }
2453
2185
 
2454
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2455
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2456
- --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2186
+ .pf-v6-c-badge {
2187
+ position: relative;
2188
+ display: inline-block;
2189
+ min-width: var(--pf-v6-c-badge--MinWidth);
2190
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2191
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2192
+ font-size: var(--pf-v6-c-badge--FontSize);
2193
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2194
+ color: var(--pf-v6-c-badge--Color);
2195
+ text-align: center;
2196
+ white-space: nowrap;
2197
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2198
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2457
2199
  }
2458
2200
 
2459
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2460
- opacity: 0;
2201
+ .pf-v6-c-badge::after {
2202
+ position: absolute;
2203
+ inset: 0;
2204
+ pointer-events: none;
2205
+ content: "";
2206
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2207
+ border-radius: inherit;
2461
2208
  }
2462
2209
 
2463
- .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2464
- animation-name: pf-v6-c-button-icon-notify;
2465
- animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2466
- animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2210
+ .pf-v6-c-badge.pf-m-read {
2211
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2212
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2213
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2214
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2467
2215
  }
2468
2216
 
2469
- .pf-v6-c-button__icon {
2470
- margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2471
- margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2472
- color: var(--pf-v6-c-button__icon--Color);
2473
- transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2474
- transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2475
- transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2476
- transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2477
- rotate: var(--pf-v6-c-button__icon--Rotate);
2478
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2217
+ .pf-v6-c-badge.pf-m-unread {
2218
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2219
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2220
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2479
2221
  }
2480
2222
 
2481
- .pf-v6-c-button__icon.pf-m-start {
2482
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2223
+ .pf-v6-c-badge.pf-m-disabled {
2224
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2225
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2483
2226
  }
2484
2227
 
2485
- .pf-v6-c-button__icon.pf-m-end {
2486
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2228
+ .pf-v6-c-badge.pf-m-disabled::after {
2229
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2487
2230
  }
2488
2231
 
2489
- .pf-v6-c-button__icon-favorite,
2490
- .pf-v6-c-button__icon-favorited {
2491
- grid-area: 1/1/1/1;
2492
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2493
- transition-property: opacity;
2232
+ .pf-v6-c-badge__toggle-icon {
2233
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2234
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2494
2235
  }
2495
2236
 
2496
- .pf-v6-c-button__icon-favorite {
2497
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2237
+ .pf-v6-c-check {
2238
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2239
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2240
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2241
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2242
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2243
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2244
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2245
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2246
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2247
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2248
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2249
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2250
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2251
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2498
2252
  }
2499
2253
 
2500
- .pf-v6-c-button__icon-favorited {
2501
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2254
+ .pf-v6-c-check {
2255
+ display: grid;
2256
+ grid-template-columns: auto 1fr;
2257
+ grid-gap: var(--pf-v6-c-check--GridGap);
2258
+ accent-color: var(--pf-v6-c-check--AccentColor);
2502
2259
  }
2503
2260
 
2504
- .pf-v6-c-button__progress {
2505
- position: absolute;
2506
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2507
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2508
- line-height: 1;
2509
- color: var(--pf-v6-c-button__progress--Color);
2510
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2261
+ .pf-v6-c-check.pf-m-standalone {
2262
+ display: inline-grid;
2263
+ grid-template-columns: auto;
2264
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2511
2265
  }
2512
2266
 
2513
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2514
- --pf-v6-c-spinner--Color: currentcolor;
2267
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2268
+ align-self: center;
2269
+ transform: none;
2515
2270
  }
2516
2271
 
2517
- .pf-v6-c-button__text {
2518
- text-decoration: inherit;
2272
+ .pf-v6-c-check__input {
2273
+ align-self: start;
2274
+ font-size: var(--pf-v6-c-check__label--FontSize);
2275
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2276
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2519
2277
  }
2520
2278
 
2521
- .pf-v6-c-button__count {
2522
- display: inline-flex;
2523
- align-items: center;
2279
+ .pf-v6-c-check__label {
2280
+ font-size: var(--pf-v6-c-check__label--FontSize);
2281
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
2282
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2283
+ color: var(--pf-v6-c-check__label--Color);
2524
2284
  }
2525
2285
 
2526
- .pf-v6-c-button--hamburger-icon path {
2527
- fill: none;
2528
- stroke: currentcolor;
2529
- stroke-linecap: round;
2530
- stroke-linejoin: round;
2531
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2286
+ .pf-v6-c-check__description {
2287
+ grid-column: 2;
2288
+ font-size: var(--pf-v6-c-check__description--FontSize);
2289
+ color: var(--pf-v6-c-check__description--Color);
2532
2290
  }
2533
2291
 
2534
- .pf-v6-c-button--hamburger-icon--top {
2535
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2292
+ .pf-v6-c-check__body {
2293
+ grid-column: 2;
2536
2294
  }
2537
2295
 
2538
- .pf-v6-c-button--hamburger-icon--middle {
2539
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2296
+ .pf-v6-c-check__label,
2297
+ .pf-v6-c-check__input {
2298
+ justify-self: start;
2540
2299
  }
2541
2300
 
2542
- .pf-v6-c-button--hamburger-icon--arrow {
2543
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2301
+ label.pf-v6-c-check, .pf-v6-c-check__label,
2302
+ .pf-v6-c-check__input {
2303
+ cursor: pointer;
2544
2304
  }
2545
2305
 
2546
- .pf-v6-c-button--hamburger-icon--bottom {
2547
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2306
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2307
+ .pf-v6-c-check__input:disabled,
2308
+ .pf-v6-c-check__input.pf-m-disabled {
2309
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2310
+ cursor: not-allowed;
2548
2311
  }
2549
2312
 
2550
- @keyframes pf-v6-c-button-icon-notify {
2551
- 33% {
2552
- transform: rotate(30deg);
2553
- }
2554
- 66% {
2555
- transform: rotate(-60deg);
2556
- }
2557
- }
2558
- @keyframes pf-v6-c-button-icon-favorited {
2559
- 50% {
2560
- scale: 1.5;
2561
- }
2313
+ .pf-v6-c-check__label-required {
2314
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2315
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
2316
+ color: var(--pf-v6-c-check__label-required--Color);
2562
2317
  }
2318
+
2563
2319
  .pf-v6-c-divider {
2564
2320
  --pf-v6-c-divider--Display: flex;
2565
2321
  --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
@@ -2878,93 +2634,250 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2878
2634
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2879
2635
  }
2880
2636
  }
2881
- .pf-v6-c-spinner {
2882
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
2883
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
2884
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
2885
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
2886
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
2887
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
2888
- --pf-v6-c-spinner--StrokeWidth: 10;
2889
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
2890
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
2891
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
2892
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
2893
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
2894
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
2895
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
2896
- --pf-v6-c-spinner--m-inline--diameter: 1em;
2637
+ .pf-v6-c-text-input-group {
2638
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2639
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
2640
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2641
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2642
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2643
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2644
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2645
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2646
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2647
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2648
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2649
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2650
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2651
+ --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));
2652
+ --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));
2653
+ --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));
2654
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2655
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2656
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
2657
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2658
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2659
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2660
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2661
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2662
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2663
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2664
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2665
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2666
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2667
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2668
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2669
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2670
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2671
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2672
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2673
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2674
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2675
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2676
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2677
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2678
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2679
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2680
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2681
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2682
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2683
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2684
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2685
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2686
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2687
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2688
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2689
+ }
2690
+
2691
+ .pf-v6-c-text-input-group {
2692
+ position: relative;
2693
+ display: flex;
2694
+ width: 100%;
2695
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
2696
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
2697
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
2698
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2699
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2700
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2701
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2702
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2703
+ }
2704
+
2705
+ .pf-v6-c-text-input-group::before {
2706
+ position: absolute;
2707
+ inset: 0;
2708
+ pointer-events: none;
2709
+ content: "";
2710
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2711
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2712
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2713
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2714
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2715
+ }
2716
+
2717
+ .pf-v6-c-text-input-group.pf-m-disabled {
2718
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2719
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2720
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2721
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2722
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2723
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2724
+ pointer-events: none;
2725
+ }
2726
+
2727
+ .pf-v6-c-text-input-group.pf-m-plain {
2728
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
2729
+ }
2730
+
2731
+ .pf-v6-c-text-input-group.pf-m-plain::before {
2732
+ border: 0;
2733
+ }
2734
+
2735
+ .pf-v6-c-text-input-group.pf-m-success {
2736
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2737
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2738
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2739
+ }
2740
+
2741
+ .pf-v6-c-text-input-group.pf-m-warning {
2742
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2743
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2744
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2745
+ }
2746
+
2747
+ .pf-v6-c-text-input-group.pf-m-error {
2748
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2749
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2750
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2751
+ }
2752
+
2753
+ @media (prefers-reduced-motion: no-preference) {
2754
+ .pf-v6-c-text-input-group.pf-m-error {
2755
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2756
+ animation-name: pf-v6-global-danger-jiggle-motion;
2757
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2758
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2759
+ animation-fill-mode: both;
2760
+ }
2761
+ }
2762
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2763
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2764
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2765
+ animation-name: pf-v6-global-fade-in;
2766
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2767
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2897
2768
  }
2898
2769
 
2899
- .pf-v6-c-spinner {
2900
- width: var(--pf-v6-c-spinner--Width);
2901
- height: var(--pf-v6-c-spinner--Height);
2902
- overflow: hidden;
2903
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
2770
+ .pf-v6-c-text-input-group:hover {
2771
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2904
2772
  }
2905
2773
 
2906
- .pf-v6-c-spinner.pf-m-inline {
2907
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
2774
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2775
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2908
2776
  }
2909
2777
 
2910
- .pf-v6-c-spinner.pf-m-xs {
2911
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
2912
- --pf-v6-c-spinner--StrokeWidth: 15;
2778
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2779
+ --pf-v6-c-text-input-group__text--Position: relative;
2913
2780
  }
2914
2781
 
2915
- .pf-v6-c-spinner.pf-m-sm {
2916
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
2782
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2783
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2784
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2917
2785
  }
2918
2786
 
2919
- .pf-v6-c-spinner.pf-m-md {
2920
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
2787
+ .pf-v6-c-text-input-group__main {
2788
+ display: flex;
2789
+ flex: 1;
2790
+ flex-wrap: wrap;
2791
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2792
+ min-width: 0;
2921
2793
  }
2922
2794
 
2923
- .pf-v6-c-spinner.pf-m-lg {
2924
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
2795
+ .pf-v6-c-text-input-group__main.pf-m-icon {
2796
+ --pf-v6-c-text-input-group__text--Position: relative;
2797
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2798
+ display: inline-flex;
2799
+ align-items: center;
2800
+ justify-content: center;
2801
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2925
2802
  }
2926
2803
 
2927
- .pf-v6-c-spinner.pf-m-xl {
2928
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
2804
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2805
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2929
2806
  }
2930
2807
 
2931
- .pf-v6-c-spinner__path {
2808
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2809
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2810
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2811
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2812
+ }
2813
+
2814
+ .pf-v6-c-text-input-group__text {
2815
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
2816
+ display: inline-grid;
2817
+ flex: 1;
2818
+ grid-template-areas: "text-input";
2819
+ grid-template-columns: 1fr;
2820
+ }
2821
+
2822
+ .pf-v6-c-text-input-group__icon {
2823
+ position: absolute;
2824
+ inset-block-start: 50%;
2825
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2826
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2827
+ color: var(--pf-v6-c-text-input-group__icon--Color);
2828
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2829
+ }
2830
+
2831
+ .pf-v6-c-text-input-group__icon.pf-m-status {
2832
+ inset-inline-start: auto;
2833
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2834
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2835
+ }
2836
+
2837
+ .pf-v6-c-text-input-group__text-input {
2838
+ overflow: hidden;
2839
+ text-overflow: ellipsis;
2840
+ white-space: nowrap;
2841
+ position: relative;
2932
2842
  width: 100%;
2933
- height: 100%;
2934
- stroke: var(--pf-v6-c-spinner--Color);
2935
- stroke-dasharray: 283;
2936
- stroke-dashoffset: 280;
2937
- stroke-linecap: round;
2938
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
2939
- transform-origin: 50% 50%;
2940
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
2843
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2844
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2845
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2846
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2847
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2848
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
2849
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2850
+ border: 0;
2851
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2941
2852
  }
2942
2853
 
2943
- @keyframes pf-v6-c-spinner-animation-rotate {
2944
- 0% {
2945
- transform: rotate(0deg);
2946
- }
2947
- 100% {
2948
- transform: rotate(360deg);
2949
- }
2854
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2855
+ grid-area: text-input;
2950
2856
  }
2951
- @keyframes pf-v6-c-spinner-animation-dash {
2952
- 0% {
2953
- stroke-dashoffset: 280;
2954
- transform: rotate(0);
2955
- }
2956
- 15% {
2957
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
2958
- }
2959
- 40% {
2960
- stroke-dasharray: 220;
2961
- stroke-dashoffset: 150;
2962
- }
2963
- 100% {
2964
- stroke-dashoffset: 280;
2965
- transform: rotate(720deg);
2966
- }
2857
+
2858
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
2859
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2860
+ }
2861
+
2862
+ .pf-v6-c-text-input-group__text-input::placeholder {
2863
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2864
+ }
2865
+
2866
+ .pf-v6-c-text-input-group__utilities {
2867
+ display: flex;
2868
+ align-items: center;
2869
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2870
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2967
2871
  }
2872
+
2873
+ .pf-v6-c-text-input-group__utilities > * + * {
2874
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2875
+ }
2876
+
2877
+ .pf-v6-c-text-input-group__group {
2878
+ display: flex;
2879
+ }
2880
+
2968
2881
  .pf-v6-c-menu {
2969
2882
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2970
2883
  --pf-v6-c-menu--Width: auto;
@@ -3765,6 +3678,93 @@ button.pf-v6-c-breadcrumb__link {
3765
3678
  display: none;
3766
3679
  }
3767
3680
 
3681
+ .pf-v6-c-spinner {
3682
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3683
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3684
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3685
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3686
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3687
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3688
+ --pf-v6-c-spinner--StrokeWidth: 10;
3689
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3690
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3691
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3692
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3693
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3694
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3695
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3696
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3697
+ }
3698
+
3699
+ .pf-v6-c-spinner {
3700
+ width: var(--pf-v6-c-spinner--Width);
3701
+ height: var(--pf-v6-c-spinner--Height);
3702
+ overflow: hidden;
3703
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3704
+ }
3705
+
3706
+ .pf-v6-c-spinner.pf-m-inline {
3707
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3708
+ }
3709
+
3710
+ .pf-v6-c-spinner.pf-m-xs {
3711
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3712
+ --pf-v6-c-spinner--StrokeWidth: 15;
3713
+ }
3714
+
3715
+ .pf-v6-c-spinner.pf-m-sm {
3716
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3717
+ }
3718
+
3719
+ .pf-v6-c-spinner.pf-m-md {
3720
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3721
+ }
3722
+
3723
+ .pf-v6-c-spinner.pf-m-lg {
3724
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3725
+ }
3726
+
3727
+ .pf-v6-c-spinner.pf-m-xl {
3728
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3729
+ }
3730
+
3731
+ .pf-v6-c-spinner__path {
3732
+ width: 100%;
3733
+ height: 100%;
3734
+ stroke: var(--pf-v6-c-spinner--Color);
3735
+ stroke-dasharray: 283;
3736
+ stroke-dashoffset: 280;
3737
+ stroke-linecap: round;
3738
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3739
+ transform-origin: 50% 50%;
3740
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3741
+ }
3742
+
3743
+ @keyframes pf-v6-c-spinner-animation-rotate {
3744
+ 0% {
3745
+ transform: rotate(0deg);
3746
+ }
3747
+ 100% {
3748
+ transform: rotate(360deg);
3749
+ }
3750
+ }
3751
+ @keyframes pf-v6-c-spinner-animation-dash {
3752
+ 0% {
3753
+ stroke-dashoffset: 280;
3754
+ transform: rotate(0);
3755
+ }
3756
+ 15% {
3757
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3758
+ }
3759
+ 40% {
3760
+ stroke-dasharray: 220;
3761
+ stroke-dashoffset: 150;
3762
+ }
3763
+ 100% {
3764
+ stroke-dashoffset: 280;
3765
+ transform: rotate(720deg);
3766
+ }
3767
+ }
3768
3768
  .pf-v6-c-tooltip {
3769
3769
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3770
3770
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);