@patternfly/patternfly 6.0.0-alpha.9 → 6.0.0-alpha.90

package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -194,7 +194,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
                 type="button"
                 aria-label="Remove from list"
               >
-                <i class="fas fa-times-circle" aria-hidden="true"></i>
+                <i class="fas fa-times" aria-hidden="true"></i>
               </button>
             </div>
           </li>
@@ -243,7 +243,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
                 type="button"
                 aria-label="Remove from list"
               >
-                <i class="fas fa-times-circle" aria-hidden="true"></i>
+                <i class="fas fa-times" aria-hidden="true"></i>
               </button>
             </div>
           </li>
@@ -292,7 +292,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
                 type="button"
                 aria-label="Remove from list"
               >
-                <i class="fas fa-times-circle" aria-hidden="true"></i>
+                <i class="fas fa-times" aria-hidden="true"></i>
               </button>
             </div>
           </li>
@@ -393,7 +393,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
                 type="button"
                 aria-label="Remove from list"
               >
-                <i class="fas fa-times-circle" aria-hidden="true"></i>
+                <i class="fas fa-times" aria-hidden="true"></i>
               </button>
             </div>
           </li>
@@ -442,7 +442,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
                 type="button"
                 aria-label="Remove from list"
               >
-                <i class="fas fa-times-circle" aria-hidden="true"></i>
+                <i class="fas fa-times" aria-hidden="true"></i>
               </button>
             </div>
           </li>
@@ -491,7 +491,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
                 type="button"
                 aria-label="Remove from list"
               >
-                <i class="fas fa-times-circle" aria-hidden="true"></i>
+                <i class="fas fa-times" aria-hidden="true"></i>
               </button>
             </div>
           </li>
@@ -592,7 +592,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
                 type="button"
                 aria-label="Remove from list"
               >
-                <i class="fas fa-times-circle" aria-hidden="true"></i>
+                <i class="fas fa-times" aria-hidden="true"></i>
               </button>
             </div>
           </li>
@@ -641,7 +641,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
                 type="button"
                 aria-label="Remove from list"
               >
-                <i class="fas fa-times-circle" aria-hidden="true"></i>
+                <i class="fas fa-times" aria-hidden="true"></i>
               </button>
             </div>
           </li>
@@ -690,7 +690,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
                 type="button"
                 aria-label="Remove from list"
               >
-                <i class="fas fa-times-circle" aria-hidden="true"></i>
+                <i class="fas fa-times" aria-hidden="true"></i>
               </button>
             </div>
           </li>

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

@@ -1,25 +1,3 @@
-.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav {
-  padding: 0;
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
-}
-
-#ws-core-c-navigation-horizontal-in-masthead,
-#ws-core-c-navigation-horizontal-in-masthead-overflow {
-  grid-template-rows: auto;
-}
-
-#ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header,
-#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header {
-  min-height: 0;
-}
-
-@media screen and (min-width: 1200px) {
-  #ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header,
-  #ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header {
-    min-height: var(--pf-v5-c-page__header--MinHeight);
-  }
-}
-
 #ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header-nav,
 #ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header-nav {
   grid-row: 1;
@@ -27,7 +5,7 @@
 
 #ws-core-c-navigation-nav-with-flyout .ws-preview-html,
 [id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html {
-  width: 260px;
+  width: 280px;
 }
 
 #ws-core-c-navigation-nav-with-flyout .ws-preview-html {

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

@@ -50,6 +50,7 @@ cssPrefix: pf-v5-c-nav
       </li>
     </ul>
   </section>
+
   <section class="pf-v5-c-nav__section" aria-labelledby="grouped-title2">
     <h2 class="pf-v5-c-nav__section-title" id="grouped-title2">Section title 2</h2>
     <ul class="pf-v5-c-nav__list" role="list">
@@ -90,6 +91,7 @@ cssPrefix: pf-v5-c-nav
     </ul>
   </section>
   <hr class="pf-v5-c-divider" />
+
   <section class="pf-v5-c-nav__section" aria-label="Section two">
     <ul class="pf-v5-c-nav__list" role="list">
       <li class="pf-v5-c-nav__item">
@@ -116,11 +118,11 @@ cssPrefix: pf-v5-c-nav
 ```html
 <nav class="pf-v5-c-nav" aria-label="Global">
   <ul class="pf-v5-c-nav__list" role="list">
-    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
+    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
       <button
         class="pf-v5-c-nav__link"
-        id="expandable-example1"
         aria-expanded="true"
+        id="expandable-example1"
       >
         Link 1 (current and expanded example)
         <span class="pf-v5-c-nav__toggle">
@@ -137,7 +139,6 @@ cssPrefix: pf-v5-c-nav
           <li class="pf-v5-c-nav__item">
             <a href="#" class="pf-v5-c-nav__link">Current link</a>
           </li>
-          <li class="pf-v5-c-divider" role="separator"></li>
           <li class="pf-v5-c-nav__item">
             <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
           </li>
@@ -154,8 +155,8 @@ cssPrefix: pf-v5-c-nav
     <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
       <button
         class="pf-v5-c-nav__link"
-        id="expandable-example2"
         aria-expanded="true"
+        id="expandable-example2"
       >
         Link 2 (expanded, but not current example)
         <span
@@ -183,8 +184,8 @@ cssPrefix: pf-v5-c-nav
     <li class="pf-v5-c-nav__item pf-m-expandable">
       <button
         class="pf-v5-c-nav__link"
-        id="expandable-example3"
         aria-expanded="false"
+        id="expandable-example3"
       >
         Link 3
         <span class="pf-v5-c-nav__toggle">
@@ -218,7 +219,7 @@ cssPrefix: pf-v5-c-nav
 ```html
 <nav class="pf-v5-c-nav" aria-label="Global">
   <ul class="pf-v5-c-nav__list" role="list">
-    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
+    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
       <button class="pf-v5-c-nav__link" aria-expanded="true">
         Link 1
         <span class="pf-v5-c-nav__toggle">
@@ -228,10 +229,6 @@ cssPrefix: pf-v5-c-nav
         </span>
       </button>
       <section class="pf-v5-c-nav__subnav" aria-labelledby="subnav-title1">
-        <h2
-          class="pf-v5-c-nav__subnav-title pf-v5-screen-reader"
-          id="subnav-title1"
-        >Current and expanded example sub-navigation</h2>
         <ul class="pf-v5-c-nav__list" role="list">
           <li class="pf-v5-c-nav__item">
             <a href="#" class="pf-v5-c-nav__link">Current link</a>
@@ -259,10 +256,6 @@ cssPrefix: pf-v5-c-nav
         </span>
       </button>
       <section class="pf-v5-c-nav__subnav" aria-labelledby="subnav-title2">
-        <h2
-          class="pf-v5-c-nav__subnav-title pf-v5-screen-reader"
-          id="subnav-title2"
-        >Expanded, but not current example sub-navigation</h2>
         <ul class="pf-v5-c-nav__list" role="list">
           <li class="pf-v5-c-nav__item">
             <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
@@ -289,8 +282,8 @@ cssPrefix: pf-v5-c-nav
     <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
       <button
         class="pf-v5-c-nav__link"
-        id="nav-mixed-link2"
         aria-expanded="true"
+        id="nav-mixed-link2"
       >
         Link 2 (expanded, but not current example)
         <span
@@ -312,11 +305,11 @@ cssPrefix: pf-v5-c-nav
         </ul>
       </section>
     </li>
-    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-current">
+    <li class="pf-v5-c-nav__item pf-m-expandable">
       <button
         class="pf-v5-c-nav__link"
-        id="nav-mixed-link4"
         aria-expanded="false"
+        id="nav-mixed-link4"
       >
         Link 3 (current, but not expanded example)
         <span
@@ -362,7 +355,7 @@ cssPrefix: pf-v5-c-nav
     <li class="pf-v5-c-nav__item">
       <a href="#" class="pf-v5-c-nav__link">Clusters</a>
     </li>
-    <li class="pf-v5-c-nav__item pf-m-current">
+    <li class="pf-v5-c-nav__item">
       <a href="#" class="pf-v5-c-nav__link">Overview</a>
     </li>
     <li class="pf-v5-c-nav__item">
@@ -371,8 +364,8 @@ cssPrefix: pf-v5-c-nav
     <li class="pf-v5-c-nav__item pf-m-expandable">
       <button
         class="pf-v5-c-nav__link"
-        id="expandable-third-level-example-example-1"
         aria-expanded="false"
+        id="expandable-third-level-example-example-1"
       >
         Subscriptions
         <span class="pf-v5-c-nav__toggle">
@@ -399,8 +392,8 @@ cssPrefix: pf-v5-c-nav
     <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
       <button
         class="pf-v5-c-nav__link"
-        id="expandable-third-level-example-example-2"
         aria-expanded="true"
+        id="expandable-third-level-example-example-2"
       >
         Cost management
         <span class="pf-v5-c-nav__toggle">
@@ -423,8 +416,8 @@ cssPrefix: pf-v5-c-nav
           <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
             <button
               class="pf-v5-c-nav__link"
-              id="expandable-third-level-example-sub-example-1"
               aria-expanded="true"
+              id="-sub-example-1"
             >
               Public clouds
               <span class="pf-v5-c-nav__toggle">
@@ -435,7 +428,7 @@ cssPrefix: pf-v5-c-nav
             </button>
             <section
               class="pf-v5-c-nav__subnav"
-              aria-labelledby="expandable-third-level-example-sub-example-1"
+              aria-labelledby="-sub-example-1"
             >
               <ul class="pf-v5-c-nav__list" role="list">
                 <li class="pf-v5-c-nav__item">
@@ -471,9 +464,6 @@ cssPrefix: pf-v5-c-nav
 
 ```html
 <nav class="pf-v5-c-nav pf-m-horizontal" aria-label="Global">
-  <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
-    <i class="fas fa-angle-left" aria-hidden="true"></i>
-  </button>
   <ul class="pf-v5-c-nav__list" role="list">
     <li class="pf-v5-c-nav__item">
       <a
@@ -489,9 +479,6 @@ cssPrefix: pf-v5-c-nav
       <a href="#" class="pf-v5-c-nav__link">Item 3</a>
     </li>
   </ul>
-  <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll right">
-    <i class="fas fa-angle-right" aria-hidden="true"></i>
-  </button>
 </nav>
 
 ```
@@ -499,10 +486,18 @@ cssPrefix: pf-v5-c-nav
 ### Horizontal overflow
 
 ```html
-<nav class="pf-v5-c-nav pf-m-horizontal pf-m-scrollable" aria-label="Global">
-  <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
-    <i class="fas fa-angle-left" aria-hidden="true"></i>
-  </button>
+<nav class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal" aria-label="Global">
+  <div class="pf-v5-c-nav__scroll-button">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
+      type="button"
+      aria-label="Scroll start"
+    >
+      <span class="pf-v5-c-button__icon">
+        <i class="fas fa-angle-left" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
   <ul class="pf-v5-c-nav__list" role="list">
     <li class="pf-v5-c-nav__item">
       <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
@@ -524,9 +519,17 @@ cssPrefix: pf-v5-c-nav
       >Horizontal nav item 5</a>
     </li>
   </ul>
-  <button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
-    <i class="fas fa-angle-right" aria-hidden="true"></i>
-  </button>
+  <div class="pf-v5-c-nav__scroll-button">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
+      type="button"
+      aria-label="Scroll end"
+    >
+      <span class="pf-v5-c-button__icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
 </nav>
 
 ```
@@ -534,7 +537,7 @@ cssPrefix: pf-v5-c-nav
 ### Horizontal subnav
 
 ```html
-<nav class="pf-v5-c-nav pf-m-horizontal-subnav" aria-label="Local">
+<nav class="pf-v5-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
   <ul class="pf-v5-c-nav__list" role="list">
     <li class="pf-v5-c-nav__item">
       <a
@@ -558,12 +561,20 @@ cssPrefix: pf-v5-c-nav
 
 ```html
 <nav
-  class="pf-v5-c-nav pf-m-horizontal-subnav pf-m-scrollable"
+  class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal pf-m-subnav"
   aria-label="Global"
 >
-  <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
-    <i class="fas fa-angle-left" aria-hidden="true"></i>
-  </button>
+  <div class="pf-v5-c-nav__scroll-button">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
+      type="button"
+      aria-label="Scroll start"
+    >
+      <span class="pf-v5-c-button__icon">
+        <i class="fas fa-angle-left" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
   <ul class="pf-v5-c-nav__list" role="list">
     <li class="pf-v5-c-nav__item">
       <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
@@ -585,201 +596,17 @@ cssPrefix: pf-v5-c-nav
       >Horizontal nav item 5</a>
     </li>
   </ul>
-  <button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
-    <i class="fas fa-angle-right" aria-hidden="true"></i>
-  </button>
-</nav>
-
-```
-
-### Tertiary
-
-```html isDeprecated
-<nav class="pf-v5-c-nav pf-m-tertiary" aria-label="Local">
-  <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
-    <i class="fas fa-angle-left" aria-hidden="true"></i>
-  </button>
-  <ul class="pf-v5-c-nav__list" role="list">
-    <li class="pf-v5-c-nav__item">
-      <a
-        href="#"
-        class="pf-v5-c-nav__link pf-m-current"
-        aria-current="page"
-      >Item 1</a>
-    </li>
-    <li class="pf-v5-c-nav__item">
-      <a href="#" class="pf-v5-c-nav__link">Item 2</a>
-    </li>
-    <li class="pf-v5-c-nav__item">
-      <a href="#" class="pf-v5-c-nav__link">Item 3</a>
-    </li>
-  </ul>
-  <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll right">
-    <i class="fas fa-angle-right" aria-hidden="true"></i>
-  </button>
-</nav>
-
-```
-
-### Tertiary overflow
-
-```html isDeprecated
-<nav class="pf-v5-c-nav pf-m-tertiary pf-m-scrollable" aria-label="Local">
-  <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
-    <i class="fas fa-angle-left" aria-hidden="true"></i>
-  </button>
-  <ul class="pf-v5-c-nav__list" role="list">
-    <li class="pf-v5-c-nav__item">
-      <a
-        href="#"
-        class="pf-v5-c-nav__link pf-m-current"
-        aria-current="page"
-      >Tertiary nav item 1</a>
-    </li>
-    <li class="pf-v5-c-nav__item">
-      <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 2</a>
-    </li>
-    <li class="pf-v5-c-nav__item">
-      <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 3</a>
-    </li>
-    <li class="pf-v5-c-nav__item">
-      <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 4</a>
-    </li>
-    <li class="pf-v5-c-nav__item">
-      <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 5</a>
-    </li>
-  </ul>
-  <button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
-    <i class="fas fa-angle-right" aria-hidden="true"></i>
-  </button>
-</nav>
-
-```
-
-### Default in light mode
-
-```html isDeprecated
-<nav class="pf-v5-c-nav pf-m-light" aria-label="Global">
-  <ul class="pf-v5-c-nav__list" role="list">
-    <li class="pf-v5-c-nav__item">
-      <a href="#" class="pf-v5-c-nav__link">Current link</a>
-    </li>
-    <li class="pf-v5-c-nav__item">
-      <a
-        href="#"
-        class="pf-v5-c-nav__link pf-m-current"
-        aria-current="page"
-      >Link 2</a>
-    </li>
-    <li class="pf-v5-c-nav__item">
-      <a href="#" class="pf-v5-c-nav__link">Link 3</a>
-    </li>
-    <li class="pf-v5-c-nav__item">
-      <a href="#" class="pf-v5-c-nav__link">Link 4</a>
-    </li>
-  </ul>
-</nav>
-
-```
-
-### Expanded in light mode
-
-```html isDeprecated
-<nav class="pf-v5-c-nav pf-m-light" aria-label="Global">
-  <ul class="pf-v5-c-nav__list" role="list">
-    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
-      <button
-        class="pf-v5-c-nav__link"
-        id="expandable-light-example1"
-        aria-expanded="true"
-      >
-        Link 1 (current and expanded example)
-        <span class="pf-v5-c-nav__toggle">
-          <span class="pf-v5-c-nav__toggle-icon">
-            <i class="fas fa-angle-right" aria-hidden="true"></i>
-          </span>
-        </span>
-      </button>
-      <section
-        class="pf-v5-c-nav__subnav"
-        aria-labelledby="expandable-light-example1"
-      >
-        <ul class="pf-v5-c-nav__list" role="list">
-          <li class="pf-v5-c-nav__item">
-            <a href="#" class="pf-v5-c-nav__link">Current link</a>
-          </li>
-          <li class="pf-v5-c-divider" role="separator"></li>
-          <li class="pf-v5-c-nav__item">
-            <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
-          </li>
-          <li class="pf-v5-c-nav__item">
-            <a
-              href="#"
-              class="pf-v5-c-nav__link pf-m-current"
-              aria-current="page"
-            >Subnav link 3</a>
-          </li>
-        </ul>
-      </section>
-    </li>
-    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
-      <button
-        class="pf-v5-c-nav__link"
-        id="expandable-light-example2"
-        aria-expanded="true"
-      >
-        Link 2 (expanded, but not current example)
-        <span
-          class="pf-v5-c-nav__toggle"
-        >
-          <span class="pf-v5-c-nav__toggle-icon">
-            <i class="fas fa-angle-right" aria-hidden="true"></i>
-          </span>
-        </span>
-      </button>
-      <section
-        class="pf-v5-c-nav__subnav"
-        aria-labelledby="expandable-light-example2"
-      >
-        <ul class="pf-v5-c-nav__list" role="list">
-          <li class="pf-v5-c-nav__item">
-            <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
-          </li>
-          <li class="pf-v5-c-nav__item">
-            <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
-          </li>
-        </ul>
-      </section>
-    </li>
-    <li class="pf-v5-c-nav__item pf-m-expandable">
-      <button
-        class="pf-v5-c-nav__link"
-        id="expandable-light-example3"
-        aria-expanded="false"
-      >
-        Link 3
-        <span class="pf-v5-c-nav__toggle">
-          <span class="pf-v5-c-nav__toggle-icon">
-            <i class="fas fa-angle-right" aria-hidden="true"></i>
-          </span>
-        </span>
-      </button>
-      <section
-        class="pf-v5-c-nav__subnav"
-        aria-labelledby="expandable-light-example3"
-        hidden
-      >
-        <ul class="pf-v5-c-nav__list" role="list">
-          <li class="pf-v5-c-nav__item">
-            <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
-          </li>
-          <li class="pf-v5-c-nav__item">
-            <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
-          </li>
-        </ul>
-      </section>
-    </li>
-  </ul>
+  <div class="pf-v5-c-nav__scroll-button">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
+      type="button"
+      aria-label="Scroll end"
+    >
+      <span class="pf-v5-c-button__icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
 </nav>
 
 ```
@@ -801,7 +628,8 @@ cssPrefix: pf-v5-c-nav
     <li class="pf-v5-c-nav__item pf-m-flyout">
       <a
         href="#"
-        class="pf-v5-c-nav__link pf-m-hover"
+        class="pf-v5-c-nav__link pf-m-current"
+        aria-current="page"
         aria-haspopup="true"
         aria-expanded="true"
       >
@@ -2501,8 +2329,8 @@ When using anything other than a text node for the link text, wrap the link text
     <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
       <button
         class="pf-v5-c-nav__link"
-        id="nav-link-text-link2"
         aria-expanded="true"
+        id="nav-link-text-link2"
       >
         <span class="pf-v5-c-nav__link-text">
           Link 2
@@ -2538,11 +2366,11 @@ When using anything other than a text node for the link text, wrap the link text
         </ul>
       </section>
     </li>
-    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-current">
+    <li class="pf-v5-c-nav__item pf-m-expandable">
       <button
         class="pf-v5-c-nav__link"
-        id="nav-link-text-link4"
         aria-expanded="false"
+        id="nav-link-text-link4"
       >
         <span class="pf-v5-c-nav__link-text">
           Link 3
@@ -2587,7 +2415,7 @@ When using anything other than a text node for the link text, wrap the link text
 
 The navigation system relies on several different sub-components:
 
-*   `.pf-v5-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
+* `.pf-v5-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
 
 ### Accessibility
 
@@ -2620,12 +2448,10 @@ The navigation system relies on several different sub-components:
 | `.pf-v5-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
 | `.pf-m-horizontal` | `.pf-v5-c-nav` | Modifies nav for the horizontal variation. |
 | `.pf-m-horizontal-subnav` | `.pf-v5-c-nav` | Modifies nav for the horizontal subnav variation. |
-| `.pf-m-tertiary` | `.pf-v5-c-nav` | Modifies nav for the tertiary variation. |
-| `.pf-m-light` | `.pf-v5-c-nav` | Modifies nav for the light variation. **Note: only for use with vertical navs, and requires `.pf-m-light` on the page component's sidebar element (`.pf-v5-c-page__sidebar`)**. |
+| `.pf-m-full-width` | `.pf-v5-c-nav` | Modifies nav for to full width of parent. |
 | `.pf-m-flyout` | `.pf-v5-c-nav__item` | Modifies nav item for the flyout variation. |
 | `.pf-m-scrollable` | `.pf-v5-c-nav` | Modifies nav for the scrollable state. |
 | `.pf-m-expandable` | `.pf-v5-c-nav__item` | Modifies for the expandable state. |
 | `.pf-m-expanded` | `.pf-v5-c-nav__item` | Modifies for the expanded state. |
 | `.pf-m-current` | `.pf-v5-c-nav__link` | Modifies for the current state. |
 | `.pf-m-hover` | `.pf-v5-c-nav__link` | Modifies for the hover state. |
-| `.pf-m-start` | `.pf-v5-c-nav__toggle` | Modifies nav toggle to align left. |

package/docs/components/Page/examples/Page.css

@@ -1,11 +1,3 @@
-.ws-core-c-page :is(.pf-v5-c-page__sidebar, .pf-v5-c-page__main-subnav) {
-  color: var(--pf-v5-global--Color--light-100);
-}
-
-.ws-core-c-page .pf-v5-c-page__main-section.pf-m-dark-200 {
-  color: var(--pf-v5-global--Color--dark-100);
-}
-
 #ws-core-c-page-with-or-without-fill .ws-preview-html,
 #ws-core-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
   height: 500px;