Pagination

Pagination is CSS-only. A nav.pagination whose child is an <ol> of links. There is no JavaScript plugin.

Mark the current page with aria-current="page" (or the older active class on the li). Unavailable prev/next use aria-disabled="true" (or disabled on the li).

<nav class="pagination" aria-label="Pagination">
  <ol>
    <li>
      <a href="/p/1" aria-label="Previous page" aria-disabled="true">
        <span class="material-symbols" aria-hidden="true">chevron_left</span>
      </a>
    </li>
    <li><a href="/p/1" aria-current="page">1</a></li>
    <li><a href="/p/2">2</a></li>
    <li>
      <a href="/p/3" aria-label="Next page">
        <span class="material-symbols" aria-hidden="true">chevron_right</span>
      </a>
    </li>
  </ol>
</nav>

Items are the original compact 2rem chips. The current page fills with primary. Icon-only prev/next need an aria-label. A <span> next to the icon widens the control:

Ellipsis

A non-link <span> is an inert gap, not a target.

<li><span aria-hidden="true">…</span></li>

Nowrap

Add nowrap so a long run scrolls instead of wrapping. That replaces the old nested li.pages tree.

<nav class="pagination nowrap" aria-label="Pagination">…</nav>

List alias

A bare <ul class="pagination"> still renders. active, disabled, prev, next, and pages stay as aliases. It is not the documented form: outside a labelled <nav> the list is a row of numbers with nothing saying it paginates anything.

<ul class="pagination">
  <li class="disabled">
    <a href="#!" aria-label="Previous"><span class="material-symbols" aria-hidden="true">chevron_left</span></a>
  </li>
  <li class="active"><a href="#!">1</a></li>
</ul>