// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
    data-ouia-component-id="OUIA-Generated-Pagination-top-43"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        0
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-44"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            0
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-177"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-178"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-45"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="2"
            min="1"
            type="number"
            value="1"
          />
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-179"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-180"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
    test
  </div>
</DocumentFragment>
`;

exports[`Pagination API verify insetLg inset breakpoints 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
    data-ouia-component-id="OUIA-Generated-Pagination-top-41"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        0
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-42"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            0
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-169"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-170"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-43"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="2"
            min="1"
            type="number"
            value="1"
          />
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-171"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-172"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
    test
  </div>
</DocumentFragment>
`;

exports[`Pagination API verify insetMd inset breakpoints 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
    data-ouia-component-id="OUIA-Generated-Pagination-top-40"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        0
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-41"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            0
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-165"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-166"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-42"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="2"
            min="1"
            type="number"
            value="1"
          />
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-167"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-168"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
    test
  </div>
</DocumentFragment>
`;

exports[`Pagination API verify insetNone inset breakpoints 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
    data-ouia-component-id="OUIA-Generated-Pagination-top-38"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        0
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-39"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            0
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-157"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-158"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-40"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="2"
            min="1"
            type="number"
            value="1"
          />
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-159"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-160"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
    test
  </div>
</DocumentFragment>
`;

exports[`Pagination API verify insetSm inset breakpoints 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
    data-ouia-component-id="OUIA-Generated-Pagination-top-39"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        0
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-40"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            0
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-161"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-162"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-41"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="2"
            min="1"
            type="number"
            value="1"
          />
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-163"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-164"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
    test
  </div>
</DocumentFragment>
`;

exports[`Pagination API verify insetXl inset breakpoints 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
    data-ouia-component-id="OUIA-Generated-Pagination-top-42"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        0
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-43"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            0
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-173"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-174"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-44"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="2"
            min="1"
            type="number"
            value="1"
          />
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-175"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-176"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
    test
  </div>
</DocumentFragment>
`;

exports[`Pagination component render custom pagination toggle 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination"
    data-ouia-component-id="OUIA-Generated-Pagination-top-12"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      1 - 10 - 40 - 
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-13"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          1 - 10 - 40 - 
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-53"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-54"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-14"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="4"
            min="1"
            type="number"
            value="1"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 4
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-55"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-56"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render custom perPageOptions 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination"
    data-ouia-component-id="OUIA-Generated-Pagination-top-8"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        40
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-10"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            40
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-37"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-38"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-10"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="4"
            min="1"
            type="number"
            value="1"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 4
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-39"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-40"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render custom start end 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination"
    data-ouia-component-id="OUIA-Generated-Pagination-top-10"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        40
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-11"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            5 - 15
          </b>
           of 
          <b>
            40
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-45"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-46"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-12"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="4"
            min="1"
            type="number"
            value="1"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 4
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-47"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-48"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render empty per page options 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination"
    data-ouia-component-id="OUIA-Generated-Pagination-top-9"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        40
      </b>
       
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-41"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-42"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-11"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="4"
            min="1"
            type="number"
            value="1"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 4
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-43"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-44"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render last page 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination"
    data-ouia-component-id="OUIA-Generated-Pagination-top-7"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        11 - 20
      </b>
       of 
      <b>
        20
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-9"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            11 - 20
          </b>
           of 
          <b>
            20
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-33"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-34"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-9"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="2"
            min="1"
            type="number"
            value="2"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 2
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-35"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-36"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render limited number of pages 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination"
    data-ouia-component-id="OUIA-Generated-Pagination-top-5"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 20
      </b>
       of 
      <b>
        20
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-7"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 20
          </b>
           of 
          <b>
            20
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-25"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-26"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control pf-m-disabled"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-7"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            disabled=""
            max="1"
            min="1"
            type="number"
            value="1"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 1
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-27"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-28"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render should render correctly bottom 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination pf-m-bottom"
    data-ouia-component-id="OUIA-Generated-Pagination-bottom-1"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-bottom-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-2"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-bottom-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            20
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-5"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-6"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-2"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="2"
            min="1"
            type="number"
            value="1"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 2
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-7"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-8"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render should render correctly bottom sticky 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination pf-m-bottom pf-m-sticky"
    data-ouia-component-id="OUIA-Generated-Pagination-bottom-2"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-bottom-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-5"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-bottom-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            20
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-17"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-18"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-5"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="2"
            min="1"
            type="number"
            value="1"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 2
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-19"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-20"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render should render correctly compact 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination"
    data-ouia-component-id="OUIA-Generated-Pagination-top-2"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        20
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-3"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            20
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-9"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-10"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-3"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="2"
            min="1"
            type="number"
            value="1"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 2
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-11"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-12"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render should render correctly disabled 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination"
    data-ouia-component-id="OUIA-Generated-Pagination-top-4"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        20
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-6"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        disabled=""
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            20
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-21"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-22"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control pf-m-disabled"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-6"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            disabled=""
            max="2"
            min="1"
            type="number"
            value="1"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 2
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-23"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-24"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render should render correctly sticky 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination pf-m-sticky"
    data-ouia-component-id="OUIA-Generated-Pagination-top-3"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        20
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-4"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            20
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-13"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-14"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="2"
            min="1"
            type="number"
            value="1"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 2
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-15"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-16"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render should render correctly top 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination"
    data-ouia-component-id="OUIA-Generated-Pagination-top-1"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        20
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            20
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-1"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-2"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="2"
            min="1"
            type="number"
            value="1"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 2
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-3"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-4"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render titles 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination"
    data-ouia-component-id="OUIA-Generated-Pagination-top-11"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        40
      </b>
       values
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-12"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            40
          </b>
           values
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-49"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-50"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-13"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="4"
            min="1"
            type="number"
            value="1"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 4 bookss
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-51"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-52"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render up drop direction 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination"
    data-ouia-component-id="OUIA-Generated-Pagination-top-13"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        1 - 10
      </b>
       of 
      <b>
        40
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-14"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            1 - 10
          </b>
           of 
          <b>
            40
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-57"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-58"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-15"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            max="4"
            min="1"
            type="number"
            value="1"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 4
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-59"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-60"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;

exports[`Pagination component render zero results 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-pagination"
    data-ouia-component-id="OUIA-Generated-Pagination-top-6"
    data-ouia-component-type="PF6/Pagination"
    data-ouia-safe="true"
    id="options-menu-top-pagination"
    style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-v6-c-pagination__total-items"
    >
      <b>
        0 - 0
      </b>
       of 
      <b>
        0
      </b>
       
    </div>
    <div
      class="pf-v6-c-pagination__page-menu"
    >
      <button
        aria-expanded="false"
        aria-haspopup="listbox"
        class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-8"
        data-ouia-component-type="PF6/MenuToggle"
        data-ouia-safe="true"
        id="options-menu-top-toggle"
        type="button"
      >
        <span
          class="pf-v6-c-menu-toggle__text"
        >
          <b>
            0 - 0
          </b>
           of 
          <b>
            0
          </b>
           
        </span>
        <span
          class="pf-v6-c-menu-toggle__controls"
        >
          <span
            class="pf-v6-c-menu-toggle__toggle-icon"
          >
            <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>
        </span>
      </button>
    </div>
    <nav
      aria-label="Pagination"
      class="pf-v6-c-pagination__nav"
    >
      <div
        class="pf-v6-c-pagination__nav-control pf-m-first"
      >
        <button
          aria-disabled="false"
          aria-label="Go to first page"
          class="pf-v6-c-button pf-m-plain"
          data-action="first"
          data-ouia-component-id="OUIA-Generated-Button-plain-29"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to previous page"
          class="pf-v6-c-button pf-m-plain"
          data-action="previous"
          data-ouia-component-id="OUIA-Generated-Button-plain-30"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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
        class="pf-v6-c-pagination__nav-page-select"
      >
        <span
          class="pf-v6-c-form-control pf-m-disabled"
        >
          <input
            aria-invalid="false"
            aria-label="Current page"
            data-ouia-component-id="OUIA-Generated-TextInputBase-8"
            data-ouia-component-type="PF6/TextInput"
            data-ouia-safe="true"
            disabled=""
            max="0"
            min="1"
            type="number"
            value="0"
          />
        </span>
        <span
          aria-hidden="true"
        >
          of 0
        </span>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control"
      >
        <button
          aria-disabled="false"
          aria-label="Go to next page"
          class="pf-v6-c-button pf-m-plain"
          data-action="next"
          data-ouia-component-id="OUIA-Generated-Button-plain-31"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__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>
        </button>
      </div>
      <div
        class="pf-v6-c-pagination__nav-control pf-m-last"
      >
        <button
          aria-disabled="false"
          aria-label="Go to last page"
          class="pf-v6-c-button pf-m-plain"
          data-action="last"
          data-ouia-component-id="OUIA-Generated-Button-plain-32"
          data-ouia-component-type="PF6/Button"
          data-ouia-safe="true"
          disabled=""
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <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>
    </nav>
  </div>
</DocumentFragment>
`;