@patternfly/react-templates 6.6.0-prerelease.2 → 6.6.0-prerelease.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-ccVq_Rpf.css → output-BBNRbQ2Z.css} +1726 -1727
  6. package/dist/umd/react-templates.min.js +1 -1
  7. package/package.json +3 -3
  8. package/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap +8 -32
  9. package/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap +8 -32
  10. package/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap +4 -16
  11. package/src/components/Select/__tests__/__snapshots__/SimpleSelect.test.tsx.snap +8 -32
  12. package/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap +4 -16
package/dist/umd/assets/{output-ccVq_Rpf.css → output-BBNRbQ2Z.css} RENAMED
@@ -3,846 +3,547 @@
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(1lh + 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--control--default);
18
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
19
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--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--control--hover);
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--control--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__icon--TransitionDelay: 0s;
42
- --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
43
- --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
44
- --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
45
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
46
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
47
- --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
48
- --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
49
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
50
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
51
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
52
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
53
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
54
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
55
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--action--default);
56
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
57
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
58
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
59
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
60
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
61
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
62
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
63
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
64
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
65
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
66
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
67
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
68
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
69
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
70
- --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
71
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
72
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
73
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--action--default);
74
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
75
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
76
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
77
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
78
- --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
79
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
80
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
81
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
82
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
83
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
84
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
85
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
86
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
87
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
88
- --pf-v6-c-menu-toggle--m-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
89
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
90
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
91
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
92
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
93
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default);
94
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
95
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
96
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
97
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
98
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
99
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
100
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
101
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
102
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
103
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
104
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
105
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
106
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
107
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
108
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
109
- --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));
110
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
111
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
112
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
113
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
114
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
115
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
116
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
117
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
118
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
119
- --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
120
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
121
- --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
122
- --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
123
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
124
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
125
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
126
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
127
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
128
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
129
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
130
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
131
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
132
- --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
133
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
134
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
135
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
136
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
137
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
138
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
139
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
140
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
141
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
142
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
143
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
144
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
145
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
146
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
147
- --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
148
- --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
149
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
150
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
151
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
152
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
153
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
154
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
155
- --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
156
- }
157
-
158
- .pf-v6-c-menu-toggle {
159
- position: relative;
160
- display: inline-flex;
161
- gap: var(--pf-v6-c-menu-toggle--Gap);
162
- align-items: center;
163
- justify-content: center;
164
- min-width: var(--pf-v6-c-menu-toggle--MinWidth, revert);
165
- max-width: 100%;
166
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
167
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
168
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
169
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
170
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
171
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
172
- color: var(--pf-v6-c-menu-toggle--Color);
173
- cursor: pointer;
174
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
175
- border: 0;
176
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
177
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
178
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
179
- }
180
-
181
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
182
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
183
- }
184
-
185
- .pf-v6-c-menu-toggle::before {
186
- position: absolute;
187
- inset-block-start: 0;
188
- inset-block-end: 0;
189
- inset-inline-start: 0;
190
- inset-inline-end: 0;
191
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
192
- pointer-events: none;
193
- content: "";
194
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
195
- transition: inherit;
196
- }
197
-
198
- .pf-v6-c-menu-toggle.pf-m-primary {
199
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
200
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
201
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
202
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
203
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
204
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
205
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
206
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
207
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
208
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
209
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
210
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
211
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
212
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
213
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
214
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
215
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
216
- }
217
-
218
- .pf-v6-c-menu-toggle.pf-m-secondary {
219
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
220
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
221
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
222
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
223
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
224
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
225
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
226
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
227
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
228
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
229
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
230
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
231
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
232
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
233
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
234
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
235
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
236
- }
237
-
238
- .pf-v6-c-menu-toggle.pf-m-full-height {
239
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
240
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
241
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
242
- align-items: center;
243
- height: 100%;
244
- }
245
-
246
- .pf-v6-c-menu-toggle.pf-m-full-width {
247
- width: 100%;
248
- }
249
-
250
- .pf-v6-c-menu-toggle.pf-m-form {
251
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-form--BorderRadius);
252
- }
253
-
254
- .pf-v6-c-menu-toggle.pf-m-plain {
255
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
256
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
257
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
258
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
259
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
260
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
261
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
262
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
263
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
264
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
265
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
266
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
267
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
268
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
269
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
270
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
271
- }
272
-
273
- .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
274
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
275
- }
276
-
277
- .pf-v6-c-menu-toggle.pf-m-plain::before {
278
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
279
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
280
- }
281
-
282
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
283
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
284
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
285
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
286
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
287
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
288
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
289
- --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
290
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
291
- --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
292
- --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
293
- }
294
-
295
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
296
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
297
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
298
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
299
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
300
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
301
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
302
- }
303
-
304
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
305
- border: 0;
306
- }
307
-
308
- .pf-v6-c-menu-toggle.pf-m-small {
309
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
310
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
311
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
312
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
313
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
314
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
315
- --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);
316
- --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);
317
- }
318
-
319
- .pf-v6-c-menu-toggle.pf-m-success {
320
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
321
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
322
- }
323
-
324
- .pf-v6-c-menu-toggle.pf-m-warning {
325
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
326
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
327
- }
328
-
329
- .pf-v6-c-menu-toggle.pf-m-danger {
330
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
331
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
332
- }
333
-
334
- @media screen and (prefers-reduced-motion: no-preference) {
335
- .pf-v6-c-menu-toggle.pf-m-danger {
336
- transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
337
- animation-name: pf-v6-c-menu-toggle-m-danger-motion;
338
- animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
339
- animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
340
- animation-fill-mode: both;
341
- }
342
- }
343
- .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
344
- animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
345
- animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
346
- animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
347
- }
348
-
349
- @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
350
- from {
351
- opacity: 0;
352
- }
353
- to {
354
- opacity: 1;
355
- }
356
- }
357
- .pf-v6-c-menu-toggle.pf-m-settings {
358
- --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
359
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
360
- --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
361
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
362
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
363
- --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
364
- --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
365
- }
366
-
367
- .pf-v6-c-menu-toggle.pf-m-placeholder {
368
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
369
- }
370
-
371
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
372
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
373
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
374
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
375
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
376
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
377
- }
378
-
379
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
380
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
381
- pointer-events: none;
382
- }
383
-
384
- .pf-v6-c-menu-toggle.pf-m-docked {
385
- justify-content: flex-start;
386
- width: 100%;
387
- }
388
-
389
- @media (min-width: 62rem) {
390
- .pf-v6-c-menu-toggle.pf-m-docked {
391
- justify-content: center;
392
- width: auto;
393
- }
394
- .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
395
- .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
396
- display: none;
397
- }
398
- }
399
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked, .pf-v6-c-menu-toggle.pf-m-text-expanded {
400
- justify-content: flex-start;
401
- width: 100%;
402
- }
403
-
404
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
405
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
406
- .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
407
- display: revert;
408
- }
409
-
410
- @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
411
- syntax: "<length>";
412
- inherits: false;
413
- initial-value: 0;
414
- }
415
- @media (prefers-reduced-motion: no-preference) {
416
- @keyframes pf-v6-c-menu-toggle-m-danger-motion {
417
- 33% {
418
- --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
419
- }
420
- 66% {
421
- --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
422
- }
423
- }
424
- }
425
- .pf-v6-c-menu-toggle.pf-m-split-button {
426
- --pf-v6-c-menu-toggle--Gap: 0;
427
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
428
- padding: 0;
429
- }
430
-
431
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
432
- position: relative;
433
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
434
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
435
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
436
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
437
- }
438
-
439
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
440
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
441
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
442
- }
443
-
444
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
445
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
446
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
447
- }
448
-
449
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
450
- --pf-v6-c-check__label--Color: currentcolor;
451
- --pf-v6-c-check__label--disabled--Color: currentcolor;
452
- align-items: center;
453
- align-self: stretch;
454
- }
455
-
456
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
457
- --pf-v6-c-check__input--TranslateY: 0;
458
- align-self: center;
459
- }
460
-
461
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
462
- 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);
463
- }
464
-
465
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
466
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
467
- }
468
-
469
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
470
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
471
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
472
- }
473
-
474
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
475
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
476
- --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);
477
- }
478
-
479
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
480
- --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);
481
- }
482
-
483
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
484
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
485
- }
486
-
487
- .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,
488
- .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,
489
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
490
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
491
- }
492
-
493
- .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,
494
- .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,
495
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
496
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
497
- }
498
-
499
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
500
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
501
- }
502
-
503
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
504
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
505
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
506
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
6
+ .pf-v6-c-label {
7
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
8
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
9
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
10
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
11
+ --pf-v6-c-label--MaxWidth: 100%;
12
+ --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
13
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
14
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
15
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
16
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
17
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
18
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
19
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
20
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
21
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
22
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
23
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
24
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
25
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
26
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
27
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
28
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
29
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
30
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
31
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
32
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
33
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
34
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
35
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
36
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
37
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
38
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
39
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
40
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
41
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
42
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
43
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
44
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
45
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
46
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
47
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
48
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
49
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
50
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
51
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
52
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
53
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
54
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
55
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
56
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
57
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
58
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
59
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
60
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
61
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
62
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
63
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
64
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
65
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
66
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
67
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
68
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
69
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
70
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
71
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
72
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
73
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
74
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
75
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
76
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
77
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
78
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
79
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
80
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
81
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
82
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
83
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
84
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
85
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
86
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
87
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
88
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
89
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
90
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
91
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
92
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
93
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
94
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
95
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
96
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
97
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
98
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
99
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
100
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
101
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
102
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
103
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
104
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
105
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
106
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
107
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
108
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
109
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
110
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
111
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
112
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
113
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
114
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
115
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
116
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
117
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
118
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
119
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
120
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
121
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
122
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
123
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
124
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
125
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
126
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
127
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
128
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
129
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
130
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
131
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
132
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
133
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
134
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
135
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
136
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
137
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
138
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
139
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
140
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
141
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
142
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
143
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
144
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
145
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
146
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
147
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
148
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
149
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
150
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
151
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
152
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
153
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
154
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
155
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
156
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
157
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
158
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
159
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
160
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
161
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
162
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
163
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
164
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
165
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
166
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
167
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
168
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
169
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
170
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
171
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
172
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
173
+ --pf-v6-c-label__content--MaxWidth: 100%;
174
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
175
+ --pf-v6-c-label__content--Cursor: initial;
176
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
177
+ --pf-v6-c-label__text--MaxWidth: 100%;
178
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
179
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
180
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
181
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
182
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
183
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
184
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
185
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
186
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
187
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
188
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
189
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
190
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
191
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
192
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
193
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
194
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
195
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
196
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
197
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
198
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
199
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
200
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
201
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
507
202
  }
508
203
 
509
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
510
- content: none;
204
+ .pf-v6-c-label {
205
+ position: relative;
206
+ gap: var(--pf-v6-c-label--Gap);
207
+ min-width: var(--pf-v6-c-label--MinWidth);
208
+ max-width: var(--pf-v6-c-label--MaxWidth);
209
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
210
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
211
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
212
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
213
+ font-size: var(--pf-v6-c-label--FontSize);
214
+ white-space: nowrap;
215
+ background: transparent;
216
+ isolation: isolate;
217
+ border: 0;
218
+ border-radius: var(--pf-v6-c-label--BorderRadius);
511
219
  }
512
220
 
513
- .pf-v6-c-menu-toggle.pf-m-typeahead {
514
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
515
- --pf-v6-c-menu-toggle--Gap: 0;
516
- align-items: stretch;
517
- padding: 0;
221
+ .pf-v6-c-label.pf-m-blue {
222
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
223
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
224
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
225
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
226
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
227
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
228
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
229
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
518
230
  }
519
231
 
520
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
521
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
232
+ .pf-v6-c-label.pf-m-red {
233
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
234
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
235
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
236
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
237
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
238
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
239
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
240
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
522
241
  }
523
242
 
524
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
525
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
526
- display: flex;
527
- align-items: stretch;
243
+ .pf-v6-c-label.pf-m-orange {
244
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
245
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
246
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
247
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
248
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
249
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
250
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
251
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
528
252
  }
529
253
 
530
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
531
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
532
- flex: 1;
254
+ .pf-v6-c-label.pf-m-orangered {
255
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
256
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
257
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
258
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
259
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
260
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
261
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
262
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
533
263
  }
534
264
 
535
- .pf-v6-c-menu-toggle__button {
536
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
537
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
538
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
539
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
540
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
541
- color: inherit;
542
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
543
- border: 0;
265
+ .pf-v6-c-label.pf-m-yellow {
266
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
267
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
268
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
269
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
270
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
271
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
272
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
273
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
544
274
  }
545
275
 
546
- .pf-v6-c-menu-toggle__button.pf-m-text {
547
- display: inline-flex;
548
- align-items: baseline;
276
+ .pf-v6-c-label.pf-m-green {
277
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
278
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
279
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
280
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
281
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
282
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
283
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
284
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
549
285
  }
550
286
 
551
- .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) {
552
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
553
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
287
+ .pf-v6-c-label.pf-m-teal {
288
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
289
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
290
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
291
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
292
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
293
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
294
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
295
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
554
296
  }
555
297
 
556
- .pf-v6-c-menu-toggle__text {
557
- overflow: hidden;
558
- text-overflow: ellipsis;
559
- white-space: nowrap;
560
- min-width: 0;
298
+ .pf-v6-c-label.pf-m-purple {
299
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
300
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
301
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
302
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
303
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
304
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
305
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
306
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
561
307
  }
562
308
 
563
- .pf-v6-c-menu-toggle__count {
564
- display: flex;
565
- flex-wrap: nowrap;
309
+ .pf-v6-c-label.pf-m-success {
310
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
311
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
312
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
313
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
314
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
315
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
316
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
317
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
318
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
319
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
566
320
  }
567
321
 
568
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
569
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
570
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
571
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
572
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
322
+ .pf-v6-c-label.pf-m-warning {
323
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
324
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
325
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
326
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
327
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
328
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
329
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
330
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
331
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
332
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
573
333
  }
574
334
 
575
- .pf-v6-c-menu-toggle__icon {
576
- flex-shrink: 0;
577
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
578
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
579
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
580
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
335
+ .pf-v6-c-label.pf-m-danger {
336
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
337
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
338
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
339
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
340
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
341
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
342
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
343
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
344
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
345
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
581
346
  }
582
347
 
583
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
584
- vertical-align: middle;
348
+ .pf-v6-c-label.pf-m-info {
349
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
350
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
351
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
352
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
353
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
354
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
355
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
356
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
357
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
358
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
585
359
  }
586
360
 
587
- .pf-v6-c-menu-toggle__controls {
588
- display: flex;
589
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
590
- align-items: center;
591
- justify-content: center;
592
- margin-inline-start: auto;
361
+ .pf-v6-c-label.pf-m-custom {
362
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
363
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
364
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
365
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
366
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
367
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
368
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
369
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
370
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
371
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
593
372
  }
594
373
 
595
- .pf-v6-c-menu-toggle__toggle-icon {
596
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
597
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
374
+ .pf-v6-c-label.pf-m-compact {
375
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
376
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
377
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
378
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
379
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
380
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
381
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
598
382
  }
599
383
 
600
- .pf-v6-c-menu-toggle__status-icon {
601
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
384
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
385
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
602
386
  }
603
387
 
604
- .pf-v6-c-text-input-group {
605
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
606
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
607
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
608
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
609
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
610
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
611
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
612
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
613
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
614
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
615
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
616
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
617
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
618
- --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));
619
- --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));
620
- --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));
621
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
622
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
623
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
624
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
625
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
626
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
627
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
628
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
629
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
630
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
631
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
632
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
633
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
634
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
635
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
636
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
637
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
638
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
639
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
640
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
641
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
642
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
643
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
644
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
645
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
646
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
647
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
648
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
649
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
650
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
651
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
652
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
653
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
654
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
655
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
388
+ .pf-v6-c-label.pf-m-outline {
389
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
390
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
391
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
392
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
393
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
394
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
395
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
396
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
397
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
398
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
656
399
  }
657
400
 
658
- .pf-v6-c-text-input-group {
659
- position: relative;
660
- display: flex;
661
- width: 100%;
662
- font-size: var(--pf-v6-c-text-input-group__FontSize);
663
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
664
- color: var(--pf-v6-c-text-input-group--Color, inherit);
665
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
666
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
667
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
668
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
669
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
401
+ .pf-v6-c-label.pf-m-editable {
402
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
403
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
670
404
  }
671
405
 
672
- .pf-v6-c-text-input-group::before {
673
- position: absolute;
674
- inset: 0;
675
- pointer-events: none;
676
- content: "";
677
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
678
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
679
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
680
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
681
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
406
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
407
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
408
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
682
409
  }
683
410
 
684
- .pf-v6-c-text-input-group.pf-m-disabled {
685
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
686
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
687
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
688
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
689
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
690
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
691
- pointer-events: none;
411
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
412
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
413
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
414
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
692
415
  }
693
416
 
694
- .pf-v6-c-text-input-group.pf-m-plain {
695
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
417
+ .pf-v6-c-label.pf-m-editable-active {
418
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
419
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
420
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
421
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
696
422
  }
697
423
 
698
- .pf-v6-c-text-input-group.pf-m-plain::before {
699
- border: 0;
424
+ .pf-v6-c-label.pf-m-overflow {
425
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
426
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
427
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
700
428
  }
701
429
 
702
- .pf-v6-c-text-input-group.pf-m-success {
703
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
704
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
705
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
430
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
431
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
432
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
433
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
706
434
  }
707
435
 
708
- .pf-v6-c-text-input-group.pf-m-warning {
709
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
710
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
711
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
436
+ .pf-v6-c-label.pf-m-add {
437
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
438
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
439
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
440
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
712
441
  }
713
442
 
714
- .pf-v6-c-text-input-group.pf-m-error {
715
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
716
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
717
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
443
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
444
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
445
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
446
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
447
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
718
448
  }
719
449
 
720
- @media (prefers-reduced-motion: no-preference) {
721
- .pf-v6-c-text-input-group.pf-m-error {
722
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
723
- animation-name: pf-v6-global-danger-jiggle-motion;
724
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
725
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
726
- animation-fill-mode: both;
727
- }
728
- }
729
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
730
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
731
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
732
- animation-name: pf-v6-global-fade-in;
733
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
734
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
450
+ .pf-v6-c-label.pf-m-clickable {
451
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
735
452
  }
736
453
 
737
- .pf-v6-c-text-input-group:hover {
738
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
454
+ .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) {
455
+ text-decoration-line: none;
739
456
  }
740
457
 
741
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
742
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
458
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
459
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
460
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
461
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
462
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
463
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
464
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
465
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
743
466
  }
744
467
 
745
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
746
- --pf-v6-c-text-input-group__text--Position: relative;
468
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
469
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
747
470
  }
748
471
 
749
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
750
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
751
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
472
+ .pf-v6-c-label.pf-m-disabled {
473
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
474
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
475
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
476
+ --pf-v6-c-label--BorderWidth: 0;
477
+ pointer-events: none;
752
478
  }
753
479
 
754
- .pf-v6-c-text-input-group__main {
755
- display: flex;
756
- flex: 1;
757
- flex-wrap: wrap;
758
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
759
- min-width: 0;
480
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
481
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
760
482
  }
761
483
 
762
- .pf-v6-c-text-input-group__main.pf-m-icon {
763
- --pf-v6-c-text-input-group__text--Position: relative;
764
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
484
+ .pf-v6-c-label,
485
+ .pf-v6-c-label__content {
765
486
  display: inline-flex;
766
487
  align-items: center;
767
488
  justify-content: center;
768
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
769
- }
770
-
771
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
772
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
773
- }
774
-
775
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
776
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
777
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
778
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
779
489
  }
780
490
 
781
- .pf-v6-c-text-input-group__text {
782
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
783
- display: inline-grid;
784
- flex: 1;
785
- grid-template-areas: "text-input";
786
- grid-template-columns: 1fr;
491
+ .pf-v6-c-label__text {
492
+ overflow: hidden;
493
+ text-overflow: ellipsis;
494
+ white-space: nowrap;
495
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
787
496
  }
788
497
 
789
- .pf-v6-c-text-input-group__icon {
790
- position: absolute;
791
- inset-block-start: 50%;
792
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
793
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
794
- color: var(--pf-v6-c-text-input-group__icon--Color);
795
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
498
+ .pf-v6-c-label__content {
499
+ gap: var(--pf-v6-c-label__content--Gap);
500
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
501
+ padding: 0;
502
+ overflow: hidden;
503
+ color: var(--pf-v6-c-label--Color);
504
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
505
+ background: transparent;
506
+ border-width: 0;
796
507
  }
797
508
 
798
- .pf-v6-c-text-input-group__icon.pf-m-status {
799
- inset-inline-start: auto;
800
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
801
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
509
+ .pf-v6-c-label__content::before {
510
+ position: absolute;
511
+ inset: 0;
512
+ z-index: -1;
513
+ pointer-events: none;
514
+ content: "";
515
+ background-color: var(--pf-v6-c-label--BackgroundColor);
516
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
517
+ border-radius: var(--pf-v6-c-label--BorderRadius);
802
518
  }
803
519
 
804
- .pf-v6-c-text-input-group__text-input {
520
+ input.pf-v6-c-label__content {
805
521
  overflow: hidden;
806
522
  text-overflow: ellipsis;
807
523
  white-space: nowrap;
808
- position: relative;
809
- width: 100%;
810
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
811
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
812
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
813
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
814
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
815
- color: var(--pf-v6-c-text-input-group__text-input--Color);
816
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
817
- border: 0;
818
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
819
- }
820
-
821
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
822
- grid-area: text-input;
823
- }
824
-
825
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
826
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
827
524
  }
828
525
 
829
- .pf-v6-c-text-input-group__text-input::placeholder {
830
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
526
+ .pf-v6-c-label__icon {
527
+ color: var(--pf-v6-c-label__icon--Color);
831
528
  }
832
529
 
833
- .pf-v6-c-text-input-group__utilities {
834
- display: flex;
835
- align-items: center;
836
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
837
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
530
+ .pf-v6-c-label__actions {
531
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
838
532
  }
839
533
 
840
- .pf-v6-c-text-input-group__utilities > * + * {
841
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
534
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
535
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
842
536
  }
843
537
 
844
- .pf-v6-c-text-input-group__group {
845
- display: flex;
538
+ .pf-v6-c-label__actions .pf-v6-c-button {
539
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
540
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
541
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
542
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
543
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
544
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
545
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
546
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
846
547
  }
847
548
 
848
549
  .pf-v6-c-badge {
@@ -920,950 +621,928 @@
920
621
  color: var(--pf-v6-c-badge__toggle-icon--Color);
921
622
  }
922
623
 
923
- .pf-v6-c-check {
924
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
925
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
926
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
927
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
928
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
929
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
930
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
931
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
932
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
933
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
934
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
935
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
936
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
937
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
624
+ .pf-v6-c-menu-toggle {
625
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
626
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
627
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
628
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
629
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
630
+ --pf-v6-c-menu-toggle--MinWidth: calc(1lh + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
631
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
632
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
633
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
634
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
635
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--control--default);
636
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
637
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
638
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
639
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
640
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
641
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
642
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
643
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
644
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
645
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
646
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
647
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
648
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
649
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
650
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
651
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
652
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
653
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
654
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
655
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
656
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
657
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
658
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
659
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
660
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
661
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
662
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
663
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
664
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
665
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
666
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
667
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
668
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
669
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
670
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
671
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
672
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
673
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--action--default);
674
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
675
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
676
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
677
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
678
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
679
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
680
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
681
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
682
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
683
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
684
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
685
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
686
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
687
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
688
+ --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
689
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
690
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
691
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--action--default);
692
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
693
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
694
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
695
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
696
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
697
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
698
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
699
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
700
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
701
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
702
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
703
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
704
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
705
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
706
+ --pf-v6-c-menu-toggle--m-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
707
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
708
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
709
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
710
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
711
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default);
712
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
713
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
714
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
715
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
716
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
717
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
718
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
719
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
720
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
721
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
722
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
723
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
724
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
725
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
726
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
727
+ --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));
728
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
729
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
730
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
731
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
732
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
733
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
734
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
735
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
736
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
737
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
738
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
739
+ --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
740
+ --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
741
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
742
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
743
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
744
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
745
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
746
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
747
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
748
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
749
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
750
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
751
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
752
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
753
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
754
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
755
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
756
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
757
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
758
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
759
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
760
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
761
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
762
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
763
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
764
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
765
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
766
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
767
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
768
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
769
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
770
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
771
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
772
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
773
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
774
+ }
775
+
776
+ .pf-v6-c-menu-toggle {
777
+ position: relative;
778
+ display: inline-flex;
779
+ gap: var(--pf-v6-c-menu-toggle--Gap);
780
+ align-items: center;
781
+ justify-content: center;
782
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth, revert);
783
+ max-width: 100%;
784
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
785
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
786
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
787
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
788
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
789
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
790
+ color: var(--pf-v6-c-menu-toggle--Color);
791
+ cursor: pointer;
792
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
793
+ border: 0;
794
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
795
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
796
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
797
+ }
798
+
799
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
800
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
801
+ }
802
+
803
+ .pf-v6-c-menu-toggle::before {
804
+ position: absolute;
805
+ inset-block-start: 0;
806
+ inset-block-end: 0;
807
+ inset-inline-start: 0;
808
+ inset-inline-end: 0;
809
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
810
+ pointer-events: none;
811
+ content: "";
812
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
813
+ transition: inherit;
938
814
  }
939
815
 
940
- .pf-v6-c-check {
941
- display: grid;
942
- grid-template-columns: auto 1fr;
943
- grid-gap: var(--pf-v6-c-check--GridGap);
944
- accent-color: var(--pf-v6-c-check--AccentColor);
816
+ .pf-v6-c-menu-toggle.pf-m-primary {
817
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
818
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
819
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
820
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
821
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
822
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
823
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
824
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
825
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
826
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
827
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
828
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
829
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
830
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
831
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
832
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
833
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
945
834
  }
946
835
 
947
- .pf-v6-c-check.pf-m-standalone {
948
- display: inline-grid;
949
- grid-template-columns: auto;
950
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
836
+ .pf-v6-c-menu-toggle.pf-m-secondary {
837
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
838
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
839
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
840
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
841
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
842
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
843
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
844
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
845
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
846
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
847
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
848
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
849
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
850
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
851
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
852
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
853
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
951
854
  }
952
855
 
953
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
954
- align-self: center;
955
- transform: none;
856
+ .pf-v6-c-menu-toggle.pf-m-full-height {
857
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
858
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
859
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
860
+ align-items: center;
861
+ height: 100%;
956
862
  }
957
863
 
958
- .pf-v6-c-check__input {
959
- align-self: start;
960
- font-size: var(--pf-v6-c-check__label--FontSize);
961
- line-height: var(--pf-v6-c-check__label--LineHeight);
962
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
864
+ .pf-v6-c-menu-toggle.pf-m-full-width {
865
+ width: 100%;
963
866
  }
964
867
 
965
- .pf-v6-c-check__label {
966
- font-size: var(--pf-v6-c-check__label--FontSize);
967
- font-weight: var(--pf-v6-c-check__label--FontWeight);
968
- line-height: var(--pf-v6-c-check__label--LineHeight);
969
- color: var(--pf-v6-c-check__label--Color);
868
+ .pf-v6-c-menu-toggle.pf-m-form {
869
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-form--BorderRadius);
970
870
  }
971
871
 
972
- .pf-v6-c-check__description {
973
- grid-column: 2;
974
- font-size: var(--pf-v6-c-check__description--FontSize);
975
- color: var(--pf-v6-c-check__description--Color);
872
+ .pf-v6-c-menu-toggle.pf-m-plain {
873
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
874
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
875
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
876
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
877
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
878
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
879
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
880
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
881
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
882
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
883
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
884
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
885
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
886
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
887
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
888
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
976
889
  }
977
890
 
978
- .pf-v6-c-check__body {
979
- grid-column: 2;
891
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
892
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
980
893
  }
981
894
 
982
- .pf-v6-c-check__label,
983
- .pf-v6-c-check__input {
984
- justify-self: start;
895
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
896
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
897
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
985
898
  }
986
899
 
987
- label.pf-v6-c-check, .pf-v6-c-check__label,
988
- .pf-v6-c-check__input {
989
- cursor: pointer;
900
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
901
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
902
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
903
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
904
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
905
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
906
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
907
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
908
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
909
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
910
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
990
911
  }
991
912
 
992
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
993
- .pf-v6-c-check__input:disabled,
994
- .pf-v6-c-check__input.pf-m-disabled {
995
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
996
- cursor: not-allowed;
913
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
914
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
915
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
916
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
917
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
918
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
919
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
997
920
  }
998
921
 
999
- .pf-v6-c-check__label-required {
1000
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1001
- font-size: var(--pf-v6-c-check__label-required--FontSize);
1002
- color: var(--pf-v6-c-check__label-required--Color);
922
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
923
+ border: 0;
1003
924
  }
1004
925
 
1005
- .pf-v6-c-divider {
1006
- --pf-v6-c-divider--Display: flex;
1007
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1008
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1009
- --pf-v6-c-divider--before--FlexBasis: 100%;
926
+ .pf-v6-c-menu-toggle.pf-m-small {
927
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
928
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
929
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
930
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
931
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
932
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
933
+ --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);
934
+ --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);
1010
935
  }
1011
936
 
1012
- .pf-v6-c-divider {
1013
- flex-direction: row;
1014
- width: 100%;
1015
- height: var(--pf-v6-c-divider--Size);
1016
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1017
- --pf-v6-hidden-visible--hidden--Display: none;
1018
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1019
- display: var(--pf-v6-hidden-visible--Display);
937
+ .pf-v6-c-menu-toggle.pf-m-success {
938
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
939
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
1020
940
  }
1021
941
 
1022
- .pf-v6-c-divider.pf-m-hidden {
1023
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
942
+ .pf-v6-c-menu-toggle.pf-m-warning {
943
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
944
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
1024
945
  }
1025
946
 
1026
- @media screen and (min-width: 36rem) {
1027
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1028
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1029
- }
1030
- .pf-v6-c-divider.pf-m-visible-on-sm {
1031
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1032
- }
947
+ .pf-v6-c-menu-toggle.pf-m-danger {
948
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
949
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
1033
950
  }
1034
- @media screen and (min-width: 48rem) {
1035
- .pf-v6-c-divider.pf-m-hidden-on-md {
1036
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1037
- }
1038
- .pf-v6-c-divider.pf-m-visible-on-md {
1039
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
951
+
952
+ @media screen and (prefers-reduced-motion: no-preference) {
953
+ .pf-v6-c-menu-toggle.pf-m-danger {
954
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
955
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
956
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
957
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
958
+ animation-fill-mode: both;
1040
959
  }
1041
960
  }
1042
- @media screen and (min-width: 62rem) {
1043
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1044
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1045
- }
1046
- .pf-v6-c-divider.pf-m-visible-on-lg {
1047
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1048
- }
961
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
962
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
963
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
964
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
1049
965
  }
1050
- @media screen and (min-width: 75rem) {
1051
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1052
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
966
+
967
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
968
+ from {
969
+ opacity: 0;
1053
970
  }
1054
- .pf-v6-c-divider.pf-m-visible-on-xl {
1055
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
971
+ to {
972
+ opacity: 1;
1056
973
  }
1057
974
  }
1058
- @media screen and (min-width: 90.625rem) {
1059
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1060
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1061
- }
1062
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1063
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1064
- }
975
+ .pf-v6-c-menu-toggle.pf-m-settings {
976
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
977
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
978
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
979
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
980
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
981
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
982
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
1065
983
  }
1066
- .pf-v6-c-divider {
1067
- flex-shrink: 0;
1068
- align-items: stretch;
1069
- align-self: stretch;
1070
- justify-content: center;
1071
- border: 0;
984
+
985
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
986
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
1072
987
  }
1073
988
 
1074
- .pf-v6-c-divider::before {
1075
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1076
- content: "";
1077
- background-color: var(--pf-v6-c-divider--Color);
1078
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
1079
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
989
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
990
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
991
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
992
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
993
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
994
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
995
+ }
996
+
997
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
998
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
999
+ pointer-events: none;
1080
1000
  }
1081
1001
 
1082
- .pf-v6-c-divider.pf-m-horizontal {
1083
- flex-direction: row;
1002
+ .pf-v6-c-menu-toggle.pf-m-docked {
1003
+ justify-content: flex-start;
1084
1004
  width: 100%;
1085
- height: var(--pf-v6-c-divider--Size);
1086
1005
  }
1087
1006
 
1088
- .pf-v6-c-divider.pf-m-vertical {
1089
- flex-direction: column;
1090
- width: var(--pf-v6-c-divider--Size);
1091
- height: inherit;
1007
+ @media (min-width: 62rem) {
1008
+ .pf-v6-c-menu-toggle.pf-m-docked {
1009
+ justify-content: center;
1010
+ width: auto;
1011
+ }
1012
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
1013
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
1014
+ display: none;
1015
+ }
1092
1016
  }
1093
-
1094
- .pf-v6-c-divider.pf-m-inset-none {
1095
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1017
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked, .pf-v6-c-menu-toggle.pf-m-text-expanded {
1018
+ justify-content: flex-start;
1019
+ width: 100%;
1096
1020
  }
1097
1021
 
1098
- .pf-v6-c-divider.pf-m-inset-xs {
1099
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1022
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
1023
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
1024
+ .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
1025
+ display: revert;
1100
1026
  }
1101
1027
 
1102
- .pf-v6-c-divider.pf-m-inset-sm {
1103
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1028
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
1029
+ syntax: "<length>";
1030
+ inherits: false;
1031
+ initial-value: 0;
1104
1032
  }
1105
-
1106
- .pf-v6-c-divider.pf-m-inset-md {
1107
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1033
+ @media (prefers-reduced-motion: no-preference) {
1034
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
1035
+ 33% {
1036
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
1037
+ }
1038
+ 66% {
1039
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
1040
+ }
1041
+ }
1108
1042
  }
1109
-
1110
- .pf-v6-c-divider.pf-m-inset-lg {
1111
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1043
+ .pf-v6-c-menu-toggle.pf-m-split-button {
1044
+ --pf-v6-c-menu-toggle--Gap: 0;
1045
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1046
+ padding: 0;
1112
1047
  }
1113
1048
 
1114
- .pf-v6-c-divider.pf-m-inset-xl {
1115
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1049
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
1050
+ position: relative;
1051
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1052
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1053
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1054
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1116
1055
  }
1117
1056
 
1118
- .pf-v6-c-divider.pf-m-inset-2xl {
1119
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1057
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1058
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1059
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1120
1060
  }
1121
1061
 
1122
- .pf-v6-c-divider.pf-m-inset-3xl {
1123
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1062
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1063
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1064
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1124
1065
  }
1125
1066
 
1126
- @media (min-width: 36rem) {
1127
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1128
- flex-direction: row;
1129
- width: 100%;
1130
- height: var(--pf-v6-c-divider--Size);
1131
- }
1132
- }
1133
- @media (min-width: 36rem) {
1134
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1135
- flex-direction: column;
1136
- width: var(--pf-v6-c-divider--Size);
1137
- height: inherit;
1138
- }
1139
- }
1140
- @media (min-width: 36rem) {
1141
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1142
- --pf-v6-c-divider--before--FlexBasis: 100%;
1143
- }
1144
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1145
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1146
- }
1147
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1148
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1149
- }
1150
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
1151
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1152
- }
1153
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1154
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1155
- }
1156
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1157
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1158
- }
1159
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1160
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1161
- }
1162
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1163
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1164
- }
1165
- }
1166
- @media (min-width: 48rem) {
1167
- .pf-v6-c-divider.pf-m-horizontal-on-md {
1168
- flex-direction: row;
1169
- width: 100%;
1170
- height: var(--pf-v6-c-divider--Size);
1171
- }
1067
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1068
+ --pf-v6-c-check__label--Color: currentcolor;
1069
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
1070
+ align-items: center;
1071
+ align-self: stretch;
1172
1072
  }
1173
- @media (min-width: 48rem) {
1174
- .pf-v6-c-divider.pf-m-vertical-on-md {
1175
- flex-direction: column;
1176
- width: var(--pf-v6-c-divider--Size);
1177
- height: inherit;
1178
- }
1073
+
1074
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1075
+ --pf-v6-c-check__input--TranslateY: 0;
1076
+ align-self: center;
1179
1077
  }
1180
- @media (min-width: 48rem) {
1181
- .pf-v6-c-divider.pf-m-inset-none-on-md {
1182
- --pf-v6-c-divider--before--FlexBasis: 100%;
1183
- }
1184
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
1185
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1186
- }
1187
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
1188
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1189
- }
1190
- .pf-v6-c-divider.pf-m-inset-md-on-md {
1191
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1192
- }
1193
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
1194
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1195
- }
1196
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
1197
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1198
- }
1199
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1200
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1201
- }
1202
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1203
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1204
- }
1078
+
1079
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1080
+ 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);
1205
1081
  }
1206
- @media (min-width: 62rem) {
1207
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
1208
- flex-direction: row;
1209
- width: 100%;
1210
- height: var(--pf-v6-c-divider--Size);
1211
- }
1082
+
1083
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1084
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
1212
1085
  }
1213
- @media (min-width: 62rem) {
1214
- .pf-v6-c-divider.pf-m-vertical-on-lg {
1215
- flex-direction: column;
1216
- width: var(--pf-v6-c-divider--Size);
1217
- height: inherit;
1218
- }
1086
+
1087
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1088
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1089
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
1219
1090
  }
1220
- @media (min-width: 62rem) {
1221
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
1222
- --pf-v6-c-divider--before--FlexBasis: 100%;
1223
- }
1224
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1225
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1226
- }
1227
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1228
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1229
- }
1230
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
1231
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1232
- }
1233
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1234
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1235
- }
1236
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1237
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1238
- }
1239
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1240
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1241
- }
1242
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1243
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1244
- }
1091
+
1092
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1093
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1094
+ --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);
1245
1095
  }
1246
- @media (min-width: 75rem) {
1247
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
1248
- flex-direction: row;
1249
- width: 100%;
1250
- height: var(--pf-v6-c-divider--Size);
1251
- }
1096
+
1097
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1098
+ --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);
1252
1099
  }
1253
- @media (min-width: 75rem) {
1254
- .pf-v6-c-divider.pf-m-vertical-on-xl {
1255
- flex-direction: column;
1256
- width: var(--pf-v6-c-divider--Size);
1257
- height: inherit;
1258
- }
1100
+
1101
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1102
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
1259
1103
  }
1260
- @media (min-width: 75rem) {
1261
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
1262
- --pf-v6-c-divider--before--FlexBasis: 100%;
1263
- }
1264
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1265
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1266
- }
1267
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1268
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1269
- }
1270
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
1271
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1272
- }
1273
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1274
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1275
- }
1276
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1277
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1278
- }
1279
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1280
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1281
- }
1282
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1283
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1284
- }
1104
+
1105
+ .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,
1106
+ .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,
1107
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1108
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
1285
1109
  }
1286
- @media (min-width: 90.625rem) {
1287
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1288
- flex-direction: row;
1289
- width: 100%;
1290
- height: var(--pf-v6-c-divider--Size);
1291
- }
1110
+
1111
+ .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,
1112
+ .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,
1113
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1114
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
1292
1115
  }
1293
- @media (min-width: 90.625rem) {
1294
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
1295
- flex-direction: column;
1296
- width: var(--pf-v6-c-divider--Size);
1297
- height: inherit;
1298
- }
1116
+
1117
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1118
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
1299
1119
  }
1300
- @media (min-width: 90.625rem) {
1301
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1302
- --pf-v6-c-divider--before--FlexBasis: 100%;
1303
- }
1304
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1305
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1306
- }
1307
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1308
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1309
- }
1310
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1311
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1312
- }
1313
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1314
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1315
- }
1316
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1317
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1318
- }
1319
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1320
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1321
- }
1322
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1323
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1324
- }
1120
+
1121
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1122
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1123
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1124
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
1325
1125
  }
1326
- .pf-v6-c-label {
1327
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1328
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1329
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1330
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1331
- --pf-v6-c-label--MaxWidth: 100%;
1332
- --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
1333
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1334
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
1335
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1336
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1337
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1338
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1339
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1340
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1341
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1342
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
1343
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
1344
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
1345
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
1346
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
1347
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1348
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
1349
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
1350
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
1351
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
1352
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
1353
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
1354
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
1355
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
1356
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
1357
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
1358
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
1359
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
1360
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
1361
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
1362
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
1363
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
1364
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1365
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1366
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1367
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1368
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1369
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1370
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1371
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1372
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1373
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1374
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1375
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1376
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1377
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1378
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1379
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1380
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1381
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1382
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1383
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1384
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1385
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1386
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1387
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1388
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1389
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1390
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1391
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1392
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1393
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1394
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1395
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1396
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1397
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1398
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1399
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1400
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1401
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1402
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1403
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1404
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1405
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1406
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1407
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1408
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1409
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1410
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1411
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1412
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1413
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1414
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1415
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1416
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1417
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1418
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1419
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1420
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1421
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1422
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1423
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1424
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1425
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1426
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1427
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1428
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1429
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1430
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1431
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1432
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1433
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1434
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1435
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1436
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1437
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1438
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1439
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1440
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1441
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1442
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1443
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1444
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1445
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1446
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1447
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1448
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1449
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1450
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1451
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1452
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1453
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1454
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1455
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1456
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1457
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1458
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1459
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1460
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1461
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1462
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1463
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1464
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1465
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1466
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1467
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1468
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1469
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1470
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1471
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1472
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1473
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1474
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1475
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1476
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1477
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1478
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1479
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
1480
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1481
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1482
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1483
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1484
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1485
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1486
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1487
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1488
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1489
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1490
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1491
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1492
- --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
1493
- --pf-v6-c-label__content--MaxWidth: 100%;
1494
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1495
- --pf-v6-c-label__content--Cursor: initial;
1496
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1497
- --pf-v6-c-label__text--MaxWidth: 100%;
1498
- --pf-v6-c-label__actions--MarginInlineEnd: 0;
1499
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1500
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1501
- --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
1502
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
1503
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
1504
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
1505
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
1506
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
1507
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1508
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1509
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1510
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1511
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1512
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1513
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
1514
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1515
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1516
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1517
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1518
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1519
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1520
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1521
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1126
+
1127
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1128
+ content: none;
1129
+ }
1130
+
1131
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
1132
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1133
+ --pf-v6-c-menu-toggle--Gap: 0;
1134
+ align-items: stretch;
1135
+ padding: 0;
1522
1136
  }
1523
1137
 
1524
- .pf-v6-c-label {
1525
- position: relative;
1526
- gap: var(--pf-v6-c-label--Gap);
1527
- min-width: var(--pf-v6-c-label--MinWidth);
1528
- max-width: var(--pf-v6-c-label--MaxWidth);
1529
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1530
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1531
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1532
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1533
- font-size: var(--pf-v6-c-label--FontSize);
1534
- white-space: nowrap;
1535
- background: transparent;
1536
- isolation: isolate;
1138
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1139
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1140
+ }
1141
+
1142
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1143
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1144
+ display: flex;
1145
+ align-items: stretch;
1146
+ }
1147
+
1148
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1149
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1150
+ flex: 1;
1151
+ }
1152
+
1153
+ .pf-v6-c-menu-toggle__button {
1154
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
1155
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1156
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1157
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1158
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1159
+ color: inherit;
1160
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1537
1161
  border: 0;
1538
- border-radius: var(--pf-v6-c-label--BorderRadius);
1539
1162
  }
1540
1163
 
1541
- .pf-v6-c-label.pf-m-blue {
1542
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1543
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1544
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1545
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1546
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1547
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1548
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1549
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1164
+ .pf-v6-c-menu-toggle__button.pf-m-text {
1165
+ display: inline-flex;
1166
+ align-items: baseline;
1550
1167
  }
1551
1168
 
1552
- .pf-v6-c-label.pf-m-red {
1553
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1554
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1555
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1556
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1557
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1558
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1559
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1560
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1169
+ .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) {
1170
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1171
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
1561
1172
  }
1562
1173
 
1563
- .pf-v6-c-label.pf-m-orange {
1564
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1565
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1566
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1567
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1568
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1569
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1570
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1571
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1174
+ .pf-v6-c-menu-toggle__text {
1175
+ overflow: hidden;
1176
+ text-overflow: ellipsis;
1177
+ white-space: nowrap;
1178
+ min-width: 0;
1572
1179
  }
1573
1180
 
1574
- .pf-v6-c-label.pf-m-orangered {
1575
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1576
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1577
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1578
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1579
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1580
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1581
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1582
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1181
+ .pf-v6-c-menu-toggle__count {
1182
+ display: flex;
1183
+ flex-wrap: nowrap;
1583
1184
  }
1584
1185
 
1585
- .pf-v6-c-label.pf-m-yellow {
1586
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1587
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1588
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1589
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1590
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1591
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1592
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1593
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1186
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1187
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1188
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
1189
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1190
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1594
1191
  }
1595
1192
 
1596
- .pf-v6-c-label.pf-m-green {
1597
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1598
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1599
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1600
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1601
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1602
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1603
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1604
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1193
+ .pf-v6-c-menu-toggle__icon {
1194
+ flex-shrink: 0;
1195
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
1196
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
1197
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
1198
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
1605
1199
  }
1606
1200
 
1607
- .pf-v6-c-label.pf-m-teal {
1608
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1609
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1610
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1611
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1612
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1613
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1614
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1615
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1201
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
1202
+ vertical-align: middle;
1203
+ }
1204
+
1205
+ .pf-v6-c-menu-toggle__controls {
1206
+ display: flex;
1207
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1208
+ align-items: center;
1209
+ justify-content: center;
1210
+ margin-inline-start: auto;
1211
+ }
1212
+
1213
+ .pf-v6-c-menu-toggle__toggle-icon {
1214
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1215
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1216
+ }
1217
+
1218
+ .pf-v6-c-menu-toggle__status-icon {
1219
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1220
+ }
1221
+
1222
+ .pf-v6-c-text-input-group {
1223
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1224
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
1225
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1226
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1227
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1228
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1229
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1230
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1231
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1232
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1233
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1234
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1235
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1236
+ --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));
1237
+ --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));
1238
+ --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));
1239
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1240
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1241
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
1242
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1243
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1244
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1245
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1246
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1247
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1248
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1249
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1250
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1251
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1252
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1253
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1254
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1255
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
1256
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1257
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1258
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1259
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1260
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1261
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1262
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1263
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1264
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1265
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1266
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1267
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1268
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1269
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1270
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1271
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1272
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1273
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1274
+ }
1275
+
1276
+ .pf-v6-c-text-input-group {
1277
+ position: relative;
1278
+ display: flex;
1279
+ width: 100%;
1280
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
1281
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
1282
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
1283
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1284
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1285
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1286
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1287
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1288
+ }
1289
+
1290
+ .pf-v6-c-text-input-group::before {
1291
+ position: absolute;
1292
+ inset: 0;
1293
+ pointer-events: none;
1294
+ content: "";
1295
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1296
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1297
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1298
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1299
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1300
+ }
1301
+
1302
+ .pf-v6-c-text-input-group.pf-m-disabled {
1303
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1304
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1305
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1306
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1307
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1308
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1309
+ pointer-events: none;
1310
+ }
1311
+
1312
+ .pf-v6-c-text-input-group.pf-m-plain {
1313
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
1314
+ }
1315
+
1316
+ .pf-v6-c-text-input-group.pf-m-plain::before {
1317
+ border: 0;
1318
+ }
1319
+
1320
+ .pf-v6-c-text-input-group.pf-m-success {
1321
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1322
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1323
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1324
+ }
1325
+
1326
+ .pf-v6-c-text-input-group.pf-m-warning {
1327
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1328
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1329
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1616
1330
  }
1617
1331
 
1618
- .pf-v6-c-label.pf-m-purple {
1619
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1620
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1621
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1622
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1623
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1624
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1625
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1626
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1332
+ .pf-v6-c-text-input-group.pf-m-error {
1333
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1334
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1335
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1627
1336
  }
1628
1337
 
1629
- .pf-v6-c-label.pf-m-success {
1630
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1631
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1632
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1633
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1634
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1635
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1636
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1637
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1638
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1639
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1338
+ @media (prefers-reduced-motion: no-preference) {
1339
+ .pf-v6-c-text-input-group.pf-m-error {
1340
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1341
+ animation-name: pf-v6-global-danger-jiggle-motion;
1342
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1343
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1344
+ animation-fill-mode: both;
1345
+ }
1640
1346
  }
1641
-
1642
- .pf-v6-c-label.pf-m-warning {
1643
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1644
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1645
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1646
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1647
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1648
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1649
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1650
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1651
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1652
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
1347
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1348
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1349
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1350
+ animation-name: pf-v6-global-fade-in;
1351
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1352
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1653
1353
  }
1654
1354
 
1655
- .pf-v6-c-label.pf-m-danger {
1656
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1657
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1658
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1659
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1660
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1661
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1662
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1663
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1664
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1665
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
1355
+ .pf-v6-c-text-input-group:hover {
1356
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1666
1357
  }
1667
1358
 
1668
- .pf-v6-c-label.pf-m-info {
1669
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1670
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1671
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1672
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1673
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1674
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1675
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1676
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1677
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1678
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
1359
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1360
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1679
1361
  }
1680
1362
 
1681
- .pf-v6-c-label.pf-m-custom {
1682
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1683
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1684
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1685
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1686
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1687
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1688
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1689
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1690
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1691
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1363
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1364
+ --pf-v6-c-text-input-group__text--Position: relative;
1692
1365
  }
1693
1366
 
1694
- .pf-v6-c-label.pf-m-compact {
1695
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1696
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1697
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1698
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1699
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1700
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1701
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1367
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1368
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1369
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1702
1370
  }
1703
1371
 
1704
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1705
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1372
+ .pf-v6-c-text-input-group__main {
1373
+ display: flex;
1374
+ flex: 1;
1375
+ flex-wrap: wrap;
1376
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1377
+ min-width: 0;
1706
1378
  }
1707
1379
 
1708
- .pf-v6-c-label.pf-m-outline {
1709
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1710
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1711
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1712
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1713
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1714
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1715
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1716
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1717
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1718
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1380
+ .pf-v6-c-text-input-group__main.pf-m-icon {
1381
+ --pf-v6-c-text-input-group__text--Position: relative;
1382
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1383
+ display: inline-flex;
1384
+ align-items: center;
1385
+ justify-content: center;
1386
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1719
1387
  }
1720
1388
 
1721
- .pf-v6-c-label.pf-m-editable {
1722
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1723
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1389
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1390
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1724
1391
  }
1725
1392
 
1726
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1727
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1728
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1393
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1394
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1395
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1396
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1729
1397
  }
1730
1398
 
1731
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1732
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1733
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1734
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1399
+ .pf-v6-c-text-input-group__text {
1400
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
1401
+ display: inline-grid;
1402
+ flex: 1;
1403
+ grid-template-areas: "text-input";
1404
+ grid-template-columns: 1fr;
1735
1405
  }
1736
1406
 
1737
- .pf-v6-c-label.pf-m-editable-active {
1738
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1739
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1740
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1741
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1407
+ .pf-v6-c-text-input-group__icon {
1408
+ position: absolute;
1409
+ inset-block-start: 50%;
1410
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1411
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1412
+ color: var(--pf-v6-c-text-input-group__icon--Color);
1413
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1742
1414
  }
1743
1415
 
1744
- .pf-v6-c-label.pf-m-overflow {
1745
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1746
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1747
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1416
+ .pf-v6-c-text-input-group__icon.pf-m-status {
1417
+ inset-inline-start: auto;
1418
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1419
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1748
1420
  }
1749
1421
 
1750
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1751
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1752
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1753
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1422
+ .pf-v6-c-text-input-group__text-input {
1423
+ overflow: hidden;
1424
+ text-overflow: ellipsis;
1425
+ white-space: nowrap;
1426
+ position: relative;
1427
+ width: 100%;
1428
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1429
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1430
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1431
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1432
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1433
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
1434
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1435
+ border: 0;
1436
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1754
1437
  }
1755
1438
 
1756
- .pf-v6-c-label.pf-m-add {
1757
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1758
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1759
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1760
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1439
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1440
+ grid-area: text-input;
1761
1441
  }
1762
1442
 
1763
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1764
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1765
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1766
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1767
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1443
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
1444
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1768
1445
  }
1769
1446
 
1770
- .pf-v6-c-label.pf-m-clickable {
1771
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1447
+ .pf-v6-c-text-input-group__text-input::placeholder {
1448
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1772
1449
  }
1773
1450
 
1774
- .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) {
1775
- text-decoration-line: none;
1451
+ .pf-v6-c-text-input-group__utilities {
1452
+ display: flex;
1453
+ align-items: center;
1454
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1455
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1776
1456
  }
1777
1457
 
1778
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1779
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1780
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1781
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1782
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1783
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1784
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1785
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1458
+ .pf-v6-c-text-input-group__utilities > * + * {
1459
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1786
1460
  }
1787
1461
 
1788
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1789
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1462
+ .pf-v6-c-text-input-group__group {
1463
+ display: flex;
1790
1464
  }
1791
1465
 
1792
- .pf-v6-c-label.pf-m-disabled {
1793
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1794
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1795
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1796
- --pf-v6-c-label--BorderWidth: 0;
1797
- pointer-events: none;
1466
+ .pf-v6-c-check {
1467
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1468
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1469
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1470
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1471
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1472
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1473
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1474
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1475
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1476
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1477
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1478
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1479
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1480
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1798
1481
  }
1799
1482
 
1800
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1801
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1483
+ .pf-v6-c-check {
1484
+ display: grid;
1485
+ grid-template-columns: auto 1fr;
1486
+ grid-gap: var(--pf-v6-c-check--GridGap);
1487
+ accent-color: var(--pf-v6-c-check--AccentColor);
1488
+ }
1489
+
1490
+ .pf-v6-c-check.pf-m-standalone {
1491
+ display: inline-grid;
1492
+ grid-template-columns: auto;
1493
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1802
1494
  }
1803
1495
 
1804
- .pf-v6-c-label,
1805
- .pf-v6-c-label__content {
1806
- display: inline-flex;
1807
- align-items: center;
1808
- justify-content: center;
1496
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1497
+ align-self: center;
1498
+ transform: none;
1809
1499
  }
1810
1500
 
1811
- .pf-v6-c-label__text {
1812
- overflow: hidden;
1813
- text-overflow: ellipsis;
1814
- white-space: nowrap;
1815
- max-width: var(--pf-v6-c-label__text--MaxWidth);
1501
+ .pf-v6-c-check__input {
1502
+ align-self: start;
1503
+ font-size: var(--pf-v6-c-check__label--FontSize);
1504
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1505
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1816
1506
  }
1817
1507
 
1818
- .pf-v6-c-label__content {
1819
- gap: var(--pf-v6-c-label__content--Gap);
1820
- max-width: var(--pf-v6-c-label__content--MaxWidth);
1821
- padding: 0;
1822
- overflow: hidden;
1823
- color: var(--pf-v6-c-label--Color);
1824
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
1825
- background: transparent;
1826
- border-width: 0;
1508
+ .pf-v6-c-check__label {
1509
+ font-size: var(--pf-v6-c-check__label--FontSize);
1510
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
1511
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1512
+ color: var(--pf-v6-c-check__label--Color);
1827
1513
  }
1828
1514
 
1829
- .pf-v6-c-label__content::before {
1830
- position: absolute;
1831
- inset: 0;
1832
- z-index: -1;
1833
- pointer-events: none;
1834
- content: "";
1835
- background-color: var(--pf-v6-c-label--BackgroundColor);
1836
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1837
- border-radius: var(--pf-v6-c-label--BorderRadius);
1515
+ .pf-v6-c-check__description {
1516
+ grid-column: 2;
1517
+ font-size: var(--pf-v6-c-check__description--FontSize);
1518
+ color: var(--pf-v6-c-check__description--Color);
1838
1519
  }
1839
1520
 
1840
- input.pf-v6-c-label__content {
1841
- overflow: hidden;
1842
- text-overflow: ellipsis;
1843
- white-space: nowrap;
1521
+ .pf-v6-c-check__body {
1522
+ grid-column: 2;
1844
1523
  }
1845
1524
 
1846
- .pf-v6-c-label__icon {
1847
- color: var(--pf-v6-c-label__icon--Color);
1525
+ .pf-v6-c-check__label,
1526
+ .pf-v6-c-check__input {
1527
+ justify-self: start;
1848
1528
  }
1849
1529
 
1850
- .pf-v6-c-label__actions {
1851
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1530
+ label.pf-v6-c-check, .pf-v6-c-check__label,
1531
+ .pf-v6-c-check__input {
1532
+ cursor: pointer;
1852
1533
  }
1853
1534
 
1854
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1855
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1535
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1536
+ .pf-v6-c-check__input:disabled,
1537
+ .pf-v6-c-check__input.pf-m-disabled {
1538
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1539
+ cursor: not-allowed;
1856
1540
  }
1857
1541
 
1858
- .pf-v6-c-label__actions .pf-v6-c-button {
1859
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1860
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1861
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1862
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1863
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1864
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1865
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1866
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1542
+ .pf-v6-c-check__label-required {
1543
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1544
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
1545
+ color: var(--pf-v6-c-check__label-required--Color);
1867
1546
  }
1868
1547
 
1869
1548
  .pf-v6-c-label-group {
@@ -1905,123 +1584,444 @@ input.pf-v6-c-label__content {
1905
1584
  --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1906
1585
  --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1907
1586
  }
1908
-
1909
- .pf-v6-c-label-group {
1910
- display: inline-flex;
1911
- row-gap: var(--pf-v6-c-label-group--RowGap);
1912
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1913
- align-items: center;
1914
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1587
+
1588
+ .pf-v6-c-label-group {
1589
+ display: inline-flex;
1590
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1591
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1592
+ align-items: center;
1593
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1594
+ }
1595
+
1596
+ .pf-v6-c-label-group.pf-m-category {
1597
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1598
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1599
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1600
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1601
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1602
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1603
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1604
+ }
1605
+
1606
+ .pf-v6-c-label-group.pf-m-vertical {
1607
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1608
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1609
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1610
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1611
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1612
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1613
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1614
+ }
1615
+
1616
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1617
+ align-items: flex-start;
1618
+ }
1619
+
1620
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1621
+ flex-direction: column;
1622
+ align-items: flex-start;
1623
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1624
+ }
1625
+
1626
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1627
+ flex-direction: column;
1628
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1629
+ }
1630
+
1631
+ .pf-v6-c-label-group.pf-m-editable,
1632
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1633
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1634
+ display: flex;
1635
+ }
1636
+
1637
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1638
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1639
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1640
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1641
+ flex: 1;
1642
+ }
1643
+
1644
+ .pf-v6-c-label-group__main {
1645
+ display: flex;
1646
+ flex: 1;
1647
+ flex-wrap: wrap;
1648
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1649
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1650
+ align-items: baseline;
1651
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1652
+ }
1653
+
1654
+ .pf-v6-c-label-group__list {
1655
+ display: inline-flex;
1656
+ flex-wrap: wrap;
1657
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1658
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1659
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1660
+ }
1661
+
1662
+ .pf-v6-c-label-group__list-item {
1663
+ display: inline-flex;
1664
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1665
+ }
1666
+
1667
+ .pf-v6-c-label-group__label {
1668
+ overflow: hidden;
1669
+ text-overflow: ellipsis;
1670
+ white-space: nowrap;
1671
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1672
+ }
1673
+
1674
+ .pf-v6-c-label-group__close {
1675
+ display: flex;
1676
+ align-self: flex-start;
1677
+ }
1678
+
1679
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1680
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1681
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1682
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1683
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1684
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1685
+ }
1686
+
1687
+ .pf-v6-c-label-group__textarea {
1688
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1689
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1690
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1691
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1692
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1693
+ white-space: nowrap;
1694
+ resize: none;
1695
+ scrollbar-width: none;
1696
+ -ms-overflow-style: none;
1697
+ border: 0;
1698
+ }
1699
+
1700
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1701
+ display: none;
1702
+ }
1703
+
1704
+ .pf-v6-c-divider {
1705
+ --pf-v6-c-divider--Display: flex;
1706
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1707
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1708
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1709
+ }
1710
+
1711
+ .pf-v6-c-divider {
1712
+ flex-direction: row;
1713
+ width: 100%;
1714
+ height: var(--pf-v6-c-divider--Size);
1715
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1716
+ --pf-v6-hidden-visible--hidden--Display: none;
1717
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1718
+ display: var(--pf-v6-hidden-visible--Display);
1719
+ }
1720
+
1721
+ .pf-v6-c-divider.pf-m-hidden {
1722
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1723
+ }
1724
+
1725
+ @media screen and (min-width: 36rem) {
1726
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
1727
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1728
+ }
1729
+ .pf-v6-c-divider.pf-m-visible-on-sm {
1730
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1731
+ }
1732
+ }
1733
+ @media screen and (min-width: 48rem) {
1734
+ .pf-v6-c-divider.pf-m-hidden-on-md {
1735
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1736
+ }
1737
+ .pf-v6-c-divider.pf-m-visible-on-md {
1738
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1739
+ }
1740
+ }
1741
+ @media screen and (min-width: 62rem) {
1742
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
1743
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1744
+ }
1745
+ .pf-v6-c-divider.pf-m-visible-on-lg {
1746
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1747
+ }
1748
+ }
1749
+ @media screen and (min-width: 75rem) {
1750
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
1751
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1752
+ }
1753
+ .pf-v6-c-divider.pf-m-visible-on-xl {
1754
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1755
+ }
1756
+ }
1757
+ @media screen and (min-width: 90.625rem) {
1758
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
1759
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1760
+ }
1761
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
1762
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1763
+ }
1915
1764
  }
1916
-
1917
- .pf-v6-c-label-group.pf-m-category {
1918
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1919
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1920
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1921
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1922
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1923
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1924
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1765
+ .pf-v6-c-divider {
1766
+ flex-shrink: 0;
1767
+ align-items: stretch;
1768
+ align-self: stretch;
1769
+ justify-content: center;
1770
+ border: 0;
1925
1771
  }
1926
1772
 
1927
- .pf-v6-c-label-group.pf-m-vertical {
1928
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1929
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1930
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1931
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1932
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1933
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1934
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1773
+ .pf-v6-c-divider::before {
1774
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1775
+ content: "";
1776
+ background-color: var(--pf-v6-c-divider--Color);
1777
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
1778
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
1935
1779
  }
1936
1780
 
1937
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1938
- align-items: flex-start;
1781
+ .pf-v6-c-divider.pf-m-horizontal {
1782
+ flex-direction: row;
1783
+ width: 100%;
1784
+ height: var(--pf-v6-c-divider--Size);
1939
1785
  }
1940
1786
 
1941
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1787
+ .pf-v6-c-divider.pf-m-vertical {
1942
1788
  flex-direction: column;
1943
- align-items: flex-start;
1944
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1789
+ width: var(--pf-v6-c-divider--Size);
1790
+ height: inherit;
1945
1791
  }
1946
1792
 
1947
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1948
- flex-direction: column;
1949
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1793
+ .pf-v6-c-divider.pf-m-inset-none {
1794
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1950
1795
  }
1951
1796
 
1952
- .pf-v6-c-label-group.pf-m-editable,
1953
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1954
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1955
- display: flex;
1797
+ .pf-v6-c-divider.pf-m-inset-xs {
1798
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1956
1799
  }
1957
1800
 
1958
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1959
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1960
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1961
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1962
- flex: 1;
1801
+ .pf-v6-c-divider.pf-m-inset-sm {
1802
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1963
1803
  }
1964
1804
 
1965
- .pf-v6-c-label-group__main {
1966
- display: flex;
1967
- flex: 1;
1968
- flex-wrap: wrap;
1969
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1970
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1971
- align-items: baseline;
1972
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1805
+ .pf-v6-c-divider.pf-m-inset-md {
1806
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1973
1807
  }
1974
1808
 
1975
- .pf-v6-c-label-group__list {
1976
- display: inline-flex;
1977
- flex-wrap: wrap;
1978
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1979
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1980
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1809
+ .pf-v6-c-divider.pf-m-inset-lg {
1810
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1981
1811
  }
1982
1812
 
1983
- .pf-v6-c-label-group__list-item {
1984
- display: inline-flex;
1985
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1813
+ .pf-v6-c-divider.pf-m-inset-xl {
1814
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1986
1815
  }
1987
1816
 
1988
- .pf-v6-c-label-group__label {
1989
- overflow: hidden;
1990
- text-overflow: ellipsis;
1991
- white-space: nowrap;
1992
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1817
+ .pf-v6-c-divider.pf-m-inset-2xl {
1818
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1993
1819
  }
1994
1820
 
1995
- .pf-v6-c-label-group__close {
1996
- display: flex;
1997
- align-self: flex-start;
1821
+ .pf-v6-c-divider.pf-m-inset-3xl {
1822
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1823
+ }
1824
+
1825
+ @media (min-width: 36rem) {
1826
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
1827
+ flex-direction: row;
1828
+ width: 100%;
1829
+ height: var(--pf-v6-c-divider--Size);
1830
+ }
1831
+ }
1832
+ @media (min-width: 36rem) {
1833
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
1834
+ flex-direction: column;
1835
+ width: var(--pf-v6-c-divider--Size);
1836
+ height: inherit;
1837
+ }
1838
+ }
1839
+ @media (min-width: 36rem) {
1840
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
1841
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1842
+ }
1843
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1844
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1845
+ }
1846
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1847
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1848
+ }
1849
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
1850
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1851
+ }
1852
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1853
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1854
+ }
1855
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1856
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1857
+ }
1858
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1859
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1860
+ }
1861
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1862
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1863
+ }
1864
+ }
1865
+ @media (min-width: 48rem) {
1866
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
1867
+ flex-direction: row;
1868
+ width: 100%;
1869
+ height: var(--pf-v6-c-divider--Size);
1870
+ }
1871
+ }
1872
+ @media (min-width: 48rem) {
1873
+ .pf-v6-c-divider.pf-m-vertical-on-md {
1874
+ flex-direction: column;
1875
+ width: var(--pf-v6-c-divider--Size);
1876
+ height: inherit;
1877
+ }
1878
+ }
1879
+ @media (min-width: 48rem) {
1880
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
1881
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1882
+ }
1883
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
1884
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1885
+ }
1886
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
1887
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1888
+ }
1889
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
1890
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1891
+ }
1892
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
1893
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1894
+ }
1895
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
1896
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1897
+ }
1898
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1899
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1900
+ }
1901
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1902
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1903
+ }
1904
+ }
1905
+ @media (min-width: 62rem) {
1906
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
1907
+ flex-direction: row;
1908
+ width: 100%;
1909
+ height: var(--pf-v6-c-divider--Size);
1910
+ }
1911
+ }
1912
+ @media (min-width: 62rem) {
1913
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
1914
+ flex-direction: column;
1915
+ width: var(--pf-v6-c-divider--Size);
1916
+ height: inherit;
1917
+ }
1918
+ }
1919
+ @media (min-width: 62rem) {
1920
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
1921
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1922
+ }
1923
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1924
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1925
+ }
1926
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1927
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1928
+ }
1929
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
1930
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1931
+ }
1932
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1933
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1934
+ }
1935
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1936
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1937
+ }
1938
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1939
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1940
+ }
1941
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1942
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1943
+ }
1944
+ }
1945
+ @media (min-width: 75rem) {
1946
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
1947
+ flex-direction: row;
1948
+ width: 100%;
1949
+ height: var(--pf-v6-c-divider--Size);
1950
+ }
1951
+ }
1952
+ @media (min-width: 75rem) {
1953
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
1954
+ flex-direction: column;
1955
+ width: var(--pf-v6-c-divider--Size);
1956
+ height: inherit;
1957
+ }
1958
+ }
1959
+ @media (min-width: 75rem) {
1960
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
1961
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1962
+ }
1963
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1964
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1965
+ }
1966
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1967
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1968
+ }
1969
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
1970
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1971
+ }
1972
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1973
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1974
+ }
1975
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1976
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1977
+ }
1978
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1979
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1980
+ }
1981
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1982
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1983
+ }
1998
1984
  }
1999
-
2000
- .pf-v6-c-label-group__close .pf-v6-c-button {
2001
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2002
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2003
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2004
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2005
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1985
+ @media (min-width: 90.625rem) {
1986
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1987
+ flex-direction: row;
1988
+ width: 100%;
1989
+ height: var(--pf-v6-c-divider--Size);
1990
+ }
2006
1991
  }
2007
-
2008
- .pf-v6-c-label-group__textarea {
2009
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2010
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2011
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2012
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2013
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2014
- white-space: nowrap;
2015
- resize: none;
2016
- scrollbar-width: none;
2017
- -ms-overflow-style: none;
2018
- border: 0;
1992
+ @media (min-width: 90.625rem) {
1993
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
1994
+ flex-direction: column;
1995
+ width: var(--pf-v6-c-divider--Size);
1996
+ height: inherit;
1997
+ }
2019
1998
  }
2020
-
2021
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2022
- display: none;
1999
+ @media (min-width: 90.625rem) {
2000
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2001
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2002
+ }
2003
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2004
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2005
+ }
2006
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2007
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2008
+ }
2009
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2010
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2011
+ }
2012
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2013
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2014
+ }
2015
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2016
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2017
+ }
2018
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2019
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2020
+ }
2021
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2022
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2023
+ }
2023
2024
  }
2024
-
2025
2025
  .pf-v6-c-button {
2026
2026
  --pf-v6-c-button--Display: inline-flex;
2027
2027
  --pf-v6-c-button--AlignItems: baseline;
@@ -3746,6 +3746,97 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3746
3746
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3747
3747
  }
3748
3748
 
3749
+ .pf-v6-c-spinner {
3750
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3751
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3752
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3753
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3754
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3755
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3756
+ --pf-v6-c-spinner--StrokeWidth: 10;
3757
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3758
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3759
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3760
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3761
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3762
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3763
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3764
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3765
+ }
3766
+
3767
+ .pf-v6-c-spinner {
3768
+ width: var(--pf-v6-c-spinner--Width);
3769
+ height: var(--pf-v6-c-spinner--Height);
3770
+ overflow: hidden;
3771
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3772
+ }
3773
+
3774
+ .pf-v6-c-spinner.pf-m-inline {
3775
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3776
+ }
3777
+
3778
+ .pf-v6-c-spinner.pf-m-xs {
3779
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3780
+ --pf-v6-c-spinner--StrokeWidth: 15;
3781
+ }
3782
+
3783
+ .pf-v6-c-spinner.pf-m-sm {
3784
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3785
+ }
3786
+
3787
+ .pf-v6-c-spinner.pf-m-md {
3788
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3789
+ }
3790
+
3791
+ .pf-v6-c-spinner.pf-m-lg {
3792
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3793
+ }
3794
+
3795
+ .pf-v6-c-spinner.pf-m-xl {
3796
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3797
+ }
3798
+
3799
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
3800
+ --pf-v6-c-spinner--AnimationDuration: 0s;
3801
+ }
3802
+
3803
+ .pf-v6-c-spinner__path {
3804
+ width: 100%;
3805
+ height: 100%;
3806
+ stroke: var(--pf-v6-c-spinner--Color);
3807
+ stroke-dasharray: 283;
3808
+ stroke-dashoffset: 280;
3809
+ stroke-linecap: round;
3810
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3811
+ transform-origin: 50% 50%;
3812
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3813
+ }
3814
+
3815
+ @keyframes pf-v6-c-spinner-animation-rotate {
3816
+ 0% {
3817
+ transform: rotate(0deg);
3818
+ }
3819
+ 100% {
3820
+ transform: rotate(360deg);
3821
+ }
3822
+ }
3823
+ @keyframes pf-v6-c-spinner-animation-dash {
3824
+ 0% {
3825
+ stroke-dashoffset: 280;
3826
+ transform: rotate(0);
3827
+ }
3828
+ 15% {
3829
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3830
+ }
3831
+ 40% {
3832
+ stroke-dasharray: 220;
3833
+ stroke-dashoffset: 150;
3834
+ }
3835
+ 100% {
3836
+ stroke-dashoffset: 280;
3837
+ transform: rotate(720deg);
3838
+ }
3839
+ }
3749
3840
  .pf-v6-c-breadcrumb {
3750
3841
  --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3751
3842
  --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -3995,96 +4086,4 @@ button.pf-v6-c-breadcrumb__link {
3995
4086
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3996
4087
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3997
4088
  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));
3998
- }
3999
-
4000
- .pf-v6-c-spinner {
4001
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
4002
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
4003
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
4004
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
4005
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
4006
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
4007
- --pf-v6-c-spinner--StrokeWidth: 10;
4008
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
4009
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
4010
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
4011
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
4012
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
4013
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
4014
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
4015
- --pf-v6-c-spinner--m-inline--diameter: 1em;
4016
- }
4017
-
4018
- .pf-v6-c-spinner {
4019
- width: var(--pf-v6-c-spinner--Width);
4020
- height: var(--pf-v6-c-spinner--Height);
4021
- overflow: hidden;
4022
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
4023
- }
4024
-
4025
- .pf-v6-c-spinner.pf-m-inline {
4026
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
4027
- }
4028
-
4029
- .pf-v6-c-spinner.pf-m-xs {
4030
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
4031
- --pf-v6-c-spinner--StrokeWidth: 15;
4032
- }
4033
-
4034
- .pf-v6-c-spinner.pf-m-sm {
4035
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
4036
- }
4037
-
4038
- .pf-v6-c-spinner.pf-m-md {
4039
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
4040
- }
4041
-
4042
- .pf-v6-c-spinner.pf-m-lg {
4043
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
4044
- }
4045
-
4046
- .pf-v6-c-spinner.pf-m-xl {
4047
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
4048
- }
4049
-
4050
- .pf-v6-m-no-motion .pf-v6-c-spinner {
4051
- --pf-v6-c-spinner--AnimationDuration: 0s;
4052
- }
4053
-
4054
- .pf-v6-c-spinner__path {
4055
- width: 100%;
4056
- height: 100%;
4057
- stroke: var(--pf-v6-c-spinner--Color);
4058
- stroke-dasharray: 283;
4059
- stroke-dashoffset: 280;
4060
- stroke-linecap: round;
4061
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
4062
- transform-origin: 50% 50%;
4063
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
4064
- }
4065
-
4066
- @keyframes pf-v6-c-spinner-animation-rotate {
4067
- 0% {
4068
- transform: rotate(0deg);
4069
- }
4070
- 100% {
4071
- transform: rotate(360deg);
4072
- }
4073
- }
4074
- @keyframes pf-v6-c-spinner-animation-dash {
4075
- 0% {
4076
- stroke-dashoffset: 280;
4077
- transform: rotate(0);
4078
- }
4079
- 15% {
4080
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
4081
- }
4082
- 40% {
4083
- stroke-dasharray: 220;
4084
- stroke-dashoffset: 150;
4085
- }
4086
- 100% {
4087
- stroke-dashoffset: 280;
4088
- transform: rotate(720deg);
4089
- }
4090
4089
  }