@patternfly/patternfly 4.201.1 → 4.202.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/RELEASE-NOTES.md +28 -1
  2. package/components/Masthead/masthead.css +1 -4
  3. package/components/Masthead/masthead.scss +1 -5
  4. package/components/MenuToggle/menu-toggle.css +16 -12
  5. package/components/MenuToggle/menu-toggle.scss +18 -15
  6. package/package.json +1 -1
  7. package/patternfly-no-reset.css +17 -16
  8. package/patternfly.css +17 -16
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/RELEASE-NOTES.md CHANGED
@@ -3,6 +3,33 @@ id: Release notes
3
3
  section: developer-resources
4
4
  releaseNoteTOC: true
5
5
  ---
6
+ ## 2022.08 release notes (2022-06-24)
7
+ Packages released:
8
+ - [@patternfly/patternfly@v4.202.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.202.1)
9
+
10
+ ### Components
11
+ - **Card:**
12
+ - Added styling to cards when their hidden input is focused ([#4902](https://github.com/patternfly/patternfly/pull/4902))
13
+ - Fixed dark theme card, light bg contrast ([#4903](https://github.com/patternfly/patternfly/pull/4903))
14
+ - Forced dark theme dark section card bg color ([#4913](https://github.com/patternfly/patternfly/pull/4913))
15
+ - **Description list:** Added display and card mods ([#4895](https://github.com/patternfly/patternfly/pull/4895))
16
+ - **Drawer:** Removed duplicate body element on jumplinks demo ([#4910](https://github.com/patternfly/patternfly/pull/4910))
17
+ - **Dropdown:** Added secondary split toggle ([#4897](https://github.com/patternfly/patternfly/pull/4897))
18
+ - **Masthead:** Fixed default/dynamic viewport based inset when using resize observer ([#4919](https://github.com/patternfly/patternfly/pull/4919))
19
+ - **Menu:** Fixed scrollbar on flyout variant ([#4892](https://github.com/patternfly/patternfly/pull/4892))
20
+ - **Menu toggle:** Updated typeahead variant layout/spacing ([#4750](https://github.com/patternfly/patternfly/pull/4750))
21
+ - **Notification badge:** Fixed documentation links ([#4891](https://github.com/patternfly/patternfly/pull/4891))
22
+ - **Progress stepper:**
23
+ - Added horizontal/vertical breakpoint support ([#4901](https://github.com/patternfly/patternfly/pull/4901))
24
+ - Used button for step title help text ([#4912](https://github.com/patternfly/patternfly/pull/4912))
25
+ - **Table:**
26
+ - Added tr border to sticky nested table header ([#4857](https://github.com/patternfly/patternfly/pull/4857))
27
+ - Removed bullseye layout in demos ([#4904](https://github.com/patternfly/patternfly/pull/4904))
28
+ - **Tabs:** Added expandable overflow styling ([#4876](https://github.com/patternfly/patternfly/pull/4876))
29
+ - **Page:** Added height breakpoints for sticky top and bottom modifiers ([#4905](https://github.com/patternfly/patternfly/pull/4905))
30
+ - **Wizard:** Moved footer to sibling of drawer ([#4896](https://github.com/patternfly/patternfly/pull/4896))
31
+
32
+
6
33
  ## 2022.07 release notes (2022-06-03)
7
34
  Packages released:
8
35
  - [@patternfly/patternfly@v4.196.7](https://www.npmjs.com/package/@patternfly/patternfly/v/4.196.7)
@@ -23,7 +50,7 @@ Packages released:
23
50
  - **Theme:**
24
51
  * Imported dark theme per component, added new global var ([#4864](https://github.com/patternfly/patternfly/pull/4864))
25
52
  * Updated dark theme default text color ([#4875](https://github.com/patternfly/patternfly/pull/4875))
26
- * Updated build process to copy files from new SCSS location ([#4877](https://github.com/patternfly/patternfly/issues/4877))
53
+ * Updated build process to copy files from new SCSS location ([#4878](https://github.com/patternfly/patternfly/issues/4878))
27
54
  - **Utilities:** Added font family utilities ([#4868](https://github.com/patternfly/patternfly/pull/4868))
28
55
 
29
56
 
package/components/Masthead/masthead.css CHANGED
@@ -167,13 +167,10 @@
167
167
  }
168
168
  }
169
169
  @media screen and (min-width: 1200px) {
170
- .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
170
+ .pf-c-masthead {
171
171
  --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
172
172
  }
173
173
  }
174
- .pf-c-page:where(.pf-m-breakpoint-xl) .pf-c-masthead {
175
- --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
176
- }
177
174
  .pf-c-masthead.pf-m-light {
178
175
  color: var(--pf-global--Color--100);
179
176
  --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
package/components/Masthead/masthead.scss CHANGED
@@ -156,13 +156,9 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
156
156
  @media screen and (min-width: $pf-global--breakpoint--md) {
157
157
  @include pf-c-masthead--m-display-inline;
158
158
  }
159
-
160
- @media screen and (min-width: $pf-global--breakpoint--xl) {
161
- --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
162
- }
163
159
  }
164
160
 
165
- .pf-c-page:where(.pf-m-breakpoint-xl) & {
161
+ @media screen and (min-width: $pf-global--breakpoint--xl) {
166
162
  --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
167
163
  }
168
164
 
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -66,6 +66,8 @@
66
66
  --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
67
67
  --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
68
68
  --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
69
+ --pf-c-menu-toggle__controls--MarginLeft: auto;
70
+ --pf-c-menu-toggle__controls--MarginRight: 0;
69
71
  --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
70
72
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
71
73
  --pf-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -106,10 +108,8 @@
106
108
  --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
107
109
  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
108
110
  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
109
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
110
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
111
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
112
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
111
+ --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
112
+ --pf-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-global--spacer--sm);
113
113
  --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
114
114
  position: relative;
115
115
  display: inline-flex;
@@ -242,13 +242,18 @@
242
242
  --pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
243
243
  height: 100%;
244
244
  }
245
+ .pf-c-menu-toggle.pf-m-typeahead {
246
+ --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-c-menu-toggle--m-typeahead__controls--MarginRight);
247
+ --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-c-menu-toggle--m-typeahead__controls--MarginLeft);
248
+ align-items: stretch;
249
+ padding: 0;
250
+ }
245
251
  .pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
246
252
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
253
+ --pf-c-text-input-group__utilities--MarginRight: 0;
247
254
  flex: 1;
248
- margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
249
255
  }
250
256
  .pf-c-menu-toggle.pf-m-split-button {
251
- --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
252
257
  padding: 0;
253
258
  }
254
259
  .pf-c-menu-toggle.pf-m-split-button > * {
@@ -352,14 +357,12 @@
352
357
  }
353
358
 
354
359
  .pf-c-menu-toggle__button {
360
+ --pf-c-menu-toggle__controls--PaddingLeft: 0;
361
+ --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
362
+ --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
355
363
  color: inherit;
356
364
  border: 0;
357
365
  }
358
- .pf-c-menu-toggle__button .pf-c-menu-toggle__controls {
359
- padding-left: 0;
360
- margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
361
- margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
362
- }
363
366
 
364
367
  .pf-c-menu-toggle__icon {
365
368
  display: inline-flex;
@@ -384,7 +387,8 @@
384
387
 
385
388
  .pf-c-menu-toggle__controls {
386
389
  padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
387
- margin-left: auto;
390
+ margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
391
+ margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
388
392
  }
389
393
 
390
394
  .pf-c-menu-toggle__toggle-icon {
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -91,8 +91,10 @@
91
91
  // Count
92
92
  --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
93
93
 
94
- // Controls
94
+ // Controls -- update element/vars to "control" in breaking change
95
95
  --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
96
+ --pf-c-menu-toggle__controls--MarginLeft: auto;
97
+ --pf-c-menu-toggle__controls--MarginRight: 0;
96
98
 
97
99
  // Toggle icon
98
100
  --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -151,10 +153,8 @@
151
153
  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
152
154
 
153
155
  // Typeahead
154
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
155
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
156
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
157
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
156
+ --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
157
+ --pf-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-global--spacer--sm);
158
158
  --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
159
159
 
160
160
  position: relative;
@@ -324,17 +324,21 @@
324
324
  }
325
325
 
326
326
  &.pf-m-typeahead {
327
+ --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-c-menu-toggle--m-typeahead__controls--MarginRight);
328
+ --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-c-menu-toggle--m-typeahead__controls--MarginLeft);
329
+
330
+ align-items: stretch;
331
+ padding: 0;
332
+
327
333
  .pf-c-text-input-group {
328
334
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
335
+ --pf-c-text-input-group__utilities--MarginRight: 0;
329
336
 
330
337
  flex: 1;
331
- margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
332
338
  }
333
339
  }
334
340
 
335
341
  &.pf-m-split-button {
336
- --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
337
-
338
342
  padding: 0; // pass padding to children
339
343
 
340
344
  > * {
@@ -492,14 +496,12 @@
492
496
  }
493
497
 
494
498
  .pf-c-menu-toggle__button {
499
+ --pf-c-menu-toggle__controls--PaddingLeft: 0;
500
+ --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
501
+ --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
502
+
495
503
  color: inherit;
496
504
  border: 0;
497
-
498
- .pf-c-menu-toggle__controls {
499
- padding-left: 0;
500
- margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
501
- margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
502
- }
503
505
  }
504
506
 
505
507
  .pf-c-menu-toggle__icon {
@@ -524,7 +526,8 @@
524
526
 
525
527
  .pf-c-menu-toggle__controls {
526
528
  padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
527
- margin-left: auto;
529
+ margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
530
+ margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
528
531
  }
529
532
 
530
533
  .pf-c-menu-toggle__toggle-icon {
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": "4.201.1",
4
+ "version": "4.202.1",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -17655,13 +17655,10 @@ ul.pf-c-list {
17655
17655
  }
17656
17656
  }
17657
17657
  @media screen and (min-width: 1200px) {
17658
- .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
17658
+ .pf-c-masthead {
17659
17659
  --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
17660
17660
  }
17661
17661
  }
17662
- .pf-c-page:where(.pf-m-breakpoint-xl) .pf-c-masthead {
17663
- --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
17664
- }
17665
17662
  .pf-c-masthead.pf-m-light {
17666
17663
  color: var(--pf-global--Color--100);
17667
17664
  --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
@@ -18861,6 +18858,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18861
18858
  --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
18862
18859
  --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
18863
18860
  --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
18861
+ --pf-c-menu-toggle__controls--MarginLeft: auto;
18862
+ --pf-c-menu-toggle__controls--MarginRight: 0;
18864
18863
  --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
18865
18864
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
18866
18865
  --pf-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -18901,10 +18900,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18901
18900
  --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
18902
18901
  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
18903
18902
  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
18904
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
18905
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
18906
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
18907
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
18903
+ --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
18904
+ --pf-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-global--spacer--sm);
18908
18905
  --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
18909
18906
  position: relative;
18910
18907
  display: inline-flex;
@@ -19037,13 +19034,18 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19037
19034
  --pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
19038
19035
  height: 100%;
19039
19036
  }
19037
+ .pf-c-menu-toggle.pf-m-typeahead {
19038
+ --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-c-menu-toggle--m-typeahead__controls--MarginRight);
19039
+ --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-c-menu-toggle--m-typeahead__controls--MarginLeft);
19040
+ align-items: stretch;
19041
+ padding: 0;
19042
+ }
19040
19043
  .pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
19041
19044
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
19045
+ --pf-c-text-input-group__utilities--MarginRight: 0;
19042
19046
  flex: 1;
19043
- margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
19044
19047
  }
19045
19048
  .pf-c-menu-toggle.pf-m-split-button {
19046
- --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
19047
19049
  padding: 0;
19048
19050
  }
19049
19051
  .pf-c-menu-toggle.pf-m-split-button > * {
@@ -19147,14 +19149,12 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19147
19149
  }
19148
19150
 
19149
19151
  .pf-c-menu-toggle__button {
19152
+ --pf-c-menu-toggle__controls--PaddingLeft: 0;
19153
+ --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
19154
+ --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
19150
19155
  color: inherit;
19151
19156
  border: 0;
19152
19157
  }
19153
- .pf-c-menu-toggle__button .pf-c-menu-toggle__controls {
19154
- padding-left: 0;
19155
- margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
19156
- margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
19157
- }
19158
19158
 
19159
19159
  .pf-c-menu-toggle__icon {
19160
19160
  display: inline-flex;
@@ -19179,7 +19179,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19179
19179
 
19180
19180
  .pf-c-menu-toggle__controls {
19181
19181
  padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
19182
- margin-left: auto;
19182
+ margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
19183
+ margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
19183
19184
  }
19184
19185
 
19185
19186
  .pf-c-menu-toggle__toggle-icon {
package/patternfly.css CHANGED
@@ -17782,13 +17782,10 @@ ul.pf-c-list {
17782
17782
  }
17783
17783
  }
17784
17784
  @media screen and (min-width: 1200px) {
17785
- .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
17785
+ .pf-c-masthead {
17786
17786
  --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
17787
17787
  }
17788
17788
  }
17789
- .pf-c-page:where(.pf-m-breakpoint-xl) .pf-c-masthead {
17790
- --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
17791
- }
17792
17789
  .pf-c-masthead.pf-m-light {
17793
17790
  color: var(--pf-global--Color--100);
17794
17791
  --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
@@ -18988,6 +18985,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18988
18985
  --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
18989
18986
  --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
18990
18987
  --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
18988
+ --pf-c-menu-toggle__controls--MarginLeft: auto;
18989
+ --pf-c-menu-toggle__controls--MarginRight: 0;
18991
18990
  --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
18992
18991
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
18993
18992
  --pf-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -19028,10 +19027,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19028
19027
  --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
19029
19028
  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
19030
19029
  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
19031
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
19032
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
19033
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
19034
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
19030
+ --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
19031
+ --pf-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-global--spacer--sm);
19035
19032
  --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
19036
19033
  position: relative;
19037
19034
  display: inline-flex;
@@ -19164,13 +19161,18 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19164
19161
  --pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
19165
19162
  height: 100%;
19166
19163
  }
19164
+ .pf-c-menu-toggle.pf-m-typeahead {
19165
+ --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-c-menu-toggle--m-typeahead__controls--MarginRight);
19166
+ --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-c-menu-toggle--m-typeahead__controls--MarginLeft);
19167
+ align-items: stretch;
19168
+ padding: 0;
19169
+ }
19167
19170
  .pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
19168
19171
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
19172
+ --pf-c-text-input-group__utilities--MarginRight: 0;
19169
19173
  flex: 1;
19170
- margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
19171
19174
  }
19172
19175
  .pf-c-menu-toggle.pf-m-split-button {
19173
- --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
19174
19176
  padding: 0;
19175
19177
  }
19176
19178
  .pf-c-menu-toggle.pf-m-split-button > * {
@@ -19274,14 +19276,12 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19274
19276
  }
19275
19277
 
19276
19278
  .pf-c-menu-toggle__button {
19279
+ --pf-c-menu-toggle__controls--PaddingLeft: 0;
19280
+ --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
19281
+ --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
19277
19282
  color: inherit;
19278
19283
  border: 0;
19279
19284
  }
19280
- .pf-c-menu-toggle__button .pf-c-menu-toggle__controls {
19281
- padding-left: 0;
19282
- margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
19283
- margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
19284
- }
19285
19285
 
19286
19286
  .pf-c-menu-toggle__icon {
19287
19287
  display: inline-flex;
@@ -19306,7 +19306,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19306
19306
 
19307
19307
  .pf-c-menu-toggle__controls {
19308
19308
  padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
19309
- margin-left: auto;
19309
+ margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
19310
+ margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
19310
19311
  }
19311
19312
 
19312
19313
  .pf-c-menu-toggle__toggle-icon {