@patternfly/patternfly 4.144.1 → 4.144.5

package/RELEASE-NOTES.md

@@ -3,6 +3,48 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+
+## 2021.13 release notes (2021-10-13)
+Packages released:
+- [@patternfly/patternfly@v4.144.5](https://www.npmjs.com/package/@patternfly/patternfly/v/4.144.5)
+
+### Components
+- **Backdrop:** Added var for position to allow customization ([#4391](https://github.com/patternfly/patternfly/pull/4391))
+- **Banner:** Added link style ([#4383](https://github.com/patternfly/patternfly/pull/4383))
+- **Card:**
+  * Fixed demo image paths ([#4400](https://github.com/patternfly/patternfly/pull/4400))
+  * Updated log view and event view demos ([#4371](https://github.com/patternfly/patternfly/pull/4371))
+- **Drag drop:**
+  * Added drag drop ([#4398](https://github.com/patternfly/patternfly/pull/4398))
+  * Moved drag drop styles into component ([#4404](https://github.com/patternfly/patternfly/pull/4404))
+- **Dual list selector:** Added support for disabled items ([#4361](https://github.com/patternfly/patternfly/pull/4361))
+- **Jump links:** Moved text into expandable toggle ([#4352](https://github.com/patternfly/patternfly/pull/4352))
+- **Label:** Added compact variant ([#4386](https://github.com/patternfly/patternfly/pull/4386))
+- **Log viewer:**
+  * Preserved white space in log viewer text ([#4397](https://github.com/patternfly/patternfly/pull/4397))
+  * Made text fill available space in container ([#4406](https://github.com/patternfly/patternfly/pull/4406))
+- **Masthead:** Updated column-end ([#4418](https://github.com/patternfly/patternfly/pull/4418))
+- **Masthead, description list**: Fixed undefined vars ([#4421](https://github.com/patternfly/patternfly/pull/4421))
+- **Menu:** Added scrollable and plain modifiers ([#4392](https://github.com/patternfly/patternfly/pull/4392))
+- **Nav:**
+  - Added support for menu component as flyout ([#4417](https://github.com/patternfly/patternfly/pull/4417))
+  - Marked nav flyout example as beta, updated release notes ([#4444](https://github.com/patternfly/patternfly/pull/4444))
+- **Progress stepper:** Added help text for popover ([#4381](https://github.com/patternfly/patternfly/pull/4381))
+- **Radio, checkbox, form:** Corrected label alignment ([#4375](https://github.com/patternfly/patternfly/pull/4375))
+- **Select:**
+  * Added support for placeholder in toggle ([#4377](https://github.com/patternfly/patternfly/pull/4377))
+  * Removed double invalid icon on invalid typeahead ([#4385](https://github.com/patternfly/patternfly/pull/4385))
+- **Table:**
+  * Added fixed columns ([#4326](https://github.com/patternfly/patternfly/pull/4326))
+  * Addressed followup compact tree issues ([#4389](https://github.com/patternfly/patternfly/pull/4389))
+- **Text input group:** Added component ([#4408](https://github.com/patternfly/patternfly/pull/4408))
+- **Toolbar:** Adjusted demo heights, removed dupe demo ([#4373](https://github.com/patternfly/patternfly/pull/4373))
+
+### Other
+- **Deps:** Update dependency theme-patternfly-org to v0.7.3 ([#4275](https://github.com/patternfly/patternfly/pull/4275))
+- **Utilities:** Added breakpoint options to docs ([#4409](https://github.com/patternfly/patternfly/pull/4409))
+
+
 ## 2021.12 release notes (2021-09-14)
 Packages released:
 - [@patternfly/patternfly@v4.135.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.135.2)

package/components/Nav/nav.css

@@ -219,11 +219,25 @@
   --pf-c-nav__list--ScrollSnapTypeStrictness: proximity;
   --pf-c-nav__list--ScrollSnapType: var(--pf-c-nav__list--ScrollSnapTypeAxis) var(--pf-c-nav__list--ScrollSnapTypeStrictness);
   --pf-c-nav__item--ScrollSnapAlign: end;
+  --pf-c-nav__item--m-flyout--c-menu--top-offset: 0px;
+  --pf-c-nav__item--m-flyout--c-menu--left-offset: 0.25rem;
+  --pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset: 0px;
+  --pf-c-nav__item--m-flyout--c-menu--m-left--right-offset: 0.25rem;
   --pf-c-nav__item--m-flyout--MarginTop: 0;
-  --pf-c-nav__item--m-flyout--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
-  --pf-c-nav__item--m-flyout--focus--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
-  --pf-c-nav__item--m-flyout--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
+  --pf-c-nav__item--m-flyout--hover__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--focus__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--active__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--hover__link--before--BorderWidth: 0;
+  --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
+  --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
   --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
+  --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
+  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: calc(var(--pf-c-nav__item--m-flyout--c-menu--Top) - var(--pf-c-nav__item--before--BorderWidth));
+  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
+  --pf-c-nav__item--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--left-offset));
+  --pf-c-nav__item--m-flyout--c-menu--m-left--Right: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--m-left--right-offset));
+  --pf-c-nav__item--m-flyout--c-menu--m-top--Bottom: calc(0 + var(--pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset));
   --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
   --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
   --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
@@ -238,6 +252,8 @@
   --pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor: var(--pf-c-nav__item--before--BorderColor);
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
+  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: calc(-1 * var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth));
+  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
@@ -468,11 +484,17 @@
   content: "";
   border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
 }
-.pf-c-nav__item.pf-m-flyout, .pf-c-nav__item.pf-m-drilldown {
-  position: static;
+.pf-c-nav__item.pf-m-flyout:hover {
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
 }
-.pf-c-nav__item.pf-m-flyout.pf-m-expanded .pf-c-nav__subnav, .pf-c-nav__item.pf-m-drilldown.pf-m-expanded .pf-c-nav__subnav {
-  overflow: visible;
+.pf-c-nav__item.pf-m-flyout:focus {
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--focus__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth);
+}
+.pf-c-nav__item.pf-m-flyout:active {
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--active__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--active__link--before--BorderWidth);
 }
 .pf-c-nav__item.pf-m-flyout .pf-c-menu {
   --pf-c-menu--MinWidth: 100%;
@@ -488,6 +510,24 @@
   --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
   --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
   --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
+  position: absolute;
+  top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
+  left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
+  top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
+  top: auto;
+  bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
+  right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
+  left: auto;
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
+  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
+  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
 }
 .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item {
   position: relative;
@@ -503,7 +543,7 @@
 }
 .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item:hover::after {
   position: absolute;
-  top: 0;
+  top: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
   bottom: 0;
   left: 0;
   content: "";

package/components/Nav/nav.scss

@@ -264,14 +264,32 @@
 
   // Flyout variant ====================================== //
 
+  // stylelint-disable length-zero-no-unit
+  // Needs a unit because of type checking for use in calc()
+  --pf-c-nav__item--m-flyout--c-menu--top-offset: 0px;
+  --pf-c-nav__item--m-flyout--c-menu--left-offset: #{pf-size-prem(4px)};
+  --pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset: 0px;
+  --pf-c-nav__item--m-flyout--c-menu--m-left--right-offset: #{pf-size-prem(4px)};
+  // stylelint-enable
+
   // Item
   --pf-c-nav__item--m-flyout--MarginTop: 0;
-  --pf-c-nav__item--m-flyout--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
-  --pf-c-nav__item--m-flyout--focus--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
-  --pf-c-nav__item--m-flyout--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
+  --pf-c-nav__item--m-flyout--hover__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--focus__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--active__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--hover__link--before--BorderWidth: 0;
+  --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
+  --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
   --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
-
-  // Subnav
+  --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
+
+  // Menu
+  --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
+  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: calc(var(--pf-c-nav__item--m-flyout--c-menu--Top) - var(--pf-c-nav__item--before--BorderWidth));
+  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
+  --pf-c-nav__item--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--left-offset));
+  --pf-c-nav__item--m-flyout--c-menu--m-left--Right: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--m-left--right-offset));
+  --pf-c-nav__item--m-flyout--c-menu--m-top--Bottom: calc(0 + var(--pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset));
   --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
   --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
   --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
@@ -286,6 +304,8 @@
   --pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor: var(--pf-c-nav__item--before--BorderColor);
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
+  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: calc(-1 * var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth));
+  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
 
   // end flyout variant ====================================== //
 
@@ -567,16 +587,24 @@
     }
   }
 
-  &.pf-m-flyout,
-  &.pf-m-drilldown {
-    position: static;
+  &.pf-m-flyout {
+    &:hover {
+      --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
+      --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
+    }
 
-    &.pf-m-expanded .pf-c-nav__subnav {
-      overflow: visible;
+    &:focus {
+      --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--focus__link--BackgroundColor);
+      --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth);
     }
-  }
 
-  &.pf-m-flyout {
+    &:active {
+      --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--active__link--BackgroundColor);
+      --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--active__link--before--BorderWidth);
+    }
+
+    // position: relative;
+
     .pf-c-menu {
       --pf-c-menu--MinWidth: 100%;
       --pf-c-menu--BoxShadow: var(--pf-c-nav__item--m-flyout--c-menu--BoxShadow);
@@ -592,6 +620,29 @@
       --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
       --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
 
+      position: absolute;
+      top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
+      left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
+
+      .pf-c-menu {
+        top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
+      }
+
+      &.pf-m-top {
+        top: auto;
+        bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
+      }
+
+      &.pf-m-left {
+        right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
+        left: auto;
+      }
+
+      .pf-c-menu__list-item:first-child {
+        --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
+        --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
+      }
+
       // stylelint-disable max-nesting-depth, selector-max-class
       .pf-c-menu__item {
         position: relative;
@@ -609,7 +660,7 @@
         &:hover {
           &::after {
             position: absolute;
-            top: 0;
+            top: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
             bottom: 0;
             left: 0;
             content: "";

package/docs/components/Nav/examples/Navigation.css

@@ -46,13 +46,3 @@
 #ws-core-c-navigation-level-3-drilldown {
   width: 260px;
 }
-
-#ws-core-c-navigation-flyout-with-menu-component .pf-c-nav__item.pf-m-flyout {
-  position: relative;
-}
-
-#ws-core-c-navigation-flyout-with-menu-component .pf-c-menu.pf-m-flyout {
-  position: absolute;
-  top: 0;
-  left: 100%;
-}

package/docs/components/Nav/examples/Navigation.md

@@ -598,7 +598,7 @@ cssPrefix: pf-c-nav
 
 ### Flyout with menu component
 
-```html
+```html isBeta
 <nav class="pf-c-nav" aria-label="Global">
   <ul class="pf-c-nav__list">
     <li class="pf-c-nav__item">

package/package.json

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

package/patternfly-no-reset.css

@@ -16550,11 +16550,25 @@ ul.pf-c-list {
   --pf-c-nav__list--ScrollSnapTypeStrictness: proximity;
   --pf-c-nav__list--ScrollSnapType: var(--pf-c-nav__list--ScrollSnapTypeAxis) var(--pf-c-nav__list--ScrollSnapTypeStrictness);
   --pf-c-nav__item--ScrollSnapAlign: end;
+  --pf-c-nav__item--m-flyout--c-menu--top-offset: 0px;
+  --pf-c-nav__item--m-flyout--c-menu--left-offset: 0.25rem;
+  --pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset: 0px;
+  --pf-c-nav__item--m-flyout--c-menu--m-left--right-offset: 0.25rem;
   --pf-c-nav__item--m-flyout--MarginTop: 0;
-  --pf-c-nav__item--m-flyout--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
-  --pf-c-nav__item--m-flyout--focus--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
-  --pf-c-nav__item--m-flyout--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
+  --pf-c-nav__item--m-flyout--hover__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--focus__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--active__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--hover__link--before--BorderWidth: 0;
+  --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
+  --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
   --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
+  --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
+  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: calc(var(--pf-c-nav__item--m-flyout--c-menu--Top) - var(--pf-c-nav__item--before--BorderWidth));
+  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
+  --pf-c-nav__item--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--left-offset));
+  --pf-c-nav__item--m-flyout--c-menu--m-left--Right: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--m-left--right-offset));
+  --pf-c-nav__item--m-flyout--c-menu--m-top--Bottom: calc(0 + var(--pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset));
   --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
   --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
   --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
@@ -16569,6 +16583,8 @@ ul.pf-c-list {
   --pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor: var(--pf-c-nav__item--before--BorderColor);
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
+  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: calc(-1 * var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth));
+  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
@@ -16799,11 +16815,17 @@ ul.pf-c-list {
   content: "";
   border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
 }
-.pf-c-nav__item.pf-m-flyout, .pf-c-nav__item.pf-m-drilldown {
-  position: static;
+.pf-c-nav__item.pf-m-flyout:hover {
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
 }
-.pf-c-nav__item.pf-m-flyout.pf-m-expanded .pf-c-nav__subnav, .pf-c-nav__item.pf-m-drilldown.pf-m-expanded .pf-c-nav__subnav {
-  overflow: visible;
+.pf-c-nav__item.pf-m-flyout:focus {
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--focus__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth);
+}
+.pf-c-nav__item.pf-m-flyout:active {
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--active__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--active__link--before--BorderWidth);
 }
 .pf-c-nav__item.pf-m-flyout .pf-c-menu {
   --pf-c-menu--MinWidth: 100%;
@@ -16819,6 +16841,24 @@ ul.pf-c-list {
   --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
   --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
   --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
+  position: absolute;
+  top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
+  left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
+  top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
+  top: auto;
+  bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
+  right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
+  left: auto;
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
+  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
+  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
 }
 .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item {
   position: relative;
@@ -16834,7 +16874,7 @@ ul.pf-c-list {
 }
 .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item:hover::after {
   position: absolute;
-  top: 0;
+  top: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
   bottom: 0;
   left: 0;
   content: "";

package/patternfly.css

@@ -16686,11 +16686,25 @@ ul.pf-c-list {
   --pf-c-nav__list--ScrollSnapTypeStrictness: proximity;
   --pf-c-nav__list--ScrollSnapType: var(--pf-c-nav__list--ScrollSnapTypeAxis) var(--pf-c-nav__list--ScrollSnapTypeStrictness);
   --pf-c-nav__item--ScrollSnapAlign: end;
+  --pf-c-nav__item--m-flyout--c-menu--top-offset: 0px;
+  --pf-c-nav__item--m-flyout--c-menu--left-offset: 0.25rem;
+  --pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset: 0px;
+  --pf-c-nav__item--m-flyout--c-menu--m-left--right-offset: 0.25rem;
   --pf-c-nav__item--m-flyout--MarginTop: 0;
-  --pf-c-nav__item--m-flyout--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
-  --pf-c-nav__item--m-flyout--focus--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
-  --pf-c-nav__item--m-flyout--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
+  --pf-c-nav__item--m-flyout--hover__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--focus__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--active__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--hover__link--before--BorderWidth: 0;
+  --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
+  --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
   --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
+  --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
+  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: calc(var(--pf-c-nav__item--m-flyout--c-menu--Top) - var(--pf-c-nav__item--before--BorderWidth));
+  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
+  --pf-c-nav__item--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--left-offset));
+  --pf-c-nav__item--m-flyout--c-menu--m-left--Right: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--m-left--right-offset));
+  --pf-c-nav__item--m-flyout--c-menu--m-top--Bottom: calc(0 + var(--pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset));
   --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
   --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
   --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
@@ -16705,6 +16719,8 @@ ul.pf-c-list {
   --pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor: var(--pf-c-nav__item--before--BorderColor);
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
+  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: calc(-1 * var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth));
+  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
@@ -16935,11 +16951,17 @@ ul.pf-c-list {
   content: "";
   border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
 }
-.pf-c-nav__item.pf-m-flyout, .pf-c-nav__item.pf-m-drilldown {
-  position: static;
+.pf-c-nav__item.pf-m-flyout:hover {
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
 }
-.pf-c-nav__item.pf-m-flyout.pf-m-expanded .pf-c-nav__subnav, .pf-c-nav__item.pf-m-drilldown.pf-m-expanded .pf-c-nav__subnav {
-  overflow: visible;
+.pf-c-nav__item.pf-m-flyout:focus {
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--focus__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth);
+}
+.pf-c-nav__item.pf-m-flyout:active {
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--active__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--active__link--before--BorderWidth);
 }
 .pf-c-nav__item.pf-m-flyout .pf-c-menu {
   --pf-c-menu--MinWidth: 100%;
@@ -16955,6 +16977,24 @@ ul.pf-c-list {
   --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
   --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
   --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
+  position: absolute;
+  top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
+  left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
+  top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
+  top: auto;
+  bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
+  right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
+  left: auto;
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
+  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
+  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
 }
 .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item {
   position: relative;
@@ -16970,7 +17010,7 @@ ul.pf-c-list {
 }
 .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item:hover::after {
   position: absolute;
-  top: 0;
+  top: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
   bottom: 0;
   left: 0;
   content: "";