@patternfly/react-core 6.0.0-alpha.8 → 6.0.0-alpha.81

package/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap

@@ -0,0 +1,1881 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DualListSelector basic 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    id="firstTest"
+  >
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Available options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="firstTest-available-pane-status"
+        >
+          0 of 2 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-labelledby="firstTest-available-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="listbox"
+        >
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="firstTest-available-pane-list-option-0"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 1
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="firstTest-available-pane-list-option-1"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 2
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      aria-label="Selector controls"
+      class="pf-v6-c-dual-list-selector__controls"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-1"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-2"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-3"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-4"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Chosen options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="firstTest-chosen-pane-status"
+        >
+          0 of 0 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          class="pf-v6-c-dual-list-selector__list"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DualListSelector basic with disabled controls 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    id="disabledTest"
+  >
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Available options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="disabledTest-available-pane-status"
+        >
+          0 of 2 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-disabled="true"
+          aria-labelledby="disabledTest-available-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="listbox"
+        >
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item pf-m-disabled"
+            id="disabledTest-available-pane-list-option-0"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 1
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item pf-m-disabled"
+            id="disabledTest-available-pane-list-option-1"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 2
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      aria-label="Selector controls"
+      class="pf-v6-c-dual-list-selector__controls"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-13"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-14"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-15"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-16"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Chosen options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="disabledTest-chosen-pane-status"
+        >
+          0 of 0 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-disabled="true"
+          class="pf-v6-c-dual-list-selector__list"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DualListSelector with actions 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    id="fourthTest"
+  >
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Available options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__tools"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__tools-actions"
+        >
+          <span>
+            TestNode1
+          </span>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="fourthTest-available-pane-status"
+        >
+          0 of 2 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-labelledby="fourthTest-available-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="listbox"
+        >
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="fourthTest-available-pane-list-option-0"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 1
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="fourthTest-available-pane-list-option-1"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 2
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      aria-label="Selector controls"
+      class="pf-v6-c-dual-list-selector__controls"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-21"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-22"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-23"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-24"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Chosen options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__tools"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__tools-actions"
+        >
+          <span>
+            TestNode2
+          </span>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="fourthTest-chosen-pane-status"
+        >
+          0 of 2 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-labelledby="fourthTest-chosen-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="listbox"
+        >
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="fourthTest-chosen-pane-list-option-0"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 3
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="fourthTest-chosen-pane-list-option-1"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 4
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DualListSelector with custom status 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    id="thirdTest"
+  >
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Available options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="thirdTest-available-pane-status"
+        >
+          Test status1
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-labelledby="thirdTest-available-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="listbox"
+        >
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="thirdTest-available-pane-list-option-0"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 1
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="thirdTest-available-pane-list-option-1"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 2
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      aria-label="Selector controls"
+      class="pf-v6-c-dual-list-selector__controls"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-9"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-10"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-11"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-12"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Chosen options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="thirdTest-chosen-pane-status"
+        >
+          Test status2
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          class="pf-v6-c-dual-list-selector__list"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DualListSelector with search inputs 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    id="secondTest"
+  >
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Available options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__tools"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__tools-filter"
+        >
+          <div
+            class="pf-v6-c-text-input-group"
+          >
+            <div
+              class="pf-v6-c-text-input-group__main pf-m-icon"
+            >
+              <span
+                class="pf-v6-c-text-input-group__text"
+              >
+                <span
+                  class="pf-v6-c-text-input-group__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <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"
+                    />
+                  </svg>
+                </span>
+                <input
+                  aria-label="Available search input"
+                  class="pf-v6-c-text-input-group__text-input"
+                  type="text"
+                  value=""
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="secondTest-available-pane-status"
+        >
+          0 of 2 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-labelledby="secondTest-available-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="listbox"
+        >
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="secondTest-available-pane-list-option-0"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 1
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="secondTest-available-pane-list-option-1"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 2
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      aria-label="Selector controls"
+      class="pf-v6-c-dual-list-selector__controls"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-5"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-6"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-7"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-8"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Chosen options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__tools"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__tools-filter"
+        >
+          <div
+            class="pf-v6-c-text-input-group"
+          >
+            <div
+              class="pf-v6-c-text-input-group__main pf-m-icon"
+            >
+              <span
+                class="pf-v6-c-text-input-group__text"
+              >
+                <span
+                  class="pf-v6-c-text-input-group__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <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"
+                    />
+                  </svg>
+                </span>
+                <input
+                  aria-label="Chosen search input"
+                  class="pf-v6-c-text-input-group__text-input"
+                  type="text"
+                  value=""
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="secondTest-chosen-pane-status"
+        >
+          0 of 0 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          class="pf-v6-c-dual-list-selector__list"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DualListSelector with tree 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    id="tree-test"
+  >
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Available options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="tree-test-available-pane-status"
+        >
+          Test status1
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-labelledby="tree-test-available-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="tree"
+        >
+          <li
+            aria-expanded="true"
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
+            id="O1"
+            role="treeitem"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
+            >
+              <div
+                class="pf-v6-c-dual-list-selector__item"
+                tabindex="-1"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <div
+                    class="pf-v6-c-dual-list-selector__item-toggle"
+                    tabindex="-1"
+                  >
+                    <span
+                      class="pf-v6-c-dual-list-selector__item-toggle-icon"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v6-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 256 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-check"
+                  >
+                    <input
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                  </span>
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Opt1
+                  </span>
+                </span>
+              </div>
+            </div>
+            <ul
+              class="pf-v6-c-dual-list-selector__list"
+              role="group"
+            >
+              <li
+                aria-selected="false"
+                class="pf-v6-c-dual-list-selector__list-item"
+                id="O3"
+                role="treeitem"
+              >
+                <div
+                  class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
+                >
+                  <div
+                    class="pf-v6-c-dual-list-selector__item"
+                    tabindex="-1"
+                  >
+                    <span
+                      class="pf-v6-c-dual-list-selector__item-main"
+                    >
+                      <span
+                        class="pf-v6-c-dual-list-selector__item-check"
+                      >
+                        <input
+                          tabindex="-1"
+                          type="checkbox"
+                        />
+                      </span>
+                      <span
+                        class="pf-v6-c-dual-list-selector__item-text"
+                      >
+                        Opt3
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="O2"
+            role="treeitem"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
+            >
+              <div
+                class="pf-v6-c-dual-list-selector__item"
+                tabindex="-1"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-check"
+                  >
+                    <input
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                  </span>
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Opt2
+                  </span>
+                </span>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      aria-label="Selector controls"
+      class="pf-v6-c-dual-list-selector__controls"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-17"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-18"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-19"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-20"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Chosen options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="tree-test-chosen-pane-status"
+        >
+          Test status2
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          class="pf-v6-c-dual-list-selector__list"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;