/**
 * `<pagination-ui>` — Page navigation with prev/next buttons, page numbers, and ellipsis. Emits page-change events when buttons are clicked; visible page-number range is automatically truncated for high page counts. Use below tables, card grids, or list views; for cursor-based pagination use a custom load-more <button-ui> instead.
 *
 * @see https://ui-kit.exe.xyz/site/components/pagination
 *
 * Type declarations generated by scripts/build/dts-codegen.mjs from
 * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
 * run `npm run build:components`, then `npm run codegen:dts` to
 * regenerate; or hand-author this file fully if rich event types are
 * needed beyond what the yaml `events:` block can express.
 */

import { UIElement } from '../../core/element.js';

export interface PaginationPageChangeEventDetail {
  /** New page number. */
  page: number;
}

export type PaginationPageChangeEvent = CustomEvent<PaginationPageChangeEventDetail>;

export class UIPagination extends UIElement {
  /** Current active page number. */
  page: number;
  /** Number of page buttons to show on each side of the current page. */
  siblings: number;
  /** Universal size — threads through to every nested `<button-ui size=…>`
so pagination honors the substrate's 24/30/36 px size system
(with [density] modifier). Default `md` matches `<button-ui>`'s
default; pass `size="sm"` for a denser numbered row.
 */
  size: 'sm' | 'md' | 'lg';
  /** Total number of pages. */
  total: number;
  /** Visual variant — `default` (ghost buttons w/ hover bg) or `button` (1×1 bordered cells; active page filled). */
  variant: 'default' | 'button';

  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: UIPagination, ev: HTMLElementEventMap[K]) => unknown,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: 'page-change', listener: (ev: PaginationPageChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
}
