@c2n/pagination 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+# @c2n/pagination
+
+Pagination built with Lit: page navigation for a list, a table or search results, in three layouts.
+
+```bash
+npm install @c2n/pagination
+```
+
+```html
+<script type="module">
+  import '@c2n/pagination'
+</script>
+
+<!-- Numbered: previous/next around the page numbers -->
+<c2-pagination total-items="240" page-size="10" page="4"></c2-pagination>
+
+<!-- Simple: previous/next around a page status -->
+<c2-pagination variant="simple" total-pages="12" page="3"></c2-pagination>
+
+<!-- Compact: the table-footer row -->
+<c2-pagination variant="compact" total-items="100" page-size="10" page="3"></c2-pagination>
+```
+
+```js
+document.querySelector('c2-pagination').addEventListener('page-change', (event) => {
+  const { startIndex, endIndex } = event.detail
+  render(rows.slice(startIndex, endIndex))
+})
+```
+
+- **Variants**: `numbered` (default), `simple` and `compact`. `hide-nav-labels` keeps the chevrons and drops the visible "Previous"/"Next" text, and `hide-page-size` / `hide-range` strip the compact row down.
+- **Range**: `total-items` + `page-size`, or `total-pages` when the item count is unknown. The element owns `page`, reflects it and clamps it, so listening to `page-change` is enough.
+- **Numbers shown**: `boundary-count` (default `1`) pins numbers at each end, `sibling-count` (default `1`) surrounds the current page; the rest collapses into an ellipsis, and an ellipsis standing for a single page is replaced by that page, so the row keeps the same number of slots as the current page moves.
+- **Ellipsis**: a button, not decoration — it jumps into the middle of the pages it hides (`1 … 9` jumps to 5) and shows the direction on hover and focus. `jump-label-template` names it.
+- **One row**: the controls never wrap. Numbers that do not fit the host's width are shed (siblings first, then boundaries) and come back when the container grows; only the three groups of the `compact` variant may drop onto a second line. Because `boundary-count="1"` keeps the first and last page one click away, `show-first-last` is for `simple` and `compact` — or for `boundary-count="0"`.
+- **Rows per page**: the `compact` variant uses a `c2-select` (registered by this package) fed by `page-size-options`. Picking another size keeps the first item of the current page on screen and fires `page-size-change`.
+- **Inside a `c2-table`**: slotted into the table's `footer` the pager becomes a controlled view — the table owns `page`, `page-size` and `total-items` and feeds them through the `@c2n/core` pager context, so nothing needs wiring up. Anywhere else it keeps managing its own state.
+- **Events**: `page-change` (`page`, `previousPage`, `pageSize`, `pageCount`, `startIndex`, `endIndex`) and `page-size-change` (`pageSize`, `previousPageSize`, `page`).
+- **Text**: every label is an attribute — `previous-label`, `next-label`, `first-label`, `last-label`, `page-size-label` — plus `range-template` (`{start}`, `{end}`, `{total}`), `page-template` (`{page}`, `{pageCount}`), `page-label-template` (`{page}`) and `jump-label-template` (`{page}`, `{from}`, `{to}`, `{count}`).
+- **Accessibility**: a `nav` landmark named "Pagination" (`aria-label` overrides), `aria-current="page"` on the current number, polite live regions for the status text, and focus handed to the opposite control when the one just pressed reaches an end.
+
+`--c2-pagination__item--*` styles the page numbers (`__selected` the current one), `--c2-pagination__nav--*` the previous/next/first/last controls, `--c2-pagination__label--*` the status text and rows-per-page label, and `--c2-pagination--justify-content` places the row in the host's width. The rows-per-page select wears those same variables. The full list is in `custom-elements.json` and on the docs site.

package/dist/pagination.js

@@ -0,0 +1,549 @@
+import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { classMap } from "lit/directives/class-map.js";
+import { repeat } from "lit/directives/repeat.js";
+import { consume } from "@lit/context";
+import { PAGER_CONNECT_EVENT, pagerContext } from "@c2n/core/contexts/pager.js";
+import "@c2n/select";
+import "@c2n/list-item";
+//#region src/pagination.scss?inline
+var pagination_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: var(--c2-pagination--justify-content,flex-start);\n  gap: var(--c2-pagination--section-gap,24px);\n  min-width: 0;\n}\n\n.c2-pagination-list {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: var(--c2-pagination--gap,4px);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  min-width: 0;\n  overflow: hidden;\n}\n.c2-pagination-list.is-measuring {\n  visibility: hidden;\n}\n.c2-pagination-list > li {\n  display: inline-flex;\n  flex: none;\n}\n\n.c2-pagination-arrows {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--c2-pagination--gap,4px);\n}\n\n.c2-pagination-control {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  flex: none;\n  height: var(--c2-pagination__item--height,36px);\n  margin: 0;\n  font-family: inherit;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;\n}\n.c2-pagination-control:focus-visible {\n  outline: var(--c2-pagination__item__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-pagination__item__focus--outline-offset,1px);\n}\n.c2-pagination-control:disabled {\n  opacity: var(--c2-pagination__item__disabled--opacity,0.38);\n  cursor: default;\n}\n\n.c2-pagination-item {\n  min-width: var(--c2-pagination__item--min-width,36px);\n  padding-left: var(--c2-pagination__item--padding-left,8px);\n  padding-right: var(--c2-pagination__item--padding-right,8px);\n  color: var(--c2-pagination__item--color,#18181b);\n  background-color: var(--c2-pagination__item--background-color,transparent);\n  border: var(--c2-pagination__item--border,1px solid transparent);\n  border-radius: var(--c2-pagination__item--border-radius,8px);\n  font-size: var(--c2-pagination__item--font-size,14px);\n  font-weight: var(--c2-pagination__item--font-weight,500);\n}\n.c2-pagination-item:hover:not(:disabled):not([aria-current]) {\n  color: var(--c2-pagination__item__hover--color,#18181b);\n  background-color: var(--c2-pagination__item__hover--background-color,#f4f4f5);\n  border: var(--c2-pagination__item__hover--border,1px solid transparent);\n}\n.c2-pagination-item[aria-current] {\n  color: var(--c2-pagination__item__selected--color,#18181b);\n  background-color: var(--c2-pagination__item__selected--background-color,#ffffff);\n  border: var(--c2-pagination__item__selected--border,1px solid #e4e4e7);\n  font-weight: var(--c2-pagination__item__selected--font-weight,500);\n  cursor: default;\n}\n\n.c2-pagination-nav {\n  gap: var(--c2-pagination__nav--gap,6px);\n  min-width: var(--c2-pagination__item--min-width,36px);\n  padding-left: var(--c2-pagination__nav--padding-left,10px);\n  padding-right: var(--c2-pagination__nav--padding-right,10px);\n  color: var(--c2-pagination__nav--color,#18181b);\n  background-color: var(--c2-pagination__nav--background-color,transparent);\n  border: var(--c2-pagination__nav--border,1px solid transparent);\n  border-radius: var(--c2-pagination__nav--border-radius,8px);\n  font-size: var(--c2-pagination__nav--font-size,14px);\n  font-weight: var(--c2-pagination__nav--font-weight,500);\n}\n.c2-pagination-nav:hover:not(:disabled) {\n  color: var(--c2-pagination__nav__hover--color,#18181b);\n  background-color: var(--c2-pagination__nav__hover--background-color,#f4f4f5);\n  border: var(--c2-pagination__nav__hover--border,1px solid transparent);\n}\n\n:host([variant=compact]) .c2-pagination-nav {\n  min-width: var(--c2-pagination__item--height,36px);\n  padding-left: 0;\n  padding-right: 0;\n}\n\n.c2-pagination-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  color: var(--c2-pagination__icon--color);\n}\n.c2-pagination-icon svg,\n.c2-pagination-icon ::slotted(*) {\n  width: var(--c2-pagination__icon--size,16px);\n  height: var(--c2-pagination__icon--size,16px);\n  display: block;\n}\n.c2-pagination-icon {\n  --c2-feather-icon--size: var(--c2-pagination__icon--size,16px);\n  --c2-mat-icon--font-size: var(--c2-pagination__icon--size,16px);\n}\n\n.c2-pagination-ellipsis {\n  min-width: var(--c2-pagination__ellipsis--min-width,36px);\n  padding: 0;\n  color: var(--c2-pagination__ellipsis--color,#71717a);\n  background-color: var(--c2-pagination__item--background-color,transparent);\n  border: var(--c2-pagination__item--border,1px solid transparent);\n  border-radius: var(--c2-pagination__item--border-radius,8px);\n  font-size: var(--c2-pagination__item--font-size,14px);\n  user-select: none;\n}\n.c2-pagination-ellipsis .c2-pagination-ellipsis-jump {\n  display: none;\n}\n.c2-pagination-ellipsis:hover:not(:disabled), .c2-pagination-ellipsis:focus-visible {\n  color: var(--c2-pagination__item__hover--color,#18181b);\n  background-color: var(--c2-pagination__item__hover--background-color,#f4f4f5);\n  border: var(--c2-pagination__item__hover--border,1px solid transparent);\n}\n.c2-pagination-ellipsis:hover:not(:disabled) .c2-pagination-ellipsis-dots, .c2-pagination-ellipsis:focus-visible .c2-pagination-ellipsis-dots {\n  display: none;\n}\n.c2-pagination-ellipsis:hover:not(:disabled) .c2-pagination-ellipsis-jump, .c2-pagination-ellipsis:focus-visible .c2-pagination-ellipsis-jump {\n  display: inline-flex;\n}\n\n.c2-pagination-label,\n.c2-pagination-status {\n  display: inline-flex;\n  align-items: center;\n  color: var(--c2-pagination__label--color,#71717a);\n  font-size: var(--c2-pagination__label--font-size,14px);\n  font-weight: var(--c2-pagination__label--font-weight,500);\n  white-space: nowrap;\n}\n\n.c2-pagination-page-size {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--c2-pagination__label--gap,8px);\n}\n\n.c2-pagination-page-size-select {\n  --c2-select__button--background: var(--c2-pagination__item--background-color,transparent);\n  --c2-select__button--color: var(--c2-pagination__item--color,#18181b);\n  --c2-select__button--font-size: var(--c2-pagination__label--font-size,14px);\n  --c2-select__button--font-weight: var(--c2-pagination__label--font-weight,500);\n  --c2-select__button--min-height: 32px;\n  --c2-select__button--padding: 4px 4px 4px 8px;\n  --c2-select__button--gap: 2px;\n  --c2-select__button--border-top: none;\n  --c2-select__button--border-right: none;\n  --c2-select__button--border-bottom: none;\n  --c2-select__button--border-left: none;\n  --c2-select__button__hover--border-top: none;\n  --c2-select__button__hover--border-right: none;\n  --c2-select__button__hover--border-bottom: none;\n  --c2-select__button__hover--border-left: none;\n  --c2-select__button__open--border-top: none;\n  --c2-select__button__open--border-right: none;\n  --c2-select__button__open--border-bottom: none;\n  --c2-select__button__open--border-left: none;\n  --c2-select__button__hover--background: var(--c2-pagination__item__hover--background-color,#f4f4f5);\n  --c2-select__button--border-top-left-radius: var(--c2-pagination__item--border-radius,8px);\n  --c2-select__button--border-top-right-radius: var(--c2-pagination__item--border-radius,8px);\n  --c2-select__button--border-bottom-left-radius: var(--c2-pagination__item--border-radius,8px);\n  --c2-select__button--border-bottom-right-radius: var(--c2-pagination__item--border-radius,8px);\n  --c2-select__button__focus--outline: var(--c2-pagination__item__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  --c2-select__button__suffix-icon--color: var(--c2-pagination__label--color,#71717a);\n  --c2-select__button__suffix-icon--width: 14px;\n  --c2-select__button__suffix-icon--height: 14px;\n  --c2-select__list--min-width: var(--c2-pagination__page-size-list--min-width,56px);\n  --c2-list-item--font-size: var(--c2-pagination__label--font-size,14px);\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/pagination.ts
+var DEFAULT_PAGE_SIZE_OPTIONS = [
+	10,
+	25,
+	50,
+	100
+];
+/** `page-size-options="10,25,50"`; invalid and non-positive entries are dropped. */
+var numberListConverter = {
+	toAttribute: (value) => Array.isArray(value) && value.length > 0 ? value.join(",") : null,
+	fromAttribute: (value) => (value ?? "").split(",").map((entry) => Number(entry.trim())).filter((entry) => Number.isFinite(entry) && entry > 0)
+};
+/** Substitutes `{page}`, `{pageCount}`, `{start}`, `{end}` and `{total}` in a label template. */
+function format(template, values) {
+	return template.replace(/\{(\w+)\}/g, (match, key) => key in values ? String(values[key]) : match);
+}
+function range(start, end) {
+	return Array.from({ length: Math.max(0, end - start + 1) }, (_, index) => start + index);
+}
+var chevronLeft = html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="15 18 9 12 15 6"></polyline>
+</svg>`;
+var chevronRight = html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="9 18 15 12 9 6"></polyline>
+</svg>`;
+var chevronsLeft = html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="11 17 6 12 11 7"></polyline>
+  <polyline points="18 17 13 12 18 7"></polyline>
+</svg>`;
+var chevronsRight = html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="13 17 18 12 13 7"></polyline>
+  <polyline points="6 17 11 12 6 7"></polyline>
+</svg>`;
+var Pagination = class Pagination extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "numbered";
+		this.page = 1;
+		this.pageSize = 10;
+		this.totalItems = 0;
+		this.totalPages = 0;
+		this.siblingCount = 1;
+		this.boundaryCount = 1;
+		this.pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS;
+		this.hidePageSize = false;
+		this.hideRange = false;
+		this.showFirstLast = false;
+		this.hideNavLabels = false;
+		this.disabled = false;
+		this.previousLabel = "Previous";
+		this.nextLabel = "Next";
+		this.firstLabel = "First";
+		this.lastLabel = "Last";
+		this.pageSizeLabel = "Rows per page:";
+		this.rangeTemplate = "{start}–{end} of {total}";
+		this.pageTemplate = "Page {page} of {pageCount}";
+		this.pageLabelTemplate = "Go to page {page}";
+		this.jumpLabelTemplate = "Jump to page {page}, skipping {count} pages";
+		this.lastPressedNav = null;
+		this.maxNumbers = null;
+		this.measuring = false;
+		this.measuredWidth = -1;
+	}
+	static {
+		this.styles = unsafeCSS(pagination_default);
+	}
+	/** Number of pages, from `total-pages` when given, otherwise from `total-items` and `page-size`. At least 1. */
+	get pageCount() {
+		if (this.totalPages > 0) return Math.max(1, Math.floor(this.totalPages));
+		const size = Math.max(1, Math.floor(this.pageSize));
+		if (this.totalItems > 0) return Math.max(1, Math.ceil(this.totalItems / size));
+		return 1;
+	}
+	/** `page` clamped to `1..pageCount`; this is the page the element actually shows. */
+	get currentPage() {
+		return Math.min(Math.max(1, Math.floor(this.page) || 1), this.pageCount);
+	}
+	/** Zero-based index of the first item of the current page. */
+	get startIndex() {
+		return (this.currentPage - 1) * Math.max(1, Math.floor(this.pageSize));
+	}
+	/** Zero-based index after the last item of the current page; equals `startIndex` when the total is unknown. */
+	get endIndex() {
+		if (this.totalItems <= 0) return this.startIndex;
+		return Math.min(this.totalItems, this.startIndex + Math.max(1, Math.floor(this.pageSize)));
+	}
+	/**
+	* The page numbers and ellipses actually rendered: the requested `sibling-count` / `boundary-count`, narrowed by
+	* whatever the measured width allows (see `measure`). Reading it tells you what the row shows right now.
+	*/
+	get items() {
+		let sibling = Math.max(0, Math.floor(this.siblingCount));
+		let boundary = Math.max(0, Math.floor(this.boundaryCount));
+		let items = this.itemsFor(sibling, boundary);
+		if (this.maxNumbers === null) return items;
+		while (items.filter((item) => item.kind === "page").length > this.maxNumbers && (sibling > 0 || boundary > 0)) {
+			if (sibling > 0) sibling--;
+			else boundary--;
+			items = this.itemsFor(sibling, boundary);
+		}
+		return items;
+	}
+	/**
+	* The page numbers and ellipses for one pair of counts: both ends show `boundary` numbers, the current page shows
+	* `sibling` numbers on each side, and everything left over collapses into an ellipsis. An ellipsis standing for a
+	* single page is replaced by that page, so the row never grows a gap it did not need, and the number of slots stays
+	* the same as the current page moves.
+	*/
+	itemsFor(sibling, boundary) {
+		const count = this.pageCount;
+		const page = this.currentPage;
+		const startPages = range(1, Math.min(boundary, count));
+		const endPages = range(Math.max(count - boundary + 1, boundary + 1), count);
+		const siblingsStart = Math.max(Math.min(page - sibling, count - boundary - sibling * 2 - 1), boundary + 2);
+		const siblingsEnd = Math.min(Math.max(page + sibling, boundary + sibling * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : count - 1);
+		const pages = [
+			...startPages,
+			...siblingsStart > boundary + 2 ? ["start-ellipsis"] : boundary + 1 < count - boundary ? [boundary + 1] : [],
+			...range(siblingsStart, siblingsEnd),
+			...siblingsEnd < count - boundary - 1 ? ["end-ellipsis"] : count - boundary > boundary ? [count - boundary] : [],
+			...endPages
+		];
+		return pages.map((entry, index) => {
+			if (typeof entry === "number") return {
+				kind: "page",
+				page: entry
+			};
+			const before = pages[index - 1];
+			const after = pages[index + 1];
+			const from = typeof before === "number" ? before + 1 : 1;
+			const to = typeof after === "number" ? after - 1 : count;
+			return {
+				kind: "ellipsis",
+				key: entry,
+				from,
+				to,
+				target: Math.floor((from + to) / 2)
+			};
+		});
+	}
+	/** Show `page`, clamped to the available range. Fires `page-change` when the page actually moves. */
+	goToPage(page) {
+		const previousPage = this.currentPage;
+		const next = Math.min(Math.max(1, Math.floor(page) || 1), this.pageCount);
+		if (next === previousPage && next === this.page) return;
+		this.page = next;
+		this.pagerHost?.pageChanged(next);
+		if (next === previousPage) return;
+		this.dispatchEvent(new CustomEvent("page-change", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				page: next,
+				previousPage,
+				pageSize: this.pageSize,
+				pageCount: this.pageCount,
+				startIndex: this.startIndex,
+				endIndex: this.endIndex
+			}
+		}));
+	}
+	handleNav(target, control) {
+		if (this.disabled) return;
+		this.lastPressedNav = control;
+		this.goToPage(target);
+	}
+	/** Picking another page size keeps the first item of the current page on screen, the way a table footer does. */
+	handlePageSizeChange(event) {
+		const detail = event.detail;
+		const next = Number(detail.value[0]);
+		const previousPageSize = this.pageSize;
+		if (!Number.isFinite(next) || next <= 0 || next === previousPageSize) return;
+		const firstItem = this.startIndex;
+		const previousPage = this.currentPage;
+		this.pageSize = next;
+		this.page = Math.floor(firstItem / next) + 1;
+		this.pagerHost?.pageSizeChanged(next);
+		const page = this.currentPage;
+		this.dispatchEvent(new CustomEvent("page-size-change", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				pageSize: next,
+				previousPageSize,
+				page
+			}
+		}));
+		if (page !== previousPage) this.dispatchEvent(new CustomEvent("page-change", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				page,
+				previousPage,
+				pageSize: next,
+				pageCount: this.pageCount,
+				startIndex: this.startIndex,
+				endIndex: this.endIndex
+			}
+		}));
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.announce();
+		if (isServer || typeof ResizeObserver === "undefined") return;
+		this.resizeObserver ??= new ResizeObserver((entries) => {
+			const width = entries[0]?.contentRect.width ?? 0;
+			if (Math.abs(width - this.measuredWidth) > .5) this.requestMeasure();
+		});
+		this.resizeObserver.observe(this);
+		this.retryAnnounce();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.resizeObserver?.disconnect();
+		this.pagerHost = void 0;
+	}
+	announce() {
+		this.dispatchEvent(new CustomEvent(PAGER_CONNECT_EVENT, {
+			bubbles: true,
+			composed: true,
+			detail: { pageSize: this.pageSize }
+		}));
+	}
+	/**
+	* A host that has not been upgraded yet hears nothing: both the connect event and the context request reach the
+	* document and die. That happens whenever this module is evaluated before the host's, which is a bundler's choice,
+	* not the author's — so wait for every custom-element ancestor to be defined and then ask once more.
+	*/
+	async retryAnnounce() {
+		if (isServer) return;
+		const pending = [];
+		for (let node = this.parentOf(this); node; node = this.parentOf(node)) {
+			const tag = node.localName;
+			if (tag.includes("-") && !customElements.get(tag)) pending.push(customElements.whenDefined(tag));
+		}
+		if (pending.length === 0) return;
+		await Promise.all(pending);
+		if (this.isConnected && !this.pagerHost) this.announce();
+	}
+	parentOf(node) {
+		const root = node.parentNode;
+		return node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+	}
+	/** A hosted pager shows the host's paging state, not its own; its own properties are only the standalone fallback. */
+	willUpdate(_changed) {
+		const host = this.pagerHost;
+		if (!host) return;
+		this.page = host.page;
+		this.pageSize = host.pageSize;
+		this.totalItems = host.totalItems;
+		this.disabled = host.busy;
+	}
+	/** Start over from the requested counts, so a container that grew back gets its page numbers back. */
+	requestMeasure() {
+		if (isServer || !this.isConnected || this.variant === "compact") return;
+		this.maxNumbers = null;
+		this.measuring = true;
+	}
+	updated(changed) {
+		if (changed.has("variant") || changed.has("siblingCount") || changed.has("boundaryCount") || changed.has("showFirstLast") || changed.has("hideNavLabels")) this.requestMeasure();
+		if (this.measuring) this.measure();
+		this.restoreFocus();
+	}
+	/**
+	* The row never wraps, so when the requested page numbers do not fit the host, work out how many do and let `items`
+	* shed siblings and boundaries until they do. One pass: the widest rendered number plus a gap is the cost of a slot,
+	* and the overflow divided by that is how many slots have to go. Runs before paint, so there is no flicker.
+	*/
+	measure() {
+		const list = this.list;
+		this.measuring = false;
+		if (!list) return;
+		this.measuredWidth = this.getBoundingClientRect().width;
+		const available = list.clientWidth + .5;
+		const total = list.scrollWidth;
+		const numbers = [...list.querySelectorAll(".c2-pagination-item")];
+		if (total <= available || numbers.length === 0) return;
+		const gap = parseFloat(getComputedStyle(list).columnGap) || 0;
+		const slot = Math.max(...numbers.map((number) => number.getBoundingClientRect().width)) + gap;
+		const drop = slot > 0 ? Math.ceil((total - available) / slot) : numbers.length;
+		this.maxNumbers = Math.max(1, numbers.length - drop);
+	}
+	/**
+	* Reaching the first or the last page disables the control that was just pressed, which would otherwise drop focus
+	* to the document. Hand it to the opposite control so the keyboard user stays in the pagination.
+	*/
+	restoreFocus() {
+		const pressed = this.lastPressedNav;
+		if (!pressed) return;
+		this.lastPressedNav = null;
+		const active = this.shadowRoot?.activeElement;
+		const button = this.shadowRoot?.querySelector(`[data-nav="${pressed}"]`);
+		if (!button || button !== active || !button.disabled) return;
+		this.shadowRoot?.querySelector(`[data-nav="${pressed === "previous" ? "next" : "previous"}"]`)?.focus();
+	}
+	renderNav(control, target, disabled, icon, label) {
+		const isPrevNext = control === "previous" || control === "next";
+		const showLabel = isPrevNext && !this.hideNavLabels && this.variant !== "compact";
+		return html`<button
+      class="c2-pagination-control c2-pagination-nav"
+      part="nav"
+      type="button"
+      data-nav=${control}
+      aria-label=${label}
+      ?disabled=${disabled || this.disabled}
+      @click=${() => this.handleNav(target, isPrevNext ? control : null)}
+    >
+      ${control === "next" || control === "last" ? nothing : html`<span class="c2-pagination-icon"><slot name="${control}-icon">${icon}</slot></span>`}
+      ${showLabel ? html`<span class="c2-pagination-nav-label">${label}</span>` : nothing}
+      ${control === "next" || control === "last" ? html`<span class="c2-pagination-icon"><slot name="${control}-icon">${icon}</slot></span>` : nothing}
+    </button>`;
+	}
+	renderPrevious(page) {
+		return this.renderNav("previous", page - 1, page <= 1, chevronLeft, this.previousLabel);
+	}
+	renderNext(page, count) {
+		return this.renderNav("next", page + 1, page >= count, chevronRight, this.nextLabel);
+	}
+	renderPages(page) {
+		return repeat(this.items, (item) => item.kind === "page" ? `page-${item.page}` : item.key, (item) => item.kind === "ellipsis" ? html`<li>${this.renderEllipsis(item)}</li>` : html`<li>
+              <button
+                class="c2-pagination-control c2-pagination-item"
+                part="item"
+                type="button"
+                aria-label=${format(this.pageLabelTemplate, { page: item.page })}
+                aria-current=${item.page === page ? "page" : nothing}
+                ?disabled=${this.disabled}
+                @click=${() => this.handleNav(item.page, null)}
+              >
+                ${item.page}
+              </button>
+            </li>`);
+	}
+	/**
+	* The ellipsis is a control, not decoration: it jumps into the middle of the pages it hides, which is the only way
+	* to reach them in one move once the row has shed its numbers. It reads as "…" until it is hovered or focused, and
+	* then shows the direction it will take you, so the affordance is visible before the click.
+	*/
+	renderEllipsis(item) {
+		const backwards = item.key === "start-ellipsis";
+		return html`<button
+      class="c2-pagination-control c2-pagination-ellipsis"
+      part="ellipsis"
+      type="button"
+      aria-label=${format(this.jumpLabelTemplate, {
+			page: item.target,
+			from: item.from,
+			to: item.to,
+			count: item.to - item.from + 1
+		})}
+      ?disabled=${this.disabled}
+      @click=${() => this.handleNav(item.target, null)}
+    >
+      <span class="c2-pagination-ellipsis-dots" aria-hidden="true">…</span>
+      <span class="c2-pagination-ellipsis-jump c2-pagination-icon" aria-hidden="true">${backwards ? chevronsLeft : chevronsRight}</span>
+    </button>`;
+	}
+	renderNumbered(page, count) {
+		return html`<ul class=${classMap({
+			"c2-pagination-list": true,
+			"is-measuring": this.measuring
+		})}>
+      ${this.showFirstLast ? html`<li>${this.renderNav("first", 1, page <= 1, chevronsLeft, this.firstLabel)}</li>` : nothing}
+      <li>${this.renderPrevious(page)}</li>
+      ${this.renderPages(page)}
+      <li>${this.renderNext(page, count)}</li>
+      ${this.showFirstLast ? html`<li>${this.renderNav("last", count, page >= count, chevronsRight, this.lastLabel)}</li>` : nothing}
+    </ul>`;
+	}
+	renderSimple(page, count) {
+		return html`<ul class=${classMap({
+			"c2-pagination-list": true,
+			"is-measuring": this.measuring
+		})}>
+      ${this.showFirstLast ? html`<li>${this.renderNav("first", 1, page <= 1, chevronsLeft, this.firstLabel)}</li>` : nothing}
+      <li>${this.renderPrevious(page)}</li>
+      <li class="c2-pagination-status" part="label" aria-live="polite">${format(this.pageTemplate, {
+			page,
+			pageCount: count
+		})}</li>
+      <li>${this.renderNext(page, count)}</li>
+      ${this.showFirstLast ? html`<li>${this.renderNav("last", count, page >= count, chevronsRight, this.lastLabel)}</li>` : nothing}
+    </ul>`;
+	}
+	renderPageSize() {
+		if (this.hidePageSize || this.pageSizeOptions.length === 0) return nothing;
+		const options = this.pageSizeOptions.includes(this.pageSize) ? this.pageSizeOptions : [...this.pageSizeOptions, this.pageSize].sort((a, b) => a - b);
+		return html`<div class="c2-pagination-page-size">
+      <span class="c2-pagination-label" part="label">${this.pageSizeLabel}</span>
+      <c2-select
+        class="c2-pagination-page-size-select"
+        part="page-size"
+        aria-label=${this.pageSizeLabel.replace(/\s*:\s*$/, "")}
+        ?disabled=${this.disabled}
+        .value=${[String(this.pageSize)]}
+        @selection-change=${this.handlePageSizeChange}
+      >
+        ${options.map((option) => html`<c2-list-item value=${String(option)}>${option}</c2-list-item>`)}
+      </c2-select>
+    </div>`;
+	}
+	renderCompact(page, count) {
+		const total = this.totalItems;
+		const start = total > 0 ? this.startIndex + 1 : 0;
+		return html`
+      ${this.renderPageSize()}
+      ${this.hideRange ? nothing : html`<span class="c2-pagination-label c2-pagination-status" part="label" aria-live="polite"
+              >${format(this.rangeTemplate, {
+			start,
+			end: this.endIndex,
+			total
+		})}</span
+            >`}
+      <div class="c2-pagination-arrows">
+        ${this.showFirstLast ? this.renderNav("first", 1, page <= 1, chevronsLeft, this.firstLabel) : nothing} ${this.renderPrevious(page)}
+        ${this.renderNext(page, count)} ${this.showFirstLast ? this.renderNav("last", count, page >= count, chevronsRight, this.lastLabel) : nothing}
+      </div>
+    `;
+	}
+	render() {
+		const count = this.pageCount;
+		const page = this.currentPage;
+		return html`<nav class="c2-pagination" part="pagination" aria-label=${this.ariaLabel ?? "Pagination"}>
+      ${this.variant === "compact" ? this.renderCompact(page, count) : this.variant === "simple" ? this.renderSimple(page, count) : this.renderNumbered(page, count)}
+    </nav>`;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], Pagination.prototype, "variant", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], Pagination.prototype, "page", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "page-size"
+})], Pagination.prototype, "pageSize", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "total-items"
+})], Pagination.prototype, "totalItems", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "total-pages"
+})], Pagination.prototype, "totalPages", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "sibling-count"
+})], Pagination.prototype, "siblingCount", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "boundary-count"
+})], Pagination.prototype, "boundaryCount", void 0);
+__decorate([property({
+	attribute: "page-size-options",
+	converter: numberListConverter
+})], Pagination.prototype, "pageSizeOptions", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "hide-page-size"
+})], Pagination.prototype, "hidePageSize", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "hide-range"
+})], Pagination.prototype, "hideRange", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-first-last"
+})], Pagination.prototype, "showFirstLast", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "hide-nav-labels"
+})], Pagination.prototype, "hideNavLabels", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Pagination.prototype, "disabled", void 0);
+__decorate([property({
+	type: String,
+	attribute: "previous-label"
+})], Pagination.prototype, "previousLabel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "next-label"
+})], Pagination.prototype, "nextLabel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "first-label"
+})], Pagination.prototype, "firstLabel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "last-label"
+})], Pagination.prototype, "lastLabel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "page-size-label"
+})], Pagination.prototype, "pageSizeLabel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "range-template"
+})], Pagination.prototype, "rangeTemplate", void 0);
+__decorate([property({
+	type: String,
+	attribute: "page-template"
+})], Pagination.prototype, "pageTemplate", void 0);
+__decorate([property({
+	type: String,
+	attribute: "page-label-template"
+})], Pagination.prototype, "pageLabelTemplate", void 0);
+__decorate([property({
+	type: String,
+	attribute: "jump-label-template"
+})], Pagination.prototype, "jumpLabelTemplate", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aria-label"
+})], Pagination.prototype, "ariaLabel", void 0);
+__decorate([consume({
+	context: pagerContext,
+	subscribe: true
+}), state()], Pagination.prototype, "pagerHost", void 0);
+__decorate([state()], Pagination.prototype, "maxNumbers", void 0);
+__decorate([state()], Pagination.prototype, "measuring", void 0);
+__decorate([query(".c2-pagination-list")], Pagination.prototype, "list", void 0);
+Pagination = __decorate([customElement("c2-pagination")], Pagination);
+//#endregion
+export { Pagination };

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@c2n/pagination",
+  "version": "0.0.7",
+  "type": "module",
+  "main": "dist/pagination.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/pagination.d.ts",
+      "default": "./dist/pagination.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "pagination",
+    "pager",
+    "navigation",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build",
+        "../select:build",
+        "../list-item:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.7",
+    "@c2n/list-item": "0.0.7",
+    "@c2n/select": "0.0.7",
+    "@lit/context": "1.1.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
+}

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/pagination. Import once, anywhere in the program:
+//
+//     import '@c2n/pagination/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Pagination } from '@c2n/pagination'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-pagination': C2Props<Pagination>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/pagination.d.ts

@@ -0,0 +1,278 @@
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+import '@c2n/select';
+import '@c2n/list-item';
+/** Which layout the pagination renders. */
+export type PaginationVariant = 'numbered' | 'simple' | 'compact';
+export interface PageChangeEventDetail {
+    /** The page now shown, 1-based. */
+    page: number;
+    /** The page that was shown before, 1-based. */
+    previousPage: number;
+    /** Items per page at the moment of the change. */
+    pageSize: number;
+    /** Total number of pages. */
+    pageCount: number;
+    /** Zero-based index of the first item of the page: `items.slice(startIndex, endIndex)`. */
+    startIndex: number;
+    /** Zero-based index after the last item of the page. Equals `startIndex` when the total is unknown. */
+    endIndex: number;
+}
+export interface PageSizeChangeEventDetail {
+    /** Items per page now. */
+    pageSize: number;
+    /** Items per page before the change. */
+    previousPageSize: number;
+    /** The page shown after the change; the pagination keeps the first item of the old page visible. */
+    page: number;
+}
+type PaginationItem = {
+    kind: 'page';
+    page: number;
+}
+/** `from`..`to` are the pages this ellipsis hides; `target` is the one clicking it jumps to. */
+ | {
+    kind: 'ellipsis';
+    key: 'start-ellipsis' | 'end-ellipsis';
+    from: number;
+    to: number;
+    target: number;
+};
+/** Events fired by {@link Pagination}, keyed for `addEventListener`. */
+export interface PaginationEventMap {
+    'page-change': CustomEvent<PageChangeEventDetail>;
+    'page-size-change': CustomEvent<PageSizeChangeEventDetail>;
+}
+export interface Pagination {
+    addEventListener: TypedAddEventListener<Pagination, PaginationEventMap>;
+    removeEventListener: TypedRemoveEventListener<Pagination, PaginationEventMap>;
+}
+/**
+ * Page navigation for a list, a table or search results, in three layouts chosen with `variant`:
+ *
+ * - `numbered` (default) — previous/next controls around the page numbers, with an ellipsis standing in for the pages
+ *   that do not fit. `sibling-count` and `boundary-count` decide how many numbers surround the current page and each
+ *   end of the range.
+ * - `simple` — previous/next around a "Page 2 of 10" status, for narrow toolbars.
+ * - `compact` — the table-footer layout: a rows-per-page select, the range of items on show ("21–30 of 100") and two
+ *   arrow buttons.
+ *
+ * `simple` and `compact` show no page numbers, so `show-first-last` adds the jumps to either end that the numbers
+ * would otherwise provide.
+ *
+ * The row of controls never wraps. When the requested page numbers do not fit the host's width, the component sheds
+ * them — siblings first, then boundaries — until they do, and puts them back when the container grows again; the
+ * current page always survives. Only the three groups of the `compact` variant may drop onto a second line.
+ *
+ * The ellipsis is a control, not decoration: it jumps into the middle of the pages it hides, which is what keeps
+ * those pages one click away once the row has shed its numbers. It shows the direction of that jump on hover and
+ * keyboard focus.
+ *
+ * How many pages there are comes from `total-items` and `page-size`, or from `total-pages` when the total item count
+ * is unknown. The element keeps `page` itself and reflects it, so listening to `page-change` is enough; setting `page`
+ * back from the outside works the same way. Every label is an attribute, and `range-template` / `page-template` /
+ * `page-label-template` hold the text around the numbers, so the whole element can be translated without a slot.
+ *
+ * @tag c2-pagination
+ *
+ * @slot previous-icon - Icon of the previous-page control. Defaults to a chevron.
+ * @slot next-icon - Icon of the next-page control. Defaults to a chevron.
+ * @slot first-icon - Icon of the first-page control (`show-first-last`). Defaults to a double chevron.
+ * @slot last-icon - Icon of the last-page control (`show-first-last`). Defaults to a double chevron.
+ *
+ * @event {CustomEvent<PageChangeEventDetail>} page-change - Fired after the shown page changes, by a control or by a page-size change. `detail.startIndex` / `detail.endIndex` slice the items of the new page.
+ * @event {CustomEvent<PageSizeChangeEventDetail>} page-size-change - Fired after the user picks another rows-per-page value.
+ *
+ * @cssproperty {pixel} [--c2-pagination--gap=4px] - Space between the controls.
+ * @cssproperty {pixel} [--c2-pagination--section-gap=24px] - Space between the groups of the `compact` variant.
+ * @cssproperty {justify-content} [--c2-pagination--justify-content=flex-start] - Where the controls sit in the host's width.
+ *
+ * @cssproperty {pixel} [--c2-pagination__item--min-width=36px]
+ * @cssproperty {pixel} [--c2-pagination__item--height=36px]
+ * @cssproperty {padding} [--c2-pagination__item--padding-left=8px]
+ * @cssproperty {padding} [--c2-pagination__item--padding-right=8px]
+ * @cssproperty {color} [--c2-pagination__item--color=#18181b]
+ * @cssproperty {color} [--c2-pagination__item--background-color=transparent]
+ * @cssproperty {border} [--c2-pagination__item--border=1px solid transparent]
+ * @cssproperty {border-radius} [--c2-pagination__item--border-radius=8px]
+ * @cssproperty {font-size} [--c2-pagination__item--font-size=14px]
+ * @cssproperty {font-weight} [--c2-pagination__item--font-weight=500]
+ * @cssproperty {color} [--c2-pagination__item__hover--color=#18181b]
+ * @cssproperty {color} [--c2-pagination__item__hover--background-color=#f4f4f5]
+ * @cssproperty {border} [--c2-pagination__item__hover--border=1px solid transparent]
+ * @cssproperty {color} [--c2-pagination__item__selected--color=#18181b]
+ * @cssproperty {color} [--c2-pagination__item__selected--background-color=#ffffff]
+ * @cssproperty {border} [--c2-pagination__item__selected--border=1px solid #e4e4e7]
+ * @cssproperty {font-weight} [--c2-pagination__item__selected--font-weight=500]
+ * @cssproperty {outline} [--c2-pagination__item__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-pagination__item__focus--outline-offset=1px]
+ * @cssproperty {opacity} [--c2-pagination__item__disabled--opacity=0.38]
+ *
+ * @cssproperty {pixel} [--c2-pagination__nav--gap=6px] - Space between a previous/next icon and its label.
+ * @cssproperty {padding} [--c2-pagination__nav--padding-left=10px]
+ * @cssproperty {padding} [--c2-pagination__nav--padding-right=10px]
+ * @cssproperty {color} [--c2-pagination__nav--color=#18181b]
+ * @cssproperty {color} [--c2-pagination__nav--background-color=transparent]
+ * @cssproperty {border} [--c2-pagination__nav--border=1px solid transparent]
+ * @cssproperty {border-radius} [--c2-pagination__nav--border-radius=8px]
+ * @cssproperty {font-size} [--c2-pagination__nav--font-size=14px]
+ * @cssproperty {font-weight} [--c2-pagination__nav--font-weight=500]
+ * @cssproperty {color} [--c2-pagination__nav__hover--color=#18181b]
+ * @cssproperty {color} [--c2-pagination__nav__hover--background-color=#f4f4f5]
+ * @cssproperty {border} [--c2-pagination__nav__hover--border=1px solid transparent]
+ *
+ * @cssproperty {pixel} [--c2-pagination__icon--size=16px]
+ * @cssproperty {color} --c2-pagination__icon--color - Defaults to the colour of the control it sits in.
+ *
+ * @cssproperty {color} [--c2-pagination__ellipsis--color=#71717a]
+ * @cssproperty {pixel} [--c2-pagination__ellipsis--min-width=36px]
+ *
+ * @cssproperty {color} [--c2-pagination__label--color=#71717a]
+ * @cssproperty {font-size} [--c2-pagination__label--font-size=14px]
+ * @cssproperty {font-weight} [--c2-pagination__label--font-weight=500]
+ * @cssproperty {pixel} [--c2-pagination__label--gap=8px] - Space between the rows-per-page label and its select.
+ * @cssproperty {pixel} [--c2-pagination__page-size-list--min-width=56px] - Floor for the rows-per-page dropdown: room for a three-digit option, so a one-digit one does not open a sliver.
+ *
+ * @internalcomponent c2-select
+ * @internalcomponent c2-list-item
+ */
+export declare class Pagination extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Layout of the controls: page numbers, a "Page 2 of 10" status, or the table-footer row. */
+    variant: PaginationVariant;
+    /** The page on show, 1-based. Reflected, and clamped to the available range. */
+    page: number;
+    /** Items per page. Together with `total-items` it decides how many pages there are. */
+    pageSize: number;
+    /** Total number of items to page through. */
+    totalItems: number;
+    /** Number of pages, when the item count is unknown. Takes precedence over `total-items`. */
+    totalPages: number;
+    /** How many page numbers are shown on each side of the current page. */
+    siblingCount: number;
+    /** How many page numbers are always shown at each end of the range. */
+    boundaryCount: number;
+    /** Rows-per-page choices of the `compact` variant. Empty hides the select. */
+    pageSizeOptions: number[];
+    /** Hide the rows-per-page select of the `compact` variant. */
+    hidePageSize: boolean;
+    /** Hide the range status ("21–30 of 100") of the `compact` variant. */
+    hideRange: boolean;
+    /**
+     * Add first-page and last-page controls around the previous/next pair. Meant for `simple` and `compact`, which show
+     * no page numbers; in the `numbered` variant the pinned boundary numbers already reach both ends, unless
+     * `boundary-count` is `0`.
+     */
+    showFirstLast: boolean;
+    /** Keep the previous/next icons but drop their visible text; the accessible name is unchanged. */
+    hideNavLabels: boolean;
+    /** Dim every control and ignore interaction. */
+    disabled: boolean;
+    /** Visible and accessible label of the previous-page control. */
+    previousLabel: string;
+    /** Visible and accessible label of the next-page control. */
+    nextLabel: string;
+    /** Visible and accessible label of the first-page control. */
+    firstLabel: string;
+    /** Visible and accessible label of the last-page control. */
+    lastLabel: string;
+    /** Text before the rows-per-page select. A trailing colon is dropped from the select's accessible name. */
+    pageSizeLabel: string;
+    /** Range status of the `compact` variant. Placeholders: `{start}`, `{end}`, `{total}`. */
+    rangeTemplate: string;
+    /** Status of the `simple` variant. Placeholders: `{page}`, `{pageCount}`. */
+    pageTemplate: string;
+    /** Accessible name of a page number. Placeholder: `{page}`. */
+    pageLabelTemplate: string;
+    /** Accessible name of an ellipsis. Placeholders: `{page}` (where it jumps), `{from}`, `{to}`, `{count}` (pages hidden). */
+    jumpLabelTemplate: string;
+    /** Accessible name of the navigation landmark. */
+    ariaLabel: string;
+    /** The nav control the user last pressed, so focus can follow it when the press disables it. */
+    private lastPressedNav;
+    /**
+     * The paging host this pager sits inside — a `c2-table` — or `undefined` when it stands alone. While it is set the
+     * pager is a controlled view: it reports every request upward and renders whatever the host pushes back.
+     */
+    private pagerHost;
+    /** Upper bound on page numbers that the measured width allows; `null` means the requested counts fit. */
+    private maxNumbers;
+    /** Render the requested counts invisibly for one frame so `measure` can read their natural width. */
+    private measuring;
+    private list?;
+    private resizeObserver?;
+    private measuredWidth;
+    /** Number of pages, from `total-pages` when given, otherwise from `total-items` and `page-size`. At least 1. */
+    get pageCount(): number;
+    /** `page` clamped to `1..pageCount`; this is the page the element actually shows. */
+    get currentPage(): number;
+    /** Zero-based index of the first item of the current page. */
+    get startIndex(): number;
+    /** Zero-based index after the last item of the current page; equals `startIndex` when the total is unknown. */
+    get endIndex(): number;
+    /**
+     * The page numbers and ellipses actually rendered: the requested `sibling-count` / `boundary-count`, narrowed by
+     * whatever the measured width allows (see `measure`). Reading it tells you what the row shows right now.
+     */
+    get items(): PaginationItem[];
+    /**
+     * The page numbers and ellipses for one pair of counts: both ends show `boundary` numbers, the current page shows
+     * `sibling` numbers on each side, and everything left over collapses into an ellipsis. An ellipsis standing for a
+     * single page is replaced by that page, so the row never grows a gap it did not need, and the number of slots stays
+     * the same as the current page moves.
+     */
+    private itemsFor;
+    /** Show `page`, clamped to the available range. Fires `page-change` when the page actually moves. */
+    goToPage(page: number): void;
+    private handleNav;
+    /** Picking another page size keeps the first item of the current page on screen, the way a table footer does. */
+    private handlePageSizeChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private announce;
+    /**
+     * A host that has not been upgraded yet hears nothing: both the connect event and the context request reach the
+     * document and die. That happens whenever this module is evaluated before the host's, which is a bundler's choice,
+     * not the author's — so wait for every custom-element ancestor to be defined and then ask once more.
+     */
+    private retryAnnounce;
+    private parentOf;
+    /** A hosted pager shows the host's paging state, not its own; its own properties are only the standalone fallback. */
+    protected willUpdate(_changed: PropertyValues): void;
+    /** Start over from the requested counts, so a container that grew back gets its page numbers back. */
+    private requestMeasure;
+    updated(changed: PropertyValues): void;
+    /**
+     * The row never wraps, so when the requested page numbers do not fit the host, work out how many do and let `items`
+     * shed siblings and boundaries until they do. One pass: the widest rendered number plus a gap is the cost of a slot,
+     * and the overflow divided by that is how many slots have to go. Runs before paint, so there is no flicker.
+     */
+    private measure;
+    /**
+     * Reaching the first or the last page disables the control that was just pressed, which would otherwise drop focus
+     * to the document. Hand it to the opposite control so the keyboard user stays in the pagination.
+     */
+    private restoreFocus;
+    private renderNav;
+    private renderPrevious;
+    private renderNext;
+    private renderPages;
+    /**
+     * The ellipsis is a control, not decoration: it jumps into the middle of the pages it hides, which is the only way
+     * to reach them in one move once the row has shed its numbers. It reads as "…" until it is hovered or focused, and
+     * then shows the direction it will take you, so the affordance is visible before the click.
+     */
+    private renderEllipsis;
+    private renderNumbered;
+    private renderSimple;
+    private renderPageSize;
+    private renderCompact;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-pagination': Pagination;
+    }
+}
+export {};
+//# sourceMappingURL=pagination.d.ts.map

package/types/src/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/pagination.ts"],"names":[],"mappings":"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"}

package/vue.d.ts

@@ -0,0 +1,55 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/pagination. Import once, anywhere in the program:
+//
+//     import '@c2n/pagination/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Pagination, PaginationEventMap } from '@c2n/pagination'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-pagination': DefineComponent<
+      C2Props<Pagination> & {
+        'page-size'?: unknown
+        'total-items'?: unknown
+        'total-pages'?: unknown
+        'sibling-count'?: unknown
+        'boundary-count'?: unknown
+        'page-size-options'?: unknown
+        'hide-page-size'?: unknown
+        'hide-range'?: unknown
+        'show-first-last'?: unknown
+        'hide-nav-labels'?: unknown
+        'previous-label'?: unknown
+        'next-label'?: unknown
+        'first-label'?: unknown
+        'last-label'?: unknown
+        'page-size-label'?: unknown
+        'range-template'?: unknown
+        'page-template'?: unknown
+        'page-label-template'?: unknown
+        'jump-label-template'?: unknown
+        'aria-label'?: unknown
+        onPageChange?: (event: PaginationEventMap['page-change']) => void
+        onPageSizeChange?: (event: PaginationEventMap['page-size-change']) => void
+        onPAGER_CONNECT_EVENT?: (event: PaginationEventMap['PAGER_CONNECT_EVENT']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}