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

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-BDshzjq9.css → output-DSAeSDFl.css} +1097 -1097
  6. package/package.json +3 -3
package/dist/umd/assets/{output-BDshzjq9.css → output-DSAeSDFl.css} RENAMED
@@ -3,6 +3,332 @@
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
+
6
332
  .pf-v6-c-menu-toggle {
7
333
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
8
334
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -555,334 +881,247 @@
555
881
  justify-content: center;
556
882
  margin-inline-start: auto;
557
883
  }
558
-
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);
562
- }
563
-
564
- .pf-v6-c-menu-toggle__status-icon {
565
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
566
- }
567
-
568
- .pf-v6-c-divider {
569
- --pf-v6-c-divider--Display: flex;
570
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
571
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
572
- --pf-v6-c-divider--before--FlexBasis: 100%;
573
- }
574
-
575
- .pf-v6-c-divider {
576
- flex-direction: row;
577
- width: 100%;
578
- height: var(--pf-v6-c-divider--Size);
579
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
580
- --pf-v6-hidden-visible--hidden--Display: none;
581
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
582
- display: var(--pf-v6-hidden-visible--Display);
583
- flex-shrink: 0;
584
- align-items: stretch;
585
- align-self: stretch;
586
- justify-content: center;
587
- border: 0;
588
- }
589
-
590
- .pf-v6-c-divider.pf-m-hidden {
591
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
592
- }
593
-
594
- @media screen and (min-width: 36rem) {
595
- .pf-v6-c-divider.pf-m-hidden-on-sm {
596
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
597
- }
598
- .pf-v6-c-divider.pf-m-visible-on-sm {
599
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
600
- }
601
- }
602
- @media screen and (min-width: 48rem) {
603
- .pf-v6-c-divider.pf-m-hidden-on-md {
604
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
605
- }
606
- .pf-v6-c-divider.pf-m-visible-on-md {
607
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
608
- }
609
- }
610
- @media screen and (min-width: 62rem) {
611
- .pf-v6-c-divider.pf-m-hidden-on-lg {
612
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
613
- }
614
- .pf-v6-c-divider.pf-m-visible-on-lg {
615
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
616
- }
617
- }
618
- @media screen and (min-width: 75rem) {
619
- .pf-v6-c-divider.pf-m-hidden-on-xl {
620
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
621
- }
622
- .pf-v6-c-divider.pf-m-visible-on-xl {
623
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
624
- }
625
- }
626
- @media screen and (min-width: 90.625rem) {
627
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
628
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
629
- }
630
- .pf-v6-c-divider.pf-m-visible-on-2xl {
631
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
632
- }
633
- }
634
- .pf-v6-c-divider::before {
635
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
636
- content: "";
637
- background-color: var(--pf-v6-c-divider--Color);
638
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
639
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
884
+
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);
640
888
  }
641
889
 
642
- .pf-v6-c-divider.pf-m-horizontal {
643
- flex-direction: row;
644
- width: 100%;
645
- height: var(--pf-v6-c-divider--Size);
890
+ .pf-v6-c-menu-toggle__status-icon {
891
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
646
892
  }
647
893
 
648
- .pf-v6-c-divider.pf-m-vertical {
649
- flex-direction: column;
650
- width: var(--pf-v6-c-divider--Size);
651
- height: inherit;
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);
652
916
  }
653
917
 
654
- .pf-v6-c-divider.pf-m-inset-none {
655
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
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);
656
931
  }
657
932
 
658
- .pf-v6-c-divider.pf-m-inset-xs {
659
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
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;
660
940
  }
661
941
 
662
- .pf-v6-c-divider.pf-m-inset-sm {
663
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
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);
664
947
  }
665
948
 
666
- .pf-v6-c-divider.pf-m-inset-md {
667
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
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);
668
953
  }
669
954
 
670
- .pf-v6-c-divider.pf-m-inset-lg {
671
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
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);
672
958
  }
673
959
 
674
- .pf-v6-c-divider.pf-m-inset-xl {
675
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
960
+ .pf-v6-c-badge.pf-m-disabled::after {
961
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
676
962
  }
677
963
 
678
- .pf-v6-c-divider.pf-m-inset-2xl {
679
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
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);
680
967
  }
681
968
 
682
- .pf-v6-c-divider.pf-m-inset-3xl {
683
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
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);
684
1007
  }
685
1008
 
686
- @media (min-width: 36rem) {
687
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
688
- flex-direction: row;
689
- width: 100%;
690
- height: var(--pf-v6-c-divider--Size);
691
- }
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);
692
1015
  }
693
- @media (min-width: 36rem) {
694
- .pf-v6-c-divider.pf-m-vertical-on-sm {
695
- flex-direction: column;
696
- width: var(--pf-v6-c-divider--Size);
697
- height: inherit;
698
- }
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);
699
1025
  }
700
- @media (min-width: 36rem) {
701
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
702
- --pf-v6-c-divider--before--FlexBasis: 100%;
703
- }
704
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
705
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
706
- }
707
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
708
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
709
- }
710
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
711
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
712
- }
713
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
714
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
715
- }
716
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
717
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
718
- }
719
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
720
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
721
- }
722
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
723
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
724
- }
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);
725
1035
  }
726
- @media (min-width: 48rem) {
727
- .pf-v6-c-divider.pf-m-horizontal-on-md {
728
- flex-direction: row;
729
- width: 100%;
730
- height: var(--pf-v6-c-divider--Size);
731
- }
1036
+
1037
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1038
+ align-items: flex-start;
732
1039
  }
733
- @media (min-width: 48rem) {
734
- .pf-v6-c-divider.pf-m-vertical-on-md {
735
- flex-direction: column;
736
- width: var(--pf-v6-c-divider--Size);
737
- height: inherit;
738
- }
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);
739
1045
  }
740
- @media (min-width: 48rem) {
741
- .pf-v6-c-divider.pf-m-inset-none-on-md {
742
- --pf-v6-c-divider--before--FlexBasis: 100%;
743
- }
744
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
745
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
746
- }
747
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
748
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
749
- }
750
- .pf-v6-c-divider.pf-m-inset-md-on-md {
751
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
752
- }
753
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
754
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
755
- }
756
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
757
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
758
- }
759
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
760
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
761
- }
762
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
763
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
764
- }
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);
765
1050
  }
766
- @media (min-width: 62rem) {
767
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
768
- flex-direction: row;
769
- width: 100%;
770
- height: var(--pf-v6-c-divider--Size);
771
- }
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;
772
1063
  }
773
- @media (min-width: 62rem) {
774
- .pf-v6-c-divider.pf-m-vertical-on-lg {
775
- flex-direction: column;
776
- width: var(--pf-v6-c-divider--Size);
777
- height: inherit;
778
- }
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);
779
1073
  }
780
- @media (min-width: 62rem) {
781
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
782
- --pf-v6-c-divider--before--FlexBasis: 100%;
783
- }
784
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
785
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
786
- }
787
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
788
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
789
- }
790
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
791
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
792
- }
793
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
794
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
795
- }
796
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
797
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
798
- }
799
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
800
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
801
- }
802
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
803
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
804
- }
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);
805
1081
  }
806
- @media (min-width: 75rem) {
807
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
808
- flex-direction: row;
809
- width: 100%;
810
- height: var(--pf-v6-c-divider--Size);
811
- }
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);
812
1086
  }
813
- @media (min-width: 75rem) {
814
- .pf-v6-c-divider.pf-m-vertical-on-xl {
815
- flex-direction: column;
816
- width: var(--pf-v6-c-divider--Size);
817
- height: inherit;
818
- }
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);
819
1093
  }
820
- @media (min-width: 75rem) {
821
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
822
- --pf-v6-c-divider--before--FlexBasis: 100%;
823
- }
824
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
825
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
826
- }
827
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
828
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
829
- }
830
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
831
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
832
- }
833
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
834
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
835
- }
836
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
837
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
838
- }
839
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
840
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
841
- }
842
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
843
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
844
- }
1094
+
1095
+ .pf-v6-c-label-group__close {
1096
+ display: flex;
1097
+ align-self: flex-start;
845
1098
  }
846
- @media (min-width: 90.625rem) {
847
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
848
- flex-direction: row;
849
- width: 100%;
850
- height: var(--pf-v6-c-divider--Size);
851
- }
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);
852
1106
  }
853
- @media (min-width: 90.625rem) {
854
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
855
- flex-direction: column;
856
- width: var(--pf-v6-c-divider--Size);
857
- height: inherit;
858
- }
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;
859
1119
  }
860
- @media (min-width: 90.625rem) {
861
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
862
- --pf-v6-c-divider--before--FlexBasis: 100%;
863
- }
864
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
865
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
866
- }
867
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
868
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
869
- }
870
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
871
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
872
- }
873
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
874
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
875
- }
876
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
877
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
878
- }
879
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
880
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
881
- }
882
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
883
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
884
- }
1120
+
1121
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1122
+ display: none;
885
1123
  }
1124
+
886
1125
  .pf-v6-c-label {
887
1126
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
888
1127
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -1407,105 +1646,23 @@ input.pf-v6-c-label__content {
1407
1646
  color: var(--pf-v6-c-label__icon--Color);
1408
1647
  }
1409
1648
 
1410
- .pf-v6-c-label__actions {
1411
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1412
- }
1413
-
1414
- .pf-v6-c-label__actions .pf-v6-c-button {
1415
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1416
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1417
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1418
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1419
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1420
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1421
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1422
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1423
- }
1424
-
1425
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1426
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1427
- }
1428
-
1429
- .pf-v6-c-check {
1430
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1431
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1432
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1433
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1434
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1435
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1436
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1437
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1438
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1439
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1440
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1441
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1442
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1443
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1444
- }
1445
-
1446
- .pf-v6-c-check {
1447
- display: grid;
1448
- grid-template-columns: auto 1fr;
1449
- grid-gap: var(--pf-v6-c-check--GridGap);
1450
- accent-color: var(--pf-v6-c-check--AccentColor);
1451
- }
1452
-
1453
- .pf-v6-c-check.pf-m-standalone {
1454
- display: inline-grid;
1455
- grid-template-columns: auto;
1456
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1457
- }
1458
-
1459
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1460
- align-self: center;
1461
- transform: none;
1462
- }
1463
-
1464
- .pf-v6-c-check__input {
1465
- align-self: start;
1466
- font-size: var(--pf-v6-c-check__label--FontSize);
1467
- line-height: var(--pf-v6-c-check__label--LineHeight);
1468
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1469
- }
1470
-
1471
- .pf-v6-c-check__label {
1472
- font-size: var(--pf-v6-c-check__label--FontSize);
1473
- font-weight: var(--pf-v6-c-check__label--FontWeight);
1474
- line-height: var(--pf-v6-c-check__label--LineHeight);
1475
- color: var(--pf-v6-c-check__label--Color);
1476
- }
1477
-
1478
- .pf-v6-c-check__description {
1479
- grid-column: 2;
1480
- font-size: var(--pf-v6-c-check__description--FontSize);
1481
- color: var(--pf-v6-c-check__description--Color);
1482
- }
1483
-
1484
- .pf-v6-c-check__body {
1485
- grid-column: 2;
1486
- }
1487
-
1488
- .pf-v6-c-check__label,
1489
- .pf-v6-c-check__input {
1490
- justify-self: start;
1491
- }
1492
-
1493
- label.pf-v6-c-check, .pf-v6-c-check__label,
1494
- .pf-v6-c-check__input {
1495
- cursor: pointer;
1496
- }
1497
-
1498
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1499
- .pf-v6-c-check__input:disabled,
1500
- .pf-v6-c-check__input.pf-m-disabled {
1501
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1502
- cursor: not-allowed;
1649
+ .pf-v6-c-label__actions {
1650
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1503
1651
  }
1504
1652
 
1505
- .pf-v6-c-check__label-required {
1506
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1507
- font-size: var(--pf-v6-c-check__label-required--FontSize);
1508
- color: var(--pf-v6-c-check__label-required--Color);
1653
+ .pf-v6-c-label__actions .pf-v6-c-button {
1654
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1655
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1656
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1657
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1658
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1659
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1660
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1661
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1662
+ }
1663
+
1664
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1665
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1509
1666
  }
1510
1667
 
1511
1668
  .pf-v6-c-button {
@@ -2232,768 +2389,582 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2232
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);
2233
2390
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
2234
2391
  --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
2235
- --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
2236
- --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
2237
- --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
2238
- --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
2239
- --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
2240
- text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
2241
- text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
2242
- text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
2243
- outline-offset: var(--pf-t--global--focus-ring--position--offset);
2244
- }
2245
-
2246
- .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
2247
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
2248
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
2249
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
2250
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
2251
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
2252
- }
2253
-
2254
- .pf-v6-c-button:active {
2255
- background-size: 100% 100%;
2256
- transition-duration: 0s;
2257
- }
2258
-
2259
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
2260
- pointer-events: none;
2261
- }
2262
-
2263
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2264
- color: var(--pf-v6-c-button--disabled--Color);
2265
- text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2266
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
2267
- }
2268
-
2269
- .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2270
- border-color: transparent;
2271
- }
2272
-
2273
- .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 {
2274
- color: var(--pf-v6-c-button--disabled__icon--Color);
2275
- }
2276
-
2277
- .pf-v6-c-button.pf-m-aria-disabled {
2278
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
2279
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
2280
- cursor: default;
2281
- }
2282
-
2283
- .pf-v6-c-button.pf-m-progress {
2284
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
2285
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
2286
- }
2287
-
2288
- .pf-v6-c-button.pf-m-in-progress {
2289
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2290
- }
2291
-
2292
- .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2293
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2294
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2295
- }
2296
-
2297
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2298
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2299
- --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2300
- }
2301
-
2302
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2303
- opacity: 0;
2304
- }
2305
-
2306
- .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2307
- animation-name: pf-v6-c-button-icon-notify;
2308
- animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2309
- animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2310
- }
2311
-
2312
- .pf-v6-c-button__icon {
2313
- margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2314
- margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2315
- color: var(--pf-v6-c-button__icon--Color);
2316
- transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2317
- transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2318
- transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2319
- transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2320
- rotate: var(--pf-v6-c-button__icon--Rotate);
2321
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2322
- }
2323
-
2324
- .pf-v6-c-button__icon.pf-m-start {
2325
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2326
- }
2327
-
2328
- .pf-v6-c-button__icon.pf-m-end {
2329
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2330
- }
2331
-
2332
- .pf-v6-c-button__icon-favorite,
2333
- .pf-v6-c-button__icon-favorited {
2334
- grid-area: 1/1/1/1;
2335
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2336
- transition-property: opacity;
2337
- }
2338
-
2339
- .pf-v6-c-button__icon-favorite {
2340
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2341
- }
2342
-
2343
- .pf-v6-c-button__icon-favorited {
2344
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2345
- }
2346
-
2347
- .pf-v6-c-button__progress {
2348
- position: absolute;
2349
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2350
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2351
- line-height: 1;
2352
- color: var(--pf-v6-c-button__progress--Color);
2353
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2354
- }
2355
-
2356
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2357
- --pf-v6-c-spinner--Color: currentcolor;
2358
- }
2359
-
2360
- .pf-v6-c-button__text {
2361
- text-decoration: inherit;
2362
- }
2363
-
2364
- .pf-v6-c-button__count {
2365
- display: inline-flex;
2366
- align-items: center;
2367
- }
2368
-
2369
- .pf-v6-c-button--hamburger-icon path {
2370
- fill: none;
2371
- stroke: currentcolor;
2372
- stroke-linecap: round;
2373
- stroke-linejoin: round;
2374
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2375
- }
2376
-
2377
- .pf-v6-c-button--hamburger-icon--top {
2378
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2379
- }
2380
-
2381
- .pf-v6-c-button--hamburger-icon--middle {
2382
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2383
- }
2384
-
2385
- .pf-v6-c-button--hamburger-icon--arrow {
2386
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2387
- }
2388
-
2389
- .pf-v6-c-button--hamburger-icon--bottom {
2390
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2391
- }
2392
-
2393
- @keyframes pf-v6-c-button-icon-notify {
2394
- 33% {
2395
- transform: rotate(30deg);
2396
- }
2397
- 66% {
2398
- transform: rotate(-60deg);
2399
- }
2400
- }
2401
- @keyframes pf-v6-c-button-icon-favorited {
2402
- 50% {
2403
- scale: 1.5;
2404
- }
2405
- }
2406
- .pf-v6-c-label-group {
2407
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2408
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2409
- --pf-v6-c-label-group--MaxWidth: 100%;
2410
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2411
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2412
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2413
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2414
- --pf-v6-c-label-group__main--MaxWidth: 100%;
2415
- --pf-v6-c-label-group__main--MinWidth: 0;
2416
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2417
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2418
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2419
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2420
- --pf-v6-c-label-group__list--MaxWidth: 100%;
2421
- --pf-v6-c-label-group__list--MinWidth: 0;
2422
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2423
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2424
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2425
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2426
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2427
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2428
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2429
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2430
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2431
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2432
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2433
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
2434
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2435
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2436
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2437
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2438
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2439
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2440
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2441
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2442
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2443
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2444
- }
2445
-
2446
- .pf-v6-c-label-group {
2447
- display: inline-flex;
2448
- row-gap: var(--pf-v6-c-label-group--RowGap);
2449
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
2450
- align-items: center;
2451
- max-width: var(--pf-v6-c-label-group--MaxWidth);
2452
- }
2453
-
2454
- .pf-v6-c-label-group.pf-m-category {
2455
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2456
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2457
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2458
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2459
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2460
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2461
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2462
- }
2463
-
2464
- .pf-v6-c-label-group.pf-m-vertical {
2465
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2466
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2467
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2468
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2469
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2470
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2471
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
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);
2472
2401
  }
2473
2402
 
2474
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2475
- align-items: flex-start;
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);
2476
2409
  }
2477
2410
 
2478
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2479
- flex-direction: column;
2480
- align-items: flex-start;
2481
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2411
+ .pf-v6-c-button:active {
2412
+ background-size: 100% 100%;
2413
+ transition-duration: 0s;
2482
2414
  }
2483
2415
 
2484
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2485
- flex-direction: column;
2486
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2416
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
2417
+ pointer-events: none;
2487
2418
  }
2488
2419
 
2489
- .pf-v6-c-label-group.pf-m-editable,
2490
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2491
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2492
- display: flex;
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);
2493
2424
  }
2494
2425
 
2495
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2496
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2497
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2498
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2499
- flex: 1;
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;
2500
2428
  }
2501
2429
 
2502
- .pf-v6-c-label-group__main {
2503
- display: flex;
2504
- flex: 1;
2505
- flex-wrap: wrap;
2506
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
2507
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2508
- align-items: baseline;
2509
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
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);
2510
2432
  }
2511
2433
 
2512
- .pf-v6-c-label-group__list {
2513
- display: inline-flex;
2514
- flex-wrap: wrap;
2515
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
2516
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2517
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
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;
2518
2438
  }
2519
2439
 
2520
- .pf-v6-c-label-group__list-item {
2521
- display: inline-flex;
2522
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
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);
2523
2443
  }
2524
2444
 
2525
- .pf-v6-c-label-group__label {
2526
- overflow: hidden;
2527
- text-overflow: ellipsis;
2528
- white-space: nowrap;
2529
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
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);
2530
2447
  }
2531
2448
 
2532
- .pf-v6-c-label-group__close {
2533
- display: flex;
2534
- align-self: flex-start;
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);
2535
2452
  }
2536
2453
 
2537
- .pf-v6-c-label-group__close .pf-v6-c-button {
2538
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2539
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2540
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2541
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2542
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
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);
2543
2457
  }
2544
2458
 
2545
- .pf-v6-c-label-group__textarea {
2546
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2547
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2548
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2549
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2550
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2551
- white-space: nowrap;
2552
- resize: none;
2553
- border: 0;
2554
- -ms-overflow-style: none;
2555
- scrollbar-width: none;
2459
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2460
+ opacity: 0;
2556
2461
  }
2557
2462
 
2558
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2559
- display: none;
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);
2560
2467
  }
2561
2468
 
2562
- .pf-v6-c-badge {
2563
- --pf-v6-c-badge--BorderColor: transparent;
2564
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2565
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2566
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2567
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2568
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2569
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2570
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2571
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2572
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2573
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2574
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2575
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2576
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2577
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2578
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2579
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2580
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2581
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2582
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2583
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
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);
2584
2479
  }
2585
2480
 
2586
- .pf-v6-c-badge {
2587
- position: relative;
2588
- display: inline-block;
2589
- min-width: var(--pf-v6-c-badge--MinWidth);
2590
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2591
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2592
- font-size: var(--pf-v6-c-badge--FontSize);
2593
- font-weight: var(--pf-v6-c-badge--FontWeight);
2594
- color: var(--pf-v6-c-badge--Color);
2595
- text-align: center;
2596
- white-space: nowrap;
2597
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2598
- border-radius: var(--pf-v6-c-badge--BorderRadius);
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);
2599
2483
  }
2600
2484
 
2601
- .pf-v6-c-badge::after {
2602
- position: absolute;
2603
- inset: 0;
2604
- pointer-events: none;
2605
- content: "";
2606
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2607
- border-radius: inherit;
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);
2608
2487
  }
2609
2488
 
2610
- .pf-v6-c-badge.pf-m-read {
2611
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2612
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2613
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2614
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
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;
2615
2494
  }
2616
2495
 
2617
- .pf-v6-c-badge.pf-m-unread {
2618
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2619
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2620
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2496
+ .pf-v6-c-button__icon-favorite {
2497
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2621
2498
  }
2622
2499
 
2623
- .pf-v6-c-badge.pf-m-disabled {
2624
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2625
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2500
+ .pf-v6-c-button__icon-favorited {
2501
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2626
2502
  }
2627
2503
 
2628
- .pf-v6-c-badge.pf-m-disabled::after {
2629
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
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));
2630
2511
  }
2631
2512
 
2632
- .pf-v6-c-badge__toggle-icon {
2633
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2634
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2513
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2514
+ --pf-v6-c-spinner--Color: currentcolor;
2635
2515
  }
2636
2516
 
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);
2517
+ .pf-v6-c-button__text {
2518
+ text-decoration: inherit;
2689
2519
  }
2690
2520
 
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);
2521
+ .pf-v6-c-button__count {
2522
+ display: inline-flex;
2523
+ align-items: center;
2703
2524
  }
2704
2525
 
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);
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);
2715
2532
  }
2716
2533
 
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;
2534
+ .pf-v6-c-button--hamburger-icon--top {
2535
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2725
2536
  }
2726
2537
 
2727
- .pf-v6-c-text-input-group.pf-m-plain {
2728
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
2538
+ .pf-v6-c-button--hamburger-icon--middle {
2539
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2729
2540
  }
2730
2541
 
2731
- .pf-v6-c-text-input-group.pf-m-plain::before {
2732
- border: 0;
2542
+ .pf-v6-c-button--hamburger-icon--arrow {
2543
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2733
2544
  }
2734
2545
 
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);
2546
+ .pf-v6-c-button--hamburger-icon--bottom {
2547
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2739
2548
  }
2740
2549
 
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);
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
+ }
2562
+ }
2563
+ .pf-v6-c-divider {
2564
+ --pf-v6-c-divider--Display: flex;
2565
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2566
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2567
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2745
2568
  }
2746
2569
 
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);
2570
+ .pf-v6-c-divider {
2571
+ flex-direction: row;
2572
+ width: 100%;
2573
+ height: var(--pf-v6-c-divider--Size);
2574
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2575
+ --pf-v6-hidden-visible--hidden--Display: none;
2576
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2577
+ display: var(--pf-v6-hidden-visible--Display);
2578
+ flex-shrink: 0;
2579
+ align-items: stretch;
2580
+ align-self: stretch;
2581
+ justify-content: center;
2582
+ border: 0;
2751
2583
  }
2752
2584
 
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;
2585
+ .pf-v6-c-divider.pf-m-hidden {
2586
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2587
+ }
2588
+
2589
+ @media screen and (min-width: 36rem) {
2590
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
2591
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2592
+ }
2593
+ .pf-v6-c-divider.pf-m-visible-on-sm {
2594
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2760
2595
  }
2761
2596
  }
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);
2597
+ @media screen and (min-width: 48rem) {
2598
+ .pf-v6-c-divider.pf-m-hidden-on-md {
2599
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2600
+ }
2601
+ .pf-v6-c-divider.pf-m-visible-on-md {
2602
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2603
+ }
2768
2604
  }
2769
-
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);
2605
+ @media screen and (min-width: 62rem) {
2606
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
2607
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2608
+ }
2609
+ .pf-v6-c-divider.pf-m-visible-on-lg {
2610
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2611
+ }
2612
+ }
2613
+ @media screen and (min-width: 75rem) {
2614
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
2615
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2616
+ }
2617
+ .pf-v6-c-divider.pf-m-visible-on-xl {
2618
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2619
+ }
2620
+ }
2621
+ @media screen and (min-width: 90.625rem) {
2622
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
2623
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2624
+ }
2625
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
2626
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2627
+ }
2628
+ }
2629
+ .pf-v6-c-divider::before {
2630
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2631
+ content: "";
2632
+ background-color: var(--pf-v6-c-divider--Color);
2633
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2634
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2772
2635
  }
2773
2636
 
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);
2637
+ .pf-v6-c-divider.pf-m-horizontal {
2638
+ flex-direction: row;
2639
+ width: 100%;
2640
+ height: var(--pf-v6-c-divider--Size);
2776
2641
  }
2777
2642
 
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;
2643
+ .pf-v6-c-divider.pf-m-vertical {
2644
+ flex-direction: column;
2645
+ width: var(--pf-v6-c-divider--Size);
2646
+ height: inherit;
2780
2647
  }
2781
2648
 
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);
2649
+ .pf-v6-c-divider.pf-m-inset-none {
2650
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2785
2651
  }
2786
2652
 
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;
2653
+ .pf-v6-c-divider.pf-m-inset-xs {
2654
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2793
2655
  }
2794
2656
 
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));
2657
+ .pf-v6-c-divider.pf-m-inset-sm {
2658
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2802
2659
  }
2803
2660
 
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);
2661
+ .pf-v6-c-divider.pf-m-inset-md {
2662
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2806
2663
  }
2807
2664
 
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);
2665
+ .pf-v6-c-divider.pf-m-inset-lg {
2666
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2812
2667
  }
2813
2668
 
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;
2669
+ .pf-v6-c-divider.pf-m-inset-xl {
2670
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2820
2671
  }
2821
2672
 
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));
2673
+ .pf-v6-c-divider.pf-m-inset-2xl {
2674
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2829
2675
  }
2830
2676
 
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);
2677
+ .pf-v6-c-divider.pf-m-inset-3xl {
2678
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2835
2679
  }
2836
2680
 
2837
- .pf-v6-c-text-input-group__text-input {
2838
- overflow: hidden;
2839
- text-overflow: ellipsis;
2840
- white-space: nowrap;
2841
- position: relative;
2842
- width: 100%;
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);
2681
+ @media (min-width: 36rem) {
2682
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
2683
+ flex-direction: row;
2684
+ width: 100%;
2685
+ height: var(--pf-v6-c-divider--Size);
2686
+ }
2687
+ }
2688
+ @media (min-width: 36rem) {
2689
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
2690
+ flex-direction: column;
2691
+ width: var(--pf-v6-c-divider--Size);
2692
+ height: inherit;
2693
+ }
2694
+ }
2695
+ @media (min-width: 36rem) {
2696
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
2697
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2698
+ }
2699
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2700
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2701
+ }
2702
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2703
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2704
+ }
2705
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
2706
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2707
+ }
2708
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2709
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2710
+ }
2711
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2712
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2713
+ }
2714
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2715
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2716
+ }
2717
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2718
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2719
+ }
2852
2720
  }
2853
-
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;
2721
+ @media (min-width: 48rem) {
2722
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
2723
+ flex-direction: row;
2724
+ width: 100%;
2725
+ height: var(--pf-v6-c-divider--Size);
2726
+ }
2856
2727
  }
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);
2728
+ @media (min-width: 48rem) {
2729
+ .pf-v6-c-divider.pf-m-vertical-on-md {
2730
+ flex-direction: column;
2731
+ width: var(--pf-v6-c-divider--Size);
2732
+ height: inherit;
2733
+ }
2860
2734
  }
2861
-
2862
- .pf-v6-c-text-input-group__text-input::placeholder {
2863
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2735
+ @media (min-width: 48rem) {
2736
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2737
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2738
+ }
2739
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2740
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2741
+ }
2742
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2743
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2744
+ }
2745
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2746
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2747
+ }
2748
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2749
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2750
+ }
2751
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2752
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2753
+ }
2754
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2755
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2756
+ }
2757
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2758
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2759
+ }
2864
2760
  }
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);
2761
+ @media (min-width: 62rem) {
2762
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2763
+ flex-direction: row;
2764
+ width: 100%;
2765
+ height: var(--pf-v6-c-divider--Size);
2766
+ }
2871
2767
  }
2872
-
2873
- .pf-v6-c-text-input-group__utilities > * + * {
2874
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2768
+ @media (min-width: 62rem) {
2769
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2770
+ flex-direction: column;
2771
+ width: var(--pf-v6-c-divider--Size);
2772
+ height: inherit;
2773
+ }
2875
2774
  }
2876
-
2877
- .pf-v6-c-text-input-group__group {
2878
- display: flex;
2775
+ @media (min-width: 62rem) {
2776
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2777
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2778
+ }
2779
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2780
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2781
+ }
2782
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2783
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2784
+ }
2785
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2786
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2787
+ }
2788
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2789
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2790
+ }
2791
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2792
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2793
+ }
2794
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2795
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2796
+ }
2797
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2798
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2799
+ }
2879
2800
  }
2880
-
2881
- .pf-v6-c-breadcrumb {
2882
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2883
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
2884
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2885
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
2886
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2887
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
2888
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2889
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2890
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
2891
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2892
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2893
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
2894
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2895
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2896
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
2897
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
2898
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
2899
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2900
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2901
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2902
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2801
+ @media (min-width: 75rem) {
2802
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2803
+ flex-direction: row;
2804
+ width: 100%;
2805
+ height: var(--pf-v6-c-divider--Size);
2806
+ }
2903
2807
  }
2904
-
2905
- .pf-v6-c-breadcrumb {
2906
- display: inline-flex;
2808
+ @media (min-width: 75rem) {
2809
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2810
+ flex-direction: column;
2811
+ width: var(--pf-v6-c-divider--Size);
2812
+ height: inherit;
2813
+ }
2907
2814
  }
2908
-
2909
- .pf-v6-c-breadcrumb__list {
2910
- display: flex;
2911
- flex-wrap: wrap;
2912
- align-items: center;
2815
+ @media (min-width: 75rem) {
2816
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2817
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2818
+ }
2819
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2820
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2821
+ }
2822
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2823
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2824
+ }
2825
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2826
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2827
+ }
2828
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2829
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2830
+ }
2831
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2832
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2833
+ }
2834
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2835
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2836
+ }
2837
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2838
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2839
+ }
2913
2840
  }
2914
-
2915
- .pf-v6-c-breadcrumb__item {
2916
- display: flex;
2917
- align-items: baseline;
2918
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
2919
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
2920
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
2921
- white-space: nowrap;
2922
- list-style: none;
2841
+ @media (min-width: 90.625rem) {
2842
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2843
+ flex-direction: row;
2844
+ width: 100%;
2845
+ height: var(--pf-v6-c-divider--Size);
2846
+ }
2923
2847
  }
2924
-
2925
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
2926
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2848
+ @media (min-width: 90.625rem) {
2849
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2850
+ flex-direction: column;
2851
+ width: var(--pf-v6-c-divider--Size);
2852
+ height: inherit;
2853
+ }
2927
2854
  }
2928
-
2929
- .pf-v6-c-breadcrumb__item:not(:last-child) {
2930
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2855
+ @media (min-width: 90.625rem) {
2856
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2857
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2858
+ }
2859
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2860
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2861
+ }
2862
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2863
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2864
+ }
2865
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2866
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2867
+ }
2868
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2869
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2870
+ }
2871
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2872
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2873
+ }
2874
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2875
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2876
+ }
2877
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2878
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2879
+ }
2931
2880
  }
2932
-
2933
- .pf-v6-c-breadcrumb__item-divider {
2934
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
2935
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
2936
- line-height: 1;
2937
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
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;
2938
2897
  }
2939
2898
 
2940
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
2941
- scale: -1 1;
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;
2942
2904
  }
2943
2905
 
2944
- .pf-v6-c-breadcrumb__link {
2945
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
2946
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
2947
- font-size: inherit;
2948
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
2949
- line-height: inherit;
2950
- color: var(--pf-v6-c-breadcrumb__link--Color);
2951
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
2952
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
2953
- word-break: break-word;
2954
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2906
+ .pf-v6-c-spinner.pf-m-inline {
2907
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
2955
2908
  }
2956
2909
 
2957
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
2958
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
2959
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
2960
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
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;
2961
2913
  }
2962
2914
 
2963
- .pf-v6-c-breadcrumb__link.pf-m-current {
2964
- cursor: default;
2915
+ .pf-v6-c-spinner.pf-m-sm {
2916
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
2965
2917
  }
2966
2918
 
2967
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
2968
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
2969
- text-decoration-line: none;
2919
+ .pf-v6-c-spinner.pf-m-md {
2920
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
2970
2921
  }
2971
2922
 
2972
- button.pf-v6-c-breadcrumb__link {
2973
- border: none;
2923
+ .pf-v6-c-spinner.pf-m-lg {
2924
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
2974
2925
  }
2975
2926
 
2976
- .pf-v6-c-breadcrumb__dropdown {
2977
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
2978
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
2979
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
2980
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
2927
+ .pf-v6-c-spinner.pf-m-xl {
2928
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
2981
2929
  }
2982
2930
 
2983
- .pf-v6-c-breadcrumb__heading {
2984
- display: inline;
2985
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2931
+ .pf-v6-c-spinner__path {
2932
+ 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;
2986
2941
  }
2987
2942
 
2988
- .pf-v6-c-breadcrumb__link,
2989
- .pf-v6-c-breadcrumb__heading {
2990
- white-space: normal;
2943
+ @keyframes pf-v6-c-spinner-animation-rotate {
2944
+ 0% {
2945
+ transform: rotate(0deg);
2946
+ }
2947
+ 100% {
2948
+ transform: rotate(360deg);
2949
+ }
2991
2950
  }
2992
-
2993
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
2994
- display: none;
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
+ }
2995
2967
  }
2996
-
2997
2968
  .pf-v6-c-menu {
2998
2969
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2999
2970
  --pf-v6-c-menu--Width: auto;
@@ -3678,93 +3649,122 @@ button.pf-v6-c-breadcrumb__link {
3678
3649
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3679
3650
  }
3680
3651
 
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;
3652
+ .pf-v6-c-breadcrumb {
3653
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3654
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3655
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3656
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3657
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3658
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3659
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3660
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3661
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3662
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3663
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3664
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3665
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3666
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3667
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3668
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3669
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3670
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3671
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3672
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3673
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3697
3674
  }
3698
3675
 
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;
3676
+ .pf-v6-c-breadcrumb {
3677
+ display: inline-flex;
3704
3678
  }
3705
3679
 
3706
- .pf-v6-c-spinner.pf-m-inline {
3707
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3680
+ .pf-v6-c-breadcrumb__list {
3681
+ display: flex;
3682
+ flex-wrap: wrap;
3683
+ align-items: center;
3708
3684
  }
3709
3685
 
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;
3686
+ .pf-v6-c-breadcrumb__item {
3687
+ display: flex;
3688
+ align-items: baseline;
3689
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3690
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3691
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3692
+ white-space: nowrap;
3693
+ list-style: none;
3713
3694
  }
3714
3695
 
3715
- .pf-v6-c-spinner.pf-m-sm {
3716
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3696
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3697
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3717
3698
  }
3718
3699
 
3719
- .pf-v6-c-spinner.pf-m-md {
3720
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3700
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3701
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3721
3702
  }
3722
3703
 
3723
- .pf-v6-c-spinner.pf-m-lg {
3724
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3704
+ .pf-v6-c-breadcrumb__item-divider {
3705
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3706
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3707
+ line-height: 1;
3708
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3725
3709
  }
3726
3710
 
3727
- .pf-v6-c-spinner.pf-m-xl {
3728
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3711
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3712
+ scale: -1 1;
3729
3713
  }
3730
3714
 
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;
3715
+ .pf-v6-c-breadcrumb__link {
3716
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3717
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3718
+ font-size: inherit;
3719
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3720
+ line-height: inherit;
3721
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3722
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3723
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3724
+ word-break: break-word;
3725
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3741
3726
  }
3742
3727
 
3743
- @keyframes pf-v6-c-spinner-animation-rotate {
3744
- 0% {
3745
- transform: rotate(0deg);
3746
- }
3747
- 100% {
3748
- transform: rotate(360deg);
3749
- }
3728
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3729
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3730
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3731
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3750
3732
  }
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
- }
3733
+
3734
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3735
+ cursor: default;
3736
+ }
3737
+
3738
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3739
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3740
+ text-decoration-line: none;
3741
+ }
3742
+
3743
+ button.pf-v6-c-breadcrumb__link {
3744
+ border: none;
3745
+ }
3746
+
3747
+ .pf-v6-c-breadcrumb__dropdown {
3748
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3749
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3750
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3751
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3752
+ }
3753
+
3754
+ .pf-v6-c-breadcrumb__heading {
3755
+ display: inline;
3756
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3757
+ }
3758
+
3759
+ .pf-v6-c-breadcrumb__link,
3760
+ .pf-v6-c-breadcrumb__heading {
3761
+ white-space: normal;
3762
+ }
3763
+
3764
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3765
+ display: none;
3767
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);