{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "pagination",
  "title": "Pagination",
  "type": "registry:ui",
  "description": "Page-number bar with previous/next, ellipsis collapse, and a configurable visible-window size. Pair with a data-table or any paged list.",
  "categories": [
    "navigation"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/pagination/pagination.ts",
      "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, MoreHorizontal } from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n\n/**\n * <uip-pagination> — The root pagination nav.\n */\nexport class UipPagination extends LitElement {\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n    ariaLabel: { attribute: 'aria-label' },\n  }\n\n  ariaLabel = 'Pagination'\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'pagination')\n    this.setAttribute('role', 'navigation')\n    this.setAttribute('aria-label', this.ariaLabel || 'Pagination')\n  }\n\n  render() {\n    return html`\n      <nav\n        part=\"base\"\n        data-uipkge=\"\"\n        data-slot=\"pagination\"\n        aria-label=${this.ariaLabel || 'Pagination'}\n        class=\"flex items-center gap-1\"\n      >\n        <slot></slot>\n      </nav>\n    `\n  }\n}\n\n/**\n * <uip-pagination-list> — The <ul> container for pagination items.\n */\nexport class UipPaginationList extends LitElement {\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'pagination-list')\n  }\n\n  render() {\n    return html`\n      <ul part=\"list\" data-uipkge=\"\" data-slot=\"pagination-list\" class=\"flex items-center gap-1\">\n        <slot></slot>\n      </ul>\n    `\n  }\n}\n\n/**\n * <uip-pagination-list-item> — The <li> item inside pagination list.\n */\nexport class UipPaginationListItem extends LitElement {\n  static styles = [tailwind, css`:host { display: inline-block; }`]\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'pagination-list-item')\n  }\n\n  render() {\n    return html`\n      <li part=\"item\" data-uipkge=\"\" data-slot=\"pagination-list-item\" class=\"shrink-0 list-none\">\n        <slot></slot>\n      </li>\n    `\n  }\n}\n\n/**\n * <uip-pagination-first> — Go to first page button.\n */\nexport class UipPaginationFirst extends LitElement {\n  static styles = [tailwind, css`:host { display: inline-flex; }`]\n\n  static properties = {\n    disabled: { type: Boolean, reflect: true },\n  }\n\n  disabled = false\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'pagination-first')\n  }\n\n  render() {\n    return html`\n      <button\n        type=\"button\"\n        part=\"button\"\n        aria-label=\"Go to first page\"\n        ?disabled=${this.disabled}\n        class=\"inline-flex h-9 w-9 items-center justify-center rounded-md border text-sm font-medium hover:bg-accent focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50\"\n      >\n        <slot>${icon(ChevronsLeft, 'chevrons-left', 'size-4')}</slot>\n      </button>\n    `\n  }\n}\n\n/**\n * <uip-pagination-prev> — Go to previous page button.\n */\nexport class UipPaginationPrev extends LitElement {\n  static styles = [tailwind, css`:host { display: inline-flex; }`]\n\n  static properties = {\n    disabled: { type: Boolean, reflect: true },\n  }\n\n  disabled = false\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'pagination-prev')\n  }\n\n  render() {\n    return html`\n      <button\n        type=\"button\"\n        part=\"button\"\n        aria-label=\"Go to previous page\"\n        ?disabled=${this.disabled}\n        class=\"inline-flex h-9 w-9 items-center justify-center rounded-md border text-sm font-medium hover:bg-accent focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50\"\n      >\n        <slot>${icon(ChevronLeft, 'chevron-left', 'size-4')}</slot>\n      </button>\n    `\n  }\n}\n\n/**\n * <uip-pagination-next> — Go to next page button.\n */\nexport class UipPaginationNext extends LitElement {\n  static styles = [tailwind, css`:host { display: inline-flex; }`]\n\n  static properties = {\n    disabled: { type: Boolean, reflect: true },\n  }\n\n  disabled = false\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'pagination-next')\n  }\n\n  render() {\n    return html`\n      <button\n        type=\"button\"\n        part=\"button\"\n        aria-label=\"Go to next page\"\n        ?disabled=${this.disabled}\n        class=\"inline-flex h-9 w-9 items-center justify-center rounded-md border text-sm font-medium hover:bg-accent focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50\"\n      >\n        <slot>${icon(ChevronRight, 'chevron-right', 'size-4')}</slot>\n      </button>\n    `\n  }\n}\n\n/**\n * <uip-pagination-last> — Go to last page button.\n */\nexport class UipPaginationLast extends LitElement {\n  static styles = [tailwind, css`:host { display: inline-flex; }`]\n\n  static properties = {\n    disabled: { type: Boolean, reflect: true },\n  }\n\n  disabled = false\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'pagination-last')\n  }\n\n  render() {\n    return html`\n      <button\n        type=\"button\"\n        part=\"button\"\n        aria-label=\"Go to last page\"\n        ?disabled=${this.disabled}\n        class=\"inline-flex h-9 w-9 items-center justify-center rounded-md border text-sm font-medium hover:bg-accent focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50\"\n      >\n        <slot>${icon(ChevronsRight, 'chevrons-right', 'size-4')}</slot>\n      </button>\n    `\n  }\n}\n\n/**\n * <uip-pagination-ellipsis> — Ellipsis indicator.\n */\nexport class UipPaginationEllipsis extends LitElement {\n  static styles = [tailwind, css`:host { display: inline-flex; }`]\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'pagination-ellipsis')\n  }\n\n  render() {\n    return html`\n      <span\n        part=\"ellipsis\"\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground inline-flex h-9 w-9 items-center justify-center text-sm\"\n      >\n        <slot>${icon(MoreHorizontal, 'more-horizontal', 'size-4')}</slot>\n      </span>\n    `\n  }\n}\n\ncustomElements.get('uip-pagination') || customElements.define('uip-pagination', UipPagination)\ncustomElements.get('uip-pagination-list') || customElements.define('uip-pagination-list', UipPaginationList)\ncustomElements.get('uip-pagination-list-item') || customElements.define('uip-pagination-list-item', UipPaginationListItem)\ncustomElements.get('uip-pagination-first') || customElements.define('uip-pagination-first', UipPaginationFirst)\ncustomElements.get('uip-pagination-prev') || customElements.define('uip-pagination-prev', UipPaginationPrev)\ncustomElements.get('uip-pagination-next') || customElements.define('uip-pagination-next', UipPaginationNext)\ncustomElements.get('uip-pagination-last') || customElements.define('uip-pagination-last', UipPaginationLast)\ncustomElements.get('uip-pagination-ellipsis') || customElements.define('uip-pagination-ellipsis', UipPaginationEllipsis)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-pagination': UipPagination\n    'uip-pagination-list': UipPaginationList\n    'uip-pagination-list-item': UipPaginationListItem\n    'uip-pagination-first': UipPaginationFirst\n    'uip-pagination-prev': UipPaginationPrev\n    'uip-pagination-next': UipPaginationNext\n    'uip-pagination-last': UipPaginationLast\n    'uip-pagination-ellipsis': UipPaginationEllipsis\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/pagination/pagination.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}