// 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>
`;