@patternfly/react-core 6.0.0-alpha.4 → 6.0.0-alpha.40

package/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap

@@ -1,135 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Nav Dark Nav List 1`] = `
+exports[`Nav Default Nav List - Trigger item active update 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Global"
-    class="pf-v5-c-nav test=nav-class"
+    class="pf-v6-c-nav"
     data-ouia-component-id="OUIA-Generated-Nav-4"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
     <ul
-      class="pf-v5-c-nav__list test-nav-list-class"
+      class="pf-v6-c-nav__list"
       role="list"
     >
       <li
-        class="pf-v5-c-nav__item test-nav-item-class"
+        class="pf-v6-c-nav__item"
         data-ouia-component-id="OUIA-Generated-NavItem-13"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link test-nav-item-class"
+          class="pf-v6-c-nav__link"
           href="#link1"
         >
           Link 1
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item test-nav-item-class"
+        class="pf-v6-c-nav__item"
         data-ouia-component-id="OUIA-Generated-NavItem-14"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link test-nav-item-class"
+          class="pf-v6-c-nav__link"
           href="#link2"
         >
           Link 2
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item test-nav-item-class"
+        class="pf-v6-c-nav__item"
         data-ouia-component-id="OUIA-Generated-NavItem-15"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link test-nav-item-class"
+          class="pf-v6-c-nav__link"
           href="#link3"
         >
           Link 3
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item test-nav-item-class"
+        class="pf-v6-c-nav__item"
         data-ouia-component-id="OUIA-Generated-NavItem-16"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link test-nav-item-class"
-          href="#link4"
-        >
-          Link 4
-        </a>
-      </li>
-    </ul>
-  </nav>
-</DocumentFragment>
-`;
-
-exports[`Nav Default Nav List - Trigger item active update 1`] = `
-<DocumentFragment>
-  <nav
-    aria-label="Global"
-    class="pf-v5-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-5"
-    data-ouia-component-type="PF5/Nav"
-    data-ouia-safe="true"
-  >
-    <ul
-      class="pf-v5-c-nav__list"
-      role="list"
-    >
-      <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-17"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link"
-          href="#link1"
-        >
-          Link 1
-        </a>
-      </li>
-      <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-18"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link"
-          href="#link2"
-        >
-          Link 2
-        </a>
-      </li>
-      <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-19"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link"
-          href="#link3"
-        >
-          Link 3
-        </a>
-      </li>
-      <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-20"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link"
+          class="pf-v6-c-nav__link"
           href="#link4"
         >
           Link 4
@@ -144,62 +74,62 @@ exports[`Nav Default Nav List 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Global"
-    class="pf-v5-c-nav test-nav-class"
+    class="pf-v6-c-nav test-nav-class"
     data-ouia-component-id="OUIA-Generated-Nav-1"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
     <ul
-      class="pf-v5-c-nav__list test-nav-list-class"
+      class="pf-v6-c-nav__list test-nav-list-class"
       role="list"
     >
       <li
-        class="pf-v5-c-nav__item test-nav-item-class"
+        class="pf-v6-c-nav__item test-nav-item-class"
         data-ouia-component-id="OUIA-Generated-NavItem-1"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link test-nav-item-class"
+          class="pf-v6-c-nav__link test-nav-item-class"
           href="#link1"
         >
           Link 1
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item test-nav-item-class"
+        class="pf-v6-c-nav__item test-nav-item-class"
         data-ouia-component-id="OUIA-Generated-NavItem-2"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link test-nav-item-class"
+          class="pf-v6-c-nav__link test-nav-item-class"
           href="#link2"
         >
           Link 2
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item test-nav-item-class"
+        class="pf-v6-c-nav__item test-nav-item-class"
         data-ouia-component-id="OUIA-Generated-NavItem-3"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link test-nav-item-class"
+          class="pf-v6-c-nav__link test-nav-item-class"
           href="#link3"
         >
           Link 3
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item test-nav-item-class"
+        class="pf-v6-c-nav__item test-nav-item-class"
         data-ouia-component-id="OUIA-Generated-NavItem-4"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link test-nav-item-class"
+          class="pf-v6-c-nav__link test-nav-item-class"
           href="#link4"
         >
           Link 4
@@ -214,36 +144,36 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Global"
-    class="pf-v5-c-nav"
+    class="pf-v6-c-nav"
     data-ouia-component-id="OUIA-Generated-Nav-1"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
     <ul
-      class="pf-v5-c-nav__list"
+      class="pf-v6-c-nav__list"
       role="list"
     >
       <li
-        class="pf-v5-c-nav__item pf-m-expandable expandable-group"
+        class="pf-v6-c-nav__item expandable-group"
         data-ouia-component-id="OUIA-Generated-NavExpandable-1"
         data-ouia-component-type="PF5/NavExpandable"
         data-ouia-safe="true"
       >
         <button
           aria-expanded="false"
-          class="pf-v5-c-nav__link"
+          class="pf-v6-c-nav__link"
           id="grp-1"
         >
           Section 1
           <span
-            class="pf-v5-c-nav__toggle"
+            class="pf-v6-c-nav__toggle"
           >
             <span
-              class="pf-v5-c-nav__toggle-icon"
+              class="pf-v6-c-nav__toggle-icon"
             >
               <svg
                 aria-hidden="true"
-                class="pf-v5-svg"
+                class="pf-v6-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
@@ -259,60 +189,60 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
         </button>
         <section
           aria-labelledby="grp-1"
-          class="pf-v5-c-nav__subnav"
+          class="pf-v6-c-nav__subnav"
           hidden=""
         >
           <ul
-            class="pf-v5-c-nav__list"
+            class="pf-v6-c-nav__list"
             role="list"
           >
             <li
-              class="pf-v5-c-nav__item"
+              class="pf-v6-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-1"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
                 href="#link1"
               >
                 Link 1
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item"
+              class="pf-v6-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-2"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
                 href="#link2"
               >
                 Link 2
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item"
+              class="pf-v6-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-3"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
                 href="#link3"
               >
                 Link 3
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item"
+              class="pf-v6-c-nav__item"
               data-ouia-component-id="OUIA-Generated-NavItem-4"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
                 href="#link4"
               >
                 Link 4
@@ -330,36 +260,36 @@ exports[`Nav Expandable Nav List 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Global"
-    class="pf-v5-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-6"
+    class="pf-v6-c-nav"
+    data-ouia-component-id="OUIA-Generated-Nav-5"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
     <ul
-      class="pf-v5-c-nav__list"
+      class="pf-v6-c-nav__list"
       role="list"
     >
       <li
-        class="pf-v5-c-nav__item pf-m-expandable"
+        class="pf-v6-c-nav__item"
         data-ouia-component-id="OUIA-Generated-NavExpandable-1"
         data-ouia-component-type="PF5/NavExpandable"
         data-ouia-safe="true"
       >
         <button
           aria-expanded="false"
-          class="pf-v5-c-nav__link"
+          class="pf-v6-c-nav__link"
           id="grp-1"
         >
           Section 1
           <span
-            class="pf-v5-c-nav__toggle"
+            class="pf-v6-c-nav__toggle"
           >
             <span
-              class="pf-v5-c-nav__toggle-icon"
+              class="pf-v6-c-nav__toggle-icon"
             >
               <svg
                 aria-hidden="true"
-                class="pf-v5-svg"
+                class="pf-v6-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
@@ -375,60 +305,60 @@ exports[`Nav Expandable Nav List 1`] = `
         </button>
         <section
           aria-labelledby="grp-1"
-          class="pf-v5-c-nav__subnav"
+          class="pf-v6-c-nav__subnav"
           hidden=""
         >
           <ul
-            class="pf-v5-c-nav__list"
+            class="pf-v6-c-nav__list"
             role="list"
           >
             <li
-              class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-21"
+              class="pf-v6-c-nav__item"
+              data-ouia-component-id="OUIA-Generated-NavItem-17"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
                 href="#link1"
               >
                 Link 1
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-22"
+              class="pf-v6-c-nav__item"
+              data-ouia-component-id="OUIA-Generated-NavItem-18"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
                 href="#link2"
               >
                 Link 2
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-23"
+              class="pf-v6-c-nav__item"
+              data-ouia-component-id="OUIA-Generated-NavItem-19"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
                 href="#link3"
               >
                 Link 3
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-24"
+              class="pf-v6-c-nav__item"
+              data-ouia-component-id="OUIA-Generated-NavItem-20"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
                 href="#link4"
               >
                 Link 4
@@ -446,35 +376,35 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Test"
-    class="pf-v5-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-8"
+    class="pf-v6-c-nav"
+    data-ouia-component-id="OUIA-Generated-Nav-7"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
     <ul
-      class="pf-v5-c-nav__list"
+      class="pf-v6-c-nav__list"
       role="list"
     >
       <li
-        class="pf-v5-c-nav__item pf-m-expandable"
+        class="pf-v6-c-nav__item"
         data-ouia-component-id="OUIA-Generated-NavExpandable-3"
         data-ouia-component-type="PF5/NavExpandable"
         data-ouia-safe="true"
       >
         <button
           aria-expanded="false"
-          class="pf-v5-c-nav__link"
+          class="pf-v6-c-nav__link"
         >
           Section 1
           <span
-            class="pf-v5-c-nav__toggle"
+            class="pf-v6-c-nav__toggle"
           >
             <span
-              class="pf-v5-c-nav__toggle-icon"
+              class="pf-v6-c-nav__toggle-icon"
             >
               <svg
                 aria-hidden="true"
-                class="pf-v5-svg"
+                class="pf-v6-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
@@ -490,66 +420,66 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
         </button>
         <section
           aria-labelledby="grp-1"
-          class="pf-v5-c-nav__subnav"
+          class="pf-v6-c-nav__subnav"
           hidden=""
         >
           <h2
-            class="pf-v5-screen-reader"
+            class="pf-v6-screen-reader"
             id="grp-1"
           >
             Section 1 - Example sub-navigation
           </h2>
           <ul
-            class="pf-v5-c-nav__list"
+            class="pf-v6-c-nav__list"
             role="list"
           >
             <li
-              class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-29"
+              class="pf-v6-c-nav__item"
+              data-ouia-component-id="OUIA-Generated-NavItem-25"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
                 href="#link1"
               >
                 Link 1
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-30"
+              class="pf-v6-c-nav__item"
+              data-ouia-component-id="OUIA-Generated-NavItem-26"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
                 href="#link2"
               >
                 Link 2
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-31"
+              class="pf-v6-c-nav__item"
+              data-ouia-component-id="OUIA-Generated-NavItem-27"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
                 href="#link3"
               >
                 Link 3
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-32"
+              class="pf-v6-c-nav__item"
+              data-ouia-component-id="OUIA-Generated-NavItem-28"
               data-ouia-component-type="PF5/NavItem"
               data-ouia-safe="true"
             >
               <a
-                class="pf-v5-c-nav__link"
+                class="pf-v6-c-nav__link"
                 href="#link4"
               >
                 Link 4
@@ -567,106 +497,130 @@ exports[`Nav Horizontal Nav List 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Global"
-    class="pf-v5-c-nav pf-m-horizontal"
+    class="pf-v6-c-nav pf-m-horizontal"
     data-ouia-component-id="OUIA-Generated-Nav-horizontal-1"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
-    <button
-      aria-label="Scroll back"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
+    <div
+      class="pf-v6-c-nav__scroll-button"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="Scroll back"
+        class="pf-v6-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <path
-          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-        />
-      </svg>
-    </button>
+        <span
+          class="pf-v6-c-button__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <ul
-      class="pf-v5-c-nav__list"
+      class="pf-v6-c-nav__list"
       role="list"
     >
       <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-41"
+        class="pf-v6-c-nav__item"
+        data-ouia-component-id="OUIA-Generated-NavItem-37"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link"
+          class="pf-v6-c-nav__link"
           href="#link1"
         >
           Link 1
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-42"
+        class="pf-v6-c-nav__item"
+        data-ouia-component-id="OUIA-Generated-NavItem-38"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link"
+          class="pf-v6-c-nav__link"
           href="#link2"
         >
           Link 2
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-43"
+        class="pf-v6-c-nav__item"
+        data-ouia-component-id="OUIA-Generated-NavItem-39"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link"
+          class="pf-v6-c-nav__link"
           href="#link3"
         >
           Link 3
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-44"
+        class="pf-v6-c-nav__item"
+        data-ouia-component-id="OUIA-Generated-NavItem-40"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link"
+          class="pf-v6-c-nav__link"
           href="#link4"
         >
           Link 4
         </a>
       </li>
     </ul>
-    <button
-      aria-label="Scroll foward"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
+    <div
+      class="pf-v6-c-nav__scroll-button"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="Scroll foward"
+        class="pf-v6-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-2"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <path
-          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-        />
-      </svg>
-    </button>
+        <span
+          class="pf-v6-c-button__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
   </nav>
 </DocumentFragment>
 `;
@@ -675,106 +629,130 @@ exports[`Nav Horizontal SubNav List 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Local"
-    class="pf-v5-c-nav pf-m-horizontal-subnav"
+    class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
     data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-1"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
-    <button
-      aria-label="Scroll back"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
+    <div
+      class="pf-v6-c-nav__scroll-button"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="Scroll back"
+        class="pf-v6-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-3"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <path
-          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-        />
-      </svg>
-    </button>
+        <span
+          class="pf-v6-c-button__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <ul
-      class="pf-v5-c-nav__list"
+      class="pf-v6-c-nav__list"
       role="list"
     >
       <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-45"
+        class="pf-v6-c-nav__item"
+        data-ouia-component-id="OUIA-Generated-NavItem-41"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link"
+          class="pf-v6-c-nav__link"
           href="#link1"
         >
           Link 1
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-46"
+        class="pf-v6-c-nav__item"
+        data-ouia-component-id="OUIA-Generated-NavItem-42"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link"
+          class="pf-v6-c-nav__link"
           href="#link2"
         >
           Link 2
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-47"
+        class="pf-v6-c-nav__item"
+        data-ouia-component-id="OUIA-Generated-NavItem-43"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link"
+          class="pf-v6-c-nav__link"
           href="#link3"
         >
           Link 3
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-48"
+        class="pf-v6-c-nav__item"
+        data-ouia-component-id="OUIA-Generated-NavItem-44"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link"
+          class="pf-v6-c-nav__link"
           href="#link4"
         >
           Link 4
         </a>
       </li>
     </ul>
-    <button
-      aria-label="Scroll foward"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
+    <div
+      class="pf-v6-c-nav__scroll-button"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="Scroll foward"
+        class="pf-v6-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-4"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <path
-          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-        />
-      </svg>
-    </button>
+        <span
+          class="pf-v6-c-button__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
   </nav>
 </DocumentFragment>
 `;
@@ -783,76 +761,76 @@ exports[`Nav Nav Grouped List 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Global"
-    class="pf-v5-c-nav"
-    data-ouia-component-id="OUIA-Generated-Nav-9"
+    class="pf-v6-c-nav"
+    data-ouia-component-id="OUIA-Generated-Nav-8"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
     <section
       aria-labelledby="grp-1"
-      class="pf-v5-c-nav__section"
+      class="pf-v6-c-nav__section"
     >
       <h2
-        class="pf-v5-c-nav__section-title"
+        class="pf-v6-c-nav__section-title"
         id="grp-1"
       >
         Section 1
       </h2>
       <ul
-        class="pf-v5-c-nav__list"
+        class="pf-v6-c-nav__list"
         role="list"
       >
         <ul
-          class="pf-v5-c-nav__list"
+          class="pf-v6-c-nav__list"
           role="list"
         >
           <li
-            class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-33"
+            class="pf-v6-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-29"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
             <a
-              class="pf-v5-c-nav__link"
+              class="pf-v6-c-nav__link"
               href="#link1"
             >
               Link 1
             </a>
           </li>
           <li
-            class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-34"
+            class="pf-v6-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-30"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
             <a
-              class="pf-v5-c-nav__link"
+              class="pf-v6-c-nav__link"
               href="#link2"
             >
               Link 2
             </a>
           </li>
           <li
-            class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-35"
+            class="pf-v6-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-31"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
             <a
-              class="pf-v5-c-nav__link"
+              class="pf-v6-c-nav__link"
               href="#link3"
             >
               Link 3
             </a>
           </li>
           <li
-            class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-36"
+            class="pf-v6-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-32"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
             <a
-              class="pf-v5-c-nav__link"
+              class="pf-v6-c-nav__link"
               href="#link4"
             >
               Link 4
@@ -863,69 +841,69 @@ exports[`Nav Nav Grouped List 1`] = `
     </section>
     <section
       aria-labelledby="grp-2"
-      class="pf-v5-c-nav__section"
+      class="pf-v6-c-nav__section"
     >
       <h2
-        class="pf-v5-c-nav__section-title"
+        class="pf-v6-c-nav__section-title"
         id="grp-2"
       >
         Section 2
       </h2>
       <ul
-        class="pf-v5-c-nav__list"
+        class="pf-v6-c-nav__list"
         role="list"
       >
         <ul
-          class="pf-v5-c-nav__list"
+          class="pf-v6-c-nav__list"
           role="list"
         >
           <li
-            class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-37"
+            class="pf-v6-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-33"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
             <a
-              class="pf-v5-c-nav__link"
+              class="pf-v6-c-nav__link"
               href="#link1"
             >
               Link 1
             </a>
           </li>
           <li
-            class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-38"
+            class="pf-v6-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-34"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
             <a
-              class="pf-v5-c-nav__link"
+              class="pf-v6-c-nav__link"
               href="#link2"
             >
               Link 2
             </a>
           </li>
           <li
-            class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-39"
+            class="pf-v6-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-35"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
             <a
-              class="pf-v5-c-nav__link"
+              class="pf-v6-c-nav__link"
               href="#link3"
             >
               Link 3
             </a>
           </li>
           <li
-            class="pf-v5-c-nav__item"
-            data-ouia-component-id="OUIA-Generated-NavItem-40"
+            class="pf-v6-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-36"
             data-ouia-component-type="PF5/NavItem"
             data-ouia-safe="true"
           >
             <a
-              class="pf-v5-c-nav__link"
+              class="pf-v6-c-nav__link"
               href="#link4"
             >
               Link 4
@@ -941,67 +919,29 @@ exports[`Nav Nav Grouped List 1`] = `
 exports[`Nav Nav List with custom item nodes 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Local"
-    class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-    data-ouia-component-id="OUIA-Generated-Nav-tertiary-2"
+    aria-label="Global"
+    class="pf-v6-c-nav"
+    data-ouia-component-id="OUIA-Generated-Nav-9"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
-    <button
-      aria-label="Scroll back"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
-      >
-        <path
-          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-        />
-      </svg>
-    </button>
     <ul
-      class="pf-v5-c-nav__list"
+      class="pf-v6-c-nav__list"
       role="list"
     >
       <li
-        class="pf-v5-c-nav__item test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-53"
+        class="pf-v6-c-nav__item test-nav-item-class"
+        data-ouia-component-id="OUIA-Generated-NavItem-45"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <div
-          class="pf-v5-c-nav__link my-custom-node"
+          class="pf-v6-c-nav__link my-custom-node"
         >
           My custom node
         </div>
       </li>
     </ul>
-    <button
-      aria-label="Scroll foward"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
-      >
-        <path
-          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-        />
-      </svg>
-    </button>
   </nav>
 </DocumentFragment>
 `;
@@ -1009,54 +949,35 @@ exports[`Nav Nav List with custom item nodes 1`] = `
 exports[`Nav Nav List with flyout 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Local"
-    class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-    data-ouia-component-id="OUIA-Generated-Nav-tertiary-3"
+    aria-label="Global"
+    class="pf-v6-c-nav"
+    data-ouia-component-id="OUIA-Generated-Nav-10"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
-    <button
-      aria-label="Scroll back"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
-      >
-        <path
-          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-        />
-      </svg>
-    </button>
     <ul
-      class="pf-v5-c-nav__list"
+      class="pf-v6-c-nav__list"
       role="list"
     >
       <li
-        class="pf-v5-c-nav__item pf-m-flyout test-nav-item-class"
-        data-ouia-component-id="OUIA-Generated-NavItem-54"
+        class="pf-v6-c-nav__item pf-m-flyout test-nav-item-class"
+        data-ouia-component-id="OUIA-Generated-NavItem-46"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <div
-          class="pf-v5-c-nav__link my-custom-node"
+          class="pf-v6-c-nav__link my-custom-node"
         >
           My custom node
           <span
-            class="pf-v5-c-nav__toggle"
+            class="pf-v6-c-nav__toggle"
           >
             <span
-              class="pf-v5-c-nav__toggle-icon"
+              class="pf-v6-c-nav__toggle-icon"
             >
               <svg
                 aria-hidden="true"
-                class="pf-v5-svg"
+                class="pf-v6-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
@@ -1072,25 +993,6 @@ exports[`Nav Nav List with flyout 1`] = `
         </div>
       </li>
     </ul>
-    <button
-      aria-label="Scroll foward"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
-      >
-        <path
-          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-        />
-      </svg>
-    </button>
     <div
       class=""
       data-popper-escaped="true"
@@ -1110,176 +1012,68 @@ exports[`Nav Renders nav list in strict mode 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Global"
-    class="pf-v5-c-nav test-nav-class"
+    class="pf-v6-c-nav test-nav-class"
     data-ouia-component-id="OUIA-Generated-Nav-3"
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
     <ul
-      class="pf-v5-c-nav__list test-nav-list-class"
+      class="pf-v6-c-nav__list test-nav-list-class"
       role="list"
     >
       <li
-        class="pf-v5-c-nav__item test-nav-item-class"
+        class="pf-v6-c-nav__item test-nav-item-class"
         data-ouia-component-id="OUIA-Generated-NavItem-6"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link test-nav-item-class"
+          class="pf-v6-c-nav__link test-nav-item-class"
           href="#link1"
         >
           Link 1
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item test-nav-item-class"
+        class="pf-v6-c-nav__item test-nav-item-class"
         data-ouia-component-id="OUIA-Generated-NavItem-8"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link test-nav-item-class"
+          class="pf-v6-c-nav__link test-nav-item-class"
           href="#link2"
         >
           Link 2
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item test-nav-item-class"
+        class="pf-v6-c-nav__item test-nav-item-class"
         data-ouia-component-id="OUIA-Generated-NavItem-10"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link test-nav-item-class"
+          class="pf-v6-c-nav__link test-nav-item-class"
           href="#link3"
         >
           Link 3
         </a>
       </li>
       <li
-        class="pf-v5-c-nav__item test-nav-item-class"
+        class="pf-v6-c-nav__item test-nav-item-class"
         data-ouia-component-id="OUIA-Generated-NavItem-12"
         data-ouia-component-type="PF5/NavItem"
         data-ouia-safe="true"
       >
         <a
-          class="pf-v5-c-nav__link test-nav-item-class"
-          href="#link4"
-        >
-          Link 4
-        </a>
-      </li>
-    </ul>
-  </nav>
-</DocumentFragment>
-`;
-
-exports[`Nav Tertiary Nav List 1`] = `
-<DocumentFragment>
-  <nav
-    aria-label="Local"
-    class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-    data-ouia-component-id="OUIA-Generated-Nav-tertiary-1"
-    data-ouia-component-type="PF5/Nav"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-label="Scroll back"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
-      >
-        <path
-          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-        />
-      </svg>
-    </button>
-    <ul
-      class="pf-v5-c-nav__list"
-      role="list"
-    >
-      <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-49"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link"
-          href="#link1"
-        >
-          Link 1
-        </a>
-      </li>
-      <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-50"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link"
-          href="#link2"
-        >
-          Link 2
-        </a>
-      </li>
-      <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-51"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link"
-          href="#link3"
-        >
-          Link 3
-        </a>
-      </li>
-      <li
-        class="pf-v5-c-nav__item"
-        data-ouia-component-id="OUIA-Generated-NavItem-52"
-        data-ouia-component-type="PF5/NavItem"
-        data-ouia-safe="true"
-      >
-        <a
-          class="pf-v5-c-nav__link"
+          class="pf-v6-c-nav__link test-nav-item-class"
           href="#link4"
         >
           Link 4
         </a>
       </li>
     </ul>
-    <button
-      aria-label="Scroll foward"
-      class="pf-v5-c-nav__scroll-button"
-      disabled=""
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
-      >
-        <path
-          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-        />
-      </svg>
-    </button>
   </nav>
 </DocumentFragment>
 `;