@patternfly/patternfly 6.0.0-alpha.210 → 6.0.0-alpha.211

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/components/MenuToggle/menu-toggle.css +24 -9
  2. package/components/MenuToggle/menu-toggle.scss +29 -12
  3. package/components/_index.css +24 -9
  4. package/docs/components/MenuToggle/examples/MenuToggle.md +19 -0
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +24 -9
  7. package/patternfly.css +24 -9
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -27,9 +27,14 @@
27
27
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
28
28
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
29
29
  --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
30
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
31
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
32
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
30
33
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
31
34
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
35
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
32
36
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
37
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
33
38
  --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
34
39
  --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
35
40
  --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -60,7 +65,7 @@
60
65
  --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
61
66
  --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
62
67
  --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
63
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
68
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
64
69
  --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
65
70
  --pf-v6-c-menu-toggle__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
66
71
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
@@ -95,12 +100,14 @@
95
100
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
96
101
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
97
102
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
103
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
98
104
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
99
105
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
100
106
  --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
101
107
  --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
102
108
  --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
103
109
  --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
110
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
104
111
  }
105
112
 
106
113
  .pf-v6-c-menu-toggle {
@@ -155,6 +162,7 @@
155
162
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
156
163
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
157
164
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
165
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
158
166
  }
159
167
  .pf-v6-c-menu-toggle.pf-m-secondary {
160
168
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
@@ -169,6 +177,7 @@
169
177
  --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
170
178
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
171
179
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
180
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
172
181
  }
173
182
  .pf-v6-c-menu-toggle.pf-m-full-height {
174
183
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
@@ -207,14 +216,6 @@
207
216
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
208
217
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
209
218
  }
210
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
211
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
212
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
213
- }
214
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
215
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
216
- pointer-events: none;
217
- }
218
219
  .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
219
220
  border: 0;
220
221
  }
@@ -239,6 +240,20 @@
239
240
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
240
241
  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
241
242
  }
243
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
244
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
245
+ }
246
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
247
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
248
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
249
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
250
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
251
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
252
+ }
253
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
254
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
255
+ pointer-events: none;
256
+ }
242
257
 
243
258
  .pf-v6-c-menu-toggle.pf-m-split-button {
244
259
  --pf-v6-c-menu-toggle--ColumnGap: 0;
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -43,13 +43,18 @@
43
43
 
44
44
  // * Menu toggle disabled
45
45
  --#{$menu-toggle}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
46
+ --#{$menu-toggle}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
47
+ --#{$menu-toggle}--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
48
+ --#{$menu-toggle}--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
46
49
  --#{$menu-toggle}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
47
50
 
48
51
  // * Menu toggle icon
49
52
  --#{$menu-toggle}__icon--MinHeight: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
53
+ --#{$menu-toggle}__icon--Color: var(--pf-t--global--icon--color--regular);
50
54
 
51
55
  // * Menu toggle toggle icon
52
56
  --#{$menu-toggle}__toggle-icon--MinHeight: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
57
+ --#{$menu-toggle}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
53
58
 
54
59
  // TODO: add pf-m-button modifier here
55
60
  // * Menu toggle button
@@ -74,7 +79,6 @@
74
79
  --#{$menu-toggle}--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
75
80
  --#{$menu-toggle}--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
76
81
 
77
-
78
82
  // * Menu toggle secondary
79
83
  --#{$menu-toggle}--m-secondary--PaddingInlineStart: var(--#{$menu-toggle}--m-button--PaddingInlineStart);
80
84
  --#{$menu-toggle}--m-secondary--PaddingInlineEnd: var(--#{$menu-toggle}--m-button--PaddingInlineEnd);
@@ -88,7 +92,7 @@
88
92
  --#{$menu-toggle}--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
89
93
  --#{$menu-toggle}--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
90
94
  --#{$menu-toggle}--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
91
- --#{$menu-toggle}--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
95
+ --#{$menu-toggle}--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
92
96
  --#{$menu-toggle}--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
93
97
 
94
98
  // Controls
@@ -145,6 +149,7 @@
145
149
 
146
150
  // Status icon
147
151
  --#{$menu-toggle}__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
152
+ --#{$menu-toggle}__status-icon--Color: var(--pf-t--global--icon--color--regular);
148
153
 
149
154
  // Success
150
155
  --#{$menu-toggle}--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
@@ -157,6 +162,9 @@
157
162
  // Danger
158
163
  --#{$menu-toggle}--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
159
164
  --#{$menu-toggle}--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
165
+
166
+ // Placeholder
167
+ --#{$menu-toggle}--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
160
168
  }
161
169
 
162
170
  .#{$menu-toggle} {
@@ -215,6 +223,7 @@
215
223
  --#{$menu-toggle}--expanded--BorderColor: var(--#{$menu-toggle}--m-primary--expanded--BorderColor);
216
224
  --#{$menu-toggle}--hover__toggle-icon--Color: var(--#{$menu-toggle}--m-primary--hover__toggle-icon--Color);
217
225
  --#{$menu-toggle}--expanded__toggle-icon--Color: var(--#{$menu-toggle}--m-primary--expanded__toggle-icon--Color);
226
+ --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--m-primary__toggle-icon--Color);
218
227
  }
219
228
 
220
229
  &.pf-m-secondary {
@@ -231,6 +240,7 @@
231
240
  --#{$menu-toggle}--expanded--BorderWidth: var(--#{$menu-toggle}--m-secondary--expanded--BorderWidth);
232
241
  --#{$menu-toggle}--hover__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary--hover__toggle-icon--Color);
233
242
  --#{$menu-toggle}--expanded__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary--expanded__toggle-icon--Color);
243
+ --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary__toggle-icon--Color);
234
244
  }
235
245
 
236
246
  &.pf-m-full-height {
@@ -277,16 +287,6 @@
277
287
  --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--expanded__toggle-icon--Color);
278
288
  }
279
289
 
280
- &:is(:disabled, .pf-m-disabled) {
281
- --#{$menu-toggle}--Color: var(--#{$menu-toggle}--disabled--Color);
282
- --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--disabled--BackgroundColor);
283
-
284
- &,
285
- .#{$button} {
286
- pointer-events: none;
287
- }
288
- }
289
-
290
290
  &.pf-m-primary,
291
291
  &:is(:disabled, .pf-m-disabled) {
292
292
  &::before {
@@ -320,6 +320,23 @@
320
320
  --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-danger--BorderColor);
321
321
  --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-danger__status-icon--Color);
322
322
  }
323
+
324
+ &.pf-m-placeholder {
325
+ --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-placeholder--Color);
326
+ }
327
+
328
+ &:is(:disabled, .pf-m-disabled) {
329
+ --#{$menu-toggle}--Color: var(--#{$menu-toggle}--disabled--Color);
330
+ --#{$menu-toggle}__icon--Color: var(--#{$menu-toggle}--disabled__icon--Color);
331
+ --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--disabled__toggle-icon--Color);
332
+ --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--disabled__status-icon--Color);
333
+ --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--disabled--BackgroundColor);
334
+
335
+ &,
336
+ .#{$button} {
337
+ pointer-events: none;
338
+ }
339
+ }
323
340
  }
324
341
 
325
342
  // - Menu toggle split button
package/components/_index.css CHANGED
@@ -9982,9 +9982,14 @@ ul.pf-v6-c-list {
9982
9982
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
9983
9983
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
9984
9984
  --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
9985
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
9986
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
9987
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
9985
9988
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
9986
9989
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
9990
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
9987
9991
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
9992
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
9988
9993
  --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
9989
9994
  --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
9990
9995
  --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -10015,7 +10020,7 @@ ul.pf-v6-c-list {
10015
10020
  --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
10016
10021
  --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
10017
10022
  --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
10018
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
10023
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
10019
10024
  --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
10020
10025
  --pf-v6-c-menu-toggle__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
10021
10026
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
@@ -10050,12 +10055,14 @@ ul.pf-v6-c-list {
10050
10055
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
10051
10056
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
10052
10057
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
10058
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
10053
10059
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10054
10060
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
10055
10061
  --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
10056
10062
  --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
10057
10063
  --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
10058
10064
  --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
10065
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
10059
10066
  }
10060
10067
 
10061
10068
  .pf-v6-c-menu-toggle {
@@ -10110,6 +10117,7 @@ ul.pf-v6-c-list {
10110
10117
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
10111
10118
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
10112
10119
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
10120
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
10113
10121
  }
10114
10122
  .pf-v6-c-menu-toggle.pf-m-secondary {
10115
10123
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
@@ -10124,6 +10132,7 @@ ul.pf-v6-c-list {
10124
10132
  --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
10125
10133
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
10126
10134
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
10135
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
10127
10136
  }
10128
10137
  .pf-v6-c-menu-toggle.pf-m-full-height {
10129
10138
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
@@ -10162,14 +10171,6 @@ ul.pf-v6-c-list {
10162
10171
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
10163
10172
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
10164
10173
  }
10165
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
10166
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
10167
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
10168
- }
10169
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
10170
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
10171
- pointer-events: none;
10172
- }
10173
10174
  .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
10174
10175
  border: 0;
10175
10176
  }
@@ -10194,6 +10195,20 @@ ul.pf-v6-c-list {
10194
10195
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
10195
10196
  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
10196
10197
  }
10198
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
10199
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
10200
+ }
10201
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
10202
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
10203
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
10204
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
10205
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
10206
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
10207
+ }
10208
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
10209
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
10210
+ pointer-events: none;
10211
+ }
10197
10212
 
10198
10213
  .pf-v6-c-menu-toggle.pf-m-split-button {
10199
10214
  --pf-v6-c-menu-toggle--ColumnGap: 0;
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -1326,6 +1326,24 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1326
1326
 
1327
1327
  ```
1328
1328
 
1329
+ ### Placeholder
1330
+
1331
+ ```html
1332
+ <button
1333
+ class="pf-v6-c-menu-toggle pf-m-placeholder"
1334
+ type="button"
1335
+ aria-expanded="false"
1336
+ >
1337
+ <span class="pf-v6-c-menu-toggle__text">Placeholder text</span>
1338
+ <span class="pf-v6-c-menu-toggle__controls">
1339
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1340
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1341
+ </span>
1342
+ </span>
1343
+ </button>
1344
+
1345
+ ```
1346
+
1329
1347
  ## Documentation
1330
1348
 
1331
1349
  ### Accessibility
@@ -1362,3 +1380,4 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1362
1380
  | `.pf-m-success` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the success state. |
1363
1381
  | `.pf-m-warning` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the warning state. |
1364
1382
  | `.pf-m-danger` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the danger state. |
1383
+ | `.pf-m-placeholder` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle text for placeholder styles. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.210",
4
+ "version": "6.0.0-alpha.211",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -16045,9 +16045,14 @@ ul.pf-v6-c-list {
16045
16045
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
16046
16046
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
16047
16047
  --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
16048
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
16049
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
16050
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
16048
16051
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
16049
16052
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
16053
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
16050
16054
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
16055
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
16051
16056
  --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
16052
16057
  --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
16053
16058
  --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -16078,7 +16083,7 @@ ul.pf-v6-c-list {
16078
16083
  --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
16079
16084
  --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
16080
16085
  --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
16081
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
16086
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
16082
16087
  --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
16083
16088
  --pf-v6-c-menu-toggle__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
16084
16089
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
@@ -16113,12 +16118,14 @@ ul.pf-v6-c-list {
16113
16118
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
16114
16119
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
16115
16120
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
16121
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
16116
16122
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
16117
16123
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
16118
16124
  --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
16119
16125
  --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
16120
16126
  --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
16121
16127
  --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
16128
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
16122
16129
  }
16123
16130
 
16124
16131
  .pf-v6-c-menu-toggle {
@@ -16173,6 +16180,7 @@ ul.pf-v6-c-list {
16173
16180
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
16174
16181
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
16175
16182
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
16183
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
16176
16184
  }
16177
16185
  .pf-v6-c-menu-toggle.pf-m-secondary {
16178
16186
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
@@ -16187,6 +16195,7 @@ ul.pf-v6-c-list {
16187
16195
  --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
16188
16196
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
16189
16197
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
16198
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
16190
16199
  }
16191
16200
  .pf-v6-c-menu-toggle.pf-m-full-height {
16192
16201
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
@@ -16225,14 +16234,6 @@ ul.pf-v6-c-list {
16225
16234
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
16226
16235
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
16227
16236
  }
16228
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
16229
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
16230
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
16231
- }
16232
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
16233
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
16234
- pointer-events: none;
16235
- }
16236
16237
  .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
16237
16238
  border: 0;
16238
16239
  }
@@ -16257,6 +16258,20 @@ ul.pf-v6-c-list {
16257
16258
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
16258
16259
  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
16259
16260
  }
16261
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
16262
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
16263
+ }
16264
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
16265
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
16266
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
16267
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
16268
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
16269
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
16270
+ }
16271
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
16272
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
16273
+ pointer-events: none;
16274
+ }
16260
16275
 
16261
16276
  .pf-v6-c-menu-toggle.pf-m-split-button {
16262
16277
  --pf-v6-c-menu-toggle--ColumnGap: 0;
package/patternfly.css CHANGED
@@ -16166,9 +16166,14 @@ ul.pf-v6-c-list {
16166
16166
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
16167
16167
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
16168
16168
  --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
16169
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
16170
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
16171
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
16169
16172
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
16170
16173
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
16174
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
16171
16175
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
16176
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
16172
16177
  --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
16173
16178
  --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
16174
16179
  --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -16199,7 +16204,7 @@ ul.pf-v6-c-list {
16199
16204
  --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
16200
16205
  --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
16201
16206
  --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
16202
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
16207
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
16203
16208
  --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
16204
16209
  --pf-v6-c-menu-toggle__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
16205
16210
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
@@ -16234,12 +16239,14 @@ ul.pf-v6-c-list {
16234
16239
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
16235
16240
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
16236
16241
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
16242
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
16237
16243
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
16238
16244
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
16239
16245
  --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
16240
16246
  --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
16241
16247
  --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
16242
16248
  --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
16249
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
16243
16250
  }
16244
16251
 
16245
16252
  .pf-v6-c-menu-toggle {
@@ -16294,6 +16301,7 @@ ul.pf-v6-c-list {
16294
16301
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
16295
16302
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
16296
16303
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
16304
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
16297
16305
  }
16298
16306
  .pf-v6-c-menu-toggle.pf-m-secondary {
16299
16307
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
@@ -16308,6 +16316,7 @@ ul.pf-v6-c-list {
16308
16316
  --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
16309
16317
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
16310
16318
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
16319
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
16311
16320
  }
16312
16321
  .pf-v6-c-menu-toggle.pf-m-full-height {
16313
16322
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
@@ -16346,14 +16355,6 @@ ul.pf-v6-c-list {
16346
16355
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
16347
16356
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
16348
16357
  }
16349
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
16350
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
16351
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
16352
- }
16353
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
16354
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
16355
- pointer-events: none;
16356
- }
16357
16358
  .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
16358
16359
  border: 0;
16359
16360
  }
@@ -16378,6 +16379,20 @@ ul.pf-v6-c-list {
16378
16379
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
16379
16380
  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
16380
16381
  }
16382
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
16383
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
16384
+ }
16385
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
16386
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
16387
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
16388
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
16389
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
16390
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
16391
+ }
16392
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
16393
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
16394
+ pointer-events: none;
16395
+ }
16381
16396
 
16382
16397
  .pf-v6-c-menu-toggle.pf-m-split-button {
16383
16398
  --pf-v6-c-menu-toggle--ColumnGap: 0;