@patternfly/patternfly 4.179.3 → 4.181.0

package/docs/demos/Tabs/examples/Tabs.md

@@ -1257,7 +1257,7 @@ section: components
   >
     <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
       <div class="pf-c-page__main-body">
-        <h1 class="pf-c-title pf-m-2xl pf-u-mt-md">Overview</h1>
+        <h1 class="pf-c-title pf-m-2xl">Overview</h1>
       </div>
     </section>
     <section class="pf-c-page__main-tabs pf-m-limit-width">
@@ -1300,13 +1300,13 @@ section: components
               <div class="pf-l-grid__item pf-m-6-col-on-md pf-m-8-col-on-xl">
                 <div class="pf-c-card pf-m-full-height">
                   <div class="pf-c-card__header">
-                    <h2 class="pf-c-title pf-m-lg pf-u-font-weight-light">Status</h2>
+                    <h2 class="pf-c-title pf-m-lg">Status</h2>
                   </div>
                   <div class="pf-c-card__body">
                     <div class="pf-l-flex pf-m-column">
                       <div class="pf-l-flex__item">
                         <div
-                          class="pf-c-tabs pf-m-no-border-bottom"
+                          class="pf-c-tabs pf-m-secondary"
                           id="nested-tabs-example-tabs-subtabs"
                         >
                           <ul class="pf-c-tabs__list">
@@ -1409,18 +1409,14 @@ section: components
                   <div class="pf-l-flex__item pf-m-flex-1">
                     <div class="pf-c-card pf-m-full-height">
                       <div class="pf-c-card__header">
-                        <h3
-                          class="pf-c-title pf-m-lg pf-u-font-weight-light"
-                        >Title of card</h3>
+                        <h3 class="pf-c-title pf-m-lg">Title of card</h3>
                       </div>
                     </div>
                   </div>
                   <div class="pf-l-flex__item pf-m-flex-1">
                     <div class="pf-c-card pf-m-full-height">
                       <div class="pf-c-card__header">
-                        <h3
-                          class="pf-c-title pf-m-lg pf-u-font-weight-light"
-                        >Title of card</h3>
+                        <h3 class="pf-c-title pf-m-lg">Title of card</h3>
                       </div>
                     </div>
                   </div>
@@ -5110,7 +5106,7 @@ section: components
         <div class="pf-l-grid pf-m-gutter">
           <div class="pf-l-grid__item">
             <div
-              class="pf-c-tabs pf-m-no-border-bottom pf-m-inset-none pf-m-secondary"
+              class="pf-c-tabs pf-m-inset-none pf-m-secondary"
               id="modal-tabs-example-tabs"
             >
               <ul class="pf-c-tabs__list">
@@ -6709,7 +6705,7 @@ section: components
   >
     <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
       <div class="pf-c-page__main-body">
-        <h1 class="pf-c-title pf-m-2xl pf-u-mt-md">Overview</h1>
+        <h1 class="pf-c-title pf-m-2xl">Overview</h1>
       </div>
     </section>
     <section class="pf-c-page__main-tabs pf-m-limit-width">
@@ -6778,13 +6774,13 @@ section: components
               <div class="pf-l-grid__item pf-m-6-col-on-md pf-m-8-col-on-xl">
                 <div class="pf-c-card pf-m-full-height">
                   <div class="pf-c-card__header">
-                    <h2 class="pf-c-title pf-m-lg pf-u-font-weight-light">Status</h2>
+                    <h2 class="pf-c-title pf-m-lg">Status</h2>
                   </div>
                   <div class="pf-c-card__body">
                     <div class="pf-l-flex pf-m-column">
                       <div class="pf-l-flex__item">
                         <div
-                          class="pf-c-tabs pf-m-no-border-bottom"
+                          class="pf-c-tabs pf-m-secondary"
                           id="gray-tabs-example-tabs-subtabs"
                         >
                           <ul class="pf-c-tabs__list">
@@ -6887,18 +6883,14 @@ section: components
                   <div class="pf-l-flex__item pf-m-flex-1">
                     <div class="pf-c-card pf-m-full-height">
                       <div class="pf-c-card__header">
-                        <h3
-                          class="pf-c-title pf-m-lg pf-u-font-weight-light"
-                        >Title of card</h3>
+                        <h3 class="pf-c-title pf-m-lg">Title of card</h3>
                       </div>
                     </div>
                   </div>
                   <div class="pf-l-flex__item pf-m-flex-1">
                     <div class="pf-c-card pf-m-full-height">
                       <div class="pf-c-card__header">
-                        <h3
-                          class="pf-c-title pf-m-lg pf-u-font-weight-light"
-                        >Title of card</h3>
+                        <h3 class="pf-c-title pf-m-lg">Title of card</h3>
                       </div>
                     </div>
                   </div>

package/docs/demos/Toolbar/examples/Toolbar.md

@@ -29,7 +29,7 @@ section: components
         <div class="pf-c-toolbar__group pf-m-filter-group">
           <div class="pf-c-toolbar__item pf-m-search-filter">
             <div class="pf-c-input-group">
-              <div class="pf-c-select" style="width: 150px">
+              <div class="pf-c-select" style="width: 175px">
                 <span
                   id="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
                   hidden
@@ -59,7 +59,7 @@ section: components
                   role="listbox"
                   aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
                   hidden
-                  style="width: 150px"
+                  style="width: 175px"
                 >
                   <li role="presentation">
                     <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -93,21 +93,21 @@ section: components
                   </li>
                 </ul>
               </div>
-              <input
-                class="pf-c-form-control"
-                id="toolbar-attribute-value-search-filter-desktop-example-textInput11"
-                name="textInput11"
-                type="search"
-                placeholder="Filter by name..."
-                aria-label="Search input example"
-              />
-              <button
-                class="pf-c-button pf-m-control"
-                type="button"
-                aria-label="Search button for search input"
-              >
-                <i class="fas fa-search" aria-hidden="true"></i>
-              </button>
+              <div class="pf-c-search-input">
+                <div class="pf-c-search-input__bar">
+                  <span class="pf-c-search-input__text">
+                    <span class="pf-c-search-input__icon">
+                      <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+                    </span>
+                    <input
+                      class="pf-c-search-input__text-input"
+                      type="text"
+                      placeholder="Filter by name"
+                      aria-label="Filter by name"
+                    />
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -383,7 +383,7 @@ section: components
       <div class="pf-c-toolbar__group pf-m-filter-group">
         <div class="pf-c-toolbar__item">
           <div class="pf-c-input-group">
-            <div class="pf-c-select" style="width: 150px">
+            <div class="pf-c-select" style="width: 175px">
               <span
                 id="toolbar-attribute-value-search-filter-mobile-example-select-name-expanded-label"
                 hidden
@@ -413,7 +413,7 @@ section: components
                 role="listbox"
                 aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-expanded-label"
                 hidden
-                style="width: 150px"
+                style="width: 175px"
               >
                 <li role="presentation">
                   <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -444,21 +444,21 @@ section: components
                 </li>
               </ul>
             </div>
-            <input
-              class="pf-c-form-control"
-              id="toolbar-attribute-value-search-filter-mobile-example-textInput12"
-              name="textInput11"
-              type="search"
-              placeholder="Filter by name..."
-              aria-label="Search input example"
-            />
-            <button
-              class="pf-c-button pf-m-control"
-              type="button"
-              aria-label="Search button for search input"
-            >
-              <i class="fas fa-search" aria-hidden="true"></i>
-            </button>
+            <div class="pf-c-search-input">
+              <div class="pf-c-search-input__bar">
+                <span class="pf-c-search-input__text">
+                  <span class="pf-c-search-input__icon">
+                    <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+                  </span>
+                  <input
+                    class="pf-c-search-input__text-input"
+                    type="text"
+                    placeholder="Filter by name"
+                    aria-label="Filter by name"
+                  />
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -491,7 +491,7 @@ section: components
         </div>
         <div class="pf-c-toolbar__group pf-m-filter-group">
           <div class="pf-c-toolbar__item">
-            <div class="pf-c-select" style="width: 150px">
+            <div class="pf-c-select" style="width: 175px">
               <span
                 id="toolbar-attribute-value-single-select-filter-desktop-example-select-status-label"
                 hidden
@@ -521,7 +521,7 @@ section: components
                 role="listbox"
                 aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-select-status-label"
                 hidden
-                style="width: 150px"
+                style="width: 175px"
               >
                 <li role="presentation">
                   <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -1033,7 +1033,7 @@ section: components
         </div>
         <div class="pf-c-toolbar__group pf-m-filter-group">
           <div class="pf-c-toolbar__item">
-            <div class="pf-c-select" style="width: 150px">
+            <div class="pf-c-select" style="width: 175px">
               <span
                 id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-label"
                 hidden
@@ -1063,7 +1063,7 @@ section: components
                 role="listbox"
                 aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-label"
                 hidden
-                style="width: 150px"
+                style="width: 175px"
               >
                 <li role="presentation">
                   <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -2025,7 +2025,7 @@ section: components
               <div class="pf-c-toolbar__group pf-m-filter-group">
                 <div class="pf-c-toolbar__item pf-m-search-filter">
                   <div class="pf-c-input-group">
-                    <div class="pf-c-select" style="width: 150px">
+                    <div class="pf-c-select" style="width: 175px">
                       <span
                         id="toolbar-pagination-management-mobile-example-select-name-label"
                         hidden
@@ -2055,7 +2055,7 @@ section: components
                         role="listbox"
                         aria-labelledby="toolbar-pagination-management-mobile-example-select-name-label"
                         hidden
-                        style="width: 150px"
+                        style="width: 175px"
                       >
                         <li role="presentation">
                           <button
@@ -2095,21 +2095,21 @@ section: components
                         </li>
                       </ul>
                     </div>
-                    <input
-                      class="pf-c-form-control"
-                      id="toolbar-pagination-management-mobile-example-textInput11"
-                      name="textInput11"
-                      type="search"
-                      placeholder="Filter by name..."
-                      aria-label="Search input example"
-                    />
-                    <button
-                      class="pf-c-button pf-m-control"
-                      type="button"
-                      aria-label="Search button for search input"
-                    >
-                      <i class="fas fa-search" aria-hidden="true"></i>
-                    </button>
+                    <div class="pf-c-search-input">
+                      <div class="pf-c-search-input__bar">
+                        <span class="pf-c-search-input__text">
+                          <span class="pf-c-search-input__icon">
+                            <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+                          </span>
+                          <input
+                            class="pf-c-search-input__text-input"
+                            type="text"
+                            placeholder="Filter by name"
+                            aria-label="Filter by name"
+                          />
+                        </span>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>

package/docs/demos/Wizard/examples/Wizard.md

@@ -25,7 +25,9 @@ wrapperTag: div
           </button>
           <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
 
-          <p class="pf-c-wizard__description">Here is where the description goes</p>
+          <div
+            class="pf-c-wizard__description"
+          >Here is where the description goes</div>
         </div>
         <button
           aria-label="Wizard Header Toggle"
@@ -268,7 +270,9 @@ wrapperTag: div
           </button>
           <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
 
-          <p class="pf-c-wizard__description">Here is where the description goes</p>
+          <div
+            class="pf-c-wizard__description"
+          >Here is where the description goes</div>
         </div>
         <button
           aria-label="Wizard Header Toggle"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.179.3",
+  "version": "4.181.0",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-reset.css

@@ -12680,8 +12680,8 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
   --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
-  --pf-c-dropdown__toggle-image--MarginTop: var(--pf-global--spacer--xs);
-  --pf-c-dropdown__toggle-image--MarginBottom: var(--pf-global--spacer--xs);
+  --pf-c-dropdown__toggle-image--MarginTop: 0;
+  --pf-c-dropdown__toggle-image--MarginBottom: 0;
   --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -12963,9 +12963,11 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-dropdown__toggle-image {
   display: inline-flex;
   flex-shrink: 0;
+  align-self: center;
   margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
   margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
   margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
+  line-height: 1;
 }
 .pf-c-dropdown__toggle-image:last-child {
   --pf-c-dropdown__toggle-image--MarginRight: 0;
@@ -14052,6 +14054,18 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-form-control--textarea--success--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
   --pf-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
   --pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
+  --pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#success");
+  --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#warning");
+  --pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#invalid");
+  --pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#select");
+  --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#search");
+  --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#calendar");
+  --pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#clock");
+  --pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize);
+  --pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 7px);
+  --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
+  --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + 0.0625rem);
+  --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
   color: var(--pf-global--Color--100);
   width: var(--pf-c-form-control--Width);
   padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
@@ -14165,6 +14179,20 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-form-control.pf-m-icon.pf-m-clock {
   --pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-clock--BackgroundUrl);
 }
+.pf-c-form-control.pf-m-icon-sprite {
+  --pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
+  --pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
+  --pf-c-form-control--m-invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl);
+  --pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
+  --pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
+  --pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
+  --pf-c-form-control--m-clock--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl);
+  --pf-c-form-control__select--BackgroundSize: var(--pf-c-form-control--m-icon-sprite__select--BackgroundSize);
+  --pf-c-form-control__select--BackgroundPositionX: var(--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX);
+  --pf-c-form-control__select--success--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition);
+  --pf-c-form-control__select--m-warning--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition);
+  --pf-c-form-control__select--invalid--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition);
+}
 select.pf-c-form-control {
   --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
   --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
@@ -16515,6 +16543,7 @@ ul.pf-c-list {
   --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
   --pf-c-menu__item-icon--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-menu__item-check--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu__item-toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-menu__item-toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-menu__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
@@ -16877,6 +16906,9 @@ ul.pf-c-list {
 .pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
   opacity: 1;
 }
+label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
+  cursor: pointer;
+}
 
 .pf-c-menu__item-main {
   display: flex;
@@ -16921,6 +16953,12 @@ ul.pf-c-list {
   margin-right: var(--pf-c-menu__item-icon--MarginRight);
 }
 
+.pf-c-menu__item-check {
+  display: flex;
+  align-items: center;
+  margin-right: var(--pf-c-menu__item-check--MarginRight);
+}
+
 .pf-c-menu__item-toggle-icon {
   padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
   padding-left: var(--pf-c-menu__item-toggle-icon--PaddingLeft);
@@ -17054,7 +17092,6 @@ ul.pf-c-list {
   --pf-c-menu-toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
   --pf-c-menu-toggle--m-plain--m-expanded--Color: var(--pf-global--Color--100);
   --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-menu-toggle__image--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -17146,34 +17183,32 @@ ul.pf-c-list {
   --pf-c-menu-toggle__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain__toggle-icon--Color);
 }
 .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
-  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
-  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
-  --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
-  --pf-c-menu-toggle--active--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
-  --pf-c-menu-toggle--disabled--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
   --pf-c-menu-toggle--PaddingRight: var(--pf-c-menu-toggle--m-plain--PaddingRight);
   --pf-c-menu-toggle--PaddingLeft: var(--pf-c-menu-toggle--m-plain--PaddingLeft);
   --pf-c-menu-toggle--disabled--BackgroundColor: transparent;
-  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
   display: inline-block;
+  color: var(--pf-c-menu-toggle--m-plain--Color);
 }
 .pf-c-menu-toggle:hover {
   --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--hover--BackgroundColor);
   --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--hover--after--BorderBottomWidth);
   --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--hover--after--BorderBottomColor);
   --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
+  --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
 }
 .pf-c-menu-toggle:focus {
   --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
   --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
   --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
   --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color);
+  --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--focus--Color);
 }
 .pf-c-menu-toggle:active {
   --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--active--BackgroundColor);
   --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--active--after--BorderBottomWidth);
   --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--active--after--BorderBottomColor);
   --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--active__toggle-icon--Color);
+  --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--active--Color);
 }
 .pf-c-menu-toggle.pf-m-expanded {
   --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-expanded--Color);
@@ -17181,10 +17216,12 @@ ul.pf-c-list {
   --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth);
   --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomColor);
   --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color);
+  --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
 }
 .pf-c-menu-toggle:disabled {
   --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--disabled--Color);
   --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--disabled--BackgroundColor);
+  --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
   pointer-events: none;
 }
 .pf-c-menu-toggle.pf-m-primary::before, .pf-c-menu-toggle.pf-m-primary::after, .pf-c-menu-toggle.pf-m-plain::before, .pf-c-menu-toggle.pf-m-plain::after, .pf-c-menu-toggle:disabled::before, .pf-c-menu-toggle:disabled::after {
@@ -17202,7 +17239,11 @@ ul.pf-c-list {
 }
 
 .pf-c-menu-toggle__icon {
+  display: inline-flex;
+  align-self: center;
+  flex-shrink: 0;
   margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
+  line-height: 1;
 }
 
 .pf-c-menu-toggle__text {
@@ -20954,6 +20995,7 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-search-input__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
   position: relative;
+  width: 100%;
 }
 
 .pf-c-search-input__bar {