Pagination

Build pagination as a nav.pagination whose child is an <ol> of links. It is CSS-only, with no JavaScript plugin.

Mark the current page with aria-current="page" (or the older active class on the li). Mark unavailable previous and next links with 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>

Give icon-only previous and next links an aria-label. Items are compact 2rem chips, and the current page fills with primary. To widen the control, add a <span> next to the icon:

Ellipsis

Use a non-link <span> for the gap, so it is inert and cannot be clicked.

<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. This is not the documented form. Outside a labelled <nav>, the list is a row of numbers, and nothing marks it as pagination.

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