@patternfly/patternfly 4.139.1 → 4.141.0

package/docs/components/Select/examples/Select.md

@@ -603,7 +603,7 @@ The single select should be used when the user is selecting an option from a lis
         type="text"
         id="select-single-typeahead-expanded-typeahead"
         aria-label="Type to filter"
-        value="New"
+        placeholder="New"
       />
     </div>
     <button
@@ -674,7 +674,7 @@ The single select should be used when the user is selecting an option from a lis
         type="text"
         id="select-single-typeahead-expanded-selected-typeahead"
         aria-label="Type to filter"
-        value="New Mexico"
+        placeholder="New Mexico"
       />
     </div>
     <button
@@ -817,6 +817,85 @@ The single select should be used when the user is selecting an option from a lis
 
 ```
 
+### Invalid with typeahead
+
+```html
+<div class="pf-c-select pf-m-invalid">
+  <span id="select-single-typeahead-invalid-label" hidden>Choose a state</span>
+
+  <div class="pf-c-select__toggle pf-m-typeahead">
+    <div class="pf-c-select__toggle-wrapper">
+      <input
+        class="pf-c-form-control pf-c-select__toggle-typeahead"
+        type="text"
+        id="select-single-typeahead-invalid-typeahead"
+        aria-invalid="true"
+        value="Invalid"
+        aria-label="Type to filter"
+        placeholder="Choose a state"
+      />
+    </div>
+    <span class="pf-c-select__toggle-status-icon">
+      <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+    </span>
+    <button
+      class="pf-c-button pf-m-plain pf-c-select__toggle-button"
+      type="button"
+      id="select-single-typeahead-invalid-toggle"
+      aria-haspopup="true"
+      aria-expanded="false"
+      aria-labelledby="select-single-typeahead-invalid-label select-single-typeahead-invalid-toggle"
+      aria-label="Select"
+    >
+      <i class="fas fa-caret-down pf-c-select__toggle-arrow" aria-hidden="true"></i>
+    </button>
+  </div>
+
+  <ul
+    class="pf-c-select__menu"
+    aria-labelledby="select-single-typeahead-invalid-label"
+    role="listbox"
+    hidden
+  >
+    <li role="presentation">
+      <button class="pf-c-select__menu-item" role="option">Alabama</button>
+    </li>
+    <li role="presentation">
+      <button class="pf-c-select__menu-item" role="option">Florida</button>
+    </li>
+    <li role="presentation">
+      <button class="pf-c-select__menu-item" role="option">
+        New
+        &nbsp;Jersey
+      </button>
+    </li>
+    <li role="presentation">
+      <button
+        class="pf-c-select__menu-item pf-m-selected"
+        role="option"
+        aria-selected="true"
+      >
+        New
+        &nbsp;Mexico
+        <span class="pf-c-select__menu-item-icon">
+          <i class="fas fa-check" aria-hidden="true"></i>
+        </span>
+      </button>
+    </li>
+    <li role="presentation">
+      <button class="pf-c-select__menu-item" role="option">
+        New
+        &nbsp;York
+      </button>
+    </li>
+    <li role="presentation">
+      <button class="pf-c-select__menu-item" role="option">North Carolina</button>
+    </li>
+  </ul>
+</div>
+
+```
+
 The single select typeahead should be used when the user is selecting one option from a list of items with the option to narrow the list by typing from the keyboard. Selected items are removed from the list. The user can clear the selection and restore the placeholder text.
 
 ### Accessibility
@@ -1013,7 +1092,7 @@ The single select typeahead should be used when the user is selecting one option
         type="text"
         id="select-multi-typeahead-expanded-typeahead"
         aria-label="Type to filter"
-        value="Choose states"
+        placeholder="Choose states"
       />
     </div>
     <button
@@ -1146,7 +1225,7 @@ The single select typeahead should be used when the user is selecting one option
         type="text"
         id="select-multi-typeahead-expanded-selected-typeahead"
         aria-label="Type to filter"
-        value="New"
+        placeholder="New"
       />
     </div>
     <button
@@ -1191,6 +1270,173 @@ The single select typeahead should be used when the user is selecting one option
 
 ```
 
+### Multi with typeahead invalid
+
+```html
+<div class="pf-c-select pf-m-expanded pf-m-invalid">
+  <span id="select-multi-typeahead-invalid-label" hidden>Choose states</span>
+
+  <div class="pf-c-select__toggle pf-m-typeahead">
+    <div class="pf-c-select__toggle-wrapper">
+      <div class="pf-c-chip-group">
+        <div class="pf-c-chip-group__main">
+          <ul
+            class="pf-c-chip-group__list"
+            role="list"
+            aria-label="Chip group list"
+          >
+            <li class="pf-c-chip-group__list-item">
+              <div class="pf-c-chip">
+                <span
+                  class="pf-c-chip__text"
+                  id="select-multi-typeahead-invalid-chip_one"
+                >Arkansas</span>
+                <button
+                  class="pf-c-button pf-m-plain"
+                  type="button"
+                  aria-labelledby="remove_select-multi-typeahead-invalid_chip_one select-multi-typeahead-invalid-chip_two"
+                  aria-label="Remove"
+                  id="remove_select-multi-typeahead-invalid_chip_one"
+                >
+                  <i class="fas fa-times" aria-hidden="true"></i>
+                </button>
+              </div>
+            </li>
+            <li class="pf-c-chip-group__list-item">
+              <div class="pf-c-chip">
+                <span
+                  class="pf-c-chip__text"
+                  id="select-multi-typeahead-invalid-chip_two"
+                >Massachusetts</span>
+                <button
+                  class="pf-c-button pf-m-plain"
+                  type="button"
+                  aria-labelledby="remove_select-multi-typeahead-invalid_chip_two select-multi-typeahead-invalid-chip_two"
+                  aria-label="Remove"
+                  id="remove_select-multi-typeahead-invalid_chip_two"
+                >
+                  <i class="fas fa-times" aria-hidden="true"></i>
+                </button>
+              </div>
+            </li>
+            <li class="pf-c-chip-group__list-item">
+              <div class="pf-c-chip">
+                <span
+                  class="pf-c-chip__text"
+                  id="select-multi-typeahead-invalid-chip_three"
+                >New Mexico</span>
+                <button
+                  class="pf-c-button pf-m-plain"
+                  type="button"
+                  aria-labelledby="remove_select-multi-typeahead-invalid_chip_three select-multi-typeahead-invalid-chip_three"
+                  aria-label="Remove"
+                  id="remove_select-multi-typeahead-invalid_chip_three"
+                >
+                  <i class="fas fa-times" aria-hidden="true"></i>
+                </button>
+              </div>
+            </li>
+            <li class="pf-c-chip-group__list-item">
+              <div class="pf-c-chip">
+                <span
+                  class="pf-c-chip__text"
+                  id="select-multi-typeahead-invalid-chip_four"
+                >Ohio</span>
+                <button
+                  class="pf-c-button pf-m-plain"
+                  type="button"
+                  aria-labelledby="remove_select-multi-typeahead-invalid_chip_four select-multi-typeahead-invalid-chip_four"
+                  aria-label="Remove"
+                  id="remove_select-multi-typeahead-invalid_chip_four"
+                >
+                  <i class="fas fa-times" aria-hidden="true"></i>
+                </button>
+              </div>
+            </li>
+            <li class="pf-c-chip-group__list-item">
+              <div class="pf-c-chip">
+                <span
+                  class="pf-c-chip__text"
+                  id="select-multi-typeahead-invalid-chip_five"
+                >Washington</span>
+                <button
+                  class="pf-c-button pf-m-plain"
+                  type="button"
+                  aria-labelledby="remove_select-multi-typeahead-invalid_chip_five select-multi-typeahead-invalid-chip_five"
+                  aria-label="Remove"
+                  id="remove_select-multi-typeahead-invalid_chip_five"
+                >
+                  <i class="fas fa-times" aria-hidden="true"></i>
+                </button>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <input
+        class="pf-c-form-control pf-c-select__toggle-typeahead"
+        type="text"
+        id="select-multi-typeahead-invalid-typeahead"
+        aria-invalid="true"
+        value="Invalid"
+        aria-label="Type to filter"
+        placeholder="Choose states"
+      />
+    </div>
+    <span class="pf-c-select__toggle-status-icon">
+      <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+    </span>
+    <button
+      class="pf-c-button pf-m-plain pf-c-select__toggle-clear"
+      type="button"
+      aria-label="Clear all"
+    >
+      <i class="fas fa-times-circle" aria-hidden="true"></i>
+    </button>
+    <button
+      class="pf-c-button pf-m-plain pf-c-select__toggle-button"
+      type="button"
+      id="select-multi-typeahead-invalid-toggle"
+      aria-haspopup="true"
+      aria-expanded="true"
+      aria-labelledby="select-multi-typeahead-invalid-label select-multi-typeahead-invalid-toggle"
+      aria-label="Select"
+    >
+      <i class="fas fa-caret-down pf-c-select__toggle-arrow" aria-hidden="true"></i>
+    </button>
+  </div>
+
+  <ul
+    class="pf-c-select__menu"
+    aria-labelledby="select-multi-typeahead-invalid-label"
+    role="listbox"
+  >
+    <li role="presentation">
+      <button class="pf-c-select__menu-item" role="option">Alabama</button>
+    </li>
+    <li role="presentation">
+      <button class="pf-c-select__menu-item" role="option">Florida</button>
+    </li>
+    <li role="presentation">
+      <button class="pf-c-select__menu-item" role="option">
+        New
+        &nbsp;Jersey
+      </button>
+    </li>
+    <li role="presentation">
+      <button class="pf-c-select__menu-item" role="option">
+        New
+        &nbsp;York
+      </button>
+    </li>
+    <li role="presentation">
+      <button class="pf-c-select__menu-item" role="option">North Carolina</button>
+    </li>
+  </ul>
+</div>
+
+```
+
 The multiselect should be used when the user is selecting multiple items from a list. The user can narrow the list by typing from the keyboard. The List updates while typing. Selected items create a new chip and are removed from the list. The user may clear selections individually or all at once to restore the placeholder.
 
 ### Accessibility

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.139.1",
+  "version": "4.141.0",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -33,10 +33,9 @@
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^16.40.1",
     "@patternfly/patternfly-a11y": "4.2.1",
-    "@patternfly/react-charts": "6.15.14",
-    "@patternfly/react-code-editor": "4.3.22",
-    "@patternfly/react-core": "4.147.0",
-    "@patternfly/react-table": "4.29.37",
+    "@patternfly/react-charts": "6.15.23",
+    "@patternfly/react-code-editor": "4.3.61",
+    "@patternfly/react-table": "4.30.3",
     "@starptech/prettyhtml": "^0.10.0",
     "babel-eslint": "^8.2.3",
     "cheerio": "^1.0.0-rc.3",
@@ -79,7 +78,7 @@
     "stylelint-scss": "^3.18.0",
     "stylelint-value-no-unknown-custom-properties": "^3.0.0",
     "surge": "^0.21.3",
-    "theme-patternfly-org": "0.6.39",
+    "theme-patternfly-org": "0.7.3",
     "unified": "^9.2.0",
     "webpack": "^4.43.0"
   },

package/patternfly-no-reset.css

@@ -6295,6 +6295,12 @@ html {
   --pf-c-banner--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-banner--Color: var(--pf-global--Color--100);
   --pf-c-banner--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
+  --pf-c-banner--link--Color: var(--pf-c-banner--Color);
+  --pf-c-banner--link--TextDecoration: underline;
+  --pf-c-banner--link--hover--Color: var(--pf-c-banner--Color);
+  --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
+  --pf-c-banner--link--disabled--TextDecoration: none;
   --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200);
   --pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100);
   --pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100);
@@ -6338,6 +6344,33 @@ html {
   z-index: var(--pf-c-banner--m-sticky--ZIndex);
   box-shadow: var(--pf-c-banner--m-sticky--BoxShadow);
 }
+.pf-c-banner a {
+  color: var(--pf-c-banner--link--Color);
+  text-decoration: var(--pf-c-banner--link--TextDecoration);
+}
+.pf-c-banner a:hover:not(.pf-m-disabled) {
+  --pf-c-banner--link--Color: var(--pf-c-banner--link--hover--Color);
+  font-weight: var(--pf-c-banner--link--hover--FontWeight);
+}
+.pf-c-banner a.pf-m-disabled {
+  --pf-c-banner--link--Color: var(--pf-c-banner--link--disabled--Color);
+  --pf-c-banner--link--TextDecoration: var(--pf-c-banner--link--disabled--TextDecoration);
+  cursor: not-allowed;
+}
+.pf-c-banner .pf-c-button.pf-m-inline {
+  --pf-c-button--m-link--Color: var(--pf-c-banner--link--Color);
+  --pf-c-button--m-link--m-inline--hover--Color: var(--pf-c-banner--link--hover--Color);
+  --pf-c-button--disabled--Color: var(--pf-c-banner--link--disabled--Color);
+  text-decoration: var(--pf-c-banner--link--TextDecoration);
+}
+.pf-c-banner .pf-c-button.pf-m-inline:hover {
+  --pf-c-banner--link--Color: var(--pf-c-banner--link--hover--Color);
+  font-weight: var(--pf-c-banner--link--hover--FontWeight);
+}
+.pf-c-banner .pf-c-button.pf-m-inline:disabled, .pf-c-banner .pf-c-button.pf-m-inline.pf-m-disabled {
+  --pf-c-banner--link--TextDecoration: var(--pf-c-banner--link--disabled--TextDecoration);
+  cursor: not-allowed;
+}
 
 .pf-c-brand {
   --pf-c-brand--Width: auto;
@@ -9065,7 +9098,6 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-data-list__item-draggable-button.pf-m-disabled {
   --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
   pointer-events: none;
-  cursor: none;
 }
 .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
   color: var(--pf-c-data-list__item-draggable-button-icon--Color);
@@ -9406,6 +9438,62 @@ label.pf-c-check, .pf-c-check__label,
   }
 }
 
+.pf-c-draggable {
+  --pf-c-draggable--Cursor: auto;
+  --pf-c-draggable--m-dragging--Cursor: grabbing;
+  --pf-c-draggable--m-dragging--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-draggable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-draggable--m-drag-outside--Cursor: not-allowed;
+  --pf-c-draggable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
+  cursor: var(--pf-c-draggable--Cursor);
+}
+.pf-c-draggable.pf-m-dragging {
+  --pf-c-draggable--Cursor: var(--pf-c-draggable--m-dragging--Cursor);
+  position: relative;
+  background-color: var(--pf-c-draggable--m-dragging--BackgroundColor);
+  box-shadow: var(--pf-c-draggable--m-dragging--BoxShadow);
+}
+.pf-c-draggable.pf-m-dragging::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border: var(--pf-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-c-draggable--m-dragging--after--BorderColor);
+}
+.pf-c-draggable.pf-m-drag-outside {
+  --pf-c-draggable--m-dragging--Cursor: var(--pf-c-draggable--m-drag-outside--Cursor);
+  --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-c-draggable--m-drag-outside--after--BorderColor);
+}
+
+.pf-c-droppable {
+  --pf-c-droppable--m-dragging--after--BackgroundColor: rgba(255, 255, 255, 0.6);
+  --pf-c-droppable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-droppable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
+}
+.pf-c-droppable.pf-m-dragging {
+  position: relative;
+}
+.pf-c-droppable.pf-m-dragging::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+}
+.pf-c-droppable::after {
+  background-color: var(--pf-c-droppable--m-dragging--after--BackgroundColor);
+  border: var(--pf-c-droppable--m-dragging--after--BorderWidth) solid var(--pf-c-droppable--m-dragging--after--BorderColor);
+}
+.pf-c-droppable.pf-m-drag-outside {
+  --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
+}
+
 .pf-c-dual-list-selector {
   --pf-c-dual-list-selector__header--GridArea: pane-header;
   --pf-c-dual-list-selector__tools--GridArea: pane-tools;
@@ -9444,6 +9532,7 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-dual-list-selector__item-text--Color: var(--pf-global--Color--100);
   --pf-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-global--active-color--100);
   --pf-c-dual-list-selector__list-item-row--m-selected__text--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-global--disabled-color--100);
   --pf-c-dual-list-selector__status--MarginBottom: var(--pf-global--spacer--sm);
   --pf-c-dual-list-selector__status-text--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-dual-list-selector__status-text--Color: var(--pf-global--Color--200);
@@ -9464,6 +9553,7 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
   --pf-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-global--Transition);
   --pf-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-c-dual-list-selector__list-item-row--FontSize);
+  --pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
   display: grid;
   grid-template-areas: "pane-header . pane-header-c" "pane-tools . pane-tools-c" "pane-status . pane-status-c" "pane-menu controls pane-menu-c";
   grid-template-columns: minmax(var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max)) min-content minmax(var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max));
@@ -9551,6 +9641,11 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-dual-list-selector__list-item.pf-m-expanded {
   --pf-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
 }
+.pf-c-dual-list-selector__list-item.pf-m-disabled {
+  --pf-c-dual-list-selector__item-text--Color: var(--pf-c-dual-list-selector__list-item--m-disabled__item-text--Color);
+  --pf-c-dual-list-selector__item-toggle-icon--Color: var(--pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color);
+  pointer-events: none;
+}
 
 .pf-c-dual-list-selector__list-item-row {
   display: flex;
@@ -9653,6 +9748,7 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-dual-list-selector__item-toggle-icon {
   display: inline-block;
   min-width: var(--pf-c-dual-list-selector__item-toggle-icon--MinWidth);
+  color: var(--pf-c-dual-list-selector__item-toggle-icon--Color, inherit);
   text-align: center;
   transition: var(--pf-c-dual-list-selector__item-toggle-icon--Transition);
   transform: rotate(var(--pf-c-dual-list-selector__item-toggle-icon--Rotate));
@@ -15429,10 +15525,13 @@ ul.pf-c-list {
   --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
   --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
   --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
+  --pf-c-menu--m-plain--BoxShadow: none;
   --pf-c-menu--m-flyout__menu--top-offset: 0px;
   --pf-c-menu--m-flyout__menu--left-offset: 0px;
   --pf-c-menu--m-flyout__menu--m-left--right-offset: 0px;
   --pf-c-menu__content--Height: auto;
+  --pf-c-menu__content--MaxHeight: none;
+  --pf-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
   --pf-c-menu--c-divider--MarginTop: 0;
   --pf-c-menu--c-divider--MarginBottom: 0;
   --pf-c-menu__list--c-divider--MarginTop: var(--pf-global--spacer--sm);
@@ -15528,7 +15627,14 @@ ul.pf-c-list {
   --pf-c-menu__footer--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-menu__footer--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-menu__footer--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-menu__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
+  --pf-c-menu__footer--BoxShadow: none;
+  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
+  --pf-c-menu__footer--after--BorderBottomWidth: 0;
+  --pf-c-menu__footer--after--BorderBottomColor: var(--pf-global--BorderColor--100);
+  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
+  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
+  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
   z-index: var(--pf-c-menu--ZIndex);
   width: var(--pf-c-menu--Width);
   background-color: var(--pf-c-menu--BackgroundColor);
@@ -15624,6 +15730,15 @@ ul.pf-c-list {
 .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item:not(.pf-m-current-path) {
   display: none;
 }
+.pf-c-menu.pf-m-plain {
+  --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
+}
+.pf-c-menu.pf-m-scrollable {
+  --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
+  --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
+  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
+  --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
+}
 
 .pf-c-menu__breadcrumb {
   display: flex;
@@ -15838,9 +15953,21 @@ ul.pf-c-list {
 }
 
 .pf-c-menu__footer {
+  position: relative;
   padding: var(--pf-c-menu__footer--PaddingTop) var(--pf-c-menu__footer--PaddingRight) var(--pf-c-menu__footer--PaddingBottom) var(--pf-c-menu__footer--PaddingLeft);
   box-shadow: var(--pf-c-menu__footer--BoxShadow);
 }
+.pf-c-menu__footer::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+  border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
+  border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
+}
 
 .pf-c-menu-toggle {
   --pf-c-menu-toggle--PaddingTop: var(--pf-global--spacer--form-element);
@@ -19611,6 +19738,7 @@ label.pf-c-radio, .pf-c-radio__label,
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  --pf-c-form-control--invalid--BackgroundUrl: none;
   position: relative;
   height: auto;
 }