@patternfly/react-templates 6.3.1-prerelease.13 → 6.3.1-prerelease.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-CsiNb5CC.css → output-C7WJC37z.css} +639 -638
  6. package/package.json +3 -3
package/dist/umd/assets/{output-CsiNb5CC.css → output-C7WJC37z.css} RENAMED
@@ -3,248 +3,86 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-text-input-group {
7
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
8
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
9
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
11
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
12
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
13
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
14
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
15
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
16
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
17
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
18
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
19
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
20
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
21
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
22
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
23
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
24
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
26
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
27
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
28
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
29
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
30
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
31
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
32
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
33
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
34
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
35
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
36
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
37
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
38
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
39
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
40
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
41
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
42
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
43
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
44
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
45
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
46
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
47
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
48
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
49
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
50
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
51
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
52
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
53
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
54
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
55
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
56
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
57
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
58
- }
59
-
60
- .pf-v6-c-text-input-group {
61
- position: relative;
62
- display: flex;
63
- width: 100%;
64
- font-size: var(--pf-v6-c-text-input-group__FontSize);
65
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
66
- color: var(--pf-v6-c-text-input-group--Color, inherit);
67
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
68
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
69
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
70
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
71
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
72
- }
73
-
74
- .pf-v6-c-text-input-group::before {
75
- position: absolute;
76
- inset: 0;
77
- pointer-events: none;
78
- content: "";
79
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
80
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
81
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
82
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
83
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
84
- }
85
-
86
- .pf-v6-c-text-input-group.pf-m-disabled {
87
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
88
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
89
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
90
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
91
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
92
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
93
- pointer-events: none;
94
- }
95
-
96
- .pf-v6-c-text-input-group.pf-m-plain {
97
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
98
- }
99
-
100
- .pf-v6-c-text-input-group.pf-m-plain::before {
101
- border: 0;
102
- }
103
-
104
- .pf-v6-c-text-input-group.pf-m-success {
105
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
106
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
107
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
108
- }
109
-
110
- .pf-v6-c-text-input-group.pf-m-warning {
111
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
112
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
113
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
114
- }
115
-
116
- .pf-v6-c-text-input-group.pf-m-error {
117
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
118
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
119
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
120
- }
121
-
122
- @media (prefers-reduced-motion: no-preference) {
123
- .pf-v6-c-text-input-group.pf-m-error {
124
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
125
- animation-name: pf-v6-global-danger-jiggle-motion;
126
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
127
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
128
- animation-fill-mode: both;
129
- }
130
- }
131
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
132
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
133
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
134
- animation-name: pf-v6-global-fade-in;
135
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
136
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
137
- }
138
-
139
- .pf-v6-c-text-input-group:hover {
140
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
141
- }
142
-
143
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
144
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
145
- }
146
-
147
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
148
- --pf-v6-c-text-input-group__text--Position: relative;
149
- }
150
-
151
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
152
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
153
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
154
- }
155
-
156
- .pf-v6-c-text-input-group__main {
157
- display: flex;
158
- flex: 1;
159
- flex-wrap: wrap;
160
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
161
- min-width: 0;
162
- }
163
-
164
- .pf-v6-c-text-input-group__main.pf-m-icon {
165
- --pf-v6-c-text-input-group__text--Position: relative;
166
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
167
- display: inline-flex;
168
- align-items: center;
169
- justify-content: center;
170
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
171
- }
172
-
173
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
174
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
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%);
175
21
  }
176
22
 
177
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
178
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
179
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
180
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
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);
181
28
  }
182
29
 
183
- .pf-v6-c-text-input-group__text {
184
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
30
+ .pf-v6-c-check.pf-m-standalone {
185
31
  display: inline-grid;
186
- flex: 1;
187
- grid-template-areas: "text-input";
188
- grid-template-columns: 1fr;
32
+ grid-template-columns: auto;
33
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
189
34
  }
190
35
 
191
- .pf-v6-c-text-input-group__icon {
192
- position: absolute;
193
- inset-block-start: 50%;
194
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
195
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
196
- color: var(--pf-v6-c-text-input-group__icon--Color);
197
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
36
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
37
+ align-self: center;
38
+ transform: none;
198
39
  }
199
40
 
200
- .pf-v6-c-text-input-group__icon.pf-m-status {
201
- inset-inline-start: auto;
202
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
203
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
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));
204
46
  }
205
47
 
206
- .pf-v6-c-text-input-group__text-input {
207
- overflow: hidden;
208
- text-overflow: ellipsis;
209
- white-space: nowrap;
210
- position: relative;
211
- width: 100%;
212
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
213
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
214
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
215
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
216
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
217
- color: var(--pf-v6-c-text-input-group__text-input--Color);
218
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
219
- border: 0;
220
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
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);
221
53
  }
222
54
 
223
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
224
- grid-area: text-input;
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);
225
59
  }
226
60
 
227
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
228
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
61
+ .pf-v6-c-check__body {
62
+ grid-column: 2;
229
63
  }
230
64
 
231
- .pf-v6-c-text-input-group__text-input::placeholder {
232
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
65
+ .pf-v6-c-check__label,
66
+ .pf-v6-c-check__input {
67
+ justify-self: start;
233
68
  }
234
69
 
235
- .pf-v6-c-text-input-group__utilities {
236
- display: flex;
237
- align-items: center;
238
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
239
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
70
+ label.pf-v6-c-check, .pf-v6-c-check__label,
71
+ .pf-v6-c-check__input {
72
+ cursor: pointer;
240
73
  }
241
74
 
242
- .pf-v6-c-text-input-group__utilities > * + * {
243
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
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;
244
80
  }
245
81
 
246
- .pf-v6-c-text-input-group__group {
247
- display: flex;
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);
248
86
  }
249
87
 
250
88
  .pf-v6-c-divider {
@@ -559,241 +397,10 @@
559
397
  .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
560
398
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
561
399
  }
562
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
563
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
564
- }
565
- }
566
- .pf-v6-c-badge {
567
- --pf-v6-c-badge--BorderColor: transparent;
568
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
569
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
570
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
571
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
572
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
573
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
574
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
575
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
576
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
577
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
578
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
579
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
580
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
581
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
582
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
583
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
584
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
585
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
586
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
587
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
588
- }
589
-
590
- .pf-v6-c-badge {
591
- position: relative;
592
- display: inline-block;
593
- min-width: var(--pf-v6-c-badge--MinWidth);
594
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
595
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
596
- font-size: var(--pf-v6-c-badge--FontSize);
597
- font-weight: var(--pf-v6-c-badge--FontWeight);
598
- color: var(--pf-v6-c-badge--Color);
599
- text-align: center;
600
- white-space: nowrap;
601
- background-color: var(--pf-v6-c-badge--BackgroundColor);
602
- border-radius: var(--pf-v6-c-badge--BorderRadius);
603
- }
604
-
605
- .pf-v6-c-badge::after {
606
- position: absolute;
607
- inset: 0;
608
- pointer-events: none;
609
- content: "";
610
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
611
- border-radius: inherit;
612
- }
613
-
614
- .pf-v6-c-badge.pf-m-read {
615
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
616
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
617
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
618
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
619
- }
620
-
621
- .pf-v6-c-badge.pf-m-unread {
622
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
623
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
624
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
625
- }
626
-
627
- .pf-v6-c-badge.pf-m-disabled {
628
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
629
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
630
- }
631
-
632
- .pf-v6-c-badge.pf-m-disabled::after {
633
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
634
- }
635
-
636
- .pf-v6-c-badge__toggle-icon {
637
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
638
- color: var(--pf-v6-c-badge__toggle-icon--Color);
639
- }
640
-
641
- .pf-v6-c-label-group {
642
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
643
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
644
- --pf-v6-c-label-group--MaxWidth: 100%;
645
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
646
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
647
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
648
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
649
- --pf-v6-c-label-group__main--MaxWidth: 100%;
650
- --pf-v6-c-label-group__main--MinWidth: 0;
651
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
652
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
653
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
654
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
655
- --pf-v6-c-label-group__list--MaxWidth: 100%;
656
- --pf-v6-c-label-group__list--MinWidth: 0;
657
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
658
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
659
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
660
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
661
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
662
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
663
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
664
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
665
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
666
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
667
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
668
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
669
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
670
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
671
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
672
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
673
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
674
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
675
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
676
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
677
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
678
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
679
- }
680
-
681
- .pf-v6-c-label-group {
682
- display: inline-flex;
683
- row-gap: var(--pf-v6-c-label-group--RowGap);
684
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
685
- align-items: center;
686
- max-width: var(--pf-v6-c-label-group--MaxWidth);
687
- }
688
-
689
- .pf-v6-c-label-group.pf-m-category {
690
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
691
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
692
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
693
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
694
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
695
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
696
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
697
- }
698
-
699
- .pf-v6-c-label-group.pf-m-vertical {
700
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
701
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
702
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
703
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
704
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
705
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
706
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
707
- }
708
-
709
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
710
- align-items: flex-start;
711
- }
712
-
713
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
714
- flex-direction: column;
715
- align-items: flex-start;
716
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
717
- }
718
-
719
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
720
- flex-direction: column;
721
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
722
- }
723
-
724
- .pf-v6-c-label-group.pf-m-editable,
725
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
726
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
727
- display: flex;
728
- }
729
-
730
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
731
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
732
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
733
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
734
- flex: 1;
735
- }
736
-
737
- .pf-v6-c-label-group__main {
738
- display: flex;
739
- flex: 1;
740
- flex-wrap: wrap;
741
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
742
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
743
- align-items: baseline;
744
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
745
- }
746
-
747
- .pf-v6-c-label-group__list {
748
- display: inline-flex;
749
- flex-wrap: wrap;
750
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
751
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
752
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
753
- }
754
-
755
- .pf-v6-c-label-group__list-item {
756
- display: inline-flex;
757
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
758
- }
759
-
760
- .pf-v6-c-label-group__label {
761
- overflow: hidden;
762
- text-overflow: ellipsis;
763
- white-space: nowrap;
764
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
765
- }
766
-
767
- .pf-v6-c-label-group__close {
768
- display: flex;
769
- align-self: flex-start;
770
- }
771
-
772
- .pf-v6-c-label-group__close .pf-v6-c-button {
773
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
774
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
775
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
776
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
777
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
778
- }
779
-
780
- .pf-v6-c-label-group__textarea {
781
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
782
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
783
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
784
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
785
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
786
- white-space: nowrap;
787
- resize: none;
788
- border: 0;
789
- -ms-overflow-style: none;
790
- scrollbar-width: none;
791
- }
792
-
793
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
794
- display: none;
400
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
401
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
402
+ }
795
403
  }
796
-
797
404
  .pf-v6-c-label {
798
405
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
799
406
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -1337,86 +944,235 @@ input.pf-v6-c-label__content {
1337
944
  --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1338
945
  }
1339
946
 
1340
- .pf-v6-c-check {
1341
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1342
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1343
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1344
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1345
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1346
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1347
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1348
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1349
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1350
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1351
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1352
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1353
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1354
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
947
+ .pf-v6-c-badge {
948
+ --pf-v6-c-badge--BorderColor: transparent;
949
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
950
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
951
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
952
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
953
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
954
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
955
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
956
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
957
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
958
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
959
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
960
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
961
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
962
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
963
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
964
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
965
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
966
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
967
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
968
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1355
969
  }
1356
970
 
1357
- .pf-v6-c-check {
1358
- display: grid;
1359
- grid-template-columns: auto 1fr;
1360
- grid-gap: var(--pf-v6-c-check--GridGap);
1361
- accent-color: var(--pf-v6-c-check--AccentColor);
971
+ .pf-v6-c-badge {
972
+ position: relative;
973
+ display: inline-block;
974
+ min-width: var(--pf-v6-c-badge--MinWidth);
975
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
976
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
977
+ font-size: var(--pf-v6-c-badge--FontSize);
978
+ font-weight: var(--pf-v6-c-badge--FontWeight);
979
+ color: var(--pf-v6-c-badge--Color);
980
+ text-align: center;
981
+ white-space: nowrap;
982
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
983
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
1362
984
  }
1363
985
 
1364
- .pf-v6-c-check.pf-m-standalone {
1365
- display: inline-grid;
1366
- grid-template-columns: auto;
1367
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
986
+ .pf-v6-c-badge::after {
987
+ position: absolute;
988
+ inset: 0;
989
+ pointer-events: none;
990
+ content: "";
991
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
992
+ border-radius: inherit;
1368
993
  }
1369
994
 
1370
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1371
- align-self: center;
1372
- transform: none;
995
+ .pf-v6-c-badge.pf-m-read {
996
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
997
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
998
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
999
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1373
1000
  }
1374
1001
 
1375
- .pf-v6-c-check__input {
1376
- align-self: start;
1377
- font-size: var(--pf-v6-c-check__label--FontSize);
1378
- line-height: var(--pf-v6-c-check__label--LineHeight);
1379
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1002
+ .pf-v6-c-badge.pf-m-unread {
1003
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1004
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1005
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1380
1006
  }
1381
1007
 
1382
- .pf-v6-c-check__label {
1383
- font-size: var(--pf-v6-c-check__label--FontSize);
1384
- font-weight: var(--pf-v6-c-check__label--FontWeight);
1385
- line-height: var(--pf-v6-c-check__label--LineHeight);
1386
- color: var(--pf-v6-c-check__label--Color);
1008
+ .pf-v6-c-badge.pf-m-disabled {
1009
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1010
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1387
1011
  }
1388
1012
 
1389
- .pf-v6-c-check__description {
1390
- grid-column: 2;
1391
- font-size: var(--pf-v6-c-check__description--FontSize);
1392
- color: var(--pf-v6-c-check__description--Color);
1013
+ .pf-v6-c-badge.pf-m-disabled::after {
1014
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1393
1015
  }
1394
1016
 
1395
- .pf-v6-c-check__body {
1396
- grid-column: 2;
1017
+ .pf-v6-c-badge__toggle-icon {
1018
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1019
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
1397
1020
  }
1398
1021
 
1399
- .pf-v6-c-check__label,
1400
- .pf-v6-c-check__input {
1401
- justify-self: start;
1022
+ .pf-v6-c-label-group {
1023
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1024
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1025
+ --pf-v6-c-label-group--MaxWidth: 100%;
1026
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1027
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1028
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1029
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1030
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
1031
+ --pf-v6-c-label-group__main--MinWidth: 0;
1032
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1033
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1034
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1035
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1036
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
1037
+ --pf-v6-c-label-group__list--MinWidth: 0;
1038
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1039
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1040
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1041
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1042
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1043
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1044
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1045
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1046
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1047
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1048
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1049
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1050
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1051
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1052
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1053
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1054
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1055
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1056
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1057
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1058
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1059
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1402
1060
  }
1403
1061
 
1404
- label.pf-v6-c-check, .pf-v6-c-check__label,
1405
- .pf-v6-c-check__input {
1406
- cursor: pointer;
1062
+ .pf-v6-c-label-group {
1063
+ display: inline-flex;
1064
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1065
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1066
+ align-items: center;
1067
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1407
1068
  }
1408
1069
 
1409
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1410
- .pf-v6-c-check__input:disabled,
1411
- .pf-v6-c-check__input.pf-m-disabled {
1412
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1413
- cursor: not-allowed;
1070
+ .pf-v6-c-label-group.pf-m-category {
1071
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1072
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1073
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1074
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1075
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1076
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1077
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1078
+ }
1079
+
1080
+ .pf-v6-c-label-group.pf-m-vertical {
1081
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1082
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1083
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1084
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1085
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1086
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1087
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1088
+ }
1089
+
1090
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1091
+ align-items: flex-start;
1092
+ }
1093
+
1094
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1095
+ flex-direction: column;
1096
+ align-items: flex-start;
1097
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1098
+ }
1099
+
1100
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1101
+ flex-direction: column;
1102
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1103
+ }
1104
+
1105
+ .pf-v6-c-label-group.pf-m-editable,
1106
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1107
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1108
+ display: flex;
1109
+ }
1110
+
1111
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1112
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1113
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1114
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1115
+ flex: 1;
1116
+ }
1117
+
1118
+ .pf-v6-c-label-group__main {
1119
+ display: flex;
1120
+ flex: 1;
1121
+ flex-wrap: wrap;
1122
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1123
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1124
+ align-items: baseline;
1125
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1126
+ }
1127
+
1128
+ .pf-v6-c-label-group__list {
1129
+ display: inline-flex;
1130
+ flex-wrap: wrap;
1131
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1132
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1133
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1134
+ }
1135
+
1136
+ .pf-v6-c-label-group__list-item {
1137
+ display: inline-flex;
1138
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1139
+ }
1140
+
1141
+ .pf-v6-c-label-group__label {
1142
+ overflow: hidden;
1143
+ text-overflow: ellipsis;
1144
+ white-space: nowrap;
1145
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1146
+ }
1147
+
1148
+ .pf-v6-c-label-group__close {
1149
+ display: flex;
1150
+ align-self: flex-start;
1151
+ }
1152
+
1153
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1154
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1155
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1156
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1157
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1158
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1159
+ }
1160
+
1161
+ .pf-v6-c-label-group__textarea {
1162
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1163
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1164
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1165
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1166
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1167
+ white-space: nowrap;
1168
+ resize: none;
1169
+ border: 0;
1170
+ -ms-overflow-style: none;
1171
+ scrollbar-width: none;
1414
1172
  }
1415
1173
 
1416
- .pf-v6-c-check__label-required {
1417
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1418
- font-size: var(--pf-v6-c-check__label-required--FontSize);
1419
- color: var(--pf-v6-c-check__label-required--Color);
1174
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1175
+ display: none;
1420
1176
  }
1421
1177
 
1422
1178
  .pf-v6-c-menu-toggle {
@@ -2817,65 +2573,309 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2817
2573
  opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2818
2574
  }
2819
2575
 
2820
- .pf-v6-c-button__progress {
2576
+ .pf-v6-c-button__progress {
2577
+ position: absolute;
2578
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2579
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2580
+ line-height: 1;
2581
+ color: var(--pf-v6-c-button__progress--Color);
2582
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2583
+ }
2584
+
2585
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2586
+ --pf-v6-c-spinner--Color: currentcolor;
2587
+ }
2588
+
2589
+ .pf-v6-c-button__text {
2590
+ text-decoration: inherit;
2591
+ }
2592
+
2593
+ .pf-v6-c-button__count {
2594
+ display: inline-flex;
2595
+ align-items: center;
2596
+ }
2597
+
2598
+ .pf-v6-c-button--hamburger-icon path {
2599
+ fill: none;
2600
+ stroke: currentcolor;
2601
+ stroke-linecap: round;
2602
+ stroke-linejoin: round;
2603
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2604
+ }
2605
+
2606
+ .pf-v6-c-button--hamburger-icon--top {
2607
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2608
+ }
2609
+
2610
+ .pf-v6-c-button--hamburger-icon--middle {
2611
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2612
+ }
2613
+
2614
+ .pf-v6-c-button--hamburger-icon--arrow {
2615
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2616
+ }
2617
+
2618
+ .pf-v6-c-button--hamburger-icon--bottom {
2619
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2620
+ }
2621
+
2622
+ @keyframes pf-v6-c-button-icon-notify {
2623
+ 33% {
2624
+ transform: rotate(30deg);
2625
+ }
2626
+ 66% {
2627
+ transform: rotate(-60deg);
2628
+ }
2629
+ }
2630
+ @keyframes pf-v6-c-button-icon-favorited {
2631
+ 50% {
2632
+ scale: 1.5;
2633
+ }
2634
+ }
2635
+ .pf-v6-c-text-input-group {
2636
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2637
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
2638
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2639
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2640
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2641
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2642
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2643
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2644
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2645
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2646
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2647
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2648
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2649
+ --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));
2650
+ --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));
2651
+ --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));
2652
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2653
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2654
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
2655
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2656
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2657
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2658
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2659
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2660
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2661
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2662
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2663
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2664
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2665
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2666
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2667
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2668
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2669
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2670
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2671
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2672
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2673
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2674
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2675
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2676
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2677
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2678
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2679
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2680
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2681
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2682
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2683
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2684
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2685
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2686
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2687
+ }
2688
+
2689
+ .pf-v6-c-text-input-group {
2690
+ position: relative;
2691
+ display: flex;
2692
+ width: 100%;
2693
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
2694
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
2695
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
2696
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2697
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2698
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2699
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2700
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2701
+ }
2702
+
2703
+ .pf-v6-c-text-input-group::before {
2704
+ position: absolute;
2705
+ inset: 0;
2706
+ pointer-events: none;
2707
+ content: "";
2708
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2709
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2710
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2711
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2712
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2713
+ }
2714
+
2715
+ .pf-v6-c-text-input-group.pf-m-disabled {
2716
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2717
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2718
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2719
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2720
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2721
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2722
+ pointer-events: none;
2723
+ }
2724
+
2725
+ .pf-v6-c-text-input-group.pf-m-plain {
2726
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
2727
+ }
2728
+
2729
+ .pf-v6-c-text-input-group.pf-m-plain::before {
2730
+ border: 0;
2731
+ }
2732
+
2733
+ .pf-v6-c-text-input-group.pf-m-success {
2734
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2735
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2736
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2737
+ }
2738
+
2739
+ .pf-v6-c-text-input-group.pf-m-warning {
2740
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2741
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2742
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2743
+ }
2744
+
2745
+ .pf-v6-c-text-input-group.pf-m-error {
2746
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2747
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2748
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2749
+ }
2750
+
2751
+ @media (prefers-reduced-motion: no-preference) {
2752
+ .pf-v6-c-text-input-group.pf-m-error {
2753
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2754
+ animation-name: pf-v6-global-danger-jiggle-motion;
2755
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2756
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2757
+ animation-fill-mode: both;
2758
+ }
2759
+ }
2760
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2761
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2762
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2763
+ animation-name: pf-v6-global-fade-in;
2764
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2765
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2766
+ }
2767
+
2768
+ .pf-v6-c-text-input-group:hover {
2769
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2770
+ }
2771
+
2772
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2773
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2774
+ }
2775
+
2776
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2777
+ --pf-v6-c-text-input-group__text--Position: relative;
2778
+ }
2779
+
2780
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2781
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2782
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2783
+ }
2784
+
2785
+ .pf-v6-c-text-input-group__main {
2786
+ display: flex;
2787
+ flex: 1;
2788
+ flex-wrap: wrap;
2789
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2790
+ min-width: 0;
2791
+ }
2792
+
2793
+ .pf-v6-c-text-input-group__main.pf-m-icon {
2794
+ --pf-v6-c-text-input-group__text--Position: relative;
2795
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2796
+ display: inline-flex;
2797
+ align-items: center;
2798
+ justify-content: center;
2799
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2800
+ }
2801
+
2802
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2803
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2804
+ }
2805
+
2806
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2807
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2808
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2809
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2810
+ }
2811
+
2812
+ .pf-v6-c-text-input-group__text {
2813
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
2814
+ display: inline-grid;
2815
+ flex: 1;
2816
+ grid-template-areas: "text-input";
2817
+ grid-template-columns: 1fr;
2818
+ }
2819
+
2820
+ .pf-v6-c-text-input-group__icon {
2821
2821
  position: absolute;
2822
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2823
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2824
- line-height: 1;
2825
- color: var(--pf-v6-c-button__progress--Color);
2826
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2822
+ inset-block-start: 50%;
2823
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2824
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2825
+ color: var(--pf-v6-c-text-input-group__icon--Color);
2826
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2827
2827
  }
2828
2828
 
2829
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2830
- --pf-v6-c-spinner--Color: currentcolor;
2829
+ .pf-v6-c-text-input-group__icon.pf-m-status {
2830
+ inset-inline-start: auto;
2831
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2832
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2831
2833
  }
2832
2834
 
2833
- .pf-v6-c-button__text {
2834
- text-decoration: inherit;
2835
+ .pf-v6-c-text-input-group__text-input {
2836
+ overflow: hidden;
2837
+ text-overflow: ellipsis;
2838
+ white-space: nowrap;
2839
+ position: relative;
2840
+ width: 100%;
2841
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2842
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2843
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2844
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2845
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2846
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
2847
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2848
+ border: 0;
2849
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2835
2850
  }
2836
2851
 
2837
- .pf-v6-c-button__count {
2838
- display: inline-flex;
2839
- align-items: center;
2852
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2853
+ grid-area: text-input;
2840
2854
  }
2841
2855
 
2842
- .pf-v6-c-button--hamburger-icon path {
2843
- fill: none;
2844
- stroke: currentcolor;
2845
- stroke-linecap: round;
2846
- stroke-linejoin: round;
2847
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2856
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
2857
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2848
2858
  }
2849
2859
 
2850
- .pf-v6-c-button--hamburger-icon--top {
2851
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2860
+ .pf-v6-c-text-input-group__text-input::placeholder {
2861
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2852
2862
  }
2853
2863
 
2854
- .pf-v6-c-button--hamburger-icon--middle {
2855
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2864
+ .pf-v6-c-text-input-group__utilities {
2865
+ display: flex;
2866
+ align-items: center;
2867
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2868
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2856
2869
  }
2857
2870
 
2858
- .pf-v6-c-button--hamburger-icon--arrow {
2859
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2871
+ .pf-v6-c-text-input-group__utilities > * + * {
2872
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2860
2873
  }
2861
2874
 
2862
- .pf-v6-c-button--hamburger-icon--bottom {
2863
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2875
+ .pf-v6-c-text-input-group__group {
2876
+ display: flex;
2864
2877
  }
2865
2878
 
2866
- @keyframes pf-v6-c-button-icon-notify {
2867
- 33% {
2868
- transform: rotate(30deg);
2869
- }
2870
- 66% {
2871
- transform: rotate(-60deg);
2872
- }
2873
- }
2874
- @keyframes pf-v6-c-button-icon-favorited {
2875
- 50% {
2876
- scale: 1.5;
2877
- }
2878
- }
2879
2879
  .pf-v6-c-menu {
2880
2880
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2881
2881
  --pf-v6-c-menu--Width: auto;
@@ -3669,93 +3669,6 @@ button.pf-v6-c-breadcrumb__link {
3669
3669
  display: none;
3670
3670
  }
3671
3671
 
3672
- .pf-v6-c-spinner {
3673
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3674
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3675
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3676
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3677
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3678
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3679
- --pf-v6-c-spinner--StrokeWidth: 10;
3680
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3681
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3682
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3683
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3684
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3685
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3686
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3687
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3688
- }
3689
-
3690
- .pf-v6-c-spinner {
3691
- width: var(--pf-v6-c-spinner--Width);
3692
- height: var(--pf-v6-c-spinner--Height);
3693
- overflow: hidden;
3694
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3695
- }
3696
-
3697
- .pf-v6-c-spinner.pf-m-inline {
3698
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3699
- }
3700
-
3701
- .pf-v6-c-spinner.pf-m-xs {
3702
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3703
- --pf-v6-c-spinner--StrokeWidth: 15;
3704
- }
3705
-
3706
- .pf-v6-c-spinner.pf-m-sm {
3707
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3708
- }
3709
-
3710
- .pf-v6-c-spinner.pf-m-md {
3711
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3712
- }
3713
-
3714
- .pf-v6-c-spinner.pf-m-lg {
3715
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3716
- }
3717
-
3718
- .pf-v6-c-spinner.pf-m-xl {
3719
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3720
- }
3721
-
3722
- .pf-v6-c-spinner__path {
3723
- width: 100%;
3724
- height: 100%;
3725
- stroke: var(--pf-v6-c-spinner--Color);
3726
- stroke-dasharray: 283;
3727
- stroke-dashoffset: 280;
3728
- stroke-linecap: round;
3729
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3730
- transform-origin: 50% 50%;
3731
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3732
- }
3733
-
3734
- @keyframes pf-v6-c-spinner-animation-rotate {
3735
- 0% {
3736
- transform: rotate(0deg);
3737
- }
3738
- 100% {
3739
- transform: rotate(360deg);
3740
- }
3741
- }
3742
- @keyframes pf-v6-c-spinner-animation-dash {
3743
- 0% {
3744
- stroke-dashoffset: 280;
3745
- transform: rotate(0);
3746
- }
3747
- 15% {
3748
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3749
- }
3750
- 40% {
3751
- stroke-dasharray: 220;
3752
- stroke-dashoffset: 150;
3753
- }
3754
- 100% {
3755
- stroke-dashoffset: 280;
3756
- transform: rotate(720deg);
3757
- }
3758
- }
3759
3672
  .pf-v6-c-tooltip {
3760
3673
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3761
3674
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3885,4 +3798,92 @@ button.pf-v6-c-breadcrumb__link {
3885
3798
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3886
3799
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3887
3800
  transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3801
+ }
3802
+
3803
+ .pf-v6-c-spinner {
3804
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3805
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3806
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3807
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3808
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3809
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3810
+ --pf-v6-c-spinner--StrokeWidth: 10;
3811
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3812
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3813
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3814
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3815
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3816
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3817
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3818
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3819
+ }
3820
+
3821
+ .pf-v6-c-spinner {
3822
+ width: var(--pf-v6-c-spinner--Width);
3823
+ height: var(--pf-v6-c-spinner--Height);
3824
+ overflow: hidden;
3825
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3826
+ }
3827
+
3828
+ .pf-v6-c-spinner.pf-m-inline {
3829
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3830
+ }
3831
+
3832
+ .pf-v6-c-spinner.pf-m-xs {
3833
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3834
+ --pf-v6-c-spinner--StrokeWidth: 15;
3835
+ }
3836
+
3837
+ .pf-v6-c-spinner.pf-m-sm {
3838
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3839
+ }
3840
+
3841
+ .pf-v6-c-spinner.pf-m-md {
3842
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3843
+ }
3844
+
3845
+ .pf-v6-c-spinner.pf-m-lg {
3846
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3847
+ }
3848
+
3849
+ .pf-v6-c-spinner.pf-m-xl {
3850
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3851
+ }
3852
+
3853
+ .pf-v6-c-spinner__path {
3854
+ width: 100%;
3855
+ height: 100%;
3856
+ stroke: var(--pf-v6-c-spinner--Color);
3857
+ stroke-dasharray: 283;
3858
+ stroke-dashoffset: 280;
3859
+ stroke-linecap: round;
3860
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3861
+ transform-origin: 50% 50%;
3862
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3863
+ }
3864
+
3865
+ @keyframes pf-v6-c-spinner-animation-rotate {
3866
+ 0% {
3867
+ transform: rotate(0deg);
3868
+ }
3869
+ 100% {
3870
+ transform: rotate(360deg);
3871
+ }
3872
+ }
3873
+ @keyframes pf-v6-c-spinner-animation-dash {
3874
+ 0% {
3875
+ stroke-dashoffset: 280;
3876
+ transform: rotate(0);
3877
+ }
3878
+ 15% {
3879
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3880
+ }
3881
+ 40% {
3882
+ stroke-dasharray: 220;
3883
+ stroke-dashoffset: 150;
3884
+ }
3885
+ 100% {
3886
+ stroke-dashoffset: 280;
3887
+ transform: rotate(720deg);
3888
+ }
3888
3889
  }