@patternfly/react-templates 6.5.0-prerelease.56 → 6.5.0-prerelease.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-DjRvgW9Z.css → output-WMr5hPMy.css} +715 -715
  6. package/dist/umd/react-templates.min.js +1 -1
  7. package/package.json +3 -3
package/dist/umd/assets/{output-DjRvgW9Z.css → output-WMr5hPMy.css} RENAMED
@@ -3,6 +3,332 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
+ .pf-v6-c-check {
7
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
8
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
9
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
10
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
11
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
12
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
13
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
14
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
15
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
16
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
17
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
18
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
19
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
20
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
21
+ }
22
+
23
+ .pf-v6-c-check {
24
+ display: grid;
25
+ grid-template-columns: auto 1fr;
26
+ grid-gap: var(--pf-v6-c-check--GridGap);
27
+ accent-color: var(--pf-v6-c-check--AccentColor);
28
+ }
29
+
30
+ .pf-v6-c-check.pf-m-standalone {
31
+ display: inline-grid;
32
+ grid-template-columns: auto;
33
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
34
+ }
35
+
36
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
37
+ align-self: center;
38
+ transform: none;
39
+ }
40
+
41
+ .pf-v6-c-check__input {
42
+ align-self: start;
43
+ font-size: var(--pf-v6-c-check__label--FontSize);
44
+ line-height: var(--pf-v6-c-check__label--LineHeight);
45
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
46
+ }
47
+
48
+ .pf-v6-c-check__label {
49
+ font-size: var(--pf-v6-c-check__label--FontSize);
50
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
51
+ line-height: var(--pf-v6-c-check__label--LineHeight);
52
+ color: var(--pf-v6-c-check__label--Color);
53
+ }
54
+
55
+ .pf-v6-c-check__description {
56
+ grid-column: 2;
57
+ font-size: var(--pf-v6-c-check__description--FontSize);
58
+ color: var(--pf-v6-c-check__description--Color);
59
+ }
60
+
61
+ .pf-v6-c-check__body {
62
+ grid-column: 2;
63
+ }
64
+
65
+ .pf-v6-c-check__label,
66
+ .pf-v6-c-check__input {
67
+ justify-self: start;
68
+ }
69
+
70
+ label.pf-v6-c-check, .pf-v6-c-check__label,
71
+ .pf-v6-c-check__input {
72
+ cursor: pointer;
73
+ }
74
+
75
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
76
+ .pf-v6-c-check__input:disabled,
77
+ .pf-v6-c-check__input.pf-m-disabled {
78
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
79
+ cursor: not-allowed;
80
+ }
81
+
82
+ .pf-v6-c-check__label-required {
83
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
84
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
85
+ color: var(--pf-v6-c-check__label-required--Color);
86
+ }
87
+
88
+ .pf-v6-c-text-input-group {
89
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
90
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
91
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
92
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
93
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
94
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
95
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
96
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
97
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
98
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
99
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
100
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
101
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
102
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
103
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
104
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
105
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
106
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
107
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
108
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
109
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
110
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
111
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
112
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
113
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
114
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
115
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
116
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
117
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
118
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
119
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
120
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
121
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
122
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
123
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
124
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
125
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
126
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
127
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
128
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
129
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
130
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
131
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
132
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
133
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
134
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
135
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
136
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
137
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
138
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
139
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
140
+ }
141
+
142
+ .pf-v6-c-text-input-group {
143
+ position: relative;
144
+ display: flex;
145
+ width: 100%;
146
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
147
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
148
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
149
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
150
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
151
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
152
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
153
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
154
+ }
155
+
156
+ .pf-v6-c-text-input-group::before {
157
+ position: absolute;
158
+ inset: 0;
159
+ pointer-events: none;
160
+ content: "";
161
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
162
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
163
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
164
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
165
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
166
+ }
167
+
168
+ .pf-v6-c-text-input-group.pf-m-disabled {
169
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
170
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
171
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
172
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
173
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
174
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
175
+ pointer-events: none;
176
+ }
177
+
178
+ .pf-v6-c-text-input-group.pf-m-plain {
179
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
180
+ }
181
+
182
+ .pf-v6-c-text-input-group.pf-m-plain::before {
183
+ border: 0;
184
+ }
185
+
186
+ .pf-v6-c-text-input-group.pf-m-success {
187
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
188
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
189
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
190
+ }
191
+
192
+ .pf-v6-c-text-input-group.pf-m-warning {
193
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
194
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
195
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
196
+ }
197
+
198
+ .pf-v6-c-text-input-group.pf-m-error {
199
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
200
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
201
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
202
+ }
203
+
204
+ @media (prefers-reduced-motion: no-preference) {
205
+ .pf-v6-c-text-input-group.pf-m-error {
206
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
207
+ animation-name: pf-v6-global-danger-jiggle-motion;
208
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
209
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
210
+ animation-fill-mode: both;
211
+ }
212
+ }
213
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
214
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
215
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
216
+ animation-name: pf-v6-global-fade-in;
217
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
218
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
219
+ }
220
+
221
+ .pf-v6-c-text-input-group:hover {
222
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
223
+ }
224
+
225
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
226
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
227
+ }
228
+
229
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
230
+ --pf-v6-c-text-input-group__text--Position: relative;
231
+ }
232
+
233
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
234
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
235
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
236
+ }
237
+
238
+ .pf-v6-c-text-input-group__main {
239
+ display: flex;
240
+ flex: 1;
241
+ flex-wrap: wrap;
242
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
243
+ min-width: 0;
244
+ }
245
+
246
+ .pf-v6-c-text-input-group__main.pf-m-icon {
247
+ --pf-v6-c-text-input-group__text--Position: relative;
248
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
249
+ display: inline-flex;
250
+ align-items: center;
251
+ justify-content: center;
252
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
253
+ }
254
+
255
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
256
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
257
+ }
258
+
259
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
260
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
261
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
262
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
263
+ }
264
+
265
+ .pf-v6-c-text-input-group__text {
266
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
267
+ display: inline-grid;
268
+ flex: 1;
269
+ grid-template-areas: "text-input";
270
+ grid-template-columns: 1fr;
271
+ }
272
+
273
+ .pf-v6-c-text-input-group__icon {
274
+ position: absolute;
275
+ inset-block-start: 50%;
276
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
277
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
278
+ color: var(--pf-v6-c-text-input-group__icon--Color);
279
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
280
+ }
281
+
282
+ .pf-v6-c-text-input-group__icon.pf-m-status {
283
+ inset-inline-start: auto;
284
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
285
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
286
+ }
287
+
288
+ .pf-v6-c-text-input-group__text-input {
289
+ overflow: hidden;
290
+ text-overflow: ellipsis;
291
+ white-space: nowrap;
292
+ position: relative;
293
+ width: 100%;
294
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
295
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
296
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
297
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
298
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
299
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
300
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
301
+ border: 0;
302
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
303
+ }
304
+
305
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
306
+ grid-area: text-input;
307
+ }
308
+
309
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
310
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
311
+ }
312
+
313
+ .pf-v6-c-text-input-group__text-input::placeholder {
314
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
315
+ }
316
+
317
+ .pf-v6-c-text-input-group__utilities {
318
+ display: flex;
319
+ align-items: center;
320
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
321
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
322
+ }
323
+
324
+ .pf-v6-c-text-input-group__utilities > * + * {
325
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
326
+ }
327
+
328
+ .pf-v6-c-text-input-group__group {
329
+ display: flex;
330
+ }
331
+
6
332
  .pf-v6-c-menu-toggle {
7
333
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
8
334
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -1086,62 +1412,137 @@
1086
1412
  justify-content: center;
1087
1413
  }
1088
1414
 
1089
- .pf-v6-c-label__text {
1090
- overflow: hidden;
1091
- text-overflow: ellipsis;
1415
+ .pf-v6-c-label__text {
1416
+ overflow: hidden;
1417
+ text-overflow: ellipsis;
1418
+ white-space: nowrap;
1419
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
1420
+ }
1421
+
1422
+ .pf-v6-c-label__content {
1423
+ gap: var(--pf-v6-c-label__content--Gap);
1424
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
1425
+ padding: 0;
1426
+ overflow: hidden;
1427
+ color: var(--pf-v6-c-label--Color);
1428
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
1429
+ background: transparent;
1430
+ border-width: 0;
1431
+ }
1432
+
1433
+ .pf-v6-c-label__content::before {
1434
+ position: absolute;
1435
+ inset: 0;
1436
+ z-index: -1;
1437
+ pointer-events: none;
1438
+ content: "";
1439
+ background-color: var(--pf-v6-c-label--BackgroundColor);
1440
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1441
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1442
+ }
1443
+
1444
+ input.pf-v6-c-label__content {
1445
+ overflow: hidden;
1446
+ text-overflow: ellipsis;
1447
+ white-space: nowrap;
1448
+ }
1449
+
1450
+ .pf-v6-c-label__icon {
1451
+ color: var(--pf-v6-c-label__icon--Color);
1452
+ }
1453
+
1454
+ .pf-v6-c-label__actions {
1455
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1456
+ }
1457
+
1458
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1459
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1460
+ }
1461
+
1462
+ .pf-v6-c-label__actions .pf-v6-c-button {
1463
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1464
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1465
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1466
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1467
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1468
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1469
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1470
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1471
+ }
1472
+
1473
+ .pf-v6-c-badge {
1474
+ --pf-v6-c-badge--BorderColor: transparent;
1475
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1476
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1477
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1478
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1479
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1480
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1481
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1482
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1483
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1484
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1485
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1486
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1487
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
1488
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1489
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1490
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1491
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1492
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1493
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1494
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1495
+ }
1496
+
1497
+ .pf-v6-c-badge {
1498
+ position: relative;
1499
+ display: inline-block;
1500
+ min-width: var(--pf-v6-c-badge--MinWidth);
1501
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1502
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1503
+ font-size: var(--pf-v6-c-badge--FontSize);
1504
+ font-weight: var(--pf-v6-c-badge--FontWeight);
1505
+ color: var(--pf-v6-c-badge--Color);
1506
+ text-align: center;
1092
1507
  white-space: nowrap;
1093
- max-width: var(--pf-v6-c-label__text--MaxWidth);
1094
- }
1095
-
1096
- .pf-v6-c-label__content {
1097
- gap: var(--pf-v6-c-label__content--Gap);
1098
- max-width: var(--pf-v6-c-label__content--MaxWidth);
1099
- padding: 0;
1100
- overflow: hidden;
1101
- color: var(--pf-v6-c-label--Color);
1102
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
1103
- background: transparent;
1104
- border-width: 0;
1508
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
1509
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
1105
1510
  }
1106
1511
 
1107
- .pf-v6-c-label__content::before {
1512
+ .pf-v6-c-badge::after {
1108
1513
  position: absolute;
1109
1514
  inset: 0;
1110
- z-index: -1;
1111
1515
  pointer-events: none;
1112
1516
  content: "";
1113
- background-color: var(--pf-v6-c-label--BackgroundColor);
1114
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1115
- border-radius: var(--pf-v6-c-label--BorderRadius);
1517
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1518
+ border-radius: inherit;
1116
1519
  }
1117
1520
 
1118
- input.pf-v6-c-label__content {
1119
- overflow: hidden;
1120
- text-overflow: ellipsis;
1121
- white-space: nowrap;
1521
+ .pf-v6-c-badge.pf-m-read {
1522
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
1523
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1524
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1525
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1122
1526
  }
1123
1527
 
1124
- .pf-v6-c-label__icon {
1125
- color: var(--pf-v6-c-label__icon--Color);
1528
+ .pf-v6-c-badge.pf-m-unread {
1529
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1530
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1531
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1126
1532
  }
1127
1533
 
1128
- .pf-v6-c-label__actions {
1129
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1534
+ .pf-v6-c-badge.pf-m-disabled {
1535
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1536
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1130
1537
  }
1131
1538
 
1132
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1133
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1539
+ .pf-v6-c-badge.pf-m-disabled::after {
1540
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1134
1541
  }
1135
1542
 
1136
- .pf-v6-c-label__actions .pf-v6-c-button {
1137
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1138
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1139
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1140
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1141
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1142
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1143
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1144
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1543
+ .pf-v6-c-badge__toggle-icon {
1544
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1545
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
1145
1546
  }
1146
1547
 
1147
1548
  .pf-v6-c-button {
@@ -2154,88 +2555,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2154
2555
  scale: 1.5;
2155
2556
  }
2156
2557
  }
2157
- .pf-v6-c-check {
2158
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2159
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2160
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2161
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2162
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2163
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2164
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2165
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2166
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2167
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2168
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2169
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2170
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2171
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2172
- }
2173
-
2174
- .pf-v6-c-check {
2175
- display: grid;
2176
- grid-template-columns: auto 1fr;
2177
- grid-gap: var(--pf-v6-c-check--GridGap);
2178
- accent-color: var(--pf-v6-c-check--AccentColor);
2179
- }
2180
-
2181
- .pf-v6-c-check.pf-m-standalone {
2182
- display: inline-grid;
2183
- grid-template-columns: auto;
2184
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2185
- }
2186
-
2187
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2188
- align-self: center;
2189
- transform: none;
2190
- }
2191
-
2192
- .pf-v6-c-check__input {
2193
- align-self: start;
2194
- font-size: var(--pf-v6-c-check__label--FontSize);
2195
- line-height: var(--pf-v6-c-check__label--LineHeight);
2196
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2197
- }
2198
-
2199
- .pf-v6-c-check__label {
2200
- font-size: var(--pf-v6-c-check__label--FontSize);
2201
- font-weight: var(--pf-v6-c-check__label--FontWeight);
2202
- line-height: var(--pf-v6-c-check__label--LineHeight);
2203
- color: var(--pf-v6-c-check__label--Color);
2204
- }
2205
-
2206
- .pf-v6-c-check__description {
2207
- grid-column: 2;
2208
- font-size: var(--pf-v6-c-check__description--FontSize);
2209
- color: var(--pf-v6-c-check__description--Color);
2210
- }
2211
-
2212
- .pf-v6-c-check__body {
2213
- grid-column: 2;
2214
- }
2215
-
2216
- .pf-v6-c-check__label,
2217
- .pf-v6-c-check__input {
2218
- justify-self: start;
2219
- }
2220
-
2221
- label.pf-v6-c-check, .pf-v6-c-check__label,
2222
- .pf-v6-c-check__input {
2223
- cursor: pointer;
2224
- }
2225
-
2226
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2227
- .pf-v6-c-check__input:disabled,
2228
- .pf-v6-c-check__input.pf-m-disabled {
2229
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2230
- cursor: not-allowed;
2231
- }
2232
-
2233
- .pf-v6-c-check__label-required {
2234
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2235
- font-size: var(--pf-v6-c-check__label-required--FontSize);
2236
- color: var(--pf-v6-c-check__label-required--Color);
2237
- }
2238
-
2239
2558
  .pf-v6-c-divider {
2240
2559
  --pf-v6-c-divider--Display: flex;
2241
2560
  --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
@@ -2520,118 +2839,43 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2520
2839
  @media (min-width: 90.625rem) {
2521
2840
  .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2522
2841
  flex-direction: row;
2523
- width: 100%;
2524
- height: var(--pf-v6-c-divider--Size);
2525
- }
2526
- }
2527
- @media (min-width: 90.625rem) {
2528
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
2529
- flex-direction: column;
2530
- width: var(--pf-v6-c-divider--Size);
2531
- height: inherit;
2532
- }
2533
- }
2534
- @media (min-width: 90.625rem) {
2535
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2536
- --pf-v6-c-divider--before--FlexBasis: 100%;
2537
- }
2538
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2539
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2540
- }
2541
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2542
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2543
- }
2544
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2545
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2546
- }
2547
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2548
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2549
- }
2550
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2551
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2552
- }
2553
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2554
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2555
- }
2556
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2557
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2558
- }
2559
- }
2560
- .pf-v6-c-badge {
2561
- --pf-v6-c-badge--BorderColor: transparent;
2562
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2563
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2564
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2565
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2566
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2567
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2568
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2569
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2570
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2571
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2572
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2573
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2574
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2575
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2576
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2577
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2578
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2579
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2580
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2581
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2582
- }
2583
-
2584
- .pf-v6-c-badge {
2585
- position: relative;
2586
- display: inline-block;
2587
- min-width: var(--pf-v6-c-badge--MinWidth);
2588
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2589
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2590
- font-size: var(--pf-v6-c-badge--FontSize);
2591
- font-weight: var(--pf-v6-c-badge--FontWeight);
2592
- color: var(--pf-v6-c-badge--Color);
2593
- text-align: center;
2594
- white-space: nowrap;
2595
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2596
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2597
- }
2598
-
2599
- .pf-v6-c-badge::after {
2600
- position: absolute;
2601
- inset: 0;
2602
- pointer-events: none;
2603
- content: "";
2604
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2605
- border-radius: inherit;
2606
- }
2607
-
2608
- .pf-v6-c-badge.pf-m-read {
2609
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2610
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2611
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2612
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2613
- }
2614
-
2615
- .pf-v6-c-badge.pf-m-unread {
2616
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2617
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2618
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2619
- }
2620
-
2621
- .pf-v6-c-badge.pf-m-disabled {
2622
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2623
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2842
+ width: 100%;
2843
+ height: var(--pf-v6-c-divider--Size);
2844
+ }
2624
2845
  }
2625
-
2626
- .pf-v6-c-badge.pf-m-disabled::after {
2627
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2846
+ @media (min-width: 90.625rem) {
2847
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2848
+ flex-direction: column;
2849
+ width: var(--pf-v6-c-divider--Size);
2850
+ height: inherit;
2851
+ }
2628
2852
  }
2629
-
2630
- .pf-v6-c-badge__toggle-icon {
2631
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2632
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2853
+ @media (min-width: 90.625rem) {
2854
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2855
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2856
+ }
2857
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2858
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2859
+ }
2860
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2861
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2862
+ }
2863
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2864
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2865
+ }
2866
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2867
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2868
+ }
2869
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2870
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2871
+ }
2872
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2873
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2874
+ }
2875
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2876
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2877
+ }
2633
2878
  }
2634
-
2635
2879
  .pf-v6-c-label-group {
2636
2880
  --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2637
2881
  --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
@@ -2788,248 +3032,135 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2788
3032
  display: none;
2789
3033
  }
2790
3034
 
2791
- .pf-v6-c-text-input-group {
2792
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2793
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
2794
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2795
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2796
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2797
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2798
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2799
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2800
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2801
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2802
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2803
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2804
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2805
- --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));
2806
- --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));
2807
- --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));
2808
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2809
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2810
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
2811
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2812
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2813
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2814
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2815
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2816
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2817
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2818
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2819
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2820
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2821
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2822
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2823
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2824
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2825
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2826
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2827
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2828
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2829
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2830
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2831
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2832
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2833
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2834
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2835
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2836
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2837
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2838
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2839
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2840
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2841
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2842
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
3035
+ .pf-v6-c-tooltip {
3036
+ --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3037
+ --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
3038
+ --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3039
+ --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3040
+ --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3041
+ --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
3042
+ --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
3043
+ --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3044
+ --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
3045
+ --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
3046
+ --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
3047
+ --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
3048
+ --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3049
+ --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
3050
+ --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
3051
+ --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
3052
+ --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
3053
+ --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
3054
+ --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
3055
+ --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
3056
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
3057
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
3058
+ --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
3059
+ --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
3060
+ --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
3061
+ --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
2843
3062
  }
2844
3063
 
2845
- .pf-v6-c-text-input-group {
3064
+ .pf-v6-c-tooltip {
2846
3065
  position: relative;
2847
- display: flex;
2848
- width: 100%;
2849
- font-size: var(--pf-v6-c-text-input-group__FontSize);
2850
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
2851
- color: var(--pf-v6-c-text-input-group--Color, inherit);
2852
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2853
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2854
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2855
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2856
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2857
- }
2858
-
2859
- .pf-v6-c-text-input-group::before {
2860
- position: absolute;
2861
- inset: 0;
2862
- pointer-events: none;
2863
- content: "";
2864
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2865
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2866
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2867
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2868
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2869
- }
2870
-
2871
- .pf-v6-c-text-input-group.pf-m-disabled {
2872
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2873
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2874
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2875
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2876
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2877
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2878
- pointer-events: none;
2879
- }
2880
-
2881
- .pf-v6-c-text-input-group.pf-m-plain {
2882
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
2883
- }
2884
-
2885
- .pf-v6-c-text-input-group.pf-m-plain::before {
2886
- border: 0;
2887
- }
2888
-
2889
- .pf-v6-c-text-input-group.pf-m-success {
2890
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2891
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2892
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2893
- }
2894
-
2895
- .pf-v6-c-text-input-group.pf-m-warning {
2896
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2897
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2898
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2899
- }
2900
-
2901
- .pf-v6-c-text-input-group.pf-m-error {
2902
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2903
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2904
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2905
- }
2906
-
2907
- @media (prefers-reduced-motion: no-preference) {
2908
- .pf-v6-c-text-input-group.pf-m-error {
2909
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2910
- animation-name: pf-v6-global-danger-jiggle-motion;
2911
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2912
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2913
- animation-fill-mode: both;
2914
- }
2915
- }
2916
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2917
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2918
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2919
- animation-name: pf-v6-global-fade-in;
2920
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2921
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2922
- }
2923
-
2924
- .pf-v6-c-text-input-group:hover {
2925
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2926
- }
2927
-
2928
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2929
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2930
- }
2931
-
2932
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2933
- --pf-v6-c-text-input-group__text--Position: relative;
2934
- }
2935
-
2936
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2937
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2938
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2939
- }
2940
-
2941
- .pf-v6-c-text-input-group__main {
2942
- display: flex;
2943
- flex: 1;
2944
- flex-wrap: wrap;
2945
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2946
- min-width: 0;
2947
- }
2948
-
2949
- .pf-v6-c-text-input-group__main.pf-m-icon {
2950
- --pf-v6-c-text-input-group__text--Position: relative;
2951
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2952
- display: inline-flex;
2953
- align-items: center;
2954
- justify-content: center;
2955
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2956
- }
2957
-
2958
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2959
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2960
- }
2961
-
2962
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2963
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2964
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2965
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
3066
+ max-width: var(--pf-v6-c-tooltip--MaxWidth);
3067
+ box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
2966
3068
  }
2967
3069
 
2968
- .pf-v6-c-text-input-group__text {
2969
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
2970
- display: inline-grid;
2971
- flex: 1;
2972
- grid-template-areas: "text-input";
2973
- grid-template-columns: 1fr;
3070
+ .pf-v6-c-tooltip:is(.pf-m-top,
3071
+ .pf-m-top-left,
3072
+ .pf-m-top-right) {
3073
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
3074
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
3075
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
3076
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3077
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
2974
3078
  }
2975
3079
 
2976
- .pf-v6-c-text-input-group__icon {
2977
- position: absolute;
2978
- inset-block-start: 50%;
2979
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2980
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2981
- color: var(--pf-v6-c-text-input-group__icon--Color);
2982
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
3080
+ .pf-v6-c-tooltip:is(.pf-m-bottom,
3081
+ .pf-m-bottom-left,
3082
+ .pf-m-bottom-right) {
3083
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
3084
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
3085
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
3086
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
3087
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
2983
3088
  }
2984
3089
 
2985
- .pf-v6-c-text-input-group__icon.pf-m-status {
2986
- inset-inline-start: auto;
2987
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2988
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
3090
+ .pf-v6-c-tooltip:is(.pf-m-left,
3091
+ .pf-m-left-top,
3092
+ .pf-m-left-bottom) {
3093
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
3094
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
3095
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3096
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
3097
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
2989
3098
  }
2990
3099
 
2991
- .pf-v6-c-text-input-group__text-input {
2992
- overflow: hidden;
2993
- text-overflow: ellipsis;
2994
- white-space: nowrap;
2995
- position: relative;
2996
- width: 100%;
2997
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2998
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2999
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
3000
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
3001
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
3002
- color: var(--pf-v6-c-text-input-group__text-input--Color);
3003
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
3004
- border: 0;
3005
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
3100
+ .pf-v6-c-tooltip:is(.pf-m-right,
3101
+ .pf-m-right-top,
3102
+ .pf-m-right-bottom) {
3103
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
3104
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
3105
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
3106
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
3107
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
3006
3108
  }
3007
3109
 
3008
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
3009
- grid-area: text-input;
3110
+ .pf-v6-c-tooltip:is(.pf-m-left-top,
3111
+ .pf-m-right-top) {
3112
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
3113
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3010
3114
  }
3011
3115
 
3012
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
3013
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
3116
+ .pf-v6-c-tooltip:is(.pf-m-left-bottom,
3117
+ .pf-m-right-bottom) {
3118
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
3119
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
3014
3120
  }
3015
3121
 
3016
- .pf-v6-c-text-input-group__text-input::placeholder {
3017
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
3122
+ .pf-v6-c-tooltip:is(.pf-m-top-left,
3123
+ .pf-m-bottom-left) {
3124
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
3125
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3018
3126
  }
3019
3127
 
3020
- .pf-v6-c-text-input-group__utilities {
3021
- display: flex;
3022
- align-items: center;
3023
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
3024
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
3128
+ .pf-v6-c-tooltip:is(.pf-m-top-right,
3129
+ .pf-m-bottom-right) {
3130
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
3131
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
3025
3132
  }
3026
3133
 
3027
- .pf-v6-c-text-input-group__utilities > * + * {
3028
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
3134
+ .pf-v6-c-tooltip__content {
3135
+ position: relative;
3136
+ padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
3137
+ padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
3138
+ padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
3139
+ padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
3140
+ font-size: var(--pf-v6-c-tooltip__content--FontSize);
3141
+ color: var(--pf-v6-c-tooltip__content--Color);
3142
+ text-align: center;
3143
+ word-break: break-word;
3144
+ background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
3145
+ border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
3029
3146
  }
3030
3147
 
3031
- .pf-v6-c-text-input-group__group {
3032
- display: flex;
3148
+ .pf-v6-c-tooltip__content.pf-m-text-align-left {
3149
+ text-align: start;
3150
+ }
3151
+
3152
+ .pf-v6-c-tooltip__arrow {
3153
+ position: absolute;
3154
+ top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
3155
+ right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
3156
+ bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
3157
+ left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
3158
+ width: var(--pf-v6-c-tooltip__arrow--Width);
3159
+ height: var(--pf-v6-c-tooltip__arrow--Height);
3160
+ pointer-events: none;
3161
+ background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3162
+ box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3163
+ transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3033
3164
  }
3034
3165
 
3035
3166
  .pf-v6-c-spinner {
@@ -3071,178 +3202,58 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3071
3202
  }
3072
3203
 
3073
3204
  .pf-v6-c-spinner.pf-m-md {
3074
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3075
- }
3076
-
3077
- .pf-v6-c-spinner.pf-m-lg {
3078
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3079
- }
3080
-
3081
- .pf-v6-c-spinner.pf-m-xl {
3082
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3083
- }
3084
-
3085
- .pf-v6-m-no-motion .pf-v6-c-spinner {
3086
- --pf-v6-c-spinner--AnimationDuration: 0s;
3087
- }
3088
-
3089
- .pf-v6-c-spinner__path {
3090
- width: 100%;
3091
- height: 100%;
3092
- stroke: var(--pf-v6-c-spinner--Color);
3093
- stroke-dasharray: 283;
3094
- stroke-dashoffset: 280;
3095
- stroke-linecap: round;
3096
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3097
- transform-origin: 50% 50%;
3098
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3099
- }
3100
-
3101
- @keyframes pf-v6-c-spinner-animation-rotate {
3102
- 0% {
3103
- transform: rotate(0deg);
3104
- }
3105
- 100% {
3106
- transform: rotate(360deg);
3107
- }
3108
- }
3109
- @keyframes pf-v6-c-spinner-animation-dash {
3110
- 0% {
3111
- stroke-dashoffset: 280;
3112
- transform: rotate(0);
3113
- }
3114
- 15% {
3115
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3116
- }
3117
- 40% {
3118
- stroke-dasharray: 220;
3119
- stroke-dashoffset: 150;
3120
- }
3121
- 100% {
3122
- stroke-dashoffset: 280;
3123
- transform: rotate(720deg);
3124
- }
3125
- }
3126
- .pf-v6-c-breadcrumb {
3127
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3128
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3129
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3130
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3131
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3132
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3133
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3134
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3135
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3136
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3137
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3138
- --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
3139
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3140
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3141
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3142
- --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
3143
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3144
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3145
- --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3146
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3147
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3148
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3149
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3150
- }
3151
-
3152
- .pf-v6-c-breadcrumb {
3153
- display: inline-flex;
3154
- }
3155
-
3156
- .pf-v6-c-breadcrumb__list {
3157
- display: flex;
3158
- flex-wrap: wrap;
3159
- align-items: center;
3160
- }
3161
-
3162
- .pf-v6-c-breadcrumb__item {
3163
- display: flex;
3164
- align-items: baseline;
3165
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3166
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3167
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3168
- white-space: nowrap;
3169
- list-style: none;
3170
- }
3171
-
3172
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3173
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3174
- }
3175
-
3176
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3177
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3178
- }
3179
-
3180
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3181
- scale: -1 1;
3182
- }
3183
-
3184
- .pf-v6-c-breadcrumb__item-divider {
3185
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3186
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3187
- line-height: 1;
3188
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3189
- }
3190
-
3191
- .pf-v6-c-breadcrumb__link {
3192
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3193
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3194
- font-size: inherit;
3195
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3196
- line-height: inherit;
3197
- color: var(--pf-v6-c-breadcrumb__link--Color);
3198
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3199
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3200
- text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
3201
- word-break: break-word;
3202
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3203
- }
3204
-
3205
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3206
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3207
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3208
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3209
- --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
3210
- }
3211
-
3212
- .pf-v6-c-breadcrumb__link.pf-m-current {
3213
- cursor: default;
3214
- }
3215
-
3216
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3217
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3218
- text-decoration-line: none;
3205
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3219
3206
  }
3220
3207
 
3221
- button.pf-v6-c-breadcrumb__link {
3222
- border: none;
3208
+ .pf-v6-c-spinner.pf-m-lg {
3209
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3223
3210
  }
3224
3211
 
3225
- .pf-v6-c-breadcrumb__dropdown {
3226
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3227
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3228
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3229
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3212
+ .pf-v6-c-spinner.pf-m-xl {
3213
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3230
3214
  }
3231
3215
 
3232
- .pf-v6-c-breadcrumb__heading {
3233
- display: inline;
3234
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3216
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
3217
+ --pf-v6-c-spinner--AnimationDuration: 0s;
3235
3218
  }
3236
3219
 
3237
- .pf-v6-c-breadcrumb__link,
3238
- .pf-v6-c-breadcrumb__heading {
3239
- white-space: normal;
3220
+ .pf-v6-c-spinner__path {
3221
+ width: 100%;
3222
+ height: 100%;
3223
+ stroke: var(--pf-v6-c-spinner--Color);
3224
+ stroke-dasharray: 283;
3225
+ stroke-dashoffset: 280;
3226
+ stroke-linecap: round;
3227
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3228
+ transform-origin: 50% 50%;
3229
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3240
3230
  }
3241
3231
 
3242
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3243
- display: none;
3232
+ @keyframes pf-v6-c-spinner-animation-rotate {
3233
+ 0% {
3234
+ transform: rotate(0deg);
3235
+ }
3236
+ 100% {
3237
+ transform: rotate(360deg);
3238
+ }
3239
+ }
3240
+ @keyframes pf-v6-c-spinner-animation-dash {
3241
+ 0% {
3242
+ stroke-dashoffset: 280;
3243
+ transform: rotate(0);
3244
+ }
3245
+ 15% {
3246
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3247
+ }
3248
+ 40% {
3249
+ stroke-dasharray: 220;
3250
+ stroke-dashoffset: 150;
3251
+ }
3252
+ 100% {
3253
+ stroke-dashoffset: 280;
3254
+ transform: rotate(720deg);
3255
+ }
3244
3256
  }
3245
-
3246
3257
  .pf-v6-c-menu {
3247
3258
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--xs);
3248
3259
  --pf-v6-c-menu--Width: auto;
@@ -3946,133 +3957,122 @@ button.pf-v6-c-breadcrumb__link {
3946
3957
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3947
3958
  }
3948
3959
 
3949
- .pf-v6-c-tooltip {
3950
- --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3951
- --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
3952
- --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3953
- --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3954
- --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3955
- --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
3956
- --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
3957
- --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3958
- --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
3959
- --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
3960
- --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
3961
- --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
3962
- --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3963
- --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
3964
- --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
3965
- --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
3966
- --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
3967
- --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
3968
- --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
3969
- --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
3970
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
3971
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
3972
- --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
3973
- --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
3974
- --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
3975
- --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
3960
+ .pf-v6-c-breadcrumb {
3961
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3962
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3963
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3964
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3965
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3966
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3967
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3968
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3969
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3970
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3971
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3972
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
3973
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3974
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3975
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3976
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
3977
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3978
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3979
+ --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3980
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3981
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3982
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3983
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3976
3984
  }
3977
3985
 
3978
- .pf-v6-c-tooltip {
3979
- position: relative;
3980
- max-width: var(--pf-v6-c-tooltip--MaxWidth);
3981
- box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
3986
+ .pf-v6-c-breadcrumb {
3987
+ display: inline-flex;
3982
3988
  }
3983
3989
 
3984
- .pf-v6-c-tooltip:is(.pf-m-top,
3985
- .pf-m-top-left,
3986
- .pf-m-top-right) {
3987
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
3988
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
3989
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
3990
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3991
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
3990
+ .pf-v6-c-breadcrumb__list {
3991
+ display: flex;
3992
+ flex-wrap: wrap;
3993
+ align-items: center;
3992
3994
  }
3993
3995
 
3994
- .pf-v6-c-tooltip:is(.pf-m-bottom,
3995
- .pf-m-bottom-left,
3996
- .pf-m-bottom-right) {
3997
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
3998
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
3999
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
4000
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
4001
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
3996
+ .pf-v6-c-breadcrumb__item {
3997
+ display: flex;
3998
+ align-items: baseline;
3999
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
4000
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
4001
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
4002
+ white-space: nowrap;
4003
+ list-style: none;
4002
4004
  }
4003
4005
 
4004
- .pf-v6-c-tooltip:is(.pf-m-left,
4005
- .pf-m-left-top,
4006
- .pf-m-left-bottom) {
4007
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
4008
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
4009
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
4010
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
4011
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
4006
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
4007
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
4012
4008
  }
4013
4009
 
4014
- .pf-v6-c-tooltip:is(.pf-m-right,
4015
- .pf-m-right-top,
4016
- .pf-m-right-bottom) {
4017
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
4018
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
4019
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
4020
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
4021
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
4010
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
4011
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
4022
4012
  }
4023
4013
 
4024
- .pf-v6-c-tooltip:is(.pf-m-left-top,
4025
- .pf-m-right-top) {
4026
- --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
4027
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
4014
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
4015
+ scale: -1 1;
4028
4016
  }
4029
4017
 
4030
- .pf-v6-c-tooltip:is(.pf-m-left-bottom,
4031
- .pf-m-right-bottom) {
4032
- --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
4033
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
4018
+ .pf-v6-c-breadcrumb__item-divider {
4019
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
4020
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
4021
+ line-height: 1;
4022
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
4034
4023
  }
4035
4024
 
4036
- .pf-v6-c-tooltip:is(.pf-m-top-left,
4037
- .pf-m-bottom-left) {
4038
- --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
4039
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
4025
+ .pf-v6-c-breadcrumb__link {
4026
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
4027
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
4028
+ font-size: inherit;
4029
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
4030
+ line-height: inherit;
4031
+ color: var(--pf-v6-c-breadcrumb__link--Color);
4032
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
4033
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
4034
+ text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
4035
+ word-break: break-word;
4036
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
4040
4037
  }
4041
4038
 
4042
- .pf-v6-c-tooltip:is(.pf-m-top-right,
4043
- .pf-m-bottom-right) {
4044
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
4045
- --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
4039
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
4040
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
4041
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
4042
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
4043
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
4046
4044
  }
4047
4045
 
4048
- .pf-v6-c-tooltip__content {
4049
- position: relative;
4050
- padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
4051
- padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
4052
- padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
4053
- padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
4054
- font-size: var(--pf-v6-c-tooltip__content--FontSize);
4055
- color: var(--pf-v6-c-tooltip__content--Color);
4056
- text-align: center;
4057
- word-break: break-word;
4058
- background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
4059
- border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
4046
+ .pf-v6-c-breadcrumb__link.pf-m-current {
4047
+ cursor: default;
4060
4048
  }
4061
4049
 
4062
- .pf-v6-c-tooltip__content.pf-m-text-align-left {
4063
- text-align: start;
4050
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
4051
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
4052
+ text-decoration-line: none;
4064
4053
  }
4065
4054
 
4066
- .pf-v6-c-tooltip__arrow {
4067
- position: absolute;
4068
- top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
4069
- right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
4070
- bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
4071
- left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
4072
- width: var(--pf-v6-c-tooltip__arrow--Width);
4073
- height: var(--pf-v6-c-tooltip__arrow--Height);
4074
- pointer-events: none;
4075
- background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
4076
- box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
4077
- transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
4055
+ button.pf-v6-c-breadcrumb__link {
4056
+ border: none;
4057
+ }
4058
+
4059
+ .pf-v6-c-breadcrumb__dropdown {
4060
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
4061
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
4062
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
4063
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
4064
+ }
4065
+
4066
+ .pf-v6-c-breadcrumb__heading {
4067
+ display: inline;
4068
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
4069
+ }
4070
+
4071
+ .pf-v6-c-breadcrumb__link,
4072
+ .pf-v6-c-breadcrumb__heading {
4073
+ white-space: normal;
4074
+ }
4075
+
4076
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
4077
+ display: none;
4078
4078
  }