@patternfly/react-core 5.0.0-alpha.9 → 5.0.0-alpha.91

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

@@ -3,7 +3,7 @@
 exports[`renders compact no background successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tree-view pf-m-compact pf-m-no-background"
+    class="pf-v5-c-tree-view pf-m-compact pf-m-no-background"
   >
     <ul
       class="pf-c-tree-view__list"
@@ -11,36 +11,34 @@ exports[`renders compact no background successfully 1`] = `
     >
       <li
         aria-expanded="true"
-        class="pf-c-tree-view__list-item pf-m-expanded"
+        class="pf-v5-c-tree-view__list-item pf-m-expanded"
         id="AppLaunch"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
             tabindex="0"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -49,10 +47,10 @@ exports[`renders compact no background successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-content"
+                class="pf-v5-c-tree-view__node-content"
               >
                 <span
-                  class="pf-c-tree-view__node-text"
+                  class="pf-v5-c-tree-view__node-text"
                 >
                   ApplicationLauncher
                 </span>
@@ -65,35 +63,33 @@ exports[`renders compact no background successfully 1`] = `
           role="group"
         >
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App1"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -102,10 +98,10 @@ exports[`renders compact no background successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-content"
+                    class="pf-v5-c-tree-view__node-content"
                   >
                     <span
-                      class="pf-c-tree-view__node-text"
+                      class="pf-v5-c-tree-view__node-text"
                     >
                       Application 1
                     </span>
@@ -115,35 +111,33 @@ exports[`renders compact no background successfully 1`] = `
             </div>
           </li>
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App2"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -152,10 +146,10 @@ exports[`renders compact no background successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-content"
+                    class="pf-v5-c-tree-view__node-content"
                   >
                     <span
-                      class="pf-c-tree-view__node-text"
+                      class="pf-v5-c-tree-view__node-text"
                     >
                       Application 2
                     </span>
@@ -167,35 +161,33 @@ exports[`renders compact no background successfully 1`] = `
         </ul>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Cost"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -204,10 +196,10 @@ exports[`renders compact no background successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-content"
+                class="pf-v5-c-tree-view__node-content"
               >
                 <span
-                  class="pf-c-tree-view__node-text"
+                  class="pf-v5-c-tree-view__node-text"
                 >
                   Cost Management
                 </span>
@@ -217,35 +209,33 @@ exports[`renders compact no background successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Sources"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -254,10 +244,10 @@ exports[`renders compact no background successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-content"
+                class="pf-v5-c-tree-view__node-content"
               >
                 <span
-                  class="pf-c-tree-view__node-text"
+                  class="pf-v5-c-tree-view__node-text"
                 >
                   Sources
                 </span>
@@ -267,35 +257,33 @@ exports[`renders compact no background successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Long"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -304,10 +292,10 @@ exports[`renders compact no background successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-content"
+                class="pf-v5-c-tree-view__node-content"
               >
                 <span
-                  class="pf-c-tree-view__node-text"
+                  class="pf-v5-c-tree-view__node-text"
                 >
                   Really really really long folder name that overflows the container it is in
                 </span>
@@ -324,7 +312,7 @@ exports[`renders compact no background successfully 1`] = `
 exports[`renders compact successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tree-view pf-m-compact"
+    class="pf-v5-c-tree-view pf-m-compact"
   >
     <ul
       class="pf-c-tree-view__list"
@@ -332,36 +320,34 @@ exports[`renders compact successfully 1`] = `
     >
       <li
         aria-expanded="true"
-        class="pf-c-tree-view__list-item pf-m-expanded"
+        class="pf-v5-c-tree-view__list-item pf-m-expanded"
         id="AppLaunch"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
             tabindex="0"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -370,10 +356,10 @@ exports[`renders compact successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-content"
+                class="pf-v5-c-tree-view__node-content"
               >
                 <span
-                  class="pf-c-tree-view__node-text"
+                  class="pf-v5-c-tree-view__node-text"
                 >
                   ApplicationLauncher
                 </span>
@@ -386,35 +372,33 @@ exports[`renders compact successfully 1`] = `
           role="group"
         >
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App1"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -423,10 +407,10 @@ exports[`renders compact successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-content"
+                    class="pf-v5-c-tree-view__node-content"
                   >
                     <span
-                      class="pf-c-tree-view__node-text"
+                      class="pf-v5-c-tree-view__node-text"
                     >
                       Application 1
                     </span>
@@ -436,35 +420,33 @@ exports[`renders compact successfully 1`] = `
             </div>
           </li>
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App2"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -473,10 +455,10 @@ exports[`renders compact successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-content"
+                    class="pf-v5-c-tree-view__node-content"
                   >
                     <span
-                      class="pf-c-tree-view__node-text"
+                      class="pf-v5-c-tree-view__node-text"
                     >
                       Application 2
                     </span>
@@ -488,35 +470,33 @@ exports[`renders compact successfully 1`] = `
         </ul>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Cost"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -525,10 +505,10 @@ exports[`renders compact successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-content"
+                class="pf-v5-c-tree-view__node-content"
               >
                 <span
-                  class="pf-c-tree-view__node-text"
+                  class="pf-v5-c-tree-view__node-text"
                 >
                   Cost Management
                 </span>
@@ -538,35 +518,33 @@ exports[`renders compact successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Sources"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -575,10 +553,10 @@ exports[`renders compact successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-content"
+                class="pf-v5-c-tree-view__node-content"
               >
                 <span
-                  class="pf-c-tree-view__node-text"
+                  class="pf-v5-c-tree-view__node-text"
                 >
                   Sources
                 </span>
@@ -588,35 +566,33 @@ exports[`renders compact successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Long"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -625,10 +601,10 @@ exports[`renders compact successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-content"
+                class="pf-v5-c-tree-view__node-content"
               >
                 <span
-                  class="pf-c-tree-view__node-text"
+                  class="pf-v5-c-tree-view__node-text"
                 >
                   Really really really long folder name that overflows the container it is in
                 </span>
@@ -645,7 +621,7 @@ exports[`renders compact successfully 1`] = `
 exports[`renders guides successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tree-view pf-m-guides"
+    class="pf-v5-c-tree-view pf-m-guides"
   >
     <ul
       class="pf-c-tree-view__list"
@@ -653,36 +629,34 @@ exports[`renders guides successfully 1`] = `
     >
       <li
         aria-expanded="true"
-        class="pf-c-tree-view__list-item pf-m-expanded"
+        class="pf-v5-c-tree-view__list-item pf-m-expanded"
         id="AppLaunch"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
             tabindex="0"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -691,7 +665,7 @@ exports[`renders guides successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 ApplicationLauncher
               </span>
@@ -703,35 +677,33 @@ exports[`renders guides successfully 1`] = `
           role="group"
         >
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App1"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -740,7 +712,7 @@ exports[`renders guides successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 1
                   </span>
@@ -749,35 +721,33 @@ exports[`renders guides successfully 1`] = `
             </div>
           </li>
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App2"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -786,7 +756,7 @@ exports[`renders guides successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 2
                   </span>
@@ -797,35 +767,33 @@ exports[`renders guides successfully 1`] = `
         </ul>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Cost"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -834,7 +802,7 @@ exports[`renders guides successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Cost Management
               </span>
@@ -843,35 +811,33 @@ exports[`renders guides successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Sources"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -880,7 +846,7 @@ exports[`renders guides successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Sources
               </span>
@@ -889,35 +855,33 @@ exports[`renders guides successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Long"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -926,7 +890,7 @@ exports[`renders guides successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Really really really long folder name that overflows the container it is in
               </span>
@@ -942,7 +906,7 @@ exports[`renders guides successfully 1`] = `
 exports[`tree view renders active successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tree-view"
+    class="pf-v5-c-tree-view"
   >
     <ul
       class="pf-c-tree-view__list"
@@ -950,36 +914,34 @@ exports[`tree view renders active successfully 1`] = `
     >
       <li
         aria-expanded="true"
-        class="pf-c-tree-view__list-item pf-m-expanded"
+        class="pf-v5-c-tree-view__list-item pf-m-expanded"
         id="AppLaunch"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
             tabindex="0"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -988,7 +950,7 @@ exports[`tree view renders active successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 ApplicationLauncher
               </span>
@@ -1000,35 +962,33 @@ exports[`tree view renders active successfully 1`] = `
           role="group"
         >
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App1"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -1037,7 +997,7 @@ exports[`tree view renders active successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 1
                   </span>
@@ -1046,35 +1006,33 @@ exports[`tree view renders active successfully 1`] = `
             </div>
           </li>
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App2"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -1083,7 +1041,7 @@ exports[`tree view renders active successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 2
                   </span>
@@ -1094,35 +1052,33 @@ exports[`tree view renders active successfully 1`] = `
         </ul>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Cost"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -1131,7 +1087,7 @@ exports[`tree view renders active successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Cost Management
               </span>
@@ -1140,35 +1096,33 @@ exports[`tree view renders active successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Sources"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -1177,7 +1131,7 @@ exports[`tree view renders active successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Sources
               </span>
@@ -1186,35 +1140,33 @@ exports[`tree view renders active successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Long"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -1223,7 +1175,7 @@ exports[`tree view renders active successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Really really really long folder name that overflows the container it is in
               </span>
@@ -1239,7 +1191,7 @@ exports[`tree view renders active successfully 1`] = `
 exports[`tree view renders badges successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tree-view"
+    class="pf-v5-c-tree-view"
   >
     <ul
       class="pf-c-tree-view__list"
@@ -1247,36 +1199,34 @@ exports[`tree view renders badges successfully 1`] = `
     >
       <li
         aria-expanded="true"
-        class="pf-c-tree-view__list-item pf-m-expanded"
+        class="pf-v5-c-tree-view__list-item pf-m-expanded"
         id="AppLaunch"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
             tabindex="0"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -1285,15 +1235,15 @@ exports[`tree view renders badges successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 ApplicationLauncher
               </span>
               <span
-                class="pf-c-tree-view__node-count"
+                class="pf-v5-c-tree-view__node-count"
               >
                 <span
-                  class="pf-c-badge pf-m-read"
+                  class="pf-v5-c-badge pf-m-read"
                 >
                   2
                 </span>
@@ -1306,35 +1256,33 @@ exports[`tree view renders badges successfully 1`] = `
           role="group"
         >
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App1"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -1343,15 +1291,15 @@ exports[`tree view renders badges successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 1
                   </span>
                   <span
-                    class="pf-c-tree-view__node-count"
+                    class="pf-v5-c-tree-view__node-count"
                   >
                     <span
-                      class="pf-c-badge pf-m-read"
+                      class="pf-v5-c-badge pf-m-read"
                     >
                       2
                     </span>
@@ -1361,35 +1309,33 @@ exports[`tree view renders badges successfully 1`] = `
             </div>
           </li>
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App2"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -1398,15 +1344,15 @@ exports[`tree view renders badges successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 2
                   </span>
                   <span
-                    class="pf-c-tree-view__node-count"
+                    class="pf-v5-c-tree-view__node-count"
                   >
                     <span
-                      class="pf-c-badge pf-m-read"
+                      class="pf-v5-c-badge pf-m-read"
                     >
                       2
                     </span>
@@ -1418,35 +1364,33 @@ exports[`tree view renders badges successfully 1`] = `
         </ul>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Cost"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -1455,15 +1399,15 @@ exports[`tree view renders badges successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Cost Management
               </span>
               <span
-                class="pf-c-tree-view__node-count"
+                class="pf-v5-c-tree-view__node-count"
               >
                 <span
-                  class="pf-c-badge pf-m-read"
+                  class="pf-v5-c-badge pf-m-read"
                 >
                   1
                 </span>
@@ -1473,35 +1417,33 @@ exports[`tree view renders badges successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Sources"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -1510,15 +1452,15 @@ exports[`tree view renders badges successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Sources
               </span>
               <span
-                class="pf-c-tree-view__node-count"
+                class="pf-v5-c-tree-view__node-count"
               >
                 <span
-                  class="pf-c-badge pf-m-read"
+                  class="pf-v5-c-badge pf-m-read"
                 >
                   1
                 </span>
@@ -1528,35 +1470,33 @@ exports[`tree view renders badges successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Long"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -1565,15 +1505,15 @@ exports[`tree view renders badges successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Really really really long folder name that overflows the container it is in
               </span>
               <span
-                class="pf-c-tree-view__node-count"
+                class="pf-v5-c-tree-view__node-count"
               >
                 <span
-                  class="pf-c-badge pf-m-read"
+                  class="pf-v5-c-badge pf-m-read"
                 >
                   1
                 </span>
@@ -1590,7 +1530,7 @@ exports[`tree view renders badges successfully 1`] = `
 exports[`tree view renders basic successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tree-view"
+    class="pf-v5-c-tree-view"
   >
     <ul
       class="pf-c-tree-view__list"
@@ -1598,36 +1538,34 @@ exports[`tree view renders basic successfully 1`] = `
     >
       <li
         aria-expanded="true"
-        class="pf-c-tree-view__list-item pf-m-expanded"
+        class="pf-v5-c-tree-view__list-item pf-m-expanded"
         id="AppLaunch"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
             tabindex="0"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -1636,7 +1574,7 @@ exports[`tree view renders basic successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 ApplicationLauncher
               </span>
@@ -1648,35 +1586,33 @@ exports[`tree view renders basic successfully 1`] = `
           role="group"
         >
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App1"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -1685,7 +1621,7 @@ exports[`tree view renders basic successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 1
                   </span>
@@ -1694,35 +1630,33 @@ exports[`tree view renders basic successfully 1`] = `
             </div>
           </li>
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App2"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -1731,7 +1665,7 @@ exports[`tree view renders basic successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 2
                   </span>
@@ -1742,35 +1676,33 @@ exports[`tree view renders basic successfully 1`] = `
         </ul>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Cost"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -1779,7 +1711,7 @@ exports[`tree view renders basic successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Cost Management
               </span>
@@ -1788,35 +1720,33 @@ exports[`tree view renders basic successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Sources"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -1825,7 +1755,7 @@ exports[`tree view renders basic successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Sources
               </span>
@@ -1834,35 +1764,33 @@ exports[`tree view renders basic successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Long"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -1871,7 +1799,7 @@ exports[`tree view renders basic successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Really really really long folder name that overflows the container it is in
               </span>
@@ -1887,7 +1815,7 @@ exports[`tree view renders basic successfully 1`] = `
 exports[`tree view renders checkboxes successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tree-view"
+    class="pf-v5-c-tree-view"
   >
     <ul
       class="pf-c-tree-view__list"
@@ -1895,38 +1823,36 @@ exports[`tree view renders checkboxes successfully 1`] = `
     >
       <li
         aria-expanded="true"
-        class="pf-c-tree-view__list-item pf-m-expanded"
+        class="pf-v5-c-tree-view__list-item pf-m-expanded"
         id="AppLaunch"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <label
-            class="pf-c-tree-view__node pf-m-selectable"
+            class="pf-v5-c-tree-view__node pf-m-selectable"
             for="checkbox-id18"
             id="label-checkbox-id18"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <button
                 aria-labelledby="label-checkbox-id18"
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="0"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -1935,7 +1861,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 </span>
               </button>
               <span
-                class="pf-c-tree-view__node-check"
+                class="pf-v5-c-tree-view__node-check"
               >
                 <input
                   id="checkbox-id18"
@@ -1944,7 +1870,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 />
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 ApplicationLauncher
               </span>
@@ -1956,38 +1882,36 @@ exports[`tree view renders checkboxes successfully 1`] = `
           role="group"
         >
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App1"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <label
-                class="pf-c-tree-view__node pf-m-selectable"
+                class="pf-v5-c-tree-view__node pf-m-selectable"
                 for="checkbox-id19"
                 id="label-checkbox-id19"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <button
                     aria-labelledby="label-checkbox-id19"
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -1996,7 +1920,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                     </span>
                   </button>
                   <span
-                    class="pf-c-tree-view__node-check"
+                    class="pf-v5-c-tree-view__node-check"
                   >
                     <input
                       id="checkbox-id19"
@@ -2005,7 +1929,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                     />
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 1
                   </span>
@@ -2014,38 +1938,36 @@ exports[`tree view renders checkboxes successfully 1`] = `
             </div>
           </li>
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App2"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <label
-                class="pf-c-tree-view__node pf-m-selectable"
+                class="pf-v5-c-tree-view__node pf-m-selectable"
                 for="checkbox-id20"
                 id="label-checkbox-id20"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <button
                     aria-labelledby="label-checkbox-id20"
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -2054,7 +1976,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                     </span>
                   </button>
                   <span
-                    class="pf-c-tree-view__node-check"
+                    class="pf-v5-c-tree-view__node-check"
                   >
                     <input
                       id="checkbox-id20"
@@ -2063,7 +1985,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                     />
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 2
                   </span>
@@ -2074,38 +1996,36 @@ exports[`tree view renders checkboxes successfully 1`] = `
         </ul>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Cost"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <label
-            class="pf-c-tree-view__node pf-m-selectable"
+            class="pf-v5-c-tree-view__node pf-m-selectable"
             for="checkbox-id21"
             id="label-checkbox-id21"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <button
                 aria-labelledby="label-checkbox-id21"
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -2114,7 +2034,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 </span>
               </button>
               <span
-                class="pf-c-tree-view__node-check"
+                class="pf-v5-c-tree-view__node-check"
               >
                 <input
                   id="checkbox-id21"
@@ -2123,7 +2043,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 />
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Cost Management
               </span>
@@ -2132,38 +2052,36 @@ exports[`tree view renders checkboxes successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Sources"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <label
-            class="pf-c-tree-view__node pf-m-selectable"
+            class="pf-v5-c-tree-view__node pf-m-selectable"
             for="checkbox-id22"
             id="label-checkbox-id22"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <button
                 aria-labelledby="label-checkbox-id22"
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -2172,7 +2090,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 </span>
               </button>
               <span
-                class="pf-c-tree-view__node-check"
+                class="pf-v5-c-tree-view__node-check"
               >
                 <input
                   id="checkbox-id22"
@@ -2181,7 +2099,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 />
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Sources
               </span>
@@ -2190,38 +2108,36 @@ exports[`tree view renders checkboxes successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Long"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <label
-            class="pf-c-tree-view__node pf-m-selectable"
+            class="pf-v5-c-tree-view__node pf-m-selectable"
             for="checkbox-id23"
             id="label-checkbox-id23"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <button
                 aria-labelledby="label-checkbox-id23"
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -2230,7 +2146,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 </span>
               </button>
               <span
-                class="pf-c-tree-view__node-check"
+                class="pf-v5-c-tree-view__node-check"
               >
                 <input
                   id="checkbox-id23"
@@ -2239,7 +2155,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 />
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Really really really long folder name that overflows the container it is in
               </span>
@@ -2255,7 +2171,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
 exports[`tree view renders icons successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tree-view"
+    class="pf-v5-c-tree-view"
   >
     <ul
       class="pf-c-tree-view__list"
@@ -2263,36 +2179,34 @@ exports[`tree view renders icons successfully 1`] = `
     >
       <li
         aria-expanded="true"
-        class="pf-c-tree-view__list-item pf-m-expanded"
+        class="pf-v5-c-tree-view__list-item pf-m-expanded"
         id="AppLaunch"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
             tabindex="0"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -2301,16 +2215,14 @@ exports[`tree view renders icons successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-icon"
+                class="pf-v5-c-tree-view__node-icon"
               >
                 <svg
                   aria-hidden="true"
+                  class="pf-v5-svg"
                   fill="currentColor"
-                  height="1em"
                   role="img"
-                  style="vertical-align: -0.125em;"
                   viewBox="0 0 576 512"
-                  width="1em"
                 >
                   <path
                     d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"
@@ -2318,7 +2230,7 @@ exports[`tree view renders icons successfully 1`] = `
                 </svg>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 ApplicationLauncher
               </span>
@@ -2330,35 +2242,33 @@ exports[`tree view renders icons successfully 1`] = `
           role="group"
         >
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App1"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -2367,16 +2277,14 @@ exports[`tree view renders icons successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-icon"
+                    class="pf-v5-c-tree-view__node-icon"
                   >
                     <svg
                       aria-hidden="true"
+                      class="pf-v5-svg"
                       fill="currentColor"
-                      height="1em"
                       role="img"
-                      style="vertical-align: -0.125em;"
                       viewBox="0 0 512 512"
-                      width="1em"
                     >
                       <path
                         d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
@@ -2384,7 +2292,7 @@ exports[`tree view renders icons successfully 1`] = `
                     </svg>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 1
                   </span>
@@ -2393,35 +2301,33 @@ exports[`tree view renders icons successfully 1`] = `
             </div>
           </li>
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App2"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -2430,16 +2336,14 @@ exports[`tree view renders icons successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-icon"
+                    class="pf-v5-c-tree-view__node-icon"
                   >
                     <svg
                       aria-hidden="true"
+                      class="pf-v5-svg"
                       fill="currentColor"
-                      height="1em"
                       role="img"
-                      style="vertical-align: -0.125em;"
                       viewBox="0 0 512 512"
-                      width="1em"
                     >
                       <path
                         d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
@@ -2447,7 +2351,7 @@ exports[`tree view renders icons successfully 1`] = `
                     </svg>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 2
                   </span>
@@ -2458,35 +2362,33 @@ exports[`tree view renders icons successfully 1`] = `
         </ul>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Cost"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -2495,16 +2397,14 @@ exports[`tree view renders icons successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-icon"
+                class="pf-v5-c-tree-view__node-icon"
               >
                 <svg
                   aria-hidden="true"
+                  class="pf-v5-svg"
                   fill="currentColor"
-                  height="1em"
                   role="img"
-                  style="vertical-align: -0.125em;"
                   viewBox="0 0 512 512"
-                  width="1em"
                 >
                   <path
                     d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
@@ -2512,7 +2412,7 @@ exports[`tree view renders icons successfully 1`] = `
                 </svg>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Cost Management
               </span>
@@ -2521,35 +2421,33 @@ exports[`tree view renders icons successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Sources"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -2558,16 +2456,14 @@ exports[`tree view renders icons successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-icon"
+                class="pf-v5-c-tree-view__node-icon"
               >
                 <svg
                   aria-hidden="true"
+                  class="pf-v5-svg"
                   fill="currentColor"
-                  height="1em"
                   role="img"
-                  style="vertical-align: -0.125em;"
                   viewBox="0 0 512 512"
-                  width="1em"
                 >
                   <path
                     d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
@@ -2575,7 +2471,7 @@ exports[`tree view renders icons successfully 1`] = `
                 </svg>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Sources
               </span>
@@ -2584,35 +2480,33 @@ exports[`tree view renders icons successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Long"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -2621,16 +2515,14 @@ exports[`tree view renders icons successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-icon"
+                class="pf-v5-c-tree-view__node-icon"
               >
                 <svg
                   aria-hidden="true"
+                  class="pf-v5-svg"
                   fill="currentColor"
-                  height="1em"
                   role="img"
-                  style="vertical-align: -0.125em;"
                   viewBox="0 0 512 512"
-                  width="1em"
                 >
                   <path
                     d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
@@ -2638,7 +2530,7 @@ exports[`tree view renders icons successfully 1`] = `
                 </svg>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Really really really long folder name that overflows the container it is in
               </span>
@@ -2654,7 +2546,7 @@ exports[`tree view renders icons successfully 1`] = `
 exports[`tree view renders individual flag options successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tree-view"
+    class="pf-v5-c-tree-view"
   >
     <ul
       class="pf-c-tree-view__list"
@@ -2662,39 +2554,37 @@ exports[`tree view renders individual flag options successfully 1`] = `
     >
       <li
         aria-expanded="true"
-        class="pf-c-tree-view__list-item pf-m-expanded"
+        class="pf-v5-c-tree-view__list-item pf-m-expanded"
         id="AppLaunch"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <label
-            class="pf-c-tree-view__node pf-m-selectable"
+            class="pf-v5-c-tree-view__node pf-m-selectable"
             for="checkbox-id36"
             id="label-checkbox-id36"
             tabindex="0"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <button
                 aria-labelledby="label-checkbox-id36"
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -2703,7 +2593,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
                 </span>
               </button>
               <span
-                class="pf-c-tree-view__node-check"
+                class="pf-v5-c-tree-view__node-check"
               >
                 <input
                   id="checkbox-id36"
@@ -2712,16 +2602,14 @@ exports[`tree view renders individual flag options successfully 1`] = `
                 />
               </span>
               <span
-                class="pf-c-tree-view__node-icon"
+                class="pf-v5-c-tree-view__node-icon"
               >
                 <svg
                   aria-hidden="true"
+                  class="pf-v5-svg"
                   fill="currentColor"
-                  height="1em"
                   role="img"
-                  style="vertical-align: -0.125em;"
                   viewBox="0 0 576 512"
-                  width="1em"
                 >
                   <path
                     d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"
@@ -2729,7 +2617,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
                 </svg>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 ApplicationLauncher
               </span>
@@ -2741,35 +2629,33 @@ exports[`tree view renders individual flag options successfully 1`] = `
           role="group"
         >
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App1"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -2778,7 +2664,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 1
                   </span>
@@ -2787,35 +2673,33 @@ exports[`tree view renders individual flag options successfully 1`] = `
             </div>
           </li>
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App2"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -2824,15 +2708,15 @@ exports[`tree view renders individual flag options successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 2
                   </span>
                   <span
-                    class="pf-c-tree-view__node-count"
+                    class="pf-v5-c-tree-view__node-count"
                   >
                     <span
-                      class="pf-c-badge pf-m-read"
+                      class="pf-v5-c-badge pf-m-read"
                     >
                       2
                     </span>
@@ -2844,35 +2728,33 @@ exports[`tree view renders individual flag options successfully 1`] = `
         </ul>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Cost"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -2881,15 +2763,15 @@ exports[`tree view renders individual flag options successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Cost Management
               </span>
               <span
-                class="pf-c-tree-view__node-count"
+                class="pf-v5-c-tree-view__node-count"
               >
                 <span
-                  class="pf-c-badge pf-m-read"
+                  class="pf-v5-c-badge pf-m-read"
                 >
                   1
                 </span>
@@ -2897,12 +2779,12 @@ exports[`tree view renders individual flag options successfully 1`] = `
             </span>
           </button>
           <div
-            class="pf-c-tree-view__action"
+            class="pf-v5-c-tree-view__action"
           >
             <button
               aria-disabled="false"
               aria-label="Folder action"
-              class="pf-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-1"
               data-ouia-component-type="PF4/Button"
               data-ouia-safe="true"
@@ -2910,12 +2792,10 @@ exports[`tree view renders individual flag options successfully 1`] = `
             >
               <svg
                 aria-hidden="true"
+                class="pf-v5-svg"
                 fill="currentColor"
-                height="1em"
                 role="img"
-                style="vertical-align: -0.125em;"
                 viewBox="0 0 512 512"
-                width="1em"
               >
                 <path
                   d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
@@ -2926,35 +2806,33 @@ exports[`tree view renders individual flag options successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Sources"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -2963,7 +2841,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Sources
               </span>
@@ -2972,35 +2850,33 @@ exports[`tree view renders individual flag options successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Long"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -3009,7 +2885,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Really really really long folder name that overflows the container it is in
               </span>
@@ -3025,11 +2901,11 @@ exports[`tree view renders individual flag options successfully 1`] = `
 exports[`tree view renders search successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tree-view__search"
+    class="pf-v5-c-tree-view__search"
   >
     <input
       aria-label="Search input example"
-      class="pf-c-form-control pf-m-search"
+      class="pf-v5-c-form-control pf-m-search"
       id="input-search"
       name="search-input"
       type="search"
@@ -3041,13 +2917,13 @@ exports[`tree view renders search successfully 1`] = `
 exports[`tree view renders toolbar successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tree-view"
+    class="pf-v5-c-tree-view"
   >
     <div>
       test
     </div>
     <hr
-      class="pf-c-divider"
+      class="pf-v5-c-divider"
     />
     <ul
       class="pf-c-tree-view__list"
@@ -3055,36 +2931,34 @@ exports[`tree view renders toolbar successfully 1`] = `
     >
       <li
         aria-expanded="true"
-        class="pf-c-tree-view__list-item pf-m-expanded"
+        class="pf-v5-c-tree-view__list-item pf-m-expanded"
         id="AppLaunch"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
             tabindex="0"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -3093,7 +2967,7 @@ exports[`tree view renders toolbar successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 ApplicationLauncher
               </span>
@@ -3105,35 +2979,33 @@ exports[`tree view renders toolbar successfully 1`] = `
           role="group"
         >
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App1"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -3142,7 +3014,7 @@ exports[`tree view renders toolbar successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 1
                   </span>
@@ -3151,35 +3023,33 @@ exports[`tree view renders toolbar successfully 1`] = `
             </div>
           </li>
           <li
-            class="pf-c-tree-view__list-item"
+            class="pf-v5-c-tree-view__list-item"
             id="App2"
             role="treeitem"
             tabindex="-1"
           >
             <div
-              class="pf-c-tree-view__content"
+              class="pf-v5-c-tree-view__content"
             >
               <button
-                class="pf-c-tree-view__node"
+                class="pf-v5-c-tree-view__node"
               >
                 <span
-                  class="pf-c-tree-view__node-container"
+                  class="pf-v5-c-tree-view__node-container"
                 >
                   <span
-                    class="pf-c-tree-view__node-toggle"
+                    class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
                   >
                     <span
-                      class="pf-c-tree-view__node-toggle-icon"
+                      class="pf-v5-c-tree-view__node-toggle-icon"
                     >
                       <svg
                         aria-hidden="true"
+                        class="pf-v5-svg"
                         fill="currentColor"
-                        height="1em"
                         role="img"
-                        style="vertical-align: -0.125em;"
                         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"
@@ -3188,7 +3058,7 @@ exports[`tree view renders toolbar successfully 1`] = `
                     </span>
                   </span>
                   <span
-                    class="pf-c-tree-view__node-text"
+                    class="pf-v5-c-tree-view__node-text"
                   >
                     Application 2
                   </span>
@@ -3199,35 +3069,33 @@ exports[`tree view renders toolbar successfully 1`] = `
         </ul>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Cost"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -3236,7 +3104,7 @@ exports[`tree view renders toolbar successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Cost Management
               </span>
@@ -3245,35 +3113,33 @@ exports[`tree view renders toolbar successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Sources"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -3282,7 +3148,7 @@ exports[`tree view renders toolbar successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Sources
               </span>
@@ -3291,35 +3157,33 @@ exports[`tree view renders toolbar successfully 1`] = `
         </div>
       </li>
       <li
-        class="pf-c-tree-view__list-item"
+        class="pf-v5-c-tree-view__list-item"
         id="Long"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="pf-c-tree-view__content"
+          class="pf-v5-c-tree-view__content"
         >
           <button
-            class="pf-c-tree-view__node"
+            class="pf-v5-c-tree-view__node"
           >
             <span
-              class="pf-c-tree-view__node-container"
+              class="pf-v5-c-tree-view__node-container"
             >
               <span
-                class="pf-c-tree-view__node-toggle"
+                class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
               >
                 <span
-                  class="pf-c-tree-view__node-toggle-icon"
+                  class="pf-v5-c-tree-view__node-toggle-icon"
                 >
                   <svg
                     aria-hidden="true"
+                    class="pf-v5-svg"
                     fill="currentColor"
-                    height="1em"
                     role="img"
-                    style="vertical-align: -0.125em;"
                     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"
@@ -3328,7 +3192,7 @@ exports[`tree view renders toolbar successfully 1`] = `
                 </span>
               </span>
               <span
-                class="pf-c-tree-view__node-text"
+                class="pf-v5-c-tree-view__node-text"
               >
                 Really really really long folder name that overflows the container it is in
               </span>