@patternfly/react-templates 6.3.1-prerelease.12 → 6.3.1-prerelease.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +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-B6DFSyVH.css → output-BMRBti_T.css} +685 -684
  6. package/dist/umd/react-templates.min.js +1 -1
  7. package/package.json +3 -3
package/dist/umd/assets/{output-B6DFSyVH.css → output-BMRBti_T.css} RENAMED
@@ -3,6 +3,250 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
+ .pf-v6-c-text-input-group {
7
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
8
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
9
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
11
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
12
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
13
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
14
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
15
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
16
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
17
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
18
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
19
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
20
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
21
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
22
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
23
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
24
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
26
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
27
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
28
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
29
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
30
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
31
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
32
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
33
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
34
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
35
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
36
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
37
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
38
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
39
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
40
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
41
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
42
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
43
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
44
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
45
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
46
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
47
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
48
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
49
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
50
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
51
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
52
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
53
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
54
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
55
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
56
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
57
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
58
+ }
59
+
60
+ .pf-v6-c-text-input-group {
61
+ position: relative;
62
+ display: flex;
63
+ width: 100%;
64
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
65
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
66
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
67
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
68
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
69
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
70
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
71
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
72
+ }
73
+
74
+ .pf-v6-c-text-input-group::before {
75
+ position: absolute;
76
+ inset: 0;
77
+ pointer-events: none;
78
+ content: "";
79
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
80
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
81
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
82
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
83
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
84
+ }
85
+
86
+ .pf-v6-c-text-input-group.pf-m-disabled {
87
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
88
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
89
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
90
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
91
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
92
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
93
+ pointer-events: none;
94
+ }
95
+
96
+ .pf-v6-c-text-input-group.pf-m-plain {
97
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
98
+ }
99
+
100
+ .pf-v6-c-text-input-group.pf-m-plain::before {
101
+ border: 0;
102
+ }
103
+
104
+ .pf-v6-c-text-input-group.pf-m-success {
105
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
106
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
107
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
108
+ }
109
+
110
+ .pf-v6-c-text-input-group.pf-m-warning {
111
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
112
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
113
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
114
+ }
115
+
116
+ .pf-v6-c-text-input-group.pf-m-error {
117
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
118
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
119
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
120
+ }
121
+
122
+ @media (prefers-reduced-motion: no-preference) {
123
+ .pf-v6-c-text-input-group.pf-m-error {
124
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
125
+ animation-name: pf-v6-global-danger-jiggle-motion;
126
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
127
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
128
+ animation-fill-mode: both;
129
+ }
130
+ }
131
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
132
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
133
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
134
+ animation-name: pf-v6-global-fade-in;
135
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
136
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
137
+ }
138
+
139
+ .pf-v6-c-text-input-group:hover {
140
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
141
+ }
142
+
143
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
144
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
145
+ }
146
+
147
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
148
+ --pf-v6-c-text-input-group__text--Position: relative;
149
+ }
150
+
151
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
152
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
153
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
154
+ }
155
+
156
+ .pf-v6-c-text-input-group__main {
157
+ display: flex;
158
+ flex: 1;
159
+ flex-wrap: wrap;
160
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
161
+ min-width: 0;
162
+ }
163
+
164
+ .pf-v6-c-text-input-group__main.pf-m-icon {
165
+ --pf-v6-c-text-input-group__text--Position: relative;
166
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
167
+ display: inline-flex;
168
+ align-items: center;
169
+ justify-content: center;
170
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
171
+ }
172
+
173
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
174
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
175
+ }
176
+
177
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
178
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
179
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
180
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
181
+ }
182
+
183
+ .pf-v6-c-text-input-group__text {
184
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
185
+ display: inline-grid;
186
+ flex: 1;
187
+ grid-template-areas: "text-input";
188
+ grid-template-columns: 1fr;
189
+ }
190
+
191
+ .pf-v6-c-text-input-group__icon {
192
+ position: absolute;
193
+ inset-block-start: 50%;
194
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
195
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
196
+ color: var(--pf-v6-c-text-input-group__icon--Color);
197
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
198
+ }
199
+
200
+ .pf-v6-c-text-input-group__icon.pf-m-status {
201
+ inset-inline-start: auto;
202
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
203
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
204
+ }
205
+
206
+ .pf-v6-c-text-input-group__text-input {
207
+ overflow: hidden;
208
+ text-overflow: ellipsis;
209
+ white-space: nowrap;
210
+ position: relative;
211
+ width: 100%;
212
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
213
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
214
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
215
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
216
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
217
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
218
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
219
+ border: 0;
220
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
221
+ }
222
+
223
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
224
+ grid-area: text-input;
225
+ }
226
+
227
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
228
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
229
+ }
230
+
231
+ .pf-v6-c-text-input-group__text-input::placeholder {
232
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
233
+ }
234
+
235
+ .pf-v6-c-text-input-group__utilities {
236
+ display: flex;
237
+ align-items: center;
238
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
239
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
240
+ }
241
+
242
+ .pf-v6-c-text-input-group__utilities > * + * {
243
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
244
+ }
245
+
246
+ .pf-v6-c-text-input-group__group {
247
+ display: flex;
248
+ }
249
+
6
250
  .pf-v6-c-menu-toggle {
7
251
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
8
252
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -565,235 +809,86 @@
565
809
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
566
810
  }
567
811
 
568
- .pf-v6-c-label-group {
569
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
570
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
571
- --pf-v6-c-label-group--MaxWidth: 100%;
572
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
573
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
574
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
575
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
576
- --pf-v6-c-label-group__main--MaxWidth: 100%;
577
- --pf-v6-c-label-group__main--MinWidth: 0;
578
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
579
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
580
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
581
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
582
- --pf-v6-c-label-group__list--MaxWidth: 100%;
583
- --pf-v6-c-label-group__list--MinWidth: 0;
584
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
585
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
586
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
587
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
588
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
589
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
590
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
591
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
592
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
593
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
594
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
595
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
596
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
597
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
598
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
599
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
600
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
601
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
602
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
603
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
604
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
605
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
606
- }
607
-
608
- .pf-v6-c-label-group {
609
- display: inline-flex;
610
- row-gap: var(--pf-v6-c-label-group--RowGap);
611
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
612
- align-items: center;
613
- max-width: var(--pf-v6-c-label-group--MaxWidth);
614
- }
615
-
616
- .pf-v6-c-label-group.pf-m-category {
617
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
618
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
619
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
620
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
621
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
622
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
623
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
624
- }
625
-
626
- .pf-v6-c-label-group.pf-m-vertical {
627
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
628
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
629
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
630
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
631
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
632
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
633
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
634
- }
635
-
636
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
637
- align-items: flex-start;
638
- }
639
-
640
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
641
- flex-direction: column;
642
- align-items: flex-start;
643
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
644
- }
645
-
646
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
647
- flex-direction: column;
648
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
649
- }
650
-
651
- .pf-v6-c-label-group.pf-m-editable,
652
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
653
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
654
- display: flex;
655
- }
656
-
657
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
658
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
659
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
660
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
661
- flex: 1;
662
- }
663
-
664
- .pf-v6-c-label-group__main {
665
- display: flex;
666
- flex: 1;
667
- flex-wrap: wrap;
668
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
669
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
670
- align-items: baseline;
671
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
672
- }
673
-
674
- .pf-v6-c-label-group__list {
675
- display: inline-flex;
676
- flex-wrap: wrap;
677
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
678
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
679
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
680
- }
681
-
682
- .pf-v6-c-label-group__list-item {
683
- display: inline-flex;
684
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
685
- }
686
-
687
- .pf-v6-c-label-group__label {
688
- overflow: hidden;
689
- text-overflow: ellipsis;
690
- white-space: nowrap;
691
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
692
- }
693
-
694
- .pf-v6-c-label-group__close {
695
- display: flex;
696
- align-self: flex-start;
812
+ .pf-v6-c-check {
813
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
814
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
815
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
816
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
817
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
818
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
819
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
820
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
821
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
822
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
823
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
824
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
825
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
826
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
697
827
  }
698
828
 
699
- .pf-v6-c-label-group__close .pf-v6-c-button {
700
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
701
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
702
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
703
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
704
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
829
+ .pf-v6-c-check {
830
+ display: grid;
831
+ grid-template-columns: auto 1fr;
832
+ grid-gap: var(--pf-v6-c-check--GridGap);
833
+ accent-color: var(--pf-v6-c-check--AccentColor);
705
834
  }
706
835
 
707
- .pf-v6-c-label-group__textarea {
708
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
709
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
710
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
711
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
712
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
713
- white-space: nowrap;
714
- resize: none;
715
- border: 0;
716
- -ms-overflow-style: none;
717
- scrollbar-width: none;
836
+ .pf-v6-c-check.pf-m-standalone {
837
+ display: inline-grid;
838
+ grid-template-columns: auto;
839
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
718
840
  }
719
841
 
720
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
721
- display: none;
842
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
843
+ align-self: center;
844
+ transform: none;
722
845
  }
723
846
 
724
- .pf-v6-c-badge {
725
- --pf-v6-c-badge--BorderColor: transparent;
726
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
727
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
728
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
729
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
730
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
731
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
732
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
733
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
734
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
735
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
736
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
737
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
738
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
739
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
740
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
741
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
742
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
743
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
744
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
745
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
847
+ .pf-v6-c-check__input {
848
+ align-self: start;
849
+ font-size: var(--pf-v6-c-check__label--FontSize);
850
+ line-height: var(--pf-v6-c-check__label--LineHeight);
851
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
746
852
  }
747
853
 
748
- .pf-v6-c-badge {
749
- position: relative;
750
- display: inline-block;
751
- min-width: var(--pf-v6-c-badge--MinWidth);
752
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
753
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
754
- font-size: var(--pf-v6-c-badge--FontSize);
755
- font-weight: var(--pf-v6-c-badge--FontWeight);
756
- color: var(--pf-v6-c-badge--Color);
757
- text-align: center;
758
- white-space: nowrap;
759
- background-color: var(--pf-v6-c-badge--BackgroundColor);
760
- border-radius: var(--pf-v6-c-badge--BorderRadius);
854
+ .pf-v6-c-check__label {
855
+ font-size: var(--pf-v6-c-check__label--FontSize);
856
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
857
+ line-height: var(--pf-v6-c-check__label--LineHeight);
858
+ color: var(--pf-v6-c-check__label--Color);
761
859
  }
762
860
 
763
- .pf-v6-c-badge::after {
764
- position: absolute;
765
- inset: 0;
766
- pointer-events: none;
767
- content: "";
768
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
769
- border-radius: inherit;
861
+ .pf-v6-c-check__description {
862
+ grid-column: 2;
863
+ font-size: var(--pf-v6-c-check__description--FontSize);
864
+ color: var(--pf-v6-c-check__description--Color);
770
865
  }
771
866
 
772
- .pf-v6-c-badge.pf-m-read {
773
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
774
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
775
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
776
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
867
+ .pf-v6-c-check__body {
868
+ grid-column: 2;
777
869
  }
778
870
 
779
- .pf-v6-c-badge.pf-m-unread {
780
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
781
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
782
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
871
+ .pf-v6-c-check__label,
872
+ .pf-v6-c-check__input {
873
+ justify-self: start;
783
874
  }
784
875
 
785
- .pf-v6-c-badge.pf-m-disabled {
786
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
787
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
876
+ label.pf-v6-c-check, .pf-v6-c-check__label,
877
+ .pf-v6-c-check__input {
878
+ cursor: pointer;
788
879
  }
789
880
 
790
- .pf-v6-c-badge.pf-m-disabled::after {
791
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
881
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
882
+ .pf-v6-c-check__input:disabled,
883
+ .pf-v6-c-check__input.pf-m-disabled {
884
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
885
+ cursor: not-allowed;
792
886
  }
793
887
 
794
- .pf-v6-c-badge__toggle-icon {
795
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
796
- color: var(--pf-v6-c-badge__toggle-icon--Color);
888
+ .pf-v6-c-check__label-required {
889
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
890
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
891
+ color: var(--pf-v6-c-check__label-required--Color);
797
892
  }
798
893
 
799
894
  .pf-v6-c-label {
@@ -1339,332 +1434,6 @@ input.pf-v6-c-label__content {
1339
1434
  --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1340
1435
  }
1341
1436
 
1342
- .pf-v6-c-check {
1343
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1344
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1345
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1346
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1347
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1348
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1349
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1350
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1351
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1352
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1353
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1354
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1355
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1356
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1357
- }
1358
-
1359
- .pf-v6-c-check {
1360
- display: grid;
1361
- grid-template-columns: auto 1fr;
1362
- grid-gap: var(--pf-v6-c-check--GridGap);
1363
- accent-color: var(--pf-v6-c-check--AccentColor);
1364
- }
1365
-
1366
- .pf-v6-c-check.pf-m-standalone {
1367
- display: inline-grid;
1368
- grid-template-columns: auto;
1369
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1370
- }
1371
-
1372
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1373
- align-self: center;
1374
- transform: none;
1375
- }
1376
-
1377
- .pf-v6-c-check__input {
1378
- align-self: start;
1379
- font-size: var(--pf-v6-c-check__label--FontSize);
1380
- line-height: var(--pf-v6-c-check__label--LineHeight);
1381
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1382
- }
1383
-
1384
- .pf-v6-c-check__label {
1385
- font-size: var(--pf-v6-c-check__label--FontSize);
1386
- font-weight: var(--pf-v6-c-check__label--FontWeight);
1387
- line-height: var(--pf-v6-c-check__label--LineHeight);
1388
- color: var(--pf-v6-c-check__label--Color);
1389
- }
1390
-
1391
- .pf-v6-c-check__description {
1392
- grid-column: 2;
1393
- font-size: var(--pf-v6-c-check__description--FontSize);
1394
- color: var(--pf-v6-c-check__description--Color);
1395
- }
1396
-
1397
- .pf-v6-c-check__body {
1398
- grid-column: 2;
1399
- }
1400
-
1401
- .pf-v6-c-check__label,
1402
- .pf-v6-c-check__input {
1403
- justify-self: start;
1404
- }
1405
-
1406
- label.pf-v6-c-check, .pf-v6-c-check__label,
1407
- .pf-v6-c-check__input {
1408
- cursor: pointer;
1409
- }
1410
-
1411
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1412
- .pf-v6-c-check__input:disabled,
1413
- .pf-v6-c-check__input.pf-m-disabled {
1414
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1415
- cursor: not-allowed;
1416
- }
1417
-
1418
- .pf-v6-c-check__label-required {
1419
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1420
- font-size: var(--pf-v6-c-check__label-required--FontSize);
1421
- color: var(--pf-v6-c-check__label-required--Color);
1422
- }
1423
-
1424
- .pf-v6-c-text-input-group {
1425
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1426
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
1427
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1428
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1429
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1430
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1431
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1432
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1433
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1434
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1435
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1436
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1437
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1438
- --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));
1439
- --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));
1440
- --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));
1441
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1442
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1443
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
1444
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1445
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1446
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1447
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1448
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1449
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1450
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1451
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1452
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1453
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1454
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1455
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1456
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1457
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
1458
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1459
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1460
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1461
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1462
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1463
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1464
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1465
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1466
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1467
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1468
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1469
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1470
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1471
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1472
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1473
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1474
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1475
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1476
- }
1477
-
1478
- .pf-v6-c-text-input-group {
1479
- position: relative;
1480
- display: flex;
1481
- width: 100%;
1482
- font-size: var(--pf-v6-c-text-input-group__FontSize);
1483
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
1484
- color: var(--pf-v6-c-text-input-group--Color, inherit);
1485
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1486
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1487
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1488
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1489
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1490
- }
1491
-
1492
- .pf-v6-c-text-input-group::before {
1493
- position: absolute;
1494
- inset: 0;
1495
- pointer-events: none;
1496
- content: "";
1497
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1498
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1499
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1500
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1501
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1502
- }
1503
-
1504
- .pf-v6-c-text-input-group.pf-m-disabled {
1505
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1506
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1507
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1508
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1509
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1510
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1511
- pointer-events: none;
1512
- }
1513
-
1514
- .pf-v6-c-text-input-group.pf-m-plain {
1515
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
1516
- }
1517
-
1518
- .pf-v6-c-text-input-group.pf-m-plain::before {
1519
- border: 0;
1520
- }
1521
-
1522
- .pf-v6-c-text-input-group.pf-m-success {
1523
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1524
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1525
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1526
- }
1527
-
1528
- .pf-v6-c-text-input-group.pf-m-warning {
1529
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1530
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1531
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1532
- }
1533
-
1534
- .pf-v6-c-text-input-group.pf-m-error {
1535
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1536
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1537
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1538
- }
1539
-
1540
- @media (prefers-reduced-motion: no-preference) {
1541
- .pf-v6-c-text-input-group.pf-m-error {
1542
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1543
- animation-name: pf-v6-global-danger-jiggle-motion;
1544
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1545
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1546
- animation-fill-mode: both;
1547
- }
1548
- }
1549
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1550
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1551
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1552
- animation-name: pf-v6-global-fade-in;
1553
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1554
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1555
- }
1556
-
1557
- .pf-v6-c-text-input-group:hover {
1558
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1559
- }
1560
-
1561
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1562
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1563
- }
1564
-
1565
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1566
- --pf-v6-c-text-input-group__text--Position: relative;
1567
- }
1568
-
1569
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1570
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1571
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1572
- }
1573
-
1574
- .pf-v6-c-text-input-group__main {
1575
- display: flex;
1576
- flex: 1;
1577
- flex-wrap: wrap;
1578
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1579
- min-width: 0;
1580
- }
1581
-
1582
- .pf-v6-c-text-input-group__main.pf-m-icon {
1583
- --pf-v6-c-text-input-group__text--Position: relative;
1584
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1585
- display: inline-flex;
1586
- align-items: center;
1587
- justify-content: center;
1588
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1589
- }
1590
-
1591
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1592
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1593
- }
1594
-
1595
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1596
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1597
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1598
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1599
- }
1600
-
1601
- .pf-v6-c-text-input-group__text {
1602
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
1603
- display: inline-grid;
1604
- flex: 1;
1605
- grid-template-areas: "text-input";
1606
- grid-template-columns: 1fr;
1607
- }
1608
-
1609
- .pf-v6-c-text-input-group__icon {
1610
- position: absolute;
1611
- inset-block-start: 50%;
1612
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1613
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1614
- color: var(--pf-v6-c-text-input-group__icon--Color);
1615
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1616
- }
1617
-
1618
- .pf-v6-c-text-input-group__icon.pf-m-status {
1619
- inset-inline-start: auto;
1620
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1621
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1622
- }
1623
-
1624
- .pf-v6-c-text-input-group__text-input {
1625
- overflow: hidden;
1626
- text-overflow: ellipsis;
1627
- white-space: nowrap;
1628
- position: relative;
1629
- width: 100%;
1630
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1631
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1632
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1633
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1634
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1635
- color: var(--pf-v6-c-text-input-group__text-input--Color);
1636
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1637
- border: 0;
1638
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1639
- }
1640
-
1641
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1642
- grid-area: text-input;
1643
- }
1644
-
1645
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
1646
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1647
- }
1648
-
1649
- .pf-v6-c-text-input-group__text-input::placeholder {
1650
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1651
- }
1652
-
1653
- .pf-v6-c-text-input-group__utilities {
1654
- display: flex;
1655
- align-items: center;
1656
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1657
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1658
- }
1659
-
1660
- .pf-v6-c-text-input-group__utilities > * + * {
1661
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1662
- }
1663
-
1664
- .pf-v6-c-text-input-group__group {
1665
- display: flex;
1666
- }
1667
-
1668
1437
  .pf-v6-c-button {
1669
1438
  --pf-v6-c-button--Display: inline-flex;
1670
1439
  --pf-v6-c-button--AlignItems: baseline;
@@ -2876,207 +2645,235 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2876
2645
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2877
2646
  }
2878
2647
  }
2879
- .pf-v6-c-spinner {
2880
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
2881
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
2882
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
2883
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
2884
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
2885
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
2886
- --pf-v6-c-spinner--StrokeWidth: 10;
2887
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
2888
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
2889
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
2890
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
2891
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
2892
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
2893
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
2894
- --pf-v6-c-spinner--m-inline--diameter: 1em;
2648
+ .pf-v6-c-label-group {
2649
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2650
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2651
+ --pf-v6-c-label-group--MaxWidth: 100%;
2652
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2653
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2654
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2655
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2656
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
2657
+ --pf-v6-c-label-group__main--MinWidth: 0;
2658
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2659
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2660
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2661
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2662
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
2663
+ --pf-v6-c-label-group__list--MinWidth: 0;
2664
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2665
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2666
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2667
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2668
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2669
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2670
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2671
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2672
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2673
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2674
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2675
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
2676
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2677
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2678
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2679
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2680
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2681
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2682
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2683
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2684
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2685
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2895
2686
  }
2896
2687
 
2897
- .pf-v6-c-spinner {
2898
- width: var(--pf-v6-c-spinner--Width);
2899
- height: var(--pf-v6-c-spinner--Height);
2900
- overflow: hidden;
2901
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
2688
+ .pf-v6-c-label-group {
2689
+ display: inline-flex;
2690
+ row-gap: var(--pf-v6-c-label-group--RowGap);
2691
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
2692
+ align-items: center;
2693
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
2902
2694
  }
2903
2695
 
2904
- .pf-v6-c-spinner.pf-m-inline {
2905
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
2696
+ .pf-v6-c-label-group.pf-m-category {
2697
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2698
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2699
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2700
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2701
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2702
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2703
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2906
2704
  }
2907
2705
 
2908
- .pf-v6-c-spinner.pf-m-xs {
2909
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
2910
- --pf-v6-c-spinner--StrokeWidth: 15;
2706
+ .pf-v6-c-label-group.pf-m-vertical {
2707
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2708
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2709
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2710
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2711
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2712
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2713
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2911
2714
  }
2912
2715
 
2913
- .pf-v6-c-spinner.pf-m-sm {
2914
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
2716
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2717
+ align-items: flex-start;
2915
2718
  }
2916
2719
 
2917
- .pf-v6-c-spinner.pf-m-md {
2918
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
2720
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2721
+ flex-direction: column;
2722
+ align-items: flex-start;
2723
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2919
2724
  }
2920
2725
 
2921
- .pf-v6-c-spinner.pf-m-lg {
2922
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
2726
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2727
+ flex-direction: column;
2728
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2923
2729
  }
2924
2730
 
2925
- .pf-v6-c-spinner.pf-m-xl {
2926
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
2731
+ .pf-v6-c-label-group.pf-m-editable,
2732
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2733
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2734
+ display: flex;
2927
2735
  }
2928
2736
 
2929
- .pf-v6-c-spinner__path {
2930
- width: 100%;
2931
- height: 100%;
2932
- stroke: var(--pf-v6-c-spinner--Color);
2933
- stroke-dasharray: 283;
2934
- stroke-dashoffset: 280;
2935
- stroke-linecap: round;
2936
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
2937
- transform-origin: 50% 50%;
2938
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
2737
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2738
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2739
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2740
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2741
+ flex: 1;
2939
2742
  }
2940
2743
 
2941
- @keyframes pf-v6-c-spinner-animation-rotate {
2942
- 0% {
2943
- transform: rotate(0deg);
2944
- }
2945
- 100% {
2946
- transform: rotate(360deg);
2947
- }
2948
- }
2949
- @keyframes pf-v6-c-spinner-animation-dash {
2950
- 0% {
2951
- stroke-dashoffset: 280;
2952
- transform: rotate(0);
2953
- }
2954
- 15% {
2955
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
2956
- }
2957
- 40% {
2958
- stroke-dasharray: 220;
2959
- stroke-dashoffset: 150;
2960
- }
2961
- 100% {
2962
- stroke-dashoffset: 280;
2963
- transform: rotate(720deg);
2964
- }
2965
- }
2966
- .pf-v6-c-breadcrumb {
2967
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2968
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
2969
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2970
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
2971
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2972
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
2973
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2974
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2975
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
2976
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2977
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2978
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
2979
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2980
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2981
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
2982
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
2983
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
2984
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2985
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2986
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2987
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2744
+ .pf-v6-c-label-group__main {
2745
+ display: flex;
2746
+ flex: 1;
2747
+ flex-wrap: wrap;
2748
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
2749
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2750
+ align-items: baseline;
2751
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2988
2752
  }
2989
2753
 
2990
- .pf-v6-c-breadcrumb {
2754
+ .pf-v6-c-label-group__list {
2991
2755
  display: inline-flex;
2992
- }
2993
-
2994
- .pf-v6-c-breadcrumb__list {
2995
- display: flex;
2996
2756
  flex-wrap: wrap;
2997
- align-items: center;
2757
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
2758
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2759
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2998
2760
  }
2999
2761
 
3000
- .pf-v6-c-breadcrumb__item {
3001
- display: flex;
3002
- align-items: baseline;
3003
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3004
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3005
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3006
- white-space: nowrap;
3007
- list-style: none;
2762
+ .pf-v6-c-label-group__list-item {
2763
+ display: inline-flex;
2764
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
3008
2765
  }
3009
2766
 
3010
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3011
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2767
+ .pf-v6-c-label-group__label {
2768
+ overflow: hidden;
2769
+ text-overflow: ellipsis;
2770
+ white-space: nowrap;
2771
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
3012
2772
  }
3013
2773
 
3014
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3015
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2774
+ .pf-v6-c-label-group__close {
2775
+ display: flex;
2776
+ align-self: flex-start;
3016
2777
  }
3017
2778
 
3018
- .pf-v6-c-breadcrumb__item-divider {
3019
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3020
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3021
- line-height: 1;
3022
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
2779
+ .pf-v6-c-label-group__close .pf-v6-c-button {
2780
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2781
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2782
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2783
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2784
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
3023
2785
  }
3024
2786
 
3025
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3026
- scale: -1 1;
2787
+ .pf-v6-c-label-group__textarea {
2788
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2789
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2790
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2791
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2792
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2793
+ white-space: nowrap;
2794
+ resize: none;
2795
+ border: 0;
2796
+ -ms-overflow-style: none;
2797
+ scrollbar-width: none;
3027
2798
  }
3028
2799
 
3029
- .pf-v6-c-breadcrumb__link {
3030
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3031
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3032
- font-size: inherit;
3033
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3034
- line-height: inherit;
3035
- color: var(--pf-v6-c-breadcrumb__link--Color);
3036
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3037
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3038
- word-break: break-word;
3039
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2800
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2801
+ display: none;
3040
2802
  }
3041
2803
 
3042
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3043
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3044
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3045
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
2804
+ .pf-v6-c-badge {
2805
+ --pf-v6-c-badge--BorderColor: transparent;
2806
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2807
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2808
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2809
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2810
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2811
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2812
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2813
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2814
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2815
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2816
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2817
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2818
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2819
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2820
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2821
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2822
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2823
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2824
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2825
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
3046
2826
  }
3047
2827
 
3048
- .pf-v6-c-breadcrumb__link.pf-m-current {
3049
- cursor: default;
2828
+ .pf-v6-c-badge {
2829
+ position: relative;
2830
+ display: inline-block;
2831
+ min-width: var(--pf-v6-c-badge--MinWidth);
2832
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2833
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2834
+ font-size: var(--pf-v6-c-badge--FontSize);
2835
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2836
+ color: var(--pf-v6-c-badge--Color);
2837
+ text-align: center;
2838
+ white-space: nowrap;
2839
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2840
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
3050
2841
  }
3051
2842
 
3052
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3053
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3054
- text-decoration-line: none;
2843
+ .pf-v6-c-badge::after {
2844
+ position: absolute;
2845
+ inset: 0;
2846
+ pointer-events: none;
2847
+ content: "";
2848
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2849
+ border-radius: inherit;
3055
2850
  }
3056
2851
 
3057
- button.pf-v6-c-breadcrumb__link {
3058
- border: none;
2852
+ .pf-v6-c-badge.pf-m-read {
2853
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2854
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2855
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2856
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
3059
2857
  }
3060
2858
 
3061
- .pf-v6-c-breadcrumb__dropdown {
3062
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3063
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3064
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3065
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
2859
+ .pf-v6-c-badge.pf-m-unread {
2860
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2861
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2862
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
3066
2863
  }
3067
2864
 
3068
- .pf-v6-c-breadcrumb__heading {
3069
- display: inline;
3070
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2865
+ .pf-v6-c-badge.pf-m-disabled {
2866
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2867
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
3071
2868
  }
3072
2869
 
3073
- .pf-v6-c-breadcrumb__link,
3074
- .pf-v6-c-breadcrumb__heading {
3075
- white-space: normal;
2870
+ .pf-v6-c-badge.pf-m-disabled::after {
2871
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
3076
2872
  }
3077
2873
 
3078
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3079
- display: none;
2874
+ .pf-v6-c-badge__toggle-icon {
2875
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2876
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
3080
2877
  }
3081
2878
 
3082
2879
  .pf-v6-c-menu {
@@ -3756,6 +3553,122 @@ button.pf-v6-c-breadcrumb__link {
3756
3553
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3757
3554
  }
3758
3555
 
3556
+ .pf-v6-c-breadcrumb {
3557
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3558
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3559
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3560
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3561
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3562
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3563
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3564
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3565
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3566
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3567
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3568
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3569
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3570
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3571
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3572
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3573
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3574
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3575
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3576
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3577
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3578
+ }
3579
+
3580
+ .pf-v6-c-breadcrumb {
3581
+ display: inline-flex;
3582
+ }
3583
+
3584
+ .pf-v6-c-breadcrumb__list {
3585
+ display: flex;
3586
+ flex-wrap: wrap;
3587
+ align-items: center;
3588
+ }
3589
+
3590
+ .pf-v6-c-breadcrumb__item {
3591
+ display: flex;
3592
+ align-items: baseline;
3593
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3594
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3595
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3596
+ white-space: nowrap;
3597
+ list-style: none;
3598
+ }
3599
+
3600
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3601
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3602
+ }
3603
+
3604
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3605
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3606
+ }
3607
+
3608
+ .pf-v6-c-breadcrumb__item-divider {
3609
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3610
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3611
+ line-height: 1;
3612
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3613
+ }
3614
+
3615
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3616
+ scale: -1 1;
3617
+ }
3618
+
3619
+ .pf-v6-c-breadcrumb__link {
3620
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3621
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3622
+ font-size: inherit;
3623
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3624
+ line-height: inherit;
3625
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3626
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3627
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3628
+ word-break: break-word;
3629
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3630
+ }
3631
+
3632
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3633
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3634
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3635
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3636
+ }
3637
+
3638
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3639
+ cursor: default;
3640
+ }
3641
+
3642
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3643
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3644
+ text-decoration-line: none;
3645
+ }
3646
+
3647
+ button.pf-v6-c-breadcrumb__link {
3648
+ border: none;
3649
+ }
3650
+
3651
+ .pf-v6-c-breadcrumb__dropdown {
3652
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3653
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3654
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3655
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3656
+ }
3657
+
3658
+ .pf-v6-c-breadcrumb__heading {
3659
+ display: inline;
3660
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3661
+ }
3662
+
3663
+ .pf-v6-c-breadcrumb__link,
3664
+ .pf-v6-c-breadcrumb__heading {
3665
+ white-space: normal;
3666
+ }
3667
+
3668
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3669
+ display: none;
3670
+ }
3671
+
3759
3672
  .pf-v6-c-tooltip {
3760
3673
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3761
3674
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3885,4 +3798,92 @@ button.pf-v6-c-breadcrumb__link {
3885
3798
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3886
3799
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3887
3800
  transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3801
+ }
3802
+
3803
+ .pf-v6-c-spinner {
3804
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3805
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3806
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3807
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3808
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3809
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3810
+ --pf-v6-c-spinner--StrokeWidth: 10;
3811
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3812
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3813
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3814
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3815
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3816
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3817
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3818
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3819
+ }
3820
+
3821
+ .pf-v6-c-spinner {
3822
+ width: var(--pf-v6-c-spinner--Width);
3823
+ height: var(--pf-v6-c-spinner--Height);
3824
+ overflow: hidden;
3825
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3826
+ }
3827
+
3828
+ .pf-v6-c-spinner.pf-m-inline {
3829
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3830
+ }
3831
+
3832
+ .pf-v6-c-spinner.pf-m-xs {
3833
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3834
+ --pf-v6-c-spinner--StrokeWidth: 15;
3835
+ }
3836
+
3837
+ .pf-v6-c-spinner.pf-m-sm {
3838
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3839
+ }
3840
+
3841
+ .pf-v6-c-spinner.pf-m-md {
3842
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3843
+ }
3844
+
3845
+ .pf-v6-c-spinner.pf-m-lg {
3846
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3847
+ }
3848
+
3849
+ .pf-v6-c-spinner.pf-m-xl {
3850
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3851
+ }
3852
+
3853
+ .pf-v6-c-spinner__path {
3854
+ width: 100%;
3855
+ height: 100%;
3856
+ stroke: var(--pf-v6-c-spinner--Color);
3857
+ stroke-dasharray: 283;
3858
+ stroke-dashoffset: 280;
3859
+ stroke-linecap: round;
3860
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3861
+ transform-origin: 50% 50%;
3862
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3863
+ }
3864
+
3865
+ @keyframes pf-v6-c-spinner-animation-rotate {
3866
+ 0% {
3867
+ transform: rotate(0deg);
3868
+ }
3869
+ 100% {
3870
+ transform: rotate(360deg);
3871
+ }
3872
+ }
3873
+ @keyframes pf-v6-c-spinner-animation-dash {
3874
+ 0% {
3875
+ stroke-dashoffset: 280;
3876
+ transform: rotate(0);
3877
+ }
3878
+ 15% {
3879
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3880
+ }
3881
+ 40% {
3882
+ stroke-dasharray: 220;
3883
+ stroke-dashoffset: 150;
3884
+ }
3885
+ 100% {
3886
+ stroke-dashoffset: 280;
3887
+ transform: rotate(720deg);
3888
+ }
3888
3889
  }