Pagination

<%# Markup for the pagination demo.
    Built on nav + aria-label and aria-current="page", the library handles current-page
    management, boundary control of the prev/next buttons, and firing the change event.
    Data fetching and URL rewriting are the consumer's (here demo.js just updates the
    results area). %>
<nav
  class="pagination"
  data-controller="stimeo--pagination"
  aria-label="<%= t("components.pagination.demo.label") %>"
  data-stimeo--pagination-page-value="1"
  data-stimeo--pagination-total-value="5">
  <button
    type="button"
    class="pagination__button"
    data-stimeo--pagination-target="prev"
    data-action="click->stimeo--pagination#prev">
    <%= t("components.pagination.demo.prev") %>
  </button>
  <% (1..5).each do |page| %>
    <button
      type="button"
      class="pagination__button pagination__page"
      data-page="<%= page %>"
      <%= "aria-current=\"page\"".html_safe if page == 1 %>
      data-stimeo--pagination-target="page"
      data-action="click->stimeo--pagination#select"><%= page %></button>
  <% end %>
  <button
    type="button"
    class="pagination__button"
    data-stimeo--pagination-target="next"
    data-action="click->stimeo--pagination#next">
    <%= t("components.pagination.demo.next") %>
  </button>
</nav>

<p
  class="pagination__status"
  data-pagination-status
  data-template="<%= t("components.pagination.demo.status_template") %>"
  aria-live="polite">
  <%= t("components.pagination.demo.initial_status", page: 1, total: 5) %>
</p>

/*
 * Presentation-only styles for the pagination demo.
 * The library toggles the current-page highlight via aria-current="page" and the
 * boundary disabling via the disabled attribute. The consumer's CSS just reacts to
 * those state hooks.
 */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.pagination__button {
  min-width: 2.25rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  background: var(--surface, var(--surface-card));
  color: var(--fg, var(--color-text));
  font: inherit;
  cursor: pointer;
}

.pagination__button:hover:not(:disabled):not([aria-current="page"]) {
  background: var(--surface-subtle);
}

.pagination__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pagination__button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pagination__page[aria-current="page"] {
  border-color: var(--accent, var(--color-primary));
  background: var(--accent-fill, var(--color-primary));
  color: var(--white);
  font-weight: 600;
}

.pagination__status {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

// pagination event subscription demo (consumer-side JS).
//
// The core controller (stimeo--pagination) only handles current-page state,
// aria-current sync, disabling prev/next at the boundaries, and firing its events.
// Actually swapping the list or updating the URL is the consumer's job. Here we
// update the "Page X of Y" results area from both events: `change` is a
// navigation the reader made, and `reconcile` is the page moving the current page
// itself (a new `page`, or a `total` that pulls it down), so the status follows the
// page on screen whichever side moved it.
document.querySelectorAll('[data-controller~="stimeo--pagination"]').forEach((nav) => {
  const status = nav.parentElement?.querySelector('[data-pagination-status]');
  if (!status) return;

  const template = status.dataset.template || 'Page {page} of {total}';
  const showPage = (event) => {
    const { page, total } = event.detail;
    status.textContent = template
      .replace('{page}', String(page))
      .replace('{total}', String(total));
  };
  nav.addEventListener('stimeo--pagination:change', showPage);
  nav.addEventListener('stimeo--pagination:reconcile', showPage);
});