Pagination with Page Size

<!--
  The bar that sits under a data table: a range readout, a rows-per-page select
  and the two step links.

  The select is a real <select> with a real <label for>, not a custom listbox.
  Native gets the mobile wheel picker, type-ahead and the platform's own
  keyboard model for free, and none of that is worth rebuilding for a control
  with four options.

  Changing the size navigates rather than mutating in place, and resets to
  page 1 - page 5 of a 10-per-page list is nowhere in particular once the size
  becomes 50, and silently landing the user somewhere unrelated is worse than
  sending them to the top.
-->
<nav class="pgsize" aria-label="Pagination">
  <p class="pgsize__range" role="status" aria-live="polite">Showing 1&ndash;10 of 48</p>

  <div class="pgsize__controls">
    <label class="pgsize__label" for="page-size">Rows per page</label>
    <select class="pgsize__select" id="page-size" name="pageSize">
      <option value="10" selected>10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>

    <a class="pgsize__step pgsize__step--disabled" aria-disabled="true">Previous</a>
    <a class="pgsize__step" href="?page=2&amp;pageSize=10" rel="next">Next</a>
  </div>
</nav>

<script>
  (function () {
    var select = document.getElementById('page-size');

    // No JS? The select still submits with its form, or the server reads the
    // default. This only upgrades the interaction; it does not enable it.
    select.addEventListener('change', function () {
      var url = new URL(window.location.href);
      url.searchParams.set('pageSize', select.value);
      url.searchParams.set('page', '1');
      window.location.assign(url.toString());
    });
  })();
</script>