@patternfly/react-templates 6.6.0-prerelease.1 → 6.6.0-prerelease.3

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.
@@ -85,160 +85,547 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
85
85
  color: var(--pf-v6-c-check__label-required--Color);
86
86
  }
87
87
 
88
- .pf-v6-c-label-group {
89
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
90
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
91
- --pf-v6-c-label-group--MaxWidth: 100%;
92
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
93
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
94
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
95
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
96
- --pf-v6-c-label-group__main--MaxWidth: 100%;
97
- --pf-v6-c-label-group__main--MinWidth: 0;
98
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
99
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
100
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
101
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
102
- --pf-v6-c-label-group__list--MaxWidth: 100%;
103
- --pf-v6-c-label-group__list--MinWidth: 0;
104
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
105
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
106
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
107
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
108
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
109
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
110
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
111
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
112
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
113
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
114
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
115
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
116
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
117
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
118
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
119
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
120
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
121
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
122
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
123
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
124
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
125
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
88
+ .pf-v6-c-label {
89
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
90
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
91
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
92
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
93
+ --pf-v6-c-label--MaxWidth: 100%;
94
+ --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
95
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
96
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
97
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
98
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
99
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
100
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
101
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
102
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
103
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
104
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
105
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
106
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
107
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
108
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
109
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
110
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
111
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
112
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
113
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
114
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
115
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
116
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
117
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
118
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
119
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
120
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
121
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
122
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
123
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
124
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
125
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
126
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
127
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
128
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
129
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
130
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
131
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
132
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
133
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
134
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
135
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
136
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
137
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
138
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
139
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
140
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
141
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
142
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
143
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
144
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
145
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
146
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
147
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
148
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
149
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
150
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
151
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
152
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
153
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
154
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
155
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
156
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
157
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
158
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
159
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
160
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
161
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
162
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
163
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
164
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
165
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
166
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
167
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
168
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
169
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
170
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
171
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
172
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
173
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
174
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
175
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
176
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
177
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
178
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
179
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
180
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
181
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
182
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
183
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
184
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
185
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
186
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
187
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
188
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
189
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
190
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
191
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
192
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
193
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
194
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
195
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
196
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
197
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
198
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
199
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
200
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
201
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
202
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
203
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
204
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
205
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
206
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
207
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
208
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
209
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
210
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
211
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
212
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
213
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
214
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
215
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
216
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
217
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
218
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
219
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
220
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
221
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
222
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
223
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
224
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
225
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
226
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
227
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
228
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
229
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
230
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
231
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
232
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
233
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
234
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
235
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
236
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
237
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
238
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
239
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
240
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
241
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
242
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
243
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
244
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
245
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
246
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
247
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
248
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
249
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
250
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
251
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
252
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
253
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
254
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
255
+ --pf-v6-c-label__content--MaxWidth: 100%;
256
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
257
+ --pf-v6-c-label__content--Cursor: initial;
258
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
259
+ --pf-v6-c-label__text--MaxWidth: 100%;
260
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
261
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
262
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
263
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
264
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
265
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
266
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
267
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
268
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
269
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
270
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
271
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
272
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
273
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
274
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
275
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
276
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
277
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
278
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
279
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
280
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
281
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
282
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
283
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
284
+ }
285
+
286
+ .pf-v6-c-label {
287
+ position: relative;
288
+ gap: var(--pf-v6-c-label--Gap);
289
+ min-width: var(--pf-v6-c-label--MinWidth);
290
+ max-width: var(--pf-v6-c-label--MaxWidth);
291
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
292
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
293
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
294
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
295
+ font-size: var(--pf-v6-c-label--FontSize);
296
+ white-space: nowrap;
297
+ background: transparent;
298
+ isolation: isolate;
299
+ border: 0;
300
+ border-radius: var(--pf-v6-c-label--BorderRadius);
301
+ }
302
+
303
+ .pf-v6-c-label.pf-m-blue {
304
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
305
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
306
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
307
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
308
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
309
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
310
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
311
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
312
+ }
313
+
314
+ .pf-v6-c-label.pf-m-red {
315
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
316
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
317
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
318
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
319
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
320
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
321
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
322
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
323
+ }
324
+
325
+ .pf-v6-c-label.pf-m-orange {
326
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
327
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
328
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
329
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
330
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
331
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
332
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
333
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
334
+ }
335
+
336
+ .pf-v6-c-label.pf-m-orangered {
337
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
338
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
339
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
340
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
341
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
342
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
343
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
344
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
345
+ }
346
+
347
+ .pf-v6-c-label.pf-m-yellow {
348
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
349
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
350
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
351
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
352
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
353
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
354
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
355
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
356
+ }
357
+
358
+ .pf-v6-c-label.pf-m-green {
359
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
360
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
361
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
362
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
363
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
364
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
365
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
366
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
367
+ }
368
+
369
+ .pf-v6-c-label.pf-m-teal {
370
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
371
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
372
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
373
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
374
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
375
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
376
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
377
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
378
+ }
379
+
380
+ .pf-v6-c-label.pf-m-purple {
381
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
382
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
383
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
384
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
385
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
386
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
387
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
388
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
389
+ }
390
+
391
+ .pf-v6-c-label.pf-m-success {
392
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
393
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
394
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
395
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
396
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
397
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
398
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
399
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
400
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
401
+ --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);
402
+ }
403
+
404
+ .pf-v6-c-label.pf-m-warning {
405
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
406
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
407
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
408
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
409
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
410
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
411
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
412
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
413
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
414
+ --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);
126
415
  }
127
416
 
128
- .pf-v6-c-label-group {
129
- display: inline-flex;
130
- row-gap: var(--pf-v6-c-label-group--RowGap);
131
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
132
- align-items: center;
133
- max-width: var(--pf-v6-c-label-group--MaxWidth);
417
+ .pf-v6-c-label.pf-m-danger {
418
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
419
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
420
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
421
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
422
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
423
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
424
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
425
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
426
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
427
+ --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);
134
428
  }
135
429
 
136
- .pf-v6-c-label-group.pf-m-category {
137
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
138
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
139
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
140
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
141
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
142
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
143
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
430
+ .pf-v6-c-label.pf-m-info {
431
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
432
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
433
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
434
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
435
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
436
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
437
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
438
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
439
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
440
+ --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);
144
441
  }
145
442
 
146
- .pf-v6-c-label-group.pf-m-vertical {
147
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
148
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
149
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
150
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
151
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
152
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
153
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
443
+ .pf-v6-c-label.pf-m-custom {
444
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
445
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
446
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
447
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
448
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
449
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
450
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
451
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
452
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
453
+ --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);
154
454
  }
155
455
 
156
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
157
- align-items: flex-start;
456
+ .pf-v6-c-label.pf-m-compact {
457
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
458
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
459
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
460
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
461
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
462
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
463
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
158
464
  }
159
465
 
160
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
161
- flex-direction: column;
162
- align-items: flex-start;
163
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
466
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
467
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
164
468
  }
165
469
 
166
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
167
- flex-direction: column;
168
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
470
+ .pf-v6-c-label.pf-m-outline {
471
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
472
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
473
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
474
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
475
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
476
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
477
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
478
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
479
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
480
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
169
481
  }
170
482
 
171
- .pf-v6-c-label-group.pf-m-editable,
172
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
173
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
174
- display: flex;
483
+ .pf-v6-c-label.pf-m-editable {
484
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
485
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
175
486
  }
176
487
 
177
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
178
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
179
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
180
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
181
- flex: 1;
488
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
489
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
490
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
182
491
  }
183
492
 
184
- .pf-v6-c-label-group__main {
185
- display: flex;
186
- flex: 1;
187
- flex-wrap: wrap;
188
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
189
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
190
- align-items: baseline;
191
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
493
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
494
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
495
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
496
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
192
497
  }
193
498
 
194
- .pf-v6-c-label-group__list {
195
- display: inline-flex;
196
- flex-wrap: wrap;
197
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
198
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
199
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
499
+ .pf-v6-c-label.pf-m-editable-active {
500
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
501
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
502
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
503
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
200
504
  }
201
505
 
202
- .pf-v6-c-label-group__list-item {
506
+ .pf-v6-c-label.pf-m-overflow {
507
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
508
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
509
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
510
+ }
511
+
512
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
513
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
514
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
515
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
516
+ }
517
+
518
+ .pf-v6-c-label.pf-m-add {
519
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
520
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
521
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
522
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
523
+ }
524
+
525
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
526
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
527
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
528
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
529
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
530
+ }
531
+
532
+ .pf-v6-c-label.pf-m-clickable {
533
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
534
+ }
535
+
536
+ .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) {
537
+ text-decoration-line: none;
538
+ }
539
+
540
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
541
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
542
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
543
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
544
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
545
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
546
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
547
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
548
+ }
549
+
550
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
551
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
552
+ }
553
+
554
+ .pf-v6-c-label.pf-m-disabled {
555
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
556
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
557
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
558
+ --pf-v6-c-label--BorderWidth: 0;
559
+ pointer-events: none;
560
+ }
561
+
562
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
563
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
564
+ }
565
+
566
+ .pf-v6-c-label,
567
+ .pf-v6-c-label__content {
203
568
  display: inline-flex;
204
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
569
+ align-items: center;
570
+ justify-content: center;
205
571
  }
206
572
 
207
- .pf-v6-c-label-group__label {
573
+ .pf-v6-c-label__text {
208
574
  overflow: hidden;
209
575
  text-overflow: ellipsis;
210
576
  white-space: nowrap;
211
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
577
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
212
578
  }
213
579
 
214
- .pf-v6-c-label-group__close {
215
- display: flex;
216
- align-self: flex-start;
580
+ .pf-v6-c-label__content {
581
+ gap: var(--pf-v6-c-label__content--Gap);
582
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
583
+ padding: 0;
584
+ overflow: hidden;
585
+ color: var(--pf-v6-c-label--Color);
586
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
587
+ background: transparent;
588
+ border-width: 0;
217
589
  }
218
590
 
219
- .pf-v6-c-label-group__close .pf-v6-c-button {
220
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
221
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
222
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
223
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
224
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
591
+ .pf-v6-c-label__content::before {
592
+ position: absolute;
593
+ inset: 0;
594
+ z-index: -1;
595
+ pointer-events: none;
596
+ content: "";
597
+ background-color: var(--pf-v6-c-label--BackgroundColor);
598
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
599
+ border-radius: var(--pf-v6-c-label--BorderRadius);
225
600
  }
226
601
 
227
- .pf-v6-c-label-group__textarea {
228
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
229
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
230
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
231
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
232
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
602
+ input.pf-v6-c-label__content {
603
+ overflow: hidden;
604
+ text-overflow: ellipsis;
233
605
  white-space: nowrap;
234
- resize: none;
235
- scrollbar-width: none;
236
- -ms-overflow-style: none;
237
- border: 0;
238
606
  }
239
607
 
240
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
241
- display: none;
608
+ .pf-v6-c-label__icon {
609
+ color: var(--pf-v6-c-label__icon--Color);
610
+ }
611
+
612
+ .pf-v6-c-label__actions {
613
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
614
+ }
615
+
616
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
617
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
618
+ }
619
+
620
+ .pf-v6-c-label__actions .pf-v6-c-button {
621
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
622
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
623
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
624
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
625
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
626
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
627
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
628
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
242
629
  }
243
630
 
244
631
  .pf-v6-c-badge {
@@ -307,257 +694,13 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
307
694
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
308
695
  }
309
696
 
310
- .pf-v6-c-badge.pf-m-disabled::after {
311
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
312
- }
313
-
314
- .pf-v6-c-badge__toggle-icon {
315
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
316
- color: var(--pf-v6-c-badge__toggle-icon--Color);
317
- }
318
-
319
- .pf-v6-c-text-input-group {
320
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
321
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
322
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
323
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
324
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
325
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
326
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
327
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
328
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
329
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
330
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
331
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
332
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
333
- --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));
334
- --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));
335
- --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));
336
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
337
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
338
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
339
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
340
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
341
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
342
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
343
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
344
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
345
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
346
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
347
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
348
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
349
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
350
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
351
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
352
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
353
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
354
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
355
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
356
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
357
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
358
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
359
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
360
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
361
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
362
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
363
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
364
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
365
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
366
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
367
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
368
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
369
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
370
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
371
- }
372
-
373
- .pf-v6-c-text-input-group {
374
- position: relative;
375
- display: flex;
376
- width: 100%;
377
- font-size: var(--pf-v6-c-text-input-group__FontSize);
378
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
379
- color: var(--pf-v6-c-text-input-group--Color, inherit);
380
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
381
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
382
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
383
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
384
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
385
- }
386
-
387
- .pf-v6-c-text-input-group::before {
388
- position: absolute;
389
- inset: 0;
390
- pointer-events: none;
391
- content: "";
392
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
393
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
394
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
395
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
396
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
397
- }
398
-
399
- .pf-v6-c-text-input-group.pf-m-disabled {
400
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
401
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
402
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
403
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
404
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
405
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
406
- pointer-events: none;
407
- }
408
-
409
- .pf-v6-c-text-input-group.pf-m-plain {
410
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
411
- }
412
-
413
- .pf-v6-c-text-input-group.pf-m-plain::before {
414
- border: 0;
415
- }
416
-
417
- .pf-v6-c-text-input-group.pf-m-success {
418
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
419
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
420
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
421
- }
422
-
423
- .pf-v6-c-text-input-group.pf-m-warning {
424
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
425
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
426
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
427
- }
428
-
429
- .pf-v6-c-text-input-group.pf-m-error {
430
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
431
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
432
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
433
- }
434
-
435
- @media (prefers-reduced-motion: no-preference) {
436
- .pf-v6-c-text-input-group.pf-m-error {
437
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
438
- animation-name: pf-v6-global-danger-jiggle-motion;
439
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
440
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
441
- animation-fill-mode: both;
442
- }
443
- }
444
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
445
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
446
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
447
- animation-name: pf-v6-global-fade-in;
448
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
449
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
450
- }
451
-
452
- .pf-v6-c-text-input-group:hover {
453
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
454
- }
455
-
456
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
457
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
458
- }
459
-
460
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
461
- --pf-v6-c-text-input-group__text--Position: relative;
462
- }
463
-
464
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
465
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
466
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
467
- }
468
-
469
- .pf-v6-c-text-input-group__main {
470
- display: flex;
471
- flex: 1;
472
- flex-wrap: wrap;
473
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
474
- min-width: 0;
475
- }
476
-
477
- .pf-v6-c-text-input-group__main.pf-m-icon {
478
- --pf-v6-c-text-input-group__text--Position: relative;
479
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
480
- display: inline-flex;
481
- align-items: center;
482
- justify-content: center;
483
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
484
- }
485
-
486
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
487
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
488
- }
489
-
490
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
491
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
492
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
493
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
494
- }
495
-
496
- .pf-v6-c-text-input-group__text {
497
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
498
- display: inline-grid;
499
- flex: 1;
500
- grid-template-areas: "text-input";
501
- grid-template-columns: 1fr;
502
- }
503
-
504
- .pf-v6-c-text-input-group__icon {
505
- position: absolute;
506
- inset-block-start: 50%;
507
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
508
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
509
- color: var(--pf-v6-c-text-input-group__icon--Color);
510
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
511
- }
512
-
513
- .pf-v6-c-text-input-group__icon.pf-m-status {
514
- inset-inline-start: auto;
515
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
516
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
517
- }
518
-
519
- .pf-v6-c-text-input-group__text-input {
520
- overflow: hidden;
521
- text-overflow: ellipsis;
522
- white-space: nowrap;
523
- position: relative;
524
- width: 100%;
525
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
526
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
527
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
528
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
529
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
530
- color: var(--pf-v6-c-text-input-group__text-input--Color);
531
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
532
- border: 0;
533
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
534
- }
535
-
536
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
537
- grid-area: text-input;
538
- }
539
-
540
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
541
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
542
- }
543
-
544
- .pf-v6-c-text-input-group__text-input::placeholder {
545
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
546
- }
547
-
548
- .pf-v6-c-text-input-group__utilities {
549
- display: flex;
550
- align-items: center;
551
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
552
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
553
- }
554
-
555
- .pf-v6-c-text-input-group__utilities > * + * {
556
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
697
+ .pf-v6-c-badge.pf-m-disabled::after {
698
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
557
699
  }
558
700
 
559
- .pf-v6-c-text-input-group__group {
560
- display: flex;
701
+ .pf-v6-c-badge__toggle-icon {
702
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
703
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
561
704
  }
562
705
 
563
706
  .pf-v6-c-menu-toggle {
@@ -976,1050 +1119,586 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
976
1119
  }
977
1120
  66% {
978
1121
  --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
979
- }
980
- }
981
- }
982
- .pf-v6-c-menu-toggle.pf-m-split-button {
983
- --pf-v6-c-menu-toggle--Gap: 0;
984
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
985
- padding: 0;
986
- }
987
-
988
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
989
- position: relative;
990
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
991
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
992
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
993
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
994
- }
995
-
996
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
997
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
998
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
999
- }
1000
-
1001
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1002
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1003
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1004
- }
1005
-
1006
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1007
- --pf-v6-c-check__label--Color: currentcolor;
1008
- --pf-v6-c-check__label--disabled--Color: currentcolor;
1009
- align-items: center;
1010
- align-self: stretch;
1011
- }
1012
-
1013
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1014
- --pf-v6-c-check__input--TranslateY: 0;
1015
- align-self: center;
1016
- }
1017
-
1018
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1019
- border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
1020
- }
1021
-
1022
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1023
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
1024
- }
1025
-
1026
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1027
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1028
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
1029
- }
1030
-
1031
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1032
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1033
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
1034
- }
1035
-
1036
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1037
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
1038
- }
1039
-
1040
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1041
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
1042
- }
1043
-
1044
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1045
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1046
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1047
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
1048
- }
1049
-
1050
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1051
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1052
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1053
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
1054
- }
1055
-
1056
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1057
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
1058
- }
1059
-
1060
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1061
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1062
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1063
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
1064
- }
1065
-
1066
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1067
- content: none;
1068
- }
1069
-
1070
- .pf-v6-c-menu-toggle.pf-m-typeahead {
1071
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1072
- --pf-v6-c-menu-toggle--Gap: 0;
1073
- align-items: stretch;
1074
- padding: 0;
1075
- }
1076
-
1077
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1078
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1079
- }
1080
-
1081
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1082
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1083
- display: flex;
1084
- align-items: stretch;
1085
- }
1086
-
1087
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1088
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1089
- flex: 1;
1090
- }
1091
-
1092
- .pf-v6-c-menu-toggle__button {
1093
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
1094
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1095
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1096
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1097
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1098
- color: inherit;
1099
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1100
- border: 0;
1101
- }
1102
-
1103
- .pf-v6-c-menu-toggle__button.pf-m-text {
1104
- display: inline-flex;
1105
- align-items: baseline;
1106
- }
1107
-
1108
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
1109
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1110
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
1111
- }
1112
-
1113
- .pf-v6-c-menu-toggle__text {
1114
- overflow: hidden;
1115
- text-overflow: ellipsis;
1116
- white-space: nowrap;
1117
- min-width: 0;
1118
- }
1119
-
1120
- .pf-v6-c-menu-toggle__count {
1121
- display: flex;
1122
- flex-wrap: nowrap;
1123
- }
1124
-
1125
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1126
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1127
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
1128
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1129
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1130
- }
1131
-
1132
- .pf-v6-c-menu-toggle__icon {
1133
- flex-shrink: 0;
1134
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
1135
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
1136
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
1137
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
1138
- }
1139
-
1140
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
1141
- vertical-align: middle;
1142
- }
1143
-
1144
- .pf-v6-c-menu-toggle__controls {
1145
- display: flex;
1146
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1147
- align-items: center;
1148
- justify-content: center;
1149
- margin-inline-start: auto;
1150
- }
1151
-
1152
- .pf-v6-c-menu-toggle__toggle-icon {
1153
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1154
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1155
- }
1156
-
1157
- .pf-v6-c-menu-toggle__status-icon {
1158
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1159
- }
1160
-
1161
- .pf-v6-c-divider {
1162
- --pf-v6-c-divider--Display: flex;
1163
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1164
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1165
- --pf-v6-c-divider--before--FlexBasis: 100%;
1166
- }
1167
-
1168
- .pf-v6-c-divider {
1169
- flex-direction: row;
1170
- width: 100%;
1171
- height: var(--pf-v6-c-divider--Size);
1172
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1173
- --pf-v6-hidden-visible--hidden--Display: none;
1174
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1175
- display: var(--pf-v6-hidden-visible--Display);
1176
- }
1177
-
1178
- .pf-v6-c-divider.pf-m-hidden {
1179
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1180
- }
1181
-
1182
- @media screen and (min-width: 36rem) {
1183
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1184
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1185
- }
1186
- .pf-v6-c-divider.pf-m-visible-on-sm {
1187
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1188
- }
1189
- }
1190
- @media screen and (min-width: 48rem) {
1191
- .pf-v6-c-divider.pf-m-hidden-on-md {
1192
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1193
- }
1194
- .pf-v6-c-divider.pf-m-visible-on-md {
1195
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1196
- }
1197
- }
1198
- @media screen and (min-width: 62rem) {
1199
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1200
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1201
- }
1202
- .pf-v6-c-divider.pf-m-visible-on-lg {
1203
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1204
- }
1205
- }
1206
- @media screen and (min-width: 75rem) {
1207
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1208
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1209
- }
1210
- .pf-v6-c-divider.pf-m-visible-on-xl {
1211
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1212
- }
1213
- }
1214
- @media screen and (min-width: 90.625rem) {
1215
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1216
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1217
- }
1218
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1219
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1220
- }
1221
- }
1222
- .pf-v6-c-divider {
1223
- flex-shrink: 0;
1224
- align-items: stretch;
1225
- align-self: stretch;
1226
- justify-content: center;
1227
- border: 0;
1122
+ }
1123
+ }
1228
1124
  }
1229
-
1230
- .pf-v6-c-divider::before {
1231
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1232
- content: "";
1233
- background-color: var(--pf-v6-c-divider--Color);
1234
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
1235
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
1125
+ .pf-v6-c-menu-toggle.pf-m-split-button {
1126
+ --pf-v6-c-menu-toggle--Gap: 0;
1127
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1128
+ padding: 0;
1236
1129
  }
1237
1130
 
1238
- .pf-v6-c-divider.pf-m-horizontal {
1239
- flex-direction: row;
1240
- width: 100%;
1241
- height: var(--pf-v6-c-divider--Size);
1131
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
1132
+ position: relative;
1133
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1134
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1135
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1136
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1242
1137
  }
1243
1138
 
1244
- .pf-v6-c-divider.pf-m-vertical {
1245
- flex-direction: column;
1246
- width: var(--pf-v6-c-divider--Size);
1247
- height: inherit;
1139
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1140
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1141
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1248
1142
  }
1249
1143
 
1250
- .pf-v6-c-divider.pf-m-inset-none {
1251
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1144
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1145
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1146
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1252
1147
  }
1253
1148
 
1254
- .pf-v6-c-divider.pf-m-inset-xs {
1255
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1149
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1150
+ --pf-v6-c-check__label--Color: currentcolor;
1151
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
1152
+ align-items: center;
1153
+ align-self: stretch;
1256
1154
  }
1257
1155
 
1258
- .pf-v6-c-divider.pf-m-inset-sm {
1259
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1156
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1157
+ --pf-v6-c-check__input--TranslateY: 0;
1158
+ align-self: center;
1260
1159
  }
1261
1160
 
1262
- .pf-v6-c-divider.pf-m-inset-md {
1263
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1161
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1162
+ border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
1264
1163
  }
1265
1164
 
1266
- .pf-v6-c-divider.pf-m-inset-lg {
1267
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1165
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1166
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
1268
1167
  }
1269
1168
 
1270
- .pf-v6-c-divider.pf-m-inset-xl {
1271
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1169
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1170
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1171
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
1272
1172
  }
1273
1173
 
1274
- .pf-v6-c-divider.pf-m-inset-2xl {
1275
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1174
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1175
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1176
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
1276
1177
  }
1277
1178
 
1278
- .pf-v6-c-divider.pf-m-inset-3xl {
1279
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1179
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1180
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
1280
1181
  }
1281
1182
 
1282
- @media (min-width: 36rem) {
1283
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1284
- flex-direction: row;
1285
- width: 100%;
1286
- height: var(--pf-v6-c-divider--Size);
1287
- }
1288
- }
1289
- @media (min-width: 36rem) {
1290
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1291
- flex-direction: column;
1292
- width: var(--pf-v6-c-divider--Size);
1293
- height: inherit;
1294
- }
1295
- }
1296
- @media (min-width: 36rem) {
1297
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1298
- --pf-v6-c-divider--before--FlexBasis: 100%;
1299
- }
1300
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1301
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1302
- }
1303
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1304
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1305
- }
1306
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
1307
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1308
- }
1309
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1310
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1311
- }
1312
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1313
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1314
- }
1315
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1316
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1317
- }
1318
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1319
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1320
- }
1321
- }
1322
- @media (min-width: 48rem) {
1323
- .pf-v6-c-divider.pf-m-horizontal-on-md {
1324
- flex-direction: row;
1325
- width: 100%;
1326
- height: var(--pf-v6-c-divider--Size);
1327
- }
1183
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1184
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
1328
1185
  }
1329
- @media (min-width: 48rem) {
1330
- .pf-v6-c-divider.pf-m-vertical-on-md {
1331
- flex-direction: column;
1332
- width: var(--pf-v6-c-divider--Size);
1333
- height: inherit;
1334
- }
1186
+
1187
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1188
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1189
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1190
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
1335
1191
  }
1336
- @media (min-width: 48rem) {
1337
- .pf-v6-c-divider.pf-m-inset-none-on-md {
1338
- --pf-v6-c-divider--before--FlexBasis: 100%;
1339
- }
1340
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
1341
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1342
- }
1343
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
1344
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1345
- }
1346
- .pf-v6-c-divider.pf-m-inset-md-on-md {
1347
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1348
- }
1349
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
1350
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1351
- }
1352
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
1353
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1354
- }
1355
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1356
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1357
- }
1358
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1359
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1360
- }
1192
+
1193
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1194
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1195
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1196
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
1361
1197
  }
1362
- @media (min-width: 62rem) {
1363
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
1364
- flex-direction: row;
1365
- width: 100%;
1366
- height: var(--pf-v6-c-divider--Size);
1367
- }
1198
+
1199
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1200
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
1368
1201
  }
1369
- @media (min-width: 62rem) {
1370
- .pf-v6-c-divider.pf-m-vertical-on-lg {
1371
- flex-direction: column;
1372
- width: var(--pf-v6-c-divider--Size);
1373
- height: inherit;
1374
- }
1202
+
1203
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1204
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1205
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1206
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
1375
1207
  }
1376
- @media (min-width: 62rem) {
1377
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
1378
- --pf-v6-c-divider--before--FlexBasis: 100%;
1379
- }
1380
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1381
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1382
- }
1383
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1384
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1385
- }
1386
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
1387
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1388
- }
1389
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1390
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1391
- }
1392
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1393
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1394
- }
1395
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1396
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1397
- }
1398
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1399
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1400
- }
1208
+
1209
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1210
+ content: none;
1401
1211
  }
1402
- @media (min-width: 75rem) {
1403
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
1404
- flex-direction: row;
1405
- width: 100%;
1406
- height: var(--pf-v6-c-divider--Size);
1407
- }
1212
+
1213
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
1214
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1215
+ --pf-v6-c-menu-toggle--Gap: 0;
1216
+ align-items: stretch;
1217
+ padding: 0;
1408
1218
  }
1409
- @media (min-width: 75rem) {
1410
- .pf-v6-c-divider.pf-m-vertical-on-xl {
1411
- flex-direction: column;
1412
- width: var(--pf-v6-c-divider--Size);
1413
- height: inherit;
1414
- }
1219
+
1220
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1221
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1415
1222
  }
1416
- @media (min-width: 75rem) {
1417
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
1418
- --pf-v6-c-divider--before--FlexBasis: 100%;
1419
- }
1420
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1421
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1422
- }
1423
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1424
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1425
- }
1426
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
1427
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1428
- }
1429
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1430
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1431
- }
1432
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1433
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1434
- }
1435
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1436
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1437
- }
1438
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1439
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1440
- }
1223
+
1224
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1225
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1226
+ display: flex;
1227
+ align-items: stretch;
1441
1228
  }
1442
- @media (min-width: 90.625rem) {
1443
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1444
- flex-direction: row;
1445
- width: 100%;
1446
- height: var(--pf-v6-c-divider--Size);
1447
- }
1229
+
1230
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1231
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1232
+ flex: 1;
1448
1233
  }
1449
- @media (min-width: 90.625rem) {
1450
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
1451
- flex-direction: column;
1452
- width: var(--pf-v6-c-divider--Size);
1453
- height: inherit;
1454
- }
1234
+
1235
+ .pf-v6-c-menu-toggle__button {
1236
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
1237
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1238
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1239
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1240
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1241
+ color: inherit;
1242
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1243
+ border: 0;
1455
1244
  }
1456
- @media (min-width: 90.625rem) {
1457
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1458
- --pf-v6-c-divider--before--FlexBasis: 100%;
1459
- }
1460
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1461
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1462
- }
1463
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1464
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1465
- }
1466
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1467
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1468
- }
1469
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1470
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1471
- }
1472
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1473
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1474
- }
1475
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1476
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1477
- }
1478
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1479
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1480
- }
1245
+
1246
+ .pf-v6-c-menu-toggle__button.pf-m-text {
1247
+ display: inline-flex;
1248
+ align-items: baseline;
1481
1249
  }
1482
- .pf-v6-c-label {
1483
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1484
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1485
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1486
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1487
- --pf-v6-c-label--MaxWidth: 100%;
1488
- --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
1489
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1490
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
1491
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1492
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1493
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1494
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1495
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1496
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1497
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1498
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
1499
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
1500
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
1501
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
1502
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
1503
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1504
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
1505
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
1506
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
1507
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
1508
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
1509
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
1510
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
1511
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
1512
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
1513
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
1514
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
1515
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
1516
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
1517
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
1518
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
1519
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
1520
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1521
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1522
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1523
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1524
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1525
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1526
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1527
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1528
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1529
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1530
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1531
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1532
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1533
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1534
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1535
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1536
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1537
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1538
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1539
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1540
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1541
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1542
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1543
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1544
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1545
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1546
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1547
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1548
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1549
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1550
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1551
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1552
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1553
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1554
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1555
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1556
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1557
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1558
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1559
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1560
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1561
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1562
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1563
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1564
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1565
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1566
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1567
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1568
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1569
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1570
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1571
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1572
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1573
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1574
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1575
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1576
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1577
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1578
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1579
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1580
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1581
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1582
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1583
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1584
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1585
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1586
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1587
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1588
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1589
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1590
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1591
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1592
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1593
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1594
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1595
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1596
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1597
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1598
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1599
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1600
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1601
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1602
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1603
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1604
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1605
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1606
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1607
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1608
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1609
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1610
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1611
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1612
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1613
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1614
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1615
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1616
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1617
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1618
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1619
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1620
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1621
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1622
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1623
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1624
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1625
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1626
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1627
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1628
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1629
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1630
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1631
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1632
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1633
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1634
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1635
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
1636
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1637
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1638
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1639
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1640
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1641
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1642
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1643
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1644
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1645
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1646
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1647
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1648
- --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
1649
- --pf-v6-c-label__content--MaxWidth: 100%;
1650
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1651
- --pf-v6-c-label__content--Cursor: initial;
1652
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1653
- --pf-v6-c-label__text--MaxWidth: 100%;
1654
- --pf-v6-c-label__actions--MarginInlineEnd: 0;
1655
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1656
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1657
- --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
1658
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
1659
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
1660
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
1661
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
1662
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
1663
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1664
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1665
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1666
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1667
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1668
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1669
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
1670
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1671
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1672
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1673
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1674
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1675
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1676
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1677
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1250
+
1251
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
1252
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1253
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
1678
1254
  }
1679
1255
 
1680
- .pf-v6-c-label {
1681
- position: relative;
1682
- gap: var(--pf-v6-c-label--Gap);
1683
- min-width: var(--pf-v6-c-label--MinWidth);
1684
- max-width: var(--pf-v6-c-label--MaxWidth);
1685
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1686
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1687
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1688
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1689
- font-size: var(--pf-v6-c-label--FontSize);
1256
+ .pf-v6-c-menu-toggle__text {
1257
+ overflow: hidden;
1258
+ text-overflow: ellipsis;
1690
1259
  white-space: nowrap;
1691
- background: transparent;
1692
- isolation: isolate;
1693
- border: 0;
1694
- border-radius: var(--pf-v6-c-label--BorderRadius);
1260
+ min-width: 0;
1695
1261
  }
1696
1262
 
1697
- .pf-v6-c-label.pf-m-blue {
1698
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1699
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1700
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1701
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1702
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1703
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1704
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1705
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1263
+ .pf-v6-c-menu-toggle__count {
1264
+ display: flex;
1265
+ flex-wrap: nowrap;
1706
1266
  }
1707
1267
 
1708
- .pf-v6-c-label.pf-m-red {
1709
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1710
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1711
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1712
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1713
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1714
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1715
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1716
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1268
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1269
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1270
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
1271
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1272
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1717
1273
  }
1718
1274
 
1719
- .pf-v6-c-label.pf-m-orange {
1720
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1721
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1722
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1723
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1724
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1725
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1726
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1727
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1275
+ .pf-v6-c-menu-toggle__icon {
1276
+ flex-shrink: 0;
1277
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
1278
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
1279
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
1280
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
1728
1281
  }
1729
1282
 
1730
- .pf-v6-c-label.pf-m-orangered {
1731
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1732
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1733
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1734
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1735
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1736
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1737
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1738
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1283
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
1284
+ vertical-align: middle;
1739
1285
  }
1740
1286
 
1741
- .pf-v6-c-label.pf-m-yellow {
1742
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1743
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1744
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1745
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1746
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1747
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1748
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1749
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1287
+ .pf-v6-c-menu-toggle__controls {
1288
+ display: flex;
1289
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1290
+ align-items: center;
1291
+ justify-content: center;
1292
+ margin-inline-start: auto;
1750
1293
  }
1751
1294
 
1752
- .pf-v6-c-label.pf-m-green {
1753
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1754
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1755
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1756
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1757
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1758
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1759
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1760
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1295
+ .pf-v6-c-menu-toggle__toggle-icon {
1296
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1297
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1761
1298
  }
1762
1299
 
1763
- .pf-v6-c-label.pf-m-teal {
1764
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1765
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1766
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1767
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1768
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1769
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1770
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1771
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1300
+ .pf-v6-c-menu-toggle__status-icon {
1301
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1772
1302
  }
1773
1303
 
1774
- .pf-v6-c-label.pf-m-purple {
1775
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1776
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1777
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1778
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1779
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1780
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1781
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1782
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1304
+ .pf-v6-c-label-group {
1305
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1306
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1307
+ --pf-v6-c-label-group--MaxWidth: 100%;
1308
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1309
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1310
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1311
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1312
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
1313
+ --pf-v6-c-label-group__main--MinWidth: 0;
1314
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1315
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1316
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1317
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1318
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
1319
+ --pf-v6-c-label-group__list--MinWidth: 0;
1320
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1321
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1322
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1323
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1324
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1325
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1326
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1327
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1328
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1329
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1330
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1331
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1332
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1333
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1334
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1335
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1336
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1337
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1338
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1339
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1340
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1341
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1783
1342
  }
1784
1343
 
1785
- .pf-v6-c-label.pf-m-success {
1786
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1787
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1788
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1789
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1790
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1791
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1792
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1793
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1794
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1795
- --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);
1344
+ .pf-v6-c-label-group {
1345
+ display: inline-flex;
1346
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1347
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1348
+ align-items: center;
1349
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1796
1350
  }
1797
1351
 
1798
- .pf-v6-c-label.pf-m-warning {
1799
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1800
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1801
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1802
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1803
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1804
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1805
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1806
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1807
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1808
- --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);
1352
+ .pf-v6-c-label-group.pf-m-category {
1353
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1354
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1355
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1356
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1357
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1358
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1359
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1360
+ }
1361
+
1362
+ .pf-v6-c-label-group.pf-m-vertical {
1363
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1364
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1365
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1366
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1367
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1368
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1369
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1370
+ }
1371
+
1372
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1373
+ align-items: flex-start;
1374
+ }
1375
+
1376
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1377
+ flex-direction: column;
1378
+ align-items: flex-start;
1379
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1380
+ }
1381
+
1382
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1383
+ flex-direction: column;
1384
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1385
+ }
1386
+
1387
+ .pf-v6-c-label-group.pf-m-editable,
1388
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1389
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1390
+ display: flex;
1391
+ }
1392
+
1393
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1394
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1395
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1396
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1397
+ flex: 1;
1398
+ }
1399
+
1400
+ .pf-v6-c-label-group__main {
1401
+ display: flex;
1402
+ flex: 1;
1403
+ flex-wrap: wrap;
1404
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1405
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1406
+ align-items: baseline;
1407
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1408
+ }
1409
+
1410
+ .pf-v6-c-label-group__list {
1411
+ display: inline-flex;
1412
+ flex-wrap: wrap;
1413
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1414
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1415
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1416
+ }
1417
+
1418
+ .pf-v6-c-label-group__list-item {
1419
+ display: inline-flex;
1420
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1421
+ }
1422
+
1423
+ .pf-v6-c-label-group__label {
1424
+ overflow: hidden;
1425
+ text-overflow: ellipsis;
1426
+ white-space: nowrap;
1427
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1809
1428
  }
1810
1429
 
1811
- .pf-v6-c-label.pf-m-danger {
1812
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1813
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1814
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1815
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1816
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1817
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1818
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1819
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1820
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1821
- --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);
1430
+ .pf-v6-c-label-group__close {
1431
+ display: flex;
1432
+ align-self: flex-start;
1822
1433
  }
1823
1434
 
1824
- .pf-v6-c-label.pf-m-info {
1825
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1826
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1827
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1828
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1829
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1830
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1831
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1832
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1833
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1834
- --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);
1435
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1436
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1437
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1438
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1439
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1440
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1835
1441
  }
1836
1442
 
1837
- .pf-v6-c-label.pf-m-custom {
1838
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1839
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1840
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1841
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1842
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1843
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1844
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1845
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1846
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1847
- --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);
1443
+ .pf-v6-c-label-group__textarea {
1444
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1445
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1446
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1447
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1448
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1449
+ white-space: nowrap;
1450
+ resize: none;
1451
+ scrollbar-width: none;
1452
+ -ms-overflow-style: none;
1453
+ border: 0;
1848
1454
  }
1849
1455
 
1850
- .pf-v6-c-label.pf-m-compact {
1851
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1852
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1853
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1854
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1855
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1856
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1857
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1456
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1457
+ display: none;
1858
1458
  }
1859
1459
 
1860
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1861
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1460
+ .pf-v6-c-text-input-group {
1461
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1462
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
1463
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1464
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1465
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1466
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1467
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1468
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1469
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1470
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1471
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1472
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1473
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1474
+ --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));
1475
+ --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));
1476
+ --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));
1477
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1478
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1479
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
1480
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1481
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1482
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1483
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1484
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1485
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1486
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1487
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1488
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1489
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1490
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1491
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1492
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1493
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
1494
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1495
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1496
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1497
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1498
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1499
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1500
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1501
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1502
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1503
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1504
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1505
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1506
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1507
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1508
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1509
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1510
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1511
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1862
1512
  }
1863
1513
 
1864
- .pf-v6-c-label.pf-m-outline {
1865
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1866
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1867
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1868
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1869
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1870
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1871
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1872
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1873
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1874
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1514
+ .pf-v6-c-text-input-group {
1515
+ position: relative;
1516
+ display: flex;
1517
+ width: 100%;
1518
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
1519
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
1520
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
1521
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1522
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1523
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1524
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1525
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1875
1526
  }
1876
1527
 
1877
- .pf-v6-c-label.pf-m-editable {
1878
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1879
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1528
+ .pf-v6-c-text-input-group::before {
1529
+ position: absolute;
1530
+ inset: 0;
1531
+ pointer-events: none;
1532
+ content: "";
1533
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1534
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1535
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1536
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1537
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1880
1538
  }
1881
1539
 
1882
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1883
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1884
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1540
+ .pf-v6-c-text-input-group.pf-m-disabled {
1541
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1542
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1543
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1544
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1545
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1546
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1547
+ pointer-events: none;
1885
1548
  }
1886
1549
 
1887
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1888
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1889
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1890
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1550
+ .pf-v6-c-text-input-group.pf-m-plain {
1551
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
1891
1552
  }
1892
1553
 
1893
- .pf-v6-c-label.pf-m-editable-active {
1894
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1895
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1896
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1897
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1554
+ .pf-v6-c-text-input-group.pf-m-plain::before {
1555
+ border: 0;
1898
1556
  }
1899
1557
 
1900
- .pf-v6-c-label.pf-m-overflow {
1901
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1902
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1903
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1558
+ .pf-v6-c-text-input-group.pf-m-success {
1559
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1560
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1561
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1904
1562
  }
1905
1563
 
1906
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1907
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1908
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1909
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1564
+ .pf-v6-c-text-input-group.pf-m-warning {
1565
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1566
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1567
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1910
1568
  }
1911
1569
 
1912
- .pf-v6-c-label.pf-m-add {
1913
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1914
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1915
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1916
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1570
+ .pf-v6-c-text-input-group.pf-m-error {
1571
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1572
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1573
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1917
1574
  }
1918
1575
 
1919
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1920
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1921
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1922
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1923
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1576
+ @media (prefers-reduced-motion: no-preference) {
1577
+ .pf-v6-c-text-input-group.pf-m-error {
1578
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1579
+ animation-name: pf-v6-global-danger-jiggle-motion;
1580
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1581
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1582
+ animation-fill-mode: both;
1583
+ }
1924
1584
  }
1925
-
1926
- .pf-v6-c-label.pf-m-clickable {
1927
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1585
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1586
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1587
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1588
+ animation-name: pf-v6-global-fade-in;
1589
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1590
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1928
1591
  }
1929
1592
 
1930
- .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) {
1931
- text-decoration-line: none;
1593
+ .pf-v6-c-text-input-group:hover {
1594
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1932
1595
  }
1933
1596
 
1934
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1935
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1936
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1937
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1938
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1939
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1940
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1941
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1597
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1598
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1942
1599
  }
1943
1600
 
1944
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1945
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1601
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1602
+ --pf-v6-c-text-input-group__text--Position: relative;
1946
1603
  }
1947
1604
 
1948
- .pf-v6-c-label.pf-m-disabled {
1949
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1950
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1951
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1952
- --pf-v6-c-label--BorderWidth: 0;
1953
- pointer-events: none;
1605
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1606
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1607
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1954
1608
  }
1955
1609
 
1956
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1957
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1610
+ .pf-v6-c-text-input-group__main {
1611
+ display: flex;
1612
+ flex: 1;
1613
+ flex-wrap: wrap;
1614
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1615
+ min-width: 0;
1958
1616
  }
1959
1617
 
1960
- .pf-v6-c-label,
1961
- .pf-v6-c-label__content {
1618
+ .pf-v6-c-text-input-group__main.pf-m-icon {
1619
+ --pf-v6-c-text-input-group__text--Position: relative;
1620
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1962
1621
  display: inline-flex;
1963
1622
  align-items: center;
1964
1623
  justify-content: center;
1624
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1965
1625
  }
1966
1626
 
1967
- .pf-v6-c-label__text {
1968
- overflow: hidden;
1969
- text-overflow: ellipsis;
1970
- white-space: nowrap;
1971
- max-width: var(--pf-v6-c-label__text--MaxWidth);
1627
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1628
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1972
1629
  }
1973
1630
 
1974
- .pf-v6-c-label__content {
1975
- gap: var(--pf-v6-c-label__content--Gap);
1976
- max-width: var(--pf-v6-c-label__content--MaxWidth);
1977
- padding: 0;
1978
- overflow: hidden;
1979
- color: var(--pf-v6-c-label--Color);
1980
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
1981
- background: transparent;
1982
- border-width: 0;
1631
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1632
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1633
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1634
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1983
1635
  }
1984
1636
 
1985
- .pf-v6-c-label__content::before {
1637
+ .pf-v6-c-text-input-group__text {
1638
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
1639
+ display: inline-grid;
1640
+ flex: 1;
1641
+ grid-template-areas: "text-input";
1642
+ grid-template-columns: 1fr;
1643
+ }
1644
+
1645
+ .pf-v6-c-text-input-group__icon {
1986
1646
  position: absolute;
1987
- inset: 0;
1988
- z-index: -1;
1989
- pointer-events: none;
1990
- content: "";
1991
- background-color: var(--pf-v6-c-label--BackgroundColor);
1992
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1993
- border-radius: var(--pf-v6-c-label--BorderRadius);
1647
+ inset-block-start: 50%;
1648
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1649
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1650
+ color: var(--pf-v6-c-text-input-group__icon--Color);
1651
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1994
1652
  }
1995
1653
 
1996
- input.pf-v6-c-label__content {
1654
+ .pf-v6-c-text-input-group__icon.pf-m-status {
1655
+ inset-inline-start: auto;
1656
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1657
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1658
+ }
1659
+
1660
+ .pf-v6-c-text-input-group__text-input {
1997
1661
  overflow: hidden;
1998
1662
  text-overflow: ellipsis;
1999
1663
  white-space: nowrap;
1664
+ position: relative;
1665
+ width: 100%;
1666
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1667
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1668
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1669
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1670
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1671
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
1672
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1673
+ border: 0;
1674
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2000
1675
  }
2001
1676
 
2002
- .pf-v6-c-label__icon {
2003
- color: var(--pf-v6-c-label__icon--Color);
1677
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1678
+ grid-area: text-input;
2004
1679
  }
2005
1680
 
2006
- .pf-v6-c-label__actions {
2007
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1681
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
1682
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2008
1683
  }
2009
1684
 
2010
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
2011
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1685
+ .pf-v6-c-text-input-group__text-input::placeholder {
1686
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2012
1687
  }
2013
1688
 
2014
- .pf-v6-c-label__actions .pf-v6-c-button {
2015
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2016
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2017
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2018
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2019
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2020
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2021
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2022
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1689
+ .pf-v6-c-text-input-group__utilities {
1690
+ display: flex;
1691
+ align-items: center;
1692
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1693
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1694
+ }
1695
+
1696
+ .pf-v6-c-text-input-group__utilities > * + * {
1697
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1698
+ }
1699
+
1700
+ .pf-v6-c-text-input-group__group {
1701
+ display: flex;
2023
1702
  }
2024
1703
 
2025
1704
  .pf-v6-c-button {
@@ -2976,71 +2655,392 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2976
2655
  transition-property: opacity;
2977
2656
  }
2978
2657
 
2979
- .pf-v6-c-button__icon-favorite {
2980
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2658
+ .pf-v6-c-button__icon-favorite {
2659
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2660
+ }
2661
+
2662
+ .pf-v6-c-button__icon-favorited {
2663
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2664
+ }
2665
+
2666
+ .pf-v6-c-button__progress {
2667
+ position: absolute;
2668
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2669
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2670
+ line-height: 1;
2671
+ color: var(--pf-v6-c-button__progress--Color);
2672
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2673
+ }
2674
+
2675
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2676
+ --pf-v6-c-spinner--Color: currentcolor;
2677
+ }
2678
+
2679
+ .pf-v6-c-button__text {
2680
+ text-decoration: inherit;
2681
+ }
2682
+
2683
+ .pf-v6-c-button__count {
2684
+ display: inline-flex;
2685
+ align-items: center;
2686
+ }
2687
+
2688
+ .pf-v6-c-button--hamburger-icon path {
2689
+ fill: none;
2690
+ stroke: currentcolor;
2691
+ stroke-linecap: round;
2692
+ stroke-linejoin: round;
2693
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2694
+ }
2695
+
2696
+ .pf-v6-c-button--hamburger-icon--top {
2697
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2698
+ }
2699
+
2700
+ .pf-v6-c-button--hamburger-icon--middle {
2701
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2702
+ }
2703
+
2704
+ .pf-v6-c-button--hamburger-icon--arrow {
2705
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2706
+ }
2707
+
2708
+ .pf-v6-c-button--hamburger-icon--bottom {
2709
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2710
+ }
2711
+
2712
+ @keyframes pf-v6-c-button-icon-notify {
2713
+ 33% {
2714
+ transform: rotate(30deg);
2715
+ }
2716
+ 66% {
2717
+ transform: rotate(-60deg);
2718
+ }
2719
+ }
2720
+ @keyframes pf-v6-c-button-icon-favorited {
2721
+ 50% {
2722
+ scale: 1.5;
2723
+ }
2724
+ }
2725
+ .pf-v6-c-divider {
2726
+ --pf-v6-c-divider--Display: flex;
2727
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2728
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2729
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2730
+ }
2731
+
2732
+ .pf-v6-c-divider {
2733
+ flex-direction: row;
2734
+ width: 100%;
2735
+ height: var(--pf-v6-c-divider--Size);
2736
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2737
+ --pf-v6-hidden-visible--hidden--Display: none;
2738
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2739
+ display: var(--pf-v6-hidden-visible--Display);
2740
+ }
2741
+
2742
+ .pf-v6-c-divider.pf-m-hidden {
2743
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2744
+ }
2745
+
2746
+ @media screen and (min-width: 36rem) {
2747
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
2748
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2749
+ }
2750
+ .pf-v6-c-divider.pf-m-visible-on-sm {
2751
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2752
+ }
2753
+ }
2754
+ @media screen and (min-width: 48rem) {
2755
+ .pf-v6-c-divider.pf-m-hidden-on-md {
2756
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2757
+ }
2758
+ .pf-v6-c-divider.pf-m-visible-on-md {
2759
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2760
+ }
2761
+ }
2762
+ @media screen and (min-width: 62rem) {
2763
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
2764
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2765
+ }
2766
+ .pf-v6-c-divider.pf-m-visible-on-lg {
2767
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2768
+ }
2769
+ }
2770
+ @media screen and (min-width: 75rem) {
2771
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
2772
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2773
+ }
2774
+ .pf-v6-c-divider.pf-m-visible-on-xl {
2775
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2776
+ }
2777
+ }
2778
+ @media screen and (min-width: 90.625rem) {
2779
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
2780
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2781
+ }
2782
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
2783
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2784
+ }
2785
+ }
2786
+ .pf-v6-c-divider {
2787
+ flex-shrink: 0;
2788
+ align-items: stretch;
2789
+ align-self: stretch;
2790
+ justify-content: center;
2791
+ border: 0;
2792
+ }
2793
+
2794
+ .pf-v6-c-divider::before {
2795
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2796
+ content: "";
2797
+ background-color: var(--pf-v6-c-divider--Color);
2798
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2799
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2800
+ }
2801
+
2802
+ .pf-v6-c-divider.pf-m-horizontal {
2803
+ flex-direction: row;
2804
+ width: 100%;
2805
+ height: var(--pf-v6-c-divider--Size);
2806
+ }
2807
+
2808
+ .pf-v6-c-divider.pf-m-vertical {
2809
+ flex-direction: column;
2810
+ width: var(--pf-v6-c-divider--Size);
2811
+ height: inherit;
2981
2812
  }
2982
2813
 
2983
- .pf-v6-c-button__icon-favorited {
2984
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2814
+ .pf-v6-c-divider.pf-m-inset-none {
2815
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2985
2816
  }
2986
2817
 
2987
- .pf-v6-c-button__progress {
2988
- position: absolute;
2989
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2990
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2991
- line-height: 1;
2992
- color: var(--pf-v6-c-button__progress--Color);
2993
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2818
+ .pf-v6-c-divider.pf-m-inset-xs {
2819
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2994
2820
  }
2995
2821
 
2996
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2997
- --pf-v6-c-spinner--Color: currentcolor;
2822
+ .pf-v6-c-divider.pf-m-inset-sm {
2823
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2998
2824
  }
2999
2825
 
3000
- .pf-v6-c-button__text {
3001
- text-decoration: inherit;
2826
+ .pf-v6-c-divider.pf-m-inset-md {
2827
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
3002
2828
  }
3003
2829
 
3004
- .pf-v6-c-button__count {
3005
- display: inline-flex;
3006
- align-items: center;
2830
+ .pf-v6-c-divider.pf-m-inset-lg {
2831
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
3007
2832
  }
3008
2833
 
3009
- .pf-v6-c-button--hamburger-icon path {
3010
- fill: none;
3011
- stroke: currentcolor;
3012
- stroke-linecap: round;
3013
- stroke-linejoin: round;
3014
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2834
+ .pf-v6-c-divider.pf-m-inset-xl {
2835
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
3015
2836
  }
3016
2837
 
3017
- .pf-v6-c-button--hamburger-icon--top {
3018
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2838
+ .pf-v6-c-divider.pf-m-inset-2xl {
2839
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3019
2840
  }
3020
2841
 
3021
- .pf-v6-c-button--hamburger-icon--middle {
3022
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2842
+ .pf-v6-c-divider.pf-m-inset-3xl {
2843
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3023
2844
  }
3024
2845
 
3025
- .pf-v6-c-button--hamburger-icon--arrow {
3026
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2846
+ @media (min-width: 36rem) {
2847
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
2848
+ flex-direction: row;
2849
+ width: 100%;
2850
+ height: var(--pf-v6-c-divider--Size);
2851
+ }
3027
2852
  }
3028
-
3029
- .pf-v6-c-button--hamburger-icon--bottom {
3030
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2853
+ @media (min-width: 36rem) {
2854
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
2855
+ flex-direction: column;
2856
+ width: var(--pf-v6-c-divider--Size);
2857
+ height: inherit;
2858
+ }
3031
2859
  }
3032
-
3033
- @keyframes pf-v6-c-button-icon-notify {
3034
- 33% {
3035
- transform: rotate(30deg);
2860
+ @media (min-width: 36rem) {
2861
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
2862
+ --pf-v6-c-divider--before--FlexBasis: 100%;
3036
2863
  }
3037
- 66% {
3038
- transform: rotate(-60deg);
2864
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2865
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2866
+ }
2867
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2868
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2869
+ }
2870
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
2871
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2872
+ }
2873
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2874
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2875
+ }
2876
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2877
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2878
+ }
2879
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2880
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2881
+ }
2882
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2883
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3039
2884
  }
3040
2885
  }
3041
- @keyframes pf-v6-c-button-icon-favorited {
3042
- 50% {
3043
- scale: 1.5;
2886
+ @media (min-width: 48rem) {
2887
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
2888
+ flex-direction: row;
2889
+ width: 100%;
2890
+ height: var(--pf-v6-c-divider--Size);
2891
+ }
2892
+ }
2893
+ @media (min-width: 48rem) {
2894
+ .pf-v6-c-divider.pf-m-vertical-on-md {
2895
+ flex-direction: column;
2896
+ width: var(--pf-v6-c-divider--Size);
2897
+ height: inherit;
2898
+ }
2899
+ }
2900
+ @media (min-width: 48rem) {
2901
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2902
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2903
+ }
2904
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2905
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2906
+ }
2907
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2908
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2909
+ }
2910
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2911
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2912
+ }
2913
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2914
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2915
+ }
2916
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2917
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2918
+ }
2919
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2920
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2921
+ }
2922
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2923
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2924
+ }
2925
+ }
2926
+ @media (min-width: 62rem) {
2927
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2928
+ flex-direction: row;
2929
+ width: 100%;
2930
+ height: var(--pf-v6-c-divider--Size);
2931
+ }
2932
+ }
2933
+ @media (min-width: 62rem) {
2934
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2935
+ flex-direction: column;
2936
+ width: var(--pf-v6-c-divider--Size);
2937
+ height: inherit;
2938
+ }
2939
+ }
2940
+ @media (min-width: 62rem) {
2941
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2942
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2943
+ }
2944
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2945
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2946
+ }
2947
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2948
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2949
+ }
2950
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2951
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2952
+ }
2953
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2954
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2955
+ }
2956
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2957
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2958
+ }
2959
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2960
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2961
+ }
2962
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2963
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2964
+ }
2965
+ }
2966
+ @media (min-width: 75rem) {
2967
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2968
+ flex-direction: row;
2969
+ width: 100%;
2970
+ height: var(--pf-v6-c-divider--Size);
2971
+ }
2972
+ }
2973
+ @media (min-width: 75rem) {
2974
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2975
+ flex-direction: column;
2976
+ width: var(--pf-v6-c-divider--Size);
2977
+ height: inherit;
2978
+ }
2979
+ }
2980
+ @media (min-width: 75rem) {
2981
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2982
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2983
+ }
2984
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2985
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2986
+ }
2987
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2988
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2989
+ }
2990
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2991
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2992
+ }
2993
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2994
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2995
+ }
2996
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2997
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2998
+ }
2999
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
3000
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3001
+ }
3002
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
3003
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3004
+ }
3005
+ }
3006
+ @media (min-width: 90.625rem) {
3007
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
3008
+ flex-direction: row;
3009
+ width: 100%;
3010
+ height: var(--pf-v6-c-divider--Size);
3011
+ }
3012
+ }
3013
+ @media (min-width: 90.625rem) {
3014
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
3015
+ flex-direction: column;
3016
+ width: var(--pf-v6-c-divider--Size);
3017
+ height: inherit;
3018
+ }
3019
+ }
3020
+ @media (min-width: 90.625rem) {
3021
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
3022
+ --pf-v6-c-divider--before--FlexBasis: 100%;
3023
+ }
3024
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
3025
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
3026
+ }
3027
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
3028
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
3029
+ }
3030
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
3031
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
3032
+ }
3033
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
3034
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
3035
+ }
3036
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
3037
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
3038
+ }
3039
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
3040
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3041
+ }
3042
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
3043
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3044
3044
  }
3045
3045
  }
3046
3046
  .pf-v6-c-menu {