npm - @patternfly/react-core - Versions diffs - 6.0.0-alpha.2 → 6.0.0-alpha.21 - Mend

@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1742) hide show

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

@@ -1,3366 +1,122 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`renders compact no background successfully 1`] = `
+exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-tree-view pf-m-compact pf-m-no-background"
-  >
-    <ul
-      class="pf-v5-c-tree-view__list"
-      role="tree"
-    >
-      <li
-        aria-expanded="true"
-        class="pf-v5-c-tree-view__list-item pf-m-expanded"
-        id="AppLaunch"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-            tabindex="0"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-content"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-text"
-                >
-                  ApplicationLauncher
-                </span>
-              </span>
-            </span>
-          </button>
-        </div>
-        <ul
-          class="pf-v5-c-tree-view__list"
-          role="group"
-        >
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App1"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-content"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-text"
-                    >
-                      Application 1
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App2"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-content"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-text"
-                    >
-                      Application 2
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-        </ul>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Cost"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-content"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-text"
-                >
-                  Cost Management
-                </span>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Sources"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-content"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-text"
-                >
-                  Sources
-                </span>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Long"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-content"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-text"
-                >
-                  Really really really long folder name that overflows the container it is in
-                </span>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-exports[`renders compact successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-tree-view pf-m-compact"
-  >
-    <ul
-      class="pf-v5-c-tree-view__list"
-      role="tree"
-    >
-      <li
-        aria-expanded="true"
-        class="pf-v5-c-tree-view__list-item pf-m-expanded"
-        id="AppLaunch"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-            tabindex="0"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-content"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-text"
-                >
-                  ApplicationLauncher
-                </span>
-              </span>
-            </span>
-          </button>
-        </div>
-        <ul
-          class="pf-v5-c-tree-view__list"
-          role="group"
-        >
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App1"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-content"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-text"
-                    >
-                      Application 1
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App2"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-content"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-text"
-                    >
-                      Application 2
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-        </ul>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Cost"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-content"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-text"
-                >
-                  Cost Management
-                </span>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Sources"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-content"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-text"
-                >
-                  Sources
-                </span>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Long"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-content"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-text"
-                >
-                  Really really really long folder name that overflows the container it is in
-                </span>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-exports[`renders guides successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-tree-view pf-m-guides"
-  >
-    <ul
-      class="pf-v5-c-tree-view__list"
-      role="tree"
-    >
-      <li
-        aria-expanded="true"
-        class="pf-v5-c-tree-view__list-item pf-m-expanded"
-        id="AppLaunch"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-            tabindex="0"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                ApplicationLauncher
-              </span>
-            </span>
-          </button>
-        </div>
-        <ul
-          class="pf-v5-c-tree-view__list"
-          role="group"
-        >
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App1"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 1
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App2"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 2
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-        </ul>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Cost"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Cost Management
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Sources"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Sources
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Long"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Really really really long folder name that overflows the container it is in
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-exports[`tree view renders active successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-tree-view"
-  >
-    <ul
-      class="pf-v5-c-tree-view__list"
-      role="tree"
-    >
-      <li
-        aria-expanded="true"
-        class="pf-v5-c-tree-view__list-item pf-m-expanded"
-        id="AppLaunch"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-            tabindex="0"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                ApplicationLauncher
-              </span>
-            </span>
-          </button>
-        </div>
-        <ul
-          class="pf-v5-c-tree-view__list"
-          role="group"
-        >
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App1"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 1
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App2"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 2
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-        </ul>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Cost"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Cost Management
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Sources"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Sources
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Long"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Really really really long folder name that overflows the container it is in
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-exports[`tree view renders badges successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-tree-view"
-  >
-    <ul
-      class="pf-v5-c-tree-view__list"
-      role="tree"
-    >
-      <li
-        aria-expanded="true"
-        class="pf-v5-c-tree-view__list-item pf-m-expanded"
-        id="AppLaunch"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-            tabindex="0"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                ApplicationLauncher
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-count"
-              >
-                <span
-                  class="pf-v5-c-badge pf-m-read"
-                >
-                  2
-                </span>
-              </span>
-            </span>
-          </button>
-        </div>
-        <ul
-          class="pf-v5-c-tree-view__list"
-          role="group"
-        >
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App1"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 1
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-count"
-                  >
-                    <span
-                      class="pf-v5-c-badge pf-m-read"
-                    >
-                      2
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App2"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 2
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-count"
-                  >
-                    <span
-                      class="pf-v5-c-badge pf-m-read"
-                    >
-                      2
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-        </ul>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Cost"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Cost Management
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-count"
-              >
-                <span
-                  class="pf-v5-c-badge pf-m-read"
-                >
-                  1
-                </span>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Sources"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Sources
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-count"
-              >
-                <span
-                  class="pf-v5-c-badge pf-m-read"
-                >
-                  1
-                </span>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Long"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                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-v5-c-tree-view__node-count"
-              >
-                <span
-                  class="pf-v5-c-badge pf-m-read"
-                >
-                  1
-                </span>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-exports[`tree view renders basic successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-tree-view"
-  >
-    <ul
-      class="pf-v5-c-tree-view__list"
-      role="tree"
-    >
-      <li
-        aria-expanded="true"
-        class="pf-v5-c-tree-view__list-item pf-m-expanded"
-        id="AppLaunch"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-            tabindex="0"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                ApplicationLauncher
-              </span>
-            </span>
-          </button>
-        </div>
-        <ul
-          class="pf-v5-c-tree-view__list"
-          role="group"
-        >
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App1"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 1
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App2"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 2
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-        </ul>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Cost"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Cost Management
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Sources"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Sources
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Long"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Really really really long folder name that overflows the container it is in
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-exports[`tree view renders checkboxes successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-tree-view"
-  >
-    <ul
-      class="pf-v5-c-tree-view__list"
-      role="tree"
-    >
-      <li
-        aria-expanded="true"
-        class="pf-v5-c-tree-view__list-item pf-m-expanded"
-        id="AppLaunch"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <label
-            class="pf-v5-c-tree-view__node pf-m-selectable"
-            for="checkbox-id25"
-            id="label-checkbox-id25"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <button
-                aria-labelledby="label-checkbox-id25"
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="0"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <span
-                class="pf-v5-c-tree-view__node-check"
-              >
-                <input
-                  id="checkbox-id25"
-                  tabindex="0"
-                  type="checkbox"
-                />
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                ApplicationLauncher
-              </span>
-            </span>
-          </label>
-        </div>
-        <ul
-          class="pf-v5-c-tree-view__list"
-          role="group"
-        >
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App1"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <label
-                class="pf-v5-c-tree-view__node pf-m-selectable"
-                for="checkbox-id26"
-                id="label-checkbox-id26"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <button
-                    aria-labelledby="label-checkbox-id26"
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <span
-                    class="pf-v5-c-tree-view__node-check"
-                  >
-                    <input
-                      id="checkbox-id26"
-                      tabindex="-1"
-                      type="checkbox"
-                    />
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 1
-                  </span>
-                </span>
-              </label>
-            </div>
-          </li>
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App2"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <label
-                class="pf-v5-c-tree-view__node pf-m-selectable"
-                for="checkbox-id27"
-                id="label-checkbox-id27"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <button
-                    aria-labelledby="label-checkbox-id27"
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <span
-                    class="pf-v5-c-tree-view__node-check"
-                  >
-                    <input
-                      id="checkbox-id27"
-                      tabindex="-1"
-                      type="checkbox"
-                    />
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 2
-                  </span>
-                </span>
-              </label>
-            </div>
-          </li>
-        </ul>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Cost"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <label
-            class="pf-v5-c-tree-view__node pf-m-selectable"
-            for="checkbox-id28"
-            id="label-checkbox-id28"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <button
-                aria-labelledby="label-checkbox-id28"
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <span
-                class="pf-v5-c-tree-view__node-check"
-              >
-                <input
-                  id="checkbox-id28"
-                  tabindex="-1"
-                  type="checkbox"
-                />
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Cost Management
-              </span>
-            </span>
-          </label>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Sources"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <label
-            class="pf-v5-c-tree-view__node pf-m-selectable"
-            for="checkbox-id29"
-            id="label-checkbox-id29"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <button
-                aria-labelledby="label-checkbox-id29"
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <span
-                class="pf-v5-c-tree-view__node-check"
-              >
-                <input
-                  id="checkbox-id29"
-                  tabindex="-1"
-                  type="checkbox"
-                />
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Sources
-              </span>
-            </span>
-          </label>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Long"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <label
-            class="pf-v5-c-tree-view__node pf-m-selectable"
-            for="checkbox-id30"
-            id="label-checkbox-id30"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <button
-                aria-labelledby="label-checkbox-id30"
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <span
-                class="pf-v5-c-tree-view__node-check"
-              >
-                <input
-                  id="checkbox-id30"
-                  tabindex="-1"
-                  type="checkbox"
-                />
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Really really really long folder name that overflows the container it is in
-              </span>
-            </span>
-          </label>
-        </div>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-exports[`tree view renders icons successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-tree-view"
-  >
-    <ul
-      class="pf-v5-c-tree-view__list"
-      role="tree"
-    >
-      <li
-        aria-expanded="true"
-        class="pf-v5-c-tree-view__list-item pf-m-expanded"
-        id="AppLaunch"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-            tabindex="0"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  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"
-                  />
-                </svg>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                ApplicationLauncher
-              </span>
-            </span>
-          </button>
-        </div>
-        <ul
-          class="pf-v5-c-tree-view__list"
-          role="group"
-        >
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App1"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-icon"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v5-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      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"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 1
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App2"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-icon"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v5-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      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"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 2
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-        </ul>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Cost"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  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"
-                  />
-                </svg>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Cost Management
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Sources"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  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"
-                  />
-                </svg>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Sources
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Long"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  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"
-                  />
-                </svg>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Really really really long folder name that overflows the container it is in
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-exports[`tree view renders individual flag options successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-tree-view"
-  >
-    <ul
-      class="pf-v5-c-tree-view__list"
-      role="tree"
-    >
-      <li
-        aria-expanded="true"
-        class="pf-v5-c-tree-view__list-item pf-m-expanded"
-        id="AppLaunch"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <label
-            class="pf-v5-c-tree-view__node pf-m-selectable"
-            for="checkbox-id43"
-            id="label-checkbox-id43"
-            tabindex="0"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <button
-                aria-labelledby="label-checkbox-id43"
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <span
-                class="pf-v5-c-tree-view__node-check"
-              >
-                <input
-                  id="checkbox-id43"
-                  tabindex="-1"
-                  type="checkbox"
-                />
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  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"
-                  />
-                </svg>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                ApplicationLauncher
-              </span>
-            </span>
-          </label>
-        </div>
-        <ul
-          class="pf-v5-c-tree-view__list"
-          role="group"
-        >
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App1"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 1
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App2"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 2
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-count"
-                  >
-                    <span
-                      class="pf-v5-c-badge pf-m-read"
-                    >
-                      2
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-        </ul>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Cost"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Cost Management
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-count"
-              >
-                <span
-                  class="pf-v5-c-badge pf-m-read"
-                >
-                  1
-                </span>
-              </span>
-            </span>
-          </button>
-          <div
-            class="pf-v5-c-tree-view__action"
-          >
-            <button
-              aria-disabled="false"
-              aria-label="Folder action"
-              class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-1"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                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"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Sources"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Sources
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Long"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Really really really long folder name that overflows the container it is in
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-exports[`tree view renders search successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-tree-view__search"
+    data-testid="TreeViewRoot-mock"
   >
+    <p>
+      TreeViewRoot hasCheckboxes: false
+    </p>
+    <p>
+      TreeViewRoot hasGuides: false
+    </p>
+    <p>
+      TreeViewRoot hasSelectableNodes: false
+    </p>
+    <p>
+      TreeViewRoot variant: default
+    </p>
+    <p>
+      TreeViewRoot className: undefined
+    </p>
     <div
-      class="pf-v5-c-form-control pf-m-icon"
+      data-testid="TreeViewRoot-children"
     >
-      <input
-        aria-label="Search input example"
-        id="input-search"
-        name="search-input"
-        type="search"
-      />
       <div
-        class="pf-v5-c-form-control__utilities"
+        data-testid="TreeViewList-mock"
       >
+        <p>
+          TreeViewList isNested: false
+        </p>
+        <p>
+          TreeViewList toolbar: undefined
+        </p>
         <div
-          class="pf-v5-c-form-control__icon"
+          data-testid="TreeViewList-children"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 512 512"
-            width="1em"
+          <div
+            data-testid="TreeViewListItem-mock"
           >
-            <path
-              d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+            <p>
+              TreeViewListItem action: undefined
+            </p>
+            <div
+              data-testid="TreeViewListItem-activeItems"
             />
-          </svg>
+            <p>
+              TreeViewListItem badgeProps: undefined
+            </p>
+            <p>
+              TreeViewListItem checkProps: undefined
+            </p>
+            <p>
+              TreeViewListItem customBadgeContent: undefined
+            </p>
+            <p>
+              TreeViewListItem defaultExpanded: false
+            </p>
+            <p>
+              TreeViewListItem expandedIcon: undefined
+            </p>
+            <p>
+              TreeViewListItem hasBadge: false
+            </p>
+            <p>
+              TreeViewListItem hasCheckbox: false
+            </p>
+            <p>
+              TreeViewListItem icon: undefined
+            </p>
+            <p>
+              TreeViewListItem id: undefined
+            </p>
+            <p>
+              TreeViewListItem isCompact: false
+            </p>
+            <p>
+              TreeViewListItem isExpanded: undefined
+            </p>
+            <p>
+              TreeViewListItem isSelectable: false
+            </p>
+            <p>
+              TreeViewListItem itemData: Basic data name
+            </p>
+            <p>
+              TreeViewListItem name: Basic data name
+            </p>
+            <p>
+              TreeViewListItem parentItem: undefined
+            </p>
+            <p>
+              TreeViewListItem title: undefined
+            </p>
+            <p>
+              TreeViewListItem useMemo: undefined
+            </p>
+            <button>
+              compareItems clicker
+            </button>
+            <button>
+              onCheck clicker
+            </button>
+            <button>
+              onSelect clicker
+            </button>
+            <button>
+              onExpand clicker
+            </button>
+            <button>
+              onCollapse clicker
+            </button>
+            <div
+              data-testid="TreeViewListItem-children"
+            />
+          </div>
         </div>
       </div>
     </div>
   </div>
 </DocumentFragment>
 `;
-exports[`tree view renders toolbar successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-tree-view"
-  >
-    <div>
-      test
-    </div>
-    <hr
-      class="pf-v5-c-divider"
-    />
-    <ul
-      class="pf-v5-c-tree-view__list"
-      role="tree"
-    >
-      <li
-        aria-expanded="true"
-        class="pf-v5-c-tree-view__list-item pf-m-expanded"
-        id="AppLaunch"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-            tabindex="0"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                ApplicationLauncher
-              </span>
-            </span>
-          </button>
-        </div>
-        <ul
-          class="pf-v5-c-tree-view__list"
-          role="group"
-        >
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App1"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 1
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-          <li
-            class="pf-v5-c-tree-view__list-item"
-            id="App2"
-            role="treeitem"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v5-c-tree-view__content"
-            >
-              <button
-                class="pf-v5-c-tree-view__node"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-container"
-                >
-                  <span
-                    class="pf-v5-c-tree-view__node-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v5-c-tree-view__node-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v5-c-tree-view__node-text"
-                  >
-                    Application 2
-                  </span>
-                </span>
-              </button>
-            </div>
-          </li>
-        </ul>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Cost"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Cost Management
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Sources"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Sources
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="pf-v5-c-tree-view__list-item"
-        id="Long"
-        role="treeitem"
-        tabindex="-1"
-      >
-        <div
-          class="pf-v5-c-tree-view__content"
-        >
-          <button
-            class="pf-v5-c-tree-view__node"
-          >
-            <span
-              class="pf-v5-c-tree-view__node-container"
-            >
-              <span
-                class="pf-v5-c-tree-view__node-toggle"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v5-c-tree-view__node-toggle-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="pf-v5-c-tree-view__node-text"
-              >
-                Really really really long folder name that overflows the container it is in
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;