@patternfly/react-templates 6.6.0-prerelease.6 → 6.6.0-prerelease.8

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 (9) hide show
  1. package/CHANGELOG.md +6 -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-nU3YyZ7I.css → output-HlTNW3fX.css} +1884 -1877
  6. package/dist/umd/react-templates.min.js +1 -1
  7. package/package.json +6 -6
  8. package/src/components/Dropdown/examples/DropdownTemplates.md +1 -1
  9. package/src/components/Dropdown/examples/SimpleDropdownExample.tsx +2 -2
package/dist/umd/assets/{output-nU3YyZ7I.css → output-HlTNW3fX.css} RENAMED
@@ -3,759 +3,629 @@
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;
6
+ .pf-v6-c-check {
7
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
8
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
9
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
10
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
11
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
12
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
13
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
14
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
15
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
16
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
17
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
18
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
19
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
20
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
156
21
  }
157
22
 
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);
23
+ .pf-v6-c-check {
24
+ display: grid;
25
+ grid-template-columns: auto 1fr;
26
+ gap: var(--pf-v6-c-check--GridGap);
27
+ accent-color: var(--pf-v6-c-check--AccentColor);
179
28
  }
180
29
 
181
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
182
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
30
+ .pf-v6-c-check.pf-m-standalone {
31
+ display: inline-grid;
32
+ grid-template-columns: auto;
33
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
183
34
  }
184
35
 
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;
36
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
37
+ align-self: center;
38
+ transform: none;
196
39
  }
197
40
 
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);
41
+ .pf-v6-c-check__input {
42
+ align-self: start;
43
+ font-size: var(--pf-v6-c-check__label--FontSize);
44
+ line-height: var(--pf-v6-c-check__label--LineHeight);
45
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
216
46
  }
217
47
 
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);
48
+ .pf-v6-c-check__label {
49
+ font-size: var(--pf-v6-c-check__label--FontSize);
50
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
51
+ line-height: var(--pf-v6-c-check__label--LineHeight);
52
+ color: var(--pf-v6-c-check__label--Color);
236
53
  }
237
54
 
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;
55
+ .pf-v6-c-check__description {
56
+ grid-column: 2;
57
+ font-size: var(--pf-v6-c-check__description--FontSize);
58
+ color: var(--pf-v6-c-check__description--Color);
459
59
  }
460
60
 
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);
61
+ .pf-v6-c-check__body {
62
+ grid-column: 2;
463
63
  }
464
64
 
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);
65
+ .pf-v6-c-check__label,
66
+ .pf-v6-c-check__input {
67
+ justify-self: start;
467
68
  }
468
69
 
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);
70
+ label.pf-v6-c-check, .pf-v6-c-check__label,
71
+ .pf-v6-c-check__input {
72
+ cursor: pointer;
472
73
  }
473
74
 
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);
75
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
76
+ .pf-v6-c-check__input:disabled,
77
+ .pf-v6-c-check__input.pf-m-disabled {
78
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
79
+ cursor: not-allowed;
477
80
  }
478
81
 
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);
82
+ .pf-v6-c-check__label-required {
83
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
84
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
85
+ color: var(--pf-v6-c-check__label-required--Color);
481
86
  }
482
87
 
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);
88
+ .pf-v6-c-label {
89
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
90
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
91
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
92
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
93
+ --pf-v6-c-label--MaxWidth: 100%;
94
+ --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
95
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
96
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
97
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
98
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
99
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
100
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
101
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
102
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
103
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
104
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
105
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
106
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
107
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
108
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
109
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
110
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
111
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
112
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
113
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
114
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
115
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
116
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
117
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
118
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
119
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
120
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
121
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
122
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
123
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
124
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
125
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
126
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
127
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
128
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
129
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
130
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
131
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
132
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
133
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
134
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
135
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
136
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
137
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
138
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
139
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
140
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
141
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
142
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
143
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
144
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
145
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
146
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
147
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
148
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
149
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
150
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
151
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
152
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
153
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
154
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
155
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
156
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
157
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
158
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
159
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
160
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
161
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
162
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
163
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
164
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
165
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
166
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
167
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
168
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
169
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
170
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
171
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
172
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
173
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
174
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
175
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
176
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
177
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
178
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
179
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
180
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
181
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
182
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
183
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
184
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
185
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
186
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
187
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
188
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
189
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
190
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
191
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
192
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
193
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
194
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
195
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
196
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
197
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
198
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
199
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
200
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
201
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
202
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
203
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
204
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
205
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
206
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
207
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
208
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
209
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
210
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
211
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
212
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
213
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
214
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
215
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
216
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
217
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
218
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
219
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
220
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
221
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
222
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
223
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
224
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
225
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
226
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
227
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
228
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
229
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
230
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
231
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
232
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
233
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
234
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
235
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
236
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
237
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
238
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
239
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
240
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
241
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
242
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
243
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
244
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
245
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
246
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
247
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
248
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
249
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
250
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
251
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
252
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
253
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
254
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
255
+ --pf-v6-c-label__content--MaxWidth: 100%;
256
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
257
+ --pf-v6-c-label__content--Cursor: initial;
258
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
259
+ --pf-v6-c-label__text--MaxWidth: 100%;
260
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
261
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
262
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
263
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
264
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
265
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
266
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
267
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
268
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
269
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
270
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
271
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
272
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
273
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
274
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
275
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
276
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
277
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
278
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
279
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
280
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
281
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
282
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
283
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
491
284
  }
492
285
 
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);
286
+ .pf-v6-c-label {
287
+ position: relative;
288
+ gap: var(--pf-v6-c-label--Gap);
289
+ min-width: var(--pf-v6-c-label--MinWidth);
290
+ max-width: var(--pf-v6-c-label--MaxWidth);
291
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
292
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
293
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
294
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
295
+ font-size: var(--pf-v6-c-label--FontSize);
296
+ white-space: nowrap;
297
+ background: transparent;
298
+ border: 0;
299
+ border-radius: var(--pf-v6-c-label--BorderRadius);
300
+ isolation: isolate;
497
301
  }
498
302
 
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);
303
+ .pf-v6-c-label.pf-m-blue {
304
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
305
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
306
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
307
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
308
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
309
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
310
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
311
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
501
312
  }
502
313
 
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);
314
+ .pf-v6-c-label.pf-m-red {
315
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
316
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
317
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
318
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
319
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
320
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
321
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
322
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
507
323
  }
508
324
 
509
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
510
- content: none;
325
+ .pf-v6-c-label.pf-m-orange {
326
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
327
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
328
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
329
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
330
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
331
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
332
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
333
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
511
334
  }
512
335
 
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;
336
+ .pf-v6-c-label.pf-m-orangered {
337
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
338
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
339
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
340
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
341
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
342
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
343
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
344
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
518
345
  }
519
346
 
520
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
521
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
347
+ .pf-v6-c-label.pf-m-yellow {
348
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
349
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
350
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
351
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
352
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
353
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
354
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
355
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
522
356
  }
523
357
 
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;
358
+ .pf-v6-c-label.pf-m-green {
359
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
360
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
361
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
362
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
363
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
364
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
365
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
366
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
528
367
  }
529
368
 
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;
369
+ .pf-v6-c-label.pf-m-teal {
370
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
371
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
372
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
373
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
374
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
375
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
376
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
377
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
533
378
  }
534
379
 
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;
380
+ .pf-v6-c-label.pf-m-purple {
381
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
382
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
383
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
384
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
385
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
386
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
387
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
388
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
544
389
  }
545
390
 
546
- .pf-v6-c-menu-toggle__button.pf-m-text {
547
- display: inline-flex;
548
- align-items: baseline;
391
+ .pf-v6-c-label.pf-m-success {
392
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
393
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
394
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
395
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
396
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
397
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
398
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
399
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
400
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
401
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
549
402
  }
550
403
 
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);
404
+ .pf-v6-c-label.pf-m-warning {
405
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
406
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
407
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
408
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
409
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
410
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
411
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
412
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
413
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
414
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
554
415
  }
555
416
 
556
- .pf-v6-c-menu-toggle__text {
557
- overflow: hidden;
558
- text-overflow: ellipsis;
559
- white-space: nowrap;
560
- min-width: 0;
417
+ .pf-v6-c-label.pf-m-danger {
418
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
419
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
420
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
421
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
422
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
423
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
424
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
425
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
426
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
427
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
561
428
  }
562
429
 
563
- .pf-v6-c-menu-toggle__count {
564
- display: flex;
565
- flex-wrap: nowrap;
430
+ .pf-v6-c-label.pf-m-info {
431
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
432
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
433
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
434
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
435
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
436
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
437
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
438
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
439
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
440
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
566
441
  }
567
442
 
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);
443
+ .pf-v6-c-label.pf-m-custom {
444
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
445
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
446
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
447
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
448
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
449
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
450
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
451
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
452
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
453
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
573
454
  }
574
455
 
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);
456
+ .pf-v6-c-label.pf-m-compact {
457
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
458
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
459
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
460
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
461
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
462
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
463
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
581
464
  }
582
465
 
583
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
584
- vertical-align: middle;
466
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
467
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
585
468
  }
586
469
 
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;
470
+ .pf-v6-c-label.pf-m-outline {
471
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
472
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
473
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
474
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
475
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
476
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
477
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
478
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
479
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
480
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
593
481
  }
594
482
 
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);
483
+ .pf-v6-c-label.pf-m-editable {
484
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
485
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
598
486
  }
599
487
 
600
- .pf-v6-c-menu-toggle__status-icon {
601
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
488
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
489
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
490
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
602
491
  }
603
492
 
604
- .pf-v6-c-check {
605
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
606
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
607
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
608
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
609
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
610
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
611
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
612
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
613
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
614
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
615
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
616
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
617
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
618
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
493
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
494
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
495
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
496
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
619
497
  }
620
498
 
621
- .pf-v6-c-check {
622
- display: grid;
623
- grid-template-columns: auto 1fr;
624
- grid-gap: var(--pf-v6-c-check--GridGap);
625
- accent-color: var(--pf-v6-c-check--AccentColor);
499
+ .pf-v6-c-label.pf-m-editable-active {
500
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
501
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
502
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
503
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
626
504
  }
627
505
 
628
- .pf-v6-c-check.pf-m-standalone {
629
- display: inline-grid;
630
- grid-template-columns: auto;
631
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
506
+ .pf-v6-c-label.pf-m-overflow {
507
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
508
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
509
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
632
510
  }
633
511
 
634
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
635
- align-self: center;
636
- transform: none;
512
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
513
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
514
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
515
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
637
516
  }
638
517
 
639
- .pf-v6-c-check__input {
640
- align-self: start;
641
- font-size: var(--pf-v6-c-check__label--FontSize);
642
- line-height: var(--pf-v6-c-check__label--LineHeight);
643
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
518
+ .pf-v6-c-label.pf-m-add {
519
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
520
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
521
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
522
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
644
523
  }
645
524
 
646
- .pf-v6-c-check__label {
647
- font-size: var(--pf-v6-c-check__label--FontSize);
648
- font-weight: var(--pf-v6-c-check__label--FontWeight);
649
- line-height: var(--pf-v6-c-check__label--LineHeight);
650
- color: var(--pf-v6-c-check__label--Color);
525
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
526
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
527
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
528
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
529
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
651
530
  }
652
531
 
653
- .pf-v6-c-check__description {
654
- grid-column: 2;
655
- font-size: var(--pf-v6-c-check__description--FontSize);
656
- color: var(--pf-v6-c-check__description--Color);
657
- }
532
+ .pf-v6-c-label.pf-m-clickable {
533
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
534
+ }
658
535
 
659
- .pf-v6-c-check__body {
660
- grid-column: 2;
536
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
537
+ text-decoration-line: none;
661
538
  }
662
539
 
663
- .pf-v6-c-check__label,
664
- .pf-v6-c-check__input {
665
- justify-self: start;
540
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
541
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
542
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
543
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
544
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
545
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
546
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
547
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
666
548
  }
667
549
 
668
- label.pf-v6-c-check, .pf-v6-c-check__label,
669
- .pf-v6-c-check__input {
670
- cursor: pointer;
550
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
551
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
671
552
  }
672
553
 
673
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
674
- .pf-v6-c-check__input:disabled,
675
- .pf-v6-c-check__input.pf-m-disabled {
676
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
677
- cursor: not-allowed;
554
+ .pf-v6-c-label.pf-m-disabled {
555
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
556
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
557
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
558
+ --pf-v6-c-label--BorderWidth: 0;
559
+ pointer-events: none;
678
560
  }
679
561
 
680
- .pf-v6-c-check__label-required {
681
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
682
- font-size: var(--pf-v6-c-check__label-required--FontSize);
683
- color: var(--pf-v6-c-check__label-required--Color);
562
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
563
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
684
564
  }
685
565
 
686
- .pf-v6-c-badge {
687
- --pf-v6-c-badge--BorderColor: transparent;
688
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
689
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
690
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
691
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
692
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
693
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
694
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
695
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
696
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
697
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
698
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
699
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
700
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
701
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
702
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
703
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
704
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
705
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
706
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
707
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
566
+ .pf-v6-c-label,
567
+ .pf-v6-c-label__content {
568
+ display: inline-flex;
569
+ align-items: center;
570
+ justify-content: center;
708
571
  }
709
572
 
710
- .pf-v6-c-badge {
711
- position: relative;
712
- display: inline-block;
713
- min-width: var(--pf-v6-c-badge--MinWidth);
714
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
715
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
716
- font-size: var(--pf-v6-c-badge--FontSize);
717
- font-weight: var(--pf-v6-c-badge--FontWeight);
718
- color: var(--pf-v6-c-badge--Color);
719
- text-align: center;
573
+ .pf-v6-c-label__text {
574
+ overflow: hidden;
575
+ text-overflow: ellipsis;
720
576
  white-space: nowrap;
721
- background-color: var(--pf-v6-c-badge--BackgroundColor);
722
- border-radius: var(--pf-v6-c-badge--BorderRadius);
577
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
723
578
  }
724
579
 
725
- .pf-v6-c-badge::after {
580
+ .pf-v6-c-label__content {
581
+ gap: var(--pf-v6-c-label__content--Gap);
582
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
583
+ padding: 0;
584
+ overflow: hidden;
585
+ color: var(--pf-v6-c-label--Color);
586
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
587
+ background: transparent;
588
+ border-width: 0;
589
+ }
590
+
591
+ .pf-v6-c-label__content::before {
726
592
  position: absolute;
727
593
  inset: 0;
594
+ z-index: -1;
728
595
  pointer-events: none;
729
596
  content: "";
730
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
731
- border-radius: inherit;
597
+ background-color: var(--pf-v6-c-label--BackgroundColor);
598
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
599
+ border-radius: var(--pf-v6-c-label--BorderRadius);
732
600
  }
733
601
 
734
- .pf-v6-c-badge.pf-m-read {
735
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
736
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
737
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
738
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
602
+ input.pf-v6-c-label__content {
603
+ overflow: hidden;
604
+ text-overflow: ellipsis;
605
+ white-space: nowrap;
739
606
  }
740
607
 
741
- .pf-v6-c-badge.pf-m-unread {
742
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
743
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
744
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
608
+ .pf-v6-c-label__icon {
609
+ color: var(--pf-v6-c-label__icon--Color);
745
610
  }
746
611
 
747
- .pf-v6-c-badge.pf-m-disabled {
748
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
749
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
612
+ .pf-v6-c-label__actions {
613
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
750
614
  }
751
615
 
752
- .pf-v6-c-badge.pf-m-disabled::after {
753
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
616
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
617
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
754
618
  }
755
619
 
756
- .pf-v6-c-badge__toggle-icon {
757
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
758
- color: var(--pf-v6-c-badge__toggle-icon--Color);
620
+ .pf-v6-c-label__actions .pf-v6-c-button {
621
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
622
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
623
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
624
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
625
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
626
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
627
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
628
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
759
629
  }
760
630
 
761
631
  .pf-v6-c-label-group {
@@ -914,1114 +784,1173 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
914
784
  display: none;
915
785
  }
916
786
 
917
- .pf-v6-c-text-input-group {
918
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
919
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
920
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
921
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
922
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
923
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
924
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
925
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
926
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
927
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
928
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
929
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
930
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
931
- --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));
932
- --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));
933
- --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));
934
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
935
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
936
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
937
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
938
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
939
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
940
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
941
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
942
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
943
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
944
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
945
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
946
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
947
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
948
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
949
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
950
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
951
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
952
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
953
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
954
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
955
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
956
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
957
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
958
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
959
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
960
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
961
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
962
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
963
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
964
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
965
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
966
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
967
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
968
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
787
+ .pf-v6-c-divider {
788
+ --pf-v6-c-divider--Display: flex;
789
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
790
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
791
+ --pf-v6-c-divider--before--FlexBasis: 100%;
969
792
  }
970
793
 
971
- .pf-v6-c-text-input-group {
972
- position: relative;
973
- display: flex;
794
+ .pf-v6-c-divider {
795
+ flex-direction: row;
974
796
  width: 100%;
975
- font-size: var(--pf-v6-c-text-input-group__FontSize);
976
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
977
- color: var(--pf-v6-c-text-input-group--Color, inherit);
978
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
979
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
980
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
981
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
982
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
983
- }
984
-
985
- .pf-v6-c-text-input-group::before {
986
- position: absolute;
987
- inset: 0;
988
- pointer-events: none;
989
- content: "";
990
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
991
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
992
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
993
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
994
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
797
+ height: var(--pf-v6-c-divider--Size);
798
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
799
+ --pf-v6-hidden-visible--hidden--Display: none;
800
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
801
+ display: var(--pf-v6-hidden-visible--Display);
995
802
  }
996
803
 
997
- .pf-v6-c-text-input-group.pf-m-disabled {
998
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
999
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1000
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1001
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1002
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1003
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1004
- pointer-events: none;
804
+ .pf-v6-c-divider.pf-m-hidden {
805
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1005
806
  }
1006
807
 
1007
- .pf-v6-c-text-input-group.pf-m-plain {
1008
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
808
+ @media screen and (min-width: 36rem) {
809
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
810
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
811
+ }
812
+ .pf-v6-c-divider.pf-m-visible-on-sm {
813
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
814
+ }
1009
815
  }
1010
-
1011
- .pf-v6-c-text-input-group.pf-m-plain::before {
1012
- border: 0;
816
+ @media screen and (min-width: 48rem) {
817
+ .pf-v6-c-divider.pf-m-hidden-on-md {
818
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
819
+ }
820
+ .pf-v6-c-divider.pf-m-visible-on-md {
821
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
822
+ }
1013
823
  }
1014
-
1015
- .pf-v6-c-text-input-group.pf-m-success {
1016
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1017
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1018
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1019
- }
1020
-
1021
- .pf-v6-c-text-input-group.pf-m-warning {
1022
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1023
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1024
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
824
+ @media screen and (min-width: 62rem) {
825
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
826
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
827
+ }
828
+ .pf-v6-c-divider.pf-m-visible-on-lg {
829
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
830
+ }
1025
831
  }
1026
-
1027
- .pf-v6-c-text-input-group.pf-m-error {
1028
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1029
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1030
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
832
+ @media screen and (min-width: 75rem) {
833
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
834
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
835
+ }
836
+ .pf-v6-c-divider.pf-m-visible-on-xl {
837
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
838
+ }
1031
839
  }
1032
-
1033
- @media (prefers-reduced-motion: no-preference) {
1034
- .pf-v6-c-text-input-group.pf-m-error {
1035
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1036
- animation-name: pf-v6-global-danger-jiggle-motion;
1037
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1038
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1039
- animation-fill-mode: both;
840
+ @media screen and (min-width: 90.625rem) {
841
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
842
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
843
+ }
844
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
845
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1040
846
  }
1041
847
  }
1042
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1043
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1044
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1045
- animation-name: pf-v6-global-fade-in;
1046
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1047
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
848
+ .pf-v6-c-divider {
849
+ flex-shrink: 0;
850
+ align-items: stretch;
851
+ align-self: stretch;
852
+ justify-content: center;
853
+ border: 0;
1048
854
  }
1049
855
 
1050
- .pf-v6-c-text-input-group:hover {
1051
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
856
+ .pf-v6-c-divider::before {
857
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
858
+ content: "";
859
+ background-color: var(--pf-v6-c-divider--Color);
860
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
861
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
1052
862
  }
1053
863
 
1054
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1055
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
864
+ .pf-v6-c-divider.pf-m-horizontal {
865
+ flex-direction: row;
866
+ width: 100%;
867
+ height: var(--pf-v6-c-divider--Size);
1056
868
  }
1057
869
 
1058
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1059
- --pf-v6-c-text-input-group__text--Position: relative;
870
+ .pf-v6-c-divider.pf-m-vertical {
871
+ flex-direction: column;
872
+ width: var(--pf-v6-c-divider--Size);
873
+ height: inherit;
1060
874
  }
1061
875
 
1062
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1063
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1064
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
876
+ .pf-v6-c-divider.pf-m-inset-none {
877
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1065
878
  }
1066
879
 
1067
- .pf-v6-c-text-input-group__main {
1068
- display: flex;
1069
- flex: 1;
1070
- flex-wrap: wrap;
1071
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1072
- min-width: 0;
880
+ .pf-v6-c-divider.pf-m-inset-xs {
881
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1073
882
  }
1074
883
 
1075
- .pf-v6-c-text-input-group__main.pf-m-icon {
1076
- --pf-v6-c-text-input-group__text--Position: relative;
1077
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1078
- display: inline-flex;
1079
- align-items: center;
1080
- justify-content: center;
1081
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
884
+ .pf-v6-c-divider.pf-m-inset-sm {
885
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1082
886
  }
1083
887
 
1084
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1085
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
888
+ .pf-v6-c-divider.pf-m-inset-md {
889
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1086
890
  }
1087
891
 
1088
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1089
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1090
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1091
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
892
+ .pf-v6-c-divider.pf-m-inset-lg {
893
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1092
894
  }
1093
895
 
1094
- .pf-v6-c-text-input-group__text {
1095
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
1096
- display: inline-grid;
1097
- flex: 1;
1098
- grid-template-areas: "text-input";
1099
- grid-template-columns: 1fr;
896
+ .pf-v6-c-divider.pf-m-inset-xl {
897
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1100
898
  }
1101
899
 
1102
- .pf-v6-c-text-input-group__icon {
1103
- position: absolute;
1104
- inset-block-start: 50%;
1105
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1106
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1107
- color: var(--pf-v6-c-text-input-group__icon--Color);
1108
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
900
+ .pf-v6-c-divider.pf-m-inset-2xl {
901
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1109
902
  }
1110
903
 
1111
- .pf-v6-c-text-input-group__icon.pf-m-status {
1112
- inset-inline-start: auto;
1113
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1114
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
904
+ .pf-v6-c-divider.pf-m-inset-3xl {
905
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1115
906
  }
1116
907
 
1117
- .pf-v6-c-text-input-group__text-input {
1118
- overflow: hidden;
1119
- text-overflow: ellipsis;
1120
- white-space: nowrap;
1121
- position: relative;
1122
- width: 100%;
1123
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1124
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1125
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1126
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1127
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1128
- color: var(--pf-v6-c-text-input-group__text-input--Color);
1129
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1130
- border: 0;
1131
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
908
+ @media (min-width: 36rem) {
909
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
910
+ flex-direction: row;
911
+ width: 100%;
912
+ height: var(--pf-v6-c-divider--Size);
913
+ }
1132
914
  }
1133
-
1134
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1135
- grid-area: text-input;
915
+ @media (min-width: 36rem) {
916
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
917
+ flex-direction: column;
918
+ width: var(--pf-v6-c-divider--Size);
919
+ height: inherit;
920
+ }
1136
921
  }
1137
-
1138
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
1139
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
922
+ @media (min-width: 36rem) {
923
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
924
+ --pf-v6-c-divider--before--FlexBasis: 100%;
925
+ }
926
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
927
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
928
+ }
929
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
930
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
931
+ }
932
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
933
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
934
+ }
935
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
936
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
937
+ }
938
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
939
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
940
+ }
941
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
942
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
943
+ }
944
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
945
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
946
+ }
1140
947
  }
1141
-
1142
- .pf-v6-c-text-input-group__text-input::placeholder {
1143
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
948
+ @media (min-width: 48rem) {
949
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
950
+ flex-direction: row;
951
+ width: 100%;
952
+ height: var(--pf-v6-c-divider--Size);
953
+ }
1144
954
  }
1145
-
1146
- .pf-v6-c-text-input-group__utilities {
1147
- display: flex;
1148
- align-items: center;
1149
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1150
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
955
+ @media (min-width: 48rem) {
956
+ .pf-v6-c-divider.pf-m-vertical-on-md {
957
+ flex-direction: column;
958
+ width: var(--pf-v6-c-divider--Size);
959
+ height: inherit;
960
+ }
1151
961
  }
1152
-
1153
- .pf-v6-c-text-input-group__utilities > * + * {
1154
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
962
+ @media (min-width: 48rem) {
963
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
964
+ --pf-v6-c-divider--before--FlexBasis: 100%;
965
+ }
966
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
967
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
968
+ }
969
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
970
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
971
+ }
972
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
973
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
974
+ }
975
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
976
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
977
+ }
978
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
979
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
980
+ }
981
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
982
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
983
+ }
984
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
985
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
986
+ }
1155
987
  }
1156
-
1157
- .pf-v6-c-text-input-group__group {
1158
- display: flex;
988
+ @media (min-width: 62rem) {
989
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
990
+ flex-direction: row;
991
+ width: 100%;
992
+ height: var(--pf-v6-c-divider--Size);
993
+ }
1159
994
  }
1160
-
1161
- .pf-v6-c-label {
1162
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1163
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1164
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1165
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1166
- --pf-v6-c-label--MaxWidth: 100%;
1167
- --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)));
1168
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1169
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
1170
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1171
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1172
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1173
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1174
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1175
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1176
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1177
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
1178
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
1179
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
1180
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
1181
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
1182
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1183
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
1184
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
1185
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
1186
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
1187
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
1188
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
1189
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
1190
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
1191
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
1192
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
1193
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
1194
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
1195
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
1196
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
1197
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
1198
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
1199
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1200
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1201
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1202
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1203
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1204
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1205
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1206
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1207
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1208
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1209
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1210
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1211
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1212
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1213
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1214
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1215
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1216
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1217
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1218
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1219
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1220
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1221
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1222
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1223
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1224
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1225
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1226
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1227
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1228
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1229
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1230
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1231
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1232
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1233
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1234
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1235
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1236
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1237
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1238
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1239
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1240
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1241
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1242
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1243
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1244
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1245
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1246
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1247
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1248
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1249
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1250
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1251
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1252
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1253
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1254
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1255
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1256
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1257
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1258
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1259
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1260
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1261
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1262
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1263
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1264
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1265
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1266
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1267
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1268
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1269
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1270
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1271
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1272
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1273
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1274
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1275
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1276
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1277
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1278
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1279
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1280
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1281
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1282
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1283
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1284
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1285
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1286
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1287
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1288
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1289
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1290
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1291
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1292
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1293
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1294
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1295
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1296
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1297
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1298
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1299
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1300
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1301
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1302
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1303
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1304
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1305
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1306
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1307
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1308
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1309
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1310
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1311
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1312
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1313
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1314
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
1315
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1316
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1317
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1318
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1319
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1320
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1321
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1322
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1323
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1324
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1325
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1326
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1327
- --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)));
1328
- --pf-v6-c-label__content--MaxWidth: 100%;
1329
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1330
- --pf-v6-c-label__content--Cursor: initial;
1331
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1332
- --pf-v6-c-label__text--MaxWidth: 100%;
1333
- --pf-v6-c-label__actions--MarginInlineEnd: 0;
1334
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1335
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1336
- --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
1337
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
1338
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
1339
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
1340
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
1341
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
1342
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1343
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1344
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1345
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1346
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1347
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1348
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
1349
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1350
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1351
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1352
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1353
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1354
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1355
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1356
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
995
+ @media (min-width: 62rem) {
996
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
997
+ flex-direction: column;
998
+ width: var(--pf-v6-c-divider--Size);
999
+ height: inherit;
1000
+ }
1001
+ }
1002
+ @media (min-width: 62rem) {
1003
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
1004
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1005
+ }
1006
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1007
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1008
+ }
1009
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1010
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1011
+ }
1012
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
1013
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1014
+ }
1015
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1016
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1017
+ }
1018
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1019
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1020
+ }
1021
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1022
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1023
+ }
1024
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1025
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1026
+ }
1027
+ }
1028
+ @media (min-width: 75rem) {
1029
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
1030
+ flex-direction: row;
1031
+ width: 100%;
1032
+ height: var(--pf-v6-c-divider--Size);
1033
+ }
1034
+ }
1035
+ @media (min-width: 75rem) {
1036
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
1037
+ flex-direction: column;
1038
+ width: var(--pf-v6-c-divider--Size);
1039
+ height: inherit;
1040
+ }
1041
+ }
1042
+ @media (min-width: 75rem) {
1043
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
1044
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1045
+ }
1046
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1047
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1048
+ }
1049
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1050
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1051
+ }
1052
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
1053
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1054
+ }
1055
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1056
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1057
+ }
1058
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1059
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1060
+ }
1061
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1062
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1063
+ }
1064
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1065
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1066
+ }
1067
+ }
1068
+ @media (min-width: 90.625rem) {
1069
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1070
+ flex-direction: row;
1071
+ width: 100%;
1072
+ height: var(--pf-v6-c-divider--Size);
1073
+ }
1074
+ }
1075
+ @media (min-width: 90.625rem) {
1076
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
1077
+ flex-direction: column;
1078
+ width: var(--pf-v6-c-divider--Size);
1079
+ height: inherit;
1080
+ }
1081
+ }
1082
+ @media (min-width: 90.625rem) {
1083
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1084
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1085
+ }
1086
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1087
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1088
+ }
1089
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1090
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1091
+ }
1092
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1093
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1094
+ }
1095
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1096
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1097
+ }
1098
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1099
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1100
+ }
1101
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1102
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1103
+ }
1104
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1105
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1106
+ }
1107
+ }
1108
+ .pf-v6-c-text-input-group {
1109
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1110
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
1111
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1112
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1113
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1114
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1115
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1116
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1117
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1118
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1119
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1120
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1121
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1122
+ --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));
1123
+ --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));
1124
+ --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));
1125
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1126
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1127
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
1128
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1129
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1130
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1131
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1132
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1133
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1134
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1135
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1136
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1137
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1138
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1139
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1140
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1141
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
1142
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1143
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1144
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1145
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1146
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1147
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1148
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1149
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1150
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1151
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1152
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1153
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1154
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1155
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1156
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1157
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1158
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1159
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1160
+ }
1161
+
1162
+ .pf-v6-c-text-input-group {
1163
+ position: relative;
1164
+ display: flex;
1165
+ width: 100%;
1166
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
1167
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
1168
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
1169
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1170
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1171
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1172
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1173
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1174
+ }
1175
+
1176
+ .pf-v6-c-text-input-group::before {
1177
+ position: absolute;
1178
+ inset: 0;
1179
+ pointer-events: none;
1180
+ content: "";
1181
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1182
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1183
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1184
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1185
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1186
+ }
1187
+
1188
+ .pf-v6-c-text-input-group.pf-m-disabled {
1189
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1190
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1191
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1192
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1193
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1194
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1195
+ pointer-events: none;
1196
+ }
1197
+
1198
+ .pf-v6-c-text-input-group.pf-m-plain {
1199
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
1200
+ }
1201
+
1202
+ .pf-v6-c-text-input-group.pf-m-plain::before {
1203
+ border: 0;
1204
+ }
1205
+
1206
+ .pf-v6-c-text-input-group.pf-m-success {
1207
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1208
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1209
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1210
+ }
1211
+
1212
+ .pf-v6-c-text-input-group.pf-m-warning {
1213
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1214
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1215
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1216
+ }
1217
+
1218
+ .pf-v6-c-text-input-group.pf-m-error {
1219
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1220
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1221
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1222
+ }
1223
+
1224
+ @media (prefers-reduced-motion: no-preference) {
1225
+ .pf-v6-c-text-input-group.pf-m-error {
1226
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1227
+ animation-name: pf-v6-global-danger-jiggle-motion;
1228
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1229
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1230
+ animation-fill-mode: both;
1231
+ }
1232
+ }
1233
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1234
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1235
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1236
+ animation-name: pf-v6-global-fade-in;
1237
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1238
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1239
+ }
1240
+
1241
+ .pf-v6-c-text-input-group:hover {
1242
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1243
+ }
1244
+
1245
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1246
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1247
+ }
1248
+
1249
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1250
+ --pf-v6-c-text-input-group__text--Position: relative;
1251
+ }
1252
+
1253
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1254
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1255
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1256
+ }
1257
+
1258
+ .pf-v6-c-text-input-group__main {
1259
+ display: flex;
1260
+ flex: 1;
1261
+ flex-wrap: wrap;
1262
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1263
+ min-width: 0;
1264
+ }
1265
+
1266
+ .pf-v6-c-text-input-group__main.pf-m-icon {
1267
+ --pf-v6-c-text-input-group__text--Position: relative;
1268
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1269
+ display: inline-flex;
1270
+ align-items: center;
1271
+ justify-content: center;
1272
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1273
+ }
1274
+
1275
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1276
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1277
+ }
1278
+
1279
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1280
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1281
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1282
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1283
+ }
1284
+
1285
+ .pf-v6-c-text-input-group__text {
1286
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
1287
+ display: inline-grid;
1288
+ flex: 1;
1289
+ grid-template-areas: "text-input";
1290
+ grid-template-columns: 1fr;
1291
+ }
1292
+
1293
+ .pf-v6-c-text-input-group__icon {
1294
+ position: absolute;
1295
+ inset-block-start: 50%;
1296
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1297
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1298
+ color: var(--pf-v6-c-text-input-group__icon--Color);
1299
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1300
+ }
1301
+
1302
+ .pf-v6-c-text-input-group__icon.pf-m-status {
1303
+ inset-inline-start: auto;
1304
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1305
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1306
+ }
1307
+
1308
+ .pf-v6-c-text-input-group__text-input {
1309
+ overflow: hidden;
1310
+ text-overflow: ellipsis;
1311
+ white-space: nowrap;
1312
+ position: relative;
1313
+ width: 100%;
1314
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1315
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1316
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1317
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1318
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1319
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
1320
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1321
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1322
+ border: 0;
1323
+ }
1324
+
1325
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1326
+ grid-area: text-input;
1327
+ }
1328
+
1329
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
1330
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1331
+ }
1332
+
1333
+ .pf-v6-c-text-input-group__text-input::placeholder {
1334
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1335
+ }
1336
+
1337
+ .pf-v6-c-text-input-group__utilities {
1338
+ display: flex;
1339
+ align-items: center;
1340
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1341
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1342
+ }
1343
+
1344
+ .pf-v6-c-text-input-group__utilities > * + * {
1345
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1346
+ }
1347
+
1348
+ .pf-v6-c-text-input-group__group {
1349
+ display: flex;
1350
+ }
1351
+
1352
+ .pf-v6-c-menu-toggle {
1353
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1354
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1355
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1356
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1357
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1358
+ --pf-v6-c-menu-toggle--MinWidth: calc(1lh + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
1359
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
1360
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
1361
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
1362
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
1363
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--control--default);
1364
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
1365
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
1366
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
1367
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1368
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1369
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
1370
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
1371
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
1372
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
1373
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
1374
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1375
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
1376
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
1377
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
1378
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
1379
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1380
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1381
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1382
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1383
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
1384
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1385
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1386
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
1387
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
1388
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
1389
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
1390
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
1391
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
1392
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
1393
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
1394
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
1395
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
1396
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
1397
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1398
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1399
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1400
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1401
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--action--default);
1402
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
1403
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
1404
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1405
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
1406
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
1407
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1408
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
1409
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1410
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
1411
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
1412
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1413
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1414
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1415
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1416
+ --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
1417
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
1418
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
1419
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--action--default);
1420
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1421
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1422
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
1423
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
1424
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
1425
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1426
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
1427
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
1428
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
1429
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1430
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1431
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1432
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
1433
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
1434
+ --pf-v6-c-menu-toggle--m-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
1435
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1436
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1437
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
1438
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
1439
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default);
1440
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
1441
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
1442
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
1443
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1444
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
1445
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
1446
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1447
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
1448
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1449
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
1450
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
1451
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1452
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
1453
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
1454
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
1455
+ --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));
1456
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1457
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1458
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1459
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1460
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1461
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1462
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1463
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
1464
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1465
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
1466
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1467
+ --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1468
+ --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
1469
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
1470
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1471
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1472
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
1473
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1474
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
1475
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
1476
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1477
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1478
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
1479
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
1480
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
1481
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
1482
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1483
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1484
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
1485
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
1486
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1487
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1488
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
1489
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1490
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1491
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1492
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1493
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
1494
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
1495
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
1496
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
1497
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1498
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1499
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1500
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1501
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
1357
1502
  }
1358
1503
 
1359
- .pf-v6-c-label {
1504
+ .pf-v6-c-menu-toggle {
1360
1505
  position: relative;
1361
- gap: var(--pf-v6-c-label--Gap);
1362
- min-width: var(--pf-v6-c-label--MinWidth);
1363
- max-width: var(--pf-v6-c-label--MaxWidth);
1364
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1365
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1366
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1367
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1368
- font-size: var(--pf-v6-c-label--FontSize);
1369
- white-space: nowrap;
1370
- background: transparent;
1371
- isolation: isolate;
1506
+ display: inline-flex;
1507
+ gap: var(--pf-v6-c-menu-toggle--Gap);
1508
+ align-items: center;
1509
+ justify-content: center;
1510
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth, revert);
1511
+ max-width: 100%;
1512
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1513
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1514
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1515
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1516
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
1517
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
1518
+ color: var(--pf-v6-c-menu-toggle--Color);
1519
+ cursor: pointer;
1520
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
1372
1521
  border: 0;
1373
- border-radius: var(--pf-v6-c-label--BorderRadius);
1374
- }
1375
-
1376
- .pf-v6-c-label.pf-m-blue {
1377
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1378
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1379
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1380
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1381
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1382
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1383
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1384
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1385
- }
1386
-
1387
- .pf-v6-c-label.pf-m-red {
1388
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1389
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1390
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1391
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1392
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1393
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1394
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1395
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1396
- }
1397
-
1398
- .pf-v6-c-label.pf-m-orange {
1399
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1400
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1401
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1402
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1403
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1404
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1405
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1406
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1407
- }
1408
-
1409
- .pf-v6-c-label.pf-m-orangered {
1410
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1411
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1412
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1413
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1414
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1415
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1416
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1417
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1418
- }
1419
-
1420
- .pf-v6-c-label.pf-m-yellow {
1421
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1422
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1423
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1424
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1425
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1426
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1427
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1428
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1429
- }
1430
-
1431
- .pf-v6-c-label.pf-m-green {
1432
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1433
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1434
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1435
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1436
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1437
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1438
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1439
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1440
- }
1441
-
1442
- .pf-v6-c-label.pf-m-teal {
1443
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1444
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1445
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1446
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1447
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1448
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1449
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1450
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1451
- }
1452
-
1453
- .pf-v6-c-label.pf-m-purple {
1454
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1455
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1456
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1457
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1458
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1459
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1460
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1461
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1462
- }
1463
-
1464
- .pf-v6-c-label.pf-m-success {
1465
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1466
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1467
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1468
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1469
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1470
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1471
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1472
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1473
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1474
- --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);
1475
- }
1476
-
1477
- .pf-v6-c-label.pf-m-warning {
1478
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1479
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1480
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1481
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1482
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1483
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1484
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1485
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1486
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1487
- --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);
1488
- }
1489
-
1490
- .pf-v6-c-label.pf-m-danger {
1491
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1492
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1493
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1494
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1495
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1496
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1497
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1498
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1499
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1500
- --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);
1501
- }
1502
-
1503
- .pf-v6-c-label.pf-m-info {
1504
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1505
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1506
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1507
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1508
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1509
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1510
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1511
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1512
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1513
- --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);
1522
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
1523
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
1524
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
1514
1525
  }
1515
1526
 
1516
- .pf-v6-c-label.pf-m-custom {
1517
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1518
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1519
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1520
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1521
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1522
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1523
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1524
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1525
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1526
- --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);
1527
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
1528
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1527
1529
  }
1528
1530
 
1529
- .pf-v6-c-label.pf-m-compact {
1530
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1531
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1532
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1533
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1534
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1535
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1536
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1531
+ .pf-v6-c-menu-toggle::before {
1532
+ position: absolute;
1533
+ inset-block-start: 0;
1534
+ inset-block-end: 0;
1535
+ inset-inline-start: 0;
1536
+ inset-inline-end: 0;
1537
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
1538
+ pointer-events: none;
1539
+ content: "";
1540
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
1541
+ transition: inherit;
1537
1542
  }
1538
1543
 
1539
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1540
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1544
+ .pf-v6-c-menu-toggle.pf-m-primary {
1545
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
1546
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
1547
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
1548
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
1549
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
1550
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
1551
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
1552
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
1553
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
1554
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
1555
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
1556
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
1557
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
1558
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
1559
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
1560
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
1561
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
1541
1562
  }
1542
1563
 
1543
- .pf-v6-c-label.pf-m-outline {
1544
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1545
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1546
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1547
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1548
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1549
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1550
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1551
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1552
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1553
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1564
+ .pf-v6-c-menu-toggle.pf-m-secondary {
1565
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
1566
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
1567
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
1568
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
1569
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
1570
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
1571
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
1572
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
1573
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
1574
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
1575
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
1576
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
1577
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
1578
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
1579
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
1580
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
1581
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
1554
1582
  }
1555
1583
 
1556
- .pf-v6-c-label.pf-m-editable {
1557
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1558
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1584
+ .pf-v6-c-menu-toggle.pf-m-full-height {
1585
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
1586
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
1587
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
1588
+ align-items: center;
1589
+ height: 100%;
1559
1590
  }
1560
1591
 
1561
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1562
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1563
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1592
+ .pf-v6-c-menu-toggle.pf-m-full-width {
1593
+ width: 100%;
1564
1594
  }
1565
1595
 
1566
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1567
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1568
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1569
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1596
+ .pf-v6-c-menu-toggle.pf-m-form {
1597
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-form--BorderRadius);
1570
1598
  }
1571
1599
 
1572
- .pf-v6-c-label.pf-m-editable-active {
1573
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1574
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1575
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1576
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1600
+ .pf-v6-c-menu-toggle.pf-m-plain {
1601
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
1602
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
1603
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
1604
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1605
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
1606
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
1607
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
1608
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
1609
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
1610
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
1611
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
1612
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1613
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
1614
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
1615
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
1616
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
1577
1617
  }
1578
1618
 
1579
- .pf-v6-c-label.pf-m-overflow {
1580
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1581
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1582
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1619
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
1620
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
1583
1621
  }
1584
1622
 
1585
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1586
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1587
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1588
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1623
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
1624
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
1625
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
1589
1626
  }
1590
1627
 
1591
- .pf-v6-c-label.pf-m-add {
1592
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1593
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1594
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1595
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1628
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
1629
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
1630
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
1631
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
1632
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
1633
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
1634
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
1635
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
1636
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
1637
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
1638
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
1596
1639
  }
1597
1640
 
1598
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1599
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1600
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1601
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1602
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1641
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
1642
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
1643
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
1644
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
1645
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
1646
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
1647
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
1603
1648
  }
1604
1649
 
1605
- .pf-v6-c-label.pf-m-clickable {
1606
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1650
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
1651
+ border: 0;
1607
1652
  }
1608
1653
 
1609
- .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) {
1610
- text-decoration-line: none;
1654
+ .pf-v6-c-menu-toggle.pf-m-small {
1655
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
1656
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
1657
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
1658
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
1659
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
1660
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
1661
+ --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);
1662
+ --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);
1611
1663
  }
1612
1664
 
1613
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1614
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1615
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1616
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1617
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1618
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1619
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1620
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1665
+ .pf-v6-c-menu-toggle.pf-m-success {
1666
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
1667
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
1621
1668
  }
1622
1669
 
1623
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1624
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1670
+ .pf-v6-c-menu-toggle.pf-m-warning {
1671
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
1672
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
1625
1673
  }
1626
1674
 
1627
- .pf-v6-c-label.pf-m-disabled {
1628
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1629
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1630
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1631
- --pf-v6-c-label--BorderWidth: 0;
1632
- pointer-events: none;
1675
+ .pf-v6-c-menu-toggle.pf-m-danger {
1676
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
1677
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
1633
1678
  }
1634
1679
 
1635
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1636
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1680
+ @media screen and (prefers-reduced-motion: no-preference) {
1681
+ .pf-v6-c-menu-toggle.pf-m-danger {
1682
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
1683
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
1684
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
1685
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
1686
+ animation-fill-mode: both;
1687
+ }
1637
1688
  }
1638
-
1639
- .pf-v6-c-label,
1640
- .pf-v6-c-label__content {
1641
- display: inline-flex;
1642
- align-items: center;
1643
- justify-content: center;
1689
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
1690
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
1691
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
1692
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
1644
1693
  }
1645
1694
 
1646
- .pf-v6-c-label__text {
1647
- overflow: hidden;
1648
- text-overflow: ellipsis;
1649
- white-space: nowrap;
1650
- max-width: var(--pf-v6-c-label__text--MaxWidth);
1695
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
1696
+ from {
1697
+ opacity: 0;
1698
+ }
1699
+ to {
1700
+ opacity: 1;
1701
+ }
1651
1702
  }
1652
-
1653
- .pf-v6-c-label__content {
1654
- gap: var(--pf-v6-c-label__content--Gap);
1655
- max-width: var(--pf-v6-c-label__content--MaxWidth);
1656
- padding: 0;
1657
- overflow: hidden;
1658
- color: var(--pf-v6-c-label--Color);
1659
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
1660
- background: transparent;
1661
- border-width: 0;
1703
+ .pf-v6-c-menu-toggle.pf-m-settings {
1704
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
1705
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
1706
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
1707
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
1708
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
1709
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
1710
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
1662
1711
  }
1663
1712
 
1664
- .pf-v6-c-label__content::before {
1665
- position: absolute;
1666
- inset: 0;
1667
- z-index: -1;
1668
- pointer-events: none;
1669
- content: "";
1670
- background-color: var(--pf-v6-c-label--BackgroundColor);
1671
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1672
- border-radius: var(--pf-v6-c-label--BorderRadius);
1713
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
1714
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
1673
1715
  }
1674
1716
 
1675
- input.pf-v6-c-label__content {
1676
- overflow: hidden;
1677
- text-overflow: ellipsis;
1678
- white-space: nowrap;
1717
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
1718
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
1719
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
1720
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
1721
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
1722
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
1679
1723
  }
1680
1724
 
1681
- .pf-v6-c-label__icon {
1682
- color: var(--pf-v6-c-label__icon--Color);
1725
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
1726
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
1727
+ pointer-events: none;
1683
1728
  }
1684
1729
 
1685
- .pf-v6-c-label__actions {
1686
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1730
+ .pf-v6-c-menu-toggle.pf-m-docked {
1731
+ justify-content: flex-start;
1732
+ width: 100%;
1687
1733
  }
1688
1734
 
1689
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1690
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1735
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__icon {
1736
+ min-width: 1lh;
1691
1737
  }
1692
1738
 
1693
- .pf-v6-c-label__actions .pf-v6-c-button {
1694
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1695
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1696
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1697
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1698
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1699
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1700
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1701
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1739
+ @media (min-width: 62rem) {
1740
+ .pf-v6-c-menu-toggle.pf-m-docked {
1741
+ justify-content: center;
1742
+ width: auto;
1743
+ }
1744
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
1745
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
1746
+ display: none;
1747
+ }
1702
1748
  }
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%;
1749
+ :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 {
1750
+ justify-content: flex-start;
1751
+ width: 100%;
1709
1752
  }
1710
1753
 
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);
1754
+ :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,
1755
+ :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,
1756
+ .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
1757
+ display: revert;
1719
1758
  }
1720
1759
 
1721
- .pf-v6-c-divider.pf-m-hidden {
1722
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1760
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
1761
+ syntax: "<length>";
1762
+ inherits: false;
1763
+ initial-value: 0;
1723
1764
  }
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);
1765
+ @media (prefers-reduced-motion: no-preference) {
1766
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
1767
+ 33% {
1768
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
1769
+ }
1770
+ 66% {
1771
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
1772
+ }
1731
1773
  }
1732
1774
  }
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
- }
1775
+ .pf-v6-c-menu-toggle.pf-m-split-button {
1776
+ --pf-v6-c-menu-toggle--Gap: 0;
1777
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1778
+ padding: 0;
1740
1779
  }
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
- }
1780
+
1781
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
1782
+ position: relative;
1783
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1784
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1785
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1786
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1748
1787
  }
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
- }
1788
+
1789
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1790
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1791
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1756
1792
  }
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
- }
1793
+
1794
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1795
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1796
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1764
1797
  }
1765
- .pf-v6-c-divider {
1766
- flex-shrink: 0;
1767
- align-items: stretch;
1798
+
1799
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1800
+ --pf-v6-c-check__label--Color: currentcolor;
1801
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
1802
+ align-items: center;
1768
1803
  align-self: stretch;
1769
- justify-content: center;
1770
- border: 0;
1771
1804
  }
1772
1805
 
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;
1806
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1807
+ --pf-v6-c-check__input--TranslateY: 0;
1808
+ align-self: center;
1779
1809
  }
1780
1810
 
1781
- .pf-v6-c-divider.pf-m-horizontal {
1782
- flex-direction: row;
1783
- width: 100%;
1784
- height: var(--pf-v6-c-divider--Size);
1811
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1812
+ 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);
1785
1813
  }
1786
1814
 
1787
- .pf-v6-c-divider.pf-m-vertical {
1788
- flex-direction: column;
1789
- width: var(--pf-v6-c-divider--Size);
1790
- height: inherit;
1815
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1816
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
1791
1817
  }
1792
1818
 
1793
- .pf-v6-c-divider.pf-m-inset-none {
1794
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1819
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1820
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1821
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
1795
1822
  }
1796
1823
 
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);
1824
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1825
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1826
+ --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);
1799
1827
  }
1800
1828
 
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);
1829
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1830
+ --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);
1803
1831
  }
1804
1832
 
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);
1833
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1834
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
1807
1835
  }
1808
1836
 
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);
1837
+ .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,
1838
+ .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,
1839
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1840
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
1811
1841
  }
1812
1842
 
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);
1843
+ .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,
1844
+ .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,
1845
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1846
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
1815
1847
  }
1816
1848
 
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);
1849
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1850
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
1819
1851
  }
1820
1852
 
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);
1853
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1854
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1855
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1856
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
1823
1857
  }
1824
1858
 
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
- }
1859
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1860
+ content: none;
1831
1861
  }
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
- }
1862
+
1863
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
1864
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1865
+ --pf-v6-c-menu-toggle--Gap: 0;
1866
+ align-items: stretch;
1867
+ padding: 0;
1838
1868
  }
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
- }
1869
+
1870
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1871
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1864
1872
  }
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
- }
1873
+
1874
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1875
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1876
+ display: flex;
1877
+ align-items: stretch;
1871
1878
  }
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
- }
1879
+
1880
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1881
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1882
+ flex: 1;
1878
1883
  }
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
- }
1884
+
1885
+ .pf-v6-c-menu-toggle__button {
1886
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
1887
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1888
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1889
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1890
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1891
+ color: inherit;
1892
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1893
+ border: 0;
1904
1894
  }
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
- }
1895
+
1896
+ .pf-v6-c-menu-toggle__button.pf-m-text {
1897
+ display: inline-flex;
1898
+ align-items: baseline;
1899
+ }
1900
+
1901
+ .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) {
1902
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1903
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
1911
1904
  }
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
- }
1905
+
1906
+ .pf-v6-c-menu-toggle__text {
1907
+ overflow: hidden;
1908
+ text-overflow: ellipsis;
1909
+ white-space: nowrap;
1910
+ min-width: 0;
1918
1911
  }
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
- }
1912
+
1913
+ .pf-v6-c-menu-toggle__count {
1914
+ display: flex;
1915
+ flex-wrap: nowrap;
1944
1916
  }
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
- }
1917
+
1918
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1919
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1920
+ .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 {
1921
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1922
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1951
1923
  }
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
- }
1924
+
1925
+ .pf-v6-c-menu-toggle__icon {
1926
+ flex-shrink: 0;
1927
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
1928
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
1929
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
1930
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
1958
1931
  }
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
- }
1932
+
1933
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
1934
+ vertical-align: middle;
1984
1935
  }
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
- }
1936
+
1937
+ .pf-v6-c-menu-toggle__controls {
1938
+ display: flex;
1939
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1940
+ align-items: center;
1941
+ justify-content: center;
1942
+ margin-inline-start: auto;
1991
1943
  }
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
- }
1944
+
1945
+ .pf-v6-c-menu-toggle__toggle-icon {
1946
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1947
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1998
1948
  }
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
- }
1949
+
1950
+ .pf-v6-c-menu-toggle__status-icon {
1951
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
2024
1952
  }
1953
+
2025
1954
  .pf-v6-c-button {
2026
1955
  --pf-v6-c-button--Display: inline-flex;
2027
1956
  --pf-v6-c-button--AlignItems: baseline;
@@ -2399,10 +2328,10 @@ input.pf-v6-c-label__content {
2399
2328
  line-height: var(--pf-v6-c-button--LineHeight, inherit);
2400
2329
  color: var(--pf-v6-c-button--Color);
2401
2330
  text-align: center;
2331
+ white-space: nowrap;
2402
2332
  text-decoration-line: var(--pf-v6-c-button--TextDecorationLine);
2403
2333
  text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle);
2404
2334
  text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
2405
- white-space: nowrap;
2406
2335
  cursor: pointer;
2407
2336
  -webkit-user-select: none;
2408
2337
  user-select: none;
@@ -2412,11 +2341,11 @@ input.pf-v6-c-label__content {
2412
2341
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
2413
2342
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
2414
2343
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
2344
+ scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY);
2415
2345
  transition-delay: var(--pf-v6-c-button--TransitionDelay);
2416
2346
  transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
2417
2347
  transition-duration: var(--pf-v6-c-button--TransitionDuration);
2418
2348
  transition-property: var(--pf-v6-c-button--TransitionProperty);
2419
- scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY);
2420
2349
  }
2421
2350
 
2422
2351
  .pf-v6-c-button::after {
@@ -2551,10 +2480,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2551
2480
  --pf-v6-c-button--hover--BorderWidth: 0;
2552
2481
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
2553
2482
  text-align: start;
2554
- text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
2555
2483
  white-space: normal;
2556
- background: transparent;
2484
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
2557
2485
  outline-offset: 0.125rem;
2486
+ background: transparent;
2558
2487
  }
2559
2488
 
2560
2489
  .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
@@ -2932,6 +2861,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2932
2861
  width: 100%;
2933
2862
  }
2934
2863
 
2864
+ .pf-v6-c-button.pf-m-docked .pf-v6-c-button__icon {
2865
+ min-width: 1lh;
2866
+ }
2867
+
2935
2868
  @media (min-width: 62rem) {
2936
2869
  .pf-v6-c-button.pf-m-docked {
2937
2870
  justify-content: center;
@@ -2953,12 +2886,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2953
2886
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2954
2887
  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2955
2888
  color: var(--pf-v6-c-button__icon--Color);
2889
+ rotate: var(--pf-v6-c-button__icon--Rotate);
2890
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2956
2891
  transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2957
2892
  transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2958
2893
  transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2959
2894
  transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2960
- rotate: var(--pf-v6-c-button__icon--Rotate);
2961
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2962
2895
  }
2963
2896
 
2964
2897
  .pf-v6-c-button__icon.pf-m-start {
@@ -3043,124 +2976,79 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3043
2976
  scale: 1.5;
3044
2977
  }
3045
2978
  }
3046
- .pf-v6-c-breadcrumb {
3047
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3048
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3049
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3050
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3051
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3052
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3053
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3054
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3055
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3056
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3057
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3058
- --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
3059
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3060
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3061
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3062
- --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
3063
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3064
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3065
- --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3066
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3067
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3068
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3069
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3070
- }
3071
-
3072
- .pf-v6-c-breadcrumb {
3073
- display: inline-flex;
3074
- }
3075
-
3076
- .pf-v6-c-breadcrumb__list {
3077
- display: flex;
3078
- flex-wrap: wrap;
3079
- align-items: center;
3080
- }
3081
-
3082
- .pf-v6-c-breadcrumb__item {
3083
- display: flex;
3084
- align-items: baseline;
3085
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3086
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3087
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3088
- white-space: nowrap;
3089
- list-style: none;
3090
- }
3091
-
3092
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3093
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3094
- }
3095
-
3096
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3097
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3098
- }
3099
-
3100
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3101
- scale: -1 1;
3102
- }
3103
-
3104
- .pf-v6-c-breadcrumb__item-divider {
3105
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3106
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3107
- line-height: 1;
3108
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3109
- }
3110
-
3111
- .pf-v6-c-breadcrumb__link {
3112
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3113
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3114
- font-size: inherit;
3115
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3116
- line-height: inherit;
3117
- color: var(--pf-v6-c-breadcrumb__link--Color);
3118
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3119
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3120
- text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
3121
- word-break: break-word;
3122
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3123
- }
3124
-
3125
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3126
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3127
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3128
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3129
- --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
2979
+ .pf-v6-c-badge {
2980
+ --pf-v6-c-badge--BorderColor: transparent;
2981
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2982
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2983
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2984
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2985
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2986
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2987
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2988
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2989
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2990
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2991
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2992
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2993
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2994
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2995
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2996
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2997
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2998
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2999
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
3000
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
3130
3001
  }
3131
3002
 
3132
- .pf-v6-c-breadcrumb__link.pf-m-current {
3133
- cursor: default;
3003
+ .pf-v6-c-badge {
3004
+ position: relative;
3005
+ display: inline-block;
3006
+ min-width: var(--pf-v6-c-badge--MinWidth);
3007
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
3008
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
3009
+ font-size: var(--pf-v6-c-badge--FontSize);
3010
+ font-weight: var(--pf-v6-c-badge--FontWeight);
3011
+ color: var(--pf-v6-c-badge--Color);
3012
+ text-align: center;
3013
+ white-space: nowrap;
3014
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
3015
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
3134
3016
  }
3135
3017
 
3136
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3137
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3138
- text-decoration-line: none;
3018
+ .pf-v6-c-badge::after {
3019
+ position: absolute;
3020
+ inset: 0;
3021
+ pointer-events: none;
3022
+ content: "";
3023
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
3024
+ border-radius: inherit;
3139
3025
  }
3140
3026
 
3141
- button.pf-v6-c-breadcrumb__link {
3142
- border: none;
3027
+ .pf-v6-c-badge.pf-m-read {
3028
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
3029
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
3030
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
3031
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
3143
3032
  }
3144
3033
 
3145
- .pf-v6-c-breadcrumb__dropdown {
3146
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3147
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3148
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3149
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3034
+ .pf-v6-c-badge.pf-m-unread {
3035
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
3036
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
3037
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
3150
3038
  }
3151
3039
 
3152
- .pf-v6-c-breadcrumb__heading {
3153
- display: inline;
3154
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3040
+ .pf-v6-c-badge.pf-m-disabled {
3041
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
3042
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
3155
3043
  }
3156
3044
 
3157
- .pf-v6-c-breadcrumb__link,
3158
- .pf-v6-c-breadcrumb__heading {
3159
- white-space: normal;
3045
+ .pf-v6-c-badge.pf-m-disabled::after {
3046
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
3160
3047
  }
3161
3048
 
3162
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3163
- display: none;
3049
+ .pf-v6-c-badge__toggle-icon {
3050
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
3051
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
3164
3052
  }
3165
3053
 
3166
3054
  .pf-v6-c-menu {
@@ -3507,8 +3395,8 @@ button.pf-v6-c-breadcrumb__link {
3507
3395
  }
3508
3396
 
3509
3397
  .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list {
3510
- overflow: hidden;
3511
3398
  visibility: visible;
3399
+ overflow: hidden;
3512
3400
  transition: var(--pf-v6-c-menu--m-drilldown__list--Transition);
3513
3401
  }
3514
3402
 
@@ -3542,8 +3430,8 @@ button.pf-v6-c-breadcrumb__link {
3542
3430
  }
3543
3431
 
3544
3432
  .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list {
3545
- overflow: visible;
3546
3433
  visibility: hidden;
3434
+ overflow: visible;
3547
3435
  }
3548
3436
 
3549
3437
  .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-divider,
@@ -3703,10 +3591,10 @@ button.pf-v6-c-breadcrumb__link {
3703
3591
  color: var(--pf-v6-c-menu__item--Color);
3704
3592
  text-align: start;
3705
3593
  text-decoration-line: none;
3594
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3706
3595
  background-color: var(--pf-v6-c-menu__item--BackgroundColor);
3707
3596
  border: 0;
3708
3597
  border-radius: var(--pf-v6-c-menu__item--BorderRadius);
3709
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3710
3598
  --pf-v6-hidden-visible--visible--Display: flex;
3711
3599
  --pf-v6-hidden-visible--hidden--Display: none;
3712
3600
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
@@ -3761,111 +3649,322 @@ button.pf-v6-c-breadcrumb__link {
3761
3649
  cursor: pointer;
3762
3650
  }
3763
3651
 
3764
- .pf-v6-c-menu__item.pf-m-selected {
3765
- --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
3652
+ .pf-v6-c-menu__item.pf-m-selected {
3653
+ --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
3654
+ }
3655
+
3656
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
3657
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3658
+ opacity: 1;
3659
+ }
3660
+
3661
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3662
+ color: var(--pf-v6-c-menu__item-external--Color);
3663
+ }
3664
+
3665
+ .pf-v6-c-menu__item-select-icon {
3666
+ color: var(--pf-v6-c-menu__item-select-icon--Color);
3667
+ }
3668
+
3669
+ .pf-v6-c-menu__item-main {
3670
+ column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
3671
+ align-items: center;
3672
+ width: 100%;
3673
+ }
3674
+
3675
+ .pf-v6-c-menu__item-text {
3676
+ overflow: hidden;
3677
+ text-overflow: ellipsis;
3678
+ white-space: nowrap;
3679
+ flex-grow: 1;
3680
+ }
3681
+
3682
+ .pf-v6-c-menu__group-title {
3683
+ padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
3684
+ padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
3685
+ padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
3686
+ padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
3687
+ font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
3688
+ font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
3689
+ color: var(--pf-v6-c-menu__group-title--Color);
3690
+ }
3691
+
3692
+ .pf-v6-c-menu__item-description {
3693
+ font-size: var(--pf-v6-c-menu__item-description--FontSize);
3694
+ color: var(--pf-v6-c-menu__item-description--Color);
3695
+ overflow-wrap: break-word;
3696
+ }
3697
+
3698
+ .pf-v6-c-menu__item-check .pf-v6-c-check {
3699
+ --pf-v6-c-check__input--TranslateY: none;
3700
+ }
3701
+
3702
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
3703
+ scale: -1 1;
3704
+ }
3705
+
3706
+ .pf-v6-c-menu__item-toggle-icon {
3707
+ color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
3708
+ }
3709
+
3710
+ .pf-v6-c-menu__item-icon {
3711
+ color: var(--pf-v6-c-menu__item--icon--Color, inherit);
3712
+ }
3713
+
3714
+ .pf-v6-c-menu__item-select-icon,
3715
+ .pf-v6-c-menu__item-external-icon {
3716
+ opacity: 0;
3717
+ }
3718
+
3719
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
3720
+ .pf-v6-c-menu__item-action.pf-m-favorited,
3721
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3722
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
3723
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3724
+ }
3725
+
3726
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
3727
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3728
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3729
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
3730
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3731
+ }
3732
+
3733
+ .pf-v6-c-menu__breadcrumb {
3734
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3735
+ padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3736
+ padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3737
+ padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3738
+ padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3739
+ }
3740
+
3741
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3742
+ min-width: auto;
3743
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3744
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3745
+ }
3746
+
3747
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3748
+ height: auto;
3749
+ }
3750
+
3751
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3752
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
3753
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
3754
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3755
+ }
3756
+
3757
+ .pf-v6-c-breadcrumb {
3758
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3759
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3760
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3761
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3762
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3763
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3764
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3765
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3766
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3767
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3768
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3769
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
3770
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3771
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3772
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3773
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
3774
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3775
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3776
+ --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3777
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3778
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3779
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3780
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3781
+ }
3782
+
3783
+ .pf-v6-c-breadcrumb {
3784
+ display: inline-flex;
3785
+ }
3786
+
3787
+ .pf-v6-c-breadcrumb__list {
3788
+ display: flex;
3789
+ flex-wrap: wrap;
3790
+ align-items: center;
3791
+ }
3792
+
3793
+ .pf-v6-c-breadcrumb__item {
3794
+ display: flex;
3795
+ align-items: baseline;
3796
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3797
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3798
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3799
+ white-space: nowrap;
3800
+ list-style: none;
3801
+ }
3802
+
3803
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3804
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3805
+ }
3806
+
3807
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3808
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3809
+ }
3810
+
3811
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3812
+ scale: -1 1;
3813
+ }
3814
+
3815
+ .pf-v6-c-breadcrumb__item-divider {
3816
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3817
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3818
+ line-height: 1;
3819
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3820
+ }
3821
+
3822
+ .pf-v6-c-breadcrumb__link {
3823
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3824
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3825
+ font-size: inherit;
3826
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3827
+ line-height: inherit;
3828
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3829
+ overflow-wrap: break-word;
3830
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3831
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3832
+ text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
3833
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3834
+ }
3835
+
3836
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3837
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3838
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3839
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3840
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
3766
3841
  }
3767
3842
 
3768
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
3769
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3770
- opacity: 1;
3843
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3844
+ cursor: default;
3771
3845
  }
3772
3846
 
3773
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3774
- color: var(--pf-v6-c-menu__item-external--Color);
3847
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3848
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3849
+ text-decoration-line: none;
3775
3850
  }
3776
3851
 
3777
- .pf-v6-c-menu__item-select-icon {
3778
- color: var(--pf-v6-c-menu__item-select-icon--Color);
3852
+ button.pf-v6-c-breadcrumb__link {
3853
+ border: none;
3779
3854
  }
3780
3855
 
3781
- .pf-v6-c-menu__item-main {
3782
- column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
3783
- align-items: center;
3784
- width: 100%;
3856
+ .pf-v6-c-breadcrumb__dropdown {
3857
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3858
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3859
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3860
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3785
3861
  }
3786
3862
 
3787
- .pf-v6-c-menu__item-text {
3788
- overflow: hidden;
3789
- text-overflow: ellipsis;
3790
- white-space: nowrap;
3791
- flex-grow: 1;
3863
+ .pf-v6-c-breadcrumb__heading {
3864
+ display: inline;
3865
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3792
3866
  }
3793
3867
 
3794
- .pf-v6-c-menu__group-title {
3795
- padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
3796
- padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
3797
- padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
3798
- padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
3799
- font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
3800
- font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
3801
- color: var(--pf-v6-c-menu__group-title--Color);
3868
+ .pf-v6-c-breadcrumb__link,
3869
+ .pf-v6-c-breadcrumb__heading {
3870
+ white-space: normal;
3802
3871
  }
3803
3872
 
3804
- .pf-v6-c-menu__item-description {
3805
- font-size: var(--pf-v6-c-menu__item-description--FontSize);
3806
- color: var(--pf-v6-c-menu__item-description--Color);
3807
- word-break: break-word;
3873
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3874
+ display: none;
3808
3875
  }
3809
3876
 
3810
- .pf-v6-c-menu__item-check .pf-v6-c-check {
3811
- --pf-v6-c-check__input--TranslateY: none;
3877
+ .pf-v6-c-spinner {
3878
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3879
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3880
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3881
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3882
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3883
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3884
+ --pf-v6-c-spinner--StrokeWidth: 10;
3885
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3886
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3887
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3888
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3889
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3890
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3891
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3892
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3812
3893
  }
3813
3894
 
3814
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
3815
- scale: -1 1;
3895
+ .pf-v6-c-spinner {
3896
+ width: var(--pf-v6-c-spinner--Width);
3897
+ height: var(--pf-v6-c-spinner--Height);
3898
+ overflow: hidden;
3899
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3816
3900
  }
3817
3901
 
3818
- .pf-v6-c-menu__item-toggle-icon {
3819
- color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
3902
+ .pf-v6-c-spinner.pf-m-inline {
3903
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3820
3904
  }
3821
3905
 
3822
- .pf-v6-c-menu__item-icon {
3823
- color: var(--pf-v6-c-menu__item--icon--Color, inherit);
3906
+ .pf-v6-c-spinner.pf-m-xs {
3907
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3908
+ --pf-v6-c-spinner--StrokeWidth: 15;
3824
3909
  }
3825
3910
 
3826
- .pf-v6-c-menu__item-select-icon,
3827
- .pf-v6-c-menu__item-external-icon {
3828
- opacity: 0;
3911
+ .pf-v6-c-spinner.pf-m-sm {
3912
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3829
3913
  }
3830
3914
 
3831
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
3832
- .pf-v6-c-menu__item-action.pf-m-favorited,
3833
- .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3834
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
3835
- --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3915
+ .pf-v6-c-spinner.pf-m-md {
3916
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3836
3917
  }
3837
3918
 
3838
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
3839
- .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3840
- .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3841
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
3842
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3919
+ .pf-v6-c-spinner.pf-m-lg {
3920
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3843
3921
  }
3844
3922
 
3845
- .pf-v6-c-menu__breadcrumb {
3846
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3847
- padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3848
- padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3849
- padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3850
- padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3923
+ .pf-v6-c-spinner.pf-m-xl {
3924
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3851
3925
  }
3852
3926
 
3853
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3854
- min-width: auto;
3855
- padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3856
- padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3927
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
3928
+ --pf-v6-c-spinner--AnimationDuration: 0s;
3857
3929
  }
3858
3930
 
3859
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3860
- height: auto;
3931
+ .pf-v6-c-spinner__path {
3932
+ width: 100%;
3933
+ height: 100%;
3934
+ stroke: var(--pf-v6-c-spinner--Color);
3935
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3936
+ stroke-linecap: round;
3937
+ stroke-dasharray: 283;
3938
+ stroke-dashoffset: 280;
3939
+ transform-origin: 50% 50%;
3940
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3861
3941
  }
3862
3942
 
3863
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3864
- --pf-v6-c-menu-toggle--BorderWidth: 0;
3865
- --pf-v6-c-menu-toggle--BorderColor: transparent;
3866
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3943
+ @keyframes pf-v6-c-spinner-animation-rotate {
3944
+ 0% {
3945
+ transform: rotate(0deg);
3946
+ }
3947
+ 100% {
3948
+ transform: rotate(360deg);
3949
+ }
3950
+ }
3951
+ @keyframes pf-v6-c-spinner-animation-dash {
3952
+ 0% {
3953
+ stroke-dashoffset: 280;
3954
+ transform: rotate(0);
3955
+ }
3956
+ 15% {
3957
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3958
+ }
3959
+ 40% {
3960
+ stroke-dasharray: 220;
3961
+ stroke-dashoffset: 150;
3962
+ }
3963
+ 100% {
3964
+ stroke-dashoffset: 280;
3965
+ transform: rotate(720deg);
3966
+ }
3867
3967
  }
3868
-
3869
3968
  .pf-v6-c-tooltip {
3870
3969
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3871
3970
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3974,7 +4073,7 @@ button.pf-v6-c-breadcrumb__link {
3974
4073
  font-size: var(--pf-v6-c-tooltip__content--FontSize);
3975
4074
  color: var(--pf-v6-c-tooltip__content--Color);
3976
4075
  text-align: center;
3977
- word-break: break-word;
4076
+ overflow-wrap: break-word;
3978
4077
  background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
3979
4078
  border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
3980
4079
  }
@@ -3995,96 +4094,4 @@ button.pf-v6-c-breadcrumb__link {
3995
4094
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3996
4095
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3997
4096
  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
4097
  }