@patternfly/patternfly 4.149.0 → 4.150.0

package/components/Nav/nav.css

@@ -1,6 +1,5 @@
 .pf-c-nav {
   --pf-c-nav--Transition: var(--pf-global--Transition);
-  --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
   --pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
   --pf-c-nav--m-light__link--Color: var(--pf-global--Color--dark-100);
@@ -25,6 +24,10 @@
   --pf-c-nav__item--MarginTop: 0;
   --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
   --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
+  --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
+  --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
+  --pf-c-nav__item__toggle-icon--Rotate: 0;
+  --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
   --pf-c-nav__item--before--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-nav__link--FontSize: var(--pf-global--FontSize--md);
@@ -160,6 +163,9 @@
   --pf-c-nav__subnav__link--active--after--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-nav__subnav__link--m-current--after--BorderWidth: var(--pf-global--BorderWidth--xl);
   --pf-c-nav__subnav--MaxHeight: 0;
+  --pf-c-nav__subnav__subnav--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-nav__subnav__subnav__link--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-nav__subnav__subnav__link--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
   --pf-c-nav__subnav--c-divider--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-nav__subnav--c-divider--PaddingLeft: var(--pf-global--spacer--lg);
@@ -466,15 +472,18 @@
 }
 
 .pf-c-nav__list {
+  position: relative;
   display: block;
 }
 
 .pf-c-nav__item {
+  --pf-c-nav__item__toggle-icon--Rotate: 0;
   position: relative;
   margin-top: var(--pf-c-nav__item--MarginTop);
 }
 .pf-c-nav__item.pf-m-expandable {
   --pf-c-nav__link--before--BorderBottomWidth: 0;
+  --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
 }
 .pf-c-nav__item.pf-m-expandable::before {
   position: absolute;
@@ -484,6 +493,28 @@
   content: "";
   border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
 }
+.pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
+  --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
+  --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
+}
+@media screen and (min-width: 1200px) {
+  .pf-c-nav__item .pf-c-nav__item.pf-m-expandable::before {
+    border-bottom: none;
+  }
+}
+.pf-c-nav__item .pf-c-nav__item.pf-m-expandable .pf-c-nav__list::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+  border-left: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
+}
+.pf-c-nav__item .pf-c-nav__toggle-icon {
+  transform: rotate(var(--pf-c-nav__item__toggle-icon--Rotate));
+}
 .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);
@@ -677,6 +708,11 @@
   scrollbar-width: none;
   -ms-overflow-style: -ms-autohiding-scrollbar;
 }
+.pf-c-nav__subnav .pf-c-nav__subnav {
+  --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__subnav__link--FontSize);
+  --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__subnav__link--PaddingLeft);
+  --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav__subnav--PaddingLeft);
+}
 .pf-c-nav__subnav.pf-m-flyout {
   width: 100%;
 }
@@ -706,7 +742,10 @@
   display: inline-block;
   transition: var(--pf-c-nav__toggle-icon--Transition);
 }
-.pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
+.pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
+  transform: rotate(0deg);
+}
+.pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon, .pf-c-nav__item .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
   transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
 }
 

package/components/Nav/nav.scss

@@ -1,6 +1,5 @@
 .pf-c-nav {
   --pf-c-nav--Transition: var(--pf-global--Transition);
-  --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
 
   // Light theme
   --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -31,6 +30,10 @@
   --pf-c-nav__item--MarginTop: 0;
   --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
   --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
+  --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
+  --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
+  --pf-c-nav__item__toggle-icon--Rotate: 0;
+  --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
 
   // Item ::before borders
   --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
@@ -186,6 +189,9 @@
   --pf-c-nav__subnav__link--active--after--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-nav__subnav__link--m-current--after--BorderWidth: var(--pf-global--BorderWidth--xl);
   --pf-c-nav__subnav--MaxHeight: 0;
+  --pf-c-nav__subnav__subnav--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-nav__subnav__subnav__link--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-nav__subnav__subnav__link--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
   --pf-c-nav__subnav--c-divider--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-nav__subnav--c-divider--PaddingLeft: var(--pf-global--spacer--lg);
@@ -566,16 +572,20 @@
 
 // List
 .pf-c-nav__list {
+  position: relative;
   display: block;
 }
 
 // Borders
 .pf-c-nav__item {
+  --pf-c-nav__item__toggle-icon--Rotate: 0; // resets it for any inherited items
+
   position: relative;
   margin-top: var(--pf-c-nav__item--MarginTop);
 
   &.pf-m-expandable {
     --pf-c-nav__link--before--BorderBottomWidth: 0;
+    --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
 
     &::before {
       position: absolute;
@@ -587,6 +597,36 @@
     }
   }
 
+  .pf-c-nav__item {
+    &.pf-m-expandable {
+      --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
+      --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
+
+      // stylelint-disable max-nesting-depth
+      &::before {
+        @media screen and (min-width: $pf-global--breakpoint--xl) {
+          border-bottom: none;
+        }
+      }
+      // stylelint-enable
+
+      .pf-c-nav__list::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+        content: "";
+        border-left: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
+      }
+    }
+  }
+
+  .pf-c-nav__toggle-icon {
+    transform: rotate(var(--pf-c-nav__item__toggle-icon--Rotate));
+  }
+
   &.pf-m-flyout {
     &:hover {
       --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
@@ -833,6 +873,13 @@
   padding-left: var(--pf-c-nav__subnav--PaddingLeft);
   transition: var(--pf-c-nav--Transition);
 
+  .pf-c-nav__subnav {
+    --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__subnav__link--FontSize);
+    --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__subnav__link--PaddingLeft);
+    --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav__subnav--PaddingLeft);
+  }
+
+
   // remove at breaking change - not used
   &.pf-m-flyout {
     width: 100%;
@@ -868,7 +915,12 @@
   display: inline-block;
   transition: var(--pf-c-nav__toggle-icon--Transition);
 
-  .pf-c-nav__item.pf-m-expanded & {
+  .pf-c-nav__item.pf-m-expanded .pf-c-nav__item & {
+    transform: rotate(0deg);
+  }
+
+  .pf-c-nav__item.pf-m-expanded &,
+  .pf-c-nav__item .pf-c-nav__item.pf-m-expanded & {
     transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
   }
 }

package/components/Tooltip/tooltip.css

@@ -2,14 +2,14 @@
   --pf-c-tooltip--MaxWidth: 18.75rem;
   --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-tooltip__content--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-tooltip__content--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
   --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
   --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-tooltip__arrow--Width: var(--pf-global--arrow--width);
-  --pf-c-tooltip__arrow--Height: var(--pf-global--arrow--width);
+  --pf-c-tooltip__arrow--Width: 0.5rem;
+  --pf-c-tooltip__arrow--Height: 0.5rem;
   --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-c-tooltip__arrow--m-top--Rotate: 45deg;

package/components/Tooltip/tooltip.scss

@@ -5,16 +5,16 @@
 
   // Content variables
   --pf-c-tooltip__content--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-tooltip__content--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
   --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
   --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
 
   // Arrow variables
-  --pf-c-tooltip__arrow--Width: var(--pf-global--arrow--width);
-  --pf-c-tooltip__arrow--Height: var(--pf-global--arrow--width);
+  --pf-c-tooltip__arrow--Width: #{pf-size-prem(8px)};
+  --pf-c-tooltip__arrow--Height: #{pf-size-prem(8px)};
   --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-c-tooltip__arrow--m-top--Rotate: 45deg;

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

@@ -17,6 +17,10 @@
   background-color: var(--pf-global--BackgroundColor--dark-300);
 }
 
+#ws-core-c-navigation-expandable-third-level .pf-c-nav {
+  background-color: var(--pf-global--BackgroundColor--dark-300);
+}
+
 #ws-core-c-navigation-horizontal-in-masthead,
 #ws-core-c-navigation-horizontal-in-masthead-overflow {
   padding: 0;

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

@@ -301,6 +301,119 @@ cssPrefix: pf-c-nav
 
 ```
 
+### Expandable, third level
+
+```html
+<nav class="pf-c-nav" aria-label="Global">
+  <ul class="pf-c-nav__list">
+    <li class="pf-c-nav__item">
+      <a href="#" class="pf-c-nav__link">Clusters</a>
+    </li>
+    <li class="pf-c-nav__item pf-m-current">
+      <a href="#" class="pf-c-nav__link">Overview</a>
+    </li>
+    <li class="pf-c-nav__item">
+      <a href="#" class="pf-c-nav__link">Releases</a>
+    </li>
+    <li class="pf-c-nav__item pf-m-expandable">
+      <button
+        class="pf-c-nav__link"
+        id="expandable-third-level-example-example-1"
+        aria-expanded="false"
+      >
+        Subscriptions
+        <span class="pf-c-nav__toggle">
+          <span class="pf-c-nav__toggle-icon">
+            <i class="fas fa-angle-right" aria-hidden="true"></i>
+          </span>
+        </span>
+      </button>
+      <section
+        class="pf-c-nav__subnav"
+        aria-labelledby="expandable-third-level-example-example-1"
+        hidden
+      >
+        <ul class="pf-c-nav__list">
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Subnav link 1</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Subnav link 2</a>
+          </li>
+        </ul>
+      </section>
+    </li>
+    <li class="pf-c-nav__item pf-m-expandable pf-m-expanded">
+      <button
+        class="pf-c-nav__link"
+        id="expandable-third-level-example-example-2"
+        aria-expanded="true"
+      >
+        Cost management
+        <span class="pf-c-nav__toggle">
+          <span class="pf-c-nav__toggle-icon">
+            <i class="fas fa-angle-right" aria-hidden="true"></i>
+          </span>
+        </span>
+      </button>
+      <section
+        class="pf-c-nav__subnav"
+        aria-labelledby="expandable-third-level-example-example-2"
+      >
+        <ul class="pf-c-nav__list">
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Overview</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Openshift</a>
+          </li>
+          <li class="pf-c-nav__item pf-m-expandable pf-m-expanded">
+            <button
+              class="pf-c-nav__link"
+              id="expandable-third-level-example-sub-example-1"
+              aria-expanded="true"
+            >
+              Public clouds
+              <span class="pf-c-nav__toggle">
+                <span class="pf-c-nav__toggle-icon">
+                  <i class="fas fa-angle-right" aria-hidden="true"></i>
+                </span>
+              </span>
+            </button>
+            <section
+              class="pf-c-nav__subnav"
+              aria-labelledby="expandable-third-level-example-sub-example-1"
+            >
+              <ul class="pf-c-nav__list">
+                <li class="pf-c-nav__item">
+                  <a href="#" class="pf-c-nav__link">Amazon Web Services</a>
+                </li>
+                <li class="pf-c-nav__item">
+                  <a href="#" class="pf-c-nav__link">Microsoft Azure</a>
+                </li>
+                <li class="pf-c-nav__item">
+                  <a href="#" class="pf-c-nav__link">Google Cloud Services</a>
+                </li>
+              </ul>
+            </section>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Cost Models</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Cost Explorer</a>
+          </li>
+        </ul>
+      </section>
+    </li>
+    <li class="pf-c-nav__item">
+      <a href="#" class="pf-c-nav__link">Support Cases</a>
+    </li>
+  </ul>
+</nav>
+
+```
+
 ### Horizontal
 
 ```html

package/package.json

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

package/patternfly-no-reset.css

@@ -16485,7 +16485,6 @@ ul.pf-c-list {
 
 .pf-c-nav {
   --pf-c-nav--Transition: var(--pf-global--Transition);
-  --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
   --pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
   --pf-c-nav--m-light__link--Color: var(--pf-global--Color--dark-100);
@@ -16510,6 +16509,10 @@ ul.pf-c-list {
   --pf-c-nav__item--MarginTop: 0;
   --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
   --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
+  --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
+  --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
+  --pf-c-nav__item__toggle-icon--Rotate: 0;
+  --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
   --pf-c-nav__item--before--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-nav__link--FontSize: var(--pf-global--FontSize--md);
@@ -16645,6 +16648,9 @@ ul.pf-c-list {
   --pf-c-nav__subnav__link--active--after--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-nav__subnav__link--m-current--after--BorderWidth: var(--pf-global--BorderWidth--xl);
   --pf-c-nav__subnav--MaxHeight: 0;
+  --pf-c-nav__subnav__subnav--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-nav__subnav__subnav__link--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-nav__subnav__subnav__link--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
   --pf-c-nav__subnav--c-divider--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-nav__subnav--c-divider--PaddingLeft: var(--pf-global--spacer--lg);
@@ -16951,15 +16957,18 @@ ul.pf-c-list {
 }
 
 .pf-c-nav__list {
+  position: relative;
   display: block;
 }
 
 .pf-c-nav__item {
+  --pf-c-nav__item__toggle-icon--Rotate: 0;
   position: relative;
   margin-top: var(--pf-c-nav__item--MarginTop);
 }
 .pf-c-nav__item.pf-m-expandable {
   --pf-c-nav__link--before--BorderBottomWidth: 0;
+  --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
 }
 .pf-c-nav__item.pf-m-expandable::before {
   position: absolute;
@@ -16969,6 +16978,28 @@ 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-c-nav__item.pf-m-expandable {
+  --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
+  --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
+}
+@media screen and (min-width: 1200px) {
+  .pf-c-nav__item .pf-c-nav__item.pf-m-expandable::before {
+    border-bottom: none;
+  }
+}
+.pf-c-nav__item .pf-c-nav__item.pf-m-expandable .pf-c-nav__list::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+  border-left: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
+}
+.pf-c-nav__item .pf-c-nav__toggle-icon {
+  transform: rotate(var(--pf-c-nav__item__toggle-icon--Rotate));
+}
 .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);
@@ -17162,6 +17193,11 @@ ul.pf-c-list {
   scrollbar-width: none;
   -ms-overflow-style: -ms-autohiding-scrollbar;
 }
+.pf-c-nav__subnav .pf-c-nav__subnav {
+  --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__subnav__link--FontSize);
+  --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__subnav__link--PaddingLeft);
+  --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav__subnav--PaddingLeft);
+}
 .pf-c-nav__subnav.pf-m-flyout {
   width: 100%;
 }
@@ -17191,7 +17227,10 @@ ul.pf-c-list {
   display: inline-block;
   transition: var(--pf-c-nav__toggle-icon--Transition);
 }
-.pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
+.pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
+  transform: rotate(0deg);
+}
+.pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon, .pf-c-nav__item .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
   transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
 }
 
@@ -26126,14 +26165,14 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tooltip--MaxWidth: 18.75rem;
   --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-tooltip__content--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-tooltip__content--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
   --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
   --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-tooltip__arrow--Width: var(--pf-global--arrow--width);
-  --pf-c-tooltip__arrow--Height: var(--pf-global--arrow--width);
+  --pf-c-tooltip__arrow--Width: 0.5rem;
+  --pf-c-tooltip__arrow--Height: 0.5rem;
   --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-c-tooltip__arrow--m-top--Rotate: 45deg;

package/patternfly.css

@@ -16621,7 +16621,6 @@ ul.pf-c-list {
 
 .pf-c-nav {
   --pf-c-nav--Transition: var(--pf-global--Transition);
-  --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
   --pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
   --pf-c-nav--m-light__link--Color: var(--pf-global--Color--dark-100);
@@ -16646,6 +16645,10 @@ ul.pf-c-list {
   --pf-c-nav__item--MarginTop: 0;
   --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
   --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
+  --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
+  --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
+  --pf-c-nav__item__toggle-icon--Rotate: 0;
+  --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
   --pf-c-nav__item--before--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-nav__link--FontSize: var(--pf-global--FontSize--md);
@@ -16781,6 +16784,9 @@ ul.pf-c-list {
   --pf-c-nav__subnav__link--active--after--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-nav__subnav__link--m-current--after--BorderWidth: var(--pf-global--BorderWidth--xl);
   --pf-c-nav__subnav--MaxHeight: 0;
+  --pf-c-nav__subnav__subnav--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-nav__subnav__subnav__link--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-nav__subnav__subnav__link--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
   --pf-c-nav__subnav--c-divider--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-nav__subnav--c-divider--PaddingLeft: var(--pf-global--spacer--lg);
@@ -17087,15 +17093,18 @@ ul.pf-c-list {
 }
 
 .pf-c-nav__list {
+  position: relative;
   display: block;
 }
 
 .pf-c-nav__item {
+  --pf-c-nav__item__toggle-icon--Rotate: 0;
   position: relative;
   margin-top: var(--pf-c-nav__item--MarginTop);
 }
 .pf-c-nav__item.pf-m-expandable {
   --pf-c-nav__link--before--BorderBottomWidth: 0;
+  --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
 }
 .pf-c-nav__item.pf-m-expandable::before {
   position: absolute;
@@ -17105,6 +17114,28 @@ 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-c-nav__item.pf-m-expandable {
+  --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
+  --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
+}
+@media screen and (min-width: 1200px) {
+  .pf-c-nav__item .pf-c-nav__item.pf-m-expandable::before {
+    border-bottom: none;
+  }
+}
+.pf-c-nav__item .pf-c-nav__item.pf-m-expandable .pf-c-nav__list::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+  border-left: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
+}
+.pf-c-nav__item .pf-c-nav__toggle-icon {
+  transform: rotate(var(--pf-c-nav__item__toggle-icon--Rotate));
+}
 .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);
@@ -17298,6 +17329,11 @@ ul.pf-c-list {
   scrollbar-width: none;
   -ms-overflow-style: -ms-autohiding-scrollbar;
 }
+.pf-c-nav__subnav .pf-c-nav__subnav {
+  --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__subnav__link--FontSize);
+  --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__subnav__link--PaddingLeft);
+  --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav__subnav--PaddingLeft);
+}
 .pf-c-nav__subnav.pf-m-flyout {
   width: 100%;
 }
@@ -17327,7 +17363,10 @@ ul.pf-c-list {
   display: inline-block;
   transition: var(--pf-c-nav__toggle-icon--Transition);
 }
-.pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
+.pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
+  transform: rotate(0deg);
+}
+.pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon, .pf-c-nav__item .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
   transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
 }
 
@@ -26262,14 +26301,14 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tooltip--MaxWidth: 18.75rem;
   --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-tooltip__content--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-tooltip__content--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
   --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
   --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-tooltip__arrow--Width: var(--pf-global--arrow--width);
-  --pf-c-tooltip__arrow--Height: var(--pf-global--arrow--width);
+  --pf-c-tooltip__arrow--Width: 0.5rem;
+  --pf-c-tooltip__arrow--Height: 0.5rem;
   --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-c-tooltip__arrow--m-top--Rotate: 45deg;