@patternfly/react-templates 6.3.1 → 6.4.0-prerelease.1

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 (27) hide show
  1. package/CHANGELOG.md +97 -1
  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/esm/components/Dropdown/SimpleDropdown.d.ts +1 -1
  6. package/dist/esm/components/Dropdown/SimpleDropdown.d.ts.map +1 -1
  7. package/dist/esm/components/Select/CheckboxSelect.d.ts +1 -1
  8. package/dist/esm/components/Select/CheckboxSelect.d.ts.map +1 -1
  9. package/dist/esm/components/Select/SimpleSelect.d.ts +1 -1
  10. package/dist/esm/components/Select/SimpleSelect.d.ts.map +1 -1
  11. package/dist/esm/components/Select/TypeaheadSelect.d.ts +1 -1
  12. package/dist/esm/components/Select/TypeaheadSelect.d.ts.map +1 -1
  13. package/dist/js/components/Dropdown/SimpleDropdown.d.ts +1 -1
  14. package/dist/js/components/Dropdown/SimpleDropdown.d.ts.map +1 -1
  15. package/dist/js/components/Select/CheckboxSelect.d.ts +1 -1
  16. package/dist/js/components/Select/CheckboxSelect.d.ts.map +1 -1
  17. package/dist/js/components/Select/SimpleSelect.d.ts +1 -1
  18. package/dist/js/components/Select/SimpleSelect.d.ts.map +1 -1
  19. package/dist/js/components/Select/TypeaheadSelect.d.ts +1 -1
  20. package/dist/js/components/Select/TypeaheadSelect.d.ts.map +1 -1
  21. package/dist/umd/assets/{output-1OzSb-1O.css → output-D_gTrHK8.css} +682 -608
  22. package/dist/umd/react-templates.min.js +1 -1
  23. package/package.json +6 -6
  24. package/src/components/Dropdown/SimpleDropdown.tsx +1 -1
  25. package/src/components/Select/CheckboxSelect.tsx +1 -1
  26. package/src/components/Select/SimpleSelect.tsx +1 -1
  27. package/src/components/Select/TypeaheadSelect.tsx +1 -1
package/dist/umd/assets/{output-1OzSb-1O.css → output-D_gTrHK8.css} RENAMED
@@ -3,6 +3,250 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
+ .pf-v6-c-text-input-group {
7
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
8
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
9
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
11
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
12
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
13
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
14
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
15
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
16
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
17
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
18
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
19
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
20
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
21
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
22
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
23
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
24
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
26
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
27
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
28
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
29
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
30
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
31
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
32
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
33
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
34
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
35
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
36
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
37
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
38
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
39
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
40
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
41
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
42
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
43
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
44
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
45
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
46
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
47
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
48
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
49
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
50
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
51
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
52
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
53
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
54
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
55
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
56
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
57
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
58
+ }
59
+
60
+ .pf-v6-c-text-input-group {
61
+ position: relative;
62
+ display: flex;
63
+ width: 100%;
64
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
65
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
66
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
67
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
68
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
69
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
70
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
71
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
72
+ }
73
+
74
+ .pf-v6-c-text-input-group::before {
75
+ position: absolute;
76
+ inset: 0;
77
+ pointer-events: none;
78
+ content: "";
79
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
80
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
81
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
82
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
83
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
84
+ }
85
+
86
+ .pf-v6-c-text-input-group.pf-m-disabled {
87
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
88
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
89
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
90
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
91
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
92
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
93
+ pointer-events: none;
94
+ }
95
+
96
+ .pf-v6-c-text-input-group.pf-m-plain {
97
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
98
+ }
99
+
100
+ .pf-v6-c-text-input-group.pf-m-plain::before {
101
+ border: 0;
102
+ }
103
+
104
+ .pf-v6-c-text-input-group.pf-m-success {
105
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
106
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
107
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
108
+ }
109
+
110
+ .pf-v6-c-text-input-group.pf-m-warning {
111
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
112
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
113
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
114
+ }
115
+
116
+ .pf-v6-c-text-input-group.pf-m-error {
117
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
118
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
119
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
120
+ }
121
+
122
+ @media (prefers-reduced-motion: no-preference) {
123
+ .pf-v6-c-text-input-group.pf-m-error {
124
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
125
+ animation-name: pf-v6-global-danger-jiggle-motion;
126
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
127
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
128
+ animation-fill-mode: both;
129
+ }
130
+ }
131
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
132
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
133
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
134
+ animation-name: pf-v6-global-fade-in;
135
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
136
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
137
+ }
138
+
139
+ .pf-v6-c-text-input-group:hover {
140
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
141
+ }
142
+
143
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
144
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
145
+ }
146
+
147
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
148
+ --pf-v6-c-text-input-group__text--Position: relative;
149
+ }
150
+
151
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
152
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
153
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
154
+ }
155
+
156
+ .pf-v6-c-text-input-group__main {
157
+ display: flex;
158
+ flex: 1;
159
+ flex-wrap: wrap;
160
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
161
+ min-width: 0;
162
+ }
163
+
164
+ .pf-v6-c-text-input-group__main.pf-m-icon {
165
+ --pf-v6-c-text-input-group__text--Position: relative;
166
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
167
+ display: inline-flex;
168
+ align-items: center;
169
+ justify-content: center;
170
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
171
+ }
172
+
173
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
174
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
175
+ }
176
+
177
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
178
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
179
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
180
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
181
+ }
182
+
183
+ .pf-v6-c-text-input-group__text {
184
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
185
+ display: inline-grid;
186
+ flex: 1;
187
+ grid-template-areas: "text-input";
188
+ grid-template-columns: 1fr;
189
+ }
190
+
191
+ .pf-v6-c-text-input-group__icon {
192
+ position: absolute;
193
+ inset-block-start: 50%;
194
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
195
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
196
+ color: var(--pf-v6-c-text-input-group__icon--Color);
197
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
198
+ }
199
+
200
+ .pf-v6-c-text-input-group__icon.pf-m-status {
201
+ inset-inline-start: auto;
202
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
203
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
204
+ }
205
+
206
+ .pf-v6-c-text-input-group__text-input {
207
+ overflow: hidden;
208
+ text-overflow: ellipsis;
209
+ white-space: nowrap;
210
+ position: relative;
211
+ width: 100%;
212
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
213
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
214
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
215
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
216
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
217
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
218
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
219
+ border: 0;
220
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
221
+ }
222
+
223
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
224
+ grid-area: text-input;
225
+ }
226
+
227
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
228
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
229
+ }
230
+
231
+ .pf-v6-c-text-input-group__text-input::placeholder {
232
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
233
+ }
234
+
235
+ .pf-v6-c-text-input-group__utilities {
236
+ display: flex;
237
+ align-items: center;
238
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
239
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
240
+ }
241
+
242
+ .pf-v6-c-text-input-group__utilities > * + * {
243
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
244
+ }
245
+
246
+ .pf-v6-c-text-input-group__group {
247
+ display: flex;
248
+ }
249
+
6
250
  .pf-v6-c-label-group {
7
251
  --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
8
252
  --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
@@ -172,19 +416,19 @@
172
416
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
173
417
  --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
174
418
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
175
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
419
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
176
420
  --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
177
421
  --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
178
422
  --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
179
423
  --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
180
424
  --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
181
425
  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
182
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
426
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
183
427
  --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
184
428
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
185
429
  --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
186
430
  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
187
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
431
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
188
432
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
189
433
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
190
434
  --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -253,7 +497,7 @@
253
497
  --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
254
498
  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
255
499
  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
256
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
500
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
257
501
  --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
258
502
  --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
259
503
  --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
@@ -271,7 +515,10 @@
271
515
  --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
272
516
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
273
517
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
274
- --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
518
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
519
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
520
+ --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
521
+ --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
275
522
  --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
276
523
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
277
524
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
@@ -404,6 +651,7 @@
404
651
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
405
652
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
406
653
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
654
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
407
655
  --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
408
656
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
409
657
  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
@@ -417,13 +665,15 @@
417
665
  }
418
666
 
419
667
  .pf-v6-c-menu-toggle.pf-m-plain::before {
420
- border: none;
668
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
669
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
421
670
  }
422
671
 
423
672
  .pf-v6-c-menu-toggle:is(:hover, :focus) {
424
673
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
425
674
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
426
675
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
676
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
427
677
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
428
678
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
429
679
  --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
@@ -436,6 +686,7 @@
436
686
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
437
687
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
438
688
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
689
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
439
690
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
440
691
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
441
692
  }
@@ -721,10 +972,11 @@
721
972
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
722
973
  --pf-v6-c-label--MaxWidth: 100%;
723
974
  --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)));
724
- --pf-v6-c-label--BorderWidth: 0;
725
- --pf-v6-c-label--BorderColor: transparent;
975
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
976
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
726
977
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
727
978
  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
979
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
728
980
  --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
729
981
  --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
730
982
  --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
@@ -847,8 +1099,8 @@
847
1099
  --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
848
1100
  --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
849
1101
  --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
850
- --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
851
- --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
1102
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1103
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
852
1104
  --pf-v6-c-label--m-clickable__content--Cursor: pointer;
853
1105
  --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
854
1106
  --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
@@ -861,8 +1113,10 @@
861
1113
  --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
862
1114
  --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
863
1115
  --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1116
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
864
1117
  --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
865
1118
  --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1119
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
866
1120
  --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
867
1121
  --pf-v6-c-label--m-add--BackgroundColor: transparent;
868
1122
  --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
@@ -883,15 +1137,15 @@
883
1137
  --pf-v6-c-label__content--Cursor: initial;
884
1138
  --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
885
1139
  --pf-v6-c-label__text--MaxWidth: 100%;
886
- --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
1140
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
887
1141
  --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
888
1142
  --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
889
- --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
890
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
891
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
892
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
893
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
894
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1143
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
1144
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
1145
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
1146
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
1147
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
1148
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
895
1149
  --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
896
1150
  --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
897
1151
  --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
@@ -911,6 +1165,7 @@
911
1165
 
912
1166
  .pf-v6-c-label {
913
1167
  position: relative;
1168
+ gap: var(--pf-v6-c-label--Gap);
914
1169
  min-width: var(--pf-v6-c-label--MinWidth);
915
1170
  max-width: var(--pf-v6-c-label--MaxWidth);
916
1171
  padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
@@ -1131,11 +1386,13 @@
1131
1386
  .pf-v6-c-label.pf-m-overflow {
1132
1387
  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1133
1388
  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1389
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1134
1390
  }
1135
1391
 
1136
1392
  .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1137
1393
  --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1138
1394
  --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1395
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1139
1396
  }
1140
1397
 
1141
1398
  .pf-v6-c-label.pf-m-add {
@@ -1247,317 +1504,8 @@ input.pf-v6-c-label__content {
1247
1504
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1248
1505
  }
1249
1506
 
1250
- .pf-v6-c-text-input-group {
1251
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1252
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
1253
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1254
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1255
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1256
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1257
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1258
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1259
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1260
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1261
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1262
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1263
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1264
- --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));
1265
- --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));
1266
- --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));
1267
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1268
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1269
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
1270
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1271
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1272
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1273
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1274
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1275
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1276
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1277
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1278
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1279
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1280
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1281
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1282
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1283
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
1284
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1285
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1286
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1287
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1288
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1289
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1290
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1291
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1292
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1293
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1294
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1295
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1296
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1297
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1298
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1299
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1300
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1301
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1302
- }
1303
-
1304
- .pf-v6-c-text-input-group {
1305
- position: relative;
1306
- display: flex;
1307
- width: 100%;
1308
- font-size: var(--pf-v6-c-text-input-group__FontSize);
1309
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
1310
- color: var(--pf-v6-c-text-input-group--Color, inherit);
1311
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1312
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1313
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1314
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1315
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1316
- }
1317
-
1318
- .pf-v6-c-text-input-group::before {
1319
- position: absolute;
1320
- inset: 0;
1321
- pointer-events: none;
1322
- content: "";
1323
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1324
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1325
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1326
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1327
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1328
- }
1329
-
1330
- .pf-v6-c-text-input-group.pf-m-disabled {
1331
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1332
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1333
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1334
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1335
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1336
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1337
- pointer-events: none;
1338
- }
1339
-
1340
- .pf-v6-c-text-input-group.pf-m-plain {
1341
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
1342
- }
1343
-
1344
- .pf-v6-c-text-input-group.pf-m-plain::before {
1345
- border: 0;
1346
- }
1347
-
1348
- .pf-v6-c-text-input-group.pf-m-success {
1349
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1350
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1351
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1352
- }
1353
-
1354
- .pf-v6-c-text-input-group.pf-m-warning {
1355
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1356
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1357
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1358
- }
1359
-
1360
- .pf-v6-c-text-input-group.pf-m-error {
1361
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1362
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1363
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1364
- }
1365
-
1366
- @media (prefers-reduced-motion: no-preference) {
1367
- .pf-v6-c-text-input-group.pf-m-error {
1368
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1369
- animation-name: pf-v6-global-danger-jiggle-motion;
1370
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1371
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1372
- animation-fill-mode: both;
1373
- }
1374
- }
1375
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1376
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1377
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1378
- animation-name: pf-v6-global-fade-in;
1379
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1380
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1381
- }
1382
-
1383
- .pf-v6-c-text-input-group:hover {
1384
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1385
- }
1386
-
1387
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1388
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1389
- }
1390
-
1391
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1392
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1393
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1394
- }
1395
-
1396
- .pf-v6-c-text-input-group__main {
1397
- display: flex;
1398
- flex: 1;
1399
- flex-wrap: wrap;
1400
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1401
- min-width: 0;
1402
- }
1403
-
1404
- .pf-v6-c-text-input-group__main.pf-m-icon {
1405
- --pf-v6-c-text-input-group__text--Position: relative;
1406
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1407
- display: inline-flex;
1408
- align-items: center;
1409
- justify-content: center;
1410
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1411
- }
1412
-
1413
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1414
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1415
- }
1416
-
1417
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1418
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1419
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1420
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1421
- }
1422
-
1423
- .pf-v6-c-text-input-group__text {
1424
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
1425
- display: inline-grid;
1426
- flex: 1;
1427
- grid-template-areas: "text-input";
1428
- grid-template-columns: 1fr;
1429
- }
1430
-
1431
- .pf-v6-c-text-input-group__icon {
1432
- position: absolute;
1433
- inset-block-start: 50%;
1434
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1435
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1436
- color: var(--pf-v6-c-text-input-group__icon--Color);
1437
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1438
- }
1439
-
1440
- .pf-v6-c-text-input-group__icon.pf-m-status {
1441
- inset-inline-start: auto;
1442
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1443
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1444
- }
1445
-
1446
- .pf-v6-c-text-input-group__text-input {
1447
- overflow: hidden;
1448
- text-overflow: ellipsis;
1449
- white-space: nowrap;
1450
- position: relative;
1451
- width: 100%;
1452
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1453
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1454
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1455
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1456
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1457
- color: var(--pf-v6-c-text-input-group__text-input--Color);
1458
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1459
- border: 0;
1460
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1461
- }
1462
-
1463
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1464
- grid-area: text-input;
1465
- }
1466
-
1467
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
1468
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1469
- }
1470
-
1471
- .pf-v6-c-text-input-group__text-input::placeholder {
1472
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1473
- }
1474
-
1475
- .pf-v6-c-text-input-group__utilities {
1476
- display: flex;
1477
- align-items: center;
1478
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1479
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1480
- }
1481
-
1482
- .pf-v6-c-text-input-group__utilities > * + * {
1483
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1484
- }
1485
-
1486
- .pf-v6-c-text-input-group__group {
1487
- display: flex;
1488
- }
1489
-
1490
- .pf-v6-c-badge {
1491
- --pf-v6-c-badge--BorderColor: transparent;
1492
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1493
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1494
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1495
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1496
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1497
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1498
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1499
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1500
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1501
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1502
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1503
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1504
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1505
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1506
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1507
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1508
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1509
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1510
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1511
- }
1512
-
1513
- .pf-v6-c-badge {
1514
- position: relative;
1515
- display: inline-block;
1516
- min-width: var(--pf-v6-c-badge--MinWidth);
1517
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1518
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1519
- font-size: var(--pf-v6-c-badge--FontSize);
1520
- font-weight: var(--pf-v6-c-badge--FontWeight);
1521
- color: var(--pf-v6-c-badge--Color);
1522
- text-align: center;
1523
- white-space: nowrap;
1524
- background-color: var(--pf-v6-c-badge--BackgroundColor);
1525
- border-radius: var(--pf-v6-c-badge--BorderRadius);
1526
- }
1527
-
1528
- .pf-v6-c-badge::after {
1529
- position: absolute;
1530
- inset: 0;
1531
- pointer-events: none;
1532
- content: "";
1533
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1534
- border-radius: inherit;
1535
- }
1536
-
1537
- .pf-v6-c-badge.pf-m-read {
1538
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1539
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1540
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1541
- }
1542
-
1543
- .pf-v6-c-badge.pf-m-unread {
1544
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1545
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1546
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1547
- }
1548
-
1549
- .pf-v6-c-badge.pf-m-disabled {
1550
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1551
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1552
- }
1553
-
1554
- .pf-v6-c-badge.pf-m-disabled::after {
1555
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1556
- }
1557
-
1558
- .pf-v6-c-badge__toggle-icon {
1559
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1560
- color: var(--pf-v6-c-badge__toggle-icon--Color);
1507
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1508
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1561
1509
  }
1562
1510
 
1563
1511
  .pf-v6-c-button {
@@ -1584,9 +1532,10 @@ input.pf-v6-c-label__content {
1584
1532
  --pf-v6-c-button--TransitionDelay: 0s;
1585
1533
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1586
1534
  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1587
- --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
1535
+ --pf-v6-c-button--TransitionProperty: color, background, border-color;
1588
1536
  --pf-v6-c-button--ScaleX: 1;
1589
1537
  --pf-v6-c-button--ScaleY: 1;
1538
+ --pf-v6-c-button--border--offset: 0;
1590
1539
  --pf-v6-c-button--hover--BackgroundColor: transparent;
1591
1540
  --pf-v6-c-button--hover--BorderColor: transparent;
1592
1541
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
@@ -1650,6 +1599,12 @@ input.pf-v6-c-label__content {
1650
1599
  --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
1651
1600
  --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1652
1601
  --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1602
+ --pf-v6-c-button--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1603
+ --pf-v6-c-button--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
1604
+ --pf-v6-c-button--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1605
+ --pf-v6-c-button--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast);
1606
+ --pf-v6-c-button--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
1607
+ --pf-v6-c-button--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1653
1608
  --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
1654
1609
  --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1655
1610
  --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
@@ -1700,6 +1655,12 @@ input.pf-v6-c-label__content {
1700
1655
  --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
1701
1656
  --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1702
1657
  --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1658
+ --pf-v6-c-button--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1659
+ --pf-v6-c-button--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
1660
+ --pf-v6-c-button--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1661
+ --pf-v6-c-button--m-plain--BorderColor: transparent;
1662
+ --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
1663
+ --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1703
1664
  --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
1704
1665
  --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: 0;
1705
1666
  --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
@@ -1712,7 +1673,7 @@ input.pf-v6-c-label__content {
1712
1673
  --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1713
1674
  --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
1714
1675
  --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
1715
- --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
1676
+ --pf-v6-c-button--m-plain--m-no-padding--border--offset: calc(0.125rem * -1);
1716
1677
  --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
1717
1678
  --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1718
1679
  --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
@@ -1847,7 +1808,7 @@ input.pf-v6-c-label__content {
1847
1808
  --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1848
1809
  --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1849
1810
  --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
1850
- --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
1811
+ --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--alt);
1851
1812
  --pf-v6-c-button--m-block--Display: flex;
1852
1813
  --pf-v6-c-button--m-block--Width: 100%;
1853
1814
  --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
@@ -1904,7 +1865,7 @@ input.pf-v6-c-label__content {
1904
1865
 
1905
1866
  .pf-v6-c-button::after {
1906
1867
  position: absolute;
1907
- inset: 0;
1868
+ inset: var(--pf-v6-c-button--border--offset);
1908
1869
  pointer-events: none;
1909
1870
  content: "";
1910
1871
  border: var(--pf-v6-c-button--BorderWidth) solid;
@@ -1974,6 +1935,12 @@ input.pf-v6-c-label__content {
1974
1935
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--PaddingInlineEnd);
1975
1936
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--PaddingInlineStart);
1976
1937
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-link--Color);
1938
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-link--BorderWidth);
1939
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-link--hover--BorderColor);
1940
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-link--hover--BorderWidth);
1941
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-link--m-clicked--BorderColor);
1942
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-link--m-clicked--BorderWidth);
1943
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-link--BorderColor);
1977
1944
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius);
1978
1945
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor);
1979
1946
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-link__icon--Color);
@@ -2014,6 +1981,9 @@ input.pf-v6-c-label__content {
2014
1981
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
2015
1982
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
2016
1983
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
1984
+ --pf-v6-c-button--BorderWidth: 0;
1985
+ --pf-v6-c-button--hover--BorderWidth: 0;
1986
+ --pf-v6-c-button--m-clicked--BorderWidth: 0;
2017
1987
  text-align: start;
2018
1988
  white-space: normal;
2019
1989
  background: transparent;
@@ -2131,6 +2101,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2131
2101
  }
2132
2102
 
2133
2103
  .pf-v6-c-button.pf-m-plain {
2104
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
2105
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
2106
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-plain--hover--BorderWidth);
2107
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-plain--m-clicked--BorderColor);
2108
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-plain--m-clicked--BorderWidth);
2109
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-plain--BorderColor);
2134
2110
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius);
2135
2111
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
2136
2112
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
@@ -2160,6 +2136,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2160
2136
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
2161
2137
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
2162
2138
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
2139
+ --pf-v6-c-button--border--offset: var(--pf-v6-c-button--m-plain--m-no-padding--border--offset);
2163
2140
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
2164
2141
  background: var(--pf-v6-c-button--BackgroundColor);
2165
2142
  }
@@ -2263,6 +2240,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2263
2240
  text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
2264
2241
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
2265
2242
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
2243
+ outline-offset: var(--pf-t--global--focus-ring--position--offset);
2266
2244
  }
2267
2245
 
2268
2246
  .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
@@ -2425,86 +2403,79 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2425
2403
  scale: 1.5;
2426
2404
  }
2427
2405
  }
2428
- .pf-v6-c-check {
2429
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2430
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2431
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2432
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2433
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2434
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2435
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2436
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2437
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2438
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2439
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2440
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2441
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2442
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2443
- }
2444
-
2445
- .pf-v6-c-check {
2446
- display: grid;
2447
- grid-template-columns: auto 1fr;
2448
- grid-gap: var(--pf-v6-c-check--GridGap);
2449
- accent-color: var(--pf-v6-c-check--AccentColor);
2450
- }
2451
-
2452
- .pf-v6-c-check.pf-m-standalone {
2453
- display: inline-grid;
2454
- grid-template-columns: auto;
2455
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2456
- }
2457
-
2458
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2459
- align-self: center;
2460
- transform: none;
2461
- }
2462
-
2463
- .pf-v6-c-check__input {
2464
- align-self: start;
2465
- font-size: var(--pf-v6-c-check__label--FontSize);
2466
- line-height: var(--pf-v6-c-check__label--LineHeight);
2467
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2468
- }
2469
-
2470
- .pf-v6-c-check__label {
2471
- font-size: var(--pf-v6-c-check__label--FontSize);
2472
- font-weight: var(--pf-v6-c-check__label--FontWeight);
2473
- line-height: var(--pf-v6-c-check__label--LineHeight);
2474
- color: var(--pf-v6-c-check__label--Color);
2406
+ .pf-v6-c-badge {
2407
+ --pf-v6-c-badge--BorderColor: transparent;
2408
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2409
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2410
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2411
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2412
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2413
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2414
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2415
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2416
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2417
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2418
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2419
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2420
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2421
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2422
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2423
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2424
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2425
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2426
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2427
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2475
2428
  }
2476
2429
 
2477
- .pf-v6-c-check__description {
2478
- grid-column: 2;
2479
- font-size: var(--pf-v6-c-check__description--FontSize);
2480
- color: var(--pf-v6-c-check__description--Color);
2430
+ .pf-v6-c-badge {
2431
+ position: relative;
2432
+ display: inline-block;
2433
+ min-width: var(--pf-v6-c-badge--MinWidth);
2434
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2435
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2436
+ font-size: var(--pf-v6-c-badge--FontSize);
2437
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2438
+ color: var(--pf-v6-c-badge--Color);
2439
+ text-align: center;
2440
+ white-space: nowrap;
2441
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2442
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2481
2443
  }
2482
2444
 
2483
- .pf-v6-c-check__body {
2484
- grid-column: 2;
2445
+ .pf-v6-c-badge::after {
2446
+ position: absolute;
2447
+ inset: 0;
2448
+ pointer-events: none;
2449
+ content: "";
2450
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2451
+ border-radius: inherit;
2485
2452
  }
2486
2453
 
2487
- .pf-v6-c-check__label,
2488
- .pf-v6-c-check__input {
2489
- justify-self: start;
2454
+ .pf-v6-c-badge.pf-m-read {
2455
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2456
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2457
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2458
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2490
2459
  }
2491
2460
 
2492
- label.pf-v6-c-check, .pf-v6-c-check__label,
2493
- .pf-v6-c-check__input {
2494
- cursor: pointer;
2461
+ .pf-v6-c-badge.pf-m-unread {
2462
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2463
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2464
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2495
2465
  }
2496
2466
 
2497
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2498
- .pf-v6-c-check__input:disabled,
2499
- .pf-v6-c-check__input.pf-m-disabled {
2500
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2501
- cursor: not-allowed;
2467
+ .pf-v6-c-badge.pf-m-disabled {
2468
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2469
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2502
2470
  }
2503
2471
 
2504
- .pf-v6-c-check__label-required {
2505
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2506
- font-size: var(--pf-v6-c-check__label-required--FontSize);
2507
- color: var(--pf-v6-c-check__label-required--Color);
2472
+ .pf-v6-c-badge.pf-m-disabled::after {
2473
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2474
+ }
2475
+
2476
+ .pf-v6-c-badge__toggle-icon {
2477
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2478
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2508
2479
  }
2509
2480
 
2510
2481
  .pf-v6-c-divider {
@@ -2577,6 +2548,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2577
2548
  flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2578
2549
  content: "";
2579
2550
  background-color: var(--pf-v6-c-divider--Color);
2551
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2552
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2580
2553
  }
2581
2554
 
2582
2555
  .pf-v6-c-divider.pf-m-horizontal {
@@ -2823,135 +2796,86 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2823
2796
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2824
2797
  }
2825
2798
  }
2826
- .pf-v6-c-tooltip {
2827
- --pf-v6-c-tooltip--MaxWidth: 18.75rem;
2828
- --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
2829
- --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
2830
- --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
2831
- --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
2832
- --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
2833
- --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
2834
- --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
2835
- --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
2836
- --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
2837
- --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
2838
- --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
2839
- --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
2840
- --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
2841
- --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
2842
- --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
2843
- --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
2844
- --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
2845
- --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
2846
- --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
2847
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
2848
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
2849
- --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
2850
- --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
2851
- --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
2852
- --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
2853
- }
2854
-
2855
- .pf-v6-c-tooltip {
2856
- position: relative;
2857
- max-width: var(--pf-v6-c-tooltip--MaxWidth);
2858
- box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
2799
+ .pf-v6-c-check {
2800
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2801
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2802
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2803
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2804
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2805
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2806
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2807
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2808
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2809
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2810
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2811
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2812
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2813
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2859
2814
  }
2860
2815
 
2861
- .pf-v6-c-tooltip:is(.pf-m-top,
2862
- .pf-m-top-left,
2863
- .pf-m-top-right) {
2864
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
2865
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
2866
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
2867
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
2868
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
2816
+ .pf-v6-c-check {
2817
+ display: grid;
2818
+ grid-template-columns: auto 1fr;
2819
+ grid-gap: var(--pf-v6-c-check--GridGap);
2820
+ accent-color: var(--pf-v6-c-check--AccentColor);
2869
2821
  }
2870
2822
 
2871
- .pf-v6-c-tooltip:is(.pf-m-bottom,
2872
- .pf-m-bottom-left,
2873
- .pf-m-bottom-right) {
2874
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
2875
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
2876
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
2877
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
2878
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
2823
+ .pf-v6-c-check.pf-m-standalone {
2824
+ display: inline-grid;
2825
+ grid-template-columns: auto;
2826
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2879
2827
  }
2880
2828
 
2881
- .pf-v6-c-tooltip:is(.pf-m-left,
2882
- .pf-m-left-top,
2883
- .pf-m-left-bottom) {
2884
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
2885
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
2886
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
2887
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
2888
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
2829
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2830
+ align-self: center;
2831
+ transform: none;
2889
2832
  }
2890
2833
 
2891
- .pf-v6-c-tooltip:is(.pf-m-right,
2892
- .pf-m-right-top,
2893
- .pf-m-right-bottom) {
2894
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
2895
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
2896
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
2897
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
2898
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
2834
+ .pf-v6-c-check__input {
2835
+ align-self: start;
2836
+ font-size: var(--pf-v6-c-check__label--FontSize);
2837
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2838
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2899
2839
  }
2900
2840
 
2901
- .pf-v6-c-tooltip:is(.pf-m-left-top,
2902
- .pf-m-right-top) {
2903
- --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
2904
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
2841
+ .pf-v6-c-check__label {
2842
+ font-size: var(--pf-v6-c-check__label--FontSize);
2843
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
2844
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2845
+ color: var(--pf-v6-c-check__label--Color);
2905
2846
  }
2906
2847
 
2907
- .pf-v6-c-tooltip:is(.pf-m-left-bottom,
2908
- .pf-m-right-bottom) {
2909
- --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
2910
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
2848
+ .pf-v6-c-check__description {
2849
+ grid-column: 2;
2850
+ font-size: var(--pf-v6-c-check__description--FontSize);
2851
+ color: var(--pf-v6-c-check__description--Color);
2911
2852
  }
2912
2853
 
2913
- .pf-v6-c-tooltip:is(.pf-m-top-left,
2914
- .pf-m-bottom-left) {
2915
- --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
2916
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
2854
+ .pf-v6-c-check__body {
2855
+ grid-column: 2;
2917
2856
  }
2918
2857
 
2919
- .pf-v6-c-tooltip:is(.pf-m-top-right,
2920
- .pf-m-bottom-right) {
2921
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
2922
- --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
2858
+ .pf-v6-c-check__label,
2859
+ .pf-v6-c-check__input {
2860
+ justify-self: start;
2923
2861
  }
2924
2862
 
2925
- .pf-v6-c-tooltip__content {
2926
- position: relative;
2927
- padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
2928
- padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
2929
- padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
2930
- padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
2931
- font-size: var(--pf-v6-c-tooltip__content--FontSize);
2932
- color: var(--pf-v6-c-tooltip__content--Color);
2933
- text-align: center;
2934
- word-break: break-word;
2935
- background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
2936
- border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
2863
+ label.pf-v6-c-check, .pf-v6-c-check__label,
2864
+ .pf-v6-c-check__input {
2865
+ cursor: pointer;
2937
2866
  }
2938
2867
 
2939
- .pf-v6-c-tooltip__content.pf-m-text-align-left {
2940
- text-align: start;
2868
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2869
+ .pf-v6-c-check__input:disabled,
2870
+ .pf-v6-c-check__input.pf-m-disabled {
2871
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2872
+ cursor: not-allowed;
2941
2873
  }
2942
2874
 
2943
- .pf-v6-c-tooltip__arrow {
2944
- position: absolute;
2945
- top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
2946
- right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
2947
- bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
2948
- left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
2949
- width: var(--pf-v6-c-tooltip__arrow--Width);
2950
- height: var(--pf-v6-c-tooltip__arrow--Height);
2951
- pointer-events: none;
2952
- background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
2953
- box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
2954
- 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));
2875
+ .pf-v6-c-check__label-required {
2876
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2877
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
2878
+ color: var(--pf-v6-c-check__label-required--Color);
2955
2879
  }
2956
2880
 
2957
2881
  .pf-v6-c-menu {
@@ -2963,6 +2887,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2963
2887
  --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
2964
2888
  --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
2965
2889
  --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
2890
+ --pf-v6-c-menu--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
2891
+ --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast);
2966
2892
  --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
2967
2893
  --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
2968
2894
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
@@ -2980,9 +2906,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2980
2906
  --pf-v6-c-menu__search--PaddingInlineStart: var(--pf-t--global--spacer--md);
2981
2907
  --pf-v6-c-menu__search--PaddingInlineEnd: var(--pf-t--global--spacer--md);
2982
2908
  --pf-v6-c-menu__footer--BoxShadow: none;
2909
+ --pf-v6-c-menu__footer--BorderColor: transparent;
2910
+ --pf-v6-c-menu__footer--BorderWidth: 0;
2983
2911
  --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
2912
+ --pf-v6-c-menu--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
2913
+ --pf-v6-c-menu--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
2984
2914
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
2985
2915
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2916
+ --pf-v6-c-menu__list-item--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2917
+ --pf-v6-c-menu__list-item--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2918
+ --pf-v6-c-menu__list-item--BorderColor: var(--pf-t--global--border--color--high-contrast);
2986
2919
  --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
2987
2920
  --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2988
2921
  --pf-v6-c-menu__list-item--TransitionProperty: background-color;
@@ -3159,6 +3092,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3159
3092
  --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
3160
3093
  --pf-v6-c-menu__list-item--BackgroundColor: transparent;
3161
3094
  --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent;
3095
+ --pf-v6-c-menu__list-item--hover--BorderColor: transparent;
3162
3096
  }
3163
3097
 
3164
3098
  .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled),
@@ -3185,6 +3119,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3185
3119
  overflow: hidden;
3186
3120
  color: var(--pf-v6-c-menu--Color);
3187
3121
  background-color: var(--pf-v6-c-menu--BackgroundColor);
3122
+ border: var(--pf-v6-c-menu--BorderWidth) solid var(--pf-v6-c-menu--BorderColor);
3188
3123
  border-radius: var(--pf-v6-c-menu--BorderRadius);
3189
3124
  box-shadow: var(--pf-v6-c-menu--BoxShadow);
3190
3125
  transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
@@ -3239,6 +3174,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3239
3174
 
3240
3175
  .pf-v6-c-menu.pf-m-drilldown :where(.pf-v6-c-menu) {
3241
3176
  padding: 0;
3177
+ border: 0;
3242
3178
  }
3243
3179
 
3244
3180
  .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list,
@@ -3323,6 +3259,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3323
3259
  .pf-v6-c-menu.pf-m-scrollable {
3324
3260
  --pf-v6-c-menu__content--MaxHeight: var(--pf-v6-c-menu--m-scrollable__content--MaxHeight);
3325
3261
  --pf-v6-c-menu__footer--BoxShadow: var(--pf-v6-c-menu--m-scrollable__footer--BoxShadow);
3262
+ --pf-v6-c-menu__footer--BorderColor: var(--pf-v6-c-menu--m-scrollable__footer--BorderColor);
3263
+ --pf-v6-c-menu__footer--BorderWidth: var(--pf-v6-c-menu--m-scrollable__footer--BorderWidth);
3326
3264
  --pf-v6-c-menu__footer--PaddingBlockStart: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
3327
3265
  --pf-v6-c-menu__footer--PaddingBlockEnd: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
3328
3266
  overflow: hidden;
@@ -3368,6 +3306,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3368
3306
  padding-block-end: var(--pf-v6-c-menu__footer--PaddingBlockEnd);
3369
3307
  padding-inline-start: var(--pf-v6-c-menu__footer--PaddingInlineStart);
3370
3308
  padding-inline-end: var(--pf-v6-c-menu__footer--PaddingInlineEnd);
3309
+ border-block-start: var(--pf-v6-c-menu__footer--BorderWidth) solid var(--pf-v6-c-menu__footer--BorderColor);
3371
3310
  box-shadow: var(--pf-v6-c-menu__footer--BoxShadow);
3372
3311
  }
3373
3312
 
@@ -3404,6 +3343,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3404
3343
  inset: 0;
3405
3344
  content: "";
3406
3345
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
3346
+ border-block-start: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
3347
+ border-block-end: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
3407
3348
  transition: inherit;
3408
3349
  }
3409
3350
 
@@ -3435,6 +3376,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3435
3376
 
3436
3377
  .pf-v6-c-menu__list-item.pf-m-focus, .pf-v6-c-menu__list-item:focus-within, .pf-v6-c-menu__list-item:has(> :hover) {
3437
3378
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-v6-c-menu__list-item--hover--BackgroundColor);
3379
+ --pf-v6-c-menu__list-item--BorderWidth: var(--pf-v6-c-menu__list-item--hover--BorderWidth);
3438
3380
  }
3439
3381
 
3440
3382
  .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-select-icon,
@@ -3604,109 +3546,22 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3604
3546
  padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3605
3547
  }
3606
3548
 
3607
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3608
- min-width: auto;
3609
- padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3610
- padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3611
- }
3612
-
3613
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3614
- height: auto;
3615
- }
3616
-
3617
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3618
- --pf-v6-c-menu-toggle--BorderWidth: 0;
3619
- --pf-v6-c-menu-toggle--BorderColor: transparent;
3620
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3621
- }
3622
-
3623
- .pf-v6-c-spinner {
3624
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3625
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3626
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3627
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3628
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3629
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3630
- --pf-v6-c-spinner--StrokeWidth: 10;
3631
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3632
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3633
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3634
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3635
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3636
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3637
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3638
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3639
- }
3640
-
3641
- .pf-v6-c-spinner {
3642
- width: var(--pf-v6-c-spinner--Width);
3643
- height: var(--pf-v6-c-spinner--Height);
3644
- overflow: hidden;
3645
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3646
- }
3647
-
3648
- .pf-v6-c-spinner.pf-m-inline {
3649
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3650
- }
3651
-
3652
- .pf-v6-c-spinner.pf-m-xs {
3653
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3654
- --pf-v6-c-spinner--StrokeWidth: 15;
3655
- }
3656
-
3657
- .pf-v6-c-spinner.pf-m-sm {
3658
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3659
- }
3660
-
3661
- .pf-v6-c-spinner.pf-m-md {
3662
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3663
- }
3664
-
3665
- .pf-v6-c-spinner.pf-m-lg {
3666
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3667
- }
3668
-
3669
- .pf-v6-c-spinner.pf-m-xl {
3670
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3671
- }
3672
-
3673
- .pf-v6-c-spinner__path {
3674
- width: 100%;
3675
- height: 100%;
3676
- stroke: var(--pf-v6-c-spinner--Color);
3677
- stroke-dasharray: 283;
3678
- stroke-dashoffset: 280;
3679
- stroke-linecap: round;
3680
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3681
- transform-origin: 50% 50%;
3682
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3683
- }
3684
-
3685
- @keyframes pf-v6-c-spinner-animation-rotate {
3686
- 0% {
3687
- transform: rotate(0deg);
3688
- }
3689
- 100% {
3690
- transform: rotate(360deg);
3691
- }
3549
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3550
+ min-width: auto;
3551
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3552
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3692
3553
  }
3693
- @keyframes pf-v6-c-spinner-animation-dash {
3694
- 0% {
3695
- stroke-dashoffset: 280;
3696
- transform: rotate(0);
3697
- }
3698
- 15% {
3699
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3700
- }
3701
- 40% {
3702
- stroke-dasharray: 220;
3703
- stroke-dashoffset: 150;
3704
- }
3705
- 100% {
3706
- stroke-dashoffset: 280;
3707
- transform: rotate(720deg);
3708
- }
3554
+
3555
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3556
+ height: auto;
3557
+ }
3558
+
3559
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3560
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
3561
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
3562
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3709
3563
  }
3564
+
3710
3565
  .pf-v6-c-breadcrumb {
3711
3566
  --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3712
3567
  --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -3821,4 +3676,223 @@ button.pf-v6-c-breadcrumb__link {
3821
3676
 
3822
3677
  .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3823
3678
  display: none;
3679
+ }
3680
+
3681
+ .pf-v6-c-tooltip {
3682
+ --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3683
+ --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
3684
+ --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3685
+ --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3686
+ --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3687
+ --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
3688
+ --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
3689
+ --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3690
+ --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
3691
+ --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
3692
+ --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
3693
+ --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
3694
+ --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3695
+ --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
3696
+ --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
3697
+ --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
3698
+ --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
3699
+ --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
3700
+ --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
3701
+ --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
3702
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
3703
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
3704
+ --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
3705
+ --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
3706
+ --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
3707
+ --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
3708
+ }
3709
+
3710
+ .pf-v6-c-tooltip {
3711
+ position: relative;
3712
+ max-width: var(--pf-v6-c-tooltip--MaxWidth);
3713
+ box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
3714
+ }
3715
+
3716
+ .pf-v6-c-tooltip:is(.pf-m-top,
3717
+ .pf-m-top-left,
3718
+ .pf-m-top-right) {
3719
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
3720
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
3721
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
3722
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3723
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
3724
+ }
3725
+
3726
+ .pf-v6-c-tooltip:is(.pf-m-bottom,
3727
+ .pf-m-bottom-left,
3728
+ .pf-m-bottom-right) {
3729
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
3730
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
3731
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
3732
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
3733
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
3734
+ }
3735
+
3736
+ .pf-v6-c-tooltip:is(.pf-m-left,
3737
+ .pf-m-left-top,
3738
+ .pf-m-left-bottom) {
3739
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
3740
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
3741
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3742
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
3743
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
3744
+ }
3745
+
3746
+ .pf-v6-c-tooltip:is(.pf-m-right,
3747
+ .pf-m-right-top,
3748
+ .pf-m-right-bottom) {
3749
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
3750
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
3751
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
3752
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
3753
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
3754
+ }
3755
+
3756
+ .pf-v6-c-tooltip:is(.pf-m-left-top,
3757
+ .pf-m-right-top) {
3758
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
3759
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3760
+ }
3761
+
3762
+ .pf-v6-c-tooltip:is(.pf-m-left-bottom,
3763
+ .pf-m-right-bottom) {
3764
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
3765
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
3766
+ }
3767
+
3768
+ .pf-v6-c-tooltip:is(.pf-m-top-left,
3769
+ .pf-m-bottom-left) {
3770
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
3771
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3772
+ }
3773
+
3774
+ .pf-v6-c-tooltip:is(.pf-m-top-right,
3775
+ .pf-m-bottom-right) {
3776
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
3777
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
3778
+ }
3779
+
3780
+ .pf-v6-c-tooltip__content {
3781
+ position: relative;
3782
+ padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
3783
+ padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
3784
+ padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
3785
+ padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
3786
+ font-size: var(--pf-v6-c-tooltip__content--FontSize);
3787
+ color: var(--pf-v6-c-tooltip__content--Color);
3788
+ text-align: center;
3789
+ word-break: break-word;
3790
+ background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
3791
+ border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
3792
+ }
3793
+
3794
+ .pf-v6-c-tooltip__content.pf-m-text-align-left {
3795
+ text-align: start;
3796
+ }
3797
+
3798
+ .pf-v6-c-tooltip__arrow {
3799
+ position: absolute;
3800
+ top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
3801
+ right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
3802
+ bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
3803
+ left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
3804
+ width: var(--pf-v6-c-tooltip__arrow--Width);
3805
+ height: var(--pf-v6-c-tooltip__arrow--Height);
3806
+ pointer-events: none;
3807
+ background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3808
+ box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3809
+ transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3810
+ }
3811
+
3812
+ .pf-v6-c-spinner {
3813
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3814
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3815
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3816
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3817
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3818
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3819
+ --pf-v6-c-spinner--StrokeWidth: 10;
3820
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3821
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3822
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3823
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3824
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3825
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3826
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3827
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3828
+ }
3829
+
3830
+ .pf-v6-c-spinner {
3831
+ width: var(--pf-v6-c-spinner--Width);
3832
+ height: var(--pf-v6-c-spinner--Height);
3833
+ overflow: hidden;
3834
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3835
+ }
3836
+
3837
+ .pf-v6-c-spinner.pf-m-inline {
3838
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3839
+ }
3840
+
3841
+ .pf-v6-c-spinner.pf-m-xs {
3842
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3843
+ --pf-v6-c-spinner--StrokeWidth: 15;
3844
+ }
3845
+
3846
+ .pf-v6-c-spinner.pf-m-sm {
3847
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3848
+ }
3849
+
3850
+ .pf-v6-c-spinner.pf-m-md {
3851
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3852
+ }
3853
+
3854
+ .pf-v6-c-spinner.pf-m-lg {
3855
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3856
+ }
3857
+
3858
+ .pf-v6-c-spinner.pf-m-xl {
3859
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3860
+ }
3861
+
3862
+ .pf-v6-c-spinner__path {
3863
+ width: 100%;
3864
+ height: 100%;
3865
+ stroke: var(--pf-v6-c-spinner--Color);
3866
+ stroke-dasharray: 283;
3867
+ stroke-dashoffset: 280;
3868
+ stroke-linecap: round;
3869
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3870
+ transform-origin: 50% 50%;
3871
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3872
+ }
3873
+
3874
+ @keyframes pf-v6-c-spinner-animation-rotate {
3875
+ 0% {
3876
+ transform: rotate(0deg);
3877
+ }
3878
+ 100% {
3879
+ transform: rotate(360deg);
3880
+ }
3881
+ }
3882
+ @keyframes pf-v6-c-spinner-animation-dash {
3883
+ 0% {
3884
+ stroke-dashoffset: 280;
3885
+ transform: rotate(0);
3886
+ }
3887
+ 15% {
3888
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3889
+ }
3890
+ 40% {
3891
+ stroke-dasharray: 220;
3892
+ stroke-dashoffset: 150;
3893
+ }
3894
+ 100% {
3895
+ stroke-dashoffset: 280;
3896
+ transform: rotate(720deg);
3897
+ }
3824
3898
  }