@patternfly/react-core 6.0.0-alpha.57 → 6.0.0-alpha.58

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

@@ -1,2415 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Select renders select groups successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-expanded"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="true"
-      aria-haspopup="listbox"
-      aria-label="Options menu"
-      aria-labelledby=" pf-select-toggle-id-4"
-      class="pf-v6-c-select__toggle"
-      id="pf-select-toggle-id-4"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        />
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-    <div
-      class="pf-v6-c-select__menu"
-    >
-      <div
-        class="pf-v6-c-select__menu-group"
-      >
-        <div
-          aria-hidden="true"
-          class="pf-v6-c-select__menu-group-title"
-          id="group-1"
-        >
-          group 1
-        </div>
-        <ul
-          role="listbox"
-        >
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-1"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item"
-              role="option"
-              type="button"
-            >
-              Mr
-            </button>
-          </li>
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-2"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item"
-              role="option"
-              type="button"
-            >
-              Mrs
-            </button>
-          </li>
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-3"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item"
-              role="option"
-              type="button"
-            >
-              Ms
-            </button>
-          </li>
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-4"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item"
-              role="option"
-              type="button"
-            >
-              Other
-            </button>
-          </li>
-        </ul>
-      </div>
-      <div
-        class="pf-v6-c-select__menu-group"
-      >
-        <div
-          aria-hidden="true"
-          class="pf-v6-c-select__menu-group-title"
-          id="group-2"
-        >
-          group 2
-        </div>
-        <ul
-          role="listbox"
-        >
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-1"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item"
-              role="option"
-              type="button"
-            >
-              Mr
-            </button>
-          </li>
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-2"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item"
-              role="option"
-              type="button"
-            >
-              Mrs
-            </button>
-          </li>
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-3"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item"
-              role="option"
-              type="button"
-            >
-              Ms
-            </button>
-          </li>
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-4"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item"
-              role="option"
-              type="button"
-            >
-              Other
-            </button>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Select renders up direction successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-top"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="listbox"
-      aria-label="Options menu"
-      aria-labelledby=" select-up"
-      class="pf-v6-c-select__toggle"
-      id="select-up"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        >
-          Mr
-        </span>
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Select single select renders closed successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="listbox"
-      aria-label="Options menu"
-      aria-labelledby=" single-select-closed"
-      class="pf-v6-c-select__toggle"
-      id="single-select-closed"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        >
-          Mr
-        </span>
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Select single select renders disabled successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="listbox"
-      aria-label="Options menu"
-      aria-labelledby=" single-select-disabled"
-      class="pf-v6-c-select__toggle pf-m-disabled"
-      disabled=""
-      id="single-select-disabled"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        >
-          Mr
-        </span>
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Select single select renders expanded in strict mode successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-expanded"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="true"
-      aria-haspopup="listbox"
-      aria-label="Options menu"
-      aria-labelledby=" pf-select-toggle-id-1"
-      class="pf-v6-c-select__toggle"
-      id="pf-select-toggle-id-1"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        >
-          Mr
-        </span>
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-    <ul
-      aria-label=""
-      class="pf-v6-c-select__menu"
-      role="listbox"
-    >
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-1"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Mr
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-2"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Mrs
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-3"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Ms
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-4"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Other
-        </button>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Select single select renders expanded successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-expanded"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="true"
-      aria-haspopup="listbox"
-      aria-label="Options menu"
-      aria-labelledby=" pf-select-toggle-id-0"
-      class="pf-v6-c-select__toggle"
-      id="pf-select-toggle-id-0"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        >
-          Mr
-        </span>
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-    <ul
-      aria-label=""
-      class="pf-v6-c-select__menu"
-      role="listbox"
-    >
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-1"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Mr
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-2"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Mrs
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-3"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Ms
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-4"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Other
-        </button>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Select single select renders expanded successfully with custom objects 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-expanded"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="true"
-      aria-haspopup="listbox"
-      aria-label="Options menu"
-      aria-labelledby=" pf-select-toggle-id-3"
-      class="pf-v6-c-select__toggle"
-      id="pf-select-toggle-id-3"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        >
-          Mr: User One
-        </span>
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-    <ul
-      aria-label=""
-      class="pf-v6-c-select__menu"
-      role="listbox"
-    >
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-1"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Mr: User One
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-2"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Mrs: New User
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-3"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Ms: Test Three
-        </button>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`checkbox select renders checkbox select groups successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-expanded"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="true"
-      aria-label="Options menu"
-      aria-labelledby=" pf-select-toggle-id-8"
-      class="pf-v6-c-select__toggle"
-      id="pf-select-toggle-id-8"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        />
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-    <div
-      class="pf-v6-c-select__menu"
-    >
-      <div
-        class="pf-v6-c-select__menu-group"
-      >
-        <div
-          aria-hidden="true"
-          class="pf-v6-c-select__menu-group-title"
-          id="group-1"
-        >
-          group 1
-        </div>
-        <fieldset
-          aria-labelledby="group-1"
-          class="pf-v6-c-select__menu-fieldset"
-        >
-          <label
-            class="pf-v6-c-check pf-v6-c-select__menu-item"
-          >
-            <input
-              class="pf-v6-c-check__input"
-              id="generated-id-Mr"
-              type="checkbox"
-            />
-            <span
-              class="pf-v6-c-check__label"
-            >
-              Mr
-            </span>
-          </label>
-          <label
-            class="pf-v6-c-check pf-v6-c-select__menu-item"
-          >
-            <input
-              class="pf-v6-c-check__input"
-              id="generated-id-Mrs"
-              type="checkbox"
-            />
-            <span
-              class="pf-v6-c-check__label"
-            >
-              Mrs
-            </span>
-          </label>
-          <label
-            class="pf-v6-c-check pf-v6-c-select__menu-item"
-          >
-            <input
-              class="pf-v6-c-check__input"
-              id="generated-id-Ms"
-              type="checkbox"
-            />
-            <span
-              class="pf-v6-c-check__label"
-            >
-              Ms
-            </span>
-          </label>
-          <label
-            class="pf-v6-c-check pf-v6-c-select__menu-item"
-          >
-            <input
-              class="pf-v6-c-check__input"
-              id="generated-id-Other"
-              type="checkbox"
-            />
-            <span
-              class="pf-v6-c-check__label"
-            >
-              Other
-            </span>
-          </label>
-        </fieldset>
-      </div>
-      <div
-        class="pf-v6-c-select__menu-group"
-      >
-        <div
-          aria-hidden="true"
-          class="pf-v6-c-select__menu-group-title"
-          id="group-2"
-        >
-          group 2
-        </div>
-        <fieldset
-          aria-labelledby="group-2"
-          class="pf-v6-c-select__menu-fieldset"
-        >
-          <label
-            class="pf-v6-c-check pf-v6-c-select__menu-item"
-          >
-            <input
-              class="pf-v6-c-check__input"
-              id="generated-id-Mr"
-              type="checkbox"
-            />
-            <span
-              class="pf-v6-c-check__label"
-            >
-              Mr
-            </span>
-          </label>
-          <label
-            class="pf-v6-c-check pf-v6-c-select__menu-item"
-          >
-            <input
-              class="pf-v6-c-check__input"
-              id="generated-id-Mrs"
-              type="checkbox"
-            />
-            <span
-              class="pf-v6-c-check__label"
-            >
-              Mrs
-            </span>
-          </label>
-          <label
-            class="pf-v6-c-check pf-v6-c-select__menu-item"
-          >
-            <input
-              class="pf-v6-c-check__input"
-              id="generated-id-Ms"
-              type="checkbox"
-            />
-            <span
-              class="pf-v6-c-check__label"
-            >
-              Ms
-            </span>
-          </label>
-          <label
-            class="pf-v6-c-check pf-v6-c-select__menu-item"
-          >
-            <input
-              class="pf-v6-c-check__input"
-              id="generated-id-Other"
-              type="checkbox"
-            />
-            <span
-              class="pf-v6-c-check__label"
-            >
-              Other
-            </span>
-          </label>
-        </fieldset>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`checkbox select renders checkbox select selections properly 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-label="Options menu"
-      aria-labelledby=" checkbox-select-selections"
-      class="pf-v6-c-select__toggle"
-      id="checkbox-select-selections"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        />
-        <div
-          class="pf-v6-c-select__toggle-badge"
-        >
-          <span
-            class="pf-v6-c-badge pf-m-read"
-          >
-            1
-          </span>
-        </div>
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`checkbox select renders checkbox select selections properly when isCheckboxSelectionBadgeHidden is true 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-label="Options menu"
-      aria-labelledby=" checkbox-select-hidden-badge"
-      class="pf-v6-c-select__toggle"
-      id="checkbox-select-hidden-badge"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        />
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`checkbox select renders closed successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="false"
-      aria-label="Options menu"
-      aria-labelledby=" checkbox-select-closed"
-      class="pf-v6-c-select__toggle"
-      id="checkbox-select-closed"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        />
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`checkbox select renders expanded successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-expanded"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="true"
-      aria-label="Options menu"
-      aria-labelledby=" pf-select-toggle-id-6"
-      class="pf-v6-c-select__toggle"
-      id="pf-select-toggle-id-6"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        />
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-    <ul
-      aria-label=""
-      class="pf-v6-c-select__menu"
-      role="listbox"
-    >
-      <label
-        class="pf-v6-c-check pf-v6-c-select__menu-item"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          id="generated-id-Mr"
-          type="checkbox"
-        />
-        <span
-          class="pf-v6-c-check__label"
-        >
-          Mr
-        </span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v6-c-select__menu-item"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          id="generated-id-Mrs"
-          type="checkbox"
-        />
-        <span
-          class="pf-v6-c-check__label"
-        >
-          Mrs
-        </span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v6-c-select__menu-item"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          id="generated-id-Ms"
-          type="checkbox"
-        />
-        <span
-          class="pf-v6-c-check__label"
-        >
-          Ms
-        </span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v6-c-select__menu-item"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          id="generated-id-Other"
-          type="checkbox"
-        />
-        <span
-          class="pf-v6-c-check__label"
-        >
-          Other
-        </span>
-      </label>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`checkbox select renders expanded successfully with custom objects 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-expanded"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="true"
-      aria-label="Options menu"
-      aria-labelledby=" pf-select-toggle-id-7"
-      class="pf-v6-c-select__toggle"
-      id="pf-select-toggle-id-7"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        />
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-    <ul
-      aria-label=""
-      class="pf-v6-c-select__menu"
-      role="listbox"
-    >
-      <label
-        class="pf-v6-c-check pf-v6-c-select__menu-item"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          id="generated-id-Mr: User One"
-          type="checkbox"
-        />
-        <span
-          class="pf-v6-c-check__label"
-        >
-          Mr: User One
-        </span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v6-c-select__menu-item"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          id="generated-id-Mrs: New User"
-          type="checkbox"
-        />
-        <span
-          class="pf-v6-c-check__label"
-        >
-          Mrs: New User
-        </span>
-      </label>
-      <label
-        class="pf-v6-c-check pf-v6-c-select__menu-item"
-      >
-        <input
-          class="pf-v6-c-check__input"
-          id="generated-id-Ms: Test Three"
-          type="checkbox"
-        />
-        <span
-          class="pf-v6-c-check__label"
-        >
-          Ms: Test Three
-        </span>
-      </label>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`checkbox select renders expanded with filtering successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-expanded"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <div
-      class="pf-v6-c-select__toggle pf-m-typeahead"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        />
-      </div>
-      <button
-        aria-expanded="true"
-        aria-label="Options menu"
-        aria-labelledby=" checkbox-select-expanded-filtered"
-        class="pf-v6-c-button pf-v6-c-select__toggle-button pf-m-plain"
-        id="checkbox-select-expanded-filtered"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg pf-v6-c-select__toggle-arrow"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="pf-v6-c-select__menu"
-    >
-      <fieldset
-        aria-label=""
-        class="pf-v6-c-form__fieldset"
-      >
-        <div
-          class="pf-v6-c-select__menu-search"
-        >
-          <div
-            class="pf-v6-c-form-control"
-          >
-            <input
-              autocomplete="off"
-              type="search"
-            />
-          </div>
-        </div>
-        <hr
-          class="pf-v6-c-divider"
-        />
-        <label
-          class="pf-v6-c-check pf-v6-c-select__menu-item"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            id="generated-id-Mr"
-            type="checkbox"
-          />
-          <span
-            class="pf-v6-c-check__label"
-          >
-            Mr
-          </span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v6-c-select__menu-item"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            id="generated-id-Mrs"
-            type="checkbox"
-          />
-          <span
-            class="pf-v6-c-check__label"
-          >
-            Mrs
-          </span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v6-c-select__menu-item"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            id="generated-id-Ms"
-            type="checkbox"
-          />
-          <span
-            class="pf-v6-c-check__label"
-          >
-            Ms
-          </span>
-        </label>
-        <label
-          class="pf-v6-c-check pf-v6-c-select__menu-item"
-        >
-          <input
-            class="pf-v6-c-check__input"
-            id="generated-id-Other"
-            type="checkbox"
-          />
-          <span
-            class="pf-v6-c-check__label"
-          >
-            Other
-          </span>
-        </label>
-      </fieldset>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`renders select with favorites successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-expanded"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <button
-      aria-expanded="true"
-      aria-haspopup="listbox"
-      aria-label="Options menu"
-      aria-labelledby=" pf-select-toggle-id-5"
-      class="pf-v6-c-select__toggle"
-      id="pf-select-toggle-id-5"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-select__toggle-text"
-        />
-      </div>
-      <span
-        class="pf-v6-c-select__toggle-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-    <div
-      class="pf-v6-c-select__menu"
-    >
-      <div
-        class="pf-v6-c-select__menu-group"
-      >
-        <div
-          aria-hidden="true"
-          class="pf-v6-c-select__menu-group-title"
-          id="group-1"
-        >
-          group 1
-        </div>
-        <ul
-          role="listbox"
-        >
-          <li
-            class="pf-v6-c-select__menu-wrapper pf-m-favorite"
-            id="option-1"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item pf-m-link"
-              role="option"
-              type="button"
-            >
-              Mr
-            </button>
-            <button
-              aria-label="starred"
-              class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            >
-              <span
-                class="pf-v6-c-select__menu-item-action-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 576 512"
-                  width="1em"
-                >
-                  <path
-                    d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                  />
-                </svg>
-              </span>
-            </button>
-          </li>
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-2"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item pf-m-link"
-              role="option"
-              type="button"
-            >
-              Mrs
-            </button>
-            <button
-              aria-label="not starred"
-              class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            >
-              <span
-                class="pf-v6-c-select__menu-item-action-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 576 512"
-                  width="1em"
-                >
-                  <path
-                    d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                  />
-                </svg>
-              </span>
-            </button>
-          </li>
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-2"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item pf-m-link"
-              role="option"
-              type="button"
-            >
-              Ms
-            </button>
-            <button
-              aria-label="not starred"
-              class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            >
-              <span
-                class="pf-v6-c-select__menu-item-action-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 576 512"
-                  width="1em"
-                >
-                  <path
-                    d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                  />
-                </svg>
-              </span>
-            </button>
-          </li>
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-4"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item pf-m-link"
-              role="option"
-              type="button"
-            >
-              Other
-            </button>
-            <button
-              aria-label="not starred"
-              class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            >
-              <span
-                class="pf-v6-c-select__menu-item-action-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 576 512"
-                  width="1em"
-                >
-                  <path
-                    d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                  />
-                </svg>
-              </span>
-            </button>
-          </li>
-        </ul>
-      </div>
-      <div
-        class="pf-v6-c-select__menu-group"
-      >
-        <div
-          aria-hidden="true"
-          class="pf-v6-c-select__menu-group-title"
-          id="group-2"
-        >
-          group 2
-        </div>
-        <ul
-          role="listbox"
-        >
-          <li
-            class="pf-v6-c-select__menu-wrapper pf-m-favorite"
-            id="option-1"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item pf-m-link"
-              role="option"
-              type="button"
-            >
-              Mr
-            </button>
-            <button
-              aria-label="starred"
-              class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            >
-              <span
-                class="pf-v6-c-select__menu-item-action-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 576 512"
-                  width="1em"
-                >
-                  <path
-                    d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                  />
-                </svg>
-              </span>
-            </button>
-          </li>
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-2"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item pf-m-link"
-              role="option"
-              type="button"
-            >
-              Mrs
-            </button>
-            <button
-              aria-label="not starred"
-              class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            >
-              <span
-                class="pf-v6-c-select__menu-item-action-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 576 512"
-                  width="1em"
-                >
-                  <path
-                    d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                  />
-                </svg>
-              </span>
-            </button>
-          </li>
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-2"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item pf-m-link"
-              role="option"
-              type="button"
-            >
-              Ms
-            </button>
-            <button
-              aria-label="not starred"
-              class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            >
-              <span
-                class="pf-v6-c-select__menu-item-action-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 576 512"
-                  width="1em"
-                >
-                  <path
-                    d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                  />
-                </svg>
-              </span>
-            </button>
-          </li>
-          <li
-            class="pf-v6-c-select__menu-wrapper"
-            id="option-4"
-            role="presentation"
-          >
-            <button
-              class="pf-v6-c-select__menu-item pf-m-link"
-              role="option"
-              type="button"
-            >
-              Other
-            </button>
-            <button
-              aria-label="not starred"
-              class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
-            >
-              <span
-                class="pf-v6-c-select__menu-item-action-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 576 512"
-                  width="1em"
-                >
-                  <path
-                    d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                  />
-                </svg>
-              </span>
-            </button>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`typeahead multi select renders closed successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <div
-      class="pf-v6-c-select__toggle pf-m-typeahead"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead"
-        >
-          <input
-            aria-invalid="false"
-            aria-label=""
-            autocomplete="off"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-6"
-            data-ouia-component-type="PF6/TextInput"
-            data-ouia-safe="true"
-            id="typeahead-multi-select-closed-select-multi-typeahead-typeahead"
-            placeholder=""
-            type="text"
-            value=""
-          />
-        </span>
-      </div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Options menu"
-        aria-labelledby=" typeahead-multi-select-closed"
-        class="pf-v6-c-button pf-v6-c-select__toggle-button pf-m-plain"
-        id="typeahead-multi-select-closed"
-        tabindex="-1"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg pf-v6-c-select__toggle-arrow"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`typeahead multi select renders expanded successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-expanded"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <div
-      class="pf-v6-c-select__toggle pf-m-typeahead"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead"
-        >
-          <input
-            aria-invalid="false"
-            aria-label=""
-            autocomplete="off"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-7"
-            data-ouia-component-type="PF6/TextInput"
-            data-ouia-safe="true"
-            id="pf-select-toggle-id-19-select-multi-typeahead-typeahead"
-            placeholder=""
-            type="text"
-            value=""
-          />
-        </span>
-      </div>
-      <button
-        aria-expanded="true"
-        aria-haspopup="listbox"
-        aria-label="Options menu"
-        aria-labelledby=" pf-select-toggle-id-19"
-        class="pf-v6-c-button pf-v6-c-select__toggle-button pf-m-plain"
-        id="pf-select-toggle-id-19"
-        tabindex="-1"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg pf-v6-c-select__toggle-arrow"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </button>
-    </div>
-    <ul
-      aria-label=""
-      class="pf-v6-c-select__menu"
-      role="listbox"
-    >
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-1"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Mr
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-2"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Mrs
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-3"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Ms
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-4"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Other
-        </button>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`typeahead multi select renders selected successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-expanded"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <div
-      class="pf-v6-c-select__toggle pf-m-typeahead"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <div
-          class="pf-v6-c-label-group"
-        >
-          <div
-            class="pf-v6-c-label-group__main"
-          >
-            <ul
-              aria-label="Chip group category"
-              class="pf-v6-c-label-group__list"
-              data-ouia-component-type="PF6/ChipGroup"
-              data-ouia-safe="true"
-              role="list"
-            >
-              <li
-                class="pf-v6-c-label-group__list-item"
-              >
-                <span
-                  class="pf-v6-c-label pf-m-outline"
-                  data-ouia-component-id="OUIA-Generated-Chip-1"
-                  data-ouia-component-type="PF6/Chip"
-                  data-ouia-safe="true"
-                >
-                  <span
-                    class="pf-v6-c-label__content"
-                  >
-                    <span
-                      class="pf-v6-c-label__text"
-                      style="--pf-v6-c-label__text--MaxWidth: 16ch;"
-                    >
-                      Mr
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v6-c-label__actions"
-                  >
-                    <button
-                      aria-disabled="false"
-                      aria-label="Remove"
-                      class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-                      data-ouia-component-id="OUIA-Generated-Button-plain-1"
-                      data-ouia-component-type="PF6/Button"
-                      data-ouia-safe="true"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v6-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 352 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                        />
-                      </svg>
-                    </button>
-                  </span>
-                </span>
-              </li>
-              <li
-                class="pf-v6-c-label-group__list-item"
-              >
-                <span
-                  class="pf-v6-c-label pf-m-outline"
-                  data-ouia-component-id="OUIA-Generated-Chip-2"
-                  data-ouia-component-type="PF6/Chip"
-                  data-ouia-safe="true"
-                >
-                  <span
-                    class="pf-v6-c-label__content"
-                  >
-                    <span
-                      class="pf-v6-c-label__text"
-                      style="--pf-v6-c-label__text--MaxWidth: 16ch;"
-                    >
-                      Mrs
-                    </span>
-                  </span>
-                  <span
-                    class="pf-v6-c-label__actions"
-                  >
-                    <button
-                      aria-disabled="false"
-                      aria-label="Remove"
-                      class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-                      data-ouia-component-id="OUIA-Generated-Button-plain-2"
-                      data-ouia-component-type="PF6/Button"
-                      data-ouia-safe="true"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v6-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 352 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                        />
-                      </svg>
-                    </button>
-                  </span>
-                </span>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <span
-          class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead"
-        >
-          <input
-            aria-invalid="false"
-            aria-label=""
-            autocomplete="off"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-8"
-            data-ouia-component-type="PF6/TextInput"
-            data-ouia-safe="true"
-            id="typeahead-multi-select-selected-select-multi-typeahead-typeahead"
-            placeholder=""
-            type="text"
-            value=""
-          />
-        </span>
-      </div>
-      <button
-        aria-expanded="true"
-        aria-haspopup="listbox"
-        aria-label="Options menu"
-        aria-labelledby=" typeahead-multi-select-selected"
-        class="pf-v6-c-button pf-v6-c-select__toggle-button pf-m-plain"
-        id="typeahead-multi-select-selected"
-        tabindex="-1"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg pf-v6-c-select__toggle-arrow"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </button>
-    </div>
-    <ul
-      aria-label=""
-      class="pf-v6-c-select__menu"
-      role="listbox"
-    >
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-1"
-        role="presentation"
-      >
-        <button
-          aria-selected="true"
-          class="pf-v6-c-select__menu-item pf-m-selected"
-          role="option"
-          type="button"
-        >
-          Mr
-          <span
-            class="pf-v6-c-select__menu-item-icon"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 512 512"
-              width="1em"
-            >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-              />
-            </svg>
-          </span>
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-2"
-        role="presentation"
-      >
-        <button
-          aria-selected="true"
-          class="pf-v6-c-select__menu-item pf-m-selected"
-          role="option"
-          type="button"
-        >
-          Mrs
-          <span
-            class="pf-v6-c-select__menu-item-icon"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 512 512"
-              width="1em"
-            >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-              />
-            </svg>
-          </span>
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-3"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Ms
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-4"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Other
-        </button>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`typeahead select renders closed successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <div
-      class="pf-v6-c-select__toggle pf-m-typeahead"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead"
-        >
-          <input
-            aria-invalid="false"
-            aria-label=""
-            autocomplete="off"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-            data-ouia-component-type="PF6/TextInput"
-            data-ouia-safe="true"
-            id="typeahead-select-closed-select-typeahead"
-            placeholder=""
-            type="text"
-            value=""
-          />
-        </span>
-      </div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Options menu"
-        aria-labelledby=" typeahead-select-closed"
-        class="pf-v6-c-button pf-v6-c-select__toggle-button pf-m-plain"
-        id="typeahead-select-closed"
-        tabindex="-1"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg pf-v6-c-select__toggle-arrow"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`typeahead select renders expanded successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-expanded"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <div
-      class="pf-v6-c-select__toggle pf-m-typeahead"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead"
-        >
-          <input
-            aria-invalid="false"
-            aria-label=""
-            autocomplete="off"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-            data-ouia-component-type="PF6/TextInput"
-            data-ouia-safe="true"
-            id="pf-select-toggle-id-9-select-typeahead"
-            placeholder=""
-            type="text"
-            value=""
-          />
-        </span>
-      </div>
-      <button
-        aria-expanded="true"
-        aria-haspopup="listbox"
-        aria-label="Options menu"
-        aria-labelledby=" pf-select-toggle-id-9"
-        class="pf-v6-c-button pf-v6-c-select__toggle-button pf-m-plain"
-        id="pf-select-toggle-id-9"
-        tabindex="-1"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg pf-v6-c-select__toggle-arrow"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </button>
-    </div>
-    <ul
-      aria-label=""
-      class="pf-v6-c-select__menu"
-      role="listbox"
-    >
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-1"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Mr
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-2"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Mrs
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-3"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Ms
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-4"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Other
-        </button>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`typeahead select renders selected successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-select pf-m-expanded"
-    data-ouia-component-id="test-id"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-  >
-    <div
-      class="pf-v6-c-select__toggle pf-m-typeahead"
-    >
-      <div
-        class="pf-v6-c-select__toggle-wrapper"
-      >
-        <span
-          class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead"
-        >
-          <input
-            aria-invalid="false"
-            aria-label=""
-            autocomplete="off"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-            data-ouia-component-type="PF6/TextInput"
-            data-ouia-safe="true"
-            id="pf-select-toggle-id-10-select-typeahead"
-            placeholder=""
-            type="text"
-            value="Mr"
-          />
-        </span>
-      </div>
-      <button
-        aria-expanded="true"
-        aria-haspopup="listbox"
-        aria-label="Options menu"
-        aria-labelledby=" pf-select-toggle-id-10"
-        class="pf-v6-c-button pf-v6-c-select__toggle-button pf-m-plain"
-        id="pf-select-toggle-id-10"
-        tabindex="-1"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg pf-v6-c-select__toggle-arrow"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </button>
-    </div>
-    <ul
-      aria-label=""
-      class="pf-v6-c-select__menu"
-      role="listbox"
-    >
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-1"
-        role="presentation"
-      >
-        <button
-          aria-selected="true"
-          class="pf-v6-c-select__menu-item pf-m-selected"
-          role="option"
-          type="button"
-        >
-          Mr
-          <span
-            class="pf-v6-c-select__menu-item-icon"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 512 512"
-              width="1em"
-            >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-              />
-            </svg>
-          </span>
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-2"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Mrs
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-3"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Ms
-        </button>
-      </li>
-      <li
-        class="pf-v6-c-select__menu-wrapper"
-        id="option-4"
-        role="presentation"
-      >
-        <button
-          class="pf-v6-c-select__menu-item"
-          role="option"
-          type="button"
-        >
-          Other
-        </button>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;