@patternfly/react-templates 6.2.0-prerelease.17 → 6.2.0-prerelease.19

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.
@@ -3,478 +3,6 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-menu-toggle {
7
- --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
8
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
9
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
10
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
11
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
12
- --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
13
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
14
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
15
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
16
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
17
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
18
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
19
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
20
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
21
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
23
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
24
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
25
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
26
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
27
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
28
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
29
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
30
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
31
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
32
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
33
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
34
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
35
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
36
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
37
- --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
38
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
39
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
40
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
41
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
42
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
43
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
44
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
45
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
46
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
47
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
48
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
49
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
50
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
51
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
52
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
53
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
54
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
55
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
56
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
57
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
58
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
59
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
60
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
61
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
62
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
63
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
64
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
65
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
66
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
67
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
68
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
69
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
70
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
71
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
72
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
73
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
74
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
75
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
76
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
77
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
78
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
79
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
80
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
81
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
82
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
83
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
84
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
85
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
86
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
87
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
88
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
89
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
90
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
91
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
92
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
93
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
94
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
95
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
96
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
97
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
98
- --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
99
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
100
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
101
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
102
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
103
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
104
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
105
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
106
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
107
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
108
- --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
109
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
110
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
111
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
112
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
113
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
114
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
115
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
116
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
117
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
118
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
119
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
120
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
121
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
122
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
123
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
124
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
125
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
126
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
127
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
128
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
129
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
130
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
131
- }
132
-
133
- .pf-v6-c-menu-toggle {
134
- position: relative;
135
- display: inline-flex;
136
- gap: var(--pf-v6-c-menu-toggle--Gap);
137
- align-items: center;
138
- justify-content: center;
139
- min-width: var(--pf-v6-c-menu-toggle--MinWidth);
140
- max-width: 100%;
141
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
142
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
143
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
144
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
145
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
146
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
147
- color: var(--pf-v6-c-menu-toggle--Color);
148
- cursor: pointer;
149
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
150
- border: 0;
151
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
152
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
153
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
154
- }
155
-
156
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
157
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
158
- }
159
-
160
- .pf-v6-c-menu-toggle::before {
161
- position: absolute;
162
- inset-block-start: 0;
163
- inset-block-end: 0;
164
- inset-inline-start: 0;
165
- inset-inline-end: 0;
166
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
167
- pointer-events: none;
168
- content: "";
169
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
170
- transition: inherit;
171
- }
172
-
173
- .pf-v6-c-menu-toggle.pf-m-primary {
174
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
175
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
176
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
177
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
178
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
179
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
180
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
181
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
182
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
183
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
184
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
185
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
186
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
187
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
188
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
189
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
190
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
191
- }
192
-
193
- .pf-v6-c-menu-toggle.pf-m-secondary {
194
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
195
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
196
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
197
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
198
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
199
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
200
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
201
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
202
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
203
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
204
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
205
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
206
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
207
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
208
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
209
- }
210
-
211
- .pf-v6-c-menu-toggle.pf-m-full-height {
212
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
213
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
214
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
215
- align-items: center;
216
- height: 100%;
217
- }
218
-
219
- .pf-v6-c-menu-toggle.pf-m-full-width {
220
- width: 100%;
221
- }
222
-
223
- .pf-v6-c-menu-toggle.pf-m-plain {
224
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
225
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
226
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
227
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
228
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
229
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
230
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
231
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
232
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
233
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
234
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
235
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
236
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
237
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
238
- }
239
-
240
- .pf-v6-c-menu-toggle.pf-m-plain::before {
241
- border: none;
242
- }
243
-
244
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
245
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
246
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
247
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
248
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
249
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
250
- }
251
-
252
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
253
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
254
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
255
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
256
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
257
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
258
- }
259
-
260
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
261
- border: 0;
262
- }
263
-
264
- .pf-v6-c-menu-toggle.pf-m-small {
265
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
266
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
267
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
268
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
269
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
270
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
271
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
272
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
273
- }
274
-
275
- .pf-v6-c-menu-toggle.pf-m-success {
276
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
277
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
278
- }
279
-
280
- .pf-v6-c-menu-toggle.pf-m-warning {
281
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
282
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
283
- }
284
-
285
- .pf-v6-c-menu-toggle.pf-m-danger {
286
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
287
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
288
- }
289
-
290
- .pf-v6-c-menu-toggle.pf-m-placeholder {
291
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
292
- }
293
-
294
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
295
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
296
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
297
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
298
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
299
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
300
- }
301
-
302
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
303
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
304
- pointer-events: none;
305
- }
306
-
307
- .pf-v6-c-menu-toggle.pf-m-split-button {
308
- --pf-v6-c-menu-toggle--Gap: 0;
309
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
310
- padding: 0;
311
- }
312
-
313
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
314
- position: relative;
315
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
316
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
317
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
318
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
319
- }
320
-
321
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
322
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
323
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
324
- }
325
-
326
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
327
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
328
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
329
- }
330
-
331
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
332
- --pf-v6-c-check__label--Color: currentcolor;
333
- --pf-v6-c-check__label--disabled--Color: currentcolor;
334
- align-items: center;
335
- align-self: stretch;
336
- }
337
-
338
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
339
- --pf-v6-c-check__input--TranslateY: 0;
340
- align-self: center;
341
- }
342
-
343
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
344
- border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
345
- }
346
-
347
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
348
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
349
- }
350
-
351
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
352
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
353
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
354
- }
355
-
356
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
357
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
358
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
359
- }
360
-
361
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
362
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
363
- }
364
-
365
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
366
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
367
- }
368
-
369
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
370
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
371
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
372
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
373
- }
374
-
375
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
376
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
377
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
378
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
379
- }
380
-
381
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
382
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
383
- }
384
-
385
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
386
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
387
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
388
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
389
- }
390
-
391
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
392
- content: none;
393
- }
394
-
395
- .pf-v6-c-menu-toggle.pf-m-typeahead {
396
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
397
- --pf-v6-c-menu-toggle--Gap: 0;
398
- align-items: stretch;
399
- padding: 0;
400
- }
401
-
402
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
403
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
404
- }
405
-
406
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
407
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
408
- display: flex;
409
- align-items: stretch;
410
- }
411
-
412
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
413
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
414
- flex: 1;
415
- }
416
-
417
- .pf-v6-c-menu-toggle__button {
418
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
419
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
420
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
421
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
422
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
423
- color: inherit;
424
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
425
- border: 0;
426
- }
427
-
428
- .pf-v6-c-menu-toggle__button.pf-m-text {
429
- display: inline-flex;
430
- align-items: baseline;
431
- }
432
-
433
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
434
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
435
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
436
- }
437
-
438
- .pf-v6-c-menu-toggle__text {
439
- overflow: hidden;
440
- text-overflow: ellipsis;
441
- white-space: nowrap;
442
- min-width: 0;
443
- }
444
-
445
- .pf-v6-c-menu-toggle__count {
446
- display: flex;
447
- flex-wrap: nowrap;
448
- }
449
-
450
- .pf-v6-c-menu-toggle__icon {
451
- flex-shrink: 0;
452
- }
453
-
454
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
455
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
456
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
457
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
458
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
459
- }
460
-
461
- .pf-v6-c-menu-toggle__controls {
462
- display: flex;
463
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
464
- align-items: center;
465
- justify-content: center;
466
- margin-inline-start: auto;
467
- }
468
-
469
- .pf-v6-c-menu-toggle__toggle-icon {
470
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
471
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
472
- }
473
-
474
- .pf-v6-c-menu-toggle__status-icon {
475
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
476
- }
477
-
478
6
  .pf-v6-c-check {
479
7
  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
480
8
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
@@ -1183,26 +711,245 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1183
711
  --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
1184
712
  }
1185
713
 
1186
- .pf-v6-c-button__icon.pf-m-end {
1187
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
714
+ .pf-v6-c-button__icon.pf-m-end {
715
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
716
+ }
717
+
718
+ .pf-v6-c-button__progress {
719
+ position: absolute;
720
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
721
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
722
+ line-height: 1;
723
+ color: var(--pf-v6-c-button__progress--Color);
724
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
725
+ }
726
+
727
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
728
+ --pf-v6-c-spinner--Color: currentcolor;
729
+ }
730
+
731
+ .pf-v6-c-button__count {
732
+ display: inline-flex;
733
+ align-items: center;
734
+ }
735
+
736
+ .pf-v6-c-text-input-group {
737
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
738
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
739
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
740
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
741
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
742
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
743
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
744
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
745
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
746
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
747
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
748
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
749
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
750
+ --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));
751
+ --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));
752
+ --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));
753
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
754
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
755
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
756
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
757
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
758
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
759
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
760
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
761
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
762
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
763
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
764
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
765
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
766
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
767
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
768
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
769
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
770
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
771
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
772
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
773
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
774
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
775
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
776
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
777
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
778
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
779
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
780
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
781
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
782
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
783
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
784
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
785
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
786
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
787
+ }
788
+
789
+ .pf-v6-c-text-input-group {
790
+ position: relative;
791
+ display: flex;
792
+ width: 100%;
793
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
794
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
795
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
796
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
797
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
798
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
799
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
800
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
801
+ }
802
+
803
+ .pf-v6-c-text-input-group::before {
804
+ position: absolute;
805
+ inset: 0;
806
+ pointer-events: none;
807
+ content: "";
808
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
809
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
810
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
811
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
812
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
813
+ }
814
+
815
+ .pf-v6-c-text-input-group.pf-m-disabled {
816
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
817
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
818
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
819
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
820
+ pointer-events: none;
821
+ }
822
+
823
+ .pf-v6-c-text-input-group.pf-m-plain {
824
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
825
+ }
826
+
827
+ .pf-v6-c-text-input-group.pf-m-plain::before {
828
+ border: 0;
829
+ }
830
+
831
+ .pf-v6-c-text-input-group.pf-m-success {
832
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
833
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
834
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
835
+ }
836
+
837
+ .pf-v6-c-text-input-group.pf-m-warning {
838
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
839
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
840
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
841
+ }
842
+
843
+ .pf-v6-c-text-input-group.pf-m-error {
844
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
845
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
846
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
847
+ }
848
+
849
+ .pf-v6-c-text-input-group:hover {
850
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
851
+ }
852
+
853
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
854
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
855
+ }
856
+
857
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
858
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
859
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
860
+ }
861
+
862
+ .pf-v6-c-text-input-group__main {
863
+ display: flex;
864
+ flex: 1;
865
+ flex-wrap: wrap;
866
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
867
+ min-width: 0;
868
+ }
869
+
870
+ .pf-v6-c-text-input-group__main.pf-m-icon {
871
+ --pf-v6-c-text-input-group__text--Position: relative;
872
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
873
+ display: inline-flex;
874
+ align-items: center;
875
+ justify-content: center;
876
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
877
+ }
878
+
879
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
880
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
881
+ }
882
+
883
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
884
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
885
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
886
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
887
+ }
888
+
889
+ .pf-v6-c-text-input-group__text {
890
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
891
+ display: inline-grid;
892
+ flex: 1;
893
+ grid-template-areas: "text-input";
894
+ grid-template-columns: 1fr;
895
+ }
896
+
897
+ .pf-v6-c-text-input-group__icon {
898
+ position: absolute;
899
+ inset-block-start: 50%;
900
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
901
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
902
+ color: var(--pf-v6-c-text-input-group__icon--Color);
903
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
904
+ }
905
+
906
+ .pf-v6-c-text-input-group__icon.pf-m-status {
907
+ inset-inline-start: auto;
908
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
909
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
910
+ }
911
+
912
+ .pf-v6-c-text-input-group__text-input {
913
+ overflow: hidden;
914
+ text-overflow: ellipsis;
915
+ white-space: nowrap;
916
+ position: relative;
917
+ width: 100%;
918
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
919
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
920
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
921
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
922
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
923
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
924
+ border: 0;
925
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
926
+ }
927
+
928
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
929
+ grid-area: text-input;
930
+ }
931
+
932
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
933
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
934
+ }
935
+
936
+ .pf-v6-c-text-input-group__text-input::placeholder {
937
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1188
938
  }
1189
939
 
1190
- .pf-v6-c-button__progress {
1191
- position: absolute;
1192
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
1193
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
1194
- line-height: 1;
1195
- color: var(--pf-v6-c-button__progress--Color);
1196
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
940
+ .pf-v6-c-text-input-group__utilities {
941
+ display: flex;
942
+ align-items: center;
943
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
944
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1197
945
  }
1198
946
 
1199
- .pf-v6-c-button__progress .pf-v6-c-spinner {
1200
- --pf-v6-c-spinner--Color: currentcolor;
947
+ .pf-v6-c-text-input-group__utilities > * + * {
948
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1201
949
  }
1202
950
 
1203
- .pf-v6-c-button__count {
1204
- display: inline-flex;
1205
- align-items: center;
951
+ .pf-v6-c-text-input-group__group {
952
+ display: flex;
1206
953
  }
1207
954
 
1208
955
  .pf-v6-c-label-group {
@@ -1361,79 +1108,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1361
1108
  display: none;
1362
1109
  }
1363
1110
 
1364
- .pf-v6-c-badge {
1365
- --pf-v6-c-badge--BorderColor: transparent;
1366
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1367
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1368
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1369
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1370
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1371
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1372
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1373
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1374
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1375
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1376
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1377
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1378
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1379
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1380
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1381
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1382
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1383
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1384
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1385
- }
1386
-
1387
- .pf-v6-c-badge {
1388
- position: relative;
1389
- display: inline-block;
1390
- min-width: var(--pf-v6-c-badge--MinWidth);
1391
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1392
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1393
- font-size: var(--pf-v6-c-badge--FontSize);
1394
- font-weight: var(--pf-v6-c-badge--FontWeight);
1395
- color: var(--pf-v6-c-badge--Color);
1396
- text-align: center;
1397
- white-space: nowrap;
1398
- background-color: var(--pf-v6-c-badge--BackgroundColor);
1399
- border-radius: var(--pf-v6-c-badge--BorderRadius);
1400
- }
1401
-
1402
- .pf-v6-c-badge::after {
1403
- position: absolute;
1404
- inset: 0;
1405
- pointer-events: none;
1406
- content: "";
1407
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1408
- border-radius: inherit;
1409
- }
1410
-
1411
- .pf-v6-c-badge.pf-m-read {
1412
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1413
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1414
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1415
- }
1416
-
1417
- .pf-v6-c-badge.pf-m-unread {
1418
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1419
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1420
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1421
- }
1422
-
1423
- .pf-v6-c-badge.pf-m-disabled {
1424
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1425
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1426
- }
1427
-
1428
- .pf-v6-c-badge.pf-m-disabled::after {
1429
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1430
- }
1431
-
1432
- .pf-v6-c-badge__toggle-icon {
1433
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1434
- color: var(--pf-v6-c-badge__toggle-icon--Color);
1435
- }
1436
-
1437
1111
  .pf-v6-c-label {
1438
1112
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1439
1113
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -1825,364 +1499,617 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1825
1499
  --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1826
1500
  }
1827
1501
 
1828
- .pf-v6-c-label.pf-m-editable {
1829
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1830
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1502
+ .pf-v6-c-label.pf-m-editable {
1503
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1504
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1505
+ }
1506
+
1507
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1508
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1509
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1510
+ }
1511
+
1512
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1513
+ text-decoration: var(--pf-v6-c-label--m-editable--TextDecorationLine) var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1514
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1515
+ }
1516
+
1517
+ .pf-v6-c-label.pf-m-editable-active {
1518
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1519
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1520
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1521
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1522
+ }
1523
+
1524
+ .pf-v6-c-label.pf-m-overflow {
1525
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1526
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1527
+ }
1528
+
1529
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1530
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1531
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1532
+ }
1533
+
1534
+ .pf-v6-c-label.pf-m-add {
1535
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1536
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1537
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1538
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1539
+ }
1540
+
1541
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1542
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1543
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1544
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1545
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1546
+ }
1547
+
1548
+ .pf-v6-c-label.pf-m-clickable {
1549
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1550
+ }
1551
+
1552
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1553
+ text-decoration: none;
1554
+ }
1555
+
1556
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1557
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1558
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1559
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1560
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1561
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1562
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1563
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1564
+ }
1565
+
1566
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1567
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1568
+ }
1569
+
1570
+ .pf-v6-c-label.pf-m-disabled {
1571
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1572
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1573
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1574
+ --pf-v6-c-label--BorderWidth: 0;
1575
+ pointer-events: none;
1576
+ }
1577
+
1578
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1579
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1580
+ }
1581
+
1582
+ .pf-v6-c-label,
1583
+ .pf-v6-c-label__content {
1584
+ display: inline-flex;
1585
+ align-items: center;
1586
+ justify-content: center;
1587
+ }
1588
+
1589
+ .pf-v6-c-label__text {
1590
+ overflow: hidden;
1591
+ text-overflow: ellipsis;
1592
+ white-space: nowrap;
1593
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
1594
+ }
1595
+
1596
+ .pf-v6-c-label__content {
1597
+ gap: var(--pf-v6-c-label__content--Gap);
1598
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
1599
+ padding: 0;
1600
+ overflow: hidden;
1601
+ color: var(--pf-v6-c-label--Color);
1602
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
1603
+ background: transparent;
1604
+ border-width: 0;
1605
+ }
1606
+
1607
+ .pf-v6-c-label__content::before {
1608
+ position: absolute;
1609
+ inset: 0;
1610
+ z-index: -1;
1611
+ pointer-events: none;
1612
+ content: "";
1613
+ background-color: var(--pf-v6-c-label--BackgroundColor);
1614
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1615
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1616
+ }
1617
+
1618
+ input.pf-v6-c-label__content {
1619
+ overflow: hidden;
1620
+ text-overflow: ellipsis;
1621
+ white-space: nowrap;
1622
+ }
1623
+
1624
+ .pf-v6-c-label__icon {
1625
+ color: var(--pf-v6-c-label__icon--Color);
1626
+ }
1627
+
1628
+ .pf-v6-c-label__actions {
1629
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1630
+ }
1631
+
1632
+ .pf-v6-c-label__actions .pf-v6-c-button {
1633
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1634
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1635
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1636
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1637
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1638
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1639
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1640
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1641
+ }
1642
+
1643
+ .pf-v6-c-menu-toggle {
1644
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1645
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1646
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1647
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1648
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1649
+ --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
1650
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
1651
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
1652
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
1653
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
1654
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
1655
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
1656
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
1657
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
1658
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1659
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1660
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
1661
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
1662
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
1663
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
1664
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
1665
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1666
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
1667
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
1668
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1669
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
1670
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1671
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1672
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1673
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1674
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1675
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1676
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1677
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
1678
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1679
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1680
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1681
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1682
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1683
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1684
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
1685
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
1686
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
1687
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1688
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
1689
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
1690
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1691
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
1692
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1693
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
1694
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
1695
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1696
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1697
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1698
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1699
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
1700
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
1701
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
1702
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1703
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1704
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
1705
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
1706
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1707
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
1708
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
1709
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
1710
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1711
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1712
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1713
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
1714
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
1715
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1716
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1717
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
1718
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
1719
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
1720
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
1721
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
1722
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
1723
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1724
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1725
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
1726
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1727
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
1728
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1729
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
1730
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
1731
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1732
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
1733
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
1734
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
1735
+ --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
1736
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1737
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1738
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1739
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1740
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1741
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1742
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1743
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
1744
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1745
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
1746
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1747
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1748
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
1749
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1750
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
1751
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
1752
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1753
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1754
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
1755
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
1756
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
1757
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1758
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1759
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
1760
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1761
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
1762
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1763
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1764
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1765
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1766
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
1767
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
1768
+ }
1769
+
1770
+ .pf-v6-c-menu-toggle {
1771
+ position: relative;
1772
+ display: inline-flex;
1773
+ gap: var(--pf-v6-c-menu-toggle--Gap);
1774
+ align-items: center;
1775
+ justify-content: center;
1776
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
1777
+ max-width: 100%;
1778
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1779
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1780
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1781
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1782
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
1783
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
1784
+ color: var(--pf-v6-c-menu-toggle--Color);
1785
+ cursor: pointer;
1786
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
1787
+ border: 0;
1788
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
1789
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
1790
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
1831
1791
  }
1832
1792
 
1833
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1834
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1835
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1793
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
1794
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1836
1795
  }
1837
1796
 
1838
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1839
- text-decoration: var(--pf-v6-c-label--m-editable--TextDecorationLine) var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1840
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1797
+ .pf-v6-c-menu-toggle::before {
1798
+ position: absolute;
1799
+ inset-block-start: 0;
1800
+ inset-block-end: 0;
1801
+ inset-inline-start: 0;
1802
+ inset-inline-end: 0;
1803
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
1804
+ pointer-events: none;
1805
+ content: "";
1806
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
1807
+ transition: inherit;
1841
1808
  }
1842
1809
 
1843
- .pf-v6-c-label.pf-m-editable-active {
1844
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1845
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1846
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1847
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1810
+ .pf-v6-c-menu-toggle.pf-m-primary {
1811
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
1812
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
1813
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
1814
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
1815
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
1816
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
1817
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
1818
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
1819
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
1820
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
1821
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
1822
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
1823
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
1824
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
1825
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
1826
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
1827
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
1848
1828
  }
1849
1829
 
1850
- .pf-v6-c-label.pf-m-overflow {
1851
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1852
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1830
+ .pf-v6-c-menu-toggle.pf-m-secondary {
1831
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
1832
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
1833
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
1834
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
1835
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
1836
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
1837
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
1838
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
1839
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
1840
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
1841
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
1842
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
1843
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
1844
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
1845
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
1853
1846
  }
1854
1847
 
1855
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1856
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1857
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1848
+ .pf-v6-c-menu-toggle.pf-m-full-height {
1849
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
1850
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
1851
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
1852
+ align-items: center;
1853
+ height: 100%;
1858
1854
  }
1859
1855
 
1860
- .pf-v6-c-label.pf-m-add {
1861
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1862
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1863
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1864
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1856
+ .pf-v6-c-menu-toggle.pf-m-full-width {
1857
+ width: 100%;
1865
1858
  }
1866
1859
 
1867
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1868
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1869
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1870
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1871
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1860
+ .pf-v6-c-menu-toggle.pf-m-plain {
1861
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
1862
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
1863
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
1864
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1865
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
1866
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1867
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
1868
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
1869
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
1870
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1871
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1872
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
1873
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
1874
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
1872
1875
  }
1873
1876
 
1874
- .pf-v6-c-label.pf-m-clickable {
1875
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1877
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
1878
+ border: none;
1876
1879
  }
1877
1880
 
1878
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1879
- text-decoration: none;
1881
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
1882
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
1883
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
1884
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
1885
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
1886
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
1880
1887
  }
1881
1888
 
1882
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1883
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1884
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1885
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1886
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1887
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1888
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1889
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1889
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
1890
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
1891
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
1892
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
1893
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
1894
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
1890
1895
  }
1891
1896
 
1892
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1893
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1897
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
1898
+ border: 0;
1894
1899
  }
1895
1900
 
1896
- .pf-v6-c-label.pf-m-disabled {
1897
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1898
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1899
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1900
- --pf-v6-c-label--BorderWidth: 0;
1901
- pointer-events: none;
1901
+ .pf-v6-c-menu-toggle.pf-m-small {
1902
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
1903
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
1904
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
1905
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
1906
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
1907
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
1908
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
1909
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
1902
1910
  }
1903
1911
 
1904
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1905
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1912
+ .pf-v6-c-menu-toggle.pf-m-success {
1913
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
1914
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
1906
1915
  }
1907
1916
 
1908
- .pf-v6-c-label,
1909
- .pf-v6-c-label__content {
1910
- display: inline-flex;
1911
- align-items: center;
1912
- justify-content: center;
1917
+ .pf-v6-c-menu-toggle.pf-m-warning {
1918
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
1919
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
1913
1920
  }
1914
1921
 
1915
- .pf-v6-c-label__text {
1916
- overflow: hidden;
1917
- text-overflow: ellipsis;
1918
- white-space: nowrap;
1919
- max-width: var(--pf-v6-c-label__text--MaxWidth);
1922
+ .pf-v6-c-menu-toggle.pf-m-danger {
1923
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
1924
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
1920
1925
  }
1921
1926
 
1922
- .pf-v6-c-label__content {
1923
- gap: var(--pf-v6-c-label__content--Gap);
1924
- max-width: var(--pf-v6-c-label__content--MaxWidth);
1925
- padding: 0;
1926
- overflow: hidden;
1927
- color: var(--pf-v6-c-label--Color);
1928
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
1929
- background: transparent;
1930
- border-width: 0;
1927
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
1928
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
1931
1929
  }
1932
1930
 
1933
- .pf-v6-c-label__content::before {
1934
- position: absolute;
1935
- inset: 0;
1936
- z-index: -1;
1931
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
1932
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
1933
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
1934
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
1935
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
1936
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
1937
+ }
1938
+
1939
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
1940
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
1937
1941
  pointer-events: none;
1938
- content: "";
1939
- background-color: var(--pf-v6-c-label--BackgroundColor);
1940
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1941
- border-radius: var(--pf-v6-c-label--BorderRadius);
1942
1942
  }
1943
1943
 
1944
- input.pf-v6-c-label__content {
1945
- overflow: hidden;
1946
- text-overflow: ellipsis;
1947
- white-space: nowrap;
1944
+ .pf-v6-c-menu-toggle.pf-m-split-button {
1945
+ --pf-v6-c-menu-toggle--Gap: 0;
1946
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1947
+ padding: 0;
1948
1948
  }
1949
1949
 
1950
- .pf-v6-c-label__icon {
1951
- color: var(--pf-v6-c-label__icon--Color);
1950
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
1951
+ position: relative;
1952
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1953
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1954
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1955
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1952
1956
  }
1953
1957
 
1954
- .pf-v6-c-label__actions {
1955
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1958
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1959
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1960
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1956
1961
  }
1957
1962
 
1958
- .pf-v6-c-label__actions .pf-v6-c-button {
1959
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1960
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1961
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1962
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1963
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1964
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1965
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1966
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1963
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1964
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1965
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1967
1966
  }
1968
1967
 
1969
- .pf-v6-c-text-input-group {
1970
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1971
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
1972
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1973
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1974
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1975
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1976
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1977
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1978
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1979
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1980
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1981
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1982
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1983
- --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));
1984
- --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));
1985
- --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));
1986
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1987
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1988
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
1989
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1990
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1991
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1992
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1993
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1994
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1995
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1996
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1997
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1998
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1999
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2000
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2001
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2002
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2003
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2004
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2005
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2006
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2007
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2008
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2009
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2010
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2011
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2012
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2013
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2014
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2015
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2016
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2017
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2018
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2019
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1968
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1969
+ --pf-v6-c-check__label--Color: currentcolor;
1970
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
1971
+ align-items: center;
1972
+ align-self: stretch;
2020
1973
  }
2021
1974
 
2022
- .pf-v6-c-text-input-group {
2023
- position: relative;
2024
- display: flex;
2025
- width: 100%;
2026
- font-size: var(--pf-v6-c-text-input-group__FontSize);
2027
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
2028
- color: var(--pf-v6-c-text-input-group--Color, inherit);
2029
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2030
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2031
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2032
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2033
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1975
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1976
+ --pf-v6-c-check__input--TranslateY: 0;
1977
+ align-self: center;
2034
1978
  }
2035
1979
 
2036
- .pf-v6-c-text-input-group::before {
2037
- position: absolute;
2038
- inset: 0;
2039
- pointer-events: none;
2040
- content: "";
2041
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2042
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2043
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2044
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2045
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1980
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1981
+ border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
2046
1982
  }
2047
1983
 
2048
- .pf-v6-c-text-input-group.pf-m-disabled {
2049
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2050
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2051
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2052
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2053
- pointer-events: none;
1984
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1985
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
2054
1986
  }
2055
1987
 
2056
- .pf-v6-c-text-input-group.pf-m-plain {
2057
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
1988
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1989
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1990
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
2058
1991
  }
2059
1992
 
2060
- .pf-v6-c-text-input-group.pf-m-plain::before {
2061
- border: 0;
1993
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1994
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1995
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
2062
1996
  }
2063
1997
 
2064
- .pf-v6-c-text-input-group.pf-m-success {
2065
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2066
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2067
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1998
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1999
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
2068
2000
  }
2069
2001
 
2070
- .pf-v6-c-text-input-group.pf-m-warning {
2071
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2072
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2073
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2002
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
2003
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
2074
2004
  }
2075
2005
 
2076
- .pf-v6-c-text-input-group.pf-m-error {
2077
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2078
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2079
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2006
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
2007
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
2008
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
2009
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
2080
2010
  }
2081
2011
 
2082
- .pf-v6-c-text-input-group:hover {
2083
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2012
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
2013
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
2014
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
2015
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
2084
2016
  }
2085
2017
 
2086
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2087
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2018
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
2019
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
2088
2020
  }
2089
2021
 
2090
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2091
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2092
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2022
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
2023
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
2024
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
2025
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
2093
2026
  }
2094
2027
 
2095
- .pf-v6-c-text-input-group__main {
2096
- display: flex;
2097
- flex: 1;
2098
- flex-wrap: wrap;
2099
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2100
- min-width: 0;
2028
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
2029
+ content: none;
2030
+ }
2031
+
2032
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
2033
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
2034
+ --pf-v6-c-menu-toggle--Gap: 0;
2035
+ align-items: stretch;
2036
+ padding: 0;
2101
2037
  }
2102
2038
 
2103
- .pf-v6-c-text-input-group__main.pf-m-icon {
2104
- --pf-v6-c-text-input-group__text--Position: relative;
2105
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2106
- display: inline-flex;
2107
- align-items: center;
2108
- justify-content: center;
2109
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2039
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
2040
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2110
2041
  }
2111
2042
 
2112
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2113
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2043
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
2044
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2045
+ display: flex;
2046
+ align-items: stretch;
2114
2047
  }
2115
2048
 
2116
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2117
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2118
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2119
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2049
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
2050
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
2051
+ flex: 1;
2120
2052
  }
2121
2053
 
2122
- .pf-v6-c-text-input-group__text {
2123
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
2124
- display: inline-grid;
2125
- flex: 1;
2126
- grid-template-areas: "text-input";
2127
- grid-template-columns: 1fr;
2054
+ .pf-v6-c-menu-toggle__button {
2055
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
2056
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
2057
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
2058
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
2059
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
2060
+ color: inherit;
2061
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
2062
+ border: 0;
2128
2063
  }
2129
2064
 
2130
- .pf-v6-c-text-input-group__icon {
2131
- position: absolute;
2132
- inset-block-start: 50%;
2133
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2134
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2135
- color: var(--pf-v6-c-text-input-group__icon--Color);
2136
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2065
+ .pf-v6-c-menu-toggle__button.pf-m-text {
2066
+ display: inline-flex;
2067
+ align-items: baseline;
2137
2068
  }
2138
2069
 
2139
- .pf-v6-c-text-input-group__icon.pf-m-status {
2140
- inset-inline-start: auto;
2141
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2142
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2070
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
2071
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
2072
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
2143
2073
  }
2144
2074
 
2145
- .pf-v6-c-text-input-group__text-input {
2075
+ .pf-v6-c-menu-toggle__text {
2146
2076
  overflow: hidden;
2147
2077
  text-overflow: ellipsis;
2148
2078
  white-space: nowrap;
2149
- position: relative;
2150
- width: 100%;
2151
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2152
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2153
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2154
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2155
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2156
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2157
- border: 0;
2158
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2079
+ min-width: 0;
2159
2080
  }
2160
2081
 
2161
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2162
- grid-area: text-input;
2082
+ .pf-v6-c-menu-toggle__count {
2083
+ display: flex;
2084
+ flex-wrap: nowrap;
2163
2085
  }
2164
2086
 
2165
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
2166
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2087
+ .pf-v6-c-menu-toggle__icon {
2088
+ flex-shrink: 0;
2167
2089
  }
2168
2090
 
2169
- .pf-v6-c-text-input-group__text-input::placeholder {
2170
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2091
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
2092
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
2093
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
2094
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
2095
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
2171
2096
  }
2172
2097
 
2173
- .pf-v6-c-text-input-group__utilities {
2098
+ .pf-v6-c-menu-toggle__controls {
2174
2099
  display: flex;
2100
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
2175
2101
  align-items: center;
2176
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2177
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2102
+ justify-content: center;
2103
+ margin-inline-start: auto;
2178
2104
  }
2179
2105
 
2180
- .pf-v6-c-text-input-group__utilities > * + * {
2181
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2106
+ .pf-v6-c-menu-toggle__toggle-icon {
2107
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
2108
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
2182
2109
  }
2183
2110
 
2184
- .pf-v6-c-text-input-group__group {
2185
- display: flex;
2111
+ .pf-v6-c-menu-toggle__status-icon {
2112
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
2186
2113
  }
2187
2114
 
2188
2115
  .pf-v6-c-divider {
@@ -2501,6 +2428,79 @@ input.pf-v6-c-label__content {
2501
2428
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2502
2429
  }
2503
2430
  }
2431
+ .pf-v6-c-badge {
2432
+ --pf-v6-c-badge--BorderColor: transparent;
2433
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2434
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2435
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2436
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2437
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2438
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2439
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2440
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2441
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2442
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2443
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2444
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2445
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2446
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2447
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2448
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2449
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2450
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2451
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2452
+ }
2453
+
2454
+ .pf-v6-c-badge {
2455
+ position: relative;
2456
+ display: inline-block;
2457
+ min-width: var(--pf-v6-c-badge--MinWidth);
2458
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2459
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2460
+ font-size: var(--pf-v6-c-badge--FontSize);
2461
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2462
+ color: var(--pf-v6-c-badge--Color);
2463
+ text-align: center;
2464
+ white-space: nowrap;
2465
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2466
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2467
+ }
2468
+
2469
+ .pf-v6-c-badge::after {
2470
+ position: absolute;
2471
+ inset: 0;
2472
+ pointer-events: none;
2473
+ content: "";
2474
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2475
+ border-radius: inherit;
2476
+ }
2477
+
2478
+ .pf-v6-c-badge.pf-m-read {
2479
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2480
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2481
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2482
+ }
2483
+
2484
+ .pf-v6-c-badge.pf-m-unread {
2485
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2486
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2487
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2488
+ }
2489
+
2490
+ .pf-v6-c-badge.pf-m-disabled {
2491
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2492
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2493
+ }
2494
+
2495
+ .pf-v6-c-badge.pf-m-disabled::after {
2496
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2497
+ }
2498
+
2499
+ .pf-v6-c-badge__toggle-icon {
2500
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2501
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2502
+ }
2503
+
2504
2504
  .pf-v6-c-menu {
2505
2505
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2506
2506
  --pf-v6-c-menu--Width: auto;
@@ -3127,131 +3127,97 @@ input.pf-v6-c-label__content {
3127
3127
  padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3128
3128
  }
3129
3129
 
3130
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3131
- height: auto;
3132
- }
3133
-
3134
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3135
- --pf-v6-c-menu-toggle--BorderWidth: 0;
3136
- --pf-v6-c-menu-toggle--BorderColor: transparent;
3137
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3138
- }
3139
-
3140
- .pf-v6-c-breadcrumb {
3141
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3142
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3143
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3144
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3145
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3146
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3147
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3148
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3149
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3150
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3151
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3152
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3153
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3154
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3155
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3156
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3157
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3158
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3159
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3160
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3161
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3162
- }
3163
-
3164
- .pf-v6-c-breadcrumb {
3165
- display: inline-flex;
3166
- }
3167
-
3168
- .pf-v6-c-breadcrumb__list {
3169
- display: flex;
3170
- flex-wrap: wrap;
3171
- align-items: center;
3172
- }
3173
-
3174
- .pf-v6-c-breadcrumb__item {
3175
- display: flex;
3176
- align-items: baseline;
3177
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3178
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3179
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3180
- white-space: nowrap;
3181
- list-style: none;
3182
- }
3183
-
3184
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3185
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3186
- }
3187
-
3188
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3189
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3190
- }
3191
-
3192
- .pf-v6-c-breadcrumb__item-divider {
3193
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3194
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3195
- line-height: 1;
3196
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3197
- }
3198
-
3199
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3200
- scale: -1 1;
3201
- }
3202
-
3203
- .pf-v6-c-breadcrumb__link {
3204
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3205
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3206
- font-size: inherit;
3207
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3208
- line-height: inherit;
3209
- color: var(--pf-v6-c-breadcrumb__link--Color);
3210
- text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3211
- word-break: break-word;
3212
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3130
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3131
+ height: auto;
3213
3132
  }
3214
3133
 
3215
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3216
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3217
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3218
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3134
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3135
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
3136
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
3137
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3219
3138
  }
3220
3139
 
3221
- .pf-v6-c-breadcrumb__link.pf-m-current {
3222
- cursor: default;
3140
+ .pf-v6-c-spinner {
3141
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3142
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3143
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3144
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3145
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3146
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3147
+ --pf-v6-c-spinner--StrokeWidth: 10;
3148
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3149
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3150
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3151
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3152
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3153
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3154
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3223
3155
  }
3224
3156
 
3225
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3226
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3227
- text-decoration: none;
3157
+ .pf-v6-c-spinner {
3158
+ width: var(--pf-v6-c-spinner--Width);
3159
+ height: var(--pf-v6-c-spinner--Height);
3160
+ overflow: hidden;
3161
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3228
3162
  }
3229
3163
 
3230
- button.pf-v6-c-breadcrumb__link {
3231
- border: none;
3164
+ .pf-v6-c-spinner.pf-m-inline {
3165
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3232
3166
  }
3233
3167
 
3234
- .pf-v6-c-breadcrumb__dropdown {
3235
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3236
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3237
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3238
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3168
+ .pf-v6-c-spinner.pf-m-sm {
3169
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3239
3170
  }
3240
3171
 
3241
- .pf-v6-c-breadcrumb__heading {
3242
- display: inline;
3243
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3172
+ .pf-v6-c-spinner.pf-m-md {
3173
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3244
3174
  }
3245
3175
 
3246
- .pf-v6-c-breadcrumb__link,
3247
- .pf-v6-c-breadcrumb__heading {
3248
- white-space: normal;
3176
+ .pf-v6-c-spinner.pf-m-lg {
3177
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3249
3178
  }
3250
3179
 
3251
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3252
- display: none;
3180
+ .pf-v6-c-spinner.pf-m-xl {
3181
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3182
+ }
3183
+
3184
+ .pf-v6-c-spinner__path {
3185
+ width: 100%;
3186
+ height: 100%;
3187
+ stroke: var(--pf-v6-c-spinner--Color);
3188
+ stroke-dasharray: 283;
3189
+ stroke-dashoffset: 280;
3190
+ stroke-linecap: round;
3191
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3192
+ transform-origin: 50% 50%;
3193
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3253
3194
  }
3254
3195
 
3196
+ @keyframes pf-v6-c-spinner-animation-rotate {
3197
+ 0% {
3198
+ transform: rotate(0deg);
3199
+ }
3200
+ 100% {
3201
+ transform: rotate(360deg);
3202
+ }
3203
+ }
3204
+ @keyframes pf-v6-c-spinner-animation-dash {
3205
+ 0% {
3206
+ stroke-dashoffset: 280;
3207
+ transform: rotate(0);
3208
+ }
3209
+ 15% {
3210
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3211
+ }
3212
+ 40% {
3213
+ stroke-dasharray: 220;
3214
+ stroke-dashoffset: 150;
3215
+ }
3216
+ 100% {
3217
+ stroke-dashoffset: 280;
3218
+ transform: rotate(720deg);
3219
+ }
3220
+ }
3255
3221
  .pf-v6-c-tooltip {
3256
3222
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3257
3223
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3383,84 +3349,117 @@ button.pf-v6-c-breadcrumb__link {
3383
3349
  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));
3384
3350
  }
3385
3351
 
3386
- .pf-v6-c-spinner {
3387
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3388
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3389
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3390
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3391
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3392
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3393
- --pf-v6-c-spinner--StrokeWidth: 10;
3394
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3395
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3396
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3397
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3398
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3399
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3400
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3352
+ .pf-v6-c-breadcrumb {
3353
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3354
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3355
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3356
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3357
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3358
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3359
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3360
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3361
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3362
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3363
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3364
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3365
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3366
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3367
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3368
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3369
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3370
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3371
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3372
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3373
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3401
3374
  }
3402
3375
 
3403
- .pf-v6-c-spinner {
3404
- width: var(--pf-v6-c-spinner--Width);
3405
- height: var(--pf-v6-c-spinner--Height);
3406
- overflow: hidden;
3407
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3376
+ .pf-v6-c-breadcrumb {
3377
+ display: inline-flex;
3408
3378
  }
3409
3379
 
3410
- .pf-v6-c-spinner.pf-m-inline {
3411
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3380
+ .pf-v6-c-breadcrumb__list {
3381
+ display: flex;
3382
+ flex-wrap: wrap;
3383
+ align-items: center;
3412
3384
  }
3413
3385
 
3414
- .pf-v6-c-spinner.pf-m-sm {
3415
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3386
+ .pf-v6-c-breadcrumb__item {
3387
+ display: flex;
3388
+ align-items: baseline;
3389
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3390
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3391
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3392
+ white-space: nowrap;
3393
+ list-style: none;
3416
3394
  }
3417
3395
 
3418
- .pf-v6-c-spinner.pf-m-md {
3419
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3396
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3397
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3420
3398
  }
3421
3399
 
3422
- .pf-v6-c-spinner.pf-m-lg {
3423
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3400
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3401
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3424
3402
  }
3425
3403
 
3426
- .pf-v6-c-spinner.pf-m-xl {
3427
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3404
+ .pf-v6-c-breadcrumb__item-divider {
3405
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3406
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3407
+ line-height: 1;
3408
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3428
3409
  }
3429
3410
 
3430
- .pf-v6-c-spinner__path {
3431
- width: 100%;
3432
- height: 100%;
3433
- stroke: var(--pf-v6-c-spinner--Color);
3434
- stroke-dasharray: 283;
3435
- stroke-dashoffset: 280;
3436
- stroke-linecap: round;
3437
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3438
- transform-origin: 50% 50%;
3439
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3411
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3412
+ scale: -1 1;
3440
3413
  }
3441
3414
 
3442
- @keyframes pf-v6-c-spinner-animation-rotate {
3443
- 0% {
3444
- transform: rotate(0deg);
3445
- }
3446
- 100% {
3447
- transform: rotate(360deg);
3448
- }
3415
+ .pf-v6-c-breadcrumb__link {
3416
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3417
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3418
+ font-size: inherit;
3419
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3420
+ line-height: inherit;
3421
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3422
+ text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3423
+ word-break: break-word;
3424
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3449
3425
  }
3450
- @keyframes pf-v6-c-spinner-animation-dash {
3451
- 0% {
3452
- stroke-dashoffset: 280;
3453
- transform: rotate(0);
3454
- }
3455
- 15% {
3456
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3457
- }
3458
- 40% {
3459
- stroke-dasharray: 220;
3460
- stroke-dashoffset: 150;
3461
- }
3462
- 100% {
3463
- stroke-dashoffset: 280;
3464
- transform: rotate(720deg);
3465
- }
3426
+
3427
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3428
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3429
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3430
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3431
+ }
3432
+
3433
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3434
+ cursor: default;
3435
+ }
3436
+
3437
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3438
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3439
+ text-decoration: none;
3440
+ }
3441
+
3442
+ button.pf-v6-c-breadcrumb__link {
3443
+ border: none;
3444
+ }
3445
+
3446
+ .pf-v6-c-breadcrumb__dropdown {
3447
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3448
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3449
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3450
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3451
+ }
3452
+
3453
+ .pf-v6-c-breadcrumb__heading {
3454
+ display: inline;
3455
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3456
+ }
3457
+
3458
+ .pf-v6-c-breadcrumb__link,
3459
+ .pf-v6-c-breadcrumb__heading {
3460
+ white-space: normal;
3461
+ }
3462
+
3463
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3464
+ display: none;
3466
3465
  }