@patternfly/react-templates 6.4.1-prerelease.3 → 6.4.1-prerelease.4

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 +4 -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-CcXEzgFd.css → output-DfVuOG22.css} +1170 -1171
  6. package/package.json +3 -3
package/dist/umd/assets/{output-CcXEzgFd.css → output-DfVuOG22.css} RENAMED
@@ -3,250 +3,6 @@
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
-
250
6
  .pf-v6-c-menu-toggle {
251
7
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
252
8
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -809,18 +565,262 @@
809
565
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
810
566
  }
811
567
 
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);
568
+ .pf-v6-c-text-input-group {
569
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
570
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
571
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
572
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
573
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
574
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
575
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
576
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
577
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
578
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
579
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
580
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
581
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
582
+ --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));
583
+ --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));
584
+ --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));
585
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
586
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
587
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
588
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
589
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
590
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
591
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
592
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
593
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
594
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
595
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
596
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
597
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
598
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
599
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
600
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
601
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
602
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
603
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
604
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
605
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
606
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
607
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
608
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
609
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
610
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
611
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
612
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
613
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
614
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
615
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
616
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
617
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
618
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
619
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
620
+ }
621
+
622
+ .pf-v6-c-text-input-group {
623
+ position: relative;
624
+ display: flex;
625
+ width: 100%;
626
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
627
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
628
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
629
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
630
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
631
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
632
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
633
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
634
+ }
635
+
636
+ .pf-v6-c-text-input-group::before {
637
+ position: absolute;
638
+ inset: 0;
639
+ pointer-events: none;
640
+ content: "";
641
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
642
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
643
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
644
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
645
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
646
+ }
647
+
648
+ .pf-v6-c-text-input-group.pf-m-disabled {
649
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
650
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
651
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
652
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
653
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
654
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
655
+ pointer-events: none;
656
+ }
657
+
658
+ .pf-v6-c-text-input-group.pf-m-plain {
659
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
660
+ }
661
+
662
+ .pf-v6-c-text-input-group.pf-m-plain::before {
663
+ border: 0;
664
+ }
665
+
666
+ .pf-v6-c-text-input-group.pf-m-success {
667
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
668
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
669
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
670
+ }
671
+
672
+ .pf-v6-c-text-input-group.pf-m-warning {
673
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
674
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
675
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
676
+ }
677
+
678
+ .pf-v6-c-text-input-group.pf-m-error {
679
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
680
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
681
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
682
+ }
683
+
684
+ @media (prefers-reduced-motion: no-preference) {
685
+ .pf-v6-c-text-input-group.pf-m-error {
686
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
687
+ animation-name: pf-v6-global-danger-jiggle-motion;
688
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
689
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
690
+ animation-fill-mode: both;
691
+ }
692
+ }
693
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
694
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
695
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
696
+ animation-name: pf-v6-global-fade-in;
697
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
698
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
699
+ }
700
+
701
+ .pf-v6-c-text-input-group:hover {
702
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
703
+ }
704
+
705
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
706
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
707
+ }
708
+
709
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
710
+ --pf-v6-c-text-input-group__text--Position: relative;
711
+ }
712
+
713
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
714
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
715
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
716
+ }
717
+
718
+ .pf-v6-c-text-input-group__main {
719
+ display: flex;
720
+ flex: 1;
721
+ flex-wrap: wrap;
722
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
723
+ min-width: 0;
724
+ }
725
+
726
+ .pf-v6-c-text-input-group__main.pf-m-icon {
727
+ --pf-v6-c-text-input-group__text--Position: relative;
728
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
729
+ display: inline-flex;
730
+ align-items: center;
731
+ justify-content: center;
732
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
733
+ }
734
+
735
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
736
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
737
+ }
738
+
739
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
740
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
741
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
742
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
743
+ }
744
+
745
+ .pf-v6-c-text-input-group__text {
746
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
747
+ display: inline-grid;
748
+ flex: 1;
749
+ grid-template-areas: "text-input";
750
+ grid-template-columns: 1fr;
751
+ }
752
+
753
+ .pf-v6-c-text-input-group__icon {
754
+ position: absolute;
755
+ inset-block-start: 50%;
756
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
757
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
758
+ color: var(--pf-v6-c-text-input-group__icon--Color);
759
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
760
+ }
761
+
762
+ .pf-v6-c-text-input-group__icon.pf-m-status {
763
+ inset-inline-start: auto;
764
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
765
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
766
+ }
767
+
768
+ .pf-v6-c-text-input-group__text-input {
769
+ overflow: hidden;
770
+ text-overflow: ellipsis;
771
+ white-space: nowrap;
772
+ position: relative;
773
+ width: 100%;
774
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
775
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
776
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
777
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
778
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
779
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
780
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
781
+ border: 0;
782
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
783
+ }
784
+
785
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
786
+ grid-area: text-input;
787
+ }
788
+
789
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
790
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
791
+ }
792
+
793
+ .pf-v6-c-text-input-group__text-input::placeholder {
794
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
795
+ }
796
+
797
+ .pf-v6-c-text-input-group__utilities {
798
+ display: flex;
799
+ align-items: center;
800
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
801
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
802
+ }
803
+
804
+ .pf-v6-c-text-input-group__utilities > * + * {
805
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
806
+ }
807
+
808
+ .pf-v6-c-text-input-group__group {
809
+ display: flex;
810
+ }
811
+
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
824
  --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
825
825
  --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
826
826
  --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
@@ -891,480 +891,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
891
891
  color: var(--pf-v6-c-check__label-required--Color);
892
892
  }
893
893
 
894
- .pf-v6-c-label-group {
895
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
896
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
897
- --pf-v6-c-label-group--MaxWidth: 100%;
898
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
899
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
900
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
901
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
902
- --pf-v6-c-label-group__main--MaxWidth: 100%;
903
- --pf-v6-c-label-group__main--MinWidth: 0;
904
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
905
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
906
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
907
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
908
- --pf-v6-c-label-group__list--MaxWidth: 100%;
909
- --pf-v6-c-label-group__list--MinWidth: 0;
910
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
911
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
912
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
913
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
914
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
915
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
916
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
917
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
918
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
919
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
920
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
921
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
922
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
923
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
924
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
925
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
926
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
927
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
928
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
929
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
930
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
931
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
932
- }
933
-
934
- .pf-v6-c-label-group {
935
- display: inline-flex;
936
- row-gap: var(--pf-v6-c-label-group--RowGap);
937
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
938
- align-items: center;
939
- max-width: var(--pf-v6-c-label-group--MaxWidth);
940
- }
941
-
942
- .pf-v6-c-label-group.pf-m-category {
943
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
944
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
945
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
946
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
947
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
948
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
949
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
950
- }
951
-
952
- .pf-v6-c-label-group.pf-m-vertical {
953
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
954
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
955
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
956
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
957
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
958
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
959
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
960
- }
961
-
962
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
963
- align-items: flex-start;
964
- }
965
-
966
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
967
- flex-direction: column;
968
- align-items: flex-start;
969
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
970
- }
971
-
972
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
973
- flex-direction: column;
974
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
975
- }
976
-
977
- .pf-v6-c-label-group.pf-m-editable,
978
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
979
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
980
- display: flex;
981
- }
982
-
983
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
984
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
985
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
986
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
987
- flex: 1;
988
- }
989
-
990
- .pf-v6-c-label-group__main {
991
- display: flex;
992
- flex: 1;
993
- flex-wrap: wrap;
994
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
995
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
996
- align-items: baseline;
997
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
998
- }
999
-
1000
- .pf-v6-c-label-group__list {
1001
- display: inline-flex;
1002
- flex-wrap: wrap;
1003
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1004
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1005
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1006
- }
1007
-
1008
- .pf-v6-c-label-group__list-item {
1009
- display: inline-flex;
1010
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1011
- }
1012
-
1013
- .pf-v6-c-label-group__label {
1014
- overflow: hidden;
1015
- text-overflow: ellipsis;
1016
- white-space: nowrap;
1017
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1018
- }
1019
-
1020
- .pf-v6-c-label-group__close {
1021
- display: flex;
1022
- align-self: flex-start;
1023
- }
1024
-
1025
- .pf-v6-c-label-group__close .pf-v6-c-button {
1026
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1027
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1028
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1029
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1030
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1031
- }
1032
-
1033
- .pf-v6-c-label-group__textarea {
1034
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1035
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1036
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1037
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1038
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1039
- white-space: nowrap;
1040
- resize: none;
1041
- border: 0;
1042
- -ms-overflow-style: none;
1043
- scrollbar-width: none;
1044
- }
1045
-
1046
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1047
- display: none;
1048
- }
1049
-
1050
- .pf-v6-c-divider {
1051
- --pf-v6-c-divider--Display: flex;
1052
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1053
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1054
- --pf-v6-c-divider--before--FlexBasis: 100%;
1055
- }
1056
-
1057
- .pf-v6-c-divider {
1058
- flex-direction: row;
1059
- width: 100%;
1060
- height: var(--pf-v6-c-divider--Size);
1061
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1062
- --pf-v6-hidden-visible--hidden--Display: none;
1063
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1064
- display: var(--pf-v6-hidden-visible--Display);
1065
- flex-shrink: 0;
1066
- align-items: stretch;
1067
- align-self: stretch;
1068
- justify-content: center;
1069
- border: 0;
1070
- }
1071
-
1072
- .pf-v6-c-divider.pf-m-hidden {
1073
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1074
- }
1075
-
1076
- @media screen and (min-width: 36rem) {
1077
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1078
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1079
- }
1080
- .pf-v6-c-divider.pf-m-visible-on-sm {
1081
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1082
- }
1083
- }
1084
- @media screen and (min-width: 48rem) {
1085
- .pf-v6-c-divider.pf-m-hidden-on-md {
1086
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1087
- }
1088
- .pf-v6-c-divider.pf-m-visible-on-md {
1089
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1090
- }
1091
- }
1092
- @media screen and (min-width: 62rem) {
1093
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1094
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1095
- }
1096
- .pf-v6-c-divider.pf-m-visible-on-lg {
1097
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1098
- }
1099
- }
1100
- @media screen and (min-width: 75rem) {
1101
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1102
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1103
- }
1104
- .pf-v6-c-divider.pf-m-visible-on-xl {
1105
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1106
- }
1107
- }
1108
- @media screen and (min-width: 90.625rem) {
1109
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1110
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1111
- }
1112
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1113
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1114
- }
1115
- }
1116
- .pf-v6-c-divider::before {
1117
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1118
- content: "";
1119
- background-color: var(--pf-v6-c-divider--Color);
1120
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
1121
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
1122
- }
1123
-
1124
- .pf-v6-c-divider.pf-m-horizontal {
1125
- flex-direction: row;
1126
- width: 100%;
1127
- height: var(--pf-v6-c-divider--Size);
1128
- }
1129
-
1130
- .pf-v6-c-divider.pf-m-vertical {
1131
- flex-direction: column;
1132
- width: var(--pf-v6-c-divider--Size);
1133
- height: inherit;
1134
- }
1135
-
1136
- .pf-v6-c-divider.pf-m-inset-none {
1137
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1138
- }
1139
-
1140
- .pf-v6-c-divider.pf-m-inset-xs {
1141
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1142
- }
1143
-
1144
- .pf-v6-c-divider.pf-m-inset-sm {
1145
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1146
- }
1147
-
1148
- .pf-v6-c-divider.pf-m-inset-md {
1149
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1150
- }
1151
-
1152
- .pf-v6-c-divider.pf-m-inset-lg {
1153
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1154
- }
1155
-
1156
- .pf-v6-c-divider.pf-m-inset-xl {
1157
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1158
- }
1159
-
1160
- .pf-v6-c-divider.pf-m-inset-2xl {
1161
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1162
- }
1163
-
1164
- .pf-v6-c-divider.pf-m-inset-3xl {
1165
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1166
- }
1167
-
1168
- @media (min-width: 36rem) {
1169
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1170
- flex-direction: row;
1171
- width: 100%;
1172
- height: var(--pf-v6-c-divider--Size);
1173
- }
1174
- }
1175
- @media (min-width: 36rem) {
1176
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1177
- flex-direction: column;
1178
- width: var(--pf-v6-c-divider--Size);
1179
- height: inherit;
1180
- }
1181
- }
1182
- @media (min-width: 36rem) {
1183
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1184
- --pf-v6-c-divider--before--FlexBasis: 100%;
1185
- }
1186
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1187
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1188
- }
1189
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1190
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1191
- }
1192
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
1193
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1194
- }
1195
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1196
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1197
- }
1198
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1199
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1200
- }
1201
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1202
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1203
- }
1204
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1205
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1206
- }
1207
- }
1208
- @media (min-width: 48rem) {
1209
- .pf-v6-c-divider.pf-m-horizontal-on-md {
1210
- flex-direction: row;
1211
- width: 100%;
1212
- height: var(--pf-v6-c-divider--Size);
1213
- }
1214
- }
1215
- @media (min-width: 48rem) {
1216
- .pf-v6-c-divider.pf-m-vertical-on-md {
1217
- flex-direction: column;
1218
- width: var(--pf-v6-c-divider--Size);
1219
- height: inherit;
1220
- }
1221
- }
1222
- @media (min-width: 48rem) {
1223
- .pf-v6-c-divider.pf-m-inset-none-on-md {
1224
- --pf-v6-c-divider--before--FlexBasis: 100%;
1225
- }
1226
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
1227
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1228
- }
1229
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
1230
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1231
- }
1232
- .pf-v6-c-divider.pf-m-inset-md-on-md {
1233
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1234
- }
1235
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
1236
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1237
- }
1238
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
1239
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1240
- }
1241
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1242
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1243
- }
1244
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1245
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1246
- }
1247
- }
1248
- @media (min-width: 62rem) {
1249
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
1250
- flex-direction: row;
1251
- width: 100%;
1252
- height: var(--pf-v6-c-divider--Size);
1253
- }
1254
- }
1255
- @media (min-width: 62rem) {
1256
- .pf-v6-c-divider.pf-m-vertical-on-lg {
1257
- flex-direction: column;
1258
- width: var(--pf-v6-c-divider--Size);
1259
- height: inherit;
1260
- }
1261
- }
1262
- @media (min-width: 62rem) {
1263
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
1264
- --pf-v6-c-divider--before--FlexBasis: 100%;
1265
- }
1266
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1267
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1268
- }
1269
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1270
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1271
- }
1272
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
1273
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1274
- }
1275
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1276
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1277
- }
1278
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1279
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1280
- }
1281
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1282
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1283
- }
1284
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1285
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1286
- }
1287
- }
1288
- @media (min-width: 75rem) {
1289
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
1290
- flex-direction: row;
1291
- width: 100%;
1292
- height: var(--pf-v6-c-divider--Size);
1293
- }
1294
- }
1295
- @media (min-width: 75rem) {
1296
- .pf-v6-c-divider.pf-m-vertical-on-xl {
1297
- flex-direction: column;
1298
- width: var(--pf-v6-c-divider--Size);
1299
- height: inherit;
1300
- }
1301
- }
1302
- @media (min-width: 75rem) {
1303
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
1304
- --pf-v6-c-divider--before--FlexBasis: 100%;
1305
- }
1306
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1307
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1308
- }
1309
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1310
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1311
- }
1312
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
1313
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1314
- }
1315
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1316
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1317
- }
1318
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1319
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1320
- }
1321
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1322
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1323
- }
1324
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1325
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1326
- }
1327
- }
1328
- @media (min-width: 90.625rem) {
1329
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1330
- flex-direction: row;
1331
- width: 100%;
1332
- height: var(--pf-v6-c-divider--Size);
1333
- }
1334
- }
1335
- @media (min-width: 90.625rem) {
1336
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
1337
- flex-direction: column;
1338
- width: var(--pf-v6-c-divider--Size);
1339
- height: inherit;
1340
- }
1341
- }
1342
- @media (min-width: 90.625rem) {
1343
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1344
- --pf-v6-c-divider--before--FlexBasis: 100%;
1345
- }
1346
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1347
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1348
- }
1349
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1350
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1351
- }
1352
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1353
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1354
- }
1355
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1356
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1357
- }
1358
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1359
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1360
- }
1361
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1362
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1363
- }
1364
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1365
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1366
- }
1367
- }
1368
894
  .pf-v6-c-button {
1369
895
  --pf-v6-c-button--Display: inline-flex;
1370
896
  --pf-v6-c-button--AlignItems: baseline;
@@ -2231,35 +1757,110 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2231
1757
  transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2232
1758
  }
2233
1759
 
2234
- .pf-v6-c-button--hamburger-icon--top {
2235
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
1760
+ .pf-v6-c-button--hamburger-icon--top {
1761
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
1762
+ }
1763
+
1764
+ .pf-v6-c-button--hamburger-icon--middle {
1765
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
1766
+ }
1767
+
1768
+ .pf-v6-c-button--hamburger-icon--arrow {
1769
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
1770
+ }
1771
+
1772
+ .pf-v6-c-button--hamburger-icon--bottom {
1773
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
1774
+ }
1775
+
1776
+ @keyframes pf-v6-c-button-icon-notify {
1777
+ 33% {
1778
+ transform: rotate(30deg);
1779
+ }
1780
+ 66% {
1781
+ transform: rotate(-60deg);
1782
+ }
1783
+ }
1784
+ @keyframes pf-v6-c-button-icon-favorited {
1785
+ 50% {
1786
+ scale: 1.5;
1787
+ }
1788
+ }
1789
+ .pf-v6-c-badge {
1790
+ --pf-v6-c-badge--BorderColor: transparent;
1791
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1792
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1793
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1794
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1795
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1796
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1797
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1798
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1799
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1800
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1801
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1802
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1803
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
1804
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1805
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1806
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1807
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1808
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1809
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1810
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1811
+ }
1812
+
1813
+ .pf-v6-c-badge {
1814
+ position: relative;
1815
+ display: inline-block;
1816
+ min-width: var(--pf-v6-c-badge--MinWidth);
1817
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1818
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1819
+ font-size: var(--pf-v6-c-badge--FontSize);
1820
+ font-weight: var(--pf-v6-c-badge--FontWeight);
1821
+ color: var(--pf-v6-c-badge--Color);
1822
+ text-align: center;
1823
+ white-space: nowrap;
1824
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
1825
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
1826
+ }
1827
+
1828
+ .pf-v6-c-badge::after {
1829
+ position: absolute;
1830
+ inset: 0;
1831
+ pointer-events: none;
1832
+ content: "";
1833
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1834
+ border-radius: inherit;
1835
+ }
1836
+
1837
+ .pf-v6-c-badge.pf-m-read {
1838
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
1839
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1840
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1841
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2236
1842
  }
2237
1843
 
2238
- .pf-v6-c-button--hamburger-icon--middle {
2239
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
1844
+ .pf-v6-c-badge.pf-m-unread {
1845
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1846
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1847
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2240
1848
  }
2241
1849
 
2242
- .pf-v6-c-button--hamburger-icon--arrow {
2243
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
1850
+ .pf-v6-c-badge.pf-m-disabled {
1851
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1852
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2244
1853
  }
2245
1854
 
2246
- .pf-v6-c-button--hamburger-icon--bottom {
2247
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
1855
+ .pf-v6-c-badge.pf-m-disabled::after {
1856
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2248
1857
  }
2249
1858
 
2250
- @keyframes pf-v6-c-button-icon-notify {
2251
- 33% {
2252
- transform: rotate(30deg);
2253
- }
2254
- 66% {
2255
- transform: rotate(-60deg);
2256
- }
2257
- }
2258
- @keyframes pf-v6-c-button-icon-favorited {
2259
- 50% {
2260
- scale: 1.5;
2261
- }
1859
+ .pf-v6-c-badge__toggle-icon {
1860
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1861
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2262
1862
  }
1863
+
2263
1864
  .pf-v6-c-label {
2264
1865
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2265
1866
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -2458,424 +2059,823 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2458
2059
  --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2459
2060
  }
2460
2061
 
2461
- .pf-v6-c-label {
2462
- position: relative;
2463
- gap: var(--pf-v6-c-label--Gap);
2464
- min-width: var(--pf-v6-c-label--MinWidth);
2465
- max-width: var(--pf-v6-c-label--MaxWidth);
2466
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
2467
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
2468
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
2469
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
2470
- font-size: var(--pf-v6-c-label--FontSize);
2062
+ .pf-v6-c-label {
2063
+ position: relative;
2064
+ gap: var(--pf-v6-c-label--Gap);
2065
+ min-width: var(--pf-v6-c-label--MinWidth);
2066
+ max-width: var(--pf-v6-c-label--MaxWidth);
2067
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
2068
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
2069
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
2070
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
2071
+ font-size: var(--pf-v6-c-label--FontSize);
2072
+ white-space: nowrap;
2073
+ background: transparent;
2074
+ isolation: isolate;
2075
+ border: 0;
2076
+ border-radius: var(--pf-v6-c-label--BorderRadius);
2077
+ }
2078
+
2079
+ .pf-v6-c-label.pf-m-blue {
2080
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
2081
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
2082
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
2083
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
2084
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
2085
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
2086
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
2087
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
2088
+ }
2089
+
2090
+ .pf-v6-c-label.pf-m-red {
2091
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
2092
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
2093
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
2094
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
2095
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
2096
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
2097
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
2098
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
2099
+ }
2100
+
2101
+ .pf-v6-c-label.pf-m-orange {
2102
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
2103
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
2104
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
2105
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
2106
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
2107
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
2108
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
2109
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
2110
+ }
2111
+
2112
+ .pf-v6-c-label.pf-m-orangered {
2113
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
2114
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
2115
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
2116
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
2117
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
2118
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
2119
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
2120
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
2121
+ }
2122
+
2123
+ .pf-v6-c-label.pf-m-yellow {
2124
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
2125
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
2126
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
2127
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
2128
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
2129
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
2130
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
2131
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
2132
+ }
2133
+
2134
+ .pf-v6-c-label.pf-m-green {
2135
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
2136
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
2137
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
2138
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
2139
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
2140
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
2141
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
2142
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
2143
+ }
2144
+
2145
+ .pf-v6-c-label.pf-m-teal {
2146
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
2147
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
2148
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
2149
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
2150
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
2151
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
2152
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
2153
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
2154
+ }
2155
+
2156
+ .pf-v6-c-label.pf-m-purple {
2157
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
2158
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
2159
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
2160
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
2161
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
2162
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
2163
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
2164
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
2165
+ }
2166
+
2167
+ .pf-v6-c-label.pf-m-success {
2168
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
2169
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
2170
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
2171
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
2172
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
2173
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
2174
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
2175
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
2176
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
2177
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2178
+ }
2179
+
2180
+ .pf-v6-c-label.pf-m-warning {
2181
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
2182
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
2183
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
2184
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
2185
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
2186
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
2187
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
2188
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
2189
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
2190
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
2191
+ }
2192
+
2193
+ .pf-v6-c-label.pf-m-danger {
2194
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
2195
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
2196
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
2197
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
2198
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
2199
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
2200
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
2201
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
2202
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
2203
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
2204
+ }
2205
+
2206
+ .pf-v6-c-label.pf-m-info {
2207
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
2208
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
2209
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
2210
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
2211
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
2212
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
2213
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
2214
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
2215
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
2216
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
2217
+ }
2218
+
2219
+ .pf-v6-c-label.pf-m-custom {
2220
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
2221
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
2222
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
2223
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
2224
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
2225
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
2226
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
2227
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
2228
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
2229
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2230
+ }
2231
+
2232
+ .pf-v6-c-label.pf-m-compact {
2233
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
2234
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
2235
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
2236
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
2237
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
2238
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
2239
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
2240
+ }
2241
+
2242
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
2243
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
2244
+ }
2245
+
2246
+ .pf-v6-c-label.pf-m-outline {
2247
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
2248
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
2249
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
2250
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
2251
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
2252
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
2253
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2254
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2255
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
2256
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
2257
+ }
2258
+
2259
+ .pf-v6-c-label.pf-m-editable {
2260
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
2261
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
2262
+ }
2263
+
2264
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
2265
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
2266
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
2267
+ }
2268
+
2269
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
2270
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
2271
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
2272
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
2273
+ }
2274
+
2275
+ .pf-v6-c-label.pf-m-editable-active {
2276
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
2277
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
2278
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
2279
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
2280
+ }
2281
+
2282
+ .pf-v6-c-label.pf-m-overflow {
2283
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
2284
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
2285
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
2286
+ }
2287
+
2288
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
2289
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
2290
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
2291
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
2292
+ }
2293
+
2294
+ .pf-v6-c-label.pf-m-add {
2295
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
2296
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
2297
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
2298
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
2299
+ }
2300
+
2301
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
2302
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
2303
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
2304
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
2305
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
2306
+ }
2307
+
2308
+ .pf-v6-c-label.pf-m-clickable {
2309
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
2310
+ }
2311
+
2312
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2313
+ text-decoration-line: none;
2314
+ }
2315
+
2316
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2317
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
2318
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2319
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
2320
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
2321
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
2322
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2323
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2324
+ }
2325
+
2326
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
2327
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2328
+ }
2329
+
2330
+ .pf-v6-c-label.pf-m-disabled {
2331
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
2332
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
2333
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
2334
+ --pf-v6-c-label--BorderWidth: 0;
2335
+ pointer-events: none;
2336
+ }
2337
+
2338
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
2339
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
2340
+ }
2341
+
2342
+ .pf-v6-c-label,
2343
+ .pf-v6-c-label__content {
2344
+ display: inline-flex;
2345
+ align-items: center;
2346
+ justify-content: center;
2347
+ }
2348
+
2349
+ .pf-v6-c-label__text {
2350
+ overflow: hidden;
2351
+ text-overflow: ellipsis;
2471
2352
  white-space: nowrap;
2353
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
2354
+ }
2355
+
2356
+ .pf-v6-c-label__content {
2357
+ gap: var(--pf-v6-c-label__content--Gap);
2358
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
2359
+ padding: 0;
2360
+ overflow: hidden;
2361
+ color: var(--pf-v6-c-label--Color);
2362
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
2472
2363
  background: transparent;
2473
- isolation: isolate;
2474
- border: 0;
2364
+ border-width: 0;
2365
+ }
2366
+
2367
+ .pf-v6-c-label__content::before {
2368
+ position: absolute;
2369
+ inset: 0;
2370
+ z-index: -1;
2371
+ pointer-events: none;
2372
+ content: "";
2373
+ background-color: var(--pf-v6-c-label--BackgroundColor);
2374
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
2475
2375
  border-radius: var(--pf-v6-c-label--BorderRadius);
2476
2376
  }
2477
2377
 
2478
- .pf-v6-c-label.pf-m-blue {
2479
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
2480
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
2481
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
2482
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
2483
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
2484
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
2485
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
2486
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
2378
+ input.pf-v6-c-label__content {
2379
+ overflow: hidden;
2380
+ text-overflow: ellipsis;
2381
+ white-space: nowrap;
2487
2382
  }
2488
2383
 
2489
- .pf-v6-c-label.pf-m-red {
2490
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
2491
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
2492
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
2493
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
2494
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
2495
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
2496
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
2497
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
2384
+ .pf-v6-c-label__icon {
2385
+ color: var(--pf-v6-c-label__icon--Color);
2498
2386
  }
2499
2387
 
2500
- .pf-v6-c-label.pf-m-orange {
2501
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
2502
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
2503
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
2504
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
2505
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
2506
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
2507
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
2508
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
2388
+ .pf-v6-c-label__actions {
2389
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2509
2390
  }
2510
2391
 
2511
- .pf-v6-c-label.pf-m-orangered {
2512
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
2513
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
2514
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
2515
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
2516
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
2517
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
2518
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
2519
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
2392
+ .pf-v6-c-label__actions .pf-v6-c-button {
2393
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2394
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2395
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2396
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2397
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2398
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2399
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2400
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2520
2401
  }
2521
2402
 
2522
- .pf-v6-c-label.pf-m-yellow {
2523
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
2524
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
2525
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
2526
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
2527
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
2528
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
2529
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
2530
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
2403
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
2404
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
2531
2405
  }
2532
2406
 
2533
- .pf-v6-c-label.pf-m-green {
2534
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
2535
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
2536
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
2537
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
2538
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
2539
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
2540
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
2541
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
2407
+ .pf-v6-c-divider {
2408
+ --pf-v6-c-divider--Display: flex;
2409
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2410
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2411
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2542
2412
  }
2543
2413
 
2544
- .pf-v6-c-label.pf-m-teal {
2545
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
2546
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
2547
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
2548
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
2549
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
2550
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
2551
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
2552
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
2414
+ .pf-v6-c-divider {
2415
+ flex-direction: row;
2416
+ width: 100%;
2417
+ height: var(--pf-v6-c-divider--Size);
2418
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2419
+ --pf-v6-hidden-visible--hidden--Display: none;
2420
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2421
+ display: var(--pf-v6-hidden-visible--Display);
2422
+ flex-shrink: 0;
2423
+ align-items: stretch;
2424
+ align-self: stretch;
2425
+ justify-content: center;
2426
+ border: 0;
2427
+ }
2428
+
2429
+ .pf-v6-c-divider.pf-m-hidden {
2430
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2431
+ }
2432
+
2433
+ @media screen and (min-width: 36rem) {
2434
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
2435
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2436
+ }
2437
+ .pf-v6-c-divider.pf-m-visible-on-sm {
2438
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2439
+ }
2440
+ }
2441
+ @media screen and (min-width: 48rem) {
2442
+ .pf-v6-c-divider.pf-m-hidden-on-md {
2443
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2444
+ }
2445
+ .pf-v6-c-divider.pf-m-visible-on-md {
2446
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2447
+ }
2448
+ }
2449
+ @media screen and (min-width: 62rem) {
2450
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
2451
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2452
+ }
2453
+ .pf-v6-c-divider.pf-m-visible-on-lg {
2454
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2455
+ }
2456
+ }
2457
+ @media screen and (min-width: 75rem) {
2458
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
2459
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2460
+ }
2461
+ .pf-v6-c-divider.pf-m-visible-on-xl {
2462
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2463
+ }
2464
+ }
2465
+ @media screen and (min-width: 90.625rem) {
2466
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
2467
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2468
+ }
2469
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
2470
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2471
+ }
2472
+ }
2473
+ .pf-v6-c-divider::before {
2474
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2475
+ content: "";
2476
+ background-color: var(--pf-v6-c-divider--Color);
2477
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2478
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2553
2479
  }
2554
2480
 
2555
- .pf-v6-c-label.pf-m-purple {
2556
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
2557
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
2558
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
2559
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
2560
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
2561
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
2562
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
2563
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
2481
+ .pf-v6-c-divider.pf-m-horizontal {
2482
+ flex-direction: row;
2483
+ width: 100%;
2484
+ height: var(--pf-v6-c-divider--Size);
2564
2485
  }
2565
2486
 
2566
- .pf-v6-c-label.pf-m-success {
2567
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
2568
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
2569
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
2570
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
2571
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
2572
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
2573
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
2574
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
2575
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
2576
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2487
+ .pf-v6-c-divider.pf-m-vertical {
2488
+ flex-direction: column;
2489
+ width: var(--pf-v6-c-divider--Size);
2490
+ height: inherit;
2577
2491
  }
2578
2492
 
2579
- .pf-v6-c-label.pf-m-warning {
2580
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
2581
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
2582
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
2583
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
2584
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
2585
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
2586
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
2587
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
2588
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
2589
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
2493
+ .pf-v6-c-divider.pf-m-inset-none {
2494
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2590
2495
  }
2591
2496
 
2592
- .pf-v6-c-label.pf-m-danger {
2593
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
2594
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
2595
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
2596
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
2597
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
2598
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
2599
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
2600
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
2601
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
2602
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
2497
+ .pf-v6-c-divider.pf-m-inset-xs {
2498
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2603
2499
  }
2604
2500
 
2605
- .pf-v6-c-label.pf-m-info {
2606
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
2607
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
2608
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
2609
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
2610
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
2611
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
2612
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
2613
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
2614
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
2615
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
2501
+ .pf-v6-c-divider.pf-m-inset-sm {
2502
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2616
2503
  }
2617
2504
 
2618
- .pf-v6-c-label.pf-m-custom {
2619
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
2620
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
2621
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
2622
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
2623
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
2624
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
2625
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
2626
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
2627
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
2628
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2505
+ .pf-v6-c-divider.pf-m-inset-md {
2506
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2629
2507
  }
2630
2508
 
2631
- .pf-v6-c-label.pf-m-compact {
2632
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
2633
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
2634
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
2635
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
2636
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
2637
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
2638
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
2509
+ .pf-v6-c-divider.pf-m-inset-lg {
2510
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2639
2511
  }
2640
2512
 
2641
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
2642
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
2513
+ .pf-v6-c-divider.pf-m-inset-xl {
2514
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2643
2515
  }
2644
2516
 
2645
- .pf-v6-c-label.pf-m-outline {
2646
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
2647
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
2648
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
2649
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
2650
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
2651
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
2652
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2653
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2654
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
2655
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
2517
+ .pf-v6-c-divider.pf-m-inset-2xl {
2518
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2656
2519
  }
2657
2520
 
2658
- .pf-v6-c-label.pf-m-editable {
2659
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
2660
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
2521
+ .pf-v6-c-divider.pf-m-inset-3xl {
2522
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2661
2523
  }
2662
2524
 
2663
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
2664
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
2665
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
2525
+ @media (min-width: 36rem) {
2526
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
2527
+ flex-direction: row;
2528
+ width: 100%;
2529
+ height: var(--pf-v6-c-divider--Size);
2530
+ }
2666
2531
  }
2667
-
2668
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
2669
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
2670
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
2671
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
2532
+ @media (min-width: 36rem) {
2533
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
2534
+ flex-direction: column;
2535
+ width: var(--pf-v6-c-divider--Size);
2536
+ height: inherit;
2537
+ }
2672
2538
  }
2673
-
2674
- .pf-v6-c-label.pf-m-editable-active {
2675
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
2676
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
2677
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
2678
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
2539
+ @media (min-width: 36rem) {
2540
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
2541
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2542
+ }
2543
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2544
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2545
+ }
2546
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2547
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2548
+ }
2549
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
2550
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2551
+ }
2552
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2553
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2554
+ }
2555
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2556
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2557
+ }
2558
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2559
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2560
+ }
2561
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2562
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2563
+ }
2679
2564
  }
2680
-
2681
- .pf-v6-c-label.pf-m-overflow {
2682
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
2683
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
2684
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
2565
+ @media (min-width: 48rem) {
2566
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
2567
+ flex-direction: row;
2568
+ width: 100%;
2569
+ height: var(--pf-v6-c-divider--Size);
2570
+ }
2685
2571
  }
2686
-
2687
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
2688
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
2689
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
2690
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
2572
+ @media (min-width: 48rem) {
2573
+ .pf-v6-c-divider.pf-m-vertical-on-md {
2574
+ flex-direction: column;
2575
+ width: var(--pf-v6-c-divider--Size);
2576
+ height: inherit;
2577
+ }
2691
2578
  }
2692
-
2693
- .pf-v6-c-label.pf-m-add {
2694
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
2695
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
2696
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
2697
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
2579
+ @media (min-width: 48rem) {
2580
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2581
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2582
+ }
2583
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2584
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2585
+ }
2586
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2587
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2588
+ }
2589
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2590
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2591
+ }
2592
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2593
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2594
+ }
2595
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2596
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2597
+ }
2598
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2599
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2600
+ }
2601
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2602
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2603
+ }
2604
+ }
2605
+ @media (min-width: 62rem) {
2606
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2607
+ flex-direction: row;
2608
+ width: 100%;
2609
+ height: var(--pf-v6-c-divider--Size);
2610
+ }
2611
+ }
2612
+ @media (min-width: 62rem) {
2613
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2614
+ flex-direction: column;
2615
+ width: var(--pf-v6-c-divider--Size);
2616
+ height: inherit;
2617
+ }
2618
+ }
2619
+ @media (min-width: 62rem) {
2620
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2621
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2622
+ }
2623
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2624
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2625
+ }
2626
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2627
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2628
+ }
2629
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2630
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2631
+ }
2632
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2633
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2634
+ }
2635
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2636
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2637
+ }
2638
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2639
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2640
+ }
2641
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2642
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2643
+ }
2698
2644
  }
2699
-
2700
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
2701
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
2702
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
2703
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
2704
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
2645
+ @media (min-width: 75rem) {
2646
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2647
+ flex-direction: row;
2648
+ width: 100%;
2649
+ height: var(--pf-v6-c-divider--Size);
2650
+ }
2705
2651
  }
2706
-
2707
- .pf-v6-c-label.pf-m-clickable {
2708
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
2652
+ @media (min-width: 75rem) {
2653
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2654
+ flex-direction: column;
2655
+ width: var(--pf-v6-c-divider--Size);
2656
+ height: inherit;
2657
+ }
2709
2658
  }
2710
-
2711
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2712
- text-decoration-line: none;
2659
+ @media (min-width: 75rem) {
2660
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2661
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2662
+ }
2663
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2664
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2665
+ }
2666
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2667
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2668
+ }
2669
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2670
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2671
+ }
2672
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2673
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2674
+ }
2675
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2676
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2677
+ }
2678
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2679
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2680
+ }
2681
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2682
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2683
+ }
2713
2684
  }
2714
-
2715
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2716
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
2717
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2718
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
2719
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
2720
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
2721
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2722
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2685
+ @media (min-width: 90.625rem) {
2686
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2687
+ flex-direction: row;
2688
+ width: 100%;
2689
+ height: var(--pf-v6-c-divider--Size);
2690
+ }
2723
2691
  }
2724
-
2725
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
2726
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2692
+ @media (min-width: 90.625rem) {
2693
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2694
+ flex-direction: column;
2695
+ width: var(--pf-v6-c-divider--Size);
2696
+ height: inherit;
2697
+ }
2727
2698
  }
2728
-
2729
- .pf-v6-c-label.pf-m-disabled {
2730
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
2731
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
2732
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
2733
- --pf-v6-c-label--BorderWidth: 0;
2734
- pointer-events: none;
2699
+ @media (min-width: 90.625rem) {
2700
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2701
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2702
+ }
2703
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2704
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2705
+ }
2706
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2707
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2708
+ }
2709
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2710
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2711
+ }
2712
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2713
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2714
+ }
2715
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2716
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2717
+ }
2718
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2719
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2720
+ }
2721
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2722
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2723
+ }
2735
2724
  }
2736
-
2737
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
2738
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
2725
+ .pf-v6-c-label-group {
2726
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2727
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2728
+ --pf-v6-c-label-group--MaxWidth: 100%;
2729
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2730
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2731
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2732
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2733
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
2734
+ --pf-v6-c-label-group__main--MinWidth: 0;
2735
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2736
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2737
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2738
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2739
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
2740
+ --pf-v6-c-label-group__list--MinWidth: 0;
2741
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2742
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2743
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2744
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2745
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2746
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2747
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2748
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2749
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2750
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2751
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2752
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
2753
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2754
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2755
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2756
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2757
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2758
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2759
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2760
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2761
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2762
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2739
2763
  }
2740
2764
 
2741
- .pf-v6-c-label,
2742
- .pf-v6-c-label__content {
2765
+ .pf-v6-c-label-group {
2743
2766
  display: inline-flex;
2767
+ row-gap: var(--pf-v6-c-label-group--RowGap);
2768
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
2744
2769
  align-items: center;
2745
- justify-content: center;
2746
- }
2747
-
2748
- .pf-v6-c-label__text {
2749
- overflow: hidden;
2750
- text-overflow: ellipsis;
2751
- white-space: nowrap;
2752
- max-width: var(--pf-v6-c-label__text--MaxWidth);
2770
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
2753
2771
  }
2754
2772
 
2755
- .pf-v6-c-label__content {
2756
- gap: var(--pf-v6-c-label__content--Gap);
2757
- max-width: var(--pf-v6-c-label__content--MaxWidth);
2758
- padding: 0;
2759
- overflow: hidden;
2760
- color: var(--pf-v6-c-label--Color);
2761
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
2762
- background: transparent;
2763
- border-width: 0;
2773
+ .pf-v6-c-label-group.pf-m-category {
2774
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2775
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2776
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2777
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2778
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2779
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2780
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2764
2781
  }
2765
2782
 
2766
- .pf-v6-c-label__content::before {
2767
- position: absolute;
2768
- inset: 0;
2769
- z-index: -1;
2770
- pointer-events: none;
2771
- content: "";
2772
- background-color: var(--pf-v6-c-label--BackgroundColor);
2773
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
2774
- border-radius: var(--pf-v6-c-label--BorderRadius);
2783
+ .pf-v6-c-label-group.pf-m-vertical {
2784
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2785
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2786
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2787
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2788
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2789
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2790
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2775
2791
  }
2776
2792
 
2777
- input.pf-v6-c-label__content {
2778
- overflow: hidden;
2779
- text-overflow: ellipsis;
2780
- white-space: nowrap;
2793
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2794
+ align-items: flex-start;
2781
2795
  }
2782
2796
 
2783
- .pf-v6-c-label__icon {
2784
- color: var(--pf-v6-c-label__icon--Color);
2797
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2798
+ flex-direction: column;
2799
+ align-items: flex-start;
2800
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2785
2801
  }
2786
2802
 
2787
- .pf-v6-c-label__actions {
2788
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2803
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2804
+ flex-direction: column;
2805
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2789
2806
  }
2790
2807
 
2791
- .pf-v6-c-label__actions .pf-v6-c-button {
2792
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2793
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2794
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2795
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2796
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2797
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2798
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2799
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2808
+ .pf-v6-c-label-group.pf-m-editable,
2809
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2810
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2811
+ display: flex;
2800
2812
  }
2801
2813
 
2802
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
2803
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
2814
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2815
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2816
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2817
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2818
+ flex: 1;
2804
2819
  }
2805
2820
 
2806
- .pf-v6-c-badge {
2807
- --pf-v6-c-badge--BorderColor: transparent;
2808
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2809
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2810
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2811
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2812
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2813
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2814
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2815
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2816
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2817
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2818
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2819
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2820
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2821
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2822
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2823
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2824
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2825
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2826
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2827
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2821
+ .pf-v6-c-label-group__main {
2822
+ display: flex;
2823
+ flex: 1;
2824
+ flex-wrap: wrap;
2825
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
2826
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2827
+ align-items: baseline;
2828
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2828
2829
  }
2829
2830
 
2830
- .pf-v6-c-badge {
2831
- position: relative;
2832
- display: inline-block;
2833
- min-width: var(--pf-v6-c-badge--MinWidth);
2834
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2835
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2836
- font-size: var(--pf-v6-c-badge--FontSize);
2837
- font-weight: var(--pf-v6-c-badge--FontWeight);
2838
- color: var(--pf-v6-c-badge--Color);
2839
- text-align: center;
2840
- white-space: nowrap;
2841
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2842
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2831
+ .pf-v6-c-label-group__list {
2832
+ display: inline-flex;
2833
+ flex-wrap: wrap;
2834
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
2835
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2836
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2843
2837
  }
2844
2838
 
2845
- .pf-v6-c-badge::after {
2846
- position: absolute;
2847
- inset: 0;
2848
- pointer-events: none;
2849
- content: "";
2850
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2851
- border-radius: inherit;
2839
+ .pf-v6-c-label-group__list-item {
2840
+ display: inline-flex;
2841
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2852
2842
  }
2853
2843
 
2854
- .pf-v6-c-badge.pf-m-read {
2855
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2856
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2857
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2858
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2844
+ .pf-v6-c-label-group__label {
2845
+ overflow: hidden;
2846
+ text-overflow: ellipsis;
2847
+ white-space: nowrap;
2848
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2859
2849
  }
2860
2850
 
2861
- .pf-v6-c-badge.pf-m-unread {
2862
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2863
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2864
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2851
+ .pf-v6-c-label-group__close {
2852
+ display: flex;
2853
+ align-self: flex-start;
2865
2854
  }
2866
2855
 
2867
- .pf-v6-c-badge.pf-m-disabled {
2868
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2869
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2856
+ .pf-v6-c-label-group__close .pf-v6-c-button {
2857
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2858
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2859
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2860
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2861
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2870
2862
  }
2871
2863
 
2872
- .pf-v6-c-badge.pf-m-disabled::after {
2873
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2864
+ .pf-v6-c-label-group__textarea {
2865
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2866
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2867
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2868
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2869
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2870
+ white-space: nowrap;
2871
+ resize: none;
2872
+ border: 0;
2873
+ -ms-overflow-style: none;
2874
+ scrollbar-width: none;
2874
2875
  }
2875
2876
 
2876
- .pf-v6-c-badge__toggle-icon {
2877
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2878
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2877
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2878
+ display: none;
2879
2879
  }
2880
2880
 
2881
2881
  .pf-v6-c-menu {
@@ -3678,6 +3678,93 @@ button.pf-v6-c-breadcrumb__link {
3678
3678
  display: none;
3679
3679
  }
3680
3680
 
3681
+ .pf-v6-c-spinner {
3682
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3683
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3684
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3685
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3686
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3687
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3688
+ --pf-v6-c-spinner--StrokeWidth: 10;
3689
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3690
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3691
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3692
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3693
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3694
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3695
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3696
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3697
+ }
3698
+
3699
+ .pf-v6-c-spinner {
3700
+ width: var(--pf-v6-c-spinner--Width);
3701
+ height: var(--pf-v6-c-spinner--Height);
3702
+ overflow: hidden;
3703
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3704
+ }
3705
+
3706
+ .pf-v6-c-spinner.pf-m-inline {
3707
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3708
+ }
3709
+
3710
+ .pf-v6-c-spinner.pf-m-xs {
3711
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3712
+ --pf-v6-c-spinner--StrokeWidth: 15;
3713
+ }
3714
+
3715
+ .pf-v6-c-spinner.pf-m-sm {
3716
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3717
+ }
3718
+
3719
+ .pf-v6-c-spinner.pf-m-md {
3720
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3721
+ }
3722
+
3723
+ .pf-v6-c-spinner.pf-m-lg {
3724
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3725
+ }
3726
+
3727
+ .pf-v6-c-spinner.pf-m-xl {
3728
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3729
+ }
3730
+
3731
+ .pf-v6-c-spinner__path {
3732
+ width: 100%;
3733
+ height: 100%;
3734
+ stroke: var(--pf-v6-c-spinner--Color);
3735
+ stroke-dasharray: 283;
3736
+ stroke-dashoffset: 280;
3737
+ stroke-linecap: round;
3738
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3739
+ transform-origin: 50% 50%;
3740
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3741
+ }
3742
+
3743
+ @keyframes pf-v6-c-spinner-animation-rotate {
3744
+ 0% {
3745
+ transform: rotate(0deg);
3746
+ }
3747
+ 100% {
3748
+ transform: rotate(360deg);
3749
+ }
3750
+ }
3751
+ @keyframes pf-v6-c-spinner-animation-dash {
3752
+ 0% {
3753
+ stroke-dashoffset: 280;
3754
+ transform: rotate(0);
3755
+ }
3756
+ 15% {
3757
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3758
+ }
3759
+ 40% {
3760
+ stroke-dasharray: 220;
3761
+ stroke-dashoffset: 150;
3762
+ }
3763
+ 100% {
3764
+ stroke-dashoffset: 280;
3765
+ transform: rotate(720deg);
3766
+ }
3767
+ }
3681
3768
  .pf-v6-c-tooltip {
3682
3769
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3683
3770
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3807,92 +3894,4 @@ button.pf-v6-c-breadcrumb__link {
3807
3894
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3808
3895
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3809
3896
  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));
3810
- }
3811
-
3812
- .pf-v6-c-spinner {
3813
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3814
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3815
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3816
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3817
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3818
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3819
- --pf-v6-c-spinner--StrokeWidth: 10;
3820
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3821
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3822
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3823
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3824
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3825
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3826
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3827
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3828
- }
3829
-
3830
- .pf-v6-c-spinner {
3831
- width: var(--pf-v6-c-spinner--Width);
3832
- height: var(--pf-v6-c-spinner--Height);
3833
- overflow: hidden;
3834
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3835
- }
3836
-
3837
- .pf-v6-c-spinner.pf-m-inline {
3838
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3839
- }
3840
-
3841
- .pf-v6-c-spinner.pf-m-xs {
3842
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3843
- --pf-v6-c-spinner--StrokeWidth: 15;
3844
- }
3845
-
3846
- .pf-v6-c-spinner.pf-m-sm {
3847
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3848
- }
3849
-
3850
- .pf-v6-c-spinner.pf-m-md {
3851
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3852
- }
3853
-
3854
- .pf-v6-c-spinner.pf-m-lg {
3855
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3856
- }
3857
-
3858
- .pf-v6-c-spinner.pf-m-xl {
3859
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3860
- }
3861
-
3862
- .pf-v6-c-spinner__path {
3863
- width: 100%;
3864
- height: 100%;
3865
- stroke: var(--pf-v6-c-spinner--Color);
3866
- stroke-dasharray: 283;
3867
- stroke-dashoffset: 280;
3868
- stroke-linecap: round;
3869
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3870
- transform-origin: 50% 50%;
3871
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3872
- }
3873
-
3874
- @keyframes pf-v6-c-spinner-animation-rotate {
3875
- 0% {
3876
- transform: rotate(0deg);
3877
- }
3878
- 100% {
3879
- transform: rotate(360deg);
3880
- }
3881
- }
3882
- @keyframes pf-v6-c-spinner-animation-dash {
3883
- 0% {
3884
- stroke-dashoffset: 280;
3885
- transform: rotate(0);
3886
- }
3887
- 15% {
3888
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3889
- }
3890
- 40% {
3891
- stroke-dasharray: 220;
3892
- stroke-dashoffset: 150;
3893
- }
3894
- 100% {
3895
- stroke-dashoffset: 280;
3896
- transform: rotate(720deg);
3897
- }
3898
3897
  }